simple-frame-unit 1.0.2

package/lib/packages/BasicTemplate/EasyDataTemplate.vue

@@ -0,0 +1,189 @@
+<template>
+  <template-view
+      ref="TemplateView"
+      v-loading="loading"
+      :bizParams="viewBizParams"
+      :config="config"
+      :extraParams="extraParams"
+      :formData="formData"
+      :readOnly="readOnly"
+      v-on="bindEvents()"/>
+</template>
+
+<script>
+import Props        from './Props'
+import TemplateView from "./components/TemplateViews";
+import {getVarType} from "../../utils/utils";
+
+/**
+ * 基础模板组件
+ * - 示例
+ *
+ * ```vue
+ * <easy-data-template ::biz-params="bizParams" :templateId="templateId" @loadOk="bizParamsOk">
+ * </easy-data-template>
+ * ```
+ * 详细用法参考下方链接
+ *
+ * [EasyDataTemplate组件使用示例](./web-comp/ExampleEasyDataTemplateCode.md)
+ *
+ * [](./EasyDataTemplateProps.md ':include')
+ */
+export default {
+  name: "EasyDataTemplate",
+  components: {TemplateView},
+  props: Props,
+  data() {
+    return {
+      loading: true,
+      getTemplateUrl: '/easydata/template/getModule',
+      config: {},
+      viewBizParams: {}
+    }
+  },
+  watch: {
+    templateId: {
+      immediate: true,
+      handler: function (newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
+          this.getTemplate()
+        }
+      }
+    },
+    templateConfig: {
+      deep: true,
+      immediate: true,
+      handler: function (newVal, oldVal) {
+        if (newVal && newVal !== oldVal && getVarType(newVal.prop) !== "string") {
+          this.config = newVal
+          this.$nextTick(() => {
+            this.initBizParam()
+          })
+        }
+      }
+    },
+    bizParams: {
+      deep: true,
+      immediate: true,
+      handler: function (newVal, oldVal) {
+        if (newVal && Object.keys(this.config).length > 0) {
+          this.initBizParam()
+        }
+      }
+    },
+  },
+
+  methods: {
+    /**
+     * @private
+     * @returns {{} & Record<string, Function | Function[]>}
+     */
+    bindEvents() {
+      let events = Object.assign({}, this.$listeners);
+      events.loadOk = this.loadOk
+      return events
+    },
+
+    /**
+     * @private
+     * @name getTemplate
+     * @return {Promise<void>}
+     */
+    async getTemplate() {
+      try {
+        const res = await this.$EdFrame.postAction(this.getTemplateUrl, {id: this.templateId})
+        if (res.success) {
+          let modules = res.data.oneModules.filter(oneModule => {
+            return oneModule.prop ? getVarType(oneModule.prop.isHidden) === 'boolean' ? oneModule.prop.isHidden : true : true
+          })
+          this.config = {
+            prop: res.data.prop,
+            modules: modules,
+            template: res.data.template,
+            moduleInfo: res.data.moduleInfo.keyInfoObject
+          }
+          this.initBizParam()
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (e) {
+        this.$message.error(e)
+        this.loading = false
+      }
+    },
+
+    /**
+     * @name initBizParam
+     * @return {Object|*[]}
+     * @description 初始化BizParams
+     */
+    initBizParam() {
+      if (this.bizParams && Object.keys(this.bizParams).length > 0) {
+        this.viewBizParams = this.bizParams
+      } else {
+        const {biz_params} = this.config.moduleInfo
+        if (biz_params && biz_params.length > 0) {
+          biz_params.split(',').map((bizParam) => {
+            this.$set(this.viewBizParams, bizParam, "")
+          })
+        }
+      }
+    },
+    queryData() {
+      this.$refs.TemplateView.queryModuleData()
+    },
+    /**
+     * 获取业务参数
+     * @returns {{}}
+     */
+    getBizParams() {
+      return this.viewBizParams
+    },
+
+    /**
+     * 重置数据
+     */
+    resetData() {
+      if (this.$refs.TemplateView) {
+        this.$refs.TemplateView.resetData()
+      }
+    },
+
+
+    /**
+     * @name loadOk
+     * @description 数据加载完成
+     */
+    loadOk() {
+      this.loading = false
+      this.$emit('loadOk')
+    },
+    /**
+     * 获取表单数据
+     * @return {*}
+     * @param id
+     */
+    getFormData(id) {
+      return this.$refs.TemplateView.getFormData(id)
+    },
+    /**
+     * 验证表单
+     * @name validate
+     * @return {Promise<void>}
+     */
+    async validate(id) {
+      return this.$refs.TemplateView.validate(id)
+    },
+    /**
+     * 获取超级提交时的请求url、提交参数
+     */
+    async getSubmitData(isValidate) {
+      return this.$refs.TemplateView._getSubmitData(isValidate)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../style/index.scss";
+</style>

package/lib/packages/BasicTemplate/Props.js

@@ -0,0 +1,64 @@
+/**
+ * EasyDataTemplate组件属性
+ */
+export default {
+    // 模板ID
+    templateId: {type: String},
+
+    /**
+     *
+     * 模板配置信息
+     * @default { prop: '',  modules: "", template: "", moduleInfo: ""  }
+     *
+     */
+    templateConfig: {
+        type: Object,
+        default: () => {
+            return {
+                prop: '', // 模板属性
+                modules: "", // 一级模块列表
+                template: "", // 模块基础信息表
+                moduleInfo: "" // 模板配置信息详细表
+            }
+        }
+    },
+
+    /**
+     * 查询参数
+     * @default {}
+     */
+    bizParams: {type: Object, default: () => {}},
+
+    /**
+     * 额外参数
+     * @default {}
+     */
+    extraParams: {type: Object, default: () => {}},
+
+    /**
+     * 参数（查询参数，额外参数）
+     * @default { biz: {},extra: {}}
+     */
+    params: {
+        type: Object,
+        default: () => {
+            return {
+                // 业务查询参数
+                biz: {}, // 额外参数
+                extra: {}
+            }
+        }
+    },
+
+    /**
+     * 业务数据
+     * @default {}
+     */
+    formData: {type: Object},
+
+    /**
+     * 只读
+     * @default false
+     */
+    readOnly: {type: Boolean, default: false},
+}

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

@@ -0,0 +1,263 @@
+<template>
+  <div>
+    <el-card v-for="(module, index) in modules" :key="index" class="es-box-card">
+      <div slot="header" class="es-box-card--header">
+        <span>{{ module.moduleName }}</span>
+        <el-button v-if="module.dataFrom.value === 'fromInterface'" :loading="queryLoading(module.id)"
+                   @click="callInterface(module)">
+          {{ module.interfaceButtonName || '获取数据' }}
+        </el-button>
+      </div>
+
+      <div class="es-card--content">
+        <component :is="components[index].component" :id="components[index].id"
+                   :ref="components[index].ref"
+                   v-bind="buildProps(module)"
+                   v-on="$listeners"/>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="jsx">
+import {packages} from '../../index'
+import business   from '../hooks/business'
+import {TempType} from "../../../api/easyData";
+import { getVarType } from '../../../utils/utils';
+
+export default {
+  name: "TemplateView",
+  mixins: [business],
+  inject: ['_tempV'],
+  props: {
+    modules: {type: [Object, Array]},
+    oneModuleName: {type: String},
+    oneModuleId: {type: String},
+    current: {type: Number, default: 0},
+    saveData: {type: Object},
+    errorMessage: {type: Object},
+    bizParams: {type: Object},
+    formData: {type: Object} //外部传入的初始化数据
+  },
+  data() {
+    return {
+      components: [],
+      showSubmit: true,
+      btnLoading: false
+    }
+  },
+  watch: {
+    modules: {
+      handler(newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
+          this.loadComponents()
+          this.clickInterfaceData()
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+  },
+  methods: {
+    /**
+     * 查询二级模块返回数据
+     * @param module
+     */
+    showSaveDataModule(module) {
+      console.info(this.saveData[module.id], module)
+    },
+    /**
+     * @name buildProps
+     * @param module
+     * @return {{}}
+     * @description 组装props参数
+     */
+    buildProps(module) {
+      if (!this.saveData) return false
+      let props = {}
+      props.bizParams = this.bizParams
+      props.formData =  this.initFormData(module);
+      props.dataSourceName = module.dataSourceName.value
+      props.viewId = module.dataSourceViewId ? module.dataSourceViewId.value : 'default'
+      props.passModuleIds = (module.passModule && getVarType(module.passModule) === 'array') ? module.passModule.map(modulesId=> modulesId[modulesId.length -1]) : []
+      props.extraParams = Object.assign({}, this.extraParams, module.customizeExtraParams ? JSON.parse(module.customizeExtraParams): {})
+
+      props.moduleProp = this.initModuleProp(module)
+      //console.info("props:::::", props)
+      return props
+    },
+
+    /** 初始化 */
+    initFormData(module) {
+      let initFormData = {}
+      let moduleId = module.id
+      if(this.formData && module.passFormData && !this.saveData[moduleId].key) {
+        module.passFormData.split(',').forEach(formDataKey=>{
+          if(!initFormData.key) initFormData.key= {}
+          if(formDataKey) initFormData.key[formDataKey] = this.formData[formDataKey]
+        })
+      }
+      return Object.assign({},initFormData, this.saveData[moduleId])
+    },
+
+    /**
+     * @name loadComponents
+     * @description 载入组件信息
+     */
+    loadComponents() {
+      this.modules.forEach((module, index) => {
+        this.components.push({
+          id: module.id,
+          ref: module.id,
+          index: index,
+          moduleName: module.moduleName,
+          oneModuleName: this.oneModuleName,
+          dataSourceName: module.dataSourceName.value,
+          component: this.getComponents(module)
+        })
+      })
+    },
+
+    /**
+     * @name clickInterfaceData
+     * @description 自动查询接口数据
+     */
+    clickInterfaceData(){
+      this.modules.forEach((module, index) => {
+        let {autoQuery} = module
+        if(autoQuery && autoQuery.value === true) {
+          this.callInterface(module)
+        }
+      })
+    },
+
+    // 导入组件
+    getComponents(module) {
+      // 自定义组件
+      if(module.dataFrom && "fromCustomize" === module.dataFrom.value && module.customizeRender) {
+        return module.customizeRender.value
+      }
+      // 默认组件
+      else if (module.dataSourceRender) {
+        return packages[module.dataSourceRender.value]
+      }
+      this.$message.error("未找到组件，请配置二级模块渲染组件：" + module.moduleName)
+    },
+
+    // 重置当前模块数据
+    async callInterface(module) {
+      this.btnLoading = true
+      await this._tempV.getQueryTwoData(this.oneModuleId, module)
+      this.$nextTick(() => {
+        this.btnLoading = false
+      })
+    },
+
+    // 设置二级模块数据
+    setFormData(id, data) {
+      this.$refs[id][0].formData = data
+    },
+
+    /**
+     * 获取单一模板数据
+     */
+    getFormData(isValidate) {
+      let currentData = []
+      return new Promise(async (resolve, reject) => {
+        try {
+          if (this.components.length === 0) {
+            reject('获取模板数据失败，未查询到模板信息')
+          }
+
+          for (let i = 0; i < this.components.length; i++) {
+            let {id, moduleName, oneModuleName} = this.components[i]
+            try {
+              if (this.$refs[id]) {
+                let refs = this.$refs[id][0]
+                let dataType = refs.getType()
+                if (dataType === TempType.save) {
+                  let formData = await refs.getFormData(isValidate)
+                  currentData.push(formData)
+                }
+              } else {
+                reject(`加载[${moduleName}]失败,原因:{0}${this.$refs[id]}`)
+                break;
+              }
+            } catch (err) {
+              console.log(err)
+              if (err) {
+                let errMessage = err[Object.keys(err)[0]][0].message
+                reject(`请检查一级模块[${oneModuleName}]子模块[${moduleName}]，${errMessage}`)
+                break;
+              }
+              reject(`请检查一级模块[${oneModuleName}]子模块[${moduleName}]输入项`)
+              break;
+            }
+          }
+          resolve(currentData)
+        } catch (e) {
+          reject(e)
+        }
+      })
+    },
+
+    /**
+     * 校验二级模块数据
+     */
+    validate() {
+      let PromiseAll = []
+      this.modules.map(module => PromiseAll.push(this.$refs[module.id][0].getFormData(true)))
+      return new Promise((resolve, reject) => {
+        Promise.all(PromiseAll).then(valid => {
+          resolve(true)
+        }).catch(err => {
+          reject(err)
+        })
+      })
+    },
+
+
+    /**
+     * @name doShowSubmit
+     * @param isShow
+     */
+    doShowSubmit(isShow) {
+      this.showSubmit = isShow
+    },
+
+    /** 是否列表控制显示新增按钮 */
+    isShowEasyDataListAdd(module) {
+      const {dataSourceRender, showAddBtn} = module
+      return module && dataSourceRender && showAddBtn && 'EasyDataList' === dataSourceRender.value && showAddBtn.value === 'true'
+    },
+    addEasyDataList() {
+
+    },
+    queryLoading(moduleId) {
+      if (this.btnLoading) return this.btnLoading
+      let data = this.saveData[moduleId]
+      return Object.keys(data).length === 0;
+    },
+
+    /** 初始化二级模块自定义属性 */
+    initModuleProp(module) {
+      let moduleProp = {}
+      moduleProp.autoQuery = false //不做自动查询，传入formData直接显示
+      moduleProp.showAction = this.getModuleProp(module, 'showAction')
+      moduleProp.showAddBtn = this.getModuleProp(module, 'showAddBtn')
+      if (module.prop) {
+        Object.keys(module.prop).map(key => {
+          let item = module.prop[key]
+          moduleProp[key] = item ? item.value === 'true' ? true : item.value === 'false' ? false : item.value : item
+        })
+      }
+      return moduleProp
+    },
+  }
+}
+</script>
+<style scoped>
+.es-box-card {
+  margin-top: 10px;
+}
+</style>