详情页面优化

Ben Lin

2025-03-08 745815f637e5385b2cbc23a6ae02401bb8b6c675

详情页面优化

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

@@ -142,11 +142,12 @@
  /* 表单中插槽渲染按钮打开模态框useModal方法 */
  const modals = GetUseModals && isFunction(GetUseModals) ? GetUseModals() : { useModalData: {} };
  const useModalData = ref(modals['useModalData']);
  const CurrTabInfo = objParams['Tabs'].filter(q=>q.entityName == props.entityName)[0];
  const [registerTable, { getForm, reload, setProps }] = useTable({
    title: `${objParams['firstTitle']}列表`,
    title: `${CurrTabInfo.tableTitle}列表`,
    api: getListByPage,
    searchInfo: { TABLE_NAME: objParams['Name'], ...objParams['keyFieldValues'] },
    columns: GetBaseColumns(),
    searchInfo: { TABLE_NAME: CurrTabInfo.entityName, ...objParams['keyFieldValues'] },
    columns: GetBaseColumns(CurrTabInfo.entityName),
    formConfig: {
      labelWidth: 140,
      schemas: GetSearchForm(),

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

@@ -10,14 +10,13 @@
  <PageWrapper :title="pageTitle" :content="contentStr" contentBackground @back="goBack">
    <template #footer>
      <a-tabs default-active-key="detail" v-model:activeKey="currentKey" @tabClick="tabClkcallback">
        <a-tab-pane key="detailfirst" :tab="firstTabName" />
        <a-tab-pane key="detailsecond" :tab="secondTabName" />
        <a-tab-pane v-for="t in TabList" :tab="t.name" :key="t.key" />
      </a-tabs>
    </template>
    <div>
      <div v-if="currentKey == 'detailfirst'">
      <div  v-for="t in TabList" :key="t.key">
        <Suspense>
          <detail :entityName="entityName" />
          <detail :entityName="t.entityName" v-if="currentKey == t.key"/>
        </Suspense>
      </div>
    </div>
@@ -25,20 +24,17 @@
</template>

<script lang="ts" setup>
  import { ref, provide, Ref, defineAsyncComponent } from 'vue';
  import { ref, reactive, provide, Ref, defineAsyncComponent } 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 { OpenCustModal, custOnChange } from '../data';
  import { custOnChange } from '../data';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting } from '/@/hooks/setting';

  const { t } = useI18n();
  const detail = defineAsyncComponent(() => import('./detail.vue'));
  const { createMessage } = useMessage();
  const route = useRoute();
  // const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
  const routeParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
@@ -51,17 +47,17 @@
  const go = useGo();
  const pageTitle = ref(objParams.value.pageTitle);
  const contentStr = ref(objParams.value.contentStr);
  const firstTabName = ref(objParams.value.firstTabName);
  const secondTabName = ref(objParams.value.secondTabName);
  // const firstTabName = ref(objParams.value.firstTabName);
  // const secondTabName = ref(objParams.value.secondTabName);
  const TabList = reactive(objParams.value.Tabs);
  const entityName = ref(routeParams.value.Name);
  const detailName = ref(objParams.value.detailName);
  const globSetting = useGlobSetting();
  const crudColSlots = ref<any>(objParams.value.colSlots);
  const keyFieldValues = ref<any>(null);
  provide<Ref<any>>('objParams', objParams.value);
  provide<Ref<any>>('keyFieldValues', keyFieldValues);

  var currentKey = ref('detailfirst');
  var currentKey = ref(TabList[0].key);
  const { setTitle } = useTabs();

  // 设置Tab的标题（不会影响页面标题）

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

@@ -475,10 +475,20 @@
      ID: params['record'].ID,
      CODE: params['record']['ORDER_NO'],
      Name: 'BIZ_MES_WO_BATCH',
      firstTabName: '工单批次',
      secondTabName: '', //'标签过程变量',
      firstTitle: '批次',
      secondTitle: '', //'过程变量',
      Tabs: [
        {
          name: '工单批次',
          tableTitle: '批次',
          entityName: 'BIZ_MES_WO_BATCH',
          key: 'batch'
        },
        // {
        //   name: '工单批次2',
        //   tableTitle: '批次2',
        //   entityName: 'BIZ_U9_ASN_DTL',
        //   key: 'batch2'
        // }
      ],
      pageTitle: '工单详情', //详情页面标题
      contentStr: '这里是工单批次管理页面，可以显示工单下发的所有批次详情',
      detailName: `工单[${params['record'].ORDER_NO}]批次详情`,

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

@@ -62,6 +62,9 @@
      });
      return data;
    },
    /**
     * @desc 初始化表单
     */
    GetUseForm: () => {
      return {
        forminfo: useForm({
@@ -266,101 +269,6 @@
  /* 以下是内部方法，不export，供上面的方法调用 */

  /**
   * @description: 自定义方法
   * @return {*}
   */
  const getWoFns: Record<string, FunctionType> = {
    /**
     * @description: 工单配置保存方法
     * @param {*} e
     * @param {array} args
     * @return {*}
     */
    SaveCofig: (param: CustModalParams) => {
      return new Promise((resolve, reject) => {
        try {
          const form = param.values['prodinfo'];
          const wo = param.values['mValues'];
          const _wo = cloneDeep(wo);
          _wo.ROUTE_STATUS = 1;
          _wo.ROUTE_CODE = form.ROUTE_CODE;
          SaveEntity(_wo, true, 'BIZ_MES_WO').then((action) => {
            if (action.IsSuccessed) {
              SP_MES_PROD2WO({ rotId: form.ROT_ID, wo: wo.ORDER_NO }).then((res) => {
                if (!res.IsSuccessed) {
                  SaveEntity(wo, true, 'BIZ_MES_WO');
                }
                resolve(res);
              });
            } else {
              reject(action);
            }
          });
        } catch {
          reject(false);
        }
      });
    },
    /**
     * @description: 工单下发保存方法
     * @param {CustModalParams} param
     * @return {*}
     */
    SaveWoBatch: (param: CustModalParams) => {
      return new Promise((resolve, reject) => {
        try {
          const form = param.values['forminfo'];
          const wo = param.values['mValues'];
          wo.STATUS = wo.STATUS == 3 ? wo.STATUS : 2;
          let input: SaveWoBatchInput = {
            Wo: wo,
            WoBatch: {
              ID: buildUUID(),
              CREATE_TIME: new Date(),
              CREATE_USER: useUserStore().getUserInfo.userId as string,
              UPDATE_TIME: new Date(),
              UPDATE_USER: useUserStore().getUserInfo.userId as string,
              GHOST_ROW: false,
              AUTH_ORG: useUserStore().getUserInfo.orgCode,
              AUTH_PROD: useUserStore().getUserInfo.prodCode as string,
              AUTH_WH: '',
              ORDER_NO: wo.ORDER_NO,
              STATUS: wo.STATUS,
              ITEM_CODE: wo.ITEM_CODE,
              CUST_CODE: wo.CUST_CODE,
              FACTORY: wo.FACTORY,
              WS_CODE: wo.WS_CODE,
              ACT_LINE: form.ACT_LINE,
              STD_WORKER_QTY: wo.STD_WORKER_QTY,
              ACT_WORKER_QTY: wo.ACT_WORKER_QTY,
              RELEASE_TIME: new Date(),
              RELEASE_USER: useUserStore().getUserInfo.userId as string,
              PLAN_QTY: form.RELEASE_QTY,
              INPUT_QTY: wo.INPUT_QTY,
              OUTPUT_QTY: wo.OUTPUT_QTY,
              SCRAP_QTY: wo.SCRAP_QTY,
              STOCK_IN_QTY: wo.STOCK_IN_QTY,
              UPH: wo.UPH,
              UPPH: wo.UPPH,
              REMARK: wo.REMARK,
              ACT_START_TIME: wo.ACT_START_TIME,
              ACT_END_TIME: wo.ACT_END_TIME,
              BATCH_NO: '',
            },
            IfToCust: form.IfToCust,
          };
          SaveMesBatchWo(input).then((action) => {
            resolve(action);
          });
        } catch {
          reject(false);
        }
      });
    },
    initRoute: () => {},
  };

  /**
   * @description: 跳转到详情页面方法
   * @param {Fn} go
   * @return {*}
@@ -374,6 +282,20 @@
      secondTabName: '送货单SN', //'标签过程变量',
      firstTitle: '明细',
      secondTitle: '', //'过程变量',
      Tabs: [
        {
          name: '送货单(U9)',
          tableTitle: '明细',
          entityName: 'BIZ_U9_ASN_DTL',
          key: 'BIZ_U9_ASN_DTL'
        },
        {
          name: '送货单SN',
          tableTitle: 'SN',
          entityName: 'BIZ_U9_ASN_SN',
          key: 'BIZ_U9_ASN_SN'
        }
      ],
      pageTitle: '送货单(U9)详情', //详情页面标题
      contentStr: '这里是送货单(U9)明细管理页面，可以显示送货单(U9)的所有批次详情',
      detailName: `送货单[${params['record'].ORDER_NO}]批次详情`,

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

@@ -8,21 +8,13 @@
 */

import { Tag, Tooltip } from 'ant-design-vue';
import { ActionItem, BasicColumn, FormSchema } from '/@/components/Table';
import { ActionItem, BasicColumn } from '/@/components/Table';
import { useI18n } from '/@/hooks/web/useI18n';
import { h } from 'vue';
import { getEntity, SaveEntity } from '/@/api/tigerapi/system';
import { useLocale } from '/@/locales/useLocale';
import { useModal } from '/@/components/Modal';
import { CustModalParams, FunctionType } from '/@/api/tigerapi/model/systemModel';
import { CustModalParams } from '/@/api/tigerapi/model/systemModel';
import { useForm } from '/@/components/Form';
import { useMessage } from '/@/hooks/web/useMessage';
import { UpdateWoBatchStatus } from '/@/api/tigerapi/mes/wo';
import { useUserStore } from '/@/store/modules/user';
import { formatToDateTime } from '/@/utils/dateUtil';

const { getLocale } = useLocale();
const { createMessage, createErrorModal } = useMessage();
const { t } = useI18n();

function _default() {
@@ -79,123 +71,154 @@
     * @return {*}
     */
    GetHomeUrl: (params: {}) => {
      return `/BIZ_U9_ASN/LC/${encodeURI(JSON.stringify({ ID: 'BIZ_U9_ASN',"EntityName":"BIZ_U9_ASN", colSlots: params['colSlots'], crudColSlots: [] }))}`;
      return `/BIZ_U9_ASN/LC/${encodeURI(JSON.stringify({ ID: 'BIZ_U9_ASN', EntityName: 'BIZ_U9_ASN', colSlots: params['colSlots'], crudColSlots: [] }))}`;
    },
    GetBaseColumns: () => {
      return [
        {
          dataIndex: 'ORDER_NO',
          title: '单据号',
          // ifShow: false,
          sorter: true,
          resizable: true,
        },
        // {
        //   dataIndex: 'BATCH_NO',
        //   title: '工单批次号',
        //   ifShow: true,
        //   sorter: true,
        //   resizable: true,
        //   customRender: () => {},
        // },
        {
          dataIndex: 'STATUS',
          title: '状态',
          ifShow: true,
          sorter: true,
          resizable: true,
          customRender: ({ record }) => {
            let color = '';
            let text = '';
            switch (
              record.STATUS //状态(0Init初始化|1Imported已导入|2Release已下发|3Working生产中|4Paused已暂停|5Closed已关闭)
            ) {
              case 0:
                text ='初始化';
                color = '#8a8a8a';
                break;
              case 1:
                text = '已导入';color = 'blue';
                break;
              case 2:
                text = '已送达';color = 'green';
                break;
              case 3:
                text = '清点中';color = 'orange';
                break;
              case 4:
                text = '上架中';color = 'red';
                break;
              case 5:
                text = '待审核';color = '#e1822c';
                break;
              case 6:
                text = '已完成';color = '#009966';
                break;
              case 7:
                text = '已作废';color = '#CCCCCC';
                break;
            }
            return h(Tooltip, { title: text }, () => h(Tag, { color: color }, () => text));
          },
        },
        {
          dataIndex: 'SUPP_CODE',
          title: '供应商编码',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'SUPP_NAME',
          title: '供应商名称',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'ORDER_DATE',
          title: '单据日期',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'DELIVERY_DATE',
          title: '送货日期',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'PLANARRIVED_DATE',
          title: '预计送达日期',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'RECEIVER',
          title: '收货人',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'RECEIVE_DATE',
          title: '收货日期',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
        {
          dataIndex: 'REMARK',
          title: '备注',
          ifShow: true,
          sorter: true,
          resizable: true,
        },
      ];
    GetBaseColumns: (type: string) => {
      switch (type) {
        case 'BIZ_U9_ASN_DTL':
          return [
            {
              dataIndex: 'ORDER_NO',
              title: '单据号',
              // ifShow: false,
              sorter: true,
              resizable: true,
            },
            // {
            //   dataIndex: 'BATCH_NO',
            //   title: '工单批次号',
            //   ifShow: true,
            //   sorter: true,
            //   resizable: true,
            //   customRender: () => {},
            // },
            {
              dataIndex: 'STATUS',
              title: '状态',
              ifShow: true,
              sorter: true,
              resizable: true,
              customRender: ({ record }) => {
                let color = '';
                let text = '';
                switch (
                  record.STATUS //状态(0Init初始化|1Imported已导入|2Release已下发|3Working生产中|4Paused已暂停|5Closed已关闭)
                ) {
                  case 0:
                    text = '初始化';
                    color = '#8a8a8a';
                    break;
                  case 1:
                    text = '已导入';
                    color = 'blue';
                    break;
                  case 2:
                    text = '已送达';
                    color = 'green';
                    break;
                  case 3:
                    text = '清点中';
                    color = 'orange';
                    break;
                  case 4:
                    text = '上架中';
                    color = 'red';
                    break;
                  case 5:
                    text = '待审核';
                    color = '#e1822c';
                    break;
                  case 6:
                    text = '已完成';
                    color = '#009966';
                    break;
                  case 7:
                    text = '已作废';
                    color = '#CCCCCC';
                    break;
                }
                return h(Tooltip, { title: text }, () => h(Tag, { color: color }, () => text));
              },
            },
            {
              dataIndex: 'SUPP_CODE',
              title: '供应商编码',
              ifShow: true,
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'SUPP_NAME',
              title: '供应商名称',
              ifShow: true,
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'ORDER_DATE',
              title: '单据日期',
              ifShow: true,
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'DELIVERY_DATE',
              title: '送货日期',
              ifShow: true,
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'PLANARRIVED_DATE',
              title: '预计送达日期',
              ifShow: true,
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'RECEIVER',
              title: '收货人',
              ifShow: true,
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'RECEIVE_DATE',
              title: '收货日期',
              ifShow: true,
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'REMARK',
              title: '备注',
              ifShow: true,
              sorter: true,
              resizable: true,
            },
          ];
        case 'BIZ_U9_ASN_SN':
          return [
            {
              dataIndex: 'ORDER_NO',
              title: '单据号',
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'LINE_NO',
              title: '单据行号',
              sorter: true,
              resizable: true,
            },
            {
              dataIndex: 'SN',
              title: '条码',
              sorter: true,
              resizable: true,
            },
          ];
      }
    },
    GetSearchForm: () => {
      return [
@@ -313,7 +336,6 @@
  };

  /* 以下是内部方法，不export，供上面的方法调用 */


  return [methods, ActionColumn];
}