机构管理

src/App.vue

@@ -6,6 +6,7 @@
 
 <script>
 import { getLogin } from "@/api/ajax";
+import { getToken } from '@/utils/auth'
 export default {
   name: "App",
   data() {
@@ -17,33 +18,93 @@ export default {
   },
   methods:{
     async fn() {
-        let provinceCityList = []
-        await getLogin('/OrgServer/DictManager/GetAllProvinceCityList', {})
-            .then((res) => {
-                if (res.status === 1) {
-                    res.province_list.forEach(item => {
-                        let obj = {
-                            label: item.name,
-                            value: item.id,
-                            children: []
-                        }
-                        item.city_list.forEach(items=>{
-                            let objs = {
-                                label: items.name,
-                                value: items.id,
-                                leaf: true
+        let userInfor = getToken();
+        if (userInfor) {
+            let MethodName = "/OrgServer/DictManager/GetStudyPhaseList";
+            let typeListAll = [{
+                study_phase: -1,
+                study_phase_name: '全部'
+            }]
+            let typeList = []
+            await getLogin(MethodName, {})
+                .then((res) => {
+                    if (res.status === 1) {
+                        typeListAll = typeListAll.concat(res.study_phase_list)
+                        typeList = res.study_phase_list
+                    }
+                })
+                .catch(() => {
+
+                });
+            this.$store.commit('setStudyTypeAll',typeListAll)   
+            this.$store.commit('setStudyType',typeList)
+            let MethodNames = "/OrgServer/DictManager/GetOrgTypeList";
+            let typeListAlls = [{
+                type: -1,
+                type_name: '全部'
+            }]
+            let typeLists = []
+            await getLogin(MethodNames, {})
+                .then((res) => {
+                    if (res.status === 1) {
+                        typeListAlls = typeListAlls.concat(res.type_list)
+                        typeLists = res.type_list
+                    }
+                })
+                .catch(() => {
+
+                });
+            this.$store.commit('setOrgTypeAll',typeListAlls)   
+            this.$store.commit('setOrgType',typeLists)
+            let provinceCityListAll = [{
+                label: '全部',
+                value: '0',
+                leaf: true
+            }]
+            let provinceCityList = []
+            await getLogin('/OrgServer/DictManager/GetAllProvinceCityList', {})
+                .then((res) => {
+                    if (res.status === 1) {
+                        res.province_list.forEach(item => {
+                            let obj = {
+                                label: item.name,
+                                value: item.id,
+                                children: []
                             }
-                            obj.children.push(objs)
-                        })
-                        provinceCityList.push(obj)
-                    });
+                            item.city_list.forEach(items=>{
+                                let objs = {
+                                    label: items.name,
+                                    value: items.id,
+                                    leaf: true
+                                }
+                                obj.children.push(objs)
+                            })
+                            provinceCityList.push(obj)
+                            provinceCityListAll.push(obj)
+                        });
+                    }
+                })
+                .catch(() => {
+
+                });
+            this.$store.commit('setProviceCity',provinceCityList)
+            this.$store.commit('setProviceCityAll',provinceCityListAll)
+            let searchStatusList = [{
+                status:-1,
+                status_name:'全部'
+            }]
+            await getLogin('/OrgServer/DictManager/GetSysUserStatusList', {})
+            .then((res) => {
+                if(res.status===1){
+                    searchStatusList = searchStatusList.concat(res.status_list)
                 }
             })
             .catch(() => {
-
+                this.loading = false
             });
-            this.$store.commit('setProviceCity',provinceCityList)
-    }
+            this.$store.commit('setSearchStatusList',searchStatusList)
+        }
+    } 
   },
   mounted(){
   },

src/components/Breadcrumb.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-breadcrumb separator="/">
+  <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index" :class="[index===breadcrumbList.length-1?'breadcrumb-item-last':index!==0&&!item.notLink?'breadcrumb-item-pointer':'breadcrumb-item']">
+    <svg-icon :icon-class="item.icon" v-if="item.icon"></svg-icon>
+    <span v-else @click="handleClickLink(item,index)">{{item.text}}</span>
+  </el-breadcrumb-item>
+</el-breadcrumb>
+</template>
+
+<script>
+export default {
+  components: {},
+  name: "breadcrumb",
+  props: ["breadcrumbList"],
+  data() {
+    return {
+      
+    };
+  },
+  watch: {},
+  computed: {
+  },
+  methods: {
+    // 点击面包屑 跳转
+    handleClickLink(item,index){
+        if(index!==0&&index!==this.breadcrumbList.length-1&&!item.notLink){
+            // if(!item.url){
+                this.$router.go(index-(this.breadcrumbList.length-1))
+            // }
+        }
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/Header.vue

@@ -51,6 +51,7 @@
         </span>
         <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command='personal'>个人中心</el-dropdown-item>
+            <el-dropdown-item command='orgManage' v-if="userMessage.is_org_manager==='true'">机构管理</el-dropdown-item>
             <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -152,7 +153,8 @@ export default {
             path: '/'+link,
             query: {
                 headerConfig: encodeURIComponent(url),
-                type:encodeURIComponent(type)
+                type:encodeURIComponent(type),
+                id:link==='orgManage'?this.userMessage.org_id:''
             },
         }); 
     },
@@ -161,6 +163,8 @@ export default {
             this.handleLink('peraonal','')
         }else if(com==='logout'){
             this.QuitLogin()
+        }else if(com==='orgManage'){
+            this.handleLink('orgManage','')
         }
     },
     // 去登录

src/components/Setting.vue

@@ -0,0 +1,1143 @@
+<template>
+  <div class="setting" v-if="info">
+    <template v-if="!settingFlag">
+        <div class="setting-top">
+            <div class="avator-box">
+            <el-image
+                :src="info.sys_user&&info.sys_user.image_url?info.sys_user.image_url:info.image_url?info.image_url:require('../assets/avatar.png')"
+                fit="cover" style="width:96px;height:96px;">
+            </el-image>
+            <a class="img-crop" v-if="page!=='personCheck'">
+                <upload :datafileList="infoForm.cover_image_list" :filleNumber="99" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" />
+            </a>
+            </div>
+            <div class="center">
+                <div class="info-items">
+                    <label>用户名：</label>
+                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.user_name:info.user_name}}</span>
+                </div>
+                <div class="info-items">
+                    <label>手机号码：</label>
+                    <span>{{(page==='editPerson'||page==='personal')&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}</span>
+                </div>
+                <div class="info-items">
+                    <label>账号ID：</label>
+                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.id:info.id}}</span>
+                </div>
+                <div class="info-items">
+                    <label>邮箱：</label>
+                    <span>{{(page==='editPerson'||page==='personal')&&info.sys_user.email?info.sys_user.email:info.email?info.email:'-'}}</span>
+                </div>
+                <div class="info-items">
+                    <label>{{page==='editPerson'||page==='personal'?'创建时间：':'注册时间：'}}</label>
+                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.create_time:info.register_time}}</span>
+                </div>
+                <div class="info-items" v-if="page==='editOrgPerson'||page==='personCheck'">
+                    <label>机构：</label>
+                    <span>{{info.org_name}}</span>
+                </div>
+            </div>
+        </div>
+        <div class="setting-bottom">
+            <div class="tabs-box">
+                <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">基本信息</a>
+                <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)" v-if="page!=='personCheck'">安全设置</a>
+                <a :class="[tabsIndex===2?'active':'']" @click="handleChangeTabs(2)" v-if="page!=='personCheck'">{{page==='editPerson'||page==='personal'?'我的权限':'权限设置'}}</a>
+            </div>
+            <template v-if="tabsIndex===0">
+                <el-form :model="infoForm" :rules="rules" ref="ruleForm" label-width="150px" class="setting-form">
+                    <el-form-item label="用户名" prop="name">
+                        <el-input v-model="infoForm.name" disabled placeholder="请输入用户名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="真实姓名" prop="realName">
+                        <el-input v-model="infoForm.realName" placeholder="请输入真实姓名" @blur="handleTrim('infoForm','realName')"></el-input>
+                    </el-form-item>
+                    <el-form-item label="性别" prop="sex">
+                        <el-radio-group v-model="infoForm.sex">
+                            <el-radio :label="1">男</el-radio>
+                            <el-radio :label="0">女</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="所在省市" prop="selectedOptions">
+                        <el-cascader
+                            size="medium"
+                            :options="$provinceCityList"
+                            v-model="infoForm.selectedOptions"
+                            @change="handleCity">
+                        </el-cascader>
+                    </el-form-item>
+                    <el-form-item label="备注" prop="desc">
+                        <el-input type="textarea" v-model="infoForm.desc" placeholder="请输入备注" maxlength="100" :rows="4" show-word-limit @blur="handleTrim('infoForm','desc')"></el-input>
+                    </el-form-item>
+                    <el-form-item v-if="page!=='personCheck'">
+                        <el-button type="primary" @click="onSubmit('ruleForm')" size="small" :loading="loading">保存</el-button>
+                        <el-button @click="onCancel('ruleForm')" size="small">取消</el-button>
+                    </el-form-item>
+                    <el-form-item v-else>
+                        <el-button type="primary" @click="handleAudit('up')" size="small" :loading="loading">通过</el-button>
+                        <el-button @click="handleAudit('down')" size="small">拒绝</el-button>
+                    </el-form-item>
+                </el-form>
+            </template>
+            <template v-if="tabsIndex===1">
+                <div class="safe-items">
+                    <label>登录密码</label>
+                    <div class="safe-items-right">
+                        <p class="hasContent">
+                            已设置。密码至少6位字符，支持数字和字母，且必须同时包含数字和大小写字母。
+                        </p>
+                        <!-- <p v-else class="noContent">
+                        您暂未设置密码，密码可以有效的保护账号的安全。 
+                        </p> -->
+                        <a @click="handleSetting('passwordFlag')">{{'修改'}}</a>
+                    </div>
+                </div>
+                <div class="safe-items">
+                    <label>绑定手机</label>
+                    <div class="safe-items-right">
+                        <p v-if="info.phone||info.sys_user&&info.sys_user.phone" class="hasContent">
+                            已绑定： {{(page==='editPerson'||page==='personal')&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}
+                        </p>
+                        <p v-else class="noContent">
+                        您暂未绑定手机，绑定手机可以有效的保护账号的安全。 
+                        </p>
+                        <a @click="handleSetting('phoneFlag')">{{info.phone||info.sys_user&&info.sys_user.phone?'修改':'设置'}}</a>
+                    </div>
+                </div>
+                <div class="safe-items">
+                    <label>绑定邮箱</label>
+                    <div class="safe-items-right">
+                        <p v-if="info.email||info.sys_user&&info.sys_user.email" class="hasContent">
+                            已绑定： {{info.email||info.sys_user.email}}
+                        </p>
+                        <p v-else class="noContent">
+                        您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
+                        </p>
+                        <a @click="handleSetting('emailFlag')">{{info.email||info.sys_user&&info.sys_user.email?'修改':'设置'}}</a>
+                    </div>
+                </div>
+            </template>
+            <template v-if="tabsIndex===2&&(page==='editPerson'||page==='personal')">
+                <table class="step-table">
+                        <tr>
+                            <td rowspan="2" class="step-table-header">管理权限</td>
+                            <td>系统用户</td>
+                            <td>机构管理</td>
+                        </tr>
+                        <tr>
+                            <td><el-checkbox v-model="manageAuth" :label="10001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td><el-checkbox v-model="manageAuth" :label="10002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                        </tr>
+                    </table>
+                    <table class="step-table">
+                        <tr>
+                            <td rowspan="2" class="step-table-header">内容权限</td>
+                            <td class="td1">报纸管理</td>
+                            <td class="td1">画刊管理</td>
+                            <td class="td1">专辑管理</td>
+                            <td class="td1">评测管理</td>
+                            <td class="td1">练习册管理</td>
+                            <td class="td1">课程管理</td>
+                            <td class="td1">广告管理</td>
+                        </tr>
+                        <tr>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20003" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20004" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20005" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20006" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20007" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                        </tr>
+                    </table>
+                    <table class="step-table">
+                        <tr>
+                            <td rowspan="2" class="step-table-header">兑换码权限</td>
+                            <td>生成兑换码</td>
+                            <td>查看兑换码使用情况</td>
+                        </tr>
+                        <tr>
+                            <td><el-checkbox v-model="manageAuth" :label="30001"><br/></el-checkbox></td>
+                            <td>
+                                <el-radio-group v-model="codeAuth.viewCode" :disabled="page==='personal'?true:false">
+                                    <el-radio :label="1">全部</el-radio>
+                                    <el-radio :label="0">自己生成的</el-radio>
+                                </el-radio-group>
+                            </td>
+                        </tr>
+                    </table>
+                    <table class="step-table">
+                        <tr>
+                            <td rowspan="2" class="step-table-header">财务权限</td>
+                            <td>查看数据</td>
+                            <td>导出数据</td>
+                            <td>授权地区</td>
+                        </tr>
+                        <tr>
+                            <td><el-checkbox v-model="manageAuth" :label="40001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td><el-checkbox v-model="manageAuth" :label="40002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
+                            <td>
+                                <el-cascader
+                                    :disabled="page==='personal'?true:false"
+                                    class="step-cascader"
+                                    size="medium"
+                                    :props="props"
+                                    collapse-tags
+                                    clearable
+                                    :options="$provinceCityListAll"
+                                    v-model="financeAuth.selectedOptions"
+                                    @change="handleCity">
+                                </el-cascader>
+                            </td>
+                        </tr>
+                    </table>
+                    <template v-if="page==='editPerson'">
+                        <el-button type="primary" @click="onSubmitAuth()" size="small" :loading="loading">保存</el-button>
+                        <el-button @click="onCancelAuth()" size="small">取消</el-button>
+                    </template>
+            </template>
+            <template v-if="tabsIndex===2&&page==='editOrgPerson'">
+                <el-form :model="managerForm" ref="managerForm" label-width="150px" class="setting-form">
+                    <el-form-item label="机构管理员" prop="is_manager">
+                        <el-radio-group v-model="managerForm.is_manager">
+                            <el-radio label="true">是</el-radio>
+                            <el-radio label="false">否</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmitManager('managerForm')" size="small" :loading="loading">保存</el-button>
+                        <el-button @click="onCancel('managerForm')" size="small">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </template>
+        </div>
+    </template>
+    <div class="setting-iframe" v-if="settingFlag&&passwordFlag">
+        <p class="title">
+            <i class="el-icon-arrow-left" @click="handleSetting('passwordFlag')"></i>
+            修改登录密码
+        </p>
+        <el-form :model="passwordForm" :rules="rulesPassword" ref="passwordForm" label-width="100px" class="passwordForm">
+            <!-- <el-form-item label="原始密码" prop="oldPwd">
+                <el-input v-model="passwordForm.oldPwd" :type="oldPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" >
+                    <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('oldPwdFlag')" v-if="oldPwdFlag"></i>
+                    <i slot="suffix" class="show-icon" @click="changeIcon('oldPwdFlag')" v-else>
+                        <svg-icon icon-class="eye-invisible"></svg-icon>
+                    </i>
+                </el-input>
+            </el-form-item> -->
+            <el-form-item label="修改密码" prop="newPwd">
+                <el-input v-model="passwordForm.newPwd" :type="newPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('passwordForm','newPwd')" >
+                    <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('newPwdFlag')" v-if="newPwdFlag"></i>
+                    <i slot="suffix" class="show-icon" @click="changeIcon('newPwdFlag')" v-else>
+                        <svg-icon icon-class="eye-invisible"></svg-icon>
+                    </i>
+                </el-input>
+                <p class="tips">不少于6位，且必须同时包含数字和大小写字母</p>
+            </el-form-item>
+            <el-form-item label="再次输入" prop="confirmPwd">
+                <el-input v-model="passwordForm.confirmPwd" :type="comfirmPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('passwordForm','confirmPwd')" >
+                    <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('comfirmPwdFlag')" v-if="comfirmPwdFlag"></i>
+                    <i slot="suffix" class="show-icon" @click="changeIcon('comfirmPwdFlag')" v-else>
+                        <svg-icon icon-class="eye-invisible"></svg-icon>
+                    </i>
+                </el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmitPassword('passwordForm')" size="small" :loading="loading">保存</el-button>
+                <el-button @click="onCancel('passwordForm')" size="small">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+    <div class="setting-iframe" v-if="settingFlag&&phoneFlag">
+        <p class="title">
+            <i class="el-icon-arrow-left" @click="handleSetting('phoneFlag')"></i>
+            修改绑定手机
+        </p>
+        <el-form :model="phoneForm" :rules="rulesPhone" ref="phoneForm" label-width="100px" class="phoneForm">
+            <el-form-item label="原手机号" prop="oldPhone" v-if="phoneForm.oldPhone">
+                <el-input v-model="phoneForm.oldPhone" autocomplete="off" :disabled="phoneForm.oldPhone?true:false" placeholder="请输入完整手机号" @blur="handleTrim('phoneForm','oldPhone')">
+                    <template slot="prepend">+86</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="新手机号" prop="newPhone">
+                <el-input v-model="phoneForm.newPhone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('phoneForm','newPhone')" >
+                    <template slot="prepend">+86</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmitPhone('phoneForm')" size="small" :loading="loading">保存</el-button>
+                <el-button @click="onCancel('phoneForm')" size="small">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+    <div class="setting-iframe" v-if="settingFlag&&emailFlag">
+        <p class="title">
+            <i class="el-icon-arrow-left" @click="handleSetting('emailFlag')"></i>
+            修改安全邮箱
+        </p>
+        <el-form :model="emailForm" :rules="rulesEmail" ref="emailForm" label-width="100px" class="emailForm">
+            <el-form-item label="原邮箱" prop="email" v-if="emailForm.email">
+                <el-input v-model="emailForm.email" autocomplete="off" :disabled="emailForm.email?true:false" placeholder="请输入邮箱地址" @blur="handleTrim('emailForm','email')">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="新邮箱" prop="newEmail">
+                <el-input v-model="emailForm.newEmail" autocomplete="off" placeholder="请输入邮箱地址" @blur="handleTrim('emailForm','newEmail')" >
+                </el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmitEmail('emailForm')" size="small" :loading="loading">保存</el-button>
+                <el-button @click="onCancel('emailForm')" size="small">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Upload from "./Upload.vue"
+import { getLogin } from "@/api/ajax";
+import { getToken } from '@/utils/auth'
+import { mapState } from 'vuex';
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { Upload },
+  props: ["page","info"],
+  data() {
+    //这里存放数据
+    const validatePass = (rule, value, callback) => {
+        if (value === '') {
+            callback(new Error('请输入密码'));
+        } else {
+            let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,16}$/;
+            let result = reg.test(value);
+            if (result) {
+                callback();
+            } else {
+                callback(new Error('密码必须同时包含数字和大小写字母'));
+            }
+            
+        }
+    };
+    const validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'));
+        } else if (value !== this.passwordForm.newPwd) {
+          callback(new Error('两次输入密码不一致!'));
+        } else {
+          callback();
+        }
+    };
+    const validatePhone = (rule, value, callback) => {
+        if (value === '') {
+            callback(new Error('请输入手机号'));
+        } else {
+            let reg = /^1[3-9]\d{9}$/;
+            let result = reg.test(value);
+            if (result) {
+                callback();
+            } else {
+                callback(new Error('请输入正确的手机号'));
+            }
+        }
+    };
+    const validateEmail = (rule, value, callback) => {
+        if (value === '') {
+            callback(new Error('请输入邮箱地址'));
+        } else {
+            let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
+            let result = reg.test(value);
+            if (result) {
+                callback();
+            } else {
+                callback(new Error('请输入正确的邮箱地址'));
+            }
+        }
+    };
+    const validateProvince = (rule, value, callback) => {
+        if(value===[]){
+            callback(new Error('请选择所在省市'));
+        }else if(value.length===2){
+            if(value[0]===''||value[1]===''){
+                callback(new Error('请选择所在省市'));
+            }else{
+                callback();
+            }
+        }else {
+            callback();
+        }
+    };
+    return {
+        show: false, // 编辑头像flag
+        tabsIndex: 0,
+        infoForm:{
+            cover_image_url: '',
+            cover_image_list: [],
+            cover_image_id: null,
+            name:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.user_name)):JSON.parse(JSON.stringify(this.info.user_name)),
+            realName:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.real_name)):JSON.parse(JSON.stringify(this.info.real_name)),
+            sex:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.sex)):JSON.parse(JSON.stringify(this.info.sex)),
+            selectedOptions: this.page==='editPerson'||this.page==='personal'?[JSON.parse(JSON.stringify(this.info.sys_user.province_id)),JSON.parse(JSON.stringify(this.info.sys_user.city_id))]:[JSON.parse(JSON.stringify(this.info.province_id)),JSON.parse(JSON.stringify(this.info.city_id))],
+            desc:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.memo)):JSON.parse(JSON.stringify(this.info.memo)),
+        },
+        rules: {
+            name: [
+                { required: true, message: '请输入用户名', trigger: 'blur' }
+            ],
+            selectedOptions: [
+                { type: 'array', required: true, validator: validateProvince, trigger: 'change' }
+            ],
+            sex:[
+                { required: true, message: '请选择性别', trigger: 'change' },
+            ],
+        },
+        settingFlag: false, // 修改设置
+        passwordFlag: false, // 修改密码
+        phoneFlag: false, // 修改手机
+        emailFlag: false, // 修改邮箱
+        passwordForm:{
+            newPwd:'', // 新密码
+            confirmPwd:'' // 确认密码
+        },
+        rulesPassword:{
+            newPwd:[
+                { required: true, validator: validatePass, trigger: 'blur' },
+                { min: 6, max: 16, message: '请输入 6-16 位密码，且必须同时包含数字和大小写字母', trigger:'change' },
+            ],
+            confirmPwd:[
+                { required: true, validator: validatePass2, trigger: 'blur' }
+            ]
+        },
+        oldPwdFlag: false, // 查看旧密码
+        newPwdFlag: false, // 查看新密码
+        comfirmPwdFlag: false, // 查看确认密码
+        phoneForm:{
+            oldPhone:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.phone)):JSON.parse(JSON.stringify(this.info.phone)), // 旧手机
+            newPhone:'', // 新手机
+        },
+        rulesPhone:{
+            oldPhone:[
+                { required: true, validator: validatePhone, trigger: 'blur' },
+            ],
+            newPhone:[
+                { required: true, validator: validatePhone, trigger: 'blur' },
+            ]
+        },
+        time: 60, //获取验证码的时间
+        verificationCodeShow: false, //是否已经获取了验证码
+        times: 60, //获取验证码的时间
+        verificationCodesShow: false, //是否已经获取了验证码
+        timee: 60, //获取验证码的时间
+        verificationCodeeShow: false, //是否已经获取了验证码
+        emailForm:{
+            email:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.email)):JSON.parse(JSON.stringify(this.info.email)),
+            newEmail:''
+        },
+        rulesEmail:{
+            email:[
+                { required: true, validator: validateEmail, trigger: 'blur' },
+            ],
+            newEmail:[
+                { required: true, validator: validateEmail, trigger: 'blur' }
+            ]
+        },
+        manageAuth:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.popedom_code_list)):[], // 管理权限
+        codeAuth:{
+            auth:[],
+            viewCode:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.data_scope.discount_code_view_scope)):0
+        }, // 兑换码权限
+        financeAuth:{
+            auth: [],
+            selectedOptions:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.data_scope.finance_popedom_data_scope)):[]
+        }, // 财务权限
+        props: { multiple: true },
+        loading: false,
+        id:this.$route.query.id?this.$route.query.id:'',
+        managerForm:{
+            is_manager: this.page==='editOrgPerson'?JSON.parse(JSON.stringify(this.info.is_manager)):"false"
+        }
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+    ...mapState(['$provinceCityList','$provinceCityListAll']),
+  },
+  //监控data中数据变化
+  watch: {
+
+  },
+  //方法集合
+  methods: {
+    handleAvatarSuccess(fileList,name) {
+        let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Image";
+        if(this.page==='editOrgPerson'){
+            MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Image";
+        }
+        let data = {
+            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
+            image_id: fileList.length>0&&fileList[fileList.length-1].response&&fileList[fileList.length-1].response.file_info_list&&fileList[fileList.length-1].response.file_info_list[0]?fileList[fileList.length-1].response.file_info_list[0].file_id:''
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.$emit("getInfo")
+            }
+        }).catch((res) =>{
+        })
+    },
+    // 切换tabs
+    handleChangeTabs(value){
+        this.tabsIndex = value
+        let breadcrumb = []
+        if(this.page==='editOrgPerson'){
+            breadcrumb = [
+                {
+                    icon:'school-line',
+                    url:'',
+                    text:''
+                },
+                {
+                    icon:'',
+                    url:'',
+                    text:'机构管理'
+                },
+                {
+                    icon:'',
+                    url:'',
+                    text:this.info.org_name
+                },
+                {
+                    icon:'',
+                    url:'',
+                    notLink: true,
+                    text:value===0?'人员信息':value===1?'安全设置':'权限设置'
+                }
+            ]
+            this.$emit("changeBread",breadcrumb)
+        }
+    },
+    // 级联选择器
+    handleCity(value){
+        // console.log(value)
+    },
+    // 提交表单
+    onSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_BaseInfo";
+            if(this.page==='editOrgPerson'){
+                MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_BaseInfo";
+            }
+            let data = {
+                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
+                user_name: this.infoForm.name,
+                real_name: this.infoForm.realName,
+                sex: this.infoForm.sex,
+                city_id: this.infoForm.selectedOptions[1],
+                memo: this.infoForm.desc
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    this.$emit("getInfo")
+                }
+            }).catch((res) =>{
+                this.loading = false
+            })
+          } else {
+            return false;
+          }
+        });
+    },
+    // 取消 恢复到修改前状态
+    onCancel(formName){
+        this.$refs[formName].resetFields();
+    },
+    // 修改设置
+    handleSetting(flag){
+        this.settingFlag = !this.settingFlag
+        this[flag] = !this[flag]
+        let breadcrumb = []
+        if(this.page==='editPerson'){
+            if(this[flag]){
+                breadcrumb = [
+                    {
+                        icon:'contacts-line',
+                        url:'',
+                        text:''
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        text:'系统用户'
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        notLink: true,
+                        text:'安全设置'
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        text:flag==='passwordFlag'?'修改密码':flag==='phoneFlag'?'绑定手机':'安全邮箱'
+                    }
+                ]
+            }else{
+                breadcrumb = [
+                    {
+                        icon:'contacts-line',
+                        url:'',
+                        text:''
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        text:'系统用户'
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        text:'编辑'
+                    }
+                ]
+            }
+            this.$emit("changeBread",breadcrumb)
+        }
+    },
+    changeIcon(flag){
+        this[flag] = !this[flag]
+    },
+    // 修改密码提交表单
+    onSubmitPassword(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Password";
+            if(this.page==='editOrgPerson'){
+                MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Password";
+            }
+            let data = {
+                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
+                password: this.passwordForm.newPwd
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    this.$message.success("修改成功")
+                    this.$emit("getInfo")
+                    this.handleSetting('passwordFlag')
+                }
+            }).catch((res) =>{
+                this.loading = false
+            })
+          } else {
+            return false;
+          }
+        });
+    },
+    // 修改手机提交表单
+    onSubmitPhone(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Phone";
+            if(this.page==='editOrgPerson'){
+                MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Phone";
+            }
+            let data = {
+                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
+                phone: this.phoneForm.newPhone
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    this.$message.success("修改成功")
+                    this.$emit("getInfo")
+                    this.handleSetting('phoneFlag')
+                    this.phoneForm.oldPhone = JSON.parse(JSON.stringify(this.phoneForm.newPhone))
+                    this.phoneForm.newPhone = ''
+                }
+            }).catch((res) =>{
+                this.loading = false
+            })
+          } else {
+            return false;
+          }
+        });
+    },
+    // 修改邮箱
+    onSubmitEmail(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Email";
+            if(this.page==='editOrgPerson'){
+                MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Email";
+            }
+            let data = {
+                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
+                email: this.emailForm.newEmail
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    this.$message.success("修改成功")
+                    this.$emit("getInfo")
+                    this.handleSetting('emailFlag')
+                    this.emailForm.email = JSON.parse(JSON.stringify(this.emailForm.newEmail))
+                    this.emailForm.newEmail = ''
+                }
+            }).catch((res) =>{
+                this.loading = false
+            })
+          } else {
+            return false;
+          }
+        });
+    },
+    // 去掉前后空格
+    handleTrim(form,fild){
+        this[form][fild] = this[form][fild].trim()
+    },
+    // 修改权限
+    onSubmitAuth(){
+        this.loading = true
+        let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Popedom";
+        let finance_popedom_data_scope = {}
+        if(this.financeAuth.selectedOptions.length>0){
+            if(this.financeAuth.selectedOptions[0][0]&&this.financeAuth.selectedOptions[0][0]==='0'){
+                finance_popedom_data_scope.is_all = 'true'
+            }else{
+                finance_popedom_data_scope.is_all = 'false'
+                let province_id_list = []
+                let city_id_list = []
+                this.financeAuth.selectedOptions.forEach(item => {
+                    if(province_id_list.indexOf(item[0])===-1){
+                        province_id_list.push(item[0])
+                    }
+                    city_id_list.push(item[1]?item[1]:'')
+                });
+                finance_popedom_data_scope.province_id_list = province_id_list
+                finance_popedom_data_scope.city_id_list = city_id_list
+            }
+        }
+        let data = {
+            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
+            popedom_code_list: this.manageAuth,
+            data_scope:{
+                discount_code_view_scope:this.codeAuth.viewCode,
+                finance_popedom_data_scope: finance_popedom_data_scope
+            }
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.loading = false
+            if(res.status===1){
+                this.$message.success("修改成功")
+            }
+        }).catch((res) =>{
+            this.loading = false
+        })
+    },
+    // 取消权限
+    onCancelAuth(){
+        this.handleUserAuth()
+        // this.manageAuth = []
+        // this.codeAuth.viewCode = 0
+        // this.financeAuth.selectedOptions = []
+    },
+    // 赋值权限
+    handleUserAuth(){
+        if(this.page==='editPerson'||this.page==='personal'){
+            this.manageAuth = this.info.popedom_code_list?JSON.parse(JSON.stringify(this.info.popedom_code_list)):[]
+            this.codeAuth.viewCode = this.info.data_scope.discount_code_view_scope?JSON.parse(JSON.stringify(this.info.data_scope.discount_code_view_scope)):0
+            if(this.info.data_scope.finance_popedom_data_scope&&this.info.data_scope.finance_popedom_data_scope.is_all==='true'){
+                this.financeAuth.selectedOptions = ['0']
+            }else{
+                let arr = []
+                this.info.data_scope.finance_popedom_data_scope.city_id_list.forEach(item=>{
+                    arr.push([item.substring(0,2),item])
+                })
+                this.financeAuth.selectedOptions = arr
+            }
+        }
+    },
+    // 修改管理员权限
+    onSubmitManager(){
+        this.loading = true
+        let MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Popedom";
+        let data = {
+            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
+            is_manager: this.managerForm.is_manager,
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.loading = false
+            if(res.status===1){
+                this.$message.success("修改成功")
+            }
+        }).catch((res) =>{
+            this.loading = false
+        })
+    },
+    // 通过 拒绝
+    handleAudit(type) {
+      let Mname = "/OrgServer/Manager/PersonManager/AuditPerson";
+      let data = {
+        id_list: [this.id]
+      };
+      if (type==='up') {
+        // 下架状态
+        data.is_pass = "true";
+      } else if (type==='down') {
+        data.is_pass = "false";
+      }
+      getLogin(Mname, data).then(res => {
+        this.$message.success("操作成功");
+        this.$router.go(-1)
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if(this.info){
+        this.handleUserAuth()
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.setting{
+    height: 100%;
+    &-top{
+        margin: 0 0 12px 0;
+        background: #FFFFFF;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 22px 40px;
+        .avator-box{
+            width: 96px;
+            height: 96px;
+            position: relative;
+            .img-crop{
+                position: absolute;
+                // padding: 4px;
+                width: 30px;
+                height: 30px;
+                right: -4px;
+                bottom: -4px;
+                border-radius: 50%;
+                display: block;
+                text-align: center;
+                font-size: 0;
+                border: 2px solid #FFFFFF;
+                background: #F2F3F5 url("../assets/camera.png") center no-repeat;
+                background-size: 12px;
+            }
+            .el-image{
+                border-radius: 50%;
+                overflow: hidden;
+            }
+        }
+        .center{
+            flex: 1;
+            display: flex;
+            flex-flow: wrap;
+            margin-top: 12px;
+            .info-items{
+                margin-bottom: 12px;
+                width: 40%;
+            }
+            label{
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 22px;
+                color: #86909C;
+                width: 156px;
+                text-align: right;
+                display: inline-block;
+                padding-right: 10px;
+            }
+            span{
+                font-size: 14px;
+                line-height: 22px;
+                color: #1D2129;
+            }
+        }
+    }
+    &-bottom{
+        padding: 24px;
+        background: #FFFFFF;
+        border-radius: 4px;
+        min-height: calc(100vh - 270px);
+        .tabs-box{
+            display: flex;
+            padding-bottom: 16px;
+            a{
+                font-size: 14px;
+                line-height: 22px;
+                color: #4E5969;
+                border-radius: 100px;
+                padding: 5px 16px;
+                margin-right: 12px;
+                &:hover{
+                    background: #F2F3F5;
+                }
+                &.active{
+                    background: #F2F3F5;
+                    font-weight: 500;
+                    color: #165DFF;
+                }
+            }
+        }
+        .btn{
+            margin-left: 16px;
+        }
+        .safe-items{
+            display: flex;
+            width: 100%;
+            padding: 30px 20px 13px 20px;
+            label{
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 22px;
+                color: #4E5969;
+            }
+            &-right{
+                border-bottom: 1px solid #E5E6EB;
+                padding-bottom: 20px;
+                flex: 1;
+                margin-left: 16px;
+                display: flex;
+                justify-content: space-between;
+                p{
+                    margin: 0;
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 22px;
+                    color: #4E5969;
+                    &.noContent{
+                        color: #86909C;
+                    }
+                }
+                a{
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 22px;
+                    color: #165DFF;
+                }
+            }
+        }
+    }
+    &-iframe{
+        width: 100%;
+        height: 100%;
+        background: #FFFFFF;
+        padding: 24px;
+        .title{
+            margin: 0;
+            font-weight: 400;
+            font-size: 20px;
+            line-height: 28px;
+            color: #000000;
+            .el-icon-arrow-left{
+                margin-right: 8px;
+                cursor: pointer;
+            }
+        }
+        .passwordForm,.phoneForm,.emailForm{
+            padding-top: 40px;
+            .show-icon{
+                cursor: pointer;
+                color: #4E5969;
+            }
+        }
+        .code-input{
+            width: 268px;
+            .el-input__inner{
+                border-radius: 2px 0 0 2px;
+            }
+        }
+    }
+}
+.step-table{
+    border: 1px solid #E5E6EB;
+    border-collapse: collapse;
+    font-size: 14px;
+    line-height: 22px;
+    color: #1D2129;
+    text-align: center;
+    margin-bottom: 24px;
+    &-header{
+        background: #F7F8FA;
+        width: 120px !important;
+        color: #86909C;
+        font-weight: 500;
+    }
+    td{
+        height: 40px;
+        width: 260px;
+        border: 1px solid #E5E6EB;
+        &.td1{
+            width: 130px;
+        }
+    }
+    .step-cascader{
+        width: 250px;
+        height: 32px;
+        line-height: 32px;
+    }
+}
+.tips{
+    margin: 0;
+    color: #86909C;
+    font-size: 12px;
+    line-height: 20px;
+}
+</style>
+<style lang="scss">
+.setting{
+    .el-input,.el-textarea{
+        width: 360px;
+    }
+    .el-input__inner{
+        height: 32px;
+        color: #1D2129;
+        background: #F2F3F5;
+        border: none;
+    }
+    .el-textarea__inner,.el-input-group__prepend{
+        color: #1D2129;
+        background: #F2F3F5;
+        border: none;
+    }
+    .el-input__count{
+        background: #F2F3F5;
+    }
+    .el-form-item__label{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 32px;
+        color: #4E5969;
+    }
+    .el-form-item__content,.el-input__icon{
+        line-height: 32px;
+        color: #4E5969 !important;
+    }
+    .el-form-item{
+        margin-bottom: 20px;
+    }
+    .el-radio__input.is-checked+.el-radio__label{
+        color: #165DFF;
+    }
+    .el-radio__input.is-checked .el-radio__inner{
+        background: #165DFF;
+        border-color: #165DFF;
+    }
+    .el-button--primary{
+        background: #165DFF;
+        border-color: #165DFF;
+        border-radius: 2px;
+        &:hover{
+            background: #4080FF;
+            border-color: #4080FF;
+        }
+        &:focus{
+            background: #0E42D2;
+            border-color: #0E42D2;
+        }
+    }
+    .el-button--default{
+        background: #F2F3F5;
+        border-radius: 2px;
+        border: none;
+        color: #4E5969;
+        height: 32px;
+        &:hover{
+            background: #E5E6EB;
+        }
+        &:focus{
+            background: #C9CDD4;
+        }
+    }
+    .setting-form{
+        padding-top: 26px;
+    }
+    .code-box{
+        .el-form-item__content{
+            display: flex;
+        }
+    }
+    .code-input{
+        height: 32px;
+        .el-input__inner{
+            border-radius: 4px 0 0 4px;
+        }
+    }
+    .sendCode{
+        border-radius: 0 4px 4px 0;
+        margin-top: 1px;
+        width: 92px;
+    }
+    .el-input-group__prepend{
+        width: 54px;
+        height: 32px;
+        border: none;
+        background: #F2F3F5;
+        border-radius: 2px 0px 0px 2px;
+        line-height: 32px;
+        text-align: center;
+        padding: 0;
+    }
+    .el-input-group--prepend{
+        display: flex;
+        .el-input__inner{
+            margin-left: 8px;
+            flex: 1;
+        }
+    }
+    .step-cascader{
+        .el-input{
+            width: 100% !important;
+        }
+    }
+    .upload{
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        .upload-demo{
+            opacity: 0;
+            width: 100% !important;
+        }
+    }
+}
+</style>

src/icons/svg/school-line.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00065 0.341797L10.5007 3.8418V5.25014H12.834V11.0835H13.4173V12.2501H0.583984V11.0835H1.16732V5.25014H3.50065V3.8418L7.00065 0.341797ZM10.5007 11.0835H11.6673V6.41678H10.5007V11.0835ZM3.50065 6.41678H2.33398V11.0835H3.50065V6.41678ZM4.66732 4.32504V11.0835H6.41732V7.00012H7.58398V11.0835H9.33399V4.32504L7.00065 1.99171L4.66732 4.32504Z" fill="currentColor"/>
+</svg>

src/router/index.js

@@ -134,6 +134,16 @@ export const constantRoutes = [{
         component: () =>
             import ('@/views/reporter/index.vue')
     },
+    {
+        path: '/orgManage',
+        component: () =>
+            import ('@/views/organize_manage/PersonList.vue')
+    },
+    {
+        path: '/editOrgPerson',
+        component: () =>
+            import ('@/views/organize_manage/EditPerson.vue')
+    },
     // 404 page must be placed at the end !!!
     { path: '*', redirect: '/', hidden: true }
 ]

src/store/index.js

@@ -10,11 +10,79 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
     state: {
-        $provinceCityList: []
+        $studyTypeAll: null,
+        $studyType: null,
+        $orgTypeAll: null,
+        $orgType: null,
+        $checkStatusList: [{
+                value: -1,
+                label: '全部'
+            },
+            {
+                value: 0,
+                label: '待审核'
+            },
+            {
+                value: 3,
+                label: '被驳回'
+            },
+            {
+                value: 1,
+                label: '未上架'
+            },
+            {
+                value: 2,
+                label: '已上架'
+            }
+        ],
+        $checkStatusColorList: {
+            0: {
+                text: '待审核',
+                bg: '#C9CDD4',
+                color: ''
+            },
+            3: {
+                text: '被驳回',
+                bg: '#F53F3F',
+                color: '#F53F3F'
+            },
+            1: {
+                text: '未上架',
+                bg: '#165DFF',
+                color: ''
+            },
+            2: {
+                text: '已上架',
+                bg: '#00B42A',
+                color: ''
+            }
+        },
+        file_preview_url: 'https://docpreview.utschool.cn',
+        $provinceCityListAll: [],
+        $provinceCityList: [],
+        $searchStatusList: []
     },
     mutations: {
+        setStudyTypeAll(state, data) {
+            state.$studyTypeAll = data
+        },
+        setStudyType(state, data) {
+            state.$studyType = data
+        },
+        setOrgTypeAll(state, data) {
+            state.$orgTypeAll = data
+        },
+        setOrgType(state, data) {
+            state.$orgType = data
+        },
+        setProviceCityAll(state, data) {
+            state.$provinceCityListAll = data
+        },
         setProviceCity(state, data) {
             state.$provinceCityList = data
+        },
+        setSearchStatusList(state, data) {
+            state.$searchStatusList = data
         }
     },
     modules: {

src/styles/index.scss

@@ -198,4 +198,21 @@ ul {
 .el-dropdown-menu__item:not(.is-disabled):hover {
     color: #165DFF;
     background: #F2F3F5;
+}
+
+.el-button--primary {
+    background: #165DFF;
+    border-color: #165DFF;
+    border-radius: 2px;
+    color: #fff;
+    &:hover {
+        background: #4080FF;
+        border-color: #4080FF;
+        color: #fff;
+    }
+    &:focus {
+        background: #0E42D2;
+        border-color: #0E42D2;
+        color: #fff;
+    }
 }

src/views/organize_manage/BatchImport.vue

@@ -0,0 +1,556 @@
+<template>
+  <div class="batch-box">
+    <div class="batch-box-top tabs">
+        <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">批量上传</a>
+        <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">日志</a>
+    </div>
+    <div class="batch-box-center">
+        <template v-if="tabsIndex===0">
+            <div class="upload-box" v-if="!alreadyFile">
+                <el-upload
+                    class="upload-demo"
+                    :accept="'.xls,.xlsx'"
+                    :limit="1"
+                    :on-progress="uploadVideoProcess"
+                    :before-upload="handlebeforeUpload"
+                    :on-success="handleSuccess"
+                    drag
+                    :action="url"
+                    :show-file-list="false"
+                    multiple>
+                    <div class="el-upload__text">
+                        点击或拖拽文件到此处上传
+                        <span>只有 xlsx, xls 格式文件可以上传，文件大小不得超过 100MB</span>
+                    </div>
+                </el-upload>
+            </div>
+            <template v-else>
+                <div class="file-top">
+                    <div class="file-content">
+                        <svg-icon icon-class="xlsx"></svg-icon>
+                        <div class="file">
+                            <p v-if="fileList[0]&&fileList[0].name">{{fileList[0].name}}</p>
+                            <el-progress v-if="resultData" :percentage="percentage" :show-text="false"></el-progress>
+                            <b v-if="fileList[0]&&fileList[0].fileSize&&!progressFlag&&!uploading&&!resultData">{{fileList[0].fileSize}}</b>
+                            <!-- <div class="file-uploading" v-if="progressFlag">
+                                <span class="progress" v-if="realFileSize">{{'上传文件 '+alreadyUpload+'/'+realFileSize}}</span>
+                                <span>{{percentage}}%</span>
+                            </div> -->
+                            <div class="file-uploading" v-if="resultData">
+                                <span class="progress">{{'导入数据 '+resultData.cur_count+'/'+resultData.total_count}}</span>
+                                <span class="color-green" v-if="resultData.is_finish==='true'">完成</span>
+                                <span class="color-red" v-if="resultData.is_finish==='false'&&resultData.is_end==='true'">网络链接已中断</span>
+                            </div>
+                        </div>
+                    </div>
+                    <i class="el-icon-error" @click="handleErmoveFile"></i>
+                </div>
+                <div class="file-bottom">
+                    <p>批量上传内容与系统中有重复时</p>
+                    <el-radio-group v-model="sameUser" :disabled="uploading||(resultData&&resultData.is_finish==='true')">
+                        <el-radio label="false">跳过</el-radio>
+                        <el-radio label="true">覆盖</el-radio>
+                    </el-radio-group>
+                    <el-checkbox-group v-model="coverUser" :disabled="uploading||(resultData&&resultData.is_finish==='true')">
+                        <el-checkbox label="1">覆盖时忽略密码</el-checkbox>
+                        <el-checkbox label="2">上传完成后自动导出密码文件</el-checkbox>
+                    </el-checkbox-group>
+                </div>
+            </template>
+        </template>
+        <template v-else>
+            <div class="log-box" v-if="resultData">
+                <p>上传文件 {{fileList[0].name}}</p>
+                <p>用时 {{realFormatSecond(uploadTime+resultData.execute_duration)}}</p>
+                <p>成功上传 <span class="color-green">{{resultData.success_count}}</span> 条记录，失败 <span class="color-red">{{resultData.error_count}}</span> 条</p>
+                <div class="border"></div>
+                <p :class="[item.is_success==='true'?'color-green':'color-red']" v-for="(item,index) in execute_log_list" :key="index">
+                    {{item.row_count + ' '+ (item.is_success==='false'?item.error_info:'上传成功')}}
+                </p>
+            </div>
+        </template>
+    </div>
+    <div class="batch-box-bottom">
+        <template v-if="tabsIndex===0">
+            <a class="downLoad" target="_blank" :href="exportUrl">下载模板</a>
+            <div class="btn-box">
+                <el-button @click="closeDialog" size="small">取消</el-button>
+                <el-button type="primary" :key="3" :disabled="!uploadFlag&&!file_id||(resultData&&resultData.is_finish==='true')" v-if="!uploading&&!isStop&&(resultData&&resultData.is_finish==='true'||!resultData)" @click="handleUpload" v-loading="loading"><svg-icon icon-class="upload"></svg-icon>开始上传</el-button>
+                <el-button type="primary" v-if="uploading&&!isStop" v-loading="loading" @click="handleInterruptTask"><svg-icon icon-class="pause-fill"></svg-icon>暂停</el-button>
+                <el-button type="warning" v-if="isStop" v-loading="loading" @click="handleUpload"><i class="el-icon-refresh-right"></i>重试</el-button>
+            </div>
+        </template>
+        <template v-else>
+            <div class="btn-box" style="flex:1">
+                <el-button :key="1" type="primary" :disabled="!(resultData&&resultData.is_finish==='true')" @click="handleExportLog"><svg-icon icon-class="upload"></svg-icon>导出日志</el-button>
+            </div>
+        </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from "../../utils/auth";
+import { getLogin } from "@/api/ajax";
+export default {
+  components: {},
+  name: "batchImport",
+  props: ["exportUrl"],
+  data() {
+    return {
+      tabsIndex: 0,
+      alreadyFile: false, // 上传了需要解析的文件
+      file_id: '',
+      uploadFlag: false, // 是否可以点击开始上传按钮
+      uploading: false, // 上传中
+      isStop: false, // 暂停
+      fileList: [],
+      sameUser: 'false', // 存在相同的用户是否覆盖， true 覆盖，false 跳过。
+      coverUser: [], // 覆盖用户时是否更新用户密码， true 更新，false 不更新。
+      progressFlag:false,
+      percentage:0,
+      alreadyUpload:'', // 已经上传的大小
+      realFileSize: '', // 文件真实大小
+      loading: false,
+      timer: null,
+      resultData: null, // 上传结果数据
+      execute_log_list: [], // 日志列表
+      uploadTime: 0,
+      uploadTimer: null,
+      id:this.$route.query.id?this.$route.query.id:''
+    };
+  },
+  watch: {},
+  computed: {
+    url() {
+      let userInfor = getToken();
+      let access_token = "";
+      if (userInfor) {
+        let user = JSON.parse(getToken());
+        access_token = user.access_token;
+      }
+      return (
+        process.env.VUE_APP_BASE_API +
+        "/FileServer/WebFileUpload?AccessToken=" +
+        access_token +
+        "&SecurityLevel=High"
+      );
+    },
+  },
+  methods: {
+    handleChangeTabs(value){
+        this.tabsIndex = value
+    },
+    closeDialog(){
+        this.$emit("closeDialog")
+    },
+    handlebeforeUpload(file) {
+      if (file.size > 100 * 1024 * 1024) {
+        this.$message.warning('上传文件大小不能超过100M');
+        return false; // 必须返回false
+      }
+      this.alreadyFile = true
+      this.uploadTimer = setInterval(() => {
+        this.uploadTime++    
+      }, 1000);
+    },
+    handleSuccess(response, file, fileList) {
+      if (response.status == 1) {
+        this.progressFlag = false
+        clearInterval(this.uploadTimer);
+        this.file_id = response.file_info_list[0].file_id
+        this.uploadFlag = true
+        this.fileList = fileList
+        this.fileList.forEach((item) => {
+            if (item.size > 1000 * 1000) {
+              if (item.size / 1000 / 1000 / 1000 > 1) {
+                item.fileSize =
+                  (item.size / 1000 / 1000 / 1000).toFixed(2) + "GB";
+              } else {
+                item.fileSize =
+                  (item.size / 1000 / 1000).toFixed(2) + "MB";
+              }
+            } else {
+              item.fileSize = (item.size / 1000).toFixed(2) + "KB";
+            }
+        });
+      } else {
+        this.fileList = [];
+        this.file_id = ''
+        this.uploadFlag = false
+        this.$message.warning(response.msg);
+        this.alreadyFile = false
+        this.progressFlag = false
+        this.percentage = 0
+        this.alreadyUpload = ''
+        this.uploadTime = 0
+        clearInterval(this.uploadTimer);
+      }
+    },
+    handleErmoveFile(){
+        if(this.progressFlag){
+            this.$message.warning('文件还未上传成功，不可删除');
+            return false
+        }
+        this.file_id = ''
+        this.uploadFlag = false
+        this.fileList = []
+        this.alreadyFile = false
+        this.progressFlag = false
+        this.isStop = false
+        this.percentage = 0
+        this.alreadyUpload = ''
+        this.resultData = null
+        this.sameUser = 'false'
+        this.coverUser = []
+        this.uploadTime = 0
+    },
+    uploadVideoProcess(event, file, fileList) {
+        this.fileList = fileList
+        this.progressFlag = true; // 显示进度条
+        this.percentage = parseInt(event.percent); // 动态获取文件上传进度
+        if (file.size > 1000 * 1000) {
+            if (file.size / 1000 / 1000 / 1000 > 1) {
+            this.alreadyUpload =
+                (file.size / 1000 / 1000 / 1000 / 100*this.percentage).toFixed(2) + "GB";
+            this.realFileSize = (file.size / 1000 / 1000 / 1000).toFixed(2) + "GB";
+            } else {
+            this.alreadyUpload =
+                (file.size / 1000 / 1000 / 100*this.percentage).toFixed(2) + "MB";
+            this.realFileSize =
+                (file.size / 1000 / 1000).toFixed(2) + "MB";
+            }
+        } else {
+            this.alreadyUpload = (file.size / 1000 / 100*this.percentage).toFixed(2) + "KB";
+            this.realFileSize = (file.size / 1000).toFixed(2) + "KB";
+        }
+        if (this.percentage >= 100) {
+            this.percentage = 100
+        }
+    },
+    // 开始上传
+    handleUpload(){
+        if(this.resultData&&this.resultData.is_finish==='true'){
+            this.$message.warning('已经解析过该文件');
+            return false
+        }
+        if(!this.file_id){
+            this.$message.warning('请先上传文件');
+            return false
+        }
+        this.percentage = 0
+        this.loading = true
+        this.progressFlag = false
+        this.uploadFlag = false
+        let MethodName = "/OrgServer/Manager/DataImport/CreatePersonImportTask";
+        let data = {
+            file_id: this.file_id,
+            org_id: this.id,
+            is_cover_while_exit_same_user: this.sameUser,
+            is_update_password_while_cover_user: this.coverUser.indexOf('1')>-1?'true':'false'
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.loading = false
+                this.uploading = true
+                this.isStop = false
+                this.timer = setInterval(() => {
+                    if (this.resultData&&this.resultData.is_finish==='true') {
+                        clearInterval(this.timer);
+                        this.timer = null;
+                        this.uploading = false
+                        this.percentage = parseInt(this.resultData.cur_count/this.resultData.total_count)*100
+                        if(this.coverUser.indexOf('2')>-1){
+                            window.open(this.resultData.archive_file_url, "_blank");
+                        }
+                    }else{
+                        this.handleTaskStatus()
+                    }
+                }, 1000);
+            }else{
+                this.loading = false
+                this.uploading = false
+                this.uploadFlag = true
+                this.isStop = true
+                clearInterval(this.timer);
+            }
+        })
+        .catch(() => {
+            clearInterval(this.timer);
+            this.uploading = false
+            this.uploadFlag = true
+            this.isStop = true
+            this.loading = false
+        });
+    },
+    // 导入任务执行状态
+    handleTaskStatus(){
+        let MethodName = "/OrgServer/Manager/DataImport/GetPersonImportTaskExecuteStatus";
+        let data = {
+            is_query_execute_log: 'true',
+            execute_log_query_top_n: 9999999
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.resultData = res
+                this.execute_log_list = JSON.parse(JSON.stringify(this.resultData.execute_log_list)).reverse()
+            }
+        })
+        .catch(() => {
+            this.uploading = false
+            this.loading = false
+        });    
+    },
+    // 中断任务
+    handleInterruptTask(){
+        this.loading = true
+        let MethodName = "/OrgServer/Manager/DataImport/InterruptPersonImportTask";
+        getLogin(MethodName, {})
+        .then((res) => {
+            if(res.status===1){
+                this.isStop = true
+                this.loading = false
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        });    
+    },
+    // 导出日志
+    handleExportLog(){
+        let href = this.resultData.execute_report_file_url
+        window.open(href, "_blank");
+    },
+    // 将整数转换成 时：分：秒的格式
+    realFormatSecond(value) {
+      let theTime = parseInt(value); // 秒
+      let theTime1 = 0; // 分
+      let theTime2 = 0; // 小时
+      if (theTime > 60) {
+        theTime1 = parseInt(theTime / 60);
+        theTime = parseInt(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = parseInt(theTime1 / 60);
+          theTime1 = parseInt(theTime1 % 60);
+        }
+      }
+      let result = String(parseInt(theTime));
+      if (result < 10) {
+        result = "0" + result;
+      }
+      if (theTime1 > 0) {
+        result = String(parseInt(theTime1)) + ":" + result;
+        if (theTime1 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      if (theTime2 > 0) {
+        result = String(parseInt(theTime2)) + ":" + result;
+        if (theTime2 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      return result;
+    },
+  },
+  created() {
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.batch-box{
+    height: 358px;
+    background: #FFFFFF;
+    &-top{
+        height: 56px;
+        border-bottom: 1px solid rgba(0,0,0,0.08);
+    }
+    &-center{
+        height: 233px;
+        overflow: auto;
+    }
+    &-bottom{
+        height: 64px;
+        border-top: 1px solid rgba(0,0,0,0.08);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px 24px;
+        .btn-box{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .el-button{
+                font-size: 14px;
+                padding: 5px 16px;
+                height: 32px;
+                .svg-icon,.el-icon-refresh-right{
+                    margin-right: 8px;
+                }
+                &.el-button--warning{
+                    background: #FF802B;
+                    border: none;
+                }
+            }
+        }
+    }
+    .tabs{
+        display: flex;
+        padding: 12px 0;
+        justify-content: center;
+        a{
+            font-size: 14px;
+            line-height: 22px;
+            color: #4E5969;
+            border-radius: 100px;
+            padding: 5px 16px;
+            margin-right: 12px;
+            &:hover{
+                background: #F2F3F5;
+            }
+            &.active{
+                background: #F2F3F5;
+                font-weight: 500;
+                color: #165DFF;
+            }
+        }
+    }
+    .downLoad{
+        color: #000;
+        font-size: 14px;
+        line-height: 22px;
+        &:hover{
+            color: #165DFF;
+        }
+    }
+    .upload-box{
+        background: #F5F5F5;
+        padding: 24px;
+        height: 233px;
+    }
+    .file-top{
+        height: 88px;
+        padding: 24px 24px 0 24px;
+        background: #F5F5F5;
+        display: flex;
+        .file-content{
+            flex: 1;
+            display: flex;
+            .file{
+                margin-left: 16px;
+                flex: 1;
+                b{
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: 600;
+                    line-height: 14px;
+                    color: #242634;
+                }
+            }
+            p{
+                margin: 0 0 8px 0;
+                font-size: 14px;
+                font-weight: 500;
+                line-height: 16px;
+                color: #242634;
+            }
+        }
+        .el-icon-error{
+            width: 16px;
+            height: 16px;
+            color: #CCCCCC;
+            cursor: pointer;
+            margin: 11px 0 0 14px;
+        }
+    }
+    .file-bottom{
+        padding: 24px 24px 0 24px;
+        p{
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            line-height: 22px;
+            color: #4E5969;
+        }
+        .el-radio-group,.el-checkbox-group{
+            padding: 5px 0;
+            margin-bottom: 8px;
+        }
+        .el-radio{
+            margin-right: 24px;
+        }
+        .el-checkbox{
+            margin-right: 16px;
+        }
+        .el-checkbox:last-of-type{
+            margin-right: 0;
+        }
+    }
+    .el-progress{
+        margin-bottom: 8px;
+    }
+    .file-uploading{
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        line-height: 14px;
+        color: #242634;
+        .progress{
+            font-weight: 600;
+        }
+    }
+    .log-box{
+        background: #F5F5F5;
+        padding: 8px 16px;
+        min-height: 233px;
+        p{
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            margin: 0;
+            color: #000;
+        }
+        .border{
+            border-bottom: 1px dashed #000;
+            margin: 16px 0;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.upload-box{
+    .el-upload,.el-upload-dragger{
+        width: 100%;
+    }
+    .el-upload-dragger{
+        background: #F5F5F5;
+        border-radius: 24px;
+        padding: 24px;
+        border: 2px dashed var(--grey-03, #E2E6EA);
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        line-height: 22px;
+        font-size: 14px;
+        color: #000;
+        span{
+            display: block;
+            font-size: 12px;
+            color: #86909C;
+            font-size: 12px;
+            line-height: 20px;
+            word-break: break-word;
+        }
+    }
+}
+</style>

src/views/organize_manage/EditPerson.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="manage-root edit-person" v-if="info">
+    <Header
+      :headerBg="'#fff'"
+      :headerBorder="'#5C5C5C'"
+      :userBg="'rgba(0, 0, 0, 0.24)'" 
+      :type="'black'" />
+    <div class="manage-root-contain">
+        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
+        <div class="manage-root-contain-right personnel-manage-right">
+            <setting :page="$route.query.page?$route.query.page:'editOrgPerson'" :info="info" @getInfo="getInfo" @changeBread="changeBread"></setting>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "../../components/Header.vue";
+import Setting from "../../components/Setting.vue"
+import { getLogin } from "@/api/ajax";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { Header, Setting },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+        activeMenuIndex: "organize_manage",
+        breadcrumbList:[],
+        tableHeight: "", // 表格高度
+        id:this.$route.query.id?this.$route.query.id:'',
+        info: null
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+    
+  },
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    //计算table高度(动态设置table高度)
+    getTableHeight() {
+      let tableH = 434; //距离页面下方的高度
+      let tableHeightDetil = window.innerHeight - tableH;
+      if (tableHeightDetil <= 300) {
+        this.tableHeight = 300;
+      } else {
+        this.tableHeight = window.innerHeight - tableH;
+      }
+    },
+    // 获取机构信息
+    getInfo(){
+        let MethodName = "/OrgServer/Manager/PersonManager/GetPersonInfo";
+        let data = {
+            id: this.id,
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                let breadcrumb = [
+                    {
+                        icon:'school-line',
+                        url:'',
+                        text:''
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        text:'机构管理'
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        text:res.person.org_name
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        text:'人员信息'
+                    }
+                ]
+                this.breadcrumbList = breadcrumb
+                this.info = res.person
+            }
+        })
+        .catch(() => {
+            
+        });
+    },
+    // 修改面包屑
+    changeBread(list){
+        this.breadcrumbList = list
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getTableHeight();
+    if(this.id){
+        this.getInfo()
+    }
+    
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.manage-root-contain{
+    width: 1360px;
+    margin: 24px auto;
+}
+</style>

src/views/organize_manage/PersonList.vue

@@ -0,0 +1,970 @@
+<template>
+  <div class="manage-root organize-manage person-list">
+    <Header 
+      :headerBg="'#fff'"
+      :headerBorder="'#5C5C5C'"
+      :userBg="'rgba(0, 0, 0, 0.24)'" 
+      :type="'black'" />
+    <div class="manage-root-contain">
+        <div class="manage-root-contain-right personnel-manage-right">
+            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
+            <div class="personal-inner" v-if="info">
+                <div class="common-title-box">
+                    <h3>{{info.name}}<span class="total-number">共{{info.person_count_audited}}人</span></h3>
+                    <div class="btn-box">
+                        <el-button type="primary" size="small" @click="handleBatchImport">批量导入</el-button>
+                    </div>
+                </div>
+                <div class="tabs">
+                    <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">人员列表</a>
+                    <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">人员审核 {{info.person_count_wait_audit}}</a>
+                </div>
+                <div class="search">
+                    <div class="search-box">
+                        <div class="search-item">
+                            <label>搜索</label>
+                            <el-input
+                                placeholder="输入搜索内容"
+                                v-model="searchInput">
+                                <i slot="suffix" class="el-input__icon el-icon-search" @click="getList(1)" style="cursor: pointer;"></i>
+                            </el-input>
+                        </div>
+                        <div class="search-item">
+                            <label>权限</label>
+                            <el-select v-model="searchType" @change="getList(1)" placeholder="请选择">
+                                <el-option
+                                    v-for="item in typeList"
+                                    :key="item.account_type"
+                                    :label="item.account_type_name"
+                                    :value="item.account_type">
+                                </el-option>
+                            </el-select>
+                        </div>
+                        <div class="search-item" v-if="tabsIndex===0">
+                            <label>状态</label>
+                            <el-select v-model="searchStatus" @change="getList(1)" placeholder="请选择">
+                                <el-option
+                                    v-for="item in $searchStatusList"
+                                    :key="item.status"
+                                    :label="item.status_name"
+                                    :value="item.status">
+                                </el-option>
+                            </el-select>
+                        </div>
+                        <div class="search-item" v-if="tabsIndex===1">
+                            <label>状态</label>
+                            <el-select v-model="searchAuditStatus" @change="getList(1)" placeholder="请选择">
+                                <el-option
+                                    v-for="item in searchAuditStatusList"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </div>
+                    </div>
+                    <div class="search-right" v-if="tabsIndex===0">
+                        <el-button class="gray-btn" size="small" @click="handleUp('','up',multipleSelection)">开启选中用户</el-button>
+                        <el-button class="pink-btn" size="small" @click="handleUp('','down',multipleSelection)">停用选中用户</el-button>
+                        <el-button class="red-btn" size="small" @click="handleDelete('',multipleSelection)">删除选中用户</el-button>
+                    </div>
+                    <div class="search-right" v-if="tabsIndex===1">
+                        <el-button class="gray-btn" size="small" @click="handleAudit('','up',multipleSelection)">同意选中用户</el-button>
+                        <el-button class="pink-btn" size="small" @click="handleAudit('','down',multipleSelection)">拒绝选中用户</el-button>
+                    </div>
+                </div>
+                <template v-if="tabsIndex===0">
+                    <el-table
+                        class="search-table"
+                        :data="tableData"
+                        style="width: 100%"
+                        key="table"
+                        @sort-change="handleSort"
+                        :default-sort = dataSort
+                        :max-height="tableHeight"
+                        @selection-change="handleSelectionChange">
+                        <el-table-column
+                            type="selection"
+                            width="40"
+                            fixed>
+                        </el-table-column>
+                        <el-table-column
+                            prop="user_name"
+                            label="用户名"
+                            sortable="custom"
+                            min-width="132"
+                            class-name="user-info">
+                            <template slot-scope="scope">
+                                <el-image
+                                    class="touxiang"
+                                    :src="scope.row.image_url?scope.row.image_url:require('../../assets/avatar.png')"
+                                    fit="cover" style="width:24px;height:24px;margin-right:8px">
+                                </el-image>
+                                <!-- <img class="touxiang" :src="scope.row.image_url?scope.row.image_url:require('../../assets/avatar.png')" /> -->
+                                <span class="name">{{scope.row.user_name}}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="real_name"
+                            label="真实姓名"
+                            width="103">
+                        </el-table-column>
+                        <el-table-column
+                            prop="sex_name"
+                            label="性别"
+                            width="56">
+                        </el-table-column>
+                        <el-table-column
+                            prop="type"
+                            label="权限"
+                            width="88" >
+                            <template slot-scope="scope">
+                                {{scope.row.is_manager==='true'?'管理员':'普通用户'}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="email"
+                            label="邮箱"
+                            sortable="custom"
+                            min-width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="phone"
+                            label="手机号"
+                            sortable="custom"
+                            width="160">
+                        </el-table-column>
+                        <el-table-column
+                            prop="register_time"
+                            label="注册时间"
+                            sortable="custom"
+                            width="144">
+                            <template slot-scope="scope">
+                                {{scope.row.register_time?scope.row.register_time.substring(0,16):'-'}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="status"
+                            label="状态"
+                            width="116" >
+                            <template slot-scope="scope">
+                                <div class="status-box">
+                                    <span :style="{background:statusList[scope.row.status].bg}"></span>
+                                    <b :style="{color:statusList[scope.row.status].color}">{{statusList[scope.row.status].text}}</b>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            fixed="right"
+                            label="操作"
+                            width="140">
+                            <template slot-scope="scope">
+                                <el-button
+                                    @click.native.prevent="handleEdit(scope.row)"
+                                    type="text"
+                                    size="small"
+                                    class="primary-btn">
+                                    编辑
+                                </el-button>
+                                <el-button
+                                    @click.native.prevent="handleUp(scope.row, 'up')"
+                                    type="text"
+                                    size="small"
+                                    class="primary-btn"
+                                    v-if="scope.row.status===0">
+                                    开启
+                                </el-button>
+                                <el-button
+                                    @click.native.prevent="handleUp(scope.row, 'down')"
+                                    type="text"
+                                    size="small"
+                                    class="red-btn"
+                                    v-else-if="scope.row.status===1">
+                                    停用
+                                </el-button>
+                                <el-button
+                                    @click.native.prevent="handleDelete(scope.row)"
+                                    type="text"
+                                    size="small"
+                                    class="red-btn"
+                                    v-if="scope.row.status===0">
+                                    删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-pagination
+                        key="pagination"
+                        background
+                        @size-change="(val)=>handleSizeChange(val,'pageSize','pageNumber')"
+                        @current-change="(val)=>handleCurrentChange(val,'pageNumber')"
+                        :current-page="pageNumber"
+                        :page-sizes="[10, 20, 30, 40]"
+                        :page-size="pageSize"
+                        layout="total, prev, pager, next, sizes, jumper"
+                        :total="total_count">
+                    </el-pagination>
+                </template>
+                <template v-if="tabsIndex===1">
+                    <el-table
+                        class="search-table"
+                        :data="tableData"
+                        style="width: 100%"
+                        :max-height="tableHeight"
+                        key="auditTable"
+                        @sort-change="handleSort"
+                        :default-sort = dataSorts
+                        @selection-change="handleSelectionChange">
+                        <el-table-column
+                            type="selection"
+                            width="40"
+                            fixed>
+                        </el-table-column>
+                        <el-table-column
+                            prop="user_name"
+                            label="用户名"
+                            sortable="custom"
+                            min-width="132"
+                            class-name="user-info">
+                            <template slot-scope="scope">
+                                <el-image
+                                    class="touxiang"
+                                    :src="scope.row.image_url?scope.row.image_url:require('../../assets/avatar.png')"
+                                    fit="cover" style="width:24px;height:24px;margin-right:8px">
+                                </el-image>
+                                <!-- <img class="touxiang" :src="scope.row.image_url?scope.row.image_url:require('../../assets/avatar.png')" /> -->
+                                <span class="name">{{scope.row.user_name}}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="real_name"
+                            label="真实姓名"
+                            width="103">
+                        </el-table-column>
+                        <el-table-column
+                            prop="sex_name"
+                            label="性别"
+                            width="56">
+                        </el-table-column>
+                        <el-table-column
+                            prop="email"
+                            label="邮箱"
+                            sortable="custom"
+                            min-width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="phone"
+                            label="手机号"
+                            sortable="custom"
+                            width="160">
+                        </el-table-column>
+                        <el-table-column
+                            prop="apply_time"
+                            label="申请时间"
+                            sortable="custom"
+                            width="144">
+                            <template slot-scope="scope">
+                                {{scope.row.apply_time?scope.row.apply_time.substring(0,16):'-'}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="audit_time"
+                            label="审核时间"
+                            sortable="custom"
+                            width="144">
+                            <template slot-scope="scope">
+                                {{scope.row.audit_time?scope.row.audit_time.substring(0,16):'-'}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="status"
+                            label="状态"
+                            width="116" >
+                            <template slot-scope="scope">
+                                <div class="status-box" v-if="auditStatusList[scope.row.audit_status]">
+                                    <span :style="{background:auditStatusList[scope.row.audit_status].bg}"></span>
+                                    <b :style="{color:auditStatusList[scope.row.audit_status].color}">{{auditStatusList[scope.row.audit_status].text}}</b>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            fixed="right"
+                            label="操作"
+                            width="140">
+                            <template slot-scope="scope">
+                                <el-button
+                                    @click.native.prevent="handleLook(scope.row)"
+                                    type="text"
+                                    size="small"
+                                    class="primary-btn">
+                                    查看
+                                </el-button>
+                                <el-button
+                                    @click.native.prevent="handleAudit(scope.row,'up')"
+                                    type="text"
+                                    size="small"
+                                    class="primary-btn">
+                                    同意
+                                </el-button>
+                                <el-button
+                                    @click.native.prevent="handleAudit(scope.row,'down')"
+                                    type="text"
+                                    size="small"
+                                    class="red-btn"
+                                    v-if="scope.row.audit_status===0">
+                                    拒绝    
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-pagination
+                        background
+                        key="auditpagination"
+                        @size-change="(val)=>handleSizeChange(val,'pageSizes','pageNumbers')"
+                        @current-change="(val)=>handleCurrentChange(val,'pageNumbers')"
+                        :current-page="pageNumbers"
+                        :page-sizes="[10, 20, 30, 40]"
+                        :page-size="pageSizes"
+                        layout="total, prev, pager, next, sizes, jumper"
+                        :total="total_count">
+                    </el-pagination>
+                </template>
+            </div>
+        </div>
+    </div>
+    <el-dialog
+        :visible.sync="importFlag"
+        :show-close="false"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        width="398px"
+        class="login-dialog person-dialog"
+        v-if="importFlag">
+        <batch-import @closeDialog="closeDialog" :exportUrl="exportUrl"></batch-import>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "../../components/Header.vue";
+import Breadcrumb from "../../components/Breadcrumb.vue";
+import BatchImport from './BatchImport.vue'
+import { getLogin } from "@/api/ajax";
+import { mapState } from 'vuex';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { Header, Breadcrumb, BatchImport },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+        activeMenuIndex: "organize_manage",
+        breadcrumbList:[
+            {
+                icon:'school-line',
+                url:'',
+                text:''
+            },
+            {
+                icon:'',
+                url:'',
+                text:'机构管理'
+            }
+        ],
+        searchInput: '',
+        searchType: -1,
+        searchStatus: -1,
+        searchAuditStatus: -1,
+        typeList:[
+            {
+                account_type:-1,
+                account_type_name:'全部'
+            },
+            {
+                account_type:1,
+                account_type_name:'管理员'
+            },
+            {
+                account_type:0,
+                account_type_name:'普通用户'
+            }
+        ],
+        searchAuditStatusList:[
+            {
+                value:-1,
+                label:'全部'
+            },
+            {
+                value:0,
+                label:'待审核'
+            },
+            {
+                value:2,
+                label:'已拒绝'
+            }
+        ], 
+        statusList:{
+            1:{
+                text:'正常',
+                bg:'#165DFF',
+                color:''
+            },
+            0:{
+                text:'停用',
+                bg:'#F53F3F',
+                color:'#F53F3F'
+            }
+        },
+        auditStatusList:{
+            0:{
+                text:'待审核',
+                bg:'#165DFF',
+                color:''
+            },
+            2:{
+                text:'已拒绝',
+                bg:'#F53F3F',
+                color:'#F53F3F'
+            }
+        },
+        tableData:[],
+        pageSize: window.localStorage.getItem('pageSizec')?Number(window.localStorage.getItem('pageSize-people')):10, 
+        pageNumber: window.localStorage.getItem('pageNumber-people')?Number(window.localStorage.getItem('pageNumber-people')):1,
+        tableHeight: "", // 表格高度
+        orgName:'', // 机构名称
+        id:this.$route.query.id?this.$route.query.id:'',
+        multipleSelection:[],
+        tabsIndex:0,
+        pageSizes: window.localStorage.getItem('pageSize-check')?Number(window.localStorage.getItem('pageSize-check')):10, 
+        pageNumbers: window.localStorage.getItem('pageNumber-check')?Number(window.localStorage.getItem('pageNumber-check')):1,
+        importFlag: false, // 批量导入flag
+        info: null, 
+        total_count: 0,
+        dataSort: {},
+        dataSorts: {},
+        exportUrl: '', // 下载模板链接
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+    ...mapState(['$searchStatusList']),
+  },
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    handleSort(value){
+        let dataSort = {
+            prop: value.prop,
+            order: value.order
+        }
+        if(this.tabsIndex===0){
+            this.dataSort = dataSort
+        }else{
+            this.dataSorts = dataSort
+        }
+        this.getList()
+    },
+    // 查询列表
+    getList(page){
+        if(page){
+            this.pageNumber = page
+        }
+        let MethodName = "/OrgServer/Manager/PageQuery/PageQueryPersonList";
+        let order_column_list = []
+        if(this.tabsIndex===0){
+            if(this.dataSort != {}){
+                if(this.dataSort.order=='descending'){
+                    order_column_list = [this.dataSort.prop + ':desc']
+                }else if(this.dataSort.order=='ascending'){
+                    // 升序不传值
+                    order_column_list = [this.dataSort.prop]
+                }else{
+                    order_column_list = ['register_time:desc']
+                }
+            }else{
+                order_column_list = ['register_time:desc']
+            }
+        }else{
+            if(this.dataSorts != {}){
+                if(this.dataSort.order=='descending'){
+                    order_column_list = [this.dataSorts.prop + ':desc']
+                }else if(this.dataSort.order=='ascending'){
+                    // 升序不传值
+                    order_column_list = [this.dataSorts.prop]
+                }else{
+                    order_column_list = ['apply_time:desc']
+                }
+            }else{
+                order_column_list = ['apply_time:desc']
+            }
+        }
+        
+        let data = {
+            org_id: this.id,
+            search_content:this.searchInput.trim(),
+            role_type:this.searchType,
+            status:this.tabsIndex===0?this.searchStatus:-1,
+            audit_status:this.tabsIndex===1?this.searchAuditStatus:-1,
+            page_capacity:this.tabsIndex===0?this.pageSize:this.pageSizes,
+            cur_page:this.tabsIndex===0?this.pageNumber:this.pageNumbers,
+            list_type: this.tabsIndex*1,
+            order_column_list: order_column_list
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+               this.tableData = res.person_list
+               this.total_count = res.total_count
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        }); 
+    },
+    // 创建机构或者编辑信息
+    handleEdit(row){
+        // 根据登录用户判断当前用户是不是超管 在table里加上disabled
+
+        // 点击时记录页码和每页条数
+        window.localStorage.setItem('pageSize-people',this.pageSize)
+        window.localStorage.setItem('pageNumber-people',this.pageNumber)
+        this.$router.push({
+            path: "/editOrgPerson",
+            query: {
+                id: row?row.id:''
+            },
+        });
+    },
+    // 人员管理
+    handleLook(row){
+        window.localStorage.setItem('pageSize-check',this.pageSizes)
+        window.localStorage.setItem('pageNumber-check',this.pageNumbers)
+        this.$router.push({
+            path: "/editOrgPerson",
+            query: {
+                id: row?row.id:'',
+                page: 'personCheck'
+            },
+        });
+    },
+    // 停用 启用
+    handleUp(row,type,arr) {
+      if(!row&&arr.length===0){
+        return false
+      }
+      let Mname = "/OrgServer/Manager/PersonManager/EnablePerson";
+      let data = {
+        id_list: arr?arr:[row.id]
+      };
+      if (type==='up') {
+        // 下架状态
+        data.is_enable = "true";
+      } else if (type==='down') {
+        data.is_enable = "false";
+      }
+      getLogin(Mname, data).then(res => {
+        this.$message.success("操作成功");
+        this.getList()
+      });
+    },
+    // 通过 拒绝
+    handleAudit(row,type,arr) {
+      if(!row&&arr.length===0){
+        return false
+      }
+      let Mname = "/OrgServer/Manager/PersonManager/AuditPerson";
+      let data = {
+        id_list: arr?arr:[row.id]
+      };
+      if (type==='up') {
+        // 下架状态
+        data.is_pass = "true";
+      } else if (type==='down') {
+        data.is_pass = "false";
+      }
+      getLogin(Mname, data).then(res => {
+        this.$message.success("操作成功");
+        this.getList()
+      });
+    },
+    handleSizeChange(val,type,page) {
+        this[type] = val
+        this[page] = 1
+        this.getList()
+    },
+    handleCurrentChange(val,type) {
+        this[type] = val
+        this.getList()
+    },
+    //计算table高度(动态设置table高度)
+    getTableHeight() {
+      let tableH = 434; //距离页面下方的高度
+      let tableHeightDetil = window.innerHeight - tableH;
+      if (tableHeightDetil <= 300) {
+        this.tableHeight = 300;
+      } else {
+        this.tableHeight = window.innerHeight - tableH;
+      }
+    },
+    // 删除
+    handleDelete(row,arr){
+        this.$confirm('确定删除吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+            if(!row&&arr.length===0){
+                return false
+            }
+            let Mname = "/OrgServer/Manager/PersonManager/BatchDeleteOrgPerson";
+            let data = {
+                org_id: this.id,
+                person_id_list: arr?arr:[row.id]
+            };
+            getLogin(Mname, data).then(res => {
+                this.$message.success("删除成功");
+                this.getList()
+            });
+        }).catch(() => {     
+        });
+    },
+    // 复选框
+    handleSelectionChange(val) {
+        this.multipleSelection = []
+        val.forEach(item => {
+            this.multipleSelection.push(item.id)
+        });
+    },
+    handleChangeTabs(value){
+        this.tabsIndex = value
+        // this.pageNumber = 1
+        this.getList()
+    },
+    // 批量导入
+    handleBatchImport(){
+        this.importFlag = true
+    },
+    // 关闭批量导入
+    closeDialog(){
+        this.importFlag = false
+        this.getList()
+        this.getInfo()
+    },
+    // 获取机构信息
+    getInfo(){
+        let MethodName = "/OrgServer/Manager/OrgManager/GetOrgTitleInfo";
+        let data = {
+            id: this.id,
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.info = res
+            }
+        })
+        .catch(() => {
+            
+        });
+        getLogin('/OrgServer/Manager/SysConfigManager/GetSysConfig_DataImport', {})
+        .then((res) => {
+            if(res.status===1){
+                this.exportUrl = res.person_data_import_template_file_url
+            }
+        }).catch((res) =>{
+            
+        })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getList()
+    this.getTableHeight();
+    if(this.id){
+        this.getInfo()
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.manage-root-contain{
+    width: 1360px;
+    margin: 0 auto;
+}
+.common-title-box {
+    display: flex;
+    justify-content: space-between;
+    h3 {
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 28px;
+        color: #1D2129;
+        margin: 0;
+    }
+}
+.search-box {
+    display: flex;
+    flex-flow: wrap;
+    padding-top: 24px;
+    .el-input {
+        width: 256px;
+    }
+    .el-select {
+        width: 160px;
+        .el-input {
+            width: 100%;
+        }
+    }
+    .el-input__icon {
+        line-height: 32px;
+        color: #4E5969 !important;
+    }
+    .el-input__inner {
+        height: 32px;
+        color: #1D2129;
+        background: #F2F3F5;
+        border: none;
+    }
+    .search-item {
+        padding-right: 24px;
+        label {
+            display: block;
+            font-size: 14px;
+            line-height: 22px;
+            color: #4E5969;
+            font-weight: 400;
+            margin-bottom: 8px;
+        }
+    }
+}
+.personal-inner {
+    background: #FFFFFF;
+    border-radius: 4px;
+    width: 100%;
+    height: calc(100vh - 134px);
+    padding: 24px;
+    margin-top: 56px;
+    .status-box {
+        display: flex;
+        align-items: center;
+        span {
+            width: 6px;
+            height: 6px;
+            border-radius: 3px;
+            margin-right: 8px;
+            margin-top: 2px;
+        }
+        b {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            color: #1D2129;
+        }
+    }
+}
+.total-number{
+    color: #86909C;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    margin-left: 4px;
+}
+.tabs{
+    display: flex;
+    padding: 16px 0;
+    a{
+        font-size: 14px;
+        line-height: 22px;
+        color: #4E5969;
+        border-radius: 100px;
+        padding: 5px 16px;
+        margin-right: 12px;
+        &:hover{
+            background: #F2F3F5;
+        }
+        &.active{
+            background: #F2F3F5;
+            font-weight: 500;
+            color: #165DFF;
+        }
+    }
+}
+.search{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+.search-box{
+    padding-top: 0;
+}
+.search-right{
+    height: 34px;
+    button{
+        font-size: 14px;
+    }
+    .pink-btn{
+        background: #FFECE8;
+        color: #F53F3F;
+        border-color: #FFECE8;
+        &:hover{
+            background: #fde0da;
+            border-color: #fde0da;
+        }
+        &:focus{
+            background: #f8cfc6;
+            border-color: #f8cfc6;
+        }
+    }
+    .red-btn{
+        background: #F53F3F;
+        color: #fff;
+        border-color: #F53F3F;
+        &:hover{
+            background: #ed3b3b;
+        }
+        &:focus{
+            background: #ec1111;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.organize-manage{
+    .el-cascader{
+        width: 160px;
+        height: 32px;
+        line-height: 32px;
+        .el-input{
+            width: 100%;
+            height: 32px;
+        }
+    }
+    .breadcrumb-box {
+        position: fixed;
+        top: 64px;
+        left: 50%;
+        margin-left: -680px;
+        width: 1360px;
+        height: 56px;
+        padding: 17px 0;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        .breadcrumb-item {
+            &-pointer {
+                cursor: pointer;
+                &:hover {
+                    .el-breadcrumb__inner {
+                        color: #165DFF;
+                    }
+                }
+            }
+            &-last {
+                span {
+                    color: #1D2129;
+                    font-weight: 500;
+                }
+            }
+        }
+        .el-breadcrumb__inner {
+            color: #4E5969;
+        }
+        .el-breadcrumb__separator {
+            color: #C9CDD4;
+            margin: 0 4px;
+            padding: 0 3px;
+        }
+    }
+}
+.person-dialog{
+    .el-dialog{
+        border-radius: 8px;
+    }
+}
+.person-list{
+    .user-info{
+        .cell{
+            display: flex;
+            align-items: center;
+            .touxiang{
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                margin-right: 8px;
+            }
+        }
+    }
+}
+.search-table {
+    margin: 24px 0;
+    th.el-table__cell {
+        border-bottom: 1px solid #E5E6EB;
+        background: #F2F3F5;
+        padding: 8px 0px;
+        .caret-wrapper {
+            height: 22px;
+        }
+        .sort-caret.ascending {
+            top: 0;
+        }
+        .sort-caret.descending {
+            bottom: 0;
+        }
+        .cell {
+            font-weight: 500;
+        }
+    }
+    .cell {
+        font-size: 14px;
+        line-height: 22px;
+        color: #1D2129;
+        padding: 0 9px;
+        word-break: break-word;
+    }
+    td.el-table__cell {
+        border-bottom: 1px solid #E5E6EB;
+    }
+    .primary-btn {
+        font-size: 14px;
+        color: #165DFF;
+        &:hover {
+            color: #4080FF;
+        }
+        &:focus {
+            color: #0E42D2;
+        }
+    }
+    .red-btn {
+        font-size: 14px;
+        color: #F53F3F;
+        &:hover {
+            color: #F76560;
+        }
+        &:focus {
+            color: #CB2634;
+        }
+    }
+}
+</style>