|
|
@@ -1,38 +1,58 @@
|
|
|
<template>
|
|
|
- <el-container>
|
|
|
+ <el-container class="version_list">
|
|
|
<div style="width:100%;height:100%;padding-top:1px;background-color: #F2F3F6;">
|
|
|
- <div class="layout_header">
|
|
|
- <div style="font-size: 14px;color: #333333;padding-left:20px">
|
|
|
- <el-dropdown placement="bottom" @command="handleCommand">
|
|
|
- <span class="el-dropdown-link">
|
|
|
- {{ getTitle(searchTitle.client) }}
|
|
|
- <i class="el-icon-arrow-down el-icon--right" />
|
|
|
- </span>
|
|
|
- <el-dropdown-menu slot="dropdown" class="version_el-dropdown-menu">
|
|
|
- <el-dropdown-item
|
|
|
- v-for="(item,index) in searchInfo.clients"
|
|
|
- :key="index"
|
|
|
- :command="{value: item,flag: 1}"
|
|
|
- >{{ item.msg }}</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
+ <el-main class="layout_header" style="padding: 1% 2%">
|
|
|
+ <div>
|
|
|
+ <span style="font-size: 22px;letter-spacing: 1px;font-weight: 600;color: #333B4A;">版本</span>
|
|
|
</div>
|
|
|
- <div style="font-size: 14px;color: #333333;padding-left:50px">
|
|
|
- <el-dropdown placement="bottom" @command="handleCommand">
|
|
|
- <span class="el-dropdown-link">
|
|
|
- {{ getTitle(searchTitle.version) }}
|
|
|
- <i class="el-icon-arrow-down el-icon--right" />
|
|
|
- </span>
|
|
|
- <el-dropdown-menu slot="dropdown" class="version_el-dropdown-menu">
|
|
|
- <el-dropdown-item
|
|
|
- v-for="(item,index) in searchInfo.versions"
|
|
|
- :key="index"
|
|
|
- :command="{value: item,flag: 2}"
|
|
|
- >{{ item.msg }}</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
+ <div style="position: relative;right: 1%">
|
|
|
+ <el-divider />
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <span class="queryName">客户端</span>
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.clientType"
|
|
|
+ size="small"
|
|
|
+ style="padding-left: 2px;"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="getVersionHomePageList()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in searchInfo.clients"
|
|
|
+ :key="item.code"
|
|
|
+ :label="item.msg"
|
|
|
+ :value="item.code"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <span class="queryName" style="margin-left: 4%">版本</span>
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.versionType"
|
|
|
+ size="small"
|
|
|
+ style="padding-left: 2px;"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="getVersionHomePageList()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in searchInfo.versions"
|
|
|
+ :key="item.code"
|
|
|
+ :label="item.msg"
|
|
|
+ :value="item.code"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div style="font-size: 14px;color: #00A0FF;cursor: pointer;line-height: 32px;text-align: right" @click="timeLineShow = !timeLineShow">{{ timeLineShow?'收起详情':'版本详情' }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div v-if="timeLineShow" class="time-line-container">
|
|
|
+ <time-line :steps="timeLineSteps" />
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
<div class="layout_main version_list_layout_main">
|
|
|
<div style="display:flex;align-items: center;padding:20px">
|
|
|
<div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
|
|
|
@@ -109,15 +129,26 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import TimeLine from './timeLine'
|
|
|
import { getVersionHomePageList, showAppClientEnum, showVersionEnum } from '@/api/version.js'
|
|
|
import VersionChart from '@/components/chart/index.vue'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- VersionChart
|
|
|
+ VersionChart,
|
|
|
+ TimeLine
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ timeLineSteps: [
|
|
|
+ { dateLabel: 'January 2017', title: 'Gathering Information' },
|
|
|
+ { dateLabel: 'February 2017', title: 'Planning' },
|
|
|
+ { dateLabel: 'March 2017', title: 'Design' },
|
|
|
+ { dateLabel: 'April 2017', title: 'Content Writing and Assembly' },
|
|
|
+ { dateLabel: 'May 2017', title: 'Coding' },
|
|
|
+ { dateLabel: 'June 2017', title: 'Testing, Review & Launch' },
|
|
|
+ { dateLabel: 'July 2017', title: 'Maintenance' }],
|
|
|
+ timeLineShow: false,
|
|
|
priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
|
|
|
tableData: [],
|
|
|
loading: false,
|
|
|
@@ -301,29 +332,6 @@ export default {
|
|
|
return str.substring(0, 6) + '...'
|
|
|
}
|
|
|
},
|
|
|
- handleCommand(command) {
|
|
|
- switch (command.flag) {
|
|
|
- case 1:
|
|
|
- this.searchTitle.client = command.value.msg
|
|
|
- this.searchInfo.versions = command.value.childEnumInfos
|
|
|
- if (command.value.code !== this.searchForm.clientType) {
|
|
|
- if (this.searchInfo.versions && this.searchInfo.versions.length > 0) {
|
|
|
- this.searchForm.versionType = this.searchInfo.versions[0].code
|
|
|
- this.searchTitle.version = this.searchInfo.versions[0].msg
|
|
|
- } else {
|
|
|
- this.searchForm.versionType = null
|
|
|
- this.searchTitle.version = '无版本'
|
|
|
- }
|
|
|
- }
|
|
|
- this.searchForm.clientType = command.value.code
|
|
|
- break
|
|
|
- case 2:
|
|
|
- this.searchForm.versionType = command.value.code
|
|
|
- this.searchTitle.version = command.value.msg
|
|
|
- break
|
|
|
- }
|
|
|
- this.getVersionHomePageList()
|
|
|
- },
|
|
|
getToRequirementDetails(id) {
|
|
|
this.$router.push({ name: '需求详情', params: { id: id + '' }})
|
|
|
},
|
|
|
@@ -448,6 +456,18 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.time-line-container {
|
|
|
+ margin-top: 20px;
|
|
|
+ border: 1px solid rgba(238,238,238,1);
|
|
|
+ background: #FCFCFC;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.queryName {
|
|
|
+ display: inline-block;
|
|
|
+ width: 80px;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
.el-dropdown-link {
|
|
|
cursor: pointer;
|
|
|
color: #333333;
|
|
|
@@ -461,11 +481,8 @@ export default {
|
|
|
padding: 0 5px 2% 0
|
|
|
}
|
|
|
.layout_header {
|
|
|
- height: 60px;
|
|
|
width: 98%;
|
|
|
margin: 1% auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
}
|
|
|
.layout_main {
|
|
|
width: 98%;
|
|
|
@@ -493,9 +510,11 @@ export default {
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
-.el-dropdown-menu__item:not(.is-disabled):hover {
|
|
|
- background-color: #f6f7fa;
|
|
|
- color: #606266;
|
|
|
+.version_list .el-divider--horizontal {
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px;
|
|
|
}
|
|
|
.version_list_layout_main .el-table__body tr:hover td {
|
|
|
color: #409eff;
|
qinzhipeng_v
