epx-frame 3.5.0-shpgy.1

package/src/frame/packages/form/Form.vue

@@ -0,0 +1,611 @@
+<template>
+  <div>
+    <table v-if="type==='table'" class="table-form">
+      <tr v-for="(tr,index) in tableModel" class="table-tr" :key="index">
+        <template v-for="fieldConfigs in tr">
+          <td class="form-cell" v-if="fieldConfigs" :key="fieldConfigs.attriName" :colspan="fieldConfigs.colspan>tableColumn? tableColumn:fieldConfigs.colspan" :rowspan="fieldConfigs.rowspan">
+            <!-- formItem 可独立控制数据  也可受制于form表单数据 -->
+            <slot v-bind="{ showLabel, fieldConfigs, metaId, ruleMetaId }">
+              <epx-table-form-item
+                :show-label="showLabel"
+                :label="fieldConfigs.attriLabel"
+                :label-align="labelAlign"
+                 :label-width="labelWidth"
+                 :form-font-size="formFontSize"
+                :metaId="metaId"
+                :ruleMetaId="ruleMetaId"
+                :fieldConfigs="fieldConfigs"
+                :rules="[{
+                  required: fieldConfigs.isRequired==='1' && fieldConfigs.state!=='SEARCH',
+                  message: `${fieldConfigs.attriLabel}` + $t('can not be blank')
+                }]"
+                :allow-delete="allowDelete"
+                @delete="v=>$emit('delete', v)"
+              />
+            </slot>
+          </td>
+        </template>
+      </tr>
+    </table>
+    <div class="auto-form" v-else>
+      <slot name="prepend"></slot>
+      <template v-for="fieldConfigs in formFieldsConfigs" >
+        <epx-table-form-item
+          :key="fieldConfigs.attriName"
+          :show-label="showLabel"
+          :label="fieldConfigs.attriLabel"
+          :label-align="labelAlign"
+          :label-width="labelWidth"
+          :form-font-size="formFontSize"
+          :metaId="metaId"
+          :ruleMetaId="ruleMetaId"
+          :fieldConfigs="fieldConfigs"
+          :rules="[{
+            required: fieldConfigs.isRequired==='1' && fieldConfigs.state!=='SEARCH',
+            message: `${fieldConfigs.attriLabel}` + $t('can not be blank')
+          }]"
+        >
+        </epx-table-form-item>
+      </template>
+      <slot name="append"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-table-form',
+  mixins: [component],
+  model: {
+    prop: 'data',
+    event: 'change-data'
+  },
+  props: {
+    pageType: String,
+    fieldsConfigs: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'table'
+    },
+    column: {
+      type: [Number, String],
+      default: 3
+    },
+    mcolumn: {
+      type: [Number, String],
+      default: 1
+    },
+    data: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    metaId: {
+      type: String,
+      default: ''
+    },
+    ruleMetaId: {
+      type: String,
+      default: ''
+    },
+    formClick: {
+      type: Function
+    },
+    allowDelete: {
+      type: Boolean,
+      default: false
+    },
+    labelAlign: {
+      type: String
+    },
+    labelWidth: [String, Number],
+    formFontSize: [String, Number],
+    fieldRelation: Array
+  },
+  data () {
+    const data = {}
+    for (const key in this.data) {
+      const flag = this.fieldsConfigs.find(item => key === item.attriName || key === 'LANGUAGE_PARAM' || key === `${item.attriName}#`)
+      if (flag) {
+        data[key] = this.data[key]
+      }
+    }
+    return {
+      tableModel: [],
+      oldData: {},
+      // eslint-disable-next-line vue/no-reserved-keys
+      _fieldsConfigs: [],
+      relyfieldFlagMap: {},
+      model: {
+        form: this,
+        data: data,
+        change: (v) => {
+          this.$set(this.model, 'data', { ...this.data, ...v })
+        }
+      }
+    }
+  },
+  computed: {
+    tableColumn () {
+      return this.$isMobile ? Number(this.mcolumn) : Number(this.column)
+    },
+    fieldRelations () {
+      if (this.fieldRelation) {
+        return this.fieldRelation
+      }
+      const { attriRelys = {} } = this.$meta || {}
+      const attriValues = Object.values(attriRelys)
+      if (attriValues.length > 0) {
+        return attriValues[0] || []
+      } else {
+        return []
+      }
+    },
+    formFieldsConfigs () {
+      const { data } = this.model
+      return this.fieldsConfigs.map(fieldConfigs => {
+        const { attribute = {} } = fieldConfigs
+        // 字段关联关系
+        const relation = this.fieldRelations.find(item => item.relyAttri && item.relyAttri.includes(attribute.id))
+        if (relation) {
+          if (relation.relyType === 'select') {
+            const field = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === relation.controlAttris) || {}
+            const value = data[field.attriName]
+            // 设置依赖字段的查询条件
+            if (value) {
+              fieldConfigs = { ...fieldConfigs, upId: value }
+            } else {
+              fieldConfigs = { ...fieldConfigs, state: 'HIDDEN' }
+            }
+          } else if (relation.relyType === 'show') {
+            // 显示依赖
+            const flag = this.relyfieldFlagMap[fieldConfigs.attriName] === true
+            if (!flag) {
+              fieldConfigs = { ...fieldConfigs, state: 'HIDDEN' }
+            }
+          } else if (relation.relyType === 'scope') {
+            let scope = {}
+            if (relation.objectScope) {
+              scope = JSON.parse(relation.objectScope)
+            }
+            fieldConfigs = { ...fieldConfigs, scopeParams: scope.scopeParams }
+          }
+        }
+        return fieldConfigs
+      })
+    }
+  },
+  provide () {
+    return {
+      model: this.model,
+      formClick: this.formClick
+    }
+  },
+  watch: {
+    data: {
+      handler (v) {
+        // 延迟200ms执行
+        const data = {}
+        for (const key in v) {
+          const fieldConfig = this.fieldsConfigs.find(item => key === item.attriName || key === `${item.attriName}#` || key === 'LANGUAGE_PARAM' || (key.split('&')[0] === item.attriName && item.dataType === 'blob'))
+          if (fieldConfig) {
+            data[key] = v[key]
+          }
+        }
+        if (!this.$_.isEqual(this.model.data, data)) {
+          this.$set(this.model, 'data', data)
+        }
+      },
+      deep: true
+    },
+    $isMobile (v) {
+      this.createTableModel()
+    },
+    fieldsConfigs (v) {
+      this._fieldsConfigs = null
+      this.createTableModel()
+    },
+    async fieldRelations () {
+      const newData = this.model.data
+      // 获取依赖字段显示
+      const relyData = {}
+      for (const key in newData) {
+        if (!key.includes('#')) relyData[key] = newData[key]
+      }
+      const data = await this.getRelyShowFlag(relyData)
+      this.relyfieldFlagMap = data.attriData || {}
+      this.createTableModel()
+      if (this.pageType !== 'DETAIL') {
+        const relyData = {}
+        const relyValueEl = {}
+        for (const key in newData) {
+          if (!key.includes('#')) relyData[key] = newData[key]
+        }
+        const valueRelyFields = this.fieldRelations.filter(item => item.relyType === 'value').reduce((arr, item) => [...arr, ...(item.relyAttri ? item.relyAttri.split(',') : [])], [])
+
+        valueRelyFields.forEach(field => {
+          // 获取字段attriName
+          const fieldConfig = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === field)
+          if (fieldConfig) {
+            if (fieldConfig.attribute.defaultValue) {
+              try {
+                const elJson = JSON.parse(fieldConfig.attribute.defaultValue)
+                relyValueEl[fieldConfig.attriName] = elJson.el
+              } catch (error) {}
+            }
+          }
+        })
+        this.getRelyvalue(relyData, relyValueEl)
+      }
+    },
+    'model.data': {
+      async handler () {
+        const newData = { ...this.model.data }
+        if (this.fieldRelations) {
+          // 判断字段关系中控制字段是否改变
+          const controlFields = this.fieldRelations.filter(item => item.relyType !== 'value').reduce((arr, item) => [...arr, ...(item.controlAttris ? item.controlAttris.split(',') : [])], [])
+          const valueControlFields = this.fieldRelations.filter(item => item.relyType === 'value').reduce((arr, item) => [...arr, ...(item.controlAttris ? item.controlAttris.split(',') : [])], [])
+          const showControlFields = this.fieldRelations.filter(item => item.relyType === 'show').reduce((arr, item) => {
+            return [...arr, ...(item.controlAttris ? item.controlAttris.split(',') : [])]
+          }, [])
+          const selectControlFields = this.fieldRelations.filter(item => item.relyType === 'select').reduce((arr, item) => {
+            return [...arr, ...(item.controlAttris ? item.controlAttris.split(',') : [])]
+          }, [])
+          const changeFlag = controlFields.some(field => {
+            // 获取字段attriName
+            const fieldConfig = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === field)
+            if (fieldConfig) {
+              return newData[fieldConfig.attriName] !== this.oldData[fieldConfig.attriName]
+            }
+          })
+          const showChangeFlag = showControlFields.some(field => {
+            // 获取字段attriName
+            const fieldConfig = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === field)
+            if (fieldConfig) {
+              return newData[fieldConfig.attriName] !== this.oldData[fieldConfig.attriName]
+            }
+          })
+          const valueChangeFlag = valueControlFields.some(field => {
+            // 获取字段attriName
+            const fieldConfig = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === field)
+            if (fieldConfig) {
+              return newData[fieldConfig.attriName] !== this.oldData[fieldConfig.attriName]
+            }
+          })
+          if (changeFlag) {
+            if (showChangeFlag) {
+              // 获取依赖字段显示
+              const relyData = {}
+              const formData = { ...this.data, ...newData }
+              for (const key in formData) {
+                if (!key.includes('#')) relyData[key] = formData[key]
+              }
+              const data = await this.getRelyShowFlag(relyData)
+              this.relyfieldFlagMap = data.attriData || {}
+              for (const key in this.relyfieldFlagMap) {
+                if (this.relyfieldFlagMap[key] === false) {
+                  newData[key] = ''
+                }
+              }
+            }
+            this.fieldRelations.filter(item => item.relyType === 'select').forEach(relation => {
+              const field = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === relation.controlAttris)
+              if (field) {
+                if (this.oldData[field.attriName] && newData[field.attriName] !== this.oldData[field.attriName]) {
+                  const fieldConfigs = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === relation.relyAttri)
+                  if (fieldConfigs) {
+                    newData[fieldConfigs.attriName] = ''
+                  }
+                }
+              }
+            })
+            selectControlFields.forEach(field => {
+            // 获取字段attriName
+              const fieldConfig = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === field)
+              if (fieldConfig) {
+                if (newData[fieldConfig.attriName] !== this.oldData[fieldConfig.attriName]) {
+
+                }
+              }
+            })
+            this.createTableModel()
+          }
+          if (valueChangeFlag && this.pageType !== 'DETAIL') {
+            const relyData = {}
+            const relyValueEl = {}
+            const formData = { ...this.data, ...newData }
+            for (const key in formData) {
+              if (!key.includes('#')) relyData[key] = newData[key]
+            }
+            const valueRelyFields = this.fieldRelations.filter(item => item.relyType === 'value').reduce((arr, item) => [...arr, ...(item.relyAttri ? item.relyAttri.split(',') : [])], [])
+
+            valueRelyFields.forEach(field => {
+              // 获取字段attriName
+              const fieldConfig = this.fieldsConfigs.find(item => item.attribute && item.attribute.id === field)
+              if (fieldConfig) {
+                if (fieldConfig.attribute.defaultValue) {
+                  try {
+                    const elJson = JSON.parse(fieldConfig.attribute.defaultValue)
+                    relyValueEl[fieldConfig.attriName] = elJson.el
+                  } catch (error) {}
+                }
+              }
+            })
+            this.getRelyvalue(relyData, relyValueEl)
+          }
+        }
+        this.$emit('change-data', { ...this.data, ...newData })
+        this.oldData = this.$_.cloneDeep(newData)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    async createTableModel () {
+      // 判断是否存在依赖字段，依赖字段隐藏
+      const { data } = this.model
+      const tableModel = [[]]
+      const currentRowIndex = 0
+      this.currentColIndex = 0
+      if (!this._fieldsConfigs) this._fieldsConfigs = this.$_.cloneDeep(this.fieldsConfigs)
+      // 循环字段列表  合并行 // 合并列
+      for (let i = 0; i < this._fieldsConfigs.length; i++) {
+        const fieldConfigs = this._fieldsConfigs[i]
+        const oldFieldConfigs = this.fieldsConfigs[i]
+        let rowspan = 1; let colspan = 1
+        // 获取其控制字段
+        const { rowspan: fieldRowspan, colspan: fieldColspan, dataType, attribute = {} } = fieldConfigs
+        // 字段关联关系
+        const relations = this.fieldRelations.filter(item => item.relyAttri && item.relyAttri.includes(attribute.id))
+        if (relations.length > 0) {
+          relations.forEach(relation => {
+            if (relation.relyType === 'select') {
+              const field = this._fieldsConfigs.find(item => item.attribute && item.attribute.id === relation.controlAttris) || {}
+              const value = data[field.attriName]
+              // 设置依赖字段的查询条件
+              if (value) {
+                fieldConfigs.upId = value
+                fieldConfigs.state = oldFieldConfigs.state
+              } else {
+                fieldConfigs.state = 'HIDDEN'
+                this.$nextTick(() => {
+                  this.model.data = { ...this.model.data, [fieldConfigs.attriName]: '' }
+                })
+              }
+            } else if (relation.relyType === 'show') {
+            // 显示依赖
+              const flag = this.relyfieldFlagMap[fieldConfigs.attriName] === true
+              // 如果改变了
+              if (!flag) {
+                fieldConfigs.state = 'HIDDEN'
+              // this.model.data = { ...this.model.data, [fieldConfigs.attriName]: '' }
+              } else {
+                fieldConfigs.state = oldFieldConfigs.state
+              }
+            } else if (relation.relyType === 'scope') {
+              let scope = {}
+              if (relation.objectScope) {
+                scope = JSON.parse(relation.objectScope)
+              }
+              fieldConfigs.scopeParams = scope.scopeParams
+            }
+          })
+
+          // this._fieldsConfigs.splice(i, 1, fieldConfigs)
+        }
+        if (fieldConfigs.state === 'HIDDEN' || fieldConfigs.state === 'HIDDEN-READONLY') continue
+        // 字段类型默认跨行/列
+        if (dataType === 'photo') {
+          rowspan = 3
+        } else if (dataType === 'textarea' || dataType === 'rule' || dataType === 'scope' || dataType === 'bigtext' || dataType === 'html') {
+          colspan = this.tableColumn
+        }
+        if (fieldRowspan) rowspan = fieldRowspan
+        if (fieldColspan) colspan = fieldColspan > this.tableColumn ? this.tableColumn : fieldColspan
+        if (colspan > 1) fieldConfigs.colspan = colspan
+        if (rowspan > 1) fieldConfigs.rowspan = rowspan
+        // 当前行
+        this.addTableCell(tableModel, fieldConfigs, currentRowIndex)
+      }
+      // 更新视图
+      this.tableModel = [...tableModel]
+    },
+    // 添加行
+    addCellToRow (tableModel, fieldConfigs) {
+
+    },
+    addTableCell (tableModel, fieldConfigs, currentRowIndex) {
+      let { colspan = 1, rowspan = 1 } = fieldConfigs
+      colspan = colspan > this.tableColumn ? this.tableColumn : colspan
+      let currentRow = tableModel[currentRowIndex]
+      if (!currentRow) {
+        tableModel[currentRowIndex] = currentRow = []
+      }
+
+      if (rowspan > 1) {
+        // 是否能放开
+        for (let rowIndex = 0; rowIndex < rowspan; rowIndex++) {
+          const row = tableModel[currentRowIndex + rowIndex] || []
+          if (row.length + colspan > this.tableColumn) {
+            return this.addTableCell(tableModel, fieldConfigs, currentRowIndex + rowIndex + 1)
+          }
+        }
+      } else if (currentRow.length + colspan > this.tableColumn) {
+        currentRowIndex++
+        return this.addTableCell(tableModel, fieldConfigs, currentRowIndex)
+      }
+      const colIndex = tableModel[currentRowIndex].length
+
+      // 行合并
+      for (let rowIndex = 0; rowIndex < rowspan; rowIndex++) {
+        if (!tableModel[currentRowIndex + rowIndex]) tableModel[currentRowIndex + rowIndex] = []
+        tableModel[currentRowIndex + rowIndex].splice(colIndex, 0, rowIndex === 0 ? fieldConfigs : null)
+        for (let i = 1; i < colspan; i++) {
+          // 占位符
+          tableModel[currentRowIndex + rowIndex].splice(colIndex + i, 0, null)
+        }
+      }
+    },
+    addTableData (fieldConfigs, tableModel) {
+      let { colspan = 1 } = fieldConfigs
+      colspan = colspan > this.tableColumn ? this.tableColumn : colspan
+      let isAddFlag = false
+      if (!tableModel[this.currentRowIndex]) tableModel[this.currentRowIndex] = []
+      this.currentRow = tableModel[this.currentRowIndex]
+      for (let index = 0; index < this.tableColumn; index = index + 1) {
+        if (this.currentRow[index] === undefined) {
+          if ((index + Number(colspan) <= this.tableColumn)) {
+            isAddFlag = true
+            this.currentColIndex = index
+            tableModel[this.currentRowIndex][index] = fieldConfigs
+            this.addTableSpan(fieldConfigs, tableModel)
+            return
+          }
+        }
+      }
+      if (!isAddFlag) {
+        this.currentRowIndex++
+        this.addTableData(fieldConfigs, tableModel)
+      }
+    },
+    addTableSpan (fieldConfigs, tableModel) {
+      const { rowspan, colspan } = fieldConfigs
+      if (colspan > 1) {
+        for (let i = 1; i < colspan && tableModel[this.currentRowIndex].length < this.tableColumn; i++) {
+          tableModel[this.currentRowIndex].push(null)
+        }
+      }
+      if (rowspan > 1) { //  1 2
+        for (let i = 1; i < rowspan; i++) {
+          if (!tableModel[this.currentRowIndex + i]) tableModel[this.currentRowIndex + i] = []
+          if (colspan > 1) { // 0 1
+            for (let j = 0; j < colspan && this.currentColIndex + j <= this.tableColumn; j++) {
+              tableModel[this.currentRowIndex + i][this.currentColIndex + j] = null
+            }
+          } else {
+            tableModel[this.currentRowIndex + i][this.currentColIndex] = null
+          }
+        }
+      }
+    },
+    validate (callback, { validateDetail, showErrorText } = {}) {
+      if (!this.model) {
+        console.warn('[Warn][Form]model is required for validate to work!')
+        return
+      }
+      let promise
+      // if no callback, return promise
+      if (typeof callback !== 'function' && window.Promise) {
+        promise = new window.Promise((resolve, reject) => {
+          callback = function (valid) {
+            valid ? resolve(valid) : reject(valid)
+          }
+        })
+      }
+      let valid = true
+      let count = 0
+      // 如果需要验证的fields为空，调用验证时立刻返回callback
+      if ((!this._fieldsConfigs || this._fieldsConfigs.length === 0) && callback) {
+        // eslint-disable-next-line standard/no-callback-literal
+        callback(true)
+      }
+      let invalidFields = {}
+
+      this.$children.forEach(field => {
+        if (field.validate) {
+          field.validate((message, field) => {
+            if (message) {
+              valid = false
+            }
+            invalidFields = Object.assign({}, invalidFields, field)
+            if (typeof callback === 'function' && ++count === this.$children.length) {
+              callback(valid, invalidFields)
+            }
+          }, null, validateDetail, showErrorText)
+        }
+      })
+      if (promise) {
+        return promise
+      }
+    },
+    onresize () {
+    },
+    getRelyShowFlag (showRelations = {}, condition = '{}') {
+      return this.$http.$post({
+        action: 'showValidate',
+        entityId: 'FM_ATTRIBUTE_RELATION',
+        showRelations: JSON.stringify(showRelations),
+        relationEntityId: this.$metaId || this.metaId
+      })
+        .then(data => {
+          return data
+        })
+        .catch(() => false)
+    },
+    getRelyvalue (globalParams, elExpressions) {
+      this.$http.$post({
+        action: 'functionResolution',
+        entityId: 'FM_FUNCTION',
+        type: 'value',
+        globalParams: JSON.stringify(globalParams),
+        elExpressions: JSON.stringify(elExpressions)
+      })
+        .then(data => {
+          this.$set(this.model, 'data', { ...this.model.data, ...data })
+        })
+    }
+  },
+  mounted () {
+    this.createTableModel()
+    this.onresize()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-form {
+  width: 100%;
+  table-layout:fixed;
+  vertical-align: top;
+}
+.auto-form {
+  display: flex;
+  flex-wrap: wrap;
+  &::v-deep {
+    .table-form-item {
+      margin: 10px;
+    }
+  }
+}
+.form-cell {
+  vertical-align: top;
+}
+.table-tr {
+  &:first-child {
+    &::v-deep {
+      .van-hairline--top-bottom::after {
+        border-top: 0;
+      }
+    }
+  }
+  &:last-child {
+    &::v-deep {
+      .van-hairline--top-bottom::after {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+</style>

package/src/frame/packages/form/index.js

@@ -0,0 +1,8 @@
+import Form from './Form.vue'
+
+/* istanbul ignore next */
+Form.install = function install (Vue) {
+  Vue.component(Form.name, Form)
+}
+
+export default Form