一些更新

Ben Lin

2025-02-25 fee83fc57f553595cc3a4891b8a692fa66cd77fe

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

@@ -1,5 +1,29 @@
<template>
  <div>
    <Loading
      :loading="compState.loading"
      :absolute="compState.absolute"
      :theme="compState.theme"
      :background="compState.background"
      :tip="compState.tip"
    />
    <div v-show="false">
      <printTemplate />
    </div>
    <CollapseContainer title="操作信息" class="m-2" v-if="!isSearch[String(currentTab.name)]">
      <BasicForm @register="registerbaseForm">
        <template #[l]="{ field }" v-for="l in colSlots" :key="l">
          <a-button
            v-if="field"
            class="mt-1 ml-1"
            size="small"
            @click="handleSelectItem(l)"
            preIcon="search|svg"
          />
          <!-- <GeneralModal @register="baseFormModalRegister" @success="(d, u) => baseFormSuccess(d, u, l)" /> -->
        </template>
      </BasicForm>
    </CollapseContainer>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <!-- 根据菜单设置的按钮，自动生成 -->
@@ -13,11 +37,12 @@
          {{ item['FUNC_NAME'] }}
        </a-button>
      </template>
      <!--这里的action是ant的Table里固定的插槽action，取表格数据data中的行记录record-->
      <template #action="{ record }">
        <TableAction :actions="createActions(record)" />
      </template>
      <template #[item]="{ field }" v-for="item in colSlots" :key="item">
        <!-- <template #form-BAS_REASON3aadd="{ field }"> -->
        <!-- <template #form-BAS_REASON3aadd="{ field }"> --><!--在查询form中框架会自动查找插槽名加上form-，然后传入列json数据，这里取field的值-->
        <a-button
          v-if="field"
          class="mt-1 ml-1"
@@ -70,8 +95,15 @@
  </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';
@@ -79,6 +111,7 @@
  import CustModal from '/@/views/components/CustModal.vue';
  import RouteViewModal from '/@/views/components/RouteViewModal.vue';
  import ImportExcelModal from '/@/views/components/ImportExcelModal.vue';
  import { CollapseContainer } from '@/components/Container';
  import { FlowChartView } from '/@/components/FlowChart';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { useModal } from '/@/components/Modal';
@@ -88,12 +121,19 @@
  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 { useRoute, useRouter } from 'vue-router';
  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';
  import { useLowCodeStore } from '/@/store/modules/lowcode';
  import { useMultipleTabStore } from '/@/store/modules/multipleTab';

  const { t } = useI18n();
  const { currentRoute } = useRouter();
@@ -113,13 +153,23 @@
  const isExistSql = inject('isExistSql') as Ref<string>;
  const keyFieldValues = inject('keyFieldValues') as Ref<Recordable[]>;
  const AuthOption = inject('AuthOption') as Ref<{}>;
  const entityName = ref(objParams.value['ID']);
  const entityName = ref(objParams.value['EntityName']);
  const go = useGo();
  const [registerDrawer, { openDrawer }] = useDrawer();
  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 useLowcode = useLowCodeStore();
  const { isSearch } = storeToRefs(useLowcode);
  const tabStore = useMultipleTabStore();
  function getCurrentTab() {
    const route = unref(currentRoute);
    return tabStore.getTabList.find((item) => item.fullPath === route.fullPath)!;
  }
  const currentTab = getCurrentTab();
  const cType = ref('');
  const formSchemas = ref({}); //弹出框多表单结构
  const routeData = ref({
@@ -127,6 +177,23 @@
    edges: [],
  });
  const selectVals = 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: '正在加载打印数据...',
  });

  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
@@ -138,9 +205,10 @@
      CustFunc(param: CustModalParams) {},
    } as EntityCustFunctionType,
  ]);

  /* 动态import实体名.ts的自定义方法 */
  try {
    custImport.value = await import(`../entityts/${objParams.value['ID']}.ts`);
    custImport.value = await import(`../entityts/${objParams.value['EntityName']}.ts`);
  } catch (e) {
    console.log(e);
  }
