欧阳子桐 / RuoYi · 提交

转到一个项目

作者 RuoYi
提交 86ab3bf60089ae7c22859e625833b64ab5f93945 1 个父辈 f7690891

用户管理支持分栏拖动

内嵌 并排对比
正在显示 3 个修改的文件 包含 45 行增加 和 177 行删除
@@ -52,6 +52,7 @@ @@ -52,6 +52,7 @@
52 "quill": "2.0.2", 52 "quill": "2.0.2",
53 "screenfull": "5.0.2", 53 "screenfull": "5.0.2",
54 "sortablejs": "1.10.2", 54 "sortablejs": "1.10.2",
  55 + "splitpanes": "2.4.1",
55 "vue": "2.6.12", 56 "vue": "2.6.12",
56 "vue-count-to": "1.0.13", 57 "vue-count-to": "1.0.13",
57 "vue-cropper": "0.5.5", 58 "vue-cropper": "0.5.5",
@@ -118,7 +118,7 @@ @@ -118,7 +118,7 @@
118 /** 表格布局 **/ 118 /** 表格布局 **/
119 .pagination-container { 119 .pagination-container {
120 position: relative; 120 position: relative;
121 - height: 25px; 121 + height: 32px;
122 margin-bottom: 10px; 122 margin-bottom: 10px;
123 margin-top: 15px; 123 margin-top: 15px;
124 padding: 10px 20px !important; 124 padding: 10px 20px !important;
@@ -289,3 +289,8 @@ @@ -289,3 +289,8 @@
289 position: relative; 289 position: relative;
290 float: right; 290 float: right;
291 } 291 }
  292 +
  293 +/* 分割面板样式 */
  294 +.splitpanes.default-theme .splitpanes__pane {
  295 + background-color: #fff!important;
  296 +}
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 <el-row :gutter="20"> 3 <el-row :gutter="20">
  4 + <splitpanes class="default-theme">
4 <!--部门数据--> 5 <!--部门数据-->
5 - <el-col :span="4" :xs="24"> 6 + <pane size="15">
  7 + <el-col>
6 <div class="head-container"> 8 <div class="head-container">
7 - <el-input  
8 - v-model="deptName"  
9 - placeholder="请输入部门名称"  
10 - clearable  
11 - size="small"  
12 - prefix-icon="el-icon-search"  
13 - style="margin-bottom: 20px"  
14 - /> 9 + <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
15 </div> 10 </div>
16 <div class="head-container"> 11 <div class="head-container">
17 - <el-tree  
18 - :data="deptOptions"  
19 - :props="defaultProps"  
20 - :expand-on-click-node="false"  
21 - :filter-node-method="filterNode"  
22 - ref="tree"  
23 - node-key="id"  
24 - default-expand-all  
25 - highlight-current  
26 - @node-click="handleNodeClick"  
27 - /> 12 + <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
28 </div> 13 </div>
29 </el-col> 14 </el-col>
  15 + </pane>
30 <!--用户数据--> 16 <!--用户数据-->
31 - <el-col :span="20" :xs="24"> 17 + <pane>
  18 + <el-col size="85">
32 <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> 19 <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
33 <el-form-item label="用户名称" prop="userName"> 20 <el-form-item label="用户名称" prop="userName">
34 - <el-input  
35 - v-model="queryParams.userName"  
36 - placeholder="请输入用户名称"  
37 - clearable  
38 - style="width: 240px"  
39 - @keyup.enter.native="handleQuery"  
40 - /> 21 + <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
41 </el-form-item> 22 </el-form-item>
42 <el-form-item label="手机号码" prop="phonenumber"> 23 <el-form-item label="手机号码" prop="phonenumber">
43 - <el-input  
44 - v-model="queryParams.phonenumber"  
45 - placeholder="请输入手机号码"  
46 - clearable  
47 - style="width: 240px"  
48 - @keyup.enter.native="handleQuery"  
49 - /> 24 + <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
50 </el-form-item> 25 </el-form-item>
51 <el-form-item label="状态" prop="status"> 26 <el-form-item label="状态" prop="status">
52 - <el-select  
53 - v-model="queryParams.status"  
54 - placeholder="用户状态"  
55 - clearable  
56 - style="width: 240px"  
57 - >  
58 - <el-option  
59 - v-for="dict in dict.type.sys_normal_disable"  
60 - :key="dict.value"  
61 - :label="dict.label"  
62 - :value="dict.value"  
63 - /> 27 + <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
  28 + <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
