360 lines
12 KiB
Vue
360 lines
12 KiB
Vue
<template>
|
||
<section class="List">
|
||
<ai-list>
|
||
<ai-title slot="title" title="宣传资讯" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance"
|
||
@change="page.current=1,getTableData()">
|
||
</ai-title>
|
||
<template #content>
|
||
<div class="flex fill">
|
||
<div class="type">
|
||
<div class="title">宣传板块
|
||
<span>
|
||
<el-button type="text" @click="addType(0, typeList.length+1, '')">添加</el-button></span>
|
||
</div>
|
||
<div class="list">
|
||
<div class="item" v-for="(item, index) in typeList" :key="index"
|
||
:class="typeIndex == index ? 'active' : ''" @click="typeClick(index)">
|
||
{{ item.categoryName }}
|
||
</div>
|
||
<div class="item" v-if="!typeList.length">暂无数据</div>
|
||
</div>
|
||
</div>
|
||
<div class="type mini-type">
|
||
<div class="title">模块名称<span><el-button type="text"
|
||
@click="addType(1, miniTypeList.length+1, typeList[typeIndex].id)">添加</el-button></span>
|
||
</div>
|
||
<div class="list">
|
||
<div class="item" v-for="(item, index) in miniTypeList" :key="index"
|
||
:class="miniTypeIndex == index ? 'active' : ''" @click="miniTypeClick(index)">
|
||
<span class="text">{{ item.categoryName }}</span>
|
||
<span class="icon">
|
||
<i class="el-icon-circle-plus-outline" @click="addNewType(index)"></i>
|
||
<i class="el-icon-edit" @click="editMini(index)"></i>
|
||
<i class="el-icon-delete" @click="delMini(miniTypeList[index].id)"></i>
|
||
</span>
|
||
</div>
|
||
<div class="item" v-if="!miniTypeList.length">暂无数据</div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<template v-if="typeList.length && miniTypeList.length">
|
||
<ai-search-bar>
|
||
<template #left>
|
||
<el-button type="primary" icon="iconfont iconAdd" @click="showEdit('')">添加</el-button>
|
||
<!-- <el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button> -->
|
||
</template>
|
||
<template #right>
|
||
<el-input size="small" placeholder="请输入标题" v-model="search.title" clearable
|
||
@change="page.current=1,getTableData()"/>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
|
||
@getList="getTableData" :col-configs="colConfigs" :dict="dict"
|
||
@selection-change="v=>ids=v.map(e=>e.id)">
|
||
<el-table-column slot="options" label="操作" fixed="right" align="center" width='150px'>
|
||
<template slot-scope="{row}">
|
||
<el-button type="text" @click="showEdit(row.id)">编辑</el-button>
|
||
<el-button type="text" @click="handleDelete(row.id)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</template>
|
||
<ai-empty v-else>请选择或者添加模块</ai-empty>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ai-list>
|
||
<ai-dialog :visible.sync="dialog" :title="dialogTitle" @closed="form={}" @onConfirm="submitDialog" width="600px">
|
||
<el-form :model="form" :rules="rules" ref="DialogForm" size="small" label-width="100px">
|
||
<el-form-item :label="addLabelText" prop="categoryName">
|
||
<el-input v-model.number="form.categoryName" placeholder="请输入" maxlength="10" show-word-limit/>
|
||
</el-form-item>
|
||
<el-form-item label="排序" prop="showIndex" v-if="type != 2">
|
||
<el-input-number v-model="form.showIndex" @change="handleChange" :min="1" :max="100"></el-input-number>
|
||
</el-form-item>
|
||
</el-form>
|
||
<ai-table :tableData="newTypeList" :total="newPage.total" :current.sync="newPage.current"
|
||
:size.sync="newPage.size"
|
||
:col-configs="colConfigsNew" v-if="type == 2">
|
||
<el-table-column slot="options" label="操作" fixed="right" align="center">
|
||
<template slot-scope="{row}">
|
||
<el-button type="text" @click="editNew(row)">编辑</el-button>
|
||
<el-button type="text" @click="delMini(row.id)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</ai-dialog>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "List",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function
|
||
},
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
data() {
|
||
return {
|
||
search: {title: ""},
|
||
page: {current: 1, size: 10, total: 0},
|
||
newPage: {current: 1, size: 10, total: 0},
|
||
tableData: [],
|
||
colConfigs: [
|
||
{label: "标题", prop: "title"},
|
||
{label: "地区", prop: "areaName", align: "center", width: '150px'},
|
||
{label: "浏览次数", prop: "viewCount", align: "center", width: '100px'},
|
||
{label: "发布人", prop: "createUserName", align: "center", width: '100px'},
|
||
{label: "发布时间", prop: "createTime", align: "center", width: '100px'},
|
||
{slot: "options"}
|
||
],
|
||
colConfigsNew: [
|
||
{label: "分类名称", prop: "categoryName", align: "center"},
|
||
{slot: "options"}
|
||
],
|
||
ids: [],
|
||
dialog: false,
|
||
form: {},
|
||
rules: {
|
||
categoryName: '',
|
||
showIndex: [{required: true, message: "请输入排序", trigger: "change"}],
|
||
},
|
||
typeList: [], //大分类模块
|
||
miniTypeList: [], //模块子
|
||
newTypeList: [], //文章分类
|
||
type: 0, //0、宣传板块；1、宣传模块；2、文章分类
|
||
dialogTitle: '',
|
||
addLabelText: '',
|
||
parentId: '',
|
||
typeIndex: 0,
|
||
miniTypeIndex: 0
|
||
}
|
||
},
|
||
methods: {
|
||
getTableData() {
|
||
this.instance.post("/app/apppublicityinfo/list", null, {
|
||
params: {...this.page, ...this.search, moduleId: this.miniTypeList[this.miniTypeIndex].id || ''}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.tableData = res.data?.records
|
||
this.page.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
showEdit(id) {
|
||
this.$router.push({
|
||
query: {
|
||
id: id,
|
||
parentId: this.typeList[this.typeIndex].id,
|
||
moduleId: this.miniTypeList[this.miniTypeIndex].id
|
||
}, hash: "#add"
|
||
})
|
||
},
|
||
handleDelete(ids) {
|
||
this.$confirm("是否删除该条宣传资讯信息").then(() => {
|
||
this.instance.post("/app/apppublicityinfo/delete", null, {
|
||
params: {ids: ids?.toString()}
|
||
}).then(res => {
|
||
if (res?.code == 0) {
|
||
this.$message.success("删除成功!")
|
||
this.getTableData()
|
||
}
|
||
})
|
||
}).catch(() => 0)
|
||
},
|
||
handleChange(value) {
|
||
this.form.showIndex = value
|
||
},
|
||
submitDialog() {
|
||
this.$refs.DialogForm.validate(v => {
|
||
if (v) {
|
||
this.form.categoryType = this.type
|
||
this.form.parentId = this.parentId
|
||
this.instance.post(`/app/apppublicitycategory/addPublicityCategory`, this.form).then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('添加成功');
|
||
if (this.type == 0) {
|
||
this.getTypeList()
|
||
}
|
||
if (this.type == 1) {
|
||
this.getMiniTypeList(this.typeList[this.typeIndex].id)
|
||
}
|
||
this.dialog = false
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
addType(e, index, parentId) {
|
||
this.type = e
|
||
this.parentId = parentId
|
||
this.form.showIndex = index
|
||
this.dialogTitle = ['宣传板块', '宣传模块', '文章分类'][e]
|
||
this.addLabelText = ['板块名称', '模块名称', '分类名称'][e]
|
||
this.rules.categoryName = [{required: true, message: "请输入" + this.addLabelText, trigger: "change"}]
|
||
this.dialog = true
|
||
},
|
||
getTypeList() {
|
||
this.instance.post(`/app/apppublicitycategory/list?categoryType=0&size=100`).then(res => {
|
||
if (res.code == 0 && res.data.records && res.data.records.length) {
|
||
this.typeList = res.data.records
|
||
this.getMiniTypeList(res.data.records[0].id)
|
||
}
|
||
})
|
||
},
|
||
getMiniTypeList(parentId) {
|
||
this.instance.post(`/app/apppublicitycategory/list?categoryType=1&size=100&parentId=${parentId}`).then(res => {
|
||
if (res.code == 0) {
|
||
this.miniTypeList = res.data.records
|
||
if (res.data.records && res.data.records.length) {
|
||
this.miniTypeClick(0)
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
getNewTypeList(parentId) {
|
||
this.instance.post(`/app/apppublicitycategory/list?categoryType=2&size=10&parentId=${parentId}`).then(res => {
|
||
if (res.code == 0) {
|
||
this.newTypeList = res.data.records
|
||
this.newPage.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
typeClick(e) {
|
||
this.typeIndex = e
|
||
this.getMiniTypeList(this.typeList[e].id)
|
||
},
|
||
miniTypeClick(e) {
|
||
this.miniTypeIndex = e
|
||
this.current = 1
|
||
this.tableData = []
|
||
this.getTableData()
|
||
},
|
||
editMini(index) {
|
||
this.form = {...this.miniTypeList[index]}
|
||
this.addType(this.miniTypeList[index].categoryType, this.miniTypeList[index].showIndex, this.typeList[this.typeIndex].id)
|
||
},
|
||
delMini(id) {
|
||
this.$confirm("确认删除", {
|
||
type: 'error'
|
||
}).then(() => {
|
||
this.instance.post(`/app/apppublicitycategory/delete?ids=${id}`).then(res => {
|
||
if (res.code == 0) {
|
||
this.getNewTypeList(this.miniTypeList[this.miniTypeIndex].id)
|
||
this.getMiniTypeList(this.typeList[this.typeIndex].id)
|
||
this.$message.success('删除成功');
|
||
}
|
||
}).catch((err) => {
|
||
this.$message.error(err);
|
||
})
|
||
})
|
||
},
|
||
addNewType(index) {
|
||
this.getNewTypeList(this.miniTypeList[index].id)
|
||
this.addType(2, '', this.miniTypeList[index].id)
|
||
},
|
||
editNew(row) {
|
||
this.form = {...row}
|
||
this.addType(2, '', row.parentId)
|
||
}
|
||
},
|
||
created() {
|
||
this.search.areaId = this.user.info.areaId
|
||
this.getTypeList()
|
||
this.getTableData()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.List {
|
||
height: 100%;
|
||
|
||
.flex {
|
||
display: flex;
|
||
|
||
.type {
|
||
width: 250px;
|
||
border: 1px solid #ddd;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
line-height: 40px;
|
||
border-bottom: 1px solid #ddd;
|
||
padding: 0 16px;
|
||
font-weight: 600;
|
||
|
||
span {
|
||
color: #26f;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
.item {
|
||
padding: 0 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 32px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
|
||
.text {
|
||
width: calc(100% - 70px);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.icon {
|
||
width: 70px;
|
||
text-align: right;
|
||
|
||
i {
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.el-icon-delete {
|
||
color: #f46;
|
||
}
|
||
|
||
.el-icon-circle-plus-outline {
|
||
color: #26f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.active {
|
||
// color: #26f;
|
||
background-color: #f3f6f9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mini-type {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.content {
|
||
width: calc(100% - 516px);
|
||
}
|
||
}
|
||
|
||
:deep( .ai-list__content--right-wrapper ){
|
||
min-height: calc(100% - 6px) !important;
|
||
display: flex;
|
||
}
|
||
}
|
||
</style>
|