diantou/src_product/iam/audit/rectplanproject/table/xm-data-table.vue

<script>
import Vue from 'vue'
import cloneDeep from 'lodash.clonedeep'
import { Input, Button, Icon, Popover, Badge, Dropdown, Menu } from 'ant-design-vue'
import storeMixin from '@/common/store-mixin'
import axios from '@/common/services/axios-instance'
import sdDataTableMixin from '@/common/components/sd-table/sd-data-table-mixin'
import SdTable from '@/common/components/sd-table.vue'
import asyncComponent from '@/common/services/async-component'
import findAncestorComponent from '@/common/services/find-ancestor-component'
import booleanUtil from '@/common/services/boolean-util'

// 增加高级搜索按钮
const auditAdvancedQuerybtn = asyncComponent(() =>
  import(
    /* webpackChunkName: "src-table-export" */ '../../../components/audit-advanced-querybtn.vue'
  )
)

const sdDateFormat = Vue.filter('sdDateFormat')

const sdDataTableExport = asyncComponent(() =>
  import(
    /* webpackChunkName: "src-table-export" */ '@/common/components/sd-table/sd-data-table-export.vue'
  )
)

function componentInRouterView(component) {
  return component?.$parent.$vnode.data.routerView
}

/**
 * <p>数据表格，自动处理翻页、搜索、列排序等功能</p>
 * <p>如果需要增删改等功能，请使用增强版表格：<a href="#sddatatableex">SdDataTableEx</a></p>
 * @displayName SdDataTable 数据表格
 */
