Form.vue
4.58 KB
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<template>
<el-dialog :title="!dataForm.id ? $t(`position.newPost`) : $t(`position.editPost`)"
:close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="visible" lock-scroll
class="NCC-dialog NCC-dialog_center" width="600px">
<el-form ref="dataForm" v-loading="formLoading" :model="dataForm" :rules="dataRule"
label-width="90px">
<el-form-item label="所属组织" prop="organizeId">
<NCC-TreeSelect v-model="dataForm.organizeId" :options="treeData" placeholder="选择所属组织" />
</el-form-item>
<el-form-item label="岗位名称" prop="fullName">
<el-input v-model="dataForm.fullName" placeholder="输入名称" />
</el-form-item>
<el-form-item label="岗位编码" prop="enCode">
<el-input v-model="dataForm.enCode" placeholder="输入编码" />
</el-form-item>
<el-form-item label="岗位类型" prop="type">
<el-select v-model="dataForm.type" placeholder="请选择类型">
<el-option v-for="item in typeOptions" :key="item.enCode" :label="item.fullName"
:value="item.enCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="排序" prop="sortCode">
<el-input-number :min="0" :max="9999" v-model="dataForm.sortCode"
controls-position="right" />
</el-form-item>
<el-form-item label="岗位说明" prop="description">
<el-input v-model="dataForm.description" type="textarea" :rows="6" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
{{$t('common.confirmButton')}}</el-button>
</span>
</el-dialog>
</template>
<script>
import {
getDepartmentSelector
} from '@/api/permission/department'
import {
createPosition,
updatePosition,
getPositionInfo
} from '@/api/permission/position'
export default {
data() {
return {
visible: false,
formLoading: false,
btnLoading: false,
typeOptions: [],
dataForm: {
id: '',
organizeId: '',
fullName: '',
type: '',
enCode: '',
enabledMark: 1,
sortCode: 0,
description: ''
},
treeData: [],
dataRule: {
organizeId: [
{ required: true, message: '所属组织不能为空', trigger: 'input' }
],
fullName: [
{ required: true, message: '请输入岗位名称', trigger: 'blur' },
{ validator: this.formValidate('fullName', '岗位名称不能含有特殊符号'), trigger: 'blur' },
{ max: 50, message: '岗位名称最多为50个字符！', trigger: 'blur' }
],
enCode: [
{ required: true, message: '请输入岗位编码', trigger: 'blur' },
{ validator: this.formValidate('userAccount', '岗位编码只能是数字、英文'), trigger: 'blur' },
{ max: 50, message: '岗位编码最多为50个字符！', trigger: 'blur' }
],
type: [
{ required: true, message: '岗位类型不能为空', trigger: 'blur' }
]
}
}
},
methods: {
init(id, organizeId) {
this.visible = true
this.dataForm.id = id || ''
this.formLoading = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
getDepartmentSelector().then(res => {
this.treeData = res.data.list
})
// 获取岗位类型
this.$store.dispatch('base/getDictionaryData', { sort: 'PositionType' }).then(res => {
this.typeOptions = res
})
if (this.dataForm.id) {
getPositionInfo(this.dataForm.id).then(res => {
this.dataForm = res.data
})
} else {
this.dataForm.organizeId = organizeId
}
this.formLoading = false
})
},
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.btnLoading = true
const formMethod = this.dataForm.id ? updatePosition : createPosition
formMethod(this.dataForm).then(res => {
this.$message({
message: res.msg,
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.btnLoading = false
this.$emit('refreshDataList')
}
})
}).catch(() => {
this.btnLoading = false
})
}
})
}
}
}
</script>