eztech-core-components 1.0.0

package/comps/CoreSelectOrgEmp.vue

@@ -0,0 +1,319 @@
+<template>
+  <div>
+    <el-select
+      ref="refComponent"
+      v-model="modelValue"
+      class="w-full"
+      clearable
+      filterable
+      remote
+      :loading="loading"
+      :disabled="disabled"
+      :remote-method="handleDebounce"
+      :multiple="isMultiple"
+      :size="size"
+      :value-key="'_id'"
+      :placeholder="placeholder"
+      @clear="handleClear"
+      @visible-change="handleVisibleChange"
+      @keydown.native.enter="$emit('keydown-enter')"
+      @keydown="$emit('keydown', $event)"
+    >
+      <div class="text-center">
+        <el-button type="text" :loading="loadingVisible" @click="handleVisible()">
+          Шинээр нэмэх
+        </el-button>
+      </div>
+      <el-option
+        v-for="item of dataList"
+        :key="item._id"
+        :label="table_name === 'reg_org_emps' ? `${ (item.degree_name || item.position_name || '') } ${ item.name || '' } ${ item.phone_num || '' }` : `${item.full_name} ${ item.expert_num || ''}`"
+        :value="item"
+        class="h-auto max-w-[500px] h-auto whitespace-normal break-normal"
+      >
+        <div class="flex">
+          <div v-if="table_name === 'reg_org_emps'" class="leading-3 flex-1">
+            <div class="flex flex-row justify-between leading-3">
+              <span class="!text-normal">{{ item.degree_name || item.position_name }} <span class="font-bold text-xs">{{ item.name }}</span></span>
+            </div>
+            <div class="text-xs">
+              <span class="text-coreSecondaryText">{{ item.resolution_org_id?.short_name }} </span>
+              <span>{{ item.resolution_org_id?.name }} <span class="font-bold">{{ item.phone_num || '' }}</span></span>
+            </div>
+          </div>
+          <div v-else class="flex-1">
+            <div>{{ item.full_name }}</div>
+            <div class="text-coreSecondaryText">
+              <div>{{ item.org_name }} </div>
+              <span>{{ item.pos_name }} {{ item.expert_num }} {{ item.phone_num }}</span>
+            </div>
+          </div>
+          <button class="text-xs text-corePrimaryText hover:bg-white rounded px-2 p-1" @click.stop.prevent="handleVisible(item._id)">
+            <i class="el-icon-edit" />
+          </button>
+        </div>
+      </el-option>
+      <el-option :value="null" class="text-center">
+        <span class="text-coreSecondaryText text-center text-xs">Арилгах</span>
+      </el-option>
+    </el-select>
+    <core-form-dialog
+      v-if="visible"
+      :temp="temp"
+      :saving="saving"
+      :restoring-password="restoringPassword"
+      :pk_field_name="project.pk_field_name"
+      :has-password="hasPassword"
+      :default-size="defaultSize"
+      :size-button="defaultSize"
+      :width="'500px'"
+      :level="level"
+      :append-to-body="true"
+      @close="handleClose"
+      @save="handleSave"
+      @restore-password="handleRestorePassword"
+    >
+      <core-form
+        ref="coreForm"
+        :temp-id="id"
+        :temp="temp"
+        :columns="columns"
+        :rules="rules"
+        :table="table"
+        :loading-form="loadingForm"
+        :pk_field_name="project.pk_field_name"
+        :project-id="project._id"
+        :has-password="hasPassword"
+        :default-size="defaultSize"
+        :searching="formSearching"
+        width="100%"
+        no-padding
+        :config_group_fields="config_group_fields"
+        :config_form_menus="config_form_menus"
+        :ref-columns="refColumns"
+        :hide-log="true"
+        @form-search="handleFormSearch"
+        @temp-change="handleTempChange"
+      />
+    </core-form-dialog>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { get } from 'lodash'
+import { getFormBoolean } from '../utils/data-helper'
+import { tableData, tableMethods, tableComputed, tableWatch, getAsyncData } from '@/../core-components/utils/table-helper'
+export default {
+  name: 'CoreSelectOrgEmp',
+  props: {
+    parentTemp: { type: Object, default: () => { return null } },
+    value: { type: [String, Array, Number, Object], default: null },
+    table_name: { type: String, default: null },
+    ref_column: { type: String, default: null },
+    projectId: { type: [String, Number], default: null },
+    col_multiple: { type: [Boolean, Number, String], default: false },
+    trigger_fields: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: null },
+    isSearch: { type: Boolean, default: false },
+    placeholder: { type: String, default: 'Сонгох' }
+  },
+  data () {
+    return {
+      ...tableData,
+      visible: false,
+      dataList: [],
+      loading: false,
+      timeout: 0,
+      timeoutDebounce: 0,
+      currentPage: 1,
+      id: null,
+      configProjectId: null,
+      project: null,
+      table: null,
+      formWidth: null,
+      columns: null,
+      configTableName: null,
+      configColFields: null,
+      hasPassword: null,
+      refColumns: null,
+      subColumn: null,
+      parentRow: null,
+      readOnly: null,
+      config_group_fields: null,
+      config_form_menus: null,
+      loadingVisible: false
+    }
+  },
+  computed: {
+    ...tableComputed,
+    ...mapGetters('user', ['user']),
+    defaultSize () {
+      return 'mini'
+    },
+    isMultiple () {
+      return getFormBoolean(this.col_multiple)
+    },
+    tableName () {
+      return this.table_name
+    },
+    clonedTemp () {
+      return Object.assign({ ...this.parentTemp })
+    },
+    modelValue: {
+      get () {
+        if (this.isMultiple) {
+          if (!this.value) {
+            return []
+          }
+          if (typeof this.value === 'object' && Array.isArray(this.value)) {
+            return this.value
+          }
+          return this.value.split(',')
+        } else {
+          return this.value
+        }
+      },
+      set (val) {
+        if (!val) {
+          this.$emit('input', val)
+        } else if (this.isMultiple) {
+          this.$emit('input', val)
+        } else {
+          this.$emit('input', val)
+        }
+      }
+    }
+  },
+  watch: {
+    ...tableWatch,
+    'parentTemp.resolution_org_id._id' (val) {
+      const orgId = this.value?.resolution_org_id?._id || null
+      const valId = val || null
+      if (valId !== orgId) {
+        this.modelValue = null
+      }
+    },
+    value: {
+      handler () {
+        this.handleDefault()
+      },
+      deep: true
+    }
+  },
+  created () {
+    this.handleDefault()
+  },
+  methods: {
+    ...tableMethods,
+    get,
+    focus () {
+      this.$refs.refComponent.focus()
+    },
+    async handleVisible (id) {
+      await this.handleGetConfig(id)
+    },
+    handleDefault () {
+      let vals = []
+      if (this.isMultiple) {
+        vals = this.value ? [...this.value] : []
+      } else if (typeof this.value === 'object') {
+        vals = this.value && this.value?._id ? [this.value] : []
+      }
+      for (const val of vals) {
+        if (!this.dataList.some(c => c?._id === val?._id)) {
+          this.dataList.unshift(val)
+        }
+      }
+    },
+    handleVisibleChange (val) {
+      if (val) {
+        this.getDataList()
+      }
+    },
+    handleDebounce (query) {
+      clearTimeout(this.timeoutDebounce)
+      this.loading = true
+      this.timeoutDebounce = setTimeout(() => this.getDataList(query), 500)
+    },
+    async getDataList (query) {
+      try {
+        this.loading = true
+        const search = Object.assign({})
+        if (!query && this.parentTemp?.resolution_org_id?._id) {
+          search.resolution_org_id = { val: this.parentTemp?.resolution_org_id?._id, t: 'number', op: 'eq' }
+        }
+        const fields = this.ref_column.split(',')
+        if (this.table_name === 'reg_org_emps') {
+          fields.push('resolution_org_id.name', 'resolution_org_id.short_name')
+        }
+        this.dataList = []
+        this.handleDefault()
+        const { data } = await this.$axios.get(`reference/${this.projectId}/${this.table_name}`, {
+          params: {
+            searchText: query,
+            search: JSON.stringify(search),
+            fields: fields.join(','),
+            locale_id: this.parentTemp?.locale_id
+          }
+        })
+        // const dataList = this.value ? (this.isMultiple ? [...this.value] : (this.value?._id ? [this.value] : [])) : []
+        for (const r of data.list) {
+          const index = this.dataList.findIndex(c => c?._id === r?._id)
+          if (index === -1) {
+            this.dataList.push(r)
+          }
+          // if (index > -1) {
+          //   dataList.splice(index, 1)
+          // }
+        }
+        // this.dataList = [...dataList, ...data.list]
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleClear () {
+      this.getDataList()
+    },
+    handleSaved (data) {
+      this.modelValue = data
+      this.temp = null
+      this.id = null
+    },
+    async handleGetConfig (id) {
+      try {
+        if (this.loadingVisible) {
+          return
+        }
+        this.loadingVisible = true
+        this.pageSize = 10
+        this.list = []
+        this.count = 0
+        const config = await getAsyncData({
+          tableName: this.tableName,
+          projectId: this.projectId,
+          $axios: this.$axios,
+          selectable: true,
+          skipFormReadonly: true
+        })
+        for (const configKey in config) {
+          this[configKey] = config[configKey]
+        }
+        this.$nextTick(() => {
+          this.resetDefaultTemp()
+          this.defaultTemp.resolution_org_id = this.parentTemp.resolution_org_id?._id ? this.parentTemp.resolution_org_id : null
+          this.id = id || 'create'
+          this.resetTemp(this.id)
+        })
+        this.visible = true
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loadingVisible = false
+      }
+    }
+  }
+}
+</script>

package/comps/CoreSelectTable.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <el-input size="small" readonly :value="displayText" :disabled="disabled">
+      <el-button slot="append" icon="el-icon-search" :loading="loadingVisible" :disabled="disabled" @click="handleVisible" />
+    </el-input>
+    <el-dialog :visible.sync="visible" title="Сонгох" :append-to-body="true" width="1000px">
+      <div class="px-4 pt-4 pb-2 rounded bg-background w-full h-[500px]">
+        <core-table
+          v-if="visible"
+          :project-id="projectId"
+          :table_id="table._id"
+          :list="list"
+          :count="count"
+          :columns="columns"
+          :loading="loading"
+          :sorts="sorts"
+          :current-page="currentPage"
+          :list-page="listPage"
+          :search="search"
+          :pk_field_name="project.pk_field_name"
+          :current-row-id="id"
+          :init-current-row="currentRow"
+          :loading-excel="loadingExcel"
+          :default-size="defaultSize"
+          :size-button="defaultSize"
+          :fill_field="table.fill_field"
+          :level="level"
+          :api_id="api_id"
+          :api_title="api_title"
+          :has-handbook="hasHandbook"
+          :selectable="true"
+          :all-selectable="allSelectable"
+          is-detail
+          plain-button
+          @load="handleRefreshList"
+          @excel="handleExcel"
+          @create="handleCreate"
+          @update="handleUpdate"
+          @search-input="handleSearchInput"
+          @search="handleSearch"
+          @refresh="handleRefresh"
+          @sort-change="handleSortChange"
+          @size-change="handleChangeSize"
+          @current-change="handleCurrentChange"
+          @current-row-change="handleCurrentRowChange"
+          @delete="handleDelete"
+        >
+          <div slot="action-buttons">
+            <el-button type="success" size="mini" plain icon="el-icon-check" @click="handleSelect">
+              Сонгох
+            </el-button>
+            <el-button size="mini" icon="el-icon-close" @click="visible=false">
+              Буцах
+            </el-button>
+          </div>
+        </core-table>
+      </div>
+    </el-dialog>
+    <core-form-dialog
+      v-if="visible"
+      :temp="temp"
+      :saving="saving"
+      :restoring-password="restoringPassword"
+      :pk_field_name="project.pk_field_name"
+      :has-password="hasPassword"
+      :default-size="defaultSize"
+      :size-button="defaultSize"
+      :width="'500px'"
+      :level="level"
+      :append-to-body="true"
+      @close="handleClose"
+      @save="handleSave"
+      @restore-password="handleRestorePassword"
+    >
+      <core-form
+        ref="coreForm"
+        :temp-id="id"
+        :temp="temp"
+        :columns="columns"
+        :rules="rules"
+        :table="table"
+        :loading-form="loadingForm"
+        :pk_field_name="project.pk_field_name"
+        :project-id="project._id"
+        :has-password="hasPassword"
+        :default-size="defaultSize"
+        :searching="formSearching"
+        width="100%"
+        no-padding
+        :config_group_fields="config_group_fields"
+        :config_form_menus="config_form_menus"
+        :ref-columns="refColumns"
+        :hide-log="true"
+        @form-search="handleFormSearch"
+        @temp-change="handleTempChange"
+      />
+    </core-form-dialog>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { get, isEqual } from 'lodash'
+import { getTriggerFields } from '../utils/data-helper'
+import { tableData, tableMethods, tableComputed, tableWatch, getAsyncData } from '@/../core-components/utils/table-helper'
+export default {
+  name: 'CoreSelectTable',
+  props: {
+    parentTemp: {
+      type: Object,
+      default: () => { return null }
+    },
+    value: {
+      type: Object,
+      default: () => { return null }
+    },
+    projectId: {
+      type: [String, Number],
+      default: '5'
+    },
+    table_name: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    trigger_fields: {
+      type: String,
+      default: ''
+    },
+    disabled: { type: Boolean, default: false },
+    allSelectable: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      ...tableData,
+      visible: false,
+      currentPage: 1,
+      id: null,
+      configProjectId: null,
+      project: null,
+      table: null,
+      formWidth: null,
+      columns: null,
+      configTableName: null,
+      configColFields: null,
+      hasPassword: null,
+      refColumns: null,
+      subColumn: null,
+      parentRow: null,
+      readOnly: null,
+      config_group_fields: null,
+      config_form_menus: null,
+      loadingVisible: false
+    }
+  },
+  computed: {
+    ...tableComputed,
+    ...mapGetters('user', ['user']),
+    defaultSize () {
+      return 'mini'
+    },
+    tableName () {
+      return this.table_name
+    },
+    clonedTemp () {
+      return { ...this.parentTemp }
+    },
+    displayText () {
+      if (!this.value || !this.value._id) {
+        return ''
+      }
+      const vals = []
+      if (this.value.degree_name) {
+        vals.push(this.value.degree_name)
+      } else if (this.value.position_name) {
+        vals.push(this.value.position_name)
+      }
+      vals.push(this.value.name)
+      if (this.value.phone_num) {
+        vals.push(this.value.phone_num)
+      }
+      return vals.join(' ')
+    }
+  },
+  watch: {
+    ...tableWatch,
+    clonedTemp: {
+      handler: function (newVal, oldVal) {
+        const trigger_fields = getTriggerFields(this.trigger_fields)
+        for (const { localVal } of trigger_fields) {
+          if (localVal.includes('#')) {
+            const tempKey = localVal.substring(1)
+            const newValue = get(newVal, tempKey)
+            const oldValue = get(oldVal, tempKey)
+            if (!isEqual(newValue, oldValue)) {
+              this.$emit('input', null)
+            }
+          }
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    ...tableMethods,
+    handleSelect () {
+      if (!this.currentRow) {
+        return this.$message({ type: 'warning', message: 'Мөр сонгоно уу.' })
+      }
+      this.$emit('input', this.currentRow)
+      this.visible = false
+    },
+    async handleVisible () {
+      await this.handleGetConfig()
+    },
+    handleDefaultSearch () {
+      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 }
+        }
+      }
+      this.search = { ...this.search, ...triggerSearch }
+    },
+    beforeGetList () {
+      this.handleDefaultSearch()
+    },
+    async handleGetConfig () {
+      try {
+        if (this.loadingVisible) {
+          return
+        }
+        this.loadingVisible = true
+        this.pageSize = 10
+        this.list = []
+        this.count = 0
+        const config = await getAsyncData({
+          tableName: this.tableName,
+          projectId: this.projectId,
+          $axios: this.$axios,
+          selectable: true,
+          skipFormReadonly: true
+        })
+        for (const configKey in config) {
+          this[configKey] = config[configKey]
+        }
+        this.currentRow = this.value
+        this.$nextTick(() => {
+          this.resetDefaultTemp()
+          this.defaultTemp.resolution_org_id = this.parentTemp.resolution_org_id
+          this.resetSearch()
+        })
+        this.visible = true
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loadingVisible = false
+      }
+    }
+  }
+}
+</script>