Merge branch 'master' of http://47.115.28.255:8110/r/TigerClouds-Tech/BS/Ti...

yyg1378265336

2025-02-27 8099042b51891d1e58d6066f0247ba423f4457bd

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

@@ -6,7 +6,17 @@
      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)
        "
        @edit-change="onEditChange"
      >
        <template #toolbar>
          <a-button
            v-if="item.showTbButton"
@@ -18,6 +28,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)" />
@@ -44,22 +55,24 @@
  </div>
</template>
<script lang="ts" setup>
  import { Ref, inject, onMounted, ref, watch } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useForm } from '/@/components/Form/index';
  import { Ref, inject, onMounted, ref, unref, watch } from 'vue';
  import { BasicTable, EditRecordRow, TableAction } from '/@/components/Table';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../../normalDrawer.vue';
  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 { DeleteEntity, getEntity, SaveEntity } from '/@/api/tigerapi/system';
  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 { cloneDeep } from 'lodash-es';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { t } = useI18n();
  const ACard = Card;
@@ -76,26 +89,29 @@
  const _useTables = inject('useTables') as Ref<any>;
  const useFormData = inject('useFormData') as Ref<{}>;
  const keyFieldValues = inject('keyFieldValues') as Ref<Recordable[]>;
  const others = ref({});
  const ctype = ref('');
  const { createMessage: msg } = useMessage();

  const go = useGo();
  const { currentRoute } = useRouter();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const cType = ref('');
  const dtlSlots = ref([] as any[]);
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const currentEditKeyRef = ref('');
  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) {},
      ActionItem() {},
      EditOperation() {},
      GetCrudForm() {},
      KeyFieldValues() {},
      GetTitle() {},
      GetUseTables() {},
      GetUseDrawers() {},
      CustInitData(data: Ref<any[]>, keyFieldValues: Ref<{}>, type: string) {},
      GetNewRow(type: string) {},
    } as EntityCustFunctionType,
      CustInitData() {},
      GetNewRow() {},
      CreateAction() {},
      CustEditEnd() {},
    } as unknown as EntityCustFunctionType,
  ]);
  /* 动态import实体名.ts的自定义方法 */
  try {
@@ -103,7 +119,6 @@
  } catch (e) {}
  const [
    {
      ActionItem: nActionItem,
      EditOperation,
      GetCrudForm,
      KeyFieldValues,
@@ -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,9 @@
        emit('gettables', useTables);
      }
    }
  });
  }

  const imgList = ['http://localhost:8800/files/Template/10位批次条码.png'];

  /**
   * @description: 生成列表中操作项的按钮
@@ -189,40 +220,45 @@
   * @return {*}
   */
  function createActions(record, index, item) {
    const params = {
      record,
      isUpdate: true,
      ifSave: true,
      entityName: props.entityName,
      formJson: [], //getFormSchema(`${entityName.value}_Crud`),
      cType,
      dtlSlots,
      useModalData,
      useFormData,
      crudColSlots: props.crudColSlots,
      data,
      name: item.name, //drawers列表里面的name，表示是哪一个实体，也就是高级表单中表格的名字
      keyName: item.keyName,
    };
    const actionItem = GenerateActionButton(
      params,
      buttons,
      useDrawers[index][item.name][1].openDrawer,
      useTables[item.name][1].reload(),
    );
    if (isNullOrUnDef(custImport.value)) {
      return actionItem;
    if (!record.editable) {
      const values = useFormData.value['BaseForm'][1].getFieldsValue();
      const type = values['TEMP_TYPE'];
      return [
        {
          label: '编辑',
          disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
          onClick: handleEdit.bind(null, record),
          name: '',
        },
        {
          label: '删除',
          color: 'error',
          disabled:
            type == 0
              ? true
              : currentEditKeyRef.value
                ? currentEditKeyRef.value !== record.key
                : false,
          onClick: handleDel.bind(null, record, index, item),
          name: '',
        },
      ];
    }
    return nActionItem(
      params,
      actionItem,
      useDrawers[index][item.name][1].openDrawer,
      useTables,
      null,
      useForm,
      useModal,
      go,
    );
    return [
      {
        label: '保存',
        onClick: handleSave.bind(null, record, index, item),
        name: '',
      },
      {
        label: '取消',
        popConfirm: {
          title: '是否取消编辑',
          confirm: handleCancel.bind(null, record, index, item),
        },
        name: '',
      },
    ];
  }

  /**
@@ -256,7 +292,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 +349,7 @@
            FnName: item.FnName,
            data: data,
          };
          /* 自定义方法 */
          CustFunc(params);
          useTables[item.name][1].setProps({
            dataSource: [],
@@ -423,4 +460,134 @@
        });
    } 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;
  }

  /**
   * @description: 编辑改变时事件
   * @param {*} column
   * @param {*} value
   * @param {*} record
   * @return {*}
   */
  function onEditChange({ column, value, record }) {
    // 本例
    if (column.dataIndex === 'id') {
      record.editValueRefs.name4.value = `${value}`;
    }
    console.log(column, value, record);
  }

  /**
   * @description: 编辑行
   * @param {*} record
   * @return {*}
   */
  function handleEdit(record: EditRecordRow) {
    currentEditKeyRef.value = record.key;
    record.onEdit?.(true);
  }

  /**
   * @description: 删除行
   * @param {*} record
   * @return {*}
   */
  function handleDel(record: EditRecordRow, index, item) {
    data.value[item.name] = data.value[item.name].filter((q) => q.ID != record.ID);
    useTables[item.name][1].setProps({
      dataSource: [],
    });
    useTables[item.name][1].setProps({
      dataSource: data.value[item.name],
    });
    useTables[item.name][1].reload();
    // setData();
  }

  /**
   * @description: 取消编辑
   * @param {*} record
   * @return {*}
   */
  function handleCancel(record: EditRecordRow, index, item) {
    currentEditKeyRef.value = '';
    record.onEdit?.(false, false);
  }

  /**
   * @description: 保存操作
   * @param {*} record
   * @return {*}
   */
  async function handleSave(record: EditRecordRow, index, item) {
    // 校验
    msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
    const valid = await record.onValid?.();
    if (valid) {
      try {
        const _data = cloneDeep(record.editValueRefs);
        console.log(_data);
        //TODO 此处将数据提交给服务器保存
        if (CustFunc && isFunction(CustFunc)) {
          CustFunc({
            others: others.value,
            cType: item.name,
            values: record,
            data: data,
            FnName: 'SaveRow',
          });
        } else {
          /* 默认保存方法 */
          const action = await SaveEntity(
            record,
            true,
            item.name, //实体名
            // `${isExistSql.value}='${values[isExistSql.value]}'`,
          );
        }
        // 保存之后提交编辑状态
        const pass = await record.onEdit?.(false, true);
        if (pass) {
          currentEditKeyRef.value = '';
        }
        msg.success({ content: t('数据已暂存，要最终保存到数据库请提交'), key: 'saving' });
      } catch (error) {
        msg.error({ content: t('保存失败'), key: 'saving' });
      }
    } else {
      msg.error({ content: t('请填写正确的数据'), key: 'saving' });
    }
  }
</script>