From 3ddce08274366275b68ee4f2bfd4cb04ceca1af1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=8B=E4=BC=9F=E4=BD=B3?= <2797716443@qq.com>
Date: Thu, 20 Jan 2022 14:42:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E7=BB=84=E6=9E=B6=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/workTree/index.vue             | 352 +++++++++
 .../config/pages/mechanismManage/index.vue    | 688 ++----------------
 .../pages/mechanismManage/pages/mechanism.vue | 662 +++++++++++++++++
 .../pages/mechanismManage/pages/workgroup.vue | 546 ++++++++++++++
 4 files changed, 1611 insertions(+), 637 deletions(-)
 create mode 100644 src/components/workTree/index.vue
 create mode 100644 src/pages/config/pages/mechanismManage/pages/mechanism.vue
 create mode 100644 src/pages/config/pages/mechanismManage/pages/workgroup.vue

diff --git a/src/components/workTree/index.vue b/src/components/workTree/index.vue
new file mode 100644
index 000000000..0d805290e
--- /dev/null
+++ b/src/components/workTree/index.vue
@@ -0,0 +1,352 @@
+<template>
+  <div class="roleTree">
+    <el-drawer
+      :title="isTitle"
+      :visible.sync="isVisible2"
+      :wrapperClosable="false"
+      @close="handleTreeDrawerCancel"
+      size="400px">
+      <el-form
+        ref="attributeEO"
+        class="label-input-form"
+        :inline="true"
+        @submit.native.prevent
+      >
+        <el-form-item class="form-item-disabled" style="margin: 10px;">
+          <el-input
+            v-model="filterText"
+            placeholder="请输入姓名"
+            @input="changeInput"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <el-tree
+        v-if="open1 && isVisible2"
+        node-key="id"
+        style="height: 100%; overflow: auto;"
+        class="filter-tree tree-line"
+        icon-class="icon-tree"
+        @check-change="checkChange"
+        :data="treeData"
+        :props="defaultProps"
+        :default-checked-keys="nodeList"
+        highlight-current
+        check-strictly
+        @check="drawerCheck"
+        :expand-on-click-node="true"
+        show-checkbox
+        ref="tree"
+        :load="loadNode"
+        lazy>
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                      <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
+                      <span> {{ node.label }} </span>
+                  </span>
+      </el-tree>
+      <el-tree
+        v-if="!open1 && isVisible2"
+        node-key="id"
+        style="height: 100%; overflow: auto;"
+        class="filter-tree tree-line"
+        icon-class="icon-tree"
+        :data="treeData1"
+        :props="defaultProps"
+        @check-change="checkChange2"
+        :default-checked-keys="nodeList"
+        highlight-current
+        check-strictly
+        @check="drawerCheck"
+        :expand-on-click-node="true"
+        default-expand-all
+        show-checkbox
+        ref="tree">
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                      <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
+                      <span> {{ node.label }} </span>
+                  </span>
+      </el-tree>
+      <div id="roleFormButton" class="demo-drawer-footer">
+        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
+
+        <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="handleTreeDrawerCancel">取消</el-button>
+      </div>
+      <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+function debounce(func, wait = 500){
+  let timeout;
+  return function(event){
+    clearTimeout(timeout)
+    timeout = setTimeout(()=>{
+      func.call(this, event)
+    },wait)
+  }
+}
+export default {
+  name: "workTree",
+  props: {
+    checkBox: { // 单选/多选
+      type: Boolean,
+      default: false,
+    },
+    isTitle: { // 标题
+      type: String
+    },
+    isVisible: { // drawer开关
+      type: Boolean,
+      default: false,
+    },
+    nodeList: { // 回显
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      roleList: [],
+      isVisible2: false,
+      filterText: '',
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+        isLeaf: (data, node) => {
+          if (!node.disabled) {
+            return true
+          }
+        }
+      },
+      treeData1: [],
+      treeData: [],
+      open1: true,
+      treeLoading: false,
+      roleRow: {}
+    }
+  },
+  methods: {
+    changeInput:debounce(function (val) {
+      if (val.length) {
+        this.open1 = false
+        this.treeLoading = true
+        this.$http.get('SarInstitution/institution/institutionAndUser', {
+          userName: val
+        }, {}, res => {
+          this.treeData1 = res.data
+          this.treeLoading = false
+        })
+      } else {
+        this.open1 = true
+      }
+    }),
+    checkChange2 (row, type, c) {
+      if (this.checkBox) {
+      } else {
+        if (type) {
+          this.nodeList.push(row.id)
+        } else {
+          for (let a = 0; a < this.nodeList.length; a ++) {
+            if (row.id === this.nodeList[a]) {
+              this.nodeList.splice(a, 1)
+            }
+          }
+        }
+      }
+    },
+    checkChange (row, type, c) {
+      if (this.checkBox) {
+      } else {
+        if (type) {
+          this.nodeList.push(row.id)
+        } else {
+          for (let a = 0; a < this.nodeList.length; a ++) {
+            if (row.id === this.nodeList[a]) {
+              this.nodeList.splice(a, 1)
+            }
+          }
+        }
+      }
+
+    },
+    handleTreeDrawerCancel () {
+      this.filterText = ''
+      this.isVisible2 = false
+      this.open1 = true
+    },
+    saveUserInfo () {
+      if (this.checkBox) {
+        this.isVisible2 = false
+        this.$emit('checkedRole', this.roleList)
+      } else {
+        if (this.nodeList.length > 0 && this.nodeList[0].length !== 0) {
+          let ids = ''
+          this.nodeList.forEach(item => {
+            if (ids.length > 0) {
+              ids += ','
+              ids += item
+            } else {
+              ids = item
+            }
+          })
+          this.$http.get('SarInstitution/institution/getNextById', {
+            ids: ids
+          }, {
+            _this: this
+          }, res => {
+            this.isVisible2 = false
+            this.$emit('checkedRole', res)
+          })
+        } else {
+          this.isVisible2 = false
+          this.$emit('checkedRole', this.roleList)
+        }
+      }
+      this.open1 = true
+    },
+    drawerCheck (data) {
+      if (this.checkBox) { // 单选
+        // 单选判断
+        let getlist = this.$refs.tree.getCheckedNodes()
+        if (getlist.length > 1) {
+          this.$refs.tree.setCheckedKeys([])
+          this.$refs.tree.setCheckedKeys([data.id])
+          this.roleList = [data]
+        } else if (getlist.length === 0) {
+          this.roleList = [{}]
+        } else if (getlist.length === 1) {
+          this.roleList = [data]
+        }
+        // var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
+        // if(getlist.length == 1) {
+        //     this.roleRow = getlist[0]
+        // } else {
+        //     this.$refs.tree.setCheckedKeys([data.id])
+        //     this.roleRow = this.$refs.tree.getCheckedNodes()[0]
+        // }
+        // this.roleList = [this.roleRow]
+      } else { // 多选
+        this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
+      }
+    },
+    loadNode(node, resolve) {
+      if (node.level === 0) {
+        return resolve(this.treeData);
+      }
+      this.getChildren(node, resolve)
+    },
+    getChildren (node, resolve) {
+      this.$http.get('SarInstitution/institution/getNext', {
+        institutionId: node.key,
+        userName: this.filterText
+      }, {}, res => {
+        resolve(res)
+      })
+    },
+    getTree () {
+      this.treeLoading = true
+      this.$http.get('SarInstitution/institution/getFirstInstitution', {}, {}, res=> {
+        this.treeData = res
+        this.treeLoading = false
+      })
+    }
+  },
+  watch: {
+    isVisible (val) {
+      this.isVisible2 = val
+    },
+    isVisible2 (val) {
+      this.$emit('update:isVisible', val)
+    },
+  },
+  mounted () {
+    this.getTree()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .icon-tree {
+  margin: 0 5px 0 10px;
+  position: relative;
+  background: url('~@/assets/images/shangqi/img/tree-add.png');
+  background-size: 100% 100%;
+}
+/deep/.el-tree-node__content {
+  padding-left: 0px !important;
+}
+/deep/ .is-leaf{
+  background-image:none;
+  background-size:100% 100%;
+}
+/deep/ .is-leaf-none{
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background:url('~@/assets/images/shangqi/img/personnel.png');
+  background-size:100% 100%;
+}
+/deep/ .is-show{
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background:url('~@/assets/images/shangqi/img/mechanism.png');
+  background-size:100% 100%;
+}
+/deep/.tree-line{
+  .el-tree-node {
+    position: relative;
+    padding-left: 0px; // 缩进量
+    line-height: 30px;
+  }
+  .el-tree-node__children {
+    padding-left: 16px; // 缩进量
+  }
+  // 竖线
+  .el-tree-node::before {
+    content: "";
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    left: -3px;
+    top: -26px;
+    border-width: 1px;
+    border-left: 1px dashed #858990e0;
+  }
+  // 当前层最后一个节点的竖线高度固定
+  .el-tree-node:last-child::before {
+    height: 38px; // 可以自己调节到合适数值
+  }
+  // 横线
+  .el-tree-node::after {
+    content: "";
+    width: 11px;
+    height: 20px;
+    position: absolute;
+    left: -3px;
+    top: 12px;
+    border-width: 1px;
+    border-top: 1px dashed #858990e0;
+  }
+  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
+  & > .el-tree-node::after {
+    border-top: none;
+  }
+  & > .el-tree-node::before {
+    border-left: none;
+  }
+  // 展开关闭的icon
+  .el-tree-node__expand-icon{
+    font-size: 16px;
+    // 叶子节点（无子节点）
+    &.is-leaf{
+      color: transparent;
+      // display: none; // 也可以去掉
+    }
+  }
+}
+</style>
diff --git a/src/pages/config/pages/mechanismManage/index.vue b/src/pages/config/pages/mechanismManage/index.vue
index bd5756b9d..e062b815e 100644
--- a/src/pages/config/pages/mechanismManage/index.vue
+++ b/src/pages/config/pages/mechanismManage/index.vue
@@ -1,662 +1,76 @@
-<!-- 配置管理 - 机构管理 -->
+<!--未符合项整改-->
 <template>
-  <div id="mechanism-manage" :class="{ 'tree-close': sideClose }" class="v-class">
-    <div class="tree-content" :class="{ 'tree-closed': sideClose }">
-      <div class="tree">
-<!--        @keyup.enter.native="searchPeople"-->
-        <el-input
-          class="filter-tree-input"
-          placeholder="输入关键字进行过滤"
-          v-model="filterText">
-        </el-input>
-<!--        <el-tree-->
-<!--          node-key="id"-->
-<!--          :data="treeData"-->
-<!--          :props="defaultProps"-->
-<!--          :default-checked-keys="nodeList"-->
-<!--          :current-node-key="nodeKeyId"-->
-<!--          highlight-current-->
-<!--          check-strictly-->
-<!--          :expand-on-click-node="false"-->
-<!--          ref="tree"-->
-<!--          :load="loadNode"-->
-<!--          @node-click="handleNodeClick"-->
-<!--          lazy>-->
-<!--        </el-tree>-->
-        <el-tree
-          :data="treeData"
-          :props="defaultProps"
-          :current-node-key="nodeKeyId"
-          node-key="id"
-          :filter-node-method="filterNode"
-          highlight-current
-          ref="tree"
-          :expand-on-click-node="false"
-          @node-click="handleNodeClick">
-        </el-tree>
-      </div>
-      <div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
-        <!--切换折叠样式-->
-        <i class="el-icon-arrow-left" v-if="sideClose === false"></i>
-        <i class="el-icon-arrow-right" v-if="sideClose === true"></i>
-      </div>
+  <div id="mechanism" >
+    <div class="mechanism-content">
+      <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%">
+        <el-tab-pane label="机构管理" name="mechanism">
+          <mechanism></mechanism>
+        </el-tab-pane>
+        <el-tab-pane label="工作组" name="workgroup">
+          <workgroup></workgroup>
+        </el-tab-pane>
+      </el-tabs>
     </div>
-    <div class="tree-right">
-      <div class="content">
-        <!--搜索区域-->
-        <div class="search-area">
-          <el-form inline class="label-input-form" v-model="searchForm">
-            <el-form-item label="姓名" class="search-item">
-              <el-input placeholder="根据姓名查询" clearable v-model="searchForm.uname">
-
-              </el-input>
-            </el-form-item>
-            <el-form-item label="邮箱" class="search-item">
-              <el-input placeholder="根据邮箱查询" clearable v-model="searchForm.email">
-
-              </el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" size="mini"
-                         class="common-button-primary" @click="getDatas('1')">
-                查询
-              </el-button>
-            </el-form-item>
-            <el-form-item>
-              <el-button size="mini" class="common-button-default" @click="clearAllSearch">
-                清空
-              </el-button>
-            </el-form-item>
-
-            <el-form-item>
-              <el-button size="mini" type="primary" @click="selectEdit">
-                批量配置岗位
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-        <el-table
-          ref="multipleTable"
-          :data="data"
-          tooltip-effect="dark"
-          border
-          style="width: 100%; flex: auto;"
-          class="drag-table"
-          height="100%"
-          @selection-change="selectedData"
-          :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
-         fontWeight: 'bold', height: '48px'}">
-          <el-table-column
-            type="selection"
-            width="55"
-            align="center"
-          />
-          <el-table-column
-            prop="account"
-            label="账号"
-            width="100px">
-          </el-table-column>
-          <el-table-column
-            prop="uname"
-            label="姓名"
-            width="100px">
-          </el-table-column>
-          <el-table-column
-            prop="sex"
-            label="性别"
-            width="50px">
-            <template slot-scope="scope">
-              <div v-if="scope.row.sex === '1'">男</div>
-              <div v-if="scope.row.sex === '2'">女</div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="phone"
-            label="电话"
-            width="170px">
-          </el-table-column>
-          <el-table-column
-            prop="email"
-            label="邮箱"
-            width="170px">
-          </el-table-column>
-          <el-table-column
-            prop="institutionName"
-            label="所属部门">
-            <template slot-scope="scope">
-              <el-popover trigger="hover" placement="top">
-                {{ scope.row.institutionName }}
-                <div slot="reference" class="name-wrapper">
-                  <p v-if="!scope.row.institutionName || scope.row.institutionName.length<15">
-                    {{ scope.row.institutionName }}
-                  </p>
-                  <p v-else> {{ scope.row.institutionName.substring(0, 15) }}...</p>
-                </div>
-              </el-popover>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="NameList"
-            label="所属岗位">
-            <template slot-scope="scope">
-              <el-popover trigger="hover" placement="top">
-                {{ scope.row.NameList }}
-                <div slot="reference" class="name-wrapper">
-                  <p v-if="!scope.row.institutionName ||scope.row.NameList.length<15">
-                    {{ scope.row.NameList }}
-                  </p>
-                  <p v-else> {{ scope.row.NameList.substring(0, 15) }}...</p>
-                </div>
-              </el-popover>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="状态"
-            width="100px">
-            <template slot-scope="scope">
-              <div v-if="scope.row.disableFlag === '1'">已禁用</div>
-              <div v-else>已启用</div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            width="50px">
-            <template slot-scope="scope">
-              <div @click.stop style="display: inline-block">
-                <el-dropdown trigger="click" @command="handleCommand">
-                  <i class="iconfont">&#xe61e;</i>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '1'" :command="[scope.row, '启用']">
-                      启用
-                    </el-dropdown-item>
-                    <el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '0'" :command="[scope.row, '禁用']">
-                      禁用
-                    </el-dropdown-item>
-                    <el-dropdown-item v-btn-permission="'ce2d2b9bb8004e0d9efcabc42a9f354d'" :command="[scope.row, '配置岗位']">
-                      配置岗位
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <loading :loading="Loading">加载中...</loading>
-      <pagination :page="page" :total="total" :pageSize="pageSize" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
-    </div>
-    <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
-    <el-drawer
-      class="postPage"
-      :title="drawerTitle"
-      :visible.sync="modalPost"
-      :wrapperClosable="false"
-      size="800px"
-      @close="resetFormPost"
-    >
-      <el-form ref="" :model="sarPost" inline>
-        <el-form-item  class="search-item" style="padding-left: 25px">
-          <el-input v-model="sarPost.name"
-                    size="small"
-                    placeholder="岗位名称查找"
-                    clearable></el-input>
-        </el-form-item>
-        <el-form-item label="" class="search-item btn-box">
-          <el-button class="common-button-primary" type="primary" size="mini" @click="searchPostName"
-                     v-btn-permission="">查询
-          </el-button>
-        </el-form-item>
-        <el-form-item label="" class="search-item btn-box">
-          <el-button class="common-button-default" @click="resetSelect" size="mini"
-                     v-btn-permission="">清空
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <el-tree
-        ref="tree2"
-        node-key="id"
-        class="filter-tree"
-        style="height: 100%; overflow: auto;"
-        v-if="modalPost"
-        :props="props"
-        :data="postList"
-        :filter-node-method="filterNode"
-        :default-checked-keys="nodeList"
-        highlight-current
-        check-strictly
-        default-expand-all
-        :expand-on-click-node="false"
-        show-checkbox>
-      </el-tree>
-      <pagination :page="page" :pageSize="pageSize" :total="total2" @pageChange="pageChange2" @pageSizeChange="pageSizeChange2"></pagination>
-      <div id="roleFormButton" class="demo-drawer-footer">
-        <el-button
-          size="mini"
-          class="common-button-primary"
-          icon="el-icon-check"
-          type="primary"
-          @click="PostSubmit"
-        >确定
-        </el-button>
-        <el-button size="mini" class="common-button-default" icon="el-icon-close" @click="resetFormPost">取消</el-button>
-      </div>
-    </el-drawer>
   </div>
 </template>
