一些更改

Ben Lin

2025-02-27 8a12783afd1d6c4881d90e66bb0a52010a1598ae

 src/views/tigerprojects/system/lowcode/composition/LeftTable.vue

@@ -7,26 +7,29 @@
 * @LastEditTime: 2024-10-21 23:03:27
-->
<template>
  <div>
    <Suspense class="w-1/4 xl:w-1/5">
      <mainTable />
  <div class="flex">
    <div v-show="false">
      <printTemplate1 :table-data="printData" :qrInstoreOrder="qrInstoreOrder"></printTemplate1>
    </div>
    <Suspense>
      <div class="w-1/4 xl:w-4/5 h-full">
        <mainTable />
      </div>
    </Suspense>
    <Suspense>
      <div class="w-3/4 xl:w-4/5 p-5">
        <CarGridNav v-if="showNav" :configType="configType" :nodes="nodes">
          <template #[item] v-for="item in otherSlots" :key="item">
            <!-- 自定义内容 -->
            <div class="h-full" style="height: 400px">
              <FlowChartView :data="routeData" @init="init" />
            </div>
          </template>
        </CarGridNav>
        <Config
          v-if="showConfig"
          :configType="configType"
          :OtherTableName="OtherTableName"
          @success="configSuccess"
        />
      <div class="w-1/4 xl:w-1/5 py-4 pr-4 h-full">
        <div class="p-5 h-full" style="background-color: white">
          <span class="mb-5 p-5" style="color: #0780b9; font-size: 16px">请扫码打印入库单</span>
          <a-button type="primary" @click="ToPrint"> 打印 </a-button>
          <QrCode
            :value="qrCodeUrl"
            :height="198"
            :options="{ margin: 5 }"
            ref="qrDiyRef"
            :logo="LogoImg"
          />
        </div>
        <span class="mb-5 p-5" style="color: #0780b9">{{ tag }}</span>
      </div>
    </Suspense>
    <Suspense>
