ads_web/src/views/adManage/portfolios/crud.tsx

import * as api from './api'
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
import { inject, nextTick, ref, watch } from 'vue'
import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
import emitter from '/@/utils/emitter'
import {storeToRefs} from 'pinia'
import { usePublicData } from '/@/stores/publicData'


const publicData = usePublicData()
const { dateRange } = storeToRefs(publicData)
export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {

	// 通过 update 控制趋势图刷新
	let update = 0
  const pageRequest = async (query: UserPageQuery) => {
		update++
		console.log('update', update)
		emitter.emit('protfolios-update', update)
    return await api.GetList(query)
  }
  const editRequest = async ({ form, row }: EditReq) => {
    form.id = row.id
    return await api.UpdateObj(form)
  }
  const delRequest = async ({ row }: DelReq) => {
    return await api.DelObj(row.id)
  }
  const addRequest = async ({ form }: AddReq) => {
    return await api.AddObj(form)
  }

  //权限判定
  const hasPermissions = inject('$hasPermissions')

  return {
    crudOptions: {
      table: {
        height: 800,
      },
      container: {
        fixedHeight: false,
      },
      request: {
        pageRequest,
        addRequest,
        editRequest,
        delRequest,
      },
      rowHandle: {
        fixed: 'right',
        width: 80,
        buttons: {
          view: {
            show: false,
          },
          edit: {
            iconRight: 'Edit',
            type: 'text',
            text: null,
            // show: hasPermissions('dictionary:Update'),
          },
          remove: {
            iconRight: 'Delete',
            type: 'text',
            text: null,
            // show: hasPermissions('dictionary:Delete'),
          },
          // custom: {
          // 	text: '字典配置',
          // 	type: 'text',
          // 	// show: hasPermissions('dictionary:Update'),
          // 	tooltip: {
          // 		placement: 'top',
          // 		content: '字典配置',
          // 	},
          // 	//@ts-ignore
          // 	click: (ctx: any) => {
          // 		const { row } = ctx;
          // 		context!.subDictRef.value.drawer = true;
          // 		nextTick(() => {
          // 			context!.subDictRef.value.setSearchFormData({ form: { parent: row.id } });
          // 			context!.subDictRef.value.doRefresh();
          // 		});
          // 	},
          // },
        },
      },
      actionbar: {
        buttons: {
          add: {
            text: '新建广告组合',
          },
        },
      },
      toolbar: {
        buttons: {
          search: {
            show: true,
          },
          compact: {
            show: false,
          },
        },
      },
      columns: {
        // _index: {
        // 	title: '序号',
        // 	form: { show: false },
        // 	column: {
        // 		//type: 'index',
        // 		align: 'center',
        // 		width: '70px',
        // 		columnSetDisabled: true, //禁止在列设置中选择
        // 		formatter: (context) => {
        // 			//计算序号,你可以自定义计算规则，此处为翻页累加
        // 			let index = context.index ?? 1;
        // 			let pagination = crudExpose!.crudBinding.value.pagination;
        // 			// @ts-ignore
        // 			return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
        // 		},
        // 	},
        // },
        name: {
          title: '广告组合',
          column: {
            width: '150px',
          },
          search: {
            show: true,
            component: {
              props: {
                clearable: true,
              },
            },
          },
          form: {
            rules: [{ required: true, message: '必填项' }],
          },
        },
        state: {
          title: '状态',
          type: 'dict-select',
          dict: dict({
            data: [
              { value: 'enabled', label: '投放中' },
              { value: 'disable', label: '禁用' },
            ],
          }),
          form: {
            show: false,
          },
        },
        budget_policy: {
          title: '预算类型',
          type: 'dict-select',
          dict: dict({
            data: [
              { value: '', label: '无预算上限' },
              { value: 'dateRange', label: '日期范围' },
              { value: 'monthlyRecurring', label: '按月' },
            ],
          }),
          form: {
            value: '',
          },
        },
        budget_startDate: {
          title: '开始日期',
          type: 'date',
          form: {
            show: compute((context) => context.form.budget_policy === 'dateRange'),
            rules: [{ required: true, message: '必填项' }],
          },
        },
        budget_endDate: {
          title: '结束日期',
          type: 'date',
          form: {
            show: compute((context) => context.form.budget_policy !== ''),
          },
        },
        budget_amount: {
          title: '预算',
          type: 'number',
          form: {
            value: 0,
            show: compute((context) => context.form.budget_policy !== ''),
            rules: [{ required: true, message: '必填项' }],
            component: {
              min: 0,
              precision: 2,
              controlsPosition: 'right',
            },
          },
        },
        inBudget: {
          title: '是否预算内',
          form: {
            show: false,
          },
        },
        ...BaseColumn,
      },
    },
  }
}