eztech-core-components 1.0.0

package/comps/Custom/CrimeDescription.vue

@@ -0,0 +1,195 @@
+<template>
+  <el-popover
+    v-model="visible"
+    :width="popoverWidth"
+    trigger="manual"
+    placement="bottom-start"
+  >
+    <el-input
+      ref="refInput" v-bind="$attrs"
+      slot="reference" v-on="$listeners"
+      @keydown.native.enter="handleKeydownEnter"
+      @keydown.native.up.prevent="handlePrev"
+      @keydown.native.down.prevent="handleNext"
+      @focusout.native="handleFocusOut"
+    />
+    <div ref="container" class="max-h-64 overflow-auto divide-y">
+      <div
+        v-for="item of list" :key="item._id"
+        :class="['py-2 hover:bg-coreBgHover cursor-pointer break-normal px-1 leading-4', { 'bg-coreBgHover': selectedItem?._id === item._id }]"
+        @click.prevent="handleSelect(item)"
+        @mouseenter.prevent="handleMouseEnter(item)"
+      >
+        {{ item.crime_description }}
+      </div>
+      <div class="h-12 flex items-center">
+        <el-button v-if="loading" type="text" icon="el-icon-loading">
+          Түр хүлээнэ үү..
+        </el-button>
+        <div v-else-if="list?.length === 0" class="text-coreSecondaryText">
+          Хайлтын үр дүн олдсонгүй..
+        </div>
+        <el-button v-else-if="hasMore" type="text" icon="el-icon-arrow-down" @click="handleMore">
+          Цааш үзэх
+        </el-button>
+      </div>
+    </div>
+  </el-popover>
+</template>
+<script>
+export default {
+  name: 'CustomCrimeNum',
+  props: {
+    inheritAttrs: { type: Object, default: () => { return null } }
+  },
+  data () {
+    return {
+      timeout: 0,
+      list: null,
+      popoverWidth: 500,
+      offset: 0,
+      loading: false,
+      hasMore: false,
+      pageSize: 15,
+      isSelected: false,
+      selectedItem: null
+    }
+  },
+  computed: {
+    visible: {
+      get () {
+        return this.list !== null
+      },
+      set (val) {
+        if (!val) {
+          this.list = null
+          this.selectedItem = null
+          this.isSelected = false
+        }
+      }
+    }
+  },
+  watch: {
+    '$attrs.value' () {
+      if (this.isSelected) {
+        return
+      }
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(this.handleSearch, 300)
+    }
+  },
+  methods: {
+    async handleFocusOut () {
+      await this.$nextTick()
+      setTimeout(() => {
+        this.visible = false
+      }, 200)
+    },
+    handlePrev ($event) {
+      if (this.list?.length > 0) {
+        $event.preventDefault()
+        this.handleNavigate('prev')
+      }
+    },
+    handleNext ($event) {
+      if (this.list?.length > 0) {
+        $event.preventDefault()
+        this.handleNavigate('next')
+      }
+    },
+    handleNavigate (type) {
+      const index = this.list?.findIndex(c => c._id === this.selectedItem._id)
+      if (type === 'next') {
+        if (this.list.length - 1 > index) {
+          this.selectedItem = this.list[index + 1]
+          this.focusItem(index + 1)
+        } else if (this.hasMore) {
+          this.handleMore(true)
+        }
+      } else if (type === 'prev') {
+        if (index > 0) {
+          this.selectedItem = this.list[index - 1]
+          this.focusItem(index - 1)
+        }
+      }
+    },
+    focusItem (index) {
+      const container = this.$refs.container
+      const item = container.children[index]
+      if (item) {
+        item.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
+    },
+    handleKeydownEnter ($event) {
+      if (this.list?.length > 0) {
+        this.handleSelect(this.selectedItem)
+        $event.preventDefault()
+      }
+    },
+    handleMouseEnter (item) {
+      this.selectedItem = item
+    },
+    handleSelect (item) {
+      this.list = null
+      this.isSelected = true
+      this.$emit('input', item.crime_description)
+    },
+    async handleMore (isSelectFirstItem) {
+      try {
+        clearTimeout(this.timeout)
+        this.loading = true
+        this.offset = this.list.length
+        const data = await this.getList()
+        this.hasMore = data?.length >= this.pageSize
+        const list = [...this.list]
+        const isSelected = false
+        for (const r of data) {
+          if (!list.some(c => c._id === r._id)) {
+            if (!isSelected && isSelectFirstItem) {
+              this.isSelected = true
+              this.selectedItem = data[0]
+            }
+            list.push(r)
+          }
+        }
+        this.list = [...list]
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleSearch () {
+      try {
+        this.loading = true
+        this.offset = 0
+        this.list = await this.getList()
+        this.hasMore = this.list?.length >= this.pageSize
+        this.selectedItem = this.list?.length > 0 ? this.list[0] : null
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    async getList () {
+      if (!this.$attrs.value) {
+        return null
+      }
+      const { data } = await this.$axios.get('list/5/reg_resolutions', {
+        params: {
+          search: JSON.stringify({
+            crime_description: { val: this.$attrs.value, t: 'string', op: 'start' },
+            created_organization_id: { val: 'auth_index_organization_id', t: 'number', op: 'in' }
+          }),
+          sorts: JSON.stringify([{ prop: 'created_at', order: 'descending' }]),
+          fields: 'crime_description',
+          offset: this.offset,
+          pageSize: 15
+        }
+      })
+      return data
+    }
+  }
+}
+</script>

package/comps/Custom/CrimeNum.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <el-input
+      v-model="modelValue"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :size="size"
+      clearable
+    >
+      <el-button
+        slot="append"
+        icon="el-icon-search"
+        :loading="loading"
+        :disabled="disabled"
+        @click="$emit('form-search', { type: 'crime_num', val: modelValue })"
+      />
+    </el-input>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CustomCrimeNum',
+  props: {
+    value: { type: [Number, String, Boolean], default: null },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    placeholder: { type: String, default: null },
+    size: { type: String, default: null }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/comps/Custom/EmployeeSelect.vue

@@ -0,0 +1,243 @@
+<template>
+  <span v-if="type === 'table'">{{ itemName }} {{ itemPositionName }}</span>
+  <el-popover
+    v-else
+    :value="visible"
+    placement="bottom-start"
+    width="512"
+    popper-class="popper-notification"
+    trigger="focus"
+    :disabled="disabled"
+    @show="handleChange(true)"
+    @hide="handleChange(false)"
+  >
+    <div class="h-80">
+      <div class="flex flex-row h-full overflow-hidden">
+        <div class="w-64 border-r">
+          <core-select-tree-list
+            v-model="orgId"
+            :visible.sync="visible"
+            project-id="5"
+            table_name="hrm_organizations"
+            ref_column="name,parent_id"
+            :size="size"
+            :disabled="disabled"
+            @select="handleSelectOrg"
+          />
+        </div>
+        <div
+          v-loading="loading"
+          class="flex-1 flex flex-col gap-2 p-2 h-full overflow-auto relative"
+        >
+          <transition name="el-fade-in">
+            <div
+              v-if="!loading && list.length === 0"
+              class="left-0 top-0 h-full w-full py-4 text-center font-medium text-coreSecondaryText break-normal absolute"
+            >
+              <div v-if="!!orgId">
+                Албан хаагч<br>бүртгээгүй байна!.
+              </div>
+              <div v-else>
+                Бүтэц<br>сонгоно уу!.
+              </div>
+            </div>
+          </transition>
+          <!-- <transition-group name="el-fade-in"> -->
+          <div
+            v-for="item1 of list"
+            :key="item1._id"
+            :class="['hover:bg-coreBgHover cursor-pointer rounded px-2 py-1', {
+              'font-bold': value === item1._id
+            }]"
+            @click="() => handleSelect(item1)"
+          >
+            <div>
+              <span v-if="item1.employee_id.surname">{{ item1.employee_id.surname.slice(0, 1) }}.</span>
+              <span>{{ item1.employee_id.given_name }}</span>
+            </div>
+            <div class="text-sm text-coreSecondaryText leading-3 whitespace-normal break-normal">
+              {{ item1.position_id.name }}
+            </div>
+          </div>
+          <!-- </transition-group> -->
+        </div>
+      </div>
+    </div>
+    <el-input
+      slot="reference"
+      class="focus:text-coreSecondaryText"
+      placeholder="Сонгох.."
+      :size="size"
+      :value="itemName"
+      :disabled="disabled"
+      clearable
+      @clear="modelValue = null; visible = false;"
+    />
+  </el-popover>
+</template>
+<script>
+import { get } from 'lodash'
+import { getTriggerFields } from '../../utils/data-helper'
+export default {
+  name: 'CustomEmployeeSelect',
+  props: {
+    type: { type: String, default: 'input' },
+    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 },
+    trigger_fields: { type: String, default: '' }
+  },
+  data () {
+    return {
+      visible: false,
+      list: [],
+      loading: false,
+      orgId: null,
+      org: null,
+      item: null,
+      timeout: 0,
+      cancel: null
+    }
+  },
+  computed: {
+    itemName () {
+      if (!this.value) {
+        return ''
+      }
+      if (typeof this.value === 'object') {
+        let name = ''
+        if (this.value.surname) {
+          name += this.value.surname.slice(0, 1) + '.'
+        }
+        return name + (this.value.given_name || '')
+      }
+      if (!this.item) {
+        return ''
+      }
+      let name = ''
+      if (this.item.employee_id.surname) {
+        name += this.item.employee_id.surname.slice(0, 1) + '.'
+      }
+      return name + this.item.employee_id.given_name
+    },
+    itemPositionName () {
+      if (!this.item) {
+        return null
+      }
+      return ` - ${this.item.position_id.name}`
+    },
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  mounted () {
+    // this.getItem()
+  },
+  methods: {
+    async getItem () {
+      try {
+        if (!this.modelValue || this.item) {
+          return
+        }
+        const { data: item } = await this.$axios.get('one/5/hrm_users', {
+          process: false,
+          params: {
+            search: JSON.stringify({
+              employee_id: { val: this.value, t: 'number', op: 'eq' }
+            })
+          }
+        })
+        if (item) {
+          this.item = item
+        }
+      } catch (err) {
+        this.$showError(err)
+      }
+    },
+    handleSelect (item) {
+      this.modelValue = item.employee_id
+      this.item = item
+      this.visible = false
+    },
+    handleSelectOrg (item) {
+      if (item._id !== this.orgId) {
+        this.orgId = item._id
+        this.org = item
+        this.handleSearch()
+      }
+    },
+    handleChange (val) {
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.visible = val
+      }, 100)
+    },
+    async handleSearch () {
+      let isCancel = false
+      try {
+        this.loading = true
+        this.list = []
+        await this.getList()
+      } catch (err) {
+        isCancel = this.$axios.isCancel(err)
+        if (!isCancel) {
+          this.$showError(err)
+        }
+      } finally {
+        if (!isCancel) {
+          this.loading = false
+        }
+      }
+    },
+    async getList () {
+      const that = this
+      const CancelToken = this.$axios.CancelToken
+      if (that.cancel) {
+        that.cancel()
+      }
+      const triggerSearch = {}
+      const trigger_fields = getTriggerFields(this.trigger_fields)
+      for (const { localKey, localVal, type, operation } of trigger_fields) {
+        if (localVal.startsWith('#')) {
+          const tempKey = localVal.substring(1)
+          const newValue = get(this.clonedTemp, tempKey)
+          if (!newValue) {
+            return
+          } else if (typeof newValue === 'object' && Array.isArray(newValue)) {
+            const vals = newValue.map(c => c._id)
+            triggerSearch[localKey] = { val: vals, t: type, op: operation }
+          } else {
+            const val = typeof newValue === 'object' ? newValue[this.pk_field_name] : newValue
+            triggerSearch[localKey] = { val, t: type, op: operation }
+          }
+        } else {
+          triggerSearch[localKey] = { val: localVal, t: type, op: operation }
+        }
+      }
+      const { data: list } = await this.$axios.get('list/5/hrm_users', {
+        process: false,
+        params: {
+          search: JSON.stringify({
+            organization_id: { val: this.orgId, t: 'number', op: 'eq' },
+            end_date: { val: 'null', t: 'date', op: 'eq' },
+            ...triggerSearch
+          })
+        },
+        cancelToken: new CancelToken(function executor (c) {
+          that.cancel = c
+        })
+      })
+      this.list = list
+      this.cancel = null
+    }
+  }
+}
+</script>

package/comps/Custom/EmployeeText.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="bg-white px-2 py-1 rounded text-sm text-corePrimaryText"
+  >
+    <slot />
+  </div>
+</template>

package/comps/Custom/EmployeeWorkFamilies.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    v-if="list && list.length > 0"
+    class="bg-white px-5 py-2 rounded text-sm"
+  >
+    <div
+      v-for="(item, index) in list"
+      :key="item._id + '_' + index"
+      class=""
+    >
+      <nuxt-link
+        class="underline text-corePrimaryText hover:text-coreBlue"
+        :to="{
+          name: 'systemCode-tableDetail-id',
+          params: {
+            tableDetail: 'service_employees',
+            id: item._id
+          },
+          query: {
+            tid: item.tid
+          }
+        }"
+      >
+        ({{ item.family_who_name }}) {{ item.surname }} {{ item.given_name.toUpperCase() }} - {{ item.organization_name }}, {{ item.position_name }}
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CustomWorkFamilies',
+  props: {
+    list: { type: Array, default: () => { return [] } }
+  }
+}
+</script>

