cnhis-design-vue 0.3.2-beta → 0.3.5-beta

package/packages/button-print/index.ts

@@ -0,0 +1,15 @@
+import type { App } from "vue";
+// 导入组件
+import ButtonPrint from "./src/ButtonPrint.vue"
+
+type SFCWithInstall<T> = T & { install(app: App): void }; // vue 安装
+
+// 为组件提供 install 安装方法，供按需引入
+ButtonPrint.install = function(app: App) {
+  app.component(ButtonPrint.name, ButtonPrint);
+};
+
+const CButtonPrint: SFCWithInstall<typeof ButtonPrint> = ButtonPrint; // 增加类型
+
+// 默认导出组件
+export default CButtonPrint;

package/packages/button-print/src/ButtonPrint.vue

@@ -0,0 +1,697 @@
+<template>
+  <span @click="handleClickWrap">
+    <NDropdown
+      placement="bottom-start"
+      :show="state.visible"
+      @clickoutside="handleClickOutside"
+      :options="options"
+      @select="handleSelect"
+    >
+      <slot
+        name="button" 
+        :handleClickPrintBtn="handleClickBtn"
+        :printSpinning="state.spinning" 
+        :printbtnText="btnText"
+        :printVisible="state.visible"
+      >
+        <NButton class="dropdown-button" style="margin: 0 8px 8px 0" @click.stop="handleClickBtn">
+          <NIcon v-if="state.spinning" :component="Reload" style="line-height: 10px" />
+          {{ btnText }}
+          <NIcon :component="ChevronDown" />
+        </NButton>
+      </slot>
+    </NDropdown>
+
+    <IdentityVerification
+      :visible.sync="state.identityVerification.visible"
+      :printConfig="printConfig"
+      :baseUrl="baseUrl"
+      :verifyUserUrl="verifyUserUrl"
+      :identityVerificationTitle="identityVerificationTitle"
+      @success="verifiySuccess"
+    ></IdentityVerification>
+  </span>
+</template>
+
+<script lang="ts">
+import create from '@/core/create';
+export default create({
+  name: "ButtonPrint"
+})
+</script>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
+import { NDropdown, NButton, NIcon } from 'naive-ui'
+import { ChevronDown, Reload } from "@vicons/ionicons5";
+import { useMessage } from 'naive-ui'
+import type { DropdownOption } from 'naive-ui'
+import Print from './utils/print.es.min.js';
+// import vClickoutside from '@/utils/clickoutside';
+import vexutils from '@/utils/vexutils';
+// import type { Props } from './interfaces'
+import IdentityVerification from './components/IdentityVerification.vue';
+import axios from 'axios'
+import moment from 'moment';
+// const Print:any = import.meta.globEager('./utils/print.es.min.js')['./utils/print.es.min.js'].default;
+
+(window as any).$message = useMessage()
+let printInstance: any = null;
+let httpFn: any = null;
+
+// 在.vue文件中使用导入的interface会报错，提示要使用字面量类型，当前在github上vue的issue已经有这个问题了，目前还没解决
+interface Props {
+  baseUrl: string
+  btnText?: string
+  printText?: string
+  previewText?: string
+  formatEditText?: string
+  identityVerificationTitle?: string
+  authorizationKey: string
+  templateNumber: number | string
+  params: any[],
+  hisParams: any
+  prevFn?: Function
+  verifyUserUrl?: string
+  getPrintFormatByNumberUrl?: string
+  getTemplateParamsUrl?: string
+  strategy?: string
+  printConfig?: any
+  versionType?: number | string
+}
+const props = withDefaults(defineProps<Props>(), {
+  baseUrl: '',
+  btnText: '打印',
+  printText: '直接打印',
+  previewText: '打印预览',
+  formatEditText: '格式编辑',
+  identityVerificationTitle: '打印服务身份校验',
+  prevFn: () => Promise.resolve(),
+  verifyUserUrl: '/verifyUser',
+  getPrintFormatByNumberUrl: '/getPrintFormatByNumber',
+  getTemplateParamsUrl: '/getTemplateParams',
+  strategy: 'MULTI',
+  printConfig: () => {},
+  versionType: '2'
+});
+const emit = defineEmits(['success', 'error']);
+
+const state = reactive({
+  spinning: false,
+  visible: false,
+  formatList: [],
+  templateParams: {},
+  printParams: [],
+  currentFormatId: '',
+  identityVerification: {
+    visible: false
+  },
+  isInited: false,
+  watchPrintParamsReformatFn: null,
+  spinTimer: null
+});
+const options: Array<DropdownOption> = reactive([
+  {
+    label: props.printText,
+    key: 'printText'
+  },
+  {
+    label: props.previewText,
+    key: 'previewText'
+  },
+  {
+    label: props.formatEditText,
+    key: 'formatEditText'
+  }
+]);
+
+const currentFormatItem = computed(() => {
+  if (!state.currentFormatId) return {};
+  let id = state.currentFormatId;
+  return state.formatList.find((item: any) => item.id === id);
+})
+const formatTitle = computed(() => (currentFormatItem.value as any).name || '格式选择')
+
+const getTemplateIdByFormatId = (id: string | number) => {
+  let find: any = state.formatList.find((item: any) => item.id === id);
+  return find.templateId;
+}
+const callLocalServicesSuccessCb = (res: any, type: any) => {
+  let info = {
+    type,
+    formatId: state.currentFormatId,
+    templateId: getTemplateIdByFormatId(state.currentFormatId)
+  };
+  emit('success', res, info);
+}
+const callLocalServicesErrorCb = (res: any) => {
+  emit('error', res);
+}
+const prevFnError = () => {
+  let error = {
+    message: '前置条件执行错误'
+  };
+  emit('error', error);
+}
+const getHisParams = (index: number = 0) => {
+  const { reportid = '280' } = (props.hisParams as any);
+  const { id, name } = (state.templateParams as any);
+  return {
+    reportid,
+    formatid: state.currentFormatId || id,
+    formatname: name,
+    param: props.params[index]
+  };
+}
+const getOnceHisParams = () => {
+  const { reportid = '280' } = (props.hisParams as any);
+  const { id, name } = (state.templateParams as any);
+  const obj: any = {}
+  Object.keys((props.params as any)[0]).forEach(v => {
+    obj[v] = [];
+    props.params.forEach((k: any) => {
+      obj[v].push(k[v]);
+    });
+    obj[v] = obj[v].join(',');
+  });
+  return {
+    reportid,
+    formatid: state.currentFormatId || id,
+    formatname: name,
+    param: obj
+  };
+}
+const getPrintParams = (index: number = 0) => {
+  const params = state.printParams[index];
+  return JSON.stringify(params);
+}
+const getOnceParams = () => {
+  // 聚合一条
+  let params = {};
+  let obj: any = {};
+  if ((state.templateParams as any).customizeDataset?.length) {
+    // 有模板数据
+    const key = Object.keys((state.printParams[0] as any).datasetData || {})?.[0] || '';
+    const datasetDataKeyVal = JSON.stringify(state.printParams.map((v: any) => JSON.parse(v.datasetData[key])));
+    obj = {
+      datasetData: {}
+    };
+    obj.datasetData[key] = datasetDataKeyVal;
+  } else {
+    // 无模板数据
+    Object.keys(state.printParams[0]).forEach(v => {
+      obj[v] = [];
+      state.printParams.forEach(k => {
+        obj[v].push(k[v]);
+      });
+      obj[v] = obj[v].join(',');
+    });
+  }
+  params = Object.assign({}, JSON.parse(getPrintParams(0)), obj);
+  return JSON.stringify(params);
+}
+const handleClickPrint = () => {
+  let len = state.printParams.length;
+  const callLocalServicesSuccessCbTmp = async (data: any) => {
+    try {
+      if (--len <= 0) {
+        callLocalServicesSuccessCb(data, 'print');
+      }
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  props.prevFn()
+    .catch(() => {
+      prevFnError();
+      return Promise.reject();
+    })
+    .then(() => {
+      if (props.versionType == 1 || props.versionType == 3) {
+        const printFn = props.versionType == 1 ? 'handleHisPrint' : 'handleOldHisPrint'
+        if (props.strategy === 'MULTI') {
+          for (let i = 0; i < props.params.length; i++) {
+            const params = getHisParams(i);
+            printInstance[printFn](7, params)
+              .then((res: any) => {
+                console.log(res, '777777777777');
+              })
+              .catch((error:any) => {
+                console.log(error, 'error777');
+              });
+          }
+        } else {
+          const params = getOnceHisParams();
+          printInstance[printFn](7, params)
+            .then((res: any) => {
+              console.log(res, '777777777777');
+            })
+            .catch((error:any) => {
+              console.log(error, 'error777');
+            });
+        }
+      } else {
+        if (props.strategy === 'MULTI') {
+          // 循环多条
+          for (let i = 0; i < state.printParams.length; i++) {
+            const queryParams = {
+              formatId: state.currentFormatId,
+              templateId: getTemplateIdByFormatId(state.currentFormatId),
+              params: getPrintParams(i)
+            };
+            printInstance.printDirect(queryParams, callLocalServicesSuccessCbTmp, callLocalServicesErrorCb);
+          }
+        } else {
+          // 聚合一条
+          const queryParams = {
+            formatId: state.currentFormatId,
+            templateId: getTemplateIdByFormatId(state.currentFormatId),
+            params: getOnceParams()
+          };
+          printInstance.printDirect(
+            queryParams,
+            (res: any) => {
+              callLocalServicesSuccessCb(res, 'print');
+            },
+            callLocalServicesErrorCb
+          );
+        }
+      }
+    })
+    .finally(() => {
+      state.visible = false;
+    });
+}
+const handleClickPreview = async () => {
+  props.prevFn()
+    .catch(() => {
+      prevFnError();
+      return Promise.reject();
+    })
+    .then(() => {
+      if (props.versionType == 1 || props.versionType == 3) {
+        const params = props.strategy === 'MULTI' ? getHisParams() : getOnceHisParams();
+        const printFn = props.versionType == 1 ? 'handleHisPrint' : 'handleOldHisPrint'
+        printInstance[printFn](8, params)
+          .then((res: any) => {
+            console.log(res, 88888888);
+          })
+          .catch((error: any) => {
+            console.log(error, 'error888');
+          });
+      } else {
+        const params = props.strategy === 'MULTI' ? getPrintParams() : getOnceParams();
+        const queryParams = {
+          formatId: state.currentFormatId,
+          templateId: getTemplateIdByFormatId(state.currentFormatId),
+          params
+        };
+        printInstance.preview(
+          queryParams,
+          (res: any) => {
+            callLocalServicesSuccessCb(res, 'preview');
+          },
+          callLocalServicesErrorCb
+        );
+      }
+    })
+    .finally(() => {
+      state.visible = false;
+    });
+}
+const handleClickEdit = () => {
+  props.prevFn()
+    .catch(() => {
+      prevFnError();
+      return Promise.reject();
+    })
+    .then(() => {
+      if (props.versionType == 1 || props.versionType == 3) {
+        const params = props.strategy === 'MULTI' ? getHisParams() : getOnceHisParams();
+        const printFn = props.versionType == 1 ? 'handleHisPrint' : 'handleOldHisPrint'
+        printInstance[printFn](9, params)
+          .then((res: any) => {
+            console.log(res, 999999);
+          })
+          .catch((error: any) => {
+            console.log(error, 'error999');
+          });
+      } else {
+        state.identityVerification.visible = true;
+      }
+    })
+    .finally(() => {
+      state.visible = false;
+    });
+}
+const handleSelect = (key: string) => {
+  switch(key) {
+    case 'printText':
+      handleClickPrint();
+      break;
+    case 'previewText':
+      handleClickPreview();
+      break;
+    case 'formatEditText':
+      handleClickEdit();
+      break;
+    default:
+      state.currentFormatId = key;
+      break;
+  }
+}
+const handleClickOutside = () => {
+  state.visible = false;
+}
+const handleClickWrap = () => {
+  setTimeout(() => {
+    state.visible = true;
+  }, 0);
+}
+const setTimeoutSpin = () => {
+  (state as any).spinTimer = setTimeout(() => {
+    state.spinning = true;
+  }, 1500);
+}
+const instantiatePrintSDK = () => {
+  if (printInstance) return false;
+  printInstance = new Print();
+}
+const queryFormatList = () => {
+  const { templateNumber, authorizationKey, baseUrl, getPrintFormatByNumberUrl, versionType } = props;
+  const suffix = [1, 3].includes(+versionType) ? `jsessionids=${vexutils.cookie.get('jsessionids') || '31e5fc0e-955f-4c89-9679-39c43d0171321636163291241'}` : `authorizationKey=${authorizationKey}`;
+  const url = `${baseUrl}${getPrintFormatByNumberUrl}?number=${templateNumber}&${suffix}`;
+  return httpFn
+    .get(url)
+    .then(async ({ data = {} }) => {
+      if ((data as any).result !== 'SUCCESS') {
+        (window as any).$message.error((data as any).resultMsg || '参数异常，请联系管理员');
+        return false;
+      }
+      return data;
+    })
+    .catch((e: any) => {
+      return false;
+    });
+}
+const getDefaultFormatId = (list: any[], key: string | number) => {
+  if (!list?.length) return '';
+  let findDefault = list.find(item => item[key] == 1);
+  return findDefault?.id || list[0].id;
+}
+const setOptions = () => {
+  const children = state.formatList.map((v: any): DropdownOption => {
+    return {
+      label: v.name,
+      key: v.id
+    }
+  })
+  options.unshift({
+    label: formatTitle.value,
+    key: 'format',
+    children
+  })
+}
+const initHIS = (formatListResult: any) => {
+  state.formatList = formatListResult ? formatListResult.list.filter((item: any) => item.printmark == 1) : [];
+  setOptions();
+  state.currentFormatId = getDefaultFormatId(state.formatList, 'printmark');
+  state.templateParams = state.formatList[0];
+}
+const formatFormatList = (list: any[]): any => {
+  let formatList: any[] = [];
+
+  list.forEach(item => {
+    if (!item.format) return false;
+    formatList.push(...item.format);
+  });
+
+  return formatList;
+}
+const setLoaded = () => {
+  state.spinning = false;
+  if (!state.spinTimer) return false;
+  clearTimeout(state.spinTimer);
+  state.spinTimer = null;
+}
+const requestError = () => {
+  state.isInited = false;
+  setLoaded();
+  setTimeout(() => {
+    state.visible = false;
+  }, 0);
+
+  return false;
+}
+const queryTemplateParams = () => {
+  const { templateNumber, authorizationKey, baseUrl, getTemplateParamsUrl } = props;
+  const { templateId } = state.formatList[0] || {};
+  const url = `${baseUrl}${getTemplateParamsUrl}?number=${templateNumber}&templateId=${templateId}&authorizationKey=${authorizationKey}`;
+
+  return httpFn
+    .get(url)
+    .then(async ({ data = {} }) => {
+      if ((data as any).result !== 'SUCCESS') {
+        (window as any).$message.error((data as any).resultMsg || '参数异常，请联系管理员');
+        return false;
+      }
+      return (data as any)?.obj || {};
+    })
+    .catch((e: any) => {
+      return false;
+    });
+}
+const formatDefaultVal = (i: any, tableVal?: any) => {
+  let val = i.defaultValue || '';
+  let tVal = tableVal;
+  if (i.type === 'NUMBER') {
+    tVal = Number(tableVal) || 0;
+  }
+  if (i.type === 'DATE') {
+    tVal = tableVal ? moment(tableVal).format('YYYY-MM-DD') : '';
+  }
+  if (i.type === 'DATETIME') {
+    tVal = tableVal ? moment(tableVal).format('YYYY-MM-DD HH:mm:ss') : '';
+  }
+
+  return val ? val : tVal;
+}
+const formatPrintParams = (paramObj: any, fieldList: any[], keyName: string) => {
+  const obj: any = {};
+  fieldList.forEach((i: any) => {
+    let defaultVal = formatDefaultVal(i, paramObj[i[keyName]]);
+    if (paramObj[i[keyName]] && defaultVal) {
+      obj[i[keyName]] = defaultVal;
+    }
+  });
+
+  return obj;
+}
+const formatParams = ({ customizeDataset = [], param = [] }, params: any[] = []): any => {
+  return params.map(paramObj => {
+    let res: any = {};
+
+    // 自定义结果集
+    customizeDataset.forEach((dataSetItem: any) => {
+      const selectFieldList = dataSetItem.dataSetting[0].selectFieldList;
+      res['datasetData'] = {
+        [dataSetItem.name]: JSON.stringify(formatPrintParams(paramObj, selectFieldList, 'fieldName'))
+      };
+    });
+
+    // 参数
+    res = Object.assign({}, res, formatPrintParams(paramObj, param, 'key'));
+    return res;
+  });
+}
+const initCRM = async (formatListResult: any) => {
+  state.formatList = formatListResult ? formatFormatList(formatListResult.obj) : [];
+  setOptions();
+  state.currentFormatId = getDefaultFormatId(state.formatList, 'defaultFlag');
+
+  if (!state.currentFormatId) {
+    (window as any).$message.error('获取打印格式失败，请联系管理员！');
+    return requestError();
+  }
+  if (!state.currentFormatId) {
+    requestError();
+    return;
+  }
+  let templateParamsResult = await queryTemplateParams();
+  // let templateParamsResult = {
+  //   "param": [],
+  //   "customizeDataset": [
+  //     {
+  //       "dataSetting": [
+  //         {
+  //           "selectFieldList": [
+  //             {
+  //               "fieldName": "name",
+  //               "type": "TEXT"
+  //             },
+  //             {
+  //               "fieldName": "age",
+  //               "type": "NUMBER"
+  //             },
+  //             {
+  //               "fieldName": "money",
+  //               "type": "NUMBER"
+  //             }
+  //           ],
+  //           "jsonType": "jsonObject",
+  //           "required": false,
+  //           "downloadFields": ""
+  //         }
+  //       ],
+  //       "name": "结果集1",
+  //       "defaultJson": {
+  //         "money": 0,
+  //         "name": "",
+  //         "age": 0
+  //       },
+  //       "customize": true,
+  //       "key": 1
+  //     }
+  //   ]
+  // }
+
+  if (templateParamsResult) {
+    state.templateParams = templateParamsResult;
+  } else {
+    return requestError();
+  }
+
+  state.printParams = formatParams(state.templateParams, props.params);
+}
+const init = async () => {
+  if (state.isInited) return true;
+  state.isInited = true;
+
+  setTimeoutSpin();
+
+  instantiatePrintSDK();
+  let config: any = {
+    withCredentials: false,
+    timeout: 5000
+  };
+  let printUrlPrefix = props?.printConfig?.printUrlPrefix;
+  if (printUrlPrefix) {
+    config.baseURL = printUrlPrefix;
+  }
+  httpFn = axios.create({
+    ...config
+  });
+  const formatListResult = await queryFormatList();
+  // const formatListResult = {
+  //   "result": "SUCCESS",
+  //   "code": 0,
+  //   "resultMsg": "",
+  //   "list": [],
+  //   "obj": [
+  //     {
+  //       "number": "170testtemp",
+  //       "name": "170公有模板",
+  //       "format": [
+  //         {
+  //           "number": "170testtemp",
+  //           "defaultFlag": 0,
+  //           "printType": "1",
+  //           "rowNum": 1,
+  //           "name": "170公有格式1",
+  //           "id": "1420212788840570880",
+  //           "templateId": "1420212316842958848",
+  //           "privateValue": 1
+  //         },
+  //         {
+  //           "number": "170testtemp",
+  //           "defaultFlag": 0,
+  //           "printType": "1",
+  //           "rowNum": 2,
+  //           "name": "测试格式名称",
+  //           "id": "1420242022380281856",
+  //           "templateId": "1420212316842958848",
+  //           "privateValue": 1
+  //         }
+  //       ],
+  //       "id": "1420212316842958848"
+  //     }
+  //   ],
+  //   "total": 0,
+  //   "recordsTotal": 0,
+  //   "recordsFiltered": 0
+  // }
+  if (props.versionType == 1 || props.versionType == 3) {
+    initHIS(formatListResult);
+  } else {
+    await initCRM(formatListResult);
+  }
+
+  setLoaded();
+
+  return true;
+}
+const handleClickBtn = async () => {
+  if (!state.visible) {
+    let result = await init();
+    if (!result) return false;
+  }
+
+  state.visible = !state.visible;
+}
+const reformatPrintParams = () => {
+  state.watchPrintParamsReformatFn && (state.watchPrintParamsReformatFn as any)();
+  /*
+    还没初始化完毕时（还没获取到模板格式配置等..）
+    触发再格式化逻辑，需等待初始化完毕，再重新执行格式化
+  */
+  if (!state.isInited) {
+    (state.watchPrintParamsReformatFn as any) = () => watch(() => state.isInited, val => {
+      if (!val) return false;
+      reformatPrintParams();
+    });
+    return;
+  }
+
+  state.printParams = formatParams(state.templateParams, props.params);
+}
+const verifiySuccess = (token: string) => {
+  state.identityVerification.visible = false;
+
+  const queryParams = {
+    formatId: state.currentFormatId,
+    templateId: getTemplateIdByFormatId(state.currentFormatId),
+    params: getPrintParams(),
+    token
+  };
+  printInstance.editPrintFormat(
+    queryParams,
+    (res: any) => {
+      callLocalServicesSuccessCb(res, 'edit');
+    },
+    callLocalServicesErrorCb
+  );
+}
+    
+onMounted(() => {
+  state.isInited = false;
+})
+
+watch(() => props.params,
+  (val: any) => {
+    if (!val?.length) return false;
+    reformatPrintParams();
+  },
+  { deep: true }
+)
+
+</script>
+
+<style lang="less" scoped>
+.dropdown-button {
+  color: #212121;
+  border-color: #d5d5d5 !important;
+  margin-left: 8px;
+  margin-bottom: 8px;
+}
+</style>