@scenetechnology/cj_element_table 0.0.1

package/packages/components/index.vue

@@ -0,0 +1,1235 @@
+<template>
+  <div class="table-component">
+    <!-- 筛选区域 -->
+    <div class="filter-area" v-if="hasSearchColumns">
+      <el-row :gutter="20">
+        <template v-if="!isExpanded">
+          <!-- 收起状态：显示前N-1个搜索条件 -->
+          <el-col :span="colSpan" v-for="(col, index) in visibleSearchColumns" :key="index">
+            <el-form-item :label="col.label" :label-width="col.labelsWidth || 120">
+              <!-- 默认输入框 -->
+              <el-input
+                v-if="!col.searchType || col.searchType === 'input'"
+                v-model="searchForm[col.prop]"
+                :placeholder="`请输入${col.label}`"
+                clearable
+              />
+              <!-- 下拉选择 -->
+              <el-select
+                v-else-if="col.searchType === 'select'"
+                v-model="searchForm[col.prop]"
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                :placeholder="`请选择${col.label}`"
+                clearable
+              >
+                <el-option
+                  v-for="opt in col.options"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+              <!-- 日期选择 -->
+              <el-date-picker
+                v-else-if="col.searchType === 'date'"
+                style="width: 100%"
+                v-model="searchForm[col.prop]"
+                type="date"
+                value-format="YYYY-MM-DD"
+                :placeholder="`请选择${col.label}`"
+                clearable
+              />
+              <el-date-picker
+                v-else-if="col.searchType === 'dateYear'"
+                style="width: 100%"
+                v-model="searchForm[col.prop]"
+                type="year"
+                :placeholder="`请选择${col.label}`"
+                value-format="YYYY"
+                clearable
+              />
+              <el-date-picker
+                v-else-if="col.searchType === 'dateMonth'"
+                value-format="YYYY-MM"
+                style="width: 100%"
+                v-model="searchForm[col.prop]"
+                type="month"
+                :placeholder="`请选择${col.label}`"
+                clearable
+              />
+              <el-date-picker
+                v-else-if="col.searchType === 'datePicker'"
+                style="width: 100%"
+                v-model="searchForm[col.prop]"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                range-separator="~"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              />
+            </el-form-item>
+          </el-col>
+
+          <!-- 收起状态的操作按钮 -->
+          <el-col :span="colSpan" :offset="computedOffsetTop">
+            <div class="filter-buttons">
+              <el-button
+                @click="toggleSearchArea"
+                v-if="seaColumnsLength > 24 / colSpan - 1"
+                class="el-icon--right"
+                :icon="ArrowDownBold"
+                >展开全部条件</el-button
+              >
+              <el-button type="primary" @click="handleSearch">查询</el-button>
+              <el-button @click="handleReset">重置</el-button>
+            </div>
+          </el-col>
+        </template>
+
+        <template v-else>
+          <!-- 展开状态：第一行显示cols-per-row个搜索条件 -->
+          <el-col :span="colSpan" v-for="(col, index) in firstRowColumns" :key="index">
+            <el-form-item :label="col.label" :label-width="col.labelWidth || 120">
+              <!-- 默认输入框 -->
+              <el-input
+                v-if="!col.searchType || col.searchType === 'input'"
+                v-model="searchForm[col.prop]"
+                :placeholder="`请输入${col.label}`"
+                clearable
+              />
+              <!-- 下拉选择 -->
+              <el-select
+                v-else-if="col.searchType === 'select'"
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                v-model="searchForm[col.prop]"
+                :placeholder="`请选择${col.label}`"
+                clearable
+              >
+                <el-option
+                  v-for="opt in col.options"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+              <!-- 日期选择 -->
+              <el-date-picker
+                v-else-if="col.searchType === 'dateMonth'"
+                style="width: 100%"
+                v-model="searchForm[col.prop]"
+                type="month"
+                :placeholder="`请选择${col.label}`"
+                value-format="YYYY-MM"
+                clearable
+              />
+              <el-date-picker
+                v-else-if="col.searchType === 'dateYear'"
+                style="width: 100%"
+                v-model="searchForm[col.prop]"
+                type="year"
+                :placeholder="`请选择${col.label}`"
+                value-format="YYYY"
+                clearable
+              />
+              <el-date-picker
+                v-else-if="col.searchType === 'date'"
+                style="width: 100%"
+                v-model="searchForm[col.prop]"
+                type="date"
+                value-format="YYYY-MM-DD"
+                :placeholder="`请选择${col.label}`"
+                clearable
+              />
+              <el-date-picker
+                v-else-if="col.searchType === 'datePicker'"
+                style="width: 100%"
+                v-model="searchForm[col.prop]"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                range-separator="~"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              />
+            </el-form-item>
+          </el-col>
+
+          <!-- 展开状态：剩余搜索条件 -->
+          <template v-if="remainingColumns.length > 0">
+            <el-col
+              :span="colSpan"
+              v-for="(col, index) in remainingColumns"
+              :key="`remaining-${index}`"
+            >
+              <el-form-item :label="col.label" :label-width="col.labelWidth || 120">
+                <!-- 默认输入框 -->
+                <el-input
+                  v-if="!col.searchType || col.searchType === 'input'"
+                  v-model="searchForm[col.prop]"
+                  :placeholder="`请输入${col.label}`"
+                  clearable
+                />
+                <!-- 下拉选择 -->
+                <el-select
+                  v-else-if="col.searchType === 'select'"
+                  multiple
+                  collapse-tags
+                  collapse-tags-tooltip
+                  v-model="searchForm[col.prop]"
+                  :placeholder="`请选择${col.label}`"
+                  clearable
+                >
+                  <el-option
+                    v-for="opt in col.options"
+                    :key="opt.value"
+                    :label="opt.label"
+                    :value="opt.value"
+                  />
+                </el-select>
+                <!-- 日期选择 -->
+                <el-date-picker
+                  v-else-if="col.searchType === 'dateMonth'"
+                  style="width: 100%"
+                  v-model="searchForm[col.prop]"
+                  type="month"
+                  :placeholder="`请选择${col.label}`"
+                  value-format="YYYY-MM"
+                  clearable
+                />
+                <el-date-picker
+                  v-else-if="col.searchType === 'dateYear'"
+                  style="width: 100%"
+                  v-model="searchForm[col.prop]"
+                  type="year"
+                  :placeholder="`请选择${col.label}`"
+                  value-format="YYYY"
+                  clearable
+                />
+                <el-date-picker
+                  v-else-if="col.searchType === 'date'"
+                  v-model="searchForm[col.prop]"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  :placeholder="`请选择${col.label}`"
+                  style="width: 100%"
+                  clearable
+                />
+                <el-date-picker
+                  v-else-if="col.searchType === 'datePicker'"
+                  style="width: 100%"
+                  v-model="searchForm[col.prop]"
+                  type="datetimerange"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  range-separator="~"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                />
+              </el-form-item>
+            </el-col>
+          </template>
+
+          <!-- 收起按钮始终展示在第二行最右侧 -->
+          <el-col :span="colSpan" :offset="computedOffset">
+            <div class="filter-buttons">
+              <el-button @click="toggleSearchArea" class="el-icon--right" :icon="ArrowUpBold"
+                >收起全部条件</el-button
+              >
+              <el-button type="primary" @click="handleSearch">查询</el-button>
+              <el-button @click="handleReset">重置</el-button>
+            </div>
+          </el-col>
+        </template>
+      </el-row>
+    </div>
+    <!-- 操作栏 -->
+    <div
+      class="operation-bar"
+      v-if="
+        showInputButtons || showOutputButtons || showTableSettingButtons || showViewSettingButtons
+      "
+    >
+      <div class="operation-left">
+        <slot name="operation"></slot>
+        <Upload
+          v-show="false"
+          :showButton="false"
+          :targetId="route_path + 'input'"
+          :uploadUrl="inputUrl"
+          :showFileList="false"
+          @change="handleSearch"
+          :name="inputName"
+        />
+        <el-dropdown v-if="showInputButtons">
+          <el-button type="primary" plain style="margin-left: 10px"
+            >导入<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </el-button>
+
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="importOperation('input')">选择导入文件</el-dropdown-item>
+              <el-dropdown-item @click="importOperation('down')">下载导入模板</el-dropdown-item>
+              <!-- <el-dropdown-item @click="importOperation('history')">导入记录</el-dropdown-item> -->
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown v-if="showOutputButtons">
+          <el-button type="primary" plain style="margin-left: 10px"
+            >导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="exportExcel('all')">导出全部数据</el-dropdown-item>
+              <el-dropdown-item @click="exportExcel('current')">导出当前页</el-dropdown-item>
+              <el-dropdown-item @click="exportExcel('select')">导出选中数据</el-dropdown-item>
+              <el-dropdown-item @click="exportExcel('custom')">自定义导出</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <div class="tool-bar-right">
+        <ElButton v-if="showTableSettingButtons" type="primary" plain @click="clickSetting" ghost
+          >列表设置</ElButton
+        >
+        <ElDropdown v-if="showViewSettingButtons" trigger="click" style="margin-left: 10px">
+          <ElButton type="primary" plain style="width: 150px" ghost>
+            <p>
+              列表视图
+              <span style="margin: 0 8px">({{ viewList.length }})</span>
+            </p>
+            <el-icon>
+              <ArrowDownBold />
+            </el-icon>
+          </ElButton>
+          <template #dropdown>
+            <ElDropdownMenu>
+              <div style="padding: 0px 10px">
+                <ElInput
+                  v-model="filterViewValue"
+                  clearable
+                  @input="filterViewList"
+                  @enter="filterViewList"
+                  placeholder="请输入视图名称"
+                />
+              </div>
+              <div style="padding: 7px 16px; margin-top: 7px; font-size: 14px">视图</div>
+              <div style="max-height: 100px; overflow-y: auto">
+                <ElDropdownItem
+                  v-for="(item, index) in viewList"
+                  :key="item.id"
+                  @click="clickItem(item)"
+                >
+                  <div class="dropdownItem_content">
+                    <div class="textTitle">{{ item.name }}</div>
+                    <div class="textTitle2">{{ item.type == 2 ? '个人' : '公共' }}</div>
+                  </div>
+                </ElDropdownItem>
+              </div>
+              <ElDropdownItem
+                style="box-shadow: 0px -6px 6px -6px rgba(147, 147, 147, 0.24)"
+                @click="clickItem('viewSave')"
+              >
+                <div style="display: flex; align-items: center">
+                  <img
+                    :src="viewSaveIcon"
+                    style="width: 15px; height: 15px; vertical-align: middle"
+                  />
+                  <span
+                    style="
+                      color: #333333;
+                      font-weight: 400;
+                      font-size: 14px;
+                      vertical-align: middle;
+                      margin-left: 5px;
+                    "
+                    >保存当前视图</span
+                  >
+                </div>
+              </ElDropdownItem>
+              <ElDropdownItem @click="clickItem('viewSetting')">
+                <div style="display: flex; align-items: center">
+                  <img
+                    :src="viewSettingIcon"
+                    style="width: 15px; height: 15px; vertical-align: middle"
+                  />
+                  <span
+                    style="
+                      color: #333333;
+                      font-weight: 400;
+                      font-size: 14px;
+                      vertical-align: middle;
+                      margin-left: 5px;
+                    "
+                    >视图管理</span
+                  >
+                </div>
+              </ElDropdownItem>
+            </ElDropdownMenu>
+          </template>
+        </ElDropdown>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <el-table
+      ref="tableRef"
+      :data="tableData.rows"
+      :border="true"
+      stripe
+      style="width: 100%"
+      :max-height="maxHeight"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="headerCellStyle"
+      @sort-change="handleSortChange"
+      :default-sort="defaultSort"
+    >
+      <el-table-column v-if="showIndex" type="index" width="55" label="序号" align="center" />
+      <el-table-column
+        v-if="showSelection"
+        type="selection"
+        width="55"
+        align="center"
+        :selectable="(row) => row[selecTableDisabledField.key] != selecTableDisabledField.value"
+      />
+      <template v-for="col in useColumns" :key="col.prop">
+        <!-- 使用插槽的列 -->
+        <template v-if="col.slot">
+          <el-table-column :prop="col.prop" :label="col.label" align="center" min-width="100">
+            <template #default="scope">
+              <slot :name="col.prop" :row="scope.row"></slot>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 普通列 -->
+        <el-table-column
+          v-else
+          :column-key="col.id"
+          :width="col.width"
+          :prop="col.prop"
+          :fixed="col.freeze"
+          show-overflow-tooltip
+          popper-class="table-tooltip"
+          :label="col.label"
+          align="center"
+          min-width="100"
+          :sortable="col.options ? false : 'custom'"
+        >
+          <template #header>
+            <el-popover
+              v-if="col.options"
+              placement="bottom"
+              :width="200"
+              trigger="click"
+              v-model:visible="col.headerFilter"
+            >
+              <template #reference>
+                <span class="headerfilter">{{ col.label }}<img :src="TablehederTool" /></span>
+              </template>
+              <tuo-drag
+                v-if="col.options"
+                @stopDrag="
+                  (res) => {
+                    change_headersort(res, col)
+                  }
+                "
+                :checkAllGroupObj="useColumns"
+                :initialSortColumns="getLabel(col.options)"
+              ></tuo-drag>
+            </el-popover>
+            <span v-else>{{ col.label }}</span>
+          </template>
+          <template v-if="col.options && !col.searchKey" #default="scope">
+            <span :style="`color:${getOptionColor(scope.row[col.prop], col.options)}`">{{
+              getOptionLabel(scope.row[col.prop], col.options)
+            }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <slot name="columns"></slot>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.page"
+        :page-size="query.rows"
+        :page-sizes="pageSizes"
+        :total="query.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        background
+        layout="total, sizes, prev, pager, next,jumper"
+      />
+    </div>
+  </div>
+  <tablesetting
+    v-model="dialogVisible"
+    :columns-list="columnsList"
+    :columnSetting="columnSetting"
+    @updateTable="init"
+  />
+  <SaveViewDialog
+    v-model="saveViewStatus"
+    :title="formModel_title"
+    :max-length="fieldData.length"
+    @save="saveView"
+  />
+  <viewEdit
+    v-model="viewEditVisible"
+    :viewList="viewList"
+    @update="getViewList"
+    @confirm="handleViewEditConfirm"
+    @cancel="handleViewEditCancel"
+  />
+  <exportTable
+    ref="exportTableRef"
+    v-model="exportStatus"
+    :columns-list="columnsList"
+    :tableData="tableDataExport"
+    :columnSetting="columnSetting"
+    :exportXlsxName="XlsxName"
+  ></exportTable>
+  <historyDialog v-model="inputHistory"></historyDialog>
+</template>
+
+<script setup lang="ts">
+import {
+  ElTable,
+  ElPagination,
+  ElButton,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ElInput,
+  ElIcon,
+  ElMessage,
+  ElDatePicker
+} from 'element-plus'
+import Upload from '@/components/Upload/index.vue'
+import { ref, computed, watch, onMounted, defineExpose, nextTick } from 'vue'
+import viewSaveIcon from '@/assets/images/view_save_icon.png'
+import TablehederTool from '@/assets/images/TablehederTool.png'
+import viewSettingIcon from '@/assets/images/view_setting_icon.png'
+import tablesetting from './tablesetting.vue'
+import viewEdit from './viewEdit.vue'
+import SaveViewDialog from './SaveViewDialog.vue'
+import exportTable from './exportTable.vue'
+import { UserQuery_update, UserQuery_save, UserQuery_index } from '@/api/All.ts'
+import { useRoute, useRouter } from 'vue-router'
+import tuoDrag from './tuo-drag.vue'
+import { config } from '@/config/axios/config'
+import { template } from 'lodash-es'
+import historyDialog from './historyDialog.vue'
+import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
+let route_path = ''
+const route = useRoute()
+if(route&&route.name)
+{
+    route_path = route.name
+}
+const router = useRouter()
+const viewEditVisible = ref(false)
+const tableRef = ref()
+const selection = ref([])
+const handleViewEditConfirm = () => {
+  // 处理确认逻辑
+}
+
+const props = defineProps({
+  tableData: {
+    //表格数据
+    type: Object,
+    required: true,
+    default: () => ({
+      rows: [],
+      total: 0
+    })
+  },
+  columns: {
+    //表格列配置
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  exportUrl: {
+    //导出表格数据接口
+    type: String
+  },
+  templateUrl: {
+    //下载表格模板接口
+    type: String
+  },
+  templateInProject: {
+    type: Boolean,
+    default: false
+  },
+  inputUrl: {
+    //导入表格数据接口
+    type: String
+  },
+  inputName: {
+    type: String
+  },
+  exportXlsxName: {
+    //导出表格名称 默认为路由名称
+    type: String
+  },
+  showSelection: {
+    //是否显示表格多选框
+    type: Boolean,
+    default: true
+  },
+  showIndex: {
+    //是否显示表格序号
+    type: Boolean,
+    default: true
+  },
+  showInputButtons: {
+    //是否显示导入按钮
+    type: Boolean,
+    default: true
+  },
+  showOutputButtons: {
+    //是否显示导出按钮
+    type: Boolean,
+    default: true
+  },
+  showTableSettingButtons: {
+    //是否显示列表设置按钮
+    type: Boolean,
+    default: true
+  },
+  showViewSettingButtons: {
+    //是否显示视图设置按钮
+    type: Boolean,
+    default: true
+  },
+  maxHeight: {
+    //表格最大高度
+    default: '55vh'
+  },
+  selecTableDisabledField: {
+    //表格多选框禁用条件  key:字段名  value:字段值
+    type: Object,
+    default: () => ({ key: '', value: '' })
+  },
+  initialQuery: {
+    //初始化查询条件
+    type: Object,
+    default: () => ({})
+  },
+  pageSizes: {
+    //分页大小选项
+    type: Array,
+    default: () => [10, 20, 30, 50]
+  },
+  // 新增配置项：每行的列数
+  colsPerRow: {
+    type: Number,
+    default: 4,
+    validator: (value: number) => {
+      // 确保值是24的约数
+      return 24 % value === 0 && value > 0 && value <= 24
+    }
+  },
+  // 新增表头单元格样式
+  headerCellStyle: {
+    type: Object,
+    default: () => ({
+      background: '#f5f7fa',
+      color: '#606266',
+      fontWeight: 'bold'
+    })
+  }
+})
+const viewList = ref([])
+const columnSetting = ref()
+const exportStatus = ref(false)
+const useColumns = ref([])
+const saveViewStatus = ref(false)
+const formModel_title = ref('')
+const filterViewValue = ref('')
+const viewListP = ref([])
+const viewlistStatus = ref(false)
+const inputHistory = ref(false)
+const tableDataExport = ref([])
+const exportTableRef = ref()
+let currentRoutePath = ''
+if(router && router.currentRoute){
+  currentRoutePath = router.currentRoute._value.meta.title
+}
+
+
+const XlsxName = ref(props.exportXlsxName ?? currentRoutePath)
+// const XlsxName = '测试'
+const taglist = ref({
+  view: route_path + '-view', // 视图
+  table: route_path + '-table' //表格设置
+})
+const emit = defineEmits(['search', 'selection-change'])
+
+// 查询参数
+const query = ref({
+  page: 1,
+  rows: 10,
+  total: 0,
+  ...props.initialQuery
+})
+const dialogVisible = ref(false)
+const columnsList = ref([])
+
+onMounted(() => {
+  emit('search', { ...query.value, ...searchForm.value })
+  init()
+})
+
+const init = () => {
+  if (props.showTableSettingButtons) {
+    getTableList()
+  } else {
+    useColumns.value = props.columns //没有使用表格设置的直接展示所有的字段
+  }
+  if (props.showViewSettingButtons) {
+    getViewList()
+  }
+}
+
+const getViewList = () => {
+  UserQuery_index({ tag: taglist.value.view }).then((res) => {
+    viewList.value = res.data
+    viewListP.value = JSON.parse(JSON.stringify(res.data))
+  })
+}
+const getTableList = () => {
+//   UserQuery_index({ tag: taglist.value.table }).then((res) => {
+//     if (res.data.length == 0) {
+//       useColumns.value = props.columns //没有使用表格设置的直接展示所有的字段
+//     } else {
+//       columnSetting.value = res.data[0]
+//       useColumns.value = []
+//       columnSetting.value.content = JSON.parse(columnSetting.value.content)
+//       columnSetting.value.content.checkColumnData.forEach((item, index) => {
+//         props.columns.forEach((item2, index2) => {
+//           if (item == item2.label) {
+//             useColumns.value.push(item2)
+//           }
+//         })
+//       })
+//       for (let i = 0; i < columnSetting.value.content.freeze; i++) {
+//         useColumns.value[i].freeze = true
+//       }
+//     }
+//   })
+}
+const clickSetting = () => {
+  columnsList.value = props.columns
+  // console.log(columnsList.value, 111)
+  dialogVisible.value = true
+}
+const filterViewList = () => {
+  viewList.value = viewListP.value.filter((item, index) => {
+    console.log(item.name, filterViewValue.value)
+    if (item.name.indexOf(filterViewValue.value) != -1) {
+      return item
+    }
+  })
+  console.log(viewList.value)
+}
+
+// 筛选表单数据
+const searchForm = ref({})
+const isExpanded = ref(false)
+// 在script setup中添加
+const defaultSort = ref({ sort: '', order: '' })
+
+// 监听defaultSort的变化
+
+// 处理排序变化
+const handleSortChange = (sort) => {
+  console.log(sort)
+  defaultSort.value.sort = sort.column.property
+  defaultSort.value.order = sort.column.order
+  nextTick().then(() => {
+    handleSearch()
+  })
+}
+const viewForm = ref({
+  name: '',
+  tag: taglist.value.view,
+//   user_id: JSON.parse(window.sessionStorage.getItem('user')).id,
+  user_id: '666',
+  type: 2,
+  content: ''
+})
+const subloading = ref(false)
+const fieldData = {
+  length: 50
+}
+const getLabel = (options) => {
+  let arr = []
+  options.map((item) => {
+    arr.push(item.label)
+  })
+  return arr
+}
+const change_headersort = (res, col) => {
+  console.log(res, col.options)
+  let arr = []
+  res.map((item) => {
+    col.options.map((cont) => {
+      if (cont.label === item) {
+        console.log(cont)
+        arr.push(cont.value)
+      }
+    })
+  })
+  searchForm.value.sortOrder = arr.join()
+  searchForm.value.sort = col.prop
+  handleSearch()
+}
+const saveView = async (val) => {
+  viewForm.value.name = val.name
+  viewForm.value.type = val.type
+  if (!viewForm.value.name) {
+    ElMessage.error('请输入视图名称')
+    return
+  }
+  subloading.value = true
+  try {
+    const api = viewForm.value.id ? UserQuery_update : UserQuery_save
+    let content = {
+      query: query.value,
+      tag: taglist.value.view,
+      filterForm: { ...searchForm.value },
+      defaultSort: defaultSort.value
+    }
+    console.log(content)
+    viewForm.value.content = JSON.stringify(content)
+    console.log(viewForm.value)
+    await api(viewForm.value)
+    ElMessage.success('保存成功')
+    closeModel()
+    init()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    subloading.value = false
+  }
+}
+const clickItem = (item) => {
+  if (item === 'viewSave') {
+    // 处理保存视图
+    saveViewStatus.value = true
+    return
+  } else if (item == 'viewSetting') {
+    viewEditVisible.value = true
+  } else if (item.id) {
+    //应用视图
+    // 处理点击视图
+    let content = JSON.parse(item.content)
+    query.value = { ...query.value, ...content.query }
+    searchForm.value = content.filterForm
+    defaultSort.value = content.defaultSort
+    nextTick(() => {
+      tableRef.value.sort(defaultSort.value.sort, defaultSort.value.order)
+    })
+    emit('search', { ...query.value, ...searchForm.value })
+  }
+}
+const closeModel = () => {
+  saveViewStatus.value = false
+  viewForm.value = {
+    name: '',
+    type: 2,
+    tag: taglist.value.view,
+    // user_id: JSON.parse(window.sessionStorage.getItem('user')).id
+    user_id: '666'
+  }
+}
+const importOperation = async (type) => {
+  if (type === 'input') {
+    const input = document.getElementById(route_path + 'input')
+    input.click()
+  } else if (type === 'down') {
+    let downsrc = `${config.simpUrl}${props.templateUrl}`
+    if (props.templateInProject) {
+      downsrc = props.templateUrl
+    }
+    const a = document.createElement('a')
+    a.download = ''
+    a.href = downsrc
+    a.click()
+  } else if (type === 'history') {
+    inputHistory.value = true
+  }
+}
+const input_success = (val) => {
+  if (val) {
+    ElMessage.success('导入成功')
+    handleSearch()
+  }
+}
+const exportExcel = async (type) => {
+  if (type === 'custom') {
+    columnsList.value = props.columns
+    let table_data_arr = []
+    props.exportUrl({ page: 1, rows: 10000 }).then((res) => {
+      tableDataExport.value = formate_tabledata(res.data.rows)
+      table_data_arr[0] = formate_tabledata(res.data.rows)
+      exportStatus.value = true
+    })
+    table_data_arr[1] = formate_tabledata(props.tableData.rows)
+    table_data_arr[2] = formate_tabledata(selection.value)
+    exportTableRef.value.updatesortColumns(table_data_arr, type)
+    return
+  }
+  if (type === 'all') {
+    await props.exportUrl({ page: 1, rows: 10000 }).then((res) => {
+      tableDataExport.value = formate_tabledata(res.data.rows)
+    })
+  } else if (type === 'current') {
+    tableDataExport.value = formate_tabledata(props.tableData.rows)
+  } else if (type === 'select') {
+    console.log(selection.value, 111)
+    if (selection.value.length > 0) {
+      tableDataExport.value = formate_tabledata(selection.value)
+    } else {
+      ElMessage.error('请先选择数据')
+      return
+    }
+  }
+  nextTick().then(() => {
+    exportTableRef.value.updatesortColumns(useColumns.value)
+    exportTableRef.value.handleSubmit()
+  })
+}
+// 获取需要显示搜索框的列
+const searchColumns = computed(() => props.columns.filter((col) => col.search))
+const hasSearchColumns = computed(() => searchColumns.value.length > 0)
+
+// 每个列的span值
+const colSpan = computed(() => 24 / props.colsPerRow)
+
+// 展开状态下第一行显示的列
+const firstRowColumns = computed(() => {
+  return searchColumns.value.slice(0, props.colsPerRow)
+})
+
+// 展开状态下剩余的列
+const remainingColumns = computed(() => {
+  return searchColumns.value.slice(props.colsPerRow)
+})
+
+// 根据展开状态显示的搜索列 (收起状态下显示的列数)
+const visibleSearchColumns = computed(() => {
+  return searchColumns.value.slice(0, props.colsPerRow - 1)
+})
+const seaColumnsLength = computed(() => {
+  const column = props.columns.filter((column) => column.search === true)
+  return column.length
+})
+// 计算操作按钮的偏移量
+const computedOffset = computed(() => {
+  // 如果第一行列数少于colsPerRow，则不需要偏移
+  if (firstRowColumns.value.length < props.colsPerRow) return 0
+
+  const remainingCount = remainingColumns.value.length
+  // 如果没有剩余列，说明恰好占满了第一行，按钮应该展示在第二行开头
+  //if (remainingCount === 0) return colSpan.value * (props.colsPerRow - 1) // 偏移到最右侧
+
+  // 计算最后一行已经占用的格子数
+  const usedColumns = remainingCount % props.colsPerRow
+  
+  // 如果最后一行已经满了，不需要偏移
+  if (usedColumns === 0) {
+     return colSpan.value * (props.colsPerRow - 1)
+    // if (remainingCount === 0) {
+    //   return colSpan.value * (props.colsPerRow - 1)
+    // }else{
+    //   return 0
+    // }
+  }
+  
+  
+  
+
+  // 否则计算需要偏移的格子数，使按钮位于最右侧
+  return (props.colsPerRow - usedColumns - 1) * colSpan.value
+})
+const computedOffsetTop = computed(() => {
+  const column = props.columns.filter((column) => column.search === true)
+  if (column.length + 1 < 24 / colSpan.value) {
+    return (24 / colSpan.value - column.length - 1) * colSpan.value
+  }
+})
+// 切换筛选区域展开/收起
+const toggleSearchArea = () => {
+  isExpanded.value = !isExpanded.value
+}
+
+// 处理查询
+const handleSearch = () => {
+  query.value.page = 1 // 重置页码
+  for (let key in searchForm.value) {
+    if (searchForm.value[key] === '') {
+      delete searchForm.value[key]
+    }
+  }
+  const column = props.columns.filter((column) => column.search === true)
+  searchForm.value = transformKeys(column, searchForm.value)
+
+  // 处理搜索条件
+  for (const key in searchForm.value) {
+    if (searchForm.value[key] === '') {
+      continue // 跳过空值
+    }
+
+    // 找到对应的列配置
+  }
+  emit('search', { ...query.value, ...searchForm.value })
+}
+const transformKeys = (configArray, dataObj) => {
+  const result = { ...dataObj } // 避免直接修改原对象
+
+  configArray.forEach((item) => {
+    const propValue = result[item.prop]
+
+    // 1. 替换键名（如果有 searchKey）
+    if (item.searchKey && propValue !== undefined) {
+      result[item.searchKey] = propValue // 复制值到新 key
+      //  delete result[item.prop] // 删除旧 key
+    }
+
+    // 2. 处理数组拆分（如果有 dataType 且值是数组）
+    if (item.dataType && Array.isArray(propValue)) {
+      const [startValue, endValue] = propValue
+
+      // 如果有 dataName，则使用 dataName + "_start/end"
+      if (item.dataName) {
+        result[`${item.dataName}_start`] = startValue
+        result[`${item.dataName}_end`] = endValue
+      }
+      // 否则直接使用 "start" 和 "end"
+      else {
+        result.start = startValue
+        result.end = endValue
+      }
+
+      // 如果原键名未被 searchKey 替换，则删除原数组
+      if (!item.searchKey) {
+        //  delete result[item.prop]
+      }
+    }
+  })
+
+  return result
+}
+// 处理重置
+const handleReset = () => {
+  searchForm.value = {}
+  query.value.page = 1
+  emit('search', { ...query.value })
+}
+
+// 处理每页条数变化
+const handleSizeChange = (val: number) => {
+  query.value.rows = val
+  query.value.page = 1
+  emit('search', { ...query.value, ...searchForm.value })
+}
+
+// 处理页码变化
+const handleCurrentChange = (val: number) => {
+  query.value.page = val
+  emit('search', { ...query.value, ...searchForm.value })
+}
+
+const getOptionColor = (value: any, options: any[]) => {
+  const option = options.find((opt) => opt.value == value)
+  return option ? option.color : ''
+}
+// 获取选项标签
+const getOptionLabel = (value: any, options: any[]) => {
+  const option = options.find((opt) => opt.value == value)
+  return option ? option.label : ''
+}
+
+// 处理表格选择变化
+const handleSelectionChange = (selectrows: any[]) => {
+  selection.value = selectrows
+  selection.value = selection.value.concat([])
+  const selectedIds = selectrows.map((row) => row.id)
+  emit('selection-change', { ids: selectedIds, rows: selectrows })
+}
+const formate_tabledata = (tableData) => {
+  tableData = JSON.parse(JSON.stringify(tableData))
+  if (tableData?.length > 0) {
+    tableData.map((item) => {
+      for (let key in item) {
+        props.columns.map((col) => {
+          if (key == col.prop && col.options) {
+            col.options.map((label) => {
+              if (item[key] == label.value) item[key] = label.label
+            })
+          }
+        })
+      }
+    })
+  }
+  return tableData
+}
+// 监听tableData的变化
+watch(
+  () => defaultSort.value,
+  (newVal) => {
+    searchForm.value.sort = newVal.sort
+    searchForm.value.sortOrder = newVal.order == 'descending' ? 'desc' : 'asc'
+  },
+  { deep: true }
+)
+watch(
+  () => useColumns.value,
+  (newVal) => {
+    console.log(useColumns.value)
+  },
+  { deep: true }
+)
+watch(
+  () => props.tableData,
+  (newVal) => {
+    if (newVal.hasOwnProperty('total')) {
+      query.value.total = newVal.total
+    }
+    // formate_tabledata(props.tableData)
+  },
+  { immediate: true }
+)
+
+// 监听props.initialQuery的变化
+watch(
+  () => props.initialQuery,
+  (newVal) => {
+    if (newVal) {
+      query.value = { ...query.value, ...newVal }
+    }
+  },
+  { deep: true }
+)
+
+// 暴露方法给父组件
+defineExpose({
+  handleSearch,
+  handleReset
+})
+</script>
+
+<style scoped lang="less">
+.table-component {
+  // padding: 20px;
+}
+.el-table {
+  transform: scale(1) !important;
+  transform-origin: 0 0 !important;
+  overflow: visible !important;
+}
+.filter-area {
+  margin-bottom: 20px;
+  /deep/ .el-form-item--default .el-form-item__label {
+    line-height: 15px;
+    text-align: right;
+    align-items: center;
+    font-size: 12px;
+  }
+}
+
+.operation-bar {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+:global(.table-tooltip) {
+  transform: translateY(-50%) !important;
+}
+
+.operation-left {
+  display: flex;
+  align-items: center;
+}
+
+.operation-right {
+  display: flex;
+  gap: 10px;
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  height: 100%;
+  justify-content: flex-end;
+  margin-top: -10px;
+}
+
+.filter-buttons-expanded {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+:deep(.el-form-item__content) {
+  width: calc(100% - 120px);
+}
+
+.dropdownItem_content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .textTitle {
+    width: 110px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 5px;
+    font-size: 12px;
+  }
+  .textTitle2 {
+    font-weight: 400;
+    font-size: 12px;
+    color: #666666;
+  }
+}
+.headerfilter {
+  cursor: pointer;
+  img {
+    display: inline-block;
+    position: relative;
+    top: -2px;
+    margin-left: 2px;
+  }
+  i {
+    position: relative;
+    top: 3px;
+    margin-left: 2px;
+  }
+}
+// 设置输入框placeholder的字体大小
+// input::placeholder {
+//   font-size: 14px;
+// }
+/deep/ .el-input__inner::placeholder,
+.el-select__placeholder {
+  font-size: 12px;
+}
+</style>