Browse Source

update 扫楼人员管理

GuoYuFu123 5 years ago
parent
commit
f6f8315c7f

+ 1 - 1
src/views/data_admin/buildLog/Action.vue

@@ -69,7 +69,7 @@ export default {
 
 <style scoped lang='less'>
 .log-dialog {
-    height: 500px;
+    height: 300px;
     overflow: auto;
     dl {
         font-size: 20px;

+ 7 - 7
src/views/data_admin/buildLog/index.vue

@@ -35,13 +35,13 @@
                 style='width: 100%; margin-top:10px;'
                 v-loading='loading'
             >
-                <el-table-column prop='CreateTime' label='时间' width='150'></el-table-column>
-                <el-table-column prop='Comming' label='来源' width='120'></el-table-column>
-                <el-table-column prop='UserName' label='操作人' width='120'></el-table-column>
-                <el-table-column prop='Phone' label='手机' width='150'></el-table-column>
-                <el-table-column prop='Action' label='动作'></el-table-column>
-                <el-table-column prop='UserId' label='对象id'></el-table-column>
-                <el-table-column label='操作说明' width='350'>
+                <el-table-column prop='CreateTime' label='时间' width='150' align='center' header-align='center'></el-table-column>
+                <el-table-column prop='Comming' label='来源' width='120' header-align='center'></el-table-column>
+                <el-table-column prop='UserName' label='操作人' width='120' header-align='center'></el-table-column>
+                <el-table-column prop='Phone' label='手机' width='150' header-align='center'></el-table-column>
+                <el-table-column prop='Action' label='动作' header-align='center'></el-table-column>
+                <el-table-column prop='UserId' label='对象id' header-align='center'></el-table-column>
+                <el-table-column label='操作说明' width='350' header-align='center'>
                     <template slot-scope='scope'>
                         <div class='ellipsis' :title='scope.row.Note'>{{scope.row.Note}}</div>
                     </template>

+ 50 - 0
src/views/data_admin/buildUser/Edit.vue

@@ -0,0 +1,50 @@
+<template>
+    <el-dialog title='添加用户' :visible.sync='dialogVisible' width='500px'>
+        <div class='edit-box'>
+            <el-form ref='form' :model='form' label-width='80px'>
+                <el-form-item label='姓名' prop='UserName'>
+                    <el-input v-model.trim='form.UserName'></el-input>
+                </el-form-item>
+                <el-form-item label='联系电话' prop='Phone'>
+                    <el-input v-model.trim='form.Phone'></el-input>
+                </el-form-item>
+                <el-form-item label='备注' prop='Note'>
+                    <el-input v-model.trim='form.Note'></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <span slot='footer' class='dialog-footer'>
+            <el-button @click='dialogVisible = false'>取 消</el-button>
+            <el-button type='primary' @click='dialogVisible = false'>保 存</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                UserName: '',
+                Phone: '',
+                Note: ''
+            },
+            rules: {
+
+            }
+        }
+    },
+    methods: {
+        show() {
+            this.dialogVisible = true
+        }
+    }
+}
+</script>
+
+<style scoped lang='less'>
+.edit-box {
+    height: 300px;
+}
+</style>

+ 92 - 481
src/views/data_admin/buildUser/index.vue

@@ -1,500 +1,111 @@
-<!--
-  revit扫楼人员管理
- -->
 <template>
