添加用户绑定客户服务掌柜鼎、掌中保数据

src/http/api.js

@@ -51,6 +51,8 @@ import * as report from './moudules/report.js'
 import * as one from './moudules/service/one'
 import * as sys from './moudules/sys.js'
 
+import * as bindUser from './moudules/bindUser.js'
+
 // 默认全部导出
 export default {
     login,
@@ -90,5 +92,6 @@ export default {
     //报表管理
     report,
     one,
-    sys
+    sys,
+    bindUser
 }

src/http/moudules/bindUser.js

@@ -0,0 +1,73 @@
+import axios from '../axios'
+
+/*
+ * 用户绑定管理模块
+ */
+
+// 用户关联掌柜鼎用户列表
+export const queryUserZGDPage = (data) => {
+  return axios({
+    url: '/sysUserLinkZgdUser/queryUserPage',
+    method: 'post',
+    data
+  })
+}
+
+// 用户关联掌中保用户列表
+export const queryUserZZBPage = (data) => {
+  return axios({
+    url: '/sysUserLinkZzbUser/queryUserPage',
+    method: 'post',
+    data
+  })
+}
+// 掌柜鼎用户列表
+export const queryUserZgdListPage = (data) => {
+  return axios({
+    url: '/sysUserLinkZgdUser/queryUserZgdPage',
+    method: 'post',
+    data
+  })
+}
+
+// 掌中保用户列表
+export const queryUserZzbListPage = (data) => {
+  return axios({
+    url: '/sysUserLinkZzbUser/queryUserZzbPage',
+    method: 'post',
+    data
+  })
+}
+// 绑定掌柜鼎用户列表
+export const addOrUpdateZgd = (data) => {
+  return axios({
+    url: '/sysUserLinkZgdUser/addOrUpdate',
+    method: 'post',
+    data
+  })
+}
+// 绑定掌中保用户列表
+export const addOrUpdateZzb = (data) => {
+  return axios({
+    url: '/sysUserLinkZzbUser/addOrUpdate',
+    method: 'post',
+    data
+  })
+}
+// 清空绑定掌柜鼎用户
+export const deleteZgd = (data) => {
+  return axios({
+    url: '/sysUserLinkZgdUser/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 清空绑定掌中保用户
+export const deleteZzb = (data) => {
+  return axios({
+    url: '/sysUserLinkZzbUser/delete',
+    method: 'post',
+    data
+  })
+}

src/views/BindUser/Zgd.vue

@@ -0,0 +1,481 @@
+<template>
+  <div>
+    <el-main ref="elMain" style="padding: 0px">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+        <!-- 左侧树Start -->
+        <SplitArea :size="leftSplitWidth" :minSize="240">
+          <div>
+            <el-divider></el-divider>
+            <!-- 左侧树形结构 -->
+            <el-tree
+              :data="ztreeNodes"
+              :props="{ children: 'children', label: 'name' }"
+              node-key="id"
+              :default-expanded-keys="['9']"
+              @node-click="onZTreeClick"
+            ></el-tree>
+          </div>
+        </SplitArea>
+        <!-- 左侧树End -->
+
+        <!-- 右侧列表页面Start -->
+        <SplitArea :size="rightSplitWidth">
+          <!-- 筛选区域Start -->
+          <el-row class="queryFrom">
+            <el-form ref="queryFormRef" :model="pageData" label-width="80px">
+              <el-row>
+                <el-col :span="5">
+                  <el-form-item label="工号">
+                    <el-input
+                      clearable
+                      size="small"
+                      placeholder="工号"
+                      v-model="pageData.userId"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="姓名">
+                    <el-input
+                      clearable
+                      size="small"
+                      placeholder="姓名"
+                      v-model="pageData.name"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="手机号">
+                    <el-input
+                      clearable
+                      size="small"
+                      placeholder="手机号"
+                      v-model="pageData.mobile"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                  <el-form-item label="">
+                    <el-button
+                      type="primary"
+                      @click="queryStaffInfo"
+                      size="small"
+                      >查询</el-button
+                    >
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-row>
+
+          <kt-common-table
+            ref="ktcommonTable"
+            permsEdit="sys:backline:edit"
+            :data="pageResult"
+            :columns="columns"
+            editButtonName="绑定人员"
+            :showBatchDelete="false"
+            @handleEdit="handleTableEdit"
+            :button7Name="'清空'"
+            @handleButton7="handleTableDeleteFlag"
+          >
+          </kt-common-table>
+        </SplitArea>
+        <!-- 右侧列表页面End -->
+      </Split>
+    </el-main>
+
+     <!-- 新增修改界面 -->
+     <el-dialog :title="dialogTitle" width="50%" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="closeDialog" v-dialogDrag>
+      <el-form ref="queryFormRef1" :model="addQueryForm" label-width="80px" size="small">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="姓名">
+              <el-input clearable placeholder="姓名" v-model="addQueryForm.userName"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="电话">
+              <el-input clearable placeholder="电话" v-model="addQueryForm.mobile"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item>
+              <el-button type="primary" size="small" @click="handleAddButton">筛选</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+        <el-table :data="addListData" border ref="zgdTable" width="100%" size="small" 
+         @selection-change="handleSelectionChange" @select="handleSelect" @row-click="handleRowClick"
+          align="center" :header-cell-style="{
+            background: '#F2F7FC',
+            fontWeight: '900',
+            color: '#606266',
+          }" >
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column prop="id" label="用户编码">
+          </el-table-column>
+          <el-table-column prop="userName" label="用户名称">
+          </el-table-column>
+          <el-table-column prop="nickName" label="真实名称">
+          </el-table-column>
+          <el-table-column prop="phoneNumber" label="电话">
+          </el-table-column>
+      </el-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="refreshPageRequest"
+          :current-page="addListDataPage.pageNum" :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]"
+          :page-size="addListDataPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
+          :total="addListDataPage.total">
+      </el-pagination>
+      <span slot="footer">
+        <kt-button label="确定" type="primary"  @click="addSubmit" />
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
+import tree from "@/components/ztree.vue"; // 机构树组件
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import mixa from "./mixin";
+const mixin = new mixa({
+  treeTypeNum: null,
+});
+export default {
+  components: {
+    KtButton,
+    tree,
+    KtCommonTable
+  },
+  mixins: [mixin],
+  data() {
+    return {
+      selectedRow:[],
+      addListData: [],
+      addListDataPage: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0
+      },
+      addQueryForm:{
+        userName: "",
+        mobile: "",
+      },
+      userId: "",
+      pageData: {
+        pageNum: 1,
+        pageSize: 20,
+        deptId: JSON.parse(localStorage.getItem("user_data")).deptId,
+        userId: "",
+        realName: "",
+        mobile: "",
+        status:"1"
+      },
+      formData: {},
+      formDataDetail: {},
+      filterObject: {},
+      peopledeptid: "",
+      recommenderList: [],
+      teamleadername: "",
+      teamleaderid: "",
+      // 右侧列表查询数据Start
+      queryFrom: {},
+      pageResult: {},
+      containsSubDeptChecked: true, //是否包含下级机构
+      columns: [
+        // 数据列
+        { prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
+        { prop: "deptName", label: "部门名称", minWidth: 80, sortable: false },
+        { prop: "userId", label: "工号", minWidth: 80, sortable: false },
+        { prop: "userName", label: "姓名", minWidth: 120, sortable: false },
+        { prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
+        { prop: "linkUserId", label: "掌中保用户编码", minWidth: 100, sortable: false },
+        { prop: "linkUserName", label: "掌中保用户名称", minWidth: 100, sortable: false },
+      ],
+      dialogTitle: "掌中保用户列表",
+      dialogVisible: false, // 新增编辑界面是否显示
+      departmentList: [], // 选中公司的所有部门的集合
+      deptInfo: {}, //选中机构的基本信息
+      option: [], //机构列表
+      showOut: false,
+      isRadioMode: true
+    };
+  },
+  created() {
+    this.queryStaffInfo();
+  },
+  watch: {
+    containsSubDeptChecked() {
+      this.findPage();
+    },
+  },
+  methods: {
+   
+    // 查询Start
+    queryStaffInfo() {
+      this.isQueryStaff = true;
+      this.findPage();
+    },
+    onZTreeClick: function (evt, treeId, treeNode) {
+      // 点击事件
+      this.currentTreeNode = evt;
+      this.deptId = this.currentTreeNode.id;
+      this.pageData.pageNum = 1;
+      this.findPage();
+    },
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      if (data && data.pageRequest) {
+        this.pageData.pageNum = data.pageRequest.pageNum;
+        this.pageData.pageSize = data.pageRequest.pageSize;
+      }
+      if (this.isQueryStaff) {
+        this.pageData.pageNum = 1;
+      }
+      this.isQueryStaff = false;
+      let dto = {
+        deptId: this.deptId,
+        mobile: this.pageData.mobile,
+        userName: this.pageData.name,
+        userId: this.pageData.userId,
+        pageNum: this.pageData.pageNum,
+        pageSize: this.pageData.pageSize,
+      };
+     
+      this.$api.bindUser.queryUserZGDPage(dto).then((res) => {
+        this.pageResult = {
+          content: res.data.content,
+          pageNum: res.data.current,
+          pageSize: res.data.size,
+          totalPages: res.data.pages,
+          totalSize: res.data.total,
+        };
+      });
+    },
+    //打开掌中保人员列表
+    handleTableEdit(data) {
+      console.log(data.row.userId)
+      this.userId = data.row.userId;
+      this.handleAddButton()
+    },
+    // 清空单个人员
+    handleTableDeleteFlag(data) {
+      this.$confirm("确认清空？")
+        .then(() => {
+          this.$api.bindUser.deleteZgd({userId:data.row.userId}).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                message: "清空成功",
+                type: "success",
+              });
+              this.findPage();
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    //关闭页面
+    closeDialog() {
+      this.dialogVisible = false;
+      this.addQueryForm = {}
+    },
+    //绑定用户id
+    addSubmit(){
+      if(this.selectedRow.length==0){
+        this.$message({
+              message: "请选择用户",
+              type: "error",
+          });
+          return;
+      }
+      if(this.selectedRow.length>1){
+        this.$message({
+              message: "请选择一个用户",
+              type: "error",
+          });
+          return;
+      }
+      //调用添加接口
+      this.$api.bindUser.addOrUpdateZgd({
+        userId:  this.userId,
+        linkUserId: this.selectedRow[0].id,
+      }).then((res) => {
+        if (res.code == 200) {
+              this.$message({
+                message: "绑定成功",
+                type: "success",
+              });
+              this.dialogVisible = false;
+              this.findPage();
+        }
+      })
+    },
+    handleSelectionChange(val){
+      this.selectedRow = val 
+    },
+    handleRowClick(row) {
+      const flag = !row.flag
+      if (this.isRadioMode) {
+        this.$refs['zgdTable'].clearSelection()
+        this.addListData.forEach((v) => {
+          v.flag = false
+        })
+      }
+      row.flag = flag
+      this.$refs['zgdTable'].toggleRowSelection(row, flag)
+    },
+    handleSelect(selection, row) {
+      if (!this.isRadioMode) return
+      this.$refs['zgdTable'].clearSelection()
+      if (selection.length != 0) {
+        row.flag = true
+        this.$refs['zgdTable'].toggleRowSelection(row, true)
+      } else {
+        row.flag = false
+        this.$refs['zgdTable'].toggleRowSelection(row, false)
+      }
+    },
+    cellClass(row) {
+      if (this.isRadioMode && row.columnIndex === 0) {
+        return 'hideCheckbox'
+      }
+    },
+    refreshPageRequest: function (pageNum) {
+      this.addListDataPage.pageNum = pageNum;
+      this.handleAddButton()
+    },
+    handleSizeChange(pageSize) {
+      this.addListDataPage.pageSize = pageSize;
+      this.handleAddButton()
+    },
+    handleAddButton() {
+      this.$api.bindUser.queryUserZgdListPage({
+        userName: this.addQueryForm.userName,
+        pageNum: this.addListDataPage.pageNum,
+        pageSize: this.addListDataPage.pageSize,
+        mobile: this.addQueryForm.mobile,
+      }).then((res) => {
+        this.addListData = res.data.content
+        this.addListDataPage.pageNum = res.data.pageNum
+        this.addListDataPage.pageSize = res.data.pageSize
+        this.addListDataPage.total = res.data.totalSize
+        this.dialogVisible = true;
+      })
+    },
+  },
+};
+</script>
+
+<style scoped>
+.el-divider--horizontal {
+  margin: 4px 0;
+}
+
+/* 顶部查询条件样式Start */
+.queryFrom .el-row {
+  margin: 10px 0px;
+}
+
+.queryFrom .el-form-item {
+  margin-bottom: 0px;
+}
+
+.queryFrom .queryButton .el-form-item__content {
+  margin-left: 0px !important;
+}
+
+.disc {
+  -webkit-text-security: disc;
+  position: relative;
+}
+
+.none {
+  -webkit-text-security: none;
+  position: relative;
+}
+
+.icon {
+  color: #ccc;
+  position: absolute;
+  right: 0;
+  top: 10px;
+  text-align: center;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+}
+
+.avatar {
+  border: 1px dashed #d9d9d9;
+  padding: 5px;
+  border-radius: 6px;
+  width: 100px;
+  height: 100px;
+  display: block;
+  box-sizing: border-box;
+}
+</style>
+
+<style lang="scss" scoped>
+::v-deep .el-table .el-table__header-wrapper .el-checkbox__original {
+    display: none;
+}
+>>> .el-tabs__item:hover {
+  color: #2d4d89;
+}
+>>> .el-tabs__item.is-active {
+  color: #fff;
+  background: #2d4d89;
+  transition: all ease 0.5s;
+}
+>>> .el-tabs__active-bar {
+  background-color: #2d4d89;
+}
+>>> .el-tabs__item.is-top:nth-child(2) {
+  padding-left: 20px !important;
+}
+>>> .el-tabs--top .el-tabs__item.is-top:last-child {
+  padding-right: 20px !important;
+}
+
+.el-tabs {
+  >>> .el-input__inner:focus,
+  >>> .el-select .el-input.is-focus .el-input__inner {
+    border-color: #2d4d89;
+  }
+  .el-button--primary,
+  .el-button--primary:focus {
+    background-color: #2d4d89;
+    border-color: #2d4d89;
+  }
+}
+.select-prop {
+  .el-select-dropdown__item.selected,
+  .el-date-table td.available:hover {
+    color: #2d4d89;
+  }
+  .el-date-table td.current:not(.disabled) span {
+    background-color: #2d4d89;
+  }
+}
+</style>

src/views/BindUser/Zzb.vue

@@ -0,0 +1,480 @@
+<template>
+  <div>
+    <el-main ref="elMain" style="padding: 0px">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+        <!-- 左侧树Start -->
+        <SplitArea :size="leftSplitWidth" :minSize="240">
+          <div>
+            <el-divider></el-divider>
+            <!-- 左侧树形结构 -->
+            <el-tree
+              :data="ztreeNodes"
+              :props="{ children: 'children', label: 'name' }"
+              node-key="id"
+              :default-expanded-keys="['9']"
+              @node-click="onZTreeClick"
+            ></el-tree>
+          </div>
+        </SplitArea>
+        <!-- 左侧树End -->
+
+        <!-- 右侧列表页面Start -->
+        <SplitArea :size="rightSplitWidth">
+          <!-- 筛选区域Start -->
+          <el-row class="queryFrom">
+            <el-form ref="queryFormRef" :model="pageData" label-width="80px">
+              <el-row>
+                <el-col :span="5">
+                  <el-form-item label="工号">
+                    <el-input
+                      clearable
+                      size="small"
+                      placeholder="工号"
+                      v-model="pageData.userId"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="姓名">
+                    <el-input
+                      clearable
+                      size="small"
+                      placeholder="姓名"
+                      v-model="pageData.name"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="手机号">
+                    <el-input
+                      clearable
+                      size="small"
+                      placeholder="手机号"
+                      v-model="pageData.mobile"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                  <el-form-item label="">
+                    <el-button
+                      type="primary"
+                      @click="queryStaffInfo"
+                      size="small"
+                      >查询</el-button
+                    >
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-row>
+
+          <kt-common-table
+            ref="ktcommonTable"
+            permsEdit="sys:backline:edit"
+            :data="pageResult"
+            :columns="columns"
+            editButtonName="绑定人员"
+            :showBatchDelete="false"
+            @handleEdit="handleTableEdit"
+            :button7Name="'清空'"
+            @handleButton7="handleTableDeleteFlag"
+          >
+          </kt-common-table>
+        </SplitArea>
+        <!-- 右侧列表页面End -->
+      </Split>
+    </el-main>
+
+     <!-- 新增修改界面 -->
+     <el-dialog :title="dialogTitle" width="50%" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="closeDialog" v-dialogDrag>  
+      <el-form ref="queryFormRef1" :model="addQueryForm" label-width="80px" size="small">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="姓名">
+              <el-input clearable placeholder="姓名" v-model="addQueryForm.userName"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="电话">
+              <el-input clearable placeholder="电话" v-model="addQueryForm.mobile"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item>
+              <el-button type="primary" size="small" @click="handleAddButton">筛选</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+        <el-table :data="addListData" border ref="zzbTable" width="100%" size="small" 
+         @selection-change="handleSelectionChange" @select="handleSelect" @row-click="handleRowClick"
+          align="center" :header-cell-style="{
+            background: '#F2F7FC',
+            fontWeight: '900',
+            color: '#606266',
+          }" >
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column prop="id" label="用户编码">
+          </el-table-column>
+          <el-table-column prop="userName" label="用户名称">
+          </el-table-column>
+          <el-table-column prop="nickName" label="真实名称">
+          </el-table-column>
+          <el-table-column prop="phoneNumber" label="电话">
+          </el-table-column>
+      </el-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="refreshPageRequest"
+          :current-page="addListDataPage.pageNum" :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]"
+          :page-size="addListDataPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
+          :total="addListDataPage.total">
+      </el-pagination>
+      <span slot="footer">
+        <kt-button label="确定" type="primary"  @click="addSubmit" />
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
+import tree from "@/components/ztree.vue"; // 机构树组件
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import mixa from "./mixin";
+const mixin = new mixa({
+  treeTypeNum: null,
+});
+export default {
+  components: {
+    KtButton,
+    tree,
+    KtCommonTable
+  },
+  mixins: [mixin],
+  data() {
+    return {
+      selectedRow:[],
+      addListData: [],
+      addListDataPage: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0
+      },
+      addQueryForm:{
+        userName: "",
+        mobile: "",
+      },
+      userId: "",
+      pageData: {
+        pageNum: 1,
+        pageSize: 20,
+        deptId: JSON.parse(localStorage.getItem("user_data")).deptId,
+        userId: "",
+        realName: "",
+        mobile: "",
+        status:"1"
+      },
+      formData: {},
+      formDataDetail: {},
+      filterObject: {},
+      peopledeptid: "",
+      recommenderList: [],
+      teamleadername: "",
+      teamleaderid: "",
+      // 右侧列表查询数据Start
+      queryFrom: {},
+      pageResult: {},
+      containsSubDeptChecked: true, //是否包含下级机构
+      columns: [
+        // 数据列
+        { prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
+        { prop: "deptName", label: "部门名称", minWidth: 80, sortable: false },
+        { prop: "userId", label: "工号", minWidth: 80, sortable: false },
+        { prop: "userName", label: "姓名", minWidth: 120, sortable: false },
+        { prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
+        { prop: "linkUserId", label: "掌中保用户编码", minWidth: 100, sortable: false },
+        { prop: "linkUserName", label: "掌中保用户名称", minWidth: 100, sortable: false },
+      ],
+      dialogTitle: "掌中保用户列表",
+      dialogVisible: false, // 新增编辑界面是否显示
+      departmentList: [], // 选中公司的所有部门的集合
+      deptInfo: {}, //选中机构的基本信息
+      option: [], //机构列表
+      showOut: false,
+      isRadioMode: true
+    };
+  },
+  created() {
+    this.queryStaffInfo();
+  },
+  watch: {
+    containsSubDeptChecked() {
+      this.findPage();
+    },
+  },
+  methods: {
+   
+    // 查询Start
+    queryStaffInfo() {
+      this.isQueryStaff = true;
+      this.findPage();
+    },
+    onZTreeClick: function (evt, treeId, treeNode) {
+      // 点击事件
+      this.currentTreeNode = evt;
+      this.deptId = this.currentTreeNode.id;
+      this.pageData.pageNum = 1;
+      this.findPage();
+    },
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      if (data && data.pageRequest) {
+        this.pageData.pageNum = data.pageRequest.pageNum;
+        this.pageData.pageSize = data.pageRequest.pageSize;
+      }
+      if (this.isQueryStaff) {
+        this.pageData.pageNum = 1;
+      }
+      this.isQueryStaff = false;
+      let dto = {
+        deptId: this.deptId,
+        mobile: this.pageData.mobile,
+        userName: this.pageData.name,
+        userId: this.pageData.userId,
+        pageNum: this.pageData.pageNum,
+        pageSize: this.pageData.pageSize,
+      };
+     
+      this.$api.bindUser.queryUserZZBPage(dto).then((res) => {
+        this.pageResult = {
+          content: res.data.content,
+          pageNum: res.data.current,
+          pageSize: res.data.size,
+          totalPages: res.data.pages,
+          totalSize: res.data.total,
+        };
+      });
+    },
+    //打开掌中保人员列表
+    handleTableEdit(data) {
+      this.userId = data.row.userId;
+      this.handleAddButton()
+    },
+    // 清空单个人员
+    handleTableDeleteFlag(data) {
+      this.$confirm("确认清空？")
+        .then(() => {
+          this.$api.bindUser.deleteZzb({userId:data.row.userId}).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                message: "清空成功",
+                type: "success",
+              });
+              this.findPage();
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    //关闭页面
+    closeDialog() {
+      this.dialogVisible = false;
+      this.addQueryForm = {}
+    },
+    //绑定用户id
+    addSubmit(){
+      if(this.selectedRow.length==0){
+        this.$message({
+              message: "请选择用户",
+              type: "error",
+          });
+          return;
+      }
+      if(this.selectedRow.length>1){
+        this.$message({
+              message: "请选择一个用户",
+              type: "error",
+          });
+          return;
+      }
+      //调用添加接口
+      this.$api.bindUser.addOrUpdateZzb({
+        userId:  this.userId,
+        linkUserId: this.selectedRow[0].id,
+      }).then((res) => {
+        if (res.code == 200) {
+              this.$message({
+                message: "绑定成功",
+                type: "success",
+              });
+              this.dialogVisible = false;
+              this.findPage();
+        }
+      })
+    },
+    handleSelectionChange(val){
+      this.selectedRow = val 
+    },
+    handleRowClick(row) {
+      const flag = !row.flag
+      if (this.isRadioMode) {
+        this.$refs['zzbTable'].clearSelection()
+        this.addListData.forEach((v) => {
+          v.flag = false
+        })
+      }
+      row.flag = flag
+      this.$refs['zzbTable'].toggleRowSelection(row, flag)
+    },
+    handleSelect(selection, row) {
+      if (!this.isRadioMode) return
+      this.$refs['zzbTable'].clearSelection()
+      if (selection.length != 0) {
+        row.flag = true
+        this.$refs['zzbTable'].toggleRowSelection(row, true)
+      } else {
+        row.flag = false
+        this.$refs['zzbTable'].toggleRowSelection(row, false)
+      }
+    },
+    cellClass(row) {
+      if (this.isRadioMode && row.columnIndex === 0) {
+        return 'hideCheckbox'
+      }
+    },
+    refreshPageRequest: function (pageNum) {
+      this.addListDataPage.pageNum = pageNum;
+      this.handleAddButton()
+    },
+    handleSizeChange(pageSize) {
+      this.addListDataPage.pageSize = pageSize;
+      this.handleAddButton()
+    },
+    handleAddButton() {
+      this.$api.bindUser.queryUserZzbListPage({
+        userName: this.addQueryForm.userName,
+        pageNum: this.addListDataPage.pageNum,
+        pageSize: this.addListDataPage.pageSize,
+        mobile: this.addQueryForm.mobile,
+      }).then((res) => {
+        this.addListData = res.data.content
+        this.addListDataPage.pageNum = res.data.pageNum
+        this.addListDataPage.pageSize = res.data.pageSize
+        this.addListDataPage.total = res.data.totalSize
+        this.dialogVisible = true;
+      })
+    },
+  },
+};
+</script>
+
+<style scoped>
+.el-divider--horizontal {
+  margin: 4px 0;
+}
+
+/* 顶部查询条件样式Start */
+.queryFrom .el-row {
+  margin: 10px 0px;
+}
+
+.queryFrom .el-form-item {
+  margin-bottom: 0px;
+}
+
+.queryFrom .queryButton .el-form-item__content {
+  margin-left: 0px !important;
+}
+
+.disc {
+  -webkit-text-security: disc;
+  position: relative;
+}
+
+.none {
+  -webkit-text-security: none;
+  position: relative;
+}
+
+.icon {
+  color: #ccc;
+  position: absolute;
+  right: 0;
+  top: 10px;
+  text-align: center;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+}
+
+.avatar {
+  border: 1px dashed #d9d9d9;
+  padding: 5px;
+  border-radius: 6px;
+  width: 100px;
+  height: 100px;
+  display: block;
+  box-sizing: border-box;
+}
+::v-deep.order .el-table__header-wrapper  .el-checkbox{
+    display:none
+  }
+</style>
+
+<style lang="scss" scoped>
+>>> .el-tabs__item:hover {
+  color: #2d4d89;
+}
+>>> .el-tabs__item.is-active {
+  color: #fff;
+  background: #2d4d89;
+  transition: all ease 0.5s;
+}
+>>> .el-tabs__active-bar {
+  background-color: #2d4d89;
+}
+>>> .el-tabs__item.is-top:nth-child(2) {
+  padding-left: 20px !important;
+}
+>>> .el-tabs--top .el-tabs__item.is-top:last-child {
+  padding-right: 20px !important;
+}
+
+.el-tabs {
+  >>> .el-input__inner:focus,
+  >>> .el-select .el-input.is-focus .el-input__inner {
+    border-color: #2d4d89;
+  }
+  .el-button--primary,
+  .el-button--primary:focus {
+    background-color: #2d4d89;
+    border-color: #2d4d89;
+  }
+}
+.select-prop {
+  .el-select-dropdown__item.selected,
+  .el-date-table td.available:hover {
+    color: #2d4d89;
+  }
+  .el-date-table td.current:not(.disabled) span {
+    background-color: #2d4d89;
+  }
+}
+</style>

src/views/BindUser/mixin.js

@@ -0,0 +1,219 @@
+export default (params) => { // 导出混入对象
+  const { //树分类过滤参数
+    treeTypeNum=2
+  } = params;
+  return {
+    data() {
+      return {
+        nationalList: [
+          "汉族",
+          "壮族",
+          "满族",
+          "回族",
+          "苗族",
+          "维吾尔族",
+          "土家族",
+          "彝族",
+          "蒙古族",
+          "藏族",
+          "布依族",
+          "侗族",
+          "瑶族",
+          "朝鲜族",
+          "白族",
+          "哈尼族",
+          "哈萨克族",
+          "黎族",
+          "傣族",
+          "畲族",
+          "傈僳族",
+          "仡佬族",
+          "东乡族",
+          "高山族",
+          "拉祜族",
+          "水族",
+          "佤族",
+          "纳西族",
+          "羌族",
+          "土族",
+          "仫佬族",
+          "锡伯族",
+          "柯尔克孜族",
+          "达斡尔族",
+          "景颇族",
+          "毛南族",
+          "撒拉族",
+          "布朗族",
+          "塔吉克族",
+          "阿昌族",
+          "普米族",
+          "鄂温克族",
+          "怒族",
+          "京族",
+          "基诺族",
+          "德昂族",
+          "保安族",
+          "俄罗斯族",
+          "裕固族",
+          "乌兹别克族",
+          "门巴族",
+          "鄂伦春族",
+          "独龙族",
+          "塔塔尔族",
+          "赫哲族",
+          "珞巴族",
+        ],
+        sexoptions: JSON.parse(localStorage.getItem("sexOptions")),
+        postOption: [],
+        bloodOption: [
+          {
+            label: 'A型',
+            value: 'A型'
+          }, {
+            label: 'B型',
+            value: 'B型'
+          }, {
+            label: 'O型',
+            value: 'O型'
+          }, {
+            label: 'AB型',
+            value: 'AB型'
+          },
+        ],
+        educationOption: [
+          {
+            label: '小学',
+            value: '小学'
+          }, {
+            label: '初中',
+            value: '初中'
+          }, {
+            label: '高中',
+            value: '高中'
+          }, {
+            label: '专科',
+            value: '专科'
+          }, {
+            label: '本科',
+            value: '本科'
+          }, {
+            label: '硕士',
+            value: '硕士'
+          }, {
+            label: '博士',
+            value: '博士'
+          },
+        ],
+        healthOption: [
+          {
+            label: '健康',
+            value: '健康'
+          }, {
+            label: '亚健康',
+            value: '亚健康'
+          }, {
+            label: '疾病',
+            value: '疾病'
+          },
+        ],
+        politicsStatusOption: [
+          {
+            label: '群众',
+            value: '群众'
+          }, {
+            label: '共青团员',
+            value: '共青团员'
+          }, {
+            label: '中共党员',
+            value: '中共党员'
+          },
+        ],
+        maritalStatusOption: [
+          {
+            label: '未婚',
+            value: '未婚'
+          }, {
+            label: '已婚',
+            value: '已婚'
+          }, {
+            label: '离异',
+            value: '离异'
+          }, {
+            label: '再婚',
+            value: '再婚'
+          },
+        ],
+        user_statusoptions: JSON.parse(
+          localStorage.getItem("user_statusoptions")
+        ),
+        roles: JSON.parse(localStorage.getItem("find_all")),
+        /**Split 开始 */
+        ztreeNodes: [],
+        leftSplitWidth: 20,
+        rightSplitWidth: 80,
+        ztreeObj: null,
+        ztreeSetting: {
+          check: {
+            enable: false,
+          },
+          data: {
+            simpleData: {
+              enable: true,
+              pIdKey: "parentId",
+            },
+          },
+          view: {
+            showIcon: false,
+          },
+        },
+        currentTreeNode: null,
+        //----ztreeLeft end---------
+      }
+    },
+    created() {
+      this.$api.role.postViewAll().then((res) => {
+        res.data.forEach(ele => {
+          ele.postId = ele.postId + ''
+        })
+        this.postOption = res.data
+      })
+      this.findLeftTreeData(); // 获取机构树的数据
+
+    },
+    mounted() {
+      //用像素初始化左边的split的宽度
+      this.changeTreeWidth(240); // 初始化树的宽度
+    },
+    methods: {
+      changeTreeWidth(widthVal) {
+        // 初始化树的宽度
+        this.leftSplitWidth = Math.ceil(
+          (widthVal / this.$refs.elMain.$el.clientWidth) * 100
+        );
+        this.rightSplitWidth = 100 - this.leftSplitWidth;
+      },
+      findLeftTreeData: function () {
+        this.$api.dept.findTree().then((res) => {
+          // console.log(treeTypeNum);
+          this.treeDataRecursion(res.data, treeTypeNum);
+          this.ztreeNodes = res.data;
+        });
+      },
+      //树过滤五级机构递归
+      treeDataRecursion(data, num, one) {
+        data = data || this.ztreeNodes;
+        one = one || 0;
+        one++;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].comlevel == 5 && (data[i].managementSource != num)) {
+            data.splice(i, 1);
+            i = i - 1;
+          } else {
+            this.treeDataRecursion(data[i].children, num, one);
+          }
+        }
+      },
+
+    }
+  }
+}