@@ -163,11 +231,12 @@

  keyFieldValues.value = isNullOrUnDef(KeyFieldValues)
    ? {}
    : KeyFieldValues(objParams.value['CODE'], objParams.value['ID']);
    : KeyFieldValues(objParams.value['CODE'], objParams.value['EntityName']);
  const dtlSlots = ref<any[]>([]);
  const ImportTitle = GetTitle && isFunction(GetTitle)? ref(GetTitle().importTitle): ref('');
  const ImportTitle = GetTitle && isFunction(GetTitle) ? ref(GetTitle().importTitle) : ref('');
  const useformdata = GetUseForm && isFunction(GetUseForm) ? GetUseForm() : {};
  const useFormData = ref<any>(useformdata);

  /* 自定义模态窗口中表单中插槽渲染按钮打开模态框useModal方法 */
  const modals = GetUseModals && isFunction(GetUseModals) ? GetUseModals() : { useModalData: {} };
  const useModalData = ref(modals['useModalData']);
@@ -179,11 +248,22 @@
  /* 获取自定义数据 */
  const custData = GetCustData && isFunction(GetCustData) ? GetCustData() : { isCustEl: {} };
  const isCustEl = ref(custData['isCustEl']);

  const [registerbaseForm, { resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
    labelWidth: 140,
    schemas: _searchFormSchema as unknown as FormSchema[],
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });

  /* 主表格初始化 */
  const [registerTable, { getForm, reload, setProps }] = useTable({
    title: '列表信息',
    api: getListByPage,
    searchInfo: {
      TABLE_NAME: objParams.value['ID'],
      TABLE_NAME: objParams.value['EntityName'],
      option:
        AuthOption.value['BY_ORG'] == 'Y'
          ? {
@@ -193,6 +273,7 @@
              CurOrg: useUserStore().getUserInfo.orgCode,
            }
          : '',
      NeedInclude: true,
    },
    beforeFetch: (t) => SearchInfoFn(t, route.name, AuthOption.value['BY_ORG'] == 'Y'),
    afterFetch: afterFetch,
@@ -203,7 +284,7 @@
      submitFunc: () => Search(), //自定义查询提交按钮的方法，触发查询提交事件
      resetFunc: () => useQuery.resetFunc(route.name, getForm(), AuthOption.value['BY_ORG'] == 'Y'),
    },
    useSearchForm: true,
    useSearchForm: isSearch.value[String(currentTab.name)],
    showTableSetting: true,
    bordered: true,
    canResize: true,
@@ -227,7 +308,7 @@
          getForm().setFieldsValue(savedParams.value['params']);
          setProps({
            searchInfo: {
              TABLE_NAME: objParams.value['ID'],
              TABLE_NAME: objParams.value['EntityName'],
              option:
                AuthOption.value['BY_ORG'] == 'Y'
                  ? {
@@ -299,7 +380,7 @@
    const params = {
      record,
      isUpdate: true,
      entityName: objParams.value['ID'],
      entityName: objParams.value['EntityName'],
      formJson: _crudFormSchema.value,
      cType,
      dtlSlots,
@@ -316,7 +397,17 @@
    };

    /* 根据菜单设置的按钮自动生成操作列中的按钮 */
    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;
    }
@@ -392,6 +483,9 @@
        case 'importModal' /* 打开导入Excel模态窗口 */:
          openImportModal(true, result.params);
          break;
        case 'ToPrint':
          ToPrint({});
          break;
      }
    }
  }
@@ -426,7 +520,7 @@
      )
        .then((m) => {
          const [{ GetSelectSuccess: GetSelectSuccess2 }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess2(d, u, objParams.value['ID']));
          getForm().setFieldsValue(GetSelectSuccess2(d, u, objParams.value['EntityName']));
        })
        .catch(() => {
          getForm().setFieldsValue({
@@ -554,4 +648,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>