style: 格式化代码

src/pages/config/pages/mechanismManage/pages/mechanism.vue

@@ -5,74 +5,61 @@
       <div class="tree">
         <!--        @keyup.enter.native="searchPeople"-->
         <el-input
+          v-model="filterText"
           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
+          ref="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>
+          @node-click="handleNodeClick"
+        />
       </div>
-      <div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
+      <div class="tree-collapse" :class="{ 'tree-close': sideClose }" @click="treeCollapse">
         <!--切换折叠样式-->
-        <i class="el-icon-arrow-left" v-if="sideClose === false"></i>
-        <i class="el-icon-arrow-right" v-if="sideClose === true"></i>
+        <i v-if="sideClose === false" class="el-icon-arrow-left" />
+        <i v-if="sideClose === true" class="el-icon-arrow-right" />
       </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 v-model="searchForm" inline class="label-input-form">
             <el-form-item label="姓名" class="search-item">
-              <el-input placeholder="根据姓名查询" clearable v-model="searchForm.uname">
-
-              </el-input>
+              <el-input v-model="searchForm.uname" placeholder="根据姓名查询" clearable />
             </el-form-item>
             <el-form-item label="邮箱" class="search-item">
-              <el-input placeholder="根据邮箱查询" clearable v-model="searchForm.email">
-
-              </el-input>
+              <el-input v-model="searchForm.email" placeholder="根据邮箱查询" clearable />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" size="mini"
-                         class="common-button-primary" @click="getDatas('1')" v-btn-permission="'d285ee99b52abcd63d863f6783e350f0'">
+              <el-button
+                v-btn-permission="'d285ee99b52abcd63d863f6783e350f0'"
+                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" v-btn-permission="'12a6b1f548cef7b152746c978fc32dbb'">
+              <el-button v-btn-permission="'12a6b1f548cef7b152746c978fc32dbb'" size="mini" class="common-button-default" @click="clearAllSearch">
                 清空
               </el-button>
             </el-form-item>
 
             <el-form-item>
-              <el-button size="mini" type="primary" @click="selectEdit" v-btn-permission="'786a941b255a4fe4d13b7e67f100a4e5'">
+              <el-button v-btn-permission="'786a941b255a4fe4d13b7e67f100a4e5'" size="mini" type="primary" @click="selectEdit">
                 批量配置角色
               </el-button>
-              <el-button size="mini" type="primary" @click="selectEditOfOrg" v-btn-permission="'786a941b255a4fe4d13b7e67f100a4e5'">
+              <el-button v-btn-permission="'786a941b255a4fe4d13b7e67f100a4e5'" size="mini" type="primary" @click="selectEditOfOrg">
                 根据部门批量配置角色
               </el-button>
             </el-form-item>
@@ -86,19 +73,21 @@
           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'}">
+                               fontWeight: 'bold', height: '48px'}"
+          @selection-change="selectedData"
+        >
           <el-table-column
             type="selection"
             width="55"
             align="center"
           />
           <el-table-column
-              type="index"
-              width="55"
-              label="序号"
-              align="center">
+            type="index"
+            width="55"
+            label="序号"
+            align="center"
+          >
             <template slot-scope="{scope, column, $index}">
               {{ ($index + 1) + (page - 1) * pageSize }}
             </template>
@@ -106,17 +95,18 @@
           <el-table-column
             prop="account"
             label="账号"
-            width="100px">
-          </el-table-column>
+            width="100px"
+          />
           <el-table-column
             prop="uname"
             label="姓名"
-            width="100px">
-          </el-table-column>
+            width="100px"
+          />
           <el-table-column
             prop="sex"
             label="性别"
-            width="50px">
+            width="50px"
+          >
             <template slot-scope="scope">
               <div v-if="scope.row.sex === '1'">男</div>
               <div v-if="scope.row.sex === '2'">女</div>
@@ -125,16 +115,17 @@
           <el-table-column
             prop="phone"
             label="电话"
-            width="170px">
-          </el-table-column>
+            width="170px"
+          />
           <el-table-column
             prop="email"
             label="邮箱"
-            width="170px">
-          </el-table-column>
+            width="170px"
+          />
           <el-table-column
             prop="institutionName"
-            label="所属部门">
+            label="所属部门"
+          >
             <template slot-scope="scope">
               <el-popover trigger="hover" placement="top">
                 {{ scope.row.institutionName }}
@@ -148,31 +139,32 @@
             </template>
           </el-table-column>
           <el-table-column
-              prop="roles"
-              label="角色"
-              >
-            <template  slot-scope="scope">
-              {{getRoleName(scope.row.roles)}}
+            prop="roles"
+            label="角色"
+          >
+            <template slot-scope="scope">
+              {{ getRoleName(scope.row.roles) }}
             </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-->
+          <!--            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">
+            width="100px"
+          >
             <template slot-scope="scope">
               <div v-if="scope.row.disableFlag === '1'">已禁用</div>
               <div v-else>已启用</div>
@@ -180,16 +172,17 @@
           </el-table-column>
           <el-table-column
             label="操作"
