UserModal.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. <template>
  2. <a-drawer
  3. :title="title"
  4. :maskClosable="true"
  5. :width="drawerWidth"
  6. placement="right"
  7. :closable="true"
  8. @close="handleCancel"
  9. :visible="visible"
  10. style="height: 100%;">
  11. <template slot="title">
  12. <div style="width: 100%;">
  13. <span>{{ title }}</span>
  14. <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
  15. <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
  16. </span>
  17. </div>
  18. </template>
  19. <a-spin :spinning="confirmLoading">
  20. <a-form-model ref="form" :model="model" :rules="validatorRules">
  21. <a-form-model-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
  22. <a-input placeholder="请输入用户账号" v-model="model.username" :readOnly="!!model.id"/>
  23. </a-form-model-item>
  24. <template v-if="!model.id">
  25. <a-form-model-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password" >
  26. <a-input type="password" placeholder="请输入登录密码" v-model="model.password" />
  27. </a-form-model-item>
  28. <a-form-model-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmpassword" >
  29. <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码" v-model="model.confirmpassword"/>
  30. </a-form-model-item>
  31. </template>
  32. <a-form-model-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
  33. <a-input placeholder="请输入用户姓名" v-model="model.realname" />
  34. </a-form-model-item>
  35. <a-form-model-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo">
  36. <a-input placeholder="请输入工号" v-model="model.workNo" />
  37. </a-form-model-item>
  38. <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
  39. <a-input placeholder="请输入手机号码" v-model="model.phone" />
  40. </a-form-model-item>
  41. <a-form-model-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
  42. <j-select-position placeholder="请选择职务" :multiple="false" v-model="model.post"/>
  43. </a-form-model-item>
  44. <a-form-model-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" >
  45. <j-multi-select-tag
  46. :disabled="disableSubmit"
  47. v-model="model.selectedroles"
  48. :options="rolesOptions"
  49. placeholder="请选择角色">
  50. </j-multi-select-tag>
  51. </a-form-model-item>
  52. <!--部门分配-->
  53. <a-form-model-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
  54. <j-select-depart v-model="model.selecteddeparts" :multi="true" @back="backDepartInfo" :backDepart="true" :treeOpera="true">></j-select-depart>
  55. </a-form-model-item>
  56. <!--租户分配-->
  57. <a-form-model-item label="租户分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
  58. <j-multi-select-tag
  59. :disabled="disableSubmit"
  60. v-model="model.relTenantIds"
  61. :options="tenantsOptions"
  62. placeholder="请选择租户">
  63. </j-multi-select-tag>
  64. </a-form-model-item>
  65. <a-form-model-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
  66. <a-radio-group v-model="model.userIdentity" @change="identityChange">
  67. <a-radio :value="1">普通用户</a-radio>
  68. <a-radio :value="2">上级</a-radio>
  69. </a-radio-group>
  70. </a-form-model-item>
  71. <a-form-model-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="departIdShow==true">
  72. <j-multi-select-tag
  73. :disabled="disableSubmit"
  74. v-model="model.departIds"
  75. :options="nextDepartOptions"
  76. placeholder="请选择负责部门">
  77. </j-multi-select-tag>
  78. </a-form-model-item>
  79. <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
  80. <j-image-upload class="avatar-uploader" text="上传" v-model="model.avatar" ></j-image-upload>
  81. </a-form-model-item>
  82. <a-form-model-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
  83. <a-date-picker
  84. style="width: 100%"
  85. placeholder="请选择生日"
  86. v-model="model.birthday"
  87. :format="dateFormat"
  88. :getCalendarContainer="node => node.parentNode"/>
  89. </a-form-model-item>
  90. <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
  91. <a-select v-model="model.sex" placeholder="请选择性别" :getPopupContainer= "(target) => target.parentNode">
  92. <a-select-option :value="1">男</a-select-option>
  93. <a-select-option :value="2">女</a-select-option>
  94. </a-select>
  95. </a-form-model-item>
  96. <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
  97. <a-input placeholder="请输入邮箱" v-model="model.email" />
  98. </a-form-model-item>
  99. <a-form-model-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="telephone">
  100. <a-input placeholder="请输入座机" v-model="model.telephone" />
  101. </a-form-model-item>
  102. <a-form-model-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">
  103. <j-dict-select-tag v-model="model.activitiSync" placeholder="请选择是否同步工作流引擎" :type="'radio'" dictCode="activiti_sync"/>
  104. </a-form-model-item>
  105. </a-form-model>
  106. </a-spin>
  107. <div class="drawer-bootom-button" v-show="!disableSubmit">
  108. <a-popconfirm title="确定放弃编辑?" @confirm="handleCancel" okText="确定" cancelText="取消">
  109. <a-button style="margin-right: .8rem">取消</a-button>
  110. </a-popconfirm>
  111. <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
  112. </div>
  113. </a-drawer>
  114. </template>
  115. <script>
  116. import moment from 'moment'
  117. import Vue from 'vue'
  118. import { ACCESS_TOKEN } from "@/store/mutation-types"
  119. import { getAction } from '@/api/manage'
  120. import { addUser,editUser,queryUserRole,queryall } from '@/api/api'
  121. import { disabledAuthFilter } from "@/utils/authFilter"
  122. import { duplicateCheck } from '@/api/api'
  123. export default {
  124. name: "UserModal",
  125. components: {
  126. },
  127. data () {
  128. return {
  129. departDisabled: false, //是否是我的部门调用该页面
  130. roleDisabled: false, //是否是角色维护调用该页面
  131. modalWidth:800,
  132. drawerWidth:700,
  133. modaltoggleFlag:true,
  134. confirmDirty: false,
  135. userId:"", //保存用户id
  136. disableSubmit:false,
  137. dateFormat:"YYYY-MM-DD",
  138. validatorRules:{
  139. username:[{required: true, message: '请输入用户账号!'},
  140. {validator: this.validateUsername,}],
  141. password: [{required: true,pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,message: '密码由8位数字、大小写字母和特殊符号组成!'},
  142. {validator: this.validateToNextPassword,trigger: 'change'}],
  143. confirmpassword: [{required: true, message: '请重新输入登录密码!',},
  144. { validator: this.compareToFirstPassword,}],
  145. realname:[{ required: true, message: '请输入用户名称!' }],
  146. phone: [
  147. // {required: true, message: '请输入手机号!'},
  148. {validator: this.validatePhone}
  149. ],
  150. email: [{validator: this.validateEmail}],
  151. roles:{},
  152. workNo:[
  153. { required: true, message: '请输入工号' },
  154. { validator: this.validateWorkNo }
  155. ],
  156. telephone: [{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' },]
  157. },
  158. departIdShow:false,
  159. title:"操作",
  160. visible: false,
  161. model: {},
  162. labelCol: {
  163. xs: { span: 24 },
  164. sm: { span: 5 },
  165. },
  166. wrapperCol: {
  167. xs: { span: 24 },
  168. sm: { span: 16 },
  169. },
  170. uploadLoading:false,
  171. confirmLoading: false,
  172. headers:{},
  173. url: {
  174. fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
  175. userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
  176. userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
  177. syncUserByUserName:"/act/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
  178. queryTenantList: '/sys/tenant/queryList'
  179. },
  180. tenantsOptions: [],
  181. rolesOptions:[],
  182. nextDepartOptions:[],
  183. }
  184. },
  185. created () {
  186. const token = Vue.ls.get(ACCESS_TOKEN);
  187. this.headers = {"X-Access-Token":token}
  188. this.initRoleList()
  189. this.initTenantList()
  190. },
  191. computed:{
  192. uploadAction:function () {
  193. return this.url.fileUpload;
  194. }
  195. },
  196. methods: {
  197. add () {
  198. this.refresh();
  199. this.edit({activitiSync:'1',userIdentity:1});
  200. },
  201. edit (record) {
  202. let that = this;
  203. that.visible = true;
  204. //根据屏幕宽度自适应抽屉宽度
  205. this.resetScreenSize();
  206. that.userId = record.id;
  207. that.model = Object.assign({},{selectedroles:'',selecteddeparts:''}, record);
  208. //身份为上级显示负责部门,否则不显示
  209. if(this.model.userIdentity==2){
  210. this.departIdShow=true;
  211. }else{
  212. this.departIdShow=false;
  213. }
  214. if(record.hasOwnProperty("id")){
  215. that.getUserRoles(record.id);
  216. that.getUserDeparts(record.id);
  217. }
  218. console.log('that.model=',that.model)
  219. },
  220. isDisabledAuth(code){
  221. return disabledAuthFilter(code);
  222. },
  223. //窗口最大化切换
  224. toggleScreen(){
  225. if(this.modaltoggleFlag){
  226. this.modalWidth = window.innerWidth;
  227. }else{
  228. this.modalWidth = 800;
  229. }
  230. this.modaltoggleFlag = !this.modaltoggleFlag;
  231. },
  232. // 根据屏幕变化,设置抽屉尺寸
  233. resetScreenSize(){
  234. let screenWidth = document.body.clientWidth;
  235. if(screenWidth < 500){
  236. this.drawerWidth = screenWidth;
  237. }else{
  238. this.drawerWidth = 700;
  239. }
  240. },
  241. //初始化租户字典
  242. initTenantList(){
  243. getAction(this.url.queryTenantList).then(res=>{
  244. if(res.success){
  245. this.tenantsOptions = res.result.map((item,index,arr)=>{
  246. let c = {label:item.name, value: item.id+""}
  247. return c;
  248. })
  249. console.log('this.tenantsOptions: ',this.tenantsOptions)
  250. }
  251. })
  252. },
  253. //初始化角色字典
  254. initRoleList(){
  255. queryall().then((res)=>{
  256. if(res.success){
  257. this.rolesOptions = res.result.map((item,index,arr)=>{
  258. let c = {label:item.roleName, value:item.id}
  259. return c;
  260. })
  261. console.log('this.rolesOptions: ',this.rolesOptions)
  262. }
  263. });
  264. },
  265. getUserRoles(userid){
  266. queryUserRole({userid:userid}).then((res)=>{
  267. if(res.success){
  268. this.model.selectedroles = res.result.join(",");
  269. console.log('that.model.selectedroles=',this.model.selectedroles)
  270. }
  271. });
  272. },
  273. getUserDeparts(userid){
  274. let that = this;
  275. getAction(that.url.userWithDepart,{userId:userid}).then((res)=>{
  276. if(res.success){
  277. let departOptions=[];
  278. let selectDepartKeys=[]
  279. for (let i = 0; i < res.result.length; i++) {
  280. selectDepartKeys.push(res.result[i].key);
  281. //新增负责部门选择下拉框
  282. departOptions.push({
  283. value: res.result[i].key,
  284. label: res.result[i].title
  285. })
  286. }
  287. that.model.selecteddeparts = selectDepartKeys.join(",")
  288. that.nextDepartOptions=departOptions;
  289. console.log('that.nextDepartOptions=',that.nextDepartOptions)
  290. }
  291. })
  292. },
  293. backDepartInfo(info) {
  294. this.model.departIds = this.model.selecteddeparts;
  295. this.nextDepartOptions = info.map((item,index,arr)=>{
  296. let c = {label:item.text, value: item.value+""}
  297. return c;
  298. })
  299. },
  300. refresh () {
  301. this.userId=""
  302. this.nextDepartOptions=[];
  303. this.departIdShow=false;
  304. },
  305. close () {
  306. this.$emit('close');
  307. this.visible = false;
  308. this.disableSubmit = false;
  309. this.nextDepartOptions=[];
  310. this.departIdShow=false;
  311. this.$refs.form.resetFields();
  312. },
  313. moment,
  314. handleSubmit () {
  315. const that = this;
  316. // 触发表单验证
  317. this.$refs.form.validate(valid => {
  318. if (valid) {
  319. that.confirmLoading = true;
  320. //如果是上级择传入departIds,否则为空
  321. if(this.model.userIdentity!==2){
  322. this.model.departIds="";
  323. }
  324. let obj;
  325. if(!this.model.id){
  326. this.model.id = this.userId;
  327. obj=addUser(this.model);
  328. }else{
  329. obj=editUser(this.model);
  330. }
  331. obj.then((res)=>{
  332. if(res.success){
  333. that.$message.success(res.message);
  334. that.$emit('ok');
  335. }else{
  336. that.$message.warning(res.message);
  337. }
  338. }).finally(() => {
  339. that.confirmLoading = false;
  340. that.close();
  341. })
  342. }else{
  343. return false;
  344. }
  345. })
  346. },
  347. handleCancel () {
  348. this.close()
  349. },
  350. validateToNextPassword (rule, value, callback) {
  351. const confirmpassword=this.model.confirmpassword;
  352. if (value && confirmpassword && value !== confirmpassword) {
  353. callback('两次输入的密码不一样!');
  354. }
  355. if (value && this.confirmDirty) {
  356. this.$refs.form.validateField(['confirmpassword']);
  357. }
  358. callback();
  359. },
  360. compareToFirstPassword (rule, value, callback) {
  361. if (value && value !== this.model.password) {
  362. callback('两次输入的密码不一样!');
  363. } else {
  364. callback()
  365. }
  366. },
  367. validatePhone(rule, value, callback){
  368. if(!value){
  369. callback()
  370. }else{
  371. if(new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)){
  372. var params = {
  373. tableName: 'sys_user',
  374. fieldName: 'phone',
  375. fieldVal: value,
  376. dataId: this.userId
  377. };
  378. duplicateCheck(params).then((res) => {
  379. if (res.success) {
  380. callback()
  381. } else {
  382. callback("手机号已存在!")
  383. }
  384. })
  385. }else{
  386. callback("请输入正确格式的手机号码!");
  387. }
  388. }
  389. },
  390. validateEmail(rule, value, callback){
  391. if(!value){
  392. callback()
  393. }else{
  394. if(new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)){
  395. var params = {
  396. tableName: 'sys_user',
  397. fieldName: 'email',
  398. fieldVal: value,
  399. dataId: this.userId
  400. };
  401. duplicateCheck(params).then((res) => {
  402. console.log(res)
  403. if (res.success) {
  404. callback()
  405. } else {
  406. callback("邮箱已存在!")
  407. }
  408. })
  409. }else{
  410. callback("请输入正确格式的邮箱!")
  411. }
  412. }
  413. },
  414. validateUsername(rule, value, callback){
  415. var params = {
  416. tableName: 'sys_user',
  417. fieldName: 'username',
  418. fieldVal: value,
  419. dataId: this.userId
  420. };
  421. duplicateCheck(params).then((res) => {
  422. if (res.success) {
  423. callback()
  424. } else {
  425. callback("用户名已存在!")
  426. }
  427. })
  428. },
  429. validateWorkNo(rule, value, callback){
  430. var params = {
  431. tableName: 'sys_user',
  432. fieldName: 'work_no',
  433. fieldVal: value,
  434. dataId: this.userId
  435. };
  436. duplicateCheck(params).then((res) => {
  437. if (res.success) {
  438. callback()
  439. } else {
  440. callback("工号已存在!")
  441. }
  442. })
  443. },
  444. handleConfirmBlur(e) {
  445. const value = e.target.value;
  446. this.confirmDirty = this.confirmDirty || !!value
  447. },
  448. beforeUpload: function(file){
  449. var fileType = file.type;
  450. if(fileType.indexOf('image')<0){
  451. this.$message.warning('请上传图片');
  452. return false;
  453. }
  454. //TODO 验证文件大小
  455. },
  456. identityChange(e){
  457. if(e.target.value===1){
  458. this.departIdShow=false;
  459. }else{
  460. this.departIdShow=true;
  461. }
  462. }
  463. }
  464. }
  465. </script>
  466. <style scoped>
  467. .avatar-uploader > .ant-upload {
  468. width:104px;
  469. height:104px;
  470. }
  471. .ant-upload-select-picture-card i {
  472. font-size: 49px;
  473. color: #999;
  474. }
  475. .ant-upload-select-picture-card .ant-upload-text {
  476. margin-top: 8px;
  477. color: #666;
  478. }
  479. .ant-table-tbody .ant-table-row td{
  480. padding-top:10px;
  481. padding-bottom:10px;
  482. }
  483. .drawer-bootom-button {
  484. position: absolute;
  485. bottom: 0;
  486. width: 100%;
  487. border-top: 1px solid #e8e8e8;
  488. padding: 10px 16px;
  489. text-align: right;
  490. left: 0;
  491. background: #fff;
  492. border-radius: 0 0 2px 2px;
  493. }
  494. /*【JTC-502】 添加用户两个滚动条*/
  495. /deep/ .ant-drawer-body {
  496. padding-bottom: 53px;
  497. }
  498. </style>