pbl_admin_table/src/views/kanBan/components/AschoolFeature.vue

<template>
	<div
		v-if="Object.keys(Alldata).length > 0"
		v-loading="AllLoading"
		class="Asc"
		style="display: flex; flex-direction: column; gap: 20px; height: 100%"
	>
		<div class="Ktop">
			<div class="topTit">
				<div>
					<div>集团简介</div>
					<div
						style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"
					></div>
				</div>

				<div>
					<img
						v-if="userinfo.role == 1 && userinfo.type == 1"
						class="topTitEdit"
						@click="editregion(0)"
						src="../../../assets/img/bianji.svg"
						alt=""
					/>
				</div>
			</div>
			<div style="height: auto; padding: 30px 0">
				<div
					style="
						width: 100%;
						object-fit: contain;
						border-radius: 10px;
						height: 100%;
						margin-bottom: 14px;
					"
					v-if="CampusF.GroupImgList && CampusF.GroupImgList.length == 1"
				>
					<img
						style="
							width: 100%;
							height: 100%;
							object-fit: cover;
							border-radius: 10px;
						"
						:src="CampusF.GroupImgList[0]"
						alt=""
					/>
				</div>

				<div
					class="CarO"
					style="border-radius: 10px; overflow: hidden"
					v-if="CampusF.GroupImgList && CampusF.GroupImgList.length > 1"
				>
					<el-carousel
						style="width: 100%; height: 100%"
						indicator-position="outside"
					>
						<el-carousel-item
							v-for="(i, index) in CampusF.GroupImgList"
							:key="index"
						>

						<el-image 
							style="width: 100%;
								object-fit: contain;
								border-radius: 10px;"
							:src="i" 
							:preview-src-list="CampusF.GroupImgList">
						</el-image>
							<!-- <img
								style="
									width: 100%;
									height: 100%;
									object-fit: cover;
									border-radius: 10px;
								"
								:src="i"
								alt=""
							/> -->
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>

			<div class="Topbri">
				{{
					Alldata.admin.CampusF ? Alldata.admin.CampusF.GroupBri : "暂无简介"
				}}
			</div>
		</div>

		<div class="feature">
			<div class="topTit">
				<div>
					<div>办学特色</div>
					<div
						style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"
					></div>
				</div>
				<div>
					<img
						v-if="userinfo.role == 1 && userinfo.type == 1"
						class="topTitEdit"
						@click="editregion(1)"
						src="../../../assets/img/bianji.svg"
						alt=""
					/>
				</div>
			</div>

			<div class="featureAll">
				<template v-if="featureList.length">
					<div
						class="featureCon"
						v-for="(i, index) in featureList"
						:key="index"
					>
						<img
							style="width: 34px; height: 34px; object-fit: contain"
							:src="i.icon"
							alt=""
						/>
						<div class="featureConTit">{{ i.name }}</div>

						<el-tooltip
							class="item"
							effect="dark"
							:content="i.bri"
							placement="bottom"
						>
							<div class="Topbri2">{{ i.bri }}</div>
						</el-tooltip>
					</div>
				</template>
				<div v-else>暂无数据</div>
			</div>
		</div>

		<div class="feature">
			<div class="topTit">
				<div>
					<div>师资力量</div>
					<div
						style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"
					></div>
				</div>
				<div>
					<img
						v-if="userinfo.role == 1 && userinfo.type == 1"
						class="topTitEdit"
						@click="editregion(2)"
						src="../../../assets/img/bianji.svg"
						alt=""
					/>
				</div>
			</div>
			<div class="Topbri">
				<el-tooltip
					class="item"
					effect="dark"
					:content="
						Alldata.admin.CampusF
							? Alldata.admin.CampusF.teacherN.teaBri
							: '暂无数据'
					"
					placement="bottom"
				>
					<span>
						{{
							Alldata.admin.CampusF
								? Alldata.admin.CampusF.teacherN.teaBri
								: "暂无简介"
						}}
					</span>
				</el-tooltip>
			</div>

			<div class="featureAll" v-if="teaData.length">
				<div class="featureCon2" v-for="(i, index) in teaData" :key="index">
					<div class="featureConTit2">{{ i.bri }}</div>
					<div class="Topbri">{{ i.name }}</div>
				</div>
			</div>
			<div v-else>暂无数据</div>
		</div>

		<div class="feature">
			<div class="topTit">
				<div>
					<div>特色应用</div>
					<div
						style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"
					></div>
				</div>
			</div>
            <div
                style="display: flex;flex-direction: column;gap: 10px;"
                v-for="(item, index) in CampusF.appList"
                :key="index + 'b'"
            >
                <div style="display: flex; justify-content: space-between">
                    <div></div>
                    <div
                        style="
                            display: flex;
                            justify-content: space-between;
                            gap: 10px;
                        "
                    >
                        <img
                            @click="isBtn = 3,editFea(index)"
                            class="topTitEdit"
                            :src="editIndex == index ? require('../../../assets/kanban/bz.svg') : require('../../../assets/kanban/feaB.svg')"
                            alt=""
                        />
                        <img
                            @click="isBtn = 3,delFe(index)"
                            class="topTitEdit"
                            src="../../../assets/kanban/delK.svg"
                            alt=""
                        />
                    </div>
                </div>

                <div>
                    <div style="display: flex;justify-content: space-between;gap: 30px;">
                        <div class="diaFea" @click="openNewWindow(item)" style="height: 122px;width: 30%;min-width: 200px;max-width: 300px;cursor: pointer;">
                            <img v-if="editIndex == index" style="border:1px #0663fe solid;padding: 3px;box-sizing: border-box;" class="diaFeaImgT" @click="uploadisBtn(3,index)" :src="item.setIcon ? item.setIcon : item.json.icon" alt="">
                            <img v-else class="diaFeaImgT"  :src="item.setIcon ? item.setIcon : item.json.icon" alt="">
                            
							<div class="AppStoreConTit">{{ item.name }}</div>
                        </div>

                        <div style="flex: 1;">
                            <div class="AppStoreConBri" v-if="item.detailWri">
                                <el-input
									v-if="editIndex == index"
									resize="none"
									style="border-radius: 10px;height: 100%;"
									type="textarea"
									placeholder="请输入内容"
									v-model="item.detailWri"
								>
								</el-input>
								<div v-else style="font-weight: 600">{{ item.detailWri }}</div>
                            </div>
                            <div class="AppStoreConBri" v-else>
                                <el-input
									v-if="editIndex == index"
									resize="none"
									style="border-radius: 10px"
									type="textarea"
									placeholder="请输入内容"
									v-model="item.detail"
								>
								</el-input>
                                
								<div v-else style="font-weight: 600">{{ item.detail }}</div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="diaBtn"
                        style="padding: 0"
                        v-if="editIndex == index"
                    >
                        <span style="color: #000;" @click="feaClo(index)">取消</span>
                        <span
                            style="
                                background: #fff;
                            "
							:style="{border: editBtnType==1 ? '1px #9747FF solid':'1px #0663fe solid',
							color: editBtnType==1 ? '#9747FF' : '#0663fe'}"
                            @click="setJsonL(index)"
                            >保存</span
                        >
                    </div>
                </div>
            </div>
           <div class="FedialogJIa" style="display: flex;" @click="lookMore()">
                <div style="width: 100%;border: 1px #000 dashed;cursor: pointer;">
                    <img src="../../../assets/kanban/jia.svg" alt="" />
                </div>
            </div>
		
		</div>

		<!-- 修改校区特色弹框 -->
		<el-dialog
			:title="editTitle"
			:visible.sync="editVisible"
			close-on-click-modal
			class="Fedialog"
			:before-close="handleClose"
		>
			<div v-loading="diaLoad" style="display: flex; flex-direction: column">
				<div class="diaCon" id="bottomElement">
					<!-- 集团简介 -->
					<div class="diaTop" v-if="isBtn === 0">
						<el-input
							resize="none"
							style="
								border: 1px #0663fe dashed !important;
								border-radius: 10px;
								outline: none;
							"
							type="textarea"
							:rows="4"
							placeholder="请输入内容"
							v-model="CampusF.GroupBri"
						>
						</el-input>

						<div class="FedialogJIa">
							<template
								v-if="CampusF.GroupImgList && CampusF.GroupImgList.length"
							>
								<div
									class="imgBoc"
									v-for="(i, index) in CampusF.GroupImgList"
									:key="index"
								>
									<i @click="delImg(index)" class="el-icon-circle-close"></i>
									<img
										style="width: 100%; object-fit: contain"
										:src="i"
										alt=""
									/>
								</div>
							</template>
							<div @click="uploadisBtn(isBtn)">
								<img src="../../../assets/kanban/jia.svg" alt="" />
							</div>
						</div>
						<div
							style="
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 12px;
							"
						>
							请尽量上传10M以内的横版照片
						</div>
					</div>

					<!-- 办学特色 -->
					<div
						style="display: flex; flex-direction: column; gap: 10px"
						v-if="isBtn === 1"
					>
						<div
							class="diaFea"
							:style="{border: editIndex == index ? '1px dashed #3681FC' :''}"
							v-for="(i, index) in CampusF.feature"
							:key="index + 'b'"
						>
							<div style="display: flex; justify-content: space-between">
								<el-input
									v-if="editIndex == index"
									resize="none"
									style="border-radius: 10px;"
									placeholder="请输入内容"
									v-model="i.name"
								>
								</el-input>
								<div v-else style="font-weight: 600">{{ i.name }}</div>

								<div
									style="
										display: flex;
										justify-content: space-between;
										gap: 10px;
									"
								>
									<img
										@click="editFea(index)"
										class="topTitEdit"
										:src="editIndex == index ? editBtnType == 1? require('../../../assets/kanban/bz.svg') : require('../../../assets/kanban/lj.svg') : require('../../../assets/kanban/feaB.svg')"
										alt=""
									/>
									<img
										@click="delFe(index)"
										class="topTitEdit"
										src="../../../assets/kanban/delK.svg"
										alt=""
									/>
								</div>
							</div>
							<div>
								<div v-if="!i.icon"
								class="djjC"
								@click="uploadisBtn(isBtn, index)">
									<img src="../../../assets/kanban/djj.svg" alt="">
								</div>
								<img
									style="cursor: pointer"
									v-else-if="editIndex == index"
									@click="uploadisBtn(isBtn, index)"
									class="diaFeaImg"
									:src="i.icon"
									alt=""
								/>
								<img v-else class="diaFeaImg" :src="i.icon" alt="" />
							</div>
							<div>
								<el-input
									:disabled="editIndex != index"
									resize="none"
									:style="{border: editIndex == index ? '1px dashed #3681FC' :''}"
									style="border-radius: 10px;overflow: hidden;"
									type="textarea"
									:rows="4"
									placeholder="请输入内容"
									v-model="i.bri"
								>
								</el-input>
								<div
									class="diaBtn"
									style="padding: 0"
									v-if="editIndex == index"
								>
									<span style="color: #000;" @click="feaClo(index)">取消</span>
									<span
										style="
											background: #fff;
										"
										:style="{border: editBtnType==1 ? '1px #9747FF solid':'1px #0663fe solid',
										color: editBtnType==1 ? '#9747FF' : '#0663fe'}"
										@click="setJsonL(0)"
										>保存</span
									>
								</div>
							</div>
						</div>
					</div>

					<!-- 师资力量 -->
					<div
						style="display: flex; flex-direction: column; gap: 10px"
						v-if="isBtn === 2"
					>
                        <div class="diaFea" :style="{border: editIndex == 'bri' ? '1px dashed #3681FC' :''}">
							<div style="display: flex; justify-content: space-between">
                                <div></div>
								<div
									style="
										display: flex;
										justify-content: space-between;
										gap: 10px;
									"
								>
									<img
										@click="editFea('bri')"
										class="topTitEdit"
										:src="editIndex == 'bri' ? editBtnType == 1  ? require('../../../assets/kanban/bz.svg') : require('../../../assets/kanban/lj.svg') : require('../../../assets/kanban/feaB.svg')"
										alt=""
									/>
								</div>
							</div>
							<div>
								<el-input
									:disabled="editIndex != 'bri'"
									resize="none"
									style="border-radius: 10px;overflow: hidden;"
									type="textarea"
									:rows="4"
									:style="{border: editIndex == 'bri' ? '1px dashed #3681FC' :''}"
									placeholder="请输入内容"
									v-model="CampusF.teacherN.teaBri"
								>
								</el-input>
								<div
									class="diaBtn"
									style="padding: 0"
									v-if="editIndex == 'bri'"
								>
									<span style="color: #000;" @click="feaClo()">取消</span>
									<span
										style="
											background: #fff;
										"
										:style="{border: editBtnType==1 ? '1px #9747FF solid':'1px #0663fe solid',
										color: editBtnType==1 ? '#9747FF' : '#0663fe'}"
										@click="setJsonL(0)"
										>保存</span
									>
								</div>
							</div>
						</div>
						<div
							class="diaFea"
							:style="{border: editIndex == index ? '1px dashed #3681FC' :''}"
							v-for="(i, index) in CampusF.teacherN.list"
							:key="index + 'b'"
						>
							<div style="display: flex; justify-content: space-between">
								<el-input
									v-if="editIndex == index"
									resize="none"
									style="border-radius: 10px"
									placeholder="请输入内容"
									v-model="i.name"
								>
								</el-input>
								<div v-else style="font-weight: 600">{{ i.name }}</div>

								<div
									style="
										display: flex;
										justify-content: space-between;
										gap: 10px;
									"
								>
									<img
										@click="editFea(index)"
										class="topTitEdit"
										:src="editIndex == index ? editBtnType == 1? require('../../../assets/kanban/bz.svg') : require('../../../assets/kanban/lj.svg') : require('../../../assets/kanban/feaB.svg')"
										alt=""
									/>
									<img
										@click="delFe(index)"
										class="topTitEdit"
										src="../../../assets/kanban/delK.svg"
										alt=""
									/>
								</div>
							</div>
							<div>
								<el-input
									:disabled="editIndex != index"
									resize="none"
									:style="{border: editIndex == index ? '1px dashed #3681FC' :''}"
									style="border-radius: 10px;overflow: hidden;"
									type="textarea"
									:rows="4"
									placeholder="请输入内容"
									v-model="i.bri"
								>
								</el-input>
								<div
									class="diaBtn"
									style="padding: 0"
									v-if="editIndex == index"
								>
									<span style="color: #000;" @click="feaClo(index)">取消</span>
									<span
										style="
											background: #fff;
										"
										:style="{border: editBtnType==1 ? '1px #9747FF solid':'1px #0663fe solid',
										color: editBtnType==1 ? '#9747FF' : '#0663fe'}"
										@click="setJsonL(0)"
										>保存</span
									>
								</div>
							</div>
						</div>
					</div>
				
				</div>
				<div
					v-if="isBtn === 1 || isBtn === 2"
					@click="additem()"
					style="
						display: flex;
						align-items: center;
						padding: 10px 20px;
						box-sizing: border-box;
						cursor: pointer;
					"
				>
					<img src="../../../assets/kanban/feaJ.svg" alt="" />
					<span style="color: #0560fd">添加</span>
				</div>
				<div class="diaBtn" style="padding-bottom: 10px !important;">
					<span style="color: #000;" @click="handleClose"> {{isBtn === 0?'返 回':'取 消' }}</span>
					<span
						type="primary"
						style="background: #0663fe; color: #fff"
						@click="setJson(1)"
						>确 定</span
					>
				</div>
			</div>
		</el-dialog>

         <!-- 常见应用弹框 -->
        <el-dialog
        title="应用列表"
        :visible.sync="dialogVisible"
        class="moreDia"
        :close-on-click-modal="false"
        :modal="false"
        width="60%"
        :before-close="handleClose">
            <div v-loading="loading" style="display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 16px;height: 500px;overflow: auto;">
                <div v-for="(item,index) in isAdd(usuallyList)" class="tabCon" @click="selApp(item)" :key="index+'6p'" style="min-width: 308px;position: relative;">
                    <img v-if="selectedItem.find(k => k.id === item.id)" 
					src="../../../assets/img/dui.svg" 
					style="position: absolute;top: 10px;right: 10px;width: 30px;" alt="">
					<div class="AppList">
                            <img class="appImg" :src="JSON.parse(item.json).icon" alt="">
                            <div class="con">
                                <div class="tit">{{ item.name }}</div>
                                <div class="bri">
                                    <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
                                        <span>
                                            {{ item.detail }}
                                        </span>
                                    </el-tooltip>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
            <div class="diaBtn" style="height: 5%;padding-bottom: 10px;">
                <span @click="dialogVisible = false">取 消</span>
                <span
                    type="primary"
                    style="background: #0663fe; color: #fff"
                    @click="updateUApplist"
                    >确 定</span
                >
            </div>
        </el-dialog>

		<!-- <addCampusDialog ref="addCampusDialogRef" @success="addCampusSuccess" /> -->
	</div>