-            width="50px">
+            width="50px"
+          >
             <template slot-scope="scope">
-              <div @click.stop style="display: inline-block">
+              <div style="display: inline-block" @click.stop>
                 <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 v-if="scope.row.disableFlag === '1'" v-btn-permission="'30db3b395deb5004266cd65d302c2776'" :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 v-if="scope.row.disableFlag === '0'" v-btn-permission="'30db3b395deb5004266cd65d302c2776'" :command="[scope.row, '禁用']">
                       禁用
                     </el-dropdown-item>
 
@@ -204,7 +197,13 @@
         </el-table>
       </div>
       <loading :loading="Loading">加载中...</loading>
-      <pagination :page="page" :total="total" :pageSize="pageSize" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
+      <pagination
+        :page="page"
+        :total="total"
+        :pageSize="pageSize"
+        @pageChange="pageChange"
+        @pageSizeChange="pageSizeChange"
+      />
     </div>
     <el-drawer
       class="postPage"
@@ -215,29 +214,42 @@
       @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 class="search-item" style="padding-left: 25px">
+          <el-input
+            v-model="sarPost.name"
+            size="small"
+            placeholder="角色名称查找"
+            clearable
+          />
         </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
+            v-btn-permission="''"
+            class="common-button-primary"
+            type="primary"
+            size="mini"
+            @click="searchPostName"
+          >
+            查询
           </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
+            v-btn-permission=""
+            class="common-button-default"
+            size="mini"
+            @click="resetSelect"
+          >
+            清空
           </el-button>
         </el-form-item>
       </el-form>
       <el-tree
+        v-if="modalPost"
         ref="tree2"
         node-key="id"
         class="filter-tree"
         style="height: 100%; overflow: auto;"
-        v-if="modalPost"
         :props="props"
         :data="postList"
         :filter-node-method="filterNode"
@@ -246,9 +258,16 @@
         check-strictly
         default-expand-all
         :expand-on-click-node="false"
-        show-checkbox>
-      </el-tree>
-      <pagination :auto-size="true" :page="page1" :pageSize="pageSize1" :total="total2" @pageChange="pageChange2" @pageSizeChange="pageSizeChange2"></pagination>
+        show-checkbox
+      />
+      <pagination
+        :auto-size="true"
+        :page="page1"
+        :pageSize="pageSize1"
+        :total="total2"
+        @pageChange="pageChange2"
+        @pageSizeChange="pageSizeChange2"
+      />
       <div id="roleFormButton" class="demo-drawer-footer">
         <el-button
           size="mini"
@@ -257,7 +276,8 @@
           type="primary"
           :loading="butionLoading"
           @click="PostSubmit"
-        >确定
+        >
+          确定
         </el-button>
         <el-button size="mini" class="common-button-default" icon="el-icon-close" @click="resetFormPost">取消</el-button>
       </div>
