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-cocoFlow' }"
						@click="changeTagType('admin-cocoFlow')"
						>管理平台首页CocoFlow</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="['admin-cocoFlow'].includes(tagType)"
							type="primary"
							@click="addApp()"
							>添加应用</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: 60px; height: 60px;margin-left: 20px;"
									:src="form.basics.logo"
									fit="cover"
									@click="addBasicsIcon('logo')"
								>
									<div slot="error" class="image-slot" @click="addBasicsIcon('logo')">
										<i class="el-icon-picture-outline"></i>
									</div>
								</el-image>
							</el-tooltip>
						</div>

						<div class="ea_basics_logo">
							<span>登录页logo</span>
							<el-tooltip
								class="item"
								effect="dark"
								:content="form.basics.loginLogo ? '更改图标' : '上传图标'"
								placement="top"
							>
								<el-image
									style="width: 60px; height: 60px;margin-left: 20px;"
									:src="form.basics.loginLogo"
									fit="cover"
									@click="addBasicsIcon('loginLogo')"
								>
									<div slot="error" class="image-slot" @click="addBasicsIcon('loginLogo')">
										<i class="el-icon-picture-outline"></i>
									</div>
								</el-image>
							</el-tooltip>
						</div>

						<div class="ea_basics_logo">
							<span>登录页banner</span>
							<el-tooltip
								class="item"
								effect="dark"
								:content="form.basics.loginBanner ? '更改' : '上传'"
								placement="top"
							>
								<el-image
									style="width: 60px; height: 60px;margin-left: 20px;"
									:src="form.basics.loginBanner"
									fit="cover"
									@click="addBasicsIcon('loginBanner')"
								>
									<div slot="error" class="image-slot" @click="addBasicsIcon('loginBanner')">
										<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>
															<span>hover图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.hoverIcon"
																	style="width: 100%; height: 100%"
																	:src="item.hoverIcon"
																	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 appList" v-show="tagType == 'admin-cocoFlow'">
						<template v-if="form.admin.cocoFlow">
							<div
								class="appItem"
								v-for="(item,index) in form.admin.cocoFlow"
								:key="item.id"
							>
								<div class="ai_left">
									<el-image
										style="width: 100%; height: 100%"
										:src="item.json.icon"
										fit="cover"
									></el-image>
								</div>
								<div class="ai_right">
									<div>{{ item.name }}</div>
									<div class="ai_r_btn">
										<svg @click="moveApp(item.id,0)" v-if="index!=0" t="1744598539024" class="icon" viewBox="0 0 1470 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2613" width="200" height="200"><path d="M664.965051 36.390373L20.010522 880.212016c-44.471546 58.191134-2.978155 142.114864 70.271066 142.114863h1289.8254c73.232489 0 114.725879-83.923729 70.271065-142.114863L805.473719 36.390373a88.441155 88.441155 0 0 0-140.508668 0z" p-id="2614"></path></svg>
										<svg @click="moveApp(item.id,1)" v-if="index!=(form.admin.cocoFlow.length-1)" style="transform: rotate(180deg);" t="1744598539024" class="icon" viewBox="0 0 1470 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2613" width="200" height="200"><path d="M664.965051 36.390373L20.010522 880.212016c-44.471546 58.191134-2.978155 142.114864 70.271066 142.114863h1289.8254c73.232489 0 114.725879-83.923729 70.271065-142.114863L805.473719 36.390373a88.441155 88.441155 0 0 0-140.508668 0z" p-id="2614"></path></svg>
									</div>
									<span>{{ item.detail }}</span>
								</div>
							</div>
						</template>
					</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>
															<span>hover图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.hoverIcon"
																	style="width: 100%; height: 100%"
																	:src="item.hoverIcon"
																	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>
															<span>hover图标：</span>
															<div class="ui_m_image">
																<el-image
																	v-if="item.hoverIcon"
																	style="width: 100%; height: 100%"
																	:src="item.hoverIcon"
																	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="320px"
									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="editMenu(scope.row)"
											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" />
		<selectAppDialog ref="selectAppDialogRef" @success="selectAppSuccess" />
	</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";
