Files
laws_weilai/jero-web/src/views/documentManage/collection/index.vue
T
2023-03-31 10:49:01 +08:00

410 lines
12 KiB
Java

<template>
<div class="collection">
<a-card :bordered="false">
<a-tabs :model="activeTab" @change="callback">
<a-tab-pane :key="$t('DocumentLibrary')" :tab="$t('DocumentLibrary')">
<div class="collection-search-wrapper">
<div class="collection-search-header">
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('standard')">
<span>{{$t('standard')}}</span>
</div>
<a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('standard')"
v-model="queryParams.serialNumber"></a-input>
</div>
</a-col>
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('title')">
<span>{{$t('title')}}</span>
</div>
<a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('title')"
v-model="queryParams.title"></a-input>
</div>
</a-col>
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('status')">
<span>{{$t('status')}}</span>
</div>
<j-dict-select-tag class="box-input" v-model="queryParams.state"
:placeholder="$t('PleaseSelect')+$t('status')"
:type="'select'"
:triggerChange="false" :dictCode="'state'"/>
</div>
</a-col>
<span style="float: right;overflow: hidden;margin-right: 11px"
class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<a-button class="box-button" @click="searchReset">{{$t('reset')}}</a-button>
<a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
</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
:components="drag(columns,'columns')"
ref="table"
size="middle"
rowKey="id"
:scroll="{x: '100%'}"
:columns="columns"
:dataSource="tableData"
:pagination="false"
:loading="loading"
@change="tableOnChange"
: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-tab-pane>
<a-tab-pane :key="$t('problemKnowledgeBase')" :tab="$t('problemKnowledgeBase')">
<problemKnowledgeBaseList ref="problemKnowledgeBaseListRef"/>
</a-tab-pane>
</a-tabs>
</a-card>
</div>
</template>
<script>
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
import problemKnowledgeBaseList from './components/problemKnowledgeBaseList'
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
export default {
name: 'collection',
components: {
problemKnowledgeBaseList
},
mixins:[ResizeHeader, ResizeColumnProvide],
data() {
return {
selectedRowKeys: [],
activeTab: this.$t('DocumentLibrary'),
queryParams: {
pageNo: 1,
pageSize: 10
}, //搜索条件
total: 0,
orderBy: '1',
orderByField: '',
//列表表头
columns: [
{
title: this.$t('standard'),
dataIndex: 'serialNumber',
key: 'serialNumber',
scopedSlots: { customRender: 'serialNumber' },
align: 'left',
sorter: true,
ellipsis: true,
width: 335
},
{
title: this.$t('title'),
align: 'left',
scopedSlots: { customRender: 'serialtitle' },
width: 510,
ellipsis: true,
dataIndex: 'title'
},
{
title: this.$t('status'),
align: 'left',
width: 254,
ellipsis: true,
sorter: true,
dataIndex: 'state'
},
{
title: this.$t('collectionTime'),
align: 'left',
width: 299,
ellipsis: true,
sorter: true,
dataIndex: 'createTime'
},
{
title: this.$t('operation'),
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'left',
fixed: 'right',
width: 170
}
],
tableData: [], //列表数据
selecIds: [],
loading: false
}
},
mounted() {
this.loadData()
},
methods: {
tableOnChange(pagination, filters, sorter) {
this.orderBy = sorter.order == 'ascend' ? '1' : '2'
if (sorter.columnKey == 'serialNumber') {
this.orderByField = 'serial_number'
} else if (sorter.columnKey == 'createTime') {
this.orderByField = 'create_time'
} else {
this.orderByField = sorter.columnKey
}
this.loadData()
},
//获取列表数据
loadData() {
let params = {
orderBy: this.orderBy,
orderByField: this.orderByField,
...this.queryParams
}
this.loading = true
postAction(`collection/onlCgformCollection/page`, params).then(res => {
if (res.success) {
if (res.result.current > 1 && res.result.records.length == 0) {
this.queryParams.pageNo = 1
this.loadData()
return
}
this.tableData = [...res.result.records]
this.total = res.result.total
this.loading = false
}
})
},//搜索
callback(event) {
},
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,
serial_number: item.serialNumber,
title: item.title
}
})
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;
}
}
}
.box-title-text {
line-height: 1.4;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.title-text {
width: 110px;
color: #000F16;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
margin-top: 3px;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.box-input {
display: inline-block;
width: 100%;
height: 38px;
}
.box-button {
height: 38px;
}
///deep/ .nio-drag-handler {
// position: absolute;
// right: 0;
// top: 0;
// height: 100%;
// width: 1px;
// z-index: 1;
// border-left: 1px #e8e8e8 solid;
//}
::v-deep .ant-card-body {
padding: 0 24px!important;
}
</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>