暂存

src/api/requirement.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+const requestIp = 'http://10.179.24.176:8990'
+
+export function getRequirement(data) {
+  return request({
+    url: requestIp + '/requirement/queryRequirementInfoList',
+    method: 'post',
+    data
+  })
+}
+
+export function getSearchInfo() {
+  return request({
+    url: requestIp + '/config/showRequirementEnum',
+    method: 'get'
+  })
+}
+
+export function getMemberInfo(data) {
+  return request({
+    url: requestIp + '/member/queryMemberInfoByIDAPorName',
+    method: 'post',
+    data
+  })
+}

src/layout/components/AppMain.vue

@@ -26,6 +26,7 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background-color: #F2F3F6;
 }
 .fixed-header+.app-main {
   padding-top: 80px;

src/router/index.js

@@ -144,6 +144,12 @@ export const constantRoutes = [
             name: '任务更新',
             component: () => import('@/views/projectManage/taskList/taskUpdateCreate'),
             meta: { title: '任务更新' }
+          },
+          {
+            path: 'requirement',
+            name: '需求',
+            component: () => import('@/views/projectManage/requirement/index.vue'),
+            meta: { title: '需求' }
           }
         ]
       },

src/views/projectManage/requirement/index.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="container">
+    <el-header class="requirement-header">
+      <el-input id="basicName" v-model="searchForm.name" placeholder="需求名称" style="width: 8%;" />
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ searchTitle.project }}
+          <i class="el-icon-arrow-down el-icon--right" />
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="(item,index) in searchInfo.belongingProject"
+            :key="index"
+            :command="{value: item,flag: 1}"
+          >{{ item.msg }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ searchTitle.businessline }}
+          <i class="el-icon-arrow-down el-icon--right" />
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="(item,index) in searchInfo.bizType"
+            :key="index"
+            :command="{value: item,flag: 2}"
+          >{{ item.msg }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ searchTitle.source }}
+          <i class="el-icon-arrow-down el-icon--right" />
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="(item,index) in searchInfo.sourceType"
+            :key="index"
+            :command="{value: item,flag: 3}"
+          >{{ item.msg }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ searchTitle.priority }}
+          <i class="el-icon-arrow-down el-icon--right" />
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="(item,index) in searchInfo.priority"
+            :key="index"
+            :command="{value: item,flag: 4}"
+          >{{ item.msg }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-select
+        id="basicName"
+        v-model="searchForm.pm"
+        filterable
+        remote
+        placeholder="PM"
+        :remote-method="searchUser"
+        :loading="userLoading"
+      >
+        <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-select
+        id="basicName"
+        v-model="searchForm.creator"
+        filterable
+        remote
+        placeholder="创建人"
+        :remote-method="searchUser"
+        :loading="userLoading"
+      >
+        <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>
+      <div>
+        <el-button type="primary" size="mini" @click="getTableData">查询</el-button>
+        <el-button size="mini" @click="reset">重置</el-button>
+      </div>
+    </el-header>
+    <el-main class="requirement-main">
+      <div style="margin: 1.5%; font-weight: 600; white-space: nowrap;">
+        <b style="color: #409EFF;margin: 0 0.5%; font-size: 20px; ">I</b>需求列表
+        <el-button
+          type="primary"
+          size="mini"
+          icon="el-icon-plus"
+          style="float: right;"
+          @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-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="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>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        layout="->,total, sizes, prev, pager, next, jumper"
+        :current-page="searchForm.curIndex"
+        :page-size="searchForm.pageSize"
+        :page-sizes="[10,30,50,total]"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-main>
+    <requirement-create :visible="createDialogVisible" @cancel="createDialogVisible=false" @confirm="createDialogVisible=false" /></div>
+</template>
+
+<script>
+import { getRequirement, getSearchInfo, getMemberInfo } from '@/api/requirement.js'
+import RequirementCreate from './requirementCreate'
+
+export default {
+  components: {
+    RequirementCreate
+  },
+  data() {
+    return {
+      searchInfo: {
+        belongingProject: [],
+        sourceType: [],
+        bizType: [],
+        priority: []
+      },
+      searchForm: {
+        name: null,
+        belongingProject: null,
+        bizId: null,
+        sourceType: null,
+        priority: null,
+        pm: null,
+        creator: null,
+        pageSize: 10,
+        curIndex: 1
+      },
+      searchTitle: {
+        project: '归属的项目',
+        businessline: '业务线',
+        source: '需求来源',
+        priority: '优先级'
+      },
+      userLoading: false,
+      loading: false,
+      tableData: null,
+      createDialogVisible: false,
+      options: [],
+      total: 0,
+      items: [
+        { type: '' },
+        { type: 'success' },
+        { type: 'info' },
+        { type: 'danger' },
+        { type: 'warning' }
+      ]
+    }
+  },
+  mounted() {
+    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
+        })
+    },
+    getSearchInfo() {
+      return getSearchInfo()
+        .then(res => {
+          this.userLoading = true
+          this.searchInfo = res.data
+          console.log(this.searchInfo)
+          this.userLoading = false
+        })
+    },
+    handleCommand(command) {
+      switch (command.flag) {
+        case 1:
+          this.searchForm.belongingProject = command.value.code
+          this.searchTitle.project = command.value.msg
+          break
+        case 2:
+          this.searchForm.bizId = command.value.code
+          this.searchTitle.businessline = command.value.msg
+          break
+        case 3:
+          this.searchForm.sourceType = command.value.code
+          this.searchTitle.source = command.value.msg
+          break
+        case 4:
+          this.searchForm.priority = command.value.code
+          this.searchTitle.priority = command.value.msg
+          break
+      }
+    },
+    getcreateTime(time) {
+      return time.substring(2, 10).replace(/-/g, '/')
+    },
+    getType(priority) {
+      let type
+      switch (priority) {
+        case 0:
+          type = 'danger'
+          break
+        case 2:
+          type = 'warning'
+          break
+        case 3:
+          type = ''
+          break
+        case 4:
+          type = 'success'
+          break
+        case 5:
+          type = 'info'
+          break
+        case 6:
+          type = 'info'
+          break
+        default:
+          type = 'info'
+      }
+      return type
+    },
+    // 分页pageSize选择
+    handleSizeChange: function(pageSize) {
+      this.searchForm.pageSize = pageSize
+      this.getTableData()
+    },
+    // 当前页选择
+    handleCurrentChange: function(currentPage) {
+      this.searchForm.curIndex = currentPage
+      this.getTableData()
+    },
+    searchUser(query) {
+      getMemberInfo({ memberIDAP: query })
+        .then(res => {
+          this.options = res.data
+        })
+    },
+    reset() {
+      this.searchForm = {
+        name: null,
+        belongingProject: null,
+        bizId: null,
+        sourceType: null,
+        priority: null,
+        pm: null,
+        creator: null,
+        pageSize: 10,
+        curIndex: 1
+      }
+      this.searchTitle = {
+        project: '归属的项目',
+        businessline: '业务线',
+        source: '需求来源',
+        priority: '优先级'
+      }
+      this.getTableData()
+    }
+  }
+}
+</script>
+
+<style>
+.el-dropdown-link {
+  cursor: pointer;
+  color: #333333;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+.requirement-header {
+  margin: 1%;
+  background-color: #ffffff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.requirement-main {
+  margin: 0 1%;
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 0%;
+}
+.requirement-header .el-input__inner {
+  border: none;
+}
+#basicName::-webkit-input-placeholder {
+  color: #333333;
+}
+.priority_div {
+  width:fit-content;
+  width:-webkit-fit-content;
+  width:-moz-fit-content;
+  color: #ffffff;
+}
+</style>

src/views/projectManage/requirement/requirementCreate.vue

@@ -0,0 +1,70 @@
+<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>