epx-frame 3.5.0-shpgy.1

package/src/frame/components/form/Input.vue

@@ -0,0 +1,123 @@
+<template>
+  <!-- 移动端 -->
+  <div v-if="$isMobile">
+   <van-field v-model="value" :label="attriLabel"  type="textarea" autosize :readonly="!editable" :placeholder="editable?'请输入': ''" />
+  </div>
+  <div v-else>
+    <el-input
+      class="input"
+      v-if="editable"
+      :placeholder="placeholder"
+      v-model="value"
+      clearable
+      size="medium"
+      @change="searchText"
+      :suffix-icon="fieldConfig.state==='SEARCH'? 'el-icon-search': ''"
+    >
+      <!-- <i @click="searchText"  v-if="fieldConfig.state==='SEARCH'" slot="append" class="el-icon-search"></i> -->
+    </el-input>
+    <p v-else>{{value}}</p>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'epx-form-input',
+  model: {
+    prop: 'fieldValue',
+    event: 'update:field'
+  },
+  props: {
+    fieldConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    values: {
+      type: Object
+    },
+    fieldValue: String
+  },
+  data () {
+    return {
+      input: ''
+    }
+  },
+  computed: {
+    attriName () {
+      const { attriName } = this.fieldConfig
+      return attriName
+    },
+    attriLabel () {
+      const { attriLabel } = this.fieldConfig
+      return attriLabel
+    },
+    editable () {
+      const { state = 'DETAIL' } = this.fieldConfig
+      return state === 'ADD' || state === 'EDIT' || state === 'SEARCH'
+    },
+    placeholder () {
+      const { placeholder = '请输入' + this.attriLabel } = this.fieldConfig
+      return placeholder
+    },
+    defaultValue () {
+      const { value } = this.fieldConfig
+      return value
+    },
+    value: {
+      get () {
+        const attriName = this.attriName
+        const fieldValue = this.fieldValue ? this.fieldValue : this.values ? this.values[attriName] : this.formModel[attriName]
+        return fieldValue || this.defaultValue
+      },
+      set (v) {
+        if (this.values) {
+          this.$emit('update-value', { [this.attriName]: v, [this.attriName + '#']: v })
+          this.$emit('update:values', { ...this.values, [this.attriName]: v, [this.attriName + '#']: v })
+        }
+        this.$emit('change', { [this.attriName]: v })
+        this.$emit('update:field', v)
+        this.$set(this.formModel, [this.attriName], v)
+        this.$set(this.formModel, [this.attriName + '#'], v)
+      }
+    }
+  },
+  inject: {
+    formModel: {
+      // 函数式组件取值不一样
+      default () {
+        const attriName = this.attriName
+        const defaultValue = {
+          [attriName]: ''
+        }
+        return defaultValue
+      }
+    },
+    search: {
+      default: () => null
+    }
+  },
+  methods: {
+    searchText () {
+      if (this.fieldConfig.state !== 'SEARCH') return
+      if (this.search) this.search()
+    }
+  },
+  created () {
+    if (this.defaultValue) this.value = this.defaultValue
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.search-btn {
+  padding: 12px;
+}
+.input {
+  height: 36px;
+  line-height: 36px;
+}
+
+</style>

package/src/frame/components/form/List.vue

@@ -0,0 +1,149 @@
+<template>
+   <!-- 移动端 -->
+  <div v-if="$isMobile">
+   <van-field v-model="formModel[attriName+ '#']" :label="attriLabel" readonly @click="editable? showPicker=true : null" :placeholder="editable?'请选择': ''" />
+   <van-popup v-model="showPicker" position="bottom">
+      <van-picker
+        show-toolbar
+        :columns="options"
+        value-key="name"
+        @confirm="confirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+  <!-- pc端 -->
+  <div v-else>
+    <el-select clearable v-if="editable" v-model="value" :placeholder="placeholder" :multiple="type==='SEARCH'" @change="searchText" size="medium">
+        <el-option
+          v-for="item in options"
+          :key="item.id"
+          :label="item.name"
+          :value="item.code">
+        </el-option>
+      </el-select>
+      <p v-else>{{label}}</p>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { ADD_LIST } from '@/store/actions'
+export default {
+  name: 'epx-form-list',
+  props: {
+    fieldConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    values: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      // value: [],
+      showPicker: false
+    }
+  },
+  computed: {
+    attriName () {
+      const { attriName } = this.fieldConfig
+      return attriName
+    },
+    attriLabel () {
+      const { attriLabel } = this.fieldConfig
+      return attriLabel
+    },
+    defaultValue () {
+      const { value } = this.fieldConfig
+      return value
+    },
+    ...mapGetters([
+      'getCodeById'
+    ]),
+    options () {
+      const { codeKey, dataType } = this.fieldConfig
+      if (codeKey) {
+        const options = this.getCodeById(codeKey)
+        if (!options) {
+          this.$store.dispatch({
+            type: ADD_LIST,
+            key: codeKey,
+            dataType
+          })
+        }
+        return options || []
+      }
+      return []
+    },
+    editable () {
+      const { state = 'DETAIL' } = this.fieldConfig
+      return state === 'ADD' || state === 'EDIT' || state === 'SEARCH'
+    },
+    placeholder () {
+      const { placeholder = '请选择' + this.attriLabel } = this.fieldConfig
+      return placeholder
+    },
+    value: {
+      get () {
+        const attriName = this.attriName
+        return this.values ? this.values[attriName] : this.formModel[attriName]
+      },
+      set (v) {
+        const item = this.options.find(item => item.code === v) || {}
+        if (this.values) {
+          // 查询对应名称
+          this.$emit('update-value', { [this.attriName]: v, [this.attriName + '#']: item.name })
+          this.$emit('update:values', { ...this.values, [this.attriName]: v, [this.attriName + '#']: item.name })
+        }
+        this.$set(this.formModel, [this.attriName], v)
+        this.$set(this.formModel, [this.attriName + '#'], item.name)
+      }
+    },
+    label: {
+      get () {
+        const attriName = this.attriName + '#'
+        return this.values ? this.values[attriName] : this.formModel[attriName]
+      }
+    }
+  },
+  inject: {
+    formModel: {
+      // 函数式组件取值不一样
+      default () {
+        const attriName = this.attriName
+        const defaultValue = {
+          [attriName]: ''
+        }
+        return defaultValue
+      }
+    },
+    type: {
+      default: 'ADD'
+    },
+    search: {
+      default: () => null
+    }
+  },
+  methods: {
+    searchText (v) {
+      if (this.fieldConfig.state !== 'SEARCH') return
+      if (this.search) this.search()
+    },
+    confirm (v) {
+      const { code, name } = v
+      this.formModel[this.attriName] = code
+      this.formModel[this.attriName + '#'] = name
+      this.$emit('update-value', { [this.attriName]: code, [this.attriName + '#']: name })
+      this.$emit('update:values', { ...this.values, [this.attriName]: code, [this.attriName + '#']: name })
+      this.showPicker = false
+    }
+  },
+  created () {
+    if (this.defaultValue) this.value = this.defaultValue
+  }
+}
+</script>

