three-trees-ui 1.0.0

package/packages/FormItem/src/main.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-form-item
+    :key="fieldPath"
+    class="ht-form-item"
+    :label="label"
+    :label-width="finalLabelWidth"
+    :class="formItemClass"
+  >
+    <slot></slot>
+    <slot slot="label" name="label"></slot>
+  </el-form-item>
+</template>
+
+<script>
+  export default {
+    name: 'HtFormItem',
+    componentName: 'HtFormItem',
+    inject: {
+      elForm: {
+        default: '',
+      },
+    },
+    props: {
+      label: {
+        type: String,
+        default: '',
+      },
+      align: {
+        type: String,
+        validator: function(value) {
+          return ['left', 'center', 'right', 'justify'].indexOf(value) !== -1
+        },
+      },
+      labelColor: {
+        type: String,
+      },
+      labelWidth: {
+        type: String,
+      },
+      customColon: {
+        type: Boolean,
+        default: false,
+      },
+      required: {
+        type: Boolean,
+        default: false,
+      },
+      fieldPath: {
+        type: String,
+      },
+    },
+    data() {
+      return {
+        formItemAlign: null,
+        isRequired: false,
+      }
+    },
+    computed: {
+      finalLabelWidth() {
+        return this.labelWidth
+          ? this.labelWidth
+          : this.elForm && this.elForm.labelWidth
+          ? this.elForm.labelWidth
+          : '100px'
+      },
+      formItemClass: function() {
+        let _className = []
+        const formItemAlignVal = this.align
+          ? this.align
+          : this.formItemAlign
+          ? this.formItemAlign
+          : ''
+        if (!this.customColon) {
+          _className.push('ht-form-item-colon')
+        }
+        switch (formItemAlignVal) {
+          case 'left':
+            _className.push('ht-form-item-left')
+            break
+          case 'center':
+            _className.push('ht-form-item-center')
+            break
+          case 'right':
+            _className.push('ht-form-item-right')
+            break
+          case 'justify':
+            _className.push('ht-form-item-justify')
+        }
+        if (this.$slots.default) {
+          for (let i = 0; i < this.$slots.default.length; i++) {
+            let _vNode = this.$slots.default[i]
+            if (_vNode.componentOptions && _vNode.componentOptions.propsData) {
+              let propsData = _vNode.componentOptions.propsData
+              let _validate = propsData.validate
+              if (!_validate && _vNode.data.directives) {
+                let validateArry = _vNode.data.directives.filter(
+                  (item) => item.name == 'validate'
+                )
+                if (validateArry && validateArry.length > 0) {
+                  _validate = validateArry[0].value
+                }
+              }
+              if (this.required) {
+                _className.push('is-required')
+              } else if (
+                _validate &&
+                _validate.constructor == Object &&
+                _validate.required
+              ) {
+                _className.push('is-required')
+              } else if (
+                _validate &&
+                _validate.constructor == String &&
+                _validate.indexOf('required') != -1
+              ) {
+                _className.push('is-required')
+              } else if (propsData.permission == 'b') {
+                _className.push('is-required')
+              }
+              if (
+                propsData.permission === 'r' &&
+                _className.indexOf('is-required') != -1
+              ) {
+                _className = _className.filter((item) => item != 'is-required')
+              }
+              if (this.isRequired && !_className.includes('is-required')) {
+                _className.push('is-required')
+              }
+              break
+            }
+          }
+        }
+        return _className.join(' ')
+      },
+    },
+    created() {
+      this.$on('formExtend:update', (formExtend) => {
+        this.formItemAlign = formExtend.formItemAlign
+      })
+      this.$root.$on('current-required-item', (val) => {
+        if (val[`data.${this.fieldPath}`] === 'b') {
+          this.isRequired = true
+        } else if (['w', 'n', 'r'].includes(val[`data.${this.fieldPath}`])) {
+          this.isRequired = false
+        }
+      })
+    },
+    mounted() {
+      if (this.labelColor) {
+        this.$el.firstElementChild &&
+          (this.$el.firstElementChild.style.color = this.labelColor)
+      }
+    },
+  }
+</script>
+
+<style scoped>
+  .ht-form-item-colon ::v-deep .el-form-item__label::after {
+    content: ':';
+  }
+  .ht-form-item-left ::v-deep .el-form-item__label {
+    text-align: left;
+  }
+  .ht-form-item-center ::v-deep .el-form-item__label {
+    text-align: center;
+  }
+  .ht-form-item-right ::v-deep .el-form-item__label {
+    text-align: right;
+  }
+  .ht-form-item-justify ::v-deep .el-form-item__label {
+    text-align: justify;
+    text-justify: distribute-all-lines;
+    text-align-last: justify;
+  }
+</style>

