欧阳子桐 / RuoYi · 提交

转到一个项目

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

用户管理支持分栏拖动

内嵌 并排对比
正在显示 3 个修改的文件 包含 106 行增加 和 238 行删除
@@ -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 - <!--部门数据-->  
5 - <el-col :span="4" :xs="24">  
6 - <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 - />  
15 - </div>  
16 - <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 - />  
28 - </div>  
29 - </el-col>  
30 - <!--用户数据-->  
31 - <el-col :span="20" :xs="24">  
32 - <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">  
33 - <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 - />  
41 - </el-form-item>  
42 - <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 - />  
50 - </el-form-item>  
51 - <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 - />  
64 - </el-select>  
65 - </el-form-item>  
66 - <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>  
76 - </el-form-item>  
77 - <el-form-item>  
78 - <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>  
79 - <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>  
80 - </el-form-item>  
81 - </el-form>  
82 -  
83 - <el-row :gutter="10" class="mb8">  
84 - <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>  
93 - </el-col>  
94 - <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>  
104 - </el-col>  
105 - <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> 4 + <splitpanes class="default-theme">
  5 + <!--部门数据-->
  6 + <pane size="15">
  7 + <el-col>
  8 + <div class="head-container">
  9 + <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
  10 + </div>
  11 + <div class="head-container">
  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" />
  13 + </div>
115 </el-col> 14 </el-col>
116 - <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>  
125 - </el-col>  
126 - <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>  
135 - </el-col>  
136 - <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>  
137 - </el-row> 15 + </pane>
  16 + <!--用户数据-->
  17 + <pane>
  18 + <el-col size="85">
  19 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  20 + <el-form-item label="用户名称" prop="userName">
  21 + <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
  22 + </el-form-item>
  23 + <el-form-item label="手机号码" prop="phonenumber">
  24 + <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
  25 + </el-form-item>
  26 + <el-form-item label="状态" prop="status">
  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" />
  29 + </el-select>
  30 + </el-form-item>
  31 + <el-form-item label="创建时间">
  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>
  33 + </el-form-item>
  34 + <el-form-item>
  35 + <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  36 + <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  37 + </el-form-item>
  38 + </el-form>
138 39
139 - <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">  
140 - <el-table-column type="selection" width="50" align="center" />  
141 - <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />  
142 - <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />  
143 - <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />  
144 - <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />  
145 - <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">  
147 - <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>  
154 - </template>  
155 - </el-table-column>  
156 - <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">  
157 - <template slot-scope="scope">  
158 - <span>{{ parseTime(scope.row.createTime) }}</span>  
159 - </template>  
160 - </el-table-column>  
161 - <el-table-column  
162 - label="操作"  
163 - align="center"  
164 - width="160"  
165 - class-name="small-padding fixed-width"  
166 - >  
167 - <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>  
182 - <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>  
184 - <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>  
189 - </el-dropdown-menu>  
190 - </el-dropdown>  
191 - </template>  
192 - </el-table-column>  
193 - </el-table> 40 + <el-row :gutter="10" class="mb8">
  41 + <el-col :span="1.5">
  42 + <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
  43 + </el-col>
  44 + <el-col :span="1.5">
  45 + <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
  46 + </el-col>
  47 + <el-col :span="1.5">
  48 + <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
  49 + </el-col>
  50 + <el-col :span="1.5">
  51 + <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
  52 + </el-col>
  53 + <el-col :span="1.5">
  54 + <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
  55 + </el-col>
  56 + <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
  57 + </el-row>
194 58
195 - <pagination  
196 - v-show="total>0"  
197 - :total="total"  
198 - :page.sync="queryParams.pageNum"  
199 - :limit.sync="queryParams.pageSize"  
200 - @pagination="getList"  
201 - />  
202 - </el-col> 59 + <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
  60 + <el-table-column type="selection" width="50" align="center" />
  61 + <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
  62 + <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
  63 + <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
  64 + <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
  65 + <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
  66 + <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
  67 + <template slot-scope="scope">
  68 + <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
  69 + </template>
  70 + </el-table-column>
  71 + <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
  72 + <template slot-scope="scope">
  73 + <span>{{ parseTime(scope.row.createTime) }}</span>
  74 + </template>
  75 + </el-table-column>
  76 + <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
  77 + <template slot-scope="scope" v-if="scope.row.userId !== 1">
  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>
  80 + <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
  81 + <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
  82 + <el-dropdown-menu slot="dropdown">
  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>
  85 + </el-dropdown-menu>
  86 + </el-dropdown>
  87 + </template>
  88 + </el-table-column>
  89 + </el-table>
  90 +
  91 + <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  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 // 遮罩层