opms_frontend/src/components/table/TableTool.vue

<template>
  <div style="float: right">
    <!--    <div v-show="stripe" class="stripe-panel">-->
    <!--      <el-checkbox v-model="stripe">斑马纹</el-checkbox>-->
    <!--    </div>-->
    <!--    <div class="border-panel">-->
    <!--      <el-checkbox v-model="border">边框（可拉伸列）</el-checkbox>-->
    <!--    </div>-->
    <!--    <el-button-->
    <!--      style="margin: 0 10px 10px 0 !important"-->
    <!--      type="primary"-->
    <!--      @click="clickFullScreen">-->
    <!--      <vab-icon-->
    <!--        :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />-->
    <!--      表格全屏-->
    <!--    </el-button>-->
    <!--    <el-popover-->
    <!--      ref="popover"-->
    <!--      popper-class="custom-table-checkbox"-->
    <!--      trigger="hover">-->
    <!--      <el-radio-group v-model="lineHeight">-->
    <!--        <el-radio label="medium">大</el-radio>-->
    <!--        <el-radio label="small">中</el-radio>-->
    <!--        <el-radio label="mini">小</el-radio>-->
    <!--      </el-radio-group>-->
    <!--      <template #reference>-->
    <!--        <el-button style="margin: 0 10px 10px 0 !important" type="primary">-->
    <!--          <vab-icon icon="line-height" />-->
    <!--          表格尺寸-->
    <!--        </el-button>-->
    <!--      </template>-->
    <!--    </el-popover>-->
    <el-popover popper-class="custom-table-checkbox" trigger="hover">
      <el-checkbox-group v-model="checkColumns" class="checkboxes">
        <vab-draggable v-bind="dragOptions" :list="columns">
          <div v-for="item in columns" :key="item.label">
            <vab-icon icon="drag-drop-line" />
            <el-checkbox :disabled="item.disableCheck === true" :label="item.label">
              {{ item.label }}
            </el-checkbox>
          </div>
        </vab-draggable>
      </el-checkbox-group>
      <template #reference>
        <el-button icon="el-icon-setting" style="margin: 0 10px 10px 0 !important" />
      </template>
    </el-popover>
  </div>
</template>

<script>
  import VabDraggable from 'vuedraggable'
  import tableColsConfigApi from '@/api/plat/tableColsConfig'

  export default {
    name: 'TableTool',
    components: {
      VabDraggable,
    },
    props: {
      tableType: {
        type: String,
        required: true,
      },
      columns: {
        type: Array,
        default() {
          return []
        },
      },
      showColumns: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        isFullscreen: false,
        border: true,
        height: this.$baseTableHeight(1),
        stripe: false,
        lineHeight: 'medium',
        dragOptions: {
          animation: 600,
          group: 'description',
        },
        // checkList: ['标题', '作者', '评级', '点击量', '时间'],
        // columns: [
        //   {
        //     label: '标题',
        //     width: 'auto',
        //     prop: 'title',
        //     sortable: true,
        //     disableCheck: true,
        //   },
        // ],
        flag: false,
        id: 0,
        checkColumns: [],
      }
    },
    watch: {
      async checkColumns(newValue) {
        let list = this.columns.filter((item) => newValue.includes(item.label))
        this.$emit('update:showColumns', list)
        if (this.flag) {
          const { data: id } = await tableColsConfigApi.save({
            id: this.id,
            table: this.tableType,
            columns: JSON.stringify(list.map((item) => item.label)),
          })
          this.id = id
        }
        this.flag = true
      },
    },
    created() {
      this.getInitData()
    },
    methods: {
      async getInitData() {
        this.flag = false
        this.id = 0
        let list = this.columns
        const { data: data } = await tableColsConfigApi.getEntityByTable({ table: this.tableType })
        if (data) {
          this.id = data.id
          if (data.columns !== '' && data.columns !== '[]') {
            const arr = JSON.parse(data.columns)
            for (const item of list) {
              const idx = arr.findIndex((it) => item.label == it)
              item.sort = idx > -1 ? idx : 0
            }
            list.sort((pre, cur) => {
              return pre.sort - cur.sort
            })
          }
        }
        this.checkColumns = list.map((item) => item.label)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .custom-table-checkbox {
    [class*='ri'] {
      vertical-align: -2.5px;
      cursor: pointer;
    }

    .el-checkbox {
      margin: 5px 0 5px 8px;
    }
  }
  .checkboxes {
    max-height: 500px;
    overflow-y: auto;
  }
</style>