laws-sinotruk-client/src/views/personalCenter/myCollection/MyCollection.vue

<!--我的收藏-->
<template>
<div class="collection">
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <!--标准号-->
            <a-form-item :label="$t('personalCenter.collection.standardNo')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-input :placeholder="$t('pleaseEnter') + $t('personalCenter.collection.standardNo')"
                       v-model="queryParam.standardNumber"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <!--标准名称-->
            <a-form-item :label="$t('personalCenter.collection.standardName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-input :placeholder="$t('pleaseEnter') + $t('personalCenter.collection.standardName')"
                       v-model="queryParam.standardName"></j-input>
            </a-form-item>
          </a-col>
          <div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
            <a-button class="box-button" type="primary" icon="search" @click="searchQuery" v-has="'personalCenter:myCollection:search'">{{ $t('query') }}</a-button>
            <a-button class="box-button" icon="reload" style="margin-left: 8px" @click="searchReset">{{ $t('reset') }}</a-button>
          </div>
        </a-row>
      </a-form>
    </div>
    <j-table
      ref="table"
      :bordered="true"
      size="middle"
      rowKey="id"
      :can-drag="true"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :scroll="{x: '100%'}"
      @change="handleTableChange">

      <!--标准号、标准名称-->
      <template v-slot:toDetail="{text, record}">
        <a-tooltip overlay-class-name="tooltip-style">
          <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
          <a v-if="text" class="link-a" @click="handleGoDetail(record)">{{ text }}</a>
          <div v-else class="table-text">{{ global.emptyLine }}</div>
        </a-tooltip>
      </template>

      <template v-slot:action="{text, record}">
        <!--取消收藏-->
        <a class="table-del" @click="handleCancelCollect(record)" v-has="'personalCenter:myCollection:cancelCollect'">{{$t('personalCenter.collection.cancelCollection')}}</a>
      </template>
    </j-table>
  </a-card>
</div>
</template>

<script>
import '@assets/less/common.less'
import JTable from '@/components/jero/JTable'
import { JeroListMixin } from '@/mixins/JeroListMixin'
import { cancelCollect } from '@/api/personCenter'

export default {
  name: 'MyCollection',
  components: { JTable },
  mixins: [JeroListMixin],
  data () {
    return {
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 14
      },
      columns: [
        {
          title: this.$t('personalCenter.collection.standardNo'),
          align: 'center',
          width: 180,
          dataIndex: 'standardNumber',
          scopedSlots: { customRender: 'toDetail' }
        },
        {
          title: this.$t('personalCenter.collection.standardName'),
          align: 'center',
          width: 180,
          dataIndex: 'standardName',
          scopedSlots: { customRender: 'toDetail' }
        },
        {
          title: this.$t('personalCenter.collection.releaseDate'),
          align: 'center',
          width: 180,
          dataIndex: 'releaseDate',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('personalCenter.collection.newCarTypeDate'),
          align: 'center',
          width: 180,
          dataIndex: 'newModelImplementationDate',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('personalCenter.collection.productCarDate'),
          align: 'center',
          width: 180,
          dataIndex: 'onTheProductionDate',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('personalCenter.collection.standardState'),
          align: 'center',
          width: 180,
          dataIndex: 'standardState',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('operation'),
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 200
        }
      ],
      url: {
        list: '/personal/lawsStandardCollection/page'
      }
    }
  },
  methods: {
    // 点击跳转标准详情
    handleGoDetail (record) {
      let path = ''
      // 需要先判断是哪种标准
      if (record.source === '1') {
        path = '/standardRegulationLibrary/DomesticStandardDetail'
      } else if (record.source === '2') {
        path = '/standardRegulationLibrary/OverseasStandardDetail'
      } else if (record.source === '3') {
        path = '/enterpriseStandardLibrary/enterpriseStandardDetail'
      }
      this.$openPageNewSheet({
        path: path,
        query: {
          id: record.id
        }
      })
    },
    // 取消收藏
    handleCancelCollect (record) {
      cancelCollect({ id: record.id }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>