陈薪名
1 year ago
1 changed files with 154 additions and 0 deletions
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<Form ref="formRef" v-loading="formLoading" :rules="rules" :schema="formSchema" :is-col="true" /> |
||||
|
<template #footer> |
||||
|
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" /> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
<SearchTable ref="searchTableRef" :dialogTitle="searchTableTitle" /> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { SearchTable } from '@/components/SearchTable'; |
||||
|
import * as defaultButtons from '@/utils/disposition/defaultButtons' |
||||
|
import ButtonBase from '@/components/XButton/src/ButtonBase.vue' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
// 校验rules |
||||
|
rules: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: null |
||||
|
}, |
||||
|
// 表单,列表 相关信息 |
||||
|
formAllSchemas: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: null |
||||
|
}, |
||||
|
// 查询弹层标题 |
||||
|
searchTableTitle: { |
||||
|
type: String, |
||||
|
required: false, |
||||
|
default:'查询' |
||||
|
}, |
||||
|
// 查询弹层 Schemas |
||||
|
searchTableAllSchemas: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: null |
||||
|
}, |
||||
|
// 查询弹层API——pagelist |
||||
|
searchTablePage: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: null |
||||
|
}, |
||||
|
// API——Vo |
||||
|
apiVo: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: null |
||||
|
}, |
||||
|
// API——创建 |
||||
|
apiCreate: { |
||||
|
type: Function, |
||||
|
required: true, |
||||
|
default: null |
||||
|
}, |
||||
|
// API——编辑 |
||||
|
apiUpdate: { |
||||
|
type: Function, |
||||
|
required: true, |
||||
|
default: null |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
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 formRef = ref() // 表单 Ref |
||||
|
const formSchema = ref(props.formAllSchemas.formSchema) |
||||
|
|
||||
|
/** 弹层操作 */ |
||||
|
const searchTableRef = ref() |
||||
|
const opensearchTable = () => { |
||||
|
searchTableRef.value.open('物品基础信息', props.searchTableAllSchemas, props.searchTablePage) |
||||
|
} |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, row?: any) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时,设置数据 |
||||
|
if (row) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
nextTick(() => { |
||||
|
formRef.value.setValues(row) |
||||
|
}) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法,用于打开弹窗 |
||||
|
|
||||
|
/** 弹窗按钮 */ |
||||
|
const Butttondata = [ |
||||
|
defaultButtons.formSaveBtn(null), // 保存 |
||||
|
defaultButtons.formCloseBtn(null), // 关闭 |
||||
|
] |
||||
|
|
||||
|
/** 按钮事件 */ |
||||
|
const buttonBaseClick = (val) => { |
||||
|
// 保存 |
||||
|
if (val == 'save') { |
||||
|
submitForm() |
||||
|
} |
||||
|
// 关闭 |
||||
|
else if (val == 'close') { |
||||
|
dialogVisible.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
const elForm = unref(formRef)?.getElFormRef() |
||||
|
// 校验表单 |
||||
|
if (!elForm) return |
||||
|
const valid = await elForm.validate() |
||||
|
if (!valid) return |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
// const data = unref(formRef)?.formModel as ItempackagingApi.ItempackagingVO |
||||
|
// TODO: as VO 接口 不知道怎么从props获取 所以现在没写 |
||||
|
const data = unref(formRef)?.formModel |
||||
|
if (formType.value === 'create') { |
||||
|
await props.apiCreate(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await props.apiUpdate(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
unref(formRef)?.resetFields() |
||||
|
} |
||||
|
</script> |
Loading…
Reference in new issue