update

admin-update/src/components/module/operate-line.vue

@@ -1,4 +1,5 @@
 <template>
+		<!--  -->
 	<el-popover
 		v-model="show"
 		class="operate-module-line"
@@ -9,12 +10,12 @@
 	>
 		<div class="operate-wrap">
 			<div class="operate-list" v-for="(item, index) in data.children" :key="index">
-				<i class="iconfont iconguanbi" @click.stop="listDel(index)"></i>
+				<i class="iconfont iconcaozuojihuo" @click.stop="listDel(index)"></i>
 				<div class="btn-text" @click="listClick(item)">{{ item.name }}</div>
 			</div>
 			<div
 				class="operate-list operate-list-add"
-				@click="addFn"
+				@click="addFn()"
 				v-show="(data.children || []).length < 5"
 			>
 				<i class="iconfont icontupiantianjia icon-add"></i>
@@ -84,11 +85,11 @@ export default {
 					color: $mainColor;
 				}
 			}
-			.iconguanbi {
+			.iconcaozuojihuo {
 				position: absolute;
-				top: -12px;
+				top: -14px;
 				right: 6px;
-				font-size: 12px;
+				font-size: 16px;
 			}
 			.btn-text {
 				margin-top: 2px;

admin-update/src/views/setting/wx-menu.vue

@@ -1,291 +1,307 @@
 <template>
 	<div class="app-list-content">
-		<!-- 微信菜单 -->
-		<div class="wx-wrap">
-			<div class="wx-bar">
-				<div class="bar-img">
-					<img src="../../assets/images/setting/wx-bar-bg.png" alt />
-				</div>
-				<div class="bar-text">{{ shopInfo.merchantName }}</div>
-			</div>
-			<!-- 中间快 -->
-			<div class="wx-content" @click="closeOperate"></div>
-			<!-- 按钮 -->
-			<div class="wx-btn">
-				<div class="key-btn">
-					<img
-						class="key-btn-img"
-						src="../../assets/images/setting/wx-menu.png"
-						alt
-						mode="widthFix"
-					/>
+		<div class="content-wrap">
+			<!-- 微信菜单 -->
+			<div class="wx-wrap">
+				<div class="wx-bar">
+					<div class="bar-img">
+						<img src="../../assets/images/setting/wx-bar-bg.png" alt />
+					</div>
+					<div class="bar-text">{{ shopInfo.merchantName }}</div>
 				</div>
-				<div
-					class="menu-btn"
-					v-for="(item, index) in menuData"
-					:key="index"
-					:class="[activeIndex == index ? 'active' : '']"
-					@click="menuClickFn(item, index)"
-				>
-					<!-- <div class="iconfont-blo">
+				<!-- 中间快 -->
+				<div class="wx-content" @click="closeOptionFn"></div>
+				<!-- 按钮 -->
+				<div class="wx-btn">
+					<div class="key-btn">
+						<img class="key-btn-img" src="../../assets/images/setting/wx-menu.png" alt mode="widthFix" />
+					</div>
+					<div class="menu-btn" v-for="(item, index) in menuData" :key="index" :class="[activeIndex == index ? 'active' : '']" @click="menuClickFn(item, index)">
+						<!-- <div class="iconfont-blo">
 						<i class="iconfont iconcaidanlan"></i>
 					</div>
-					<span>{{ item.name }}</span>-->
+						<span>{{ item.name }}</span>-->
 
-					<operate-line-module
-						:show="operateShow[index]"
-						:data="item"
-						@click="operateClickFn"
-						@add="operateAddFn"
-						@del="operateDelFn"
-					/>
+						<operate-line-module :show="operateShow[index]" :data="item" @click="operateClickFn" @add="operateAddFn(index)" @del="operateDelFn" />
+					</div>
 				</div>
 			</div>
-		</div>
-		<!-- modal -->
-		<el-dialog
-			title="编辑菜单"
-			:visible.sync="addDialog"
-			:close-on-click-modal="false"
-			width="600px"
-		>
-			<div class="ad-modal-content">
-				<el-form
-					:model="form"
-					:rules="rule"
-					ref="form"
-					label-width="100px"
-					class="demo-form"
-				>
-					<el-form-item label="名称" prop="name">
-						<el-input
-							v-model="form.name"
-							placeholder="请输入菜单名称"
-							size="small"
-						></el-input>
-					</el-form-item>
-					<el-form-item label="选项" prop="menuOption">
-						<el-radio-group v-model="form.menuOption">
-							<el-radio label="0">常用网址</el-radio>
-							<el-radio label="1">自定义网址</el-radio>
-						</el-radio-group>
-					</el-form-item>
-					<el-form-item label="">
-						<template v-if="form.menuOption == 0">
-							<!-- <div> -->
-							<el-radio-group v-model="form.targetId" size="mini">
-								<el-radio
-									v-for="(item, index) in commonUrlData"
-									:key="index"
-									border
-									:label="item.id"
-									>{{ item.name }}</el-radio
-								>
-							</el-radio-group>
-							<!-- </div> -->
+			<!-- 编辑块 -->
+			<template v-if="addDialog">
+				<div class="ad-modal-content">
+					<el-form :model="form" :rules="rule" ref="form" label-width="100px" class="demo-form">
+						<el-form-item label="名称" prop="name">
+							<el-input v-model="form.name" placeholder="请输入菜单名称" size="small"></el-input>
+						</el-form-item>
+						<template v-if="!isModifyParents">
+							<el-form-item label="选项" prop="menuOption">
+								<el-radio-group v-model="form.menuOption" :disabled="isModifyParents">
+									<el-radio label="0">常用网址</el-radio>
+									<el-radio label="1">自定义网址</el-radio>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label>
+								<template v-if="form.menuOption == 0">
+									<!-- <div> -->
+									<el-radio-group v-model="form.targetId" size="mini" :disabled="isModifyParents">
+										<el-radio v-for="(item, index) in commonUrlData" :key="index" border :label="item.id">{{ item.name }}</el-radio>
+									</el-radio-group>
+									<!-- </div> -->
+								</template>
+								<template v-else>
+									<div>
+										<el-input v-model="form.replyUrl" placeholder="请填写链接，留空点图片不跳转" size="small" :disabled="isModifyParents"></el-input>
+									</div>
+								</template>
+							</el-form-item>
 						</template>
-						<template v-else>
-							<div>
-								<el-input
-									v-model="form.replyUrl"
-									placeholder="请填写链接，留空点图片不跳转"
-									size="small"
-								></el-input>
-							</div>
-						</template>
-					</el-form-item>
-				</el-form>
-			</div>
-			<div slot="footer" class="dialog-footer">
-				<el-button @click="resetForm">取 消</el-button>
-				<el-button type="primary" @click="confirmForm">提交生效</el-button>
-			</div>
-		</el-dialog>
+					</el-form>
+					<div class="dialog-footer">
+						<el-button @click="resetForm" size="small">取 消</el-button>
+						<el-button type="primary" @click="confirmForm" size="small">提交生效</el-button>
+					</div>
+				</div>
+			</template>
+		</div>
 	</div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import operateLineModule from '@/components/module/operate-line';
-export default {
-	name: 'wx-menu',
-	components: {
-		operateLineModule
-	},
-	data() {
-		return {
-			form: {
-				name: '',
-				menuOption: '0',
-				replyUrl: '',
-				targetId: 0
-			},
-			rule: {},
-			addDialog: false,
-			activeIndex: null,
-			menuData: [],
-			// 常用链接
-			urlIndex: null,
-			commonUrlData: [],
-			// 操作菜单
-			operateShow: [],
-			operateData: null,
-			// 按钮列表
-			btnData: []
-		};
-	},
-	computed: {
-		...mapGetters(['shopInfo', 'userInfo'])
-	},
-	created() {
-		this.init();
-	},
-	methods: {
-		init() {
-			this._getDet();
-			this._getUrl();
-		},
-		_getDet() {
-			this.$service.setting.getMenu().then(res => {
-				this.menuData = res.map(e => {
-					if (!e.children) {
-						e.children = [];
-					}
-
-					return e;
-				});
-				res.map(() => {
-					this.operateShow.push(false);
-				});
-			});
+	import { mapGetters } from 'vuex';
+	import operateLineModule from '@/components/module/operate-line';
+	export default {
+		name: 'wx-menu',
+		components: {
+			operateLineModule
 		},
-		_getUrl() {
-			this.$service.single.commonUrl().then(res => {
-				this.commonUrlData = res;
-			});
+		data() {
+			return {
+				form: {
+					name: '',
+					menuOption: '0',
+					replyUrl: '',
+					targetId: 0
+				},
+				rule: {},
+				isModifyParents: false,
+				isAdd: false,
+				addDialog: false,
+				activeIndex: null,
+				menuData: [],
+				// 常用链接
+				urlIndex: null,
+				commonUrlData: [],
+				// 操作菜单
+				operateShow: [],
+				operateData: null,
+				// 按钮列表
+				btnData: []
+			};
 		},
-		submitFn() {
-			this.$service.setting.updateMenu(this.menuData).then(res => {
-				this.$message.success(res.msg || '提交生效');
-				this.resetForm();
-			});
+		computed: {
+			...mapGetters(['shopInfo', 'userInfo'])
 		},
-		// operate
-		menuClickFn(item, index) {
-			this.closeOperate();
-			this.activeIndex = index;
-			this.operateShow[index] = true;
-			this.operateData = item.children || [];
+		created() {
+			this.init();
 		},
-		// operate
-		closeOperate() {
-			this.activeIndex = null;
-			this.operateShow = this.operateShow.map(e => (e = false));
-		},
-		operateClickFn(item) {
-			this.dialogData = item;
-			item.targetId = item.targetId ? parseInt(item.targetId) : 0;
+		methods: {
+			init() {
+				this._getDet();
+				this._getUrl();
+			},
+			_getDet() {
+				this.$service.setting.getMenu().then(res => {
+					this.menuData = res.map(e => {
+						if (!e.children) {
+							e.children = [];
+						}
 
-			Object.keys(this.form).forEach(i => {
-				this.form[i] = item[i];
-			});
-			this.addDialog = true;
-		},
-		operateAddFn() {
-			this.addDialog = true;
-		},
-		operateDelFn(index) {
-			this.closeOperate();
-			this.operateData.splice(index, 1);
-			setTimeout(() => {
-				this.$set(this.operateShow, this.activeIndex, true);
-			});
-		},
-		// modal
-		confirmForm() {
-			this.closeOperate();
-			let form = JSON.parse(JSON.stringify(this.form));
-			this.operateData.push(form);
-			setTimeout(() => {
-				this.$set(this.operateShow, this.activeIndex, true);
-			});
-			this.submitFn();
-		},
-		resetForm() {
-			this.$refs['form'].resetFields();
-			this.addDialog = false;
+						return e;
+					});
+					res.map(() => {
+						this.operateShow.push(false);
+					});
+				});
+			},
+			_getUrl() {
+				this.$service.single.commonUrl().then(res => {
+					this.commonUrlData = res;
+				});
+			},
+			submitFn() {
+				console.log(this.menuData);
+				// return false;
+				this.$service.setting.updateMenu(this.menuData).then(res => {
+					this.$message.success(res.msg || '提交生效');
+					this.closeOperate();
+					this.resetForm();
+				});
+			},
+			// operate
+			menuClickFn(item, index) {
+				this.isModifyParents = true;
+				this.isAdd = false;
+
+				this.closeOperate();
+				this.activeIndex = index;
+				this.operateShow[index] = true;
+				this.operateData = item.children || [];
+				// 修改
+				this.dialogData = item;
+				this.form.name = JSON.parse(JSON.stringify(item.name));
+
+				this.addDialog = true;
+			},
+			// operate
+			closeOptionFn() {
+				this.closeOperate()
+				this.resetForm()
+			},
+			closeOperate() {
+				this.activeIndex = null;
+				this.operateShow = this.operateShow.map(e => (e = false));
+				// if (this.addDialog) {
+				// 	this.resetForm();
+				// }
+			},
+			operateClickFn(item) {
+				this.isModifyParents = false;
+				this.isAdd = false;
+				console.log('item', item);
+				this.dialogData = item;
+				item.targetId = item.targetId ? parseInt(item.targetId) : 0;
+
+				Object.keys(this.form).forEach(i => {
+					this.form[i] = item[i];
+				});
+				this.addDialog = true;
+			},
+			operateAddFn(index) {
+				this.isModifyParents = false;
+				this.isAdd = true;
+				// this.dialogData = this.menuData[3].children[index];
+				this.addDialog = true;
+				if (this.$refs['form']) {
+					console.log('asdf')
+					this.$refs['form'].resetFields();
+				}
+			},
+			operateDelFn(index) {
+				this.closeOperate();
+				this.operateData.splice(index, 1);
+				setTimeout(() => {
+					this.$set(this.operateShow, this.activeIndex, true);
+				});
+			},
+			// modal
+			confirmForm() {
+				let form = JSON.parse(JSON.stringify(this.form));
+
+				if (this.isModifyParents) {
+					console.log('this.menuData[this.activeIndex]', this.menuData[this.activeIndex])
+					this.menuData[this.activeIndex].name = form.name
+				} else {
+					if (this.isAdd) {
+						this.operateData.push(form);
+					} else {
+						this.operateData = form;
+					}
+				}
+				setTimeout(() => {
+					this.$set(this.operateShow, this.activeIndex, true);
+				});
+				this.submitFn();
+			},
+			resetForm() {
+				this.$refs['form'].resetFields();
+				this.addDialog = false;
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-list-content {
-	background-color: #fff;
-}
-// wx 容器
-.wx-wrap {
-	width: 375px;
-	margin: 0 15px;
-	padding-top: 20px;
-	// 头部
-	.wx-bar {
-		position: relative;
-		.bar-text {
-			position: absolute;
-			top: 30px;
-			font-size: 17px;
-			font-weight: 500;
-			color: #fff;
-			width: 100%;
-			text-align: center;
-		}
+	.app-list-content {
+		background-color: #fff;
 	}
-	.wx-content {
-		width: 100%;
-		height: 555px;
-		background-color: #ededed;
+	.content-wrap {
+		display: flex;
+		align-items: center;
 	}
-	// 按钮
-	.wx-btn {
-		@include disFlex(center, space-between);
-		background-color: #f7f7f7;
-		padding: 10px;
-		height: 45px;
-		.key-btn {
-			width: 13%;
-			.key-btn-img {
-				width: 40px;
+	// wx 容器
+	.wx-wrap {
+		width: 375px;
+		margin: 0 15px;
+		padding-top: 20px;
+		// 头部
+		.wx-bar {
+			position: relative;
+			.bar-text {
+				position: absolute;
+				top: 30px;
+				font-size: 17px;
+				font-weight: 500;
+				color: #fff;
+				width: 100%;
+				text-align: center;
 			}
 		}
-		.menu-btn {
-			width: 29%;
-			height: calc(100% - 30px);
-			@include disFlex(center, center);
-			border-left: 2px solid $borderColor;
-			&.active {
-				/deep/.operate-module-line {
-					.operate-btn {
-						color: $mainColor;
-						.iconfont {
-							color: #09bb07;
+		.wx-content {
+			width: 100%;
+			height: 555px;
+			background-color: #ededed;
+		}
+		// 按钮
+		.wx-btn {
+			@include disFlex(center, space-between);
+			background-color: #f7f7f7;
+			padding: 10px;
+			height: 45px;
+			.key-btn {
+				width: 13%;
+				.key-btn-img {
+					width: 40px;
+				}
+			}
+			.menu-btn {
+				width: 29%;
+				height: calc(100% - 30px);
+				@include disFlex(center, center);
+				border-left: 2px solid $borderColor;
+				&.active {
+					/deep/.operate-module-line {
+						.operate-btn {
+							color: $mainColor;
+							.iconfont {
+								color: #09bb07;
+							}
 						}
 					}
 				}
-			}
-			.iconfont-blo {
-				margin-right: 6px;
-			}
-			.iconfont {
-				color: $fontColor3;
-				font-size: 24px;
-				transform: scale(0.6);
+				.iconfont-blo {
+					margin-right: 6px;
+				}
+				.iconfont {
+					color: $fontColor3;
+					font-size: 24px;
+					transform: scale(0.6);
+				}
 			}
 		}
 	}
-}
-.prompt-text {
-	padding: 30px 30px 60px 30px;
-	color: $fontColor3;
-}
+	// 编辑块
+	.ad-modal-content {
+		padding: 20px;
+		.dialog-footer {
+			display: flex;
+			align-items: center;
+			// justify-content: center;
+			padding-left: 70px;
+			margin-top: 30px;
+		}
+	}
+	.prompt-text {
+		padding: 30px 30px 60px 30px;
+		color: $fontColor3;
+	}
 </style>