[add] 内部工作组选择组件

2023-10-30 10:03:43 +08:00
parent cf44116037
commit 0a8c11776e
4 changed files with 541 additions and 0 deletions
@@ -0,0 +1,213 @@
+<template>
+  <div class="selection-wrapper">
+    <div class="box-title-text">
+      <a-input class="box-input" :value="textVals" :title="textVals"
+               :disabled="disabledInput" readonly :placeholder="placeholder">
+        <a-icon v-if="storeVals" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
+      </a-input>
+      <a-button v-if="!disabled" type="primary" class="button-box" @click="workGroupClick">
+        {{this.$t('workGroupSelect.select')}}
+      </a-button>
+    </div>
+    <work-group-selection-modal ref="workGroupSelectionModal" v-bind="$attrs"
+                                :modal-width="modalWidth"
+                                :multi="multi"
+                                :rootOpened="rootOpened"
+                                :depart-id="value"
+                                :store="storeField"
+                                :text="textField"
+                                :treeOpera="treeOpera"
+                                @ok="handleOK"
+                                @initComp="initComp"/>
+  </div>
+</template>
+
+<script>
+import WorkGroupSelectionModal from '@comp/selection/WorkGroupSelectionModal'
+import { underLinetoHump } from '@comp/_util/StringUtil'
+export default {
+  name: 'WorkGroupSelection',
+  components: { WorkGroupSelectionModal },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 只禁用输入框
+    disabledInput: {
+      type: Boolean,
+      default: false
+    },
+    modalWidth: {
+      type: Number,
+      default: 500,
+      required: false
+    },
+    multi: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    rootOpened: {
+      type: Boolean,
+      default: true,
+      required: false
+    },
+    // 自定义返回字段，默认返回 id
+    customReturnField: {
+      type: String,
+      default: ''
+    },
+    backDepart: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    // 存储字段 [key field]
+    store: {
+      type: String,
+      default: 'id',
+      required: false
+    },
+    // 显示字段 [label field]
+    text: {
+      type: String,
+      default: 'name',
+      required: false
+    },
+    treeOpera: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false,
+      storeVals: '', // [key values]
+      textVals: '' // [label values]
+    }
+  },
+  computed: {
+    storeField () {
+      let field = this.customReturnField
+      if (!field) {
+        field = this.store
+      }
+      return underLinetoHump(field)
+    },
+    textField () {
+      return underLinetoHump(this.text)
+    }
+  },
+  mounted () {
+    this.storeVals = this.value
+  },
+  watch: {
+    value (val) {
+      this.storeVals = val
+    }
+  },
+  methods: {
+    initComp (textVals) {
+      this.textVals = textVals
+    },
+    // 返回选中的部门信息
+    backDepartInfo () {
+      if (this.backDepart === true) {
+        if (this.storeVals && this.storeVals.length > 0) {
+          const arr1 = this.storeVals.split(',')
+          const arr2 = this.textVals.split(',')
+          const info = []
+          for (let i = 0; i < arr1.length; i++) {
+            info.push({
+              value: arr1[i],
+              text: arr2[i]
+            })
+          }
+          this.$emit('back', info)
+        }
+      }
+    },
+    handleOK (rows) {
+      if (!rows && rows.length <= 0) {
+        this.textVals = ''
+        this.storeVals = ''
+      } else {
+        const arr1 = []
+        const arr2 = []
+        for (const dep of rows) {
+          arr1.push(dep[this.storeField])
+          arr2.push(dep[this.textField])
+        }
+        this.storeVals = arr1.join(',')
+        this.textVals = arr2.join(',')
+      }
+      this.$emit('change', this.storeVals)
+      this.backDepartInfo()
+    },
+    getDepartNames () {
+      return this.departNames
+    },
+    handleEmpty () {
+      this.handleOK('')
+    },
+    // 点击选择按钮
+    workGroupClick () {
+      this.$refs.workGroupSelectionModal.show()
+    },
+    // 输入框输入监听
+    indexClick (event) {
+      this.$emit('change', event.target.value)
+    },
+    modalInput (value) {
+      this.$emit('change', value)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+.selection-wrapper {
+  height: 40px;
+  line-height: 40px;
+}
+.box-title-text {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  .box-input {
+    width: 100%;
+  }
+  .button-box {
+    margin-left: 5px;
+  }
+}
+.selection-wrapper .anticon-close-circle {
+  cursor: pointer;
+  color: #ccc;
+  transition: color 0.3s;
+  font-size: 12px;
+}
+.selection-wrapper .anticon-close-circle:hover {
+  color: #f5222d;
+}
+.selection-wrapper .anticon-close-circle:active {
+  color: #666;
+}
+</style>