index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="20">
  4. <!--部门数据-->
  5. <el-col :span="4" :xs="24">
  6. <dtree v-model="queryParams.deptId" @handleQuery="handleQuery"></dtree>
  7. </el-col>
  8. <!--用户数据-->
  9. <el-col :span="20" :xs="24">
  10. <el-form :model="queryParams" ref="queryForm" :inline="true">
  11. <el-form-item label="账号" prop="userName">
  12. <el-input v-model="queryParams.userName" placeholder="请输入账号" clearable @keyup.enter.native="handleQuery" class="se" />
  13. </el-form-item>
  14. <el-form-item label="手机号" prop="phonenumber">
  15. <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" class="se" />
  16. </el-form-item>
  17. <el-form-item label="创建时间">
  18. <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
  19. </el-form-item>
  20. <el-form-item>
  21. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  22. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  23. </el-form-item>
  24. </el-form>
  25. <el-row :gutter="10" class="mb8">
  26. <el-col :span="1.5"><el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button></el-col>
  27. <el-col :span="1.5">
  28. <el-button type="success" icon="el-icon-edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
  29. </el-col>
  30. <el-col :span="1.5">
  31. <el-button type="danger" icon="el-icon-delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
  32. </el-col>
  33. <el-col :span="1.5"><el-button type="info" icon="el-icon-upload2" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button></el-col>
  34. <el-col :span="1.5"><el-button type="warning" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button></el-col>
  35. </el-row>
  36. <el-table border :data="userList" @selection-change="handleSelectionChange" height="calc(100vh - 273px)">
  37. <el-table-column type="selection" align="center" width="50" />
  38. <el-table-column label="账号" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" width="110" />
  39. <el-table-column label="姓名" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" width="110" />
  40. <el-table-column label="手机号" align="center" key="phonenumber" prop="phonenumber" width="120" />
  41. <el-table-column label="所属科室" align="center" key="deptName" prop="dept.deptName" :show-overflow-tooltip="true" />
  42. <el-table-column label="角色" align="center" width="170">
  43. <template slot-scope="scope">
  44. <el-tag type="danger" size="mini" style="margin-top: 2px" v-if="scope.row.userName == 'admin'">超级管理员</el-tag>
  45. <div v-else>
  46. <span v-for="(item, index) in scope.row.rolesGroup.split(',')" style="padding-right: 5px">{{ item }}</span>
  47. </div>
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="状态" align="center" key="status" width="100">
  51. <template slot-scope="scope">
  52. <div class="switch">
  53. <el-switch v-model="scope.row.status" active-value="0" :width="50" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
  54. <span class="zc" v-if="scope.row.status == 0">正常</span>
  55. <span class="ty" v-else>停用</span>
  56. </div>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="创建时间" align="center" prop="createTime">
  60. <template slot-scope="scope">
  61. <span>{{ parseTime(scope.row.createTime) }}</span>
  62. </template>
  63. </el-table-column>
  64. <el-table-column label="操作" align="center" width="160">
  65. <template slot-scope="scope" v-if="scope.row.userId !== 1">
  66. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
  67. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
  68. <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
  69. <span class="el-dropdown-link">
  70. <i class="el-icon-d-arrow-right el-icon--right"></i>
  71. 更多
  72. </span>
  73. <el-dropdown-menu slot="dropdown">
  74. <el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
  75. <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
  76. </el-dropdown-menu>
  77. </el-dropdown>
  78. </template>
  79. </el-table-column>
  80. <template slot="empty">
  81. <el-empty></el-empty>
  82. </template>
  83. </el-table>
  84. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  85. </el-col>
  86. </el-row>
  87. <!-- 用户导入对话框 -->
  88. <el-dialog :title="upload.title" :visible.sync="upload.open" :close-on-click-modal="false" width="400px" append-to-body>
  89. <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>
  90. <i class="el-icon-upload"></i>
  91. <div class="el-upload__text">
  92. 将文件拖到此处,或
  93. <em>点击上传</em>
  94. </div>
  95. <div class="el-upload__tip text-center" slot="tip">
  96. <div class="el-upload__tip" slot="tip">
  97. <el-checkbox v-model="upload.updateSupport" />
  98. 是否更新已经存在的用户数据
  99. </div>
  100. <span>仅允许导入xls、xlsx格式文件。</span>
  101. <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
  102. </div>
  103. </el-upload>
  104. <div slot="footer" class="dialog-footer">
  105. <el-button type="primary" @click="submitFileForm">确 定</el-button>
  106. <el-button @click="upload.open = false">取 消</el-button>
  107. </div>
  108. </el-dialog>
  109. </div>
  110. </template>
  111. <script>
  112. import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from '@/api/system/user';
  113. import { getToken } from '@/utils/auth';
  114. import edit from './edit';
  115. export default {
  116. name: 'User',
  117. data() {
  118. return {
  119. // 非单个禁用
  120. single: true,
  121. // 非多个禁用
  122. multiple: true,
  123. // 总条数
  124. total: 0,
  125. // 用户表格数据
  126. userList: null,
  127. // 日期范围
  128. dateRange: [],
  129. // 表单参数
  130. form: {},
  131. // 用户导入参数
  132. upload: {
  133. // 是否显示弹出层(用户导入)
  134. open: false,
  135. // 弹出层标题(用户导入)
  136. title: '',
  137. // 是否禁用上传
  138. isUploading: false,
  139. // 是否更新已经存在的用户数据
  140. updateSupport: 0,
  141. // 设置上传的请求头部
  142. headers: { Authorization: 'Bearer ' + getToken() },
  143. // 上传的地址
  144. url: process.env.VUE_APP_BASE_API + '/system/user/importData'
  145. },
  146. // 查询参数
  147. queryParams: {
  148. pageNum: 1,
  149. pageSize: 10,
  150. userName: undefined,
  151. phonenumber: undefined,
  152. status: undefined,
  153. deptId: undefined,
  154. orderByColumn: 'create_time',
  155. isAsc: 'desc'
  156. }
  157. };
  158. },
  159. created() {
  160. this.getList();
  161. this.getConfigKey('sys.user.initPassword').then((response) => {
  162. this.initPassword = response.msg;
  163. });
  164. },
  165. methods: {
  166. /** 查询用户列表 */
  167. getList() {
  168. listUser(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
  169. this.userList = response.rows;
  170. this.total = response.total;
  171. });
  172. },
  173. // 用户状态修改
  174. handleStatusChange(row) {
  175. let text = row.status === '0' ? '启用' : '停用';
  176. this.$modal
  177. .confirm('确认要' + text + '"' + row.userName + '"用户吗?')
  178. .then(function () {
  179. return changeUserStatus(row.userId, row.status);
  180. })
  181. .then(() => {
  182. this.$modal.msgSuccess(text + '成功');
  183. })
  184. .catch(function () {
  185. row.status = row.status === '0' ? '1' : '0';
  186. });
  187. },
  188. /** 搜索按钮操作 */
  189. handleQuery() {
  190. this.queryParams.pageNum = 1;
  191. this.getList();
  192. },
  193. /** 重置按钮操作 */
  194. resetQuery() {
  195. this.dateRange = [];
  196. this.resetForm('queryForm');
  197. this.handleQuery();
  198. },
  199. // 多选框选中数据
  200. handleSelectionChange(selection) {
  201. this.ids = selection.map((item) => item.userId);
  202. this.single = selection.length != 1;
  203. this.multiple = !selection.length;
  204. },
  205. // 更多操作触发
  206. handleCommand(command, row) {
  207. switch (command) {
  208. case 'handleResetPwd':
  209. this.handleResetPwd(row);
  210. break;
  211. case 'handleAuthRole':
  212. this.handleAuthRole(row);
  213. break;
  214. default:
  215. break;
  216. }
  217. },
  218. /** 新增按钮操作 */
  219. handleAdd() {
  220. this.iframe({ obj: edit, param: {}, title: '新增管理员/医生', width: '55%', height: '78%' });
  221. },
  222. /** 修改按钮操作 */
  223. handleUpdate(row) {
  224. const userId = row.userId || this.ids;
  225. this.iframe({ obj: edit, param: { id: userId }, title: '编辑管理员/医生', width: '55%', height: '78%' });
  226. },
  227. /** 重置密码按钮操作 */
  228. handleResetPwd(row) {
  229. this.$prompt('请输入"' + row.userName + '"的新密码', '提示', {
  230. confirmButtonText: '确定',
  231. cancelButtonText: '取消',
  232. closeOnClickModal: false,
  233. inputPattern: /^.{5,20}$/,
  234. inputErrorMessage: '用户密码长度必须介于 5 和 20 之间'
  235. })
  236. .then(({ value }) => {
  237. resetUserPwd(row.userId, value).then((response) => {
  238. this.$modal.msgSuccess('修改成功,新密码是:' + value);
  239. });
  240. })
  241. .catch(() => {});
  242. },
  243. /** 分配角色操作 */
  244. handleAuthRole: function (row) {
  245. const userId = row.userId;
  246. this.$router.push('/system/user-auth/role/' + userId);
  247. },
  248. /** 删除按钮操作 */
  249. handleDelete(row) {
  250. const userIds = row.userId || this.ids;
  251. this.$modal
  252. .confirm('是否确认删除用户编号为"' + userIds + '"的数据项?')
  253. .then(function () {
  254. return delUser(userIds);
  255. })
  256. .then(() => {
  257. this.getList();
  258. this.$modal.msgSuccess('删除成功');
  259. })
  260. .catch(() => {});
  261. },
  262. /** 导出按钮操作 */
  263. handleExport() {
  264. this.download(
  265. 'system/user/export',
  266. {
  267. ...this.queryParams
  268. },
  269. `user_${new Date().getTime()}.xlsx`
  270. );
  271. },
  272. /** 导入按钮操作 */
  273. handleImport() {
  274. this.upload.title = '用户导入';
  275. this.upload.open = true;
  276. },
  277. /** 下载模板操作 */
  278. importTemplate() {
  279. this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
  280. },
  281. // 文件上传中处理
  282. handleFileUploadProgress(event, file, fileList) {
  283. this.upload.isUploading = true;
  284. },
  285. // 文件上传成功处理
  286. handleFileSuccess(response, file, fileList) {
  287. this.upload.open = false;
  288. this.upload.isUploading = false;
  289. this.$refs.upload.clearFiles();
  290. this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
  291. dangerouslyUseHTMLString: true
  292. });
  293. this.getList();
  294. },
  295. // 提交上传文件
  296. submitFileForm() {
  297. this.$refs.upload.submit();
  298. }
  299. }
  300. };
  301. </script>