package/packages/Global/index.js

@@ -0,0 +1,12 @@
+import GlobalValidate from './src/GlobalValidate.vue'
+import GlobalQuery from './src/GlobalQuery.vue'
+
+GlobalValidate.install = function(Vue) {
+  Vue.component(GlobalValidate.name, GlobalValidate)
+}
+
+GlobalQuery.install = function(Vue) {
+  Vue.component(GlobalQuery.name, GlobalQuery)
+}
+
+export { GlobalValidate, GlobalQuery }

package/packages/Global/src/GlobalQuery.vue

@@ -0,0 +1,225 @@
+<template>
+  <!-- Global Query -->
+  <span />
+</template>
+<script>
+  import utils from '@/utils.js'
+  import CustomQuery from '@/services/CustomQuery.js'
+
+  export default {
+    name: 'HtGlobalQuery',
+    props: {
+      queryJson: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+    },
+    data() {
+      return {
+        formInst: null,
+        subOldValueMap: {},
+        subQueryConfig: [],
+      }
+    },
+    mounted() {
+      if (!this.formInst) {
+        this.formInst = utils.getOnlineFormInstance(this.$parent)
+      }
+      if (this.queryJson.length > 0) {
+        let _this = this
+        this.queryJson.forEach((item) => {
+          if (item.triggerTime) {
+            let resultBind = {}
+            if (item.resultfield && item.resultfield.length > 0) {
+              item.resultfield.forEach((field) => {
+                resultBind[field.field] = field.fieldPath
+              })
+            }
+            if (item.triggerTime.indexOf('change') != -1 && item.triggerField) {
+              //值变化触发
+              if (item.entType === 'main') {
+                //主表
+                _this.formInst.$watch(
+                  item.triggerField,
+                  function(newVal, oldVal) {
+                    if (
+                      (newVal != '' || oldVal != undefined) &&
+                      newVal !== oldVal
+                    ) {
+                      _this.doQuery(
+                        item.alias,
+                        item.conditionfield,
+                        resultBind,
+                        null
+                      )
+                    }
+                  }
+                  // { immediate: true }
+                )
+              } else {
+                //子表
+                const triggerPath = item.triggerField.split('.')
+                const triggerField = triggerPath[triggerPath.length - 1]
+                _this.subOldValueMap[item.subPath] = []
+                item.triggerPath = triggerPath
+                item.triggerField = triggerField
+                item.resultBind = resultBind
+                _this.subQueryConfig.push(item)
+
+                _this.formInst.$watch(
+                  'data.' + item.subPath,
+                  function(newVal) {
+                    let myOldVal = _this.subOldValueMap[item.subPath]
+                    _this.subQueryConfig
+                      .filter((i) => {
+                        return i.subPath === item.subPath
+                      })
+                      .forEach((subItem) => {
+                        if (newVal !== myOldVal) {
+                          try {
+                            if (
+                              newVal &&
+                              newVal.length == 1 &&
+                              (!newVal || newVal.length == 0)
+                            ) {
+                              //新增
+                              //取子表的最后一行
+                              if (subItem.triggerTime.indexOf('load') != -1) {
+                                //如果是初始化加载，新增时才触发
+                                _this.doQuery(
+                                  subItem.alias,
+                                  subItem.conditionfield,
+                                  subItem.resultBind,
+                                  newVal.length - 1
+                                )
+                              }
+                            } else if (newVal.length > myOldVal.length) {
+                              for (
+                                let i = myOldVal.length;
+                                i < newVal.length;
+                                i++
+                              ) {
+                                _this.doQuery(
+                                  subItem.alias,
+                                  subItem.conditionfield,
+                                  subItem.resultBind,
+                                  i
+                                )
+                              }
+                            } else if (myOldVal.length > newVal.length) {
+                              //删除
+                              //不用做处理
+                            } else if (
+                              newVal.length > 0 &&
+                              myOldVal.length === newVal.length
+                            ) {
+                              //值变化
+                              for (let i = 0; i < newVal.length; i++) {
+                                if (
+                                  newVal[i][subItem.triggerField] !==
+                                  myOldVal[i][subItem.triggerField]
+                                ) {
+                                  _this.doQuery(
+                                    subItem.alias,
+                                    subItem.conditionfield,
+                                    subItem.resultBind,
+                                    i
+                                  )
+                                }
+                              }
+                            }
+                          } catch (error) {
+                            console.error('关联查询出错：' + error)
+                          }
+                          _this.subOldValueMap[subItem.subPath] = JSON.parse(
+                            JSON.stringify(newVal)
+                          )
+                        }
+                      })
+                  },
+                  { deep: true }
+                )
+              }
+            }
+            if (
+              item.triggerTime.indexOf('load') != -1 &&
+              item.entType === 'main'
+            ) {
+              //加载时触发 & 不包含子表
+              if (item.noValuabletrigger && item.noValuableField) {
+                //有值不触发
+                const val = utils.getValueByPath(
+                  this.formInst,
+                  item.noValuableField
+                )
+                if (val != '' && val != undefined && val != null) {
+                  return
+                }
+              }
+              setTimeout(() => {
+                _this.doQuery(item.alias, item.conditionfield, resultBind, null)
+              }, 100)
+            }
+          }
+        })
+      }
+    },
+    methods: {
+      doQuery(alias, params, resultBind, index) {
+        try {
+          let _this = this
+          let queryParams = {}
+          if (params && params.length > 0) {
+            params.forEach((item) => {
+              queryParams[item.field] = null
+              if (!item.defaultValue && item.fieldPath) {
+                const val = utils.getValueByPath(
+                  this.formInst,
+                  item.fieldPath,
+                  index
+                )
+                queryParams[item.field] = val || item.emptyValue // emptyValue-关联查询绑定参数为空时的绑定值
+              }
+            })
+          }
+          CustomQuery.load(alias, queryParams).then((data) => {
+            if (
+              data &&
+              data.constructor == Array &&
+              resultBind &&
+              resultBind.constructor == Object
+            ) {
+              // 关联查询值回绑时，默认获取返回的第一条记录
+              Object.keys(resultBind).forEach((k) => {
+                const path = resultBind[k]
+                const value = _this.getBindValue(data, k)
+                // 主表
+                if (index == null) {
+                  utils.setValueByPath(this.formInst, path, value)
+                }
+                // 子表
+                else {
+                  utils.setValueByPath(this.formInst, path, value, index)
+                }
+              })
+            }
+          })
+        } catch (error) {
+          console.error('获取关联查询出错：' + error)
+        }
+      },
+      getBindValue(data, key) {
+        //当系统接到触发请求要带出数据时，发现有多个查询结果，此时将多个结果以逗号分隔的模式全部都带出来
+        let value = []
+        data.forEach((item) => {
+          if (!utils.isEmpty(item[key])) {
+            value.push(item[key])
+          }
+        })
+        return value.join(',')
+      },
+    },
+  }
+</script>

