朱兆平 / vue_cli · 提交

转到一个项目

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

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

内嵌 并排对比
正在显示 3 个修改的文件 包含 107 行增加 和 41 行删除
@@ -24,7 +24,7 @@ module.exports = { @@ -24,7 +24,7 @@ module.exports = {
24 }, 24 },
25 dev: { 25 dev: {
26 env: require('./dev.env'), 26 env: require('./dev.env'),
27 - port: 12021, 27 + port: 12023,
28 autoOpenBrowser: true, 28 autoOpenBrowser: true,
29 assetsSubDirectory: 'static', 29 assetsSubDirectory: 'static',
30 assetsPublicPath: '/', 30 assetsPublicPath: '/',
@@ -128,3 +128,5 @@ export const batchRemoveElasticSearchInfo = params =>{return http.del(`${baseUrl @@ -128,3 +128,5 @@ export const batchRemoveElasticSearchInfo = params =>{return http.del(`${baseUrl
128 //不分页获取所有类型 128 //不分页获取所有类型
129 export const getAlltype = params =>{return http.get(`${baseUrl}/message/type/list`, params);}; 129 export const getAlltype = params =>{return http.get(`${baseUrl}/message/type/list`, params);};
130 export const getTypesPage = params =>{return http.post(`${baseUrl}/message/type/list`, params);}; 130 export const getTypesPage = params =>{return http.post(`${baseUrl}/message/type/list`, params);};
  131 +export const addType = params =>{return http.post(`${baseUrl}/message/type/add`, params);};
  132 +
@@ -9,21 +9,16 @@ @@ -9,21 +9,16 @@
9 <template slot="prepend"><i class="el-icon-notebook-2"></i>消息标签</template> 9 <template slot="prepend"><i class="el-icon-notebook-2"></i>消息标签</template>
10 </el-input> 10 </el-input>
11 </el-col> 11 </el-col>
12 - <el-col :span="5" align="center">  
13 - <el-select v-model="queryInfo.id" placeholder="请选择上级标签" size="medium">  
14 - <el-option  
15 - v-for="item in options"  
16 - :key="item.value"  
17 - :label="item.label"  
18 - :value="item.value">  
19 - </el-option>  
20 - </el-select> 12 + <el-col :span="6" align="center" style="margin-left: 10px">
  13 + <el-input placeholder="请输入内容" v-model="queryInfo.name" size="medium">
  14 + <template slot="prepend"><i class="el-icon-notebook-2"></i>描述</template>
  15 + </el-input>
21 </el-col> 16 </el-col>
22 <el-col :span="6" align="center"> 17 <el-col :span="6" align="center">
23 <el-button type="warning" size="medium" icon="el-icon-search" @click="getList"> 18 <el-button type="warning" size="medium" icon="el-icon-search" @click="getList">
24 查询标签 19 查询标签
25 </el-button> 20 </el-button>
26 - <el-button type="primary" size="medium" icon="el-icon-plus" @click="dialogFormVisible=true"> 21 + <el-button type="primary" size="medium" icon="el-icon-plus" @click="handleAdd">
27 添加标签 22 添加标签
28 </el-button> 23 </el-button>
29 </el-col> 24 </el-col>
@@ -42,11 +37,16 @@ @@ -42,11 +37,16 @@
42 <el-table-column label="消息类型" prop="type" :formatter="formatType" align="center" width="220"></el-table-column> 37 <el-table-column label="消息类型" prop="type" :formatter="formatType" align="center" width="220"></el-table-column>
43 <el-table-column label="相关描述" prop="des" align="center" width="220"></el-table-column> 38 <el-table-column label="相关描述" prop="des" align="center" width="220"></el-table-column>
44 <el-table-column label="创建时间" prop="creattime" align="center" width="145"></el-table-column> 39 <el-table-column label="创建时间" prop="creattime" align="center" width="145"></el-table-column>
45 - <el-table-column label="操作" width="225px" align="center" fixed="right"> 40 + <el-table-column label="操作" width="300px" align="center" fixed="right">
46 <template slot-scope="scope"> 41 <template slot-scope="scope">
  42 + <!-- 新增下级-->
  43 + <el-tooltip effect="dark" content="新增" placement="top-start" :enterable="false">
  44 + <el-button type="success" icon="el-icon-plus" size="mini"@click="handleAdd(scope.$index, scope.row)">新增下级
  45 + </el-button>
  46 + </el-tooltip>
47 <!-- 编辑按钮--> 47 <!-- 编辑按钮-->
48 <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false"> 48 <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
49 - <el-button type="primary" icon="el-icon-edit" size="mini"@click="">编辑 49 + <el-button type="primary" icon="el-icon-edit" size="mini"@click="handleEdit(scope.$index, scope.row)">编辑
50 </el-button> 50 </el-button>
51 </el-tooltip> 51 </el-tooltip>
52 <!-- 删除按钮--> 52 <!-- 删除按钮-->
@@ -76,21 +76,22 @@ @@ -76,21 +76,22 @@
76 </el-pagination> 76 </el-pagination>
77 </el-col> 77 </el-col>
78 </el-row> 78 </el-row>
79 - <!-- 增加，对话框区域 -->  
80 - <el-row>  
81 - <el-dialog title="收货地址" :visible.sync="dialogFormVisible" style="margin-top: -50px" width="60%" >  
82 - <el-form :model="form" style="margin-left: 60px" align="center"> 79 + <!-- 新增界面，对话框区域 -->
83 <el-row> 80 <el-row>
84 - <el-col :span="7">  
85 - <el-form-item label="">  
86 - <el-input placeholder="请输入内容" v-model="form.name" size="medium">  
87 - <template slot="prepend">消息标签</template> 81 + <el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogFormVisible" style="margin-top: -50px" width="45%" >
  82 + <el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px" >
  83 + <el-form-item v-if="this.demoName == true" label="上级标签" prop="parentId">
  84 + <span>{{addForm.parentName}}</span>
  85 + </el-form-item>
  86 + <el-form-item v-else style="display: none" label="上级标签" prop="parentId">
  87 + <span>{{addForm.parentName}}</span>
  88 + </el-form-item>
  89 + <el-form-item label="消息标签" prop="name">
  90 + <el-input placeholder="请输入内容" v-model="addForm.name" size="medium">
88 </el-input> 91 </el-input>
89 </el-form-item> 92 </el-form-item>
90 - </el-col>  
91 - <el-col :span="7">  
92 - <el-form-item label="">  
93 - <el-select v-model="form.id" placeholder="请选择上级标签" size="medium"> 93 + <el-form-item label="消息分类" prop="type">
  94 + <el-select v-model="addForm.type" placeholder="请选择消息分类" name='test' id='test'>
94 <el-option 95 <el-option
95 v-for="item in options" 96 v-for="item in options"
96 :key="item.value" 97 :key="item.value"
@@ -99,15 +100,10 @@ @@ -99,15 +100,10 @@
99 </el-option> 100 </el-option>
100 </el-select> 101 </el-select>
101 </el-form-item> 102 </el-form-item>
102 - </el-col>  
103 - <el-col :span="7">  
104 - <el-form-item label="">  
105 - <el-input placeholder="请输入内容" v-model="form.des" size="medium">  
106 - <template slot="prepend"><i class="el-icon-notebook-2"></i>描述</template> 103 + <el-form-item label="描述" prop="des">
  104 + <el-input placeholder="请输入内容" v-model="addForm.des" size="medium">
107 </el-input> 105 </el-input>
108 </el-form-item> 106 </el-form-item>
109 - </el-col>  
110 - </el-row>  
111 </el-form> 107 </el-form>
112 <div slot="footer" class="dialog-footer" align="center"> 108 <div slot="footer" class="dialog-footer" align="center">
113 <el-button type="info" @click="dialogFormVisible = false" size="medium" 109 <el-button type="info" @click="dialogFormVisible = false" size="medium"
@@ -123,7 +119,9 @@ @@ -123,7 +119,9 @@
123 </template> 119 </template>
124 120
125 <script> 121 <script>
126 - import {getTypesPage} from "../../api/message_bus"; 122 + import {getTypesPage, addType} from "../../api/message_bus";
  123 + import {add} from "../../api/role_api";
  124 + import util from "../../common/js/util";
127 125
128 export default { 126 export default {
129 name: 'MessageManagement', 127 name: 'MessageManagement',
@@ -144,20 +142,37 @@ @@ -144,20 +142,37 @@
144 selectList: [], 142 selectList: [],
145 }, 143 },
146 dialogFormVisible: false, 144 dialogFormVisible: false,
147 - form: { 145 + addForm: {
148 name: '', 146 name: '',
149 - id: '',  
150 des: '', 147 des: '',
  148 + type:'',
  149 + parentId:''
151 }, 150 },
152 - 151 + dialogMap: {
  152 + update: '编辑',
  153 + create: '新增',
  154 + },
  155 + dialogStatus: 'create',
  156 + demoName: false,
153 157
154 options: [{ 158 options: [{
155 - value: '1',  
156 - nameAndDes: '' 159 + label: "消息分类",
  160 + value: "1"
157 },{ 161 },{
158 - value: '2',  
159 - nameAndDes: '' 162 + label: "消息大类",
  163 + value: "2"
  164 + },{
  165 + label: "消息子类",
  166 + value: "3"
160 }], 167 }],
  168 + addFormRules: {
  169 + name: [
  170 + { required: true, message: '请输入消息标签', trigger: 'blur' }
  171 + ],
  172 + type: [
  173 + { required: true, message: '请选择上级标签', trigger: 'blur' }
  174 + ]
  175 + },
161 } 176 }
162 }, 177 },
163 methods: { 178 methods: {
@@ -174,6 +189,7 @@ @@ -174,6 +189,7 @@
174 this.queryInfo.pageSize = 10; 189 this.queryInfo.pageSize = 10;
175 this.getList(); 190 this.getList();
176 } , 191 } ,
  192 + // 获取消息标签列表
177 getList() { 193 getList() {
178 let _this = this; 194 let _this = this;
179 getTypesPage(this.queryInfo).then((response) => { 195 getTypesPage(this.queryInfo).then((response) => {
@@ -191,10 +207,58 @@ @@ -191,10 +207,58 @@
191 _this.$message.error(error.toString()); 207 _this.$message.error(error.toString());
192 }); 208 });
193 }, 209 },
  210 + //显示添加标签界面
  211 + handleAdd: function (index,row) {
  212 + this.dialogFormVisible = true;
  213 + this.dialogStatus= 'create';
  214 + if (this.$refs.addForm != undefined){
  215 +
  216 + if (row != undefined){
  217 + this.demoName = true;
  218 + }else {
  219 + this.demoName = false;
  220 + }
  221 + this.$refs.addForm.resetFields();
  222 + }
  223 + //新增下级
  224 + if(util.checkNull(row)){
  225 + //传递上级ID
  226 + let parentId = Object.assign({}, row);
  227 + this.addForm.parentId = parentId.id;
  228 + this.addForm.parentName = parentId.name;
  229 +
  230 + }
  231 + //数据初始化
  232 + // this.addForm = {
  233 + // name: '',
  234 + // des: '',
  235 + // type:'' };
  236 + },
  237 + //提交添加的消息标签
  238 + addList: function () {
  239 + this.$refs.addForm.validate((valid) => {
  240 + if (valid) {
  241 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  242 + let para = Object.assign({}, this.addForm);
  243 + addType(para).then((res) => {
  244 + this.$message({
  245 + message: '提交成功',
  246 + type: 'success'
  247 + });
  248 + //数据初始化
  249 + this.$refs['addForm'].resetFields();
  250 + this.dialogFormVisible = false;
  251 + this.getList();
  252 + }).catch(error => alert(error));
  253 + });
  254 + }
  255 + });
  256 + },
  257 + // 类型转换
194 formatType: function (row, column) { 258 formatType: function (row, column) {
195 return row.type == 1 ? '消息分类' : row.type == 2 ? '消息大类' : '消息子类'; 259 return row.type == 1 ? '消息分类' : row.type == 2 ? '消息大类' : '消息子类';
196 }, 260 },
197 - }, 261 + }
198 } 262 }
199 </script> 263 </script>
200 264