1.7版本发布，详情查看版本说明

src/views/system/user/index.vue

@@ -1,75 +1,103 @@
 <template>
   <div class="app-container">
-    <eHeader :roles="roles" :query="query"/>
-    <!--表格渲染-->
-    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
-      <el-table-column prop="username" label="用户名"/>
-      <el-table-column label="头像">
-        <template slot-scope="scope">
-          <img :src="scope.row.avatar" class="el-avatar">
-        </template>
-      </el-table-column>
-      <el-table-column prop="email" label="邮箱"/>
-      <el-table-column label="状态">
-        <template slot-scope="scope">
-          <span>{{ scope.row.enabled ? '激活':'锁定' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="注册日期">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="150px" align="center">
-        <template slot-scope="scope">
-          <edit v-if="checkPermission(['ADMIN','USER_ALL','USER_EDIT'])" :data="scope.row" :roles="roles" :sup_this="sup_this"/>
-          <el-popover
-            v-if="checkPermission(['ADMIN','USER_ALL','USER_DELETE'])"
-            :ref="scope.row.id"
-            placement="top"
-            width="180">
-            <p>确定删除本条数据吗？</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
-            </div>
-            <el-button slot="reference" type="danger" size="mini">删除</el-button>
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页组件-->
-    <el-pagination
-      :total="total"
-      style="margin-top: 8px;"
-      layout="total, prev, pager, next, sizes"
-      @size-change="sizeChange"
-      @current-change="pageChange"/>
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
+        <div class="head-container">
+          <el-input v-model="deptName" clearable placeholder="输入部门名称搜索" prefix-icon="el-icon-search" style="width: 100%;" class="filter-item" @input="getDeptDatas"/>
+        </div>
+        <el-tree :data="depts" :props="defaultProps" :expand-on-click-node="false" default-expand-all @node-click="handleNodeClick"/>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
+        <eHeader :query="query" :sup_this="sup_this"/>
+        <!--表格渲染-->
+        <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
+          <el-table-column prop="username" label="用户名"/>
+          <el-table-column prop="phone" label="电话"/>
+          <el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱"/>
+          <el-table-column label="部门 / 岗位">
+            <template slot-scope="scope">
+              <div>{{ scope.row.dept.name }} / {{ scope.row.job.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center">
+            <template slot-scope="scope">
+              <div v-for="item in dicts" :key="item.id">
+                <el-tag v-if="scope.row.enabled.toString() === item.value" :type="scope.row.enabled ? '' : 'info'">{{ item.label }}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="140" align="center">
+            <template slot-scope="scope">
+              <edit v-if="checkPermission(['ADMIN','USER_ALL','USER_EDIT'])" :data="scope.row" :sup_this="sup_this"/>
+              <el-popover
+                v-if="checkPermission(['ADMIN','USER_ALL','USER_DELETE'])"
+                :ref="scope.row.id"
+                placement="top"
+                width="180">
+                <p>确定删除本条数据吗？</p>
+                <div style="text-align: right; margin: 0">
+                  <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+                  <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+                </div>
+                <el-button slot="reference" type="danger" size="mini">删除</el-button>
+              </el-popover>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <el-pagination
+          :total="total"
+          style="margin-top: 8px;"
+          layout="total, prev, pager, next, sizes"
+          @size-change="sizeChange"
+          @current-change="pageChange"/>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
+import initDict from '@/mixins/initDict'
 import { del } from '@/api/user'
-import { getRoleTree } from '@/api/role'
+import { getDepts } from '@/api/dept'
 import { parseTime } from '@/utils/index'
 import eHeader from './module/header'
 import edit from './module/edit'
 export default {
   components: { eHeader, edit },
-  mixins: [initData],
+  mixins: [initData, initDict],
   data() {
     return {
-      roles: [], delLoading: false, sup_this: this
+      height: document.documentElement.clientHeight - 180 + 'px;',
+      delLoading: false, sup_this: this, deptName: '', depts: [], deptId: null,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
     }
   },
   created() {
-    this.getRoles()
+    this.getDeptDatas()
+    console.log(this.dicts)
     this.$nextTick(() => {
       this.init()
+      // 加载数据字典
+      this.getDict('user_status')
     })
   },
+  mounted: function() {
+    const that = this
+    window.onresize = function temp() {
+      that.height = document.documentElement.clientHeight - 180 + 'px;'
+    }
+  },
   methods: {
     parseTime,
     checkPermission,
@@ -80,7 +108,7 @@ export default {
       const type = query.type
       const value = query.value
       const enabled = query.enabled
-      this.params = { page: this.page, size: this.size, sort: sort }
+      this.params = { page: this.page, size: this.size, sort: sort, deptId: this.deptId }
       if (type && value) { this.params[type] = value }
       if (enabled !== '' && enabled !== null) { this.params['enabled'] = enabled }
       return true
@@ -102,15 +130,25 @@ export default {
         console.log(err.response.data.message)
       })
     },
-    getRoles() {
-      getRoleTree().then(res => {
-        this.roles = res
+    getDeptDatas() {
+      const sort = 'id,desc'
+      const params = { sort: sort }
+      if (this.deptName) { params['name'] = this.deptName }
+      getDepts(params).then(res => {
+        this.depts = res.content
       })
+    },
+    handleNodeClick(data) {
+      if (data.pid === 0) {
+        this.deptId = null
+      } else {
+        this.deptId = data.id
+      }
+      this.init()
     }
   }
 }
 </script>
 
 <style scoped>
-
 </style>