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