simple-frame-unit 1.0.2

package/lib/packages/BasicTemplate/components/TemplateViews.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="es-template">
+    <el-tabs v-if="controlProps.pageStyle === 'tabs'" v-model="current" :before-leave="beforeLeave"
+             class="es-template--tabs"
+             v-bind="controlProps" @tab-click="tabsChange">
+      <el-tab-pane v-for="(oneModule, indexOne) in modules" :id="oneModule.id" :key="indexOne"
+                   :label="oneModule.moduleName">
+        <!-- View -->
+        <TemplateComp :ref="oneModule.id" :bizParams="bizParams" :errorMessage="errorMessage[oneModule.id]"
+                      :modules="oneModule.twoModules"
+                      :oneModuleId="oneModule.id"
+                      :formData="formData"
+                      :oneModuleName="oneModule.moduleName" :saveData="saveData[oneModule.id]"
+                      class="es-template__content" @callInterface="callInterface"></TemplateComp>
+
+        <!-- Action -->
+        <div v-if="showSubmit && !readOnly" :id="'btn_'+oneModule.id" class="es-template__footer">
+          <el-button v-if="getModuleProp(oneModule, 'isDownloadPdf')" :disabled="loading" :loading="pdfLoading"
+                     icon="el-icon-download" plain type="primary"
+                     @click="exportPdf(oneModule)">导出PDF
+          </el-button>
+          <el-button v-if="getModuleProp(oneModule, 'isSubmit')" :disabled="loading" :loading="loading || btnLoading"
+                     plain
+                     type="danger" @click="submitForm(oneModule)">提交
+          </el-button>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <!---->
+    <div v-if="controlProps.pageStyle === 'steps'"
+         :class="{'es-steps--isVertical' : isVertical}" class="es-template--steps">
+      <el-steps :active="current"
+                :direction="controlProps.direction"
+                :style="{height: 'auto'}"
+                align-center>
+        <el-step v-for="(oneModule, indexOne) in modules" :key="indexOne" :title="oneModule.moduleName"></el-step>
+      </el-steps>
+
+      <div ref="stepsMain" class="es-template--steps__main">
+        <div v-for="(oneModule, indexOne) in modules" v-show="current === indexOne" :key="indexOne">
+          <TemplateComp :ref="oneModule.id" :bizParams="bizParams"
+                        :errorMessage="errorMessage[oneModule.id]"
+                        :modules="oneModule.twoModules"
+                        :oneModuleId="oneModule.id"
+                        :formData="formData"
+                        :oneModuleName="oneModule.moduleName" :saveData="saveData[oneModule.id]"
+                        class="es-template__content" @callInterface="callInterface"></TemplateComp>
+
+          <div class="es-template__footer">
+            <el-button v-if="indexOne > 0" @click="handlerStep('prev')">上一步</el-button>
+            <el-button v-if="indexOne === modules.length-1" :disabled="loading" :loading="loading || btnLoading"
+                       plain
+                       type="danger" @click="submitAllForm()">提交
+            </el-button>
+            <el-button v-if="indexOne < modules.length-1" @click="handlerStep('next')">下一步</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TemplateComp   from './TemplateComp'
+import validate       from '../hooks/validate'
+import getFormData    from '../hooks/getFormData'
+import business       from '../hooks/business'
+import submitForm     from '../hooks/submitForm'
+import queryFormData  from '../hooks/queryFormData'
+import useEmits       from "../hooks/useEmits";
+
+import html2canvas from 'html2canvas';
+import jsPDF       from 'jspdf';
+
+export default {
+  name: "TemplateViews",
+  mixins: [validate, getFormData, submitForm, business, queryFormData, useEmits],
+  components: {TemplateComp},
+  props: {
+    config: {type: Object},
+    formData: {type: Object},
+    readOnly: {type: Boolean, default: false},
+    bizParams: {type: Object},
+    extraParams: {type: Object},
+  },
+  provide() {
+    return {
+      _tempV: this
+    };
+  },
+  data() {
+    return {
+      current: 0,
+      controlProps: {},
+      modules: [],
+      template: {},
+      moduleInfo: {},
+      // show/hide
+      showSubmit: true,
+      loading: false,
+      pdfLoading: false,
+      btnLoading: false,
+      errorMessage: {},
+    }
+  },
+  computed: {
+    // 是否tabs模式
+    isTabs() {
+      return this.controlProps.pageStyle && this.controlProps.pageStyle === 'tabs'
+    },
+
+    isPageLoad() {
+      return this.isTabs ? this.controlProps.isPageLoad === 'true' : false
+    },
+
+    isVertical() {
+      return this.controlProps.direction === 'vertical'
+    },
+  },
+  watch: {
+    config: {
+      handler(newVal, oldVal) {
+        if (newVal && newVal.prop) {
+          this.__resetTemp();
+          this.controlProps = newVal.prop
+          if (newVal.modules) {
+            this.modules = newVal.modules
+          }
+          if (newVal.moduleInfo) {
+            this.moduleInfo = newVal.moduleInfo
+          }
+          if (newVal.template) {
+            this.template = newVal.template
+          }
+          // this.queryModuleData()
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+
+    bizParams: {
+      handler(newVal, oldVal) {
+        if (newVal && Object.keys(newVal).length > 0 && Object.keys(this.moduleInfo).length > 0) {
+          this.queryModuleData()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    __resetTemp() {
+      this.modules = []
+      this.controlProps = {}
+      this.template = {}
+      this.components = []
+      this.saveData = {}
+      this.loadPage = {}
+      this.current = 0
+      this.showSubmit = true
+      this.btnLoading = false
+    },
+
+    resetData() {
+      this.saveData = {}
+      this.current = 0
+      this.loadPage = {}
+    },
+
+
+    handleChange(model, value, control) {
+      this.$emit('change', model, value, control)
+    },
+
+    /**
+     * 导出PDF
+     * @param oneModule
+     */
+    exportPdf(oneModule) {
+      this.pdfLoading = true
+      let oneModuleEle = document.getElementById(oneModule.id);
+      let btnOneModuleEle = document.getElementById('btn_' + oneModule.id);
+      oneModuleEle.removeChild(btnOneModuleEle);
+      this.downPdf(oneModule.moduleName, oneModuleEle);
+      oneModuleEle.appendChild(btnOneModuleEle);
+      this.pdfLoading = false
+    },
+
+    downPdf(pdfName, ele) {
+      pdfName = pdfName + ".pdf"
+      html2canvas(ele, {
+        dpi: 300,
+        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
+        useCORS: true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
+      }).then((canvas) => {
+        let contentWidth = canvas.width;
+        let contentHeight = canvas.height;
+        //一页pdf显示html页面生成的canvas高度;
+        let pageHeight = contentWidth / 592.28 * 841.89;
+        //未生成pdf的html页面高度
+        let leftHeight = contentHeight;
+        //页面偏移
+        let position = 0;
+        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+        let imgWidth = 595.28;
+        let imgHeight = 595.28 / contentWidth * contentHeight + 100;
+        //添加水印
+        let ctx = canvas.getContext("2d")
+        let watermarkerCnt = contentHeight / 200
+        for (let i = 0; i < watermarkerCnt; i++) {
+          ctx.rotate((-5 * Math.PI) / 180); // 水印初始偏转角度
+          ctx.font = "30px microsoft yahei";
+          ctx.fillStyle = "rgba(213,213,213,0.5)";
+          let watermarkerStr = ''
+          for (let j = 0; j < 10; j++) {
+            watermarkerStr += '小榄村镇银行      '
+          }
+          ctx.fillText(watermarkerStr, -300, (i + 1) * 200);
+          ctx.rotate((5 * Math.PI) / 180); // 把水印偏转角度调整为原来的，不然他会一直转
+        }
+
+        let pageData = canvas.toDataURL('image/jpeg', 1.0);
+        let pdf = new jsPDF('', 'pt', 'a4');
+        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+        //当内容未超过pdf一页显示的范围，无需分页
+        if (leftHeight < pageHeight) {
+          //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
+          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+          // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
+        } else {    // 分页
+          while (leftHeight > 0) {
+            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
+            leftHeight -= pageHeight;
+            position -= 841.89;
+            //避免添加空白页
+            if (leftHeight > 0) {
+              pdf.addPage();
+            }
+          }
+        }
+        //可动态生成
+        pdf.save(pdfName);
+      })
+    },
+
+    /**
+     * @name tabsChange
+     * @param activeKey
+     */
+    tabsChange(activeKey) {
+      if (this.isPageLoad && !this.loadPage[activeKey]) {
+        this.queryModuleData()
+      }
+    },
+
+    /**
+     * 在离开当前tab前，检查二级模块是否需要重新从后端加载数据，或使用前端最新数据
+     */
+    beforeLeave(newActiveName, oldActiveName) {
+      if (oldActiveName !== undefined && this.modules[oldActiveName]) {
+        const oneModuleId = this.modules[oldActiveName].id
+        if (this.modules[oldActiveName].twoModules) {
+          this.modules[oldActiveName].twoModules.forEach(twoModule => {
+            const twoModuleId = twoModule.id
+            if (this.isViewTempType(oneModuleId, twoModuleId) === false) {
+              if (this.$refs[oneModuleId][0] && this.$refs[oneModuleId][0].$refs[twoModuleId][0]) {
+                this.$refs[oneModuleId][0].$refs[twoModuleId][0].getFormData(false, true).then(moduleData => {
+                  this.$set(this.saveData[oneModuleId], twoModuleId, moduleData)
+                })
+              }
+            }
+          })
+        }
+      }
+      return true
+    },
+
+    /**
+     * @name handlerStep
+     * @param type
+     */
+    handlerStep(type) {
+      if (type === 'next') {
+        this.beforeLeave(null, this.current++)
+      } else if (type === 'prev') {
+        this.beforeLeave(null, this.current--)
+      }
+    }
+  }
+}
+</script>

package/lib/packages/BasicTemplate/hooks/business.js

@@ -0,0 +1,74 @@
+import { getVarType} from "../../../utils/utils";
+
+export default {
+  methods: {
+    /**
+     * 获取的模版数据转换为前端使用的模型信息
+     * @param {*} dataModel
+     */
+    toViewModel(dataModel) {
+      if (dataModel) {
+        if (dataModel instanceof Array && dataModel.length === 0) {
+          return {}
+        } else if (dataModel instanceof Array && dataModel.length > 0) {
+          let dataList = Object.assign({data: []}, dataModel[0])
+          dataModel.forEach((data) => {
+            if (data.dataInfoArray && data.dataInfoArray instanceof Array && data.dataInfoArray.length > 0) {
+              data.dataInfoArray.forEach((d) => {
+                dataList.data.push(d)
+              })
+            } else if (data.keyInfoView) {
+              dataList.data.push({keyInfo: data.keyInfoView})
+            } else if (data.keyInfoObject) {
+              dataList.data.push({keyInfo: data.keyInfoObject})
+            } else {
+              dataList.data.push({keyInfo: data})
+            }
+          })
+          return dataList
+        } else {
+          return dataModel
+        }
+      }
+      return {}
+    },
+
+    /**
+     * @name getOneModuleId
+     * @param id
+     * @return {null}
+     * @description 获取一级模块数据
+     */
+    getOneModuleId(id) {
+      let moduleId = null
+      this.modules.map(oneModule => {
+        let module = oneModule.twoModule.find(i => i.id === id)
+        if (module) moduleId = module.id
+      })
+
+      return moduleId
+    },
+
+    /**
+     * 解析模块对象中的属性值
+     * @param {*} module
+     * @param {*} key
+     * @returns Object
+     */
+    getModuleProp(module, key) {
+      const {prop} = module
+      let item = prop && prop[key] ? prop[key] : module[key]
+      if (item && item.value) {
+        const itemType = getVarType(item.value)
+        if (itemType === 'boolean') {
+          return itemType
+        } else if (itemType === 'string') {
+          return item.value === 'true' ? true : item.value === 'false' ? false : item.value
+        } else {
+          return item.value
+        }
+      }
+      return undefined
+    },
+  }
+}

package/lib/packages/BasicTemplate/hooks/getFormData.js

@@ -0,0 +1,89 @@
+export default {
+  methods: {
+    /**
+     * @name getFormData
+     * @param moduleId 一级/二级模块ID
+     * @param isValidate 是否进行校验，默认false
+     * @return {Promise<unknown>|*|string|Promise<*|string>}
+     * @description 获取模板数据
+     */
+    getFormData(moduleId, isValidate = false) {
+      if (moduleId && typeof moduleId === "string") {
+        const module = this.modules.find(i => i.id === moduleId);
+        return module ? this._getOneFormData(module.id, isValidate) : this._getTowFormData(moduleId, isValidate);
+      } else if (typeof moduleId === "boolean") {
+        return this._getAllFormData(moduleId)
+      } else {
+        return this._getAllFormData(isValidate)
+      }
+    },
+
+    // 获取所有模板数据
+    _getAllFormData(isValidate) {
+      const PromiseAll = []
+      this.modules.map(module => PromiseAll.push(this.$refs[module.id][0].getFormData(isValidate)))
+      return new Promise((resolve, reject) => {
+        Promise.all(PromiseAll).then(data => {
+          let formData = []
+          data.map(one => one.map(tow => formData.push(tow)))
+          resolve(formData)
+        }).catch(err => {
+          console.log(err)
+          reject(err)
+        })
+      })
+    },
+
+    // 获取单个一级模块数据
+    async _getOneFormData(moduleId, isValidate) {
+      return new Promise((resolve, reject) => {
+        const module = this.modules.find(i => i.id === moduleId);
+        if (module) {
+          this.$refs[module.id][0].getFormData(isValidate).then(data => {
+            console.log(data)
+            resolve(data)
+          }).catch(err => {
+            console.log(err)
+            this.$message.error(err)
+            reject(err)
+          })
+        } else {
+          this.$message.error('未查询到此模块')
+          reject('未查询到此模块')
+        }
+      })
+    },
+
+    // 获取单个二级模块数据
+    _getTowFormData(moduleId, isValidate) {
+      let oneRefs, module = null
+      this.modules.map(oneModule => {
+        oneModule.twoModules.map(twoModule => {
+          if (twoModule.id === moduleId) {
+            oneRefs = this.$refs[oneModule.id][0]
+            module = twoModule
+          }
+        })
+      })
+      if (module) {
+        return oneRefs.$refs[module.id][0].getFormData(isValidate)
+      } else {
+        return '未查询到此模块'
+      }
+    },
+
+    /** 获取动态模板超级提交时，所有参数,提交url */
+    async _getSubmitData(isValidate = false) {
+      const viewModels = await this.getFormData(isValidate)
+      return {
+        url: this.moduleInfo.save_url,
+        params: {
+          bizParams: this.bizParams,
+          viewModels: viewModels,
+          extraParams: this.extraParams
+        }
+      }
+
+    }
+  }
+}

package/lib/packages/BasicTemplate/hooks/queryFormData.js

@@ -0,0 +1,194 @@
+import {convertToViewModel, deepMerge, getVarType} from "../../../utils/utils";
+import {postAction} from "../../../api";
+import {TempType} from "../../../api/easyData";
+
+/**
+ * 请求
+ * @param url
+ * @param params
+ * @return {Promise<unknown>}
+ */
+export const httpsQueryData = (url, params) => {
+  return new Promise((resolve, reject) => {
+    postAction(url, params).then(res => {
+      if (res.success && res.data) {
+        resolve(res.data)
+      } else {
+        reject(res.message)
+      }
+    }).catch(err => {
+      reject(err.message)
+    })
+  })
+}
+
+export default {
+  data() {
+    return {
+      saveData: {},
+      errorMessage: {},
+    }
+  },
+  methods: {
+    // 初始化saveData
+    initSaveData() {
+      let message = {}
+      let data = {}
+      this.modules.map(oneModule => {
+        data[oneModule.id] = {}
+        message[oneModule.id] = {}
+        oneModule.twoModules.map(twoModule => {
+          data[oneModule.id][twoModule.id] = {}
+          message[oneModule.id][twoModule.id] = ""
+        })
+      })
+
+      return {
+        data: deepMerge(data, this.saveData),
+        message
+      }
+    },
+
+    /**
+     * @name queryModuleData
+     * @description 查询模块数据
+     */
+    queryModuleData: async function () {
+      const {data, message} = this.initSaveData()
+      this.saveData = data
+      this.errorMessage = message
+      let queryUrl = this.moduleInfo.query_url
+      if (queryUrl) {
+        if (Object.keys(this.bizParams).length > 0) {
+          this.loading = true
+          let params = {
+            bizParams: this.bizParams,
+            templateViewModel: convertToViewModel(this.moduleInfo)
+          }
+          if (this.isPageLoad) {
+            params.page = this.current
+          }
+          await this.getQueryData(queryUrl, params)
+        } else {
+          this.$emit('loadOk')
+        }
+      } else {
+        this.$message.error('请设置模板的queryUrl属性')
+      }
+    },
+
+    /**
+     * 获取数据
+     * @param queryUrl
+     * @param params
+     * @return {Promise<unknown>}
+     */
+    getQueryData(queryUrl, params) {
+      return new Promise((resolve, reject) => {
+        httpsQueryData(queryUrl, params).then(async data => {
+          this.$emit('loadOk')
+          this.loading = false
+          Object.keys(data).map(dataKey => {
+            Object.keys(data[dataKey]).map(async twoDataKey => {
+              let twoData = data[dataKey][twoDataKey]
+              let {twoModule, dataList, message, success} = twoData
+              let moduleData
+              if (this.needReload(dataKey, twoDataKey)) {
+                //当有错误时
+                if (getVarType(success) === 'undefined' || success !== true) {
+                  this.errorMessage[dataKey][twoDataKey] = message ? message : `查询${twoModule.moduleName}数据失败`
+                }
+
+                //当有自动获取数据时
+                if (twoModule.dataFrom === "fromInterface" && twoModule.autoQuery && twoModule.autoQuery === 'true') {
+                  moduleData = await this.callInterface(twoModule)
+                } else {
+                  moduleData = this.toViewModel(dataList)
+                }
+                moduleData.result = {message, success}
+                this.$set(this.saveData[dataKey], twoDataKey, moduleData)
+              }
+            })
+          })
+        })
+      })
+    },
+
+    /**
+     * 查询并更新二级模块数据
+     * @param oneModuleId
+     * @param module
+     * @return {Promise<void>}
+     */
+    async getQueryTwoData(oneModuleId, module) {
+      let moduleData = await this.callInterface(module)
+      this.$set(this.saveData[oneModuleId], module.id, moduleData)
+    },
+
+    /**
+     * @name callInterface
+     * @param module
+     * @return {Promise<unknown>}
+     */
+    callInterface(module) {
+      return new Promise(async (resolve) => {
+        let passModuleId = module.passModule?.split(',') || []
+        if (passModuleId.length > 0) await this.saveOneModule(this.current)
+
+        let queryUrl = this.moduleInfo.query_module_url
+        if (queryUrl) {
+          try {
+            let saveData = []
+            if (passModuleId.length > 0) {
+              passModuleId.forEach((passModule) => {
+                let passModuleData = this.saveData[passModule] ? this.saveData[passModule] : {}
+                saveData.push(passModuleData)
+              })
+            }
+
+            let params = {
+              bizParams: this.bizParams,
+              templateViewModel: this.moduleInfo,
+              moduleId: module.id,
+              viewModels: saveData
+            }
+
+            this.btnLoading = true
+            let res = await httpsQueryData(queryUrl, params)
+            if(res){
+              this.btnLoading = false
+              resolve(this.toViewModel(res.dataList))
+            }
+          } catch (e) {
+            this.$message.error(e.message)
+          }
+        } else {
+          this.$message.error('请设置模板的queryModuleUrl属性')
+        }
+      })
+    },
+
+    /**
+     * 判断是否需要重新加载后台查询的二级模块数据 (二级模块没有数据 或者二级模块是展示模块)
+     * @param {*} oneModuleId 一级模块ID
+     * @param {*} twoModuleId 二级模块ID
+     */
+    needReload(oneModuleId, twoModuleId) {
+      return true
+      // const twoModuleData = this.saveData[oneModuleId] ? this.saveData[oneModuleId][twoModuleId] : undefined
+      // if (!twoModuleData || Object.keys(twoModuleData).length <= 0) {
+      //   return true
+      // }
+      // return this.isViewTempType(oneModuleId, twoModuleId)
+    },
+    /**
+     * 查询二级模块是视图属性
+     */
+    isViewTempType(oneModuleId, twoModuleId) {
+      const twoModuleVue = this.$refs[oneModuleId] ? this.$refs[oneModuleId][0].$refs[twoModuleId] ? this.$refs[oneModuleId][0].$refs[twoModuleId][0] : undefined : undefined
+      if(twoModuleVue)
+        return TempType.view === twoModuleVue.getType()
+      return true
+    }
+  }
+}

package/lib/packages/BasicTemplate/hooks/submitForm.js

@@ -0,0 +1,53 @@
+export default {
+  methods: {
+    /**
+     * @name 提交信息
+     * @param modules
+     */
+    async submitForm(modules = Object) {
+      const isSuper = this.getModuleProp(modules, 'isSuper');
+      const saveUrl = this.moduleInfo['save_url'];
+      if (isSuper) {
+        await this.submitAllForm(saveUrl)
+      } else {
+        await this.submitOneForm(saveUrl, modules.id)
+      }
+    },
+
+    // 超级提交 - 提交所有信息
+    async submitAllForm(saveUrl = this.moduleInfo.save_url) {
+      const formDataAll = await this.getFormData(true)
+      await this.submitHttps(saveUrl, formDataAll)
+      this.submitOk(formDataAll, true)
+    },
+
+    // 单个提交 -- 提交一级模块
+    async submitOneForm(saveUrl, moduleId) {
+      const formDataOne = await this.getFormData(moduleId, true)
+      await this.submitHttps(saveUrl, formDataOne)
+      this.submitOk(formDataOne, false)
+    },
+
+    // 提交
+    async submitHttps(saveUrl, submitData) {
+      let params = {
+        bizParams: this.bizParams,
+        viewModels: submitData,
+        extraParams: this.extraParams
+      }
+
+      if (!saveUrl) {
+        this.$message.error('请设置模板的saveUrl属性')
+      }
+
+      this.loading = true
+      const res = await this.$EdFrame.postAction(saveUrl, params)
+      if (res.code === 0) {
+        this.$message.success(res.message || '保存成功!')
+      } else {
+        this.$message.error(res.message || '保存失败!')
+      }
+      this.loading = false
+    }
+  }
+}