工单及自定义弹出窗口更新

Ben Lin

2024-07-20 eed29804d3973801f8eac3ad9bead1e608f05b6a

 src/views/tigerprojects/system/lowcode/detail/detail.vue

@@ -2,7 +2,15 @@
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate" preIcon="add_02|svg"> 新增 </a-button>
        <a-button
          type="primary"
          @click="handleCreate(item['DO_METHOD'])"
          :preIcon="item['ICON_URL']"
          v-for="item in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
          :key="item"
        >
          {{ item['FUNC_NAME'] }}
        </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="createActions(record)" />
@@ -32,21 +40,25 @@
  import { useDrawer } from '/@/components/Drawer';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../normalDrawer.vue';
  import { isNullOrUnDef } from '/@/utils/is';
  import { isFunction, isNullOrUnDef } from '/@/utils/is';
  import { useModal } from '/@/components/Modal';
  import { useGo } from '/@/hooks/web/usePage';
  import { DeleteEntity, getListByPage } from '/@/api/tigerapi/system';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
  import { GenerateActionButton } from '../data';
  import { getRoleButtons } from '/@/api/sys/menu';
  import { useRouter } from 'vue-router';

  const { t } = useI18n();

  const { currentRoute } = useRouter();
  const props = defineProps({
    useTableData: { type: Object as PropType<{}>, default: { table: [] } },
    entityName: { type: String },
  });
  const objParams = inject('objParams') as Ref<any>;
  const data = inject('data') as Ref<Recordable[]>;
  const others = inject('others') as Ref<Recordable[]>;
  const keyFieldValues = inject('keyFieldValues') as Ref<Recordable[]>;
  const go = useGo();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
