添加用户绑定电销用户

src/http/moudules/bindUser.js

@@ -21,6 +21,15 @@ export const queryUserZZBPage = (data) => {
     data
   })
 }
+
+// 用户关联电销用户列表
+export const queryUserDXPage = (data) => {
+  return axios({
+    url: '/sysUserLinkDxUser/queryUserPage',
+    method: 'post',
+    data
+  })
+}
 // 掌柜鼎用户列表
 export const queryUserZgdListPage = (data) => {
   return axios({
@@ -38,6 +47,15 @@ export const queryUserZzbListPage = (data) => {
     data
   })
 }
+
+// 电销用户列表
+export const queryUserDxListPage = (data) => {
+  return axios({
+    url: '/sysUserLinkDxUser/queryUserDxPage',
+    method: 'post',
+    data
+  })
+}
 // 绑定掌柜鼎用户列表
 export const addOrUpdateZgd = (data) => {
   return axios({
@@ -54,6 +72,16 @@ export const addOrUpdateZzb = (data) => {
     data
   })
 }
+
+// 绑定电销用户列表
+export const addOrUpdateDx = (data) => {
+  return axios({
+    url: '/sysUserLinkDxUser/addOrUpdate',
+    method: 'post',
+    data
+  })
+}
+
 // 清空绑定掌柜鼎用户
 export const deleteZgd = (data) => {
   return axios({
@@ -71,3 +99,12 @@ export const deleteZzb = (data) => {
     data
   })
 }
+
+// 清空绑定掌中保用户
+export const deleteDx = (data) => {
+  return axios({
+    url: '/sysUserLinkDxUser/delete',
+    method: 'post',
+    data
+  })
+}

src/views/BindUser/Dx.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.queryUserDXPage(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.deleteDx({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.addOrUpdateDx({
+        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['dxTable'].clearSelection()
+        this.addListData.forEach((v) => {
+          v.flag = false
+        })
+      }
+      row.flag = flag
+      this.$refs['dxTable'].toggleRowSelection(row, flag)
+    },
+    handleSelect(selection, row) {
+      if (!this.isRadioMode) return
+      this.$refs['dxTable'].clearSelection()
+      if (selection.length != 0) {
+        row.flag = true
+        this.$refs['dxTable'].toggleRowSelection(row, true)
+      } else {
+        row.flag = false
+        this.$refs['dxTable'].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.queryUserDxListPage({
+        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/PeopleManage/Staff/AreaOrganization.vue

@@ -266,13 +266,6 @@ export default {
             trigger: "blur",
           },
         ],
-        bindDeptId: [
-          {
-            required: true,
-            message: "请选择机构类型",
-            trigger: "change",
-          },
-        ]
       },
       isshow: false,
       expanded: false, // 在这里定义了展开与否的标志