工单管理优化

Ben Lin

2025-01-09 7bcfc0507043dc878c801a259aa7d058f4982551

 src/views/tigerprojects/system/lowcode/normal/mainTable.vue

@@ -1,12 +1,23 @@
<template>
  <div>
    <Loading
      :loading="compState.loading"
      :absolute="compState.absolute"
      :theme="compState.theme"
      :background="compState.background"
      :tip="compState.tip"
    />
    <div v-show="false">
      <printTemplate />
    </div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <!-- 根据菜单设置的按钮，自动生成 -->
        <a-button
          type="primary"
          v-for="item in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
          @click="handleCreate(item['DO_METHOD'])"
          :preIcon="item['ICON_URL']"
          v-for="item in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
          :key="item"
        >
          {{ item['FUNC_NAME'] }}
@@ -25,7 +36,7 @@
          preIcon="search|svg"
        />
        <GeneralModal
          @register="registerItemAdd"
          @register="useModalInTableForm[item]"
          @success="(d, u) => handleItemSuccess(d, u, item)"
        />
      </template>
@@ -34,9 +45,10 @@
      <CustModal
        @register="registerCust"
        @success="custSuccess"
        @cancel="custCancel"
        :type="cType"
        :entityName="entityName"
        @modalInner="getdtlSlots"
        @modal-inner="getdtlSlots"
      >
        <!-- 用插槽自定义多表单 -->
        <template #[item.name] v-for="item in dtlSlots" :key="item.name">
@@ -64,38 +76,57 @@
      </CustModal>
    </Suspense>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
    <ImportExcelModal @register="registerImport" :title="ImportTitle" />
  </div>
</template>
<script lang="ts" setup>
  import { Ref, inject, nextTick, onMounted, ref, unref, watch } from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
  import { Ref, inject, nextTick, onMounted, reactive, ref, unref, watch } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    FormSchema,
    ActionItem,
  } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useDrawer } from '/@/components/Drawer';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../normalDrawer.vue';
  import CustModal from '/@/views/components/CustModal.vue';
  import RouteViewModal from '/@/views/components/RouteViewModal.vue';
  import ImportExcelModal from '/@/views/components/ImportExcelModal.vue';
  import { FlowChartView } from '/@/components/FlowChart';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { useModal } from '/@/components/Modal';
  import { useGo } from '/@/hooks/web/usePage';
  import { DeleteEntity, getEntity, getListByPage } from '/@/api/tigerapi/system';
  import { getListByPage } from '/@/api/tigerapi/system';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
  import { getRoleButtons } from '/@/api/sys/menu';
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { GenerateActionButton, initRoute, OpenCustModal } from '../data';
  import { afterFetchFn, GenerateActionButton, initRoute, SearchInfoFn } from '../data';
  import LogicFlow from '@logicflow/core';
  import { isFunction } from 'xe-utils';
  import { CustModalParams } from '/@/api/tigerapi/model/systemModel';
  import { useQueryStore } from '/@/store/modules/queryInpage';
  import printJS, { Configuration } from 'print-js';
  import printTemplate from '/@/views/components/printTemplate.vue';
  import { Loading, useLoading } from '@/components/Loading';
  import { useWoFlowcardStore } from '/@/store/modules/woflowcardprint';
  import { storeToRefs } from 'pinia';

  const { t } = useI18n();
  const { currentRoute } = useRouter();
  const route = unref(currentRoute);
  const useQuery = useQueryStore();
  const props = defineProps({
    useTableData: { type: Object as PropType<{}>, default: { table: [] } },
    crudColSlots: { type: Object as PropType<any> },
  });
  const objParams = inject('objParams') as Ref<any>;
  const savedParams = inject('savedParams') as Ref<any>;
  const colSlots = ref(objParams.value['colSlots']);
  const _columns = inject('_columns') as Ref<any[]>;
  const _searchFormSchema = inject('_searchFormSchema') as Ref<any[]>;
