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

<!--
 * @Author: Kane
 * @Date: 2023-01-25 23:13:47
 * @LastEditors: Kane
 * @LastEditTime: 2023-01-28 23:40:51
 * @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">
                    <span>标题：</span>
                </el-col>
                <el-col :span="16">
                    <el-input></el-input>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="2">
                    <span>需求编号：</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="query_param.requirement_serial"></el-input>
                </el-col>
                <el-col :span="2">
                    <span>申请人：</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="query_param.request_people"></el-input>
                </el-col>
                <el-col :span="2">
                    <span>状态：</span>
                </el-col>
                <el-col :span="4">
                    <!-- <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-col :span="6"></el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="2">
                    <span>提交日期：</span>
                </el-col>
                <el-col :span="4">
                    <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="4">
                    <el-date-picker v-model="query_param.submit_end_date" style="width:100%;"></el-date-picker>
                </el-col>
                <el-col :span="6">
                    <div class="button-wrapper-right">
                        <el-button type="primary" icon="search">查询</el-button>
                        <el-button icon="Refresh">重置</el-button>
                    </div>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
        </div>
        <!-- 工具栏 -->
        <div class="tool-button-wrapper">
            <el-row :gutter="10">
                <el-col :span="4">
                    <div class="button-wrapper-left">
                        <el-button type="success" icon="DocumentAdd" plain>新增</el-button>
                        <el-button type="warning" icon="document" plain>导出</el-button>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="table-display-wrapper">
                        <span>结果筛选：</span>
                        <div class="result-filter-wrapper">
                            <el-checkbox-button label="已完成" checked></el-checkbox-button>
                            <el-checkbox-button label="已取消" checked></el-checkbox-button>
                            <el-checkbox-button label="被退回" checked></el-checkbox-button>
                        </div>
                    </div>
                </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 @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">
                <template #default="requirement">
                    <span class="requirement-title">{{ requirement.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="申请人" prop="request_people" align="center" width="100"></el-table-column>
            <el-table-column label="状态" prop="status" align="center" width="100"></el-table-column>
            <el-table-column label="提交日期" prop="submit_date" align="center" width="130"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="200">
                <template #default>
                    <el-button type="warning" icon="edit">编辑</el-button>
                    <el-button type="danger" icon="delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination_wrapper">
            <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
                @size-change="onTablePageSizeChange" size="small" background v-model="this.table_current_page"
                :page-size="this.table_page_size" :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper" :total="requirement_data.length">
            </el-pagination>
        </div>
        <!-- 需求详细信息对话框 -->
        <el-dialog title="需求内容" class="requirement-detail-dialog" v-model="dialogRequirementDetailVisible" width="900px"
            :close-on-click-modal="true" :close-on-press-escape="false" :show-close="true" :center="false">
            <el-tabs v-model="activeTabName">
                <el-tab-pane name="requirement-detail" label="详情">
                    <el-scrollbar height="300px">
                        <div class="requirement-detail-wrapper">
                            <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>
                </el-tab-pane>
                <el-tab-pane name="issue-date" label="排期">
                    <el-scrollbar height="300px">
                        <el-table style="width:100%;" border stripe>
                            <el-table-column label="需求编号" align="center" min-width="200"></el-table-column>
                            <el-table-column label="初次排期" align="center" width="200"></el-table-column>
                            <el-table-column label="最终排期" align="center" width="200"></el-table-column>
                        </el-table>
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane name="comment" label="备注">
                    <el-scrollbar height="400px">
                        <p>hello world</p>
                        <p><span style="font-size: 24px;">ejfalsjfoewafsdjfdsfewo;sd;fk</span></p>
                        <ol>
                            <li><span style="color: rgb(225, 60, 57); font-size: 24px;">12344</span></li>
                            <li><span style="font-size: 24px;">33445</span></li>
                        </ol>
                        <p><br></p>
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
            <!-- <template #footer>
                <div class="dialogFooter">
                    <el-button type="primary" @click="dialogRequirementDetailVisible = false;">关闭</el-button>
                </div>
            </template> -->
        </el-dialog>
    </div>
</template>

<script>
import { requirementTestData } from '@/test/data/TestData';
export default {
    name: "requirement-manager",
    data()
    {
        return {
            requirement_data: requirementTestData, //需求数据，当前值是测试数据
            table_current_page: 1,//分页组件当前的页面索引
            table_page_size: 10,
            query_param: {
                requirement_serial: "",
                request_people: "",
                submit_start_date: "",
                submit_end_date: "",
                status: "",
            },
            requirement_status: [
                "未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
            ],
            dialogRequirementDetailVisible: false, //需求详情对话框是否显示
            activeTabName: "requirement-detail",
        };
    },
    computed: {
        //计算表格的高度
        tableHeight()
        {
            return 10 * 50 + 40;
        },
        tableData()
        {
            const startIndex = this.table_page_size * (this.table_current_page - 1);
            const endIndex = (this.table_page_size * this.table_current_page);// < this.requirement_data.length ? (this.table_page_size * this.table_current_page) : this.requirement_data.length;

            return this.requirement_data.slice(startIndex, endIndex);
        },
    },
    methods: {
        onTablePageSizeChange(pageSize)
        {
            console.log("选择的pageSize", pageSize);
            this.table_page_size = pageSize;
        },
        //用户变更当前页时消息处理函数
        onCurrentPageIndexChange(pageIndex)
        {
            this.table_current_page = pageIndex;
        },
    }
};
</script>

<style scoped>
/* 整个页面的外壳 ******************************/
.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;
    display: block;
    text-align: right;
    font-size: 15px;
    color: #5f5f5f;
}

.search-box>.el-row {
    display: flex;
    align-items: center;
    justify-content: left;
}

.search-box .el-row+.el-row {
    margin-top: 10px;
}

/* 查询结果筛选框 */
.tool-button-wrapper {
    padding: 0px 15px;
    width: 100%;
}

.tool-button-wrapper>.el-row {
    display: flex;
    align-items: center;
    justify-content: left;
}

.tool-button-wrapper span {
    font-weight: small;
    display: block;
    text-align: right;
    font-size: 15px;
    color: #5f5f5f;
}

.tool-button-wrapper .el-checkbox {
    font-size: 15px;
}

.table-display-wrapper {
    display: flex;
    align-items: center;
    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;
}

/* 需求列表 */
.requirement-title {
    display: block;
    text-align: left;
    width: 100%;
    font-size: 14px;
}

.requirement-serial {
    width: 100%;
    text-align: center;
    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-dialog .el-row+.el-row {
    margin-top: 10px;
}

.requirement-detail-wrapper {
    padding: 0px 10px;
}

.requirement-detail-wrapper span {
    display: block;
    text-align: right;
    width: 100%;
}
</style>
<style>
.requirement-detail-dialog .el-dialog__body {
    padding: 0px 15px !important;
}
</style>