-  <div id="build_user">
-    <div class="search_header">
-      <build-input :placeholder="placeholder" @search="search"></build-input>
-      <div class="inline_block" @click="tableAddUser">
-        <i class="iconfont icon-addpeople_fill"></i>
-        <i>添加扫楼人员</i>
-      </div>
-      <div class="inline_block" @click="undo">
-        <i class="iconfont icon-undo"></i>
-        <i>撤回</i>
-      </div>
-      <div class="inline_block" @click="refresh">
-        <i class="iconfont icon-shuaxin"></i>
-        <i>刷新</i>
-      </div>
+    <div style='display: flex; flex-direction: column;flex-grow: 1; flex-shrink: 1;'>
+        <table-page-template>
+            <div slot='form' class='condition'>
+                <el-input
+                    v-model.trim='searchValue'
+                    class='margin-right'
+                    style='width: 300px;'
+                    placeholder='姓名、联系电话、登录名、备注'
+                    @change='searchChange'
+                ></el-input>
+                <el-button type='primary' @click='refresh'>刷新</el-button>
+                <el-button type='primary' @click='addUser'>添加扫楼人员</el-button>
+            </div>
+            <el-table
+                slot='table'
+                :data='tableData'
+                border
+                tooltip-effect='dark'
+                style='width: 100%; margin-top:10px;'
+                v-loading='loading'
+            >
+                <el-table-column prop='UserName' label='姓名' width='150' header-align='center'></el-table-column>
+                <el-table-column prop='Phone' label='联系电话/登录名' width='120' header-align='center'></el-table-column>
+                <el-table-column prop='Note' label='备注' header-align='center'></el-table-column>
+                <el-table-column label='操作' width='150' header-align='center'>
+                    <template slot-scope='scope'>
+                         <el-button type='primary' size='mini' @click='delUser(scope.row)'>编辑</el-button>
+                        <el-button type='danger' size='mini' @click='delUser(scope.row)'>删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <base-pagination :currentPages='pageNum' :total='total' @pageChanged='pageChanged' slot='pagination'></base-pagination>
+        </table-page-template>
+        <saga-edit ref='edit'></saga-edit>
     </div>
-    <div class="user_view" v-loading="loading">
-      <div id="user"></div>
-      <div class="no_data" v-show="noData">暂无数据</div>
-    </div>
-    <div class="user_page">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page.sync="currentPage"
-        :page-sizes="pageSizeArr"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="pageCount"
-      ></el-pagination>
-    </div>
-    <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
-      <span>{{msg}}</span>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-      </span>
-    </el-dialog>
-    <el-dialog title="提示" :visible.sync="deldialog">
-      <span>你确定删除用户{{delString}}吗?</span>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="refresh">取 消</el-button>
-        <el-button type="primary" @click="delTrue">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
 </template>
 
 <script>
