提交

src/api/api.js

@@ -1,7 +1,7 @@
 import fetch from "./request"
 
 // 我的企业信息
-export const entinfo = data => fetch.post('/entbase/ent/entinfo', data);
+export const entinfo1 = data => fetch.post('/entbase/ent/entinfo', data);
 // 招标信息列表
 export const subscribeList = data => fetch.post('/entdataexport/subscribeList', data);
 // 获取招标信息中高级筛选中信息
@@ -23,4 +23,79 @@ export const pushset = data => fetch.post('/entniche/subscribe/pushset/get', dat
 // 获取关键词设置
 export const scribeKey = data => fetch.post('/entniche/subscribe/key/get', data);
 // 修改关键词设置
-export const updateKeys = data => fetch.post('/entniche/subscribe/key/update', data);
+export const updateKeys = data => fetch.post('/entniche/subscribe/key/update', data);
+
+export const entinfo = data => fetch.get('/ent/entinfo', data);
+
+//企业列表
+export const componyList = data => fetch.get("/person/pcManager",data);
+
+//添加部门
+export const addDepartInter = data => fetch.get("/department/add",data);
+
+//删除部门
+export const delDepartInter = data => fetch.get("/department/delete",data);
+
+//获取部门信息
+export const departDetail = data => fetch.get("/department/detail",data);
+
+//更新部门信息
+export const departUpdata = data => fetch.get("/department/update",data);
+
+//查询部门下的子部门
+export const findDepart = data => fetch.get("/department/childrens",data);
+
+//部门管理员列表
+export const userList = data => fetch.get("/department/pcPersons",data);
+
+//人员管理列表
+export const personInter = data => fetch.get("/power/pcPersons",data);
+
+//部门查询
+export const departsAll = data => fetch.get("/power/pcSearchDepartment",data);
+
+//新增人员
+export const personAddInter = data => fetch.get("/person/add",data);
+
+//人员信息修改
+export const personUpdateInter = data => fetch.get("/person/update",data);
+
+//人员详细信息
+export const personDetailInter = data => fetch.get("/person/detail",data);
+
+//人员删除
+export const personDelInter = data => fetch.get("/person/delete",data);
+
+//商机管理人员
+export const sjPersonListInter = data => fetch.get("/entExportAuth/entPersonList",data);
+
+//商机管理人员列表
+export const user_sjPersonListInter = data => fetch.get("/entExportAuth/entPersons",data);
+
+//商机管理列表删除                                         
+export const del_sjPersonListInter = data => fetch.get("/entExportAuth/entDeletePerson",data);
+
+//数据导出人员列表
+export const recordPersonListInter = data => fetch.get("/entExportAuth/getList",data);
+
+//数据导出人员列表
+export const user_recordpersonListInter = data => fetch.get("/entExportAuth/persons",data);
+
+//数据导出设置限额
+export const setLimit_recordpersonListInter = data => fetch.get("/entExportAuth/setLimit",data);
+
+//数据导出人员使用列表删除
+export const del_recordpersonListInter = data => fetch.get("/entExportAuth/deletePerson",data);
+
+
+
+
+
+
+
+
+
+
+
+
+

src/assets/scss/element-variables.scss

@@ -5,4 +5,5 @@ $--color-font: #1D1D1D;
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
-@import "~element-ui/packages/theme-chalk/src/index";
+@import "~element-ui/packages/theme-chalk/src/index";
+

src/store/index.js

@@ -4,8 +4,22 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
+  state: {
+    departList:[],//企业部门列表
+    chooseDepart:null,//选择的部门信息
+    chooseUser:null,//选择的人员信息
+  },
+  mutations: {
+    departListFun(state,val){
+        state.departList = val;
+    },
+    chooseDepartFun(state,val){
+       state.chooseDepart = val;
+    },
+    chooseUserFun(state,val){
+      state.chooseUser = val;
+   }
+  },
   actions: {},
   modules: {}
 });

src/style/global_variable.scss

@@ -3,4 +3,12 @@ $del_color: #FF3A20;
 $popup_color: rgba(0, 0, 0, 0.65);
 $weight_color: #1D1D1D;
 $normal_color: #686868;
