modifyTime.vue
3.31 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
<template>
<el-dialog v-model="show" draggable title="修改考试时间" :close-on-click-modal="false" width="650">
<el-form ref="examRef" :model="form" :rules="rules" label-width="200px" label-suffix="：">
<el-form-item label="考段名称" prop="name">
<el-input v-model="form.name" disabled placeholder="自动生成" style="width: 300px" />
</el-form-item>
<el-form-item label="申请日期" prop="applyTime">
<el-date-picker
v-model="form.applyTime"
disabled
style="width: 300px"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择申请日期"
/>
</el-form-item>
<el-form-item label="考试开始时间" prop="startTime">
<el-date-picker
v-model="form.startTime"
style="width: 300px"
clearable
type="datetime"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
placeholder="请选择考试开始时间"
/>
</el-form-item>
<el-form-item label="考试结束时间" prop="endTime">
<el-date-picker
v-model="form.endTime"
style="width: 300px"
clearable
type="datetime"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
placeholder="请选择考试结束时间"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer center">
<el-button type="primary" @click="submitForm()">确 定</el-button>
<el-button @click="show=false">取 消</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance } from 'vue'
import { updateExamTime } from '@/api/exam/info'
import { dayjs } from 'element-plus'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['submit'])
const data = reactive({
form: {
examId: null,
name: null,
applyTime: null,
startTime: null,
endTime: null
},
rules: {
startTime: [
{ required: true, message: '考试开始时间不能为空', trigger: 'blur' }
],
endTime: [
{ required: true, message: '考试结束时间不能为空', trigger: 'blur' }
]
},
show: false
})
const { form, rules, show } = toRefs(data)
// 提交
function submitForm() {
proxy.$refs['examRef'].validate(valid => {
if (valid) {
if (dayjs(form.value.startTime).valueOf() < dayjs(form.value.applyTime).valueOf()) {
proxy.$modal.msgError('考试开始时间应大于申请日期')
return
}
if (dayjs(form.value.endTime).valueOf() < dayjs(form.value.startTime).valueOf()) {
proxy.$modal.msgError('考试结束时间应大于考试开始时间')
return
}
proxy.$modal.confirm('确定修改考试时间？')
.then(() => updateExamTime(form.value))
.then(() => {
proxy.$modal.msgSuccess('修改成功')
show.value = false
emit('submit')
})
}
})
}
function open(row) {
const { examId, name, applyTime, startTime, endTime } = row
form.value = {
examId,
name,
applyTime,
startTime,
endTime
}
show.value = true
}
defineExpose({
open
})
</script>
<style lang="scss" scoped>
</style>