96009bc9
 hexiaodong
hxd
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<template>
<transition name="el-zoom-in-center">
<div class="NCC-preview-main user-form">
<div class="NCC-common-page-header">
<el-page-header @back="goBack"
:content="!dataForm.id ?$t(`user.addUser`) : $t(`user.editUser`)" />
<div class="options">
<el-button type="primary" :loading="btnLoading" @click="handleConfirm()">
{{$t('common.confirmButton')}}</el-button>
<el-button @click="goBack">{{$t('common.cancelButton')}} </el-button>
</div>
</div>
<div class="main" v-loading="formLoading" :element-loading-text="$t('common.loadingText')">
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px">
<div class="NCC-common-title mb-20">
<h2 class="bold">基础信息</h2>
</div>
<el-row :gutter="20" class="custom-row">
<el-col :sm="12" :xs="24">
<el-form-item label="账户" prop="account">
<el-input v-model="dataForm.account" placeholder="账户名称" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="姓名" prop="realName">
<el-input v-model="dataForm.realName" placeholder="真实姓名" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="性别" prop="gender">
<el-select v-model="dataForm.gender" placeholder="选择性别">
<el-option v-for="item in genderTreeData" :key="item.enCode"
:label="item.fullName" :value="item.enCode" />
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="dataForm.email" placeholder="电子邮箱" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
|
bfb7c0b9
 “wangming”
更新Form.vue和用户相关表单...
|
43
44
45
|
<el-form-item label="门店" prop="mdid">
<NCC-TreeSelect v-model="dataForm.mdid" :options="storeTreeData"
placeholder="选择门店" clearable />
|
|
96009bc9
hexiaodong
hxd
|
46
47
48
|
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
|
|
f075068f
“wangming”
对考勤这块功能进行开发
|
49
50
51
52
53
54
55
56
57
58
59
60
|
<el-form-item label="考勤分组" prop="attendanceGroupId">
<el-select v-model="dataForm.attendanceGroupId" placeholder="选择考勤分组" clearable filterable>
<el-option
v-for="item in attendanceGroupOptions"
:key="item.id"
:label="item.fullName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
|
|
96009bc9
hexiaodong
hxd
|
61
62
63
64
65
|
<el-form-item label="直属主管" prop="managerId">
<user-select v-model="dataForm.managerId" placeholder="选择直属主管" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
66
67
68
|
<el-form-item label="组织" prop="organizeId">
<NCC-TreeSelect v-model="dataForm.organizeId" :options="departmentTreeData"
placeholder="选择组织" clearable />
|
|
96009bc9
hexiaodong
hxd
|
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="角色" prop="roleId">
<el-select v-model="roleId" multiple placeholder="请选择" @change="roleIdChange"
filterable>
<el-option-group v-for="group in roleTreeData" :key="group.id"
:label="group.fullName+(group.num?'【'+group.num+'】':'')">
<el-option v-for="item in group.children" :key="item.id" :label="item.fullName"
:value="item.id">
</el-option>
</el-option-group>
</el-select>
</el-form-item>
</el-col>
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<el-col :sm="12" :xs="24">
<el-form-item label="费用分摊" prop="fyft">
<el-select v-model="dataForm.fyft" placeholder="选择费用分摊">
<el-option label="是" value="是" />
<el-option label="否" value="否" />
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="职位" prop="gw">
<el-select v-model="dataForm.gw" placeholder="选择职位">
<el-option label="董事长" value="董事长" />
<el-option label="总裁" value="总裁" />
<el-option label="总经理" value="总经理" />
<el-option label="经理" value="经理" />
<el-option label="主管" value="主管" />
<el-option label="店长" value="店长" />
|
49077d84
 李宇
