src/api/requirement.js

@@ -24,3 +24,27 @@ export function getMemberInfo(data) {
     data
   })
 }
+
+export function createRequirement(data) {
+  return request({
+    url: requestIp + '/requirement/createRequirement',
+    method: 'post',
+    data
+  })
+}
+
+export function getRequirementById(data) {
+  return request({
+    url: requestIp + '/requirement/queryOneRequirementDetail',
+    method: 'post',
+    data
+  })
+}
+
+export function getRequirementStatistics(data) {
+  return request({
+    url: requestIp + '/task/getTaskStatusMapInfo',
+    method: 'post',
+    data
+  })
+}

src/components/chart/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :id="chartId" style="width: 420px;height: 160px" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'Hello',
+  props: {
+    chartId: {
+      type: String,
+      default: 'myChart'
+    },
+    option: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  watch: {
+    option(newValue, oldValue) {
+      this.drawLine()
+    }
+  },
+  mounted() {
+    this.drawLine()
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      const myChart = echarts.init(document.getElementById(this.chartId))
+      // 绘制图表
+      myChart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/router/index.js

@@ -148,8 +148,16 @@ export const constantRoutes = [
           {
             path: 'requirement',
             name: '需求',
-            component: () => import('@/views/projectManage/requirement/index.vue'),
+            component: () => import('@/views/projectManage/requirement/list/index.vue'),
             meta: { title: '需求' }
+          },
+          {
+            path: 'requirementDetails/:id',
+            name: '需求详情',
+            hidden: true,
+            props: true,
+            component: () => import('@/views/projectManage/requirement/details/index.vue'),
+            meta: { title: '需求详情' }
           }
         ]
       },

src/store/getters.js

@@ -5,6 +5,7 @@ const getters = {
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   menu: state => state.data.menu,
-  subMenu: state => state.data.subMenu
+  subMenu: state => state.data.subMenu,
+  project: state => state.project.project
 }
 export default getters

src/store/index.js

@@ -5,6 +5,7 @@ import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
 import data from './modules/data'
+import project from './modules/project'
 
 Vue.use(Vuex)
 
@@ -13,7 +14,8 @@ const store = new Vuex.Store({
     app,
     settings,
     user,
-    data
+    data,
+    project
   },
   getters
 })

src/store/modules/project.js