package/src/frame/components/form/Object.vue

@@ -0,0 +1,225 @@
+<template>
+  <div v-if="$isMobile">
+   <van-field v-model="formModel[attriName+ '#']" :label="attriLabel" readonly @click="editable? showPicker=true : null" :placeholder="editable?'请选择': ''" />
+    <van-popup v-model="showPicker" position="bottom">
+      <epx-page class="find" v-if="dataType==='treeList'" flag="v_tree_find" :fieldConfig="fieldConfig" :metaId="fieldConfig.codeKey" component="entity-tree-find" :change="change" />
+      <epx-page class="find" v-else flag="v_find" :fieldConfig="fieldConfig" :metaId="fieldConfig.codeKey" component="entity-list-find-page" :change="change" />
+    </van-popup>
+  </div>
+  <div v-else ref="object">
+    <el-popover
+      v-if="editable"
+      popper-class="object-popover"
+      ref="popover"
+      class="popover"
+      trigger="click"
+      :preventOverflowOrder="['left', 'right', 'top', 'bottom']"
+      v-model="popover"
+      :tabindex="1"
+    >
+      <el-input
+        ref="input"
+        slot="reference"
+        :placeholder="placeholder"
+        v-model="label"
+        clearable
+        size="medium"
+        @change="searchText"
+        @clear="clear"
+      >
+        <i slot="suffix" class="el-icon-search"></i>
+      </el-input>
+
+      <epx-page class="find tree-find" :multiple="type==='SEARCH'" v-if="dataType==='treeList'" :flag="fieldConfig.flag|| 'v_tree_find'" :fieldConfig="fieldConfig" :metaId="fieldConfig.codeKey" component="entity-tree-find-page" :change="change" />
+      <epx-page class="find" v-else :multiple="type==='SEARCH'" :flag="fieldConfig.flag||'v_find'" :fieldConfig="fieldConfig" :metaId="fieldConfig.codeKey" component="entity-list-find-page" :change="change" />
+    </el-popover>
+    <p v-else>{{label}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-form-object',
+  props: {
+    fieldConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    values: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      popover: false,
+      showPicker: false
+    }
+  },
+  computed: {
+    attriName () {
+      const { attriName } = this.fieldConfig
+      return attriName
+    },
+    attriLabel () {
+      const { attriLabel } = this.fieldConfig
+      return attriLabel
+    },
+    dataType () {
+      const { dataType } = this.fieldConfig
+      return dataType
+    },
+    multiple () {
+      const { dataType } = this.fieldConfig
+      return dataType === 'multiobject' || this.type === 'SEARCH'
+    },
+    options () {
+      const { codeKey } = this.fieldConfig
+      return codeKey ? this.objects[codeKey] || [] : []
+    },
+    editable () {
+      const { state = 'DETAIL' } = this.fieldConfig
+      return state === 'ADD' || state === 'EDIT' || state === 'SEARCH'
+    },
+    placeholder () {
+      const { placeholder = '请选择' + this.attriLabel } = this.fieldConfig
+      return placeholder
+    },
+    defaultValue () {
+      const { value } = this.fieldConfig
+      return value
+    },
+    value: {
+      get () {
+        const attriName = this.attriName
+        return this.values ? this.values[attriName] : this.formModel[attriName]
+      },
+      set (v) {
+        if (this.values) {
+          this.$emit('update-value', { [this.attriName]: v })
+          this.$emit('update:values', { ...this.values, [this.attriName]: v })
+        }
+      }
+    },
+    label: {
+      get () {
+        const attriName = this.attriName + '#'
+        return this.values ? (this.values[attriName] || this.values[attriName + '#']) : (this.formModel[attriName] || this.formModel[this.attriName])
+      }
+    }
+  },
+  inject: {
+    formModel: {
+      // 函数式组件取值不一样
+      default () {
+        const attriName = this.attriName
+        const defaultValue = {
+          [attriName]: '',
+          [attriName + '#']: ''
+        }
+        return defaultValue
+      }
+    },
+    search: {
+      default: () => null
+    },
+    formListClick: {
+      default: () => null
+    },
+    type: {
+      default: 'ADD'
+    }
+  },
+  methods: {
+    getLabel (id) {
+      return this.$http.$request({
+        action: 'getLabel',
+        entityId: this.fieldConfig.codeKey,
+        id
+      })
+    },
+    searchText (v) {
+      this.$set(this.formModel, this.attriName, v)
+      if (this.fieldConfig.state !== 'SEARCH') return
+      if (this.search) this.search()
+    },
+    change (item) {
+      let labels = ''
+      let ids = ''
+      if (Array.isArray(item)) {
+        labels = item.map(item => item.name).join(',')
+        ids = item.map(item => item.id).join(',')
+      } else {
+        labels = item.name
+        ids = item.id
+      }
+      this.$set(this.formModel, this.attriName + '#', labels)
+      this.$set(this.formModel, this.attriName, ids)
+      if (this.values) {
+        this.$emit('update-value', { [this.attriName]: ids, [this.attriName + '#']: labels })
+        this.$emit('update:values', { ...this.values, [this.attriName]: ids, [this.attriName + '#']: labels || ids })
+      }
+      this.$emit('change', { [this.attriName + '#']: labels, [this.attriName]: ids })
+      this.popover = false
+      this.showPicker = false
+      if (this.formListClick) this.formListClick(this.fieldConfig, item)
+      if (this.fieldConfig.state === 'SEARCH') {
+        if (this.search) this.search()
+      }
+    },
+    clear () {
+      this.$set(this.formModel, this.attriName + '#', '')
+      this.$set(this.formModel, this.attriName, '')
+      if (this.values) {
+        this.$emit('update-value', { [this.attriName]: '', [this.attriName + '#']: '' })
+        this.$emit('update:values', { ...this.values, [this.attriName]: '', [this.attriName + '#']: '' })
+      }
+    }
+  },
+  created () {
+    if (this.defaultValue) {
+      // 格式化defaultValue
+      const params = this.$formatParams({ value: this.defaultValue })
+      // 获取label
+      if (params.value) {
+        this.getLabel(params.value)
+          .then(data => {
+            this.change({ name: data.label, id: params.value })
+          })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.object-popover {
+  max-width: 900px;
+}
+div.find {
+  max-height: 400px;
+  max-width: 900px;
+  overflow: auto;
+}
+div.tree-find {
+  // width: 200px;
+}
+@media screen and (min-width: 992px){
+ div.find {
+    &::v-deep {
+      .list, .base-page {
+        max-width: 820px;
+        max-height: 400px
+      }
+      .search-container {
+        margin-bottom: 0;
+      }
+      .table-container {
+        padding: 0 16px 16px
+      }
+    }
+  }
+}
+
+</style>