需修改表单分页，图标样式

2021-10-14 15:33:44 +08:00
parent 9af1f4320b
commit 33d711071c
2 changed files with 170 additions and 89 deletions
@@ -8,8 +8,10 @@
        </div>
      </div>
    </div>
-    <div class="toggle-btn iconfont" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
-      <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div>&#xe647;</div>
+    <div class="toggle-btn el-icon-s-fold" v-if="isCollapse === false" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
+      <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div><i class=""></i></div>
+    <div class="toggle-btn el-icon-s-unfold" v-else style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
+      <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div></div>
    <div class="left-tree">
      <el-menu
              unique-opened
@@ -54,13 +56,13 @@
            </el-menu-item>
          </el-submenu>
          <el-menu-item
-                  :key="index"
-                  :index="item.path"
-                  v-if="item.isChildren && (!item.menuId || $hasPermission(item.menuId))"
-          >
-            <i class="shangqi-icon" :class="item['icon-class']"></i>
-            <span slot="title">{{ item.title }}</span>
-          </el-menu-item>
+              :key="index"
+              :index="item.path"
+              v-if="item.isChildren && (!item.menuId || $hasPermission(item.menuId))"
+            >
+              <i class="shangqi-icon" :class="item['icon-class']"></i>
+              <span slot="title">{{ item.title }}</span>
+            </el-menu-item>
        </template>
      </el-menu>
    </div>
@@ -463,7 +465,7 @@
    },
    computed: {
      logo () {
-        return this.isCollapse ? require('assets/images/shangqi/img/logo4.png') : require('assets/images/shangqi/img/logo5.png')
+        return this.isCollapse ? require('assets/images/shangqi/img/logo4.png') : require('assets/images/shangqi/img/logo2.png')
      },
      ...mapGetters(['getDynamicTotal', 'isCollapse'])
    },
@@ -509,7 +511,7 @@
        text-align: left;
        img {
          width: 115px;
-          height: 40px;
+          height: 45px;
        }
      }
    }
@@ -557,6 +559,7 @@
    color: #5ea9f6 !important;
    font-weight: bold;
  }