64 </el-select> 29 </el-select>
65 </el-form-item> 30 </el-form-item>
66 <el-form-item label="创建时间"> 31 <el-form-item label="创建时间">
67 - <el-date-picker  
68 - v-model="dateRange"  
69 - style="width: 240px"  
70 - value-format="yyyy-MM-dd"  
71 - type="daterange"  
72 - range-separator="-"  
73 - start-placeholder="开始日期"  
74 - end-placeholder="结束日期"  
75 - ></el-date-picker> 32 + <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
76 </el-form-item> 33 </el-form-item>
77 <el-form-item> 34 <el-form-item>
78 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> 35 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -82,56 +39,19 @@ @@ -82,56 +39,19 @@
82 39
83 <el-row :gutter="10" class="mb8"> 40 <el-row :gutter="10" class="mb8">
84 <el-col :span="1.5"> 41 <el-col :span="1.5">
85 - <el-button  
86 - type="primary"  
87 - plain  
88 - icon="el-icon-plus"  
89 - size="mini"  
90 - @click="handleAdd"  
91 - v-hasPermi="['system:user:add']"  
92 - >新增</el-button> 42 + <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
93 </el-col> 43 </el-col>
94 <el-col :span="1.5"> 44 <el-col :span="1.5">
95 - <el-button  
96 - type="success"  
97 - plain  
98 - icon="el-icon-edit"  
99 - size="mini"  
100 - :disabled="single"  
101 - @click="handleUpdate"  
102 - v-hasPermi="['system:user:edit']"  
103 - >修改</el-button> 45 + <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
104 </el-col> 46 </el-col>
105 <el-col :span="1.5"> 47 <el-col :span="1.5">
106 - <el-button  
107 - type="danger"  
108 - plain  
109 - icon="el-icon-delete"  
110 - size="mini"  
111 - :disabled="multiple"  
112 - @click="handleDelete"  
113 - v-hasPermi="['system:user:remove']"  
114 - >删除</el-button> 48 + <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
115 </el-col> 49 </el-col>
116 <el-col :span="1.5"> 50 <el-col :span="1.5">
117 - <el-button  
118 - type="info"  
119 - plain  
120 - icon="el-icon-upload2"  
121 - size="mini"  
122 - @click="handleImport"  
123 - v-hasPermi="['system:user:import']"  
124 - >导入</el-button> 51 + <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
125 </el-col> 52 </el-col>
126 <el-col :span="1.5"> 53 <el-col :span="1.5">
127 - <el-button  
128 - type="warning"  
129 - plain  
130 - icon="el-icon-download"  
131 - size="mini"  
132 - @click="handleExport"  
133 - v-hasPermi="['system:user:export']"  
134 - >导出</el-button> 54 + <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
135 </el-col> 55 </el-col>
136 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> 56 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
137 </el-row> 57 </el-row>
@@ -145,12 +65,7 @@ @@ -145,12 +65,7 @@
145 <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" /> 65 <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
146 <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible"> 66 <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
147 <template slot-scope="scope"> 67 <template slot-scope="scope">
148 - <el-switch  
149 - v-model="scope.row.status"  
150 - active-value="0"  
151 - inactive-value="1"  
152 - @change="handleStatusChange(scope.row)"  
153 - ></el-switch> 68 + <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
154 </template> 69 </template>
155 </el-table-column> 70 </el-table-column>
156 <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160"> 71 <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
@@ -158,48 +73,25 @@ @@ -158,48 +73,25 @@
158 <span>{{ parseTime(scope.row.createTime) }}</span> 73 <span>{{ parseTime(scope.row.createTime) }}</span>
159 </template> 74 </template>
160 </el-table-column> 75 </el-table-column>
161 - <el-table-column  
162 - label="操作"  
163 - align="center"  
164 - width="160"  
165 - class-name="small-padding fixed-width"  
166 - > 76 + <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
167 <template slot-scope="scope" v-if="scope.row.userId !== 1"> 77 <template slot-scope="scope" v-if="scope.row.userId !== 1">
168 - <el-button  
169 - size="mini"  
170 - type="text"  
171 - icon="el-icon-edit"  
172 - @click="handleUpdate(scope.row)"  
173 - v-hasPermi="['system:user:edit']"  
174 - >修改</el-button>  
175 - <el-button  
176 - size="mini"  
177 - type="text"  
178 - icon="el-icon-delete"  
179 - @click="handleDelete(scope.row)"  
180 - v-hasPermi="['system:user:remove']"  
181 - >删除</el-button> 78 + <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
  79 + <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