-import buildInput from "@/components/data_admin/input";
-import buildTime from "@/components/data_admin/selectTime";
-import {mapGetters, mapActions} from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import {
-  getUser, //获取扫楼用户
-  loadUser, //修改
-  delUser, //删除
-  addUser //添加
-} from "@/api/scan/request";
-import Handsontable from "handsontable-pro"
-import 'handsontable-pro/dist/handsontable.full.css'
-import zhCN from 'handsontable-pro/languages/zh-CN';
+    getUser //获取扫楼用户
+} from '@/api/scan/request'
+//component
+import SagaEdit from './Edit'
 export default {
-  components: {
-    "build-input": buildInput,
-    "build-time": buildTime
-  },
-  data() {
-    return {
-      placeholder: "请输入姓名、联系电话、登录名、备注等关键字搜索",
-      checkTimeArr: [], //选择到的时间周期
-      myHot: "", //表格实例
-      row: "",
-      col: "",
-      dialogVisible: false,
-      deldialog: false,
-      msg: "",
-      pageNum: 1,
-      pageSize: 10,
-      pageSizeArr: [5, 10, 20, 30, 50],
-      pageCount: 0,
-      currentPage: 1,
-      filter: "",
-      userData: [],
-      delString: "",
-      delArr: [],
-      noData: false,
-      // ProjId: this.$route.query.projId, //url获取项目id this.$route.query.projId /Pj1101080047/Pj1101080001
-      // UserId: this.$route.query.userId, //url获取用户id this.$route.query.userId/25518428919955458
-      loading: false, //loading动画
-      deepArr: [] //删除时使用的数组
-    };
-  },
-  mounted() {
-    this.getUserTable();
-    //   this.populateHot()
-  },
-  computed: {
-    ...mapGetters("peojMess", [
-        "projectId",
-        "userId",
-        "secret"
-    ])
-  },
-  methods: {
-    //获取用户表格
-    getUserTable() {
-      let param = {
-        filter: this.filter,
-        pageNum: this.pageNum,
-        pageSize: this.pageSize,
-        ProjId: this.projectId,
-        UserId: this.userId
-      };
-
-      getUser(param).then(result => {
-        this.userData = result.data.UserList;
-        this.pageCount = result.data.Count;
-        this.loading = false;
-        //存储一个数组防止删除操作找寻不到删除的该数组
-        this.deepArr = this.deepCopy(result.data.UserList);
-        if (this.userData.length) {
-          this.noData = false;
-          if (this.myHot) {
-            this.myHot.loadData(result.data.UserList);
-          } else {
-            this.populateHot();
-          }
-        } else {
-          this.noData = true;
-          if (this.myHot) {
-            this.myHot.destroy();
-            this.myHot = "";
-          }
-        }
-      });
-    },
-
-    //删除用户
-    delUser(UserList) {
-      let param = {
-        ProjId: this.projectId,
-        UserId: this.userId,
-        UserList: UserList
-      };
-      delUser(param).then(result => {
-        if (result.data.Result == "success") {
-          this.getUserTable();
-          return;
-        } else {
-          this.msg = "请求出错";
-          this.dialogVisible = true;
-        }
-      });
-    },
-
-    //更新用户
-    loadUser(UserList) {
-      let param = {
-        ProjId: this.projectId,
-        UserId: this.userId,
-        UserList: UserList
-      };
-      loadUser(param).then(result => {
-        if (result.data.Result == "success") {
-          return;
-        } else {
-          this.msg = "请求出错";
-          this.dialogVisible = true;
-        }
-      });
-    },
-
-    //请求接口添加用户
-    addUser(User) {
-      let param = {
-        ProjId: this.projectId,
-        UserId: this.userId,
-        User: User
-      };
-      addUser(param).then(result => {
-        if (result.data.Result == "success") {
-          this.userData[0].UserId = result.data.UserId;
-          this.userData[0].ProjId = this.projectId;
-          return;
-        } else {
-          this.msg = "请确定手机号码未重复";
-          this.dialogVisible = true;
-        }
-      });
-    },
-
-    //表格添加用户
-    tableAddUser() {
-      let param = {
-        Note: "",
-        Phone: "",
-        UserName: ""
-      };
-      //判断是否有第一个用户
-      if (this.userData[0]) {
-        //有的话判断第一个用户是否是空值,空值禁止再次添加
-        if (this.userData[0].Phone && this.userData[0].UserName) {
-          this.userData.unshift(param);
-          this.deepArr.unshift(param);
-          this.pageCount += 1;
-          this.myHot.destroy();
-          this.myHot = "";
-          this.populateHot();
-          this.noData = false;
-        } else {
-          return;
-        }
-      } else {
-        //没有第一个用户再次生成表格
-        this.userData.unshift(param);
-        this.deepArr.unshift(param);
-        this.pageCount += 1;
-        this.myHot = "";
-        this.populateHot();
-        this.noData = false;
-      }
-    },
-
-    //撤回
-    undo() {
-      this.myHot.undo();
-    },
-
-    //搜索
-    search(val) {
-      this.loading = true;
-      if (this.myHot) {
-        this.myHot.destroy();
-        this.myHot = "";
-      }
-      this.filter = val;
-      this.pageNum = this.currentPage = 1;
-      this.getUserTable();
-    },
-
-    //一页的个数
-    handleSizeChange(val) {
-      this.loading = true;
-      this.pageSize = val;
-      this.myHot.destroy();
-      this.myHot = "";
-      this.getUserTable();
-    },
-
-    //当前页
-    handleCurrentChange(val) {
-      this.loading = true;
-      this.pageNum = val;
-      this.myHot.destroy();
-      this.myHot = "";
-      this.getUserTable();
-    },
-
-    //刷新
-    refresh() {
-      this.loading = true;
-      this.myHot.destroy();
-      this.myHot = "";
-      this.deldialog = false;
-      this.getUserTable();
-    },
-
-    //弹窗关闭
-    handleClose(done) { },
-
-    //表格单元格单击时触发
-    callBack(event, coords, td) {
-      var row = coords.row;
-      var col = coords.col;
-      if (row != 0 && col != 0) {
-        var ss = this.myHot.getCell(row, col, true); //取出点击Cell
-        (this.row = row), (this.col = col);
-      }
-    },
-
-    //单元格修改内容触发
-    tdClick(changeData, source) {
-      // changeData 是一个数组,第一个元素(数组),记录所有修改信息
-      if (!changeData) return;
-      let rep = /^1(3|4|5|7|8)\d{9}$/;
-      let indexArr = changeData.map(item => {
-        return item[0];
-      });
-      // let dataArr
-      let param = indexArr.map((item, index) => {
-        if (
-          !rep.test(this.userData[item].Phone) &&
-          this.userData[item].ProjId
-        ) {
-          this.msg = "手机号码格式错误";
-          this.dialogVisible = true;
-          return this.userData[item];
-        } else if (this.userData[item].UserName.length < 0) {
-          this.msg = "姓名不可少于一个字符";
-          this.dialogVisible = true;
-          return this.userData[item];
-        } else {
-          return this.userData[item];
-        }
-      });
-
-      //处理好数据,请求接口
-      if (param[0].ProjId) {
-        this.loadUser(param);
-      } else {
-        //当数据没有projId时走添加接口
-        if (param[0].Phone != "" && param[0].UserName.length > 2) {
-          if (rep.test(param[0].Phone)) {
-            this.addUser(param[0]);
-          } else {
-            this.msg = "手机号码格式错误";
-            this.dialogVisible = true;
-            return;
-          }
-        } else {
-          return;
+    name: 'floor-user',
+    data() {
+        return {
+            searchValue: '',
+            loading: false,
+            tableData: [],
+            pageNum: 1,
+            pageSize: 10,
+            total: 0
         }
-      }
     },
-
-    delTrue() {
-      this.delUser(this.delArr);
-      this.deldialog = false;
+    components: {
+        SagaEdit,
     },
-
-    //处理右键删除
-    removeUser(index, amout) {
-      this.deldialog = true;
-      this.delString = "";
-      this.delArr = [];
-      let i = index + amout;
-      for (; index < i; index++) {
-        if (index + 1 == i) {
-          this.delString += this.deepArr[index].UserName;
-        } else {
-          this.delString += this.deepArr[index].UserName + "、";
-        }
-        this.delArr.push(this.deepArr[index].UserId);
-      }
+    computed: {
+        ...mapGetters('peojMess', ['projectId', 'userId'])
     },
-
-    //表格渲染生成
-    populateHot() {
-      var container1 = document.getElementById("user");
-      let maxRow = "";
-      //当当前页数*当前页个数小于总个数时,当前表格行数为当前页数
-      if (this.pageCount >= this.pageSize * this.currentPage) {
-        maxRow = this.pageSize;
-      } else {
-        maxRow = this.pageCount % this.pageSize;
-      }
-      var options = {
-        data: this.userData,
-        colHeaders: ["姓名", "联系电话/登录名", "备注"],
-        manualColumnResize: true, //允许改变表头宽度
-        manualColumnMove: true, //允许拉动表头
-        stretchH: "last", //最后一行填充
-        maxRows: maxRow,
-        contextMenu: {
-          items: {
-            remove_row: {
-              name: "删除用户"
+    methods: {
+        pageChanged(page, size) {
+            this.pageNum = page;
+            this.pageSize = size;
+            this.getUserList();
+        },
+        refresh() {
+            this.getUserList()
+        },
+        searchChange() {
+            this.pageNum = 1;
+            this.getUserList()
+        },
+        addUser() {
+            this.$refs['edit'].show()
+        },
+        delUser() {},
+        getUserList() {
+            this.loading = true
+            let param = {
+                filter: this.searchValue,
+                pageNum: this.pageNum,
+                pageSize: this.pageSize,
+                ProjId: this.projectId,
+                UserId: this.userId
             }
-          }
+            console.log(param)
+            getUser(param).then(result => {
+                this.loading = false
+                this.tableData = result.data.UserList
+                this.total = result.data.Count
+            })
         },
-        columns: [
-          {
-            data: "UserName"
-          },
-          {
-            data: "Phone",
-            type: "numeric"
-          },
-          {
-            data: "Note"
-          }
-        ],
-        // beforeRemoveRow: this.removeUser,
-        afterRemoveRow: this.removeUser
-      };
-      this.myHot = new Handsontable(container1, options);
-      //表格数据发生改变
-      this.myHot.addHook("afterChange", this.tdClick);
-      // this.myHot.afterRemoveRow()
-
-      //删除前
-      // this.myHot.removeHook('beforeInit', this.removeUser);
-      //添加单击事件
-      // Handsontable.hooks.add('afterOnCellMouseDown',this.callBack,this.myHot)
-      document.getElementById("hot-display-license-info").style.display =
-        "none";
+        init() {
+            this.getUserList()
+        }
     },
-
-    //工具函数浅复制深拷贝,防止共用存储空间
-    deepCopy(obj) {
-      var out = [],
-        i = 0,
-        len = obj.length;
-      for (; i < len; i++) {
-        if (obj[i] instanceof Array) {
-          out[i] = deepcopy(obj[i]);
-        } else out[i] = obj[i];
-      }
-      return out;
+    created() {
+        this.init()
     }
-  }
-};
+}
 </script>
 
-<style lang="less" scoped>
-#app {
-  min-width: 1098px;
-  min-height: 767px;
-  position: relative;
-  overflow-x: auto;
-}
-#build_user {
-  width: 100%;
-  // padding-top: .4rem;
-  // padding-left: 1rem;
-  // padding-right: 1rem;
-  box-sizing: border-box;
-  .search_header {
-    height: 3rem;
-    padding-top: 0.4rem;
-    box-sizing: border-box;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    background-color: #eee;
-    width: 100%;
-    .derived_btn {
-      width: 8rem;
-      border: 1px solid #777;
-      text-align: center;
-      font-size: 0.6rem;
-      height: 1.6rem;
-      line-height: 1.6rem;
-      cursor: pointer;
-      background-color: #ccc;
-      border-radius: 0.1rem;
-      float: right;
-      margin-right: 3rem;
-      margin-top: 0.2rem;
-      .icon-excelwenjian {
-        font-size: 1rem;
-        margin-bottom: -0.1rem;
-      }
-    }
-    .inline_block {
-      float: right;
-      margin-left: 3rem;
-      padding: 0 0.8rem;
-      font-size: 0.8rem;
-      height: 2rem;
-      line-height: 2rem;
-      color: #000;
-      text-align: center;
-      border-radius: 0.8rem;
-      cursor: pointer;
-      .iconfont {
-        font-size: 1rem;
-      }
-    }
-  }
-  .user_view {
-    position: absolute;
-    width: 100%;
-    top: 3.5rem;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow-y: auto;
-    // #user{
-    //     table{
-    //         tr{
-    //             td:first-child{
-    //                 text-align: center;
-    //             }
-    //         }
-    //     }
-    // }
-  }
-  .user_page {
-    position: absolute;
-    height: 3rem;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-  }
+<style scoped lang='less'>
+.condition {
+    margin: 10px;
 }
 </style>

+ 501 - 0
src/views/data_admin/buildUser/index1.vue

@@ -0,0 +1,501 @@
+<!--
+  revit扫楼人员管理
+ -->
+<template>
+  <div id="build_user">
+    <div class="search_header">
+      <build-input :placeholder="placeholder" @search="search"></build-input>
+      <div class="inline_block" @click="tableAddUser">
+        <i class="iconfont icon-addpeople_fill"></i>
+        <i>添加扫楼人员</i>
+      </div>
+      <div class="inline_block" @click="undo">
+        <i class="iconfont icon-undo"></i>
+        <i>撤回</i>
+      </div>
+      <div class="inline_block" @click="refresh">
+        <i class="iconfont icon-shuaxin"></i>
+        <i>刷新</i>
+      </div>
+    </div>
+    <div class="user_view" v-loading="loading">
+      <div id="user"></div>
+      <div class="no_data" v-show="noData">暂无数据</div>
+    </div>
+    <div class="user_page">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page.sync="currentPage"
+        :page-sizes="pageSizeArr"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageCount"
+      ></el-pagination>
+    </div>
+    <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
+      <span>{{msg}}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="提示" :visible.sync="deldialog">
+      <span>你确定删除用户{{delString}}吗?</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="refresh">取 消</el-button>
+        <el-button type="primary" @click="delTrue">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import buildInput from "@/components/data_admin/input";
+import buildTime from "@/components/data_admin/selectTime";
+import {mapGetters, mapActions} from 'vuex'
+import {
+  getUser, //获取扫楼用户
+  loadUser, //修改
+  delUser, //删除
+  addUser //添加
+} from "@/api/scan/request";
+import Handsontable from "handsontable-pro"
+import 'handsontable-pro/dist/handsontable.full.css'
+import zhCN from 'handsontable-pro/languages/zh-CN';
+export default {
+  components: {
+    "build-input": buildInput,
+    "build-time": buildTime
+  },
+  data() {
+    return {
+      placeholder: "请输入姓名、联系电话、登录名、备注等关键字搜索",
+      checkTimeArr: [], //选择到的时间周期
+      myHot: "", //表格实例
+      row: "",
+      col: "",
+      dialogVisible: false,
+      deldialog: false,
+      msg: "",
+      pageNum: 1,
+      pageSize: 10,
+      pageSizeArr: [5, 10, 20, 30, 50],
+      pageCount: 0,
+      currentPage: 1,
+      filter: "",
+      userData: [],
+      delString: "",
+      delArr: [],
+      noData: false,
+      // ProjId: this.$route.query.projId, //url获取项目id this.$route.query.projId /Pj1101080047/Pj1101080001
+      // UserId: this.$route.query.userId, //url获取用户id this.$route.query.userId/25518428919955458
+      loading: false, //loading动画
+      deepArr: [] //删除时使用的数组
+    };
+  },
+  mounted() {
+    this.getUserTable();
+    //   this.populateHot()
+  },
+  computed: {
+    ...mapGetters("peojMess", [
+        "projectId",
+        "userId",
+        "secret"
+    ])
+  },
+  methods: {
+    //获取用户表格
+    getUserTable() {
+      let param = {
+        filter: this.filter,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        ProjId: this.projectId,
+        UserId: this.userId
+      };
+
+      getUser(param).then(result => {
+        this.userData = result.data.UserList;
+        this.pageCount = result.data.Count;
+        this.loading = false;
+        //存储一个数组防止删除操作找寻不到删除的该数组
+        this.deepArr = this.deepCopy(result.data.UserList);
+        if (this.userData.length) {
+          this.noData = false;
+          if (this.myHot) {
+            this.myHot.loadData(result.data.UserList);
+          } else {
+            this.populateHot();
+          }
+        } else {
+          this.noData = true;
+          if (this.myHot) {
+            this.myHot.destroy();
+            this.myHot = "";
+          }
+        }
+      });
+    },
+
+    //删除用户
+    delUser(UserList) {
+      let param = {
+        ProjId: this.projectId,
+        UserId: this.userId,
+        UserList: UserList
+      };
+      delUser(param).then(result => {
+        if (result.data.Result == "success") {
+          this.getUserTable();
+          return;
+        } else {
+          this.msg = "请求出错";
+          this.dialogVisible = true;
+        }
+      });
+    },
+
+    //更新用户
+    loadUser(UserList) {
+      let param = {
+        ProjId: this.projectId,
+        UserId: this.userId,
+        UserList: UserList
+      };
+      loadUser(param).then(result => {
+        if (result.data.Result == "success") {
+          return;
+        } else {
+          this.msg = "请求出错";
+          this.dialogVisible = true;
+        }
+      });
+    },
+
+    //请求接口添加用户
+    addUser(User) {
+      let param = {
+        ProjId: this.projectId,
+        UserId: this.userId,
+        User: User
+      };
+      addUser(param).then(result => {
+        if (result.data.Result == "success") {
+          this.userData[0].UserId = result.data.UserId;
+          this.userData[0].ProjId = this.projectId;
+          return;
+        } else {
+          this.msg = "请确定手机号码未重复";
+          this.dialogVisible = true;
+        }
+      });
+    },
+
+    //表格添加用户
+    tableAddUser() {
+      let param = {
+        Note: "",
+        Phone: "",
+        UserName: ""
+      };
+      //判断是否有第一个用户
+      if (this.userData[0]) {
+        //有的话判断第一个用户是否是空值,空值禁止再次添加
+        if (this.userData[0].Phone && this.userData[0].UserName) {
+          this.userData.unshift(param);
+          this.deepArr.unshift(param);
+          this.pageCount += 1;
+          this.myHot.destroy();
+          this.myHot = "";
+          this.populateHot();
+          this.noData = false;
+        } else {
+          return;
+        }
+      } else {
+        //没有第一个用户再次生成表格
+        this.userData.unshift(param);
+        this.deepArr.unshift(param);
+        this.pageCount += 1;
+        this.myHot = "";
+        this.populateHot();
+        this.noData = false;
+      }
+    },
+
+    //撤回
+    undo() {
+      this.myHot.undo();
+    },
+
+    //搜索
+    search(val) {
+      this.loading = true;
+      if (this.myHot) {
+        this.myHot.destroy();
+        this.myHot = "";
+      }
+      this.filter = val;
+      this.pageNum = this.currentPage = 1;
+      this.getUserTable();
+    },
+
+    //一页的个数
+    handleSizeChange(val) {
+      this.loading = true;
+      this.pageSize = val;
+      this.myHot.destroy();
+      this.myHot = "";
+      this.getUserTable();
+    },
+
+    //当前页
+    handleCurrentChange(val) {
+      this.loading = true;
+      this.pageNum = val;
+      this.myHot.destroy();
+      this.myHot = "";
+      this.getUserTable();
+    },
+
+    //刷新
+    refresh() {
+      this.loading = true;
+      this.myHot.destroy();
+      this.myHot = "";
+      this.deldialog = false;
+      this.getUserTable();
+    },
+
+    //弹窗关闭
+    handleClose(done) { },
+
+    //表格单元格单击时触发
+    callBack(event, coords, td) {
+      var row = coords.row;
+      var col = coords.col;
+      if (row != 0 && col != 0) {
+        var ss = this.myHot.getCell(row, col, true); //取出点击Cell
+        (this.row = row), (this.col = col);
+      }
+    },
+
+    //单元格修改内容触发
+    tdClick(changeData, source) {
+      // changeData 是一个数组,第一个元素(数组),记录所有修改信息
+      if (!changeData) return;
+      let rep = /^1(3|4|5|7|8)\d{9}$/;
+      let indexArr = changeData.map(item => {
+        return item[0];
+      });
+      // let dataArr
+      let param = indexArr.map((item, index) => {
+        if (
+          !rep.test(this.userData[item].Phone) &&
+          this.userData[item].ProjId
+        ) {
+          this.msg = "手机号码格式错误";
+          this.dialogVisible = true;
+          return this.userData[item];
+        } else if (this.userData[item].UserName.length < 0) {
+          this.msg = "姓名不可少于一个字符";
+          this.dialogVisible = true;
+          return this.userData[item];
+        } else {
+          return this.userData[item];
+        }
+      });
+
+      //处理好数据,请求接口
+      if (param[0].ProjId) {
+        this.loadUser(param);
+      } else {
+        //当数据没有projId时走添加接口
+        if (param[0].Phone != "" && param[0].UserName.length > 2) {
+          if (rep.test(param[0].Phone)) {
+            this.addUser(param[0]);
+          } else {
+            this.msg = "手机号码格式错误";
+            this.dialogVisible = true;
+            return;
+          }
+        } else {
+          return;
+        }
+      }
+    },
+
+    delTrue() {
+      this.delUser(this.delArr);
+      this.deldialog = false;
+    },
+
+    //处理右键删除
+    removeUser(index, amout) {
+      this.deldialog = true;
+      this.delString = "";
+      this.delArr = [];
+      let i = index + amout;
+      for (; index < i; index++) {
+        if (index + 1 == i) {
+          this.delString += this.deepArr[index].UserName;
+        } else {
+          this.delString += this.deepArr[index].UserName + "、";
+        }
+        this.delArr.push(this.deepArr[index].UserId);
+      }
+    },
+
+    //表格渲染生成
+    populateHot() {
+      var container1 = document.getElementById("user");
+      let maxRow = "";
+      //当当前页数*当前页个数小于总个数时,当前表格行数为当前页数
+      if (this.pageCount >= this.pageSize * this.currentPage) {
+        maxRow = this.pageSize;
+      } else {
+        maxRow = this.pageCount % this.pageSize;
+      }
+      var options = {
+        data: this.userData,
+        colHeaders: ["姓名", "联系电话/登录名", "备注"],
+        manualColumnResize: true, //允许改变表头宽度
+        manualColumnMove: true, //允许拉动表头
+        stretchH: "last", //最后一行填充
+        maxRows: maxRow,
+        contextMenu: {
+          items: {
+            remove_row: {
+              name: "删除用户"
+            }
+          }
+        },
+        columns: [
+          {
+            data: "UserName"
+          },
+          {
+            data: "Phone",
+            type: "numeric"
+          },
+          {
+            data: "Note"
+          }
+        ],
+        // beforeRemoveRow: this.removeUser,
+        afterRemoveRow: this.removeUser
+      };
+      this.myHot = new Handsontable(container1, options);
+      //表格数据发生改变
+      this.myHot.addHook("afterChange", this.tdClick);
+      // this.myHot.afterRemoveRow()
+
+      //删除前
+      // this.myHot.removeHook('beforeInit', this.removeUser);
+      //添加单击事件
+      // Handsontable.hooks.add('afterOnCellMouseDown',this.callBack,this.myHot)
+      document.getElementById("hot-display-license-info").style.display =
+        "none";
+    },
+
+    //工具函数浅复制深拷贝,防止共用存储空间
+    deepCopy(obj) {
+      var out = [],
+        i = 0,
+        len = obj.length;
+      for (; i < len; i++) {
+        if (obj[i] instanceof Array) {
+          out[i] = deepcopy(obj[i]);
+        } else out[i] = obj[i];
+      }
+      return out;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+#app {
+  min-width: 1098px;
+  min-height: 767px;
+  position: relative;
+  overflow-x: auto;
+}
+#build_user {
+    position: relative;
+  width: 100%;
+  // padding-top: .4rem;
+  // padding-left: 1rem;
+  // padding-right: 1rem;
+  box-sizing: border-box;
+  .search_header {
+    height: 3rem;
+    padding-top: 0.4rem;
+    box-sizing: border-box;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    background-color: #eee;
+    width: 100%;
+    .derived_btn {
+      width: 8rem;
+      border: 1px solid #777;
+      text-align: center;
+      font-size: 0.6rem;
+      height: 1.6rem;
+      line-height: 1.6rem;
+      cursor: pointer;
+      background-color: #ccc;
+      border-radius: 0.1rem;
+      float: right;
+      margin-right: 3rem;
+      margin-top: 0.2rem;
+      .icon-excelwenjian {
+        font-size: 1rem;
+        margin-bottom: -0.1rem;
+      }
+    }
+    .inline_block {
+      float: right;
+      margin-left: 3rem;
+      padding: 0 0.8rem;
+      font-size: 0.8rem;
+      height: 2rem;
+      line-height: 2rem;
+      color: #000;
+      text-align: center;
+      border-radius: 0.8rem;
+      cursor: pointer;
+      .iconfont {
+        font-size: 1rem;
+      }
+    }
+  }
+  .user_view {
+    position: absolute;
+    width: 100%;
+    top: 3.5rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    // #user{
+    //     table{
+    //         tr{
+    //             td:first-child{
+    //                 text-align: center;
+    //             }
+    //         }
+    //     }
+    // }
+  }
+  .user_page {
+    position: absolute;
+    height: 3rem;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+  }
+}
+</style>