</template>

<script>
import { mapGetters } from "vuex";
import { API_CONFIG } from "../../../common/apiConfig.js";
// import addCampusDialog from "./addCampusDialog";
import { myMixin } from "@/mixins/mixin.js";
import "@/common/aws-sdk-2.235.1.min.js";

import axios from "@/common/axios.config"; // 引入 axios 配置实例
// import store from "../../../store";

export default {
	mixins: [myMixin],
	props: ["schId", "schOrg"],
	components: {
		// addCampusDialog,
	},
	data() {
		return {
            dialogVisible:false,

			// 0默认颜色 1编辑 2添加
			editBtnType:0,
			// 添加与编辑弹框显示
			editVisible: false,
            // app应用列表 
            usuallyList:[],
			// 正在编辑哪一个
			editIndex: null,

			// 上传图片loading
			diaLoad: false,

			loading: false,
			appLoading: false,

			// 判断点击的哪个部分的编辑按钮
			isBtn: -1,

			// 所有应用列表
			appList: [],

			// 页面校区特色数据
			CampusF: [],

			// 储存选择特色应用
			selectedItem: [],

			// 整体数据
			Alldata: {},
			AllLoading: false,
		};
	},
	computed: {
		...mapGetters(["userinfo"]),
		featureList() {
			if (this.Alldata.admin.CampusF) {
				return this.Alldata.admin.CampusF.feature; // 从 Alldata 中获取 featureList
			} else {
				return [];
			}
		},
        // 判断是否被添加过
        isAdd(){
            return function(val){
                const difference = val.filter(item1 => 
                    !this.CampusF.appList.some(item2 => item1.id === item2.id)
                );
                return difference
            }
        },
		teaData() {
			if (this.Alldata.admin.CampusF) {
				return this.Alldata.admin.CampusF.teacherN.list; // 从  Alldata 中获取 teaData
			} else {
				return [];
			}
		},
		allApp() {
			return function (val) {
				const difference = val.filter(
					(item1) =>
						!this.CampusF.appList.some((item2) => item1.id === item2.id)
				);
				return difference;
			};
		},
		editTitle() {
			if (this.isBtn == 0) return "编辑集团简介";
			else if (this.isBtn == 1) return "编辑办学特色";
			else if (this.isBtn == 2) return "编辑师资力量";
			else if (this.isBtn == 3) return "添加特色应用";
			else if (this.isBtn == 4) return "编辑特色应用";
			else return ""; // 默认值
		},
	},
	watch: {
		schId(newValue) {
			console.log("newValue", newValue);

			this.getSchFacility();
		},
	},
	methods: {
		// 修改特色应用
		updateUApplist(){
			this.CampusF.appList = [...this.CampusF.appList,...this.selectedItem]
			this.setJson(1)
		},
        // 添加或去除app
        selApp(val){
			let k = this.selectedItem.findIndex(item => item.id === val.id)
			console.log('selApp',k);
			
			if (k != -1) {
				this.selectedItem.splice(k,1)
			} else { this.selectedItem.push(val) }
        },
        // 添加数据
		additem() {
			this.editBtnType = 2
			if (this.isBtn == 1) {
				this.CampusF.feature.push({ bri: "", icon: "", name: "" });
				this.editIndex = this.CampusF.feature.length - 1;
				setTimeout(() => {
					document.querySelector("#bottomElement").scrollTo({
						top: document.querySelector("#bottomElement").scrollHeight,
						behavior: "smooth",
					});
				}, 0);
			}else if (this.isBtn == 2) {
                this.CampusF.teacherN.list.push({ bri: "", name: "" });
				this.editIndex = this.CampusF.teacherN.list.length - 1;
				setTimeout(() => {
					document.querySelector("#bottomElement").scrollTo({
						top: document.querySelector("#bottomElement").scrollHeight,
						behavior: "smooth",
					});
				}, 0);
            }
		},
        
		// 点击区块编辑
		async editregion(type) {
            this.editIndex = null
			this.isBtn = type;
			this.editVisible = true;
			this.appLoading = true;
		},
		//删除集团简介中的图片
		delImg(ind) {
			this.CampusF.GroupImgList.splice(ind, 1);
		},
		// 编辑弹框数据条中的图片
		editFea(ind) {
			this.editBtnType = 1
			this.CampusF = JSON.parse(JSON.stringify(this.Alldata.admin.CampusF));
			this.editIndex = ind;
		},

		handleClose() {
            this.dialogVisible = false
			this.editVisible = false;
			this.isBtn = -1;
			this.appList = [];
			this.editIndex = null;

			this.dialogVisible = false
			this.selectedItem = []
			if (this.Alldata.admin.CampusF) {
				this.CampusF = JSON.parse(JSON.stringify(this.Alldata.admin.CampusF));
			}
		},
		// 上移
		moveUp(index) {
			if (index > 0) {
				const list = this.CampusF.appList;
				const temp = list[index];
				this.$set(list, index, list[index - 1]);
				this.$set(list, index - 1, temp);
			}
		},

		// 下移
		moveDown(index) {
			const list = this.CampusF.appList;
			if (index < list.length - 1) {
				const temp = list[index];
				this.$set(list, index, list[index + 1]);
				this.$set(list, index + 1, temp);
			}
		},

		// 删除
		delFe(index) {
			this.$confirm("确定要删除吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					// 用户点击“确定”后执行删除操作
					if (this.isBtn == 1) {
						this.CampusF.feature.splice(index, 1);
					}else if(this.isBtn == 2) {
						this.CampusF.teacherN.list.splice(index, 1);
					} else if(this.isBtn == 3) {
						console.log('66666',index);
						
						this.CampusF.appList.splice(index, 1);
					}
					this.setJson(0);
					// this.$message.success('删除成功！');
				})
				.catch(() => {
					// 用户点击“取消”后执行的操作
					// this.$message.error('已取消删除');
				});
		},
        // 打开常见应用弹框
        lookMore(){
            this.dialogVisible = true
            this.loading = true
            let params = [
                {
                    functionName: API_CONFIG.ajax_usuallyApp.functionName,
                    uid: this.userinfo.userid, 
                    cn: this.userinfo.schoolArea ? this.userinfo.schoolArea : this.userinfo.orgArea, //学校id
                },
            ];
            
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then((res) => {
                    this.usuallyList = res.data[0]
                    this.loading = false

                })
                .catch((err) => {
                    console.log(err);
                    this.loading = false
                    this.$message.error("获取工具数据失败");
                });
        },
		openNewWindow(val) {
			console.log(val);
			this.addOp3(
				"1",
				"",
				{ id: val.id, name: val.name, type: this.prefixL + "appstoreOpen" },
				"success"
			);

			// // 基本用法：打开指定 URL
			window.open(val.url, "_blank");
		},
		// 办学特色取消
		feaClo(ind) {
			this.editBtnType = 0
			this.editIndex = null;

            let data = JSON.parse(
					JSON.stringify(this.Alldata.admin.CampusF)
				);
			if (this.isBtn == 1) {
                
				this.CampusF.feature = data.feature
			
			} else if (this.isBtn == 2) {
				this.CampusF.teacherN.teaBri = data.teacherN.teaBri

                if (ind != null) {
                    this.CampusF.teacherN.list = data.teacherN.list
                    
                }
				
			} else if (this.isBtn == 3) {
                this.CampusF.appList = data.appList
            }
		},
		// 保存时添加判断
		setJsonL(ind) {
            if (this.isBtn == 1) {
                if (this.hasEmptyData(this.CampusF.feature)) return this.$message.info("请填充空数据");

			this.setJson(0);
            }else if (this.isBtn == 2) {
                if (!this.CampusF.teacherN.teaBri) return this.$message.info("请填充简介");
                if (this.hasEmptyData2(this.CampusF.teacherN.list)) return this.$message.info("请填充空数据");

			this.setJson(0);
            }else if (this.isBtn == 3) {
               if (this.CampusF.appList[ind].detailWri != 'undefined') {
                    this.CampusF.appList[ind].detailWri = this.CampusF.appList[ind].detail
               }

			this.setJson(0);
            }
			
		},
        // 不能有空值
        hasEmptyData2(arr) {
			return arr.some(
				(item) => item.name.trim() === "" || item.bri.trim() === ""
			);
		},
		hasEmptyData(arr) {
			return arr.some(
				(item) => item.name.trim() === "" || item.icon === "" || item.bri.trim() === ""
			);
		},

		// 提交
		setJson(SetL) {
			if (this.isBtn == 1 && this.hasEmptyData(this.CampusF.feature))
				return this.$message.info("请填充空数据");

			this.editIndex = null;
			this.diaLoad = true;
			let _form = JSON.parse(JSON.stringify(this.Alldata));

			_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) => {return { id: i.id, setIcon: i.setIcon };})
				: [];

			_form.admin.cocoFlow2 = _form.admin.cocoFlow2
				? _form.admin.cocoFlow2.map((i) => {return { id: i.id, setIcon: i.setIcon };})
				: [];

			_form.admin.CampusF = JSON.parse(JSON.stringify(this.CampusF));

			_form.admin.CampusF.appList = _form.admin.CampusF.appList.length
				? _form.admin.CampusF.appList.map((i) => {return { id: i.id, setIcon: i.setIcon,detailWri: i.detailWri ? i.detailWri : ''  };})
				: [];

			console.log("_form", JSON.parse(JSON.stringify(_form)));
			let params = [
				{
					functionName: "update_orgOroid_json_liyuan",
					oid: this.schId,
					orgid: this.schOrg,
					ujson: JSON.stringify(_form),
				},
			];
			axios
				.post(API_CONFIG.baseUrl, params)
				.then(async (res) => {
					let _data = res.data;
					if (_data == 1) {
						this.$message.success("修改成功");

						this.getSchFacility();

						if (SetL) {
							this.handleClose();
						}

						this.addOp3(
							"1",
							"",
							{
								uid: this.userinfo.userid,
								cid: this.userinfo.organizeid,
								type: "user_op",
								content: `修改了${this.userinfo.schoolName}的权限设置`,
							},
							"success"
						);
					} else {
						this.$message.error("修改权限失败");
					}
					this.diaLoad = false;
				})
				.catch((err) => {
					console.log(err);
					this.diaLoad = false;
					this.$message.error("修改权限失败");

					this.addOp3(
						"1",
						"",
						{
							uid: this.userid,
							cid: this.data.id,
							type: "user_op",
							content: `修改了${this.data.name}的权限设置`,
						},
						err
					);
				});
		},
		async getSchFacility() {
			this.AllLoading = true;
			let params = [
				{
					functionName: API_CONFIG.ajax_schoolPermission.functionName, // 调用存储过程的名称
					org: this.schOrg, //组织id
					oid: this.schId, //学校id
				},
			];

			console.log("params", params);
			// 获取学校权限与组织权限,优先使用学校权限,其次使用组织权限
			// 第一步
			let res = await axios.post(API_CONFIG.baseUrl, params);
			let perData = JSON.parse(res.data[0][0].json);

			// 第二步
			let params2 = [
				{
					functionName: "select_desktopToolByPage",
					status: "",
					page: 1,
					lim: 9999999,
				},
			];
			let res2 = await axios.post(API_CONFIG.baseUrl, params2);
			let toolList = res2.data[0];
			toolList.forEach((i) => {
				i.url = JSON.parse(i.url);
				i.json = JSON.parse(i.json);
				i.argumentList = JSON.parse(i.argumentList);
			});

			let params3 = [
				{
					functionName: "select_schUsuallyApp",
					userid: "",
					stand: "cn",
				},
			];
			let res3 = await axios.post(API_CONFIG.baseUrl, params3);

			let _list = res3.data[0];

			_list.forEach((i) => {
				i.json = JSON.parse(i.json);
			});

			let appList = _list;

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

			if (perData.admin.CampusF && perData.admin.CampusF.appList) {
				perData.admin.CampusF.appList.forEach((i, index) => {
					let _index = appList.findIndex((i2) => i.id == i2.id);

					if (_index != -1) {
						let _setData = appList[_index];
						_setData.setIcon = i.setIcon;_setData.detailWri = i.detailWri ? i.detailWri : '';
						perData.admin.CampusF.appList[index] = _setData;
					} else {
						console.log("无应用", i);
					}
				});
				perData.admin.CampusF.appList =
					perData.admin.CampusF.appList.filter(Boolean);
			}

			perData.admin.index.list.forEach((i, index) => {
				let _index = toolList.findIndex((i2) => i == i2.id);
				if (_index != -1) {
					perData.admin.index.list[index] = toolList[_index];
					perData.admin.index.list[index].hovered = false;
				} else {
					console.log("无工具", i);
				}
			});
			perData.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) {
							perData.admin.sidebar.list[index].children[index2] =
								_toolList[_index];
							perData.admin.sidebar.list[index].children[index2].typeId =
								perData.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) {
						perData.admin.sidebar.list[index] = _toolList[_index];
						perData.admin.sidebar.list[index].typeId =
							perData.admin.sidebar.list[index].id;
					} else {
						console.log("无工具", i);
					}
				}
			});
			console.log("perData", perData);

			this.Alldata = perData;
			this.AllLoading = false;

			if (perData.admin.CampusF) {
				this.CampusF = JSON.parse(JSON.stringify(perData.admin.CampusF));
			} else {
				this.CampusF = {
					GroupBri: "暂无简介",
					feature: [
						{
							bri: "暂无简介",
							icon: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/tese1745913146000.svg",
							name: "默认标题",
						},
					],
					teacherN: {
						teaBri: "暂无简介",
						list: [{ bri: "默认标题", name: "暂无数据" }],
					},
					appList: [],
				};
			}

			//   commit('SET_FROM', perData)
		},
		// 上传图片
		async uploadisBtn(val, index) {
			let imgUrl = await this.uploadFile("image/*");

			if (val == 0) {
				if (this.CampusF.GroupImgList) {
					this.$set(this.CampusF, "GroupImgList", [
						...this.CampusF.GroupImgList,
						imgUrl,
					]);
				} else {
					this.CampusF.GroupImgList = [];
					this.$set(this.CampusF, "GroupImgList", [
						...this.CampusF.GroupImgList,
						imgUrl,
					]);
				}
			} else if (val == 1) {
				this.CampusF.feature[index].icon = imgUrl;
			} else if (val == 3) {
				this.CampusF.appList[index].setIcon = imgUrl;
			}

			this.$forceUpdate();
		},
		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" } }); //选择桶
						this.diaLoad = true;

						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("上传失败");
									this.diaLoad = false;

									// return resolve("");
								} else {
									this.diaLoad = false;

									return resolve(data.Location);
								}
							});
					} else {
						resolve("");
						this.diaLoad = false;

						console.log("没上传成功");
					}
				};
				input.click();
			});
		},
	},
	mounted() {
		this.getSchFacility();
	},
};
</script>

