记录一次vue的三个页面的复用

这次依旧分到了一个模块，从前端到后台的，于是借鉴了他们的写法。
好了，上代码。
1.查询页面
1.1分页查询的展示：
1.1.1先定义好要展示的字段（以JSON格式定义，绑定数据时即可直接引用）

 queryData:{
          consultationData:'', // 咨询日期
          consultationName:'',// 咨询人姓名
          consultationPhone:'',// 咨询人手机号码
          modeName:'', // 咨询方式
          intentionName:'', // 咨询意向
          channelName:'',  // 媒介名称
          pensionName:'',  // 老人姓名
          abilityName:'', // 自理能力
          remark:'', //备注
          resultName:'',// 回访结果
          consultationId:'', //ID主键
        },

1.1.2通过函数，像后台发送一个$http请求，让其在init函数执行，就可以初始化执行。注意的是，把当前页和每页的数据大小一起传递到后台。

  //分页查询
      loadTableData(pageSize,pageNum){
        consultationCApi.getConsultationListPage(pageSize,pageNum,this.queryData).then(
          (response)=>{
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
          }
        );
      },

1.1.3，根据对应的字段，就可以在table组件里面进行展示数据了。

1.2就是按条件查询的前端了。
借用刚刚定义的JSONObject，将字段放进去，带去后台，进行查询。

查询方法用的上一个，区别就是在DTO上附带了这些属性。后台通过动态SQL进行处理。查询完成后，叉掉查询条件，即可。

到此，首页的分页查询和按条件查询记录完毕。
2.1 记录新增，修改和详情了。他们三者共用一个页面。在talbe组件时，将该列的ID，通过scope.row。传到给对应的页面。通过另一个参数的定义的区别，区分是进入哪个页面。

<el-table-column label="操作" width="150">
               <template scope="scope">
                 <el-button type="text" size="small" @click.stop="handleDetail(2,scope.row)">编辑</el-button>
                 <el-button type="text" size="small" @click.stop="handleDetail(0,scope.row)">详情</el-button>
                 <el-button type="text" size="small" @click="showDialog(scope.row)">回访</el-button>
                 <el-button type="text" size="small" @click="memberFile">建档</el-button>
               </template>
             </el-table-column>

|
2.1.2 在另一个页面写函数，进行触发。比如，详情。


另一个参数控制着，进入的是哪个页面，触发的是哪里的函数

详情接下来就和首页的写法类似了。不展示了。
感觉剩下的新增和修改和上次记录的都差不多。也就不写了
这次记录的和上次的主要区别是：上次为了增删改查，写了四个页面。这次的话，由于新增，修改和详情的展示大量的类似，通过这种方式，这三个就复用一个页面，进行了大量的代码冗余了。可以快速的完成一个前端的开发。