@@ -268,15 +288,15 @@
 
 <script>
 export default {
-  name: 'mechanism',
-  data() {
+  name: 'Mechanism',
+  data () {
     return {
       formLoading: true,
-      peopleType: '', //1为树结构 2 为全机构
+      peopleType: '', // 1为树结构 2 为全机构
       nodeKeyId: '',
       searchForm: {
-        uname: "",
-        email: ""
+        uname: '',
+        email: ''
       },
       userId: '',
       postList: [],
@@ -287,7 +307,7 @@ export default {
       nodeList: [],
       modalPost: false,
       sarPost: {
-        name: "", // 角色名称
+        name: '', // 角色名称
       },
       filterText: '', // 树结构检索条件
       defaultProps: {
@@ -299,8 +319,8 @@ export default {
       total: 0,
       total2: 0,
       pageSize: this.$store.getters.userInfo.configContent,
-      page1:1,
-      pageSize1:20,
+      page1: 1,
+      pageSize1: 20,
       sideClose: false,
       data: [], // table数据
       treeLoading: false,
@@ -309,31 +329,42 @@ export default {
       id: '',
       // 批量配置角色勾选暂存
       manageData: [],
-      configOrgManage:false,
+      configOrgManage: false,
       drawerTitle: '配置角色'
     }
   },
+  computed: {},
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  mounted () {
+    // 获取组织结构树
+    this.getTree()
+    this.getTree2()
+  },
   methods: {
-    getRoleName(roles){
-        let names=roles.map(item=>{
-          return item.name
-        })
+    getRoleName (roles) {
+      const names = roles.map(item => {
+        return item.name
+      })
       return names.join(',')
     },
-    clearAllSearch() {
+    clearAllSearch () {
       this.searchForm = {
-        uname: "",
-        email: ""
+        uname: '',
+        email: ''
       }
       this.page = 1
       this.getData()
     },
-    resetFormPost() {
+    resetFormPost () {
       this.modalPost = false
       this.postList = []
       this.page1 = 1
     },
-    PostSubmit() {
+    PostSubmit () {
       this.butionLoading = true
       if (this.drawerTitle === '配置角色') {
         this.$http.postData('sarUser/user/role', {
@@ -347,8 +378,8 @@ export default {
             this.getData()
           }
         })
-      } else if(this.configOrgManage){
-        //批量配置角色信息
+      } else if(this.configOrgManage) {
+        // 批量配置角色信息
         this.$http.postData('sarUser/user/roleBatchByOrgId', {
           roleIds: this.$refs.tree2.getCheckedKeys(),
           orgId: this.id
@@ -373,18 +404,17 @@ export default {
           }
         })
       }
-
     },
-    searchPostName() {
+    searchPostName () {
       this.page = 1;
       this.getTree2();
-      this.sarPost.name = "";
+      this.sarPost.name = '';
     }, // 查询
-    resetSelect() {
-      this.sarPost.name = "";
+    resetSelect () {
+      this.sarPost.name = '';
       this.getTree2();
     }, // 外层清空条件查询
-    handleCommand(command) {
+    handleCommand (command) {
       switch (command[1]) {
         case '启用':
           this.disableFlagEdit(command[0], 0)
@@ -398,7 +428,7 @@ export default {
       }
     },
 
-    getTree2() {
+    getTree2 () {
       this.$http.get('sarRole/role/allPage', {
         current: this.page1,
         pageSize: this.pageSize1,
@@ -410,10 +440,10 @@ export default {
         this.total2 = res.data.total
       })
     },
-    postsConfigure(row) {
+    postsConfigure (row) {
       this.configOrgManage = false
       this.drawerTitle = '配置角色'
-      var arr = []
+      const arr = []
       this.userId = row.userId
       row.positions.forEach((item) => {
         arr.push(item.id)
@@ -422,8 +452,8 @@ export default {
       this.modalPost = true
       this.getTree2()
     },
-    disableFlagEdit(row, type) {
-      let json = {}
+    disableFlagEdit (row, type) {
+      const json = {}
       json.userId = row.userId
       json.disableFlag = type
       this.$http.postData('sarUser/user/disable', json, {},
@@ -438,14 +468,14 @@ export default {
           }
         })
     },
-    treeCollapse() {
+    treeCollapse () {
       this.sideClose = !this.sideClose
     },
-    filterNode(value, data) {
+    filterNode (value, data) {
       if (!value) return true;
       return data.name.indexOf(value) !== -1;
     },
-    handleNodeClick(data) {
+    handleNodeClick (data) {
       this.id = data.id
       this.page = 1
       this.getData()
@@ -485,7 +515,7 @@ export default {
     //   }, e => {
     //   })
     // },
-    getTree() {
+    getTree () {
       this.$http.get('SarInstitution/institution', {}, {
         _this: this,
         loading: 'treeLoading'
@@ -501,7 +531,7 @@ export default {
         console.log(e);
       })
     },
-    getDatas(type) {
+    getDatas (type) {
       if (type === '1') {
         this.page = 1
       }
@@ -530,7 +560,7 @@ export default {
         this.total = res.data.total
       })
     },
-    getData() {
+    getData () {
       this.peopleType = 1;
       this.$http.post('SarInstitution/institution/userUnderInstitution', {
         current: this.page,
@@ -556,42 +586,42 @@ export default {
         this.total = res.data.total
       })
     },
-    pageChange(page) {
+    pageChange (page) {
       this.page = page
-      if(this.peopleType === 1){
+      if(this.peopleType === 1) {
         this.getData()
       }else{
         this.getDatas()
       }
     },
-    pageSizeChange(pageSize) {
+    pageSizeChange (pageSize) {
       this.pageSize = pageSize
-      if(this.peopleType === 1){
+      if(this.peopleType === 1) {
         this.getData()
       }else{
         this.getDatas()
       }
     },
-    pageChange2(page1) {
+    pageChange2 (page1) {
       this.page1 = page1
       this.getTree2()
     },
-    pageSizeChange2(pageSize1) {
+    pageSizeChange2 (pageSize1) {
       this.pageSize1 = pageSize1
       this.getTree2()
     },
 
     /** 批量编辑角色的勾选数据 */
-    selectedData(val) {
+    selectedData (val) {
       this.manageData = val
     },
 
-    selectEdit() {
+    selectEdit () {
       this.configOrgManage = false
       this.getTree2()
-      if(this.manageData.length){
+      if(this.manageData.length) {
         this.userId = []
-        this.manageData.forEach(item=>{
+        this.manageData.forEach(item => {
           this.userId.push(item.userId)
         })
         this.drawerTitle = '批量配置角色'
@@ -600,24 +630,13 @@ export default {
         this.$message.warning('请选择需要批量配置的角色')
       }
     },
-    selectEditOfOrg() {
+    selectEditOfOrg () {
       this.configOrgManage = true
       this.getTree2()
       this.drawerTitle = '批量配置角色'
       this.modalPost = true
     },
 
-  },
-  computed: {},
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    },
-  },
-  mounted() {
-    // 获取组织结构树
-    this.getTree()
-    this.getTree2()
   }
 }
 </script>
@@ -728,5 +747,4 @@ export default {
   }
 }
 
-
 </style>