表格中查看接口调试

1、最终效果如下，在查询出用户参与的所有项目后，在表格右侧操作那里点击跳转到具体项目详情

image.png image.png

2、查询表格页面布局及接口编写

1、页面布局

   <el-table  :data="tableData" border  style="width: 100%">
        <el-table-column   prop="number"   label="项目编号"   width="180"></el-table-column>
        <el-table-column prop="groupName"    label="团队名称"></el-table-column>
        <el-table-column    prop="name"   label="项目名称"></el-table-column>
        <el-table-column   prop="operation"  label="操作"  width="230">
          <template slot-scope="scope">
            // scope.row 是指当前操作的这一行
            <el-button type="primary" size="mini" icon="el-icon-view" @click="seeprojectClick(scope.row)">查看</el-button>
          </template>
       </el-table-column>
   </el-table>

2、接口编写

• api编写 personal.js 中getJoinedPro
• data中定义一个空数组tableData: []
• create初始化页面时，调用getJoinedPro() 方法 ，获取用户所参与的所有项目，把返回值赋值给tableData，然后渲染页面
• 调用getJoinedPro()方法时，可能需要给查询参数赋值，

// personal.js
// 个人中心  参与的项目
export function getJoinedPro (data) {
  return request({
    url: '/api/group/getJoinedPro',
    method: 'post',
    data
  })
}

export default {
  name: 'partake',
  data () {
    return {
      tableData: [],
      joinProject: {
        userId: '',
        name: ''
      },
      lookProject: {
        userId: '',
        projectId: '',
        groupId: ''
      }
    }
  },
  methods: {
    // 个人中心 参与的项目
    getJoinedPro () {
      // debugger
      this.joinProject.userId = this.userId
      this.joinProject.name = ''
      getJoinedPro(qs.stringify(this.joinProject)).then(response => {
        if (response.data.retcode === 2000) {
          this.tableData = response.data.data
          this.$message.success(response.data.retmsg)
        }
      })
    },
    // 个人中心 参与的项目 查看项目
    seeprojectClick (row) {
      debugger
      //这里的row是从数据的; 所以你应该从row中获取数据通过路由传过去吧
      // this.$router.push({path: '/home/seejoinProject'})
      this.$router.push({
        path: '/home/seejoinProject',
        query: {
          userId: this.userId,
          projectId: row.andr_project_id,
          groupId: row.groupId
        }
      })
    }
  },
  created () {
    this.userId = this.$store.state.userId
    this.getJoinedPro()
  }
}
</script>

3、表格查询按钮跳转页面布局及接口编写

• 1、在表格页面中，写查看方法seeprojectClick()， 在方法中路由跳转到查看页面，同时，把查看页面中要调用接口getProjectGroup()的参数也传递过去，这个具体要传哪些参数，是由getProjectGroup api接口决定的，
  在表格中通过scope.row获取当前要查看的这一行的数据，并给路由中的参数赋值

seeprojectClick (row) {
     this.$router.push({
        path: '/home/seejoinProject',
        query: {
          userId: this.userId,
          projectId: row.andr_project_id,
          groupId: row.groupId
        }
      })

• 2、编写查看页面布局

 <el-form :label-position="labelPosition" label-width="90px" :model="joinProject">
        <el-form-item  label="项目名称">
          <el-input v-model="joinProject.projectName"></el-input>
        </el-form-item>
        <el-form-item label="团队名称">
          <el-input v-model="joinProject.groupname"></el-input>
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input v-model="joinProject.number "></el-input>
        </el-form-item>
        <el-form-item label="修改职位">
          <el-input v-model="joinProject.postname "></el-input>
        </el-form-item>
      </el-form>

• 3、接口编写

• api编写 personal.js 中getProjectGroup 接口，和后端对接需要用到的参数，然后去表格页面，查看方法路由跳转那里，把getProjectGroup 接口需要用到的参数写到路由query中，

• 在查看页面created 方法中，获取路由传递过过来的参数，并且在created方法中，调用getProjectGroup ()方法， 查看项目详情

• 调用getProjectGroup ()方法时，需要给查询参数赋值，在这里，是在created方法中已经做过了
  把getProjectGroup ()返回值赋值给this.joinProject对象，来渲染页面

// 个人中心  参与的项目  查看
export function getProjectGroup (data) {
  return request({
    url: '/api/group/getProjectGroup',
    method: 'post',
    data
  })
}

export default {
  name: 'seejoinProject',
  data () {
    return {
      labelPosition: 'right',
      joinProject: {
        projectName: '',
        groupname: '',
        number: '',
        postname: ''
      },
      lookProject: {
        userId: '',
        projectId: '',
        groupId: ''
      }
    }
  },
  methods: {
    // 个人中心 参与的项目 查看项目
        getProjectGroup () {
      this.lookProject.userId = this.userId
      getProjectGroup(qs.stringify(this.lookProject)).then(response => {
        if (response.data.retcode === 2000) {
          this.joinProject = response.data.data
          this.$message.success(response.data.retmsg)
        } else {
          this.$message.error(response.data.retmsg)
        }
      })
    },
    // 返回参与项目页面
    return_btn () {
      this.$router.push({path: '/home/partake'})
    }
  },
  created () {
    this.userId = this.$store.state.userId
    this.lookProject.projectId = this.$route.query.projectId
    this.lookProject.groupId = this.$route.query.groupId
    this.getProjectGroup()
  }
}