You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
9.8 KiB
341 lines
9.8 KiB
<template>
|
|
<div>
|
|
<div class="breadcrumb">
|
|
<a-breadcrumb>
|
|
<a-breadcrumb-item>文化数据分类管理</a-breadcrumb-item>
|
|
<a-breadcrumb-item>文化数据类别管理</a-breadcrumb-item>
|
|
</a-breadcrumb>
|
|
</div>
|
|
<div class="body">
|
|
<div class="query">
|
|
<a-row type="flex" justify="space-between" >
|
|
<a-col :span="6" class="query_item">
|
|
<span>一级分类：</span>
|
|
<a-select default-value="" @change="handleChange" v-model="query.top_class">
|
|
<a-select-option :value="item" v-for="(item,index) in oneList" :key="index">
|
|
{{item}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
<a-col :span="6" class="query_item">
|
|
<span>二级分类：</span>
|
|
<a-select default-value="" v-model="query.son_class">
|
|
<a-select-option :value="item" v-for="(item,index) in twoList" :key="index">
|
|
{{item}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
<a-col :span="6" class="query_item">
|
|
<span>创建人员：</span>
|
|
<a-select default-value="" v-model="query.user_id">
|
|
<a-select-option :value="item.id" v-for="(item,index) in userList" :key="index">
|
|
{{item.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
<a-col :span="6" class="query_item" >
|
|
<span>使用状态：</span>
|
|
<a-select default-value="" v-model="query.usestatus">
|
|
<a-select-option value="">全部</a-select-option>
|
|
<a-select-option value="0">启用</a-select-option>
|
|
<a-select-option value="1">禁用</a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
<a-col :span="12" class="query_item query_item2">
|
|
<span>创建时间：</span>
|
|
<a-range-picker valueFormat="YYYY-MM-DD" v-model="query.createtime"/>
|
|
</a-col>
|
|
<a-col :span="12" class="query_item query_item1">
|
|
<a-space :size="21">
|
|
<a-button type="primary" class="query_button" @click="getAllDate">查 询</a-button>
|
|
<a-button class="query_button" @click="resetQurey">重 置</a-button>
|
|
</a-space>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div class="table">
|
|
<div class="table_title">
|
|
<span>查询结果</span>
|
|
<a-button type="primary" class="query_button" @click="visible2=true">新 增</a-button>
|
|
</div>
|
|
<a-table :columns="columns" :data-source="data" bordered :pagination="false">
|
|
<template slot="status" slot-scope="status">
|
|
<span>{{status==0?'启用':'禁用'}}</span>
|
|
</template>
|
|
<template slot="operation" slot-scope="item">
|
|
<a-space :size="24">
|
|
<span class="table_operation" @click="updateStatus(item.id)">{{item.status==0?'禁用':'启用'}}</span>
|
|
<span class="table_operation" @click="selectRecords(item.id)">操作记录</span>
|
|
</a-space>
|
|
</template>
|
|
</a-table>
|
|
<a-pagination
|
|
class="pagination"
|
|
size="small"
|
|
:total="total"
|
|
v-model="page"
|
|
:page-size="limit"
|
|
:show-total="total => `第 ${startTotal} / ${endTotal} 条 / 总共 ${total} 条`"
|
|
:page-size-options="pageSizeOptions"
|
|
@showSizeChange="onShowSizeChange"
|
|
@change="changePage"
|
|
show-size-changer >
|
|
<template slot="buildOptionText" slot-scope="props">
|
|
<span >{{ props.value }}条/页</span>
|
|
</template>
|
|
</a-pagination>
|
|
</div>
|
|
</div>
|
|
<operationRecords :visible.sync="visible1" :logDate="logDate"></operationRecords>
|
|
<!-- 添加分类 -->
|
|
<a-modal v-model="visible2" title="新增分类" width="800px" :bodyStyle="modeStyle">
|
|
<div class="">
|
|
<a-row justify="space-between" >
|
|
<a-col :span="10" class="query_item">
|
|
<span>一级分类：</span>
|
|
<a-select default-value="" @change="handleChange(1)" v-model="query1.pull_top_class">
|
|
<a-select-option :value="item" v-for="(item,index) in oneList" :key="index">
|
|
{{item}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
<a-col :span="10" class="query_item">
|
|
<span>自定义名称：</span>
|
|
<a-input v-model="query1.top_class"/>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row justify="space-between" >
|
|
<a-col :span="10" class="query_item">
|
|
<span>二级分类：</span>
|
|
<a-select default-value="">
|
|
<a-select-option :value="item" v-for="(item,index) in twoList" :key="index">
|
|
{{item}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
<a-col :span="10" class="query_item">
|
|
<span>自定义名称：</span>
|
|
<a-input v-model="query1.son_class"/>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<template slot="footer">
|
|
<div>
|
|
<a-button type="white" @click="visible2=false">返 回</a-button>
|
|
<a-button type="primary" @click="addClass">确定</a-button>
|
|
</div>
|
|
</template>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Operation from '../../Operation.vue'
|
|
import operationRecords from '../../operationRecords/index.vue'
|
|
import {ClassifyList,getLog,getTop,getSon,addClass,updateStatus,getUser} from '../../../api/index'
|
|
export default {
|
|
data() {
|
|
return{
|
|
visible1:false,
|
|
visible2:false,
|
|
pageSizeOptions: ['10', '20', '30', '40', '50'],
|
|
//一页多少条
|
|
pageSize:10,
|
|
total:500,
|
|
startTotal:1,
|
|
endTotal:10,
|
|
// 当前页数
|
|
page: 1,
|
|
limit:10,
|
|
query:{
|
|
top_class:'',
|
|
son_class:'',
|
|
user_id:'',
|
|
usestatus:'',
|
|
createtime:[]
|
|
},
|
|
query1:{
|
|
top_class:'',
|
|
son_class:'',
|
|
pull_top_class:''
|
|
},
|
|
modeStyle:{
|
|
'height':'200px'
|
|
},
|
|
logDate:[],
|
|
data:[],
|
|
columns:[
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'id',
|
|
width:'65px',
|
|
align:'center'
|
|
},
|
|
{
|
|
title: '创建时间',
|
|
dataIndex: 'createtime',
|
|
// align:'center'
|
|
},
|
|
{
|
|
title: '一级分类名称',
|
|
dataIndex: 'top_class',
|
|
// align:'center'
|
|
},
|
|
{
|
|
title: '二级分类名称',
|
|
dataIndex: 'son_class',
|
|
// align:'center'
|
|
},
|
|
{
|
|
title: '使用状态',
|
|
dataIndex: 'status',
|
|
scopedSlots:{customRender:'status'},
|
|
// align:'center'
|
|
},
|
|
{
|
|
title: '创建人员',
|
|
dataIndex: 'account_name',
|
|
// align:'center'
|
|
},
|
|
{
|
|
title: '操作',
|
|
scopedSlots: { customRender: 'operation' },
|
|
// align:'center'
|
|
},
|
|
],
|
|
oneList:[],
|
|
twoList:[],
|
|
userList:[]
|
|
}
|
|
},
|
|
components:{
|
|
Operation,
|
|
operationRecords
|
|
},
|
|
created(){
|
|
this.getAllDate()
|
|
this.getTop()
|
|
this.getUser()
|
|
},
|
|
methods:{
|
|
//修改状态
|
|
updateStatus(id){
|
|
let data={id:id}
|
|
updateStatus(data).then(res=>{
|
|
if(res.code==200){
|
|
this.$message.success('修改分类状态成功！');
|
|
this.getAllDate()
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
},
|
|
//添加分类
|
|
addClass(){
|
|
addClass(this.query1).then(res=>{
|
|
if(res.code==200){
|
|
this.$message.success('添加成功！');
|
|
Object.assign(this.query1, this.$options.data().query1)
|
|
this.getTop()
|
|
this.visible2=false
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
},
|
|
// 重置query
|
|
resetQurey(){
|
|
Object.assign(this.query, this.$options.data().query)
|
|
this.getAllDate()
|
|
},
|
|
//获取二级分类
|
|
getSon(type){
|
|
let data
|
|
if(type==1){
|
|
data={top_class:this.query1.pull_top_class}
|
|
}else{
|
|
data=this.query
|
|
}
|
|
getSon(data).then(res=>{
|
|
if(res.code==200){
|
|
this.twoList=res.data
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
},
|
|
// 获取一级分类
|
|
getTop(){
|
|
getTop().then(res=>{
|
|
if(res.code==200){
|
|
this.oneList=res.data
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
},
|
|
// 获取用户
|
|
getUser(){
|
|
getUser().then(res=>{
|
|
if(res.code==200){
|
|
this.userList=res.data
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
},
|
|
getAllDate(){
|
|
let data=this.query
|
|
data.limit=this.limit
|
|
data.page=this.page
|
|
ClassifyList(data).then(res=>{
|
|
console.info(res)
|
|
if(res.code==200){
|
|
this.data=res.data.data
|
|
this.startTotal=res.data.start
|
|
this.endTotal=res.data.end
|
|
this.total=res.data.total
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
},
|
|
selectRecords(id){
|
|
let data={log_id:id,type:'class'}
|
|
getLog(data).then(res=>{
|
|
if(res.code==200){
|
|
this.logDate=res.data
|
|
this.visible1=true
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
},
|
|
// 切换一页显示多少条
|
|
// 切换一页显示多少条
|
|
onShowSizeChange(current, pageSize){
|
|
this.limit = pageSize;
|
|
this.getAllDate()
|
|
},
|
|
// 切换页数
|
|
changePage(page, pageSize){
|
|
this.page=page
|
|
this.getAllDate()
|
|
},
|
|
handleChange(type){
|
|
this.getSon(type)
|
|
},
|
|
onChange(){
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
/deep/ .ant-modal-header{
|
|
border-bottom: none;
|
|
}
|
|
/deep/ .ant-modal-footer{
|
|
border-top: none;
|
|
padding: 20px 16px;
|
|
}
|
|
</style>
|
|
|