最新
|
101
|
<el-option label="店助主任" value="店助主任" />
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
102
103
104
105
106
107
|
<el-option label="店助" value="店助" />
<el-option label="健康师" value="健康师" />
<el-option label="主任" value="主任" />
<el-option label="老师" value="老师" />
<el-option label="组长" value="组长" />
<el-option label="科技老师" value="科技老师" />
|
|
12d64309
李宇
最新
|
108
|
<!-- <el-option label="科技部总经理" value="科技部总经理" /> -->
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
109
110
111
112
113
114
115
116
117
118
119
|
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="岗位分类" prop="gwfl">
<el-select v-model="dataForm.gwfl" placeholder="选择岗位分类">
<el-option label="A" value="A" />
<el-option label="B" value="B" />
</el-select>
</el-form-item>
</el-col>
|
|
96009bc9
hexiaodong
hxd
|
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
|
<el-col :span="12">
<el-form-item label="排序" prop="sortCode">
<el-input-number :min="0" :max="9999" v-model="dataForm.sortCode"
controls-position="right" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态" prop="enabledMark">
<el-switch v-model="dataForm.enabledMark" :active-value="1" :inactive-value="0" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="description">
<el-input v-model="dataForm.description" type="textarea" :rows="6" />
</el-form-item>
</el-col>
</el-row>
<div class="NCC-common-title mb-20">
<h2 class="bold">扩展信息</h2>
</div>
<el-row :gutter="20" class="custom-row">
<el-col :span="24">
<el-form-item label="头像" prop="headIcon">
<el-upload class="avatar-uploader" :action="define.comUploadUrl+'/userAvatar'"
:show-file-list="false" :on-success="handleAvatarSuccess" accept="image/*">
<img v-if="dataForm.headIcon" :src="define.comUrl+dataForm.headIcon"
class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="民族" prop="nation">
<el-select v-model="dataForm.nation" placeholder="选择民族" filterable>
<el-option v-for="item in nationTreeData" :key="item.id" :label="item.fullName"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="籍贯" prop="nativePlace">
<el-input v-model="dataForm.nativePlace" placeholder="籍贯" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="入职时间" prop="entryDate">
<el-date-picker v-model="dataForm.entryDate" type="date" placeholder="选择入职时间"
value-format="timestamp">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="证件类型" prop="certificatesType">
<el-select v-model="dataForm.certificatesType" placeholder="选择证件类型">
<el-option v-for="item in certificatesTypeTreeData" :key="item.id"
:label="item.fullName" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="证件号码" prop="certificatesNumber">
<el-input v-model="dataForm.certificatesNumber" placeholder="证件号码" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="文化程度" prop="education">
<el-select v-model="dataForm.education" placeholder="选择文化程度">
<el-option v-for="item in educationTreeData" :key="item.id" :label="item.fullName"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="出生年月" prop="birthday">
<el-date-picker v-model="dataForm.birthday" type="date" placeholder="选择出生年月"
value-format="timestamp">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="办公电话" prop="telePhone">
<el-input v-model="dataForm.telePhone" placeholder="办公电话" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="办公座机" prop="landline">
<el-input v-model="dataForm.landline" placeholder="办公座机" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="手机号码" prop="mobilePhone">
<el-input v-model="dataForm.mobilePhone" placeholder="手机号码" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="紧急联系" prop="urgentContacts">
<el-input v-model="dataForm.urgentContacts" placeholder="紧急联系人" />
</el-form-item>
</el-col>
<el-col :sm="12" :xs="24">
<el-form-item label="紧急电话" prop="urgentTelePhone">
<el-input v-model="dataForm.urgentTelePhone" placeholder="紧急联系人电话" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="通讯地址" prop="postalAddress">
<el-input v-model="dataForm.postalAddress" type="textarea" :rows="6" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</transition>
</template>
<script>
import { getDepartmentSelector } from '@/api/permission/department'
|
|
96009bc9
hexiaodong
hxd
|
238
239
|
import { getRoleSelector } from '@/api/permission/role'
import { createUser, updateUser, getUserInfo } from '@/api/permission/user'
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
240
|
import { getStoreSelector } from '@/api/extend/store'
|
|
f075068f
“wangming”
对考勤这块功能进行开发
|
241
|
import { getAttendanceGroupSelector } from '@/api/extend/attendanceSetting'
|
|
96009bc9
hexiaodong
hxd
|
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
|
export default {
data() {
return {
visible: false,
btnLoading: false,
dataForm: {
id: '',
sortCode: 0,
enabledMark: 1,
account: '',
realName: '',
organizeId: '',
managerId: '',
positionId: '',
roleId: '',
description: '',
headIcon: '',
gender: null,
nationId: '',
nativePlace: '',
entryDate: null,
certificatesType: '',
certificatesNumber: '',
education: '',
birthday: null,
telePhone: '',
landline: '',
mobilePhone: '',
email: '',
urgentContacts: '',
urgentTelePhone: '',
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
274
275
|
postalAddress: '',
mdid: '',
|
|
f075068f
“wangming”
对考勤这块功能进行开发
|
276
|
attendanceGroupId: '',
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
277
278
279
|
fyft: '否',
gwfl: '',
gw: ''
|
|
96009bc9
hexiaodong
hxd
|
280
281
282
|
},
roleId: [],
departmentTreeData: [],
|
|
96009bc9
hexiaodong
hxd
|
283
284
285
286
287
|
roleTreeData: [],
genderTreeData: [],
nationTreeData: [],
educationTreeData: [],
certificatesTypeTreeData: [],
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
288
|
storeTreeData: [],
|
|
f075068f
“wangming”
对考勤这块功能进行开发
|
289
|
attendanceGroupOptions: [],
|
|
96009bc9
hexiaodong
hxd
|
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
|
formLoading: false,
genderProps: {
value: 'enCode',
label: 'fullName'
},
dataRule: {
account: [
{ required: true, message: '请输入账户名称', trigger: 'blur' },
{ validator: this.formValidate('userAccount', '账户名称只能是数字英文'), trigger: 'blur' },
{ max: 50, message: '账户名称最多为50个字符！', trigger: 'blur' }
],
realName: [
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
{ validator: this.formValidate('fullName', '真实姓名不能含有特殊符号'), trigger: 'blur' },
{ max: 50, message: '真实姓名最多为50个字符！', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
organizeId: [
{ required: true, message: '请选择组织', trigger: 'change' }
]
}
}
},
methods: {
init(id, organizeId) {
this.visible = true
this.dataForm.id = id || ''
this.roleId = []
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
// 获取公司+部门
getDepartmentSelector().then(res => {
this.departmentTreeData = res.data.list
})
|
|
96009bc9
hexiaodong
hxd
|
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
|
// 获取角色
getRoleSelector().then(res => {
this.roleTreeData = res.data.list
})
// 获取民族
this.$store.dispatch('base/getDictionaryData', { sort: 'Nation' }).then(res => {
this.nationTreeData = res
})
// 获取学历
this.$store.dispatch('base/getDictionaryData', { sort: 'Education' }).then(res => {
this.educationTreeData = res
})
// 获取证件类型
this.$store.dispatch('base/getDictionaryData', { sort: 'certificateType' }).then(res => {
this.certificatesTypeTreeData = res
})
// 获取性别
this.$store.dispatch('base/getDictionaryData', { sort: 'sex' }).then(res => {
this.genderTreeData = res
})
|
|
bfb7c0b9
“wangming”
更新Form.vue和用户相关表单...
|
354
355
356
357
358
359
360
|
// 获取门店数据
getStoreSelector().then(res => {
this.storeTreeData = res.data.list
}).catch(() => {
this.storeTreeData = []
})
|
|
f075068f
“wangming”
对考勤这块功能进行开发
|
361
362
363
364
365
366
|
getAttendanceGroupSelector().then(res => {
this.attendanceGroupOptions = res.data.list || []
}).catch(() => {
this.attendanceGroupOptions = []
})
|
|
96009bc9
hexiaodong
hxd
|
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
|
if (this.dataForm.id) {
this.formLoading = true
getUserInfo(this.dataForm.id).then(res => {
this.dataForm = res.data
if (this.dataForm.roleId) this.roleId = this.dataForm.roleId.split(',')
this.formLoading = false
}).catch(() => this.formLoading = false)
} else {
this.dataForm.organizeId = organizeId
}
})
},
goBack() {
this.$emit('close')
},
roleIdChange() {
this.dataForm.roleId = this.roleId.toString()
},
handleAvatarSuccess(res) {
if (res.code === 200 && res.data && res.data.url) {
this.dataForm.headIcon = res.data.url
} else {
this.$message.error('头像上传失败');
}
},
handleConfirm() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.btnLoading = true
const formMethod = this.dataForm.id ? updateUser : createUser
formMethod(this.dataForm).then(res => {
this.$message({
message: res.msg,
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.btnLoading = false
this.$emit('close', true)
}
})
}).catch(() => {
this.btnLoading = false
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.user-form {
.main {
padding: 10px 30px 0;
}
>>> .el-select,
>>> .el-date-editor {
width: 100%;
}
>>> .avatar-uploader {
.el-upload {
border: 1px dashed #dcdfe6;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.el-upload:hover {
border-color: #409eff;
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 130px;
height: 130px;
line-height: 130px;
text-align: center;
}
.avatar {
width: 130px;
height: 130px;
display: block;
}
}
</style>
|
