index.vue 24 KB

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