You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
4.1 KiB
136 lines
4.1 KiB
<template> |
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="65vw" top="5vh"> |
|
<el-form |
|
ref="formRef" |
|
:model="formData" |
|
:rules="formRules" |
|
v-loading="formLoading" |
|
class="policyForm" |
|
> |
|
<section class="flex flex-wrap gap-20px"> |
|
<el-form-item label="标题名称" prop="name" class="w-[calc(100%/2-10px)]"> |
|
<el-input v-model="formData.name" placeholder="请输入名称" /> |
|
</el-form-item> |
|
<el-form-item label="生效日期" prop="effectiveDate" class="w-[calc(100%/2-10px)]"> |
|
<el-date-picker |
|
v-model="formData.effectiveDate" |
|
type="date" |
|
placeholder="选择日期" |
|
value-format="YYYY-MM-DD" |
|
:default-value="new Date()" |
|
class="!w100%" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="内容详细" prop="context" class="w100%"> |
|
<Editor v-model="formData.context" height="500px" class="!w100%" /> |
|
</el-form-item> |
|
</section> |
|
</el-form> |
|
<template #footer> |
|
<el-popconfirm title="是否确定删除当前政策法规？" @confirm="deletePolicy" width="230"> |
|
<template #reference> |
|
<el-button type="danger" v-if="formType == 'update'" link class="underline"> |
|
我要删除 |
|
</el-button> |
|
</template> |
|
</el-popconfirm> |
|
<el-button @click="dialogVisible = false">取 消</el-button> |
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
|
</template> |
|
</Dialog> |
|
</template> |
|
<script setup lang="ts"> |
|
import { PolicyApi, PolicyVO } from '@/api/system/policy' |
|
|
|
/** 政策法规 表单 */ |
|
defineOptions({ name: 'PolicyForm' }) |
|
|
|
const { t } = useI18n() // 国际化 |
|
const message = useMessage() // 消息弹窗 |
|
|
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
|
const dialogTitle = ref('') // 弹窗的标题 |
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
|
const formData = ref({ |
|
id: undefined, |
|
name: undefined, |
|
context: undefined, |
|
effectiveDate: '' |
|
}) |
|
const formRules = reactive({ |
|
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }], |
|
context: [{ required: true, message: '内容不能为空', trigger: 'blur' }], |
|
effectiveDate: [{ required: true, message: '生效日期不能为空', trigger: 'blur' }] |
|
}) |
|
const formRef = ref() // 表单 Ref |
|
|
|
/** 打开弹窗 */ |
|
const open = async (type: string, id?: number) => { |
|
dialogVisible.value = true |
|
dialogTitle.value = t('action.' + type) |
|
formType.value = type |
|
resetForm() |
|
// 修改时，设置数据 |
|
if (id) { |
|
formLoading.value = true |
|
try { |
|
formData.value = await PolicyApi.getPolicy(id) |
|
} finally { |
|
formLoading.value = false |
|
} |
|
} |
|
} |
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
|
|
|
/** 提交表单 */ |
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
|
const submitForm = async () => { |
|
// 校验表单 |
|
await formRef.value.validate() |
|
// 提交请求 |
|
formLoading.value = true |
|
try { |
|
const data = formData.value as unknown as PolicyVO |
|
if (formType.value === 'create') { |
|
await PolicyApi.createPolicy(data) |
|
message.success(t('common.createSuccess')) |
|
} else { |
|
await PolicyApi.updatePolicy(data) |
|
message.success(t('common.updateSuccess')) |
|
} |
|
dialogVisible.value = false |
|
// 发送操作成功的事件 |
|
emit('success') |
|
} finally { |
|
formLoading.value = false |
|
} |
|
} |
|
|
|
/** 重置表单 */ |
|
const resetForm = () => { |
|
formData.value = { |
|
id: undefined, |
|
name: undefined, |
|
context: undefined, |
|
effectiveDate: '' |
|
} |
|
formRef.value?.resetFields() |
|
} |
|
|
|
const deletePolicy = () => { |
|
PolicyApi.deletePolicy(formData.value.id).then(() => { |
|
message.success(t('common.delSuccess')) |
|
dialogVisible.value = false |
|
emit('success') |
|
}) |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.policyForm { |
|
::v-deep(.el-form-item--large) { |
|
margin-bottom: 0; |
|
} |
|
} |
|
</style>
|
|
|