编辑， 抽成组件

问题 

错误思路：

1 dept不能修改， 用watch监听一下：赋值给新的变量进行修改，

问题： currentDept 发生改变， depth也发生了改变，因为是浅拷贝， 用了json.pase(json.stringify(value))

还有问题： 修改后，取消，再点进去，发现currentpet 还是变化后的值，

因为watch监听dept，你在进入编辑弹框，还是没有变化，不会重新赋值给currentDept。导致currentDept还是变化后的值

解决：

监听visible，而不是currentDept： 只要进入一次，就重新赋值

<template><el-dialogtop="48px"width="500"title="编辑销方信息":modelValue="visible"@close="handleClose()"><el-formref="ruleFormRef":model="ruleForm"label-width="150px"class="demo-ruleForm"status-icon><el-form-item label="分司名称: " prop="companyName"><div>{{ ruleForm.companyName }}</div></el-form-item><el-form-itemlabel="分公司全称: "prop="orgName":rules="{required: true,message: '请输入分公司全称',trigger: 'change'}"><el-input v-model="ruleForm.orgName" placeholder="请输入分公司全称" /></el-form-item><el-form-itemlabel="地址: "prop="address":rules="{required: true,message: '请输入地址',trigger: 'change'}"><el-input v-model="ruleForm.address" placeholder="请输入地址" /></el-form-item><el-form-itemlabel="纳税人识别号: "prop="taxNo":rules="{required: true,message: '请输入纳税人识别号',trigger: 'change'}"><el-input v-model="ruleForm.taxNo" placeholder="请输入纳税人识别号" /></el-form-item><el-form-itemlabel="电话: "prop="telPhone":rules="{required: true,message: '请输入电话',trigger: 'change'}"><el-input v-model="ruleForm.telPhone" placeholder="请输入电话" /></el-form-item><el-form-itemlabel="开户行: "prop="bankName":rules="{required: true,message: '请输入开户行',trigger: 'change'}"><el-input v-model="ruleForm.bankName" placeholder="请输入开户行" /></el-form-item><el-form-itemlabel="银行账号: "prop="bankNumber":rules="{required: true,message: '请输入银行账号',trigger: 'change'}"><el-input v-model="ruleForm.bankNumber" placeholder="请输入银行账号" /></el-form-item><el-form-itemlabel="开票点编码: "prop="openInvoiceCode":rules="{required: true,message: '请输入开票点编码',trigger: 'change'}"><el-input v-model="ruleForm.openInvoiceCode" placeholder="请输入开票点编码" /></el-form-item><el-form-itemlabel="电子票开票点编码: "prop="electronOpenInvoiceCode":rules="{required: true,message: '请输入电子票开票点编码',trigger: 'change'}"><el-input v-model="ruleForm.electronOpenInvoiceCode" placeholder="请输入电子票开票点编码" /></el-form-item><el-form-itemlabel="预开张数: "prop="invoicePreNum":rules="{required: true,message: '请输入预开张数',trigger: 'change'}"><el-input v-model="ruleForm.invoicePreNum" placeholder="请输入预开张数" /></el-form-item></el-form><template #footer><el-button @click="handleClose()">取消</el-button><el-button type="primary" @click="confirm(ruleFormRef)">保存</el-button></template></el-dialog>
</template><script setup lang="ts">
import type { FormInstance } from "element-plus"
import { editSellerInformation } from "@/api/sellerInformation/list"
let props = defineProps({visible: {type: Boolean,default: false},editData: {type: Object,default: () => ({})}
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({companyId: "",companyName: "",orgName: "",address: "",taxNo: "",telPhone: "",bankName: "",bankNumber: "",openInvoiceCode: "",electronOpenInvoiceCode: "",invoicePreNum: ""
}) as any
const emits = defineEmits(["closeDialog"])
const handleClose = (getData?: boolean) => {emits("closeDialog", getData ? true : false)
}
watch(() => props.visible,(newVal) => {if (newVal) {ruleForm.companyId = props.editData.companyIdruleForm.companyName = props.editData.companyNameruleForm.orgName = props.editData.orgNameruleForm.address = props.editData.addressruleForm.taxNo = props.editData.taxNoruleForm.telPhone = props.editData.telPhoneruleForm.bankName = props.editData.bankNameruleForm.bankNumber = props.editData.bankNumberruleForm.openInvoiceCode = props.editData.openInvoiceCoderuleForm.electronOpenInvoiceCode = props.editData.electronOpenInvoiceCoderuleForm.invoicePreNum = props.editData.invoicePreNum}}
)
// 确定按钮
const confirm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {editSellerInformation(ruleForm).then((res: any) => {if (res.code == 200) {ElMessage.success(res.msg)handleClose(true)} else {ElMessage.error(res.msg)}})} else {console.log("error submit!", fields)}})
}
</script><style scoped lang="scss">
.demo-ruleForm {padding-right: 30px;padding-bottom: 20px;
}
</style>