<style scoped>
.Ktop {
	/* height: 159px; */
	padding: 36px 27px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	justify-content: space-between;
}
.Asc >>> .el-icon-picture-outline:before{
	height: 30px;width: 30px;
}
.topTit {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
	color: #0663fe;
	display: flex;
	height: 36px;
	justify-content: space-between;
}

.topTitEdit {
	cursor: pointer;
}

.Topbri {
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: #000;
}

.Topbri2 {
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 14px;
	color: #000;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.feature {
	width: 100%;
	padding: 36px 27px;
	border-radius: 12px;
	box-sizing: border-box;
	background: #eeeeee;
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: space-between;
}

.featureCon {
	background: #ffffff;
	width: 100%;
	height: 211px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 12px;
	padding: 40px 20px;
	align-items: center;
	box-sizing: border-box;
	gap: 18px;
}

.featureAll {
	grid-template-columns: repeat(4, 1fr);
	display: grid;
	gap: 20px;
}

.featureCon2 {
	background: #ffffff;
	width: 100%;
	height: 94px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 12px;
	padding: 40px 20px;
	align-items: center;
	box-sizing: border-box;
	gap: 10px;
}

.featureConTit {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
	color: #000;
}

.featureConTit2 {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 20px;
	line-height: 22px;
	color: #0663fe;
}

