pblUserManage/src/components/dialog/permissionSettingDialog.vue

<template>
	<div>
		<el-dialog
			title="权限设置"
			class="permissionSettingDialog"
			:visible.sync="show"
			:close-on-click-modal="false"
			width="1000px"
			top="8vh"
		>
			<div v-loading="loading" class="ps_area">
				<div class="pa_a_head">
					<span
						:class="{ pa_a_h_active: tagType == 'basics' }"
						@click="changeTagType('basics')"
						>基本信息</span
					>
					<span
						:class="{ pa_a_h_active: tagType == 'desktop' }"
						@click="changeTagType('desktop')"
						>桌面工具</span
					>
					<span
						:class="{ pa_a_h_active: tagType == 'admin-index' }"
						@click="changeTagType('admin-index')"
						>管理平台侧首页</span
					>
					<span
						:class="{ pa_a_h_active: tagType == 'admin-sidebar' }"
						@click="changeTagType('admin-sidebar')"
						>管理平台侧边栏</span
					>
					<div class="ea_add">
						<el-button
							size="mini"
							v-if="['admin-sidebar'].includes(tagType)"
							type="primary"
							@click="addMenu()"
							>添加菜单</el-button
						>
						<el-button
							size="mini"
							v-if="
								['desktop', 'admin-index', 'admin-sidebar'].includes(tagType)
							"
							type="primary"
							@click="addTool(tagType)"
							>添加工具</el-button
						>
					</div>
				</div>
				<div class="pa_a_editBox">
					<div class="editArea pa_a_eb_basics" v-show="tagType == 'basics'">
						<div class="ea_basics_input">
							<span>标题</span>
							<el-input
								v-model="form.basics.title"
								placeholder="请输入标题内容"
							></el-input>
						</div>

						<div class="ea_basics_input">
							<span>简介</span>
							<el-input
								v-model="form.basics.brief"
								placeholder="请输入简介内容"
							></el-input>
						</div>

						<div class="ea_basics_logo">
							<span>logo</span>
							<el-tooltip
								class="item"
								effect="dark"
								:content="form.basics.logo ? '更改图标' : '上传图标'"
								placement="top"
							>
								<el-image
									style="width: 100%; height: 100%"
									:src="form.basics.logo"
									fit="cover"
									@click="addBasicsIcon()"
								>
									<div slot="error" class="image-slot" @click="addBasicsIcon()">
										<i class="el-icon-picture-outline"></i>
									</div>
								</el-image>
							</el-tooltip>
						</div>
					</div>
					<div class="editArea pa_a_eb_desktop" v-show="tagType == 'desktop'">
						<div class="ea_table">
							<el-table
								:data="form.desktop.list"
								stripe
								border
								style="width: 100%"
								:header-cell-style="headerCellStyle"
							>
								<el-table-column
									label="标识"
									min-width="100"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.toolId ? scope.row.toolId : "-"
									}}</template>
								</el-table-column>
								<!-- <el-table-column
									label="宽度"
									min-width="45"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.dialogWidth ? scope.row.dialogWidth : "-"
									}}</template>
								</el-table-column>
								<el-table-column
									label="高度"
									min-width="45"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.dialogHeight ? scope.row.dialogHeight : "-"
									}}</template>
								</el-table-column> -->

								<el-table-column
									label="描述"
									min-width="200"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.description ? scope.row.description : "-"
									}}</template>
								</el-table-column>

								<el-table-column
									label="工具设置"
									min-width="80"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<el-popover placement="bottom" width="840" trigger="hover">
											<div class="urlItemBox">
												<div
													class="urlItem"
													v-for="(item, index) in scope.row.url"
													:key="scope.row.id + '-' + index"
												>
													<span>{{ item.region }}</span>
													<div class="ui_message">
														<div>名称：{{ item.name ? item.name : "-" }}</div>
														<div>
															<span>链接：</span
															><a
																:href="item.url"
																v-if="item.url"
																target="_blank"
																>{{ item.url }}</a
															><span v-else>-</span>
														</div>
														<div>
															<span>桌面图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.icon"
																	style="width: 100%; height: 100%"
																	:src="item.icon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>平台图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.platformIcon"
																	style="width: 100%; height: 100%"
																	:src="item.platformIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>默认图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.defaultIcon"
																	style="width: 100%; height: 100%"
																	:src="item.defaultIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>激活图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.activeIcon"
																	style="width: 100%; height: 100%"
																	:src="item.activeIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<el-button slot="reference" size="small"
												>查看设置</el-button
											>
										</el-popover>
									</template>
								</el-table-column>
								<el-table-column
									label="仅管理员显示"
									min-width="80"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.isAdmin == "1" ? "是" : "否"
									}}</template>
								</el-table-column>
								<el-table-column
									label="操作"
									width="200px"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<button
											@click="moveUp(scope.row)"
											v-if="scope.$index > 0"
											style="
												color: #308fff;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											上移
										</button>
										<button
											@click="moveDown(scope.row)"
											v-if="form.desktop.list.length - 1 > scope.$index"
											style="
												color: #308fff;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											下移
										</button>

										<button
											@click="del(scope.row)"
											style="
												color: #ff2570;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											删除
										</button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
					<div
						class="editArea pa_a_eb_admin-index"
						v-show="tagType == 'admin-index'"
					>
						<div class="ea_table">
							<el-table
								:data="form.admin.index.list"
								stripe
								border
								style="width: 100%"
								:header-cell-style="headerCellStyle"
							>
								<el-table-column
									label="标识"
									min-width="100"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.toolId ? scope.row.toolId : "-"
									}}</template>
								</el-table-column>
								<!-- <el-table-column
									label="宽度"
									min-width="45"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.dialogWidth ? scope.row.dialogWidth : "-"
									}}</template>
								</el-table-column>
								<el-table-column
									label="高度"
									min-width="45"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.dialogHeight ? scope.row.dialogHeight : "-"
									}}</template>
								</el-table-column> -->

								<el-table-column
									label="描述"
									min-width="200"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.description ? scope.row.description : "-"
									}}</template>
								</el-table-column>

								<el-table-column
									label="工具设置"
									min-width="80"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<el-popover placement="bottom" width="840" trigger="hover">
											<div class="urlItemBox">
												<div
													class="urlItem"
													v-for="(item, index) in scope.row.url"
													:key="scope.row.id + '-' + index"
												>
													<span>{{ item.region }}</span>
													<div class="ui_message">
														<div>名称：{{ item.name ? item.name : "-" }}</div>
														<div>
															<span>链接：</span
															><a
																:href="item.url"
																v-if="item.url"
																target="_blank"
																>{{ item.url }}</a
															><span v-else>-</span>
														</div>
														<div>
															<span>桌面图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.icon"
																	style="width: 100%; height: 100%"
																	:src="item.icon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>平台图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.platformIcon"
																	style="width: 100%; height: 100%"
																	:src="item.platformIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>默认图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.defaultIcon"
																	style="width: 100%; height: 100%"
																	:src="item.defaultIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>激活图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.activeIcon"
																	style="width: 100%; height: 100%"
																	:src="item.activeIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<el-button slot="reference" size="small"
												>查看设置</el-button
											>
										</el-popover>
									</template>
								</el-table-column>
								<el-table-column
									label="仅管理员显示"
									min-width="80"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.isAdmin == "1" ? "是" : "否"
									}}</template>
								</el-table-column>
								<el-table-column
									label="操作"
									width="200px"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<button
											@click="moveUp(scope.row)"
											v-if="scope.$index > 0"
											style="
												color: #308fff;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											上移
										</button>
										<button
											@click="moveDown(scope.row)"
											v-if="form.admin.index.list.length - 1 > scope.$index"
											style="
												color: #308fff;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											下移
										</button>

										<button
											@click="del(scope.row)"
											style="
												color: #ff2570;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											删除
										</button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
					<div
						class="editArea pa_a_eb_admin-sidebar"
						v-show="tagType == 'admin-sidebar'"
					>
						<div class="ea_table">
							<el-table
								:data="form.admin.sidebar.list"
								stripe
								border
								style="width: 100%"
								row-key="typeId"
								:header-cell-style="headerCellStyle"
								:tree-props="{
									children: 'children',
									hasChildren: 'hasChildren',
								}"
							>
								<el-table-column
									label="标识"
									min-width="100"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.toolId ? scope.row.toolId : "-"
									}}</template>
								</el-table-column>
								<el-table-column
									label="描述"
									min-width="200"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.description ? scope.row.description : "-"
									}}</template>
								</el-table-column>

								<el-table-column
									label="菜单名称"
									min-width="200"
									show-overflow-tooltip
								>
									<template slot-scope="scope">{{
										scope.row.menuName ? scope.row.menuName : "-"
									}}</template>
								</el-table-column>

								<el-table-column
									label="菜单默认图标"
									min-width="200"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<el-image
											v-if="scope.row.menuIcon"
											style="width: 50px; height: 50px"
											:src="scope.row.menuIcon"
											fit="cover"
										>
											<div slot="error" class="image-slot">
												<i class="el-icon-picture-outline"></i>
											</div>
										</el-image>
										<span v-else>-</span>
									</template>
								</el-table-column>

								<el-table-column
									label="菜单激活图标"
									min-width="200"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<el-image
											v-if="scope.row.menuActiveIcon"
											style="width: 50px; height: 50px"
											:src="scope.row.menuActiveIcon"
											fit="cover"
										>
											<div slot="error" class="image-slot">
												<i class="el-icon-picture-outline"></i>
											</div>
										</el-image>
										<span v-else>-</span>
									</template>
								</el-table-column>

								<el-table-column
									label="工具设置"
									min-width="110"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<el-popover
											placement="bottom"
											width="840"
											trigger="hover"
											v-if="scope.row.url"
										>
											<div class="urlItemBox">
												<div
													class="urlItem"
													v-for="(item, index) in scope.row.url"
													:key="scope.row.id + '-' + index"
												>
													<span>{{ item.region }}</span>
													<div class="ui_message">
														<div>名称：{{ item.name ? item.name : "-" }}</div>
														<div>
															<span>链接：</span
															><a
																:href="item.url"
																v-if="item.url"
																target="_blank"
																>{{ item.url }}</a
															><span v-else>-</span>
														</div>
														<div>
															<span>桌面图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.icon"
																	style="width: 100%; height: 100%"
																	:src="item.icon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>平台图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.platformIcon"
																	style="width: 100%; height: 100%"
																	:src="item.platformIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>默认图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.defaultIcon"
																	style="width: 100%; height: 100%"
																	:src="item.defaultIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
														<div>
															<span>激活图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.activeIcon"
																	style="width: 100%; height: 100%"
																	:src="item.activeIcon"
																	fit="cover"
																></el-image>
																<span v-else>-</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<el-button slot="reference" size="small"
												>查看设置</el-button
											>
										</el-popover>
										<span v-else>-</span>
									</template>
								</el-table-column>
								<el-table-column
									label="仅管理员显示"
									min-width="80"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<span v-if="scope.row.isAdmin">{{
											scope.row.isAdmin == "1" ? "是" : "否"
										}}</span>
										<span v-else>-</span>
									</template>
								</el-table-column>
								<el-table-column
									label="操作"
									width="270px"
									fixed="right"
									show-overflow-tooltip
								>
									<template slot-scope="scope">
										<button
											@click="addToolSidebar(scope.row.id)"
											v-if="scope.row.menuName"
											style="
												color: #308fff;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											添加工具
										</button>
										<button
											@click="moveUp(scope.row, scope.row.typeId)"
											style="
												color: #308fff;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											上移
										</button>
										<button
											@click="moveDown(scope.row, scope.row.typeId)"
											style="
												color: #308fff;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											下移
										</button>

										<button
											@click="del(scope.row, scope.row.typeId)"
											style="
												color: #ff2570;
												background: none;
												border: none;
												cursor: pointer;
												margin-left: 25px;
											"
										>
											删除
										</button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</div>
			<!-- 按钮区域 -->
			<div slot="footer" class="el-dialog__footer">
				<el-button @click="close()">取 消</el-button>
				<el-button type="primary" @click="submit()">确认</el-button>
			</div>
		</el-dialog>
		<selectToolDialog ref="selectToolDialogRef" @success="selectToolSuccess" />
		<addMenuDialog ref="addMenuDialogRef" @success="addMenuSuccess" />
	</div>