182 <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']"> 80 <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
183 <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button> 81 <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
184 <el-dropdown-menu slot="dropdown"> 82 <el-dropdown-menu slot="dropdown">
185 - <el-dropdown-item command="handleResetPwd" icon="el-icon-key"  
186 - v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>  
187 - <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"  
188 - v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item> 83 + <el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
  84 + <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
189 </el-dropdown-menu> 85 </el-dropdown-menu>
190 </el-dropdown> 86 </el-dropdown>
191 </template> 87 </template>
192 </el-table-column> 88 </el-table-column>
193 </el-table> 89 </el-table>
194 90
195 - <pagination  
196 - v-show="total>0"  
197 - :total="total"  
198 - :page.sync="queryParams.pageNum"  
199 - :limit.sync="queryParams.pageSize"  
200 - @pagination="getList"  
201 - /> 91 + <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
202 </el-col> 92 </el-col>
  93 + </pane>
  94 + </splitpanes>
203 </el-row> 95 </el-row>
204 96
205 <!-- 添加或修改用户配置对话框 --> 97 <!-- 添加或修改用户配置对话框 -->
@@ -237,7 +129,7 @@ @@ -237,7 +129,7 @@
237 </el-col> 129 </el-col>
238 <el-col :span="12"> 130 <el-col :span="12">
239 <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password"> 131 <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
240 - <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/> 132 + <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
241 </el-form-item> 133 </el-form-item>
242 </el-col> 134 </el-col>
243 </el-row> 135 </el-row>
@@ -245,23 +137,14 @@ @@ -245,23 +137,14 @@
245 <el-col :span="12"> 137 <el-col :span="12">
246 <el-form-item label="用户性别"> 138 <el-form-item label="用户性别">
247 <el-select v-model="form.sex" placeholder="请选择性别"> 139 <el-select v-model="form.sex" placeholder="请选择性别">
248 - <el-option  
249 - v-for="dict in dict.type.sys_user_sex"  
250 - :key="dict.value"  
251 - :label="dict.label"  
252 - :value="dict.value"  
253 - ></el-option> 140 + <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
254 </el-select> 141 </el-select>
255 </el-form-item> 142 </el-form-item>
256 </el-col> 143 </el-col>
257 <el-col :span="12"> 144 <el-col :span="12">
258 <el-form-item label="状态"> 145 <el-form-item label="状态">
259 <el-radio-group v-model="form.status"> 146 <el-radio-group v-model="form.status">
260 - <el-radio  
261 - v-for="dict in dict.type.sys_normal_disable"  
262 - :key="dict.value"  
263 - :label="dict.value"  
264 - >{{dict.label}}</el-radio> 147 + <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
265 </el-radio-group> 148 </el-radio-group>
266 </el-form-item> 149 </el-form-item>
267 </el-col> 150 </el-col>
@@ -270,26 +153,14 @@ @@ -270,26 +153,14 @@
270 <el-col :span="12"> 153 <el-col :span="12">
271 <el-form-item label="岗位"> 154 <el-form-item label="岗位">
272 <el-select v-model="form.postIds" multiple placeholder="请选择岗位"> 155 <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
273 - <el-option  
274 - v-for="item in postOptions"  
275 - :key="item.postId"  
276 - :label="item.postName"  
277 - :value="item.postId"  
278 - :disabled="item.status == 1"  
279 - ></el-option> 156 + <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1" ></el-option>
280 </el-select> 157 </el-select>
281 </el-form-item> 158 </el-form-item>
282 </el-col> 159 </el-col>
283 <el-col :span="12"> 160 <el-col :span="12">
284 <el-form-item label="角色"> 161 <el-form-item label="角色">
285 <el-select v-model="form.roleIds" multiple placeholder="请选择角色"> 162 <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
286 - <el-option  
287 - v-for="item in roleOptions"  
288 - :key="item.roleId"  
289 - :label="item.roleName"  
290 - :value="item.roleId"  
291 - :disabled="item.status == 1"  
292 - ></el-option> 163 + <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
293 </el-select> 164 </el-select>
294 </el-form-item> 165 </el-form-item>
295 </el-col> 166 </el-col>
@@ -310,26 +181,15 @@ @@ -310,26 +181,15 @@
310 181
311 <!-- 用户导入对话框 --> 182 <!-- 用户导入对话框 -->
312 <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> 183 <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
313 - <el-upload  
314 - ref="upload"  
315 - :limit="1"  
316 - accept=".xlsx, .xls"  
317 - :headers="upload.headers"  
318 - :action="upload.url + '?updateSupport=' + upload.updateSupport"  
319 - :disabled="upload.isUploading"  
320 - :on-progress="handleFileUploadProgress"  
321 - :on-success="handleFileSuccess"  
322 - :auto-upload="false"  
323 - drag  
324 - > 184 + <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
325 <i class="el-icon-upload"></i> 185 <i class="el-icon-upload"></i>
326 <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> 186 <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
327 <div class="el-upload__tip text-center" slot="tip"> 187 <div class="el-upload__tip text-center" slot="tip">
328 <div class="el-upload__tip" slot="tip"> 188 <div class="el-upload__tip" slot="tip">
329 - <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 189 + <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
330 </div> 190 </div>
331 <span>仅允许导入xls、xlsx格式文件。</span> 191 <span>仅允许导入xls、xlsx格式文件。</span>
332 - <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link> 192 + <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
333 </div> 193 </div>
334 </el-upload> 194 </el-upload>
335 <div slot="footer" class="dialog-footer"> 195 <div slot="footer" class="dialog-footer">
@@ -345,11 +205,13 @@ import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUs @@ -345,11 +205,13 @@ import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUs
345 import { getToken } from "@/utils/auth"; 205 import { getToken } from "@/utils/auth";
346 import Treeselect from "@riophae/vue-treeselect"; 206 import Treeselect from "@riophae/vue-treeselect";
347 import "@riophae/vue-treeselect/dist/vue-treeselect.css"; 207 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  208 +import { Splitpanes, Pane } from "splitpanes";
  209 +import "splitpanes/dist/splitpanes.css";
348 210
349 export default { 211 export default {
350 name: "User", 212 name: "User",
351 dicts: ['sys_normal_disable', 'sys_user_sex'], 213 dicts: ['sys_normal_disable', 'sys_user_sex'],
352 - components: { Treeselect }, 214 + components: { Treeselect, Splitpanes, Pane },
353 data() { 215 data() {
354 return { 216 return {
355 // 遮罩层 217 // 遮罩层