cnhis-design-vue 2.1.141 → 2.1.144

package/packages/button/src/ButtonPrint/index.vue

@@ -1,70 +1,29 @@
 <template>
-  <span v-clickoutside="handleClickOutside" @click="handleClickWrap">
-    <a-dropdown :visible="visible" overlayClassName="rowFoldHideBtnList-dropdown">
-      <a-menu slot="overlay">
-        <a-sub-menu class="format-name" key="format" :title="formatTitle">
-          <a-menu-item v-for="item in formatList" :key="item.id" :class="{ active: item.id === currentFormatId }" @click="handleClickFormat(item.id)">
-            {{ item.name }}
-          </a-menu-item>
-        </a-sub-menu>
-        <a-menu-divider />
-        <a-menu-item @click="e => handleClickPrint(e)">
-          {{ printText }}
-        </a-menu-item>
-        <a-menu-item @click="e => handleClickPreview(e)">
-          {{ previewText }}
-        </a-menu-item>
-        <a-menu-item @click="e => handleClickPdf(e)">
-          {{ pdfLoadText }}
-        </a-menu-item>
-        <a-menu-item @click="e => handleClickEdit(e)">
-          {{ formatEditText }}
-        </a-menu-item>
-      </a-menu>
-      <slot name="button" :handleClickPrintBtn="handleClickBtn" :printSpinning="spinning" :printbtnText="btnText" :printVisible="visible">
-        <a-button class="dropdown-button" style="margin: 0 8px 8px 0" @click.stop="handleClickBtn">
-          <a-icon v-if="spinning" type="loading" style="line-height: 10px" />
-          {{ btnText }}
-          <a-icon type="down" />
-        </a-button>
-      </slot>
-    </a-dropdown>
-
-    <IdentityVerification
-      :printConfig="printConfig"
-      :baseUrl="baseUrl"
-      :verifyUserUrl="verifyUserUrl"
-      :visible.sync="identityVerification.visible"
-      :identityVerificationTitle="identityVerificationTitle"
-      :authorizationKey="authorizationKey"
-      @success="verifiySuccess"
-    ></IdentityVerification>
-  </span>
+	<component
+		ref="printComponentRef"
+		:is="isComponent"
+		v-bind="getProps"
+    v-on="$listeners"
+	>
+		<template v-slot:button="slotProps">
+			<!-- 自定义按钮样式 -->
+			<slot name="button" v-bind="slotProps"></slot>
+		</template>
+	</component>
 </template>
 <script>
-/**
- * @author ruanlin
- * @desc 全继承antd按钮组件，后期再扩展
- * @time 2021-06-08
- */
 
-let httpFn = null;
-import Print from './js/print.es.min';
-import IdentityVerification from './components/IdentityVerification';
-import Clickoutside from '@/utils/clickoutside';
-import Vue from 'vue';
-import { Button, Dropdown, Menu, Icon } from 'ant-design-vue';
+
 import create from '@/core/create';
