| | |
| | | const handleClose = () => { |
| | | dialogVisible.value = false; |
| | | console.log(form.value); |
| | | // formRef.value?.resetFields() |
| | | // Object.assign(form, { |
| | | // }) |
| | | }; |
| | | const handleReset = () => { |
| | | if (!formRef.value) return; |
| | |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | <style lang="sass" scoped> |
| | | </style> |
| | | |
| | | <!-- <template> |
| | | <el-dialog |
| | | v-model="dialogFormVisible" |
| | | title="采购登记新增" |
| | | width="500px" |
| | | :close-on-click-modal="false" |
| | | @close="handleClose" |
| | | > |
| | | |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive, defineProps, defineEmits } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | |
| | | const props = defineProps({ |
| | | visible: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }) |
| | | |
| | | const emit = defineEmits(['update:visible', 'success']) |
| | | |
| | | const dialogFormVisible = ref(false) |
| | | const formRef = ref(null) |
| | | |
| | | // 表单数据 |
| | | const form = reactive({ |
| | | supplierName: '', |
| | | category: '', |
| | | unit: '', |
| | | purchaseAmount: '', |
| | | priceBeforeTax: '', |
| | | totalBeforeTax: '', |
| | | calorificValue: '', |
| | | registrant: '', |
| | | registrationDate: '' |
| | | }) |
| | | |
| | | // 表单验证规则 |
| | | |
| | | |
| | | // 监听visible变化 |
| | | watch(() => props.visible, (val) => { |
| | | dialogFormVisible.value = val |
| | | }) |
| | | |
| | | // 监听dialogFormVisible变化 |
| | | watch(() => dialogFormVisible.value, (val) => { |
| | | emit('update:visible', val) |
| | | }) |
| | | |
| | | // 提交表单 |
| | | const handleSubmit = async () => { |
| | | if (!formRef.value) return |
| | | |
| | | await formRef.value.validate((valid) => { |
| | | if (valid) { |
| | | try { |
| | | emit('success', { ...form }) |
| | | handleClose() |
| | | ElMessage.success('保存成功') |
| | | } catch (error) { |
| | | console.error('保存失败:', error) |
| | | ElMessage.error('保存失败') |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 取消 |
| | | const handleCancel = () => { |
| | | handleClose() |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .production-form { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .dialog-footer { |
| | | display: flex; |
| | | justify-content: center; |
| | | gap: 20px; |
| | | } |
| | | |
| | | :deep(.el-form-item__label) { |
| | | font-weight: normal; |
| | | } |
| | | |
| | | :deep(.el-input), |
| | | :deep(.el-date-picker) { |
| | | width: 100%; |
| | | } |
| | | |
| | | :deep(.el-dialog__body) { |
| | | padding-top: 10px; |
| | | } |
| | | </style> --> |