@@ -107,9 +138,12 @@
  const entityName = ref(objParams.value['ID']);
  const go = useGo();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const [registerRv, { openModal: openRvModal, closeModal: RvcloseModal }] = useModal();
  const [registerCust, { openModal: openCustModal }] = useModal();
  const [registerCrud, { openModal: openCrudModal }] = useModal();
  const [registerImport, { openModal: openImportModal }] = useModal();
  const useWoFlowCard = useWoFlowcardStore();
  const { curPrintInfo } = storeToRefs(useWoFlowCard);
  const cType = ref('');
  const formSchemas = ref({}); //弹出框多表单结构
  const routeData = ref({
@@ -117,6 +151,142 @@
    edges: [],
  });
  const selectVals = ref({});
  const printData = ref<any[]>([]);
  const wokerorder = ref('');
  const compState = reactive<{
    absolute?: boolean;
    loading?: boolean;
    theme?: 'dark' | 'light';
    background?: string;
    tip?: string;
  }>({
    absolute: false,
    loading: false,
    theme: 'dark',
    background: 'rgba(111,111,111,.7)',
    tip: '加载中...',
  });
  const [openFullLoading, closeFullLoading] = useLoading({
    tip: '正在加载打印数据...',
  });

  printData.value = [
    {
      id: '111',
      Items: [
        {
          ID: 111,
          SALES_ORDER: 'YDSO240400482',
          ORDER_NO: 'YDRKD241000012',
          WORK_ORDER: 'YDMOB241104737',
          ITEM_CODE: '20100705.0102.00',
          ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
          PLAN_QTY: 100,
          SCAN_QTY: 50,
          STATUS: 'Y',
        },
        {
          ID: 112,
          SALES_ORDER: 'YDSO240400483',
          ORDER_NO: 'YDRKD241000013',
          WORK_ORDER: 'YDMOB241104737',
          ITEM_CODE: '20100705.0102.00',
          ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
          PLAN_QTY: 100,
          SCAN_QTY: 50,
          STATUS: 'Y',
        },
        {
          ID: 113,
          SALES_ORDER: 'YDSO240400484',
          ORDER_NO: 'YDRKD241000014',
          WORK_ORDER: 'YDMOB241104737',
          ITEM_CODE: '20100705.0102.00',
          ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
          PLAN_QTY: 100,
          SCAN_QTY: 50,
          STATUS: 'Y',
        },
        {
          ID: 114,
          ORDER_NO: 'YDRKD241000015',
          SALES_ORDER: 'YDSO240400485',
          WORK_ORDER: 'YDMOB241104737',
          ITEM_CODE: '20100705.0102.00',
          ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
          PLAN_QTY: 100,
          SCAN_QTY: 50,
          STATUS: 'Y',
        },
        {
          ID: 115,
          ORDER_NO: 'YDRKD241000016',
          SALES_ORDER: 'YDSO240400486',
          WORK_ORDER: 'YDMOB241104737',
          ITEM_CODE: '20100705.0102.00',
          ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
          PLAN_QTY: 100,
          SCAN_QTY: 50,
          STATUS: 'Y',
        },
        {
          ID: 116,
          ORDER_NO: 'YDRKD241000017',
          SALES_ORDER: 'YDSO240400487',
          WORK_ORDER: 'YDMOB241104737',
          ITEM_CODE: '20100705.0102.00',
          ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
          PLAN_QTY: 100,
          SCAN_QTY: 50,
          STATUS: 'Y',
        },
        // {
        //   ID: 116,
        //   ORDER_NO: 'YDRKD241000018',
        //   SALES_ORDER: 'YDSO240400488',
        //   WORK_ORDER: 'YDMOB241104737',
        //   ITEM_CODE: '20100705.0102.00',
        //   ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
        //   PLAN_QTY: 100,
        //   SCAN_QTY: 50,
        //   STATUS: 'Y',
        // },
        // {
        //   ID: 116,
        //   ORDER_NO: 'YDRKD241000019',
        //   SALES_ORDER: 'YDSO240400489',
        //   WORK_ORDER: 'YDMOB241104737',
        //   ITEM_CODE: '20100705.0102.00',
        //   ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
        //   PLAN_QTY: 100,
        //   SCAN_QTY: 50,
        //   STATUS: 'Y',
        // },
        // {
        //   ID: 116,
        //   ORDER_NO: 'YDRKD241000020',
        //   SALES_ORDER: 'YDSO240400490',
        //   WORK_ORDER: 'YDMOB241104737',
        //   ITEM_CODE: '20100705.0102.00',
        //   ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
        //   PLAN_QTY: 100,
        //   SCAN_QTY: 50,
        //   STATUS: 'Y',
        // },
        // {
        //   ID: 116,
        //   ORDER_NO: 'YDRKD241000021',
        //   SALES_ORDER: 'YDSO240400491',
        //   WORK_ORDER: 'YDMOB241104737',
        //   ITEM_CODE: '20100705.0102.00',
        //   ITEM_NAME: 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 ',
        //   PLAN_QTY: 100,
        //   SCAN_QTY: 50,
        //   STATUS: 'Y',
        // },
      ],
    },
  ];
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
@@ -125,12 +295,15 @@
      OpenSelectItem(openItemModal: Fn, ...args) {},
      GetSelectSuccess(d, u, ...args) {},
      GetUseForm(...args) {},
      CustFunc(param: CustModalParams) {},
    } as EntityCustFunctionType,
  ]);
  /* 动态import实体名.ts的自定义方法 */
  try {
    custImport.value = await import(`../entityts/${objParams.value['ID']}.ts`);
  } catch (e) {}
  } catch (e) {
    console.log(e);
  }
  const [
    {
      ActionItem: nActionItem,
@@ -140,6 +313,8 @@
      GetCustData,
      OpenSelectItem: OpenSelectCust,
      GetSelectSuccess,
      CustFunc,
      GetTitle,
    },
    ActionColumn,
  ] = isNullOrUnDef(custImport.value['default'])
