标签模板，主页，默认工艺路线更新

Ben Lin

2024-11-08 3d2c48733b86a03fc2e5a1f12ac3667ab0863b80

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

@@ -15,6 +15,7 @@
        @edit-end="
          ({ record, index, key, value }) => handleEditEnd({ record, index, key, value }, item.name)
        "
        @edit-change="onEditChange"
      >
        <template #toolbar>
          <a-button
@@ -27,7 +28,7 @@
          >
            {{ d['FUNC_NAME'] }}
          </a-button>
          <a-button v-if="item.showTbButton" @click="openImg" type="primary"> 预览 </a-button>
          <!-- <a-button v-if="item.showTbButton" @click="openImg" type="primary"> 预览 </a-button> -->
        </template>
        <template #action="{ record }">
          <TableAction :actions="createActions(record, index, item)" />
@@ -54,25 +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 { createImgPreview } from '/@/components/Preview';
  import { cloneDeep } from 'lodash-es';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { t } = useI18n();
  const ACard = Card;
@@ -89,28 +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) {},
      CreateAction(type: string, ...args) {},
      CustEditEnd({ record, index, key, value }: Recordable, type, ...args) {},
    } as EntityCustFunctionType,
      CustInitData() {},
      GetNewRow() {},
      CreateAction() {},
      CustEditEnd() {},
    } as unknown as EntityCustFunctionType,
  ]);
  /* 动态import实体名.ts的自定义方法 */
  try {
@@ -118,7 +119,6 @@
  } catch (e) {}
  const [
    {
      ActionItem: nActionItem,
      EditOperation,
      GetCrudForm,
      KeyFieldValues,
@@ -213,13 +213,6 @@
  }

  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: 生成列表中操作项的按钮
@@ -227,40 +220,45 @@
   * @return {*}
   */
  function createActions(record, index, item) {
    const params = {
      record,
      isUpdate: true,
      ifSave: objParams.value['ifSave'],
      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: '',
      },
    ];
  }

  /**
@@ -495,4 +493,101 @@
    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>