选人组件编写

src/assets/styles/ruoyi.scss

@@ -82,6 +82,7 @@
   max-height: calc(100% - 70px);
   .el-dialog__body {
     overflow: auto;
+    overflow-x: hidden;
   }
 }
 

src/components/AppList/index.vue

@@ -47,8 +47,8 @@ export default {
             },
             {
               type: 2,
-              path: '/system/user',
-              title: '请假',
+              path: '/oa/entry',
+              title: '入职审批',
               icon: 'qingjia',
             },
             {

src/components/PeopleSelect/index.vue

@@ -0,0 +1,627 @@
+<template>
+    <div>
+      <el-dialog
+        :title="'人员选择' + (type == 'multiple' ? '(多选)' : '(单选)')"
+        :visible.sync="open"
+        :width="width || '900px'"
+        :height="height || '650px'"
+        :before-close="handleClose"
+        append-to-body
+      >
+        <div class="selectBox">
+          <div class="bottomBox" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label="用户姓名" prop="nickName">
+                    <el-input
+                      v-model="queryParams.nickName"
+                      placeholder="请输入用户姓名"
+                      clearable
+                      style="width: 200px"
+                      size="mini"
+                      @keyup.enter.native="getList"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="手机号码" prop="phonenumber">
+                    <el-input
+                      v-model="queryParams.phonenumber"
+                      placeholder="请输入手机号码"
+                      clearable
+                      style="width: 200px"
+                      size="mini"
+                      @keyup.enter.native="getList"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
+                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+  
+            </el-form>
+          </div>
+          <div class="topBox">
+            <div class="leftBox">
+              <div class="contentBox">
+                <div class="leftBox_title">组织架构</div>
+                <div style="padding: 4px;margin-bottom: 4px;">
+                  <el-input
+                    v-model="deptName"
+                    placeholder="请输入部门名称"
+                    clearable
+                    size="mini"
+                    prefix-icon="el-icon-search"
+                  >
+                  </el-input>
+                </div>
+                <div class="treeBox">
+                  <el-tree
+                    :data="deptOptions"
+                    :props="defaultProps"
+                    :expand-on-click-node="false"
+                    :filter-node-method="filterNode"
+                    ref="tree"
+                    node-key="id"
+                    default-expand-all
+                    highlight-current
+                    @node-click="handleNodeClick"
+                  />
+                </div>
+              </div>
+            </div>
+  
+            <div class="leftBox">
+              <div class="contentBox">
+                <div class="leftBox_title">
+                  人员选择
+                  <!-- <el-checkbox class="leftBox_title_do" style="right: 60px" v-model="userNodeAll" @change="handleCheckedNodeAll($event)">全选</el-checkbox>
+                  <el-checkbox class="leftBox_title_do" v-model="cancelUserNodeAll" @change="handleCheckedNodeAll($event)">全不选</el-checkbox> -->
+                  <el-button v-if="type == 'multiple'" class="leftBox_title_do" style="right: 70px" type="text"
+                             size="mini" @click="handleCheckedNodeAll(true)">全选
+                  </el-button>
+                  <el-button v-if="type == 'multiple'" class="leftBox_title_do" type="text" size="mini"
+                             @click="handleCheckedNodeAll(false)">全不选
+                  </el-button>
+                </div>
+  
+                <div class="peopleBox">
+                  <div class="peopleList">
+                    <el-checkbox-group ref="peopleCheckBoxes" v-model="checkedUsers" @change="handleCheckedUsersChange"
+                                       :max="type == 'single' ? 1 : 2147483647">
+                      <el-checkbox
+                        v-for="item in userList"
+                        :label="item.username"
+                        :key="item.username"
+                        class="peopleCard"
+                      >
+                        <div class="avatarBox">
+                          <!-- <img v-if="item.avatar && item.avatar != ''" :src="item.avatar" class="user-avatar" onerror="οnerrοr=null;if(item) item.avatar = '';"> -->
+                          <div style="background: #FFA502;" class="user-avatar">{{ item.nickname.substring(0,1) ||
+                            item.username.substring(0,1) || 'User' }}
+                          </div>
+                        </div>
+                        <div class="peopleInfoBox">
+                          <div class="peopleName">{{ item.nickname }}</div>
+                          <div class="peopleDept">{{ item.dept ? item.dept.name : '' }}</div>
+                        </div>
+                      </el-checkbox>
+                    </el-checkbox-group>
+  
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- this.checkedUsers -->
+            <div class="leftBox">
+              <div class="contentBox">
+                <div class="leftBox_title">已选择人员
+                  <el-button v-if="type == 'multiple'" class="leftBox_title_do" type="text" size="mini" @click="clearAll">
+                    全部清空
+                  </el-button>
+                </div>
+                <div class="peopleBox">
+                  <div class="peopleList">
+                    <div
+                      v-for="item in selectedUserList"
+                      class="peopleCard"
+                    >
+                      <div class="avatarBox">
+                        <!-- <img v-if="item.avatar && item.avatar != ''" :src="item.avatar" class="user-avatar" onerror="οnerrοr=null;if(item) item.avatar = '';"> -->
+                        <div style="background: #FFA502;" class="user-avatar">{{ item.nickname.substring(0,1) ||
+                            item.username.substring(0,1) || 'User' }}
+                          </div>
+                      </div>
+                      <div class="peopleInfoBox">
+                        <div class="peopleName" style="margin-top:4px">{{ item.nickname }}</div>
+                        <div class="peopleDept">{{ item.dept ? item.dept.name : '' }}</div>
+                      </div>
+  
+                      <div class="peopleDeleteBtn" @click="deleteUserByUserName(item.username)"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+  
+        </div>
+  
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  
+  </template>
+  
+  <script>
+  
+    import { listUser } from '@/api/system/user';
+    import {listSimpleDepts} from "@/api/system/dept";
+    import Treeselect from '@riophae/vue-treeselect';
+    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  
+    export default {
+      name: 'PeopleSelect',
+      dicts: ['sys_normal_disable', 'sys_user_sex'],
+      components: { Treeselect },
+      props: {
+        width: {
+          type: String,
+          default: '900px'
+        },
+        height: {
+          type: String,
+          default: '650px'
+        },
+        type: {
+          type: String,
+          default: 'single' //single or multiple
+        },
+        open: {
+          type: Boolean,
+          default: false
+        }
+        // value: {
+        //     type: Object,
+        //     default: {
+        //         username: [],
+        //         realName: []
+        //     }
+        // }
+      },
+      computed: {},
+      data() {
+        return {
+  
+          loading: false,
+  
+          // open: false,
+          activeName: 'first',
+          defaultProps: {
+            children: "children",
+            label: "name"
+          },
+          // 部门树选项
+          deptOptions: undefined,
+          deptName: '',
+          showSearch: true,
+  
+          userList: [],
+          allUserList: [],
+          allUserMap: new Map(),
+          selectedUserList: [],
+  
+          // 查询参数
+          queryParams: {
+            pageNum: 1,
+            pageSize: 100,
+            username: undefined,
+            phonenumber: undefined,
+            status: '0',
+            deptId: undefined
+          },
+  
+          //已选择的用户信息
+          checkedUsers: []
+  
+          //   userNodeAll: false,
+          //   cancelUserNodeAll: false,
+  
+        }
+      },
+      created() {
+        this.getDeptTree()
+        this.getAllUserList()
+      },
+      watch: {
+        // 根据名称筛选部门树
+        deptName(val) {
+          this.$refs.tree.filter(val)
+        }
+      },
+      methods: {
+        handleClose(done) {
+          this.$confirm('确认关闭？')
+            .then(_ => {
+              this.cancel()
+            })
+            .catch(_ => {
+            })
+        },
+        handleClick(tab, event) {
+          console.log(tab, event)
+        },
+  
+        //获取选中的人员昵称列表
+        getNickNameList(uns) {
+          let result = []
+  
+          uns.forEach(item => {
+            if (this.allUserMap.has(item)) {
+              result.push(this.allUserMap.get(item).nickname || '')
+            }
+          })
+  
+          return result
+        },
+        //获取选中的人员ID列表
+        getUserIdList(uns) {
+          let result = []
+          console.log(this.allUserMap);
+          uns.forEach(item => {
+            if (this.allUserMap.has(item)) {
+              result.push(this.allUserMap.get(item).userId || '')
+            }
+          })
+  
+          return result
+        },
+  
+        submitForm() {
+          // console.log(this.checkedUsers, this.getNickNameList(this.checkedUsers));
+          this.$emit('submit', this.checkedUsers, this.getNickNameList(this.checkedUsers), this.getUserIdList(this.checkedUsers)) //返回username和nickname
+        },
+        cancel() {
+          this.$emit('cancel')
+        },
+        // 筛选节点
+        filterNode(value, data) {
+          if (!value) return true
+          return data.label.indexOf(value) !== -1
+        },
+        // 节点单击事件
+        handleNodeClick(data) {
+          this.queryParams.deptId = data.id
+          this.getList()
+        },
+        /** 查询部门下拉树结构 */
+        getDeptTree() {
+            listSimpleDepts().then(response => {
+        // 处理 deptOptions 参数
+        this.deptOptions = [];
+        this.deptOptions.push(...this.handleTree(response.data, "id"));
+      });
+        },
+  
+        //第一步要做的 checkedUsers 为数组如['admin','ry'] 在父组件调用此方法并传入要回显的数组可进行复选框回显操作
+        getAllUserList(checkedUsers = []) {
+          //查出所有的用户，用于根据不同情况筛选显示
+          listUser({ pageNum: 1, pageSize: 100, status: '0' }).then(response => {
+              this.allUserList = response.data.list
+  
+              this.allUserMap = new Map()
+  
+              this.checkedUsers = checkedUsers
+  
+              this.allUserList.forEach(item => {
+                this.allUserMap.set(item.username, item)
+              })
+              this.updateCheckedUsers()
+              //   console.log(this.allUserList, this.allUserMap);
+              this.getList()
+            }
+          )
+        },
+  
+        /** 查询用户列表 */
+        getList() {
+          listUser(this.queryParams).then(response => {
+              this.userList = response.data.list
+                console.log(this.userList);
+            }
+          )
+        },
+  
+        /** 重置按钮操作 */
+        resetQuery() {
+          this.resetForm('queryForm')
+          this.queryParams.deptId = undefined
+          this.$refs.tree.setCurrentKey(null)
+          this.getList()
+        },
+  
+        handleCheckedUsersChange(val) {
+          console.log(this.$refs.peopleCheckBoxes.value);
+          console.log(this.checkedUsers);
+          console.log(this.allUserMap);
+          this.updateCheckedUsers()
+        },
+  
+        updateCheckedUsers() {
+          this.selectedUserList = []
+  
+          this.checkedUsers.forEach(item => {
+            if (this.allUserMap.has(item)) {
+              let u = this.allUserMap.get(item)
+              this.selectedUserList.push(u)
+            }
+          })
+        },
+  
+        deleteUserByUserName(username) {
+          for (let i = 0; i < this.checkedUsers.length; i++) {
+            if (this.checkedUsers[i].indexOf(username) != -1) {
+              this.checkedUsers.splice(i, 1)
+              this.updateCheckedUsers()
+              break
+            }
+          }
+        },
+  
+        handleCheckedNodeAll(val) {
+          if (val) { //全选
+            this.userList.forEach(item => {
+              for (let i = 0; i < this.checkedUsers.length; i++) {
+                if (this.checkedUsers[i] == item.username) { //已存在，跳过
+                  return
+                }
+              }
+              //不存在，执行添加
+              this.checkedUsers.push(item.username)
+            })
+          } else { //全不选
+            this.userList.forEach(item => {
+              for (let i = 0; i < this.checkedUsers.length; i++) {
+                if (this.checkedUsers[i] == item.username) { //已存在，执行删除
+                  this.checkedUsers.splice(i, 1)
+                  return
+                }
+              }
+              //不存在，无需操作
+  
+            })
+          }
+          this.updateCheckedUsers()
+        },
+  
+        clearAll() {
+          this.checkedUsers = []
+          this.updateCheckedUsers()
+        }
+  
+      }
+    }
+  </script>
+  
+  <style lang="scss" scoped>
+  
+    .selectBox {
+      width: 100%;
+      min-width: 900px;
+      display: flex;
+      flex-direction: column;
+  
+      .topBox {
+        width: 100%;
+        display: flex;
+        margin-top: 0px;
+  
+        .leftBox {
+          width: 280px;
+          height: 400px;
+          margin-right: 10px;
+  
+          -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+          display: flex;
+          flex-direction: column;
+  
+          .leftBox_title {
+            width: 100%;
+            height: 40px;
+            font-size: 16px;
+            line-height: 40px;
+            padding-left: 10px;
+            background-color: #f5f5f5;
+            position: relative;
+  
+            .leftBox_title_do {
+              position: absolute;
+              right: 16px;
+              top: 8px;
+            }
+          }
+  
+          .contentBox {
+            width: 100%;
+  
+          }
+        }
+      }
+  
+      .bottomBox {
+        margin-top: 15px;
+        width: 100%;
+        height: 55px;
+        // border: 1px solid #DCDFE6;
+        // -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+        // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+        // overflow-y: auto;
+  
+        .selectPeopleList {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+  
+          .selectPeopleCard {
+            width: 50px;
+            height: 56px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 5px 10px;
+  
+            .user-avatar {
+              width: 40px;
+              height: 40px;
+              border-radius: 50%;
+              color: #fff;
+              background: #FFA502;
+              font-size: 14px;
+              text-align: center;
+              line-height: 40px;
+            }
+  
+            .userInfo {
+              width: 100%;
+              display: flex;
+              flex-direction: column;
+              margin-left: 5px;
+              margin-right: 5px;
+  
+              div:nth-child(1) {
+                font-size: 14px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 100%;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+  
+    }
+  
+    .treeBox {
+      width: 100%;
+      height: 320px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  
+    .peopleBox {
+      width: 100%;
+      height: 360px;
+      overflow-x: hidden;
+      overflow-y: auto;
+  
+      .peopleList {
+        width: 100%;
+        height: auto;
+  
+  
+        .peopleCard:hover {
+          background-color: #fafafa;
+          transition: .2s;
+  
+          .peopleName {
+            color: #eb6100;
+          }
+        }
+  
+        .peopleCard {
+          width: 100%;
+          height: 48px;
+          border-top: solid #f5f5f5 1px;
+          border-bottom: solid #f5f5f5 1px;
+          padding-left: 8px;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          transition: .2s;
+  
+          ::v-deep .el-checkbox__label {
+            display: flex;
+            align-items: center;
+          }
+  
+          .avatarBox {
+            width: 40px;
+            height: 40px;
+  
+            .user-avatar {
+              width: 40px;
+              height: 40px;
+              border-radius: 50%;
+              color: #fff;
+              font-size: 16px;
+              text-align: center;
+              line-height: 40px;
+              user-select: none;
+            }
+          }
+  
+          .peopleInfoBox {
+            width: 190px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            padding-left: 8px;
+  
+            .peopleName {
+              width: 100%;
+              height: 20px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              font-size: 16px;
+              line-height: 20px;
+  
+            }
+  
+            .peopleDept {
+              width: 100%;
+              height: 20px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              font-size: 14px;
+              line-height: 20px;
+              color: #999;
+            }
+          }
+  
+          .peopleDeleteBtn {
+            width: 20px;
+            height: 20px;
+            // border-radius: 50%;
+            background: url(../../assets/images/delete2.png) no-repeat;
+            background-size: 100% 100%;
+            transition: .2s;
+          }
+  
+          .peopleDeleteBtn:hover {
+            width: 20px;
+            height: 20px;
+            // border-radius: 50%;
+            background: url(../../assets/images/delete2.png) no-repeat;
+            background-size: 100% 100%;
+            transition: .2s;
+          }
+        }
+      }
+    }
+  
+  </style>
+  
+  

src/layout/components/Oabar.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="navbar">
+    <div class="left-menu">
+        <i class="el-icon-arrow-left icon-menu" slot="reference" @click="backHome()"></i>
+        <div class="divider"></div>
+        <div class="text" :class="{'activate': status}" @click="changeStatus()">
+          发起审批
+        </div>
+        <div class="text" :class="{'activate': !status}" @click="changeStatus()">
+          查看数据
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getPath} from "@/utils/ruoyi";
+import logoImg from '@/assets/logo/work.png'
+export default {
+  data() {
+    return {
+      status: true,
+      logo: logoImg
+    }
+  },
+  methods: {
+    backHome(){
+      this.$router.push({path: '/'})
+    },
+    changeStatus(){
+      this.status = !this.status
+      this.$parent.setStatus(this.status);
+    },
+
+    childMethod() {
+        this.$parent.fatherMethod();
+    },
+    async logout() {
+      this.$modal.confirm('确定注销并退出系统吗？', '提示').then(() => {
+        this.$store.dispatch('LogOut').then(() => {
+          location.href = getPath('/index');
+        })
+      }).catch(() => {});
+    }
+  }
+}
+</script>
+<style lang="scss">
+.down-popover {
+  top: 60px !important;
+}
+</style>
+<style lang="scss" scoped>
+a {
+  outline: none;
+  text-decoration: none;
+}
+.corp-switch{
+  align-items: center;
+  display: flex;
+  height: 65px;
+  justify-content: space-between;
+  padding-left: 20px;
+  .current-corp {
+      color: #141e31;
+      font-size: 18px;
+      line-height: 32px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 240px;
+  }      
+}
+.navbar {
+  height: 60px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .topmenu-container {
+    position: absolute;
+    left: 50px;
+  }
+
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+  
+  .left-menu {
+    font-size: 18px;
+    padding: 0px 15px;
+    float: left;
+    height: 100%;
+    // line-height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    .icon-menu:hover {
+        background: #e6e8ed;
+        border-radius: 3px;
+    }
+    .icon-menu{
+      color: #525967;
+      cursor: pointer;
+      display: inline-block;
+      font-size: 20px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      width: 30px;
+    }
+    .divider{
+      height: 20px;
+      margin: 0 5px;
+      border: solid #EBECEE;
+      border-width: 0 0 0 1px;
+      display: inline-block;
+      height: .9em;
+      // margin: 0 15px;
+      vertical-align: middle;
+    }
+    .text:hover {
+        background: #e6e8ed;
+    }
+    
+    .text{
+      font-size: 18px;
+      height: 50px;
+      align-items: center;
+      border-radius: 4px;
+      color: gray;
+      display: flex;
+      padding: 0 20px;
+      transition: background .2s ease;
+      .menu-icon{
+        background-size: 100px 20px;
+        height: 20px;
+        margin-right: 5px;
+        width: 20px;
+      }
+    }
+    .activate{
+      color: black;
+      font-weight: 800;
+    }
+  }
+  
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 60px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background .3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, .025)
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 20px;
+
+      .avatar-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 35px;
+          height: 35px;
+          border-radius: 50%;
+        }
+        .user-nickname{
+          margin-left: 5px;
+          font-size: 14px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -39,6 +39,11 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/oa/entry',
+    component: (resolve) => require(['@/views/oa/entry'], resolve),
+    hidden: true
+  },
   {
     path: '/password/forget',
     component: (resolve) => require(['@/views/password/forget'], resolve),

src/views/oa/entry.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+      <div class='fixed-header'>
+        <oabar />
+      </div>
+      <div class="dashboard-container">
+       <div v-if="status" class="apply-box">
+        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
+          
+          <el-button type="primary" icon="el-icon-search" @click="openPS" size="mini" >打开选人组件</el-button>
+          <PeopleSelect ref="peopleSelect" :type="type" :isCheck="true" :open="peopleOpen" @cancel="peopleOpen=false"   @submit="submitPeople"></PeopleSelect>
+        </el-card>
+       
+       </div>
+       <div v-else class="data-list-box">
+        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
+            查看数据
+        </el-card>
+        
+       </div>
+  
+      </div>
+     
+    </div>
+  </template>
+  
+  <script>
+  import { getUnreadNotifyMessageList } from "@/api/system/notify/message";
+  import Oabar from '../../layout/components/Oabar.vue'
+  import PeopleSelect from "@/components/PeopleSelect/index.vue";
+  
+  export default {
+    name: 'Index',
+    components: {
+        Oabar,
+        PeopleSelect,
+    },
+    data() {
+      return {
+        status:true,
+        
+        type: 'single',
+        //是否打开选人组件，默认不打开
+        peopleOpen:false,
+      }
+    },
+  
+    created() {
+  
+    },
+    methods: {
+      //打开选人弹窗
+      openPS(){
+        this.peopleOpen=true;
+       },
+      //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
+      submitPeople(peopleList){
+      console.log(peopleList);
+        this.peopleOpen=false;
+      },
+        setStatus(status){
+            this.status = status
+        },
+    }
+  }
+  </script>
+  <style>
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: 100%;
+    transition: width 0.28s;
+  }
+  
+  .dashboard-container {
+    background: #f5f6f8;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    position: absolute;
+    right: 0;
+    top: 60px;
+    padding: 32px;
+    .apply-box{
+        width: 80%;
+        margin: 0 auto;
+    }
+    .data-list-box{
+        width: 100%;
+        margin: 0 auto;
+    }
+  }
+  
+  
+  
+  </style>
+