朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 8776b6764a059ca27725290ac920fa67492e6bcb 1 个父辈 7e8446ba

消息分类管理界面完善

内嵌 并排对比
正在显示 2 个修改的文件 包含 117 行增加 和 19 行删除
@@ -129,4 +129,7 @@ export const batchRemoveElasticSearchInfo = params =>{return http.del(`${baseUrl @@ -129,4 +129,7 @@ export const batchRemoveElasticSearchInfo = params =>{return http.del(`${baseUrl
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);}; 131 export const addType = params =>{return http.post(`${baseUrl}/message/type/add`, params);};
  132 +export const updateMessage = params =>{return http.put(`${baseUrl}/message/type/update`, params);};
  133 +export const deleteMessage = params =>{return http.del(`${baseUrl}/message/type/delete`, params);};
  134 +export const batchDelete = params =>{return http.del(`${baseUrl}/message/type/batchDelete`, params);};
132 135
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 </el-input> 10 </el-input>
11 </el-col> 11 </el-col>
12 <el-col :span="6" align="center" style="margin-left: 10px"> 12 <el-col :span="6" align="center" style="margin-left: 10px">
13 - <el-input placeholder="请输入内容" v-model="queryInfo.name" size="medium"> 13 + <el-input placeholder="请输入内容" v-model="queryInfo.des" size="medium">
14 <template slot="prepend"><i class="el-icon-notebook-2"></i>描述</template> 14 <template slot="prepend"><i class="el-icon-notebook-2"></i>描述</template>
15 </el-input> 15 </el-input>
16 </el-col> 16 </el-col>
@@ -30,9 +30,10 @@ @@ -30,9 +30,10 @@
30 border size="small" row-key="id" default-expand-all 30 border size="small" row-key="id" default-expand-all
31 :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 31 :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
32 :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" 32 :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
33 - style="border-radius: 10px 10px 0px 0px;line-height: 25px;"> 33 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
  34 + @selection-change="selsChange" >
34 <el-table-column type="selection" width="55" align="center"></el-table-column> 35 <el-table-column type="selection" width="55" align="center"></el-table-column>
35 - <el-table-column type="index" align="center"></el-table-column> 36 + <el-table-column type="index" prop="id" label="ID" align="center"></el-table-column>
36 <el-table-column label="消息标签" prop="name" align="center" width="220"></el-table-column> 37 <el-table-column label="消息标签" prop="name" align="center" width="220"></el-table-column>
37 <el-table-column label="消息类型" prop="type" :formatter="formatType" align="center" width="220"></el-table-column> 38 <el-table-column label="消息类型" prop="type" :formatter="formatType" align="center" width="220"></el-table-column>
38 <el-table-column label="相关描述" prop="des" align="center" width="220"></el-table-column> 39 <el-table-column label="相关描述" prop="des" align="center" width="220"></el-table-column>
@@ -51,7 +52,7 @@ @@ -51,7 +52,7 @@
51 </el-tooltip> 52 </el-tooltip>
52 <!-- 删除按钮--> 53 <!-- 删除按钮-->
53 <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false"> 54 <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
54 - <el-button type="danger" icon="el-icon-delete" size="mini"@click="">删除 55 + <el-button type="danger" icon="el-icon-delete" size="mini"@click="handleDel(scope.$index, scope.row)">删除
55 </el-button> 56 </el-button>
56 </el-tooltip> 57 </el-tooltip>
57 </template> 58 </template>
@@ -60,7 +61,7 @@ @@ -60,7 +61,7 @@
60 </el-row> 61 </el-row>
61 <el-row style="margin-top: 10px"> 62 <el-row style="margin-top: 10px">
62 <el-col :span="5"> 63 <el-col :span="5">
63 - <el-button type="danger" icon="el-icon-delete" :disabled="this.page.selectList.length===0" 64 + <el-button type="danger" icon="el-icon-delete" :disabled="this.selectList.length === 0" @click="batchRemove"
64 >批量删除 65 >批量删除
65 </el-button> 66 </el-button>
66 </el-col> 67 </el-col>
@@ -90,13 +91,16 @@ @@ -90,13 +91,16 @@
90 <el-input placeholder="请输入内容" v-model="addForm.name" size="medium"> 91 <el-input placeholder="请输入内容" v-model="addForm.name" size="medium">
91 </el-input> 92 </el-input>
92 </el-form-item> 93 </el-form-item>
93 - <el-form-item label="消息分类" prop="type">  
94 - <el-select v-model="addForm.type" placeholder="请选择消息分类" name='test' id='test'> 94 + <el-form-item label="消息分类" prop="type" >
  95 + <el-select v-model="addForm.type" placeholder="请选择消息分类" :disabled="selectDisabled" name='test' id='test'>
95 <el-option 96 <el-option
96 v-for="item in options" 97 v-for="item in options"
97 :key="item.value" 98 :key="item.value"
  99 + :disabled="item.value == 1"
98 :label="item.label" 100 :label="item.label"
99 :value="item.value"> 101 :value="item.value">
  102 + <span style="float: left">{{ item.label }}</span>
  103 + <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
100 </el-option> 104 </el-option>
101 </el-select> 105 </el-select>
102 </el-form-item> 106 </el-form-item>
@@ -108,7 +112,7 @@ @@ -108,7 +112,7 @@
108 <div slot="footer" class="dialog-footer" align="center"> 112 <div slot="footer" class="dialog-footer" align="center">
109 <el-button type="info" @click="dialogFormVisible = false" size="medium" 113 <el-button type="info" @click="dialogFormVisible = false" size="medium"
110 style="width: 100px;background-color: #6F8294;color: #ffffff">取 消</el-button> 114 style="width: 100px;background-color: #6F8294;color: #ffffff">取 消</el-button>
111 - <el-button type="primary" size="medium" style="width: 100px" @click="addList">提 交</el-button> 115 + <el-button type="primary" size="medium" style="width: 100px" @click="dialogStatus==='create'?addList():editList()">提 交</el-button>
112 </div> 116 </div>
113 </el-dialog> 117 </el-dialog>
114 </el-row> 118 </el-row>
@@ -119,8 +123,7 @@ @@ -119,8 +123,7 @@
119 </template> 123 </template>
120 124
121 <script> 125 <script>
122 - import {getTypesPage, addType} from "../../api/message_bus";  
123 - import {add} from "../../api/role_api"; 126 + import {getTypesPage, addType,updateMessage,deleteMessage,batchDelete} from "../../api/message_bus";
124 import util from "../../common/js/util"; 127 import util from "../../common/js/util";
125 128
126 export default { 129 export default {
@@ -139,8 +142,9 @@ @@ -139,8 +142,9 @@
139 page: { 142 page: {
140 total: 0, 143 total: 0,
141 tableData: [], 144 tableData: [],
142 - selectList: [],  
143 }, 145 },
  146 + //选中的行
  147 + selectList: [],
144 dialogFormVisible: false, 148 dialogFormVisible: false,
145 addForm: { 149 addForm: {
146 name: '', 150 name: '',
@@ -148,22 +152,22 @@ @@ -148,22 +152,22 @@
148 type:'', 152 type:'',
149 parentId:'' 153 parentId:''
150 }, 154 },
  155 + selectDisabled: false,
151 dialogMap: { 156 dialogMap: {
152 update: '编辑', 157 update: '编辑',
153 create: '新增', 158 create: '新增',
154 }, 159 },
155 dialogStatus: 'create', 160 dialogStatus: 'create',
156 demoName: false, 161 demoName: false,
157 -  
158 options: [{ 162 options: [{
159 label: "消息分类", 163 label: "消息分类",
160 - value: "1" 164 + value: 1
161 },{ 165 },{
162 label: "消息大类", 166 label: "消息大类",
163 - value: "2" 167 + value: 2
164 },{ 168 },{
165 label: "消息子类", 169 label: "消息子类",
166 - value: "3" 170 + value: 3
167 }], 171 }],
168 addFormRules: { 172 addFormRules: {
169 name: [ 173 name: [
@@ -176,6 +180,10 @@ @@ -176,6 +180,10 @@
176 } 180 }
177 }, 181 },
178 methods: { 182 methods: {
  183 + // 类型转换
  184 + formatType: function (row, column) {
  185 + return row.type == 1 ? '消息分类' : row.type == 2 ? '消息大类' : '消息子类';
  186 + },
179 handleSizeChange(newSize) { 187 handleSizeChange(newSize) {
180 this.queryInfo.pageSize = newSize; 188 this.queryInfo.pageSize = newSize;
181 this.getList(); 189 this.getList();
@@ -211,6 +219,10 @@ @@ -211,6 +219,10 @@
211 handleAdd: function (index,row) { 219 handleAdd: function (index,row) {
212 this.dialogFormVisible = true; 220 this.dialogFormVisible = true;
213 this.dialogStatus= 'create'; 221 this.dialogStatus= 'create';
  222 + this.addForm.type = '1';
  223 + //消息分类禁选
  224 + this.selectDisabled = true;
  225 + //上级标签隐藏
214 if (this.$refs.addForm != undefined){ 226 if (this.$refs.addForm != undefined){
215 227
216 if (row != undefined){ 228 if (row != undefined){
@@ -226,7 +238,11 @@ @@ -226,7 +238,11 @@
226 let parentId = Object.assign({}, row); 238 let parentId = Object.assign({}, row);
227 this.addForm.parentId = parentId.id; 239 this.addForm.parentId = parentId.id;
228 this.addForm.parentName = parentId.name; 240 this.addForm.parentName = parentId.name;
229 - 241 + this.selectDisabled = false;
  242 + this.addForm.type = '2';
  243 + if(this.$refs.parent[type] = '2'){
  244 + this.addForm.child[type] = '3';
  245 + }
230 } 246 }
231 //数据初始化 247 //数据初始化
232 // this.addForm = { 248 // this.addForm = {
@@ -254,10 +270,89 @@ @@ -254,10 +270,89 @@
254 } 270 }
255 }); 271 });
256 }, 272 },
257 - // 类型转换  
258 - formatType: function (row, column) {  
259 - return row.type == 1 ? '消息分类' : row.type == 2 ? '消息大类' : '消息子类'; 273 + //删除
  274 + handleDel: function (index, row) {
  275 + this.$confirm('确认删除该记录吗?', '提示', {
  276 + type: 'warning'
  277 + }).then(() => {
  278 + //let para = { id: row.id };
  279 + //console.log(row);
  280 + deleteMessage(row).then((res) => {
  281 + this.$message({
  282 + message: '删除成功',
  283 + type: 'success'
  284 + });
  285 + this.getList();
  286 + }).catch((error) => {
  287 + alert(error);
  288 + });
  289 + }).catch();
260 }, 290 },
  291 + //批量选中
  292 + selsChange: function (selected) {
  293 + let _this= this;
  294 + selected.forEach(
  295 + function (row,index) {
  296 + _this.selectList.push(row.id);
  297 + }
  298 + );
  299 +
  300 + },
  301 + //批量删除
  302 + batchRemove: function () {
  303 + //取 选中 多条信息 的id 赋给ids
  304 + this.$confirm('确认删除选中记录吗？', '提示', {
  305 + type: 'warning'
  306 + }).then(() => {
  307 + batchDelete(this.selectList).then((res) => {
  308 + this.$message({
  309 + message: '删除成功',
  310 + type: 'success'
  311 + });
  312 + this.getList();
  313 + });
  314 + }).catch(() => {
  315 +
  316 + });
  317 + },
  318 + //显示编辑界面
  319 + handleEdit: function (index, row) {
  320 + this.dialogFormVisible = true;
  321 + this.demoName = false;
  322 + this.dialogStatus= 'update',
  323 + this.addForm = Object.assign({}, row);
  324 + //消息分类禁选
  325 + this.selectDisabled = true;
  326 + if (this.$refs.addForm != undefined){
  327 +
  328 + if (row != undefined){
  329 + this.demoName = true;
  330 + }else {
  331 + this.demoName = false;
  332 + }
  333 + this.$refs.addForm.resetFields();
  334 + }
  335 + },
  336 + //编辑
  337 + editList: function () {
  338 + this.$refs.addForm.validate((valid) => {
  339 + if (valid) {
  340 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  341 + let para = Object.assign({}, this.addForm);
  342 + updateMessage(para).then((res) => {
  343 + this.$message({
  344 + message: '提交成功',
  345 + type: 'success'
  346 + });
  347 + this.$refs['addForm'].resetFields();
  348 + this.dialogFormVisible = false;
  349 + this.getList();
  350 + }).catch(error => alert(error));
  351 + });
  352 + }
  353 + });
  354 + },
  355 +
261 } 356 }
262 } 357 }
263 </script> 358 </script>