Merge pull request #615 from veops/dev_ui_240913

feat(ui): add employeeTreeSelect otherOptions prop

cmdb-ui/src/views/setting/components/employeeTreeSelect.vue

@@ -1,106 +1,122 @@
-<template>
+<template>
-  <treeselect
+  <treeselect
-    :disable-branch-nodes="multiple ? false : true"
+    :disable-branch-nodes="multiple ? false : true"
-    :multiple="multiple"
+    :multiple="multiple"
-    :options="employeeTreeSelectOption"
+    :options="employeeTreeSelectOption"
-    :placeholder="readOnly ? '' : placeholder || $t('cs.components.selectEmployee')"
+    :placeholder="readOnly ? '' : placeholder || $t('cs.components.selectEmployee')"
-    v-model="treeValue"
+    v-model="treeValue"
-    :max-height="200"
+    :max-height="200"
-    :noChildrenText="$t('cs.components.empty')"
+    :noChildrenText="$t('cs.components.empty')"
-    :noOptionsText="$t('cs.components.empty')"
+    :noOptionsText="$t('cs.components.empty')"
-    :class="className ? className : 'ops-setting-treeselect'"
+    :class="className ? className : 'ops-setting-treeselect'"
-    value-consists-of="LEAF_PRIORITY"
+    value-consists-of="LEAF_PRIORITY"
-    :limit="limit"
+    :limit="limit"
-    :limitText="(count) => `+ ${count}`"
+    :limitText="(count) => `+ ${count}`"
-    v-bind="$attrs"
+    v-bind="$attrs"
-    appendToBody
+    appendToBody
-    :zIndex="1050"
+    :zIndex="1050"
-    :flat="flat"
+    :flat="flat"
-  >
+  >
-  </treeselect>
+  </treeselect>
-</template>
+</template>
-
+
-<script>
+<script>
-import Treeselect from '@riophae/vue-treeselect'
+import _ from 'lodash'
-import { formatOption } from '@/utils/util'
+import Treeselect from '@riophae/vue-treeselect'
-export default {
+import { formatOption } from '@/utils/util'
-  name: 'EmployeeTreeSelect',
+
-  components: {
+export default {
-    Treeselect,
+  name: 'EmployeeTreeSelect',
-  },
+  components: {
-  model: {
+    Treeselect,
-    prop: 'value',
+  },
-    event: 'change',
+  model: {
-  },
+    prop: 'value',
-  props: {
+    event: 'change',
-    value: {
+  },
-      type: [String, Array, Number, null],
+  props: {
-      default: null,
+    value: {
-    },
+      type: [String, Array, Number, null],
-    multiple: {
+      default: null,
-      type: Boolean,
+    },
-      default: false,
+    multiple: {
-    },
+      type: Boolean,
-    className: {
+      default: false,
-      type: String,
+    },
-      default: 'ops-setting-treeselect',
+    className: {
-    },
+      type: String,
-    placeholder: {
+      default: 'ops-setting-treeselect',
-      type: String,
+    },
-      default: '',
+    placeholder: {
-    },
+      type: String,
-    idType: {
+      default: '',
-      type: Number,
+    },
-      default: 1,
+    idType: {
-    },
+      type: Number,
-    departmentKey: {
+      default: 1,
-      type: String,
+    },
-      default: 'department_id',
+    departmentKey: {
-    },
+      type: String,
-    employeeKey: {
+      default: 'department_id',
-      type: String,
+    },
-      default: 'employee_id',
+    employeeKey: {
-    },
+      type: String,
-    limit: {
+      default: 'employee_id',
-      type: Number,
+    },
-      default: 20,
+    limit: {
-    },
+      type: Number,
-    flat: {
+      default: 20,
-      type: Boolean,
+    },
-      default: false,
+    flat: {
-    },
+      type: Boolean,
-  },
+      default: false,
-  data() {
+    },
-    return {}
+    // eslint-disable-next-line vue/require-default-prop
-  },
+    otherOptions: {
-  inject: {
+      type: Array,
-    provide_allTreeDepAndEmp: {
+      defualt: () => [],
-      from: 'provide_allTreeDepAndEmp',
+    }
-    },
+  },
-    readOnly: {
+  data() {
-      from: 'readOnly',
+    return {}
-      default: false,
+  },
-    },
+  inject: {
-  },
+    provide_allTreeDepAndEmp: {
-  computed: {
+      from: 'provide_allTreeDepAndEmp',
-    treeValue: {
+    },
-      get() {
+    readOnly: {
-        return this.value
+      from: 'readOnly',
-      },
+      default: false,
-      set(val) {
+    },
-        this.$emit('change', val)
+  },
-        return val
+  computed: {
-      },
+    treeValue: {
-    },
+      get() {
-    allTreeDepAndEmp() {
+        return this.value
-      return this.provide_allTreeDepAndEmp()
+      },
-    },
+      set(val) {
-    employeeTreeSelectOption() {
+        this.$emit('change', val)
-      return formatOption(this.allTreeDepAndEmp, this.idType, false, this.departmentKey, this.employeeKey)
+        return val
-    },
+      },
-  },
+    },
-  methods: {},
+    allTreeDepAndEmp() {
-}
+      return this.provide_allTreeDepAndEmp()
-</script>
+    },
-
+    employeeTreeSelectOption() {
-<style scoped></style>
+      return formatOption(
+        [
+          ..._.cloneDeep(this.allTreeDepAndEmp),
+          ..._.cloneDeep(this.otherOptions)
+        ],
+        this.idType,
+        false,
+        this.departmentKey,
+        this.employeeKey
+      )
+    },
+  },
+  methods: {},
+}
+</script>
+
+<style scoped></style>