Files
laws_weilai/jero-web/src/views/documentManage/subscribtion/index.vue
T
2022-03-11 10:33:36 +08:00

324 lines
9.6 KiB
Java

<template>
<div class="subscribtion">
<a-card :bordered="false">
<div class="subscribtion-search-wrapper">
<div class="subscribtion-search-header">
<!-- <search :url="url" :flag="'1'"></search>-->
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="6">
<a-form-item :label="$t('standard')">
<a-input :placeholder="$t('enterNumber')" v-model="queryParams.serialNumber"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="6">
<a-form-item :label="$t('title')">
<a-input :placeholder="$t('enterTitle')" v-model="queryParams.title"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="6">
<a-form-item :label="$t('status')">
<j-dict-select-tag type="list" v-model="queryParams.state" dictCode="file_type" :placeholder="$t('selectStatus')" />
</a-form-item>
</a-col>
<a-col :md="6" :sm="4">
<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 type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('reset')}}</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
</div>
<div class="table-operator">
<div class="operator-text" @click="handleBatManage">
<a-icon type="plus" />
{{ $t('SubscriptionManagement') }}
</div>
<div class="operator-text" @click="handleBatCancel">
<a-icon type="delete" />
{{ $t('BatchCancellation') }}
</div>
</div>
<div class="colloction-table">
<a-table
ref="table"
size="middle"
rowKey="id"
:columns="columns"
:dataSource="tableData"
:pagination="false"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
>
<span slot="serialNumber" slot-scope="text, record">
<a class="table-del" @click="onDetail(record)">{{record.serialNumber}}</a>
</span>
<span slot="serialtitle" slot-scope="text, record">
<a class="table-del" @click="onDetail(record)">{{record.title}}</a>
</span>
<span slot="action" slot-scope="text, record">
<a class="table-del" @click="onCancel(record)">{{$t('CancelSubscribe')}}</a>
</span>
</a-table>
<div class="page" v-if="tableData.length > 0">
<a-pagination
:show-total="total => $t('total')+` ${total} `+ $t('strip')"
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/index'
import tableData from '@/components/coTable/index'
import subArea from './module/subArea'
import eventBUs from '../../../common/event'
export default {
name:'subscribtion',
components:{
subArea,
search,
tableData
},
data(){
return{
selectedRowKeys:[],
queryParams:{
pageNo:1,
pageSize:10
}, //搜索条件
total:0,
//列表表头
columns: [
{
title: this.$t('standard'),
dataIndex: 'serialNumber',
key: 'serialNumber',
align: "center",
width: 100,
scopedSlots: {customRender: 'serialNumber'},
ellipsis: true,
},
{
title: this.$t('title'),
align: "center",
width: 100,
dataIndex: 'title',
scopedSlots: {customRender: 'serialtitle'},
ellipsis: true,
},
{
title: this.$t('status'),
align: "center",
width: 100,
dataIndex: 'state',
ellipsis: true,
},
{
title: this.$t('subscriptionTime'),
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,
url:{
tableHeader: 'subscribe/onlCgformSubscribe/getHeader', //表格头部字段
seachList: 'subscribe/onlCgformSubscribe/queryCondition', //搜索字段
tableList: 'subscribe/onlCgformSubscribe/page', //表格数据
},
OperationList: [
{
text: this.$t('CancelSubscribe'),
ClickEvent: 'onCancel'
}
],
}
},
mounted() {
this.loadData()
},
methods:{
//获取列表数据
loadData(){
let params={
...this.queryParams
}
this.loading=true
postAction(`subscribe/onlCgformSubscribe/page`,params).then(res=>{
if(res.success){
this.tableData= [ ...res.result.records ]
this.total=res.result.total
this.loading=false
}
})
},//搜索
searchQuery(){
this.loadData()
},
//订阅领域管理
handleBatManage(){
this.visible=true
},
//批量取消收藏
handleBatCancel(){
let params={
ids:this.selecIds.join(',')
}
if(this.selecIds&&this.selecIds.length>0){
this.$confirm({
title: this.$t('confirmBulkUnsubscribe'),
content: '',
onOk:
async () => {
deleteAction(`subscribe/onlCgformSubscribe/deleteBatch`,params).then(res=> {
if(res.success){
this.$message.success(this.$t('OperationSuccessful'))
if(this.selecIds.length==this.tableData.length&&this.queryParams.pageNo!==1){
this.queryParams.pageNo=this.queryParams.pageNo-1
}
this.loadData()
}else{
this.$message.warning(this.$t('operationFailed'))
}
})
},
onCancel() {},
});
}else{
this.$message.warning(this.$t('selectLeastOne'))
}
},
//取消订阅
onCancel(record){
let params={
id:record.id
}
this.$confirm({
title: this.$t('unsubscribeConfirm'),
content: '',
onOk:
async () => {
deleteAction(`subscribe/onlCgformSubscribe/delete`,params).then(res=> {
if(res.success){
this.$message.success(this.$t('OperationSuccessful'))
if(this.tableData.length==1&&this.queryParams.pageNo!==1){
this.queryParams.pageNo=this.queryParams.pageNo-1
}
this.loadData()
}else{
this.$message.warning(this.$t('operationFailed'))
}
})
},
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(rows) {
// this.selectedRowKeys = selectedRowKeys;
// let ids=[]
// if(rows && rows.length>0){
// rows.forEach(item=>{
// ids.push(item.id)
// })
// }
this.selecIds=rows
},
//点击编号
numberClick(records){
},
//点击名称
titleClick(records){
},
areaVisible(val){
this.visible=val
},
//跳转详情
onDetail(item) {
let newUrl = this.$router.resolve({
path: '/docManage/library/detail',
query: { id:item.documentId }
})
window.open(newUrl.href, '_blank')
}
}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.subscribtion{
.subscribtion-search-wrapper{
margin-bottom: 20px;
}
.page{
margin-top: 20px;
text-align: right;
}
}
</style>
<style lang="less">
.subscribtion{
.subscribtion-content{
.ant-form-item-control-wrapper{
min-width: 180px;
.ant-form-item{
display: flex;
}
}
}
}
.subscribtion-search-header{
.ant-form-item-control-wrapper{
min-width: 200px;
}
.table-page-search-submitButtons{
float: none!important;
}
}
</style>