-$border_color:rgba(0,0,0,0.05)
+$border_color:rgba(0,0,0,0.05);
+.noselect {
+  -webkit-touch-callout: none; 
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

src/views/ent/components/addDrawer.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="addDrawer">
+       <el-drawer
+            :withHeader="false"
+            :modal="false"
+            size="600px"
+            :show-close="false"
+            :visible.sync="drawer"
+            :direction="direction">
+            <div class="drawer_content">
+                
+               <slot name="formItem"></slot>
+               
+               <choose-depart  ref="chooseDepart"></choose-depart>
+                <slot name="tips"></slot>
+                <div class="btns">
+                    <slot name="deleteBtn"></slot>
+                    <button class="cancle" @click="drawer=false">取消</button>
+                </div>
+            </div>
+        </el-drawer>
+  </div>
+</template>
+<script>
+import chooseDepart from "./chooseDepart";
+import { addDepart } from '@/api/api';
+export default {
+  components:{
+    chooseDepart
+  },
+  data(){
+    return{
+      drawer: false, 
+      direction: 'rtl', 
+    }
+  },
+  methods:{
+    openDrawer(val){
+      this.drawer = true;
+    },
+    findCompont(){
+      this.$refs.chooseDepart.centerDialogVisible = true;
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+    .drawer_content{
+            position: relative;
+            height: 100%;
+            h2{
+                height: 80px;
+                line-height: 80px;
+                font-size: 20px;
+                text-align: left;
+                padding: 0 30px;
+                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
+            }
+            h4{
+                height: 40px;
+                line-height: 40px;
+                font-size: 14px;
+                color: $light_color;
+                background: rgba(29, 186, 207, 0.05);
+                margin: 20px 60px;
+                border-radius: 4px;
+                text-align: left;
+                text-indent: 16px;
+            }
+            .items{
+                label{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-bottom: 20px;
+                    span{
+                        width: 120px;
+                        text-align: right;
+                    }
+                    .el-input{
+                        width: 352px;
+                    }
+                    input{
+                        width: 352px;
+                        height: 40px;
+                    }
+                }
+                .required{
+                    i{
+                        color:$del_color;
+                        margin-right: 4px;
+                    }
+                }
+            }
+            .tips{
+                position: absolute;
+                bottom: 120px;
+                width: 100%;
+                line-height: 20px;
+                font-size: 12px;
+                color: #999;
+            }
+            .btns{
+                height: 100px;
+                width: 100%;
+                box-shadow: 0px -8px 8px rgba(0, 0, 0, 0.05);
+                position: absolute;
+                bottom: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                button{
+                    width: 132px;
+                    height: 36px;
+                    background: transparent;
+                    border-radius: 6px;
+                    margin: 0 20px;
+                    font-size: 16px;
+                    &:active{
+                        opacity: 0.8;
+                    }
+                }
+                .save{
+                    border: 1px solid $light_color;
+                    color: $light_color;
+                }
+                .cancle{
+                    border: 1px solid #e0e0e0;
+                    color: $normal_color;
+                }
+                .del{
+                  border: 1px solid $del_color;
+                  color: $del_color;
+                }
+            } 
+        }
+</style>

src/views/ent/components/author.vue

@@ -1,17 +1,326 @@
 <template>
-    <div class="business">商机</div>
+    <div class="ent_business">
+        <header class="ent_business_header">
+            <h4>商机 <span> > 权限管理</span></h4>
+        </header>
+        <div class="buyMsg">
+            <ul>
+                <li>
+                    <span>购买人数：</span> <strong>40人</strong>
+                </li>
+                <li>
+                    <span>购买周期：</span> <strong>2020.01.01-2021.01.01</strong>
+                </li>
+            </ul>
+        </div>
+        <div class="tabs">
+            <header>
+                <div>
+                    <span v-for="(item,i) in tabbar" :key="i" @click="switchTabbar(i)">{{ item }}</span>
+                    <span class="line_border" ref="line_border" ></span>
+                </div>
+                <button @click="addDepart">添加人员</button>
+            </header>
+            <el-table
+                v-if="currentIndex == 0"
+                :data="tableData"
+                style="width: 100%">
+                <el-table-column
+                    prop="user_name"
+                    label="姓名"
+                    width="190">
+                </el-table-column>
+                <el-table-column
+                    prop="user_mail"
+                    label="邮箱"
+                    width="230">
+                </el-table-column>
+                <el-table-column
+                    prop="user_phone"
+                    width="230"
+                    label="手机">
+                </el-table-column>
+                <el-table-column
+                    width="250"
+                    prop="name"
+                    label="部门">
+                </el-table-column>
+                <el-table-column
+                    label="编辑">
+                    <template slot-scope="scope">
+                        <span class="edit" @click="delSjData(scope.row)">删除</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-table
+                v-if="currentIndex == 1"
+                :data="recordTableData"
+                style="width: 100%">
+                <el-table-column
+                    prop="user_name"
+                    label="姓名"
+                    width="110">
+                </el-table-column>
+                <el-table-column
+                    prop="user_mail"
+                    label="邮箱"
+                    width="170">
+                </el-table-column>
+                <el-table-column
+                    prop="user_phone"
+                    width="170"
+                    label="手机">
+                </el-table-column>
+                <el-table-column
+                    width="290"
+                    prop="name"
+                    label="部门">
+                </el-table-column>
+                <el-table-column
+                    width="150"
+                    label="每日导出限额">
+                    <template slot-scope="scope">
+                       <div class="setNumber">
+                            <span v-if="scope.row.setNumber" @click="scope.row.setNumber = false"> {{ scope.row.data_limit || '输入数量' }} </span>
+                            <input v-else v-model="scope.row.data_limit" type="text" @blur="setLimit(scope.row)" /> 
+                       </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="编辑">
+                    <template slot-scope="scope">
+                        <span class="edit" @click="del_recordPerson(scope.row)">删除</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <power-person ref="powerNode"></power-person>
+
+       <!-- 确认删除弹窗 -->
+        <del-tips ref="childDel" title="删除人员">
+            <template slot="content"> 
+                   <p> {{ del_current.user_name }}</p>
+            </template>
+            <template slot="del">
+                <button @click="del_Btn" class="del">删除</button>
+            </template>
+        </del-tips>
+    </div>
 </template>
 
 <script>
+ import { sjPersonListInter,del_sjPersonListInter ,recordPersonListInter,setLimit_recordpersonListInter,del_recordpersonListInter} from "@/api/api";
+ import powerPerson from "./powerPerson";
+ import delTips from "./del";
     export default {
+        components:{powerPerson,delTips},
         data() {
             return {
+                tableData: [],
+                recordTableData:[],
+                tabbar:["商机管理使用人员","数据导出使用人员"],
+                currentIndex:'0',
+                del_current:{},
+            }
+        },
+        created(){
+            this.sj_getDataList();
+        },
+        methods:{
+            //设置数据导出没人限额
+            setLimit(val){
+                console.log(val,val.data_limit,val.user_id,val.limit_id)
+                setLimit_recordpersonListInter({limitNum:Number(val.data_limit),userId:val.user_id,limitId:val.limit_id}).then(res =>{
+                    if(res.data.status == 1){
+                        this.$message({ message: '设置成功',type: 'success'});
+                        this.record_getDataList();
+                    }
+                })
+            },
+            //商机管理人员使用列表
+            sj_getDataList(){
+                sjPersonListInter({page:1,pageSize:10}).then(res =>{
+                    this.tableData = res.data.list;
+                })
+            },
+            //数据导出人员使用列表
+            record_getDataList(){
+                recordPersonListInter({page:1,pageSize:10}).then(res =>{
+                    res.data.list.forEach(v =>{
+                        v.setNumber = true;
+                    })
+                    this.recordTableData = res.data.list;
+                })
+            },
+            //商机管理列表删除
+            delSjData(val){
+                del_sjPersonListInter({userId:val.id}).then(res =>{
+                    if(res.data.status == 1){
+                        this.$message({ message: '删除成功',type: 'success'});
+                        this.sj_getDataList();
+                    }else{
+                        this.$message({ message: '删除失败',type: 'warning'});
+                    }
+                })
+            },
+            //数据导出人员列表删除
+            del_recordPerson(val){
+                this.del_current = val;
+                this.$refs.childDel.dialogTableVisible = true;
+            },
+            //确认删除
+            del_Btn(){
+                 this.$refs.childDel.dialogTableVisible = false;
+                 del_recordpersonListInter({userId:this.del_current.user_id}).then(res =>{
+                    this.del_current = null;
+                    if(res.data.status == 1){
+                        this.$message({ message: '删除成功',type: 'success'});
+                        this.record_getDataList();
+                    }else{
+                        this.$message({ message: '删除失败',type: 'warning'});
+                    }
+                })
+            },
+            addDepart(){
+                console.log(this.$refs.powerNode)
+                this.$refs.powerNode.centerDialogVisible = true;
+            },
+            //商机、数据人员使用列表切换
+            switchTabbar(i){
+                this.currentIndex = i;
+                if(i === 1){
+                   this.record_getDataList();
+                   this.$refs.line_border.className ="line_border move"
+                }else{
+                  this.$refs.line_border.className ="line_border"
+                }
                 
             }
         }
     }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.ent_business{
+    &_header{
+        margin: 0 30px;
+        display: flex;
+        border-bottom: 1px solid #E0E0E0;
+        h4{
+            padding: 20px 0;
+            line-height: 20px;
+            color: #999999;
+            span{
+                color: $light_color;
+            }
+        }
+    }
+    .buyMsg{
+        padding: 40px 0;
+        ul{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            li{
+                width: 300px;
+                line-height: 40px;
+                float: none;
+                display: flex;
+                span{
+                    color: #999;
+                }
+                strong{
+                    font-weight: normal;
+                    padding-left: 24px;
+                    color: $weight_color;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+    .tabs{
+        width: 1020px;
+        margin: 0 auto;
+        header{
+            display: flex;
+            align-items: center;
+            height: 50px;
+            margin-bottom: 20px;
+            background: #F7F7F7;
+            border-radius: 4px;
+            div{
+                height: 100%;
+                margin-right: auto;
+                position: relative;
+                line-height: 50px;
+                span{
+                    display: inline-block;
+                    width: 204px;
+                    font-size: 14px;
+                    color: $normal_color;
+                    cursor: pointer;
+                }
+                .line_border{
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+                    height: 2px;
+                    background: $light_color;
+                    transition: all 0.3s;
+                    &.move{
+                        transform: translateX(204px);
+                    }
+                }
+            }
+            button{
+                width: 90px;
+                height: 30px;
+                font-size: 14px;
+                border: 1px solid #E0E0E0;
+                box-sizing: border-box;
+                border-radius: 4px;
+                background: #fff;
+                margin-right: 20px;
+            }
+        }
+        .el-table{
+             thead{
+                color: $weight_color;
+                font-size: 14px;
+                .cell{
+                    font-weight: bolder;
+                }
+            }
+            table th:nth-child(5),table th:nth-child(6){
+                text-align: center;
+            }
+            .setNumber{
+                width: 100%;
+                text-align: center;
+                input{
+                    width: 88px;
+                    height: 28px;
+                    border: 1px solid #e0e0e0;
+                }
+                span{
+                    color: $light_color;
+                    text-decoration: underline;
+                    cursor: pointer;
+                    display: block;
+                    width: 100%;
+                }
+               
+            }
+            .edit{
+                display: block;
+                width: 100%;
+                height: 100%;
+                color: $light_color;
+                cursor: pointer;
+                text-align: center;
+            }
+        }
+    }
+}
     
 </style>

src/views/ent/components/chooseDepart.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="chooseDepart">
+      <el-dialog
+          class="ent_depart_dialog"
+          title="选择部门"
+          :show-close="false"
+          :visible.sync="centerDialogVisible"
+          append-to-body
+          width="890px"
+          center>
+          <div class="content">
+              <div class="content_left">
+                <div class="crumbs">
+                  <h4>选择</h4>
+                  <span v-if="filterTitleList.length>1">
+                    <i v-for="(item,i) in filterTitleList" :key="i" :style="{color:item.color}" @click="backDepart(item.id,i)">{{ item.aname }}</i>
+                  </span>
+                  <p v-else>
+                     <i v-for="(item,i) in filterTitleList" :key="i">{{ item.name}}</i>
+                  </p>
+                  
+                </div>
+                  <ul>
+                    <li v-for="(item) in departList" :key="item.id">
+                      <span @click="chooseDepart(item)">{{item.name}}</span><strong v-if="item.dept_count>0" @click="checkLower(item)"><img src="@/assets/images/part.png" alt=""><i>下级</i></strong>
+                    </li>
+                  </ul>
+              </div>
+              <div class="content_right">
+                  <h4>已选</h4>
+                  <ul>
+                    <li v-for="(item,i) in selectedList" :key="item.id">
+                      <span>{{ item.name }}</span><i class="el-icon-error" @click="delChooseDepart(i)"></i>
+                    </li>
+                  </ul>
+              </div>
+          </div>
+          <span slot="footer" class="dialog-footer btns">
+              <button @click="saveDepart" class="save">保存</button>
+              <button  @click="centerDialogVisible = false" class="cancle">取消</button>
+          </span>
+        </el-dialog>
+  </div>
+</template>
+
+<script>
+import { findDepart } from '@/api/api';
+export default {
+  data(){
+    return{
+      centerDialogVisible:false,
+      searchVal:'',
+      selectedList:[],
+      departList:{},
+      titleList:[]
+    }
+  },
+  created(){
+    let data = this.$store.state.departList
+    this.departList = [{name:data.department,id:2608,dept_count:data.departments.length}]
+  },
+  computed:{
+    filterTitleList:function(){
+        let newArr = [];
+        let l = this.titleList.length-1;
+        this.titleList.forEach((v,i) =>{
+          let obj = {};
+          if(i>0){
+             Object.assign(obj,v,{aname:`>${v.name}`})
+          }
+          if(i == l && i>0){
+            Object.assign(obj,{color:"#2CB7CA"},v)
+          }
+          if(i == 0){
+            Object.assign(obj,v,{aname:v.name})
+          }
+           newArr.push(obj)
+        })
+        return newArr;
+    }
+  },
+  methods:{
+     //返回上级部门
+      backDepart(id,i){
+          findDepart({id:id}).then(res =>{
+              this.departList = res.data;
+              this.titleList.splice(i+1,10)
+         })
+      },
+      checkLower(item){
+          findDepart({id:item.id}).then(res =>{
+              this.departList = res.data;
+              this.titleList.push({name:item.name,id:item.id});
+         })
+      },
+      chooseDepart(item){
+        if(this.selectedList.length>0){
+          this.$message({
+            message: '只能选择一个部门',
+            type: 'warning'
+          });
+          return 
+        }
+        this.selectedList.push(item)
+      },
+      delChooseDepart(i){
+        this.selectedList.splice(i,1);
+      },
+      //保存
+      saveDepart(){
+        this.centerDialogVisible = false;
+        this.$store.commit("chooseDepartFun",this.selectedList[0])
+      }
+      
+  }
+}
+</script>
+
+<style lang="scss">
+.ent_depart_dialog{
+      .el-dialog__header{
+          font-size: 26px;
+          color: $weight_color;
+      }
+      .content{
+          display: flex;
+          justify-content: space-between;
+          .content_left,.content_right{
+              width: 400px;
+              height: 400px;
+              border: 1px solid #ECECEC;
+              border-radius: 6px;
+              margin: 0 5px;
+              display: flex;
+              flex-direction: column;
+          }
+          .content_left{
+            .crumbs{
+              display: flex;
+              align-items: center;
+              h4{
+                padding: 10px  20px;
+                font-size: 14px;
+                line-height: 24px;
+                color: $weight_color;
+              }
+              span{
+                display: flex;
+              }
+              i{
+                max-width: 90px;
+                font-size: 14px;
+                color: #999;
+                overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
+                cursor: pointer;
+                &.curtive{
+                  color: $light_color;
+                }
+              }
+            }
+            ul{
+              flex: 1;
+              overflow: auto;
+              li{
+                display: flex;
+                align-items: center;
+                float: none;
+                padding: 0 20px;
+                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
+                line-height: 40px;
+                color: $normal_color;
+                span{
+                  flex: 1;
+                  cursor: pointer;
+                }
+                strong{
+                  display: flex;
+                  align-items: center;
+                  cursor: pointer;
+                  img{
+                    width: 24px;
+                  }
+                  i{
+                    color: $light_color;
+                    margin-left: 4px;
+                  }
+                }
+              }
+            }
+          }
+          .content_right{ 
+            h4{
+              padding: 14px 15px;
+              font-size: 14px;
+              color: $weight_color;
+            }
+            ul{
+              flex: 1;
+              overflow: auto;
+              li{
+                float: none;
+                padding: 0 20px;
+                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
+                line-height: 40px;
+                color: $normal_color;
+                display: flex;
+                align-items: center;
+                span{
+                  flex: 1;
+                }
+                i{
+                  cursor: pointer;
+                  font-size: 24px;
+                  color: #AAAAAA;
+                }
+              }
+            }
+          }
+      }
+      button{
+          width: 132px;
+          height: 36px;
+          background: transparent;
+          border-radius: 6px;
+          margin: 0 20px;
+          font-size: 16px;
+          &:active{
+              opacity: 0.8;
+          }
+      }
+      .save{
+          border: 1px solid $light_color;
+          color: $light_color;
+      }
+      .cancle{
+          border: 1px solid #e0e0e0;
+          color: $normal_color;
+      }
+}
+
+</style>

src/views/ent/components/chooseUser.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="ent_chooseUser">
+      <el-dialog
+          class="ent_chooseUser_dialog"
+          title="选择管理员"
+          :show-close="false"
+          :visible.sync="centerDialogVisible"
+          append-to-body
+          width="890px"
+          center>
+          <div class="content">
+              <div class="content_left">
+                  <h4>选择</h4>
+                  <div class="search">
+                    <el-input  v-model="searchVal" placeholder="搜索" >
+                      <template slot="prepend"><img src="../../../assets/images/search.jpg" alt=""></template>
+                    </el-input>
+                  </div>
+                  <ul>
+                    <li v-for="(item,i) in personList.list" :key="item.id">
+                      <strong>{{ personList.key[i] }}</strong>
+                      <div v-for="val in item" :key="val.id" @click="chooseDepart(val)" :class="{active:currentId === val.id}">
+                         <span>{{val.name}}</span>
+                         <span>{{ val.phone }}</span>
+                      </div>
+                    </li>
+                  </ul>
+              </div>
+              <div class="content_right">
+                  <h4>已选</h4>
+                  <ul>
+                    <li v-for="(item,i) in selectedList" :key="item.id">
+                      <span class="userName">{{ item.name }}</span><span>{{ item.phone }}</span><i class="el-icon-error" @click="delChooseDepart(i)"></i>
+                    </li>
+                  </ul>
+              </div>
+          </div>
+          <span slot="footer" class="dialog-footer btns">
+              <button @click="saveDepart" class="save">保存</button>
+              <button  @click="centerDialogVisible = false" class="cancle">取消</button>
+          </span>
+        </el-dialog>
+  </div>
+</template>
+
+<script>
+import { userList } from '@/api/api';
+export default {
+  data(){
+    return{
+      centerDialogVisible:false,
+      searchVal:'',
+      selectedList:[],
+      personList:{
+        key:[],
+        list:[]
+      },
+      currentId:''
+    }
+  },
+  created(){
+    userList().then(res =>{
+        this.personList.key = Object.keys(res.data);
+        this.personList.list = Object.values(res.data);
+    })
+    this.$watch('searchVal', this.debounce((newValue, oldValue) => {
+          userList({name:this.searchVal}).then(res =>{
+              this.personList.key = Object.keys(res.data);
+              this.personList.list = Object.values(res.data);
+          })
+    }, 500))
+
+  },
+
+  methods:{
+      debounce (fn, delay) {
+        let timer = null
+        return function () {
+            let arg = arguments
+            clearTimeout(timer)
+            timer = setTimeout(() => {
+                fn.apply(this, arg)
+            }, delay)
+        }
+      },
+      chooseDepart(item){
+        if(this.selectedList.length>0){
+          this.$message({
+            message: '只能选择一个管理员',
+            type: 'warning'
+          });
+          return 
+        }
+        this.currentId = item.id;
+        this.selectedList.push(item)
+      },
+      delChooseDepart(i){
+        this.selectedList.splice(i,1);
+      },
+      //保存
+      saveDepart(){
+        this.centerDialogVisible = false;
+        this.$store.commit("chooseUserFun",this.selectedList[0])
+      }
+      
+  }
+}
+</script>
+
+<style lang="scss">
+.ent_chooseUser_dialog{
+      .el-dialog__header{
+          font-size: 26px;
+          color: $weight_color;
+      }
+      .content{
+          display: flex;
+          justify-content: space-between;
+          .content_left,.content_right{
+              width: 400px;
+              height: 400px;
+              border-radius: 6px;
+              margin: 0 5px;
+              display: flex;
+              flex-direction: column;
+              border: 1px solid #ECECEC;
+          }
+          .content_left{
+            h4{
+              padding: 14px 20px ;
+              font-size: 14px;
+              color: $weight_color;
+            }
+            .search{
+                margin-left: 20px;
+                width: 360px;
+                .el-input-group{
+                    width: 100%;
+                    border: 1px solid $border_color;
+                    border-radius: 18px;
+                    .el-input-group__prepend{
+                        border-radius: 18px 0 0 18px;
+                        background: #fff;
+                        border:none;
+                        padding: 0 12px;
+                        img{
+                            width: 24px;
+                            margin-top: 6px;
+                            cursor: pointer;
+                        }
+                    }
+                    .el-input__inner{
+                        border: none;
+                        height: 36px;
+                        border-radius: 0px  18px 18px 0;
+                        padding: 0 4px 0 0;
+                    }
+                }
+            }
+            ul{
+              flex: 1;
+              overflow: auto;
+              li{
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                float: none;
+                padding: 0;
+                border-bottom:none;
+                line-height: 40px;
+                color: $normal_color;
+                div{
+                  padding: 0 20px;
+                  width: 100%;
+                  cursor: pointer;
+                  border-bottom: 1px solid #ECECEC;
+                  display: flex;
+                  justify-content: space-between;
+                  span{
+                    display: inline;
+                  }
+                  &.active{
+                    background: #F5F5FB;
+                  }
+                }
+                strong{
+                  padding: 20px 20px 0;
+                  line-height: 24px;
+                  display: flex;
+                  align-items: center;
+                }
+              }
+            }
+          }
+          .content_right{ 
+            h4{
+              padding: 14px 15px;
+              font-size: 14px;
+              color: $weight_color;
+            }
+            ul{
+              flex: 1;
+              overflow: auto;
+              li{
+                float: none;
+                padding: 0 20px;
+                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
+                line-height: 40px;
+                color: $normal_color;
+                display: flex;
+                align-items: center;
+                span{
+                  padding-right: 20px;
+                }
+                .userName{
+                  margin-right: auto;
+                }
+                i{
+                  cursor: pointer;
+                  font-size: 24px;
+                  color: #AAAAAA;
+                }
+              }
+            }
+          }
+      }
+      button{
+          width: 132px;
+          height: 36px;
+          background: transparent;
+          border-radius: 6px;
+          margin: 0 20px;
+          font-size: 16px;
+          &:active{
+              opacity: 0.8;
+          }
+      }
+      .save{
+          border: 1px solid $light_color;
+          color: $light_color;
+      }
+      .cancle{
+          border: 1px solid #e0e0e0;
+          color: $normal_color;
+      }
+}
+
+</style>

src/views/ent/components/del.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="ent_del">
+      <el-dialog  :visible.sync="dialogTableVisible" destroy-on-close :show-close="false" width="380px" center="">
+        <template slot="title">
+          {{title}}
+        </template>
+          <slot name="content"></slot>
+          <div class="btns">
+            <slot name="del"></slot>
+            <button  @click="dialogTableVisible = false" class="cancle">取消</button>
+          </div>
+      </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props:["title"],
+  data(){
+    return{
+      dialogTableVisible:false
+    }
+  },
+  methods:{
+      delPart(){
+
+      }
+  }
+}
+</script>
+
+<style lang="scss">
+  .ent_del{
+    .el-dialog__wrapper{
+      display: flex;
+      align-items: center;
+      .el-dialog--center{
+        margin-top: 0!important;
+        padding: 12px 24px 22px;
+      }
+    }
+    p{
+      text-align: center;
+      line-height: 24px;
+    }
+    .btns{
+      display: flex;
+      margin-top: 40px;
+      justify-content: space-between;
+      button{
+        width: 132px;
+        height: 36px;
+        border-radius: 4px;
+      }
+      .del{
+        background: $light_color;
+        color: #fff;
+      }
+    }
+  }
+
+</style>

src/views/ent/components/depart.vue

@@ -1,136 +1,254 @@
 <template>
     <div class="ent_depart">
         <header class="ent_depart_header">
-            <h4>杭州琴月文创娱乐有限公司</h4> <span>已认证</span>
+            <h4>{{companyData.department}}</h4> <span>已认证</span>
         </header>
         <div class="ent_depart_screen">
-                <button @click="addDepart">添加部门</button>
-                <button class="del_btn">删除</button>
+                <button @click="addDepart('add')">添加部门</button>
+                <button class="del_btn" :disabled="selectDepart.length == 0" :class="{btnActive:selectDepart.length > 0}" @click="delDepart('all')">删除</button>
         </div>
         <div class="ent_depart_table">
             <h4><strong>公司/部⻔名称</strong><strong>管理员</strong><strong>人数</strong><strong>编辑</strong></h4>
             <ul>
-                <li>
-                    <span>公司/部⻔名称</span><span>管理员</span><span>人数</span><span>编辑</span>
+                <li v-if="companyMsg">
+                    <span>{{ companyData.department }}</span><span>{{ companyMsg.role }}</span><span>{{ companyMsg.num }}</span><span style="cursor: pointer;" v-if="companyMsg.role">编辑</span>
                 </li>
             </ul>
             <el-tree
-            :data="data"
-            show-checkbox
-            accordion
-            :indent="50"
-            node-key="id">
-            <span class="custom-tree-node" slot-scope="{ node }">
+                :data="data"
+                show-checkbox
+                accordion
+                @node-expand="getChildrenNode"
+                @check-change="allSelectNode"
+                :indent="50"
+                ref="tree"
+                node-key="id">
+            <span class="custom-tree-node" slot-scope="{ node,data }">
                 <span>{{ node.label }}</span>
-                <span>管理员</span><span>人数</span><span>编辑</span>
+                <span>{{ data.aname || "--" }}</span><span>{{ data.user_count }}</span><span @click.stop="addDepart('edit',data)">编辑</span>
             </span>
             </el-tree>
         </div>
-        <el-drawer
-            :withHeader="false"
-            :modal="false"
-            size="600px"
-            :show-close="false"
-            :visible.sync="drawer"
-            :direction="direction">
-            <div class="drawer_content">
+        <!-- 添加部门 -->
+        <add-drawer ref="addDrewer" v-if="whichPart === 'add'">
+            <template slot="formItem">
                 <h2>添加部门</h2>
                 <h4>部门信息</h4>
-                <el-form  :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
-                    <el-form-item label="部门名称 :" prop="name"
-                     :rules="[{ required: true, message: '请输入部门名称', trigger: 'blur' }]">
+                <div class="items">
+                    <label class="required">
+                        <span><i>*</i> 部门名称：</span>
                         <el-input v-model="ruleForm.name" placeholder="请输入部门名称"></el-input>
-                    </el-form-item>
-                    <el-form-item label="上级部门 :" prop="name"
-                     :rules="[{ required: true, message: '请选择上级部门', trigger: 'blur' }]">
-                        <el-input v-model="ruleForm.superior" readonly placeholder="请选择上级部门" @click="alert(1)"></el-input>
-                    </el-form-item>
-                    <el-form-item label="设置管理员 :" prop="name">
-                        <el-input v-model="ruleForm.user" placeholder="请选择管理员"></el-input>
-                    </el-form-item>
-                </el-form>
-                <el-dialog
-                title="提示"
-                :visible.sync="centerDialogVisible"
-                width="30%"
-                center>
-                <span>需要注意的是内容是默认不居中的</span>
-                <span slot="footer" class="dialog-footer">
-                    <el-button @click="centerDialogVisible = false">取 消</el-button>
-                    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
-                </span>
-                </el-dialog>
-                <div class="btns">
-                    <button class="save" @click="saveDepart">保存</button>
-                    <button class="cancle" @click="drawer=false">取消</button>
+                    </label>
+                     <label class="required">
+                        <span><i>*</i>上级部门：</span>
+                        <el-input v-model="departMsg.name" placeholder="请选择上级部门" readonly @focus="chooseDepartFc"></el-input>
+                    </label>
+                     <label>
+                        <span>设置管理员：</span>
+                        <el-input v-model="userMsg.name" placeholder="请选择管理员" readonly @focus="chooseUserFc"></el-input>
+                    </label>
                 </div>
-            </div>
-        </el-drawer>
+            </template>
+            <template slot="deleteBtn">
+                <button class="save" @click="saveDepart">保存</button>
+            </template>
+            
+        </add-drawer>
+
+        <!-- 编辑部门 -->
+         <add-drawer ref="addDrewer" v-if="whichPart === 'edit'">
+            <template slot="formItem">
+                <h2>编辑部门</h2>
+                <h4>部门信息</h4>
+                <div class="items">
+                    <label class="required">
+                        <span><i>*</i> 部门名称：</span>
+                        <el-input v-model="ruleForm.name" placeholder="请输入部门名称"></el-input>
+                    </label>
+                     <label class="required">
+                        <span><i>*</i>上级部门：</span>
+                        <el-input v-model="departMsg.name" placeholder="请选择上级部门" readonly @focus="chooseDepartFc"></el-input>
+                    </label>
+                   
+                     <label>
+                        <span>设置管理员：</span>
+                        <el-input v-model="userMsg.name" placeholder="请选择管理员"></el-input>
+                    </label>
+                </div>
+            </template>
+            <template slot="tips"><p class="tips">删除部门的同时，部门内部的人员也会删除</p></template>
+            <template slot="deleteBtn">
+                <button class="save" @click="saveDepart">保存</button>
+                <button class="del" @click="delDepart('single')">删除</button>
+            </template>
+        </add-drawer>
+        <!-- 删除弹窗 -->
+        <del-popup></del-popup>
+
+        <!-- //选择人员 -->
+        <choose-user ref="selectUser"></choose-user>
+
     </div>
 </template>
 
 <script>
-import { entinfo } from '@/api/api';
+import { entinfo,componyList,addDepartInter,departDetail,departUpdata , delDepartInter} from '@/api/api';
+import addDrawer from "./addDrawer";
+import delPopup from "./del"
+import chooseUser from "./chooseUser"
 export default {
+    components:{
+        addDrawer,delPopup,chooseUser
+    },
     data() {
-        const data = [{
-        id: 1,
-        label: '一级 1',
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 5,
-          label: '二级 2-1'
-        }, {
-          id: 6,
-          label: '二级 2-2',
-          children:[
-              {
-                  id:10,
-                  label:"三级",
-                  children:[{
-                      id:11,
-                      label:'四级'
-                  }]
-              }
-          ]
-        }]
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 7,
-          label: '二级 3-1'
-        }, {
-          id: 8,
-          label: '二级 3-2'
-        }]
-    }];
         return {
-            data: JSON.parse(JSON.stringify(data)),
-            drawer: false,
-            centerDialogVisible:false,
-            direction: 'rtl',
+            data: [],
             ruleForm: {
                 name: '',
-                superior:'',
-                user:''
             },
-        }
+            companyData:{},
+            whichPart:'add',//add: 添加 edit： 编辑
+            currentId:'',
+            selectDepart:[],
+         }
     },
     created() {
-        entinfo().then(res => {
-            
-        })
+        entinfo().then(res => {});
+        this.getOutData();
+    },
+    computed:{
+        companyMsg:function(){
+            let newObj ={role:'',num:''};
+            this.companyData.persons && this.companyData.persons.forEach((v,i) =>{
+                if(v.role){
+                    newObj.role = v.name;
+                    newObj.num = this.companyData.quota;
+                }
+            })
+            return newObj
+        },
+        departMsg:function(){
+            if(this.$store.state.chooseDepart){
+                return this.$store.state.chooseDepart
+            }else{
+                return {name:''}
+            }
+        },
+        userMsg:function(){
+            if(this.$store.state.chooseUser){
+                return this.$store.state.chooseUser
+            }else{
+                return {name:''}
+            }
+        }
     },
     methods: {
-        addDepart(){
-            this.drawer = true;
+        //dom tree 外层部门数据
+        getOutData(){
+            componyList({id:2608}).then(res =>{
+                this.companyData = res.data;   
+                let arr = this.dataHandling(this.companyData.departments)
+                this.data = JSON.parse(JSON.stringify(arr));
+                this.$store.commit('departListFun', this.companyData);
+            })
         },
+        //数据结构处理
+        dataHandling(list){
+           let arr = [];
+           list.map((el,i) =>{
+                arr.push({
+                      id:el.id,
+                      label:el.name,
+                      user_count:el.user_count ,
+                      aname:el.aname,
+                })
+                if(el.dept_count>0){
+                  arr[i] = Object.assign({children:[{}]},arr[i])
+                }
+           })
+           return arr;
+        },
+        //获取被选择的节点
+        allSelectNode(){
+            this.selectDepart = this.$refs.tree.getCheckedNodes();
+        },
+        //添加、编辑部门
+        addDepart(status,val){
+            this.whichPart = status;
+            this.$refs.addDrewer.openDrawer();
+            if(status === 'edit'){
+                this.currentId = val.id;
+                departDetail({id:val.id}).then(res =>{
+                    this.ruleForm.name = res.data.name;
+                    this.departMsg.name = res.data.pname;
+                    this.departMsg.id = res.data.pid;
+                    this.userMsg.name = res.data.aname;
+                    this.userMsg.id = res.data.aid;
+                })
+            }
+        },
+        //添加部门保存
         saveDepart(){
-            this.drawer = false;
-        }
+            console.log(this.departMsg)
+             if(this.whichPart === "add"){
+                addDepartInter({name:this.ruleForm.name,pid:this.departMsg.id,aid:this.userMsg.id}).then(res =>{
+                    if(res.error_code == 0){
+                        this.$refs.addDrewer.drawer = false;
+                        this.getOutData();
+                    }
+                })
+             }else{
+                departUpdata({name:this.ruleForm.name,pid:this.departMsg.id,aid:this.userMsg.id,id:this.currentId}).then(res =>{
+                    if(res.error_code == 0){
+                        this.$refs.addDrewer.drawer = false;
+                        this.getOutData();
+                    }
+                })
+             }
+               
+        },
+        //删除部门
+        delDepart(status){
+            // status  all:d多选删除  single:编辑单个删除
+            let delId = ''
+            if(status === 'all'){
+                this.selectDepart.forEach((v,i) =>{
+                    if(v.id){
+                        if(i === 0){
+                            delId += `${v.id}`
+                        }else{
+                            delId += `,${v.id}`
+                        } 
+                    }
+                })
+            }else{
+                delId = this.currentId;
+            }
+            delDepartInter({id:delId}).then(res =>{
+                if(res.data.status == 1){
+                    this.getOutData();
+                    this.$message({ message: '删除成功',type: 'success'});
+                }else{
+                    this.$message({message: '删除失败',type: 'warning'});
+                }
+                this.$refs.addDrewer.drawer = false;
+            })
+        },
+        //选则上级部门
+        chooseDepartFc(){
+            this.$refs.addDrewer.findCompont();
+        },
+        //选择管理员
+        chooseUserFc(){
+                this.$refs.selectUser.centerDialogVisible = true;
+        },
+        //获取子级部门
+        getChildrenNode(data) {
+            componyList({id:data.id}).then(res =>{
+              let arr = this.dataHandling(res.data.departments);
+               this.$set(data, 'children', arr);
+            })
+        },
     }
 }
 </script>
@@ -180,6 +298,10 @@ export default {
             .del_btn{
                 margin-right: auto;
                 color: #AAAAAA;
+                &.btnActive{
+                    color: $light_color;
+                    border: 1px solid $light_color;
+                }
             }
         }
         &_table{
@@ -279,62 +401,7 @@ export default {
                 }
             } 
         }
-        .drawer_content{
-            position: relative;
-            height: 100%;
-            h2{
-                height: 80px;
-                line-height: 80px;
-                font-size: 20px;
-                text-align: left;
-                padding: 0 30px;
-                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
-            }
-            h4{
-                height: 40px;
-                line-height: 40px;
-                font-size: 14px;
-                color: $light_color;
-                background: rgba(29, 186, 207, 0.05);
-                margin: 20px 60px;
-                border-radius: 4px;
-                text-align: left;
-                text-indent: 16px;
-            }
-            .el-form{
-                padding:  0 60px 0;
-            }
-            .btns{
-                height: 100px;
-                width: 100%;
-                box-shadow: 0px -8px 8px rgba(0, 0, 0, 0.05);
-                position: absolute;
-                bottom: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                button{
-                    width: 132px;
-                    height: 36px;
-                    background: transparent;
-                    border-radius: 6px;
-                    margin: 0 20px;
-                    font-size: 16px;
-                    &:active{
-                        opacity: 0.8;
-                    }
-                }
-                .save{
-                    border: 1px solid $light_color;
-                    color: $light_color;
-                }
-                .cancle{
-                    border: 1px solid #e0e0e0;
-                    color: $normal_color;
-                }
-            }
-
-        }
+        
     }
     
 </style>

