BJ_ZTEITS-Developers / parking-cloud-yudao

Commit c0b950257f73f7a4c6a042700898177c0a8b374f

Authored by YunaiV
1 parent 02ec5d45

mp：menu 前端的新增、删除操作的完善

Inline Side-by-side
Showing 1 changed file with 163 additions and 171 deletions
yudao-ui-admin/src/views/mp/menu/index.vue
  View file @c0b9502
@@ -60,11 +60,11 @@ SOFTWARE. @@ -60,11 +60,11 @@ SOFTWARE.
60 </div> 60 </div>
61 </div> 61 </div>
62 <!-- 一级菜单加号 --> 62 <!-- 一级菜单加号 -->
63 - <div class="menu_bottom menu_addicon" v-if="menuKeyLength < 3" @click="addMenu"><i class="el-icon-plus"></i></div> 63 + <div class="menu_bottom menu_addicon" v-if="this.menuList.length < 3" @click="addMenu"><i class="el-icon-plus"></i></div>
64 </div> 64 </div>
65 <div class="save_div"> 65 <div class="save_div">
66 <!--<el-button class="save_btn" type="warning" size="small" @click="saveFun">保存菜单</el-button>--> 66 <!--<el-button class="save_btn" type="warning" size="small" @click="saveFun">保存菜单</el-button>-->
67 - <el-button class="save_btn" type="success" size="small" @click="saveAndReleaseFun">保存并发布菜单</el-button> 67 + <el-button class="save_btn" type="success" size="small" @click="handleSaveAndReleaseFun">保存并发布菜单</el-button>
68 </div> 68 </div>
69 </div> 69 </div>
70 <!--右边配置--> 70 <!--右边配置-->
@@ -75,9 +75,9 @@ SOFTWARE. @@ -75,9 +75,9 @@ SOFTWARE.
75 </div> 75 </div>
76 <div> 76 <div>
77 <span>菜单名称：</span> 77 <span>菜单名称：</span>
78 - <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength=nameMaxlength clearable></el-input> 78 + <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength=nameMaxLength clearable></el-input>
79 </div> 79 </div>
80 - <div v-if="showConfigurContent"> 80 + <div v-if="showConfigureContent">
81 <div class="menu_content"> 81 <div class="menu_content">
82 <span>菜单内容：</span> 82 <span>菜单内容：</span>
83 <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option"> 83 <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
@@ -129,8 +129,8 @@ SOFTWARE. @@ -129,8 +129,8 @@ SOFTWARE.
129 </div> 129 </div>
130 </div> 130 </div>
131 </div> 131 </div>
132 - <!--一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->  
133 - <div v-if="!showRightFlag" class="right"> 132 + <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
  133 + <div v-else class="right">
134 <p>请选择菜单配置</p> 134 <p>请选择菜单配置</p>
135 </div> 135 </div>
136 </div> 136 </div>
@@ -138,12 +138,11 @@ SOFTWARE. @@ -138,12 +138,11 @@ SOFTWARE.
138 </template> 138 </template>
139 139
140 <script> 140 <script>
141 -// import { save, saveAndRelease ,getList} from '@/api/wxmp/wxmenu'  
142 import WxReplySelect from '@/views/mp/components/wx-news/main.vue' 141 import WxReplySelect from '@/views/mp/components/wx-news/main.vue'
143 import WxNews from '@/views/mp/components/wx-news/main.vue'; 142 import WxNews from '@/views/mp/components/wx-news/main.vue';
144 import WxMaterialSelect from '@/views/mp/components/wx-news/main.vue' 143 import WxMaterialSelect from '@/views/mp/components/wx-news/main.vue'
145 -import {getMenuList} from "@/api/mp/menu";  
146 -import {getSimpleAccounts} from "@/api/mp/account"; 144 +import { getMenuList } from "@/api/mp/menu";
  145 +import { getSimpleAccounts } from "@/api/mp/account";