</template>

<script>
import "@/common/aws-sdk-2.235.1.min.js";
import selectToolDialog from "./selectToolDialog.vue";
import { API_CONFIG } from "@/common/apiConfig";
import addMenuDialog from "./addMenuDialog.vue";
export default {
	components: {
		selectToolDialog,
		addMenuDialog,
	},
	data() {
		return {
			show: false,
			loading: false,
			data: null,
			type: null,
			tagType: "basics",
			addToolIndex: null,
			toolList: [],
			form: {
				basics: {
					title: "",
					brief: "",
					logo: "",
				},
				//桌面  管理平台首页  管理平台侧边栏
				desktop: {
					list: [],
				},
				admin: {
					index: {
						list: [],
					},
					sidebar: {
						list: [],
					},
				},
			},
		};
	},
	methods: {
		open(data, type) {
			this.init();
			let _data = JSON.parse(JSON.stringify(data));
			if (_data.json) {
				this.form = JSON.parse(_data.json);
			}
			this.getToolData();
			this.data = _data;
			this.type = type;
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.form = {
				basics: {
					title: "",
					brief: "",
					logo: "",
				},
				//桌面  管理平台首页  管理平台侧边栏
				desktop: {
					list: [],
				},
				admin: {
					index: {
						list: [],
					},
					sidebar: {
						list: [],
					},
				},
			};
			this.type = null;
			this.data = null;
			this.tagType = "basics";
		},
		submit() {
			// this.close();
			console.log(this.form);
			this.setJson();
		},
		async addBasicsIcon() {
			let _url = await this.uploadFile("image/*");
			if (_url) {
				this.form.basics.logo = _url;
			} else {
				return console.log("无图片");
			}
		},
		uploadFile(accept = "*") {
			return new Promise((resolve) => {
				const input = document.createElement("input");
				input.type = "file";
				input.accept = accept;
				input.onchange = (event) => {
					const file = event.target.files[0];
					if (file) {
						let credentials = {
							accessKeyId: "AKIATLPEDU37QV5CHLMH",
							secretAccessKey: "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",
						}; //秘钥形式的登录上传
						window.AWS.config.update(credentials);
						window.AWS.config.region = "cn-northwest-1"; //设置区域
						let bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
						// let _name = file.name;
						// let size = file.size;
						let params = {
							Key:
								file.name.split(".")[0] +
								new Date().getTime() +
								"." +
								file.name.split(".")[file.name.split(".").length - 1],
							ContentType: file.type,
							Body: file,
							"Access-Control-Allow-Credentials": "*",
							ACL: "public-read",
						}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
						let options = {
							partSize: 2048 * 1024 * 1024,
							queueSize: 2,
							leavePartsOnError: true,
						};

						bucket
							.upload(params, options)
							.on("httpUploadProgress", (evt) => {
								console.log(evt);
							})
							.send((err, data) => {
								if (err) {
									this.$message.error("上传失败");
									return resolve("");
								} else {
									return resolve(data.Location);
								}
							});
					} else {
						resolve("");
					}
				};
				input.click();
			});
		},
		changeTagType(newType) {
			this.tagType = newType;
		},
		addTool(type) {
			let selectList = [];
			if (type == "desktop") selectList = this.form.desktop.list;
			if (type == "admin-index") selectList = this.form.admin.index.list;
			if (type == "admin-sidebar") selectList = this.form.admin.sidebar.list;
			this.$refs.selectToolDialogRef.open(
				selectList,
				type,
				["admin-index", "admin-sidebar"].includes(type)
					? this.form.desktop.list
					: []
			);
		},
		selectToolSuccess([_list, type]) {
			console.log(type, "===", _list);
			let list = _list;
			if (type == "desktop") {
				this.form.desktop.list = list;
				this.$refs.selectToolDialogRef.close();
			} else if (type == "admin-index") {
				this.form.admin.index.list = list;
				this.$refs.selectToolDialogRef.close();
			} else if (type == "admin-sidebar" || type == "admin-sidebar2") {
				if (this.addToolIndex != null) {
					let _index = this.form.admin.sidebar.list.findIndex(
						(i) => i.id == this.addToolIndex
					);
					if (_index == -1) return this.$message.error("未找到对应的菜单");
					list.forEach((i) => (i.typeId = this.addToolIndex + "," + i.id));
					this.form.admin.sidebar.list[_index].children.push(
						...JSON.parse(JSON.stringify(list))
					);
					this.addToolIndex = null;
				} else {
					list.forEach((i) => (i.typeId = i.id));
					this.form.admin.sidebar.list.push(
						...JSON.parse(JSON.stringify(list))
					);
				}

				this.$refs.selectToolDialogRef.close();
			}
			this.$forceUpdate();
		},
		// 表头的背景色
		headerCellStyle() {
			return { backgroundColor: "#f1f1f1" };
		},
		moveUp(row, typeId) {
			console.log(typeId);
			if (this.tagType == "desktop") {
				let _index = this.form.desktop.list.findIndex((i) => i.id == row.id);
				if (_index > 0) {
					const itemToMove = this.form.desktop.list.splice(_index, 1)[0];
					this.form.desktop.list.splice(_index - 1, 0, itemToMove);
				}
			} else if (this.tagType == "admin-index") {
				let _index = this.form.admin.index.list.findIndex(
					(i) => i.id == row.id
				);
				if (_index > 0) {
					const itemToMove = this.form.admin.index.list.splice(_index, 1)[0];
					this.form.admin.index.list.splice(_index - 1, 0, itemToMove);
				}
			} else if (this.tagType == "admin-sidebar") {
				let typeIdList = typeId.split(",");
				console.log(typeIdList);
				if (typeIdList.length == 1) {
					let _index = this.form.admin.sidebar.list.findIndex(
						(i) => i.typeId == typeIdList[0]
					);
					if (_index > 0) {
						const itemToMove = this.form.admin.sidebar.list.splice(
							_index,
							1
						)[0];
						this.form.admin.sidebar.list.splice(_index - 1, 0, itemToMove);
					}
				} else if (typeIdList.length == 2) {
					let _index = this.form.admin.sidebar.list.findIndex(
						(i) => i.typeId == typeIdList[0]
					);
					let _index2 = this.form.admin.sidebar.list[_index].children.findIndex(
						(i) => i.id == typeIdList[1]
					);
					console.log(_index2);
					if (_index2 > 0) {
						const itemToMove = this.form.admin.sidebar.list[
							_index
						].children.splice(_index2, 1)[0];
						this.form.admin.sidebar.list[_index].children.splice(
							_index2 - 1,
							0,
							itemToMove
						);
					}
				}
			}
		},
		moveDown(row, typeId) {
			console.log(typeId);
			if (this.tagType == "desktop") {
				let _index = this.form.desktop.list.findIndex((i) => i.id == row.id);
				if (_index < this.form.desktop.list.length - 1) {
					const itemToMove = this.form.desktop.list.splice(_index, 1)[0];
					this.form.desktop.list.splice(_index + 1, 0, itemToMove);
				}
			} else if (this.tagType == "admin-index") {
				let _index = this.form.admin.index.list.findIndex(
					(i) => i.id == row.id
				);
				if (_index < this.form.admin.index.list.length - 1) {
					const itemToMove = this.form.admin.index.list.splice(_index, 1)[0];
					this.form.admin.index.list.splice(_index + 1, 0, itemToMove);
				}
			} else if (this.tagType == "admin-sidebar") {
				let typeIdList = typeId.split(",");
				if (typeIdList.length == 1) {
					let _index = this.form.admin.sidebar.list.findIndex(
						(i) => i.typeId == typeIdList[0]
					);
					if (_index < this.form.admin.sidebar.list.length - 1) {
						const itemToMove = this.form.admin.sidebar.list.splice(
							_index,
							1
						)[0];
						this.form.admin.sidebar.list.splice(_index + 1, 0, itemToMove);
					}
				} else if (typeIdList.length == 2) {
					let _index = this.form.admin.sidebar.list.findIndex(
						(i) => i.typeId == typeIdList[0]
					);
					let _index2 = this.form.admin.sidebar.list[_index].children.findIndex(
						(i) => i.id == typeIdList[1]
					);
					if (
						_index2 <
						this.form.admin.sidebar.list[_index].children.length - 1
					) {
						const itemToMove = this.form.admin.sidebar.list[
							_index
						].children.splice(_index2, 1)[0];
						this.form.admin.sidebar.list[_index].children.splice(
							_index2 + 1,
							0,
							itemToMove
						);
					}
				}
			}
		},
		del(row, typeId) {
			if (this.tagType == "desktop") {
				const index = this.form.desktop.list.findIndex((i) => i.id === row.id);
				if (index > -1) {
					this.form.desktop.list.splice(index, 1);
				}
			} else if (this.tagType == "admin-index") {
				const index = this.form.admin.index.list.findIndex(
					(i) => i.id === row.id
				);
				if (index > -1) {
					this.form.admin.index.list.splice(index, 1);
				}
			} else if (this.tagType == "admin-sidebar") {
				let typeIdList = typeId.split(",");
				if (typeIdList.length == 1) {
					let _index = this.form.admin.sidebar.list.findIndex(
						(i) => i.typeId == typeIdList[0]
					);
					this.form.admin.sidebar.list.splice(_index, 1);
				} else if (typeIdList.length == 2) {
					let _index = this.form.admin.sidebar.list.findIndex(
						(i) => i.typeId == typeIdList[0]
					);
					let _index2 = this.form.admin.sidebar.list[_index].children.findIndex(
						(i) => i.typeId == typeIdList[1]
					);
					this.form.admin.sidebar.list[_index].children.splice(_index2, 1);
				}
				// this.form.admin.sidebar.list.splice(_index, 1);
			}
		},
		getToolData() {
			let params = [
				{
					functionName: "select_desktopToolByPage",
					status: "",
					page: 1,
					lim: 9999999,
				},
			];
			this.loading = true;
			this.$ajax
				.post(API_CONFIG.baseUrl, params)
				.then((res) => {
					let _data = res.data;
					let _list = _data[0];
					_list.forEach((i) => {
						i.url = JSON.parse(i.url);
						i.json = JSON.parse(i.json);
						i.argumentList = JSON.parse(i.argumentList);
					});
					this.toolList = _list;
					this.setDataListToo(_list);
					this.loading = false;
				})
				.catch((err) => {
					console.log(err);
					this.loading = false;
					this.$message.error("获取工具数据失败");
					this.close();
				});
		},
		setJson() {
			let _form = JSON.parse(JSON.stringify(this.form));
			_form.desktop.list = _form.desktop.list.map((i) => i.id);
			_form.admin.index.list = _form.admin.index.list.map((i) => i.id);
			_form.admin.sidebar.list.forEach((i, index) => {
				if (i.children) {
					_form.admin.sidebar.list[index].children = i.children.map(
						(i) => i.id
					);
				} else {
					_form.admin.sidebar.list[index] = i.id;
				}
			});

			let params = [
				{
					functionName: "update_orgOroid_json_byId",
					id: this.data.id,
					ujson: JSON.stringify(_form),
					type: this.type,
				},
			];
			this.loading = true;
			this.$ajax
				.post(API_CONFIG.baseUrl, params)
				.then((res) => {
					let _data = res.data;
					if (_data == 1) {
						this.$message.success("修改权限成功");
						this.$emit("getData");
						this.close();
					} else {
						this.$message.error("修改权限失败");
					}
					this.loading = false;
				})
				.catch((err) => {
					console.log(err);
					this.loading = false;
					this.$message.error("修改权限失败");
				});
		},
		setDataListToo(toolList = []) {
			let _form = JSON.parse(JSON.stringify(this.form));
			_form.desktop.list.forEach((i, index) => {
				let _index = toolList.findIndex((i2) => i == i2.id);
				if (_index != -1) {
					_form.desktop.list[index] = toolList[_index];
				} else {
					console.log("无工具", i);
				}
			});

			_form.admin.index.list.forEach((i, index) => {
				let _index = toolList.findIndex((i2) => i == i2.id);
				if (_index != -1) {
					_form.admin.index.list[index] = toolList[_index];
				} else {
					console.log("无工具", i);
				}
			});

			_form.admin.sidebar.list.forEach((i, index) => {
				if (i.children) {
					i.children.forEach((i2, index2) => {
						let _toolList = JSON.parse(JSON.stringify(toolList))
						let _index = _toolList.findIndex((i3) => i2 == i3.id);
						
						if (_index != -1) {
							_form.admin.sidebar.list[index].children[index2] = _toolList[_index];
							_form.admin.sidebar.list[index].children[index2].typeId = _form.admin.sidebar.list[index].typeId + "," +_toolList[_index].id;
						} else {
							console.log("无工具", i);
						}
					});
				} else {
					let _toolList = JSON.parse(JSON.stringify(toolList))
					let _index = _toolList.findIndex((i2) => i == i2.id);
					if (_index != -1) {
						_form.admin.sidebar.list[index] = _toolList[_index];
						_form.admin.sidebar.list[index].typeId =
							_form.admin.sidebar.list[index].id;
					} else {
						console.log("无工具", i);
					}
				}
			});

			this.form = _form;
			this.$forceUpdate();
		},
		addToolSidebar(id) {
			this.addToolIndex = id;
			let index = this.form.admin.sidebar.list.findIndex((i) => i.id == id);
			if (index == -1) return this.$message.error("未找到对应菜单");
			let selectList = [];
			selectList = this.form.admin.sidebar.list[index].children;
			this.$refs.selectToolDialogRef.open(
				selectList,
				"admin-sidebar",
				this.form.desktop.list
			);
		},
		addMenuSuccess(item) {
			this.form.admin.sidebar.list.push(item);
			item.id = String(new Date().getTime());
			item.typeId = item.id;
			this.$refs.addMenuDialogRef.close();
		},
		addMenu() {
			this.$refs.addMenuDialogRef.open();
		},
	},
};
</script>