-import axios from 'axios';
-import moment from 'moment';
-import vexutils from '@/utils/vexutils';
+import OldPrintComponent from './old.vue';
+import NewPrintComponent from './new.vue';
 
 export default create({
   name: 'button-print',
   components: {
-    IdentityVerification
+    OldPrintComponent,
+    NewPrintComponent
   },
-  directives: { Clickoutside },
   props: {
     baseUrl: {
       type: String
@@ -165,645 +124,30 @@ export default create({
 
     getPrintParamsAfter: {
       type: Function
-    }
-  },
-  computed: {
-    currentFormatItem() {
-      if (!this.currentFormatId) return {};
-      let id = this.currentFormatId;
-      return this.formatList.find(item => item.id === id);
     },
-    formatTitle() {
-      return this.currentFormatItem?.name || '格式选择';
+    // 隐藏默认按钮配置。printText: 直接打印；previewText: 打印预览；downloadPdf：下载pdf；formatEditText：格式编辑。示例：hideButtons = ['formatEditText']
+    hideButtons: {
+      type: Array,
+      default: () => []
     },
-    printExtraParams() {
-      return this?.printConfig?.printExtraParams || {};
+    // 新版打印配置（新）
+    newPrintSetting: {
+      type: Object,
+      default: () => ({})
     },
-    queryParams() {
-      return {
-        formatId: this.currentFormatId,
-        templateId: this.getTemplateIdByFormatId(this.currentFormatId)
-      };
-    }
-  },
-  data() {
-    return {
-      spinning: false,
-      visible: false,
-      formatList: [],
-      templateParams: {},
-      printParams: [],
-      currentFormatId: '',
-      /*  */
-      identityVerification: {
-        visible: false
-      },
-      isInited: false,
-      watchPrintParamsReformatFn: null,
-      spinTimer: null,
-      printInstance: null
-    };
-  },
-  beforeCreate() {
-    Vue.use(Button)
-      .use(Dropdown)
-      .use(Menu)
-      .use(Icon);
-  },
-  mounted() {
-    this.isInited = false;
-  },
-  beforeDestroy() {
-    // 创建Print实例的时候会在webview中注册一个事件, 需要调用printInstance.destroy()手动清除
-    this.printInstance?.destroy?.();
-    this.printInstance = null;
-  },
-  watch: {
-    // 监听变化, 重新格式化printParams
-    params: {
-      deep: true,
-      handler(val) {
-        if (!val?.length) return false;
-        this.reformatPrintParams();
-      }
+    // 获取模板数据（新）
+    printFormatByNumberData: {
+      type: Object,
+      default: () => (null)
     }
   },
-  methods: {
-    // getPopupContainer(triggerNode) {
-    //   return triggerNode.parentNode;
-    // },
-    handleClickOutside() {
-      this.visible = false;
-    },
-    handleClickWrap() {
-      setTimeout(() => {
-        this.visible = true;
-      }, 0);
-    },
-    /*  */
-    async handleClickBtn() {
-      if (!this.visible) {
-        let result = await this.init();
-        if (!result) return false;
-      }
-
-      this.visible = !this.visible;
-    },
-    /*  */
-    async init() {
-      if (this.isInited) return true;
-      this.isInited = true;
-
-      this.setTimeoutSpin();
-
-      this.instantiatePrintSDK();
-      let config = {
-        withCredentials: false,
-        timeout: 5000
-      };
-      let printUrlPrefix = this?.printConfig?.printUrlPrefix;
-      let customCofing = this?.printConfig?.customCofing || {};
-      let cCofing = this.getCustomCofing(customCofing);
-      if (axios !== this.axios && printUrlPrefix) {
-        config.baseURL = printUrlPrefix;
-      }
-      httpFn = axios.create({
-        ...config,
-        ...cCofing
-      });
-      const formatListResult = await this.queryFormatList();
-      if (this.versionType == 1 || this.versionType == 3) {
-        this.initHIS(formatListResult);
-      } else {
-        await this.initCRM(formatListResult);
-      }
-
-      this.setLoaded();
-
-      return true;
-    },
-    initHIS(formatListResult) {
-      this.formatList = formatListResult ? formatListResult.list.filter(item => item.printmark == 1) : [];
-      this.currentFormatId = this.getDefaultFormatId(this.formatList, 'printmark');
-      this.templateParams = this.formatList[0] || {};
-    },
-    async initCRM(formatListResult) {
-      this.formatList = formatListResult ? this.formatFormatList(formatListResult.obj) : [];
-      this.currentFormatId = this.getDefaultFormatId(this.formatList, 'defaultFlag');
-
-      if (!this.currentFormatId) {
-        this.$message.error(this.noformatTips || '获取打印格式失败，请联系管理员！');
-        return this.requestError();
-      }
-      if (!this.currentFormatId) {
-        this.requestError();
-        return;
-      }
-      let templateParamsResult = await this.queryTemplateParams();
-
-      if (templateParamsResult) {
-        this.templateParams = templateParamsResult;
-      } else {
-        return this.requestError();
-      }
-
-      this.printParams = this.formatParams(this.templateParams, this.params);
-    },
-    setTimeoutSpin() {
-      this.spinTimer = setTimeout(() => {
-        this.spinning = true;
-      }, 1500);
-    },
-    setLoaded() {
-      this.spinning = false;
-      if (!this.spinTimer) return false;
-      clearTimeout(this.spinTimer);
-      this.spinTimer = null;
-    },
-    requestError() {
-      this.isInited = false;
-      this.setLoaded();
-      setTimeout(() => {
-        this.visible = false;
-      }, 0);
-
-      return false;
-    },
-    getDefaultFormatId(list, key) {
-      if (!list?.length) return '';
-      let findDefault = list.find(item => item[key] == 1);
-      return findDefault?.id || list[0].id;
-    },
-    /*  */
-    instantiatePrintSDK() {
-      if (this.printInstance) return false;
-      this.printInstance = new Print();
-    },
-    /*  */
-    queryFormatList() {
-      const { templateNumber, authorizationKey, baseUrl, getPrintFormatByNumberUrl, versionType } = this;
-      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.result !== 'SUCCESS') {
-            this.$message.error(data.resultMsg || '参数异常，请联系管理员');
-            return false;
-          }
-          return data;
-        })
-        .catch(e => {
-          return false;
-        });
-    },
-    formatFormatList(list) {
-      let formatList = [];
-
-      list.forEach(item => {
-        if (!item.format) return false;
-        formatList.push(...item.format);
-      });
-
-      return formatList;
-    },
-    /*  */
-    queryTemplateParams() {
-      const { templateNumber, authorizationKey, baseUrl, getTemplateParamsUrl } = this;
-      const { templateId } = this.formatList[0] || {};
-      const url = `${baseUrl}${getTemplateParamsUrl}?number=${templateNumber}&templateId=${templateId}&authorizationKey=${authorizationKey}`;
-
-      return httpFn
-        .get(url)
-        .then(async ({ data }) => {
-          if (data.result !== 'SUCCESS') {
-            this.$message.error(data.resultMsg || '参数异常，请联系管理员');
-            return false;
-          }
-          return data?.obj || {};
-        })
-        .catch(e => {
-          return false;
-        });
-    },
-    formatDefaultVal(i, tableVal) {
-      const formatMap = {
-        DATE: 'YYYY-MM-DD',
-        DATETIME: 'YYYY-MM-DD HH:mm:ss'
-      };
-      let tVal = tableVal;
-      if (Object.keys(formatMap).includes(i.type) && tableVal) {
-        tVal = moment(tableVal).format(formatMap[i.type]);
-      }
-      if (i.type === 'TEXT') {
-        tVal = String(tableVal) || '';
-      }
-
-      return tVal || i?.defaultValue || '';
-    },
-    formatParams({ customizeDataset = [], param = [] }, params = []) {
-      return params.map(paramObj => {
-        let res = {};
-
-        // 自定义结果集
-        customizeDataset.forEach(dataSetItem => {
-          const selectFieldList = dataSetItem.dataSetting[0].selectFieldList;
-          res['datasetData'] = {
-            [dataSetItem.name]: JSON.stringify(this.formatPrintParams(paramObj, selectFieldList, 'fieldName'))
-          };
-        });
-
-        // 参数
-        res = Object.assign({}, res, this.formatPrintParams(paramObj, param, 'key'));
-        return res;
-      });
-    },
-    reformatPrintParams() {
-      this.watchPrintParamsReformatFn && this.watchPrintParamsReformatFn();
-      /*
-        还没初始化完毕时（还没获取到模板格式配置等..）
-        触发再格式化逻辑，需等待初始化完毕，再重新执行格式化
-      */
-      if (!this.isInited) {
-        this.watchPrintParamsReformatFn = this.$watch('isInited', val => {
-          if (!val) return false;
-          this.reformatPrintParams();
-        });
-        return;
-      }
-
-      this.printParams = this.formatParams(this.templateParams, this.params);
-    },
-    formatPrintParams(paramObj, fieldList, keyName) {
-      const obj = {};
-      fieldList.forEach(i => {
-        let defaultVal = this.formatDefaultVal(i, paramObj[i[keyName]]);
-        if (paramObj[i[keyName]] && defaultVal) {
-          obj[i[keyName]] = defaultVal;
-        }
-      });
-
-      return obj;
-    },
-    /*  */
-    handleClickFormat(id) {
-      this.currentFormatId = id;
-    },
-    /*  */
-    getPrintParams(index = 0) {
-      const params = this?.printParams?.[index] || {};
-      const extraParams = this?.printExtraParams || {};
-      let res = {
-        ...(params || {}),
-        ...(this.token ? { token: this.token } : {}),
-        ...extraParams
-      };
-      if (typeof this.getPrintParamsAfter === 'function') {
-        let t = this.getPrintParamsAfter(res);
-        return t || res;
-      }
-      return JSON.stringify(res);
-    },
-    getTemplateIdByFormatId(id) {
-      let find = this.formatList.find(item => item.id === id);
-      return find?.templateId || '';
-    },
-    getOnceParams() {
-      // 聚合一条
-      let params = {};
-      let obj = {};
-      let cur = this.printParams?.[0] || {};
-      if (this.templateParams?.customizeDataset?.length) {
-        // 有模板数据
-        const key = Object.keys(cur?.datasetData || {})?.[0] || '';
-        const datasetDataKeyVal = JSON.stringify(this.printParams.map(v => JSON.parse(v.datasetData[key])));
-        obj = {
-          datasetData: {}
-        };
-        obj.datasetData[key] = datasetDataKeyVal;
-      } else {
-        // 无模板数据
-        Object.keys(cur).forEach(v => {
-          obj[v] = [];
-          this.printParams.forEach(k => {
-            obj[v].push(k[v]);
-          });
-          obj[v] = obj[v].join(',');
-        });
-      }
-      params = Object.assign({}, JSON.parse(this.getPrintParams(0)), obj);
-      if (typeof this.getOnceParamsAfter === 'function') {
-        let res = this.getOnceParamsAfter(params, obj);
-        return res || params;
-      }
-      return JSON.stringify(params);
-    },
-    handleClickPrint(e) {
-      e.domEvent.stopPropagation();
-      let len = this.printParams.length;
-      const callLocalServicesSuccessCb = async data => {
-        try {
-          if (--len <= 0) {
-            this.callLocalServicesSuccessCb(data, 'print');
-          }
-        } catch (error) {
-          console.log('error', error);
-        }
-      };
-
-      this.prevFn()
-        .catch(() => {
-          this.prevFnError();
-          return Promise.reject();
-        })
-        .then(() => {
-          if (this.versionType == 1 || this.versionType == 3) {
-            const printFn = this.versionType == 1 ? 'handleHisPrint' : 'handleOldHisPrint';
-            if (this.strategy === 'MULTI') {
-              for (let i = 0; i < this.params.length; i++) {
-                const params = this.getHisParams(i);
-                this.printInstance[printFn](7, params)
-                  .then(res => {
-                    console.log(res, '777777777777');
-                  })
-                  .catch(error => {
-                    console.log(error, 'error777');
-                  });
-              }
-            } else {
-              const params = this.getOnceHisParams();
-              this.printInstance[printFn](7, params)
-                .then(res => {
-                  console.log(res, '777777777777');
-                })
-                .catch(error => {
-                  console.log(error, 'error777');
-                });
-            }
-          } else {
-            const queryParams = {
-              ...this.queryParams,
-              printdlgshow: this.printdlgshow
-            };
-            if (this.strategy === 'MULTI') {
-              // 循环多条
-              for (let i = 0; i < this.printParams.length; i++) {
-                if (i > 0) queryParams.printdlgshow = '0';
-                this.printInstance.printDirect(
-                  {
-                    ...queryParams,
-                    params: this.getPrintParams(i)
-                  },
-                  callLocalServicesSuccessCb,
-                  this.callLocalServicesErrorCb,
-                  this.callLocalServicesCancelCb
-                );
-              }
-            } else {
-              // 聚合一条
-              this.printInstance.printDirect(
-                {
-                  ...queryParams,
-                  params: this.getOnceParams()
-                },
-                res => {
-                  this.callLocalServicesSuccessCb(res, 'print');
-                },
-                this.callLocalServicesErrorCb,
-                this.callLocalServicesCancelCb
-              );
-            }
-          }
-        })
-        .finally(() => {
-          this.visible = false;
-        });
-    },
-    getHisParams(index = 0) {
-      const { templateParams, hisParams, params } = this;
-      const { reportid = '280' } = hisParams;
-      const { id, name } = templateParams;
-      return {
-        reportid,
-        formatid: this.currentFormatId || id,
-        formatname: name,
-        param: params[index]
-      };
-    },
-    getOnceHisParams() {
-      const { templateParams, hisParams, params } = this;
-      const { reportid = '280' } = hisParams;
-      const { id, name } = templateParams;
-      const obj = {};
-      Object.keys(params[0]).forEach(v => {
-        obj[v] = [];
-        params.forEach(k => {
-          obj[v].push(k[v]);
-        });
-        obj[v] = obj[v].join(',');
-      });
-      return {
-        reportid,
-        formatid: this.currentFormatId || id,
-        formatname: name,
-        param: obj
-      };
-    },
-    async handleClickPreview(e) {
-      e.domEvent.stopPropagation();
-
-      this.prevFn()
-        .catch(() => {
-          this.prevFnError();
-          return Promise.reject();
-        })
-        .then(() => {
-          if (this.versionType == 1 || this.versionType == 3) {
-            const params = this.strategy === 'MULTI' ? this.getHisParams() : this.getOnceHisParams();
-            const printFn = this.versionType == 1 ? 'handleHisPrint' : 'handleOldHisPrint';
-            this.printInstance[printFn](8, params)
-              .then(res => {
-                console.log(res, 88888888);
-              })
-              .catch(error => {
-                console.log(error, 'error888');
-              });
-          } else {
-            const IS_MULTI = this.strategy === 'MULTI';
-
-            this.printInstance.preview(
-              {
-                ...this.queryParams,
-                params: IS_MULTI ? this.getPrintParams() : this.getOnceParams()
-              },
-              res => {
-                this.callLocalServicesSuccessCb(res, 'preview');
-              },
-              this.callLocalServicesErrorCb
-            );
-          }
-        })
-        .finally(() => {
-          this.visible = false;
-        });
-    },
-    // 下载pdf
-    async handleClickPdf(e) {
-      e.domEvent.stopPropagation();
-      this.prevFn()
-        .catch(() => {
-          this.prevFnError();
-          return Promise.reject();
-        })
-        .then(() => {
-          if (this.versionType == 1 || this.versionType == 3) {
-            console.log('下载pdf>>>');
-          } else {
-            const IS_MULTI = this.strategy === 'MULTI';
-            const queryParams = {
-              ...this.queryParams,
-              print: { print: '1', type: '1', callback: '1' },
-            };
-            this.printInstance.downloadPDF(
-              {
-                ...queryParams,
-                params: IS_MULTI ? this.getPrintParams() : this.getOnceParams()
-              },
-              res => {
-                this.callLocalServicesSuccessCb(res, 'download');
-              },
-              this.callLocalServicesErrorCb
-            );
-          }
-        })
-        .finally(() => {
-          this.visible = false;
-        });
-    },
-    handleClickEdit(e) {
-      e.domEvent.stopPropagation();
-
-      this.prevFn()
-        .catch(() => {
-          this.prevFnError();
-          return Promise.reject();
-        })
-        .then(() => {
-          if (this.versionType == 1 || this.versionType == 3) {
-            const params = this.strategy === 'MULTI' ? this.getHisParams() : this.getOnceHisParams();
-            const printFn = this.versionType == 1 ? 'handleHisPrint' : 'handleOldHisPrint';
-            this.printInstance[printFn](9, params)
-              .then(res => {
-                console.log(res, 999999);
-              })
-              .catch(error => {
-                console.log(error, 'error999');
-              });
-          } else {
-            this.identityVerification.visible = true;
-          }
-        })
-        .finally(() => {
-          this.visible = false;
-        });
-    },
-    verifiySuccess(token) {
-      this.identityVerification.visible = false;
-
-      const queryParams = {
-        ...this.queryParams,
-        params: this.getPrintParams(),
-        token
-      };
-      this.printInstance.editPrintFormat(
-        queryParams,
-        res => {
-          this.callLocalServicesSuccessCb(res, 'edit');
-        },
-        this.callLocalServicesErrorCb
-      );
-    },
-    /*  */
-    prevFnError() {
-      // 前置条件执行错误这里不弹提示，“前置条件”事件内有弹提示了
-      // let error = {
-      //   message: '前置条件执行错误'
-      // };
-      // this.$emit('error', error);
-    },
-    /*  */
-    callLocalServicesSuccessCb(res, type) {
-      let info = {
-        type,
-        formatId: this.currentFormatId,
-        templateId: this.getTemplateIdByFormatId(this.currentFormatId)
-      };
-      this.$emit('success', res, info);
-    },
-    callLocalServicesErrorCb(res) {
-      this.$emit('error', res);
-    },
-    callLocalServicesCancelCb(res) {
-      this.$emit('cancel', res);
+  computed: {
+    isComponent() {
+      return Object.keys(this.newPrintSetting)?.length > 0 ? NewPrintComponent : OldPrintComponent;
     },
-
-    /**
-     * 获取 axios 自定义配置
-     */
-    getCustomCofing(customCofing) {
-      let cCofing = {};
-      let type = typeof customCofing;
-      if (type === 'function') {
-        cCofing = customCofing();
-      } else if (type === 'object') {
-        cCofing = customCofing;
-      }
-      return cCofing;
+    getProps() {
+      return this.$props;
     }
   }
 });
 </script>
-
-<style lang="less" scoped>
-.dropdown-button {
-  color: #212121;
-  border-color: #d5d5d5 !important;
-  margin-left: 8px;
-  margin-bottom: 8px;
-  /deep/ .svg-icon {
-    margin-right: 4px;
-  }
-  &.ant-dropdown-trigger {
-    i.anticon.anticon-down {
-      color: #969696;
-      font-size: 14px;
-    }
-  }
-}
-</style>
-
-<style lang="less">
-.rowFoldHideBtnList-dropdown {
-  min-width: 150px !important;
-  .ant-dropdown-menu {
-    overflow-y: auto;
-    max-height: 99vh;
-  }
-  .ant-dropdown-menu-item-group {
-    .ant-dropdown-menu-item-group-title {
-      display: none;
-    }
-    border-bottom: 1px solid #d5d5d5;
-    &:last-child {
-      border-color: transparent;
-    }
-  }
-  .format-name .ant-dropdown-menu-submenu-title {
-    font-weight: bold;
-    color: #000;
-  }
-  .ant-dropdown-menu-item.active {
-    color: #5585f5;
-  }
-}
-</style>