src/views/ent/components/personal.vue

@@ -4,56 +4,276 @@
             <h4>杭州琴月文创娱乐有限公司</h4> <span>已认证</span>
         </header>
         <div class="ent_personal_screen">
-                <button>添加部门</button>
-                <button class="del_btn">删除</button>
+                <button @click="addPerson('add')">添加人员</button>
+                <button class="del_btn" :disabled="selectDepart.length == 0" :class="{btnActive:selectDepart.length > 0}" @click="delDepart('all')">删除</button>
                 <div class="search">
-                    <el-input placeholder="搜索" v-model="input1">
+                    <el-input  v-model="searchval" placeholder="请输入姓名、手机号">
                         <template slot="prepend"><img src="../../../assets/images/search.jpg" alt=""></template>
                     </el-input>
                 </div>
                <div class="department">
-                    <el-input
-                    placeholder="部门筛选"
-                    suffix-icon="el-icon-arrow-down"
-                    readonly
-                    v-model="input1">
-                </el-input>
+                    <el-select v-model="depart" placeholder="请选择" @change="getpersonData" clearable>
+                        <el-option
+                        v-for="item in departsList"
+                        :key="item.id"
+                        :label="item.dname"
+                        :value="item.id">
+                        </el-option>
+                    </el-select>
                </div>
         </div>