@@ -0,0 +1,23 @@
+const state = {
+  project: {}
+}
+
+const mutations = {
+  SETPROJECT(state, value) {
+    state.project = value
+  }
+}
+
+const actions = {
+  setProject({ commit }, value) {
+    commit('SETPROJECT', value)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/views/projectManage/requirement/details/index.vue

@@ -0,0 +1,337 @@
+<template>
+  <el-container>
+    <el-header style="margin: 2%">
+      <div>
+        <span>{{ '项目名称:' }}</span>
+        <div style="display: inline-block;float: right">
+          <el-dropdown size="mini" split-button @command="handleCommand">
+            <span class="el-dropdown-link">{{ status.msg }}</span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="(item,index) in searchInfo.requirementStatus"
+                :key="index"
+                :command="item"
+              >{{ item.msg }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button size="mini" style="margin-left: 10px" @click="deleteRequirement">删除需求</el-button>
+          <el-button type="primary" size="mini" @click="createRequirement">新建</el-button>
+        </div>
+      </div>
+    </el-header>
+    <el-container>
+      <el-aside width="52%" style="margin: 0% 2% 2% 2%;padding: 1%">
+        <div style="font-size: 18px">
+          <b style="color: #409EFF">I</b>数据统计
+        </div>
+        <div style="margin: 1%;padding: 0">
+          <div style="border-bottom: 1px solid #444">
+            <div
+              style="display: inline-block;width: 30%;text-align: center;margin: 0;border-right: 2px solid #444"
+            >
+              <div style="font-size: 16px;margin-top: 26px">任务数量</div>
+              <div style="font-size: 72px">{{ statistics.totalCount }}</div>
+              <div
+                style="font-size: 14px;color: rgba(245,108,108,1);margin-bottom: 16px"
+              >{{ '已延期0天' }}</div>
+            </div>
+            <div style="display: inline-block;width: 69%;text-align: center;">
+              <requirement-chart
+                :chart-id="'taskCount'"
+                :option="taskOption"
+                style="position: absolute;top: 27%"
+              />
+            </div>
+          </div>
+          <div>
+            <div
+              style="display: inline-block;width: 30%;text-align: center;margin: 0;border-right: 2px solid #444"
+            >
+              <div style="font-size: 16px;margin-top: 26px">任务数量</div>
+              <div style="font-size: 72px">{{ statistics.totalCount }}</div>
+              <div
+                style="font-size: 14px;color: rgba(245,108,108,1);margin-bottom: 16px"
+              >{{ '已延期0天' }}</div>
+            </div>
+            <div style="display: inline-block;width: 69%;text-align: center;">
+              <requirement-chart
+                :chart-id="'bugCount'"
+                :option="bugOption"
+                style="position: absolute;top: 48%"
+              />
+            </div>
+          </div>
+        </div>
+      </el-aside>
+      <el-aside width="42%" style="margin: 0% 2% 2% 0;padding: 1%">
+        <div style="font-size: 18px">
+          <b style="color: #409EFF;">I</b>基础信息
+        </div>
+        <div style="line-height: 38px;margin: 2%">
+          <div><div class="div_label">归属的项目:</div><div class="div_content">{{ requirement.belongingProjectName }}</div><el-button style="float: right" type="primary" size="mini">修改</el-button></div>
+          <div><div class="div_label">业务线:</div><div class="div_content">{{ requirement.bizName }}</div></div>
+          <div><div class="div_label">优先级:</div><div class="div_content">{{ requirement.priorityName }}</div></div>
+          <div><div class="div_label">需求来源:</div><div class="div_content">{{ requirement.sourceTypeName }}</div></div>
+          <div><div class="div_label">PM:</div><div class="div_content">{{ getPmName() }}</div></div>
+          <div><div class="div_label">PRD链接:</div><div class="div_content">{{ requirement.mrdUrl }}</div></div>
+          <div><div class="div_label">是否跟版:</div><div class="div_content">{{ requirement.dependOnRelease? '是':'否' }}</div></div>
+          <div v-if="requirement.dependOnRelease"><div class="div_label">涉及的客户端:</div><div class="div_content">{{ getClientTypeName() }}</div></div>
+        </div>
+      </el-aside>
+    </el-container>
+    <el-main style="margin: 0 2% 0 2%">
+      <div style="font-size: 18px">
+        <b style="color: #409EFF;">I</b>任务
+      </div>
+
+    </el-main>
+    <el-footer style="margin: 2%">123</el-footer>
+  </el-container>
+</template>
+
+<script>
+import {
+  getRequirementById,
+  getSearchInfo,
+  getRequirementStatistics
+} from '@/api/requirement.js'
+import RequirementChart from '@/components/chart/index.vue'
+
+export default {
+  components: {
+    RequirementChart
+  },
+  props: {
+    id: {
+      type: String,
+      default: '0'
+    }
+  },
+  data() {
+    return {
+      form: null,
+      statistics: {},
+      belongingProject: { msg: '不存在' },
+      status: {},
+      requirement: {},
+      projectOb: {},
+      bizTypeOb: {},
+      clientTypeOb: {},
+      searchInfo: {
+        belongingProject: [],
+        sourceType: [],
+        bizType: [],
+        priority: [],
+        requirementStatus: []
+      },
+      taskOption: {
+        color: ['#69B3FF'],
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['未开始', '开发中', '测试中', '已上线'],
+            axisTick: {
+              alignWithLabel: true,
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: '60%',
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            data: [4, 12, 6, 20]
+          }
+        ]
+      },
+      bugOption: {
+        color: ['#69B3FF'],
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['待开发', '开发中', '待测试', '已完成', 'Reopen'],
+            axisTick: {
+              alignWithLabel: true,
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: '60%',
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            data: [4, 12, 6, 20, 50]
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getSearchInfo().then(res => {
+      getRequirementById({
+        id: this.id
+      }).then(res => {
+        this.requirement = res.data
+        for (const i in this.searchInfo.requirementStatus) {
+          if (
+            this.requirement.status ===
+            this.searchInfo.requirementStatus[i].code
+          ) {
+            this.status = this.searchInfo.requirementStatus[i]
+          }
+        }
+      })
+      getRequirementStatistics({
+        requireId: this.id
+      }).then(res => {
+        this.statistics = res.data
+      })
+    })
+  },
+  methods: {
+    getPmName() {
+      const names = []
+      for (const i in this.requirement.pm) {
+        names.push(this.requirement.pm[i].name)
+      }
+      return names.join(',')
+    },
+    getClientTypeName() {
+      const names = []
+      for (const i in this.requirement.referredClientType) {
+        names.push(this.clientTypeOb[this.requirement.referredClientType[i]])
+      }
+      return names.join(',')
+    },
+    handleCommand(command) {
+      this.status = command
+    },
+    getSearchInfo() {
+      return getSearchInfo().then(res => {
+        this.searchInfo = res.data
+        for (const i in this.searchInfo.belongingProject) {
+          this.projectOb[this.searchInfo.belongingProject[i].code] = this.searchInfo.belongingProject[i].msg
+        }
+        for (const i in this.searchInfo.bizType) {
+          this.bizTypeOb[this.searchInfo.bizType[i].code] = this.searchInfo.bizType[i].msg
+        }
+        for (const i in this.searchInfo.clientType) {
+          this.clientTypeOb[this.searchInfo.clientType[i].code] = this.searchInfo.clientType[i].msg
+        }
+      })
+    },
+    deleteRequirement() {},
+    createRequirement() {}
+  }
+}
+</script>
+
+<style scoped>
+.el-header,
+.el-footer,
+.el-aside,
+.el-main {
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+.el-header {
+  line-height: 60px;
+}
+.div_label,.div_content {
+  display: inline-block;
+  font-size: 14px;
+}
+.div_label {
+  color: #666666;
+  width: 120px;
+}
+.div_content {
+  color: #409EFF;
+}
+</style>

src/views/projectManage/requirement/list/create.vue

@@ -0,0 +1,241 @@
+<template>
+  <el-dialog title="新建需求" :visible.sync="isVisible" width="60%">
+    <el-form :model="form" :rules="rules" label-position="right" label-width="120px">
+      <el-form-item label="需求名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入需求名称" />
+      </el-form-item>
+      <div style="display: flex;">
+        <div style="flex; 1;">
+          <el-form-item label="归属项目" prop="belongingProject">
+            <el-select v-model="form.belongingProject" placeholder="请选择" style="width:20vw">
+              <el-option
+                v-for="(item,index) in info.belongingProject"
+                :key="index"
+                :label="item.msg"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="需求来源" prop="sourceType">
+            <el-select v-model="form.sourceType" placeholder="请选择" style="width:20vw">
+              <el-option
+                v-for="(item,index) in info.sourceType"
+                :key="index"
+                :label="item.msg"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="PM" prop="pm">
+            <el-select
+              v-model="form.pm"
+              filterable
+              remote
+              placeholder="请输入需求产出的姓名或邮箱前缀"
+              :remote-method="searchUser"
+              :loading="userLoading"
+              style="width:20vw"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.idap"
+                :label="item.name"
+                :value="item.idap"
+              >
+                <div style="text-align: center">
+                  <span style="float: left;color: #8492a6; font-size: 13px">{{ item.idap }}</span>
+                  <span>{{ item.name }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deptName }}</span>
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="是否依赖发版" prop="dependOnRelease">
+            <el-radio-group v-model="form.dependOnRelease">
+              <el-radio :label="1">是</el-radio>
+              <el-radio :label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </div>
+        <div style="flex; 1; margin: 0 0 0 auto;">
+          <el-form-item label="优先级" prop="priority">
+            <el-select v-model="form.priority" placeholder="请选择" style="width:20vw">
+              <el-option
+                v-for="(item,index) in info.priority"
+                :key="index"
+                :label="item.msg"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="业务线" prop="bizId">
+            <el-select v-model="form.bizId" placeholder="请选择" style="width:20vw">
+              <el-option
+                v-for="(item,index) in info.bizType"
+                :key="index"
+                :label="item.msg"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="PRD链接" prop="mrdUrl">
+            <el-input v-model="form.mrdUrl" placeholder="请粘贴PRD链接" />
+          </el-form-item>
+          <el-form-item v-show="form.dependOnRelease" label="涉及的客户端" prop="referredClientType">
+            <el-select v-model="form.referredClientType" multiple placeholder="请选择">
+              <el-option
+                v-for="item in info.clientType"
+                :key="item.code"
+                :label="item.msg"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+      </div>
+    </el-form>
+    {{ form }}
+    <template v-slot:footer>
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="confirm">创 建</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { getMemberInfo, createRequirement } from '@/api/requirement.js'
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    info: {
+      type: Object,
+      default() {
+        return {
+          belongingProject: [],
+          sourceType: [],
+          bizType: [],
+          priority: []
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      isVisible: false,
+      form: {
+        name: null,
+        belongingProject: null,
+        priority: null,
+        sourceType: null,
+        bizId: null,
+        pm: null,
+        mrdUrl: null,
+        dependOnRelease: 0,
+        referredClientType: null,
+        creator: null
+      },
+      rules: {
+        name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
+        belongingProject: [
+          { required: true, message: '请选择归属项目', trigger: 'change' }
+        ],
+        priority: [
+          { required: true, message: '请选择优先级', trigger: 'change' }
+        ],
+        sourceType: [
+          { required: true, message: '请选择需求来源', trigger: 'change' }
+        ],
+        bizId: [{ required: true, message: '请选择业务线', trigger: 'change' }],
+        pm: [{ required: true, message: '请输入PM', trigger: 'change' }],
+        mrdUrl: [{ required: true, message: '请粘贴PRD连接', trigger: 'blur' }],
+        dependOnRelease: [
+          { required: true, message: '请选择业务线', trigger: 'blur' }
+        ],
+        referredClientType: [
+          { required: true, message: '请选择涉及的客户端', trigger: 'change' }
+        ]
+      },
+      options: [],
+      userLoading: false
+    }
+  },
+  watch: {
+    visible: function(newVisible, oldVisible) {
+      this.isVisible = newVisible
+    },
+    isVisible: function(newIsVisible, oldIsVisible) {
+      if (newIsVisible === false) {
+        for (const i in this.form) {
+          this.form[i] = null
+        }
+        this.$emit('cancel', false)
+      }
+    }
+  },
+  methods: {
+    cancel: function() {
+      this.$emit('cancel', false)
+    },
+    confirm: function() {
+      for (const i in this.form) {
+        if (!this.form[i]) {
+          if (i === 'name') {
+            this.$message.warning('需求名称为空，请输入需求名称')
+            return
+          } else if (i === 'belongingProject') {
+            this.$message.warning('请选择归属项目')
+            return
+          } else if (i === 'priority') {
+            if (this.form[i] === 0) {
+              break
+            }
+            this.$message.warning('请选择优先级')
+            return
+          } else if (i === 'sourceType') {
+            this.$message.warning('请选择需求来源')
+            return
+          } else if (i === 'bizId') {
+            this.$message.warning('请选择业务线')
+            return
+          } else if (i === 'pm') {
+            this.$message.warning('请填写PM名称')
+            return
+          } else if (i === 'mrdUrl') {
+            this.$message.warning('请输入Prd链接')
+            return
+          } else if (i === 'dependOnRelease') {
+            if (this.form[i] === 0) {
+              break
+            }
+            return
+          } else if (i === 'referredClientType' && this.form.dependOnRelease === 1) {
+            this.$message.warning('请选择客户端')
+            return
+          }
+        }
+      }
+      this.form.creator = localStorage.getItem('username')
+      createRequirement(this.form).then(res => {
+        this.$emit('confirm', false)
+      })
+    },
+    searchUser(query) {
+      this.userLoading = true
+      getMemberInfo({ memberIDAP: query }).then(res => {
+        this.options = res.data
+        this.userLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-select {
+  width: 20vw;
+}
+</style>

src/views/projectManage/requirement/index.vue → src/views/projectManage/requirement/list/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <el-header class="requirement-header">
-      <el-input id="basicName" v-model="searchForm.name" placeholder="需求名称" style="width: 8%;" />
+      <el-input id="basicName1" v-model="searchForm.name" placeholder="需求名称" style="width: 8%;" />
       <el-dropdown @command="handleCommand">
         <span class="el-dropdown-link">
           {{ searchTitle.project }}
@@ -55,7 +55,7 @@
         </el-dropdown-menu>
       </el-dropdown>
       <el-select
-        id="basicName"
+        id="basicName2"
         v-model="searchForm.pm"
         filterable
         remote
@@ -63,12 +63,7 @@
         :remote-method="searchUser"
         :loading="userLoading"
       >
-        <el-option
-          v-for="item in options"
-          :key="item.idap"
-          :label="item.name"
-          :value="item.idap"
-        >
+        <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="item.idap">
           <div style="text-align: center">
             <span style="float: left;color: #8492a6; font-size: 13px">{{ item.idap }}</span>
             <span>{{ item.name }}</span>
@@ -77,7 +72,7 @@
         </el-option>
       </el-select>
       <el-select
-        id="basicName"
+        id="basicName3"
         v-model="searchForm.creator"
         filterable
         remote
@@ -85,12 +80,7 @@
         :remote-method="searchUser"
         :loading="userLoading"
       >
-        <el-option
-          v-for="item in options"
-          :key="item.idap"
-          :label="item.name"
-          :value="item.idap"
-        >
+        <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="item.idap">
           <div style="text-align: center">
             <span style="float: left;color: #8492a6; font-size: 13px">{{ item.idap }}</span>
             <span>{{ item.name }}</span>
@@ -114,22 +104,36 @@
           @click="createDialogVisible = true"
         >新建</el-button>
       </div>
-      <el-table v-loading="loading" :data="tableData" style="width: 100%" :header-cell-style="{ background: '#6AB4FF', color: '#FFFFFF' }">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+        highlight-current-row
+        :header-cell-style="{ background: '#6AB4FF', color: '#FFFFFF' }"
+        @current-change="handleCurrentRowChange"
+      >
         <el-table-column prop="priority" label="优先级" sortable min-width="8%">
           <template v-slot="scope">
             <el-tag size="mini" :type="getType(scope.row.priority)">{{ 'P'+scope.row.priority }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="name" label="需求名称" sortable min-width="15%" />
-        <el-table-column prop="belongingProject" label="业务线" sortable min-width="10%" />
+        <el-table-column prop="belongingProject" label="归属的项目" sortable min-width="10%">
+          <template v-slot="scope">
+            {{ getProjectName(scope.row.belongingProject) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="bizId" label="业务线" sortable min-width="10%">
+          <template v-slot="scope">
+            {{ getBizName(scope.row.belongingProject) }}
+          </template>
+        </el-table-column>
         <el-table-column prop="pm" label="产品" sortable min-width="10%" />
         <el-table-column prop="taskCount" label="任务总数" sortable min-width="8%" />
         <el-table-column prop="bugCount" label="bug总数" sortable min-width="8%" />
         <el-table-column prop="creator" label="创建人" sortable min-width="10%" />
         <el-table-column prop="createTime" label="创建时间" sortable min-width="10%">
-          <template v-slot="scope">
-            {{ getcreateTime(scope.row.createTime) }}
-          </template>
+          <template v-slot="scope">{{ getcreateTime(scope.row.createTime) }}</template>
         </el-table-column>
       </el-table>
       <el-pagination
@@ -137,18 +141,28 @@
         layout="->,total, sizes, prev, pager, next, jumper"
         :current-page="searchForm.curIndex"
         :page-size="searchForm.pageSize"
-        :page-sizes="[10,30,50,total]"
+        :page-sizes="[15,30,45,total]"
         :total="total"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
     </el-main>
-    <requirement-create :visible="createDialogVisible" @cancel="createDialogVisible=false" @confirm="createDialogVisible=false" /></div>
+    <requirement-create
+      :visible="createDialogVisible"
+      :info="searchInfo"
+      @cancel="createDialogVisible=false"
+      @confirm="createDialogVisible=false"
+    />
+  </div>
 </template>
 
 <script>
-import { getRequirement, getSearchInfo, getMemberInfo } from '@/api/requirement.js'
-import RequirementCreate from './requirementCreate'
+import {
+  getRequirement,
+  getSearchInfo,
+  getMemberInfo
+} from '@/api/requirement.js'
+import RequirementCreate from './create'
 
 export default {
   components: {
@@ -156,12 +170,15 @@ export default {
   },
   data() {
     return {
+      currentRow: null,
       searchInfo: {
         belongingProject: [],
         sourceType: [],
         bizType: [],
         priority: []
       },
+      projectOb: {},
+      bizTypeOb: {},
       searchForm: {
         name: null,
         belongingProject: null,
@@ -170,7 +187,7 @@ export default {
         priority: null,
         pm: null,
         creator: null,
-        pageSize: 10,
+        pageSize: 15,
         curIndex: 1
       },
       searchTitle: {
@@ -195,29 +212,29 @@ export default {
     }
   },
   mounted() {
-    this.getSearchInfo()
-      .then(res => {
-        this.getTableData()
-      })
+    this.getSearchInfo().then(res => {
+      this.getTableData()
+    })
   },
   methods: {
     getTableData() {
       this.loading = true
-      getRequirement(this.searchForm)
-        .then(res => {
-          this.tableData = res.data.list
-          this.total = res.data.total
-          this.loading = false
-        })
+      getRequirement(this.searchForm).then(res => {
+        this.tableData = res.data.list
+        this.total = res.data.total
+        this.loading = false
+      })
     },
     getSearchInfo() {
-      return getSearchInfo()
-        .then(res => {
-          this.userLoading = true
-          this.searchInfo = res.data
-          console.log(this.searchInfo)
-          this.userLoading = false
-        })
+      return getSearchInfo().then(res => {
+        this.searchInfo = res.data
+        for (const i in this.searchInfo.belongingProject) {
+          this.projectOb[this.searchInfo.belongingProject[i].code] = this.searchInfo.belongingProject[i].msg
+        }
+        for (const i in this.searchInfo.bizType) {
+          this.bizTypeOb[this.searchInfo.bizType[i].code] = this.searchInfo.bizType[i].msg
+        }
+      })
     },
     handleCommand(command) {
       switch (command.flag) {
@@ -279,10 +296,11 @@ export default {
       this.getTableData()
     },
     searchUser(query) {
-      getMemberInfo({ memberIDAP: query })
-        .then(res => {
-          this.options = res.data
-        })
+      this.userLoading = true
+      getMemberInfo({ memberIDAP: query }).then(res => {
+        this.options = res.data
+        this.userLoading = false
+      })
     },
     reset() {
       this.searchForm = {
@@ -303,6 +321,23 @@ export default {
         priority: '优先级'
       }
       this.getTableData()
+    },
+    getProjectName(id) {
+      const ret = this.projectOb[id]
+      if (typeof ret === 'undefined') {
+        return '无归属项目'
+      }
+      return ret
+    },
+    getBizName(id) {
+      const ret = this.bizTypeOb[id]
+      if (typeof ret === 'undefined') {
+        return '无'
+      }
+      return ret
+    },
+    handleCurrentRowChange(val) {
+      this.$router.push({ name: '需求详情', params: { id: val.id + '' }})
     }
   }
 }
@@ -333,13 +368,20 @@ export default {
 .requirement-header .el-input__inner {
   border: none;
 }
-#basicName::-webkit-input-placeholder {
+#basicName1::-webkit-input-placeholder {
+  color: #333333;
+}
+#basicName2::-webkit-input-placeholder {
+  color: #333333;
+}
+#basicName3::-webkit-input-placeholder {
   color: #333333;
 }
 .priority_div {
-  width:fit-content;
-  width:-webkit-fit-content;
-  width:-moz-fit-content;
+  width: fit-content;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   color: #ffffff;
 }
+.requirement-main .el-table .el-table__body tr:hover td { color: #409EFF; background: #EEF0F5; } /*hover时字体, 背景颜色*/
 </style>

src/views/projectManage/requirement/requirementCreate.vue

@@ -1,70 +0,0 @@
-<template>
-  <el-dialog title="新建需求" :rules="rules" :visible.sync="isVisible" width="60%">
-    <el-form :model="form" label-position="left" label-width="80px">
-      <el-form-item label="需求名称" prop="name">
-        <el-input v-model="form.name" placeholder="请输入需求名称" />
-      </el-form-item>
-    </el-form>
-    <template v-slot:footer>
-      <el-button @click="cancel">取 消</el-button>
-      <el-button type="primary" @click="confirm">确 定</el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      isVisible: false,
-      form: {
-        name: null,
-        belongingProject: null,
-        bizId: null,
-        priority: null,
-        pm: null,
-        mrdUrl: null,
-        dependOnRelease: null,
-        referredClientType: null,
-        creator: null
-      },
-      rules: {
-        lineIdentifier: [
-          { required: true, message: '请选择业务线', trigger: 'change' }
-        ],
-        name: [
-          { required: true, message: '请输入环境UUID', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  watch: {
-    visible: function(newVisible, oldVisible) {
-      this.isVisible = newVisible
-    },
-    isVisible: function(newIsVisible, oldIsVisible) {
-      if (newIsVisible === false) {
-        this.$emit('cancel', false)
-      }
-    }
-  },
-  methods: {
-    cancel: function() {
-      this.$emit('cancel', false)
-    },
-    confirm: function() {
-      this.$emit('confirm', false)
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>