eztech-core-components 1.0.0

package/comps/CoreTable.vue

@@ -0,0 +1,852 @@
+<template>
+  <div :class="['flex flex-col w-full overflow-hidden gap-2', { 'h-full': !autoHeight }]">
+    <core-table-status v-if="statuses?.length" :statuses="statuses" :status-count="statusCount" :disabled="isDisabled" />
+    <slot name="table-header" />
+    <div class="flex">
+      <div class="flex-1 flex gap-2 flex-wrap items-center">
+        <div v-if="isShowOrgFilter">
+          <el-button
+            type="text"
+            icon="el-icon-arrow-right"
+            :plain="plainButton"
+            :size="sizeButton || defaultSize"
+            :disabled="isDisabled"
+            @click="$emit('show-org-filter')"
+          />
+        </div>
+        <div v-if="selectable && multiple && allSelectable">
+          <el-button
+            v-if="currentRows.length === 0 || currentRows.length < list.length"
+            icon="el-icon-check"
+            :plain="plainButton"
+            :size="sizeButton || defaultSize"
+            :disabled="isDisabled"
+            @click="handleSelectAll"
+          >
+            Бүгдийг сонгох
+          </el-button>
+          <el-button
+            v-else
+            icon="el-icon-close"
+            :plain="plainButton"
+            :size="sizeButton || defaultSize"
+            :disabled="isDisabled"
+            @click="handleDeselectAll"
+          >
+            Бүгдийг арилгах
+          </el-button>
+        </div>
+        <el-button
+          v-if="buttons.textCreate && !readOnly && modelLocale.code === 'mn'"
+          icon="el-icon-plus"
+          type="primary"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          :disabled="isDisabled"
+          @click="$emit('create')"
+        >
+          {{ buttons.textCreate }}
+        </el-button>
+        <el-button
+          v-if="buttons.textRemove && !readOnly"
+          icon="el-icon-minus"
+          type="warning"
+          class="!ml-0"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          :disabled="isDisabled"
+          @click="() => handleUpdate('REMOVE')"
+        >
+          {{ buttons.textRemove }}
+        </el-button>
+        <slot name="actions" />
+        <el-button
+          icon="el-icon-refresh"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          class="!ml-0"
+          :disabled="isDisabled"
+          @click="handleRefresh"
+        >
+          Дахин ачаалах
+        </el-button>
+        <!-- <el-button
+          icon="el-icon-search"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          class="!ml-0"
+          @click="visibleSearch = true"
+        >
+          Дэлгэрэнгүй хайлт
+        </el-button> -->
+        <el-button
+          v-if="buttons.textExport"
+          icon="el-icon-download"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          :loading="loadingExcel"
+          :disabled="isDisabled"
+          class="!ml-0"
+          @click="$emit('excel')"
+        >
+          {{ buttons.textExport }}
+        </el-button>
+        <slot name="table-actions" />
+      </div>
+      <div v-if="!selectable" class="flex flex-row gap-2">
+        <el-select
+          v-if="locales.length > 0"
+          v-model="modelLocale"
+          :size="sizeButton || defaultSize"
+          :placeholder="locales[0].name"
+          :disabled="isDisabled"
+          clearable
+          value-key="_id"
+        >
+          <el-option v-for="local1 in locales" :key="local1._id" :value="local1" :label="local1.name" />
+        </el-select>
+        <el-button
+          v-if="hasHandbook"
+          class="!ml-0"
+          icon="isax isax-book-1"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          :disabled="isDisabled"
+          @click="handbookApiId = api_id"
+        >
+          Гарын авлага
+        </el-button>
+        <!-- <el-button
+          v-if="!subColumn"
+          class="!ml-0"
+          icon="isax isax-warning-2"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          @click="visibleDeleteLog = true"
+        /> -->
+        <el-button
+          v-if="!ignoreTableConfig"
+          class="!ml-0"
+          icon="isax isax-setting-2"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          :disabled="isDisabled"
+          @click="visibleSettingColumns = true"
+        />
+        <!-- <el-button-group>
+          <el-button
+            :type="$route.query.listType === 'card' ? 'default' : 'primary'"
+            icon="el-icon-s-fold"
+            :size="sizeButton || defaultSize"
+            @click="handleChangeListType('table')"
+          />
+          <el-button
+            :type="$route.query.listType === 'card' ? 'primary' : 'default'"
+            icon="el-icon-menu"
+            :size="sizeButton || defaultSize"
+            @click="handleChangeListType('card')"
+          />
+        </el-button-group> -->
+      </div>
+    </div>
+    <!-- :highlight-current-row="selectable" -->
+    <!-- @current-change="handleCurrentRowChange" -->
+    <el-table
+      ref="tableMain"
+      v-loading="loading"
+      :data="list"
+      :border="true"
+      :class="['core-table w-full', {
+        'h-full': !autoHeight,
+        'core-table-search': !noSearch
+      }]"
+      :height="autoHeight ? undefined : '100%'"
+      :header-cell-class-name="getHeaderCellClassName"
+      :row-class-name="getRowClassName"
+      :cell-class-name="getCellClassName"
+      @cell-click="handleCellClick"
+      @row-contextmenu="handleContextMenu"
+      @row-click="handleRowClick"
+      @row-dblclick="handleRowDbclick"
+      @header-dragend="handleHeaderDragEnd"
+    >
+      <el-table-column v-if="selectable" width="50" label="#" align="center">
+        <template slot="header" slot-scope="scope">
+          <div
+            class="h-full text-xs leading-4 h-9 flex items-center"
+          >
+            {{ scope.column.label }}
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <div class="flex items-center h-full w-full">
+            <!-- <el-checkbox v-if="multiple" :value="currentRows.some(c => c._id === scope.row._id)" readonly /> -->
+            <div
+              v-if="multiple" :class="['size-5 rounded cursor-pointer flex items-center justify-center', {
+                'border !border-coreBlue bg-coreBlue text-white': currentRows.some(c => c._id === scope.row._id),
+                'border bg-white': !currentRows.some(c => c._id === scope.row._id)
+              }]"
+            >
+              <i v-if="currentRows.some(c => c._id === scope.row._id)" class="el-icon-check" />
+            </div>
+            <div
+              v-else
+              :class="['size-5 rounded-full border bg-white cursor-pointer', {
+                '!border-coreBlue border-[6px]': currentRow && scope.row[pk_field_name] === currentRow[pk_field_name]
+              }]"
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="!selectable" type="index" :width="indexColWidth" label="№" align="center">
+        <template slot="header" slot-scope="scope">
+          <div
+            class="h-full text-xs leading-4 h-9 flex items-center"
+          >
+            {{ scope.column.label }}
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <div class="flex items-center h-full w-full">
+            {{ (listPage - 1) * (pageSize === 'all' ? 1 : parseInt(pageSize)) + scope.$index + 1 }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="selectedList" width="35" label="#">
+        <template slot-scope="scope">
+          <div @click.prevent="$emit('selection-change', scope.row)">
+            <el-checkbox :value="selectedList.some(c => c[pk_field_name] === scope.row[pk_field_name])" />
+          </div>
+        </template>
+      </el-table-column>
+      <core-table-column
+        v-for="col in showColumns"
+        :key="col.col_key"
+        :col="col"
+        :fill-fields="fillFields"
+        :search="search"
+        :no-search="noSearch"
+        :project-id="projectId"
+        :sorts="sorts"
+        :table_name="table_name"
+        :edit-fields="editFields"
+        :selectable="selectable"
+        @detail="handleDetail"
+        @sort-change="$emit('sort-change', $event)"
+        @search-input="$emit('search-input', $event)"
+        @search="$emit('search')"
+        @change-cell-value="($event) => $emit('change-cell-value', $event)"
+      />
+      <!-- <el-table-column
+        v-for="col in showColumns"
+        v-bind="col.props"
+        :key="col.col_field"
+        :prop="col.col_key"
+        :sortable="false"
+        :class-name="col.hasChildren ? 'core-group-column' : ''"
+      >
+        <template slot="header" slot-scope="scope">
+          <core-table-column-header :label="scope.column.label" :col_key="col.col_key" :sortable="!col.hasChildren && sorts?.length && (has(col.props, 'sortable') ? col.props.sortable : true)" @sort-change="$emit('sort-change', $event)" />
+          <div v-if="!col.hasChildren && search && !noSearch" class="font-normal">
+            <core-table-search :search="search" :col="col" :project-id="projectId" @search-input="$emit('search-input', $event)" @search="$emit('search')" />
+          </div>
+        </template>
+        <el-table-column
+          v-if="col.hasChildren"
+          v-for="child in col.columns?.filter(c1 => !c1.tableHidden)"
+          v-bind="child.props"
+          :key="child.col_field"
+          :prop="child.col_key"
+          :sortable="false"
+          class-name="core-subgroup-column"
+        >
+          <template slot="header" slot-scope="scope">
+            <core-table-column-header :label="scope.column.label" :col_key="child.col_key" :sortable="sorts && sorts.length > 0 && (has(child.props, 'sortable') ? child.props.sortable : true)" @sort-change="$emit('sort-change', $event)" />
+            <div v-if="search && !noSearch" class="font-normal">
+              <core-table-search :search="search" :col="child" :project-id="projectId" @search-input="$emit('search-input', $event)" @search="$emit('search')" />
+            </div>
+          </template>
+          <template slot-scope="scope">
+            <core-table-column-row :col="child" :scope="scope" :fill-fields="fillFields" @detail="() => handleDetail(scope.row, child)" />
+          </template>
+        </el-table-column>
+        <template v-if="!col.hasChildren" slot-scope="scope">
+          <core-table-column-row :col="col" :scope="scope" :fill-fields="fillFields" @detail="() => handleDetail(scope.row, col)" />
+        </template>
+      </el-table-column> -->
+      <!-- fixed="right" -->
+      <el-table-column v-if="!readOnly" label="Үйлдэл" :width="'60px'" align="center">
+        <template slot="header" slot-scope="scope">
+          <div class="h-9 flex items-center">
+            <div class="flex-1 text-xs leading-4">
+              {{ scope.column.label }}
+            </div>
+          </div>
+          <div>
+            <el-button v-if="search && !noSearch" icon="el-icon-search" size="mini" @click="$emit('search')" />
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <el-dropdown :tabindex="-1" @command="handleCommand(scope.row, $event)">
+            <el-button
+              size="mini"
+              tabindex="-1"
+              @contextmenu.native.prevent.stop="onRightClick"
+            >
+              <i class="el-icon-more" />
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="(item, index) of contextMenuItems" :key="item.code + '_' + index" :command="item.code">
+                <div class="flex flex-row py-1 text-base gap-1 text-corePrimaryText items-center">
+                  <i :class="[item.icon || 'el-icon-check', 'text-coreRegularText']" />
+                  {{ item.name }}
+                </div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column v-if="!readOnly" label="Үйлдэл" :width="widthActions || '150px'" align="center">
+        <template slot="header" slot-scope="scope">
+          <div class="h-9 flex items-center">
+            <div class="flex-1 text-xs leading-4">
+              {{ scope.column.label }}
+            </div>
+          </div>
+          <div>
+            <el-button v-if="search && !noSearch" icon="el-icon-search" size="mini" @click="$emit('search')">
+              Хайх
+            </el-button>
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <div class="flex items-center justify-center w-full h-12">
+            <el-button v-if="table_id === '384'" icon="el-icon-circle-plus-outline" plain :type="'success'" title="Асуумж оруулах" size="mini" @click.native.stop="$emit('question', scope.row)" />
+            <el-button v-if="showWarningRow" icon="isax isax-warning-2" plain :type="scope.row.is_warning ? 'warning' : 'default'" title="Түүх харах" size="mini" @click.native.stop="$emit('show-warning', scope.row)" />
+            <el-button v-if="buttons.textEdit" icon="isax isax-edit-2" title="Засварлах" size="mini" @click.native.stop="$emit('update', scope.row)" />
+            <el-button v-else icon="isax isax-document" title="Харах" size="mini" @click.native.stop="$emit('update', scope.row)" />
+            <el-button v-if="buttons.textDelete" icon="isax isax-trash" :title="buttons.textDelete" size="mini" @click.native.stop="$emit('delete', scope.row)" />
+          </div>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <!-- </div> -->
+    <!-- <div v-else-if="listType === 'card'" v-loading="loading">
+      <card-list
+        :list="list"
+        :columns="columns"
+        :pk_field_name="pk_field_name"
+        :loading="loading"
+        @update="$emit('update', $event)"
+        @delete="$emit('delete', $event)"
+        @detail="handleRowDbclick"
+      />
+    </div> -->
+    <!-- , { 'pt-4': !plainButton } -->
+    <div v-if="currentPage && pageSize" :class="['flex flex-col items-start gap-2 lg:flex-row lg:items-center lg:flex-wrap']">
+      <div class="flex-1 flex items-center text-coreRegularText text-sm gap-2">
+        <div class="hidden sm:block">
+          <el-select v-if="!plainButton" v-model="pageSize" size="small">
+            <el-option v-for="item in pageSizes" :key="item.val" :value="item.val" :label="item.title" />
+          </el-select>
+        </div>
+        <div v-for="statusItem in statuses.filter(c => c.is_count)" :key="statusItem.field">
+          {{ statusItem.title }} {{ get(statusCount, statusItem.field) || 0 }}
+        </div>
+        <el-pagination
+          :background="!plainButton"
+          :small="plainButton"
+          :page-size="intPageSize"
+          :current-page="currentPage"
+          :layout="plainButton ? 'total, prev, pager, next' : 'total, prev, pager, next, ->, jumper'"
+          :total="count"
+          @current-change="$emit('current-change', $event)"
+        />
+      </div>
+      <div class="text-sm text-coreSecondaryText font-bold h-8 px-2 justify-self-end flex items-center rounded ">
+        <span v-if="totalDurationMs">{{ parseInt(totalDurationMs / 100) / 10 }}s</span>
+        <span v-if="clientDurationMs && clientDurationMs > (totalDurationMs || 0) + 1000" class="text-xs text-coreWarning">{{ parseInt(clientDurationMs / 100) / 10 }}s</span>
+      </div>
+      <div v-if="level && !subColumn" class="text-sm text-coreRegularText justify-self-end h-8 rounded border px-2 flex items-center bg-coreBgInput">
+        Түвшин: {{ level.level_name }}
+      </div>
+      <slot name="action-buttons" />
+    </div>
+    <el-dialog
+      :visible.sync="visibleHandbook"
+      :title="`${api_title} гарын авлага`"
+      width="220mm"
+    >
+      <scl-handbook v-if="projectId == '5'" :api_id="handbookApiId" />
+      <div slot="footer">
+        <el-button
+          icon="el-icon-close"
+          :plain="plainButton"
+          :size="sizeButton || defaultSize"
+          @click="handbookApiId = null"
+        >
+          Буцах
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="visibleDeleteLog" title="Устгасан түүх" width="600px">
+      <div class="bg-white p-4 rounded-lg">
+        <custom-table-logs v-if="visibleDeleteLog" :project_id="projectId" :table_id="table_id" pk_id="delete" />
+      </div>
+    </el-dialog>
+    <core-table-config
+      ref="refConfig"
+      :table_id="table_id"
+      :api_id="api_id"
+      :sub_col_id="subColumn?._id"
+      :is-show.sync="visibleSettingColumns"
+      :columns="columns"
+    />
+    <CoreContextMenu
+      ref="contextMenu"
+      @menu-click="onMenuItemClick"
+    />
+    <core-table-search-detail
+      :visible.sync="visibleSearch"
+      :project-id="projectId"
+      :api-id="api_id"
+      :table-id="table_id"
+      :table-name="table_name"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import { get, has } from 'lodash'
+import { getButtons } from './../utils/role-helper'
+// import { getFormBoolean } from '../utils/data-helper'
+// import VimeoLabel from './CoreVimeoLabel.vue'
+// import CardImage from './CardImage.vue'
+// import MomentAddCode from './MomentAddCode.vue'
+// import BooleanLabel from './BooleanLabel.vue'
+export default {
+  name: 'CoreTable',
+  // components: { VimeoLabel, CardImage, MomentAddCode, BooleanLabel },
+  props: {
+    projectId: { type: [String, Number], default: null },
+    table_id: { type: String, default: null },
+    table_name: { type: String, default: null },
+    level: { type: Object, default: () => { return null } },
+    api_id: { type: [String, Number], default: null },
+    api_title: { type: [String, Number], default: null },
+    hasHandbook: { type: Boolean, default: false },
+    pk_field_name: { type: String, default: '_id' },
+    fill_field: { type: String, default: '' },
+    showPkid: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    loadingExcel: { type: Boolean, default: false },
+    readOnly: { type: Boolean, default: false },
+    noBorder: { type: Boolean, default: false },
+    noSearch: { type: Boolean, default: false },
+    list: { type: [Array, Object], default: () => { return [] } },
+    selectable: { type: Boolean, default: false },
+    allSelectable: { type: Boolean, default: false },
+    selectedList: { type: Array, default: () => { return null } },
+    multiple: { type: Boolean, default: false },
+    isSelectDirect: { type: Boolean, default: false },
+    count: { type: Number, default: 0 },
+    columns: { type: Array, default: () => { return [] } },
+    currentPage: { type: Number, default: 1 },
+    listPage: { type: Number, default: 1 },
+    sorts: { type: Array, default: () => { return [] } },
+    search: { type: Object, default: () => { return null } },
+    widthActions: { type: String, default: '' },
+    currentRowId: { type: [String, Number], default: null },
+    initCurrentRow: { type: Object, default: () => { return null } },
+    subColumn: { type: Object, default: () => { return null } },
+    sizeButton: { type: String, default: null },
+    defaultSize: { type: String, default: null },
+    plainButton: { type: Boolean, default: false },
+    isDetail: { type: Boolean, default: false },
+    autoHeight: { type: Boolean, default: false },
+    hideExcel: { type: Boolean, default: false },
+    isShowOrgFilter: { type: Boolean, default: false },
+    showWarningRow: { type: Boolean, default: false },
+    locale: { type: Object, default: () => { return null } },
+    locales: { type: Array, default: () => { return [] } },
+    isAdmin: { type: Boolean, default: false },
+    actions: { type: Array, default: () => { return [] } },
+    cellClassName: { type: Function, default: null },
+    rowClassName: { type: Function, default: null },
+    statuses: { type: Array, default: () => { return [] } },
+    statusCount: { type: Object, default: () => { return null } },
+    editFields: { type: Array, default: () => { return [] } },
+    totalDurationMs: { type: Number, default: () => { return null }},
+    clientDurationMs: { type: Number, default: () => { return null }}
+  },
+  data () {
+    return {
+      rowHeight: 48,
+      handbookApiId: null,
+      visibleDeleteLog: false,
+      visibleMerge: false,
+      visibleSettingColumns: false,
+      visibleSearch: false,
+      currentRow: null,
+      currentRows: []
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['tablePageSizes', 'windowHeight', 'ignoreTableConfig']),
+    ...mapGetters('user', ['isLocked']),
+    ...mapGetters(['user_position_id']),
+    isDisabled () {
+      return false // this.isLocked
+    },
+    modelLocale: {
+      get () {
+        return this.locale || { code: 'mn' }
+      },
+      set (val) {
+        this.$emit('update:locale', val)
+      }
+    },
+    visibleHandbook: {
+      get () {
+        return !!this.handbookApiId
+      },
+      set (val) {
+        if (!val) {
+          this.handbookApiId = null
+        }
+      }
+    },
+    fillFields () {
+      return this.fill_field.split(',')
+    },
+    showColumns () {
+      const cols = this.columns.filter(c => c.props && !c.tableHidden && !c.configHidden && (this.showPkid || !['pkid', 'uuid'].includes(c.col_type)))
+      cols.sort((a, b) => {
+        if (a.col_order !== b.col_order) { return a.col_order - b.col_order }
+        return Number(a._id) - Number(b._id)
+      })
+      return cols
+    },
+    indexColWidth () {
+      const num = isNaN(this.pageSize) ? 300 : parseInt(this.pageSize)
+      const len = String((this.listPage - 1) * num + num).length
+      return (len * 8 + 20) + 'px'
+    },
+    listType () {
+      return this.$route.query.listType || 'table'
+    },
+    intPageSize () {
+      if (isNaN(this.pageSize)) {
+        return Math.max(this.list.length, this.count || 0)
+      }
+      return parseInt(this.pageSize)
+    },
+    pageSize: {
+      get () {
+        return this.tablePageSizes[this.table_id] || '20'
+      },
+      set (val) {
+        this.set_table_page_sizes({ [this.table_id]: val })
+        this.handleChangeSize()
+      }
+    },
+    pageSizes () {
+      const list = []
+      // , all: 'Бүх'
+      const list1 = { 5: '5/хуудас', 10: '10/хуудас', 12: '12/хуудас', 20: '20/хуудас', 50: '50/хуудас', 100: '100/хуудас' }
+      for (const key in list1) {
+        list.push({ val: key, title: list1[key] })
+      }
+      if (!this.autoHeight) {
+        list.unshift({ val: 'auto', title: 'Авто' })
+      }
+      return list
+    },
+    buttons () {
+      return getButtons(this.level, this.table_name, this.isAdmin)
+    },
+    contextMenuItems () {
+      if (this.readOnly) {
+        return []
+      }
+      const list = []
+      const deleteCodes = ['DELETE', 'REMOVE']
+      if (this.actions?.length && this.table_name === 'doc_requests') {
+        list.push(...this.actions.filter(k => this.level?.actions.some(c => (c.code === k.code) || (deleteCodes.includes(c.code) && deleteCodes.includes(k.code)) )).filter((c) => {
+          if (c.isNotSystem && this.currentRow?.is_system) {
+            return false
+          }
+          const isCurrentUser = this.currentRow?.current_user_id?._id === this.user_position_id
+          if (c.isCurrentUser && !isCurrentUser) {
+            const isCoDecider = false
+            if (c.isCoDecider && isCoDecider) {
+              return true
+            }
+            return false
+          }
+          if (c.hideStatuses && c.hideStatuses?.includes(this.currentRow?.status_id?.code)) {
+            return false
+          }
+          if (c.showStatuses && !c.showStatuses?.includes(this.currentRow?.status_id?.code)) {
+            return false
+          }
+          return true
+        }))
+      } else if (this.actions?.length) {
+        list.push(...this.actions.filter(k => this.level?.actions.some(c => c.code === k.code || (deleteCodes.includes(c.code) && deleteCodes.includes(k.code))) && (!k.reg_type_code || k.reg_type_code.includes(this.currentRow?.reg_type_id?.code))))
+      } else {
+        if (this.buttons.textEdit) {
+          list.push({ code: 'update', icon: 'isax isax-edit-2', name: 'Засварлах' })
+        } else {
+          list.push({ code: 'detail', icon: 'isax isax-document', name: 'Харах' })
+        }
+        if (this.showWarningRow) {
+          list.push({ code: 'show-warning', icon: 'isax isax-warning-2', name: 'Түүх харах' })
+        }
+        if (this.table_id === '384') {
+          list.push({ code: 'question', icon: 'el-icon-circle-plus-outline', name: 'Асуумж оруулах' })
+        }
+        if (this.buttons.textDelete) {
+          list.push({ code: 'delete', icon: 'isax isax-trash', name: 'Устгах' })
+        }
+        if (this.buttons.textUnblock) {
+          list.push({ code: 'unblock', icon: 'isax isax-trash', name: this.buttons.textUnblock })
+        }
+      }
+      return list
+    }
+  },
+  watch: {
+    windowHeight () {
+      if (this.pageSize === 'auto' && !this.autoHeight) {
+        this.handleChangeSize()
+      }
+    },
+    list: {
+      handler () {
+        this.handleDeselectAll()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.handleLoad()
+    this.currentRow = this.initCurrentRow
+  },
+  methods: {
+    ...mapActions('settings', ['set_table_page_sizes']),
+    get,
+    has,
+    onRightClick (event) {
+      // console.log("Right-click disabled on button", event)
+    },
+    handleCommand (row, $event) {
+      this.currentRow = row
+      const menuItem = this.contextMenuItems.find(c => c.code === $event)
+      this.onMenuItemClick(menuItem)
+    },
+    handleContextMenu (row, column, event) {
+      this.currentRow = row
+      event.preventDefault()
+      this.$refs.contextMenu.showMenu(this.contextMenuItems, event)
+    },
+    onMenuItemClick (menuItem) {
+      if (!this.actions?.length) {
+        this.$emit(menuItem.code, this.currentRow)
+      } else {
+        this.$emit('action', menuItem, this.currentRow)
+      }
+    },
+    getPageSize () {
+      let pageSize = this.pageSize
+      if (this.pageSize === 'auto' && !this.autoHeight) {
+        const heightStr = get(this.$refs, 'tableMain.bodyHeight.height')
+        if (heightStr) {
+          const height = Number(heightStr.replace('px', ''))
+          pageSize = height % this.rowHeight === 0 ? height / this.rowHeight : parseInt(height / this.rowHeight) + 1
+        }
+      }
+      return pageSize
+    },
+    handleChangeSize () {
+      const size = this.getPageSize()
+      this.$emit('size-change', size)
+    },
+    async handleLoad () {
+      await this.$nextTick()
+      this.$emit('load', { pageSize: this.getPageSize() })
+    },
+    handleRefresh () {
+      this.currentRow = null
+      this.currentRows = []
+      this.$emit('refresh')
+    },
+    handleUpdate (updateGroupName) {
+      if (!this.currentRow) {
+        return this.$message({ type: 'warning', message: 'Утга сонгоно уу.', showClose: true })
+      }
+      this.$emit('update', this.currentRow, updateGroupName)
+    },
+    handleDetail (row, col, isNewTab) {
+      if (!this.fillFields.includes(col.col_key)) {
+        return
+      }
+      if (this.$listeners.detail || this.isDetail) {
+        this.$emit('detail', row, isNewTab)
+      } else {
+        this.$emit('update', row)
+      }
+    },
+    handleSelectionChange (row) {
+      const index = this.currentRows.findIndex(c => c._id === row._id)
+      if (index > -1) {
+        this.currentRows.splice(index, 1)
+      } else {
+        this.currentRows.push(row)
+      }
+    },
+    handleRowDbclick ($event) {
+      if (this.$listeners.detail || this.isDetail) {
+        this.$emit('detail', $event, false)
+      } else {
+        this.$emit('update', $event)
+      }
+    },
+    handleRowClick (row, _, event) {
+      if (!this.selectable) {
+        if (event.ctrlKey || event.metaKey) {
+          this.$emit('detail', row, true)
+        }
+        return
+      }
+      this.handleCurrentRowChange(row)
+      if (this.selectedList) {
+        this.$emit('selection-change', row)
+      }
+    },
+    getHeaderCellClassName ({ column }) {
+      if (!this.sorts) {
+        return ''
+      }
+      const sort = this.sorts.find(c => c.prop === column.property)
+      return sort ? (sort.order || 'ascending') : ''
+    },
+    isValue (row, col) {
+      return !!this.get(row, col.col_field)
+    },
+    getValue (col, row) {
+      if (col.col_multiple) {
+        const value = get(row, col.col_field)
+        if (['manyToOne'].includes(col.col_type)) {
+          return value ? value.map(c => c.name).join(', ') : value
+        } else {
+          return value ? value.join(', ') : value
+        }
+      }
+      const value = get(row, col.refColumnWithAlias || col.col_field)
+      if (['boolean', 'booleannull'].includes(col.col_type)) {
+        return value ? 'Тийм' : 'Үгүй'
+      } else if (col.col_type === 'date') {
+        if (!value) {
+          return ''
+        }
+        return this.$moment(value).format('YYYY-MM-DD')
+      } else if (col.col_type === 'datetime') {
+        if (!value) {
+          return ''
+        }
+        return this.$moment(value).format('YYYY-MM-DD HH:mm')
+      } else if (['number', 'decimal'].includes(col.col_type) && value) {
+        return value.$format()
+      }
+      return value
+    },
+    handleCellClick (...props) {
+      this.$emit('cell-click', ...props)
+    },
+    getCellClassName (props) {
+      if (this.cellClassName) {
+        return this.cellClassName(props)
+      }
+      return ''
+    },
+    getRowClassName (props) {
+      if (this.rowClassName) {
+        return this.rowClassName(props)
+      }
+      const { row } = props
+      let classNames = ''
+      if (this.multiple) {
+        classNames = [this.currentRows.some(c => c[this.pk_field_name] === row[this.pk_field_name]) ? 'current-row' : '']
+      } else {
+        classNames = [this.currentRow && row[this.pk_field_name] === this.currentRow[this.pk_field_name] ? 'current-row' : '']
+      }
+      const dangerDay = 0
+      const warningDay = 2
+      if (['vw_training_licenses'].includes(this.table_name)) {
+        if (has(row, 'end_valid_date') && has(row, 'is_valid')) {
+          const endDate = this.$moment(get(row, 'end_valid_date')).endOf('days')
+          const warningDate = this.$moment().add(10, 'days').endOf('days')
+          if (!row.is_valid) {
+            classNames.push('danger-row')
+          } else if (warningDate.isAfter(endDate, 'days')) {
+            classNames.push('warning-row')
+          }
+        }
+      } else if (['reg_resolutions'].includes(this.table_name) && !['REG_END', 'ARCHIVE', 'RETURN'].includes(row.resolution_status_id?.code) && has(row, 'end_date')) {
+        const endDate = this.$moment(get(row, 'end_date')).endOf('days')
+        const dangerDate = this.$moment().add(dangerDay, 'days').endOf('days')
+        const warningDate = this.$moment().add(warningDay, 'days').endOf('days')
+        if (dangerDate.isAfter(endDate, 'days')) {
+          classNames.push('danger-row')
+        } else if (warningDate.isAfter(endDate, 'days')) {
+          classNames.push('warning-row')
+        }
+      } else if (['reg_forensics'].includes(this.table_name) && !['REG_END', 'ARCHIVE', 'RETURN'].includes(row.resolution_status_id?.code) && has(row, 'vwexpire.res_end_date')) {
+        if (!row.custom_is_end) {
+          if (row.custom_is_expired) {
+            classNames.push('danger-row')
+          } else {
+            const endDate = this.$moment(get(row, 'vwexpire.res_end_date')).endOf('days')
+            const warningDate = this.$moment().add(warningDay, 'days').endOf('days')
+            if (warningDate.isAfter(endDate, 'days')) {
+              classNames.push('warning-row')
+            }
+          }
+        }
+      }
+      return classNames.join(' ')
+    },
+    handleChangeListType (type) {
+      this.$router.push({ query: Object.assign({}, this.$route.query, { listType: type }) })
+    },
+    handleSelectAll () {
+      this.currentRows = this.list.slice()
+      this.$emit('current-row-change', this.currentRows)
+    },
+    handleDeselectAll () {
+      this.currentRows = []
+      this.$emit('current-row-change', this.currentRows)
+    },
+    handleCurrentRowChange (currentRow) {
+      if (!currentRow) {
+        return
+      }
+      if (this.multiple) {
+        // this.currentRows = []
+        this.handleSelectionChange(currentRow)
+        this.$emit('current-row-change', this.currentRows)
+      } else if (currentRow) {
+        this.currentRow = currentRow
+        this.$emit('current-row-change', currentRow)
+      }
+    },
+    handleHeaderDragEnd (newWidth, oldWidth, column) {
+      if (this.$refs.refConfig?.changeHeaderWidth) {
+        this.$refs.refConfig?.changeHeaderWidth({ property: column.property, newWidth })
+      }
+      // console.log(newWidth, oldWidth, column)
+    }
+  }
+}
+</script>