package/comps/Custom/NationalLangSkills.vue

@@ -0,0 +1,137 @@
+<template>
+  <div v-loading="loading" class="pb-4 text-sm">
+    <div>(ᠮᠣᠩᠭ᠋ᠤᠯ ᠪᠢᠴᠢᠭ᠌ ᠦᠨ ᠬᠢᠴᠢᠶᠡᠯ ᠳᠣ ᠬᠠᠮᠤᠷᠤᠭᠳᠠᠵᠤ ᠭᠡᠷᠡᠴᠢᠯᠡᠭᠡ᠂ ᠣᠷ ᠠ ᠴᠢᠳᠠᠪᠤᠷᠢ ᠶᠢᠨ ᠦᠨᠡᠯᠡᠭᠡ ᠠᠪᠤᠭᠰᠠᠨ ᠪᠣᠯ ᠲᠠᠶᠢᠯᠪᠣᠷᠢ ᠬᠡᠰᠡᠭ ᠲᠣ ᠪᠢᠴᠢᠨ᠎ᠡ)</div>
+    <div class="w-full pb-4 gap-2 py-2">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b">
+            <th>ᠦᠨᠳᠦᠰᠦᠨ ᠦ ᠪᠢᠴᠢᠭ᠌ ᠣᠨ ᠮᠡᠳᠡᠯᠭᠡ ᠶᠢᠨ ᠲᠥᠪᠰᠢᠨ</th>
+            <th v-for="item in skillRates" :key="item._id">
+              {{ item.name }}
+            </th>
+            <th class="py-2">
+              ᠲᠠᠶᠢᠯᠪᠤᠷᠢ
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="type in skillTypes" :key="type._id" class="border-b">
+            <td>{{ type.name }}</td>
+            <td v-for="rate in skillRates" :key="rate._id" class="text-center">
+              <el-checkbox :value="getValue(type, rate)" @change="handleChange(type, rate)" />
+            </td>
+            <td class="py-2">
+              <el-input
+                size="small"
+                :value="getDescription(type)"
+                clearable
+                @input="($event) => handleChangeDescription(type, $event)"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div>(ᠮᠣᠩᠭ᠋ᠤᠯ ᠪᠢᠴᠢᠭ᠌ ᠦᠨ ᠬᠢᠴᠢᠶᠡᠯ ᠳᠣ ᠬᠠᠮᠤᠷᠤᠭᠳᠠᠵᠤ ᠭᠡᠷᠡᠴᠢᠯᠡᠭᠡ᠂ ᠣᠷ ᠠ ᠴᠢᠳᠠᠪᠤᠷᠢ ᠶᠢᠨ ᠦᠨᠡᠯᠡᠭᠡ ᠠᠪᠤᠭᠰᠠᠨ ᠪᠣᠯ ᠲᠠᠶᠢᠯᠪᠣᠷᠢ ᠬᠡᠰᠡᠭ ᠲᠣ ᠪᠢᠴᠢᠨ᠎ᠡ)</div>
+  </div>
+</template>
+<script>
+export default {
+  props: { temp: { type: Object, default: () => { return null } } },
+  data () {
+    return {
+      list: [],
+      skillTypes: [],
+      skillRates: [],
+      loading: false,
+      loadingTypes: [],
+      timeout: {}
+    }
+  },
+  watch: {
+    'temp._id' () {
+      this.getList()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    getDescription (type) {
+      const item = this.list.find(c => c.skill_id?._id === type?._id)
+      return item?.description || ''
+    },
+    handleChangeDescription (type, $event) {
+      try {
+        this.loadingTypes.push(type?._id)
+        let changedItem = this.list.find(c => c.skill_id?._id === type?._id)
+        if (changedItem) {
+          changedItem.description = $event
+        } else {
+          changedItem = { employee_id: this.temp._id, skill_id: type, description: $event }
+          this.list.push({ ...changedItem })
+        }
+        if (this.timeout[type?._id]) {
+          clearTimeout(this.timeout[type?._id])
+        }
+        this.timeout[type?._id] = setTimeout(() => this.$axios.post('5/hrm_employee_national_lang_skills', { ...changedItem }).catch(this.$showError), 2000)
+      } catch (err) {
+        this.$showError(err)
+      }
+    },
+    getValue (type, rate) {
+      return this.list.some(c => c.skill_id?._id === type?._id && c.rate_id?._id === rate?._id)
+    },
+    async handleChange (type, rate) {
+      try {
+        if (this.loadingTypes.includes(type?._id)) {
+          return
+        }
+        this.loadingTypes.push(type?._id)
+        let changedItem = this.list.find(c => c.skill_id?._id === type?._id)
+        if (changedItem) {
+          changedItem.rate_id = rate
+        } else {
+          changedItem = { employee_id: this.temp._id, skill_id: type, rate_id: rate }
+          this.list.push({ ...changedItem })
+        }
+        await this.$axios.post('5/hrm_employee_national_lang_skills', { ...changedItem })
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        const index = this.loadingTypes.indexOf(type?._id)
+        if (index > -1) {
+          this.loadingTypes.splice(index, 1)
+        }
+      }
+    },
+    async getList () {
+      try {
+        this.skillTypes = []
+        this.skillRates = []
+        this.list = []
+        if (!this.temp || !this.temp._id) {
+          return
+        }
+        this.loading = true
+        const { data } = await this.$axios.get('list/5/hrm_employee_national_lang_skills', {
+          params: {
+            search: JSON.stringify({
+              employee_id: { op: 'eq', val: this.temp._id, t: 'number' }
+            })
+          }
+        })
+        const { data: skillTypes } = await this.$axios.get('list/5/ref_hrm_national_lang_skills')
+        const { data: skillRates } = await this.$axios.get('list/5/ref_hrm_national_lang_rates')
+        this.skillTypes = skillTypes
+        this.skillRates = skillRates
+        this.list = data
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>