编辑， 抽成组件

问题 

错误思路：

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

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

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

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

解决：

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

<template>
  <el-dialog
    top="48px"
    width="500"
    title="编辑销方信息"
    :modelValue="visible"
    @close="handleClose()"
  >
    <el-form
      ref="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-item
        label="分公司全称: "
        prop="orgName"
        :rules="{
          required: true,
          message: '请输入分公司全称',
          trigger: 'change'
        }"
      >
        <el-input v-model="ruleForm.orgName" placeholder="请输入分公司全称" />
      </el-form-item>
      <el-form-item
        label="地址: "
        prop="address"
        :rules="{
          required: true,
          message: '请输入地址',
          trigger: 'change'
        }"
      >
        <el-input v-model="ruleForm.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item
        label="纳税人识别号: "
        prop="taxNo"
        :rules="{
          required: true,
          message: '请输入纳税人识别号',
          trigger: 'change'
        }"
      >
        <el-input v-model="ruleForm.taxNo" placeholder="请输入纳税人识别号" />
      </el-form-item>
      <el-form-item
        label="电话: "
        prop="telPhone"
        :rules="{
          required: true,
          message: '请输入电话',
          trigger: 'change'
        }"
      >
        <el-input v-model="ruleForm.telPhone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item
        label="开户行: "
        prop="bankName"
        :rules="{
          required: true,
          message: '请输入开户行',
          trigger: 'change'
        }"
      >
        <el-input v-model="ruleForm.bankName" placeholder="请输入开户行" />
      </el-form-item>
      <el-form-item
        label="银行账号: "
        prop="bankNumber"
        :rules="{
          required: true,
          message: '请输入银行账号',
          trigger: 'change'
        }"
      >
        <el-input v-model="ruleForm.bankNumber" placeholder="请输入银行账号" />
      </el-form-item>
      <el-form-item
        label="开票点编码: "
        prop="openInvoiceCode"
        :rules="{
          required: true,
          message: '请输入开票点编码',
          trigger: 'change'
        }"
      >
        <el-input v-model="ruleForm.openInvoiceCode" placeholder="请输入开票点编码" />
      </el-form-item>
      <el-form-item
        label="电子票开票点编码: "
        prop="electronOpenInvoiceCode"
        :rules="{
          required: true,
          message: '请输入电子票开票点编码',
          trigger: 'change'
        }"
      >
        <el-input v-model="ruleForm.electronOpenInvoiceCode" placeholder="请输入电子票开票点编码" />
      </el-form-item>
      <el-form-item
        label="预开张数: "
        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.companyId
      ruleForm.companyName = props.editData.companyName
      ruleForm.orgName = props.editData.orgName
      ruleForm.address = props.editData.address
      ruleForm.taxNo = props.editData.taxNo
      ruleForm.telPhone = props.editData.telPhone
      ruleForm.bankName = props.editData.bankName
      ruleForm.bankNumber = props.editData.bankNumber
      ruleForm.openInvoiceCode = props.editData.openInvoiceCode
      ruleForm.electronOpenInvoiceCode = props.editData.electronOpenInvoiceCode
      ruleForm.invoicePreNum = props.editData.invoicePreNum
    }
  }
)
// 确定按钮
const confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await 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>