import { addOp } from "@/api/user";
import { mapGetters } from "vuex";
import selectAppDialog from "./selectAppDialog.vue";
export default {
	components: {
		selectToolDialog,
		addMenuDialog,
		selectAppDialog,
	},
	computed: {
		...mapGetters(["userid"]),
	},
	data() {
		return {
			show: false,
			loading: false,
			data: null,
			type: null,
			tagType: "basics",
			addToolIndex: null,
			toolList: [],
			appList: [],
			form: {
				basics: {
					title: "",
					brief: "",
					logo: "",
				},
				//桌面  管理平台首页  管理平台侧边栏
				desktop: {
					list: [],
				},
				admin: {
					index: {
						list: [],
						cocoFlow: [],
					},
					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();
			Promise.all([this.getToolData(), this.getAppData()])
				.then(() => {
					// console.log(JSON.parse(JSON.stringify([this.toolList,this.appList])))
					this.setDataListToo(this.toolList, this.appList);
				})
				.catch((e) => {
					console.log("👉", e);
				});
			this.data = _data;
			this.type = type;
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.form = {
				basics: {
					title: "",
					brief: "",
					logo: "",
					loginLogo:"",
					loginBanner:"",
				},
				//桌面  管理平台首页  管理平台侧边栏
				desktop: {
					list: [],
				},
				admin: {
					index: {
						list: [],
						cocoFlow: [],
					},
					sidebar: {
						list: [],
					},
				},
			};
			this.type = null;
			this.data = null;
			this.tagType = "basics";
		},
		submit() {
			// this.close();
			console.log(this.form);
			this.setJson();
		},
		async addBasicsIcon(type='logo') {
			let _url = await this.uploadFile("image/*");
			if (_url) {
				this.form.basics[type] = _url;
				this.$forceUpdate()
				console.log(this.form)
				await addOp({
					uid: this.userid,
					cid: this.data.id,
					type: "user_op",
					content: `修改了${this.data.name}的基本信息的${type}`,
				});
			} 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
					: []
			);
		},
		async selectToolSuccess([_list, type]) {
			console.log(type, "===", _list);
			let list = _list;
			if (type == "desktop") {
				this.form.desktop.list = list;
				this.$refs.selectToolDialogRef.close();
				await addOp({
					uid: this.userid,
					cid: this.data.id,
					type: "user_op",
					content: `修改了${this.data.name}的桌面端工具`,
				});
			} else if (type == "admin-index") {
				this.form.admin.index.list = list;
				this.$refs.selectToolDialogRef.close();
				await addOp({
					uid: this.userid,
					cid: this.data.id,
					type: "user_op",
					content: `修改了${this.data.name}的平台首页工具`,
				});
			} 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))
					);
				}
				await addOp({
					uid: this.userid,
					cid: this.data.id,
					type: "user_op",
					content: `修改了${this.data.name}的平台侧边栏工具`,
				});
				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() {
			return new Promise((resolve) => {
				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.loading = false;
						resolve(_list);
					})
					.catch((err) => {
						console.log(err);
						this.loading = false;
						this.$message.error("获取工具数据失败");
						this.close();
					});
			});
		},
		getAppData() {
			return new Promise((resolve) => {
				let params = [
					{
						functionName: "select_schUsuallyApp",
						userid: "",
						stand: "cn",
					},
				];
				this.loading = true;
				this.$ajax
					.post(API_CONFIG.baseUrl, params)
					.then((res) => {
						let _data = res.data;
						let _list = _data[0];
						_list.forEach((i) => {
							i.json = JSON.parse(i.json);
						});
						this.appList = _list;
						this.loading = false;
						resolve(_list);
					})
					.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;
				}
			});
			_form.admin.cocoFlow = _form.admin.cocoFlow
				? _form.admin.cocoFlow.map((i) => i.id)
				: [];
			let params = [
				{
					functionName: "update_orgOroid_json_byId",
					id: this.data.id,
					ujson: JSON.stringify(_form),
					type: this.type,
				},
			];
			console.log(_form);
			this.loading = true;
			this.$ajax
				.post(API_CONFIG.baseUrl, params)
				.then(async (res) => {
					let _data = res.data;
					if (_data == 1) {
						this.$message.success("修改权限成功");
						this.$emit("getData");

						await addOp({
							uid: this.userid,
							cid: this.data.id,
							type: "user_op",
							content: `修改了${this.data.name}的权限设置`,
						});
						this.close();
					} else {
						this.$message.error("修改权限失败");
					}
					this.loading = false;
				})
				.catch((err) => {
					console.log(err);
					this.loading = false;
					this.$message.error("修改权限失败");
				});
		},
		setDataListToo(toolList = [], appList = []) {
			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);
				}
			});

			if (_form.admin.cocoFlow) {
				_form.admin.cocoFlow.forEach((i, index) => {
					let _index = appList.findIndex((i2) => i == i2.id);
					if (_index != -1) {
						_form.admin.cocoFlow[index] = appList[_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
			);
		},
		async addMenuSuccess({ item, type }) {
			console.log(item, type);
			if (type == "add") {
				this.form.admin.sidebar.list.push(item);
				item.id = String(new Date().getTime());
				item.typeId = item.id;
				await addOp({
					uid: this.userid,
					cid: "",
					type: "user_op",
					content: `添加了一级菜单：${item.menuName}`,
				});
			} else if (type == "edit") {
				let _index = this.form.admin.sidebar.list.findIndex(
					(i) => i.typeId == item.typeId
				);
				if (_index != -1) {
					let _sidebar = JSON.parse(JSON.stringify(this.form.admin.sidebar));
					_sidebar.list[_index] = item;
					this.form.admin.sidebar = JSON.parse(JSON.stringify(_sidebar));
					this.$forceUpdate();
					await addOp({
						uid: this.userid,
						cid: "",
						type: "user_op",
						content: `修改了了一级菜单：${item.menuName}`,
					});
				}
			}
			this.$refs.addMenuDialogRef.close();
		},
		addMenu() {
			this.$refs.addMenuDialogRef.open();
		},
		editMenu(row) {
			this.$refs.addMenuDialogRef.open(row, "edit");
		},
		addApp() {
			this.$refs.selectAppDialogRef.open({
				select: this.form.admin.cocoFlow ? this.form.admin.cocoFlow : [],
			});
		},
		moveApp(id,type){
			let _index = this.form.admin.cocoFlow.findIndex(i=>i.id==id);
			if(type == 0 && _index!=0){//上移
			let temp = this.form.admin.cocoFlow[_index - 1];
			this.form.admin.cocoFlow[_index - 1] = this.form.admin.cocoFlow[_index];
			this.form.admin.cocoFlow[_index] = temp;
			}else if(type == 1 && _index!=this.form.admin.cocoFlow.length-1){
			let temp = this.form.admin.cocoFlow[_index + 1];
			this.form.admin.cocoFlow[_index + 1] = this.form.admin.cocoFlow[_index];
			this.form.admin.cocoFlow[_index] = temp;
			}
			this.$forceUpdate()
		},
		selectAppSuccess(data) {
			this.form.admin.cocoFlow = JSON.parse(JSON.stringify(data));
			this.$forceUpdate();
			this.$refs.selectAppDialogRef.close();
		},
	},
};
</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: auto;
	height: auto;
	cursor: pointer;
	display: flex;
	align-items: center;
}

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

.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: 300px;
	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;
}

.appList {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding-top:20px ;
}

.appItem {
	width: 298px;
	height: 100px;
	background-color: white;
	box-sizing: border-box;
	border: solid 1px #f3f4f6;
	padding: 10px;
	border-radius: 8px;
	cursor: pointer;
	margin-bottom: 20px;
	margin-right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}

.appActive {
	border-color: #409eff;
	box-shadow: 0px 6px 30px 5px #00000015;
}

.appItem:hover {
	box-shadow: 0px 6px 30px 5px #00000015;
}

.ai_left {
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	padding: 10px;
	margin-right: 10px;
}

.ai_right {
	width: calc(100% - 80px - 10px);
	position: relative;
}

.ai_right > div {
	max-width: calc( 100% - 50px);
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	color: #000;
	margin-bottom: 10px;
}

.ai_r_btn{
	width: auto;
	display: flex;
	position: absolute;
	right: 0;
	top: 0;
}

.ai_r_btn>svg{
	width: 10px;
	height: 10px;
	margin-left: 15px;
	cursor: pointer;
}

.ai_right > span {
	font-size: 14px;
	color: #00000099;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>