<style scoped>
.permissionSettingDialog >>> .el-dialog__header {
	padding: 15px 20px;
	background: #454545;
}

.permissionSettingDialog >>> .el-dialog__title {
	color: #fff;
}

.el-dialog__footer {
	padding: 10px 0 0 10px;
}

.ps_area {
	width: 100%;
	height: 800px;
}

.pa_a_head {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	overflow: auto;
	border-bottom: 1px solid #e4e7ed;
}

.pa_a_head > span {
	font-size: 16px;
	display: block;
	width: auto;
	height: 100%;
	padding: 0 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
	cursor: pointer;
	transition: 0.2s;
	white-space: nowrap;
}

.pa_a_h_active {
	color: #409eff;
}

.pa_a_editBox {
	width: 100%;
	height: 100%;
	overflow: auto;
}

.editArea {
	width: 100%;
	height: auto;
	box-sizing: border-box;
}

.ea_basics_input {
	width: 100%;
	height: auto;
	margin-top: 20px;
	display: flex;
	align-items: center;
}

.ea_basics_input > span {
	display: block;
	width: 60px;
	height: auto;
}

.ea_basics_logo {
	margin-top: 30px;
	width: 110px;
	height: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.ea_basics_logo > span {
	display: block;
	min-width: 60px;
}

.ea_basics_logo >>> .image-slot {
	width: 100%;
	height: 100%;
	font-size: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ea_item {
	width: 83px;
	height: 83px;
	margin: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pa_a_eb_desktop {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.ea_add {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.urlItemBox {
	display: flex;
	flex-wrap: wrap;
}

.urlItem {
	width: 400px;
	height: 250px;
	overflow: auto;
	position: relative;
	box-sizing: border-box;
	border-bottom: solid 1px #ebeef5;
}

.urlItem:nth-child(2n) {
	margin-left: 20px;
}

.urlItem > span {
	font-size: 18px;
	font-weight: bold;
}

.ui_m_image {
	width: 40px;
	height: 40px;
	float: left;
	display: flex;
	align-items: center;
}

.ui_message > div {
	display: flex;
	align-items: center;
}

.ui_message > div > span {
	white-space: nowrap;
}
</style>