+
  .el-menu-item {
    padding: 0 16px !important;
    span {
@@ -66,9 +66,9 @@
          :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
         fontWeight: 'bold', height: '48px'}">
          <el-table-column
-              prop="account"
-              label="账号"
-              width="100px">
+            prop="account"
+            label="账号"
+            width="100px">
          </el-table-column>
          <el-table-column
            prop="uname"
@@ -98,15 +98,15 @@
            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>
+              <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
@@ -114,12 +114,12 @@
            label="所属岗位">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
-                {{scope.row.NameList}}
+                {{ scope.row.NameList }}
                <div slot="reference" class="name-wrapper">
                  <p v-if="!scope.row.institutionName ||scope.row.NameList.length<15">
-                    {{scope.row.NameList}}
+                    {{ scope.row.NameList }}
                  </p>
-                  <p v-else> {{scope.row.NameList.substring(0,15)}}...</p>
+                  <p v-else> {{ scope.row.NameList.substring(0, 15) }}...</p>
                </div>
              </el-popover>
            </template>
@@ -140,9 +140,15 @@
                <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-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>
@@ -155,35 +161,57 @@
    </div>
    <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
    <el-drawer
-            title="配置岗位"
-            :visible.sync="modalPost"
-            :wrapperClosable="false"
-            size="800px"
-            @close="resetFormPost"
+      class="postPage"
+      title="配置岗位"
+      :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"
-              :default-checked-keys="nodeList"
-              highlight-current
-              check-strictly
-              default-expand-all
-              :expand-on-click-node="false"
-              show-checkbox>
+        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>
+          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>
@@ -193,12 +221,12 @@
 <script>
 export default {
  name: 'MechanismManage',
-  data () {
+  data() {
    return {
-      nodeKeyId:'',
+      nodeKeyId: '',
      searchForm: {
-        uname:"",
-        email:""
+        uname: "",
+        email: ""
      },
      userId: '',
      postList: [],
@@ -208,6 +236,9 @@ export default {
      },
      nodeList: [],
      modalPost: false,
+      sarPost: {
+        name: "", // 岗位名称
+      },
      filterText: '', // 树结构检索条件
      defaultProps: {
        children: 'children',
@@ -216,6 +247,7 @@ export default {
      treeData: [], // 树结构数据
      page: 1,
      total: 0,
+      total2: 0,
      pageSize: this.$store.getters.userInfo.configContent,
      sideClose: false,
      data: [], // table数据
@@ -233,22 +265,31 @@ export default {
      this.page = 1
      this.getData()
    },
-    resetFormPost () {
-      this.modalPost= false
+    resetFormPost() {
+      this.modalPost = false
    },
-    PostSubmit () {
+    PostSubmit() {
      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()
        }
      })
    },
-    handleCommand (command) {
+    searchPostName() {
+      this.page = 1;
+      this.getTree2();
+    }, // 查询
+    resetSelect() {
+      this.sarPost.name = "";
+      this.getTree2();
+    }, // 外层清空条件查询
+    handleCommand(command) {
      switch (command[1]) {
        case '启用':
          this.disableFlagEdit(command[0], 0)
@@ -261,29 +302,35 @@ export default {
          break
      }
    },
-    getTree2 () {
-      this.$http.get('sarPosition/position', {}, {
+
+    getTree2() {
+      this.$http.get('sarPosition/position', {
+        current: this.page,
+        pageSize: this.pageSize,
+        ...this.sarPost,
+      }, {
        _this: this,
-      }, res=> {
-        this.postList = res.data
+      }, res => {
+        this.postList = res.data.records
+        this.total2 = res.data.total
      })
    },
-    postsConfigure (row) {
+    postsConfigure(row) {
      var arr = []
      this.userId = row.userId
      row.positions.forEach((item) => {
        arr.push(item.id)
      })
      this.nodeList = arr
-      this.modalPost= true
+      this.modalPost = true
    },
-    disableFlagEdit (row, type) {
+    disableFlagEdit(row, type) {
      let json = {}
      json.userId = row.userId
      json.disableFlag = type
      this.$http.postData('sarUser/user/disable', json, {},
        res => {
-          if (res.ok){
+          if (res.ok) {
            if (type === 0) {
              this.$message.success('已启用')
            } else {
@@ -293,18 +340,18 @@ export default {
          }
        })
    },
-    treeCollapse () {
+    treeCollapse() {
      this.sideClose = !this.sideClose
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
-    handleNodeClick (data) {
+    handleNodeClick(data) {
      this.id = data.id
      this.getData()
    },
-    getTree () {
+    getTree() {
      this.$http.get('SarInstitution/institution', {}, {
        _this: this,
        loading: 'treeLoading'
@@ -321,9 +368,9 @@ export default {
        console.log(e);
      })
    },
-    getData () {
+    getData() {
      this.$http.post('SarInstitution/institution/user', {
-        current:this.page,
+        current: this.page,
        size: this.pageSize,
        institutionId: this.id,
        uname: this.searchForm.uname,
@@ -347,14 +394,22 @@ export default {
        this.total = res.data.total
      })
    },
-    pageChange (page) {
+    pageChange(page) {
      this.page = page
      this.getData()
    },
-    pageSizeChange (pageSize) {
+    pageSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getData()
    },
+    pageChange2(page) {
+      this.page = page
+      this.getTree2()
+    },
+    pageSizeChange2(pageSize) {
+      this.pageSize = pageSize
+      this.getTree2()
+    },
  },
  computed: {},
  watch: {
@@ -362,7 +417,7 @@ export default {
      this.$refs.tree.filter(val);
    },
  },
-  mounted () {
+  mounted() {
    // 获取组织结构树
    this.getTree()
    this.getTree2()
@@ -372,47 +427,63 @@ export default {

 <style lang="less">
@import '~@/assets/styles/mixins';
+
 #mechanism-manage {
  display: flex;
  height: 100%;
-  .tree-close{
-    .tree{
+
+  .tree-close {
+    .tree {
      left: -200px !important;
    }
-    .tree-right{
+
+    .tree-right {
      width: calc(~'100% - 15px') !important;
    }
-    .side-bar-collapse{
+
+    .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;
+    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
-    .content{
+
+    .content {
      padding: 0px;
      display: flex;
      flex-direction: column;
@@ -420,7 +491,8 @@ export default {
      flex: auto;
      //height: calc(~'100% - 105px - 56px');
    }
-    .pagination{
+
+    .pagination {
      position: static;
      width: 100% !important;
      left: 0 !important;
@@ -429,25 +501,31 @@ export default {
 }
 </style>
 <style lang="less" scoped>
-#mechanism-manage{
+#mechanism-manage {
  height: 100%;
+
  .content {
    height: calc(~'100% - 105px - 56px')
  }
-  /deep/.el-select__tags {
+
+  /deep/ .el-select__tags {
    overflow-x: hidden;
  }
-  /deep/.width-all{
+
+  /deep/ .width-all {
    width: 100%;
  }
+
  .filter-tree {
    height: calc(~'100% - 50px')
  }
-  .laws-tree{
-    /deep/.clearable {
+
+  .laws-tree {
+    /deep/ .clearable {
      top: 20px;
    }
  }
+
  .add-form-item {
    display: flex;
  }