index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  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">
  48. <el-table-column label="登录账号" prop="userName" width="150" />
  49. <el-table-column label="姓名" prop="nickName" width="150" />
  50. <el-table-column label="手机号码" prop="phonenumber" width="150" />
  51. <el-table-column label="邮箱" prop="email" width="180" />
  52. <el-table-column label="用户角色" prop="userType" width="150" :formatter="userTypeFormat"/>
  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="操作" align="center" width="180" class-name="small-padding fixed-width">
  69. <template slot-scope="scope">
  70. <el-button type="text" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:query']">修改</el-button>
  71. <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
  72. <el-button type="text" @click="handleReset(scope.row)">重置密码</el-button>
  73. </template>
  74. </el-table-column>
  75. </el-table>
  76. <pagination
  77. v-show="total>0"
  78. :total="total"
  79. :page.sync="queryParams.pageNum"
  80. :limit.sync="queryParams.pageSize"
  81. @pagination="getList"/>
  82. <!-- 添加或修改用户配置对话框 -->
  83. <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
  84. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  85. <el-row>
  86. <el-col :span="12">
  87. <el-form-item label="用户姓名" prop="nickName">
  88. <el-input v-model="form.nickName" placeholder="请输入用户姓名" maxlength="30" />
  89. </el-form-item>
  90. </el-col>
  91. <el-col :span="12">
  92. <el-form-item label="用户角色">
  93. <el-select v-model="form.userType" placeholder="请选择用户角色">
  94. <el-option
  95. v-for="(item, index) in userListOptions"
  96. :key="index"
  97. :label="item.dictLabel"
  98. :value="item.dictValue"
  99. ></el-option>
  100. </el-select>
  101. </el-form-item>
  102. </el-col>
  103. </el-row>
  104. <el-row>
  105. <el-col :span="12">
  106. <el-form-item label="手机号码" prop="phonenumber">
  107. <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
  108. </el-form-item>
  109. </el-col>
  110. <el-col :span="12">
  111. <el-form-item label="邮箱" prop="email">
  112. <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
  113. </el-form-item>
  114. </el-col>
  115. </el-row>
  116. <el-row>
  117. <el-col :span="12">
  118. <el-form-item label="登录名称" prop="userName">
  119. <el-input v-model="form.userName" placeholder="请输入登录名称" maxlength="30" />
  120. </el-form-item>
  121. </el-col>
  122. <el-col :span="12">
  123. <el-form-item label="用户密码" prop="password">
  124. <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
  125. </el-form-item>
  126. </el-col>
  127. </el-row>
  128. <el-row>
  129. <el-col :span="12">
  130. <el-form-item label="用户性别">
  131. <el-select v-model="form.sex" placeholder="请选择性别">
  132. <el-option
  133. v-for="dict in dict.type.sys_user_sex"
  134. :key="dict.value"
  135. :label="dict.label"
  136. :value="dict.value"
  137. ></el-option>
  138. </el-select>
  139. </el-form-item>
  140. </el-col>
  141. <el-col :span="12">
  142. <el-form-item label="状态">
  143. <el-radio-group v-model="form.status">
  144. <el-radio
  145. v-for="dict in dict.type.sys_normal_disable"
  146. :key="dict.value"
  147. :label="dict.value"
  148. >{{dict.label}}</el-radio>
  149. </el-radio-group>
  150. </el-form-item>
  151. </el-col>
  152. </el-row>
  153. <el-row>
  154. <el-col :span="24">
  155. <el-form-item label="备注">
  156. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
  157. </el-form-item>
  158. </el-col>
  159. </el-row>
  160. </el-form>
  161. <div slot="footer" class="dialog-footer">
  162. <el-button type="primary" @click="submitForm">确 定</el-button>
  163. <el-button @click="cancel">取 消</el-button>
  164. </div>
  165. </el-dialog>
  166. </div>
  167. </template>
  168. <script>
  169. import { listUserApi,addRoleApi,updateUserApi } from "@/api/enterprise/employee/employee"
  170. import { changeUserStatus, getUser } from "@/api/system/user";
  171. import { userListOptions, getLabel,userAllListOptions } from "@/utils/dataFormat"
  172. export default {
  173. name: "Role",
  174. dicts: ['sys_normal_disable', 'sys_user_sex'],
  175. data() {
  176. return {
  177. // 遮罩层
  178. loading: true,
  179. // 选中数组
  180. ids: [],
  181. // 非单个禁用
  182. single: true,
  183. // 非多个禁用
  184. multiple: true,
  185. // 显示搜索条件
  186. showSearch: true,
  187. // 总条数
  188. total: 0,
  189. // 角色表格数据
  190. roleList: [],
  191. // 弹出层标题
  192. title: "",
  193. // 是否显示弹出层
  194. open: false,
  195. // 日期范围
  196. dateRange: [],
  197. userListOptions: userListOptions,
  198. userAllListOptions: userAllListOptions,
  199. // 查询参数
  200. queryParams: {
  201. pageNum: 1,
  202. pageSize: 10,
  203. userName: undefined,
  204. nickName: undefined,
  205. mobile: undefined
  206. },
  207. // 表单参数
  208. form: {},
  209. // 表单校验
  210. rules: {
  211. roleName: [
  212. { required: true, message: "角色名称不能为空", trigger: "blur" }
  213. ],
  214. }
  215. };
  216. },
  217. created() {
  218. this.getList();
  219. },
  220. methods: {
  221. /** 查询角色列表 */
  222. getList() {
  223. this.loading = true;
  224. listUserApi(this.queryParams).then(res => {
  225. this.loading = false;
  226. if(res.code == 200) {
  227. this.roleList = res.data.records;
  228. this.total = res.data.total;
  229. }
  230. });
  231. },
  232. // 角色状态修改
  233. handleStatusChange(row) {
  234. let text = row.status === "0" ? "启用" : "停用";
  235. this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function() {
  236. return changeUserStatus(row.userId, row.status);
  237. }).then(() => {
  238. this.$modal.msgSuccess(text + "成功");
  239. }).catch(function() {
  240. row.status = row.status === "0" ? "1" : "0";
  241. });
  242. },
  243. // 取消按钮
  244. cancel() {
  245. this.open = false;
  246. this.reset();
  247. },
  248. // 表单重置
  249. reset() {
  250. this.form = {
  251. roleId: undefined,
  252. roleName: undefined,
  253. status: "0",
  254. remark: undefined
  255. };
  256. this.resetForm("form");
  257. },
  258. /** 搜索按钮操作 */
  259. handleQuery() {
  260. this.queryParams.pageNum = 1;
  261. this.getList();
  262. },
  263. /** 重置按钮操作 */
  264. resetQuery() {
  265. this.dateRange = [];
  266. this.resetForm("queryForm");
  267. this.handleQuery();
  268. },
  269. /** 新增按钮操作 */
  270. handleAdd() {
  271. this.reset();
  272. this.open = true;
  273. this.title = "添加用户";
  274. },
  275. /** 修改按钮操作 */
  276. handleUpdate(row) {
  277. this.reset();
  278. const userId = row.userId;
  279. getUser(userId).then(response => {
  280. this.form = response.data;
  281. // this.postOptions = response.posts;
  282. // this.roleOptions = response.roles;
  283. // this.form.postIds = response.postIds;
  284. // this.form.roleIds = response.roleIds;
  285. this.open = true;
  286. this.title = "修改用户";
  287. this.form.password = "";
  288. });
  289. },
  290. /** 提交按钮 */
  291. submitForm: function() {
  292. this.$refs["form"].validate(valid => {
  293. if (valid) {
  294. if (this.form.userId != undefined) {
  295. updateUserApi(this.form).then(response => {
  296. this.$modal.msgSuccess("修改成功");
  297. this.open = false;
  298. this.getList();
  299. });
  300. } else {
  301. addRoleApi(this.form).then(response => {
  302. this.$modal.msgSuccess("新增成功");
  303. this.open = false;
  304. this.getList();
  305. });
  306. }
  307. }
  308. });
  309. },
  310. /** 删除按钮操作 */
  311. handleDelete(row) {
  312. const roleIds = row.roleId || this.ids;
  313. this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function() {
  314. return delRole(roleIds);
  315. }).then(() => {
  316. this.getList();
  317. this.$modal.msgSuccess("删除成功");
  318. }).catch(() => {});
  319. },
  320. handleReset(row) {
  321. },
  322. userTypeFormat(row, col, val, index) {
  323. return getLabel(userAllListOptions, val)
  324. }
  325. }
  326. };
  327. </script>