@arkxos/arkos-system 0.1.0

package/src/codeless/view/table.vue

@@ -0,0 +1,1606 @@
+<template>
+  <div
+    v-if="!initializing"
+    ref="tableBox"
+    :class="[
+      'cc-table cc-flex-column',
+      tableFullscreen ? 'padding-10' : '',
+      props.autoHeight === '1' ? 'cc-grow-height' : ''
+    ]"
+  >
+    <div
+      v-if="tipsTopHtml"
+      class="cc-table-tips-top"
+      v-html="tipsTopHtml"
+    ></div>
+    <div
+      v-if="tableInfo.showFull === '1' || tableInfo.showHeaderSetting === '1'"
+      class="show-table-fullscreen"
+    >
+      <cc-icon
+        v-if="tableInfo.showHeaderSetting === '1'"
+        iconId="018ece4f712124866f78"
+        title="显示字段设置"
+        style="color: var(--table-setting-icon-color);"
+        @click="showHeaderSetting"
+      />
+      <cc-icon
+        v-if="tableInfo.showFull === '1'"
+        style="margin-left: 8px;color: var(--table-fullscreen-icon-color);"
+        iconId="018dca8cad1b28075ecd"
+        title="最大化显示"
+        @click="showFullscreen"
+      />
+    </div>
+    <el-table
+      ref="dataTable"
+      v-loading="querying"
+      element-loading-text="数据加载中..."
+      width="100%"
+      :style="{'user-select': isDragger ? 'none' : ''}"
+      highlight-current-row
+      :show-header="tableInfo.showHeader === '1'"
+      :data="dataList"
+      :border="tableInfo.showBorder === '1'"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      :row-class-name="rowClassName"
+      :class="['cc-table', props.autoHeight === '1' ? 'cc-grow-height' : '']"
+      :row-key="pkFieldName"
+      :span-method="colspan ? colspanMethod : null"
+      :show-summary="showSummary"
+      :summary-method="getSummaries"
+      @sort-change="sortChange"
+      @row-click="rowClick"
+      @row-dblclick="rowDbClick"
+      @selection-change="selectionChange"
+      @keydown="handleKeyDown"
+      @mousedown="handleMouseDown"
+      @mousemove="handleMouseMove"
+      @mouseup="handleMouseUp"
+    >
+      <template #empty>
+        <div class="el-table__empty-block">
+          <img v-if="!querying" src="@/assets/images/no-data.png" style="width: 100px" alt />
+          <span v-if="!querying" style="min-width: 100px">暂无数据</span>
+        </div>
+      </template>
+      <el-table-column
+        v-if="tableInfo.showCheckbox === '1'"
+        header-align="center"
+        align="center"
+        type="selection"
+        :reserve-selection="pageSelected === '1'"
+        width="40"
+        :show-overflow-tooltip="false"
+      ></el-table-column>
+      <el-table-column
+        v-if="tableInfo.showOrdinal === '1'"
+        header-align="center"
+        align="center"
+        type="index"
+        width="50"
+        label="序号"
+        :show-overflow-tooltip="false"
+      ></el-table-column>
+      <el-table-column
+        v-for="column in columnList"
+        :key="column.id"
+        :header-align="align[column.headerAlign] || 'center'"
+        :align="align[column.contentAlign] || 'center'"
+        :prop="column.fieldName"
+        :label="column.aliasName"
+        :width="column.width && column.width < 0 ? null : column.width"
+        :min-width="column.width && column.width < 0 ? column.width * -1 : null"
+        :class-name="column.wrap === '1' ? 'wrap' : 'nowrap'"
+        :sortable="column.sortable == null ? 'custom' : column.sortable"
+        :fixed="column.fixed === '1' ? true : null"
+        :show-overflow-tooltip="(column.canEdit === '1'
+              && (column.fieldType === '字符'
+                || column.fieldType === '整数'
+                || column.fieldType === '小数'
+                || column.fieldType === '日期'
+                || column.fieldType === '联动')) ? false :
+        {
+          'effect': 'light',
+          'raw-content': false,
+          'placement': 'bottom',
+          'popper-class': 'padding-10-15'
+        }"
+      >
+        <template
+          v-if="column.canEdit === '1'
+              && (column.fieldType === '字符'
+                || column.fieldType === '整数'
+                || column.fieldType === '小数'
+                || column.fieldType === '日期'
+                || column.fieldType === '联动')"
+          v-slot="scope"
+        >
+          <table-edit-item
+            :column="column"
+            :single="true"
+            :data="scope.row"
+            @change="() => changeValue(column.fieldName, scope.row)"
+          />
+        </template>
+        <template v-else v-slot="scope">
+          <!-- 字符、整数、小数、日期、时间、图片、视频、附件 -->
+          <cc-icon
+            v-if="column.showRelevanceIcon === '1'
+              && (scope.row[column.fieldName] || scope.row[column.fieldName + '_name'])"
+            style="margin-right: 5px;font-size: 14px;flex-shrink: 0;"
+            iconId="018ece4f6f023fdc6614"
+            class="relevance"
+          />
+          <div
+            v-if="column.fieldType === '图片' && scope.row[column.fieldName]"
+            style="display: flex;max-width: 30px;max-height: 30px;"
+          >
+            <el-image
+              style="max-width: 100%;max-height: 100%"
+              preview-teleported
+              hide-on-click-modal
+              :src="imageUrl + scope.row[column.fieldName]"
+              :preview-src-list="[imageUrl + scope.row[column.fieldName]]"
+              fit="scale-down"
+            />
+          </div>
+          <cc-video-view
+            v-else-if="column.fieldType === '视频' && scope.row[column.fieldName]"
+            :videoId="scope.row[column.fieldName]"
+          />
+          <cc-affix-view
+            v-else-if="column.fieldType === '附件' && scope.row[column.fieldName]"
+            :affixId="scope.row[column.fieldName]"
+            :reload="changePage"
+          />
+          <span
+            v-else-if="column.fieldType === '小数'"
+          >
+            {{
+              scope.row[column.fieldName] === 0 || scope.row[column.fieldName]
+                ? tool.formatMoney(parseFloat(scope.row[column.fieldName] || '0'), column.dataField.fieldPrecision) : ''
+            }}
+          </span>
+          <span
+            v-else-if="column.fieldType === '时间'"
+            :class="['overflow-ellipsis', column.pageId ? 'relevance' : '']"
+            @click="() => relevanceClick(column, scope.row)"
+          >{{date.formatLongDate(scope.row[column.fieldName])}}</span>
+          <span
+            v-else-if="column.fieldType === '字符'
+              && (column.dataField.enumerateType === '单位多选'
+                || column.dataField.enumerateType === '企业多选'
+                || column.dataField.enumerateType === '部门多选')"
+            class="overflow-ellipsis"
+          ><cc-show-organizations :ids="scope.row[column.fieldName]" /></span>
+          <span
+            v-else-if="column.fieldType === '字符' && column.dataField.enumerateType === '人员多选'"
+            class="overflow-ellipsis"
+          ><cc-show-employees :ids="scope.row[column.fieldName]" /></span>
+          <span
+            v-else-if="column.fieldType === '字符' && column.dataField.enumerateType === '角色多选'"
+            class="overflow-ellipsis"
+          ><cc-show-roles :ids="scope.row[column.fieldName]" /></span>
+          <span
+            v-else-if="column.fieldType === '联动' && column.dataField.relevanceType.startsWith('字典')"
+            class="overflow-ellipsis"
+          ><cc-show-dict :dictCode="column.dataField.relevanceDict" :dictValue="scope.row[column.fieldName]" /></span>
+          <span
+            v-else-if="column.styleList && column.styleList.length > 0"
+            :class="['overflow-ellipsis custom-style', column.pageId ? 'relevance' : '']"
+            @click="() => relevanceClick(column, scope.row)"
+            v-html="parseFieldStyle(
+              column.styleList,
+              scope.row[column.fieldType === '联动' ? (column.fieldName + '_name') : column.fieldName],
+              scope.row
+            )"
+          ></span>
+          <span
+            v-else
+            :class="['overflow-ellipsis', column.pageId ? 'relevance' : '']"
+            @click="() => relevanceClick(column, scope.row)"
+            :style="column.contentColor ? ('color: ' + column.contentColor) : ''"
+          >{{scope.row[column.fieldType === '联动' ? (column.fieldName + '_name') : column.fieldName]}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="tableInfo.showOperate === '1' && buttonList.length > 0"
+        header-align="center"
+        align="center"
+        label="操作"
+        fixed="right"
+        :width="buttonList.length * 38 + 30"
+        :show-overflow-tooltip="false"
+      >
+        <template v-slot="scope">
+          <div class="cc-button">
+            <div
+              class="cc-button-item"
+              v-for="(button, index) in buttonList.filter(item => checkButtonShow(item, scope.row, dataFieldList))"
+              :key="index"
+            >
+              <el-tooltip
+                placement="bottom"
+                :enterable="false"
+                :show-after="0"
+                :hide-after="0"
+                :content="button.name"
+                popper-class="padding-10-15"
+                effect="light"
+              >
+                <el-button
+                  circle
+                  :style="{
+                    'color': button.fontColor,
+                    'background-color': button.backgroundColor,
+                    'border': '1px solid ' + button.borderColor
+                  }"
+                  @click.stop="buttonClick(button, scope.row)"
+                >
+                  <cc-icon
+                    :iconId="button.iconId"
+                    :color="button.fontColor"
+                  />
+                </el-button>
+              </el-tooltip>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <template v-if="$slots.append" #append>
+        <slot name="append"></slot>
+      </template>
+    </el-table>
+    <div class="cc-table-footer">
+      <div class="cc-table-refresh">
+        <el-checkbox
+          v-if="!dialogMode && showRefresh === '1'"
+          v-model="autoRefresh"
+          @change="changeAutoRefresh"
+          style="margin-right: 10px;"
+        >
+          <el-tooltip
+            effect="light"
+            popper-class="padding-10-15"
+            content="勾选自动刷新时，如有数据更新时自动刷新表格数据"
+            :enterable="false"
+          >自动刷新</el-tooltip>
+        </el-checkbox>
+        <el-checkbox
+          v-model="isDragger"
+          style="margin-right: 10px;"
+        >
+          <el-tooltip
+            effect="light"
+            popper-class="padding-10-15"
+            content="拖动模式下，在表格中按住鼠标左键，可左右拖动表格，拖动模型下无法选中内容。"
+            :enterable="false"
+          >拖动模式</el-tooltip>
+        </el-checkbox>
+        <span v-if="pageSelected === '1'">已选数据：
+          <span style="cursor: pointer" @click="showSelected">{{selectedCnt}}</span> 条
+        </span>
+      </div>
+      <div v-if="tableInfo.showPagination === '1'" class="cc-pagination">
+        <el-pagination
+          layout="total, prev, pager, next, jumper, sizes"
+          :current-page="queryInfo.pageNumber"
+          :page-sizes="[10, 20, 50, 100, 500]"
+          :page-size="queryInfo.pageSize"
+          :total="dataTotal"
+          @current-change="(pageNumber) => queryTableData(true, pageNumber)"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+    <div
+      v-if="tipsBottomHtml"
+      class="cc-table-tips-bottom"
+      v-html="tipsBottomHtml"
+    ></div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :width="dialogWidth"
+      :close-on-click-modal="false"
+      :fullscreen="dialogFullscreen"
+      :before-close="closeDialog"
+      @close="dialogClose"
+      class="cc-page-comp-dialog no-padding"
+      append-to-body
+      destroy-on-close
+      draggable
+    >
+      <template #header>
+        <div class="header" @dblclick="dialogFullscreen=!dialogFullscreen">
+          <div class="title">{{dialogTitle}}</div>
+          <div class="button">
+            <cc-icon
+              v-if="!dialogFullscreen"
+              iconId="018dca8cad1b28075ecd"
+              @click="dialogFullscreen=true"
+              title="最大化"
+            />
+            <cc-icon
+              v-if="dialogFullscreen"
+              iconId="018dca8cad1b9b03c47f"
+              @click="dialogFullscreen=false"
+              title="缩小"
+            />
+          </div>
+        </div>
+      </template>
+      <Page
+        :dataPageId="dialogPageId"
+        :inputParam="dialogInputParam"
+        :disabled="true"
+        :dialogMode="true"
+        @updatePageName="name => dialogTitle = (name || '页面展示').split('_')[0]"
+        @showDialogButton="showDialogButton"
+      />
+      <template #footer v-if="dialogFooter">
+        <el-button
+          size="default"
+          type="info"
+          @click="dialogVisible = false"
+        >关闭</el-button>
+        <el-button
+          v-for="(button, index) in dialogButtonList"
+          :key="index"
+          size="default"
+          class="base-button"
+          :type="button.type || 'primary'"
+          :style="button.color ? {
+            'color': 'white',
+            'background-color': button.color,
+            'border': '1px solid ' + button.color
+          } : {}"
+          :loading="button.loading"
+          @click="clickButton(button)"
+        >{{button.name}}</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="selectedVisible"
+      :close-on-click-modal="false"
+      :before-close="closeDialog"
+      class="cc-page-comp-dialog no-padding"
+      append-to-body
+      destroy-on-close
+      fullscreen
+      draggable
+    >
+      <template #header>
+        <div class="header">
+          <div class="title">已选数据</div>
+        </div>
+      </template>
+      <div class="cc-page">
+        <el-table
+          width="100%"
+          :data="selectedList"
+          :border="true"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+        >
+          <template #empty>
+            <div class="el-table__empty-block">
+              <span style="min-width: 100px">未选数据</span>
+            </div>
+          </template>
+          <el-table-column
+            v-for="column in columnList"
+            :key="column.id"
+            :header-align="align[column.headerAlign] || 'center'"
+            :align="align[column.contentAlign] || 'center'"
+            :prop="column.fieldName"
+            :label="column.aliasName"
+            :width="column.width && column.width < 0 ? null : column.width"
+            :min-width="column.width && column.width < 0 ? column.width * -1 : null"
+            :sortable="false"
+            :fixed="column.fixed === '1' ? true : null"
+            :show-overflow-tooltip="(column.canEdit === '1'
+                && (column.fieldType === '字符'
+                  || column.fieldType === '整数'
+                  || column.fieldType === '小数'
+                  || column.fieldType === '日期'
+                  || column.fieldType === '联动')) ? false :
+              {
+                'effect': 'light',
+                'raw-content': false,
+                'placement': 'bottom',
+                'popper-class': 'padding-10-15'
+              }"
+          >
+            <template v-slot="scope">
+              <!-- 字符、整数、小数、日期、时间、图片、视频、附件 -->
+              <el-image
+                v-if="column.fieldType === '图片' && scope.row[column.fieldName]"
+                style="display: inline-table"
+                preview-teleported
+                hide-on-click-modal
+                :src="imageUrl + scope.row[column.fieldName]"
+                :preview-src-list="[imageUrl + scope.row[column.fieldName]]"
+                fit="scale-down"
+              />
+              <cc-video-view
+                v-else-if="column.fieldType === '视频' && scope.row[column.fieldName]"
+                :videoId="scope.row[column.fieldName]"
+              />
+              <cc-affix-view
+                v-else-if="column.fieldType === '附件' && scope.row[column.fieldName]"
+                :affixId="scope.row[column.fieldName]"
+                :reload="changePage"
+              />
+              <span
+                v-else-if="column.fieldType === '小数'"
+              >
+                {{
+                  scope.row[column.fieldName] === 0 || scope.row[column.fieldName]
+                    ? tool.formatMoney(parseFloat(scope.row[column.fieldName] || '0'), column.dataField.fieldPrecision) : ''
+                }}
+              </span>
+              <span
+                v-else-if="column.fieldType === '时间'"
+                :class="['overflow-ellipsis', column.pageId ? 'relevance' : '']"
+                @click="() => relevanceClick(column, scope.row)"
+              >{{date.formatLongDate(scope.row[column.fieldName])}}</span>
+              <span
+                v-else-if="column.fieldType === '字符'
+              && (column.dataField.enumerateType === '单位多选'
+                || column.dataField.enumerateType === '企业多选'
+                || column.dataField.enumerateType === '部门多选')"
+                class="overflow-ellipsis"
+              ><cc-show-organizations :ids="scope.row[column.fieldName]" /></span>
+              <span
+                v-else-if="column.fieldType === '字符' && column.dataField.enumerateType === '人员多选'"
+                class="overflow-ellipsis"
+              ><cc-show-employees :ids="scope.row[column.fieldName]" /></span>
+              <span
+                v-else-if="column.fieldType === '字符' && column.dataField.enumerateType === '角色多选'"
+                class="overflow-ellipsis"
+              ><cc-show-roles :ids="scope.row[column.fieldName]" /></span>
+              <span
+                v-else-if="column.fieldType === '联动' && column.dataField.relevanceType.startsWith('字典')"
+                class="overflow-ellipsis"
+              ><cc-show-dict :dictCode="column.dataField.relevanceDict" :dictValue="scope.row[column.fieldName]" /></span>
+              <span
+                v-else-if="column.styleList && column.styleList.length > 0"
+                :class="['overflow-ellipsis custom-style', column.pageId ? 'relevance' : '']"
+                @click="() => relevanceClick(column, scope.row)"
+                v-html="parseFieldStyle(
+                  column.styleList,
+                  scope.row[column.fieldType === '联动' ? (column.fieldName + '_name') : column.fieldName],
+                  scope.row
+                )"
+              ></span>
+              <span
+                v-else
+                :class="['overflow-ellipsis', column.pageId ? 'relevance' : '']"
+                @click="() => relevanceClick(column, scope.row)"
+                :style="column.contentColor ? ('color: ' + column.contentColor) : ''"
+              >{{scope.row[column.fieldType === '联动' ? (column.fieldName + '_name') : column.fieldName]}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="selectedVisible = false"
+        >关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="showFieldVisible"
+      width="650px"
+      class="cc-page-comp-dialog no-padding"
+      append-to-body
+      destroy-on-close
+      draggable
+    >
+      <template #header>
+        <div class="header">
+          <div class="title">显示字段设置</div>
+        </div>
+      </template>
+      <div class="cc-page cc-flex-column cc-grow-height">
+        <el-row>
+          <el-col :span="24" style="text-align: right;align-content: center;margin-bottom: 8px">
+            <el-button
+              v-if="!sortFieldInst"
+              type="primary"
+              @click="sortDataField"
+            >开启排序</el-button>
+            <el-button
+              v-else
+              type="info"
+              @click="unSortDataField"
+            >关闭排序</el-button>
+            <el-button
+              type="warning"
+              @click="resetField"
+            >恢复默认</el-button>
+          </el-col>
+        </el-row>
+        <el-table
+          ref="sortFieldTable"
+          :show-overflow-tooltip="false"
+          tooltip-effect="light"
+          class="field-table edit-table"
+          width="100%"
+          :data="editColumns"
+          row-key="id"
+          :border="true"
+          :stripe="false"
+          @row-click="fieldRowClick"
+        >
+          <el-table-column
+            type="selection"
+            width="50"
+            header-align="center"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            label="字段名称"
+            :min-width="120"
+            prop="aliasName"
+          />
+          <el-table-column
+            header-align="center"
+            label="列宽"
+            :width="120"
+            prop="width"
+          >
+            <template #header>
+              <el-tooltip>
+                <template #content>
+                  <div>0时为自动宽度,负数时为最小宽度</div>
+                </template>
+                <span style="display: inline-flex">
+                  <span style="margin-right: 5px">列宽</span>
+                  <cc-icon iconId="018dca8ec9890493be26" />
+                </span>
+              </el-tooltip>
+            </template>
+            <template #default="scope">
+              <el-input-number v-model="scope.row.width" controls-position="right" :min="-1000" style="width: 100%"/>
+            </template>
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            label="表头对齐方式"
+            width="110"
+            prop="headerAlign"
+          >
+            <template #default="scope">
+              <el-select v-model="scope.row.headerAlign">
+                <el-option label="居左" value="居左"></el-option>
+                <el-option label="居中" value="居中"></el-option>
+                <el-option label="居右" value="居右"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            label="内容对齐方式"
+            width="110"
+            prop="contentAlign"
+          >
+            <template #default="scope">
+              <el-select v-model="scope.row.contentAlign">
+                <el-option label="居左" value="居左"></el-option>
+                <el-option label="居中" value="居中"></el-option>
+                <el-option label="居右" value="居右"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="showFieldVisible = false"
+        >取消</el-button>
+        <el-button
+          size="default"
+          type="primary"
+          @click="saveShowField"
+        >确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { h, ref, onMounted, nextTick, onUnmounted, markRaw, inject, computed } from 'vue';
+import loading from '@/utils/loading';
+import api from '@/http/api';
+import tool from '@/utils/tool';
+import Page from '@/codeless/view/page.vue';
+import { ElMessage } from 'element-plus';
+import TableEditItem from '@/codeless/view/table-edit-item.vue';
+import { checkButtonShow } from '@/codeless/js/codeless';
+import date from '@/utils/date';
+import { useCache } from '@/utils/cache';
+import emitter from '@/utils/bus';
+import { useUserStore } from '@/pinia/modules/user';
+import { getDataTable, getDataFieldList } from '@/utils/codeless';
+import screenFull from 'screenfull';
+import Sortable from 'sortablejs';
+
+const emit = defineEmits(['buttonClick', 'editChange', 'showDetail', 'selectionChange']);
+const props = defineProps({
+  pageCompId: String,
+  dataTableId: String,
+  dataFormId: String,
+  buttonList: Array,
+  pkFieldName: {
+    type: String,
+    default: 'id'
+  },
+  dataFieldList: Array,
+  autoHeight: String,
+  showRefresh: String,
+  pageSelected: {
+    type: String,
+    default: '0'
+  },
+  defaultQuery: Object,
+  inputParam: {
+    type: Object,
+    default: () => {}
+  },
+  inputParamList: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const initializing = ref(true);
+const userStore = useUserStore();
+const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
+const queryInfo = ref({
+  inputParamList: props.inputParamList || {},
+  pageNumber: 1,
+  pageSize: 20
+});
+const queryData = ref({});
+const querying = ref(false);
+const changePage = ref(false);
+const tableBox = ref();
+const dataTable = ref();
+const dataTotal = ref(0);
+const dataList = ref([]);
+const colspan = ref(false);
+const colspanField = ref([]);
+const colspanList = ref([]);
+const showSummary = ref(false);
+const summaryFieldId = ref('');
+const summaryName = ref('合计');
+const summaryFieldIds = ref([]);
+const dataFieldList = ref([]);
+
+const tableInfo = ref({});
+const allColumnList = ref({});
+const columnList = ref({});
+const showColumns = ref([]);
+const buttonList = ref({});
+const tipsTopHtml = ref('');
+const tipsBottomHtml = ref('');
+const align = ref({ 居左: 'left', 居中: 'center', 居右: 'right' });
+
+const dialogTitle = ref('');
+const dialogWidth = ref('');
+const dialogFullscreen = ref(false);
+const dialogFooter = ref(false);
+const dialogField = ref({});
+const dialogVisible = ref(false);
+const dialogPageId = ref('');
+const dialogInputParam = ref({});
+const dialogMode = inject('dialogMode', props.dialogMode || false);
+const dialogButtonList = ref([]);
+const autoRefresh = ref(false);
+const selectedVisible = ref(false);
+const selectedList = ref([]);
+const selectedRows = ref([]);
+const showFieldVisible = ref(false);
+const editColumns = ref([]);
+
+const sortFieldTable = ref();
+const sortFieldInst = ref();
+const { wsCache } = useCache();
+
+const buttonClick = (button, data) => {
+  emit('buttonClick', button, data)
+};
+
+const sortChange = (sort) => {
+  const field = columnList.value.find(item => item.id === sort.column.rawColumnKey);
+  const fieldName = field.fieldType === '联动' ? (field.fieldName + '_name') : field.fieldName;
+  if (sort.order === 'ascending') {
+    queryInfo.value.sortField = fieldName;
+    queryInfo.value.sortType = 'asc';
+  } else if (sort.order === 'descending') {
+    queryInfo.value.sortField = fieldName;
+    queryInfo.value.sortType = 'desc';
+  } else {
+    queryInfo.value.sortField = null;
+    queryInfo.value.sortType = null;
+  }
+  queryTableData(true, 1);
+};
+
+const relevanceClick = async(column, row) => {
+  const field = columnList.value.find(item => item.id === column.id);
+  if (!field ||
+    !field.pageId ||
+    typeof row[field.fieldName] === 'undefined' ||
+    row[field.fieldName] == null ||
+    row[field.fieldName] === '') return;
+  await showFieldPage(field, row);
+}
+
+const showFieldPage = async(field, data) => {
+  const inputParam = {};
+  JSON.parse(field.pageFieldJson || '[]').forEach(param => {
+    if (param.fieldName && data[param.fieldName]) {
+      inputParam[param.pageParamId] = data[param.fieldName];
+    } else if (!param.fieldName && param.fieldId) {
+      inputParam[param.pageParamId] = param.fieldId;
+      inputParam[param.pageParamName] = param.fieldId;
+    }
+  });
+  if (field.openScriptId) {
+    loading.showLoading();
+    const param = { dataTableField: field, inputParam: inputParam };
+    const res = await api.runScript(field.openScriptId, param);
+    if (field.showExecuteResult === '1' && res.message) {
+      ElMessage.info(res.message);
+    }
+    loading.hideLoading();
+  }
+  dialogField.value = field;
+  dialogTitle.value = (field.pageName || '页面展示').split('_')[0];
+  dialogWidth.value = field.dialogWidth ? field.dialogWidth : '800px';
+  dialogFullscreen.value = field.fullscreenDialog === '1';
+  dialogPageId.value = field.pageId;
+  dialogFooter.value = field.showCloseButton === '1';
+  dialogInputParam.value = inputParam;
+  dialogVisible.value = true;
+};
+
+const showDialogButton = (buttonList) => {
+  dialogButtonList.value = buttonList;
+};
+
+const clickButton = (button) => {
+  button.loading = true;
+  try {
+    button.click();
+  } catch (e) {
+    console.log(e);
+  } finally {
+    button.loading = false;
+  }
+}
+
+const showFullscreen = () => {
+  if (screenFull.isEnabled) {
+    screenFull.toggle(tableBox.value);
+  }
+};
+
+const tableFullscreen = ref(false);
+const toggleTableFullscreen = () => {
+  if (screenFull.isFullscreen) {
+    if (document.fullscreenElement && document.fullscreenElement.id && document.fullscreenElement.id === tableBox.value.id) {
+      tableFullscreen.value = screenFull.isFullscreen;
+    }
+  } else {
+    tableFullscreen.value = false;
+  }
+};
+
+const showHeaderSetting = () => {
+  unSortDataField();
+  const list = tool.deepClone(allColumnList.value);
+  showFieldVisible.value = true;
+  editColumns.value = [];
+  if (!showColumns.value || showColumns.value.length === 0) {
+    editColumns.value = list;
+    editColumns.value.forEach(item => item.checked = true);
+    nextTick(() => {
+      sortFieldTable.value.toggleAllSelection();
+    });
+  } else {
+    showColumns.value.forEach(item => {
+      const column = list.find(field => field.id === item.id);
+      if (column) {
+        column.width = item.width;
+        column.headerAlign = item.headerAlign;
+        column.contentAlign = item.contentAlign;
+        column.checked = true;
+        editColumns.value.push(column);
+      }
+    });
+    list.forEach(field => {
+      if (!showColumns.value.find(column => column.id === field.id)) {
+        field.checked = false;
+        editColumns.value.push(field);
+      }
+    });
+
+    nextTick(() => {
+      editColumns.value.forEach(item => {
+        sortFieldTable.value.toggleRowSelection(item, item.checked === true);
+      });
+    });
+  }
+};
+
+const saveShowField = () => {
+  const key = getStoreKey();
+  const showFields = sortFieldTable.value.getSelectionRows();
+  if (showFields && showFields.length > 0) {
+    showColumns.value = showFields;
+    wsCache.set(key, JSON.stringify(showColumns.value));
+  } else {
+    showColumns.value = [];
+    wsCache.delete(key);
+  }
+
+  resolveShowColumn();
+  showFieldVisible.value = false;
+};
+
+const fieldRowClick = (row) => {
+  sortFieldTable.value.toggleRowSelection(row);
+};
+
+const getStoreKey = () => {
+  return (props.pageCompId || 'pcId') + '_' + (props.dataTableId || 'dtId');
+};
+
+const resolveShowColumn = () => {
+  if (!showColumns.value || showColumns.value.length === 0) {
+    columnList.value = allColumnList.value;
+  } else {
+    const list = [];
+    showColumns.value.forEach(item => {
+      const field = allColumnList.value.find(column => column.id === item.id);
+      field.width = item.width;
+      field.headerAlign = item.headerAlign;
+      field.contentAlign = item.contentAlign;
+      list.push(item);
+    });
+    columnList.value = list.length > 0 ? list : allColumnList.value;
+  }
+};
+
+const resetField = () => {
+  showColumns.value = [];
+  wsCache.delete(getStoreKey());
+  resolveShowColumn();
+  showFieldVisible.value = false;
+};
+
+const sortDataField = () => {
+  if (sortFieldInst.value) {
+    sortFieldInst.value.destroy();
+  }
+
+  if (sortFieldTable.value) {
+    const el = sortFieldTable.value.$el.querySelector('.el-table__body-wrapper tbody');
+    sortFieldInst.value = Sortable.create(el, {
+      handle: '.el-table__row',
+      onEnd: ({ newIndex, oldIndex }) => {
+        const list = tool.deepClone(editColumns.value);
+        const currRow = list.splice(oldIndex, 1)[0];
+        list.splice(newIndex, 0, currRow);
+        nextTick(() => {
+          editColumns.value = list;
+
+          nextTick(() => {
+            editColumns.value.forEach(item => {
+              sortFieldTable.value.toggleRowSelection(item, item.checked === true);
+            });
+          });
+        });
+      }
+    });
+  }
+};
+
+const unSortDataField = () => {
+  if (sortFieldInst.value) {
+    sortFieldInst.value.destroy();
+  }
+  sortFieldInst.value = null;
+};
+
+const closeDialog = (done) => {
+  const viewer = document.getElementsByClassName('el-image-viewer__wrapper')[0];
+  if (!viewer) {
+    done();
+  }
+};
+
+const dialogClose = () => {
+  if (dialogField.value) {
+    if (dialogField.value.closeRefresh === '1') {
+      refreshData();
+    }
+
+    if (dialogField.value.closeScriptId) {
+      const data = { dataTableField: dialogField.value, inputParam: dialogInputParam.value }
+      api.runScript(dialogField.value.closeScriptId, data).then(res => {
+        if (dialogField.value.showExecuteResult === '1' && res.message) {
+          ElMessage.info(res.message);
+        }
+      });
+    }
+  }
+};
+
+const rowClassName = ({ row }) => {
+  return selectedRows.value.find(item => item[props.pkFieldName] === row[props.pkFieldName]) ? 'is-selected' : '';
+};
+
+const rowClick = (row, column, event) => {
+  if (!(event.ctrlKey || event.metaKey)) {
+    dataTable.value.clearSelection();
+  }
+  dataTable.value.toggleRowSelection(row);
+};
+
+const rowDbClick = (row) => {
+  if (props.dataFormId) {
+    emit('showDetail', row);
+  } else {
+    const field = columnList.value.find(field => field.pageId && row[field.fieldName]);
+    if (field) showFieldPage(field, row);
+  }
+};
+
+const selectionChange = (selectionList) => {
+  selectedRows.value = selectionList;
+  emit('selectionChange', selectionList);
+};
+
+const handleSizeChange = (pageSize) => {
+  queryInfo.value.pageSize = pageSize
+  queryTableData(true, 1)
+};
+
+const queryTableData = (showLoading, pageNumber) => {
+  let url;
+  if (props.pageCompId) {
+    url = '/codeless/page-comp/' + props.pageCompId + '/page';
+  } else {
+    url = '/codeless/' + props.dataTableId + '/page';
+  }
+
+  if (typeof pageNumber !== 'undefined') {
+    queryInfo.value.pageNumber = pageNumber
+  }
+
+  querying.value = typeof showLoading === 'undefined' ? true : showLoading || false;
+  const data = Object.assign({}, queryData.value, queryInfo.value);
+  api.post(url, data).then((res) => {
+    dataTotal.value = res.totalRecord || 0;
+    dataList.value = markRaw(res.data);
+    queryInfo.value.pageSize = res.pageSize || queryInfo.value.pageSize;
+    calcColspan(dataList.value);
+    querying.value = false;
+    changePage.value = !changePage.value;
+    selectionChange([]);
+    cleanRefreshData();
+  }).catch(() => {
+    querying.value = false
+  });
+};
+
+const loadData = async(tableId) => {
+  loading.showLoading();
+  try {
+    await loadTableInfo(tableId);
+    await loadDataField(tableInfo.value.modelId);
+    await initTableData();
+    await initQueryInfo();
+    await initColumnList();
+    await initButtonList();
+    await initTips();
+    loading.hideLoading();
+  } finally {
+    loading.hideLoading();
+  }
+};
+
+const initTips = async() => {
+  if (tableInfo.value.tipsOrigin === '输入') {
+    if (tableInfo.value.tipsPosition === '顶部') {
+      tipsTopHtml.value = tableInfo.value.tipsHtml || {};
+    } else {
+      tipsBottomHtml.value = tableInfo.value.tipsHtml || {};
+    }
+  }
+
+  if (tableInfo.value.tipsOrigin === '脚本' && tableInfo.value.tipsScriptId) {
+    const res = await api.runScript(tableInfo.value.tipsScriptId);
+    if (tableInfo.value.tipsPosition === '顶部') {
+      tipsTopHtml.value = res.data || '';
+    } else {
+      tipsBottomHtml.value = res.data || '';
+    }
+  }
+};
+
+const loadTableInfo = async(tableId) => {
+  tableInfo.value = await getDataTable(tableId);
+
+  colspanList.value = [];
+  colspanField.value = [];
+  tableInfo.value.fieldList.forEach(field => {
+    if (field.ifMerge === '1') {
+      colspanField.value.push(field.fieldName);
+    }
+  });
+  colspan.value = colspanField.value.length > 0;
+
+  if (tableInfo.value.totalJson && tableInfo.value.totalJson.startsWith('{')) {
+    const json = JSON.parse(tableInfo.value.totalJson);
+    summaryFieldId.value = json.summaryFieldId || '';
+    summaryName.value = json.summaryName || '合计';
+    summaryFieldIds.value = json.summaryFieldIds || [];
+    showSummary.value = json.showSummary === '1' && summaryFieldIds.value.length > 0;
+  } else {
+    showSummary.value = false;
+    summaryFieldIds.value = [];
+  }
+};
+
+const loadDataField = async(modelId) => {
+  if (props.dataFieldList && props.dataFieldList.length > 0) {
+    dataFieldList.value = props.dataFieldList;
+  } else {
+    dataFieldList.value = await getDataFieldList(modelId);
+  }
+};
+
+const colspanMethod = (data) => {
+  const columnSpan = colspanList.value[data.column.property];
+  return columnSpan && columnSpan[data.rowIndex] || [1, 1];
+};
+
+const calcColspan = (dataList) => {
+  if (!colspan.value || colspanField.value.length <= 0 || !dataList || dataList.length <= 0) return;
+
+  colspanList.value = [];
+  colspanField.value.forEach((field, fieldIndex) => {
+    let preValue = '';
+    let sameIndex = 0;
+    colspanList.value[field] = [];
+    colspanList.value[field].push(new Array(dataList.length).fill([1, 1]));
+
+    dataList.forEach((data, rowIndex) => {
+      const currValue = data[field] || '';
+      if (currValue !== preValue) {
+        sameIndex = 0;
+        preValue = currValue;
+      }
+      sameIndex++;
+
+      let endIndex = -1;
+      const preField = fieldIndex > 0 ? colspanField.value[fieldIndex - 1] : null;
+      if (preField) {
+        endIndex = getEndIndex(colspanList.value, preField, rowIndex);
+      }
+
+      if (sameIndex === 1 && (endIndex === -1 || endIndex > rowIndex)) {
+        let rowCount = countRows(dataList, rowIndex, field, currValue);
+
+        if (endIndex > 0 && rowIndex + rowCount > endIndex) {
+          preValue = undefined;
+          rowCount = endIndex - rowIndex - 1;
+        }
+        colspanList.value[field][rowIndex] = [rowCount > 1 ? rowCount : 1, 1];
+      } else {
+        colspanList.value[field][rowIndex] = [0, 0];
+      }
+    });
+  });
+};
+
+const countRows = (dataList, startIndex, field, value) => {
+  let count = 0;
+  for (let i = startIndex; i < dataList.length; i++) {
+    if ((dataList[i][field] || '') === value) {
+      count++;
+    } else {
+      break;
+    }
+  }
+  return count;
+};
+
+const getEndIndex = (colspanList, field, rowIndex) => {
+  for (let i = rowIndex; i >= 0; i--) {
+    const [rowCount] = colspanList[field][i] || [0, 0];
+    if (rowCount > 0) {
+      return i + rowCount;
+    }
+  }
+  return 0;
+};
+
+const getSummaries = (param) => {
+  if (summaryFieldIds.value.length === 0) return [];
+
+  const { columns, data } = param;
+  const sums = [];
+  columns.forEach((column, index) => {
+    if (!column.property) {
+      sums[index] = '';
+      return;
+    }
+
+    const field = allColumnList.value.find(item => item.fieldName === column.property);
+    if (!field || !field.dataField) {
+      sums[index] = '';
+      return;
+    }
+
+    if (field.dataField.id === summaryFieldId.value) {
+      sums[index] = h('div',
+        {
+          style: {
+            width: '100%',
+            textAlign: 'right',
+            fontWeight: 'bold'
+          }
+        },
+        [summaryName.value]
+      );
+      return;
+    }
+
+    if (summaryFieldIds.value.indexOf(field.dataField.id) < 0) {
+      sums[index] = '';
+      return;
+    }
+
+    const values = data.map((item) => Number(item[field.dataField.fieldName]))
+    if (!values.every((value) => Number.isNaN(value))) {
+      const result = `${values.reduce((prev, curr) => {
+        const value = Number(curr)
+        if (!Number.isNaN(value)) {
+          return prev + curr
+        } else {
+          return prev
+        }
+      }, 0)}`;
+
+      if (field.styleList && field.styleList.length > 0) {
+        sums[index] = h('div', { innerHTML: parseFieldStyle(field.styleList, result, data) });
+      } else {
+        if (field && field.dataField.fieldType === '小数') {
+          sums[index] = tool.formatMoney(parseFloat(result || '0'), field.dataField.fieldPrecision || 0);
+        } else {
+          sums[index] = result;
+        }
+      }
+    } else {
+      sums[index] = '';
+    }
+  });
+
+  return sums;
+};
+
+const initTableData = async() => {
+  queryInfo.value.pageNumber = 1;
+  queryInfo.value.pageSize = tableInfo.value.defaultPageSize || queryInfo.value.pageSize;
+  queryData.value = {};
+  dataList.value = [];
+};
+
+const initQueryInfo = async() => {
+  const inputParamList = [];
+  (props.inputParamList || []).forEach(inputParam => {
+    if (inputParam.length < 2) return;
+
+    const field = dataFieldList.value.find(item => item.id === inputParam[0]);
+    if (field) {
+      inputParamList.push([field.fieldName, inputParam[1], inputParam.length >= 3 ? inputParam[2] : ''])
+    }
+  });
+
+  queryInfo.value.inputParamList = inputParamList;
+  queryData.value = Object.assign(queryData.value, props.defaultQuery || {});
+};
+
+const initButtonList = async() => {
+  buttonList.value = (props.buttonList || [])
+    .filter(item => item.showPosition && item.showPosition.indexOf('行内') >= 0);
+};
+
+const initColumnList = async() => {
+  const fieldList = tool.deepClone(tableInfo.value.fieldList) || [];
+
+  for (const item of fieldList) {
+    const find = dataFieldList.value.find(field => field.id === item.fieldId);
+    if (find) {
+      item.fieldType = find.fieldType;
+      item.fieldName = find.fieldName;
+      item.inputType = find.inputType;
+      item.fieldSize = find.fieldSize;
+      item.enumerate = find.enumerate;
+      item.enumerateType = find.enumerateType;
+      item.relevanceType = find.relevanceType;
+      item.relevanceDict = find.relevanceDict;
+      item.enumerateValue = find.enumerateValue;
+      item.dataField = find;
+    }
+  }
+
+  allColumnList.value = fieldList;
+  try {
+    const json = wsCache.get(getStoreKey()) || '';
+    if (json && json.startsWith('[')) {
+      showColumns.value = JSON.parse(json);
+    }
+  } catch (ignore) {
+    showColumns.value = [];
+  }
+  resolveShowColumn();
+};
+
+const parseFieldStyle = (styleList, value, data) => {
+  if (!styleList || styleList.length === 0) return value || '';
+  value = value || '';
+
+  let resultHtml = '';
+  for (const style of styleList) {
+    if (style.originValue !== value && style.originValue !== '{all}') continue;
+    if (!value && style.originValue !== '{all}') continue;
+
+    if (style.showType === '文字') {
+      const targetValue = style.targetValue ? style.targetValue.replace('{currValue}', value || '') : (value || '');
+      resultHtml = `<span
+            class="${style.flash === '1' ? 'blinking' : ''}"
+            style="color: ${style.showColor || 'inherit'}"
+        >${targetValue}</span>`;
+    } else if (style.showType === '标签') {
+      const targetValue = style.targetValue ? style.targetValue.replace('{currValue}', value || '') : (value || '');
+      resultHtml = `<span
+            class="label ${style.flash === '1' ? 'blinking' : ''}"
+            style="background-color: ${style.showColor || 'inherit'}"
+        >${targetValue}</span>`;
+    } else if (style.showType === '图形') {
+      resultHtml = `<span
+            class="
+                shape
+                ${style.targetValue === '圆形' ? 'circle' : style.targetValue === '正方形' ? 'square' : 'oval'}
+                ${style.flash === '1' ? 'blinking' : ''}"
+            style="background-color: ${style.showColor || 'inherit'}"
+        ></span>`;
+    } else if (style.showType === '时间') {
+      const code = style.targetValue ? style.targetValue.replace('{currValue}', value || '0') : (value || '0');
+      let targetValue = new Function(code)();
+      if (!isNaN(targetValue)) {
+        targetValue = date.formatLongDate(parseInt(targetValue));
+      }
+      resultHtml = `<span
+            class="${style.flash === '1' ? 'blinking' : ''}"
+            style="color: ${style.showColor || 'inherit'}"
+        >${targetValue}</span>`;
+    } else if (style.showType === '时长') {
+      const code = style.targetValue ? style.targetValue.replace('{currValue}', value || '0') : (value || '0');
+      let targetValue = new Function(code)();
+      if (!isNaN(targetValue)) {
+        targetValue = tool.formatTime(parseInt(targetValue));
+      }
+      resultHtml = `<span
+            class="${style.flash === '1' ? 'blinking' : ''}"
+            style="color: ${style.showColor || 'inherit'}"
+        >${targetValue}</span>`;
+    } else if (style.showType === '进度条') {
+      let progress = '0';
+      try {
+        const code = style.targetValue ? style.targetValue.replace('{currValue}', value || '0') : (value || '0');
+        const targetValue = new Function(code)();
+        if (!isNaN(targetValue)) {
+          progress = parseFloat(targetValue).toFixed(2);
+        }
+      } catch (e) {
+        console.log('样式设置解释出错！', e)
+      }
+      resultHtml = `<span class="progress-box">
+          <span
+            class="progress-line"
+            style="background: linear-gradient(90deg, ${style.showColor || 'inherit'}, ${style.showColor || 'inherit'} ${progress}%, transparent 0);"
+          ><span class="progress-text">${progress}%</span></span>
+        </span>`;
+    } else if (style.showType === 'js脚本' && style.targetValue) {
+      const args = {
+        data: data,
+        user: userStore.getUserData(),
+        org: userStore.getOrgData()
+      };
+      try {
+        const value = new Function('args', style.targetValue)(args);
+        resultHtml = `<span
+              class="${style.flash === '1' ? 'blinking' : ''}"
+              style="color: ${style.showColor}"
+          >${value || ''}</span>`;
+      } catch (e) {
+        console.log('样式设置解释出错！', e)
+      }
+    }
+  }
+  return resultHtml;
+};
+
+const changeValue = (prop, row) => {
+  const data = {};
+  data[props.pkFieldName] = row[props.pkFieldName];
+  data[prop] = row[prop];
+  emit('editChange', data);
+};
+
+const refreshData = (showLoading) => {
+  cleanRefreshData();
+  queryTableData(showLoading);
+};
+
+const reloadData = (data) => {
+  queryData.value = Object.assign(queryData.value, data || {});
+  queryTableData(true, 1);
+};
+
+const getSelectedData = () => {
+  return dataTable.value.getSelectionRows();
+};
+
+const getData = () => {
+  return dataTable.value.getSelectionRows();
+};
+
+const selectedCnt = computed(() => {
+  return dataTable.value?.getSelectionRows().length;
+});
+
+const showSelected = () => {
+  selectedList.value = dataTable.value?.getSelectionRows();
+  selectedVisible.value = true;
+};
+
+const getQueryData = () => {
+  return Object.assign(queryData.value, queryInfo.value);
+};
+
+const init = async() => {
+  if (!props.dataTableId) {
+    return;
+  }
+
+  initializing.value = true;
+  await loadData(props.dataTableId);
+  await nextTick(() => initializing.value = false);
+  queryTableData(true, 1);
+};
+
+const autoRefreshKey = 'auto_refresh_' + props.pageCompId + '_' + props.dataTableId;
+const initAutoRefresh = () => {
+  const cacheValue = wsCache.get(autoRefreshKey) || '0';
+  autoRefresh.value = cacheValue === '1';
+}
+
+const changeAutoRefresh = () => {
+  wsCache.set(autoRefreshKey, autoRefresh.value ? '1' : '0');
+}
+
+const refreshDataTimeout = ref();
+const checkAndRefreshData = () => {
+  if (!dialogMode && autoRefresh.value) {
+    cleanRefreshData();
+    refreshDataTimeout.value = setTimeout(() => refreshData(false), 500);
+  }
+};
+
+const cleanRefreshData = () => {
+  if (refreshDataTimeout.value) {
+    clearTimeout(refreshDataTimeout.value);
+  }
+};
+
+const validate = (callback) => {
+  callback(true);
+};
+
+const isDragger = ref(false);
+const isMouseDown = ref(false);
+const initialMouseX = ref();
+const initialScrollLeft = ref();
+
+const handleKeyDown = (event) => {
+  if (event.key === ' ') {
+    event.preventDefault();
+    isDragger.value = !isDragger.value;
+  }
+};
+
+const handleMouseDown = (event) => {
+  if (!isDragger.value) return;
+  initialMouseX.value = event.clientX || 0;
+  const body = dataTable.value.$el.querySelector('.el-table__body-wrapper .el-scrollbar__wrap');
+  initialScrollLeft.value = body.scrollLeft;
+  isMouseDown.value = true;
+};
+
+const handleMouseUp = () => {
+  if (!isDragger.value) return;
+  isMouseDown.value = false;
+};
+
+const handleMouseMove = (event) => {
+  if (!isDragger.value) return;
+  event.preventDefault();
+  if (isDragger.value && isMouseDown.value) {
+    const deltaX = event.clientX - initialMouseX.value;
+    const body = dataTable.value.$el.querySelector('.el-table__body-wrapper .el-scrollbar__wrap');
+    body.scrollLeft = initialScrollLeft.value - deltaX;
+  }
+};
+
+onMounted(async() => {
+  await init();
+  initAutoRefresh();
+  emitter.on('model.data.change.' + tableInfo.value.modelId, checkAndRefreshData);
+
+  if (tableInfo.value.showFull === '1') {
+    if (screenFull.isEnabled) {
+      screenFull.on('change', toggleTableFullscreen);
+    }
+  }
+});
+
+onUnmounted(() => {
+  emitter.off('model.data.change.' + tableInfo.value.modelId, checkAndRefreshData);
+
+  if (tableInfo.value.showFull === '1') {
+    screenFull.off('change', toggleTableFullscreen);
+  }
+});
+
+defineExpose({ reloadData, validate, refreshData, getQueryData, getData, getSelectedData })
+</script>
+
+<style scoped lang="scss">
+.cc-table :deep(.el-table__body-wrapper .cell .relevance) {
+  cursor: pointer;
+  color: #2989da;
+}
+.cc-button {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+.cc-button :deep(.el-button:focus-visible) {
+  outline: unset;
+}
+.cc-table-footer {
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+  .cc-table-refresh {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .cc-pagination {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1
+  }
+}
+.cc-table .wrap .overflow-ellipsis {
+  height: unset;
+  white-space: pre-wrap;
+}
+.cc-table :deep(.blinking) {
+  animation: blink 1.5s infinite;
+}
+
+.cc-table :deep(.label) {
+  display: block;
+  padding: 8px 16px;
+  border-radius: 5px;
+  line-height: 1;
+  color: white;
+}
+
+.cc-table :deep(.shape.circle) {
+  display: block;
+  padding: 9px;
+  border-radius: 9px;
+}
+
+.cc-table :deep(.shape.square) {
+  display: block;
+  padding: 8px;
+  border-radius: 2px;
+}
+
+.cc-table :deep(.shape.oval) {
+  display: block;
+  width: 18px;
+  height: 12px;
+  border-radius: 50% / 50%;
+}
+
+.cc-table .custom-style:has(.progress-box) {
+  width: 100%;
+}
+.cc-table .custom-style :deep(.progress-box) {
+  display: flex;
+  background-color: #e2e2e2;
+  border-radius: 30px;
+  height: 32px;
+  text-align: center;
+}
+.cc-table .custom-style :deep(.progress-line) {
+  width: 100%;
+  border-radius: 30px;
+  height: 32px;
+}
+.cc-table .custom-style :deep(.progress-text) {
+  padding: 0 15px;
+}
+.cc-table {
+  position: relative;
+  background-color: #ffffff;
+  .show-table-fullscreen {
+    position: absolute;
+    cursor: pointer;
+    top: 5px;
+    right: 5px;
+    z-index: 1000;
+    font-size: 18px;
+    color: #000000;
+  }
+}
+.padding-10 {
+  padding: 10px;
+  .show-table-fullscreen {
+    top: 15px;
+    right: 15px;
+  }
+}
+</style>