pblUserManage/src/components/organList.vue

<template>
    <div class="list_container">
        <div class="title_examine">
            <div class="pub_title">组织列表</div>
            <div style="margin-left: auto;">
                <el-input v-model="checkOrg" placeholder="请输入组织" size="normal" clearable @change="changeOrg"
                    style="margin-right: 10px; width: 200px"></el-input>
                <el-select v-model="checkArea" placeholder="选择区域" clearable filterable @change="changeArea"
                    style="margin-right: 10px">
                    <el-option v-for="item in regionCList" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>
                <el-button type="primary" size="small" @click="add_organ_dialog = true;">新增组织</el-button>
            </div>
        </div>
        <div class="tableBox">
            <el-table :data="organizations" stripe border style="width: 100%" :header-cell-style="headerCellStyle">
                <el-table-column show-overflow-tooltip prop="name" label="组织名称" min-width="45"></el-table-column>
                <el-table-column show-overflow-tooltip prop="code" label="编码" min-width="45">
                    <template slot-scope="scope">
                        {{ scope.row.code || '-' }} <!-- 如果 org 为空，显示 '-' -->
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="code" label="随机码" min-width="45">
					<template slot-scope="scope">
						{{ scope.row.code2 || "-" }}
						<!-- 如果 org 为空，显示 '-' -->
					</template>
				</el-table-column>
                <el-table-column show-overflow-tooltip prop="detail" label="描述" min-width="45">
                    <template slot-scope="scope">
                        {{ scope.row.detail || '-' }} <!-- 如果 org 为空，显示 '-' -->
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="area" label="区域" min-width="45"></el-table-column>
                <el-table-column show-overflow-tooltip prop="ctime" label="创建时间" min-width="45"></el-table-column>
                <el-table-column label="是否禁用/使用期限" min-width="45">
                    <template #default="scope">
                        <span v-if="scope.row.isLogin === '1' || scope.row.isLogin === 'null' || scope.row.isLogin === ''">启用</span>
                        <span v-else-if="scope.row.isLogin === '2'">禁用</span>
                        <span v-else>{{ scope.row.isLogin }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="380px">
                    <template slot-scope="scope">
                        <div class="operate">
                            <button @click="update(scope.row)">编辑</button>
                            <button @click="enable(scope.row, 'enable')">
                                {{ scope.row.isLogin === '2' ? '启用' : '禁用' }}
                            </button>
                            <button v-if="scope.row.isLogin !== '2'"
                                @click="open_enable_organ(scope.row, 'useDate')">/&nbsp;使用期限</button>
                            <button @click="toPage(scope.row)">批量创建</button>
                            <button @click="permissionSetting(scope.row)"
                                v-show="!unShowJurUser.includes(userid)">权限设置</button>
                            <button @click="addcommunityL(scope.row)">添加社区</button>
                            <button @click="delete_organ(scope.row)" style="color:red;">删除</button>

                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total"
            @current-change="handlePageChange" layout="total,prev, pager, next, jumper">
        </el-pagination>
        <!-- 新增组织弹窗 -->
        <el-dialog title="新增组织" class="table" :visible.sync="add_organ_dialog" :before-close="close_add_organ"
            width="700px">
            <div class="el_dialog_org_content">
                <form class="el-form">
                    <!-- 组织名称 -->
                    <div class="el-form-item" style="margin-top: 15px">
                        <label class="el-form-item__label" style="width: 100px">组织名称</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="orgName" type="text" autocomplete="off" placeholder="组织名称"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 地区 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">组织编码</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="randomCode" type="text" autocomplete="off" placeholder="请输入随机码"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 随机码 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">随机码</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="randomCode2" type="text" autocomplete="off" placeholder="请输入随机码"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 描述 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">描述</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="orgDetail" type="text" autocomplete="off" placeholder="请输入描述"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 区域 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">区域</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">

                                    <el-select v-model="regionC" placeholder="请选择区域" class="custom-select" filterable>
                                        <el-option v-for="(org, index) in regionCList" :key="index" :label="org.name"
                                            :value="org.name">
                                            {{ org.name }}
                                        </el-option>
                                    </el-select>

                                </div>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 按钮区域 -->
            <div slot="footer" class="el-dialog__footer" style="margin-top: 88px;">
                <el-button @click="close_add_organ">取 消</el-button>
                <el-button type="primary" @click="ajax_add_org">确认</el-button>
            </div>
        </el-dialog>
        <!-- 修改组织弹窗 -->
        <el-dialog title="修改组织" class="table" :visible.sync="add_organ_dialog2" :before-close="close_add_organ2"
            width="700px">
            <div class="el_dialog_org_content">
                <form class="el-form">
                    <!-- 组织名称 -->
                    <div class="el-form-item" style="margin-top: 15px">
                        <label class="el-form-item__label" style="width: 100px">组织名称</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="orgName" type="text" autocomplete="off" placeholder="组织名称"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 地区 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">组织编码</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="randomCode" type="text" autocomplete="off" placeholder="请输入随机码"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 随机码 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">组织随机码</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="randomCode2" type="text" autocomplete="off" placeholder="请输入随机码"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 描述 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">描述</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="orgDetail" type="text" autocomplete="off" placeholder="请输入描述"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 区域 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">区域</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <el-select v-model="regionC" placeholder="请选择区域" class="custom-select" filterable>
                                        <el-option v-for="(org, index) in regionCList" :key="index" :label="org.name"
                                            :value="org.name">
                                            {{ org.name }}
                                        </el-option>
                                    </el-select>
                                </div>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 按钮区域 -->
            <div slot="footer" class="el-dialog__footer" style="margin-top: 88px;">
                <el-button @click="close_add_organ2">取 消</el-button>
                <el-button type="primary" @click="updateOrgan">确认</el-button>
            </div>
        </el-dialog>
        <!-- 启用弹窗 -->
        <el-dialog :title="enableDiaTitle" class="table" :visible.sync="enable_organ_dialog"
            :before-close="close_enable_organ" width="700px">
            <div class="el_dialog_org_content">
                <form class="el-form">
                    <!-- 使用期限 -->
                    <div class="el-form-item">
                        <label class="el-form-item__label">使用期限</label>
                        <div class="el-form-item__content">
                            <el-date-picker v-model="useDate" format="yyyy-MM-dd" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择使用期限" />
                        </div>
                    </div>
                </form>
            </div>
            <!-- 按钮区域 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="close_enable_organ">取 消</el-button>
                <el-button type="primary" @click="enable_organ">确认</el-button>
            </div>
        </el-dialog>

        <el-dialog
            :title="`${cyInfo.name}社区列表`"
            :visible.sync="dialogcommunity"
            width="1000px"
            class="table"
            :before-close="handleClose">
            <div class="cyConTit">
                <div>社区列表</div>
                <el-button type="primary" size="mini" @click="editCy(0)">添加社区</el-button>
            </div>
             <el-table
                :data="cytableData"
                style="width: 100%" v-loading="cyloading">
                <el-table-column
                    prop="name"
                    label="名称"
                    >
                </el-table-column>
                 <el-table-column
                    prop="username"
                    label="创建人"
                    >
                </el-table-column>
                <el-table-column
                    prop="createtime"
                    label="创建时间"
                    >
                </el-table-column>
                <el-table-column
					show-overflow-tooltip
                    prop="evatime2"
                    label="截止日期"
                    >
                </el-table-column>
                 <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <div class="operate">
                            <button @click="lookCy(scope.row)">添加人员</button>
                            <button @click="editCy(1,scope.row)">修改</button>
                            <button @click="editOpen(scope.row)">{{ scope.row.isopen ? '启用' : '禁用' }}</button>
                            <button @click="delete_Cy(scope.row)" style="color:red;">删除</button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog
            title="社区人员"
            :visible.sync="dialogcyperson"
            width="1000px"
            class="table"
            :before-close="handleClose2">
            <div class="cyConTit">
                <div>人员列表</div>
                <el-button type="primary" size="mini" @click="getTeacher">添加人员</el-button>
            </div>
             <el-table
                :data="cypersontableData"
                style="width: 100%" v-loading="cypersonloading">
                <el-table-column
                    prop="name"
                    label="名称"
                    >
                </el-table-column>
                <el-table-column
                    prop="accountNumber"
                    label="账号"
                    >
                </el-table-column>
                <el-table-column
                    prop="organizationname"
                    label="学校"
                    >
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <div class="operate">
                            <button @click="removeCyperson(scope.row)" style="color:red;">移出</button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog
            :title="isedit ?'修改社区':'添加社区'"
            :visible.sync="dialogcyADD"
            width="1000px"
            class="table"
            :before-close="handleClose2">
                <form class="el-form">
                    <!-- 名称 -->
                    <div class="el-form-item" style="margin-top: 15px">
                        <label class="el-form-item__label" style="width: 100px">名称</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <span>
                                <div class="add_input el-input el-input--suffix">
                                    <input v-model="editCyInfo.name" type="text" autocomplete="off" placeholder="社区名称"
                                        class="el-input__inner" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- banner -->
					<div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">截止日期</label>
						<el-date-picker
							v-model="editCyInfo.evatime"
							type="datetimerange"
							align="right"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:default-time="['12:00:00', '08:00:00']">
						</el-date-picker>
                    </div>
                    <div class="el-form-item" style="align-items:flex-start;">
                        <label class="el-form-item__label" style="width: 100px;flex-shrink: 0;">自定义分类</label>
						<div style="">
							<el-button size="mini" type="primary" @click="addType()">添加分类</el-button>
							<div v-if="editCyInfo.typeL && editCyInfo.typeL.length" class="alltype">
								<div class="typeArea" v-for="(item,index) in editCyInfo.typeL" :key="item.id">
                                    <div style="font-size: 12px;">分类名称</div>
									<div style="display: flex;gap: 20px;">
										<div class="bigtype">
											<el-input 
												v-if="item.eit == 0" 
												v-model="editCyInfo.typeL[index].name" placeholder="请输入内容">
											</el-input>
											<span style="font-size: 16px;font-weight: 600;" v-else>{{ item.name }}</span>
										</div>
										<span class="btn" @click="Deltype(index)">删除</span>
										<span class="btn" v-if="item.eit == 0" @click="editCyInfo.typeL[index].eit = 1">确定</span>
										<span class="btn" v-else @click="editCyInfo.typeL[index].eit = 0">编辑</span>
									</div>
                                    <div style="font-size: 12px;margin-top: 10px;">分类标签</div>
									<div class="tagL">
										<template v-if="item.children && item.children.length">
											<span style="display: flex;gap: 10px;align-items: center;" v-for="(i,ind) in item.children" :key="i.id">
												<el-input 
													v-if="i.eit == 0" 
													v-model="editCyInfo.typeL[index].children[ind].name" placeholder="请输入内容">
												</el-input>
												<span v-else>{{ i.name }}</span>
												<span class="btn" @click="Deltag(index,ind)">删除</span>
												<span class="btn" v-if="i.eit == 0" @click="editCyInfo.typeL[index].children[ind].eit = 1">确定</span>
												<span class="btn" v-else @click="editCyInfo.typeL[index].children[ind].eit = 0">编辑</span>
											</span>
										</template>
										<span style="cursor: pointer;background-color: #409EFF;color: #fff;" @click="Addtag(index)">添加</span>
									</div>
								</div>
							</div>
							
						</div>
                    </div>
					<div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">banner</label>
                        <div class="el-form-item__content" style="margin-left: 5px">
                            <el-button type="primary" @click="cyImgAdd">添加</el-button>
                        </div>
                    </div>
                    <div class="el-form-item"  v-if="editCyInfo.banner">
						<div style="position: relative;">
							<div class="cha" @click="delImg">❌</div>
							<img style="width: 60px;height: 60px;object-fit: cover;" :src="editCyInfo.banner" alt="">                  
						</div>
                    </div>
                   
                </form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose2">取 消</el-button>
                <el-button v-if="isedit == 0" type="primary" @click="AddCy">确定添加</el-button>
                <el-button v-else type="primary" @click="updateCy">确定修改</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="添加社区成员"
            :visible.sync="dialogaddCyperson"
            :append-to-body="true"
            width="25%"
            height="80%"
            :close-on-click-modal="false"
            :before-close="handleClose"
            class="addNewPP customWidth"
            >
            <div class="people">
            <div class="people_top">
            <div class="people_top_right">
                <div class="people_search">
                <el-input
                    placeholder="搜索成员名称"
                    v-model="searchTN"
                    @keyup.enter.native="getTeacher"
                ></el-input>
                <div class="search_img" @click="getTeacher">
                    <img src="../assets/search.png" alt />
                </div>
                </div>
            </div>
            <div class="people_nav" style="display: flex; align-items: center">
                <div class="check_class_left_title">选择成员</div>
                <div style="display: flex; align-items: center; margin-left: auto">
                <el-checkbox
                    v-model="checkAll"
                    @change="handleCheckAllChange2"
                    class="all_check"
                    >全选</el-checkbox
                >
                </div>
            </div>
            </div>
            <div class="t_j_box" style="padding: 15px 10px 0;box-sizing: border-box;">
                <div>姓名</div>
                <div>账号</div>
                <div>学校</div>
            </div>
            <el-checkbox-group
                v-model="checkboxList3"
                class="people_name"
                @change="handleCheckedCitiesChange"
                v-if="teacherJuri.length"
                >
                <el-checkbox
                    v-for="item in teacherJuri"
                    :key="item.userid"
                    :label="item.userid"
                >
                    <div class="t_j_box">
                        <el-tooltip
                            placement="top"
                            :content="item.name ? item.name : '暂无姓名'"
                        >
                            <div>{{ item.name ? item.name : "暂无姓名" }}</div>
                        </el-tooltip>
                        <el-tooltip placement="top" :content="item.accountNumber.split('@')[0]">
                            <div>{{ item.accountNumber.split('@')[0] }}</div>
                        </el-tooltip>
                        <el-tooltip placement="top" :content="item.organizationname">
                            <div>{{ item.organizationname }}</div>
                        </el-tooltip>
                    </div>
                </el-checkbox>
            </el-checkbox-group>
            <div style="text-align: center; margin-top: 10px" v-else>暂无数据</div>
        </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogaddCyperson = false">取 消</el-button>
                <el-button type="primary" @click="addcyperson">确定</el-button>
            </span>
        </el-dialog>

        <permissionSettingDialog ref="permissionSettingDialogRef" @getData="getOrgan" />
    </div>
</template>
<script>
import { API_CONFIG } from '@/common/apiConfig';
import { addOp,addCommunity,
    getcylist,updateCommunity,
    getAddcyPersonlist,updateCommunityperson,
    getcypersonlist,delCommunity,updateCyOP } from "@/api/user";
import { mapGetters } from 'vuex';
import permissionSettingDialog from './dialog/permissionSettingDialog'
export default {
    name: 'onList',
    components: {
        permissionSettingDialog
    },
    data() {
        return {
            // 点击组织操作添加社区弹框
            dialogcommunity:false,
            // 打开添加信息组织弹框，存储的组织信息
            cyInfo:[], //组织信息
            // 社区列表的loading
            cyloading:false,

            // 社区添加与修改所存储的信息 
            editCyInfo:{name:'',banner:'',evatime:'',typeL:[]},
            // 添加与修改社区共用一个弹框 0是添加信息 1 修改信息
            isedit:0,
            // 添加与修改社区弹框
            dialogcyADD:false,


            //组织社区列表
            cytableData:[], 
            // 添加社区人员的组织人员列表
            teacherJuri:[],
            //已添加社区人员列表
            cypersontableData:[],
            // 添加社区人员列表弹框已选中人员
            checkboxList3:[], //选中的人员
            // 添加社区人员列表全选
            checkAll:false,


            // 社区人员列表弹框
            dialogcyperson:false,
            // 社区人员列表弹框loading
            cypersonloading:false,

            // 添加社区成员弹框
            dialogaddCyperson:false,
            // 添加社区成员弹框人员搜索框
            searchTN:'',


            organizations: [],
            organList: [],
            checkOrg: "",
            checkArea: "",
            currentPage: 1,
            pageSize: 10,
            total: 0,
            add_organ_dialog: false,
            add_organ_dialog2: false,
            enable_organ_dialog: false,
            dialogAction: "",
            useDate: "",
            orgName: "",
            randomCode: "",
            randomCode2: "",
            orgDetail: "",
            regionC: 'cn',
            uLogin: "1", // 登录状态 (1 或 2)
            radio: "1",
            regionCList: [
                { id: 1, name: 'hk' },
                { id: 2, name: 'cn' },
                { id: 3, name: 'com' }
            ], //区域列表
            form: {
                organ: ""
            },
            organ: {},
            unShowJurUser: ['0abcb118-9110-11eb-80ad-005056b86db5']
        }
    },
    computed: {
        ...mapGetters(['userid']),
        enableDiaTitle() {
            return this.dialogAction === 'enable' ? '启用组织' : '设置使用期限'
        }
    },
    // created() {
    //     this.formatDate();

    // },
    methods: {
        addType(){
			this.editCyInfo.typeL.push({
				id: Date.now(),
				name: '',
				eit: 0,
				children: []
			})
		},
		Deltype(ind){
			this.editCyInfo.typeL.splice(ind,1)
		},
		Deltag(index,ind){
			this.editCyInfo.typeL[index].children.splice(ind,1)
		},
		Addtag(index){
			this.editCyInfo.typeL[index].children.push({
				id: Date.now(),
				name: '',
				eit:0,
			})
		},
        // 表头的背景色
        headerCellStyle() {
            return { backgroundColor: "#f1f1f1" };
        },
        changeOrg() {
            this.currentPage = 1;
            this.getOrgan();
        },
        changeArea() {
            this.currentPage = 1;
            this.getOrgan();
        },
        getOrgan() {
            let params = [
                {
                    functionName: "getOrgan",
                    org: this.checkOrg,
                    area: this.checkArea,
                    page: this.currentPage,
                    num: this.pageSize,
                }
            ];
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then((res) => {
                    console.log("返回的数据为：", res.data);  // 检查返回的数据
                    if (res.data && Array.isArray(res.data[0])) {
                        // 使用 map() 提取所有组织名称
                        this.organizations = res.data[0]
                        this.total = res.data[0].length ? res.data[0][0].num : 0;
                        
                        console.log(this.organizations);

                    }

                })
                .catch((err) => {
                    this.$message.error("查询失败");
                    console.error("请求失败，错误信息：", err);
                });
        },
        ajax_org() {
            const params = [API_CONFIG.ajax_org]; // 使用配置中的接口参数
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then((res) => {
                    // console.log("返回的数据为：", res.data);  // 检查返回的数据
                    if (res.data && Array.isArray(res.data[0])) {
                        // 使用 map() 提取所有组织名称
                        this.organList = res.data[0].map((item) => ({
                            name: item.name,
                            id: item.id,
                        }));
                    }
                    // console.log("返回的结果为：",this.organizations);
                })
                .catch((err) => {
                    this.$message.error("查询失败");
                    console.error("请求失败，错误信息：", err);
                });
        },
        // 页码扩展按钮
        handlePageChange(page) {
            this.currentPage = page;
            this.getOrgan();
        },
        //新增学校关闭
        close_add_organ() {
            this.regionC = 'cn'
            this.add_organ_dialog = false;
        },
        //修改学校关闭
        close_add_organ2() {
            this.orgName = "";
            this.randomCode = "";
            this.randomCode2 = "";
            this.orgDetail = "";
            this.regionC = 'cn'
            this.add_organ_dialog2 = false;
        },
        close_enable_organ() {
            this.enable_organ_dialog = false;
            this.useDate = "";
        },
        //新增组织
        ajax_add_org() {
            // 获取弹窗中的输入内容
            let orgName = this.orgName; // 组织名称
            let randomCode = this.randomCode || ""; // 随机码（可为空）
            let randomCode2 = this.randomCode2 || ""; // 随机码（可为空）
            let uLogin = this.radio; // 获取复选框选中的值（1 或 2）
			if (randomCode2 && randomCode2.length && randomCode2.length != 4) return this.$message.error("随机码须4位数");

            // 验证组织名称不能为空
            if (!orgName) {
                this.$message.error("组织名称不能为空");
                return;
            }

            // 构造请求参数
            let params = [
                {
                    functionName: API_CONFIG.ajax_add_orgN.functionName, // 调用存储过程的名称
                    u_name: orgName, // 组织名称
                    u_create: this.userid, // u_create 固定为0
                    u_code: randomCode, // 随机码（可以为空）
                    u_code2: randomCode2, // 随机码（可以为空）
                    u_detail: this.orgDetail, // 描述
                    u_regionC: this.regionC,
                    u_login: uLogin, // 登录状态
                },
            ];

            // 发起请求
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then(async (res) => {
                    console.log(res.data);
                    // 检查返回的结果
                    if (res.data && res.data[0] && res.data[0][0]) {
                        if (res.data[0][0].name === 1) {
                            this.$message({
                                type: "error",
                                message: "该组织已存在，请重新选择!",
                            });
                            return;
                        } else {
                            this.$message({
                                type: "success",
                                message: "添加成功!",
                            });
                            await addOp({
                                uid: this.userid,
                                cid: "",
                                type: "user_op",
                                content: `添加了组织 ${orgName}`,
                            });
                        }
                    } else {
                        this.$message.error("插入失败，未返回有效结果");
                    }
                    // 刷新组织列表
                    this.getOrgan();
                    //关闭弹窗
                    this.add_organ_dialog = false;
                    // 清空输入框、下拉菜单选择和单选框
                    this.orgName = ""; // 清空学校名称
                    this.orgDetail = ""; // 清空学校描述
                    this.regionC = 'cn'
                    this.randomCode = ""; // 清空地区选择
                    this.randomCode2 = ""; // 清空地区选择
                    this.uLogin = "1"; // 清空学校类型选择
                })
                .catch((err) => {
                    this.$message.error("插入失败");
                    console.error("请求失败，错误信息：", err);
                });
        },

        update(row) {
            this.add_organ_dialog2 = true;
            this.nid = row.id;
            this.orgName = row.name;
            this.randomCode = row.code;
            this.randomCode2 = row.code2;
            this.regionC = row.area;
            this.orgDetail = row.detail;
            console.log(row);
        },
        updateOrgan() {
            if (this.randomCode2 &&this.randomCode2.length && this.randomCode2.length != 4) return this.$message.error("随机码须4位数");
            let params = [
                {
                    functionName: "updateOrgan2N",
                    id: this.nid,
                    name: this.orgName,
                    code: this.randomCode || '',
                    code2: this.randomCode2 || '',
                    detail: this.orgDetail || '',
                    area: this.regionC
                }
            ];
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then(async (res) => {
                    console.log("👉", res.data);
                    this.add_organ_dialog2 = false;
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.getOrgan();
                     // 清空输入框、下拉菜单选择和单选框
                    this.orgName = ""; // 清空学校名称
                    this.orgDetail = ""; // 清空学校描述
                    this.regionC = 'cn'
                    this.randomCode = ""; // 清空地区选择
                    this.randomCode2 = ""; // 清空地区选择
                    this.uLogin = "1"; // 清空学校类型选择
                    await addOp({
                        uid: this.userid,
                        cid: "",
                        type: "user_op",
                        content: `修改了组织 ${this.orgName} ${this.nid}`,
                    });
                })
                .catch((err) => {
                    this.$message.error("修改失败");
                    console.log(err);
                });
        },
        formatDate() {
            // 使用示例
            const today = new Date(); // 获取当前日期
            const year = today.getFullYear(); // 获取年份
            const month = String(today.getMonth() + 1).padStart(2, '0'); // 获取月份，注意月份从0开始，所以要加1，并确保是两位数
            const day = String(today.getDate()).padStart(2, '0'); // 获取日期，并确保是两位数

            this.useDate = `${year}-${month}-${day}`; // 返回格式化后的日期字符串
        },
        enable(row, action) {
            if (row.isLogin === '2') {
                this.enable_organ_dialog = true;
                this.nid = row.id;
                this.dialogAction = action;
                this.formatDate();
                console.log(row);
            }
            else {
                this.disableOrgan(row);
            }
        },
        open_enable_organ(row) {
            this.enable_organ_dialog = true;
            this.nid = row.id;
            this.dialogAction = 'useDate';
            if (row.isLogin === '1' || row.isLogin === 'null' || row.isLogin === '') {
                this.formatDate();
            } else {
                this.useDate = row.isLogin;
            }
        },
        enable_organ() {
            let params = [
                {
                    functionName: "enableOrgan",
                    id: this.nid,
                    date: this.useDate
                }
            ];
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then(async (res) => {
                    console.log("👉", res.data);
                    this.enable_organ_dialog = false;
                    this.useDate = "";
                    if (this.dialogAction === 'enable') {
                        this.$message({
                            message: '启用成功',
                            type: 'success'
                        });
                    } else if (this.dialogAction === 'useDate') {
                        this.$message({
                            message: '设置成功',
                            type: 'success'
                        });
                    }
                    // this.formatDate();
                    this.getOrgan();
                    console.log(11111);

                    await addOp({
                        uid: this.userid,
                        cid: "",
                        type: "user_op",
                        content: `启用了组织 ${this.orgName} ${this.nid}`,
                    });
                })
                .catch((err) => {
                    this.$message.error("启用失败");
                    console.log(err);
                });
        },
        disableOrgan(row) {
            this.nid = row.id;
            let params = [
                {
                    functionName: "disableOrgan",
                    id: this.nid
                }
            ];
            this.$confirm("确定禁用此组织记录吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$ajax
                        .post(API_CONFIG.baseUrl, params)
                        .then(async (res) => {
                            console.log("👉", res.data);
                            this.$message({
                                message: '禁用成功',
                                type: 'success'
                            });
                            this.getOrgan();
                            await addOp({
                                uid: this.userid,
                                cid: "",
                                type: "user_op",
                                content: `禁用了组织 ${row.name} ${row.id}`,
                            });
                        })
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        delete_organ(row) {
            this.nid = row.id;

            let params = [
                {
                    functionName: "deleteOrgan",
                    id: this.nid
                }
            ];
            this.$confirm("确定删除此组织记录吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$ajax
                        .post(API_CONFIG.baseUrl, params)
                        .then(async (res) => {
                            console.log("👉", res.data);
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getOrgan();
                            await addOp({
                                uid: this.userid,
                                cid: "",
                                type: "user_op",
                                content: `删除了组织 ${row.name} ${row.id}`,
                            });
                        })
                })
                .catch((err) => {
                    this.$message.error("删除失败");
                    console.log(err);
                });
        },
        async getUserId(oid, org) {
            let params = [
                {
                    functionName: "select_Suffix", // 调用存储过程的名称
                    org: org, //组织id
                    oid: oid, //学校id
                },
            ];

            try {
                const res = await this.$ajax.post(API_CONFIG.baseUrl, params);
                console.log('getSuffix', res);
                let data = res.data[0];
                let orgData = res.data[1];
                let ap = data.length > 0 ? data[0].userid : orgData.length > 0 ? orgData[0].userid : "";
                return ap
            } catch (err) {
                console.error("请求失败，错误信息：", err);
            }
        },
        async toPage(row) {
            const oid = "";
            const org = row.id;
            await addOp({
                uid: this.userid,
                cid: "",
                type: "user_op",
                content: `点击了批量添加 ${row.name}${row.id}`,
            });
            let userid = await this.getUserId(oid, org);
            const url = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/?#/teacher?userid=${userid ? userid : this.userid}&oid=${oid}&org=${org}`;
            window.open(url, '_blank');
        },
        permissionSetting(data) {
            this.$refs.permissionSettingDialogRef.open(data, "org");
        },
        // 打开添加社区弹框，
        addcommunityL(val){
            console.log('val',val);
            this.cyInfo = val
            this.getCy()
            this.dialogcommunity = true
        },
        // 打开添加社区获取已添加的社区列表
        getCy(){
            this.cyloading = true;
            let params = {
				oid: this.cyInfo.id,
				n: '', //预留搜索框
				page: 1,
				num: 10000,
			};
			getcylist(params)
				.then(async (res) => {
					console.log(res);
                    let data = res.data[0]
					data.forEach(e => {

						if (e.evatime) {
							e.evatime = JSON.parse(e.evatime)
							e.evatime2 = e.evatime.map(dateStr => this.formatDateCy(dateStr)).join('——')
                        }
						e.typeL = e.typeL ? JSON.parse(e.typeL) : '';
					});
                    this.cytableData = data
                    
                    this.cyloading = false;
				})
				.catch((error) => {
                    this.cyloading = false;
					console.error("请求失败，错误信息：", error);
				});
        },
        formatDateCy(dateStr, format = 'YYYY-MM-DD HH:mm:ss') {
            const date = new Date(dateStr);
            
            const pad = (num) => num.toString().padStart(2, '0');
            
            const year = date.getFullYear();
            const month = pad(date.getMonth() + 1);
            const day = pad(date.getDate());
            const hours = pad(date.getHours());
            const minutes = pad(date.getMinutes());
            const seconds = pad(date.getSeconds());
            
            return format
                .replace('YYYY', year)
                .replace('MM', month)
                .replace('DD', day)
                .replace('HH', hours)
                .replace('mm', minutes)
                .replace('ss', seconds);
        },
        // 禁用启用社区
        editOpen(val){
            this.cyloading = true
            let open = val.isopen ? '0' : '1'
            let params = {
                idL: val.id,
                op: open
            };
            console.log('params',params);
            
            updateCyOP(params)
              .then(async (response) => {
                    if (response) {
                    await addOp({
                        uid: this.userid,
                        cid: "",
                        type: "user_op",
                        content: `${open ? '禁用' : '启用'}了${val.name}社区`,
                    });
                    this.$message({
                        type: "success",
                        message: "修改成功",
                    });
                    this.cyloading = false

                    this.getCy()
                }
              })
              .catch((error) => {
                    this.cyloading = false

                console.error("请求失败，错误信息：", error);
              });

        },
        // 点击添加社区 0 是添加社区 1是修改社区信息
        editCy(val,row){
            console.log('row',row);
            this.isedit = val

            if (val == 1) {
				let kol = JSON.parse(JSON.stringify(row))
				if (kol && !kol.typeL) {
					kol.typeL = []
				}
                this.editCyInfo = kol
            }
            this.dialogcyADD = true
        },
        // 添加组织社区 
        AddCy(){
            if (!this.editCyInfo.name) return this.$message.error('请添加名称')
            let params = {
                uid:this.userid,
                nam: this.editCyInfo.name,
                oid:this.cyInfo.id,
                ban: this.editCyInfo.banner,
                eva: this.editCyInfo.evatime ? JSON.stringify(this.editCyInfo.evatime) : '',
                typ: (this.editCyInfo.typeL && this.editCyInfo.typeL.length) ? JSON.stringify(this.editCyInfo.typeL) : '',
            };
            addCommunity(params)
              .then(async (response) => {
                    if (response) {
                    console.log('response',response);
                    
                    await addOp({
                        uid: this.userid,
                        cid: "",
                        type: "user_op",
                        content: `添加了${this.editCyInfo.name}社区`,
                    });
                    this.$message({
                        type: "success",
                        message: "添加成功",
                    });
                    this.dialogcyADD = false;
                    this.getCy()
                    this.editCyInfo = {name:'',banner:'',evatime:'',typeL:[]};
                }
              })
              .catch((error) => {
                console.error("请求失败，错误信息：", error);
              });
        },
        // 修改社区信息
        updateCy(){
            if (!this.editCyInfo.name) return this.$message.error('请添加名称')

            let params = {
                idL:this.editCyInfo.id,
                nam: this.editCyInfo.name,
                ban: this.editCyInfo.banner,
                eva: this.editCyInfo.evatime ? JSON.stringify(this.editCyInfo.evatime) : '',
                typ: (this.editCyInfo.typeL && this.editCyInfo.typeL.length) ? JSON.stringify(this.editCyInfo.typeL) : '',
            };
            console.log('params',params);
            
            updateCommunity(params)
              .then(async (response) => {
                    if (response) {
                    console.log('response',response);
                    
                    await addOp({
                        uid: this.userid,
                        cid: "",
                        type: "user_op",
                        content: `修改了${this.editCyInfo.name}社区`,
                    });
                    this.$message({
                        type: "success",
                        message: "修改成功",
                    });
                    this.dialogcyADD = false;
                    this.getCy()
                    this.editCyInfo = {name:'',banner:'',evatime:'',typeL:[]};
                }
              })
              .catch((error) => {
                console.error("请求失败，错误信息：", error);
              });
        },
        // 删除社区 
        delete_Cy(val){
            this.$confirm("确定删除吗?", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
            .then(() => {
                let params = {
                    idL:val.id
                };
                console.log('params',params);
                
                delCommunity(params)
                .then(async (response) => {
                        if (response) {
                        console.log('response',response);
                        
                        await addOp({
                            uid: this.userid,
                            cid: "",
                            type: "user_op",
                            content: `删除了${val.name}社区`,
                        });
                        this.$message({
                            type: "success",
                            message: "删除成功",
                        });
                        this.getCy()
                    }
                })
            })
            .catch(() => {});
        },
        async cyImgAdd(){
			let _url = await this.uploadFile("image/*");
            this.editCyInfo.banner = _url
        },
		// 清除照片
		delImg(){
			this.editCyInfo.banner = ''
		},
        // 全选 
        handleCheckAllChange2(val){
            this.checkboxList3 = val ? this.teacherJuri.map(e=>e.userid) : [];
            this.checkAll = val
            // console.log('this.checkboxList3',this.checkboxList3);
        },
        // 单选 
        handleCheckedCitiesChange(value){
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.teacherJuri.length;
            // console.log('this.checkboxList3',this.checkboxList3);

        },
        // 添加社区人员 
        addcyperson(){
            console.log('ok');
            let params = {
                id:this.editCyInfo.id,
                tea:this.checkboxList3.join(','),
            };
            console.log('params',params);
            
            updateCommunityperson(params)
              .then(async (response) => {
                    if (response) {
                    console.log('response',response);
                    
                    await addOp({
                        uid: this.userid,
                        cid: "",
                        type: "user_op",
                        content: `修改了${this.editCyInfo.name}社区人员`,
                    });
                    this.$message({
                        type: "success",
                        message: "修改成功",
                    });
                    this.lookCy(this.editCyInfo)
                    this.dialogaddCyperson = false;
                }
              })
              .catch((error) => {
                console.error("请求失败，错误信息：", error);
              });
        },
        // 移出社区人员 
        removeCyperson(val){
            console.log(val);
            this.$confirm("确定移出吗?", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
            .then(() => {

                let person = this.cypersontableData.filter(e=> e.userid != val.userid).map(e=>e.userid)

                console.log('person',person);
                
                let params = {
                    id:this.editCyInfo.id,
                    tea: person.join(','),
                };
                console.log('params',params);
                
                updateCommunityperson(params)
                .then(async (response) => {
                        if (response) {
                        console.log('response',response);
                        
                        await addOp({
                            uid: this.userid,
                            cid: "",
                            type: "user_op",
                            content: `修改了${this.editCyInfo.name}社区${val.userid}人员`,
                        });
                        this.$message({
                            type: "success",
                            message: "移出成功",
                        });
                        this.dialogaddCyperson = false;
                        this.lookCy(this.editCyInfo)
                    }
                })
            })
            .catch(() => {});
        },
        // 查看社区人员 
        lookCy(val){
            this.editCyInfo = val;
            this.dialogcyperson = true;
            this.cypersonloading = true;
            
            let params = {
                id: val.id,
            };
            
			getcypersonlist(params)
				.then(async (res) => {
					console.log(res);
                    this.cypersonloading = false;
                    this.cypersontableData = res.data[0]
				})
				.catch((error) => {
                    this.cypersonloading = false;
					console.error("请求失败，错误信息：", error);
				});
        },
        // 添加社区人员获取人员列表
        getTeacher() {
            let params = {
                oid: this.cyInfo.id,
                inp: this.searchTN,
                page: 1,
                num: 10
            };
            
			getAddcyPersonlist(params)
				.then(async (res) => {
					console.log(res);

                    this.teacherJuri = res.data[0];
                    this.checkboxList3 = this.cypersontableData.map(e=> e.userid)
                    this.dialogaddCyperson = true
                  
				})
				.catch((error) => {
					console.error("请求失败，错误信息：", error);
				});
        },
        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();
            });
        },
        handleClose(done){
            done();
        },
        handleClose2(){
            this.editCyInfo = ''
            this.editCyInfo = {name:'',banner:'',evatime:'',typeL:[]};
            this.dialogcyADD=false;
            this.dialogcyperson = false
        }

    },
    mounted() {
        this.getOrgan();
        this.ajax_org();
    }
}
</script>
<style scoped>
.list_container {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.tableBox {
    margin: 10px 0;
}

.operate {
    display: flex;
    gap: 5px;
}

/* 新增组织的内容容器 */
.el_dialog_org_content {
    color: #606266;
    font-size: 14px;
    height: 120px;
}

.el-form-item {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    /* border: 1px solid black; */
}

.el-form-item__label {
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    margin-left: 20px;
    width: 70px;
}

.el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
}

.table>>>.el-dialog__header {
    padding: 15px 20px;
    background: #454545;
}

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

.operate button {
    background: none;
    border: none;
    cursor: pointer;
    color: #308fff;
}
.cyConTit{
    display: flex;
    justify-content: space-between;
}
.addNewPP >>> .el-dialog__body {
  padding: 5px 20px;
}

.addNewPP >>> .el-dialog {
  margin-top: 5vh !important;
}
.customWidth >>> .el-dialog {
  min-width: 500px !important;
}
.people {
  border: 1px solid rgb(229 229 229);
  /* height: 495px; */
  height: 350px;
  border-radius: 5px;
  width: 100%;
  overflow: auto;
}
.people_top {
  display: flex;
  width: 100%;
  /* justify-content: space-between; */
  /* align-items: center; */
  flex-direction: column;
  padding: 10px 10px 0;
  box-sizing: border-box;
}
.people_top_right {
  height: 40px;
  margin-bottom: 10px;
}
.people_search {
  display: flex;
  position: relative;
}

.people_search >>> .el-input__inner {
  /* height: 25px; */
  width: 100%;
}
.search_img {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.search_img > img {
  width: 100%;
  height: 100%;
}
.people_name {
  display: flex;
  justify-content: flex-start;
  padding: 20px 10px;
  flex-direction: column;
  flex-wrap: wrap;
}
.people_name >>> .el-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.people_name >>> .el-checkbox__label {
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100%);
}
.t_j_box{
    display: flex;
    justify-content: space-between;
}
.t_j_box div{
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cha{
	position: absolute;top: 0;right: 5px;
	cursor: pointer;
}
 .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .tagL{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
  }
  .tagL >>> .el-input__inner{
    height: 30px;
    line-height: 30px;
    width: 120px;
}
  .tagL span{
	background: aqua;
    padding: 5px 3px;
    border-radius: 5px;
	flex-shrink: 0;
  }
  .btn{
	cursor: pointer;
    display: flex;
    align-items: center;
  }
  .bigtype{
    display: flex;
    align-items: center;
    gap: 10px;
  }
.bigtype >>> .el-input__inner{
    height: 30px;
    line-height: 30px;
    width: 120px;
}
.typeArea{
    border: 1px #ccc solid;padding: 5px;border-radius: 10px;
}
.alltype{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
</style>