eztech-core-components 1.0.0

package/comps/CoreFormFields.vue

@@ -0,0 +1,306 @@
+<template>
+  <div
+    v-if="(group.group_type || 'GROUP_FIELD') !== 'GROUP_FIELD' || groupColumns.length > 0"
+    :class="['rounded bg-background empty:hidden', {
+      'pt-4': !group.title && !['INLINE_TABLE'].includes(group.group_type) && !isLog && !noPaddingAll,
+      'pt-1 px-2 pb-2': !!group.title
+    }]"
+  >
+    <div v-if="isShowLogButton" class="text-center">
+      <el-button class="py-[2px]" type="text" size="mini" :icon="isShowLog ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="isShowLog = !isShowLog">
+        {{ isShowLog ? 'Лог хаах' : 'Лог харах' }}
+      </el-button>
+    </div>
+    <div class="flex flex-row items-start justify-start gap-2">
+      <fieldset
+        v-if="isShow"
+        :class="['rounded w-full grid gap-x-4 flex-1', {
+          'px-2': !['INLINE_TABLE'].includes(group.group_type) && !noPaddingAll,
+          'grid-cols-1': (form_col || 1) === 1,
+          'grid-cols-1 md:grid-cols-2': form_col === 2,
+          // 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3': form_col === 3,
+          // 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4': form_col === 4,
+          'grid-cols-[repeat(auto-fit,minmax(300px,1fr))]': form_col >= 3,
+          'border border-coreLightBorder pt-2': group.title
+        }]"
+      >
+        <legend :class="['font-default text-sm font-medium text-coreSecondaryText ml-5 px-2', { 'mr-2': !group.title }]">
+          {{ group.title }}
+        </legend>
+        <div
+          v-if="group.group_type === 'SUB_FORM'" :class="['w-full col-span-full']"
+        >
+          <core-form-sub
+            :ref-column="refColumns.find(c => c.tableName === group.col_fields)"
+            :project-id="projectId"
+            :temp-id="temp && temp._id"
+            :root-api-id="rootApiId"
+            :root-temp-id="rootTempId"
+            :auto-height="true"
+            :hide-excel="true"
+            :no-search="true"
+            :plain-button="true"
+          />
+        </div>
+        <div
+          v-else-if="group.group_type === 'INLINE_TABLE'" :class="['w-full col-span-full']"
+        >
+          <reg-resolution-questions
+            v-if="group.name === 'RESOLUTION_QUESTIONS'"
+            :value="temp[group.name]"
+            :parent-temp="temp"
+            :parent-level="level"
+            :disabled="disabled || group.disabled"
+            @temp-change-forensics="$emit('temp-change', { col_field: 'RESOLUTION_FORENSICS' }, $event)"
+            @temp-change="$emit('temp-change', { col_field: group.name }, $event)"
+          />
+          <reg-resolution-participants
+            v-else-if="group.name === 'PARTICIPANTS'"
+            :value="temp[group.name]"
+            :parent-temp="temp"
+            :table_name="group.col_fields"
+            :disabled="disabled || group.disabled"
+            :ref-column="refColumns.find(c => c.tableName === group.col_fields)"
+            @temp-change="$emit('temp-change', { col_field: group.name }, $event)"
+            @temp-change-all="$emit('temp-change-all', $event)"
+          />
+          <!-- <reg-resolution-objects
+          v-else-if="group.name === 'RESOLUTION_OBJECTS'"
+          v-model="temp[group.name]"
+          :parent-temp="temp"
+          :disabled="group.is_disabled"
+        /> -->
+          <core-form-table-inline
+            v-else
+            :ref="`INLINE_TABLE_${group.name}`"
+            :value="temp[group.name]"
+            :group-name="group.name"
+            :table_name="group.col_fields"
+            :ref-column="refColumns.find(c => c.tableName === group.col_fields)"
+            :project-id="projectId"
+            :parent-temp="temp"
+            :parent-level="level"
+            :temp-id="temp && temp._id"
+            :disabled="disabled || group.disabled"
+            @temp-change="$emit('temp-change', { col_field: group.name }, $event)"
+          />
+        </div>
+        <div
+          v-else-if="['SUB_TABLE', 'SUB_TABLE_LOG'].includes(group.group_type)" :class="['w-full col-span-full']"
+        >
+          <core-form-table
+            :group-name="group.name"
+            :table_name="group.col_fields"
+            :text-where="group.text_where"
+            :ref-column="refColumns.find(c => c.tableName === group.col_fields)"
+            :project-id="projectId"
+            :root-api-id="rootApiId"
+            :root-temp-id="rootTempId"
+            :temp-id="temp?._id"
+            :temp-locale-id="temp?.locale_id"
+            :auto-height="true"
+            :hide-excel="true"
+            :no-search="true"
+            :plain-button="true"
+            :parent-level="level"
+            :is-log="'SUB_TABLE_LOG' === group.group_type"
+          />
+        </div>
+        <div
+          v-else-if="group.group_type === 'CUSTOM'" :class="['w-full col-span-full']"
+        >
+          <custom-user-roles v-if="group.name === 'USER_ROLES'" :temp="temp" :level="level" />
+          <custom-user-skills v-else-if="group.name === 'USER_SKILLS'" :temp="temp" />
+          <custom-national-lang-skills v-else-if="group.name === 'NATIONAL_LANG_SKILLS'" :temp="temp" />
+          <custom-user-clothes v-else-if="group.name === 'USER_CLOTHES'" :temp="temp" :level="level" />
+          <training-plan-student v-else-if="group.name === 'PLAN_STUDENTS'" :parent-row="temp" :level="level" />
+          <training-plan-attendance v-else-if="group.name === 'PLAN_ATTENDANCES'" :parent-row="temp" :level="level" :group="group" :ref-column="refColumns.find(c => c.tableName === group.col_fields)" />
+          <training-plan-license v-else-if="group.name === 'PLAN_LICENSES'" :parent-row="temp" :level="level" :group="group" :ref-column="refColumns.find(c => c.tableName === group.col_fields)" />
+          <training-exam-question v-else-if="group.name === 'EXAM_QUESTIONS'" :parent-row="temp" :level="level" />
+          <training-exam-student v-else-if="group.name === 'EXAM_STUDENTS'" :parent-row="temp" :level="level" />
+          <training-hrm-material v-else-if="group.name === 'TRAINING_MATERIALS'" :parent-row="temp" :level="level" />
+          <training-hrm-material v-else-if="group.name === 'TRAINING_MATERIALS1'" :parent-row="temp" :level="level" />
+          <hrm-employee-inquiries v-else-if="group.name === 'HRM_EMPLOYEE_INQUIRIES'" :parent-row="temp" :level="level" />
+          <archive-document-pages v-else-if="group.name === 'ARCHIVE_DOCUMENT_PAGES'" :parent-temp="temp" :parent-root-api-id="rootApiId" :temp-id="temp && temp._id" :level="level" :group="group" :ref-column="refColumns.find(c => c.tableName === group.col_fields)" />
+          <archive-classification-item-pages v-else-if="group.name === 'CLASSIFICATION_ITEM_PAGES'" :parent-temp="temp" :temp-id="temp && temp._id" :level="level" :group="group" :ref-column="refColumns.find(c => c.tableName === group.col_fields)" />
+        </div>
+        <template v-else>
+          <template
+            v-for="col in groupColumns"
+          >
+            <div v-if="col.col_field === 'resolution_org_id'" :key="'break' + col.form.prop" class="col-span-full" />
+            <div v-if="col.col_field === 'doc_num'" :key="'break' + col.form.prop" class="col-span-full" />
+            <div
+              :key="col.form.prop"
+              :class="['min-w-[300px]', {
+                'col-span-1 md:col-span-2': form_col > 1 && col.form.colSpan === 2,
+                'col-span-1 md:col-span-3': form_col > 2 && col.form.colSpan === 3,
+                'col-span-1 md:col-span-4': form_col > 3 && col.form.colSpan === 4,
+                'col-span-full': col.form.colSpan === 99,
+                'row-span-2': col.form.rowSpan === 2,
+                'row-span-3': col.form.rowSpan === 3,
+                'row-span-4': col.form.rowSpan === 4
+              }]"
+            >
+              <el-form-item
+                class="group w-full flex-row"
+                :prop="col.form.prop"
+                :label="col.col_field.includes('html') ? '' : getLabel(col)"
+                :label-width="col.col_field.includes('html') ? '0' : null"
+              >
+                <span v-if="!col.col_field.includes('html')" slot="label">
+                  <span v-if="isLocaleLabel">{{ $t(`formItem.${col.form.prop}`) }}</span>
+                  <span v-else class="text-foreground">{{ getLabel(col) }}</span>
+                  <el-popover
+                    v-if="col.form.description"
+                    placement="bottom"
+                    width="200"
+                    trigger="hover"
+                  >
+                    <div class="text-xs break-normal text-left text-coreRegularText">{{ col.form.description }}</div>
+                    <i slot="reference" class="el-icon-info cursor-pointer text-coreSecondaryText" />
+                  </el-popover>
+                </span>
+                <core-form-item
+                  :col="col"
+                  :parent-temp="parentTemp || temp"
+                  :temp="temp"
+                  :project-id="projectId"
+                  :root-temp-id="rootTempId"
+                  :pk_field_name="pk_field_name"
+                  :default-size="defaultSize"
+                  :loading="searching"
+                  :disabled="checkDisabledColumn(col)"
+                  @temp-change="$emit('temp-change', col, $event)"
+                  @form-search="$emit('form-search', col)"
+                />
+              </el-form-item>
+            </div>
+          </template>
+        </template>
+      </fieldset>
+      <div v-if="isXypImage" class="w-[3cm] aspect-[3/4] bg-coreBgHover rounded border mr-4">
+        <img
+          v-if="temp.xyp_log_id"
+          :src="`/api/xypservice/idcard/image/${temp.xyp_log_id}`"
+          class="w-full h-full object-cover"
+        >
+      </div>
+    </div>
+    <custom-table-logs v-if="isShow && group.name === 'LOG' && table?._id && temp" :project_id="projectId" :table_id="table._id" :pk_id="temp[pk_field_name]" />
+  </div>
+</template>
+<script>
+import { get, has } from 'lodash'
+import { getTriggerEquals, getTriggerFields } from '../utils/data-helper'
+export default {
+  name: 'CoreFormFields',
+  props: [
+    'group', 'parentTemp', 'rootTempId', 'rootApiId', 'temp', 'pk_field_name', 'defaultSize', 'table',
+    'projectId', 'searching', 'refColumns', 'disabled',
+    'isSubMenu', 'showPkid', 'level', 'isLocaleLabel',
+    'noPadding', 'noPaddingAll', 'parentFormCol'
+  ],
+  data () {
+    return {
+      isShowLog: false
+    }
+  },
+  computed: {
+    form_col () {
+      return Number(this.parentFormCol || this.table.form_col || 1)
+    },
+    isLog () {
+      return this.group.name === 'LOG'
+    },
+    isShow () {
+      return !this.isLog || this.isSubMenu || this.isShowLog
+    },
+    isShowLogButton () {
+      return this.isLog && !this.isSubMenu && (this.level?.isAdmin || this.level?.actions?.some(c => c.code === 'LOG') || this.isDevelopment)
+    },
+    isXypImage () {
+      return ['firearm_', 'reg_'].some(c => this.table?.name.startsWith(c)) &&
+      this.group.columns?.filter(this.checkFilterColumns).some(c => ['register_num'].includes(c.col_field)) &&
+      has(this.temp, 'xyp_log_id') &&
+      !this.temp?.is_legal
+    },
+    groupColumns () {
+      return this.group.columns?.filter(this.checkFilterColumns)
+    },
+    isDevelopment () {
+      return process.env.NODE_ENV === 'development'
+    }
+  },
+  methods: {
+    getLabel (col) {
+      const trigger_fields = getTriggerFields(col.trigger_fields, 'label')
+      for (const r of trigger_fields) {
+        const { type, localKey, label } = r
+        const localVal = r.localVal
+        const operation = r.operation
+        let tempVal = get(this.temp, localKey)
+        if (tempVal && typeof tempVal === 'object' && has(tempVal, this.pk_field_name)) {
+          tempVal = type === 'number' ? Number(tempVal._id) : tempVal._id
+        }
+        if (operation === 'ne' && localVal !== tempVal) {
+          return label
+        } else if (operation === 'eq' && localVal === tempVal) {
+          return label
+        }
+      }
+      return col.form.label
+    },
+    checkFilterColumns (c) {
+      return this.checkColumns(c, 'show')
+    },
+    checkDisabledColumn (c) {
+      if (this.disabled) {
+        return true
+      }
+      if (c.trigger_fields) {
+        const trigger_fields = getTriggerFields(c.trigger_fields, 'disable')
+        let isShow = false
+        for (const r of trigger_fields) {
+          isShow = getTriggerEquals(r, this.temp, isShow)
+          if (isShow) {
+            break
+          }
+        }
+        return isShow
+      }
+    },
+    checkColumns (c, actionType, tt = true) {
+      if (c.trigger_fields) {
+        const trigger_fields = getTriggerFields(c.trigger_fields, actionType)
+        let isShow = tt
+        for (const r of trigger_fields) {
+          isShow = getTriggerEquals(r, this.temp, isShow)
+          if (isShow !== tt) {
+            break
+          }
+        }
+        return isShow
+      }
+      if (actionType === 'show') {
+        return !['pkid', 'uuid'].includes(c.col_type) || this.showPkid
+      } else {
+        return true
+      }
+    },
+    async isValidate () {
+      let validated = true
+      if (this.group.group_type === 'INLINE_TABLE') {
+        const ref = this.$refs[`INLINE_TABLE_${this.group.name}`]
+        if (ref) {
+          const isValid = await this.$refs[`INLINE_TABLE_${this.group.name}`].isValidate()
+          if (!isValid) {
+            validated = false
+          }
+        }
+      }
+      return validated
+    }
+  }
+}
+</script>

