inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 /* eslint-disable vue/no-template-shadow */
I 2 <template>
3   <a-modal
4     title="编辑用户"
5     :width="900"
6     :visible="visible"
7     :confirmLoading="confirmLoading"
8     @ok="handleSubmit"
9     @cancel="handleCancel"
10   >
11     <a-spin :spinning="confirmLoading">
12       <a-divider orientation="left">基本信息</a-divider>
13       <a-row :gutter="24">
14         <a-col :md="12" :sm="24">
15           <a-form :form="form">
16             <a-form-item
17               style="display: none;"
18             >
19               <a-input v-decorator="['id']" />
20             </a-form-item>
21             <a-form-item
22               label="账号"
23               :labelCol="labelCol"
24               :wrapperCol="wrapperCol"
25               has-feedback
26             >
27               <a-input placeholder="请输入账号" v-decorator="['account', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号!'}]}]" />
28             </a-form-item>
29           </a-form>
30         </a-col>
31         <a-col :md="12" :sm="24" >
32           <a-form :form="form">
33             <a-form-item
34               label="姓名"
35               :labelCol="labelCol"
36               :wrapperCol="wrapperCol"
37               has-feedback
38             >
39               <a-input placeholder="请输入姓名" v-decorator="['name', {rules: [{required: true, message: '请输入姓名!'}]}]" />
40             </a-form-item>
41           </a-form>
42         </a-col>
43       </a-row>
44       <a-row :gutter="24">
45         <a-col :md="12" :sm="24">
46           <a-form :form="form">
47             <a-form-item
48               label="昵称"
49               :labelCol="labelCol"
50               :wrapperCol="wrapperCol"
51               has-feedback
52             >
53               <a-input placeholder="请输入昵称" v-decorator="['nickName']" />
54             </a-form-item>
55           </a-form>
56         </a-col>
57         <a-col :md="12" :sm="24">
58           <a-form :form="form">
59             <a-form-item
60               label="生日"
61               :labelCol="labelCol"
62               :wrapperCol="wrapperCol"
63               has-feedback
64             >
65               <a-date-picker placeholder="请选择生日" @change="onChange" style="width: 100%" v-decorator="['birthday']" />
66             </a-form-item>
67           </a-form>
68         </a-col>
69       </a-row>
70       <a-row :gutter="24">
71         <a-col :md="12" :sm="24">
72           <a-form :form="form">
73             <a-form-item
74               label="性别"
75               :labelCol="labelCol"
76               :wrapperCol="wrapperCol"
77             >
78               <a-radio-group v-decorator="['sex',{rules: [{ required: true, message: '请选择性别!' }]}]" >
79                 <a-radio :value="1">男</a-radio>
80                 <a-radio :value="2">女</a-radio>
81               </a-radio-group>
82             </a-form-item>
83           </a-form>
84         </a-col>
85         <a-col :md="12" :sm="24">
86           <a-form :form="form">
87             <a-form-item
88               label="邮箱"
89               :labelCol="labelCol"
90               :wrapperCol="wrapperCol"
91               has-feedback
92             >
93               <a-input placeholder="请输入邮箱" v-decorator="['email']" />
94             </a-form-item>
95           </a-form>
96         </a-col>
97       </a-row>
98       <a-row :gutter="24">
99         <a-col :md="12" :sm="24">
100           <a-form :form="form">
101             <a-form-item
102               label="手机号"
103               :labelCol="labelCol"
104               :wrapperCol="wrapperCol"
105               has-feedback
106             >
107               <a-input placeholder="请输入手机号" v-decorator="['phone',{rules: [{ required: true, message: '请输入手机号!' }]}]" />
108             </a-form-item>
109           </a-form>
110         </a-col>
111         <a-col :md="12" :sm="24">
112           <a-form :form="form">
113             <a-form-item
114               label="电话"
115               :labelCol="labelCol"
116               :wrapperCol="wrapperCol"
117               has-feedback
118             >
119               <a-input placeholder="请输入电话" v-decorator="['tel']" />
120             </a-form-item>
121           </a-form>
122         </a-col>
123       </a-row>
124       <a-divider orientation="left">员工信息</a-divider>
125       <a-row :gutter="24">
126         <a-col :md="12" :sm="24">
127           <a-form :form="form">
128             <a-form-item
129               label="机构"
130               :labelCol="labelCol"
131               :wrapperCol="wrapperCol"
132               has-feedback
133             >
134               <a-tree-select
135                 v-decorator="['sysEmpParam.orgId', {rules: [{ required: true, message: '请选择机构!' }]}]"
136                 style="width: 100%"
137                 :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
138                 :treeData="orgTree"
139                 placeholder="请选择机构"
140                 treeDefaultExpandAll
141                 @change="e => initrOrgName(e)"
142               >
143                 <span slot="title" slot-scope="{ id }">{{ id }}</span>
144               </a-tree-select>
145             </a-form-item>
146             <a-form :form="form">
147               <a-form-item v-show="false">
148                 <a-input v-decorator="['sysEmpParam.orgName']" />
149               </a-form-item>
150             </a-form>
151           </a-form>
152         </a-col>
153         <a-col :md="12" :sm="24">
154           <a-form :form="form">
155             <a-form-item
156               label="工号"
157               :labelCol="labelCol"
158               :wrapperCol="wrapperCol"
159               has-feedback
160             >
161               <a-input placeholder="请输入工号" v-decorator="['sysEmpParam.jobNum']" />
162             </a-form-item>
163           </a-form>
164         </a-col>
165       </a-row>
166       <a-row :gutter="24">
167         <a-col :md="24" :sm="24">
168           <a-form :form="form">
169             <a-form-item
170               label="职位信息"
171               :labelCol="labelCol_JG"
172               :wrapperCol="wrapperCol_JG"
173               has-feedback
174             >
175               <a-select
176                 mode="multiple"
177                 style="width: 100%"
178                 placeholder="请选择职位信息"
179                 v-decorator="['sysEmpParam.posIdList', {rules: [{ required: true, message: '请选择职位信息!' }]}]"
180               >
181                 <a-select-option v-for="(item,index) in posList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
182               </a-select>
183             </a-form-item>
184           </a-form>
185         </a-col>
186       </a-row>
187       <a-row :gutter="24">
188         <a-col :md="24" :sm="24">
189           <a-form-item
190             label="附属信息:"
191             :labelCol="labelCol_JG"
192             :wrapperCol="wrapperCol_JG"
193           >
194             <a-table
195               size="middle"
196               :columns="columns"
197               :dataSource="data"
198               :pagination="false"
199               :loading="memberLoading"
200             >
201               <template v-for="(col,index) in ['extOrgId','extPosId']" :slot="col" slot-scope="text, record">
202                 <template v-if="index == 0" >
203                   <template v-if="record.extOrgId !=''">
204                     <a-tree-select
205                       :key="col"
206                       :treeData="orgTree"
207                       style="width: 100%"
208                       placeholder="请选择附属机构"
209                       :defaultValue="record.extOrgId"
210                       treeDefaultExpandAll
211                       @change="e => handleChange(e,record.key,col)"
212                     >
213                       <span slot="title" slot-scope="{ id }">{{ id }}</span>
214                     </a-tree-select>
215                   </template>
216                   <template v-else>
217                     <a-tree-select
218                       :key="col"
219                       :treeData="orgTree"
220                       style="width: 100%"
221                       placeholder="请选择附属机构"
222                       treeDefaultExpandAll
223                       @change="e => handleChange(e,record.key,col)"
224                     >
225                       <span slot="title" slot-scope="{ id }">{{ id }}</span>
226                     </a-tree-select>
227                   </template>
228                 </template>
229                 <template v-if="index == 1">
230                   <template v-if="record.extOrgId !=''">
231                     <a-select
232                       :key="col"
233                       style="width: 100%"
234                       placeholder="请选择附属职位"
235                       :default-value="record.extPosId"
236                       @change="e => handleChange(e,record.key,col)"
237                       has-feedback
238                     >
239                       // eslint-disable-next-line vue/no-template-shadow
240                       <a-select-option v-for="(item,indexs) in posList" :key="indexs" :value="item.id">{{ item.name }}</a-select-option>
241                     </a-select>
242                   </template>
243                   <template v-else>
244                     <a-select
245                       :key="col"
246                       style="width: 100%"
247                       placeholder="请选择附属职位"
248                       @change="e => handleChange(e,record.key,col)"
249                       has-feedback
250                     >
251                       // eslint-disable-next-line vue/no-template-shadow
252                       <a-select-option v-for="(item,indexs) in posList" :key="indexs" :value="item.id">{{ item.name }}</a-select-option>
253                     </a-select>
254                   </template>
255                 </template>
256               </template>
257               <template slot="operation" slot-scope="text, record">
258                 <a @click="remove(record.key)">删除</a>
259               </template>
260             </a-table>
261             <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">增行</a-button>
262           </a-form-item>
263         </a-col>
264       </a-row>
265     </a-spin>
266   </a-modal>
267 </template>
268 <script>
269   import { sysUserEdit, sysUserDetail } from '@/api/modular/system/userManage'
270   import { getOrgTree, getOrgList } from '@/api/modular/system/orgManage'
271   import { sysPosList } from '@/api/modular/system/posManage'
272   import moment from 'moment'
273   export default {
274     data () {
275       return {
276         labelCol: {
277           xs: { span: 24 },
278           sm: { span: 6 }
279         },
280         wrapperCol: {
281           xs: { span: 24 },
282           sm: { span: 16 }
283         },
284         // 机构行样式
285         labelCol_JG: {
286           xs: { span: 24 },
287           sm: { span: 3 }
288         },
289         wrapperCol_JG: {
290           xs: { span: 24 },
291           sm: { span: 20 }
292         },
293         count: 1,
294         columns: [
295           {
296             title: '附属机构',
297             dataIndex: 'extOrgId',
298             width: '45%',
299             scopedSlots: { customRender: 'extOrgId' }
300           },
301           {
302             title: '附属岗位',
303             dataIndex: 'extPosId',
304             width: '45%',
305             scopedSlots: { customRender: 'extPosId' }
306           },
307           {
308             title: '操作',
309             key: 'action',
310             scopedSlots: { customRender: 'operation' }
311           }
312         ],
313         visible: false,
314         confirmLoading: false,
315         orgTree: [],
316         orgList: [],
317         posList: [],
318         sysEmpParamExtList: [],
319         memberLoading: false,
320         form: this.$form.createForm(this),
321         data: [],
322         birthdayString: ''
323       }
324     },
325     methods: {
326       // 初始化方法
327       edit (record) {
328         this.confirmLoading = true
329         this.visible = true
330         this.getOrgData()
331         this.getPosList()
332         // 基本信息加人表单
333         setTimeout(() => {
334           this.form.setFieldsValue(
335             {
336               id: record.id,
337               account: record.account,
338               name: record.name,
339               nickName: record.nickName,
340               sex: record.sex,
341               email: record.email,
342               phone: record.phone,
343               tel: record.tel
344             }
345           )
346         }, 100)
347         // 时间单独处理
348         if (record.birthday != null) {
349           this.form.getFieldDecorator('birthday', { initialValue: moment(record.birthday, 'YYYY-MM-DD') })
350         }
351         this.birthdayString = moment(record.birthday).format('YYYY-MM-DD')
352         // 职位信息加入表单
353         this.getUserDetaile(record.id)
354       },
355       /**
356        * 通过用户ID查询出用户详情,将职位信息填充
357        * @param id
358        */
359       getUserDetaile (id) {
360         sysUserDetail({ 'id': id }).then((res) => {
361           const SysEmpInfo = res.data.sysEmpInfo
362           const Positions = []
363           SysEmpInfo.positions.forEach(item => {
364             Positions.push(item.posId)
365           })
366           this.form.getFieldDecorator('sysEmpParam.orgName', { initialValue: SysEmpInfo.orgName })
367           this.form.getFieldDecorator('sysEmpParam.posIdList', { initialValue: Positions })
368           this.form.getFieldDecorator('sysEmpParam.jobNum', { initialValue: SysEmpInfo.jobNum })
369           this.form.getFieldDecorator('sysEmpParam.orgId', { initialValue: SysEmpInfo.orgId })
370           SysEmpInfo.extOrgPos.forEach(item => {
371             const length = this.data.length
372             this.data.push({
373               key: length === 0 ? '1' : (parseInt(this.data[length - 1].key) + 1).toString(),
374               extOrgId: item.orgId,
375               extPosId: item.posId
376             })
377           })
378           this.confirmLoading = false
379         })
380       },
381       /**
382        * 增行
383        */
384       newMember () {
385         const length = this.data.length
386         this.data.push({
387           key: length === 0 ? '1' : (parseInt(this.data[length - 1].key) + 1).toString(),
388           extOrgId: '',
389           extPosId: ''
390         })
391       },
392       /**
393        * 删除
394        */
395       remove (key) {
396         const newData = this.data.filter(item => item.key !== key)
397         this.data = newData
398       },
399       /**
400        * 选择子表单单项触发
401        */
402       handleChange (value, key, column) {
403         const newData = [...this.data]
404         const target = newData.find(item => key === item.key)
405         if (target) {
406           target[column] = value
407           this.data = newData
408         }
409       },
410       /**
411        * 获取机构数据,并加载于表单中
412        */
413       getOrgData () {
414         getOrgTree().then((res) => {
415           this.orgTree = res.data
416         })
417         getOrgList().then((res) => {
418           this.orgList = res.data
419         })
420       },
421       /**
422        * 获取职位list列表
423        */
424       getPosList () {
425         sysPosList().then((res) => {
426           this.posList = res.data
427         })
428       },
429       /**
430        * 选择树机构,初始化机构名称于表单中
431        */
432       initrOrgName (value) {
433         this.form.getFieldDecorator('sysEmpParam.orgName', { initialValue: this.orgList.find(item => value === item.id).name })
434       },
435       /**
436        * 子表单json重构
437        */
438       JsonReconsitution () {
439         this.sysEmpParamExtList = []
440         const newData = [...this.data]
441         newData.forEach(item => {
442           // eslint-disable-next-line eqeqeq
443           if (item.extOrgId != '' & item.extPosId != '') {
444             this.sysEmpParamExtList.push({ orgId: item.extOrgId, posId: item.extPosId })
445           }
446         })
447       },
448       /**
449        * 日期需单独转换
450        */
451       onChange (date, dateString) {
452         this.birthdayString = moment(date).format('YYYY-MM-DD')
453       },
454       handleSubmit () {
455         const { form: { validateFields } } = this
456         this.confirmLoading = true
457         validateFields((errors, values) => {
458           if (!errors) {
459             this.JsonReconsitution()
460             values.sysEmpParam['extIds'] = this.sysEmpParamExtList
461             // eslint-disable-next-line eqeqeq
462             if (this.birthdayString == 'Invalid date') {
463               this.birthdayString = null
464             }
465             values.birthday = this.birthdayString
466             sysUserEdit(values).then((res) => {
467               if (res.success) {
468                 this.$message.success('编辑成功')
469                 this.confirmLoading = false
470                 this.$emit('ok', values)
471                 this.handleCancel()
472               } else {
473                 this.$message.error('编辑失败:' + res.message)
474               }
475             }).finally((res) => {
476               this.confirmLoading = false
477             })
478           } else {
479             this.confirmLoading = false
480           }
481         })
482       },
483       handleCancel () {
484         this.form.resetFields()
485         this.visible = false
486         // 清理子表单中数据
487         this.data = []
488         // 清理时间
489         this.birthdayString = ''
490         this.form.getFieldDecorator('birthday', { initialValue: null })
491       }
492     }
493   }
494 </script>