Skip to content

Commit 50efd60

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!108 重构VUE3【OA示例-请假查询】
Merge pull request !108 from ZanGe丶/dev
2 parents 7bfb109 + 66856ae commit 50efd60

File tree

4 files changed

+336
-224
lines changed

4 files changed

+336
-224
lines changed

‎src/views/bpm/oa/leave/create.vue

Lines changed: 97 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,107 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 对话框(添加 / 修改) -->
4-
<Form :schema="allSchemas.formSchema" :rules="rules" ref="formRef" />
5-
<!-- 按钮：保存 -->
6-
<XButton
7-
type="primary"
8-
:title="t('action.save')"
9-
:loading="actionLoading"
10-
@click="submitForm"
11-
/>
12-
</ContentWrap>
2+
<Dialog title="发起OA请假流程" v-model="modelVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="80px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="请假类型" prop="type">
11+
<el-select v-model="formData.type" placeholder="请选择请假类型" clearable>
12+
<el-option
13+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
14+
:key="dict.value"
15+
:label="dict.label"
16+
:value="dict.value"
17+
/>
18+
</el-select>
19+
</el-form-item>
20+
<el-form-item label="开始时间" prop="startTime">
21+
<el-date-picker
22+
clearable
23+
v-model="formData.startTime"
24+
type="datetime"
25+
value-format="x"
26+
placeholder="请选择开始时间"
27+
/>
28+
</el-form-item>
29+
<el-form-item label="结束时间" prop="endTime">
30+
<el-date-picker
31+
clearable
32+
v-model="formData.endTime"
33+
type="datetime"
34+
value-format="x"
35+
placeholder="请选择结束时间"
36+
/>
37+
</el-form-item>
38+
<el-form-item label="原因" prop="reason">
39+
<el-input v-model="formData.reason" type="textarea" placeholder="请输请假原因" />
40+
</el-form-item>
41+
</el-form>
42+
<template #footer>
43+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
44+
<el-button @click="modelVisible = false">取 消</el-button>
45+
</template>
46+
</Dialog>
1347
</template>
1448
<script setup lang="ts">
15-
import { FormExpose } from '@/components/Form'
16-
// import XEUtils from 'xe-utils'
17-
18-
// 业务相关的 import
49+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
1950
import * as LeaveApi from '@/api/bpm/leave'
20-
import { rules, allSchemas } from './leave.data'
21-
22-
const { t } = useI18n() // 国际化
2351
const message = useMessage() // 消息弹窗
24-
const { push } = useRouter() // 路由
2552
26-
// 表单参数
27-
const actionLoading = ref(false) // 按钮 Loading
28-
const formRef = ref<FormExpose>() // 表单 Ref
53+
const modelVisible = ref(false) // 弹窗的是否展示
54+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
55+
const formData = ref({
56+
type: undefined,
57+
reason: undefined,
58+
startTime: undefined,
59+
endTime: undefined
60+
})
61+
const formRules = reactive({
62+
type: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }],
63+
reason: [{ required: true, message: '请假原因不能为空', trigger: 'change' }],
64+
startTime: [{ required: true, message: '请假开始时间不能为空', trigger: 'change' }],
65+
endTime: [{ required: true, message: '请假结束时间不能为空', trigger: 'change' }]
66+
})
67+
const formRef = ref() // 表单 Ref
68+
69+
/** 打开弹窗 */
70+
const open = async () => {
71+
modelVisible.value = true
72+
resetForm()
73+
}
74+
75+
/** 重置表单 */
76+
const resetForm = () => {
77+
formData.value = {
78+
type: undefined,
79+
reason: undefined,
80+
startTime: undefined,
81+
endTime: undefined
82+
}
83+
formRef.value?.resetFields()
84+
}
85+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
2986
30-
// 提交按钮
87+
/** 提交表单 */
88+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
3189
const submitForm = async () => {
32-
const elForm = unref(formRef)?.getElFormRef()
33-
if (!elForm) return
34-
elForm.validate(async (valid) => {
35-
if (!valid) {
36-
return
37-
}
38-
try {
39-
// 设置提交中
40-
actionLoading.value = true
41-
const data = unref(formRef)?.formModel as LeaveApi.LeaveVO
42-
// data.startTime = XEUtils.toDateString(data.startTime, 'yyyy-MM-dd HH:mm:ss')
43-
// data.endTime = XEUtils.toDateString(data.endTime, 'yyyy-MM-dd HH:mm:ss')
44-
data.startTime = Date.parse(new Date(data.startTime).toString()).toString()
45-
data.endTime = Date.parse(new Date(data.endTime).toString()).toString()
46-
// 添加的提交
47-
await LeaveApi.createLeave(data)
48-
message.success(t('common.createSuccess'))
49-
// 关闭窗口
50-
push('/bpm/oa/leave')
51-
} finally {
52-
actionLoading.value = false
53-
}
54-
})
90+
// 校验表单
91+
if (!formRef) return
92+
const valid = await formRef.value.validate()
93+
if (!valid) return
94+
// 提交请求
95+
formLoading.value = true
96+
try {
97+
const data = formData.value as unknown as LeaveApi.LeaveVO
98+
await LeaveApi.createLeaveApi(data)
99+
message.success('新增成功')
100+
modelVisible.value = false
101+
// 发送操作成功的事件
102+
emit('success')
103+
} finally {
104+
formLoading.value = false
105+
}
55106
}
56107
</script>