package/comps/CoreFormItem.vue

@@ -0,0 +1,114 @@
+<template>
+  <component
+    :is="componentName"
+    ref="refComponent"
+    v-bind="componentProps"
+    v-model="modelValue"
+    :pk_field_name="pk_field_name"
+    :size="defaultSize"
+    :loading="loading"
+    :project-id="projectId"
+    :parent-temp="coreSelectTemp"
+    :root-temp="coreRootTemp"
+    :root-temp-id="coreRootTempId"
+    :com-type="comType"
+    @form-search="($event) => $emit('form-search', $event)"
+    @keydown.native.enter="$emit('keydown-enter')"
+    @keydown-enter="$emit('keydown-enter')"
+    @keydown.native="$emit('keydown', $event)"
+  />
+</template>
+<script>
+import { get } from 'lodash'
+export default {
+  name: 'CoreFormItem',
+  props: {
+    col: { type: Object, default: () => { return null } },
+    parentTemp: { type: Object, default: () => { return null } },
+    temp: { type: Object, default: () => { return null } },
+    projectId: { type: String, default: null },
+    rootTempId: { type: String, default: null },
+    pk_field_name: { type: String, default: '_id' },
+    loading: { type: Boolean, default: false },
+    defaultSize: { type: String, default: null },
+    disabled: { type: Boolean, default: null },
+    comType: { type: String, default: undefined }
+  },
+  computed: {
+    componentName () {
+      return get(this.col, 'form.component.name')
+    },
+    componentProps () {
+      const props = { ...get(this.col, 'form.component.props') }
+      if (this.disabled) {
+        props.disabled = true
+      }
+      return props
+    },
+    coreRootTempId () {
+      return [
+        'CoreFiles',
+        'CoreUploadImage'
+      ].includes(this.componentName)
+        ? this.rootTempId
+        : null
+    },
+    coreRootTemp () {
+      return [
+        'CoreCascaderChildOrg',
+        'CoreCascaderChildPosition'
+      ].includes(this.componentName)
+        ? this.parentTemp
+        : null
+    },
+    coreSelectTemp () {
+      if (['CoreDate'].includes(this.componentName) && this.col.col_field.endsWith('end_date')) {
+        return this.temp
+      }
+      return [
+        'CoreSelect',
+        'ConfigSelectColumns',
+        'CoreSelectTable',
+        'CustomUserSelect',
+        'CoreSelectOrgEmp',
+        'CoreCascaderChildOrg',
+        'CoreCascaderChildPosition',
+        'DocRegNum',
+        'DocIndexNum',
+        'DocOrgSelect',
+        'DocUserSelect',
+        'PoliceCode',
+        'FirearmBodyNumber',
+        'ArchiveRequestRegNum',
+        'RegCrimePlace'
+      ].includes(this.componentName)
+        ? this.temp
+        : null
+    },
+    modelValue: {
+      get () {
+        return get(this.temp, this.col.col_field)
+      },
+      set (val) {
+        this.$emit('temp-change', val)
+      }
+    }
+  },
+  methods: {
+    async focus () {
+      await this.$nextTick()
+      const refComponents = this.$refs.refComponent
+      const refComponent = get(refComponents, '[0]') || refComponents
+      if (!refComponent) {
+        return
+      }
+      if (refComponent.focus) {
+        this.$refs.refComponent.focus()
+      }
+    },
+    handleFormSearch () {
+      this.$emit('form-search', this.col)
+    }
+  }
+}
+</script>

