加入需求详情对话框

企业级管理系统/web/admin_system/src/views/requirement/RequirementManager.vue

@@ -2,14 +2,16 @@
  * @Author: Kane
  * @Date: 2023-01-25 23:13:47
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-28 15:08:25
+ * @LastEditTime: 2023-01-28 17:44:26
  * @FilePath: \admin_system\src\views\requirement\RequirementManager.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
+
     <div class="requirement_wrapper">
+        <!-- 查询框 -->
         <div class="search-box">
             <el-row :gutter="10">
                 <el-col :span="2">
@@ -65,6 +67,7 @@
                 <el-col :span="6"></el-col>
             </el-row>
         </div>
+        <!-- 工具栏 -->
         <div class="tool-button-wrapper">
             <el-row :gutter="10">
                 <el-col :span="4">
@@ -85,11 +88,14 @@
                 </el-col>
             </el-row>
         </div>
+        <!-- 需求列表 -->
         <el-table :data="tableData" border stripe style="width:100%;" :height="tableHeight">
             <el-table-column type="selection" align="center"></el-table-column>
             <el-table-column label="需求编号" align="center" width="160">
                 <template #default="requirement">
-                    <span class="requirement-serial">{{ requirement.row.serial_no }}</span>
+                    <span @click="dialogRequirementDetailVisible = true;" class="requirement-serial">{{
+                        requirement.row.serial_no
+                    }}</span>
                 </template>
             </el-table-column>
             <el-table-column label="标题" prop="title" min-width="200" align="center">
@@ -114,6 +120,66 @@
                 layout="total, sizes, prev, pager, next, jumper" :total="requirement_data.length">
             </el-pagination>
         </div>
+        <!-- 需求详细信息对话框 -->
+        <el-dialog class="requirement-detail-dialog" v-model="dialogRequirementDetailVisible" width="55%"
+            :close-on-click-modal="true" :close-on-press-escape="false" :show-close="false" title="需求详情">
+            <el-scrollbar height="300px">
+                <div class="requirement-detail-wrapper" style="padding: 0px 10px;">
+                    <el-row :gutter="10">
+                        <el-col :span="2">
+                            <span>标题</span>
+                        </el-col>
+                        <el-col :span="22">
+                            <el-input></el-input>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="10">
+                        <el-col :span="2">
+                            <span>需求编号</span>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-input v-model="query_param.requirement_serial"></el-input>
+                        </el-col>
+                        <el-col :span="2">
+                            <span>申请人</span>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-input v-model="query_param.request_people"></el-input>
+                        </el-col>
+                        <el-col :span="2">
+                            <span>状态</span>
+                        </el-col>
+                        <el-col :span="6">
+                            <!-- <el-input v-model="query_param.status"></el-input> -->
+                            <el-select multiple collapse-tags collapse-tags-tooltip v-model="query_param.status">
+                                <el-option v-for="option in requirement_status" :value="option"
+                                    :key="option"></el-option>
+                            </el-select>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="10">
+                        <el-col :span="2">
+                            <span>提交日期</span>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-date-picker v-model="query_param.submit_start_date"
+                                style="width:100%;"></el-date-picker>
+                        </el-col>
+                        <el-col :span="2">
+                            <span>至</span>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-date-picker v-model="query_param.submit_end_date" style="width:100%;"></el-date-picker>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-scrollbar>
+            <template #footer>
+                <div class="dialogFooter">
+                    <el-button type="primary" @click="dialogRequirementDetailVisible = false;">关闭</el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 
@@ -124,9 +190,9 @@ export default {
     data()
     {
         return {
-            table_current_page: 1,
+            requirement_data: requirementTestData, //需求数据，当前值是测试数据
+            table_current_page: 1,//分页组件当前的页面索引
             table_page_size: 10,
-            requirement_data: requirementTestData,
             query_param: {
                 requirement_serial: "",
                 request_people: "",
@@ -136,7 +202,8 @@ export default {
             },
             requirement_status: [
                 "未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
-            ]
+            ],
+            dialogRequirementDetailVisible: false, //需求详情对话框是否显示
         };
     },
     computed: {
@@ -169,14 +236,27 @@ export default {
 </script>
 
 <style scoped>
-.search-box {
+/* 整个页面的外壳 ******************************/
-    padding: 0 10px;
+.requirement_wrapper {
-    /* background-color: #fff; */
+    padding: 15px 10px;
-    /* border-radius: 5px; */
+    background-color: #fff;
-    /* box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 25%); */
+    border-radius: 5px;
+    box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 25%);
+}
+
+.requirement_wrapper:hover {
+    box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 40%);
+}
+
+.requirement_wrapper>*+* {
+    margin-top: 15px;
 }
 
 
+/* 查询框 **********************************/
+.search-box {
+    padding: 0 10px;
+}
 
 .search-box span {
     font-weight: normal;
@@ -196,36 +276,7 @@ export default {
     margin-top: 10px;
 }
 
-/* .el-date-picker {
+/* 查询结果筛选框 */
-    width: 100%;
-} */
-.button-wrapper-right {
-    display: flex;
-    justify-content: right;
-    align-items: center;
-}
-
-.button-wrapper-left {
-    display: flex;
-    justify-content: left;
-    align-items: center;
-}
-
-.requirement_wrapper {
-    padding: 15px 10px;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 25%);
-}
-
-.requirement_wrapper:hover {
-    box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 40%);
-}
-
-.requirement_wrapper>*+* {
-    margin-top: 15px;
-}
-
 .tool-button-wrapper {
     padding: 0px 15px;
     width: 100%;
@@ -255,6 +306,18 @@ export default {
     justify-content: right;
 }
 
+.button-wrapper-right {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+}
+
+.button-wrapper-left {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+
 .result-filter-wrapper {
     padding: 0 5px;
 }
@@ -273,9 +336,33 @@ export default {
     cursor: pointer;
 }
 
+/***分页组件 *************/
 .pagination_wrapper {
     padding-right: 15px;
     display: flex;
     justify-content: right;
 }
+
+/*需求详情对话框 */
+.requirement-detail-dialog {
+    width: 400px;
+    height: 600px;
+}
+
+.requirement-detail-dialog .el-row {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.requirement-detail-wrapper {
+    padding: 0 10px;
+}
+
+.requirement-detail-wrapper span {
+    display: block;
+    text-align: right;
+    width: 100%;
+}
 </style>