规则维护更新

Ben Lin

2024-09-12 a4ee6ba0ca28833cbbb8cf0e675561b10fa4c1af

 src/views/tigerprojects/system/lowcode/high/dtl.vue

@@ -1,96 +1,112 @@
<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate" preIcon="add_02|svg"> 新增 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="createActions(record)" />
      </template>
      <template #[item]="{ field }" v-for="item in colSlots" :key="item">
        <!-- <template #form-BAS_REASON3aadd="{ field }"> -->
        <a-button
          v-if="field"
          class="mt-1 ml-1"
          size="small"
          @click="handleSelectItem(item)"
          preIcon="search|svg"
        />
        <GeneralModal
          @register="registerItemAdd"
          @success="(d, u) => handleItemSuccess(d, u, item)"
        />
      </template>
    </BasicTable>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
    <a-card
      :title="GetTitle()['tableTitle'][item.name]"
      :bordered="false"
      class="!mt-5"
      v-for="(item, index) in drawers"
    >
      <BasicTable @register="useTables[item.name]">
        <template #toolbar>
          <a-button type="primary" @click="handleCreate(index, item)" preIcon="add_02|svg">
            新增
          </a-button>
        </template>
        <template #action="{ record }">
          <TableAction :actions="createActions(record, index, item)" />
        </template>
        <template #[item]="{ field }" v-for="item in colSlots" :key="item">
          <a-button
            v-if="field"
            class="mt-1 ml-1"
            size="small"
            @click="handleSelectItem(item)"
            preIcon="search|svg"
          />
          <GeneralModal
            @register="registerItemAdd"
            @success="(d, u) => handleItemSuccess(d, u, item)"
          />
        </template>
      </BasicTable>
      <normalDrawer
        @register="useDrawers[index][item.name]"
        @success="(d, u) => handleSuccess(d, u, item.name)"
      />
    </a-card>
  </div>
