员工管理系统 - 添加、修改、调动员工

<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/instance.js"></script>
<p>{{deptname.deptname}} 查询 添加 {{branchname.branchname}} {{deptname.deptname}} {{rolename.rolename}}
取 消 确 定
{{branchname.branchname}} {{deptname.deptname}} {{rolename.rolename}}
取 消 确 定
{{branchname.branchname}} {{deptname.deptname}} {{rolename.rolename}} {{branchname.branchname}} {{deptname.deptname}} {{rolename.rolename}}
取 消 确 定</p>
<script>
new Vue({
  el: '#app',
  data: {
    /*遍历模糊查询下拉框*/
    deptname: [],
    /*搜索栏*/
    formInline: {
      staffname: '',
      branchname: '',
    },
    title: '添加员工',
    show: false,
    /*添加&修改弹出框*/
    dialogFormVisible1: false,
    form1: {
      staffid: '',
      staffname: '',
      password: '',
      idcard: '',
      address: '',
      phone: '',
      entrytime: '',
    },
    /*所在店名遍历*/
    branchname2: '',
    /*部门名称遍历*/
    deptname2: '',
    /*员工职位遍历*/
    rolename: '',
    dialogFormVisible2: false,
    form2: {
      staffid: '',
      staffname: '',
      password: '',
      idcard: '',
      address: '',
      phone: '',
      entrytime: '',
    },
    dialogFormVisible3: false,
    form3: {
      staffid: '',
      staffname: '',
      password: '',
      idcard: '',
      address: '',
      phone: '',
      entrytime: '',
      branchid: '',
      deptid: '',
      roleid: '',
      newbranchid: '',
      newdeptid: '',
      newroleid: ''
    },
    /* /!*所在店名遍历*!/ branchname2:'', /!*部门名称遍历*!/ deptname2:'', /!*员工职位遍历*!/ rolename:'',*/
    formLabelWidth: '120px',
    /*表格*/
    tableData: [],
    /*分页*/
    currentPage1: 5,
    currentPage2: 5,
    currentPage3: 5,
    currentPage4: 1,
    /*是否在职*/
    var1: 1,
    var2: 0,
  },
  methods: {
    /*离职时间*/
    leaveTime(index, row) {
      console.log(row)
      row.state = 0;
      instance.put("/staffs/updatestate", row).then(res => {
      })
    },
    state(row, col) {
      return row.state == 0 ? '离职' : '在职';
    },
    /*查询*/
    onSubmit() {
      this.handleCurrentChange(1)
    },
    /*分页*/
    handleCurrentChange(val) {
      instance.get(`/staffs?index=${val}`, {
        params: this.formInline
      }).then(res => {
        this.tableData = res.data.data.list;
        this.t = res.data.data.total
      })
    },
    handleSizeChange(val) {
      instance.get(`/staffs?size=${val}`, {
        params: this.formInline
      }).then(res => {
        this.tableData = res.data.data.list;
        this.t = res.data.data.total
      })
    },
    /*添加&修改弹出框*/
    add() {
      this.dialogFormVisible1 = true;
      this.title = '添加员工'
      this.show = false;
      this.form1 = {}
    },
    handleEdit(index, row) {
      this.dialogFormVisible2 = true
      this.title = '修改员工';
      this.show = true;
      this.form2 = row;
    },
    updatestaff(index, row) {
      this.form3 = row;
      console.log(row)
      this.dialogFormVisible3 = true
      this.title = '调动员工';
      this.show = true;
    },
    /*添加*/
    edit() {
      instance.post("/staffs", this.form1).then(res => {
      })
      this.form1 = {}
      this.dialogFormVisible1 = false
    },
    /*修改*/
    update() {
      instance.put("/staffs", this.form2).then(res => {
      })
      this.form2 = {}
      this.dialogFormVisible2 = false
    },
    updatestaffs() {
      console.log(this.form3)
      instance.put("/staffs/updatestaffs", this.form3).then(res => {
        console.log(res)
      })
      this.form3 = {}
      this.dialogFormVisible3 = false
    },
    /*删除*/
    handleDelete(index, row) {
      console.log(row)
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        instance.delete(`/staffs/${row.staffid}`).then(res => {
          if (res.data.code == 0) {
            this.tableData.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
  },
  created() {
    /*整表后端数据接收*/
    instance.get("/staffs").then(res => {
      /*拿数据*/
      this.tableData = res.data.data.list;
      /*分页*/
      this.t = res.data.data.total
    })
    /*部门遍历*/
    instance.get("/staffs/getbranchname").then(res => {
      this.deptname = res.data.data;
      // console.log(res)
    })
    /*店名遍历*/
    instance.get("/staffs/getdeptname").then(res => {
      this.branchname = res.data.data;
      // console.log(res)
    })
    /*职位遍历*/
    instance.get("/staffs/getrolename").then(res => {
      // console.log(res)
      this.rolename = res.data.data;
    })
  }
})

为什么dialogFormVisible3的form表单数据为空值