质量看板开发实践(六)：添加一个jira数据列表，并可点击跳转至jira详情

2022-05-01 20:00:24 阅读：194 来源： 互联网

标签：jira ... story 故事列表点击详情跳转 summary

在编写质量看板时，添加了一个关于当前冲刺的故事卡状态饼图，

在这个基础上，希望能够看到这个冲刺中每个故事卡的标题内容，可以以弹窗列表的形式展示，如下

这里用到element-ui的一个组件：Dialog 对话框

前端定义交互样式

          <div style="position: absolute;margin-top: 50%;">
            <el-button type="text" @click="dialogTableVisible = true" style="font-size: 15px;">查看故事卡详情</el-button>
            <el-dialog title="故事卡详情" :visible.sync="dialogTableVisible" width="60%">
              <el-table :data="gridData" border style="width: 100%" max-height="400" :default-sort = "{property: 'story_key', order: 'descending'}">  <!--max-height设置表格最大高度，超出显示滚动条-->
                <el-table-column type="index" width="50" align="center"></el-table-column>
                <el-table-column property="story_key" sortable label="故事卡key" width="130" align="center"></el-table-column>
                <el-table-column property="story_name" label="故事卡标题" width="400" align="center"></el-table-column>
                <el-table-column property="story_status" sortable label="故事卡状态" width="130" align="center"></el-table-column>
                <el-table-column property="address" label="操作" align="center" fixed="right">  <!--控制这一列的位置-->
                  <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="view_detail(scope.$index, scope.row.story_key)"
                        type="text"
                        size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>
          </div>

el-table 标签中的 :data="gridData"是往列表中渲染的数据

js代码

  data() {
    return {
      gridData: "",
      ...
      ...
      ...
    }
  },
  
  methods: {
      get_sprint_data(value) {
          ...
          ...
          this.gridData = response.data.story_details
          ...
          ...
      }
  }

后端需要返回列表所需的数据，包含故事卡id、故事卡标题、故事卡状态

            ...
            ...
            summary = []
            for i in issues:

                # print(i.raw)  # 打印每个故事的原始信息
                summary.append({"story_key": i.raw["key"],
                                "story_name": i.raw["fields"]["summary"],
                                "story_status": i.raw["fields"]["status"]["name"]})          
             ...
             ...
             res = {
                ...
                ...
                "story_details": summary
            }
            return res

数据返回前端后，要在列表后边添加一个操作列，点击按钮可以跳转至jira故事卡详情

前端对应代码如下

                <el-table-column property="address" label="操作" align="center" fixed="right">  <!--控制这一列的位置-->
                  <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="view_detail(scope.$index, scope.row.story_key)"
                        type="text"
                        size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>

操作按钮定义为【详情】，点击【详情】进行跳转

@click.native.prevent绑定了一个方法view_detail传入2个参数：列表数据的序号index，列表中的story_key字段(也就是故事卡的id)

js代码

methods: {
    view_detail(index, row) {
      console.log(index);
      window.open("http://xxx.xxx.xxx/browse/"+row)  //打开新的浏览器窗口，访问链接
    },
    ...
    ...
 }

OK，列表功能这样就完成了

标签：jira,...,story,故事,列表,点击,详情,跳转,summary
来源： https://www.cnblogs.com/hanmk/p/16213835.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

质量看板开发实践(六)：添加一个jira数据列表，并可点击跳转至jira详情