package/comps/CoreFormItemCopy.vue

@@ -0,0 +1,155 @@
+<template>
+  <moment-add-code
+    v-if="col.col_field.startsWith('moment')"
+    :disabled="col.disabled"
+    :value="temp[col.col_field]"
+    @input="handleChange(col, $event)"
+  />
+  <core-deep-link
+    v-else-if="['deeplink'].includes(col.type)"
+    :temp="temp"
+    :value="temp[col.col_field]"
+    :trigger-fields="col.trigger_fields"
+    @input="handleChange(col, $event)"
+  />
+  <core-upload-image
+    v-else-if="['icon', 'file', 'image'].includes(col.type)"
+    :file-type="col.type"
+    :col-multiple="col.col_multiple"
+    :disabled="col.disabled"
+    :value="temp[col.col_field]"
+    @input="handleChange(col, $event)"
+  />
+  <core-select
+    v-else-if="['manyToOne', 'table'].includes(col.type)"
+    :temp="temp"
+    :disabled="col.disabled"
+    :table-name="col.ref_table"
+    :ref-column="col.ref_column"
+    :value="temp[col.col_field]"
+    :project-id="projectId"
+    :col-multiple="col.col_multiple"
+    :trigger-fields="col.trigger_fields && !col.trigger_fields.includes('extract') ? col.trigger_fields : null"
+    :size="defaultSize"
+    @input="handleChange(col, $event)"
+  />
+  <el-date-picker
+    v-else-if="col.type === 'date'"
+    :size="defaultSize"
+    :disabled="col.disabled"
+    type="date"
+    :value="temp[col.col_field] ? $moment(temp[col.col_field]).format('YYYY-MM-DD') : ''"
+    format="yyyy-MM-dd"
+    value-format="yyyy-MM-dd"
+    class="w-full"
+    @input="handleChange(col, $event)"
+  />
+  <el-input-number
+    v-else-if="['number', 'decimal', 'pkid'].includes(col.type)"
+    :precision="['decimal'].includes(col.type) ? 1 : 0"
+    :disabled="col.disabled"
+    :value="temp[col.col_field]"
+    :size="defaultSize"
+    class="w-full"
+    @input="handleChange(col, $event)"
+  />
+  <el-switch
+    v-else-if="col.type === 'boolean'"
+    :disabled="col.disabled"
+    :value="[1, '1', 'true', true, 'True', 'TRUE'].includes(temp[col.col_field])"
+    :size="defaultSize"
+    @input="handleChange(col, $event)"
+  />
+  <div v-else-if="col.type === 'color'" class="flex gap-2">
+    <el-color-picker
+      :disabled="col.disabled"
+      :value="getValue(col, temp)"
+      :size="defaultSize"
+      @change="handleChange(col, $event)"
+    />
+    <el-input
+      :disabled="col.disabled"
+      :value="getValue(col, temp)"
+      placeholder="Өнгө сонгоно уу"
+      :size="defaultSize"
+      @input="handleChange(col, $event)"
+    />
+  </div>
+  <editor
+    v-else-if="col.col_field.startsWith('html_')"
+    :disabled="col.disabled"
+    :value="getValue(col, temp)"
+    @input="handleChange(col, $event)"
+  />
+  <core-vimeo
+    v-else-if="col.col_field.includes('vimeo_')"
+    :disabled="col.disabled"
+    :value="getValue(col, temp)"
+    @input="handleChange(col, $event)"
+  />
+  <el-input
+    v-else
+    :type="col.type === 'email' ? 'email' : (col.col_length > 255 ? 'textarea' : 'text')"
+    :disabled="col.disabled"
+    :value="getValue(col, temp)"
+    :placeholder="col.form.placeholder"
+    :show-word-limit="col.col_length > 255"
+    :maxlength="col.col_length"
+    :size="defaultSize"
+    autosize
+    @input="handleChange(col, $event)"
+  >
+    <el-button
+      v-if="col.form.isSearch"
+      slot="append"
+      icon="el-icon-search"
+      :loading="searching"
+      @click="handleFormSearch(col)"
+    />
+    <el-button
+      v-if="col.form.isCopy"
+      slot="append"
+      icon="el-icon-document-copy"
+      @click="$emit('form-copy', { prop: col.col_field })"
+    />
+  </el-input>
+</template>
+<script>
+import { get } from 'lodash'
+export default {
+  name: 'CoreFormItemCopy',
+  props: {
+    col: { type: Object, default: () => { return null } },
+    temp: { type: Object, default: () => { return null } },
+    projectId: { type: String, default: null },
+    pk_field_name: { type: String, default: '_id' },
+    searching: { type: Boolean, default: false },
+    defaultSize: { type: String, default: null }
+  },
+  methods: {
+    getValue (col, row) {
+      const value = get(row, col.col_field)
+      if (col.type === 'boolean') {
+        return value ? 'Тийм' : 'Үгүй'
+      } else if (col.type === 'date') {
+        if (!value) {
+          return ''
+        }
+        return this.$moment(value).format('YYYY-MM-DD')
+      } else if (col.type === 'datetime') {
+        if (!value) {
+          return ''
+        }
+        return this.$moment(value).format('YYYY-MM-DD HH:mm')
+      }
+      return value
+    },
+    handleFormSearch (col) {
+      this.$emit('form-search', col)
+    },
+    handleChange (col, $event) {
+      this.$emit('temp-change', $event)
+    }
+  }
+}
+</script>

