laws_weilai/jero-web/src/views/documentManage/subscribtion/index.vue

<template>
  <div class="subscribtion">
    <a-card :bordered="false">
      <div class="subscribtion-search-wrapper">
        <div class="subscribtion-search-header">
          <a-form layout="inline" @keyup.enter.native="searchQuery(queryParams)">
            <a-form-model
              class="subscribtion-content"
              :model="queryParams"
              ref="tagEditForm"
            >
              <a-row :gutter="44">
                <a-col :md="6" :sm="12">
                  <a-form-model-item :label="'编号'">
                    <j-input :placeholder="'请输入编号'" v-model="queryParams.serialNumber"></j-input>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="12">
                  <a-form-model-item :label="'标题'">
                    <j-input :placeholder="'请输入标题'" v-model="queryParams.title"></j-input>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="8">
                  <a-form-model-item :label="'状态'">
                    <j-dict-select-tag type="list" v-model="queryParams.state" dictCode="file_type" :placeholder="'请选择状态'" />
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="8">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">{{$t('query')}}</a-button>
                    <a-button @click="searchReset" icon="reload" style="margin-left: 8px">清空</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form-model>
          </a-form>
        </div>
      </div>
      <div class="table-operator">
        <div class="operator-text" @click="handleBatManage">
          <a-icon type="plus" />
          订阅领域管理
        </div>
        <div class="operator-text" @click="handleBatCancel">
          <a-icon type="delete" />
          批量取消
        </div>
      </div>
      <div class="colloction-table">
        <a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" :loading="loading" class="tag-con-table">
          <a slot="serialNumber" slot-scope="text, record" @click="numberClick(record)">{{ text }}</a>
<!--          <a slot="title" slot-scope="text, record" @click="titleClick(record)">{{ text }}</a>-->
          <template slot="action" slot-scope="text, record">
              <a class="action-delete" href="javascript:;" @click="onCancel(record)">取消订阅</a>
          </template>
        </a-table>
        <div class="page" v-if="tableData.length > 0">
          <a-pagination
            :show-total="total => `共 ${total} 条`"
            show-quick-jumper
            show-size-changer
            :current="queryParams.pageNo"
            :page-size.sync="queryParams.pageSize"
            :total="total"
            @change="onChangePage"
            @showSizeChange="SizeChange"
          />
        </div>
      </div>
      <sub-area v-if="visible" :subVisible="visible" @visible="areaVisible"></sub-area>
    </a-card>
  </div>
</template>
<script>
  import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
  // import search from '@/components/search'
  import subArea from './module/subArea'
  export default {
    name:'subscribtion',
    components:{
      subArea
    },
    data(){
      return{
        selectedRowKeys:[],
        queryParams:{
          pageNo:1,
          pageSize:10
        },  //搜索条件
        total:0,
        //列表表头
        columns: [
          {
            title: '编号',
            dataIndex: 'serialNumber',
            key: 'serialNumber',
            align: "center",
            width: 100,
            ellipsis: true,
          },
          {
            title: '标题',
            align: "center",
            width: 100,
            dataIndex: 'title',
            ellipsis: true,
          },
          {
            title: '状态',
            align: "center",
            width: 100,
            dataIndex: 'state',
            ellipsis: true,
          },
          {
            title: '订阅时间',
            align: "center",
            width: 100,
            dataIndex: 'createTime',
            ellipsis: true,
          },
          {
            title: this.$t('operation'),
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 170
          }
        ],
        tableData:[],  //列表数据
        visible:false,
        selecIds:'',
        loading:false
      }
    },
    mounted() {
      this.loadData()
    },
    methods:{
      //获取列表数据
      loadData(){
        let params={
          ...this.queryParams
        }
        this.loading=true
        getAction(`subscribe/onlCgformSubscribe/page`,params).then(res=>{
          if(res.success){
            this.tableData= [ ...res.result.records ]
            this.loading=false
          }
        })
      },//搜索
      searchQuery(){
        this.loadData()
      },
      //订阅领域管理
      handleBatManage(){
        this.visible=true
      },
      //批量取消收藏
      handleBatCancel(){
        let params={
          ids:this.selecIds
        }
        if(this.selecIds){
          this.$confirm({
            title: '确认批量取消订阅?',
            content: '',
            onOk:
              async () => {
                deleteAction(`subscribe/onlCgformSubscribe/deleteBatch`,params).then(res=> {
                  if(res.success){
                    this.$message.success(res.message)
                    this.selectedRowKeys = []
                    this.loadData()
                  }else{
                    this.$message.warning(res.message)
                  }
                })
              },
            onCancel() {},
          });
        }else{
          this.$message.warning('请选择至少一条数据')
        }
      },
      //取消收藏
      onCancel(record){
        let params={
          id:record.id
        }
        this.$confirm({
          title: '确认取消订阅?',
          content: '',
          onOk:
            async () => {
              deleteAction(`subscribe/onlCgformSubscribe/delete`,params).then(res=> {
                if(res.success){
                  this.$message.success(res.message)
                  this.loadData()
                }else{
                  this.$message.warning(res.message)
                }
              })
            },
          onCancel() {},
        });
      },
      //清空
      searchReset(){
        this.queryParams={
          pageNo: 1,
          pageSize: 10
        }
        this.loadData()
      },
      //点击页数
      onChangePage(page,pageSize){
        this.queryParams.pageNo = page
        this.loadData()
      },
      //一页显示条数
      SizeChange(page,pageSize){
        this.queryParams.pageSize = pageSize
        this.loadData()
      },
      //选择框
      onSelectChange(selectedRowKeys,rows) {
        this.selectedRowKeys = selectedRowKeys;
        let ids=[]
        if(rows && rows.length>0){
          rows.forEach(item=>{
            ids.push(item.id)
          })
        }
        this.selecIds=ids.join(',')
      },
      //点击编号
      numberClick(records){

      },
      //点击名称
      titleClick(records){

      },
      areaVisible(val){
        this.visible=val
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '~@assets/less/common.less';
  .subscribtion{
      .subscribtion-search-wrapper{
        margin-bottom: 20px;
      }
      .page{
        margin-top: 20px;
      }
  }

</style>
<style lang="less">
  .subscribtion{
    .subscribtion-content{
      .ant-form-item-control-wrapper{
        min-width: 180px;
      }
    }
  }
</style>