后线人员配置前线机构

src/http/moudules/user.js

@@ -452,3 +452,49 @@ export const addOrDelete = (data) => {
     data
   })
 }
+
+
+// 获取前线机构树
+export const sysUserLinkFrontLineDeptQueryQxOrgTree= (params) => {
+  return axios({
+      url: '/sysUserLinkFrontLineDept/queryQxOrgTree',
+      method: 'get',
+      params
+  })
+}
+
+// 查询所有的后线人员配置前线机构列表
+export const sysUserLinkFrontLineDeptQueryPage = (data) => {
+  return axios({
+    url: '/sysUserLinkFrontLineDept/queryPage',
+    method: 'post',
+    data
+  })
+}
+
+
+// 后线人员配置前线机构删除
+export const sysUserLinkFrontLineDeptDelete = (data) => {
+  return axios({
+    url: '/sysUserLinkFrontLineDept/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 后线人员配置前线机构添加修改
+export const sysUserLinkFrontLineDeptAddOrUpdate= (data) => {
+  return axios({
+    url: '/sysUserLinkFrontLineDept/addOrUpdate',
+    method: 'post',
+    data
+  })
+}
+// 查询所有的后线人员列表+分页+标红显示
+export const sysUserLinkFrontLineDeptFindAllUserList= (data) => {
+  return axios({
+    url: '/sysUserLinkFrontLineDept/findAllUserList',
+    method: 'post',
+    data
+  })
+}

src/views/PeopleManage/Staff/PeopleOption.vue

@@ -0,0 +1,419 @@
+<template>
+  <div>
+      <el-main ref="elMain" style="padding: 0px;">
+          <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+              <!-- 左侧树Start -->
+              <SplitArea :minSize="240">
+                  <div>
+                      <el-form ref="queryFormRef" :model="personnePageRequest" label-width="60px">
+                          <el-row>
+                              <el-col :span="7">
+                                  <el-form-item label="工号">
+                                      <el-input clearable :size="overSize" placeholder="工号"
+                                          v-model="personnePageRequest.userId"></el-input>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="7">
+                                  <el-form-item label="名称">
+                                      <el-input clearable :size="overSize" placeholder="名称"
+                                          v-model="personnePageRequest.name"></el-input>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="7">
+                                  <el-form-item label="机构">
+                                      <el-cascader v-model="personnePageRequest.deptId" :size="overSize"
+                                          :show-all-levels="false" :options="deptList" :props="optionProps" clearable
+                                          filterable></el-cascader>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="2">
+                                  <el-form-item label label-width="10px">
+                                      <el-button :size="overSize" type="primary"
+                                          @click="personnelFindQuery()">查询</el-button>
+                                  </el-form-item>
+                              </el-col>
+                          </el-row>
+                      </el-form>
+                      <el-table :data="personnePageReData" border ref="personneTable" width="100%" size="small"
+                          align="center" :header-cell-style="{
+                              background: '#F2F7FC',
+                              fontWeight: '900',
+                              color: '#606266',
+                          }" @selection-change="personneSelectionChange" :row-class-name="tableRowClassName">
+                          <el-table-column type="selection" width="55">
+                          </el-table-column>
+                          <el-table-column prop="userId" label="工号">
+                          </el-table-column>
+                          <el-table-column prop="name" label="名称">
+                          </el-table-column>
+                          <el-table-column prop="deptName" label="机构名称">
+                          </el-table-column>
+                          <el-table-column width="100" label="操作">
+                              <template slot-scope="scope">
+                                  <el-button type="text" @click="handleTableEdit(scope.row)" size="small">编辑</el-button>
+                              </template>
+                          </el-table-column>
+                          <!-- 表格列 -->
+                      </el-table>
+
+                      <el-pagination @size-change="handleSizeChange" @current-change="refreshPageRequest"
+                          :current-page="personnePageRequest.pageNum" :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]"
+                          :page-size="personnePageRequest.pageSize" layout="total, sizes, prev, pager, next, jumper"
+                          :total="personnePageRequest.total">
+                      </el-pagination>
+                  </div>
+              </SplitArea>
+              <!-- 工具区域Start -->
+              <SplitArea>
+                  <el-form ref="queryFormRef" :model="pageRequest" label-width="60px">
+                      <el-row>
+                          <el-col :span="7">
+                              <el-form-item label="工号">
+                                  <el-input clearable :size="overSize" placeholder="工号"
+                                      v-model="pageRequest.userId"></el-input>
+                              </el-form-item>
+                          </el-col>
+                          <el-col :span="7">
+                              <el-form-item label="姓名">
+                                  <el-input clearable :size="overSize" placeholder="姓名"
+                                      v-model="pageRequest.userName"></el-input>
+                              </el-form-item>
+                          </el-col>
+                          <el-col :span="7">
+                              <el-form-item label="前线机构" label-width="80px">
+                                  <el-cascader :size="overSize" v-model="pageRequest.areaCode"   :options="areaOptions"
+                                      :props="{ label: 'name', value: 'id', children: 'children', checkStrictly: true }" clearable
+                                      ref="area"></el-cascader>
+                              </el-form-item>
+                          </el-col>
+                          <el-col :span="12">
+                              <el-button size="small" type="primary" @click="findQuery()">查询</el-button>
+                              <kt-button label="添加" type="primary" @click="handleAddProduct" />
+                          </el-col>
+                      </el-row>
+                  </el-form>
+                  <kt-common-table style="margin-top:10px" :data="pageResult" :columns="columns" :showBatchDelete="true"
+                      deleteButtonName="删除" deleteName="批量删除" @handleDelete="handleDelete" @findPage="findPage"
+                      @handleDeleteFlag="handleTableDeleteFlag"></kt-common-table>
+              </SplitArea>
+              <!-- 右侧列表页面End -->
+          </Split>
+      </el-main>
+
+      <!-- 新增对话框 -->
+      <el-dialog :title="dialogTitle" v-dialogDrag :visible.sync="productDialogVisible" width="800px">
+          <el-tree
+              :data="tableData"
+              show-checkbox
+              node-key="id"
+              ref="areaTree"
+              check-strictly
+              highlight-current
+              :props="{
+                  children: 'children',
+                  label: 'name',
+                  value: 'id'
+                  }">
+              </el-tree>
+          <span slot="footer" class="dialog-footer">
+              <el-button size="small" @click="productDialogVisible = false">取 消</el-button>
+              <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
+          </span>
+      </el-dialog>
+  </div>
+</template>
+<script>
+import KtButton from "@/views/Core/KtButton"; //按钮权限组件
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+// import CommonUtil from "@/utils/comutil.js";
+export default {
+  components: {
+      KtButton,
+      KtCommonTable
+  },
+  data() {
+      return {
+          areaOptions: [],
+          optionProps: {
+              checkStrictly: true,
+              value: "id",
+              label: "name",
+              children: "children",
+          },
+          deptList: [],
+          overSize: "small",
+          leftSplitWidth: 20,
+          rightSplitWidth: 80,
+          // 右侧列表查询数据Start
+          pageResult: {},
+          personnePageReData: [],
+          pageRequest: {
+              //查询的默认条件
+              pageNum: 1,
+              pageSize: 20
+          },
+          personnePageRequest: {
+              //查询的默认条件
+              pageNum: 1,
+              pageSize: 10,
+              total: 0
+          },
+          columns: [
+              // 数据列
+              {
+                  prop: "userId",
+                  label: "人员ID",
+                  sortable: false
+              },
+              {
+                  prop: "userName",
+                  label: "姓名",
+                  sortable: false
+              },
+              {
+                  prop: "deptId",
+                  label: "前线机构ID",
+                  sortable: false
+              },
+              {
+                  prop: "deptName",
+                  label: "前线机构名称",
+                  sortable: false
+              },
+          ],
+          productDialogVisible: false, //控制产品对话框
+          dialogTitle: "新增",
+          userId: "",
+          tableData: [],
+          personnelValue: '', //工号搜索
+      };
+  },
+  created() {
+      this.$api.user.sysUserLinkFrontLineDeptQueryQxOrgTree().then((res) => {
+          this.areaOptions = res.data;
+      });
+      this.getAllCompany()
+      this.personnelFindPage()
+  },
+  watch: {},
+  methods: {
+      handleDelete(val) {
+          this.handleTableDelete(val)
+      },
+      personnelFindQuery() {
+          this.personnePageRequest.pageNum = '1',
+              this.personnePageRequest.pageSize = 20
+          this.personnelFindPage()
+      },
+      findQuery() {
+          this.pageRequest.pageNum = '1',
+              this.pageRequest.pageSize = 20
+          this.findPage()
+      },
+      tableRowClassName(row) {
+          if (row.row.flag) {
+              return 'flagRow';
+          } else {
+              return '';
+          }
+      },
+      handleSizeChange(pageSize) {
+          this.personnePageRequest.pageSize = pageSize;
+          this.personnelFindPage()
+      },
+      refreshPageRequest: function (pageNum) {
+          this.personnePageRequest.pageNum = pageNum;
+          this.personnelFindPage()
+      },
+      personnelFindPage() {
+          let deptId = ''
+          if (this.personnePageRequest.deptId && this.personnePageRequest.deptId.length > 0) {
+              deptId = this.personnePageRequest.deptId[this.personnePageRequest.deptId.length - 1]
+          }
+          this.$api.user.sysUserLinkFrontLineDeptFindAllUserList({ ...this.personnePageRequest, deptId }).then(res => {
+              if (res.code == 200) {
+                  this.personnePageReData = res.data.content;
+                  this.personnePageRequest.pageNum = res.data.pageNum;
+                  this.personnePageRequest.pageSize = res.data.pageSize;
+                  this.personnePageRequest.total = res.data.totalSize;
+              } else {
+                  this.$message.error(res.msg);
+              }
+          });
+      },
+          filterTreeData  (data, condition){
+              const result = [];
+              const recurse = (nodes) => {
+                  nodes.forEach((node) => {
+                  if (node.flag) {
+                      result.push(node);
+                  }
+                  if (node.children && node.children.length > 0) {
+                      recurse(node.children);
+                  }
+                  });
+              };
+              recurse(data);
+          return result;
+          },
+      //--tree begin-------
+      handleTableEdit(row) {
+          this.userId = row.userId
+          this.$api.user.sysUserLinkFrontLineDeptQueryQxOrgTree({
+            userId: row.userId
+          }).then(res=>{
+            if (res.code == 200) {
+                this.tableData = res.data;
+                this.$nextTick(() => {
+                    this.$refs.areaTree.setCheckedNodes(this.filterTreeData(this.tableData) )
+                })
+                this.dialogTitle = "修改";
+                this.productDialogVisible = true;
+            } else {
+                this.$message.error(res.msg);
+            }
+        });
+        //   this.$api.user.findAreaListByUserId(row.userId).then(res => {
+        //       if (res.code == 200) {
+        //           this.tableData = res.data;
+        //           this.$nextTick(() => {
+        //               this.$refs.areaTree.setCheckedNodes(this.filterTreeData(this.tableData) )
+        //           })
+        //           this.dialogTitle = "修改";
+        //           this.productDialogVisible = true;
+        //       } else {
+        //           this.$message.error(res.msg);
+        //       }
+        //   });
+      },
+     
+      // 获取所有机构列表
+      getAllCompany() {
+          this.$api.task.findAllTree().then(res => {
+              this.deptList = res.data
+          });
+      },
+      handleTableDeleteFlag(data) {
+          this.handleTableDelete([data.row.id])
+      },
+      handleTableDelete(id) {
+          this.$api.user.sysUserLinkFrontLineDeptDelete({ ids: id }).then(res => {
+              if (res.code == "200") {
+                  this.$message({
+                      message: "删除成功",
+                      type: "success"
+                  });
+                  this.findPage();
+                  this.personnelFindPage()
+              } else {
+                  this.$message({
+                      message: "操作失败",
+                      type: "error"
+                  });
+              }
+          });
+      },
+      handleAddProduct() {
+          if (this.$refs.personneTable.selection && this.$refs.personneTable.selection.length > 0) {
+              this.userId = this.$refs.personneTable.selection[0].userId
+              this.$api.user.sysUserLinkFrontLineDeptQueryQxOrgTree().then(res=>{
+                  if (res.code == 200) {
+                      this.tableData = res.data;
+                      this.dialogTitle = "新增";
+                      this.productDialogVisible = true;
+                  } else {
+                      this.$message.error(res.msg);
+                  }
+              });
+          } else {
+              this.$message.error("请选择人员！");
+          }
+      },
+      findPage(data) {
+          // 获取分页数据
+          if (data && data.pageRequest) {
+              this.pageRequest.pageNum = data.pageRequest.pageNum;
+              this.pageRequest.pageSize = data.pageRequest.pageSize;
+          }
+          let orgId=''
+          if(this.pageRequest.areaCode){
+            orgId=this.pageRequest.areaCode[this.pageRequest.areaCode.length-1]
+          }
+          this.$api.user
+              .sysUserLinkFrontLineDeptQueryPage({ ...this.pageRequest,orgId })
+              .then(res => {
+                  if (res.code == 200) {
+                      this.pageResult = res.data;
+                  } else {
+                      this.$message.error(res.msg);
+                  }
+              })
+              .then(data != null ? data.callback : "");
+      },
+      submitForm() {
+          let areaCodes= this.$refs.areaTree.getCheckedNodes().map(item => item.id)
+          this.$api.user
+              .sysUserLinkFrontLineDeptAddOrUpdate({
+                  deptIds: areaCodes,
+                  userId: this.userId
+              })
+              .then(res => {
+                  if (res.code == 200) {
+                      this.$message({
+                          message: "操作成功",
+                          type: "success"
+                      });
+                      this.personnelFindPage();
+                      this.findPage()
+                      this.productDialogVisible = false;
+                  } else {
+                      this.$message({
+                          message: "操作失败",
+                          type: "error"
+                      });
+                  }
+              });
+      },
+      //--数据字典 begin --
+      getDicType(type) {
+          this.$api.insCompany.dicType(type).then(res => {
+              if (res.code == 200) {
+                  this[type + "options"] = res.data.ddList;
+              }
+          });
+      },
+      personneSelectionChange(selection) {
+          if (selection.length > 1) {
+              this.$refs.personneTable.clearSelection(); // 清空所有选择
+              this.$refs.personneTable.toggleRowSelection(selection.pop()); // 设置选择项
+          }
+      },
+  }
+};
+</script>
+  
+<style scoped lang="scss">
+/* 顶部查询条件样式Start */
+.queryFrom .el-row {
+  margin: 10px 0px;
+}
+
+>>> .el-table .flagRow {
+  background: rgba(212, 36, 38, 0.2) !important;
+}
+
+>>> .el-table__header-wrapper .el-table__header .el-checkbox {
+  display: none;
+}
+
+.queryFrom .el-form-item {
+  margin-bottom: 0px;
+}
+
+.queryFrom .queryButton .el-form-item__content {
+  margin-left: 40px !important;
+}
+
+/* 顶部查询条件样式End */
+</style>
+