updatew

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

@@ -1,18 +1,18 @@
 <template>
 	<el-popover
+		v-model="show"
 		class="operate-module"
 		popper-class="liu-popover"
 		placement="top"
 		width="104"
-		trigger="click"
-		@show="showFn"
+		trigger="manual"
 	>
 		<div class="operate-wrap">
 			<div
 				class="operate-list"
 				v-for="(item, index) in data.children"
 				:key="index"
-				@click="item.click()"
+				@click="listClick(item)"
 			>
 				<i class="iconfont iconguanbi"></i>
 				<div class="btn-text">{{ item.name }}</div>
@@ -34,6 +34,10 @@ export default {
 		return {};
 	},
 	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
 		// 触发后传入的数据
 		data: {
 			type: Object,
@@ -41,11 +45,17 @@ export default {
 		}
 	},
 	mounted() {
-		console.log(this.data);
+		// console.log(this.data);
 	},
 	methods: {
 		showFn() {
 			this.$emit('show', this.data);
+		},
+		listClick(item) {
+			this.$emit('click', item);
+		},
+		addFn() {
+			this.$emit('add');
 		}
 	}
 };

admin-update/src/mock/userInfo.js

@@ -610,17 +610,17 @@ let menu = {
 			viewPath: null,
 			keepAlive: 0
 		},
-		{
-			id: '28',
-			parentId: '11',
-			name: '系统监控',
-			type: 0,
-			icon: 'icon-monitor',
-			orderNum: 2,
-			router: null,
-			viewPath: null,
-			keepAlive: 0
-		},
+		// {
+		// 	id: '28',
+		// 	parentId: '11',
+		// 	name: '系统监控',
+		// 	type: 0,
+		// 	icon: 'icon-monitor',
+		// 	orderNum: 2,
+		// 	router: null,
+		// 	viewPath: null,
+		// 	keepAlive: 0
+		// },
 		// {
 		// 	id: '45',
 		// 	parentId: '1',

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

@@ -4,12 +4,12 @@
 		<div class="wx-wrap">
 			<div class="wx-bar">
 				<div class="bar-img">
-					<img src="../../assets/images/setting/wx-bar-bg.png" alt="" />
+					<img src="../../assets/images/setting/wx-bar-bg.png" alt />
 				</div>
 				<div class="bar-text">{{ shopInfo.merchantName }}</div>
 			</div>
 			<!-- 中间快 -->
-			<div class="wx-content"></div>
+			<div class="wx-content" @click="closeOperate"></div>
 			<!-- 按钮 -->
 			<div class="wx-btn">
 				<div class="key-btn">
@@ -30,12 +30,76 @@
 					<!-- <div class="iconfont-blo">
 						<i class="iconfont iconcaidanlan"></i>
 					</div>
-					<span>{{ item.name }}</span> -->
+					<span>{{ item.name }}</span>-->
 
-					<operate-line-module :data="item" @show="operateChangeFn" />
+					<operate-line-module
+						:show="operateShow[index]"
+						:data="item"
+						@show="operateChangeFn"
+						@click="operateClickFn"
+					/>
 				</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>
+						<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>
 	</div>
 </template>
 
@@ -51,20 +115,20 @@ export default {
 		return {
 			form: {
 				name: '',
-				menuOption: 0,
+				menuOption: '0',
 				replyUrl: '',
 				targetId: 0
 			},
-			addModule: false,
-			operateShow: false,
+			rule: {},
+			addDialog: false,
 			activeIndex: null,
 			menuData: [],
 			// 常用链接
 			urlIndex: null,
 			commonUrlData: [],
 			// 操作菜单
-			optionMenuData: null,
-			operateLeft: 130,
+			operateShow: [],
+			operateData: null,
 			// 按钮列表
 			btnData: []
 		};
@@ -83,19 +147,47 @@ export default {
 		_getDet() {
 			this.$service.setting.getMenu().then(res => {
 				this.menuData = res;
+				res.map(() => {
+					this.operateShow.push(false);
+				});
 			});
 		},
 		_getUrl() {
 			this.$service.single.commonUrl().then(res => {
-				this.commonUrlData = res.data;
+				this.commonUrlData = res;
+			});
+		},
+		submitFn() {
+			this.$service.setting.updateMenu(this.menuData).then(res => {
+				this.$msg(res.msg);
+				this.resetForm();
 			});
 		},
 		// operate
-		menuClickFn(item, index) {},
-
+		menuClickFn(item, index) {
+			this.closeOperate();
+			this.activeIndex = index;
+			this.operateShow[index] = true;
+			this.operateData = item.children;
+		},
 		// operate
-		operateChangeFn(item) {
-			this.operateData = item;
+		closeOperate() {
+			this.operateShow = this.operateShow.map(e => (e = false));
+		},
+		operateChangeFn(item) {},
+		operateClickFn(item) {
+			this.dialogData = item;
+			this.addDialog = true;
+		},
+		// modal
+		confirmForm() {
+			console.log(this.operateData);
+			this.operateData.push(this.form);
+			this.submitFn();
+		},
+		resetForm() {
+			this.$refs['form'].resetFields();
+			this.addDialog = false;
 		}
 	}
 };