-
 <script>
+import workgroup from "@/pages/config/pages/mechanismManage/pages/workgroup";
+import mechanism from "@/pages/config/pages/mechanismManage/pages/mechanism";
 export default {
   name: 'MechanismManage',
-  data() {
+  components: {
+    workgroup,
+    mechanism,
+  },
+  data () {
     return {
-      peopleType: '', //1为树结构 2 为全机构
-      nodeKeyId: '',
-      searchForm: {
-        uname: "",
-        email: ""
-      },
-      userId: '',
-      postList: [],
-      props: {
-        children: 'children',
-        label: 'name'
-      },
-      nodeList: [],
-      modalPost: false,
-      sarPost: {
-        name: "", // 岗位名称
-      },
-      filterText: '', // 树结构检索条件
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      },
-      treeData: [], // 树结构数据
-      page: 1,
-      total: 0,
-      total2: 0,
-      pageSize: this.$store.getters.userInfo.configContent,
-      sideClose: false,
-      data: [], // table数据
-      treeLoading: false,
-      Loading: false,
-      id: '',
-      // 批量配置岗位勾选暂存
-      manageData: [],
-      drawerTitle: '配置岗位'
+      activeName: 'mechanism',
     }
   },
   methods: {
-    clearAllSearch() {
-      this.searchForm = {
-        uname: "",
-        email: ""
+    handleClick(tab, event) {
+    },
+    getActiveName(){
+      if (this.$route.query.activeName){
+        this.activeName = this.$route.query.activeName
       }
-      this.page = 1
-      this.getData()
-    },
-    resetFormPost() {
-      this.modalPost = false
-    },
-    PostSubmit() {
-      if (this.drawerTitle === '配置岗位') {
-        this.$http.postData('sarUser/user/position', {
-          positionIds: this.$refs.tree2.getCheckedKeys(),
-          userId: this.userId
-        }, {}, res => {
-          if (res.ok) {
-            this.$message.success('配置岗位成功')
-            this.modalPost = false
-            this.getData()
-          }
-        })
-      } else {
-        this.$http.postData('sarUser/user/positionBatch', {
-          positionIds: this.$refs.tree2.getCheckedKeys(),
-          userId: this.userId
-        }, {}, res => {
-          if (res.ok) {
-            this.$message.success('配置岗位成功')
-            this.modalPost = false
-            this.getData()
-          }
-        })
+      if (this.$route.query.keynoteActiveName){
+        this.keynoteActiveName = this.$route.query.keynoteActiveName
       }
-
-    },
-    searchPostName() {
-      this.page = 1;
-      this.getTree2();
-    }, // 查询
-    resetSelect() {
-      this.sarPost.name = "";
-      this.getTree2();
-    }, // 外层清空条件查询
-    handleCommand(command) {
-      switch (command[1]) {
-        case '启用':
-          this.disableFlagEdit(command[0], 0)
-          break
-        case '禁用':
-          this.disableFlagEdit(command[0], 1)
-          break
-        case '配置岗位':
-          this.postsConfigure(command[0])
-          break
-      }
-    },
-
-    getTree2() {
-      this.$http.get('sarPosition/position', {
-        current: this.page,
-        pageSize: this.pageSize,
-        ...this.sarPost,
-      }, {
-        _this: this,
-      }, res => {
-        this.postList = res.data.records
-        this.total2 = res.data.total
-      })
-    },
-    postsConfigure(row) {
-      var arr = []
-      this.userId = row.userId
-      row.positions.forEach((item) => {
-        arr.push(item.id)
-      })
-      this.nodeList = arr
-      this.modalPost = true
-    },
-    disableFlagEdit(row, type) {
-      let json = {}
-      json.userId = row.userId
-      json.disableFlag = type
-      this.$http.postData('sarUser/user/disable', json, {},
-        res => {
-          if (res.ok) {
-            if (type === 0) {
-              this.$message.success('已启用')
-            } else {
-              this.$message.success('已禁用')
-            }
-            this.getData()
-          }
-        })
-    },
-    treeCollapse() {
-      this.sideClose = !this.sideClose
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
-    },
-    handleNodeClick(data) {
-      this.id = data.id
-      this.getData()
-    },
-    // searchPeople(){
-    //   console.log(this.filterText);
-    // },
-    // loadNode(node, resolve) {
-    //   if (node.level === 0) {
-    //     return resolve(this.treeData);
-    //   }
-    //   this.getChildren(node, resolve)
-    // },
-    // getChildren (node, resolve) {
-    //   this.id = node.key
-    //   this.getData()
-    //   this.$http.get('SarInstitution/institution/getNext', {
-    //     institutionId: node.key
-    //   }, {}, res => {
-    //     let people = [];
-    //     res.forEach(item => {
-    //       if(item.disabled === true){
-    //         people.push(item)
-    //       }
-    //     })
-    //     resolve(people)
-    //   })
-    // },
-    // getTree() {
-    //   this.$http.get('SarInstitution/institution/getFirstInstitution', {}, {
-    //     _this: this,
-    //     loading: 'treeLoading'
-    //   }, res => {
-    //     this.treeData = res
-    //     this.nodeKeyId = this.treeData[0].id
-    //     this.treeLoading = false
-    //   }, e => {
-    //   })
-    // },
-    getTree() {
-      this.$http.get('SarInstitution/institution', {}, {
-        _this: this,
-        loading: 'treeLoading'
-      }, res => {
-        this.treeData = res.data
-        this.nodeKeyId = this.treeData[0].id
-        this.$nextTick(function () {
-          this.$refs.tree.setCurrentKey(this.nodeKeyId)
-        })
-        this.id = res.data[0].id
-        this.getData()
-      }, e => {
-        console.log(e);
-      })
-    },
-    getDatas(type) {
-      if (type === '1') {
-        this.page = 1
-      }
-      this.peopleType = 2;
-      this.$http.post('SarInstitution/institution/user', {
-        current: this.page,
-        size: this.pageSize,
-        uname: this.searchForm.uname,
-        email: this.searchForm.email
-      }, {
-        _this: this,
-        loading: 'Loading'
-      }, res => {
-        res.data.records.forEach((item) => {
-          let NameList = ''
-          item.positions.forEach((items) => {
-            if (NameList.length > 0) {
-              NameList += ','
-            }
-            NameList += items.name
-          })
-          item.NameList = NameList
-        })
-        this.data = res.data.records
-        this.total = res.data.total
-      })
-    },
-    getData() {
-      this.peopleType = 1;
-      this.$http.post('SarInstitution/institution/user', {
-        current: this.page,
-        size: this.pageSize,
-        institutionId: this.id,
-        uname: this.searchForm.uname,
-        email: this.searchForm.email
-      }, {
-        _this: this,
-        loading: 'Loading'
-      }, res => {
-        res.data.records.forEach((item) => {
-          let NameList = ''
-          item.positions.forEach((items) => {
-            if (NameList.length > 0) {
-              NameList += ','
-            }
-            NameList += items.name
-          })
-          item.NameList = NameList
-        })
-        this.data = res.data.records
-        this.total = res.data.total
-      })
-    },
-    pageChange(page) {
-      this.page = page
-      if(this.peopleType === 1){
-        this.getData()
-      }else{
-        this.getDatas()
-      }
-    },
-    pageSizeChange(pageSize) {
-      this.pageSize = pageSize
-      if(this.peopleType === 1){
-        this.getData()
-      }else{
-        this.getDatas()
-      }
-    },
-    pageChange2(page) {
-      this.page = page
-      this.getTree2()
-    },
-    pageSizeChange2(pageSize) {
-      this.pageSize = pageSize
-      this.getTree2()
-    },
-
-    /** 批量编辑岗位的勾选数据 */
-    selectedData(val) {
-      this.manageData = val
-    },
-
-    selectEdit() {
-      this.userId = []
-      this.manageData.forEach(item=>{
-        this.userId.push(item.userId)
-      })
-      this.drawerTitle = '批量配置岗位'
-      this.modalPost = true
-    },
+      console.log('35',this.keynoteActiveName)
+    }
   },
-  computed: {},
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    },
+  created() {
+    this.getActiveName()
   },
-  mounted() {
-    // 获取组织结构树
-    this.getTree()
-    this.getTree2()
-  }
+  watch: {},
+  mounted () {}
 }
 </script>
-
-<style lang="less">
-@import '~@/assets/styles/mixins';
-
-#mechanism-manage {
+<style lang="less" scoped>
+#mechanism {
+  height: inherit;
   display: flex;
-  height: 100%;
-
-  .tree-close {
-    .tree {
-      left: -200px !important;
-    }
-
-    .tree-right {
-      width: calc(~'100% - 15px') !important;
-    }
-
-    .side-bar-collapse {
-      background: #5596CC !important;
-      color: #FFF;
-    }
-  }
-
-  .tree-closed {
-    width: 15px !important;
-  }
-
-  .postPage {
-    .pagination {
-      position: initial;
-    }
-  }
-
-  .tree-content {
-    background: #fff;
-    width: 300px;
-    position: relative;
-
-    .tree {
-      width: 95%;
-      position: absolute;
-      left: 0;
-    }
-
-    .tree-collapse {
-      position: absolute;
-      right: 0;
-    }
-  }
-
-  .tree-right {
-    overflow-y: hidden;
-    padding: 0;
-    position: relative;
-    width: 100%;
+  flex-direction: column;
+  background-color: #FFFFFF;
+  .mechanism-content {
+    padding: 0 10px;
     height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    .content {
-      padding: 0px;
+    /deep/  .el-tabs {
       display: flex;
       flex-direction: column;
-      position: relative;
-      flex: auto;
-      //height: calc(~'100% - 105px - 56px');
-    }
-
-    .pagination {
-      position: static;
-      width: 100% !important;
-      left: 0 !important;
+      height: 100%;
+      .el-tabs__content {
+        flex: 1;
+        overflow: hidden;
+        .el-tab-pane {
+          height: 100%;
+        }
+      }
     }
   }
+  .el-tabs__nav {
+    margin-left:20px;
+  }
 }
 </style>
-<style lang="less" scoped>
-#mechanism-manage {
-  height: 100%;
-
-  .content {
-    height: calc(~'100% - 105px - 56px')
-  }
-
-  /deep/ .el-select__tags {
-    overflow-x: hidden;
-  }
-
-  /deep/ .width-all {
-    width: 100%;
-  }
-
-  .filter-tree {
-    height: calc(~'100% - 50px')
-  }
-
-  .laws-tree {
-    /deep/ .clearable {
-      top: 20px;
-    }
-  }
-
-  .add-form-item {
-    display: flex;
-  }
-}
-
-
-</style>
diff --git a/src/pages/config/pages/mechanismManage/pages/mechanism.vue b/src/pages/config/pages/mechanismManage/pages/mechanism.vue
new file mode 100644
index 000000000..e9036a7f7
--- /dev/null
+++ b/src/pages/config/pages/mechanismManage/pages/mechanism.vue
@@ -0,0 +1,662 @@
+<!-- 配置管理 - 机构管理 -->
+<template>
+  <div id="mechanism-manage" :class="{ 'tree-close': sideClose }" class="v-class">
+    <div class="tree-content" :class="{ 'tree-closed': sideClose }">
+      <div class="tree">
+        <!--        @keyup.enter.native="searchPeople"-->
+        <el-input
+          class="filter-tree-input"
+          placeholder="输入关键字进行过滤"
+          v-model="filterText">
+        </el-input>
+        <!--        <el-tree-->
+        <!--          node-key="id"-->
+        <!--          :data="treeData"-->
+        <!--          :props="defaultProps"-->
+        <!--          :default-checked-keys="nodeList"-->
+        <!--          :current-node-key="nodeKeyId"-->
+        <!--          highlight-current-->
+        <!--          check-strictly-->
+        <!--          :expand-on-click-node="false"-->
+        <!--          ref="tree"-->
+        <!--          :load="loadNode"-->
+        <!--          @node-click="handleNodeClick"-->
+        <!--          lazy>-->
+        <!--        </el-tree>-->
+        <el-tree
+          :data="treeData"
+          :props="defaultProps"
+          :current-node-key="nodeKeyId"
+          node-key="id"
+          :filter-node-method="filterNode"
+          highlight-current
+          ref="tree"
+          :expand-on-click-node="false"
+          @node-click="handleNodeClick">
+        </el-tree>
+      </div>
+      <div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
+        <!--切换折叠样式-->
+        <i class="el-icon-arrow-left" v-if="sideClose === false"></i>
+        <i class="el-icon-arrow-right" v-if="sideClose === true"></i>
+      </div>
+    </div>
+    <div class="tree-right">
+      <div class="content">
+        <!--搜索区域-->
+        <div class="search-area">
+          <el-form inline class="label-input-form" v-model="searchForm">
+            <el-form-item label="姓名" class="search-item">
+              <el-input placeholder="根据姓名查询" clearable v-model="searchForm.uname">
+
+              </el-input>
+            </el-form-item>
+            <el-form-item label="邮箱" class="search-item">
+              <el-input placeholder="根据邮箱查询" clearable v-model="searchForm.email">
+
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini"
+                         class="common-button-primary" @click="getDatas('1')">
+                查询
+              </el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button size="mini" class="common-button-default" @click="clearAllSearch">
+                清空
+              </el-button>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button size="mini" type="primary" @click="selectEdit">
+                批量配置岗位
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-table
+          ref="multipleTable"
+          :data="data"
+          tooltip-effect="dark"
+          border
+          style="width: 100%; flex: auto;"
+          class="drag-table"
+          height="100%"
+          @selection-change="selectedData"
+          :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
+         fontWeight: 'bold', height: '48px'}">
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center"
+          />
+          <el-table-column
+            prop="account"
+            label="账号"
+            width="100px">
+          </el-table-column>
+          <el-table-column
+            prop="uname"
+            label="姓名"
+            width="100px">
+          </el-table-column>
+          <el-table-column
+            prop="sex"
+            label="性别"
+            width="50px">
+            <template slot-scope="scope">
+              <div v-if="scope.row.sex === '1'">男</div>
+              <div v-if="scope.row.sex === '2'">女</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="phone"
+            label="电话"
+            width="170px">
+          </el-table-column>
+          <el-table-column
+            prop="email"
+            label="邮箱"
+            width="170px">
+          </el-table-column>
+          <el-table-column
+            prop="institutionName"
+            label="所属部门">
+            <template slot-scope="scope">
+              <el-popover trigger="hover" placement="top">
+                {{ scope.row.institutionName }}
+                <div slot="reference" class="name-wrapper">
+                  <p v-if="!scope.row.institutionName || scope.row.institutionName.length<15">
+                    {{ scope.row.institutionName }}
+                  </p>
+                  <p v-else> {{ scope.row.institutionName.substring(0, 15) }}...</p>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="NameList"
+            label="所属岗位">
+            <template slot-scope="scope">
+              <el-popover trigger="hover" placement="top">
+                {{ scope.row.NameList }}
+                <div slot="reference" class="name-wrapper">
+                  <p v-if="!scope.row.institutionName ||scope.row.NameList.length<15">
+                    {{ scope.row.NameList }}
+                  </p>
+                  <p v-else> {{ scope.row.NameList.substring(0, 15) }}...</p>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="状态"
+            width="100px">
+            <template slot-scope="scope">
+              <div v-if="scope.row.disableFlag === '1'">已禁用</div>
+              <div v-else>已启用</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="50px">
+            <template slot-scope="scope">
+              <div @click.stop style="display: inline-block">
+                <el-dropdown trigger="click" @command="handleCommand">
+                  <i class="iconfont">&#xe61e;</i>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '1'" :command="[scope.row, '启用']">
+                      启用
+                    </el-dropdown-item>
+                    <el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '0'" :command="[scope.row, '禁用']">
+                      禁用
+                    </el-dropdown-item>
+                    <el-dropdown-item v-btn-permission="'ce2d2b9bb8004e0d9efcabc42a9f354d'" :command="[scope.row, '配置岗位']">
+                      配置岗位
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <loading :loading="Loading">加载中...</loading>
+      <pagination :page="page" :total="total" :pageSize="pageSize" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
+    </div>
+    <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
+    <el-drawer
+      class="postPage"
+      :title="drawerTitle"
+      :visible.sync="modalPost"
+      :wrapperClosable="false"
+      size="800px"
+      @close="resetFormPost"
+    >
+      <el-form ref="" :model="sarPost" inline>
+        <el-form-item  class="search-item" style="padding-left: 25px">
+          <el-input v-model="sarPost.name"
+                    size="small"
+                    placeholder="岗位名称查找"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item label="" class="search-item btn-box">
+          <el-button class="common-button-primary" type="primary" size="mini" @click="searchPostName"
+                     v-btn-permission="">查询
+          </el-button>
+        </el-form-item>
+        <el-form-item label="" class="search-item btn-box">
+          <el-button class="common-button-default" @click="resetSelect" size="mini"
+                     v-btn-permission="">清空
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-tree
+        ref="tree2"
+        node-key="id"
+        class="filter-tree"
+        style="height: 100%; overflow: auto;"
+        v-if="modalPost"
+        :props="props"
+        :data="postList"
+        :filter-node-method="filterNode"
+        :default-checked-keys="nodeList"
+        highlight-current
+        check-strictly
+        default-expand-all
+        :expand-on-click-node="false"
+        show-checkbox>
+      </el-tree>
+      <pagination :page="page" :pageSize="pageSize" :total="total2" @pageChange="pageChange2" @pageSizeChange="pageSizeChange2"></pagination>
+      <div id="roleFormButton" class="demo-drawer-footer">
+        <el-button
+          size="mini"
+          class="common-button-primary"
+          icon="el-icon-check"
+          type="primary"
+          @click="PostSubmit"
+        >确定
+        </el-button>
+        <el-button size="mini" class="common-button-default" icon="el-icon-close" @click="resetFormPost">取消</el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mechanism',
+  data() {
+    return {
+      peopleType: '', //1为树结构 2 为全机构
+      nodeKeyId: '',
+      searchForm: {
+        uname: "",
+        email: ""
+      },
+      userId: '',
+      postList: [],
+      props: {
+        children: 'children',
+        label: 'name'
+      },
+      nodeList: [],
+      modalPost: false,
+      sarPost: {
+        name: "", // 岗位名称
+      },
+      filterText: '', // 树结构检索条件
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      treeData: [], // 树结构数据
+      page: 1,
+      total: 0,
+      total2: 0,
+      pageSize: this.$store.getters.userInfo.configContent,
+      sideClose: false,
+      data: [], // table数据
+      treeLoading: false,
+      Loading: false,
+      id: '',
+      // 批量配置岗位勾选暂存
+      manageData: [],
+      drawerTitle: '配置岗位'
+    }
+  },
+  methods: {
+    clearAllSearch() {
+      this.searchForm = {
+        uname: "",
+        email: ""
+      }
+      this.page = 1
+      this.getData()
+    },
+    resetFormPost() {
+      this.modalPost = false
+    },
+    PostSubmit() {
+      if (this.drawerTitle === '配置岗位') {
+        this.$http.postData('sarUser/user/position', {
+          positionIds: this.$refs.tree2.getCheckedKeys(),
+          userId: this.userId
+        }, {}, res => {
+          if (res.ok) {
+            this.$message.success('配置岗位成功')
+            this.modalPost = false
+            this.getData()
+          }
+        })
+      } else {
+        this.$http.postData('sarUser/user/positionBatch', {
+          positionIds: this.$refs.tree2.getCheckedKeys(),
+          userId: this.userId
+        }, {}, res => {
+          if (res.ok) {
+            this.$message.success('配置岗位成功')
+            this.modalPost = false
+            this.getData()
+          }
+        })
+      }
+
+    },
+    searchPostName() {
+      this.page = 1;
+      this.getTree2();
+    }, // 查询
+    resetSelect() {
+      this.sarPost.name = "";
+      this.getTree2();
+    }, // 外层清空条件查询
+    handleCommand(command) {
+      switch (command[1]) {
+        case '启用':
+          this.disableFlagEdit(command[0], 0)
+          break
+        case '禁用':
+          this.disableFlagEdit(command[0], 1)
+          break
+        case '配置岗位':
+          this.postsConfigure(command[0])
+          break
+      }
+    },
+
+    getTree2() {
+      this.$http.get('sarPosition/position', {
+        current: this.page,
+        pageSize: this.pageSize,
+        ...this.sarPost,
+      }, {
+        _this: this,
+      }, res => {
+        this.postList = res.data.records
+        this.total2 = res.data.total
+      })
+    },
+    postsConfigure(row) {
+      var arr = []
+      this.userId = row.userId
+      row.positions.forEach((item) => {
+        arr.push(item.id)
+      })
+      this.nodeList = arr
+      this.modalPost = true
+    },
+    disableFlagEdit(row, type) {
+      let json = {}
+      json.userId = row.userId
+      json.disableFlag = type
+      this.$http.postData('sarUser/user/disable', json, {},
+        res => {
+          if (res.ok) {
+            if (type === 0) {
+              this.$message.success('已启用')
+            } else {
+              this.$message.success('已禁用')
+            }
+            this.getData()
+          }
+        })
+    },
+    treeCollapse() {
+      this.sideClose = !this.sideClose
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    handleNodeClick(data) {
+      this.id = data.id
+      this.getData()
+    },
+    // searchPeople(){
+    //   console.log(this.filterText);
+    // },
+    // loadNode(node, resolve) {
+    //   if (node.level === 0) {
+    //     return resolve(this.treeData);
+    //   }
+    //   this.getChildren(node, resolve)
+    // },
+    // getChildren (node, resolve) {
+    //   this.id = node.key
+    //   this.getData()
+    //   this.$http.get('SarInstitution/institution/getNext', {
+    //     institutionId: node.key
+    //   }, {}, res => {
+    //     let people = [];
+    //     res.forEach(item => {
+    //       if(item.disabled === true){
+    //         people.push(item)
+    //       }
+    //     })
+    //     resolve(people)
+    //   })
+    // },
+    // getTree() {
+    //   this.$http.get('SarInstitution/institution/getFirstInstitution', {}, {
+    //     _this: this,
+    //     loading: 'treeLoading'
+    //   }, res => {
+    //     this.treeData = res
+    //     this.nodeKeyId = this.treeData[0].id
+    //     this.treeLoading = false
+    //   }, e => {
+    //   })
+    // },
+    getTree() {
+      this.$http.get('SarInstitution/institution', {}, {
+        _this: this,
+        loading: 'treeLoading'
+      }, res => {
+        this.treeData = res.data
+        this.nodeKeyId = this.treeData[0].id
+        this.$nextTick(function () {
+          this.$refs.tree.setCurrentKey(this.nodeKeyId)
+        })
+        this.id = res.data[0].id
+        this.getData()
+      }, e => {
+        console.log(e);
+      })
+    },
+    getDatas(type) {
+      if (type === '1') {
+        this.page = 1
+      }
+      this.peopleType = 2;
+      this.$http.post('SarInstitution/institution/user', {
+        current: this.page,
+        size: this.pageSize,
+        uname: this.searchForm.uname,
+        email: this.searchForm.email
+      }, {
+        _this: this,
+        loading: 'Loading'
+      }, res => {
+        res.data.records.forEach((item) => {
+          let NameList = ''
+          item.positions.forEach((items) => {
+            if (NameList.length > 0) {
+              NameList += ','
+            }
+            NameList += items.name
+          })
+          item.NameList = NameList
+        })
+        this.data = res.data.records
+        this.total = res.data.total
+      })
+    },
+    getData() {
+      this.peopleType = 1;
+      this.$http.post('SarInstitution/institution/user', {
+        current: this.page,
+        size: this.pageSize,
+        institutionId: this.id,
+        uname: this.searchForm.uname,
+        email: this.searchForm.email
+      }, {
+        _this: this,
+        loading: 'Loading'
+      }, res => {
+        res.data.records.forEach((item) => {
+          let NameList = ''
+          item.positions.forEach((items) => {
+            if (NameList.length > 0) {
+              NameList += ','
+            }
+            NameList += items.name
+          })
+          item.NameList = NameList
+        })
+        this.data = res.data.records
+        this.total = res.data.total
+      })
+    },
+    pageChange(page) {
+      this.page = page
+      if(this.peopleType === 1){
+        this.getData()
+      }else{
+        this.getDatas()
+      }
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize
+      if(this.peopleType === 1){
+        this.getData()
+      }else{
+        this.getDatas()
+      }
+    },
+    pageChange2(page) {
+      this.page = page
+      this.getTree2()
+    },
+    pageSizeChange2(pageSize) {
+      this.pageSize = pageSize
+      this.getTree2()
+    },
+
+    /** 批量编辑岗位的勾选数据 */
+    selectedData(val) {
+      this.manageData = val
+    },
+
+    selectEdit() {
+      this.userId = []
+      this.manageData.forEach(item=>{
+        this.userId.push(item.userId)
+      })
+      this.drawerTitle = '批量配置岗位'
+      this.modalPost = true
+    },
+  },
+  computed: {},
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  mounted() {
+    // 获取组织结构树
+    this.getTree()
+    this.getTree2()
+  }
+}
+</script>
+
+<style lang="less">
+@import '~@/assets/styles/mixins';
+
+#mechanism-manage {
+  display: flex;
+  height: 100%;
+
+  .tree-close {
+    .tree {
+      left: -200px !important;
+    }
+
+    .tree-right {
+      width: calc(~'100% - 15px') !important;
+    }
+
+    .side-bar-collapse {
+      background: #5596CC !important;
+      color: #FFF;
+    }
+  }
+
+  .tree-closed {
+    width: 15px !important;
+  }
+
+  .postPage {
+    .pagination {
+      position: initial;
+    }
+  }
+
+  .tree-content {
+    background: #fff;
+    width: 300px;
+    position: relative;
+
+    .tree {
+      width: 95%;
+      position: absolute;
+      left: 0;
+    }
+
+    .tree-collapse {
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  .tree-right {
+    overflow-y: hidden;
+    padding: 0;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .content {
+      padding: 0px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      flex: auto;
+      //height: calc(~'100% - 105px - 56px');
+    }
+
+    .pagination {
+      position: static;
+      width: 100% !important;
+      left: 0 !important;
+    }
+  }
+}
+</style>
+<style lang="less" scoped>
+#mechanism-manage {
+  height: 100%;
+
+  .content {
+    height: calc(~'100% - 105px - 56px')
+  }
+
+  /deep/ .el-select__tags {
+    overflow-x: hidden;
+  }
+
+  /deep/ .width-all {
+    width: 100%;
+  }
+
+  .filter-tree {
+    height: calc(~'100% - 50px')
+  }
+
+  .laws-tree {
+    /deep/ .clearable {
+      top: 20px;
+    }
+  }
+
+  .add-form-item {
+    display: flex;
+  }
+}
+
+
+</style>
diff --git a/src/pages/config/pages/mechanismManage/pages/workgroup.vue b/src/pages/config/pages/mechanismManage/pages/workgroup.vue
new file mode 100644
index 000000000..a5ab351a1
--- /dev/null
+++ b/src/pages/config/pages/mechanismManage/pages/workgroup.vue
@@ -0,0 +1,546 @@
+<template>
+  <div id="workgroup">
+    <div class="workgroup-content">
+      <div class="search-area">
+        <el-form :model="workSearch" inline class="label-input-form">
+          <el-form-item label="工作组" class="search-item">
+            <el-input
+              v-model="workSearch.workGroupName"
+              clearable
+              placeholder="根据工作组进行查找"
+            />
+          </el-form-item>
+          <el-form-item label="工作组组长" class="search-item">
+            <el-input
+              v-model="workSearch.leaderName"
+              clearable
+              placeholder="根据工作组组长进行查找"
+            />
+          </el-form-item>
+          <el-form-item label="" class="search-item btn-box">
+            <el-button class="common-button-primary" type="primary" size="mini" @click="searchPostName"
+                       v-btn-permission="">查询
+            </el-button>
+          </el-form-item>
+          <el-form-item label="" class="search-item btn-box">
+            <el-button class="common-button-default" @click="resetSelect" size="mini"
+                       v-btn-permission="">清空
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="table-content">
+        <div class="table-button">
+          <el-button type="primary" size="mini"
+                     class="common-button-primary" @click="add">
+            新增
+          </el-button>
+          <el-button type="primary" size="mini"
+                     class="common-button-primary" @click="edit">
+            编辑
+          </el-button>
+          <el-button type="primary" size="mini"
+                     class="common-button-primary" @click="workDel">
+            批量删除
+          </el-button>
+        </div>
+        <el-table
+          ref="workGroup"
+          :data="workData"
+          tooltip-effect="dark"
+          border
+          style="width: 100%; flex: auto;"
+          class="drag-table"
+          height="100%"
+          @selection-change="workChange"
+          :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
+         fontWeight: 'bold', height: '48px'}">
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center"
+          />
+          <el-table-column
+            align="center"
+            prop="workGroup"
+            min-width="300"
+            label="工作组">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="工作组组长"
+            min-width="400px">
+            <template slot-scope="scope">
+              <span v-if="scope.row.workLeaderGroup.length > 1" v-for="item in scope.row.workLeaderGroup"
+                    :key="item.id">{{ item.name + "," }}</span>
+              <span v-else v-for="item in scope.row.workLeaderGroup" :key="item.id">{{ item.name }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="工作组成员"
+            min-width="500px">
+            <template slot-scope="scope">
+              <span v-if="scope.row.workPeopleGroup.length > 1" v-for="item in scope.row.workPeopleGroup"
+                    :key="item.id">{{ item.name + "," }}</span>
+              <span v-else v-for="item in scope.row.workPeopleGroup" :key="item.id">{{ item.name }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <loading :loading="Loading">加载中...</loading>
+        <pagination :page="page" :total="total" :pageSize="pageSize" @pageChange="pageChange"
+                    @pageSizeChange="pageSizeChange"></pagination>
+      </div>
+      <el-dialog
+        :title="dialogTitle"
+        :visible.sync="addModel"
+        :wrapperClosable="false"
+        @close="cancelModel"
+        size="800px">
+        <div class="myDialog">
+          <el-form
+            ref="addForm"
+            :model="addForm"
+            :rules="addFormRules"
+            class="label-input-form"
+
+          >
+            <el-form-item label="工作组" prop="workGroup" label-width="100px" class="add-form-item">
+              <el-input v-model="addForm.workGroup"
+                        placeholder="请输入工作组"
+                        clearable></el-input>
+            </el-form-item>
+            <el-form-item label="工作组组长" prop="workLeader" label-width="100px" class="add-form-item">
+              <!--              <el-input v-model="addForm.workLeader"-->
+              <!--                        @click.native="choiceRole('1')"-->
+              <!--                        placeholder="请输入工作组组长"-->
+              <!--                        clearable></el-input>-->
+              <div class="tag-box">
+                <el-tag
+                  :key="tag.id"
+                  v-for="tag in addForm.workLeaderGroup"
+                  closable
+                  @close="handleCloseTag(tag)">
+                  {{ tag.name }}
+                </el-tag>
+                <el-button size="small" @click="choiceRole('1')" type="primary">添加</el-button>
+              </div>
+            </el-form-item>
+            <el-form-item label="工作组组员" prop="workPeople" label-width="100px" class="add-form-item">
+              <!--              <el-input v-model="addForm.workPeople"-->
+              <!--                        @click.native="choiceRole('2')"-->
+              <!--                        placeholder="请输入工作组组员"-->
+              <!--                        clearable></el-input>-->
+              <div class="tag-box">
+                <el-tag
+                  :key="tag.id"
+                  v-for="tag in addForm.workPeopleGroup"
+                  closable
+                  @close="handleCloseTags(tag)">
+                  {{ tag.name }}
+                </el-tag>
+                <el-button size="small" @click="choiceRole('2')" type="primary">添加</el-button>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div slot="footer">
+          <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancelModel">取消</el-button>
+          <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="addOk">确定
+          </el-button>
+        </div>
+      </el-dialog>
+      <!--    多选择责任人-->
+      <work-tree
+        :is-title="roleTitle"
+        :is-visible.sync="roleModal"
+        @checkedRole="checkedRole"
+        :nodeList="nodeList"
+      ></work-tree>
+      <!--    多选择责任人-->
+      <work-tree
+        :is-title="roleTitle2"
+        :is-visible.sync="roleModal2"
+        @checkedRole="checkedRole2"
+        :nodeList="nodeList2"
+      ></work-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import WorkTree from "@/components/workTree";
+
+export default {
+  name: "workgroup",
+  components: { WorkTree },
+  data() {
+    return {
+      nodeList: [],
+      nodeList2: [],
+      roleTitle2: "",
+      roleModal2: false,
+      workChangeList: [],
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
+      roleType: "",
+      roleTitle: "",
+      roleModal: false,
+      dialogTitle: "",
+      addModel: false,
+      Loading: false,
+      page: 1,
+      pageSize: this.$store.getters.userInfo.configContent,
+      total: 0,
+      workData: [],
+      workSearch: {
+        leaderName: "",
+        workGroupName: "",
+        page: 1,
+        pageSize: this.$store.getters.userInfo.configContent
+      },
+      addForm: {
+        workGroup: "",
+        workLeader: "",
+        workLeaderId: "",
+        workPeople: "",
+        workPeopleId: "",
+        workPeopleGroup: [],
+        workLeaderGroup: []
+      },
+      addFormRules: {
+        workGroup: [
+          { required: true, message: "请输入工作组", trigger: "blur" }
+        ]
+        // workLeader: [
+        //   { required: true, message: "请选择工作组组长", trigger: "change" }
+        // ],
+        // workPeople: [
+        //   { required: true, message: "请选择工作组组员", trigger: "change" }
+        // ]
+      }
+    };
+  },
+  mounted() {
+    this.getWorkData();
+  },
+  methods: {
+    /**
+     * 删除工作组组长
+     * @param val
+     */
+    handleCloseTag(val) {
+      this.addForm.workLeaderGroup.splice(this.addForm.workLeaderGroup.indexOf(val), 1);
+      this.nodeList.splice(this.nodeList.findIndex(item => {
+        return item === val.id;
+      }), 1);
+    },
+    /*
+    * 删除工作组成员
+    * */
+    handleCloseTags(tag) {
+      this.addForm.workPeopleGroup.splice(this.addForm.workPeopleGroup.indexOf(tag), 1);
+      this.nodeList2.splice(this.nodeList2.findIndex(item => {
+        return item === tag.id;
+      }), 1);
+    },
+    getWorkData() {
+      this.$http.get("workGroup/work-group", {
+        ...this.workSearch
+      }, {
+        _this: this
+      }, res => {
+        res.data.records.map(item => {
+          item.workLeaderGroup = [];
+          item.workPeopleGroup = [];
+          var workLeaderArray = item.workLeader.split(",");
+          var workPeopleArray = item.workPeople.split(",");
+          var workLeaderIdArray = item.workLeaderId.split(",");
+          var workPeopleIdArray = item.workPeopleId.split(",");
+          for (var i = 0; i < workLeaderArray.length; i++) {
+            item.workLeaderGroup.push({ name: workLeaderArray[i], id: workLeaderIdArray[i] });
+          }
+          for (var j = 0; j < workPeopleArray.length; j++) {
+            item.workPeopleGroup.push({ name: workPeopleArray[j], id: workPeopleIdArray[j] });
+          }
+        });
+        this.workData = res.data.records;
+        this.total = res.data.total;
+      }, e => {
+        console.log(e);
+      });
+    },
+    workChange(data) {
+      this.workChangeList = data;
+    },
+    //查询
+    searchPostName() {
+      this.page = 1;
+      this.getWorkData();
+    },
+    //清空
+    resetSelect() {
+      this.workSearch = {
+        leaderName: "",
+        workGroupName: "",
+        page: 1,
+        pageSize: this.$store.getters.userInfo.configContent
+      };
+      this.getWorkData();
+    },
+    //新增
+    add() {
+      this.dialogTitle = "新增工作组";
+      this.addModel = true;
+    },
+    //编辑
+    edit() {
+      if (this.workChangeList.length < 1) {
+        this.$message.warning("请勾选一条数据进行编辑");
+      } else if (this.workChangeList.length > 1) {
+        this.$message.warning("您只能选择一条数据进行编辑");
+      } else {
+        this.nodeList = [];
+        this.nodeList2 = [];
+        this.workChangeList[0].workLeaderGroup.map(item => {
+          this.nodeList.push(item.id);
+        });
+        this.workChangeList[0].workPeopleGroup.map(item => {
+          this.nodeList2.push(item.id);
+        });
+        this.dialogTitle = "编辑工作组";
+        this.addForm = this.workChangeList[0];
+        this.addModel = true;
+      }
+      console.log(this.workChangeList);
+
+    },
+    //批量删除
+    workDel() {
+      if (this.workChangeList.length) {
+        this.$confirm("您确认删除这些数据?", "提示", {
+          confirmButtonText: "确认",
+          confirmButtonClass: "common-button-primary",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.$http.delete("workGroup/work-group", {
+            id: this.workChangeList[0].id
+          }, {
+            _this: this
+          }, res => {
+            if (res.ok) {
+              this.$message.success("删除成功");
+            }
+            this.getWorkData();
+          });
+          this.$refs.workGroup.clearSelection();
+        }).catch(() => {
+        });
+      } else {
+        this.$message.warning("请至少选择一条数据进行删除");
+      }
+    },
+    //取消新增
+    cancelModel() {
+      this.addForm = {};
+      this.addModel = false;
+    },
+    //确定新增
+    addOk() {
+      this.$refs["addForm"].validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === "新增工作组") {
+            if (!this.addForm.workLeaderGroup.length) {
+              this.$message.warning("请选择工作组组长");
+            } else if (!this.addForm.workPeopleGroup.length) {
+              this.$message.warning("请选择工作组组员");
+            } else {
+              let workLeader = "", workLeaderId = "";
+              this.addForm.workLeaderGroup.map(item => {
+                workLeader += item.name;
+                workLeader += ",";
+                workLeaderId += item.id;
+                workLeaderId += ",";
+              });
+
+              let workPeople = "", workPeopleId = "";
+              this.addForm.workPeopleGroup.map(item => {
+                workPeople += item.name;
+                workPeople += ",";
+                workPeopleId += item.id;
+                workPeopleId += ",";
+              });
+              this.$http.post("workGroup/work-group", {
+                workGroup: this.addForm.workGroup,
+                workLeader: workLeader,
+                workLeaderId: workLeaderId,
+                workPeople: workPeople,
+                workPeopleId: workPeopleId
+              }, {
+                _this: this
+              }, res => {
+                this.$message.warning(res.message);
+                this.getWorkData();
+              }, e => {
+              });
+              this.addModel = false;
+              this.addForm = {};
+              this.nodeList = [];
+              this.nodeList2 = [];
+            }
+          } else {
+            let workLeader = "";
+            let workLeaderId = "";
+            this.addForm.workLeaderGroup.map(item => {
+              workLeader += item.name;
+              workLeader += ",";
+              workLeaderId += item.id;
+              workLeaderId += ",";
+            });
+
+            let workPeople = "";
+            let workPeopleId = "";
+            this.addForm.workPeopleGroup.map(item => {
+              workPeople += item.name;
+              workPeople += ",";
+              workPeopleId += item.id;
+              workPeopleId += ",";
+            });
+            this.$http.put("workGroup/work-group", {
+              id: this.addForm.id,
+              workGroup: this.addForm.workGroup,
+              workLeader: workLeader,
+              workLeaderId: workLeaderId,
+              workPeople: workPeople,
+              workPeopleId: workPeopleId
+            }, {
+              _this: this
+            }, res => {
+              if (res.ok) {
+              } else {
+                this.$message.warning(res.message);
+              }
+              this.getWorkData();
+            });
+            this.addModel = false;
+            this.$refs.workGroup.clearSelection();
+          }
+        } else {
+          this.$message.warning("请填写整信息");
+        }
+      });
+
+    },
+    choiceRole(type) {
+      switch (type) {
+        case "1":
+          this.roleType = "1";
+          this.roleTitle = "选择工作组组长";
+          this.roleModal = true;
+          break;
+        case "2":
+          this.roleType = "2";
+          this.roleTitle2 = "选择工作组组员";
+          this.roleModal2 = true;
+          break;
+      }
+    },
+    checkedRole(data) {
+      data.forEach(item => {
+        if (this.addForm.workLeaderGroup.findIndex(item1 => {
+          return item1.id === item.id;
+        }) < 0) {
+          this.addForm.workLeaderGroup.push({
+            id: item.id,
+            name: item.name
+          });
+        }
+      });
+    },
+    checkedRole2(data) {
+      data.forEach(item => {
+        if (this.addForm.workPeopleGroup.findIndex(item2 => {
+          return item2.id === item.id;
+        }) < 0) {
+          this.addForm.workPeopleGroup.push({
+            id: item.id,
+            name: item.name
+          });
+        }
+      });
+    },
+    pageChange(page) {
+      this.page = page;
+      this.getWorkData()
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+      this.getWorkData()
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.workgroup-content {
+  height: 100%;
+  width: 100%;
+
+  .tag-box {
+    .el-tag {
+      margin: 0 5px 0 0;
+    }
+  }
+}
+
+.add-form-item {
+  /deep/ .el-form-item__content {
+    line-height: 50px !important;
+  }
+}
+
+.table-content {
+  height: 68.5vh;
+  width: 100%;
+}
+
+.table-button {
+  margin: 10px 0;
+}
+
+.standardForComments {
+  height: calc(~'100% - 56px');
+  background: #fff;
+  flex-direction: column;
+
+  .action-bar {
+    margin-bottom: 5px;
+    padding: 0;
+  }
+
+  .content {
+    flex: auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .table-wrap {
+      flex: auto;
+      overflow: hidden;
+      position: relative;
+    }
+  }
+
+  & > .pagination {
+    position: static;
+
+    /deep/ .pagination-slot {
+      padding: 0;
+    }
+  }
+}
+</style>
+