| | |
| | | v-model="formData.fieldName" |
| | | placeholder="请输入字段名称" |
| | | /> |
| | | </el-form-item> <el-form-item label="字段描述" prop="fieldDescription"> |
| | | <el-input v-model="formData.fieldDescription" type="textarea" placeholder="请输入字段描述" /> |
| | | </el-form-item> |
| | | <el-form-item label="Activity form" props="dielDescription"> |
| | | <el-input v-model="formData.fieldDescription" type="textarea" placeholder="请输入字段描述" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="submitForm"> 确定 </el-button> |
| | | <el-form-item class="dialog-footer"> |
| | | <el-button v-if="addOrEdit === 'edit'" @click="resetForm" |
| | | >重置</el-button |
| | | > |
| | | <el-button v-if="addOrEdit === 'add'" @click="cancelForm" |
| | | >取消</el-button |
| | | > |
| | | <el-button type="primary" @click="submitForm"> 确定 </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, watch, defineProps, onMounted } from "vue"; |
| | | import addressList from "@/api/jsonApi/areaList.json"; |
| | | import { ref, reactive, watch, defineProps } from "vue"; |
| | | import { addOrEditCoalField } from "@/api/basicInformation/coalFieldMaintenance.js"; |
| | | const props = defineProps({ |
| | | beforeClose: { |
| | | type: Function, |
| | | default: () => {}, |
| | | }, |
| | | form: { |
| | | type: Object, |
| | | default: () => ({}), |
| | |
| | | default: "", |
| | | }, |
| | | }); |
| | | |
| | | const copyForm = defineModel("copyForm", { |
| | | required: true, |
| | | type: Object, |
| | | }); |
| | | // 表单引用 |
| | | const formRef = ref(); |
| | | const emit = defineEmits(["submit", "handleBeforeClose"]); |
| | | // 表单数据 |
| | | const formData = ref({ ...props.form }); |
| | | |
| | | // 监听props.form的变化,更新formData |
| | | watch(() => props.form, (newForm) => { |
| | | formData.value = { ...newForm }; |
| | | }, { deep: true, immediate: true }); |
| | | // 弹窗可见性 |
| | | const dialogVisible = defineModel("coalMaintenanceFieldDialogVisible", { |
| | | required: true, |
| | |
| | | if (!formRef.value) return; |
| | | await formRef.value.validate(async (valid, fields) => { |
| | | if (valid) { |
| | | const obj = ref({}); |
| | | |
| | | console.log("提交表单", formData.value); |
| | | if (props.title.includes('新增')) { |
| | | let result = await addOrEditCoalField( |
| | | {...formData.value} |
| | | ,) |
| | | console.log(result); |
| | | obj.value = { |
| | | title: "新增", |
| | | ...formData.value, |
| | | result |
| | | }; |
| | | } else { |
| | | delete formData.value.createTime |
| | | delete formData.value.updateTime |
| | | let result = await addOrEditCoalField({ |
| | | ...formData.value, |
| | | }) |
| | | obj.value = { |
| | | title: "编辑", |
| | | ...formData.value, |
| | | result |
| | | }; |
| | | } |
| | | emit("submit", obj.value); |
| | | } |
| | | }); |
| | | }; |
| | |
| | | }; |
| | | // 重置表单 |
| | | const resetForm = () => { |
| | | |
| | | |
| | | }; |
| | | if (!formRef.value) return |
| | | formData.value = JSON.parse(JSON.stringify(copyForm.value)); |
| | | } |
| | | // 关闭弹窗 |
| | | const handleClose = () => { |
| | | // 触发父组件的关闭函数 |
| | |
| | | emit("update:coalMaintenanceFieldDialogVisible", false); |
| | | }; |
| | | const rules = reactive({ |
| | | coal: [ |
| | | fieldName: [ |
| | | { required: true, message: "请输入煤种名称", trigger: "blur" }, |
| | | ], |
| | | }); |
| | | </script> |
| | | <style lang="sass" scoped> |
| | | <style lang="scss" scoped> |
| | | .dialog-footer { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | margin-top: 20px; |
| | | flex-direction: column; |
| | | } |
| | | </style> |