彤医通项目之 医院修改的回显与更新（隐藏路由）和Bug

医院修改的回显与更新（隐藏路由）

回显：即根据id查询出一条bean语句，将其显示
更新：类似于保存，将回显出的一条bean稍作更改，浏览器将以json格式传给服务器去转化为json对象，做类似save()的update操作。

注意：
这里如果后端接口资源访问映射配置错误，也将出现跨域问题！

@PostMapping("updateHospSetById") // 正确。
// @PostMapping("updateHospSetById/{id}") 若你以为要根据id更新对象
    public Result updateHospSetById(@RequestBody HospitalSet hospitalSet){

1. 设置隐藏路由 /router/index.js中，因为这里的更新表单和添加表单相同！

	 {
        path: 'edit/:id', 
        name: '医院修改-',
        component: () => import('@/views/hospset/add'),
        meta: { title: '医院修改', icon: 'tree' },
        hidden:true // 隐藏路由！
     }

2. api/hospset.js两个方法

  getHospSetById(id){
    return request({
      url:`/admin/hosp/hospitalSet/getHospSetById/${id}`,
      method:'get'
    })
  },
  updateHospSetById(hospitalSet){
    return request({
      url:`/admin/hosp/hospitalSet/updateHospSetById`,
      method:'post',
      data:hospitalSet
    })
  }

3. add.vue引入编辑按钮组件

 <router-link :to="'/hospset/edit/'+scope.row.id">
      <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
 </router-link>

4. add.vue编写script方法
   created()中注意，如果路由中存在id参数值，则需要在初始化完页面后即刻回显查询的信息。调用methods中的方法。

created() {
        // 获取路由id
        if (this.$route.params&&this.$route.params.id){
          let id = this.$route.params.id // 获取当前路由所附带的id值
          this.getHospById(id)
        }
        // 调用接口通过id获取一条医院信息
      },
      methods:{
        getHospById(id){
            hospset.getHospSetById(id)
            .then(response=>{
              this.hospitalSet = response.date // 这里是date。。。不是data
            })
        },
        save(){
          hospset.saveHospitalSet(this.hospitalSet)
            .then(response=>{
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.$router.push({path:'/hospset/list'})
            })
        },
        update(){
          hospset.updateHospSetById(this.hospitalSet)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.$router.push({path:'/hospset/list'})
          })
        },
        // 保存/更新 按钮功能二合一
        saveOrUpdate(){
          // 当点击保存 按钮时，判断当前对象是否有id，若有值则为修改，若无则调用添加方法
          if(!this.hospitalSet.id){
            this.save();
          }else {
            this.update();
          }
        }

Bug

先点编辑 再点添加，表单信息不为空
此时是因为组件重用问题，两个路由渲染统一表单组件，组件的声明周期方法不再被调用，组件相当于被重用。
在router-view上加上唯一key，以保证路由切换是重新触发生命周期方法，确保组件可重新被初始化。

增src/view/layout/components/AppMain.vue。

<router-view :key="key"></router-view>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    }
  }
}
</script>