@@ -63,24 +66,30 @@
<script lang="ts" setup>
  import { useModal } from '@/components/Modal';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import CarGridNav from './CarGridNav.vue';
  import Config from './Config.vue';
  import mainTable from './mainTable.vue';
  import printTemplate1 from './printTemplate1.vue';
  import CustModal from '/@/views/components/CustModal.vue';
  import { OpenCustModal, initRoute } from '../data';
  import { Ref, onMounted, provide, ref } from 'vue';
  import { FlowChartView } from '/@/components/FlowChart';
  import { useRoute } from 'vue-router';
  import { custOnChange, goByParams, OpenCustModal } from '../data';
  import { Ref, h, onMounted, onUnmounted, provide, ref, unref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { BasicForm } from '/@/components/Form/index';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { useMessage } from '/@/hooks/web/useMessage';
  import LogicFlow from '@logicflow/core';
  import { getEntity, GetEnum } from '/@/api/tigerapi/system';
  import { isNullOrEmpty } from '/@/utils/is';
  import { useLocale } from '/@/locales/useLocale';
  import { Tag, Tooltip } from 'ant-design-vue';
  import { getRoleButtons } from '/@/api/sys/menu';
  import { QrCode } from '/@/components/Qrcode/index';
  import LogoImg from '/@/assets/images/logo.png';
  import printJS from 'print-js';
  import { useWebSocketStore } from '/@/store/modules/websocket';
  import { buildUUID } from '/@/utils/uuid';

  defineOptions({ name: '工单工艺绑定' });

  const { notification } = useMessage();
  const usewebSocket = useWebSocketStore();
  const { getLocale } = useLocale();
  const route = useRoute();
  const { setTitle } = useTabs();
  const { currentRoute } = useRouter();
  // const objParams = ref(JSON.parse(decodeURI(route.params?.id as string))); //ref(JSON.parse(history.state.obj))
  const routeParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
  // 从sessionStorage中读取参数并转换回对象
@@ -94,29 +103,236 @@
  const otherSlots = ref<any[]>([]);
  const selectVals = ref({});
  const isMounted = ref(false);
  const showNav = ref(false);
  const showConfig = ref(false);
  const configType = ref('');
  const OtherTableName = ref('');
  const nodes = ref([]);
  const routeData = ref({
    nodes: [],
    edges: [],
  const qrCodeUrl = ref(`PrintJS_${buildUUID()}`);
  const tag = ref('');
  const _columns = ref<any[]>([]);
  const _searchFormSchema = ref<any[]>([]);
  const _crudFormSchema = ref<any[]>([]);
  const buttons = ref([]);
  const printData = ref<any[]>([]);
  const qrInstoreOrder = ref('YDRKD20241118001');
  const AuthOption = ref({
    BY_ORG: '',
    BY_PROD: '',
    BY_WH: '',
  });
  const keyFieldValues = ref<any>(null);
  const custImport = ref<any>(null);
  const [registerCust] = useModal();
  provide<Ref<any>>('objParams', objParams);
  provide<Ref<any>>('selectedNodes', nodes);
  setTitle(objParams.value.Title); //设置标签页标题


  // function handleAdd(){
  //   console.log('handleAdd');
  // }
  provide<Ref<any>>('keyFieldValues', keyFieldValues);
  provide<Ref<{}>>('AuthOption', AuthOption);
  provide<Ref<any[]>>('_columns', _columns);
  provide<Ref<any[]>>('_searchFormSchema', _searchFormSchema);
  provide<Ref<any[]>>('_crudFormSchema', _crudFormSchema);

  onMounted(async () => {
    isMounted.value = false;

    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'
          },
        ],
      },
      // {
      //   id: '112',
      //   Items: [
      //     {
      //       ID: 311,
      //       ORDER_NO: 'YDSO241101002',
      //       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: 312,
      //       ORDER_NO: 'YDSO241101002',
      //       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: 313,
      //       ORDER_NO: 'YDSO241101002',
      //       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',
      //   Items: [
      //     {
      //       ID: 211,
      //       ORDER_NO: 'YDSO241101002',
      //       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: 212,
      //       ORDER_NO: 'YDSO241101002',
      //       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: 213,
      //       ORDER_NO: 'YDSO241101002',
      //       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'
      //     },
      //   ],
      // },
    ];

    /* 动态import实体名.ts的自定义方法 */
    try {
      custImport.value = await import(`../entityts/${entityName.value}.ts`);
@@ -124,29 +340,209 @@
        otherSlots.value = custImport.value['default']()[0]['GetSlots']();
      }
      isMounted.value = true;

      const data = await getEntity({
        sqlcmd: `CODE_NAME ='${objParams.value.Name}'`,
        entityName: 'SYS_LOW_CODE',
        order: '',
      });
      AuthOption.value.BY_ORG = data.Data.Items[0].BY_ORG;
      AuthOption.value.BY_PROD = data.Data.Items[0].BY_PROD;
      AuthOption.value.BY_WH = data.Data.Items[0].BY_WH;
      var searchForms = JSON.parse(data.Data.Items[0].SEARCH_FORM_JSON);
      for (const i in searchForms) {
        if (
          !isNullOrEmpty(searchForms[i].componentProps) &&
          !isNullOrEmpty(searchForms[i].componentProps.api) &&
          searchForms[i].componentProps.api == 'GetEnum'
        ) {
          searchForms[i].componentProps.api = GetEnum;
          searchForms[i].componentProps.params.name =
            `${objParams.value.ID}+${searchForms[i].field}s`;
          searchForms[i].componentProps.labelField = unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name';
        }
        if (
          !isNullOrEmpty(searchForms[i].componentProps) &&
          !isNullOrEmpty(searchForms[i].componentProps.api) &&
          searchForms[i].componentProps.api == 'getEntity'
        ) {
          searchForms[i].componentProps.api = getEntity;
          searchForms[i].componentProps.resultField = 'Data.Items';
        }
        if (searchForms[i].component == 'RangePicker') {
        }
        onChangeConfig(searchForms[i]);
      }
      _searchFormSchema.value = searchForms;

      var objs = JSON.parse(data.Data.Items[0].BASE_FORM_JSON);
      for (const i in objs) {
        if (!isNullOrEmpty(objs[i].customRender)) {
          const func = new Function(objs[i].customRender)();
          objs[i].customRender = ({ record }) => {
            let texts = func(record);
            /* 如果是链接就跳转并传入配置的参数 */
            if (texts.isLink == 'Y') {
              return h('a', [
                h(
                  'span',
                  {
                    onClick: () => {
                      goByParams(texts.path, texts.params, go);
                    },
                  },
                  texts.text,
                ),
              ]);
            } else {
              return h(Tooltip, { title: texts.text }, () =>
                h(Tag, { color: texts.color }, () => texts.text),
              );
            }
          };
        }
      }
      _columns.value = objs;
      buttons.value = await getRoleButtons(currentRoute.value.meta.menuCode as string);
    } catch (e) {
      console.log(e);
    }
  });

  const currlf = ref(null) as Ref<LogicFlow | null>;
  /**
   * @description: 工艺路线初始化，特殊页面自定义内容
   * @param {*} lf
   * @description: Select 自定义onChange方法
   * @param {*} obj
   * @return {*}
   */
  async function init(lf, rotId) {
    initRoute(lf, rotId, routeData, currlf, objParams.value.rotType);
  function onChangeConfig(obj: any) {
    if (obj.component == 'Select') {
      var options = obj.componentProps.options;
      var onChange = obj.componentProps.onChange;
      obj.componentProps = ({ schema, tableAction, formActionType, formModel }) => {
        return {
          options: options,
          onChange: (e) => custOnChange(e, onChange, objParams.value.ID),
        };
      };
    }
  }



  /**
   * @description: 保存配置成功返回方法
   * @return {*}
   * @desc 生成QR完成
   */
  function configSuccess() {
    notification.success({ message: '成功保存行为配置数据' });
  function onQrcodeDone({ ctx }: any) {
    if (ctx instanceof CanvasRenderingContext2D) {
      // 额外绘制
      ctx.fillStyle = 'black';
      ctx.font = '16px "微软雅黑"';
      ctx.textBaseline = 'bottom';
      ctx.textAlign = 'center';
      ctx.fillText('你帅你先扫', 200, 380, 600);
    }
  }

  const unsubscribe = usewebSocket.$subscribe((mutation, state) => {
    tag.value = `收到打印请求：${state.printTag}`;
    if (state.printTag == qrCodeUrl.value) {
      // printJS(state.printJson);
      printData.value = state.printJson as unknown as any[];
      usewebSocket.SetPrintTag('');
      setTimeout(() => {
        ToPrint();
      }, 100);
    }
  });

  // 当组件卸载时取消订阅
  onUnmounted(() => {
    unsubscribe();
  });

  function ToPrint() {
    const _style = `
      #print-area {
        position: absolute;
        inset: 0;
        background-color: #fff;

        .item {
          display: flex;
          flex-direction: column;
          page-break-after: always;
          height: 100%;


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

          .main {
            display: flex;
            flex: 1;
            justify-content: center;
            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: 20px;
              text-align: center;
              word-break: break-all;
            }

            .material_table_td {
              border: 1px solid #000;
              font-size: 14px; 
              line-height: 20px;
              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;
          }
        }
      }`;

    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}`,
    });
  }

  /**
@@ -197,7 +593,7 @@
  }
</script>
<style lang="less">
.vben-page-wrapper .vben-page-wrapper-content {
  .vben-page-wrapper .vben-page-wrapper-content {
    margin: 1px;
}
  }
</style>