laws-sinotruk-client/src/views/documentTool/customComparison/modules/StandardListDrawer.vue

<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    :maskClosable="false"
    class="custom-drawer-style">

    <div class="custom-drawer-style-scroll">
      <j-table
        ref="table"
        size="middle"
        :columns="columns"
        :data-source="dataSource"
        rowKey="id"
        :can-drag="true"
        :loading="confirmLoading"
        :pagination="ipagination"
        :scroll="{x: '100%'}"
        :operation-list="operationList"
        @change="handleTableChange"
        @operationClick="operationClick">

        <!--跳转标准详情-->
        <template v-slot:detail="{text, record}">
          <a-tooltip overlay-class-name="tooltip-style">
            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
            <div class="table-text can-click-table-text" v-if="text || text === 0" @click="toDetailPage(record)">{{ text }}</div>
            <div v-else class="table-text">{{ global.emptyLine }}</div>
          </a-tooltip>
        </template>

      </j-table>
    </div>

  </a-drawer>
</template>

<script>
import JTable from '../../../../components/jero/JTable'
import { deleteCustomComparisonStandard, getCustomComparisonStandardList } from '../../../../api/documentToolApi'
import { StandardSource } from '../../../../enums/commonEnums'

export default {
  name: 'StandardListDrawer',
  components: { JTable },
  data () {
    return {
      title: this.$t('docTool.customComparison.standardList'),
      confirmLoading: false,
      width: 900,
      visible: false,
      columns: [
        // 编号
        {
          title: this.$t('number'),
          dataIndex: 'standardNumber',
          width: 150,
          scopedSlots: { customRender: 'detail' }
        },
        // 名称
        {
          title: this.$t('title'),
          dataIndex: 'standardName',
          width: 150,
          scopedSlots: { customRender: 'detail' }
        },
        // 发布日期
        {
          title: this.$t('standardSelect.releaseDate'),
          dataIndex: 'releaseDate',
          width: 120
        },
        // 文本状态
        {
          title: this.$t('standardSelect.textState'),
          dataIndex: 'standardState_dictText',
          width: 120
        },
        // 操作
        {
          title: this.$t('operation'),
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      operationList: [
        { // 删除
          text: this.$t('delete'),
          clickEvent: 'handleDelete'
          // has: 'enterpriseStandardLibrary:plan:delete'
        }
      ],
      infoId: null // 自定义比对数据的id
    }
  },
  methods: {
    open (id) {
      this.visible = true
      this.infoId = id
      this.loadData(1)
    },
    handleCancel () {
      this.visible = false
    },
    /**
     * 分页变化
     * @param pagination
     */
    handleTableChange (pagination) {
      this.ipagination = pagination
    },
    /**
     * 循环操作按钮的操作
     * @param operation
     * @param record
     */
    operationClick (operation, record) {
      if (operation.clickEvent === 'handleDelete') {
        this.handleDelete(record.id)
      } else {
        this[operation.clickEvent](record)
      }
    },
    /**
     * 删除
     * @param id
     */
    handleDelete ({ id }) {
      this.$confirm({
        title: this.$t('confirmDeletion'),
        content: this.$t('areYouSure'),
        onOk: () => {
          this.confirmLoading = true
          const params = {
            infoId: this.infoId,
            standardId: id
          }
          deleteCustomComparisonStandard(params).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              // 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
              if (this.ipagination.current > 1 && ((this.ipagination.current - 1) * this.ipagination.pageSize) + 1 === this.ipagination.total) {
                this.ipagination.current -= 1
              }
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    /**
     * 跳转标准详情
     * @param standardSource
     */
    toDetailPage ({ standardSource, standardId }) {
      let path
      // 根据来源跳转不同的详情页
      switch (standardSource) {
        // 国内
        case StandardSource.DOMESTIC.value:
          path = '/standardRegulationLibrary/DomesticStandardDetail'
          break
        // 海外
        case StandardSource.OVERSEAS.value:
          path = '/standardRegulationLibrary/OverseasStandardDetail'
          break
        // 企标
        case StandardSource.ENTERPRISE.value:
          path = '/enterpriseStandardLibrary/enterpriseStandardDetail'
          break
        default:
          break
      }
      if (!path) {
        return
      }
      const query = {
        id: standardId
      }
      this.$openPageNewSheet({
        path, query
      })
    },
    loadData (arg) {
      if (arg) {
        this.ipagination.current = 1
      }
      this.confirmLoading = true
      const params = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        id: this.infoId
      }
      getCustomComparisonStandardList(params).then(res => {
        if (res.success) {
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';

</style>