614 lines
22 KiB
Vue
614 lines
22 KiB
Vue
<!--
|
||
* @Author: Kane
|
||
* @Date: 2023-02-02 22:19:12
|
||
* @LastEditors: Kane
|
||
* @LastEditTime: 2023-02-08 16:45:11
|
||
* @FilePath: /IT工具综合平台/src/views/requirement/RequirementManager.vue
|
||
* @Description:
|
||
*
|
||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||
-->
|
||
<template>
|
||
<div class="requirement_wrapper" v-loading="ui.pageVisible">
|
||
<!-- 查询框 -->
|
||
<div class="search-box">
|
||
<el-row :gutter="10">
|
||
<el-col :span="2">
|
||
<span>标题：</span>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<el-input v-model.trim.lazy="query_param.title"></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.trim.lazy="query_param.serial_no" placeholder="请输入末尾三位数字"></el-input>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>申请人：</span>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-input v-model.trim.lazy="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.trim.lazy="query_param.selected_status">
|
||
<el-option v-for="option in statusData" :value="option.status_name" lable="option.status_code"
|
||
:key="option.status_code + option.status_name"></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.commit_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.commit_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 @click="addNewRequirement()">新增</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="showRequirementDetail(requirement.row.serial_no)" 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="scope">
|
||
<el-button type="warning" icon="edit" @click="editRequirement(scope.row.serial_no)">编辑</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="ui.table_current_page"
|
||
:page-size="ui.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="ui.dialogRequirementDetailVisible"
|
||
width="900px" :close-on-click-modal="true" :close-on-press-escape="false" :show-close="true" :center="false"
|
||
@close="closeRequirementDetail">
|
||
<el-tabs v-loading="ui.dialogRequirementDetailLoadingVisible" v-model="ui.activeTabName">
|
||
<el-tab-pane name="requirement-detail" label="基本信息">
|
||
<el-scrollbar height="400px">
|
||
<div class="requirement-detail-wrapper">
|
||
<el-row :gutter="10">
|
||
<el-col :span="2">
|
||
<span>标题1</span>
|
||
</el-col>
|
||
<el-col :span="22">
|
||
<el-input readonly></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.serial_no" readonly></el-input>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>主系统</span>
|
||
</el-col>
|
||
<el-col :span="14">
|
||
<el-input readonly></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="2">
|
||
<span>需求分类</span>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input readonly v-model="query_param.request_people"></el-input>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>状态</span>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input readonly v-model="query_param.select_status"></el-input>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>当前处理人</span>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input readonly v-model="query_param.select_status"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="2">
|
||
<span>联系人</span>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input readonly v-model="query_param.select_status"></el-input>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>联系方式</span>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input readonly v-model="query_param.select_status"></el-input>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<span>提交日期</span>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input readonly v-model="query_param.select_status"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<div style="border: 1px solid #eee">
|
||
<Toolbar style="border-bottom: 1px solid #eee" :editor="detailEditorRef"
|
||
:defaultConfig="detailToolbarConfig" :mode="mode" />
|
||
<Editor readonly style="height: 200px; overflow-y: hidden;" v-model="valueHtml"
|
||
:defaultConfig="detailEditorConfig" :mode="mode"
|
||
@onCreated="handleDetailEditorCreated" />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-scrollbar>
|
||
</el-tab-pane>
|
||
<el-tab-pane name="requirement-content" label="申请材料">
|
||
<el-scrollbar height="400px"></el-scrollbar>
|
||
</el-tab-pane>
|
||
<el-tab-pane name="issue-date" label="排期">
|
||
<el-scrollbar height="400px">
|
||
<el-table style="width:100%;height:400px;" border stripe>
|
||
<el-table-column label="系统" align="center" min-width="200"></el-table-column>
|
||
<el-table-column label="功能" align="center" min-width="200"></el-table-column>
|
||
<el-table-column label="首次排期" align="center" width="150"></el-table-column>
|
||
<el-table-column label="最新排期" align="center" width="150"></el-table-column>
|
||
</el-table>
|
||
</el-scrollbar>
|
||
</el-tab-pane>
|
||
<el-tab-pane name="comment" label="备注">
|
||
<div style="border: 1px solid #eee; height: 400px;">
|
||
<Toolbar style="border-bottom: 1px solid #eee" :editor="commentEditorRef"
|
||
:defaultConfig="commentToolbarConfig" :mode="mode" />
|
||
<Editor readonly style="height: 300px; overflow-y: hidden;" v-model="valueHtml"
|
||
:defaultConfig="commentEditorConfig" :mode="mode" @onCreated="handleCommentEditorCreated" />
|
||
</div>
|
||
</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 '@wangeditor/editor/dist/css/style.css';
|
||
|
||
import { reactive, computed, shallowRef, onBeforeMount, onBeforeUnmount } from "vue";
|
||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
||
import { requirementTestData } from '@/test/data/TestData';
|
||
import { useRouter } from "vue-router";
|
||
import { useStore } from "vuex";
|
||
import { query_requirement_ui } from "@/utils/api/requirement/requirement";
|
||
import { loadRequirementUI } from "@/utils/api/LocalStorage.js";
|
||
|
||
export default {
|
||
name: "requirement-manager",
|
||
components: { Editor, Toolbar, },
|
||
setup()
|
||
{
|
||
const router = useRouter();
|
||
const store = useStore();
|
||
const requirement_data = requirementTestData;
|
||
const ui = reactive(
|
||
{
|
||
table_current_page: 1,//分页组件当前的页面索引
|
||
table_page_size: 10,
|
||
dialogRequirementDetailVisible: false, //需求详情对话框是否显示
|
||
dialogRequirementDetailLoadingVisible: true,
|
||
pageVisible: false,
|
||
activeTabName: "requirement-detail",
|
||
});
|
||
//从localStorage加载
|
||
const query_param = reactive(loadRequirementUI());
|
||
const valueHtml = reactive(`<p>hello</p>`);
|
||
|
||
//#region 初始化需求详情页面的editor
|
||
const detailEditorRef = shallowRef();
|
||
const detailToolbarConfig = {};
|
||
const detailEditorConfig = {
|
||
placeholder: "请输入内容……",
|
||
readOnly: true,
|
||
};
|
||
//#endregion
|
||
|
||
//#region 初始化需求详情页面的editor
|
||
const commentEditorRef = shallowRef();
|
||
const commentToolbarConfig = {};
|
||
const commentEditorConfig = {
|
||
placeholder: "请输入内容……",
|
||
readOnly: true,
|
||
};
|
||
//#endregion
|
||
|
||
/*计算变量 *****************/
|
||
const tableHeight = computed(() =>
|
||
{
|
||
return 10 * 50 + 40;
|
||
});
|
||
|
||
const tableData = computed(() =>
|
||
{
|
||
const startIndex = ui.table_page_size * (ui.table_current_page - 1);
|
||
const endIndex = (ui.table_page_size * ui.table_current_page);
|
||
|
||
return requirement_data.slice(startIndex, endIndex);
|
||
});
|
||
|
||
const statusData = computed(() =>
|
||
{
|
||
return store.state.requirement.status;
|
||
});
|
||
|
||
const onTablePageSizeChange = (pageSize) =>
|
||
{
|
||
console.log("选择的pageSize", pageSize);
|
||
ui.table_page_size = pageSize;
|
||
};
|
||
//用户变更当前页时消息处理函数
|
||
const onCurrentPageIndexChange = (pageIndex) =>
|
||
{
|
||
ui.table_current_page = pageIndex;
|
||
};
|
||
|
||
const addNewRequirement = () =>
|
||
{
|
||
router.push({
|
||
name: "RequirementEditing",
|
||
query: {
|
||
serial: "new",
|
||
},
|
||
});
|
||
};
|
||
|
||
const editRequirement = (requirement_serial) =>
|
||
{
|
||
window.localStorage.setItem("requirement_serial", requirement_serial);
|
||
|
||
router.push({
|
||
name: "RequirementEditing",
|
||
query: {
|
||
serial: requirement_serial,
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleDetailEditorCreated = (editor) =>
|
||
{
|
||
detailEditorRef.value = editor;
|
||
};
|
||
|
||
const handleCommentEditorCreated = (editor) =>
|
||
{
|
||
commentEditorRef.value = editor;
|
||
};
|
||
|
||
|
||
/*****************************************************
|
||
* 响应显示需求详情的点击事件
|
||
* @param serial_no 需求编号
|
||
*****************************************************/
|
||
const showRequirementDetail = (serial_no) =>
|
||
{
|
||
console.log("状态", query_param.select_status);
|
||
setTimeout(() =>
|
||
{
|
||
ui.dialogRequirementDetailLoadingVisible = false;
|
||
}, 1000);
|
||
|
||
ui.dialogRequirementDetailVisible = true;
|
||
|
||
console.log("查看需求号:", serial_no);
|
||
};
|
||
|
||
|
||
//#region 需求详情对话框关闭事件
|
||
const closeRequirementDetail = () =>
|
||
{
|
||
ui.dialogRequirementDetailLoadingVisible = true;
|
||
};
|
||
//#endregion
|
||
|
||
//用户选择状态时的事件
|
||
const onUIChange = () =>
|
||
{
|
||
//console.log("当前选择的状态：", query_param.status);
|
||
// debugger;
|
||
|
||
//保存到浏览器
|
||
window.localStorage.setItem("requirement_ui", JSON.stringify(query_param));
|
||
|
||
store.state.requirement.ui.selected_status = query_param.select_status;
|
||
};
|
||
|
||
//#region onBeforeMount定义
|
||
onBeforeMount(() =>
|
||
{
|
||
// debugger;
|
||
//判断selected_status是否有保存的值，有的话就直接用，否则从获取到数据中添加
|
||
if (query_param.selected_status.length === 0)
|
||
{
|
||
for (let index in store.state.requirement.status)
|
||
{
|
||
const status_name = store.state.requirement.status[index].status_name;
|
||
|
||
if (typeof status_name === "string" && status_name.length != 0)
|
||
{
|
||
query_param.selected_status.push(status_name);
|
||
}
|
||
}
|
||
|
||
onUIChange();
|
||
}
|
||
});
|
||
//#endregion
|
||
|
||
//#region onBeforeUnmount
|
||
onBeforeUnmount(() =>
|
||
{
|
||
onUIChange();
|
||
|
||
const detailEditor = detailEditorRef.value;
|
||
|
||
if (detailEditor !== null)
|
||
{
|
||
detailEditor.destroy();
|
||
}
|
||
|
||
|
||
});
|
||
//#endregion
|
||
|
||
|
||
//#region 加载数据
|
||
//需求状态相关，默认全部选择
|
||
query_requirement_ui(store.state.requirement, "ErrorPage");
|
||
//#endregion
|
||
|
||
|
||
|
||
//输出控制台
|
||
console.log(store.state.app);
|
||
console.log(store.state.requirement);
|
||
|
||
//#region 返回值
|
||
return {
|
||
//data
|
||
requirement_data,
|
||
ui,
|
||
query_param,
|
||
//组件
|
||
detailEditorRef,
|
||
commentEditorRef,
|
||
//计算属性
|
||
tableHeight,
|
||
tableData,
|
||
statusData,
|
||
detailToolbarConfig,
|
||
detailEditorConfig,
|
||
commentToolbarConfig,
|
||
commentEditorConfig,
|
||
valueHtml,
|
||
//方法
|
||
editRequirement,
|
||
addNewRequirement,
|
||
onCurrentPageIndexChange,
|
||
onTablePageSizeChange,
|
||
showRequirementDetail,
|
||
closeRequirementDetail,
|
||
onUIChange,
|
||
handleDetailEditorCreated,
|
||
handleCommentEditorCreated,
|
||
//生命周期
|
||
onBeforeMount,
|
||
};
|
||
//#endregion
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 整个页面的外壳 ******************************/
|
||
.requirement_wrapper {
|
||
padding: 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: 10px;
|
||
}
|
||
|
||
|
||
/* 查询框 **********************************/
|
||
.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 15px 15px !important;
|
||
}
|
||
</style> |