index.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922
  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="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
  141. <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
  142. <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
  143. <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
  144. <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
  145. <template slot-scope="scope">
  146. <el-switch
  147. v-model="scope.row.status"
  148. active-value="0"
  149. inactive-value="1"
  150. @change="handleStatusChange(scope.row)"
  151. ></el-switch>
  152. </template>
  153. </el-table-column>
  154. <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
  155. <template slot-scope="scope">
  156. <span>{{ parseTime(scope.row.createTime) }}</span>
  157. </template>
  158. </el-table-column>
  159. <el-table-column
  160. label="操作"
  161. align="center"
  162. width="160"
  163. class-name="small-padding fixed-width"
  164. >
  165. <template slot-scope="scope" >
  166. <el-button
  167. size="mini"
  168. type="text"
  169. icon="el-icon-edit"
  170. @click="handleUpdate(scope.row)"
  171. v-hasPermi="['system:user:edit']"
  172. >修改</el-button>
  173. <el-button
  174. size="mini"
  175. type="text"
  176. icon="el-icon-delete"
  177. @click="handleDelete(scope.row)"
  178. v-hasPermi="['system:user:remove']"
  179. >删除</el-button>
  180. <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
  181. <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
  182. <el-dropdown-menu slot="dropdown">
  183. <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
  184. v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
  185. <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
  186. v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
  187. </el-dropdown-menu>
  188. </el-dropdown>
  189. </template>
  190. </el-table-column>
  191. </el-table>
  192. <pagination
  193. v-show="total>0"
  194. :total="total"
  195. :page.sync="queryParams.pageNum"
  196. :limit.sync="queryParams.pageSize"
  197. @pagination="getList"
  198. />
  199. </el-col>
  200. </el-row>
  201. <!-- 添加或修改用户配置对话框 -->
  202. <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
  203. <el-form ref="form" :model="form" :rules="rules" label-width="110px">
  204. <el-row>
  205. <el-col :span="12">
  206. <el-form-item label="用户昵称" prop="nickName">
  207. <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
  208. </el-form-item>
  209. </el-col>
  210. <el-col :span="12">
  211. <!-- :multiple="true" -->
  212. <!-- @deselect="clearabledss" @select="djieskless" :multiple="true" v-model="form.kuss" -->
  213. <el-form-item label="归属部门" prop="deptId">
  214. <el-select style="width:100%;" v-model="form.deptId" placeholder="请选择学校名称">
  215. <el-option
  216. v-for="dict in deptOptionss"
  217. :key="dict.deptId"
  218. :label="dict.deptName"
  219. :value="dict.deptId"
  220. clearable
  221. ></el-option>
  222. </el-select>
  223. <!-- <treeselect :normalizer="normalizer" v-model="form.deptId" :options="deptOptionss" :show-count="true" placeholder="请选择归属部门" /> -->
  224. </el-form-item>
  225. </el-col>
  226. </el-row>
  227. <el-row>
  228. <el-col :span="12">
  229. <el-form-item label="手机号码" prop="phonenumber">
  230. <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
  231. </el-form-item>
  232. </el-col>
  233. <el-col :span="12">
  234. <el-form-item label="邮箱" prop="email">
  235. <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
  236. </el-form-item>
  237. </el-col>
  238. </el-row>
  239. <el-row>
  240. <el-col :span="12">
  241. <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
  242. <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
  243. </el-form-item>
  244. </el-col>
  245. <el-col :span="12">
  246. <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
  247. <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
  248. </el-form-item>
  249. </el-col>
  250. </el-row>
  251. <el-row>
  252. <el-col :span="12">
  253. <el-form-item label="用户性别">
  254. <el-select style="width:100%;" v-model="form.sex" placeholder="请选择性别">
  255. <el-option
  256. v-for="dict in dict.type.sys_user_sex"
  257. :key="dict.value"
  258. :label="dict.label"
  259. :value="dict.value"
  260. ></el-option>
  261. </el-select>
  262. </el-form-item>
  263. </el-col>
  264. <el-col :span="12">
  265. <el-form-item label="状态">
  266. <el-radio-group v-model="form.status">
  267. <el-radio
  268. v-for="dict in dict.type.sys_normal_disable"
  269. :key="dict.value"
  270. :label="dict.value"
  271. >{{dict.label}}</el-radio>
  272. </el-radio-group>
  273. </el-form-item>
  274. </el-col>
  275. </el-row>
  276. <el-row>
  277. <el-col :span="12">
  278. <el-form-item label="岗位">
  279. <el-select style="width:100%;" v-model="form.postIds" multiple placeholder="请选择岗位">
  280. <el-option
  281. v-for="item in postOptions"
  282. :key="item.postId"
  283. :label="item.postName"
  284. :value="item.postId"
  285. :disabled="item.status == 1"
  286. ></el-option>
  287. </el-select>
  288. </el-form-item>
  289. </el-col>
  290. <el-col :span="12">
  291. <el-form-item label="角色">
  292. <!-- @change= "isgeg" @remove-tag="remojs" -->
  293. <el-select style="width:100%;" v-model="form.roleIds" multiple placeholder="请选择角色">
  294. <el-option
  295. v-for="item in roleOptions"
  296. :key="item.roleId"
  297. :label="item.roleName"
  298. :value="item.roleId"
  299. :disabled="item.status == 1"
  300. ></el-option>
  301. </el-select>
  302. </el-form-item>
  303. </el-col>
  304. </el-row>
  305. <el-row>
  306. <el-col :span="24" v-for="(item,index) in form.czrkJzdzList" :key="index">
  307. <el-col :span="12" v-if="isshosel == true">
  308. <el-form-item label="教师班级" prop="deptId">
  309. <!-- :multiple="true" -->
  310. <treeselect @deselect="clearabledss" @select="djieskless" v-model="item.name" :normalizer="normalizer" :options="deptOptionss" :show-count="true" placeholder="请选择教师班级" />
  311. </el-form-item>
  312. </el-col>
  313. <el-col :span="10" v-if="isshosel == true">
  314. <el-form-item label="教师科目" prop="deptId">
  315. <el-select style="width:100%;" v-model="item.km" multiple placeholder="请选择教师科目">
  316. <el-option
  317. v-for="item in postOptions"
  318. :key="item.postId"
  319. :label="item.postName"
  320. :value="item.postId"
  321. :disabled="item.status == 1"
  322. ></el-option>
  323. </el-select>
  324. </el-form-item>
  325. </el-col>
  326. <el-col :span="2" v-if="isshosel == true">
  327. <div class="hyeoa" style="margin-top: 10px;">
  328. <el-tooltip class="item" effect="dark" content="新增班级和科目信息,请慎重操作" placement="top-start">
  329. <img src="../../../assets/images/icon_tc_add.png" alt="" class="hueyde" @click="tijea(index)" />
  330. </el-tooltip>
  331. <el-tooltip class="item" effect="dark" content="删除无法恢复,请慎重操作" placement="top-start">
  332. <img src="../../../assets/images/delei.png" alt="" class="hueydele" @click="naeyrfakjf(index, item)" />
  333. </el-tooltip>
  334. </div>
  335. </el-col>
  336. </el-col>
  337. <el-col :span="24">
  338. <el-form-item label="备注">
  339. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
  340. </el-form-item>
  341. </el-col>
  342. </el-row>
  343. </el-form>
  344. <div slot="footer" class="dialog-footer">
  345. <el-button type="primary" @click="submitForm">确 定</el-button>
  346. <el-button @click="cancel">取 消</el-button>
  347. </div>
  348. </el-dialog>
  349. <!-- 用户导入对话框 -->
  350. <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
  351. <el-upload
  352. ref="upload"
  353. :limit="1"
  354. accept=".xlsx, .xls"
  355. :headers="upload.headers"
  356. :action="upload.url + '?updateSupport=' + upload.updateSupport"
  357. :disabled="upload.isUploading"
  358. :on-progress="handleFileUploadProgress"
  359. :on-success="handleFileSuccess"
  360. :auto-upload="false"
  361. drag
  362. >
  363. <i class="el-icon-upload"></i>
  364. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  365. <div class="el-upload__tip text-center" slot="tip">
  366. <div class="el-upload__tip" slot="tip">
  367. <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
  368. </div>
  369. <span>仅允许导入xls、xlsx格式文件。</span>
  370. <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
  371. </div>
  372. </el-upload>
  373. <div slot="footer" class="dialog-footer">
  374. <el-button type="primary" @click="submitFileForm">确 定</el-button>
  375. <el-button @click="upload.open = false">取 消</el-button>
  376. </div>
  377. </el-dialog>
  378. </div>
  379. </template>
  380. <script>
  381. import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
  382. import { getToken } from "@/utils/auth";
  383. import { listDept ,listDeptode} from "@/api/system/dept";
  384. import Treeselect from "@riophae/vue-treeselect";
  385. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  386. export default {
  387. name: "User",
  388. dicts: ['sys_normal_disable', 'sys_user_sex'],
  389. components: { Treeselect },
  390. data() {
  391. return {
  392. // 遮罩层
  393. loading: true,
  394. // 选中数组
  395. ids: [],
  396. // 非单个禁用
  397. single: true,
  398. // 非多个禁用
  399. multiple: true,
  400. // 显示搜索条件
  401. showSearch: true,
  402. // 总条数
  403. total: 0,
  404. // 用户表格数据
  405. userList: null,
  406. // 弹出层标题
  407. title: "",
  408. // 部门树选项
  409. deptOptions: undefined,
  410. deptOptionss:[],
  411. // 是否显示弹出层
  412. open: false,
  413. // 部门名称
  414. deptName: undefined,
  415. // 默认密码
  416. initPassword: undefined,
  417. // 日期范围
  418. dateRange: [],
  419. // 岗位选项
  420. postOptions: [],
  421. // 角色选项
  422. roleOptions: [],
  423. // 表单参数
  424. form: {},
  425. defaultProps: {
  426. children: "children",
  427. label: "label"
  428. },
  429. // 用户导入参数
  430. upload: {
  431. // 是否显示弹出层(用户导入)
  432. open: false,
  433. // 弹出层标题(用户导入)
  434. title: "",
  435. // 是否禁用上传
  436. isUploading: false,
  437. // 是否更新已经存在的用户数据
  438. updateSupport: 0,
  439. // 设置上传的请求头部
  440. headers: { Authorization: "Bearer " + getToken(),
  441. clientid:'e5cd7e4891bf95d1d19206ce24a7b32e'
  442. },
  443. // 上传的地址
  444. url: process.env.VUE_APP_BASE_API + "/system/user/importData"
  445. },
  446. isshosel:false,
  447. // 查询参数
  448. queryParams: {
  449. pageNum: 1,
  450. pageSize: 10,
  451. userName: undefined,
  452. phonenumber: undefined,
  453. status: undefined,
  454. deptId: undefined
  455. },
  456. // 列信息
  457. columns: [
  458. { key: 0, label: `用户编号`, visible: true },
  459. { key: 1, label: `用户名称`, visible: true },
  460. { key: 2, label: `用户昵称`, visible: true },
  461. { key: 3, label: `部门`, visible: true },
  462. { key: 4, label: `手机号码`, visible: true },
  463. { key: 5, label: `状态`, visible: true },
  464. { key: 6, label: `创建时间`, visible: true }
  465. ],
  466. // 表单校验
  467. rules: {
  468. userName: [
  469. { required: true, message: "用户名称不能为空", trigger: "blur" },
  470. { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
  471. ],
  472. nickName: [
  473. { required: true, message: "用户昵称不能为空", trigger: "blur" }
  474. ],
  475. password: [
  476. { required: true, message: "用户密码不能为空", trigger: "blur" },
  477. { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
  478. ],
  479. email: [
  480. {
  481. type: "email",
  482. message: "请输入正确的邮箱地址",
  483. trigger: ["blur", "change"]
  484. }
  485. ],
  486. phonenumber: [
  487. { required: true, message: "不能为空", trigger: "blur" },
  488. {
  489. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  490. message: "请输入正确的手机号码",
  491. trigger: "blur"
  492. }
  493. ]
  494. }
  495. };
  496. },
  497. watch: {
  498. // 根据名称筛选部门树
  499. deptName(val) {
  500. this.$refs.tree.filter(val);
  501. }
  502. },
  503. created() {
  504. this.getList();
  505. this.getDeptTree();
  506. this.getConfigKey("sys.user.initPassword").then(response => {
  507. this.initPassword = response.msg;
  508. });
  509. this.getdept()
  510. },
  511. methods: {
  512. /** 查询用户列表 */
  513. getList() {
  514. this.loading = true;
  515. listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
  516. this.userList = response.rows;
  517. this.total = response.total;
  518. this.loading = false;
  519. }
  520. );
  521. },
  522. /** 查询部门下拉树结构 */
  523. getDeptTree() {
  524. deptTreeSelect().then(response => {
  525. this.deptOptions = response.data;
  526. });
  527. },
  528. /** 查询父级部门下拉树结构 */
  529. getdept(val){
  530. let kuesf={'parentId':val}
  531. // this.kiuesegh = []
  532. console.log(kuesf)
  533. listDept(kuesf).then(response => {
  534. this.deptOptionss = this.handleTree(response.data, "deptId");
  535. });
  536. },
  537. // 筛选节点
  538. filterNode(value, data) {
  539. if (!value) return true;
  540. return data.label.indexOf(value) !== -1;
  541. },
  542. // 节点单击事件
  543. handleNodeClick(data) {
  544. this.queryParams.deptId = data.id;
  545. this.handleQuery();
  546. },
  547. // 用户状态修改
  548. handleStatusChange(row) {
  549. let text = row.status === "0" ? "启用" : "停用";
  550. this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function() {
  551. return changeUserStatus(row.userId, row.status);
  552. }).then(() => {
  553. this.$modal.msgSuccess(text + "成功");
  554. }).catch(function() {
  555. row.status = row.status === "0" ? "1" : "0";
  556. });
  557. },
  558. /** 转换部门数据结构 */
  559. normalizer(node) {
  560. if (node.children && !node.children.length) {
  561. delete node.children;
  562. }
  563. return {
  564. id: node.deptId,
  565. label: node.deptName,
  566. children: node.children
  567. };
  568. },
  569. // 取消按钮
  570. cancel() {
  571. this.open = false;
  572. this.reset();
  573. },
  574. // 表单重置
  575. reset() {
  576. this.form = {
  577. userId: undefined,
  578. deptId: undefined,
  579. userName: undefined,
  580. nickName: undefined,
  581. password: undefined,
  582. phonenumber: undefined,
  583. email: undefined,
  584. sex: undefined,
  585. status: "0",
  586. remark: undefined,
  587. postIds: [],
  588. roleIds: [],
  589. yjdwList:[],
  590. czrkJzdzList:[{'name':null,'km':'','kuss':[]}]
  591. };
  592. this.resetForm("form");
  593. },
  594. /** 搜索按钮操作 */
  595. handleQuery() {
  596. this.queryParams.pageNum = 1;
  597. this.getList();
  598. },
  599. /** 重置按钮操作 */
  600. resetQuery() {
  601. this.dateRange = [];
  602. this.resetForm("queryForm");
  603. this.queryParams.deptId = undefined;
  604. this.$refs.tree.setCurrentKey(null);
  605. this.handleQuery();
  606. },
  607. // 多选框选中数据
  608. handleSelectionChange(selection) {
  609. this.ids = selection.map(item => item.userId);
  610. this.single = selection.length != 1;
  611. this.multiple = !selection.length;
  612. },
  613. // 更多操作触发
  614. handleCommand(command, row) {
  615. switch (command) {
  616. case "handleResetPwd":
  617. this.handleResetPwd(row);
  618. break;
  619. case "handleAuthRole":
  620. this.handleAuthRole(row);
  621. break;
  622. default:
  623. break;
  624. }
  625. },
  626. /** 新增按钮操作 */
  627. handleAdd() {
  628. this.reset();
  629. getUser().then(response => {
  630. this.postOptions = response.data.posts;
  631. this.roleOptions = response.data.roles;
  632. this.open = true;
  633. this.title = "添加用户";
  634. this.form.password = this.initPassword;
  635. this.form.deptId = this.$store.state.user.schoolId
  636. });
  637. },
  638. /** 修改按钮操作 */
  639. handleUpdate(row) {
  640. this.reset();
  641. const userId = row.userId || this.ids;
  642. getUser(userId).then(response => {
  643. this.form = response.data.user;
  644. this.postOptions = response.data.posts;
  645. this.roleOptions = response.data.roles;
  646. this.$set(this.form, "postIds", response.data.postIds);
  647. this.$set(this.form, "roleIds", response.data.roleIds);
  648. // if(response.data.deptId !== null){
  649. // let nhgwdr = response.data.deptId.split(',')
  650. // this.$set(this.form, "kuss", nhgwdr);
  651. // }else{
  652. // this.$set(this.form, "kuss", null);
  653. // }
  654. this.open = true;
  655. this.title = "修改用户";
  656. this.form.password = "";
  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.$modal.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. // console.log(this.form.czrkJzdzList)
  682. if (valid) {
  683. // if(this.form.yjdwList.length !== 0){
  684. // this.form.deptId = this.form.yjdwList.join(',')
  685. // }
  686. // return
  687. if (this.form.userId != undefined) {
  688. updateUser(this.form).then(response => {
  689. this.$modal.msgSuccess("修改成功");
  690. this.open = false;
  691. this.getList();
  692. });
  693. } else {
  694. addUser(this.form).then(response => {
  695. this.$modal.msgSuccess("新增成功");
  696. this.open = false;
  697. this.getList();
  698. });
  699. }
  700. }
  701. });
  702. },
  703. /** 删除按钮操作 */
  704. handleDelete(row) {
  705. const userIds = row.userId || this.ids;
  706. this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(function() {
  707. return delUser(userIds);
  708. }).then(() => {
  709. this.getList();
  710. this.$modal.msgSuccess("删除成功");
  711. }).catch(() => {});
  712. },
  713. /** 导出按钮操作 */
  714. handleExport() {
  715. this.download('system/user/export', {
  716. ...this.queryParams
  717. }, `user_${new Date().getTime()}.xlsx`)
  718. },
  719. /** 导入按钮操作 */
  720. handleImport() {
  721. this.upload.title = "用户导入";
  722. this.upload.open = true;
  723. },
  724. /** 下载模板操作 */
  725. importTemplate() {
  726. this.download('system/user/importTemplate', {
  727. }, `user_template_${new Date().getTime()}.xlsx`)
  728. },
  729. // 文件上传中处理
  730. handleFileUploadProgress(event, file, fileList) {
  731. this.upload.isUploading = true;
  732. },
  733. // 文件上传成功处理
  734. handleFileSuccess(response, file, fileList) {
  735. this.upload.open = false;
  736. this.upload.isUploading = false;
  737. this.$refs.upload.clearFiles();
  738. this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  739. this.getList();
  740. },
  741. // 提交上传文件
  742. submitFileForm() {
  743. this.$refs.upload.submit();
  744. },
  745. djieskless(node){
  746. console.log(node,node.children,345)
  747. if(node.children!== undefined){
  748. node.children.filter(rou =>{
  749. // let nhd = {'deptId':rou.id,'deptName':rou.label,'xmId':this.form.xmId,'xmbh':this.form.xmbh,'xmmc':this.form.xmxsmc}
  750. this.form.yjdwList.push(rou.id)
  751. })
  752. }else{
  753. // let nhd = {'deptId':node.id,'deptName':node.label,'xmId':this.form.xmId,'xmbh':this.form.xmbh,'xmmc':this.form.xmxsmc}
  754. this.form.yjdwList.push(node.id)
  755. }
  756. console.log(this.form.yjdwList)
  757. },
  758. isgeg(val){
  759. console.log(val,this.roleOptions)
  760. for(var i = 0 ; i < val.length; i++){
  761. this.roleOptions.filter( rou=>{
  762. if(val[i] == rou.roleId){
  763. if(rou.roleKey == 'teacher'){
  764. this.isshosel = true
  765. // console.log(this.isshosel,3)
  766. }
  767. }
  768. })
  769. }
  770. },
  771. // 清楚
  772. remojs(val){
  773. console.log(val,3)
  774. this.roleOptions.filter( rou=>{
  775. if(val == rou.roleId){
  776. if(rou.roleKey == 'teacher'){
  777. this.isshosel = false
  778. // console.log(this.isshosel,3)
  779. }
  780. }
  781. })
  782. },
  783. clearabledss(node){
  784. console.log(node,this.form.yjdwList,76)
  785. let nhdw = this.form.yjdwList
  786. if(node.children!== undefined){
  787. node.children.filter(rou =>{
  788. console.log(rou)
  789. this.form.yjdwList = this.form.yjdwList.filter(t => t != rou.id)
  790. this.form.yjdwList.filter(rt =>{
  791. console.log(rt != rou.id,8)
  792. if(rt == rou.id){
  793. this.form.yjdwList.splice(rt,1)
  794. }
  795. })
  796. })
  797. }else{
  798. this.form.yjdwList = this.form.yjdwList.filter(t => t !== node.id)
  799. this.form.yjdwList.filter(rt =>{
  800. console.log(rt != node.id,8)
  801. if(rt == rou.id){
  802. this.form.yjdwList.splice(rt,1)
  803. }
  804. })
  805. }
  806. console.log(this.form.yjdwList,764)
  807. // this.form.kuss = []
  808. // nhdw.filter( t =>{
  809. // console.log(t.deptId)
  810. // })
  811. // this.form.yjdwList = this.form.yjdwList.filter(t => t.deptId !== node.id)
  812. // this.form.yjdwList = []
  813. },
  814. // 点击新增
  815. tijea(index) {
  816. console.log(index+ 1)
  817. // this.nameutaiL = index+ 1
  818. // this.cascaderKey = index + 1
  819. this.form.czrkJzdzList.push({
  820. name: null,
  821. km: '',
  822. kuss:[]
  823. });
  824. // this.nhyeojd = true
  825. },
  826. // 点击删除
  827. naeyrfakjf(index, item) {
  828. console.log(this.form.czrkJzdzList.length,347)
  829. // if(this.form.czrkJzdzList.length == 2){
  830. // this.$message.error('居住地为必填不可全删除');
  831. // return false
  832. // }
  833. // this.$message.error(response.msg + '请重新填写');
  834. var that = this
  835. this.$confirm('是否确认删除信息?', '警告', {
  836. confirmButtonText: '确定',
  837. cancelButtonText: '取消',
  838. type: 'warning'
  839. })
  840. .then(function() {
  841. return that.delseeug(index,item)
  842. })
  843. .then(() => {
  844. // this.getList();
  845. // this.msgSuccess('删除成功');
  846. });
  847. },
  848. delseeug(index,item){
  849. console.log(234)
  850. if (this.form.czrkJzdzList.length == 1) {
  851. this.$message.error('只剩一条数据,无法删除');
  852. return false;
  853. }
  854. if (this.jdourdjoaj == true) {
  855. // 新增
  856. this.form.czrkJzdzList.splice(index, 1);
  857. } else {
  858. // 修改
  859. // ()
  860. this.form.czrkJzdzList.splice(index, 1);
  861. }
  862. this.$modal.msgSuccess('删除成功');
  863. },
  864. }
  865. };
  866. </script>
  867. <style >
  868. .hueyde {
  869. width: 18px;
  870. height: 18px;
  871. margin: 0 5px;
  872. margin-right: 10px;
  873. }
  874. .hueydele {
  875. width: 15px;
  876. height: 18px;
  877. }
  878. </style>
  879. <style scoped lang="scss">
  880. .app-container{
  881. background-color: #f3f4f6;
  882. padding-top: 10px;
  883. }
  884. .ntg{
  885. background-color: #fff;
  886. padding: 5px;
  887. border-radius: 5px;
  888. .pagination-container{
  889. height: 50px;
  890. }
  891. }
  892. .nghf{
  893. background-color: #fff;
  894. padding: 5px;
  895. padding-top: 25px;
  896. border-radius: 5px;
  897. margin-bottom: 20px;
  898. }
  899. </style>