.AppStoreList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
	gap: 20px;
}

.AppStoreList2 {
	display: flex;
	flex-direction: column;
}

.AppStore {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 171px;
	min-width: 100px;
	cursor: pointer;
}

.AppStoreCon {
	border-radius: 10px;
	padding: 17px 17px;
	height: 100%;
	box-sizing: border-box;
	background: #fff;
}
.AppStoreCon img {
	width: 32px;
	height: 32px;
	margin-bottom: 10px;
	object-fit: cover;
	border-radius: 50%;
}

.AppAdd {
	height: 171px;
	border-radius: 10px;
	padding: 17px 17px;
	box-sizing: border-box;
	border: 1px dashed #000000;
	background: #e5e5e5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.AppStoreConTit {
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.AppStoreConBri {
	font-family: PingFang SC;
	font-weight: 300;
	font-size: 14px;
	color: #969ba3;
    height: 100%;
	/* display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; */
    white-space: wrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.AppStoreConBri >>> .el-textarea{
	height: 100%;
}
.AppStoreConBri >>> .el-textarea__inner {
	border: none !important;
	border-radius: 10px !important;
	height: 100%;

}
.AppStoreBri {
	font-family: PingFang SC;
	font-size: 10px;
	color: #969ba3;
}

.appItem {
	height: 100px;
	background-color: white;
	box-sizing: border-box;
	border: solid 1px #f3f4f6;
	padding: 10px;
	border-radius: 8px;
	cursor: pointer;
	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_right > span {
	font-size: 14px;
	color: #00000099;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Fedialog >>> .el-dialog {
	width: 60% !important;
	min-width: 800px;
	overflow: hidden;
	margin-top: 10vh !important;
	border-radius: 12px;
}
.diaTop {
	height: 450px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.diaTop >>> .el-textarea__inner {
	border: none !important;
	border-radius: 10px !important;
}
.diaCon {
	height: 500px;
	overflow: auto;
	padding: 20px;
}
.FedialogJIa {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}
.FedialogJIa div {
	height: 160px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e6e6e6;
	border-radius: 12px;
	overflow: hidden;
	border: 1px #0663fe dashed;
}

.Fedialog >>> .el-dialog__header {
	padding: 15px 20px;
	background: #fff;
	border-radius: 10px 10px 0 0;
	border-bottom: 1px #e7e7e7 solid;
}

.Fedialog >>> .el-dialog__body {
	position: relative;
	max-height: 70vh;
	/* 内容区域最大高度为视口高度的 70% */
	overflow-y: auto;
	/* 当内容超出时显示滚动条 */
	background: #fafafa;
	/* 添加内边距 */
	padding: 0;
	box-sizing: border-box;
	/* 确保 padding 不影响宽度计算 */
}

.Fedialog >>> .el-dialog__title {
	color: #000;
}
.diaBtn {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	/* height: 40px; */
	align-items: center;
	padding: 10px 20px 0 !important;
	box-sizing: border-box;
	/* min-height: 60px; */
}
.diaBtn > span {
	background: #e7e7e7;
	border-radius: 25px;
	padding: 5px 15px;
	box-sizing: border-box;
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 12px;
	cursor: pointer;
}
.CarO {
	border-radius: 10px;
	overflow: hidden;
	/* box-shadow: 0px 0px 20px 0px #0000001a;  */
}
.CarO >>> .el-carousel {
	height: auto !important;
}
.CarO >>> .el-carousel__container {
	height: 350px !important;
}
/*指示器按钮*/
.CarO >>> .el-carousel__button {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.2);
}
/*指示器激活按钮*/
.CarO >>> .is-active .el-carousel__button {
	background: #0663fe;
}
.imgBoc {
	position: relative;
	border: none !important;
}
.imgBoc > .el-icon-circle-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: none;
	font-size: 25px;
	cursor: pointer;
	color: #0663fe;
}
.imgBoc:hover .el-icon-circle-close {
	display: block;
}
.diaFea {
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	box-sizing: border-box;
	border-radius: 10px;
}
.diaFea >>> .el-input__inner {
	height: 24px;
	line-height: 24px;
}
.diaFeaImgT{
	width: 30px;height: 30px;object-fit: cover;border-radius: 50%;
}

.diaFeaImg {
	height: 40px;
	width: 40px;
	object-fit: contain;
	border-radius: 5px;
	border: 1px solid #0663fe;
}
.shadeC {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #000;
	z-index: 9999;
	opacity: 0.3;
}

/* 弹框 */
.moreDia >>> .el-dialog{
    border-radius: 10px;
}
.moreDia >>> .el-dialog__body{
    /* height: 500px; */
    /* overflow: auto; */
    border-top: 1px #e7e7e7 solid;
}
/* 对号 */
.top{
    display: flex;
    height: 154px;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
    margin-bottom: 14px;
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
}

.AppList{
    flex-wrap: wrap;display: flex;
    justify-content: space-between;
    border: 1px rgb(243 244 246 / var(--tw-border-opacity, 1)) solid;
    border-radius: 10px;padding: 16px;box-sizing: border-box;
    position: relative;
}
.appImg{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.con{
    flex: 1;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tit{
    color: #1f2937;font-size: 16px;height: 24px;line-height: 24px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bri{
    color: #6b7280;font-size: 12px;height: 16px;line-height: 16px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.djjC{
	display: flex;align-items: center;justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border-width: 1px;
	cursor: pointer;
	border: 1px dashed #3681FC;
}
</style>