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 60 </div>
61 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 64 </div>
65 65 <div class="save_div">
66 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 68 </div>
69 69 </div>
70 70 <!--右边配置-->
... ... @@ -75,9 +75,9 @@ SOFTWARE.
75 75 </div>
76 76 <div>
77 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 79 </div>
80   - <div v-if="showConfigurContent">
  80 + <div v-if="showConfigureContent">
81 81 <div class="menu_content">
82 82 <span>菜单内容：</span>
83 83 <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
... ... @@ -129,8 +129,8 @@ SOFTWARE.
129 129 </div>
130 130 </div>
131 131 </div>
132   - <!--一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
133   - <div v-if="!showRightFlag" class="right">
  132 + <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
  133 + <div v-else class="right">
134 134 <p>请选择菜单配置</p>
135 135 </div>
136 136 </div>
... ... @@ -138,12 +138,11 @@ SOFTWARE.
138 138 </template>
139 139  
140 140 <script>
141   -// import { save, saveAndRelease ,getList} from '@/api/wxmp/wxmenu'
142 141 import WxReplySelect from '@/views/mp/components/wx-news/main.vue'
143 142 import WxNews from '@/views/mp/components/wx-news/main.vue';
144 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 147 export default {
149 148 name: 'mpMenu',
... ... @@ -154,6 +153,7 @@ export default {
154 153 },
155 154 data(){
156 155 return {
  156 + // ======================== 列表查询 ========================
157 157 // 遮罩层
158 158 loading: true,
159 159 // 显示搜索条件
... ... @@ -164,24 +164,28 @@ export default {
164 164 children: [],
165 165 },
166 166  
167   - showRightFlag:false, // 右边配置显示默认详情还是配置详情
168 167 menu:{ // 横向菜单
169 168 button:[
170 169 ]
171 170 },
172 171  
  172 + // ======================== 菜单操作 ========================
173 173 isActive: -1,// 一级菜单点中样式
174 174 isSubMenuActive: -1, // 一级菜单点中样式
175 175 isSubMenuFlag: -1, // 二级菜单显示标志
  176 +
  177 + // ======================== 菜单编辑 ========================
  178 + showRightFlag: false, // 右边配置显示默认详情还是配置详情
  179 + nameMaxLength: 0, // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符；
  180 + showConfigureContent: true, // 是否展示配置内容；如果有子菜单，就不显示配置内容
  181 +
  182 +
176 183 tempObj:{}, // 右边临时变量，作为中间值牵引关系
177   - tempSelfObj: {
178   - // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
  184 + tempSelfObj: { // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
179 185 },
180 186 visible2: false, //素材内容 "选择素材"按钮弹框显示隐藏
181 187 tableData:[], //素材内容弹框数据,
182 188 menuName:'',
183   - showConfigurContent:true,
184   - nameMaxlength:0,//名称最大长度
185 189 menuOptions: [{
186 190 value: 'view',
187 191 label: '跳转网页'
... ... @@ -231,12 +235,6 @@ export default {
231 235 this.getList();
232 236 })
233 237 },
234   - computed: {
235   - menuKeyLength:function() {
236   - // menuObj 的长度，当长度小于 3 才显示一级菜单的加号
237   - return this.menu.button.length;
238   - }
239   - },
240 238 methods: {
241 239 // ======================== 列表查询 ========================
242 240 /** 设置账号编号 */
... ... @@ -271,6 +269,125 @@ export default {
271 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 391 // TODO 芋艿：未归类
275 392  
276 393 deleteTempObj(){
... ... @@ -295,131 +412,6 @@ export default {
295 412 item.content.articles = item.content.articles.slice(0,1)
296 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 417 </script>
... ... @@ -589,30 +581,30 @@ div{
589 581 <!--</style>-->
590 582 <!--素材样式-->
591 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 610 </style>
... ...