@@ -150,11 +325,17 @@
    ? {}
    : KeyFieldValues(objParams.value['CODE'], objParams.value['ID']);
  const dtlSlots = ref<any[]>([]);
  const ImportTitle = GetTitle && isFunction(GetTitle) ? ref(GetTitle().importTitle) : ref('');
  const useformdata = GetUseForm && isFunction(GetUseForm) ? GetUseForm() : {};
  const useFormData = ref<any>(useformdata);
  /* 表单中插槽渲染按钮打开模态框useModal方法 */
  /* 自定义模态窗口中表单中插槽渲染按钮打开模态框useModal方法 */
  const modals = GetUseModals && isFunction(GetUseModals) ? GetUseModals() : { useModalData: {} };
  const useModalData = ref(modals['useModalData']);
  /* 表格内的插槽渲染的弹出选择框列表 */
  const useModalInTableForm = ref<any>({});
  colSlots.value.map((x) => {
    useModalInTableForm.value[x] = useModal();
  });
  /* 获取自定义数据 */
  const custData = GetCustData && isFunction(GetCustData) ? GetCustData() : { isCustEl: {} };
  const isCustEl = ref(custData['isCustEl']);
@@ -172,25 +353,39 @@
              CurOrg: useUserStore().getUserInfo.orgCode,
            }
          : '',
      NeedInclude: true,
    },
    beforeFetch: (t) => SearchInfoFn(t, route.name, AuthOption.value['BY_ORG'] == 'Y'),
    afterFetch: afterFetch,
    columns: _columns as unknown as BasicColumn[],
    formConfig: {
      labelWidth: 140,
      schemas: _searchFormSchema as unknown as FormSchema[],
      submitFunc: () => Search(), //自定义查询提交按钮的方法，触发查询提交事件
      resetFunc: () => useQuery.resetFunc(route.name, getForm(), AuthOption.value['BY_ORG'] == 'Y'),
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    canResize: true,
    showIndexColumn: false,
    actionColumn: ActionColumn, //自定义操作列
    actionColumn: ActionColumn
      ? ActionColumn
      : {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        }, //自定义操作列
  });

  watch(
    () => AuthOption.value,
    (newVal, oldVal) => {
      nextTick(() => {
        if (!isNullOrEmpty(newVal.BY_ORG)) {
        if (!isNullOrEmpty(newVal.BY_ORG) && !isNullOrUnDef(savedParams.value['params'])) {
          getForm().setFieldsValue(savedParams.value['params']);
          setProps({
            searchInfo: {
              TABLE_NAME: objParams.value['ID'],
@@ -212,7 +407,39 @@
    { deep: true, immediate: true },
  );

  onMounted(() => {});
  onMounted(async () => {
    if (!isNullOrUnDef(savedParams) && !isNullOrUnDef(savedParams.value['params'])) {
      getForm().setFieldsValue(savedParams.value['params']);
      reload();
    }
    // if (
    //   !isNullOrUnDef(useQuery.getCurSearchInfo['searchInfo']) &&
    //   useQuery.getCurSearchInfo['name'] == route.name
    // ) {
    //   getForm().resetFields();
    //   const searchInfo = useQuery.getCurSearchInfo['searchInfo'];
    //   await getForm().setFieldsValue(searchInfo);
    // }
  });

  /**
   * @description: 查询提交
   * @return {*}
   */
  async function Search() {
    useQuery.submitFunc(route.name, getForm(), AuthOption.value['BY_ORG'] == 'Y').then(() => {
      reload();
    });
  }

  /**
   * @description: 请求之后对返回值进行处理
   * @param {*} t
   * @return {*}
   */
  function afterFetch(t) {
    afterFetchFn(t, route.name, getForm());
  }

  const currlf = ref(null) as Ref<LogicFlow | null>;
  /**
@@ -221,7 +448,7 @@
   * @return {*}
   */
  async function init(lf, rotId) {
    initRoute(lf, rotId, routeData, currlf);
    initRoute(lf, rotId, routeData, currlf, null);
  }

  /**
@@ -245,12 +472,26 @@
      currlf,
      selectVals,
      colSlots,
      ifSave: true,
      sName: objParams.value['sName'],
    };

    const actionItem = GenerateActionButton(params, buttons, openDrawer, reload);
    /* 根据菜单设置的按钮自动生成操作列中的按钮 */
    const _actionItem: ActionItem[] = [];
    const actionItem = GenerateActionButton(params, buttons, openDrawer, reload, _actionItem);
    let _btn = buttons.value.filter((q) => q['BUTTON_TYPE'] == 1 && q['DO_METHOD'] == 'ToPrint');
    if (_btn.length > 0) {
      _actionItem.push({
        icon: isNullOrEmpty(_btn[0]['ICON_URL']) ? '' : _btn[0]['ICON_URL'],
        tooltip: '打印',
        onClick: ToPrint.bind(null, params),
        name: _btn[0]['DO_METHOD'],
      });
    }
    if (isNullOrUnDef(custImport.value['default'])) {
      return actionItem;
    }
    /* 根据动态加载的实体类名.ts中的ActionItem方法，渲染操作列中的按钮方法 */
    return nActionItem(
      params,
      actionItem,
@@ -262,6 +503,7 @@
      go,
      setProps,
      openCustModal,
      openCrudModal,
    );
  }

@@ -279,23 +521,26 @@
  }

  /**
   * @description: 获取新增按钮的行为
   * @description: 获取工具栏中按钮的行为
   * @return {*}
   */
  function handleCreate(fnName: string) {
    if (isNullOrUnDef(custImport.value['default'])) {
      /* 如果动态加载的实体类.ts不存在，则直接打开侧边框 */
      openDrawer(true, {
        isUpdate: false,
        entityName: entityName.value,
        formJson: _crudFormSchema.value,
        crudColSlots: objParams.value['crudColSlots'],
        isExistSql: isExistSql.value,
        isUpdate: false, //是新增还是编辑，false-新增|true-编辑
        entityName: entityName.value, //实体类名
        formJson: _crudFormSchema.value, //新增编辑的表单结构
        crudColSlots: objParams.value['crudColSlots'], //新增编辑的表单中的插槽列表
        isExistSql: isExistSql.value, //是否存在检查sql，比如: XXX_CODE = '12345'
        ifSave: true, //是否提交表单时保存到数据库，否-暂存|是-保存
      });
    } else {
      /* 如果动态加载的实体类.ts存在，根据.ts文件中的方法来执行操作 */
      const [{ CreateAction }] = custImport.value['default']();
      const result = CreateAction(fnName);
      const result = CreateAction(entityName.value, fnName);
      switch (result.action) {
        case 'go':
        case 'go' /* 跳转页面 */:
          // 将对象转换为JSON字符串并保存到sessionStorage
          sessionStorage.setItem(
            `${result.params.Name}_params`,
@@ -305,14 +550,21 @@
            `/${result.url}/${encodeURI(JSON.stringify({ sName: result.params.Name, Name: result.params.Name }))}`,
          );
          break;
        case 'drawer':
        case 'drawer' /* 打开侧边框 */:
          openDrawer(true, {
            isUpdate: false,
            entityName: entityName.value,
            formJson: _crudFormSchema.value,
            crudColSlots: objParams.value['crudColSlots'],
            isExistSql: isExistSql.value,
            isUpdate: false, //是新增还是编辑，false-新增|true-编辑
            entityName: entityName.value, //实体类名
            formJson: _crudFormSchema.value, //新增编辑的表单结构
            crudColSlots: objParams.value['crudColSlots'], //新增编辑的表单中的插槽列表
            isExistSql: isExistSql.value, //是否存在检查sql，比如: XXX_CODE = '12345'
            ifSave: true, //是否提交表单时保存到数据库，否-暂存|是-保存
          });
          break;
        case 'importModal' /* 打开导入Excel模态窗口 */:
          openImportModal(true, result.params);
          break;
        case 'ToPrint':
          ToPrint({});
          break;
      }
    }
@@ -325,6 +577,11 @@
   * @return {*}
   */
  function handleSuccess(d, u) {
    if (CustFunc && isFunction(CustFunc)) {
      CustFunc({
        values: d,
      });
    }
    reload();
  }

@@ -343,7 +600,7 @@
      )
        .then((m) => {
          const [{ GetSelectSuccess: GetSelectSuccess2 }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess2(d, u));
          getForm().setFieldsValue(GetSelectSuccess2(d, u, objParams.value['ID']));
        })
        .catch(() => {
          getForm().setFieldsValue({
@@ -366,10 +623,10 @@
      )
        .then((m) => {
          const [{ OpenSelectItem }] = m.default();
          OpenSelectItem(openItemModal);
          OpenSelectItem(useModalInTableForm.value[item][1].openModal);
        })
        .catch(() => {
          openItemModal(true, {
          useModalInTableForm.value[item][1].openModal(true, {
            title: '物料列表',
            schemas: [
              {
@@ -404,8 +661,22 @@
        });
    } catch (e) {}
  }
  //弹出框确定返回

  /**
   * @description: 弹出框确定返回
   * @param {*} d
   * @return {*}
   */
  function custSuccess(d) {
    reload();
  }

  /**
   * @description: 弹出框取消返回
   * @param {*} reload
   * @return {*}
   */
  function custCancel() {
    reload();
  }

@@ -423,11 +694,11 @@
      selectVals.value = values; //保存弹出框选择的结果
      let _val = {};
      d.returnFieldName.map((x) => {
          _val[x] = values[x];
        });
        _val[x] = values[x];
      });
      useFormData.value[item][1].setFieldsValue(_val);
      /* 针对工单的方法 */
      if (d.returnFieldName.filter((x) => x == 'ROUTE_CODE') && item == 'prodinfo' ) {
      if (d.returnFieldName.filter((x) => x == 'ROUTE_CODE') && item == 'prodinfo') {
        routeData.value = {
          nodes: [],
          edges: [],
@@ -457,4 +728,115 @@
  function RvItemSuccess(d, u) {
    RvcloseModal();
  }

  function ToPrint(params: {}) {
    openFullLoading();
    useWoFlowCard.getWoPickList(params['record']['ORDER_NO']).then((res) => {
      const _style = `
      #print-area {
        position: absolute;
        inset: 0;
        background-color: #fff;

        .item {
          display: flex;
          flex-direction: column;
          height: 100%;
          margin-right: 10px;
          margin-left: 10px;
          font-family: SimSun, "宋体", serif;
          page-break-after: always;

          .head {
          z-index: 1;
          width: 100%;
          background-color: azure;
          font-size: 20px;
          font-weight: bold;
          line-height: 100px;
          text-align: center;
        }

          .main {
            display: flex;
            flex: 1;
            justify-content: center;
            margin-top: 10px;
            padding: 15px;
            
            table {
              border-collapse: collapse;
              width: 100%;
            }

            table,
            th,
            td {
              border: solid 1px black;
            }

            tr > th {
              height: 60px;
            }
            .instore_td {
              border: 1px solid #000;
              font-size: 12px;
              line-height: 16px;
              text-align: center;
              word-break: break-all;
            }
            
            .instore_td2 {
              height: 60px;
              border: 1px solid #000;
              font-family: SimSun, "宋体", serif;
              font-size: 12px; /* 修改为你想要的字体大小 */
              line-height: 20px;
              text-align: center;
              word-break: break-all;
            }

            .material_table_td {
              border: 1px solid #000;
              font-size: 12px; 
              height: 25px;
              line-height: 18px;
              text-align: center;
              word-break: break-all;
            }
          }

          .footer {
            display: flex;
            margin-bottom: 15px;
            background-color: #eee;
            font-size: 12px;
            line-height: 21px;
            text-align: center;
          }
        }
        .line {
          width: 100px; /* 线条的长度 */
          height: 0;
          margin: 10px; /* 线条与其他元素的距离 */
          border-top: 1px solid black; /* 线条的颜色和宽度 */
        }
      }`;

      printJS({
        // 需要打印区域设置的Id
        printable: 'print-area',
        // 打印类型
        type: 'html',
        // 默认值为800，我们把把设置为100%
        maxWidth: '100%',
        // *代表应用所有样式，默认值为null，如果不设置，打印窗口则会忽略所有样式
        targetStyles: ['*'],
        // font_size: '9pt',
        scanStyles: false,
        style: `@page {size: auto; margin: 0mm;} html, ${_style}`,
      } as unknown as Configuration);
      closeFullLoading();
    });
  }
</script>