ss-crm-manage-web/src/components/SSTable/index.vue

<template>
  <div>
    <div class="flex">
      <el-table
        :data="tableObject.tableList"
        :row-key="rowkey"
        :expand-row-keys="expandRowKeys"
        border
        style="flex: 1"
        @selection-change="handleSelectionChange"
      >
        <slot></slot>
      </el-table>
      <el-button
        ref="ColumnSetting"
        plain
        style="writing-mode: vertical-lr; height: 100px; letter-spacing: 2px"
        @click="clickSetting"
        >表格列控制</el-button
      >
      <el-popover
        ref="TableColumnPop"
        :virtual-ref="ColumnSetting"
        placement="left"
        width="120px"
        trigger="click"
        virtual-triggering
      >
        <el-checkbox-group v-model="checkedColumns" @change="confirm">
          <draggable
            v-model="allColumns"
            item-key="field"
            ghost-class="draggable-ghost"
            :animation="400"
            @end="onDragEnd"
          >
            <template #item="{ element: item }">
              <el-checkbox :key="item.id" :label="item.id">
                {{ item.label }}
              </el-checkbox>
            </template>
          </draggable>
        </el-checkbox-group>
      </el-popover>
    </div>
    <!-- 分页 -->
    <Pagination
      v-model:limit="pageSize"
      v-model:page="pageNo"
      :total="tableObject.total"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import draggable from 'vuedraggable'
import * as ClueCacheApi from '@/api/clue/clueCache'
import { useRoute } from 'vue-router'

const props = defineProps({
  tableObject: { type: Object, default: () => ({ tableList: [] }) },
  tableColumns: { type: Array, default: () => [] },
  rowkey: { type: String, default: 'id' },
  expandRowKeys: { type: Array, default: () => [] }
})

const emit = defineEmits(['update:tableObject', 'getList', 'getCheckedColumns', 'selection-change'])
const route = useRoute()

const pageNo = ref(props.tableObject?.pageNo || 1)

const pageSize = ref(props.tableObject?.pageSize || 20)

const ColumnSetting = ref()
const TableColumnPop = ref()
// 展示在设置里的所有表格列，由于会排序，所以使用新属性，不直接修改原值
const allColumns = ref([...props.tableColumns])
// 已勾选的选项
const checkedColumns = ref([])

// 调用获取数据的接口,分页时需要使用
function getList({ page, limit }) {
  emit('update:tableObject', { ...props.tableObject, pageNo: page, pageSize: limit })
  nextTick(() => {
    emit('getList')
  })
}

// 点击"表格列控制"按钮，出现设置页面
const clickSetting = () => {
  unref(TableColumnPop).TableColumnPop?.delayHide?.()
}

const routeMap = {
  CluePool: 1,
  ClueOrder: 2
}

// 获取用户已勾选的表头
async function getUserCheckedColumns() {
  checkedColumns.value = await ClueCacheApi.getClueCache({
    settingType: 2,
    model: routeMap[route.name]
  })
  // 回显到表格中
  emitColumns()
}

// 表格列排序
function onDragEnd() {
  ClueCacheApi.setClueCache({
    settingType: 2,
    model: routeMap[route.name],
    clueParamId: checkedColumns.value
  })

  // 表格回显
  emitColumns()
}

function handleSelectionChange(val) {
  emit('selection-change', val)
}

// 勾选确认
function confirm() {
  ClueCacheApi.setClueCache({
    settingType: 2,
    model: routeMap[route.name],
    clueParamId: checkedColumns.value
  })
  // usedSchema.value = allColumns.value.filter((it) => checkedColumns.value.includes(it.id))
  emitColumns()
}

// 将表头数据返回至父组件
function emitColumns() {
  const arr = allColumns.value.filter((item) => checkedColumns.value.includes(item.id))
  emit('getCheckedColumns', arr)
}

getUserCheckedColumns()

defineExpose({ getUserCheckedColumns })
</script>

<style lang="scss" scoped></style>