package/comps/CoreFormSub.vue

@@ -0,0 +1,118 @@
+<template>
+  <div v-if="initted && table">
+    <core-form
+      ref="coreForm"
+      :temp="temp"
+      :columns="columns"
+      :rules="rules"
+      :table="table"
+      :pk_field_name="project.pk_field_name"
+      :show-pkid="showPkid"
+      :has-password="hasPassword"
+      :project-id="project._id"
+      :ref-columns="refColumns"
+      :config_group_fields="config_group_fields"
+      :config_form_menus="config_form_menus"
+      hide-log
+      no-padding
+      default-size="small"
+      @temp-change="handleTempChange"
+    />
+    <div class="pb-2 flex justify-center">
+      <el-button
+        type="success"
+        :loading="saving"
+        :disabled="restoringPassword"
+        size="small"
+        plain
+        icon="el-icon-check"
+        @click="handleSave"
+      >
+        Хадгалах
+      </el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { tableData, tableMethods, tableComputed, tableWatch, getAsyncData } from '@/../core-components/utils/table-helper'
+export default {
+  name: 'CoreFormSub',
+  props: {
+    table_name: { type: String, default: '' },
+    projectId: { type: [Number, String], default: '' },
+    sub: { type: String, default: null },
+    tempId: { type: String, default: null },
+    refColumn: { type: Object, default: () => { return null } },
+    autoHeight: { type: Boolean, default: false },
+    hideExcel: { type: Boolean, default: false },
+    noSearch: { type: Boolean, default: false },
+    plainButton: { type: Boolean, default: false },
+    apiName: { type: String, default: null },
+    showPkid: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      ...tableData,
+      isFormSub: true,
+      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,
+      initted: false
+    }
+  },
+  computed: {
+    ...tableComputed,
+    tableName () {
+      return this.table?.name
+    }
+  },
+  watch: {
+    ...tableWatch
+  },
+  mounted () {
+    this.handleGetConfig()
+  },
+  methods: {
+    ...tableMethods,
+    async handleGetConfig () {
+      try {
+        this.initted = false
+        const config = await getAsyncData({
+          tableName: this.refColumn ? this.refColumn.ref_table : this.table_name,
+          projectId: this.projectId,
+          sub: this.refColumn ? this.refColumn._id : this.sub,
+          $axios: this.$axios,
+          id: this.tempId,
+          apiName: this.apiName,
+          error: this.$nuxt.error
+        })
+        for (const configKey in config) {
+          this[configKey] = config[configKey]
+        }
+        this.$nextTick(() => {
+          this.resetSearch()
+          this.resetDefaultTemp()
+          this.resetTemp()
+        })
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.initted = true
+      }
+    }
+  }
+}
+</script>