147 146
148 export default { 147 export default {
149 name: 'mpMenu', 148 name: 'mpMenu',
@@ -154,6 +153,7 @@ export default { @@ -154,6 +153,7 @@ export default {
154 }, 153 },
155 data(){ 154 data(){
156 return { 155 return {
  156 + // ======================== 列表查询 ========================
157 // 遮罩层 157 // 遮罩层
158 loading: true, 158 loading: true,
159 // 显示搜索条件 159 // 显示搜索条件
@@ -164,24 +164,28 @@ export default { @@ -164,24 +164,28 @@ export default {
164 children: [], 164 children: [],
165 }, 165 },
166 166
167 - showRightFlag:false, // 右边配置显示默认详情还是配置详情  
168 menu:{ // 横向菜单 167 menu:{ // 横向菜单
169 button:[ 168 button:[
170 ] 169 ]
171 }, 170 },
172 171
  172 + // ======================== 菜单操作 ========================
173 isActive: -1,// 一级菜单点中样式 173 isActive: -1,// 一级菜单点中样式
174 isSubMenuActive: -1, // 一级菜单点中样式 174 isSubMenuActive: -1, // 一级菜单点中样式
175 isSubMenuFlag: -1, // 二级菜单显示标志 175 isSubMenuFlag: -1, // 二级菜单显示标志
  176 +
  177 + // ======================== 菜单编辑 ========================
  178 + showRightFlag: false, // 右边配置显示默认详情还是配置详情
  179 + nameMaxLength: 0, // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符；
  180 + showConfigureContent: true, // 是否展示配置内容；如果有子菜单，就不显示配置内容
  181 +
  182 +
176 tempObj:{}, // 右边临时变量，作为中间值牵引关系 183 tempObj:{}, // 右边临时变量，作为中间值牵引关系
177 - tempSelfObj: {  
178 - // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数 184 + tempSelfObj: { // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
179 }, 185 },
180 visible2: false, //素材内容 "选择素材"按钮弹框显示隐藏 186 visible2: false, //素材内容 "选择素材"按钮弹框显示隐藏
181 tableData:[], //素材内容弹框数据, 187 tableData:[], //素材内容弹框数据,
182 menuName:'', 188 menuName:'',
183 - showConfigurContent:true,  
184 - nameMaxlength:0,//名称最大长度  
185 menuOptions: [{ 189 menuOptions: [{
186 value: 'view', 190 value: 'view',
187 label: '跳转网页' 191 label: '跳转网页'
@@ -231,12 +235,6 @@ export default { @@ -231,12 +235,6 @@ export default {
231 this.getList(); 235 this.getList();
232 }) 236 })
233 }, 237 },
234 - computed: {  
235 - menuKeyLength:function() {  
236 - // menuObj 的长度，当长度小于 3 才显示一级菜单的加号  
237 - return this.menu.button.length;  
238 - }  
239 - },  
240 methods: { 238 methods: {
241 // ======================== 列表查询 ======================== 239 // ======================== 列表查询 ========================
242 /** 设置账号编号 */ 240 /** 设置账号编号 */
@@ -271,6 +269,125 @@ export default { @@ -271,6 +269,125 @@ export default {
271 this.handleQuery() 269 this.handleQuery()
272 }, 270 },
273 271
  272 + // ======================== 菜单操作 ========================
  273 + // 一级菜单点击事件
  274 + menuClick(i, item) {
  275 + // 右侧的表单相关
  276 + this.resetEditor();
  277 + this.showRightFlag = true; // 右边菜单
  278 + this.tempObj = item; // 这个如果放在顶部，flag 会没有。因为重新赋值了。
  279 + this.tempSelfObj.grand = "1"; // 表示一级菜单
  280 + this.tempSelfObj.index = i; // 表示一级菜单索引
  281 + this.nameMaxLength = 4
  282 + this.showConfigureContent = !(item.children && item.children.length > 0); // 有子菜单，就不显示配置内容
  283 +
  284 + // 左侧的选中
  285 + this.isActive = i; // 一级菜单选中样式
  286 + this.isSubMenuFlag = i; // 二级菜单显示标志
  287 + this.isSubMenuActive = -1; // 二级菜单去除选中样式
  288 + },
  289 + // 二级菜单点击事件
  290 + subMenuClick(subItem, index, k) {
  291 + // 右侧的表单相关
  292 + this.resetEditor();
  293 + this.showRightFlag = true; // 右边菜单
  294 + this.tempObj = subItem;//将点击的数据放到临时变量，对象有引用作用
  295 + this.tempSelfObj.grand = "2"; // 表示二级菜单
  296 + this.tempSelfObj.index = index; // 表示一级菜单索引
  297 + this.tempSelfObj.secondIndex = k; // 表示二级菜单索引
  298 + this.nameMaxLength = 7
  299 + this.showConfigureContent = true;
  300 +
  301 + // 左侧的选中
  302 + this.isActive = -1; // 一级菜单去除样式
  303 + this.isSubMenuActive = index + "" + k; // 二级菜单选中样式
  304 + },
  305 + // 添加横向一级菜单
  306 + addMenu(){
  307 + const menuKeyLength = this.menuList.length;
  308 + const addButton = {
  309 + name: "菜单名称",
  310 + children: []
  311 + }
  312 + this.$set(this.menuList, menuKeyLength, addButton)
  313 + this.menuClick(this.menuKeyLength - 1, addButton)
  314 + },
  315 + // 添加横向二级菜单；item 表示要操作的父菜单
  316 + addSubMenu(i, item) {
  317 + if (!item.children || item.children.length <= 0){
  318 + this.$set( item, 'children',[])
  319 + // TODO 芋艿：需要搞的属性弄下
  320 + this.$delete( item, 'type')
  321 + this.$delete( item, 'pagepath')
  322 + this.$delete( item, 'url')
  323 + this.$delete( item, 'key')
  324 + this.$delete( item, 'article_id')
  325 + this.$delete( item, 'textContent')
  326 + this.showConfigureContent = false
  327 + }
  328 +
  329 + let subMenuKeyLength = item.children.length; // 获取二级菜单key长度
  330 + let addButton = {
  331 + name: "子菜单名称"
  332 + }
  333 + this.$set(item.children, subMenuKeyLength, addButton);
  334 + this.subMenuClick(item.children[subMenuKeyLength], i, subMenuKeyLength)
  335 + },
  336 + // 删除当前菜单
  337 + deleteMenu(item) {
  338 + this.$modal.confirm('确定要删除吗?').then(() => {
  339 + // 删除数据
  340 + if (this.tempSelfObj.grand === "1") { // 一级菜单的删除方法
  341 + this.menuList.splice(this.tempSelfObj.index, 1);
  342 + } else if (this.tempSelfObj.grand === "2") { // 二级菜单的删除方法
  343 + this.menuList[this.tempSelfObj.index].children.splice(this.tempSelfObj.secondIndex, 1);
  344 + }
  345 + // 提示
  346 + this.$modal.msgSuccess("删除成功");
  347 +
  348 + // 处理菜单的选中
  349 + this.tempObj = {};
  350 + this.showRightFlag = false;
  351 + this.isActive = -1;
  352 + this.isSubMenuActive = -1;
  353 + }).catch(() => {});
  354 + },
  355 +
  356 + // ======================== 菜单编辑 ========================
  357 + handleSaveAndReleaseFun(){
  358 + this.$confirm('确定要保证并发布该菜单吗?', '提示', {
  359 + confirmButtonText: '确定',
  360 + cancelButtonText: '取消',
  361 + type: 'warning'
  362 + }).then(() => {
  363 + this.loading = true
  364 + saveAndRelease({
  365 + strWxMenu:this.menu
  366 + }).then(response => {
  367 + this.loading = false
  368 + if(response.code == 200){
  369 + this.$message({
  370 + showClose: true,
  371 + message: '发布成功',
  372 + type: 'success'
  373 + })
  374 + }else{
  375 + this.$message.error(response.data.msg)
  376 + }
  377 + }).catch(() => {
  378 + this.loading = false
  379 + })
  380 + }).catch(() => {
  381 + })
  382 + },
  383 + // 表单 Editor 重置
  384 + resetEditor() {
  385 + this.hackResetEditor = false // 销毁组件
  386 + this.$nextTick(() => {
  387 + this.hackResetEditor = true // 重建组件
  388 + })
  389 + },
  390 +
274 // TODO 芋艿：未归类 391 // TODO 芋艿：未归类
275 392
276 deleteTempObj(){ 393 deleteTempObj(){
@@ -295,131 +412,6 @@ export default { @@ -295,131 +412,6 @@ export default {
295 item.content.articles = item.content.articles.slice(0,1) 412 item.content.articles = item.content.articles.slice(0,1)
296 this.tempObj.content = item.content 413 this.tempObj.content = item.content
297 }, 414 },
298 - handleClick(tab, event){  
299 - this.tempObj.mediaType = tab.name  
300 - },  
301 - saveAndReleaseFun(){  
302 - this.$confirm('确定要保证并发布该菜单吗?', '提示', {  
303 - confirmButtonText: '确定',  
304 - cancelButtonText: '取消',  
305 - type: 'warning'  
306 - }).then(() => {  
307 - this.loading = true  
308 - saveAndRelease({  
309 - strWxMenu:this.menu  
310 - }).then(response => {  
311 - this.loading = false  
312 - if(response.code == 200){  
313 - this.$message({  
314 - showClose: true,  
315 - message: '发布成功',  
316 - type: 'success'  
317 - })  
318 - }else{  
319 - this.$message.error(response.data.msg)  
320 - }  
321 - }).catch(() => {  
322 - this.loading = false  
323 - })  
324 - }).catch(() => {  
325 - })  
326 - },  
327 - // 一级菜单点击事件  
328 - menuClick(i, item){  
329 - this.hackResetWxReplySelect = false//销毁组件  
330 - this.$nextTick(() => {  
331 - this.hackResetWxReplySelect = true//重建组件  
332 - })  
333 - this.showRightFlag = true;//右边菜单  
334 - this.tempObj = item;//这个如果放在顶部，flag会没有。因为重新赋值了。  
335 - this.tempSelfObj.grand = "1";//表示一级菜单  
336 - this.tempSelfObj.index = i;//表示一级菜单索引  
337 - this.isActive = i; //一级菜单选中样式  
338 - this.isSubMenuFlag = i; //二级菜单显示标志  
339 - this.isSubMenuActive = -1; //二级菜单去除选中样式  
340 - this.nameMaxlength = 4  
341 - if(item.sub_button && item.sub_button.length > 0){  
342 - this.showConfigurContent = false  
343 - }else{  
344 - this.showConfigurContent = true  
345 - }  
346 - },  
347 - // 二级菜单点击事件  
348 - subMenuClick(subItem, index, k){  
349 - this.hackResetWxReplySelect = false//销毁组件  
350 - this.$nextTick(() => {  
351 - this.hackResetWxReplySelect = true//重建组件  
352 - })  
353 - this.showRightFlag = true;//右边菜单  
354 - this.tempObj = subItem;//将点击的数据放到临时变量，对象有引用作用  
355 - this.tempSelfObj.grand = "2";//表示二级菜单  
356 - this.tempSelfObj.index = index;//表示一级菜单索引  
357 - this.tempSelfObj.secondIndex = k;//表示二级菜单索引  
358 - this.isSubMenuActive = index + "" + k; //二级菜单选中样式  
359 - this.isActive = -1;//一级菜单去除样式  
360 - this.showConfigurContent = true;  
361 - this.nameMaxlength = 7  
362 - },  
363 - // 添加横向一级菜单  
364 - addMenu(){  
365 - let menuKeyLength = this.menuKeyLength  
366 - let addButton = {  
367 - name: "菜单名称",  
368 - sub_button: []  
369 - }  
370 - this.$set(this.menu.button,menuKeyLength,addButton)  
371 - this.menuClick(this.menuKeyLength-1, addButton)  
372 - },  
373 - // 添加横向二级菜单  
374 - addSubMenu(i,item){  
375 - if(!item.sub_button||item.sub_button.length<=0){  
376 - this.$set( item, 'sub_button',[])  
377 - this.$delete( item, 'type')  
378 - this.$delete( item, 'pagepath')  
379 - this.$delete( item, 'url')  
380 - this.$delete( item, 'key')  
381 - this.$delete( item, 'article_id')  
382 - this.$delete( item, 'textContent')  
383 - this.showConfigurContent = false  
384 - }  
385 - let subMenuKeyLength = item.sub_button.length;//获取二级菜单key长度  
386 - let addButton = {  
387 - name: "子菜单名称"  
388 - }  
389 - this.$set(item.sub_button,subMenuKeyLength,addButton);  
390 - this.subMenuClick(item.sub_button[subMenuKeyLength], i, subMenuKeyLength)  
391 - },  
392 - //删除当前菜单  
393 - deleteMenu(obj){  
394 - let _this = this;  
395 - this.$confirm('确定要删除吗?', '提示', {  
396 - confirmButtonText: '确定',  
397 - cancelButtonText: '取消',  
398 - type: 'warning'  
399 - }).then(() => {  
400 - _this.deleteData();// 删除菜单数据  
401 - _this.tempObj = {};  
402 - _this.showRightFlag = false;  
403 - this.isActive = -1;  
404 - this.isSubMenuActive = -1;  
405 - }).catch(() => {  
406 - });  
407 - },  
408 - // 删除菜单数据  
409 - deleteData(){  
410 - // 一级菜单的删除方法  
411 - if(this.tempSelfObj.grand == "1"){  
412 - this.menu.button.splice(this.tempSelfObj.index,1);  
413 - }  
414 - // 二级菜单的删除方法  
415 - if(this.tempSelfObj.grand == "2"){  
416 - this.menu.button[this.tempSelfObj.index].sub_button.splice(this.tempSelfObj.secondIndex, 1);  
417 - }  
418 - this.$message({  
419 - type: 'success',  
420 - message: '删除成功!'  
421 - });  
422 - }  
423 }, 415 },
424 } 416 }
425 </script> 417 </script>
@@ -589,30 +581,30 @@ div{ @@ -589,30 +581,30 @@ div{
589 <!--</style>--> 581 <!--</style>-->
590 <!--素材样式--> 582 <!--素材样式-->
591 <style lang="scss" scoped> 583 <style lang="scss" scoped>
592 - .pagination{  
593 - text-align: right;  
594 - margin-right: 25px;  
595 - }  
596 - .select-item{  
597 - width: 280px;  
598 - padding: 10px;  
599 - margin: 0 auto 10px auto;  
600 - border: 1px solid #eaeaea;  
601 - }  
602 - .select-item2{  
603 - padding: 10px;  
604 - margin: 0 auto 10px auto;  
605 - border: 1px solid #eaeaea;  
606 - }  
607 - .ope-row{  
608 - padding-top: 10px;  
609 - text-align: center;  
610 - }  
611 - .item-name{  
612 - font-size: 12px;  
613 - overflow: hidden;  
614 - text-overflow:ellipsis;  
615 - white-space: nowrap;  
616 - text-align: center;  
617 - } 584 +.pagination{
  585 + text-align: right;
  586 + margin-right: 25px;
  587 +}
  588 +.select-item{
  589 + width: 280px;
  590 + padding: 10px;
  591 + margin: 0 auto 10px auto;
  592 + border: 1px solid #eaeaea;
  593 +}
  594 +.select-item2{
  595 + padding: 10px;
  596 + margin: 0 auto 10px auto;
  597 + border: 1px solid #eaeaea;
  598 +}
  599 +.ope-row{
  600 + padding-top: 10px;
  601 + text-align: center;
  602 +}
  603 +.item-name{
  604 + font-size: 12px;
  605 + overflow: hidden;
  606 + text-overflow:ellipsis;
  607 + white-space: nowrap;
  608 + text-align: center;
  609 +}
618 </style> 610 </style>