Files
laws_weilai/jero-web/src/views/documentManage/collection/index.vue
T
2022-03-18 14:09:42 +08:00

299 lines
8.9 KiB
Java

<template>
<div class="collection">
<a-card :bordered="false">
<div class="collection-search-wrapper">
<div class="collection-search-header">
<a-form layout="inline" @keyup.enter.native="searchQuery(queryParams)">
<a-form-model
class="collection-content"
:model="queryParams"
ref="tagEditForm"
>
<a-row :gutter="24" type="flex" justify="start">
<a-col :md="6" :sm="8">
<a-form-model-item :label="$t('standard')">
<a-input :placeholder="$t('enterNumber')" v-model="queryParams.serialNumber"></a-input>
</a-form-model-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-model-item :label="$t('title')">
<a-input :placeholder="$t('enterTitle')" v-model="queryParams.title"></a-input>
</a-form-model-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-model-item :label="$t('status')">
<j-dict-select-tag type="list" v-model="queryParams.state" dictCode="file_type" :placeholder="$t('selectStatus')" />
</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">{{ $t('reset') }}</a-button>
</span>
</a-col>
</a-row>
</a-form-model>
</a-form>
</div>
</div>
<div class="table-operator">
<div class="operator-text" @click="handleBatCancel">
<a-icon type="delete" />
{{ $t('BatchCancel') }}
</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('CancelCollection')}}</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>
</a-card>
</div>
</template>
<script>
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
export default {
name:'collection',
data(){
return{
selectedRowKeys:[],
queryParams:{
pageNo:1,
pageSize:10
}, //搜索条件
total:0,
//列表表头
columns: [
{
title: this.$t('standard'),
dataIndex: 'serialNumber',
key: 'serialNumber',
scopedSlots: {customRender: 'serialNumber'},
align: "center",
width: 100,
},
{
title: this.$t('title'),
align: "center",
scopedSlots: {customRender: 'serialtitle'},
width: 100,
dataIndex: 'title',
},
{
title: this.$t('status'),
align: "center",
width: 100,
dataIndex: 'state',
},
{
title: this.$t('collectionTime'),
align: "center",
width: 100,
dataIndex: 'createTime',
},
{
title: this.$t('operation'),
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
align: "center",
width: 170
}
],
tableData:[], //列表数据
selecIds:[],
loading:false,
}
},
mounted() {
this.loadData()
},
methods:{
//获取列表数据
loadData(){
let params={
...this.queryParams
}
this.loading=true
postAction(`collection/onlCgformCollection/page`,params).then(res=>{
if(res.success){
this.tableData= [ ...res.result.records ]
this.total=res.result.total
this.loading=false
}
})
},//搜索
searchQuery(){
this.loadData()
},
//批量取消收藏
handleBatCancel(){
let params={
ids:this.selecIds.join(',')
}
if(this.selecIds&&this.selecIds.length>0){
this.$confirm({
title: this.$t('BatchCancelCollection'),
content: '',
onOk:
async () => {
deleteAction(`collection/onlCgformCollection/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('confirmCancelCollection'),
content: '',
onOk:
async () => {
deleteAction(`collection/onlCgformCollection/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.queryParams.pageNo=1
this.loadData()
},
//选择框
onSelectChange(rows) {
// console.log('rows',rows)
this.selectedRowKeys = rows
// let ids=[]
// if(rows && rows.length>0){
// rows.forEach(item=>{
// ids.push(item.id)
// })
// }
this.selecIds=rows
// console.log('selectedRowKeys changed: ', ids);
},
//点击编号
numberClick(records){
},
//点击名称
titleClick(records){
},
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';
.collection{
.collection-search-wrapper{
margin-bottom: 20px;
}
.colloction-table{
.page{
margin-top: 20px;
text-align: right;
}
}
}
</style>
<style lang="less">
.collection{
.collection-content{
.ant-form-item-control-wrapper{
min-width: 180px;
}
}
}
.collection-search-header{
.ant-form-item-control-wrapper{
min-width: 200px;
.ant-form-item{
display: flex;
}
}
.ant-col-md-6{
display: flex;
}
.table-page-search-submitButtons{
float: none!important;
}
}
</style>