</template>
<script lang="ts" setup>
  import { Ref, inject, nextTick, onMounted, ref, watch } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useDrawer } from '/@/components/Drawer';
  import { Ref, inject, onMounted, ref, watch } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useForm } from '/@/components/Form/index';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../normalDrawer.vue';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { isFunction, isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { useModal } from '/@/components/Modal';
  import { useGo } from '/@/hooks/web/usePage';
  import { DeleteEntity, getEntity } from '/@/api/tigerapi/system';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Card } from 'ant-design-vue';
  import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';

  const { t } = useI18n();

  const ACard = Card;
  const emit = defineEmits(['search']);
  const props = defineProps({
    colSlots: { type: Array as PropType<any[]> },
    useTableData: { type: Object as PropType<{}>, default: { table: [] } },
    entityName: { type: String },
    crudColSlots: { type: Object as PropType<any> },
  });
  /* 主页面注入的变量 */
  const objParams = inject('objParams') as Ref<any>;
  const data = inject('data') as Ref<Recordable[]>;
  const others = inject('others') as Ref<Recordable[]>;
  const data = inject('data') as Ref<any>;
  const _useTables = inject('useTables') as Ref<any>;
  const useFormData = inject('useFormData') as Ref<{}>;
  const keyFieldValues = inject('keyFieldValues') as Ref<Recordable[]>;

  const go = useGo();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const cType = ref('');
  const dtlSlots = ref([] as any[]);
  const selectVals = ref({});
  const baseCards = ref([] as any[]);
  const otherCards = ref([] as any[]);
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const custImport = ref<any[]>(await import(/* @vite-ignore */ `../entityts/${props.entityName}`));
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
      ActionItem(params, data, ...args) {},
      EditOperation(data, d, u, item) {},
      GetCrudForm(type: string | undefined, ...args) {},
      KeyFieldValues(val, id) {},
      GetTitle(type: string | undefined) {},
      GetUseTables(data: Ref<Recordable[]>, ...args) {},
      GetUseDrawers() {},
      CustInitData(data: Ref<any[]>, keyFieldValues: Ref<{}>, type: string) {},
    } as EntityCustFunctionType,
  ]);
  /* 动态import实体名.ts的自定义方法 */
  try {
    custImport.value = await import(`../entityts/${props.entityName}.ts`);
  } catch (e) {}
  const [
    {
      EditeOperation,
      GetBaseColumns,
      GetSearchForm,
      ActionItem: nActionItem,
      EditOperation,
      GetCrudForm,
      OthersValues,
      KeyFieldValues,
      GetTitle,
      GetUseTables,
      GetUseDrawers,
      CustInitData,
    },
  ] = custImport.value['default']();
  others.value = OthersValues(objParams['CODE'], objParams['ID']);
  const [registerTable, { getForm, reload, setProps }] = useTable({
    title: '列表信息',
    dataSource: data,
    columns: GetBaseColumns(),
    formConfig: {
      labelWidth: 140,
      schemas: GetSearchForm(),
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    canResize: true,
    showIndexColumn: false,
    actionColumn: {
      width: 130,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    }, //自定义操作列
  });
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
    : custImport.value['default']();
  keyFieldValues.value = KeyFieldValues(objParams.value['CODE'], objParams.value['ID']); //获取一些其他有需要提供的值，这里是主页面跳转过来时带的关键字段值
  const drawers = ref<any[]>(objParams.value['drawers']); //是右侧边框列表，里面的name表示是哪一个实体，也就是高级表单中表格的名字，很多方法需要以这个名字为key
  const useTables = GetUseTables(data, emit); //高级表单中各个表格(Table)的useTable方法实现列表
  const useDrawers = GetUseDrawers(); //高级表单中各个表格(Table)的右侧边框(Drawer)的useDrawer方法实现列表
  _useTables.value = useTables; //把useTable的列表响应到从主页面注入的_useTables，这样主页面能拿到useTable的结果，从而可以使用各个表格的内置方法
  // watch(
  //   () => props.dataSource,
  //   (newVal, oldVal) => {
@@ -107,35 +123,75 @@
  //   { deep: true, immediate: true },
  // );

  onMounted(() => {
    getEntity({
      sqlcmd: ` ${objParams['pCode']} = '${others.value[objParams['pCode']]}'`,
      entityName: props.entityName as string,
    }).then((res) => {
      if (!isNullOrEmpty(res.Data.Items)) {
        data.value = res.Data.Items;
  /**
   * @description: 挂载组件完成时
   * @return {*}
   */
  onMounted(async () => {
    for (const i in drawers.value) {
      let sqlcmd = ' 1 =1 ';
      if (!isNullOrEmpty(keyFieldValues.value[drawers.value[i].code])) {
        sqlcmd += ` And ${drawers.value[i].code} = '${keyFieldValues.value[drawers.value[i].code]}'`;
      }
    });
      /* type: all-表示需要code的所有的值 */
      if (drawers.value[i]['type'] == 'all') {
        if (data.value[drawers.value[i]['keyName']].length > 0) {
          sqlcmd += ` And ${drawers.value[i]['code']} in (${data.value[drawers.value[i]['keyName']].map((value) => `'${value[drawers.value[i]['code']]}'`).join(',')})`;
        } else {
          sqlcmd = ' 1!=1 '; //新增的时候不查数据，查也没有
        }
      }
      const list = await getEntity({
        sqlcmd: sqlcmd,
        entityName: isNullOrEmpty(drawers.value[i].dataType)
          ? drawers.value[i].name
          : drawers.value[i].dataType,
        order: drawers.value[i].order,
      });
      if (!isNullOrEmpty(list.Data) && !isNullOrEmpty(list.Data.Items)) {
        data.value[drawers.value[i].name] = list.Data.Items;
        // 自定义初始化数据
        if (CustInitData && isFunction(CustInitData)) {
          CustInitData(data, keyFieldValues, drawers.value[i].name);
        }
        useTables[drawers.value[i].name][1].setProps({
          dataSource: [],
        });
        useTables[drawers.value[i].name][1].setProps({
          dataSource: data.value[drawers.value[i].name],
        });
        useTables[drawers.value[i].name][1].reload();
      }
    }
  });

  function createActions(record) {
  /**
   * @description: 生成列表中操作项的按钮
   * @param {*} record
   * @return {*}
   */
  function createActions(record, index, item) {
    const params = {
      record,
      isUpdate: true,
      ifSave: true,
      entityName: props.entityName,
      formJson: GetCrudForm(), //getFormSchema(`${entityName.value}_Crud`),
      cType,
      isUpdate: true, //是更新还是新增
      ifSave: objParams.value['ifSave'], //是否直接保存表单到数据库，false的话要最后一起提交
      entityName: props.entityName, //实体名称
      formJson: [], //getFormSchema(`${entityName.value}_Crud`), //表单结构
      cType, //类型，以此来确定是哪种方法或者结构，根据实际情况而定
      dtlSlots,
      useModalData,
      useFormData,
      crudColSlots: props.crudColSlots,
      crudColSlots: isNullOrUnDef(objParams.value['crudColSlots'])
        ? []
        : objParams.value['crudColSlots'][item['name']],  //插槽列表
      data,
      name: item.name, //drawers列表里面的name，表示是哪一个实体，也就是高级表单中表格的名字
      keyName: item.keyName, //实际用来确定动态引入实体.ts的实体名称
    };
    const actionItem = [
      {
        icon: 'clarity:note-edit-line',
        onClick: editRecord.bind(null, openDrawer, params),
        onClick: editRecord.bind(null, useDrawers[index][item.name][1].openDrawer, params),
      },
      {
        icon: 'ant-design:delete-outlined',
@@ -143,24 +199,22 @@
        popConfirm: {
          title: '是否确认删除?',
          placement: 'left',
          confirm: deleteRecord.bind(null, reload, params),
          confirm: deleteRecord.bind(null, useTables[item.name][1].reload, params),
        },
      },
    ];
    if (isNullOrUnDef(custImport.value)) {
      return actionItem;
    }
    const [{ ActionItem }] = custImport.value['default']();
    return ActionItem(
    return nActionItem(
      params,
      actionItem,
      openDrawer,
      reload,
      useDrawers[index][item.name][1].openDrawer,
      useTables,
      null,
      useForm,
      useModal,
      go,
      setProps,
    );
  }

@@ -204,22 +258,39 @@
    return validates;
  }

  function handleCreate() {
  /**
   * @description: 新增按钮方法
   * @param {*} index
   * @param {*} item
   * @return {*}
   */
  function handleCreate(index, item) {
    validate().then((res) => {
      const Keys = Object.getOwnPropertyNames(useFormData.value);
      let i;
      for (i = 0; i < Keys.length; i++) {
        others.value[objParams['pCode']] = objParams['IsID']
          ? res[Keys[i]]['ID']
          : res[Keys[i]][objParams['pCode']];
      for (const i in Keys) {
        const _Keys = Object.getOwnPropertyNames(res[Keys[i]]);
        for (const j in _Keys) {
          if (_Keys[j] == item['code']) {
            keyFieldValues.value[item['code']] = objParams.value['IsID']
              ? res[Keys[i]]['ID']
              : res[Keys[i]][item['code']];
          } else if (_Keys[j] != 'ID') {
            keyFieldValues.value[_Keys[j]] = res[Keys[i]][_Keys[j]];
          }
        }
      }
      openDrawer(true, {
      useDrawers[index][item['name']][1].openDrawer(true, {
        isUpdate: false,
        ifSave: true,
        entityName: props.entityName,
        formJson: GetCrudForm(), //getFormSchema(`${entityName.value}_Crud`),
        crudColSlots: props.crudColSlots,
        others: others.value,
        ifSave: objParams.value['ifSave'],
        entityName: item['name'], //props.entityName,
        // formJson: GetCrudForm(item, data), //获取增删改表单字段
        crudColSlots: isNullOrUnDef(objParams.value['crudColSlots'])
          ? []
          : objParams.value['crudColSlots'][item['name']],
        keyFieldValues: keyFieldValues.value,
        data,
        name: item['name'], //drawers列表里面的name，表示是哪一个实体，也就是高级表单中表格的名字
        keyName: item['keyName'],
      });
    });
  }
@@ -228,19 +299,20 @@
   * @description: 新增编辑返回成功方法
   * @param {*} d
   * @param {*} u
   * @param {*} item 页面上循环抽屉列表传入的实体名字，作为各表格相关方法的key，从而调用各表格相关的方法，如：useTables[item][1].setProps
   * @return {*}
   */
  function handleSuccess(d, u) {
  function handleSuccess(d, u, item) {
    if (!isNullOrUnDef(custImport.value)) {
      /* 自定义编辑方法，根据实体名去调用 */
      EditeOperation(data, d, u);
      setProps({
      EditOperation(data, d, u, item);
      useTables[item][1].setProps({
        dataSource: [],
      });
      setProps({
        dataSource: data,
      useTables[item][1].setProps({
        dataSource: data.value[item],
      });
      reload();
      useTables[item][1].reload();
    }
  }

@@ -248,21 +320,21 @@
   * @description: 弹出选择框选择成功后事件
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @param {*} item 页面上循环抽屉列表传入的实体名字，作为各表格相关方法的key，从而调用各表格相关的方法，如：useTables[item][1].getForm()
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
        `../entityts/${useTables[item][1].getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}.ts`
      )
        .then((m) => {
          const [{ GetSelectSuccess }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess(d, u));
          useTables[item][1].getForm().setFieldsValue(GetSelectSuccess(d, u));
        })
        .catch(() => {
          getForm().setFieldsValue({
          useTables[item][1].getForm().setFieldsValue({
            ITEM_CODE: d.values['val'],
          });
        });
@@ -278,7 +350,7 @@
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${props.useTableData['table'][1].getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
        `../entityts/${props.useTableData['table'][1].getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}.ts`
      )
        .then((m) => {
          const [{ OpenSelectItem }] = m.default();