‎src/views/bpm/oa/leave/detail.vue

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,40 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 详情 -->
4-
<Descriptions :schema="allSchemas.detailSchema" :data="formData" />
5-
<el-button @click="routerReturn" type="primary">返回</el-button>
6-
</ContentWrap>
2+
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="200">
3+
<el-descriptions border :column="1">
4+
<el-descriptions-item label="请假类型">
5+
<dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="detailData.type" />
6+
</el-descriptions-item>
7+
<el-descriptions-item label="开始时间">
8+
{{ formatDate(detailData.startTime) }}
9+
</el-descriptions-item>
10+
<el-descriptions-item label="结束时间">
11+
{{ formatDate(detailData.endTime) }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="原因">
14+
{{ detailData.reason }}
15+
</el-descriptions-item>
16+
</el-descriptions>
17+
</Dialog>
718
</template>
8-
919
<script setup lang="ts">
10-
// 业务相关的 import
20+
import { DICT_TYPE } from '@/utils/dict'
21+
import { formatDate } from '@/utils/formatTime'
1122
import * as LeaveApi from '@/api/bpm/leave'
12-
import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
13-
import { useRouter } from 'vue-router'
14-
const router = useRouter()
15-
const { query } = useRoute() // 查询参数
16-
const message = useMessage() // 消息弹窗
17-
18-
const id = ref() // 请假编号
19-
// 表单参数
20-
const formData = ref({
21-
startTime: undefined,
22-
endTime: undefined,
23-
type: undefined,
24-
reason: undefined
25-
})
2623
27-
const routerReturn = () => {
28-
router.back()
29-
}
24+
const modelVisible = ref(false) // 弹窗的是否展示
25+
const detailLoading = ref(false) // 表单的加载中
26+
const detailData = ref() // 详情数据
3027
31-
onMounted(() => {
32-
id.value = query.id
33-
if (!id.value) {
34-
message.error('未传递 id 参数，无法查看 OA 请假信息')
35-
return
28+
/** 打开弹窗 */
29+
const open = async (data: LeaveApi.LeaveVO) => {
30+
modelVisible.value = true
31+
// 设置数据
32+
detailLoading.value = true
33+
try {
34+
detailData.value = data
35+
} finally {
36+
detailLoading.value = false
3637
}
37-
// 获得请假信息
38-
LeaveApi.getLeave(id.value).then((data) => {
39-
formData.value = data
40-
})
41-
})
38+
}
39+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
4240
</script>

0 commit comments

Comments
 (0)