+        <div class="ent_personal_table">
+            <el-table :data="tableData" style="width: 100%" @selection-change="allSelectNode">
+                <el-table-column type="selection" width="55" :selectable="checkSelectable">
+                </el-table-column>
+                <el-table-column prop="name"  label="姓名" width="160" >
+                </el-table-column>
+                <el-table-column label="邮箱" width="180">
+                    <template slot-scope="scope">
+                            {{ scope.row.mail || '--' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="phone" label="手机">
+                </el-table-column>
+                <el-table-column width="200" prop="dname" label="部门">
+                </el-table-column>
+                <el-table-column
+                    label="角色">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.role == '企业管理员'" class="company_user">{{ scope.row.role }}</span>
+                        <span v-if="scope.row.role == '部门管理员'" class="depart_user">{{ scope.row.role }}</span>
+                        <span v-if="scope.row.role == ''" >员工</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    width="120"
+                    label="编辑">
+                    <template slot-scope="scope">
+                        <span class="edit" @click.stop="addPerson('edit',scope.row)" >编辑</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <el-pagination
+                background
+                layout="prev, pager, next"
+                :total="30">
+            </el-pagination>
+        </div>
+
+        <add-drawer ref="addDrewer" v-if="whichPart === 'add'">
+            <template slot="formItem">
+                 <h2>添加人员</h2>
+                <h4>人员信息</h4>
+                <div class="items">
+                    <label class="required">
+                        <span><i>*</i> 人员姓名：</span>
+                        <el-input v-model="ruleForm.name" placeholder="请输入人员姓名"></el-input>
+                    </label>
+                     <label class="required">
+                        <span><i>*</i>手机：</span>
+                        <el-input v-model="ruleForm.phone" placeholder="请输入人员手机号" ></el-input>
+                    </label>
+                     <label>
+                        <span>邮箱：</span>
+                        <el-input v-model="ruleForm.email" placeholder="请输入人员邮箱"></el-input>
+                    </label>
+                    <label>
+                        <span>部门：</span>
+                        <el-input v-model="departMsg.name" placeholder="请选择部门" readonly @focus="chooseDepartFc"></el-input>
+                    </label>
+                </div>
+            </template>
+            <template slot="deleteBtn">
+                <button class="save" @click="saveDepart">保存</button>
+            </template>
+        </add-drawer>
+
+        <add-drawer ref="addDrewer" v-if="whichPart === 'edit'">
+            <template slot="formItem">
+                 <h2>编辑人员</h2>
+                <h4>人员信息</h4>
+                <div class="items">
+                    <label class="required">
+                        <span><i>*</i> 人员姓名：</span>
+                        <el-input v-model="ruleForm.name" readonly placeholder="请输入人员姓名"></el-input>
+                    </label>
+                     <label class="required">
+                        <span><i>*</i>手机：</span>
+                        <el-input v-model="ruleForm.phone" readonly placeholder="请输入人员手机号" ></el-input>
+                    </label>
+                     <label>
+                        <span>邮箱：</span>
+                        <el-input v-model="ruleForm.email" placeholder="请输入人员邮箱"></el-input>
+                    </label>
+                    <label>
+                        <span>部门：</span>
+                        <el-input v-model="departMsg.name" placeholder="请选择部门" readonly @focus="chooseDepartFc"></el-input>
+                    </label>
+                </div>
+            </template>
+            <template slot="deleteBtn">
+                <button class="save" @click="saveDepart">保存</button>
+                <button class="del" @click="delDepart('single')">删除</button>
+            </template>
+        </add-drawer>
+
     </div>
 </template>
 
 <script>
-import { entinfo } from '@/api/api';
+import { personInter,departsAll,personAddInter,personDetailInter ,personUpdateInter,personDelInter} from '@/api/api';
+import addDrawer from "./addDrawer";
 export default {
+    components:{
+       addDrawer
+    },
     data() {
         return {
-            options: [{
-            value: '选项1',
-            label: '黄金糕'
-            }, {
-            value: '选项2',
-            label: '双皮奶'
-            }, {
-            value: '选项3',
-            label: '蚵仔煎'
-            }, {
-            value: '选项4',
-            label: '龙须面'
-            }, {
-            value: '选项5',
-            label: '北京烤鸭'
-            }],
-            value: '',
-            input1:''
+            depart: '',
+            input1:'',
+            searchval:'',
+            tableData: [],
+            departsList:[],
+            ruleForm: {
+                name: '',
+                phone:'',
+                email:'',
+                personId:''
+            },
+            whichPart:'add',//add: 添加 edit： 编辑
+            selectDepart:[],
         }
     },
     created() {
-        entinfo().then(res => {
-            
+        this.getpersonData();
+        this.$watch('searchval', this.debounce((newValue, oldValue) => {
+            this.getpersonData();
+        }, 500))
+        departsAll().then(res =>{
+            this.departsList  = res.data;
         })
     },
+    computed:{
+        departMsg:function(){
+            if(this.$store.state.chooseDepart){
+                return this.$store.state.chooseDepart
+            }else{
+                return {name:''}
+            }
+        },
+    },
     methods: {
+        allSelectNode(data){
+            console.log(data)
+            this.selectDepart = data;
+        },
+        debounce (fn, delay) {
+            let timer = null
+            return function () {
+                let arg = arguments
+                clearTimeout(timer)
+                timer = setTimeout(() => {
+                    fn.apply(this, arg)
+                }, delay)
+            }
+        },
+        //企业管理员禁止选中
+        checkSelectable(row){
+            console.log(row,"----row")
+            return row.role != "企业管理员";
+        },
+        //人员数据
+        getpersonData(){
+            console.log(this.depart)
+            personInter({
+                nameSort:'',
+                departmentSort:'',
+                page:1,
+                pageSize:10,
+                name:this.searchval,
+                department:this.depart
+            }).then(res => {
+                this.tableData = res.data.list;
+           })
+        },
+        //添加人员
+        addPerson(status,val){
+            this.whichPart = status;
+            if(status === 'edit'){
+                if(val.role == "企业管理员"){
+                    this.$message({message: '企业管理员禁止删除',type: 'warning'});
+                    return;
+                }
+                personDetailInter({id:val.id}).then(res =>{
+                    this.ruleForm.name = val.name;
+                    this.ruleForm.phone = val.phone;
+                    this.ruleForm.email = val.mail;
+                    this.ruleForm.personId = val.id;
+                    this.departMsg.name = res.data.dept_name;
+                    this.departMsg.id = res.data.dept_id;
+                })
+            }
+            this.$refs.addDrewer.drawer = true;
+        },
+        //删除人员
+        delDepart(status){
+            // status  all:d多选删除  single:编辑单个删除
+            let delId = ''
+            if(status === 'all'){
+                this.selectDepart.forEach((v,i) =>{
+                    if(v.id){
+                        if(i === 0){
+                            delId += `${v.id}`
+                        }else{
+                            delId += `,${v.id}`
+                        } 
+                    }
+                })
+            }else{
+                delId = this.ruleForm.personId;
+            }
+            personDelInter({id:delId}).then(res =>{
+                if(res.data.status == 1){
+                    this.getpersonData();
+                    this.$message({ message: '删除成功',type: 'success'});
+                }else{
+                    this.$message({message: '删除失败',type: 'warning'});
+                }
+                this.$refs.addDrewer.drawer = false;
+            })
+        },
+        // 选择下级
+        chooseDepartFc(){
+            this.$refs.addDrewer.findCompont();
+        },
+        // 保存、编辑人员信息
+        saveDepart(){
+            console.log(this.departMsg)
+             if(this.whichPart === "add"){
+                personAddInter({name:this.ruleForm.name,phone:this.ruleForm.phone,mail:this.ruleForm.email,id:this.departMsg.id}).then(res =>{
+                    if(res.data.status == 1){
+                        this.$refs.addDrewer.drawer = false;
+                        this.getpersonData();
+                        this.$message({message: '添加成功',type: 'success'});
+                    }else{
+                        this.$message({ message: '添加失败', type: 'warning'});
+                    }
+                })
+             }else{
+                personUpdateInter({mail:this.ruleForm.email,did:this.departMsg.id,id:this.ruleForm.personId}).then(res =>{
+                    if(res.data.status == 1){
+                        this.$refs.addDrewer.drawer = false;
+                        this.getpersonData();
+                        this.$message({ message: '修改成功', type: 'success'
+                        });
+                    }else{
+                        this.$message({ message: '修改失败', type: 'warning' });
+                    }
+                })
+             }
+               
+        },
     }
 }
 </script>
@@ -103,11 +323,17 @@ export default {
             .del_btn{
                 margin-right: auto;
                 color: #AAAAAA;
+                &.btnActive{
+                    color: $light_color;
+                    border: 1px solid $light_color;
+                }
             }
             .search{
                 margin-right: 20px;
                 .el-input-group{
                     width: 200px;
+                    border: 1px solid $border_color;
+                    border-radius: 18px;
                     .el-input-group__prepend{
                         border-radius: 18px 0 0 18px;
                         background: #fff;
@@ -128,21 +354,41 @@ export default {
                 }
             }
             .department{
-                .el-input{
-                    width: 200px;
+                .el-input__inner{
                     height: 36px;
-                    .el-input__inner{
-                        height: 36px;
                     border-radius: 18px;
-                    }
-                    .el-input__icon{
-                        line-height: 36px;
-                        color: $light_color;
-                    }
+                }
+                .el-select .el-input .el-select__caret{
+                    color: $light_color;
+                    margin-top:2px;
                 }
             }
             
         }
+        &_table{
+            .el-table thead{
+                color: $weight_color;
+                font-size: 14px;
+                .cell{
+                    font-weight: bolder;
+                }
+                
+            }
+            .edit{
+                display: block;
+                color: $light_color;
+                cursor: pointer;
+            }
+            .company_user{
+                color: $light_color;
+            }
+            .depart_user{
+                color: #FF9F40;
+            }
+        }
+    }
+    .el-select-dropdown__item{
+        float: none;
     }
     
 </style>

src/views/ent/components/powerPerson.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="ent_powerPerson">
+      <el-dialog
+          title="选择数据导出使用人员"
+          :show-close="false"
+          :visible.sync="centerDialogVisible"
+          width="890px"
+          center>
+          <div class="content">
+              <div class="content_left">
+                  <h4>选择</h4>
+                  <div class="search">
+                    <el-input  v-model="searchVal" placeholder="搜索" >
+                      <template slot="prepend"><img src="../../../assets/images/search.jpg" alt=""></template>
+                    </el-input>
+                  </div>
+                  <div class="allList">
+                    <div v-for="item in personList.list" :key="item.id">
+                      <h5><el-checkbox v-model="item.status"></el-checkbox> <span class="noselect"  @click="toggle(item)">{{ item.name }}</span> <i class="el-icon-arrow-down"></i></h5>
+                      <div class="itemList" :class="{toggle:!item.toggle}" >
+                         <div v-for="val in item.users" :key="val.user_id" @click="chooseUser(val)">
+                            <span class="userName">{{ val.username }}</span> <span> {{ val.phone }}</span> 
+                         </div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+              <div class="content_right">
+                  <h4>已选</h4>
+                  <ul>
+                    <li v-for="(item,i) in selectedList" :key="item.id">
+                      <span class="userName">{{ item.username }}</span><span>{{ item.phone }}</span><i class="el-icon-error" @click="delChooseUser(i)"></i>
+                    </li>
+                  </ul>
+              </div>
+          </div>
+          <p>已选择{{ personList.checked }}人共购买{{ personList.quota }}人</p>
+          <span slot="footer" class="dialog-footer btns">
+              <button @click="saveDepart" class="save">保存</button>
+              <button  @click="centerDialogVisible = false" class="cancle">取消</button>
+          </span>
+        </el-dialog>
+  </div>
+</template>
+
+
+<script>
+import { user_sjPersonListInter } from "@/api/api";
+export default {
+   data(){
+     return{
+       centerDialogVisible:false,
+       searchVal:'',
+       personList:{},
+       selectedList:[],
+       checked:false
+     }
+   },
+   created(){
+      this.getData();
+   },
+   methods:{
+     getData(){
+        user_sjPersonListInter({name:this.searchVal}).then(res =>{
+          console.log(res.data);
+          res.data.list.forEach(v =>{
+            v.toggle = true;
+            v.status = false;
+          })
+          this.personList = res.data;
+          this.selectedList = res.data.checkedList;
+        })
+     },
+     //选择人员
+     chooseUser(val){
+        this.selectedList.push(val)
+     },
+     //删除人员
+     delChooseUser(i){
+        this.selectedList.splice(i,1);
+     },
+     saveDepart(){},
+     toggle(val){
+       val.toggle = !val.toggle;
+
+     }
+   }
+}
+</script>
+
+<style lang="scss">
+  .ent_powerPerson{
+      .el-dialog__header{
+          font-size: 26px;
+          color: $weight_color;
+      }
+      .content{
+          display: flex;
+          justify-content: space-between;
+          .content_left,.content_right{
+              width: 400px;
+              height: 400px;
+              border-radius: 6px;
+              margin: 0 5px;
+              display: flex;
+              flex-direction: column;
+              border: 1px solid #ECECEC;
+          }
+          .content_left{
+            h4{
+              padding: 14px 20px ;
+              font-size: 14px;
+              color: $weight_color;
+            }
+            .search{
+                margin-left: 20px;
+                width: 360px;
+                .el-input-group{
+                    width: 100%;
+                    border: 1px solid $border_color;
+                    border-radius: 18px;
+                    .el-input-group__prepend{
+                        border-radius: 18px 0 0 18px;
+                        background: #fff;
+                        border:none;
+                        padding: 0 12px;
+                        img{
+                            width: 24px;
+                            margin-top: 6px;
+                            cursor: pointer;
+                        }
+                    }
+                    .el-input__inner{
+                        border: none;
+                        height: 36px;
+                        border-radius: 0px  18px 18px 0;
+                        padding: 0 4px 0 0;
+                    }
+                }
+            }
+            .allList{
+              flex: 1;
+              overflow: auto;
+              >div{
+                h5,.itemList>div{
+                   padding: 0 20px;
+                   line-height: 40px;
+                   box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
+                }
+                h5{
+                  margin-top: 10px;
+                  color: $weight_color;
+                  display: flex;
+                  >span{
+                    flex: 1;
+                    margin-left: 10px;
+                    cursor: pointer;
+                  }
+                  align-items: center;
+                  .el-checkbox__inner,.el-checkbox__input.is-checked .el-checkbox__inner{
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    font-size: 30px;
+                  }
+                  .el-checkbox__input.is-checked .el-checkbox__inner::after {
+                      transform: rotate(45deg) scaleY(1.4) translate(5px, 0px);
+                  }
+                  .el-checkbox__input.is-checked + .el-checkbox__label{
+                    color: $weight_color;
+                  }
+                  i{
+                    font-size: 16px;
+                     color: #aaa;
+                  }
+                }
+                .itemList{
+                  transition: all  0.5s ;
+                  opacity: 1;
+                  max-height:400px;
+                  >div{
+                    cursor: pointer;
+                    color: $normal_color;
+                    display: flex;
+                    align-items: center;
+                    span{
+                      padding-right: 20px;
+                    }
+                    .userName{
+                      margin-right: auto;
+                    }
+                    &.active{
+                      background: #F5F5FB;
+                    }
+                  }
+                &.toggle{
+                  max-height: 0px!important;
+                  opacity: 0;
+                  overflow: hidden;
+                }
+                }
+              }
+              
+            }
+          }
+          .content_right{ 
+            h4{
+              padding: 14px 15px;
+              font-size: 14px;
+              color: $weight_color;
+            }
+            ul{
+              flex: 1;
+              overflow: auto;
+              li{
+                float: none;
+                padding: 0 20px;
+                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
+                line-height: 40px;
+                color: $normal_color;
+                display: flex;
+                align-items: center;
+                span{
+                  padding-right: 20px;
+                }
+                .userName{
+                  margin-right: auto;
+                }
+                i{
+                  cursor: pointer;
+                  font-size: 24px;
+                  color: #AAAAAA;
+                }
+              }
+            }
+          }
+      }
+      p{
+        color: $light_color;
+        line-height: 24px;
+        padding: 20px 0 0;
+        text-align: center;
+      }
+      button{
+          width: 132px;
+          height: 36px;
+          background: transparent;
+          border-radius: 6px;
+          margin: 0 20px;
+          font-size: 16px;
+          &:active{
+              opacity: 0.8;
+          }
+      }
+      .save{
+          border: 1px solid $light_color;
+          color: $light_color;
+      }
+      .cancle{
+          border: 1px solid #e0e0e0;
+          color: $normal_color;
+      }
+  }
+
+</style>

vue.config.js

@@ -13,16 +13,22 @@ module.exports = {
     open: true,
     port: "8086",
     hot: true,
+    disableHostCheck: true,
     proxy: {
       "/api": {
         // target: "https://app2-jytest.jianyu360.cn",
-        // target: "http://192.168.20.241:813",
-        target: "http://127.0.0.1:812",
+        target: "http://192.168.20.241:813",
+        // target: "http://127.0.0.1:812",
+
+        // target:'http://192.168.20.51:815/entbase',
+        // target:'http://192.168.20.51:813/entdataexport',
+        // target:'http://192.168.20.214:812/entniche',
         changeOrigin: true,
+        ws: true,
         pathRewrite: {
           "^/api": ""
         }
-      }
+      },
     }
   }
 }