通用增删改模态窗口更新，工单维护更新

Ben Lin

2024-09-24 3bf0e1e45acfb85fb6054dc55d1c1204a6750998

 src/views/tigerprojects/system/lowcode/high/edit/editdtl.vue

@@ -6,11 +6,28 @@
      class="!mt-5"
      v-for="(item, index) in drawers"
    >
      <BasicTable @register="useTables[item.name]">
      <BasicTable
        @register="useTables[item.name]"
        :beforeEditSubmit="
          ({ record, index, key, value }) =>
            beforeEditSubmit({ record, index, key, value }, item.name)
        "
        @edit-end="
          ({ record, index, key, value }) => handleEditEnd({ record, index, key, value }, item.name)
        "
      >
        <template #toolbar>
          <a-button type="primary" @click="handleCreate(index, item)" preIcon="add_02|svg">
            新增
          <a-button
            v-if="item.showTbButton"
            type="primary"
            v-for="d in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
            @click="handleCreate(index, item, d)"
            :preIcon="d['ICON_URL']"
            :key="d"
          >
            {{ d['FUNC_NAME'] }}
          </a-button>
          <a-button v-if="item.showTbButton" @click="openImg" type="primary"> 预览 </a-button>
        </template>
        <template #action="{ record }">
          <TableAction :actions="createActions(record, index, item)" />
@@ -49,10 +66,17 @@
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Card } from 'ant-design-vue';
  import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
  import { useRouter } from 'vue-router';
  import { getRoleButtons } from '/@/api/sys/menu';
  import { GenerateActionButton } from '../../data';
  import { CustModalParams } from '/@/api/tigerapi/model/systemModel';
  import { useWebSocketStore } from '/@/store/modules/websocket';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { createImgPreview } from '/@/components/Preview';

  const { t } = useI18n();
  const ACard = Card;
  const emit = defineEmits(['search']);
  const emit = defineEmits(['search', 'opencust', 'gettables']);
  const props = defineProps({
    colSlots: { type: Array as PropType<any[]> },
    useTableData: { type: Object as PropType<{}>, default: { table: [] } },
@@ -67,6 +91,7 @@
  const keyFieldValues = inject('keyFieldValues') as Ref<Recordable[]>;

  const go = useGo();
  const { currentRoute } = useRouter();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const cType = ref('');
  const dtlSlots = ref([] as any[]);
@@ -82,6 +107,9 @@
      GetUseTables(data: Ref<Recordable[]>, ...args) {},
      GetUseDrawers() {},
      CustInitData(data: Ref<any[]>, keyFieldValues: Ref<{}>, type: string) {},
      GetNewRow(type: string) {},
      CreateAction(type: string, ...args) {},
      CustEditEnd({ record, index, key, value }: Recordable, type, ...args) {},
    } as EntityCustFunctionType,
  ]);
  /* 动态import实体名.ts的自定义方法 */
