|
| 1 | +<template> |
| 2 | + <XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible"> |
| 3 | + <el-form ref="formRef" :model="form" :rules="rules" label-width="80px"> |
| 4 | + <el-form-item label="参数分类" prop="category"> |
| 5 | + <el-input v-model="form.category" placeholder="请输入参数分类" /> |
| 6 | + </el-form-item> |
| 7 | + <el-form-item label="参数名称" prop="name"> |
| 8 | + <el-input v-model="form.name" placeholder="请输入参数名称" /> |
| 9 | + </el-form-item> |
| 10 | + <el-form-item label="参数键名" prop="key"> |
| 11 | + <el-input v-model="form.key" placeholder="请输入参数键名" /> |
| 12 | + </el-form-item> |
| 13 | + <el-form-item label="参数键值" prop="value"> |
| 14 | + <el-input v-model="form.value" placeholder="请输入参数键值" /> |
| 15 | + </el-form-item> |
| 16 | + <el-form-item label="是否可见" prop="visible"> |
| 17 | + <!-- TODO 芋艿：改成组件 --> |
| 18 | + <el-radio-group v-model="form.visible"> |
| 19 | + <el-radio :key="true" :label="true">是</el-radio> |
| 20 | + <el-radio :key="false" :label="false">否</el-radio> |
| 21 | + </el-radio-group> |
| 22 | + </el-form-item> |
| 23 | + <el-form-item label="备注" prop="remark"> |
| 24 | + <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> |
| 25 | + </el-form-item> |
| 26 | + </el-form> |
| 27 | + <template #footer> |
| 28 | + <div class="dialog-footer"> |
| 29 | + <el-button type="primary" @click="submitForm">确 定</el-button> |
| 30 | + <el-button @click="modelLoading = false">取 消</el-button> |
| 31 | + </div> |
| 32 | + </template> |
| 33 | + </XModal> |
| 34 | +</template> |
| 35 | +<script setup lang="ts"> |
| 36 | +// import type { FormExpose } from '@/components/Form' |
| 37 | +import * as PostApi from '@/api/system/post' |
| 38 | +const { t } = useI18n() // 国际化 |
| 39 | +const message = useMessage() // 消息弹窗 |
| 40 | +
|
| 41 | +const modelVisible = ref(false) // 弹窗的是否展示 |
| 42 | +const modelTitle = ref('') // 弹窗的标题 |
| 43 | +const modelLoading = ref(false) // 弹窗的 Loading 加载 |
| 44 | +const actionType = ref('') // 操作类型：create - 新增；update - 修改 |
| 45 | +const actionLoading = ref(false) // 操作按钮的 Loading 加载 |
| 46 | +const formRef = ref() // 表单的 Ref |
| 47 | +const form = reactive({ |
| 48 | + id: undefined, |
| 49 | + category: undefined, |
| 50 | + name: undefined, |
| 51 | + key: undefined, |
| 52 | + value: undefined, |
| 53 | + visible: true, |
| 54 | + remark: undefined |
| 55 | +}) |
| 56 | +const rules = reactive({ |
| 57 | + category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }], |
| 58 | + name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }], |
| 59 | + key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }], |
| 60 | + value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }], |
| 61 | + visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }] |
| 62 | +}) |
| 63 | +// const formRef = ref<FormExpose>() // 表单 Ref |
| 64 | +
|
| 65 | +/** 打开弹窗 */ |
| 66 | +const openModal = async (type: string, id?: number) => { |
| 67 | + modelVisible.value = true |
| 68 | + modelLoading.value = true |
| 69 | + modelTitle.value = t('action.' + type) |
| 70 | + actionType.value = type |
| 71 | + // 设置数据 |
| 72 | + resetForm() |
| 73 | + if (id) { |
| 74 | + // const res = await PostApi.getPostApi(id) |
| 75 | + // if (type === 'update') { |
| 76 | + // unref(formRef)?.setValues(res) |
| 77 | + // } else if (type === 'detail') { |
| 78 | + // detailData.value = res |
| 79 | + // } |
| 80 | + } |
| 81 | + modelLoading.value = false |
| 82 | +} |
| 83 | +defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗 |
| 84 | +
|
| 85 | +/** 提交表单 */ |
| 86 | +const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
| 87 | +const submitForm = async () => { |
| 88 | + // 校验表单 |
| 89 | + const elForm = unref(formRef)?.getElFormRef() |
| 90 | + if (!elForm) return |
| 91 | + const valid = await elForm.validate() |
| 92 | + if (!valid) return |
| 93 | + // 提交请求 |
| 94 | + actionLoading.value = true |
| 95 | + try { |
| 96 | + const data = unref(formRef)?.formModel as PostApi.PostVO |
| 97 | + if (actionType.value === 'create') { |
| 98 | + await PostApi.createPostApi(data) |
| 99 | + message.success(t('common.createSuccess')) |
| 100 | + } else { |
| 101 | + await PostApi.updatePostApi(data) |
| 102 | + message.success(t('common.updateSuccess')) |
| 103 | + } |
| 104 | + modelVisible.value = false |
| 105 | + emit('success') |
| 106 | + } finally { |
| 107 | + actionLoading.value = false |
| 108 | + } |
| 109 | +} |
| 110 | +
|
| 111 | +/** 重置表单 */ |
| 112 | +const resetForm = () => { |
| 113 | + form.id = undefined |
| 114 | + form.category = undefined |
| 115 | + form.name = undefined |
| 116 | + form.key = undefined |
| 117 | + form.value = undefined |
| 118 | + form.visible = true |
| 119 | + form.remark = undefined |
| 120 | + formRef.value.resetFields() |
| 121 | +} |
| 122 | +</script> |
0 commit comments