156 lines
3.9 KiB
Vue
156 lines
3.9 KiB
Vue
<template>
|
|
<div class="uspreason-form">
|
|
<el-dialog
|
|
v-model="state.visible"
|
|
destroy-on-close
|
|
:title="title"
|
|
draggable
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
width="600px"
|
|
>
|
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px" size="default">
|
|
<div class="form-section">
|
|
<el-row :gutter="25">
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
<el-form-item label="原因类型" prop="revokeType">
|
|
<el-select v-model="form.revokeType" placeholder="请选择原因类型" style="width: 100%">
|
|
<el-option
|
|
v-for="item in state.revokeTypeOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
<el-form-item label="原因描述" prop="revokeReason">
|
|
<el-input
|
|
v-model="form.revokeReason"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请输入原因描述"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="onCancel" size="default">取 消</el-button>
|
|
<el-button type="primary" @click="onSubmit" size="default" :loading="state.loading">确 定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, defineProps, defineExpose, onMounted } from 'vue'
|
|
import { RevokeReasonApi } from '/@/api/admin/revoke-reason'
|
|
import type {
|
|
RevokeReasonPageInput,
|
|
RevokeReasonOutput,
|
|
RevokeReasonPageDto,
|
|
RevokeTypeEnumItem,
|
|
RevokeReasonDto
|
|
} from '/@/api/types/RevokeType'
|
|
import eventBus from '/@/utils/mitt'
|
|
|
|
const props = defineProps<{ title: string }>()
|
|
const emit = defineEmits(['ok'])
|
|
const formRef = ref()
|
|
const state = reactive({
|
|
visible: false,
|
|
loading: false,
|
|
revokeTypeOptions: [] as RevokeTypeEnumItem[]
|
|
})
|
|
|
|
const form = reactive<RevokeReasonDto>({
|
|
revokeReason: '',
|
|
revokeType: '',
|
|
isDown: false,
|
|
id: 0
|
|
})
|
|
|
|
const rules = {
|
|
revokeReason: [{ required: true, message: '请输入原因描述', trigger: 'blur' }],
|
|
revokeType: [{ required: true, message: '请选择类型', trigger: 'change' }]
|
|
}
|
|
|
|
// 获取撤回类型枚举列表
|
|
const getRevokeTypeOptions = async () => {
|
|
try {
|
|
const res = await new RevokeReasonApi().getRevokeTypeEnumList()
|
|
if (res?.success && res.data) {
|
|
state.revokeTypeOptions = res.data
|
|
}
|
|
} catch (error) {
|
|
console.error('获取撤回类型枚举列表失败:', error)
|
|
}
|
|
}
|
|
|
|
function open(row?: Partial<RevokeReasonDto>) {
|
|
if (row) {
|
|
Object.assign(form, row)
|
|
} else {
|
|
Object.assign(form, { revokeReason: '', revokeType: '', isDown: false, id: 0 })
|
|
}
|
|
state.visible = true
|
|
}
|
|
|
|
function onCancel() {
|
|
state.visible = false
|
|
}
|
|
|
|
function onSubmit() {
|
|
formRef.value.validate(async (valid: boolean) => {
|
|
if (!valid) return
|
|
state.loading = true
|
|
try {
|
|
if (form.id) {
|
|
await new RevokeReasonApi().update(form)
|
|
} else {
|
|
await new RevokeReasonApi().add(form)
|
|
}
|
|
state.visible = false
|
|
eventBus.emit('refreshUspReason')
|
|
} finally {
|
|
state.loading = false
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getRevokeTypeOptions()
|
|
})
|
|
|
|
defineExpose({ open })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.form-section {
|
|
margin-bottom: 24px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
:deep(.el-form-item) {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
:deep(.el-switch__label) {
|
|
font-size: 13px;
|
|
}
|
|
|
|
:deep(.el-textarea__inner) {
|
|
resize: none;
|
|
}
|
|
</style>
|