eztech-core-components 1.0.0

package/comps/CoreTableSearch.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="custom-el-table-search">
+    <el-select
+      v-if="['boolean', 'booleannull'].includes(colType)"
+      v-model="value"
+      placeholder="Бүгд"
+      size="default"
+      @change="handleSearch"
+    >
+      <el-option :value="null" label="Бүгд" />
+      <el-option :value="true" :label="textYes" />
+      <el-option :value="false" :label="textNo" />
+    </el-select>
+    <el-date-picker
+      v-else-if="['custom_duration'].includes(col.col_field)"
+      v-model="value"
+      class="core-search-picker"
+      type="daterange"
+      range-separator="-"
+      start-placeholder="Эхлэх"
+      end-placeholder="Дуусах"
+      size="default"
+      @change="handleSearch"
+    />
+    <el-date-picker
+      v-else-if="['date', 'datetime'].includes(colType) && col.searchOp === 'between'"
+      v-model="value"
+      class="core-search-picker"
+      type="daterange"
+      range-separator="-"
+      start-placeholder="Эхлэх"
+      end-placeholder="Дуусах"
+      size="default"
+      @change="handleSearch"
+    />
+    <div
+      v-else-if="['number', 'decimal'].includes(colType) && col.searchOp === 'between'"
+      class="el-date-editor el-range-editor el-input__inner core-search-picker el-date-editor--daterange"
+    >
+      <input v-model="val0" class="el-range-input" placeholder="Эхлэх" @keydown.enter="handleSearch">
+      <input v-model="val1" class="el-range-input" placeholder="Дуусах" @keydown.enter="handleSearch">
+      <i :class="['el-input__icon el-range__close-icon', { 'el-icon-circle-close': val0 || val1 }]" @click="handleClear" />
+    </div>
+    <div
+      v-else-if="['manyToOne'].includes(colType) && col.ref_table !== 'hrm_employees'"
+    >
+      <!-- <custom-employee-select
+        v-if="col.ref_table === 'hrm_employees'"
+        v-model="value"
+        :project-id="projectId"
+        :table_name="col.ref_table"
+        :ref_column="col.ref_column"
+        @input="handleSearch"
+      /> -->
+      <custom-user-select
+        v-if="col.ref_table === 'hrm_users'"
+        v-model="value"
+        :project-id="projectId"
+        :table_name="col.ref_table"
+        :ref_column="col.ref_column"
+        size="default"
+        @input="handleSearch"
+      />
+      <core-select-group
+        v-else-if="['ref_reg_types'].some(c => col.ref_table.includes(c))"
+        v-model="value"
+        :project-id="projectId"
+        :table_name="col.ref_table"
+        :ref_column="col.ref_column"
+        :parent-temp="parentTemp"
+        size="default"
+        @input="handleSearch"
+      />
+      <core-select-tree
+        v-else-if="['organization_id', 'parent_id'].some(c => col.col_field.includes(c))"
+        v-model="value"
+        :project-id="projectId"
+        :table_name="col.ref_table"
+        :ref_column="col.ref_column"
+        :parent-temp="parentTemp"
+        size="default"
+        @input="handleSearch"
+      />
+      <core-select
+        v-else
+        v-model="value"
+        :project-id="projectId"
+        :table_name="col.ref_table"
+        :ref_column="col.ref_column"
+        :parent-temp="parentTemp"
+        :trigger_fields="triggerFields"
+        :is-search="true"
+        size="default"
+        @input="handleSearch"
+      />
+    </div>
+    <div v-else class="flex">
+      <div v-if="isNullable" class="border-t !border-t-coreLighterBorder flex items-center bg-coreBgInput">
+        <el-dropdown placement="bottom" :tabindex="-1" @command="handleCommand">
+          <div class="el-dropdown-link py-2 pr-1">
+            <i class="el-icon-arrow-down el-icon--right" />
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="null">
+              Хоосон
+            </el-dropdown-item>
+            <el-dropdown-item command="notnull">
+              Утгатай
+            </el-dropdown-item>
+            <el-dropdown-item command="clear">
+              <span class="text-gray-400">Арилгах</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <el-input
+        v-model="value"
+        clearable
+        size="default"
+        @keydown.native.enter="handleSearch"
+        @clear="handleSearch"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { get } from 'lodash'
+import { getFormBoolean } from '../utils/data-helper'
+export default {
+  props: {
+    projectId: { type: [String, Number], default: null },
+    search: { type: Object, default: () => { return {} } },
+    col: { type: Object, default: () => { return null } },
+    table_name: { type: String, default: null }
+  },
+  data () {
+    return {
+      timeout: 0
+    }
+  },
+  computed: {
+    triggerFields () {
+      if (this.table_name?.includes('doc_controls') && this.col.col_field === 'status_id') {
+        const aa = ['PROCESS', 'PROCESS_NATIONAL', 'REVIEW', 'AGREE', 'DOC_NUMBER', 'CONFIRM', 'SENT']
+        return `code:${aa.join(';')}:string:in`
+      } else if (this.table_name?.includes('doc_requests') && this.col.col_field === 'status_id') {
+        const aa = ['CREATED', 'RECEIVED', 'DECISION', 'RESEARCH', 'REJECT', 'TRANSFER', 'BACK']
+        return `code:${aa.join(';')}:string:in`
+      }
+      return this.col.trigger_fields
+    },
+    parentTemp () {
+      const temp = {}
+      for (const searchKey in this.search) {
+        temp[searchKey] = this.search[searchKey].val
+      }
+      return temp
+    },
+    textYes () {
+      // if (this.col.col_field === 'is_send_doc') {
+      //   return 'Илгээх'
+      // }
+      return 'Тийм'
+    },
+    textNo () {
+      // if (this.col.col_field === 'is_send_doc') {
+      //   return 'Тогтоол'
+      // }
+      return 'Үгүй'
+    },
+    isGroup () {
+      return this.colKey === 'is_group'
+    },
+    colKey () {
+      return this.col.search_key || this.col.child_key || this.col.col_key
+    },
+    colType () {
+      return this.col.search_type || this.col.child_type || this.col.col_type
+    },
+    colSearchOp () {
+      return this.col.search_op || this.col.searchOp
+    },
+    isNullable () {
+      return getFormBoolean(this.col.col_nullable)
+    },
+    isMultiple () {
+      return this.col.col_multiple
+    },
+    value: {
+      get () {
+        const val = this.search[this.colKey]?.val
+        if (val === 'null') {
+          return 'Хоосон'
+        } else if (val === 'notnull') {
+          return 'Утгатай'
+        }
+        return val
+      },
+      set (val) {
+        this.$emit('search-input', { col_key: this.colKey, value: val, op: this.colSearchOp, t: this.colType })
+        this.handleDebounce()
+      }
+    },
+    val0: {
+      get () {
+        const val = get(this.value, '[0]') || null
+        if (['number', 'decimal'].includes(this.colType) && val && !this.col?.col_field?.includes('year')) {
+          return val.$format()
+        }
+        return val
+      },
+      set (val) {
+        if (['number', 'decimal'].includes(this.colType)) {
+          this.value = [val.$number(), this.value[1]]
+          return
+        }
+        this.value = [val, this.value[1]]
+      }
+    },
+    val1: {
+      get () {
+        const val = get(this.value, '[1]') || null
+        if (['number', 'decimal'].includes(this.colType) && val && !this.col?.col_field?.includes('year')) {
+          return val.$format()
+        }
+        return val
+      },
+      set (val) {
+        if (['number', 'decimal'].includes(this.colType)) {
+          this.value = [this.value[0], val.$number()]
+          return
+        }
+        this.value = [this.value[0], val]
+      }
+    }
+  },
+  methods: {
+    handleDebounce () {
+      if (['date', 'datetime', 'boolean'].includes(this.colType)) {
+        return
+      }
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(this.handleSearch, 1000)
+    },
+    handleCommand ($event) {
+      if ($event === 'null') {
+        this.$emit('search-input', { col_key: this.colKey, value: 'null', t: this.colType, op: 'eq' })
+      } else if ($event === 'notnull') {
+        this.$emit('search-input', { col_key: this.colKey, value: 'notnull', t: this.colType, op: 'eq' })
+      } else {
+        this.$emit('search-input', { col_key: this.colKey, value: '', t: this.colType })
+      }
+      this.handleSearch()
+    },
+    handleSearch () {
+      clearTimeout(this.timeout)
+      this.$emit('search')
+    },
+    handleClear () {
+      if (this.val0 || this.val1) {
+        this.value = ['', '']
+        this.handleSearch()
+      }
+    }
+  }
+}
+</script>

