eztech-core-components 1.0.0

package/comps/CoreCascader.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-cascader
+    v-model="modelValue"
+    placeholder=""
+    :options="options"
+    filterable
+    :show-all-levels="false"
+    :disabled="disabled"
+    class="w-full"
+    clearable
+    @visible-change="handleVisibleChange"
+  >
+    <template slot-scope="{ node, data }">
+      <span v-if="data.label.includes(divider)">
+        <span v-if="data.label.split(divider)[0]" class="text-coreSecondaryText">{{ data.label.split(divider)[0] }} - </span>
+        <span v-if="data.label.split(divider)[1]">{{ data.label.split(divider)[1] }}</span>
+      </span>
+      <span v-else>
+        {{ data.label }}
+      </span>
+      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+    </template>
+  </el-cascader>
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import { get, last } from 'lodash'
+export default {
+  name: 'CoreCascader',
+  props: {
+    value: { type: [String, Object], default: null },
+    projectId: { type: [String, Number], default: '5' },
+    table_name: { type: String, default: 'ref_reg_types' },
+    ref_column: { type: String, default: 'name,parent_id' },
+    size: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    col_field: { type: String, default: null },
+    trigger_fields: { type: String, default: null }
+  },
+  data () {
+    return {
+      divider: ' | '
+    }
+  },
+  computed: {
+    ...mapGetters(['orgs']),
+    modelValue: {
+      get () {
+        const findPathByValue = (options, targetValue, path = []) => {
+          if (!targetValue) {
+            return []
+          }
+          for (const option of options) {
+            const currentPath = [...path, option.value]
+            if (option.value === targetValue) {
+              return currentPath
+            }
+            if (option.children) {
+              const childResult = findPathByValue(option.children, targetValue, currentPath)
+              if (childResult.length) {
+                return childResult
+              }
+            }
+          }
+          return []
+        }
+        const rr = findPathByValue(this.options, this.value?._id)
+        if (rr.length) {
+          return rr
+        } else {
+          return this.value
+        }
+      },
+      set (val) {
+        const id = last(val) || null
+        const getValue = (list, id) => {
+          if (!list || !list.length) { return null }
+          for (const item of list) {
+            if (item._id === id) { return item }
+            const found = getValue(item.list, id)
+            if (found) { return found }
+          }
+          return null
+        }
+        const value = getValue(this.orgs, id)
+        this.$emit('input', value)
+      }
+    },
+    options () {
+      const getList = (list) => {
+        const list1 = []
+        for (const c of list) {
+          const vals = []
+          if (c.short_name) {
+            vals.push(c.short_name)
+          }
+          if (c.name) {
+            vals.push(c.name)
+          }
+          const item = {
+            value: c._id,
+            label: vals.join(this.divider),
+            children: null
+          }
+          if (get(c, 'type_id.code') !== '999' && c.list?.length) {
+            const firstItem = JSON.parse(JSON.stringify(item))
+            delete firstItem.children
+            item.value = 'disabled_' + item.value
+            item.children = [JSON.parse(JSON.stringify(firstItem)), ...getList(c.list)]
+          } else if (c.list?.length) {
+            item.children = getList(c.list)
+          }
+          list1.push(item)
+        }
+        return list1
+      }
+      return getList(this.orgs)
+    }
+  },
+  methods: {
+    ...mapActions(['refresh_orgs']),
+    handleVisibleChange (val) {
+      if (val && !this.orgs?.length) {
+        this.refresh_orgs()
+      }
+    }
+  }
+}
+</script>

package/comps/CoreCascaderChildOrg.vue

