attendance-rest-group-dialog.vue
5.11 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template>
<el-dialog :title="dialogTitle" :visible.sync="visible" width="640px" append-to-body :close-on-click-modal="false"
@close="handleClose">
<el-form ref="formRef" :model="form" :rules="rules" label-width="150px" size="small">
<el-form-item label="分组名称" prop="groupName">
<el-input v-model.trim="form.groupName" maxlength="100" show-word-limit placeholder="例如：职能应休组" />
</el-form-item>
<el-form-item label="月应休天数" prop="monthlyRestDays">
<el-input-number v-model="form.monthlyRestDays" :min="0" :precision="0" controls-position="right"
style="width: 100%" />
</el-form-item>
<el-form-item label="可拆分半天休假天数" prop="halfDaySplitRestDays">
<el-input-number v-model="form.halfDaySplitRestDays" :min="0" :precision="0" :step="1" controls-position="right"
style="width: 100%" />
<div class="form-hint">整数：本月允许拆成半天休的最大天数；不能超过月应休天数。</div>
</el-form-item>
<el-form-item label="应休解锁规则">
<el-switch :value="form.restUnlockCycle > 0" style="margin-right: 8px" @change="handleRestUnlockToggle" />
<template v-if="form.restUnlockCycle > 0">
<span class="inline-hint">每上满</span>
<el-input-number v-model="form.restUnlockCycle" :min="1" :max="365" :precision="0" controls-position="right"
style="width: 100px; margin: 0 6px" />
<span class="inline-hint">天，解锁 1 天应休</span>
</template>
<span v-else class="inline-hint muted">不启用</span>
</el-form-item>
<el-form-item label="是否启用" prop="isEnabled">
<el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model.trim="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="无" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
</span>
</el-dialog>
</template>
<script>
import { saveAttendanceRestGroup } from '@/api/extend/attendanceRestGroup'
function defaultForm() {
return {
id: '',
groupName: '',
monthlyRestDays: 4,
halfDaySplitRestDays: 0,
restUnlockCycle: 0,
isEnabled: 1,
remark: ''
}
}
export default {
name: 'AttendanceRestGroupDialog',
data() {
const halfDaySplitRestDaysValidator = (rule, value, callback) => {
const n = Number(value || 0)
if (n < 0) {
callback(new Error('不能小于0'))
return
}
if (n !== Math.floor(n)) {
callback(new Error('只能填写整数'))
return
}
if (n > Number(this.form.monthlyRestDays || 0)) {
callback(new Error('不能大于月应休天数'))
return
}
callback()
}
return {
visible: false,
submitLoading: false,
mode: 'create',
dialogTitle: '应休分组',
form: defaultForm(),
rules: {
groupName: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
monthlyRestDays: [{ required: true, message: '请输入月应休天数', trigger: 'blur' }],
halfDaySplitRestDays: [{ validator: halfDaySplitRestDaysValidator, trigger: 'blur' }]
}
}
},
methods: {
open(row) {
this.visible = true
this.mode = row && row.id ? 'edit' : 'create'
this.dialogTitle = this.mode === 'edit' ? '编辑应休分组' : '新增应休分组'
this.form = {
...defaultForm(),
...(row && row.id ? { ...row } : {})
}
this.$nextTick(() => {
this.$refs.formRef && this.$refs.formRef.clearValidate()
})
},
handleRestUnlockToggle(enabled) {
this.form.restUnlockCycle = enabled ? 7 : 0
},
handleClose() {
this.form = defaultForm()
},
handleSubmit() {
this.$refs.formRef.validate(async valid => {
if (!valid) return
this.submitLoading = true
try {
const payload = {
id: this.form.id || undefined,
groupName: this.form.groupName,
monthlyRestDays: Number(this.form.monthlyRestDays || 0),
halfDaySplitRestDays: Number(this.form.halfDaySplitRestDays || 0),
restUnlockCycle: Math.max(0, Number(this.form.restUnlockCycle || 0)),
isEnabled: this.form.isEnabled != null ? Number(this.form.isEnabled) : 1,
remark: this.form.remark || null
}
await saveAttendanceRestGroup(payload)
this.$message.success('保存成功')
this.visible = false
this.$emit('saved')
} finally {
this.submitLoading = false
}
})
}
}
}
</script>
<style lang="scss" scoped>
.form-hint {
margin-top: 6px;
color: #909399;
font-size: 12px;
line-height: 1.6;
}
.inline-hint {
color: #606266;
font-size: 13px;
}
.inline-hint.muted {
color: #909399;
}
</style>