package/packages/Global/src/GlobalValidate.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import emitter from '@/mixins/emitter.js'
+  const { Base64 } = require('js-base64')
+  export default {
+    name: 'HtGlobalValidate',
+    componentName: 'HtGlobalValidate',
+    mixins: [emitter],
+    props: {
+      verificationJson: String,
+      data: Object,
+    },
+    data() {
+      return {
+        verificationList: [],
+      }
+    },
+    created() {
+      let _this = this
+      this.$on('global-validate', () => {
+        _this.validate()
+      })
+    },
+    mounted() {
+      if (this.verificationJson) {
+        this.verificationList = JSON.parse(Base64.decode(this.verificationJson))
+      }
+    },
+    methods: {
+      validate() {
+        let result = true
+        if (this.verificationList && this.verificationList.length > 0) {
+          let pInst = utils.getOnlineFormInstance(this)
+          let _this = this
+          let messages = []
+          this.verificationList.forEach((item) => {
+            _this.execFun(pInst, item, messages)
+          })
+          if (messages.length > 0) {
+            result = false
+            this.$notify.error({
+              title: this.$t('ht.common.warmTips'),
+              dangerouslyUseHTMLString: true,
+              message: messages.join('<br/>'),
+            })
+          }
+        }
+        if (result) {
+          result = this.validateTable()
+        }
+        this.dispatch('HtOnlineForm', 'global-validate-result', [result])
+      },
+      execFun(pInst, item, messages) {
+        let formulasDiyJs = item.formulasDiyJs
+        if (formulasDiyJs.indexOf('return') === -1) {
+          formulasDiyJs = 'return ' + formulasDiyJs
+        }
+        let Fn = Function('data', '_me', '$Formulas', formulasDiyJs) //一个变量指向Function，防止有些前端编译工具报错
+        try {
+          let result = Fn(pInst.data, pInst, pInst.$Formulas)
+          if (!result) {
+            messages.push(item.tips)
+          }
+        } catch (err) {
+          messages.push(`全局校验【${item.name}】脚本错误`)
+        }
+      },
+      validateTable() {
+        const tables = utils.getOnlineFormInstance(this).permission.table //获取table权限
+        const boData = utils.getOnlineFormInstance(this).data //获取表单bo对象
+        let newBoData = {}
+        //获取所有表单字段对象
+        for (let k in boData) {
+          newBoData = boData[k]
+        }
+        for (let key in tables) {
+          const subData = newBoData['sub_' + key]
+          //如果有导入属性，则表明不是子表而是数据报表，不做必填校验
+          if (tables[key] && tables[key].hasOwnProperty('export')) {
+            continue
+          }
+          if ([true, 'true'].includes(tables[key].required) && subData) {
+            if (subData.length == 0) {
+              this.$message({
+                message: '子表必填一条记录',
+                type: 'warning',
+              })
+              return false
+            } else if (
+              subData.length > 0 &&
+              this.validateSunTable(tables, subData).length > 0
+            ) {
+              this.$message({
+                message: '孙表必填一条记录',
+                type: 'warning',
+              })
+              return false
+            }
+          }
+        }
+        return true
+      },
+      validateSunTable(tables, subData) {
+        const requiredTableKeyList = []
+        const notPassingSunTableKey = []
+        //获取必填子表/孙表字段名
+        for (let key in tables) {
+          if ([true, 'true'].includes(tables[key].required)) {
+            requiredTableKeyList.push(`sub_${key}`)
+          }
+        }
+        subData.map((item) => {
+          for (let sunKey in item) {
+            if (
+              requiredTableKeyList.includes(sunKey) &&
+              item[sunKey].length <= 0
+            ) {
+              notPassingSunTableKey.push(sunKey)
+            }
+          }
+        })
+        return notPassingSunTableKey
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped></style>

package/packages/HistoricalApproval/index.js

@@ -0,0 +1,7 @@
+import HistoricalApproval from '../HistoricalApproval/src/main.vue'
+
+HistoricalApproval.install = function(Vue) {
+  Vue.component(HistoricalApproval.name, HistoricalApproval)
+}
+
+export default HistoricalApproval