@@ -98,36 +126,54 @@
      GetUseTables,
      GetUseDrawers,
      CustInitData,
      CreateAction,
      CustFunc,
      GetNewRow,
      CustEditEnd,
    },
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
    : custImport.value['default']();
  const buttons = ref<[]>(await getRoleButtons(currentRoute.value.meta.menuCode as string));
  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) => {
  //     nextTick(() => {
  //       setProps({
  //         dataSource: [],
  //       });
  //       data.value = newVal;
  //       setProps({
  //         dataSource: data,
  //       });
  //     });
  //   },
  //   { deep: true, immediate: true },
  // );
  const webSocketStore = useWebSocketStore();
  const { refreshPage } = useTabs();
  watch(
    () => webSocketStore.socketMessage,
    (newVal, oldVal) => {
      console.log(oldVal, newVal);
      /* 如果监听到的值不一样，则刷新页面 */
      if (
        newVal != oldVal &&
        !isNullOrEmpty(oldVal) &&
        newVal['Data'] == 'Content' &&
        newVal['IsSuccessed']
      ) {
        // init().then(() => {
        //   refreshPage();
        // });
      }
    },
    { deep: true, immediate: true },
  );

  /**
   * @description: 挂载组件完成时
   * @return {*}
   */
  onMounted(async () => {
    init();
  });

  /**
   * @description: 初始化数据
   * @return {*}
   */
  async function init() {
    for (const i in drawers.value) {
      let sqlcmd = ' 1 =1 ';
      if (!isNullOrEmpty(keyFieldValues.value[drawers.value[i].code])) {
@@ -152,7 +198,7 @@
        data.value[drawers.value[i].name] = list.Data.Items;
        // 自定义初始化数据
        if (CustInitData && isFunction(CustInitData)) {
          CustInitData(data, keyFieldValues, drawers.value[i].name);
          CustInitData(data, keyFieldValues, drawers.value[i].name, useTables);
        }
        useTables[drawers.value[i].name][1].setProps({
          dataSource: [],
@@ -161,9 +207,19 @@
          dataSource: data.value[drawers.value[i].name],
        });
        useTables[drawers.value[i].name][1].reload();
        emit('gettables', useTables);
      }
    }
  });
  }

  const imgList = ['http://localhost:8800/files/Template/10位批次条码.png'];
  function openImg() {
    const onImgLoad = ({ index, url, dom }) => {
      console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
    };
    // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
    createImgPreview({ imageList: imgList, defaultWidth: 700, rememberState: true, onImgLoad });
  }

  /**
   * @description: 生成列表中操作项的按钮
@@ -174,7 +230,7 @@
    const params = {
      record,
      isUpdate: true,
      ifSave: true,
      ifSave: objParams.value['ifSave'],
      entityName: props.entityName,
      formJson: [], //getFormSchema(`${entityName.value}_Crud`),
      cType,
@@ -186,21 +242,12 @@
      name: item.name, //drawers列表里面的name，表示是哪一个实体，也就是高级表单中表格的名字
      keyName: item.keyName,
    };
    const actionItem = [
      {
        icon: 'clarity:note-edit-line',
        onClick: editRecord.bind(null, useDrawers[index][item.name][1].openDrawer, params),
      },
      {
        icon: 'ant-design:delete-outlined',
        color: 'error',
        popConfirm: {
          title: '是否确认删除?',
          placement: 'left',
          confirm: deleteRecord.bind(null, useTables[item.name][1].reload, params),
        },
      },
    ];
    const actionItem = GenerateActionButton(
      params,
      buttons,
      useDrawers[index][item.name][1].openDrawer,
      useTables[item.name][1].reload(),
    );
    if (isNullOrUnDef(custImport.value)) {
      return actionItem;
    }
@@ -214,32 +261,6 @@
      useModal,
      go,
    );
  }

  /**
   * @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();
      }
    });
  }

  /**
@@ -257,22 +278,23 @@
  }

  /**
   * @description: 新增按钮方法
   * @description: 打开抽屉方法
   * @param {*} index
   * @param {*} item
   * @return {*}
   */
  function handleCreate(index, item) {
  function CreateopenDrawer(index, item) {
    validate().then((res) => {
      const Keys = Object.getOwnPropertyNames(useFormData.value);
      for (const i in Keys) {
        keyFieldValues.value[item['code']] = objParams.value['IsID']
          ? res[Keys[i]]['ID']
          : res[Keys[i]][item['code']];
        console.log(i);
      }
      useDrawers[index][item['name']][1].openDrawer(true, {
        isUpdate: false,
        ifSave: true,
        ifSave: objParams.value['ifSave'],
        entityName: item['name'], //props.entityName,
        // formJson: GetCrudForm(item, data), //获取增删改表单字段
        crudColSlots: props.crudColSlots,
@@ -282,6 +304,65 @@
        keyName: item['keyName'],
      });
    });
  }

  /**
   * @description: 新增按钮方法
   * @param {*} index
   * @param {*} item
   * @return {*}
   */
  function handleCreate(index, item, d) {
    const _cruds = GetCrudForm();
    let isExistSql = '';
    for (const i in _cruds) {
      if (_cruds[i].isexist == 'Y') {
        isExistSql = _cruds[i].field;
      }
    }

    if (isNullOrUnDef(custImport.value['default'])) {
      CreateopenDrawer(index, item);
    } else {
      const result = CreateAction(item.name);
      /* 根据主页面跳转传过来的参数确定新增按钮的执行方法 */
      switch (result.action) {
        case 'go':
          sessionStorage.removeItem(`${result.params.Name}_update_params`);
          // 将对象转换为JSON字符串并保存到sessionStorage
          sessionStorage.setItem(
            `${result.params.Name}_update_params`,
            encodeURI(JSON.stringify(result.params)),
          );
          go(
            `/${result.url}/${encodeURI(JSON.stringify({ sName: `${result.params.Name}_update`, Name: result.params.Name }))}`,
          );
          break;
        case 'drawer':
          CreateopenDrawer(index, item);
          break;
        case 'edit':
          const params: CustModalParams = {
            mValues: {},
            others: keyFieldValues.value,
            cType: item.name,
            values: GetNewRow(item.name),
            initFnName: '',
            FnName: item.FnName,
            data: data,
          };
          /* 自定义方法 */
          CustFunc(params);
          useTables[item.name][1].setProps({
            dataSource: [],
          });
          useTables[item.name][1].setProps({
            dataSource: data.value[item.name],
          });
          useTables[item.name][1].reload();
          break;
      }
    }
  }

  /**
@@ -381,4 +462,37 @@
        });
    } catch (e) {}
  }

  /**
   * @description: 单元格编辑完成后事件
   * @param {*} record
   * @param {*} index
   * @param {*} key
   * @param {*} value
   * @param {*} name
   * @return {*}
   */
  function handleEditEnd({ record, index, key, value }: Recordable, name) {
    console.log(record, index, key, value);
    data.value[name][index] = record;
    /* 单元格编辑完成后如果有自定义方法，就调用 */
    if (CustEditEnd && isFunction(CustEditEnd)) {
      CustEditEnd({ record, index, key, value }, name, useTables, data);
    }
    return false;
  }

  /**
   * @description: 单元格提交事件
   * @param {*} record
   * @param {*} index
   * @param {*} key
   * @param {*} value
   * @param {*} name
   * @return {*}
   */
  async function beforeEditSubmit({ record, index, key, value }, name) {
    console.log('单元格数据正在准备提交', { record, index, key, value });
    return true;
  }
</script>