export default {
  name: 'XmDataTable',
  mixins: [sdDataTableMixin, storeMixin],
  inheritAttrs: false,
  props: {
    projectlist: {
      type: Boolean,
      default: false,
    },
    /**
     * 获取表格数据 API的url
     */
    dataUrl: {
      type: String,
      required: true,
    },
    /**
     * 指定数据行的key，选中文档后点击按钮后会作为参数传递
     */
    rowKey: {
      type: [String, Function],
      default: 'id',
    },
    /**
     * 发送请求前，整理request对象
     */
    processReq: {
      type: Function,
      default: undefined,
    },
    /**
     * 数据返回后，整理response对象
     */
    processRes: {
      type: Function,
      default: undefined,
    },
    /**
     * 内部使用，用于导出Excel
     * @ignore
     */
    disableExportTable: {
      type: Boolean,
      default: false,
    },
    /**
     * 内部使用,用于设置默认选中todo,换成selectedRows
     * @ignore
     */
    selectedDatas: {
      type: Array,
      default: () => [],
    },

    /**
     * 选择列表单选或者复选 add by zzb 20220224
     */
    checkType: {
      type: String,
      default: 'checkbox',
    },
    /***
     * 是否显示高级搜索按钮
     */
    showAdvanceQuery: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否显示操作按钮
     */
    editnode: {
      type: Boolean,
      default: true,
    },
    /**
     * 默认分页数
     */
    defultpaginationPagesize: {
      type: Number,
      default: 0,
    },

    /** 自定义行 */
    customRow: {
      type: Function,
      requier: false,
    },
  },
  data() {
    return {
      data: [],
      localPagination: {
        current: 1,
        pageSize: 100,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['100', '200'],
        showTotal: (total) => (
          <span>
            <Button type='link' onClick={() => this.refresh()}>
              刷新
            </Button>
            {`共${total}条`}
          </span>
        ),
      },
      filters: null,
      sorter: null,
      localLoading: false,
      selectedRowKeys: [],
      selectedRows: [],
      searchText: '',
      btnIsLoading: {},
      showExportTable: false,
      userPerms2: {}, // build画的表的权限
      firstflag: true,
    }
  },
  computed: {
    computedPagination() {
      const result = {
        ...this.localPagination,
        ...this.pagination,
      }
      // 如果传入了pageSize，那么就不能让用户切换pageSize了，否则两个值会冲突
      if (this.pagination?.pageSize) {
        result.showSizeChanger = false
      }
      return result
    },
    formatedColumns() {
      const columnsFromPropAndLocal = [...this.columns]
      // 增加操作列
      if (this.inlineActions.length > 0) {
        columnsFromPropAndLocal.push({
          title: '操作',
          dataIndex: 'sd-opt',
          sdRender: 'opt',
          width: Math.min(this.inlineActions.length, this.maxInlineActions) * 75 + 'px',
        })
      }
      let hiddenDefaultSortOrderCount = 0
      const columns = columnsFromPropAndLocal
        .filter((col) => {
          // 过滤掉隐藏列
          const show = col.sdHidden !== true
          if (!show && col.defaultSortOrder) {
            // 默认排序的隐藏列，计数
            hiddenDefaultSortOrderCount++
          }
          return show
        })
        .map((col) => {
          col = { ...col }
          if (hiddenDefaultSortOrderCount > 0) {
            // 有默认排序的隐藏列，那么就不可能出现默认排序和手动排序刚好相符的情况
            // defaultSortOrder属性就不传给内部的a-table了
            delete col.defaultSortOrder
          }
          if (col.children) {
            col.children = col.children.map((childCol) => {
              childCol.ellipsis = true
              if (childCol.sdClickable) {
                // 如果此列可点击，增加额外的事件绑定
                childCol.customCell = (record, rowIndex) => {
                  return {
                    class: this.$style.clickableCell,
                    attrs: {
                      title: record[childCol.dataIndex],
                    },
                    on: {
                      click: () => {
                        /**
                         * 点击数据某行时触发
                         * @property {Object} record 点击的记录
                         * @property {Object} options 其他信息{rowIndex,column}
                         */
                        this.$emit('rowClick', record, {
                          rowIndex,
                          column: childCol,
                        })
                      },
                    },
                  }
                }
              }
              return childCol
            })
          }
          col.ellipsis = true
          if (col.sdClickable) {
            // 如果此列可点击，增加额外的事件绑定
            col.customCell = (record, rowIndex) => {
              return {
                class: this.$style.clickableCell,
                attrs: {
                  title: record[col.dataIndex],
                },
                on: {
                  click: () => {
                    /**
                     * 点击数据某行时触发
                     * @property {Object} record 点击的记录
                     * @property {Object} options 其他信息{rowIndex,column}
                     */
                    this.$emit('rowClick', record, {
                      rowIndex,
                      column: col,
                    })
                  },
                },
              }
            }
          }
          if (col.scopedSlots) return col
          // 自定义的列格式，转换为customRender
          switch (col.sdRender) {
            case 'sdDateTimeFormat':
              // 日期型
              col.customRender = (text) => {
                return sdDateFormat(text, 'YYYY-MM-DD HH:mm')
              }
              break
            case 'sdDateSecondTimeFormat':
              // 日期型
              col.customRender = (text) => {
                return sdDateFormat(text, 'YYYY-MM-DD HH:mm:ss')
              }
              break
            case 'sdDateFormat':
              // 日期型
              col.customRender = (text) => {
                return sdDateFormat(text, 'YYYY-MM-DD')
              }
              break
            case 'sdTimeFormat':
              // 日期型
              col.customRender = (text) => {
                return sdDateFormat(text, 'HH:mm:ss')
              }
              break
            case 'statusBadge':
              // 红绿灯
              col.customRender = (val) => {
                return booleanUtil.isTruthy(val) ? (
                  <Badge status='success' text='启用' />
                ) : (
                  <Badge status='error' text='停用' />
                )
              }
              break
            case 'iconCheck':
              // √ 符号
              col.customRender = (val) => {
                return booleanUtil.isTruthy(val) ? <Icon type='check' /> : null
              }
              break
            case 'opt':
              // 操作列
              col.ellipsis = false
              col.customCell = (record, rowIndex) => {
                return {
                  class: this.$style.tdOpt,
                }
              }
              col.sdClassName = this.$style.tdOpt
              col.customRender = (text, record, rowIndex, column) => {
                const doClick = (action) => {
                  // 按钮id + 记录id 作为action id，否则点一个记录所有记录的按钮都进入loading了
                  this.doAction({ ...action, id: action.id + record[this.rowKey] }, record, {
                    rowIndex,
                  })
                }

                // 处理按钮动态隐藏：先过滤掉有显示条件且不满足条件的按钮，再调用hidden
                const inlineActions = this.inlineActions
                  .filter(
                    (action) =>
                      !(action.displayExpressions?.length || action.permission) ||
                      record.listButtons?.includes(action.id)
                  )
                  .filter((action) => !action.hidden?.(record, rowIndex))

                // 没有按钮，直接返回
                if (inlineActions.length === 0) {
                  return
                }

                let inlineActionsToShow = []
                const inlineActionsRest = []
                if (inlineActions.length <= this.maxInlineActions) {
                  // 总按钮数 <= 最大显示数，全部显示出来
                  inlineActionsToShow = inlineActions
                } else {
                  // 总按钮数 > 最大显示数
                  inlineActions.forEach((action, index) => {
                    if (index < this.maxInlineActions - 1) {
                      // 靠前的按钮直接显示
                      inlineActionsToShow.push(action)
                    } else {
                      // 剩下的放进更多菜单
                      inlineActionsRest.push(action)
                    }
                  })
                }

                const results = []

                inlineActionsToShow.forEach((action) => {
                  results.push(
                    <a
                      vOn:click={(evt) => doClick(action)}
                      disabled={this.btnIsLoading[action.id + record[this.rowKey]]}
                      key={action.id}
                      title={action.title}
                      class={this.$style.optBtn}
                    >
                      {action.label}
                    </a>
                  )
                })

                if (inlineActionsRest.length) {
                  results.push(
                    <Popover class={this.$style.optBtn} overlayClassName={this.$style.popover}>
                      <Button.Group slot='content'>
                        {inlineActionsRest.map((action) => {
                          return (
                            <Button
                              vOn:click={(evt) => doClick(action)}
                              loading={this.btnIsLoading[action.id + record[this.rowKey]]}
                              title={action.title}
                              key={action.id}
                            >
                              {action.label}
                            </Button>
                          )
                        })}
                      </Button.Group>
                      <Icon type='ellipsis' />
                    </Popover>
                  )
                }

                return results
              }
              break
          }

          return col
        })

      return columns
    },
    actionsHasPermission() {
      const filterFn = (act) => {
        // 行内按钮不走formId的权限控制
        if (act.type === 'inline') return true
        // 不允许不指定任何权限
        if (typeof act.permission === 'undefined') {
          // eslint-disable-next-line no-console
          console.warn(
            `按钮 "${act.label}" 没有指定权限，所以不会显示给任何用户。如果不需要权限控制，permission请传null`
          )
          return false
        }
        if (act.children) {
          act.children = act.children.filter(filterFn)
        }
        // null表示不控制权限
        if (act.permission === null) return true
        // 最后从权限表里面读
        return this.allUserPerms[act.permission]
      }
      return this.actions.filter(filterFn)
    },
    batchActions() {
      return this.actionsHasPermission.filter((action) => action.type === 'batch')
    },
    primaryAction() {
      return this.actionsHasPermission.find((action) => action.type === 'primary')
    },
    inlineActions() {
      return this.actionsHasPermission.filter((action) => action.type === 'inline')
    },
    normalActions() {
      return this.actionsHasPermission.filter((action) => !action.type)
    },
    allExpressions() {
      // 拼接查询条件。有用户输入的searchText和代码传递的filterExpressions两部分
      let searchExpressions = []
      if (this.searchText) {
        searchExpressions = [
          {
            dataType: 'exps',
            op: 'or',
            expressionsValue: this.searchFields.map((field) => ({
              dataType: 'str',
              name: field,
              op: 'like',
              stringValue: `%${this.searchText}%`,
            })),
          },
        ]
      }

      return [...searchExpressions, ...this.filterExpressions]
    },
    formIds() {
      const formIds = this.actions
        .filter((item) => item.permission)
        .map((item) => item.permission.split('-')[0])

      return [...new Set(formIds)]
    },
    allUserPerms() {
      return { ...this.userPerms, ...this.userPerms2 }
    },
  },
  watch: {
    // 各种prop变化时，刷新表格
    filterExpressions() {
      this.refresh(true)
    },
    dataUrl() {
      this.refresh(true)
    },
    'selectedRowKeys.length': {
      handler() {
        this.updateSelectedRows()
      },
      immediate: true,
    },
    // 选择的值变化时，向父节点发送消息
    selectedRows() {
      this.$emit('selectedRowsChanged', this.selectedRows)
    },
    selectedDatas: {
      handler(values) {
        this.selectedRowKeys = this.selectedDatas.map((record) => {
          const rowKey = this.rowKey
          return typeof rowKey === 'function' ? rowKey(record) : record[rowKey]
        })
        this.selectedRows = values
      },
      immediate: true,
    },
    'pagination.pageSize': function(p) {
      this.refresh()
    },

    formIds: {
      handler(formIds) {
        if (!formIds.length) return
        Promise.all(
          formIds.map((formId) =>
            axios.get('api/framework/v1/form-perm/my-authed-perms?formId=' + formId)
          )
        ).then((res) => {
          const perms = res.map((item) => item.data)
          this.userPerms2 = Object.assign({}, ...perms)
        })
      },
      immediate: true,
    },
  },
  mounted() {
    // 给父级的Tabs和Card加个class，有特殊处理的样式

    const tableEx = findAncestorComponent(this, 'SdDataTableEx', 1)
    const current = tableEx || this
    // 找5层，表示找到直接/隔一层包裹table的ATabs
    const aTabs = findAncestorComponent(current, 'ATabs', 5)
    let aCard
    if (aTabs) {
      aCard = findAncestorComponent(aTabs, 'ACard', 1)
      // 只有ATabs外层的ACard直接嵌套在路由里，才加特殊class
      if (componentInRouterView(aCard) || findAncestorComponent(aCard, 'ACol', 1)) {
        aTabs.$el.classList.add('sd-has-table')
        aCard.$el.classList.add('sd-has-table')
      }
    } else {
      // 找1层，表示找到直接/隔一层包裹table的ACard
      aCard = findAncestorComponent(current, 'ACard', 2)
      if (componentInRouterView(aCard) || findAncestorComponent(aCard, 'ACol', 1)) {
        aCard.$el.classList.add('sd-has-table')
      }
    }
  },

  created() {
    this.loadData()
  },
  methods: {
    /**
     * 加载数据方法
     * @param {Object} pagination 分页选项器
     * @param {Object} filters 过滤条件
     * @param {Object} sorter 排序条件
     */
    onChange(pagination, filters, sorter) {
      this.localPagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.$emit('onChange', pagination, filters, sorter) // add by zzb
      this.loadData()
    },
    /**
     * 获取当前选中的记录(仅包含rowKey)
     * @public
     * @returns {Array}
     */
    getSelectedRowKeys() {
      return [...this.selectedRowKeys]
    },
    /**
     * 获取当前选中的记录
     * @returns {Object[]}
     * @public
     */
    getSelectedRows() {
      return cloneDeep(this.selectedRows)
    },
    /**
     * 刷新表格
     * @public
     * @param {boolean} toFirstPage 是否返回第一页
     */
    refresh(toFirstPage) {
      if (toFirstPage) this.localPagination.current = 1
      return this.loadData().then(() => {
        // 数据刷新后，更新选中的记录内容
        this.updateSelectedRows()
      })
    },
    clearSelection() {
      this.selectedRowKeys = []
    },
    loadData() {
      const pagination = this.computedPagination
      this.localLoading = true
      if (this.firstflag) {
        if (this.defultpaginationPagesize !== 0) {
          pagination.pageSize = this.defultpaginationPagesize
        }
        this.firstflag = false
      }
      const param = {
        columns: this.columns
          .map((col) => col.dataIndex)
          .filter((name) => name !== 'sd-opt')
          .join(','),
        // 后台-1表示显示所有记录
        maxResults: pagination.pageSize === Number.MAX_VALUE ? -1 : pagination.pageSize,
        startPosition: pagination.pageSize * (pagination.current - 1),
      }

      let sorters = []
      // 用户点击的排序列先放进去
      if (this.sorter?.order) {
        sorters.push(this.sorter)
      }
      // 获取默认排序列，可以是多个
      const defaultSorters = this.columns
        .filter((col) => col.defaultSortOrder)
        .map((col) => ({
          field: col.dataIndex,
          order: col.defaultSortOrder,
        }))

      if (
        // 用户没有点击排序
        sorters.length === 0 ||
        // 或者 用户点击的排序值和默认排序完全一样
        (sorters[0]?.field === defaultSorters[0]?.field &&
          sorters[0]?.order === defaultSorters[0]?.order)
      ) {
        // 直接用默认排序值即可
        sorters = defaultSorters
      }

      if (sorters.length > 0) {
        param.orderBy = sorters
          .map((sorter) => `${sorter.field} ${sorter.order.replace(/end$/, '')}`)
          .join(',')
      }

      param.expressions = this.allExpressions

      // 拼接行内按钮显示条件、权限点
      param.buttonExpressions = this.inlineActions
        .filter((action) => action.displayExpressions?.length > 0 || action.permission)
        .map((action) => ({
          id: action.id,
          expressions: action.displayExpressions,
          permission: action.permission,
        }))

      // 拼好的请求参数，交给processReq处理一下
      let req = {
        url: this.dataUrl,
        method: 'post',
        data: param,
      }
      if (this.processReq) req = this.processReq(req)

      return axios(req)
        .then((res) => {
          let data = res.data
          if (this.processRes) data = this.processRes(data)
          // Read total count from server
          pagination.total = data.total ?? data.totalSize
          // 处理删除文档后，当前页大于总页数的情况
          const current = Math.min(
            pagination.current,
            // 当前页至少为1，不能为0
            Math.max(Math.ceil(pagination.total / pagination.pageSize), 1)
          )

          if (current < pagination.current) {
            // 重新请求适当页的数据
            pagination.current = current
            this.loadData()
          } else {
            this.data = data.datas ?? data.data
          }

          this.localPagination = { ...pagination }
          /**
           * 表格数据加载完成时触发
           * @property {Object} pagination 分页信息{current,pageSize,total}
           */
          this.$emit('dataLoaded', {
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            data: this.data,
            respData: data,
          })
        })
        .finally(() => {
          this.localLoading = false
          if (this.projectlist) {
            if (
              document.getElementsByClassName('ant-table-empty').length > 0 &&
              document.getElementsByClassName('ant-table-placeholder').length > 0
            ) {
              document
                .getElementsByClassName('ant-table-empty')[0]
                .getElementsByClassName('ant-table-tbody')[0]
                .appendChild(document.getElementsByClassName('ant-table-placeholder')[0])
            }
            this.$emit('fnonloadsum')
          }
        })
    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onSearchChange(text) {
      if (this.searchText === text) return
      this.searchText = text.trim()
      const pagination = this.computedPagination
      pagination.current = 1
      this.localPagination = { ...pagination }
      this.loadData()
    },
    doAction(action, ...args) {
      // 调用callback，并处理loading状态
      this.btnIsLoading = { ...this.btnIsLoading, [action.id]: true }
      Promise.resolve(action.callback(...args)).finally(() => {
        if (action.label.includes('导出')) {
          setTimeout(() => {
            this.btnIsLoading = { ...this.btnIsLoading, [action.id]: false }
          }, 1000)
        } else {
          this.btnIsLoading = { ...this.btnIsLoading, [action.id]: false }
        }
      })
    },
    /**
     * 导出Excel
     * @public
     * @since 0.15
     * @returns {Promise}
     */
    exportExcel() {
      if (this.showExportTable) {
        return Promise.reject(new Error('已经在导出中……'))
      }
      this.showExportTable = true
      return new Promise((resolve, reject) => {
        this.exportResolve = resolve
      }).then(() => {
        this.showExportTable = false
      })
    },
    /**
     * 重新计算各列的宽度，容器宽度发生变化时，可以调用
     * @public
     * @since 0.15
     */
    handleResize() {
      return this.$refs.table.handleResize()
    },
    exportFinish() {
      this.exportResolve()
    },
    updateSelectedRows() {
      // selectedRows 与 selectedRowKeys 同步
      const records = [...this.data, ...this.selectedRows]
      this.selectedRows = this.selectedRowKeys.map((key) =>
        records.find((record) => {
          const rowKey = this.rowKey
          const recordKey = typeof rowKey === 'function' ? rowKey(record) : record[rowKey]
          return recordKey === key
        })
      )
      this.$emit('update:selectedDatas', this.selectedRows)
    },
    // 增加高级搜搜按钮调用方法
    searchbtnClick() {
      this.$emit('searchbtnClick')
    },
  },
  /**
   * 数据表格右上角(搜索框、按钮区)前面部分的内容
   * @slot headerPrefix
   */
  render() {
    const getBtn = (action, onClick, { disabled = false, type } = {}) => {
      const btn = (
        <Button
          class={action.class}
          type={type}
          disabled={disabled}
          vOn:click={onClick}
          loading={this.btnIsLoading[action.id]}
          key={action.id}
          title={action.title}
        >
          {action.label}
        </Button>
      )
      if (action.children?.length) {
        return (
          <div class='ant-btn-group ant-dropdown-button'>
            {[
              btn,
              <Dropdown
                placement='bottomRight'
                trigger={['click']}
                scopedSlots={{
                  overlay: () => (
                    <Menu>
                      {action.children.map((item) => {
                        const isLoading = this.btnIsLoading[item.id]
                        const disabled = item.type === 'batch' && this.selectedRowKeys.length === 0
                        return (
                          <Menu.Item
                            title={item.title}
                            disabled={isLoading || disabled}
                            vOn:click={() => {
                              if (item.type === 'batch') {
                                this.doAction(
                                  item,
                                  this.selectedRowKeys,
                                  cloneDeep(this.selectedRows)
                                )
                              } else {
                                this.doAction(item)
                              }
                            }}
                          >
                            {item.label}
                          </Menu.Item>
                        )
                      })}
                    </Menu>
                  ),
                }}
              >
                <Button type={type} class='ant-dropdown-trigger'>
                  <Icon type='down' />
                </Button>
              </Dropdown>,
            ]}
          </div>
        )
      } else {
        return btn
      }
    }
    const attrs = {
      rowKey: this.rowKey,
      loading: this.localLoading,
      dataSource: this.data,
      pagination: this.computedPagination,
      columns: this.formatedColumns,
      showHeader: this.showHeader,
      scroll: this.scroll,
      showAllColumns: this.disableExportTable,
    }
    if (this.showSelection) {
      attrs.rowSelection = {
        onChange: this.onSelectChange,
        selectedRowKeys: this.selectedRowKeys,
        type: this.checkType,
      }
      if (typeof this.showSelection === 'function') {
        attrs.rowSelection.getCheckboxProps = (record) => {
          return {
            props: {
              disabled: !this.showSelection(record),
            },
          }
        }
      }
    }
    if (this.customRow !== undefined) {
      attrs.customRow = this.customRow
    }

    const { headerPrefix, ...scopedSlots } = this.$scopedSlots
    return (
      <div
        class={{
          [this.$style.wrapper]: true,
          [this.$style.hidePagination]: this.hidePagination,
          projectlist: this.projectlist,
        }}
      >
        <div class={this.$style.header}>
          {headerPrefix?.()}
          {this.searchFields.length > 0 ? (
            <Input.Search
              vOn:search={this.onSearchChange}
              allow-clear
              placeholder='请输入搜索条件'
            />
          ) : null}
          {this.showAdvanceQuery ? (
            <auditAdvancedQuerybtn
              vOn:searchbtnClick={() => {
                this.searchbtnClick()
              }}
            />
          ) : null}
          <span v-show={this.editnode}>
            {this.primaryAction
              ? getBtn(this.primaryAction, () => this.doAction(this.primaryAction), {
                  type: 'primary',
                })
              : null}
            {this.normalActions.map((action) => {
              return getBtn(action, () => this.doAction(action))
            })}
            {this.batchActions.map((action) => {
              return getBtn(
                action,
                (evt) => {
                  this.doAction(action, this.selectedRowKeys, cloneDeep(this.selectedRows))
                },
                { disabled: this.selectedRowKeys.length === 0 }
              )
            })}
          </span>
        </div>
        <SdTable
          {...{
            attrs,
            ref: 'table',
            scopedSlots: { ...scopedSlots },
          }}
          onChange={this.onChange}
          onRefresh={this.refresh}
        ></SdTable>
        {this.disableExportTable || !this.showExportTable ? null : (
          <sdDataTableExport
            {...{
              attrs: {
                ...this.$props,
                // 把用户输入的搜索条件也作为filter
                filterExpressions: this.allExpressions,
                sorter: this.sorter,
              },
              scopedSlots,
              on: {
                finish: this.exportFinish,
              },
            }}
          />
        )}
      </div>
    )
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
// 包裹表格的tab页特殊处理
:global(.sd-has-table.ant-tabs) {
  .wrapper {
    margin-top: -64px;
  }

  :global(.ant-tabs-nav) {
    position: relative;
    z-index: 2;
  }

  .header {
    height: 42px;
  }
}
// 包裹表格的Card特殊处理
:global(.sd-has-table.ant-card) {
  min-height: 100%;
}

.header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  float: right;
  margin: 3px 0;
  :global .ant-input-search {
    width: 200px;
    margin-left: 10px;
  }
  :global .ant-btn {
    margin: 5px 0 5px 10px;
  }
  :global .ant-btn-group {
    margin-left: 10px;
  }
}
.wrapper {
  :global(.ant-table-tbody) {
    .clickable-cell {
      color: $primary-color;
      cursor: pointer;
      &:hover {
        color: $primary-5;
      }
      &:active {
        color: $primary-7;
      }
    }
  }
  .td-opt {
    padding: 0;
    .opt-btn + .opt-btn {
      padding-left: 10px;
    }
  }
}
.hide-pagination {
  :global(.ant-table-pagination) {
    display: none;
  }
}
.popover {
  :global .ant-popover-inner-content {
    padding: 0;
    margin-bottom: -10px;
  }
  :global .ant-popover-arrow {
    display: none;
  }

  :global .ant-btn-group {
    white-space: nowrap;
  }
}
</style>