@@ -0,0 +1,165 @@
+<template>
+  <el-cascader
+    v-model="modelValue"
+    placeholder=""
+    :options="options"
+    filterable
+    :show-all-levels="false"
+    class="w-full"
+    clearable
+  >
+    <template slot-scope="{ node, data }">
+      <span v-if="data.label.includes(divider)">
+        <span v-if="data.label.split(divider)[0]" class="text-coreSecondaryText">{{ data.label.split(divider)[0] }} - </span>
+        <span v-if="data.label.split(divider)[1]">{{ data.label.split(divider)[1] }}</span>
+      </span>
+      <span v-else>
+        {{ data.label }}
+      </span>
+      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+    </template>
+  </el-cascader>
+</template>
+<script>
+import { get, last } from 'lodash'
+export default {
+  name: 'CoreCascader',
+  props: {
+    value: { type: [String, Object], default: null },
+    projectId: { type: [String, Number], default: '5' },
+    table_name: { type: String, default: 'hrm_organizations' },
+    ref_column: { type: String, default: 'name,parent_id' },
+    size: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    col_field: { type: String, default: null },
+    trigger_fields: { type: String, default: null },
+    rootTemp: { type: Object, default: null },
+    parentTemp: { type: Object, default: null }
+  },
+  data () {
+    return {
+      divider: ' | ',
+      orgs: []
+    }
+  },
+  computed: {
+    organization_id () {
+      return this.rootTemp?.organization_id?._id
+    },
+    modelValue: {
+      get () {
+        const findPathByValue = (options, targetValue, path = []) => {
+          if (!targetValue) {
+            return []
+          }
+          for (const option of options) {
+            const currentPath = [...path, option.value]
+            if (option.value === targetValue) {
+              return currentPath
+            }
+            if (option.children) {
+              const childResult = findPathByValue(option.children, targetValue, currentPath)
+              if (childResult.length) {
+                return childResult
+              }
+            }
+          }
+          return []
+        }
+        const rr = findPathByValue(this.options, this.value?._id)
+        if (rr.length) {
+          return rr
+        } else {
+          return this.value
+        }
+      },
+      set (val) {
+        const id = last(val) || null
+        const getValue = (list, id) => {
+          if (!list || !list.length) { return null }
+          for (const item of list) {
+            if (item._id === id) { return item }
+            const found = getValue(item.list, id)
+            if (found) { return found }
+          }
+          return null
+        }
+        const value = getValue(this.orgs, id)
+        this.$emit('input', value)
+      }
+    },
+    options () {
+      const getList = (list) => {
+        const list1 = []
+        for (const c of list) {
+          const vals = []
+          if (c.short_name) {
+            vals.push(c.short_name)
+          }
+          if (c.name) {
+            vals.push(c.name)
+          }
+          const item = {
+            value: c._id,
+            label: vals.join(this.divider),
+            children: null
+          }
+          if (get(c, 'type_id.code') !== '999' && c.list?.length) {
+            const firstItem = JSON.parse(JSON.stringify(item))
+            delete firstItem.children
+            item.value = 'disabled_' + item.value
+            item.children = [JSON.parse(JSON.stringify(firstItem)), ...getList(c.list)]
+          } else if (c.list?.length) {
+            item.children = getList(c.list)
+          }
+          list1.push(item)
+        }
+        return list1
+      }
+      return getList(this.orgs)
+    }
+  },
+  watch: {
+    organization_id () {
+      this.modelValue = null
+      this.handleRefresh()
+    }
+  },
+  mounted () {
+    this.handleRefresh()
+  },
+  methods: {
+    async handleRefresh () {
+      try {
+        this.orgs = []
+        if (!this.organization_id) {
+          return
+        }
+        const getList = async (parent_id) => {
+          const { data: { list } } = await this.$axios.get('reference/5/hrm_organizations', {
+            process: false,
+            params: {
+              search: JSON.stringify({
+                parent_id: { val: parent_id, t: 'number', op: 'eq' },
+                category_id: { val: 2, t: 'number', op: 'eq' }
+              }),
+              fields: '_id,parent_id,name,short_name',
+              isHasChildren: false
+            }
+          })
+          for (const r of list) {
+            const childList = await getList(r._id)
+            if (childList.length) {
+              r.list = childList
+            }
+          }
+          return list
+        }
+        this.orgs = await getList(this.organization_id)
+      } catch (err) {
+        this.$showError(err)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreCascaderChildPosition.vue

@@ -0,0 +1,186 @@
+<template>
+  <el-cascader
+    v-model="modelValue"
+    placeholder=""
+    :options="options"
+    filterable
+    :show-all-levels="true"
+    class="w-full"
+    clearable
+  >
+    <template slot-scope="{ node, data }">
+      <span v-if="data.label.includes(divider)">
+        <span v-if="data.label.split(divider)[0]" class="text-coreSecondaryText">{{ data.label.split(divider)[0] }} - </span>
+        <span v-if="data.label.split(divider)[1]">{{ data.label.split(divider)[1] }}</span>
+      </span>
+      <span v-else>
+        {{ data.label }}
+      </span>
+      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+    </template>
+  </el-cascader>
+</template>
+<script>
+import { last } from 'lodash'
+export default {
+  name: 'CoreCascaderChildPosition',
+  props: {
+    value: { type: [String, Object], default: null },
+    projectId: { type: [String, Number], default: '5' },
+    table_name: { type: String, default: 'hrm_organizations' },
+    ref_column: { type: String, default: 'name,parent_id' },
+    size: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    col_field: { type: String, default: null },
+    trigger_fields: { type: String, default: null },
+    rootTemp: { type: Object, default: null },
+    parentTemp: { type: Object, default: null }
+  },
+  data () {
+    return {
+      divider: ' | ',
+      orgs: []
+    }
+  },
+  computed: {
+    organization_id () {
+      return this.rootTemp?.organization_id?._id
+    },
+    modelValue: {
+      get () {
+        const findPathByValue = (options, targetValue, path = []) => {
+          if (!targetValue) {
+            return []
+          }
+          for (const option of options) {
+            const currentPath = [...path, option.value]
+            if (option.value === targetValue) {
+              return currentPath
+            }
+            if (option.children) {
+              const childResult = findPathByValue(option.children, targetValue, currentPath)
+              if (childResult.length) {
+                return childResult
+              }
+            }
+          }
+          return []
+        }
+        const rr = findPathByValue(this.options, this.value?._id)
+        if (rr.length) {
+          return rr
+        } else {
+          return this.value
+        }
+      },
+      set (val) {
+        const id = last(val) || null
+        const getValue = (list, id) => {
+          if (!list || !list.length) { return null }
+          for (const item of list) {
+            if (item._id === id) { return item }
+            const found = getValue(item.list, id)
+            if (found) { return found }
+          }
+          return null
+        }
+        const value = getValue(this.orgs, id)
+        this.$emit('input', value)
+      }
+    },
+    options () {
+      const getList = (list) => {
+        const list1 = []
+        for (const c of list) {
+          const vals = []
+          if (c.short_name) {
+            vals.push(c.short_name)
+          }
+          if (c.name) {
+            vals.push(c.name)
+          }
+          const item = {
+            value: c._id,
+            label: vals.join(this.divider),
+            children: null
+          }
+          // if (get(c, 'type_id.code') !== '999' && c.list?.length) {
+          //   const firstItem = JSON.parse(JSON.stringify(item))
+          //   delete firstItem.children
+          //   item.value = 'disabled_' + item.value
+          //   item.children = [JSON.parse(JSON.stringify(firstItem)), ...getList(c.list)]
+          // } else if (c.list?.length) {
+          //   item.children = getList(c.list)
+          // }
+          if (c.list?.length) {
+            item.children = getList(c.list)
+          }
+          list1.push(item)
+        }
+        return list1
+      }
+      return getList(this.orgs)
+    }
+  },
+  watch: {
+    organization_id () {
+      this.modelValue = null
+      this.handleRefresh()
+    }
+  },
+  mounted () {
+    this.handleRefresh()
+  },
+  methods: {
+    async handleRefresh () {
+      try {
+        this.orgs = []
+        if (!this.organization_id) {
+          return
+        }
+        const getPositions = async (org_id) => {
+          const { data: { list } } = await this.$axios.get('reference/5/hrm_positions', {
+            process: false,
+            params: {
+              search: JSON.stringify({
+                organization_id: { val: org_id, t: 'number', op: 'eq' }
+              }),
+              fields: '_id,name',
+              isHasChildren: false
+            }
+          })
+          return list
+        }
+        const getList = async (parent_id) => {
+          const { data: { list } } = await this.$axios.get('reference/5/hrm_organizations', {
+            process: false,
+            params: {
+              search: JSON.stringify({
+                parent_id: { val: parent_id, t: 'number', op: 'eq' },
+                category_id: { val: 2, t: 'number', op: 'eq' }
+              }),
+              fields: '_id,parent_id,name,short_name',
+              isHasChildren: false
+            }
+          })
+          for (const r of list) {
+            const childList = await getList(r._id)
+            r.list = []
+            if (childList.length) {
+              r.list = childList
+            }
+            const positions = await getPositions(r._id)
+            r.list.push(...positions)
+          }
+          return list
+        }
+        const orgs = await getList(this.organization_id)
+        const positions = await getPositions(this.organization_id)
+        this.orgs = [...orgs, ...positions]
+      } catch (err) {
+        this.$showError(err)
+      }
+    }
+  }
+}
+</script>