index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669
  1. <template>
  2. <div class="global-variable">
  3. <div class="condition">
  4. <el-form
  5. :inline="true"
  6. ref="ruleForm"
  7. :model="formInline"
  8. class="demo-form-inline"
  9. :rules="rules"
  10. >
  11. <el-form-item label="用户名称:" prop="userName">
  12. <el-input
  13. size="small"
  14. v-model="formInline.userName"
  15. placeholder="请输入用户名称"
  16. ></el-input>
  17. </el-form-item>
  18. <el-form-item label="角色名称:" prop="roleId">
  19. <el-select
  20. v-model="formInline.roleId"
  21. placeholder="请选择角色"
  22. size="small"
  23. >
  24. <el-option
  25. :label="item.roleDescription"
  26. v-for="item in roleList"
  27. :key="item.id"
  28. :value="item.id + ''"
  29. ></el-option>
  30. </el-select>
  31. </el-form-item>
  32. <el-form-item>
  33. <el-button type="primary" @click="onSubmit" size="small"
  34. >查询</el-button
  35. >
  36. <el-button @click="reset('ruleForm')" size="small">重置</el-button>
  37. </el-form-item>
  38. </el-form>
  39. <div class="newly">
  40. <el-button
  41. v-hasPermi="['system:users:add']"
  42. @click="newnuedialog"
  43. size="small"
  44. >新增</el-button
  45. >
  46. </div>
  47. </div>
  48. <div class="list-page">
  49. <el-table
  50. v-loading="loading"
  51. class="center-align-table"
  52. :data="tableData"
  53. border
  54. :cell-style="rowStyle"
  55. >
  56. <el-table-column
  57. align="center"
  58. fixed
  59. prop="userId"
  60. label="员工ID"
  61. width="100"
  62. >
  63. </el-table-column>
  64. <el-table-column align="center" label="员工名称" prop="userName">
  65. </el-table-column>
  66. <el-table-column prop="loginName" align="center" label="登录账号">
  67. </el-table-column>
  68. <el-table-column align="center" prop="userPhone" label="手机号">
  69. </el-table-column>
  70. <el-table-column prop="roleName" align="center" label="角色">
  71. </el-table-column>
  72. <el-table-column prop="state" align="center" label="状态" width="100">
  73. <template slot-scope="scope">
  74. <span>
  75. {{
  76. scope.row.state == 0
  77. ? "停用"
  78. : scope.row.state == 1
  79. ? "启用"
  80. : "/"
  81. }}</span
  82. >
  83. </template>
  84. </el-table-column>
  85. <el-table-column
  86. prop="transition"
  87. align="center"
  88. fixed="right"
  89. label="操作"
  90. width="200"
  91. >
  92. <template slot-scope="scope">
  93. <el-button
  94. v-hasPermi="['system:users:edit']"
  95. @click="compile(scope.row)"
  96. type="text"
  97. size="small"
  98. >编辑</el-button
  99. >
  100. <el-button
  101. v-if="scope.row.state == 0 || scope.row.state == 2"
  102. @click="setState(1, scope.row.userId)"
  103. type="text"
  104. size="small"
  105. v-hasPermi="['system:users:editState']"
  106. >启用</el-button
  107. >
  108. <el-button
  109. v-else
  110. style="color: #666"
  111. @click="setState(2, scope.row.userId)"
  112. type="text"
  113. size="small"
  114. v-hasPermi="['system:users:editState']"
  115. >停用</el-button
  116. >
  117. <el-button
  118. style="color: #f90"
  119. @click="editPwd(scope.row)"
  120. type="text"
  121. size="small"
  122. v-hasPermi="['system:users:editPassword']"
  123. >修改密码</el-button
  124. >
  125. <el-button
  126. style="color: #f00"
  127. @click="deleted(scope.row)"
  128. type="text"
  129. size="small"
  130. v-hasPermi="['system:users:delete']"
  131. :disabled="scope.row.state == 1"
  132. >删除</el-button
  133. >
  134. </template>
  135. </el-table-column>
  136. </el-table>
  137. <div class="pagination-container">
  138. <el-pagination
  139. @current-change="handleCurrentChange"
  140. :current-page.sync="formInline.pageNum"
  141. layout="total, prev, pager, next"
  142. :page-size="formInline.pageSize"
  143. :total="formInline.totalSize"
  144. >
  145. </el-pagination>
  146. </div>
  147. </div>
  148. <!-- 弹出层 -->
  149. <!-- 新增 /编辑-->
  150. <el-dialog
  151. :title="title"
  152. :visible.sync="nuedialog"
  153. width="500px"
  154. :before-close="handleClose"
  155. >
  156. <div v-loading="loadingView" class="views">
  157. <el-form
  158. :model="ruleForm"
  159. :rules="addUserRules"
  160. ref="addUserForm"
  161. label-width="100px"
  162. class="demo-ruleForm"
  163. >
  164. <el-form-item label="员工名称" prop="userName">
  165. <el-input
  166. v-model="ruleForm.userName"
  167. placeholder="请输入员工名称"
  168. ></el-input>
  169. </el-form-item>
  170. <el-form-item label="电话号码" prop="phone">
  171. <el-input
  172. v-model="ruleForm.phone"
  173. placeholder="请输入电话号码"
  174. ></el-input>
  175. </el-form-item>
  176. <el-form-item label="账号名称" prop="loginName">
  177. <el-input
  178. v-model="ruleForm.loginName"
  179. placeholder="请输入账号名称"
  180. autocomplete="off"
  181. ></el-input>
  182. </el-form-item>
  183. <el-form-item label="密码" prop="pwd" v-if="title === '新增'">
  184. <el-input
  185. v-model="ruleForm.pwd"
  186. autocomplete="new-password"
  187. show-password
  188. placeholder="请输入密码"
  189. ></el-input>
  190. </el-form-item>
  191. <el-form-item label="角色名称:" prop="roleId">
  192. <el-select
  193. v-model="ruleForm.roleId"
  194. placeholder="请选择角色"
  195. style="width: 100%"
  196. >
  197. <el-option
  198. :label="item.roleDescription"
  199. v-for="item in roleList"
  200. :key="item.id"
  201. :value="item.id + ''"
  202. ></el-option>
  203. </el-select>
  204. </el-form-item>
  205. </el-form>
  206. <span slot="footer" class="dialog-footer">
  207. <el-button @click="cancel('addUserForm')" size="small"
  208. >取 消</el-button
  209. >
  210. <el-button
  211. type="primary"
  212. @click="submitForm('addUserForm')"
  213. size="small"
  214. >确 定</el-button
  215. >
  216. </span>
  217. </div>
  218. </el-dialog>
  219. <!-- 风场详情 -->
  220. <el-dialog
  221. title="修改密码"
  222. :visible.sync="unusualdialog"
  223. width="500px"
  224. :before-close="handleClose"
  225. >
  226. <div v-loading="loadingView" class="views">
  227. <el-form
  228. :model="editUserPassword"
  229. ref="editUserPassword"
  230. label-width="100px"
  231. class="demo-ruleForm"
  232. >
  233. <el-form-item
  234. label="旧密码"
  235. prop="oldPWD"
  236. :rules="[{ required: true, message: '旧密码不能为空' }]"
  237. >
  238. <el-input
  239. v-model="editUserPassword.oldPWD"
  240. autocomplete="off"
  241. show-password
  242. ></el-input>
  243. </el-form-item>
  244. <el-form-item
  245. label="新密码"
  246. prop="newPWD"
  247. :rules="[{ required: true, message: '新密码不能为空' }]"
  248. >
  249. <el-input
  250. v-model="editUserPassword.newPWD"
  251. autocomplete="off"
  252. show-password
  253. ></el-input>
  254. </el-form-item>
  255. </el-form>
  256. <span slot="footer" class="dialog-footer">
  257. <el-button
  258. @click="
  259. () => {
  260. this.$refs['editUserPassword'].resetFields();
  261. this.unusualdialog = false;
  262. this.loadingView = false;
  263. }
  264. "
  265. size="small"
  266. >取 消</el-button
  267. >
  268. <el-button
  269. type="primary"
  270. @click="editUserPwd('editUserPassword')"
  271. size="small"
  272. >确 定</el-button
  273. >
  274. </span>
  275. </div>
  276. </el-dialog>
  277. </div>
  278. </template>
  279. <script>
  280. import {
  281. getUserTableList,
  282. getRoleTableList,
  283. enableUser,
  284. disableUser,
  285. getUserInfoByUserId,
  286. addUser,
  287. editUser,
  288. deleteUserInfo,
  289. updatePWD,
  290. } from "@/api/system.js";
  291. export default {
  292. data() {
  293. const validateUserName = (rule, value, callback) => {
  294. const regex = /^[^\u4e00-\u9fa5\W]+$/;
  295. if (!value) {
  296. callback(new Error("账号名称不能为空"));
  297. } else if (!regex.test(value)) {
  298. callback(new Error("账号名称不能包含中文及特殊字符"));
  299. } else {
  300. callback();
  301. }
  302. };
  303. const validatePhone = (rule, value, callback) => {
  304. const phoneRegex = /^[1][3-9][0-9]{9}$/;
  305. if (!value) {
  306. return callback(new Error("手机号不能为空"));
  307. }
  308. if (!phoneRegex.test(value)) {
  309. return callback(new Error("请输入正确的手机号"));
  310. }
  311. callback();
  312. };
  313. return {
  314. loadingView: false,
  315. loading: false, //数据加载中
  316. rules: {
  317. roleId: { trigger: "change" },
  318. userName: { trigger: "blur" },
  319. },
  320. roleList: [],
  321. formInline: {
  322. userName: undefined,
  323. roleId: undefined,
  324. pageNum: 1,
  325. pageSize: 10,
  326. // sort: "desc",
  327. totalSize: 0,
  328. },
  329. tableData: [],
  330. // 新增编辑表单
  331. ruleForm: {
  332. phone: null,
  333. pwd: null,
  334. roleId: null,
  335. userName: null,
  336. loginName: null,
  337. },
  338. addUserRules: {
  339. phone: [
  340. { required: true, message: "请输入手机号", trigger: "blur" },
  341. { validator: validatePhone, trigger: "blur" },
  342. ],
  343. loginName: [
  344. { required: true, message: "请输入账号名称", trigger: "blur" },
  345. { validator: validateUserName, trigger: "blur" },
  346. ],
  347. pwd: { required: true, message: "请输入密码", trigger: "blur" },
  348. roleId: { required: true, message: "请选择角色", trigger: "change" },
  349. userName: [
  350. { required: true, message: "请输入员工姓名", trigger: "blur" },
  351. ],
  352. },
  353. //修改密码
  354. editUserPassword: {
  355. oldPWD: "",
  356. newPWD: "",
  357. userId: "",
  358. },
  359. nuedialog: false,
  360. unusualdialog: false,
  361. title: "",
  362. };
  363. },
  364. created() {
  365. this.getTableList();
  366. this.getRoleList();
  367. },
  368. methods: {
  369. handleClose(done) {
  370. this.$confirm("确认关闭?")
  371. .then((_) => {
  372. done();
  373. })
  374. .catch((_) => {});
  375. },
  376. //修改密码
  377. editUserPwd(formName) {
  378. this.$refs[formName].validate((valid) => {
  379. if (valid) {
  380. this.loadingView = true;
  381. updatePWD({ ...this.editUserPassword })
  382. .then((res) => {
  383. this.$message({
  384. message: "密码修改成功",
  385. type: "success",
  386. });
  387. this.getTableList();
  388. this.unusualdialog = false;
  389. this.loadingView = false;
  390. })
  391. .catch(() => {
  392. this.loadingView = false;
  393. });
  394. } else {
  395. return false;
  396. }
  397. });
  398. },
  399. //分页数据切换
  400. handleCurrentChange(val) {
  401. this.formInline.pageNum = val;
  402. this.getTableList();
  403. },
  404. //修改状态
  405. setState(state, userId) {
  406. switch (state) {
  407. case 1:
  408. //启用接口
  409. enableUser({ userId })
  410. .then((res) => {
  411. this.$message({
  412. message: res.msg,
  413. type: "success",
  414. });
  415. this.getTableList();
  416. })
  417. .catch((error) => {});
  418. break;
  419. case 2:
  420. //禁用接口
  421. disableUser({ userId })
  422. .then((res) => {
  423. this.$message({
  424. message: res.msg,
  425. type: "success",
  426. });
  427. this.getTableList();
  428. })
  429. .catch((error) => {});
  430. break;
  431. default:
  432. return;
  433. }
  434. },
  435. async getTableList() {
  436. try {
  437. this.loading = true;
  438. const result = await getUserTableList({
  439. ...this.formInline,
  440. totalSize: undefined,
  441. });
  442. this.tableData = result.data.list;
  443. this.formInline.totalSize = result.data.totalSize;
  444. this.loading = false;
  445. } catch (error) {
  446. this.$message({
  447. type: "error",
  448. message: "请检查是否连接网络",
  449. });
  450. }
  451. },
  452. async getRoleList() {
  453. try {
  454. const result = await getRoleTableList({ pageNum: 1, pageSize: 100000 });
  455. this.roleList = result.data.list;
  456. } catch (error) {
  457. this.$message({
  458. type: "error",
  459. message: "请检查是否连接网络",
  460. });
  461. }
  462. },
  463. rowStyle() {
  464. return "text-align:center";
  465. },
  466. // 查询
  467. onSubmit() {
  468. this.getTableList();
  469. },
  470. // 重置
  471. reset(formName) {
  472. this.$refs[formName].resetFields();
  473. this.getTableList();
  474. },
  475. // 新增,编辑确定
  476. submitForm(formName) {
  477. this.$refs[formName].validate((valid) => {
  478. if (valid) {
  479. this.loadingView = true;
  480. switch (this.title) {
  481. case "新增":
  482. addUser({ ...this.ruleForm, userId: undefined })
  483. .then((res) => {
  484. this.$message({
  485. type: "success",
  486. message: res.msg,
  487. });
  488. this.getTableList();
  489. this.nuedialog = false;
  490. this.loadingView = false;
  491. })
  492. .catch(() => {
  493. this.loadingView = false;
  494. });
  495. break;
  496. case "编辑":
  497. editUser({ ...this.ruleForm })
  498. .then((res) => {
  499. this.$message({
  500. type: "success",
  501. message: res.msg,
  502. });
  503. this.getTableList();
  504. this.nuedialog = false;
  505. this.loadingView = false;
  506. })
  507. .catch(() => {
  508. this.loadingView = false;
  509. });
  510. break;
  511. }
  512. // this.nuedialog = false;
  513. } else {
  514. return false;
  515. }
  516. });
  517. },
  518. //点击取消
  519. cancel(formName) {
  520. this.$refs[formName] && this.$refs[formName].resetFields();
  521. this.ruleForm = {
  522. phone: null,
  523. pwd: null,
  524. roleId: null,
  525. userName: null,
  526. userId: null,
  527. loginName: null,
  528. };
  529. this.nuedialog = false;
  530. this.loadingView = false;
  531. },
  532. //异常详情
  533. particulars(row) {
  534. this.unusualdialog = true;
  535. },
  536. // 编辑 回显数据
  537. async compile(row) {
  538. try {
  539. const result = await getUserInfoByUserId({ userId: row.userId });
  540. const userInfo = result.data;
  541. // 直接替换整个对象,以确保 Vue 的响应式系统能够检测到变化
  542. this.ruleForm = {
  543. phone: userInfo.userPhone,
  544. pwd: undefined, // 如果需要重置密码字段
  545. roleId: userInfo.roleId.toString(),
  546. userName: userInfo.userName,
  547. userId: userInfo.userId, // 如果需要用户ID
  548. loginName: userInfo.loginName,
  549. };
  550. this.nuedialog = true;
  551. this.title = "编辑";
  552. } catch (error) {
  553. this.$message.error("获取用户信息失败");
  554. }
  555. },
  556. // 删除
  557. deleted(row) {
  558. this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
  559. confirmButtonText: "确定",
  560. cancelButtonText: "取消",
  561. type: "warning",
  562. })
  563. .then(() => {
  564. deleteUserInfo({ userId: row.userId })
  565. .then((res) => {
  566. this.$message({
  567. type: "success",
  568. message: "删除成功!",
  569. });
  570. this.getTableList();
  571. })
  572. .catch(() => {});
  573. })
  574. .catch(() => {
  575. this.$message({
  576. type: "info",
  577. message: "已取消删除",
  578. });
  579. });
  580. },
  581. editPwd(row) {
  582. this.editUserPassword.userId = row.userId;
  583. this.unusualdialog = true;
  584. },
  585. // 新增
  586. newnuedialog() {
  587. this.cancel("addUserForm");
  588. this.ruleForm = {
  589. loginName: "",
  590. pwd: "",
  591. userName: "",
  592. };
  593. this.nuedialog = true;
  594. this.title = "新增";
  595. },
  596. },
  597. };
  598. </script>
  599. <style lang="scss" scoped>
  600. .general {
  601. display: flex;
  602. flex-wrap: wrap;
  603. .condition {
  604. width: 50%;
  605. display: flex;
  606. p {
  607. width: 100px;
  608. text-align: right;
  609. line-height: 40px;
  610. }
  611. span {
  612. line-height: 40px;
  613. padding-left: 20px;
  614. }
  615. .el-select {
  616. width: 100%;
  617. margin-bottom: 20px;
  618. }
  619. .el-input {
  620. margin-bottom: 20px;
  621. }
  622. }
  623. }
  624. .attachment {
  625. display: flex;
  626. padding-top: 10px;
  627. p {
  628. margin-right: 20px;
  629. color: #409eff;
  630. }
  631. }
  632. .addition {
  633. display: flex;
  634. justify-content: flex-end;
  635. margin-bottom: 10px;
  636. }
  637. .demo-ruleForm {
  638. .el-form-item {
  639. margin-bottom: 25px;
  640. }
  641. }
  642. .condition {display: flex;
  643. justify-content: space-between;
  644. }
  645. </style>