Kane/vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

加入需求详情对话框

Browse Source
This commit is contained in:
Kane Wang 2023-01-28 18:19:21 +08:00
parent f5aa4c956e
commit a6f2ec63ef
1 changed files with 127 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
/* background-color: #fff; */
/* border-radius: 5px; */
/* box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 25%); */
/* 整个页面的外壳 ******************************/
.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;
}
/* 查询框 **********************************/
.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>