package/comps/CoreTableSearchDetail.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-dialog
+    :visible.sync="modelVisible"
+    title="Дэлгэрэнгүй хайх"
+    :width="dialogWidth"
+  >
+    <div v-loading="loading" class="p-4 bg-white rounded">
+      <el-form class="core-form grid grid-cols-3 gap-x-2 label-position-top" label-position="top">
+        <el-form-item
+          v-for="item in list"
+          :key="item._id"
+          :label="item.col_title"
+          :class="[{
+            'col-span-full': item.col_type === 'manyToOne' && !item.ref_table?.startsWith('ref_')
+          }]"
+        >
+          <span slot="label" class="leading-3">
+            {{ item.col_title }}
+          </span>
+          <div
+            v-if="item.col_type === 'manyToOne' && !item.ref_table?.startsWith('ref_')"
+            class="core-form grid grid-cols-3"
+          >
+            <div v-for="col of item.list" :key="col._id">
+              {{ col.col_title }}
+            </div>
+          </div>
+          <el-input v-else />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer">
+      <el-button type="primary" icon="el-icon-search" @click="handleSearch">
+        Хайх
+      </el-button>
+      <el-button icon="el-icon-close" @click="modelVisible = false">
+        Буцах
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  name: 'CoreTableSearchDetail',
+  props: {
+    visible: { type: Boolean, default: false },
+    projectId: { type: [String, Number], default: '5' },
+    tableName: { type: String, default: '' },
+    apiId: { type: String, default: null },
+    tableId: { type: String, default: null }
+  },
+  data () {
+    return {
+      loading: false,
+      list: []
+    }
+  },
+  computed: {
+    modelVisible: { get () { return this.visible }, set (val) { this.$emit('update:visible', val) } },
+    dialogWidth () {
+      return '800px'
+    }
+  },
+  watch: {
+    modelVisible () {
+      this.handleRefresh()
+    }
+  },
+  methods: {
+    async handleRefresh () {
+      try {
+        if (!this.modelVisible) {
+          return
+        }
+        this.loading = true
+        const { data } = await this.$axios.get(`config/search/columns/${this.tableId}`)
+        this.list = data
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch () {
+      // console.log('search')
+    }
+  }
+}
+</script>

package/comps/CoreTableStatus.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] sm:grid-cols-[repeat(auto-fit,minmax(140px,1fr))] md:grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-1">
+    <div
+      v-for="statusItem in allStatuses"
+      :key="statusItem.field"
+      :class="['text-sm flex flex-row justify-between items-center bg-white rounded gap-[2px] px-2 py-1 leading-4 overflow-hidden border', {
+        '!border-background': statusItem.field !== qstatus,
+        '!border-coreBlue': statusItem.field === qstatus
+      }]"
+      :title="`${statusItem.title}: ${get(statusCount, statusItem.field) || 0}`"
+    >
+      <div :class="['truncate', { 'text-coreBlue': statusItem.field === qstatus }]">
+        {{ statusItem.title }}
+      </div>
+      <span
+        :class="['rounded-full border px-1 py-[2px] min-w-[40px] cursor-pointer text-xs  hover:font-bold text-center', {
+          'font-bold': statusItem.field === qstatus,
+        }]"
+        :style="{
+          'border-color': statusItem.color + '60',
+          'background-color': statusItem.field === qstatus ? statusItem.color : statusItem.color + '20',
+          'color': statusItem.field === qstatus ? 'white' : statusItem.color
+        }"
+        @click="qstatus = statusItem.field"
+      >
+        {{ get(statusCount, statusItem.field) || 0 }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { get } from 'lodash'
+export default {
+  props: {
+    statuses: { type: Array, default: () => { return [] } },
+    statusCount: { type: Object, default: () => { return null } },
+    status: { type: String, default: null },
+    isQuery: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+  computed: {
+    allStatuses () {
+      if (this.statuses.some(c => c.field === 'count')) {
+        return this.statuses.filter(c => !c.is_count)
+      }
+      return [{ field: 'count', title: 'Нийт', color: '#333333' }].concat(this.statuses.filter(c => !c.is_count))
+    },
+    qstatus: {
+      get () {
+        if (this.isQuery) {
+          return this.$route.query.qstatus || 'count'
+        }
+        return this.status || 'count'
+      },
+      set (val) {
+        if (this.disabled) {
+          return
+        }
+        if (this.isQuery) {
+          this.$router.push({ query: { ...this.$route.query, qstatus: val, page: 1 } })
+        } else {
+          this.$emit('update:status', val)
+        }
+      }
+    }
+  },
+  methods: {
+    get
+  }
+}
+</script>