朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 4f6bd89bb9e1ed5045caed82133dcc0cd87782ff 1 个父辈 6fa86ad0

消息分类管理界面新增 添加功能

内嵌 并排对比
正在显示 3 个修改的文件 包含 107 行增加 和 41 行删除
... ... @@ -24,7 +24,7 @@ module.exports = {
},
dev: {
env: require('./dev.env'),
port: 12021,
port: 12023,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
... ...
... ... @@ -128,3 +128,5 @@ export const batchRemoveElasticSearchInfo = params =>{return http.del(`${baseUrl
//不分页获取所有类型
export const getAlltype = params =>{return http.get(`${baseUrl}/message/type/list`, params);};
export const getTypesPage = params =>{return http.post(`${baseUrl}/message/type/list`, params);};
export const addType = params =>{return http.post(`${baseUrl}/message/type/add`, params);};
... ...
... ... @@ -9,21 +9,16 @@
<template slot="prepend"><i class="el-icon-notebook-2"></i>消息标签</template>
</el-input>
</el-col>
<el-col :span="5" align="center">
<el-select v-model="queryInfo.id" placeholder="请选择上级标签" size="medium">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-col :span="6" align="center" style="margin-left: 10px">
<el-input placeholder="请输入内容" v-model="queryInfo.name" size="medium">
<template slot="prepend"><i class="el-icon-notebook-2"></i>描述</template>
</el-input>
</el-col>
<el-col :span="6" align="center">
<el-button type="warning" size="medium" icon="el-icon-search" @click="getList">
查询标签
</el-button>
<el-button type="primary" size="medium" icon="el-icon-plus" @click="dialogFormVisible=true">
<el-button type="primary" size="medium" icon="el-icon-plus" @click="handleAdd">
添加标签
</el-button>
</el-col>
... ... @@ -42,11 +37,16 @@
<el-table-column label="消息类型" prop="type" :formatter="formatType" align="center" width="220"></el-table-column>
<el-table-column label="相关描述" prop="des" align="center" width="220"></el-table-column>
<el-table-column label="创建时间" prop="creattime" align="center" width="145"></el-table-column>
<el-table-column label="操作" width="225px" align="center" fixed="right">
<el-table-column label="操作" width="300px" align="center" fixed="right">
<template slot-scope="scope">
<!-- 新增下级-->
<el-tooltip effect="dark" content="新增" placement="top-start" :enterable="false">
<el-button type="success" icon="el-icon-plus" size="mini"@click="handleAdd(scope.$index, scope.row)">新增下级
</el-button>
</el-tooltip>
<!-- 编辑按钮-->
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="primary" icon="el-icon-edit" size="mini"@click="">编辑
<el-button type="primary" icon="el-icon-edit" size="mini"@click="handleEdit(scope.$index, scope.row)">编辑
</el-button>
</el-tooltip>
<!-- 删除按钮-->
... ... @@ -76,21 +76,22 @@
</el-pagination>
</el-col>
</el-row>
<!-- 增加，对话框区域 -->
<el-row>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" style="margin-top: -50px" width="60%" >
<el-form :model="form" style="margin-left: 60px" align="center">
<!-- 新增界面，对话框区域 -->
<el-row>
<el-col :span="7">
<el-form-item label="">
<el-input placeholder="请输入内容" v-model="form.name" size="medium">
<template slot="prepend">消息标签</template>
<el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogFormVisible" style="margin-top: -50px" width="45%" >
<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px" >
<el-form-item v-if="this.demoName == true" label="上级标签" prop="parentId">
<span>{{addForm.parentName}}</span>
</el-form-item>
<el-form-item v-else style="display: none" label="上级标签" prop="parentId">
<span>{{addForm.parentName}}</span>
</el-form-item>
<el-form-item label="消息标签" prop="name">
<el-input placeholder="请输入内容" v-model="addForm.name" size="medium">
</el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="">
<el-select v-model="form.id" placeholder="请选择上级标签" size="medium">
<el-form-item label="消息分类" prop="type">
<el-select v-model="addForm.type" placeholder="请选择消息分类" name='test' id='test'>
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -99,15 +100,10 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="">
<el-input placeholder="请输入内容" v-model="form.des" size="medium">
<template slot="prepend"><i class="el-icon-notebook-2"></i>描述</template>
<el-form-item label="描述" prop="des">
<el-input placeholder="请输入内容" v-model="addForm.des" size="medium">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" align="center">
<el-button type="info" @click="dialogFormVisible = false" size="medium"
... ... @@ -123,7 +119,9 @@
</template>
<script>
import {getTypesPage} from "../../api/message_bus";
import {getTypesPage, addType} from "../../api/message_bus";
import {add} from "../../api/role_api";
import util from "../../common/js/util";
export default {
name: 'MessageManagement',
... ... @@ -144,20 +142,37 @@
selectList: [],
},
dialogFormVisible: false,
form: {
addForm: {
name: '',
id: '',
des: '',
type:'',
parentId:''
},
dialogMap: {
update: '编辑',
create: '新增',
},
dialogStatus: 'create',
demoName: false,
options: [{
value: '1',
nameAndDes: ''
label: "消息分类",
value: "1"
},{
value: '2',
nameAndDes: ''
label: "消息大类",
value: "2"
},{
label: "消息子类",
value: "3"
}],
addFormRules: {
name: [
{ required: true, message: '请输入消息标签', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择上级标签', trigger: 'blur' }
]
},
}
},
methods: {
... ... @@ -174,6 +189,7 @@
this.queryInfo.pageSize = 10;
this.getList();
} ,
// 获取消息标签列表
getList() {
let _this = this;
getTypesPage(this.queryInfo).then((response) => {
... ... @@ -191,10 +207,58 @@
_this.$message.error(error.toString());
});
},
//显示添加标签界面
handleAdd: function (index,row) {
this.dialogFormVisible = true;
this.dialogStatus= 'create';
if (this.$refs.addForm != undefined){
if (row != undefined){
this.demoName = true;
}else {
this.demoName = false;
}
this.$refs.addForm.resetFields();
}
//新增下级
if(util.checkNull(row)){
//传递上级ID
let parentId = Object.assign({}, row);
this.addForm.parentId = parentId.id;
this.addForm.parentName = parentId.name;
}
//数据初始化
// this.addForm = {
// name: '',
// des: '',
// type:'' };
},
//提交添加的消息标签
addList: function () {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
let para = Object.assign({}, this.addForm);
addType(para).then((res) => {
this.$message({
message: '提交成功',
type: 'success'
});
//数据初始化
this.$refs['addForm'].resetFields();
this.dialogFormVisible = false;
this.getList();
}).catch(error => alert(error));
});
}
});
},
// 类型转换
formatType: function (row, column) {
return row.type == 1 ? '消息分类' : row.type == 2 ? '消息大类' : '消息子类';
},
},
}
}
</script>
... ...