index.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763
  1. <template>
  2. <div class="app-container">
  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. default-expand-all
  24. @node-click="handleNodeClick"
  25. />
  26. </div>
  27. </el-col>
  28. <!--用户数据-->
  29. <el-col :span="20" :xs="24">
  30. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  31. <el-form-item label="用户名称" prop="userName">
  32. <el-input
  33. v-model="queryParams.userName"
  34. placeholder="请输入用户名称"
  35. clearable
  36. size="small"
  37. style="width: 240px"
  38. @keyup.enter.native="handleQuery"
  39. />
  40. </el-form-item>
  41. <el-form-item label="手机号码" prop="phonenumber">
  42. <el-input
  43. v-model="queryParams.phonenumber"
  44. placeholder="请输入手机号码"
  45. clearable
  46. size="small"
  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. size="small"
  57. style="width: 240px"
  58. >
  59. <el-option
  60. v-for="dict in statusOptions"
  61. :key="dict.dictValue"
  62. :label="dict.dictLabel"
  63. :value="dict.dictValue"
  64. />
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item label="创建时间">
  68. <el-date-picker
  69. v-model="dateRange"
  70. size="small"
  71. style="width: 240px"
  72. value-format="yyyy-MM-dd"
  73. type="daterange"
  74. range-separator="-"
  75. start-placeholder="开始日期"
  76. end-placeholder="结束日期"
  77. ></el-date-picker>
  78. </el-form-item>
  79. <el-form-item>
  80. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  81. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  82. </el-form-item>
  83. </el-form>
  84. <el-row :gutter="10" class="mb8">
  85. <el-col :span="1.5">
  86. <el-button
  87. type="primary"
  88. plain
  89. icon="el-icon-plus"
  90. size="mini"
  91. @click="handleAdd"
  92. v-hasPermi="['system:user:add']"
  93. >新增</el-button>
  94. </el-col>
  95. <el-col :span="1.5">
  96. <el-button
  97. type="success"
  98. plain
  99. icon="el-icon-edit"
  100. size="mini"
  101. :disabled="single"
  102. @click="handleUpdate"
  103. v-hasPermi="['system:user:edit']"
  104. >修改</el-button>
  105. </el-col>
  106. <el-col :span="1.5">
  107. <el-button
  108. type="danger"
  109. plain
  110. icon="el-icon-delete"
  111. size="mini"
  112. :disabled="multiple"
  113. @click="handleDelete"
  114. v-hasPermi="['system:user:remove']"
  115. >删除</el-button>
  116. </el-col>
  117. <el-col :span="1.5">
  118. <el-button
  119. type="info"
  120. plain
  121. icon="el-icon-upload2"
  122. size="mini"
  123. @click="handleImport"
  124. v-hasPermi="['system:user:import']"
  125. >导入</el-button>
  126. </el-col>
  127. <el-col :span="1.5">
  128. <el-button
  129. type="warning"
  130. plain
  131. icon="el-icon-download"
  132. size="mini"
  133. :loading="exportLoading"
  134. @click="handleExport"
  135. v-hasPermi="['system:user:export']"
  136. >导出</el-button>
  137. </el-col>
  138. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
  139. </el-row>
  140. <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
  141. <el-table-column type="selection" width="50" align="center" />
  142. <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
  143. <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
  144. <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
  145. <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
  146. <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
  147. <el-table-column label="账户角色" align="center" key="roleName" v-if="columns[7].visible" :show-overflow-tooltip="true">
  148. <template slot-scope="scope">
  149. <span v-if="scope.row.roleName && scope.row.roleName.length > 0">
  150. {{ Array.isArray(scope.row.roleName) ? scope.row.roleName.join('、') : scope.row.roleName }}
  151. </span>
  152. <span v-else>-</span>
  153. </template>
  154. </el-table-column>
  155. <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
  156. <template slot-scope="scope">
  157. <el-switch
  158. v-model="scope.row.status"
  159. active-value="0"
  160. inactive-value="1"
  161. @change="handleStatusChange(scope.row)"
  162. ></el-switch>
  163. </template>
  164. </el-table-column>
  165. <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
  166. <template slot-scope="scope">
  167. <span>{{ parseTime(scope.row.createTime) }}</span>
  168. </template>
  169. </el-table-column>
  170. <el-table-column
  171. label="操作"
  172. align="center"
  173. width="160"
  174. class-name="small-padding fixed-width"
  175. >
  176. <template slot-scope="scope" v-if="scope.row.userId !== 1">
  177. <el-button
  178. size="mini"
  179. type="text"
  180. icon="el-icon-edit"
  181. @click="handleUpdate(scope.row)"
  182. v-hasPermi="['system:user:edit']"
  183. >修改</el-button>
  184. <el-button
  185. size="mini"
  186. type="text"
  187. icon="el-icon-delete"
  188. @click="handleDelete(scope.row)"
  189. v-hasPermi="['system:user:remove']"
  190. >删除</el-button>
  191. <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
  192. <span class="el-dropdown-link">
  193. <i class="el-icon-d-arrow-right el-icon--right"></i>更多
  194. </span>
  195. <el-dropdown-menu slot="dropdown">
  196. <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
  197. v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
  198. <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
  199. v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
  200. <el-dropdown-item command="handleSetUser" icon="el-icon-warning-outline"
  201. v-hasPermi="['system:user:edit']">用户设置</el-dropdown-item>
  202. </el-dropdown-menu>
  203. </el-dropdown>
  204. </template>
  205. </el-table-column>
  206. </el-table>
  207. <pagination
  208. v-show="total>0"
  209. :total="total"
  210. :page.sync="queryParams.pageNum"
  211. :limit.sync="queryParams.pageSize"
  212. @pagination="getList"
  213. />
  214. </el-col>
  215. </el-row>
  216. <!-- 添加或修改参数配置对话框 -->
  217. <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
  218. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  219. <el-row>
  220. <el-col :span="12">
  221. <el-form-item label="用户昵称" prop="nickName">
  222. <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
  223. </el-form-item>
  224. </el-col>
  225. <el-col :span="12">
  226. <el-form-item label="归属部门" prop="deptId">
  227. <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
  228. </el-form-item>
  229. </el-col>
  230. </el-row>
  231. <el-row>
  232. <el-col :span="12">
  233. <el-form-item label="手机号码" prop="phonenumber">
  234. <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
  235. </el-form-item>
  236. </el-col>
  237. <el-col :span="12">
  238. <el-form-item label="邮箱" prop="email">
  239. <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
  240. </el-form-item>
  241. </el-col>
  242. </el-row>
  243. <el-row>
  244. <el-col :span="12">
  245. <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
  246. <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
  247. </el-form-item>
  248. </el-col>
  249. <el-col :span="12">
  250. <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
  251. <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
  252. </el-form-item>
  253. </el-col>
  254. </el-row>
  255. <el-row>
  256. <el-col :span="12">
  257. <el-form-item label="用户性别">
  258. <el-select v-model="form.sex" placeholder="请选择">
  259. <el-option
  260. v-for="dict in sexOptions"
  261. :key="dict.dictValue"
  262. :label="dict.dictLabel"
  263. :value="dict.dictValue"
  264. ></el-option>
  265. </el-select>
  266. </el-form-item>
  267. </el-col>
  268. <el-col :span="12">
  269. <el-form-item label="状态">
  270. <el-radio-group v-model="form.status">
  271. <el-radio
  272. v-for="dict in statusOptions"
  273. :key="dict.dictValue"
  274. :label="dict.dictValue"
  275. >{{dict.dictLabel}}</el-radio>
  276. </el-radio-group>
  277. </el-form-item>
  278. </el-col>
  279. </el-row>
  280. <el-row>
  281. <el-col :span="12">
  282. <el-form-item label="岗位">
  283. <el-select v-model="form.postIds" multiple placeholder="请选择">
  284. <el-option
  285. v-for="item in postOptions"
  286. :key="item.postId"
  287. :label="item.postName"
  288. :value="item.postId"
  289. :disabled="item.status == 1"
  290. ></el-option>
  291. </el-select>
  292. </el-form-item>
  293. </el-col>
  294. <el-col :span="12">
  295. <el-form-item label="角色">
  296. <el-select v-model="form.roleIds" multiple placeholder="请选择">
  297. <el-option
  298. v-for="item in roleOptions"
  299. :key="item.roleId"
  300. :label="item.roleName"
  301. :value="item.roleId"
  302. :disabled="item.status == 1"
  303. ></el-option>
  304. </el-select>
  305. </el-form-item>
  306. </el-col>
  307. </el-row>
  308. <el-row>
  309. <el-col :span="24">
  310. <el-form-item label="备注">
  311. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
  312. </el-form-item>
  313. </el-col>
  314. </el-row>
  315. </el-form>
  316. <div slot="footer" class="dialog-footer">
  317. <el-button type="primary" @click="submitForm">确 定</el-button>
  318. <el-button @click="cancel">取 消</el-button>
  319. </div>
  320. </el-dialog>
  321. <!-- 用户导入对话框 -->
  322. <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
  323. <el-upload
  324. ref="upload"
  325. :limit="1"
  326. accept=".xlsx, .xls"
  327. :headers="upload.headers"
  328. :action="upload.url + '?updateSupport=' + upload.updateSupport"
  329. :disabled="upload.isUploading"
  330. :on-progress="handleFileUploadProgress"
  331. :on-success="handleFileSuccess"
  332. :auto-upload="false"
  333. drag
  334. >
  335. <i class="el-icon-upload"></i>
  336. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  337. <div class="el-upload__tip text-center" slot="tip">
  338. <div class="el-upload__tip" slot="tip">
  339. <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
  340. </div>
  341. <span>仅允许导入xls、xlsx格式文件。</span>
  342. <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
  343. </div>
  344. </el-upload>
  345. <div slot="footer" class="dialog-footer">
  346. <el-button type="primary" @click="submitFileForm">确 定</el-button>
  347. <el-button @click="upload.open = false">取 消</el-button>
  348. </div>
  349. </el-dialog>
  350. </div>
  351. </template>
  352. <script>
  353. import { listUser, getUser, delUser, addUser, updateUser, exportUser, resetUserPwd, changeUserStatus, importTemplate } from "@/api/system/user";
  354. import {addSet,getSet } from "@/api/system/set";
  355. import { getToken } from "@/utils/auth";
  356. import { treeselect } from "@/api/system/dept";
  357. import Treeselect from "@riophae/vue-treeselect";
  358. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  359. export default {
  360. name: "User",
  361. components: { Treeselect },
  362. data() {
  363. return {
  364. // 遮罩层
  365. loading: true,
  366. // 导出遮罩层
  367. exportLoading: false,
  368. // 选中数组
  369. ids: [],
  370. // 非单个禁用
  371. single: true,
  372. // 非多个禁用
  373. multiple: true,
  374. // 显示搜索条件
  375. showSearch: true,
  376. // 总条数
  377. total: 0,
  378. // 用户表格数据
  379. userList: null,
  380. // 弹出层标题
  381. title: "",
  382. // 部门树选项
  383. deptOptions: undefined,
  384. // 是否显示弹出层
  385. open: false,
  386. // 部门名称
  387. deptName: undefined,
  388. // 默认密码
  389. initPassword: undefined,
  390. // 日期范围
  391. dateRange: [],
  392. // 状态数据字典
  393. statusOptions: [],
  394. // 性别状态字典
  395. sexOptions: [],
  396. // 岗位选项
  397. postOptions: [],
  398. // 角色选项
  399. roleOptions: [],
  400. // 表单参数
  401. form: {},
  402. defaultProps: {
  403. children: "children",
  404. label: "label"
  405. },
  406. // 用户导入参数
  407. upload: {
  408. // 是否显示弹出层(用户导入)
  409. open: false,
  410. // 弹出层标题(用户导入)
  411. title: "",
  412. // 是否禁用上传
  413. isUploading: false,
  414. // 是否更新已经存在的用户数据
  415. updateSupport: 0,
  416. // 设置上传的请求头部
  417. headers: { Authorization: "Bearer " + getToken() },
  418. // 上传的地址
  419. url: process.env.VUE_APP_BASE_API + "/system/user/importData"
  420. },
  421. // 查询参数
  422. queryParams: {
  423. pageNum: 1,
  424. pageSize: 10,
  425. userName: undefined,
  426. phonenumber: undefined,
  427. status: undefined,
  428. deptId: undefined
  429. },
  430. // 列信息
  431. columns: [
  432. { key: 0, label: `用户编号`, visible: true },
  433. { key: 1, label: `用户名称`, visible: true },
  434. { key: 2, label: `用户昵称`, visible: true },
  435. { key: 3, label: `部门`, visible: true },
  436. { key: 4, label: `手机号码`, visible: true },
  437. { key: 5, label: `状态`, visible: true },
  438. { key: 6, label: `创建时间`, visible: true },
  439. { key: 7, label: `账户角色`, visible: true }
  440. ],
  441. // 表单校验
  442. rules: {
  443. userName: [
  444. { required: true, message: "用户名称不能为空", trigger: "blur" },
  445. { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
  446. ],
  447. nickName: [
  448. { required: true, message: "用户昵称不能为空", trigger: "blur" }
  449. ],
  450. password: [
  451. { required: true, message: "用户密码不能为空", trigger: "blur" },
  452. { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
  453. ],
  454. email: [
  455. {
  456. type: "email",
  457. message: "'请输入正确的邮箱地址",
  458. trigger: ["blur", "change"]
  459. }
  460. ],
  461. phonenumber: [
  462. {
  463. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  464. message: "请输入正确的手机号码",
  465. trigger: "blur"
  466. }
  467. ]
  468. }
  469. };
  470. },
  471. watch: {
  472. // 根据名称筛选部门树
  473. deptName(val) {
  474. this.$refs.tree.filter(val);
  475. }
  476. },
  477. created() {
  478. this.getList();
  479. this.getTreeselect();
  480. this.getDicts("sys_normal_disable").then(response => {
  481. this.statusOptions = response.data;
  482. });
  483. this.getDicts("sys_user_sex").then(response => {
  484. this.sexOptions = response.data;
  485. });
  486. this.getConfigKey("sys.user.initPassword").then(response => {
  487. this.initPassword = response.msg;
  488. });
  489. },
  490. methods: {
  491. /** 查询用户列表 */
  492. getList() {
  493. this.loading = true;
  494. listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
  495. this.userList = response.rows;
  496. this.total = response.total;
  497. this.loading = false;
  498. }
  499. );
  500. },
  501. /** 查询部门下拉树结构 */
  502. getTreeselect() {
  503. treeselect().then(response => {
  504. this.deptOptions = response.data;
  505. });
  506. },
  507. // 筛选节点
  508. filterNode(value, data) {
  509. if (!value) return true;
  510. return data.label.indexOf(value) !== -1;
  511. },
  512. // 节点单击事件
  513. handleNodeClick(data) {
  514. this.queryParams.deptId = data.id;
  515. this.getList();
  516. },
  517. // 用户状态修改
  518. handleStatusChange(row) {
  519. let text = row.status === "0" ? "启用" : "停用";
  520. this.$confirm('确认要"' + text + '""' + row.userName + '"用户吗?', "警告", {
  521. confirmButtonText: "确定",
  522. cancelButtonText: "取消",
  523. type: "warning"
  524. }).then(function() {
  525. return changeUserStatus(row.userId, row.status);
  526. }).then(() => {
  527. this.msgSuccess(text + "成功");
  528. }).catch(function() {
  529. row.status = row.status === "0" ? "1" : "0";
  530. });
  531. },
  532. // 取消按钮
  533. cancel() {
  534. this.open = false;
  535. this.reset();
  536. },
  537. // 表单重置
  538. reset() {
  539. this.form = {
  540. userId: undefined,
  541. deptId: undefined,
  542. userName: undefined,
  543. nickName: undefined,
  544. password: undefined,
  545. phonenumber: undefined,
  546. email: undefined,
  547. sex: undefined,
  548. status: "0",
  549. remark: undefined,
  550. postIds: [],
  551. roleIds: []
  552. };
  553. this.resetForm("form");
  554. },
  555. /** 搜索按钮操作 */
  556. handleQuery() {
  557. this.queryParams.pageNum = 1;
  558. this.getList();
  559. },
  560. /** 重置按钮操作 */
  561. resetQuery() {
  562. this.dateRange = [];
  563. this.resetForm("queryForm");
  564. this.handleQuery();
  565. },
  566. // 多选框选中数据
  567. handleSelectionChange(selection) {
  568. this.ids = selection.map(item => item.userId);
  569. this.single = selection.length != 1;
  570. this.multiple = !selection.length;
  571. },
  572. // 更多操作触发
  573. handleCommand(command, row) {
  574. switch (command) {
  575. case "handleResetPwd":
  576. this.handleResetPwd(row);
  577. break;
  578. case "handleAuthRole":
  579. this.handleAuthRole(row);
  580. break;
  581. case "handleSetUser":
  582. this.handleSetUser(row);
  583. break
  584. default:
  585. break;
  586. }
  587. },
  588. /** 新增按钮操作 */
  589. handleAdd() {
  590. this.reset();
  591. this.getTreeselect();
  592. getUser().then(response => {
  593. this.postOptions = response.posts;
  594. this.roleOptions = response.roles;
  595. this.open = true;
  596. this.title = "添加用户";
  597. this.form.password = this.initPassword;
  598. });
  599. },
  600. /** 修改按钮操作 */
  601. handleUpdate(row) {
  602. this.reset();
  603. this.getTreeselect();
  604. const userId = row.userId || this.ids;
  605. getUser(userId).then(response => {
  606. this.form = response.data;
  607. this.postOptions = response.posts;
  608. this.roleOptions = response.roles;
  609. this.form.postIds = response.postIds;
  610. this.form.roleIds = response.roleIds;
  611. this.open = true;
  612. this.title = "修改用户";
  613. this.form.password = "";
  614. });
  615. },
  616. /** 用户设置 */
  617. handleSetUser(row) {
  618. getSet(row.userId).then(response=>{
  619. if(response.data){
  620. this.$prompt('请输入"' + row.userName + '"的显示百分比', "提示", {
  621. confirmButtonText: "确定",
  622. cancelButtonText: "取消",
  623. closeOnClickModal: false,
  624. inputPattern: /^[1-9]\d*$/,
  625. inputErrorMessage: "请输入大于0的整数",
  626. inputValue: response.data.rate
  627. }).then(({ value }) => {
  628. const param = {userId:row.userId,rate:value}
  629. addSet(param).then(response => {
  630. this.msgSuccess("设置成功,显示百分比是:" + value + "%");
  631. });
  632. }).catch(() => {});
  633. } else {
  634. // 如果 response.data 不存在,直接弹出提示框,不初始化值
  635. this.$prompt('请输入"' + row.userName + '"的显示百分比', "提示", {
  636. confirmButtonText: "确定",
  637. cancelButtonText: "取消",
  638. closeOnClickModal: false,
  639. inputPattern: /^[1-9]\d*$/, // 匹配大于0的整数
  640. inputErrorMessage: "请输入大于0的整数"
  641. }).then(({ value }) => {
  642. const param = { userId: row.userId, rate: value };
  643. addSet(param).then(response => {
  644. this.msgSuccess("设置成功,显示百分比是:" + value + "%");
  645. }).catch(error => {
  646. // 处理后端返回的错误
  647. this.msgError("设置失败:" + error.message);
  648. });
  649. }).catch(() => {
  650. // 用户取消操作
  651. this.msgInfo("操作已取消");
  652. });
  653. }
  654. }).catch(error => {
  655. // 处理 getSet 请求失败的情况
  656. this.msgError("获取当前设置失败:" + error.message);
  657. });
  658. },
  659. /** 重置密码按钮操作 */
  660. handleResetPwd(row) {
  661. this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
  662. confirmButtonText: "确定",
  663. cancelButtonText: "取消",
  664. closeOnClickModal: false,
  665. inputPattern: /^.{5,20}$/,
  666. inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
  667. }).then(({ value }) => {
  668. resetUserPwd(row.userId, value).then(response => {
  669. this.msgSuccess("修改成功,新密码是:" + value);
  670. });
  671. }).catch(() => {});
  672. },
  673. /** 分配角色操作 */
  674. handleAuthRole: function(row) {
  675. const userId = row.userId;
  676. this.$router.push("/system/user-auth/role/" + userId);
  677. },
  678. /** 提交按钮 */
  679. submitForm: function() {
  680. this.$refs["form"].validate(valid => {
  681. if (valid) {
  682. if (this.form.userId != undefined) {
  683. updateUser(this.form).then(response => {
  684. this.msgSuccess("修改成功");
  685. this.open = false;
  686. this.getList();
  687. });
  688. } else {
  689. addUser(this.form).then(response => {
  690. this.msgSuccess("新增成功");
  691. this.open = false;
  692. this.getList();
  693. });
  694. }
  695. }
  696. });
  697. },
  698. /** 删除按钮操作 */
  699. handleDelete(row) {
  700. const userIds = row.userId || this.ids;
  701. this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', "警告", {
  702. confirmButtonText: "确定",
  703. cancelButtonText: "取消",
  704. type: "warning"
  705. }).then(function() {
  706. return delUser(userIds);
  707. }).then(() => {
  708. this.getList();
  709. this.msgSuccess("删除成功");
  710. }).catch(() => {});
  711. },
  712. /** 导出按钮操作 */
  713. handleExport() {
  714. const queryParams = this.queryParams;
  715. this.$confirm('是否确认导出所有用户数据项?', "警告", {
  716. confirmButtonText: "确定",
  717. cancelButtonText: "取消",
  718. type: "warning"
  719. }).then(() => {
  720. this.exportLoading = true;
  721. return exportUser(queryParams);
  722. }).then(response => {
  723. this.download(response.msg);
  724. this.exportLoading = false;
  725. }).catch(() => {});
  726. },
  727. /** 导入按钮操作 */
  728. handleImport() {
  729. this.upload.title = "用户导入";
  730. this.upload.open = true;
  731. },
  732. /** 下载模板操作 */
  733. importTemplate() {
  734. importTemplate().then(response => {
  735. this.download(response.msg);
  736. });
  737. },
  738. // 文件上传中处理
  739. handleFileUploadProgress(event, file, fileList) {
  740. this.upload.isUploading = true;
  741. },
  742. // 文件上传成功处理
  743. handleFileSuccess(response, file, fileList) {
  744. this.upload.open = false;
  745. this.upload.isUploading = false;
  746. this.$refs.upload.clearFiles();
  747. this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
  748. this.getList();
  749. },
  750. // 提交上传文件
  751. submitFileForm() {
  752. this.$refs.upload.submit();
  753. }
  754. }
  755. };
  756. </script>