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

Ben Lin

2024-09-24 3bf0e1e45acfb85fb6054dc55d1c1204a6750998

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

@@ -6,7 +6,16 @@
      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
            v-if="item.showTbButton"
@@ -18,6 +27,7 @@
          >
            {{ 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)" />
@@ -60,6 +70,9 @@
  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;
@@ -95,6 +108,8 @@
      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的自定义方法 */
@@ -114,6 +129,7 @@
      CreateAction,
      CustFunc,
      GetNewRow,
      CustEditEnd,
    },
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
@@ -124,27 +140,40 @@
  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])) {
@@ -169,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: [],
@@ -181,7 +210,16 @@
        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: 生成列表中操作项的按钮
@@ -192,7 +230,7 @@
    const params = {
      record,
      isUpdate: true,
      ifSave: true,
      ifSave: objParams.value['ifSave'],
      entityName: props.entityName,
      formJson: [], //getFormSchema(`${entityName.value}_Crud`),
      cType,
@@ -256,7 +294,7 @@
      }
      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,
@@ -313,6 +351,7 @@
            FnName: item.FnName,
            data: data,
          };
          /* 自定义方法 */
          CustFunc(params);
          useTables[item.name][1].setProps({
            dataSource: [],
@@ -423,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>