详情页面优化

Ben Lin

2024-06-23 f1d47feeee1ddb5751847b71f789f2c3b822ec32

详情页面优化

 src/views/tigerprojects/system/lowcode/detail/basLabelVar.ts

ÎļþÒÑɾ³ý

 src/views/tigerprojects/system/lowcode/detail/data.ts

ÎļþÒÑɾ³ý

 src/views/tigerprojects/system/lowcode/detail/detail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,264 @@
<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" />
  </div>
</template>
<script lang="ts" setup>
  import { Ref, inject, onMounted, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useForm } from '/@/components/Form/index';
  import { useDrawer } from '/@/components/Drawer';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../normalDrawer.vue';
  import { isNullOrUnDef } from '/@/utils/is';
  import { useModal } from '/@/components/Modal';
  import { useGo } from '/@/hooks/web/usePage';
  import { DeleteEntity, getListByPage } from '/@/api/tigerapi/system';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const props = defineProps({
    useTableData: { type: Object as PropType<{}>, default: { table: [] } },
    entityName: { type: String },
  });
  const objParams = inject('objParams') as Ref<any>;
  const data = inject('data') as Ref<Recordable[]>;
  const others = inject('others') as Ref<Recordable[]>;
  const go = useGo();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const cType = ref('');
  const colSlots = ref<any>(objParams['colSlots']); //按钮插槽
  const dtlSlots = ref([] as any[]);
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const custImport = ref<any[]>(await import(/* @vite-ignore */ `../entityts/${props.entityName}`));
  const [{ EditeOperation, GetBaseColumns, GetSearchForm, GetCrudForm, OthersValues }] =
    custImport.value['default']();
  others.value = OthersValues(objParams['CODE'], objParams['ID']);
  const [registerTable, { getForm, reload, setProps }] = useTable({
    title: `${objParams['firstTitle']}列表`,
    api: getListByPage,
    searchInfo: { TABLE_NAME: objParams['Name'], ...objParams['others'] },
    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,
    }, //自定义操作列
  });

  onMounted(() => {});

  function createActions(record) {
    const params = {
      record,
      isUpdate: true,
      ifSave: false,
      entityName: props.entityName,
      formJson: GetCrudForm(), //getFormSchema(`${entityName.value}_Crud`),
      cType,
      dtlSlots,
      useModalData,
      useFormData,
      crudColSlots: colSlots.value,
      data,
    };
    const actionItem = [
      {
        icon: 'clarity:note-edit-line',
        onClick: editRecord.bind(null, openDrawer, params),
      },
      {
        icon: 'ant-design:delete-outlined',
        color: 'error',
        popConfirm: {
          title: '是否确认删除?',
          placement: 'left',
          confirm: deleteRecord.bind(null, reload, params),
        },
      },
    ];
    if (isNullOrUnDef(custImport.value)) {
      return actionItem;
    }
    const [{ ActionItem }] = custImport.value['default']();
    return ActionItem(
      params,
      actionItem,
      openDrawer,
      reload,
      null,
      useForm,
      useModal,
      go,
      setProps,
    );
  }

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

  function handleCreate() {
    const _cruds = GetCrudForm();
    let isExistSql = '';
    for (const i in _cruds) {
      if (_cruds[i].isexist == 'Y') {
        isExistSql = _cruds[i].field;
      }
    }
    openDrawer(true, {
      isUpdate: false,
      ifSave: false,
      entityName: props.entityName,
      formJson: GetCrudForm(), //getFormSchema(`${entityName.value}_Crud`),
      crudColSlots: colSlots.value,
      others: others.value,
      isExistSql: isExistSql,
    });
  }

  /**
   * @description: æ–°å¢žç¼–辑返回成功方法
   * @param {*} d
   * @param {*} u
   * @return {*}
   */
  function handleSuccess(d, u) {
    reload();
  }

  /**
   * @description: å¼¹å‡ºé€‰æ‹©æ¡†é€‰æ‹©æˆåŠŸåŽäº‹ä»¶
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {
    /* åŠ¨æ€import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ GetSelectSuccess }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess(d, u));
        })
        .catch(() => {
          getForm().setFieldsValue({
            ITEM_CODE: d.values['val'],
          });
        });
    } catch (e) {}
  }

  /**
   * @description: å¼¹å‡ºé€‰æ‹©æ¡†
   * @param {*} item
   * @return {*}
   */
  function handleSelectItem(item) {
    /* åŠ¨æ€import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${props.useTableData['table'][1].getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ OpenSelectItem }] = m.default();
          OpenSelectItem(openItemModal);
        })
        .catch(() => {
          openItemModal(true, {
            title: '物料列表',
            schemas: [
              {
                field: 'ITEM_CODE',
                component: 'Input',
                label: '物料编码',
                colProps: {
                  span: 12,
                },
              },
            ],
            ItemColumns: [
              {
                title: t('物料编码'),
                dataIndex: 'ITEM_CODE',
                resizable: true,
                sorter: true,
                width: 200,
              },
              {
                title: t('物料名称'),
                dataIndex: 'ITEM_NAME',
                resizable: true,
                sorter: true,
                width: 180,
              },
            ],
            tableName: 'BAS_ITEM',
            rowKey: 'ITEM_CODE',
            searchInfo: { TABLE_NAME: 'BAS_ITEM' },
          });
        });
    } catch (e) {}
  }
</script>

 src/views/tigerprojects/system/lowcode/detail/index.vue

@@ -1,18 +1,10 @@
<!--
 * @Description: file content
 * @Author: Ben Lin
 * @version: 
 * @Date: 2024-06-18 15:09:48
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-23 00:31:33
-->
<!--
 * @Description: ä½Žä»£ç è¯¦æƒ…呈现页面
 * @Author: Ben Lin
 * @version: 
 * @Date: 2024-05-30 13:28:20
 * @LastEditors: your name
 * @LastEditTime: 2024-06-17 11:29:54
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-23 22:58:33
-->
<template>
  <PageWrapper :title="pageTitle" :content="contentStr" contentBackground @back="goBack">
@@ -24,66 +16,14 @@
    </template>
    <div>
      <div v-if="currentKey == 'detailfirst'">
        <BasicTable @register="detailTable">
          <template #toolbar>
            <a-button type="primary" @click="handleCreate" preIcon="add_02|svg"> æ–°å¢ž </a-button>
          </template>
          <template #action="{ record }">
            <TableAction
              :actions="[
                {
                  icon: 'clarity:note-edit-line',
                  onClick: handleEdit.bind(null, record),
                },
                {
                  icon: 'ant-design:delete-outlined',
                  color: 'error',
                  popConfirm: {
                    title: '是否确认删除?',
                    placement: 'left',
                    confirm: handleDelete.bind(null, record),
                  },
                },
              ]"
            />
          </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>
        <Suspense>
          <detail :entityName="entityName" />
        </Suspense>
      </div>
      <div v-if="currentKey == 'detailsecond'">
        <BasicTable @register="detailsecondTable">
          <template #toolbar>
            <a-button type="primary" @click="secondCreate" preIcon="add_02|svg"> æ–°å¢ž </a-button>
          </template>
          <template #[item]="{ field }" v-for="item in secondColSlots" :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>
        <Suspense></Suspense>
      </div>
    </div>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
    <CustModal
      @register="registerCust"
      @success="custSuccess"
@@ -114,31 +54,24 @@
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { ref, provide, Ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '/@/components/Page';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { Tabs } from 'ant-design-vue';
  import { useGo } from '/@/hooks/web/usePage';
  //详情列表
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { OpenCustModal, custOnChange } from '../data';
  import detail from './detail.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { DeleteEntity, getListByPage } from '/@/api/tigerapi/system';
  import { useDrawer } from '/@/components/Drawer';
  import normalDrawer from '../normalDrawer.vue';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import CustModal from '/@/views/components/CustModal.vue';
  import { BasicForm } from '/@/components/Form/index';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useModal } from '/@/components/Modal';
  import { GetBaseColumns, GetFormColumns, GetSearchFormColumns } from './data';
  import { isNullOrUnDef } from '/@/utils/is';

  const { t } = useI18n();

  const { t: bt } = useI18n('');
  const { createMessage } = useMessage();
  const route = useRoute();
  const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
@@ -147,96 +80,27 @@
  var ITEM_CODE = ref('');
  const go = useGo();
  const pageTitle = ref(objParams.value.pageTitle);
  const firstTitle = ref(objParams.value.firstTitle);
  const secondTitle = ref(objParams.value.secondTitle);
  const contentStr = ref(objParams.value.contentStr);
  const firstTabName = ref(objParams.value.firstTabName);
  const secondTabName = ref(objParams.value.secondTabName);
  const entityName = ref(objParams.value.ID);
  const entityName = ref(objParams.value.Name);
  const detailName = ref(objParams.value.detailName);
  const globSetting = useGlobSetting();
  const _columns = ref([]);
  const _searchFormSchema = ref([]);
  const _crudFormSchema = ref([]);
  const formSchemas = ref({}); //弹出框多表单结构
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const colSlots = ref<any>(objParams.value.colSlots); //按钮插槽
  const secondColSlots = ref<any>(objParams.value.secondColSlots); //按钮插槽
  const crudColSlots = ref<any>(objParams.value.colSlots);
  const cType = ref('');
  const dtlSlots = ref([] as any[]);
  const selectVals = ref({});
  //获取JobId
  const BILLCODE = ref(route.params?.BillCode);
  const others = ref<any>(null);
  provide<Ref<any>>('objParams', objParams.value);
  provide<Ref<any>>('others', others);
  const [registerCust] = useModal();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [detailTable, { reload: reloadFirst }] = useTable({
    title: `${firstTitle.value}列表`,
    api: getListByPage,
    searchInfo: { TABLE_NAME: entityName.value, ...objParams.value.others },
    columns: GetBaseColumns(entityName.value, 'detailfirst'),
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    canResize: true,
    showIndexColumn: false,
    formConfig: {
      labelWidth: 120,
      schemas: GetSearchFormColumns(entityName.value, 'detailfirst'),
    },
    actionColumn: {
      width: 130,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right', //undefined,
    },
    // searchInfo: { BILLCODE },
  });
  const [detailsecondTable, { getForm, reload }] = useTable({
    title: `${secondTitle.value}列表`,
    api: getListByPage,
    columns: GetBaseColumns(entityName.value, 'detailsecond'),
    formConfig: {
      labelWidth: 120,
      schemas: GetFormColumns(entityName.value, 'detailsecond'),
      model: { ITEM_CODE: ITEM_CODE },
    },
    useSearchForm: true,
    // searchInfo: { BILLCODE },
    showTableSetting: false,
    bordered: true,
    canResize: true,
    showIndexColumn: false,
  });

  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
      entityName: objParams.value.ID,
      formJson: GetFormColumns(entityName.value, 'detailfirst'),
      crudColSlots,
      others: objParams.value.others,
    });
  }

  function secondCreate() {
    openDrawer(true, {
      isUpdate: false,
      entityName: objParams.value.ID,
      formJson: _crudFormSchema.value,
      crudColSlots,
    });
  }

  // æ­¤å¤„可以得到用户ID
  //const BILLCODE = ref(route.params?.BILLCODE.split(',')[1]);
  var currentKey = ref('detailfirst');
  const { setTitle } = useTabs();
  // TODO
  // æœ¬é¡µä»£ç ä»…作演示，实际应当通过userId从接口获得用户的相关资料

  // è®¾ç½®Tab的标题（不会影响页面标题）
  setTitle(`详情：${detailName.value}`);
@@ -259,121 +123,6 @@
      ITEM_CODE.value = '';
    }
  };

  /**
   * @description: detailfirst tab中的表格编辑记录弹出侧边框方法
   * @param {*} record
   * @return {*}
   */
  function handleEdit(record: Recordable) {
    openDrawer(true, {
      record,
      isUpdate: true,
      entityName: objParams.value.ID,
      formJson: GetFormColumns(entityName.value, 'detailfirst'),
      crudColSlots,
    });
  }

  /**
   * @description: detailfirst tab中的表格删除记录方法
   * @param {*} record
   * @return {*}
   */
  function handleDelete(record: Recordable) {
    console.log(record);
    //删除
    DeleteEntity(record, entityName.value).then((action) => {
      if (action.IsSuccessed) {
        reloadFirst();
      }
    });
  }

  /**
   * @description: detailfirst tab中增删改成功返回方法
   * @return {*}
   */
  function handleSuccess() {
    reloadFirst();
  }

  /**
   * @description: å¼¹å‡ºé€‰æ‹©æ¡†é€‰æ‹©æˆåŠŸåŽäº‹ä»¶
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {
    /* åŠ¨æ€import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ GetSelectSuccess }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess(d, u));
        })
        .catch(() => {
          getForm().setFieldsValue({
            ITEM_CODE: d.values['val'],
          });
        });
    } catch (e) {}
  }

  /**
   * @description: å¼¹å‡ºé€‰æ‹©æ¡†
   * @param {*} item
   * @return {*}
   */
  function handleSelectItem(item) {
    /* åŠ¨æ€import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ OpenSelectItem }] = m.default();
          OpenSelectItem(openItemModal);
        })
        .catch(() => {
          openItemModal(true, {
            title: '物料列表',
            schemas: [
              {
                field: 'ITEM_CODE',
                component: 'Input',
                label: '物料编码',
                colProps: {
                  span: 12,
                },
              },
            ],
            ItemColumns: [
              {
                title: t('物料编码'),
                dataIndex: 'ITEM_CODE',
                resizable: true,
                sorter: true,
                width: 200,
              },
              {
                title: t('物料名称'),
                dataIndex: 'ITEM_NAME',
                resizable: true,
                sorter: true,
                width: 180,
              },
            ],
            tableName: 'BAS_ITEM',
            rowKey: 'ITEM_CODE',
            searchInfo: { TABLE_NAME: 'BAS_ITEM' },
          });
        });
    } catch (e) {}
  }

  /**
   * @description: Select è‡ªå®šä¹‰onChange方法
@@ -399,7 +148,7 @@
   * @return {*}
   */
  function custSuccess(d) {
    reload();
    // reload();
  }

  /**

 src/views/tigerprojects/system/lowcode/entityts/BAS_LABEL_TEMP.ts

@@ -4,7 +4,7 @@
 * @version:
 * @Date: 2024-06-19 20:34:27
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-22 20:35:33
 * @LastEditTime: 2024-06-23 23:53:41
 */

import { ActionItem, BasicColumn } from '/@/components/Table';
@@ -17,7 +17,9 @@
   */
  function goDetail(go: Fn, params: Recordable) {
    const id = {
      ID: 'BAS_LABEL_VAR',
      ID: params['record'].ID,
      CODE: params['record']['LABEL_CODE'],
      Name: 'BAS_LABEL_VAR',
      firstTabName: '标签模板变量',
      secondTabName: '', //'标签过程变量',
      firstTitle: '模板变量',

 src/views/tigerprojects/system/lowcode/entityts/BAS_LABEL_VAR.ts

@@ -4,10 +4,19 @@
 * @version:
 * @Date: 2024-06-19 20:34:27
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-23 00:28:56
 * @LastEditTime: 2024-06-23 23:42:04
 */

import { ActionItem, BasicColumn } from "/@/components/Table";
import { Tag, Tooltip } from 'ant-design-vue';
import { ActionItem, BasicColumn } from '/@/components/Table';
import { useI18n } from '/@/hooks/web/useI18n';
import { h, unref } from 'vue';
import { GetEnum } from '/@/api/tigerapi/system';
import { useLocale } from '/@/locales/useLocale';

const { getLocale } = useLocale();

const { t } = useI18n();

function _default() {
  const ActionColumn: BasicColumn = {
@@ -36,7 +45,164 @@
    },
    GetHomeUrl: () => {
      return `/BAS_LABEL_TEMP/LC/${encodeURI(JSON.stringify({ ID: 'BAS_LABEL_TEMP', colSlots: [], crudColSlots: [] }))}`;
    },
    GetBaseColumns: () => {
      return [
        {
          dataIndex: 'LABEL_ID',
          title: '标签模板ID',
          ifShow: false,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'VAR_NAME',
          title: '变量名称',
          ifShow: true,
          sorter: true,
          resizable: true,
          customRender: () => {},
        },
        {
          dataIndex: 'VAR_TYPE',
          title: '变量类型',
          ifShow: true,
          sorter: true,
          resizable: true,
          customRender: ({ record }) => {
            let color = '';
            let text = '';
            switch (record.VAR_TYPE) {
              case 0:
                text = '常量';
                color = 'green';
                break;
              case 1:
                text = '过程变量';
                color = 'orange';
                break;
              case 2:
                text = '日期变量';
                color = '#4f68b0';
                break;
              case 3:
                text = '自定义变量';
                color = '#bfbfbf';
                break;
    }
            return h(Tooltip, { title: text }, () => h(Tag, { color: color }, () => text));
          },
        },
        {
          dataIndex: 'VAR_VALUE',
          title: '变量值',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'REMARK',
          title: '备注',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
      ];
    },
    GetSearchForm: () => {
      return [
        {
          field: 'VAR_NAME',
          label: t('变量名'),
          colProps: { span: 8 },
          component: 'Input',
        },
      ];
    },
    GetCrudForm: () => {
      let isShow = false;
      return [
        {
          field: 'ID',
          label: '变量ID',
          component: 'Input',
          colProps: {
            span: 20,
          },
          show: false,
        },
        {
          field: 'LABEL_ID',
          label: '标签模板ID',
          component: 'Input',
          colProps: {
            span: 20,
          },
          show: false,
        },
        {
          field: 'VAR_NAME',
          label: '变量名',
          required: true,
          component: 'Input',
          isexist: 'Y',
          colProps: {
            span: 20,
          },
        },
        {
          field: 'VAR_TYPE',
          label: '变量类型',
          component: 'ApiSelect',
          colProps: {
            span: 20,
          },
          componentProps: {
            api: GetEnum,
            params: { name: 'BAS_LABEL_VAR+VAR_TYPEs' },
            resultField: 'Data',
            labelField: unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name',
            valueField: 'Value',
            onChange: (e) => {
              if (e == 1) {
                isShow = true;
              } else {
                isShow = false;
              }
            },
          },
        },
        {
          field: 'VAR_VALUE',
          label: '变量值',
          required: true,
          component: 'Input',
          colProps: {
            span: 20,
          },
        },
        {
          field: 'BAS_LABEL_PV1PSelect_0', //按低代码配置的规则，实体名+序号+PSelect_0，序号用来区分多个的时候，PSelect_0这是个固定后缀
          label: '1',
          defaultValue: 'BAS_LABEL_PV',
          component: 'Input',
          colProps: { span: 4 },
          ifShow: ({ values }) => isShow,
          colSlot: 'BAS_LABEL_PV1add', //按低代码配置的规则，实体名+序号+add，序号用来区分多个的时候，add这是个固定后缀
        },
        {
          field: 'REMARK',
          label: '备注',
          component: 'Input',
          colProps: {
            span: 20,
          },
        },
      ];
    },
    OthersValues: (val: string, id: string) => {
      return { LABEL_ID: id };
    },
  };

  return [methods, ActionColumn];

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

@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-06-18 15:09:48
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-23 18:03:27
 * @LastEditTime: 2024-06-23 22:11:00
-->
<!--
 *                        _oo0oo_
@@ -101,7 +101,6 @@
<script lang="ts" setup>
  import { Ref, h, nextTick, onMounted, provide, ref, unref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useTable } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import dtl from './dtl.vue';
  import baseForm from './baseForm.vue';
@@ -111,7 +110,7 @@
  import { useRoute, useRouter } from 'vue-router';
  import CustModal from '/@/views/components/CustModal.vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { custOnChange, OpenCustModal, GetBasicColumnAndInit, getTitle } from '../data';
  import { custOnChange, OpenCustModal, getTitle } from '../data';
  import { useModal } from '/@/components/Modal';
  import { useLocale } from '/@/locales/useLocale';
  import { useGo } from '/@/hooks/web/usePage';
@@ -158,18 +157,7 @@
  provide<Ref<any>>('others', others);
  provide<Ref<{}>>('useFormData', useFormData);
  provide<Ref<any>>('baseCards', baseCards);
  //获取表格列信息并初始化一些数据，如：formSchemas(弹出框或高级页面多表单结构), useFormData(表单中插槽渲染按钮打开模态框useModal方法)...等
  const _columns = GetBasicColumnAndInit(
    entityName.value,
    formSchemas,
    useFormData,
    baseCards,
    otherCards,
    useForm,
    useTableData,
    useTable,
    data,
  );

  const [registerCust, { openModal: openCustomModal, closeModal }] = useModal();
  const { setTitle } = useTabs();
  setTitle(objParams.value.Title); //设置标签页标题