index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. <template>
  2. <div class="app-container">
  3. <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
  4. <el-form-item label="登录账号" prop="userName">
  5. <el-input
  6. v-model="queryParams.userName"
  7. placeholder="请输入登录账号"
  8. clearable
  9. style="width: 240px"
  10. @keyup.enter.native="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="姓名" prop="nickName">
  14. <el-input
  15. v-model="queryParams.nickName"
  16. placeholder="请输入姓名"
  17. clearable
  18. style="width: 240px"
  19. @keyup.enter.native="handleQuery"
  20. />
  21. </el-form-item>
  22. <el-form-item label="手机号" prop="mobile">
  23. <el-input
  24. v-model="queryParams.mobile"
  25. placeholder="请输入手机号"
  26. clearable
  27. style="width: 240px"
  28. @keyup.enter.native="handleQuery"
  29. />
  30. </el-form-item>
  31. <el-form-item>
  32. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  33. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  34. </el-form-item>
  35. </el-form> -->
  36. <el-row :gutter="10" class="mb8">
  37. <el-col :span="1.5">
  38. <el-button
  39. type="primary"
  40. plain
  41. icon="el-icon-plus"
  42. size="mini"
  43. @click="handleAdd"
  44. >新增</el-button>
  45. </el-col>
  46. </el-row>
  47. <el-table v-loading="loading" :data="roleList" border>
  48. <el-table-column label="登录账号" prop="userName" width="200" align="center"/>
  49. <el-table-column label="姓名" prop="nickName" align="center"/>
  50. <el-table-column label="手机号码" prop="phonenumber" width="150" align="center"/>
  51. <el-table-column label="邮箱" prop="email" width="200" align="center"/>
  52. <el-table-column label="用户角色" prop="userType" width="150" :formatter="userTypeFormat" align="center"/>
  53. <el-table-column label="状态" align="center" width="100">
  54. <template slot-scope="scope">
  55. <el-switch
  56. v-model="scope.row.status"
  57. active-value="0"
  58. inactive-value="1"
  59. @change="handleStatusChange(scope.row)"
  60. ></el-switch>
  61. </template>
  62. </el-table-column>
  63. <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  64. <template slot-scope="scope">
  65. <span>{{ parseTime(scope.row.createTime) }}</span>
  66. </template>
  67. </el-table-column>
  68. <el-table-column label="最新登录时间" prop="loginDate" width="180">
  69. <template slot-scope="scope">
  70. <span>{{ parseTime(scope.row.loginDate) }}</span>
  71. </template>
  72. </el-table-column>
  73. <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width" fixed="right">
  74. <template slot-scope="scope">
  75. <el-button type="text" @click="handleUpdate(scope.row)">修改</el-button>
  76. <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
  77. <el-button type="text" @click="handleResetPwd(scope.row)">重置密码</el-button>
  78. </template>
  79. </el-table-column>
  80. </el-table>
  81. <pagination
  82. v-show="total>0"
  83. :total="total"
  84. :page.sync="queryParams.pageNum"
  85. :limit.sync="queryParams.pageSize"
  86. @pagination="getList"/>
  87. <!-- 添加或修改用户配置对话框 -->
  88. <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
  89. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  90. <el-row>
  91. <el-col :span="12">
  92. <el-form-item label="用户姓名" prop="nickName">
  93. <el-input v-model="form.nickName" placeholder="请输入用户姓名" maxlength="30" />
  94. </el-form-item>
  95. </el-col>
  96. <el-col :span="12">
  97. <el-form-item label="用户角色" prop="userType">
  98. <el-select v-model="form.userType" placeholder="请选择用户角色">
  99. <el-option
  100. v-for="(item, index) in userListOptions"
  101. :key="index"
  102. :label="item.dictLabel"
  103. :value="item.dictValue"
  104. ></el-option>
  105. </el-select>
  106. </el-form-item>
  107. </el-col>
  108. </el-row>
  109. <el-row>
  110. <el-col :span="12">
  111. <el-form-item label="手机号码" prop="phonenumber">
  112. <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
  113. </el-form-item>
  114. </el-col>
  115. <el-col :span="12">
  116. <el-form-item label="邮箱" prop="email">
  117. <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
  118. </el-form-item>
  119. </el-col>
  120. </el-row>
  121. <el-row>
  122. <el-col :span="12">
  123. <el-form-item label="登录名称" prop="userName">
  124. <el-input v-model="form.userName" placeholder="请输入登录名称" maxlength="30" />
  125. </el-form-item>
  126. </el-col>
  127. <el-col :span="12" v-if="pwdVisible">
  128. <el-form-item label="用户密码" prop="password">
  129. <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
  130. </el-form-item>
  131. </el-col>
  132. </el-row>
  133. <el-row>
  134. <el-col :span="12">
  135. <el-form-item label="用户性别" prop="sex">
  136. <el-select v-model="form.sex" placeholder="请选择性别">
  137. <el-option
  138. v-for="dict in dict.type.sys_user_sex"
  139. :key="dict.value"
  140. :label="dict.label"
  141. :value="dict.value"
  142. ></el-option>
  143. </el-select>
  144. </el-form-item>
  145. </el-col>
  146. <el-col :span="12">
  147. <el-form-item label="状态" prop="status">
  148. <el-radio-group v-model="form.status">
  149. <el-radio
  150. v-for="dict in dict.type.sys_normal_disable"
  151. :key="dict.value"
  152. :label="dict.value"
  153. >{{dict.label}}</el-radio>
  154. </el-radio-group>
  155. </el-form-item>
  156. </el-col>
  157. </el-row>
  158. <el-row>
  159. <el-col :span="24">
  160. <el-form-item label="备注">
  161. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
  162. </el-form-item>
  163. </el-col>
  164. </el-row>
  165. </el-form>
  166. <div slot="footer" class="dialog-footer">
  167. <el-button type="primary" @click="submitForm">确 定</el-button>
  168. <el-button @click="cancel">取 消</el-button>
  169. </div>
  170. </el-dialog>
  171. </div>
  172. </template>
  173. <script>
  174. import { listUserApi,addRoleApi,updateUserApi,deleteUserApi,resetPwdApi,getUserByIdApi } from "@/api/enterprise/employee/employee"
  175. import { changeUserStatus, getUser } from "@/api/system/user";
  176. import { userListOptions, getLabel,userAllListOptions } from "@/utils/dataFormat"
  177. export default {
  178. name: "Role",
  179. dicts: ['sys_normal_disable', 'sys_user_sex'],
  180. data() {
  181. return {
  182. // 遮罩层
  183. loading: true,
  184. // 选中数组
  185. ids: [],
  186. // 非单个禁用
  187. single: true,
  188. // 非多个禁用
  189. multiple: true,
  190. // 显示搜索条件
  191. showSearch: true,
  192. pwdVisible: true,
  193. // 总条数
  194. total: 0,
  195. // 角色表格数据
  196. roleList: [],
  197. // 弹出层标题
  198. title: "",
  199. // 是否显示弹出层
  200. open: false,
  201. // 日期范围
  202. dateRange: [],
  203. userListOptions: userListOptions,
  204. userAllListOptions: userAllListOptions,
  205. // 查询参数
  206. queryParams: {
  207. pageNum: 1,
  208. pageSize: 10,
  209. userName: undefined,
  210. nickName: undefined,
  211. mobile: undefined,
  212. flag: true
  213. },
  214. // 表单参数
  215. form: {},
  216. // 表单校验
  217. rules: {
  218. nickName: [
  219. { required: true, message: "用户名称不能为空", trigger: "blur" }
  220. ],
  221. userType: [
  222. { required: true, message: "请选择用户角色", trigger: "change"}
  223. ],
  224. phonenumber: [
  225. { required: true, trigger: "blur", message: "请输入手机号" },
  226. {
  227. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  228. message: "请输入正确的手机号码",
  229. trigger: "blur"
  230. }
  231. ],
  232. email: [
  233. { required: true, trigger: ["blur", "change"], message: "请输入邮箱",type: "email", },
  234. ],
  235. userName: [
  236. { required: true, message: "登录名称不能为空", trigger: "blur" }
  237. ],
  238. password: [
  239. { required: true, trigger: "blur", message: "请输入您的密码" },
  240. { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
  241. ],
  242. sex: [
  243. { required: true, message: "请选择性别", trigger: "change"}
  244. ],
  245. status: [
  246. { required: true, message: "请选择状态", trigger: "change"}
  247. ]
  248. }
  249. };
  250. },
  251. created() {
  252. this.getList();
  253. },
  254. methods: {
  255. /** 查询角色列表 */
  256. getList() {
  257. this.loading = true;
  258. listUserApi(this.queryParams).then(res => {
  259. this.loading = false;
  260. if(res.code == 200) {
  261. this.roleList = res.data.records;
  262. this.total = res.data.total;
  263. }
  264. });
  265. },
  266. // 角色状态修改
  267. handleStatusChange(row) {
  268. let text = row.status === "0" ? "启用" : "停用";
  269. this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function() {
  270. return changeUserStatus(row.userId, row.status);
  271. }).then(() => {
  272. this.$modal.msgSuccess(text + "成功");
  273. }).catch(function() {
  274. row.status = row.status === "0" ? "1" : "0";
  275. });
  276. },
  277. // 取消按钮
  278. cancel() {
  279. this.open = false;
  280. this.reset();
  281. },
  282. // 表单重置
  283. reset() {
  284. this.form = {
  285. };
  286. this.resetForm("form");
  287. },
  288. /** 搜索按钮操作 */
  289. handleQuery() {
  290. this.queryParams.pageNum = 1;
  291. this.getList();
  292. },
  293. /** 重置按钮操作 */
  294. resetQuery() {
  295. this.dateRange = [];
  296. this.resetForm("queryForm");
  297. this.handleQuery();
  298. },
  299. /** 新增按钮操作 */
  300. handleAdd() {
  301. this.reset();
  302. this.open = true;
  303. this.title = "添加用户";
  304. this.pwdVisible = true
  305. },
  306. /** 修改按钮操作 */
  307. handleUpdate(row) {
  308. this.reset();
  309. const userId = row.userId;
  310. getUserByIdApi(userId).then(response => {
  311. this.form = response.data;
  312. this.open = true;
  313. this.title = "修改用户";
  314. this.pwdVisible = false
  315. // this.$set(this.form, 'password', '')
  316. // this.form.password = "";
  317. });
  318. },
  319. /** 提交按钮 */
  320. submitForm: function() {
  321. this.$refs["form"].validate(valid => {
  322. if (valid) {
  323. if (this.form.userId != undefined) {
  324. updateUserApi(this.form).then(response => {
  325. if(res.code == 200) {
  326. this.$modal.msgSuccess("修改成功");
  327. this.open = false;
  328. this.getList();
  329. }
  330. });
  331. } else {
  332. addRoleApi(this.form).then(response => {
  333. if(res.code == 200) {
  334. this.$modal.msgSuccess("新增成功");
  335. this.open = false;
  336. this.getList();
  337. }
  338. });
  339. }
  340. }
  341. });
  342. },
  343. /** 删除按钮操作 */
  344. handleDelete(row) {
  345. const userId = row.userId;
  346. this.$modal.confirm('是否确认删除登录账号为"' + row.userName + '"的数据项?').then(function() {
  347. return deleteUserApi(userId);
  348. }).then(() => {
  349. this.getList();
  350. this.$modal.msgSuccess("删除成功");
  351. }).catch(() => {});
  352. },
  353. handleResetPwd(row) {
  354. this.$confirm('是否确认重置密码?', "警告", {
  355. confirmButtonText: "确定",
  356. cancelButtonText: "取消",
  357. type: "warning"
  358. }).then(function() {
  359. return resetPwdApi(row.userId);
  360. }).then(() => {
  361. this.queryParams.pageNum = 1;
  362. this.getList();
  363. setTimeout(() => { // 加延时
  364. this.$modal.msgSuccess("重置密码成功,新密码是:123456");
  365. }, 500);
  366. })
  367. },
  368. userTypeFormat(row, col, val, index) {
  369. return getLabel(userAllListOptions, val)
  370. }
  371. }
  372. };
  373. </script>