@@ -55,14 +67,46 @@
  const dtlSlots = ref([] as any[]);
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const custImport = ref<any[]>(await import(/* @vite-ignore */ `../entityts/${props.entityName}`));
  const [{ EditeOperation, GetBaseColumns, GetSearchForm, GetCrudForm, OthersValues }] =
    custImport.value['default']();
  others.value = OthersValues(objParams['CODE'], objParams['ID']);
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
      ActionItem(params, data, ...args) {},
      EditOperation(data, d, u, item) {},
      GetBaseColumns(type: string | undefined) {},
      GetSearchForm(type: string | undefined) {},
      GetCrudForm(type: string | undefined, ...args) {},
      KeyFieldValues(val, id) {},
      GetSelectSuccess(d, u, ...args) {},
      OpenSelectItem(openItemModal: Fn, ...args) {},
    } as EntityCustFunctionType,
  ]);
  /* 动态import实体名.ts的自定义方法 */
  try {
    custImport.value = await import(`../entityts/${objParams['Name']}.ts`);
  } catch (e) {}
  const [
    {
      ActionItem: nActionItem,
      EditOperation,
      GetBaseColumns,
      GetSearchForm,
      GetCrudForm,
      KeyFieldValues,
      GetSelectSuccess,
      OpenSelectItem,
    },
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
    : custImport.value['default']();
  const buttons = ref<[]>(await getRoleButtons(currentRoute.value.meta.menuCode as string));
  keyFieldValues.value =
    KeyFieldValues && isFunction(KeyFieldValues)
      ? KeyFieldValues(objParams['CODE'], objParams['ID'])
      : [];
  const [registerTable, { getForm, reload, setProps }] = useTable({
    title: `${objParams['firstTitle']}列表`,
    api: getListByPage,
    searchInfo: { TABLE_NAME: objParams['Name'], ...objParams['others'] },
    searchInfo: { TABLE_NAME: objParams['Name'], ...objParams['keyFieldValues'] },
    columns: GetBaseColumns(),
    formConfig: {
      labelWidth: 140,
@@ -88,7 +132,7 @@
   * @description: 生成列表中操作项的按钮
   * @param {*} record
   * @return {*}
   */  
   */
  function createActions(record) {
    const params = {
      record,
@@ -103,26 +147,11 @@
      crudColSlots: colSlots.value,
      data,
    };
    const actionItem = [
      {
        icon: 'clarity:note-edit-line',
        onClick: editRecord.bind(null, openDrawer, params),
      },
      {
        icon: 'ant-design:delete-outlined',
        color: 'error',
        popConfirm: {
          title: '是否确认删除?',
          placement: 'left',
          confirm: deleteRecord.bind(null, reload, params),
        },
      },
    ];
    if (isNullOrUnDef(custImport.value)) {
    const actionItem = GenerateActionButton(params, buttons, openDrawer, reload);
    if (isNullOrUnDef(custImport.value['default'])) {
      return actionItem;
    }
    const [{ ActionItem }] = custImport.value['default']();
    return ActionItem(
    return nActionItem(
      params,
      actionItem,
      openDrawer,
@@ -135,33 +164,7 @@
    );
  }

  /**
   * @description: 公用编辑方法
   * @param {Fn} fn
   * @param {*} params
   * @return {*}
   */
  function editRecord(fn: Fn, params: {}) {
    fn(true, params);
  }

  /**
   * @description: 公用删除方法
   * @param {Fn} fn
   * @param {*} params
   * @return {*}
   */
  function deleteRecord(fn: Fn, params: {}) {
    console.log(params['record']);
    //删除
    DeleteEntity(params['record'], params['entityName']).then((action) => {
      if (action.IsSuccessed) {
        fn();
      }
    });
  }

  function handleCreate() {
  function handleCreate(fnName: string) {
    const _cruds = GetCrudForm();
    let isExistSql = '';
    for (const i in _cruds) {
@@ -169,15 +172,44 @@
        isExistSql = _cruds[i].field;
      }
    }
    openDrawer(true, {
      isUpdate: false,
      ifSave: false,
      entityName: props.entityName,
      formJson: GetCrudForm(), //getFormSchema(`${entityName.value}_Crud`),
      crudColSlots: colSlots.value,
      others: others.value,
      isExistSql: isExistSql,
    });

    if (isNullOrUnDef(custImport.value['default'])) {
      openDrawer(true, {
        isUpdate: false,
        ifSave: false,
        entityName: props.entityName,
        formJson: _cruds, //getFormSchema(`${entityName.value}_Crud`),
        crudColSlots: colSlots.value,
        keyFieldValues: keyFieldValues.value,
        isExistSql: isExistSql,
      });
    } else {
      const [{ CreateAction }] = custImport.value['default']();
      const result = CreateAction(fnName);
      switch (result.action) {
        case 'go':
          // 将对象转换为JSON字符串并保存到sessionStorage
          sessionStorage.setItem(
            `${result.params.Name}_params`,
            encodeURI(JSON.stringify(result.params)),
          );
          go(
            `/${result.url}/${encodeURI(JSON.stringify({ sName: result.params.Name, Name: result.params.Name }))}`,
          );
          break;
        case 'drawer':
          openDrawer(true, {
            isUpdate: false,
            ifSave: false,
            entityName: props.entityName,
            formJson: _cruds, //getFormSchema(`${entityName.value}_Crud`),
            crudColSlots: colSlots.value,
            keyFieldValues: keyFieldValues.value,
            isExistSql: isExistSql,
          });
          break;
      }
    }
  }

  /**
@@ -198,21 +230,7 @@
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ GetSelectSuccess }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess(d, u));
        })
        .catch(() => {
          getForm().setFieldsValue({
            ITEM_CODE: d.values['val'],
          });
        });
    } catch (e) {}
    getForm().setFieldsValue(GetSelectSuccess(d, u));
  }

  /**
@@ -221,49 +239,6 @@
   * @return {*}
   */
  function handleSelectItem(item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${props.useTableData['table'][1].getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ OpenSelectItem }] = m.default();
          OpenSelectItem(openItemModal);
        })
        .catch(() => {
          openItemModal(true, {
            title: '物料列表',
            schemas: [
              {
                field: 'ITEM_CODE',
                component: 'Input',
                label: '物料编码',
                colProps: {
                  span: 12,
                },
              },
            ],
            ItemColumns: [
              {
                title: t('物料编码'),
                dataIndex: 'ITEM_CODE',
                resizable: true,
                sorter: true,
                width: 200,
              },
              {
                title: t('物料名称'),
                dataIndex: 'ITEM_NAME',
                resizable: true,
                sorter: true,
                width: 180,
              },
            ],
            tableName: 'BAS_ITEM',
            rowKey: 'ITEM_CODE',
            searchInfo: { TABLE_NAME: 'BAS_ITEM' },
          });
        });
    } catch (e) {}
    OpenSelectItem(openItemModal);
  }
</script>