我的订阅

This commit is contained in:
caoyang
2022-02-21 11:30:07 +08:00
parent 5865b6a3b5
commit 3c1740cfc3
7 changed files with 495 additions and 24 deletions
@@ -0,0 +1,204 @@
<template>
<div class="subscribtion">
<a-card :bordered="false">
<div class="subscribtion-search-wrapper">
<div class="subscribtion-search-header">
<!-- <search ></search>-->
<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" style="margin-top: 10px">
<a-button @click="handleBatManage" type="primary">订阅领域管理</a-button>
<a-button @click="handleBatCancel" type="danger">批量取消</a-button>
</div>
<div class="colloction-table">
<a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" 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-popconfirm
v-if="tableData.length"
title="确定取消订阅?"
@confirm="() => onCancel(record)"
>
<a class="action-delete" href="javascript:;">取消订阅</a>
</a-popconfirm>
</template>
</a-table>
<div class="page" v-if="tableData.length > 0">
<a-pagination
:show-total="total => ` ${total} `"
show-quick-jumper
show-size-changer
: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'
// import search from '@/components/search'
export default {
name:'subscribtion',
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:[], //列表数据
}
},
mounted() {
this.loadData()
},
methods:{
//获取列表数据
loadData(){
let params={
...this.queryParams
}
getAction(``,params).then(res=>{
if(res.success){
// this.tableData= { ...res.result.records }
}
})
},//搜索
searchQuery(){
this.loadData()
},
//订阅领域管理
handleBatManage(){
},
//批量取消收藏
handleBatCancel(){
},
//取消收藏
onCancel(record){
},
//清空
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) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
//点击编号
numberClick(records){
},
//点击名称
titleClick(records){
}
}
}
</script>
<style lang="less" scoped>
</style>
<style lang="less">
.subscribtion{
.subscribtion-content{
.ant-form-item-control-wrapper{
min-width: 180px;
}
}
}
</style>