加入需求管理界面控件值储存功能。

This commit is contained in:
Kane Wang 2023-02-06 16:43:40 +08:00
parent 9b57dbb772
commit 8e72f3bccd
10 changed files with 291 additions and 71 deletions

View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-04 11:05:44 * @Date: 2023-01-04 11:05:44
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-02-05 10:53:45 * @LastEditTime: 2023-02-06 09:26:48
* @FilePath: /IT/src/layout/Index.vue * @FilePath: /IT/src/layout/Index.vue
* @Description: * @Description:
* *
@ -97,10 +97,9 @@ export default {
/* width: 175px; */ /* width: 175px; */
background-color: #2f4156; background-color: #2f4156;
overflow-x: hidden; overflow-x: hidden;
/* height: calc(100vh - 50px); height: calc(100vh - 50px);
max-height: calc(100vh - 50px); max-height: calc(100vh - 50px);
min-height: calc(100vh - 50px); */ min-height: calc(100vh - 50px);
height: 100%;
} }
#layout-header { #layout-header {

View File

@ -2,14 +2,14 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-04 11:30:33 * @Date: 2023-01-04 11:30:33
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-02-06 00:25:26 * @LastEditTime: 2023-02-06 09:28:16
* @FilePath: /IT/src/layout/components/Aside.vue * @FilePath: /IT/src/layout/components/Aside.vue
* @Description: * @Description:
* *
* Copyright (c) ${2022} by Kane, All Rights Reserved. 223142 2f4156 * Copyright (c) ${2022} by Kane, All Rights Reserved. 223142 2f4156
--> -->
<template> <template>
<el-scrollbar class="wrapper" height="400px"> <el-scrollbar class="wrapper">
<el-menu id="side-bar" router :default-active="currentPath" background-color="#2f4156" text-color="#fff" <el-menu id="side-bar" router :default-active="currentPath" background-color="#2f4156" text-color="#fff"
active-text-color="#ffd04b" :collapse="asideCollapse"> active-text-color="#ffd04b" :collapse="asideCollapse">
<template v-for="route in routes" :key="route.path"> <template v-for="route in routes" :key="route.path">

View File

@ -0,0 +1,99 @@
<!--
* @Author: Kane
* @Date: 2023-01-04 11:39:04
* @LastEditors: Kane
* @LastEditTime: 2023-02-04 01:09:49
* @FilePath: \IT工具综合平台\src\layout\components\Header.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<div class="app_banner no_select">
<span class="company_name">CPIC</span>
<div class="version_div">
<div>测试版</div>
<div>3.6.7 x64 Build 202208301257</div>
</div>
<div class="buttons_div">
<User style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;" />
<SwitchButton style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;" @click="logout" />
</div>
</div>
</template>
<script>
//import { ElMessage } from "element-plus";
import { Logout } from "../../utils/api/info/account";
export default {
name: "AppBanner",
data()
{
return {};
},
// created() {
// console.log("banner");
// },
mounted()
{
//console.log("banner");
},
methods: {
logout()
{
this.$confirm("是否退出系统?", "请确认", {
confirmButtonText: "是",
cancelButtonText: "否",
type: "warning",
}).then(() =>
{
Logout();
});
},
},
};
</script>
<style scoped>
.app_banner {
background-color: var(--banner-background-color);
color: #fff;
display: flex;
justify-content: left;
align-items: center;
padding: 0px 15px 0px 15px;
height: 100%;
position: relative;
}
.no_select {
-webkit-touch-callout: none;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
.app_banner>*+* {
margin-left: 10px;
}
.company_name {
font-size: 2rem;
}
.version_div {
font-size: 0.5rem;
}
.buttons_div {
margin-left: auto;
padding-top: 5px;
/* border: 1px solid salmon; */
}
</style>

View File

@ -2,8 +2,8 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-04 11:39:04 * @Date: 2023-01-04 11:39:04
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-02-04 01:09:49 * @LastEditTime: 2023-02-06 10:17:22
* @FilePath: \IT工具综合平台\src\layout\components\Header.vue * @FilePath: /IT/src/layout/components/Header.vue
* @Description: * @Description:
* *
* Copyright (c) ${2022} by Kane, All Rights Reserved. * Copyright (c) ${2022} by Kane, All Rights Reserved.
@ -23,26 +23,16 @@
</template> </template>
<script> <script>
//import { ElMessage } from "element-plus"; import { ElMessageBox } from "element-plus";
import { Logout } from "../../utils/api/info/account"; import { Logout } from "../../utils/api/info/account";
export default { export default {
name: "AppBanner", name: "AppBanner",
data() setup(props, context)
{ {
return {}; const logout = () =>
},
// created() {
// console.log("banner");
// },
mounted()
{
//console.log("banner");
},
methods: {
logout()
{ {
this.$confirm("是否退出系统?", "请确认", { ElMessageBox.confirm("是否退出系统?", "请确认", {
confirmButtonText: "是", confirmButtonText: "是",
cancelButtonText: "否", cancelButtonText: "否",
type: "warning", type: "warning",
@ -50,7 +40,9 @@ export default {
{ {
Logout(); Logout();
}); });
}, };
return { logout, };
}, },
}; };
</script> </script>

View File

@ -20,7 +20,7 @@
<script> <script>
export default { export default {
name: "LayoutMain" name: "LayoutMain",
}; };
</script> </script>

View File

@ -10,8 +10,11 @@
*/ */
const state = { const state = {
status: {}, status: {},//包含全部需求状态的数组
status_update_time: new Date(), status_update_time: new Date(),
ui: {
selected_status: [], //已选择的需求状态
},
}; };
export default { export default {

View File

@ -0,0 +1,73 @@
/*
* @Author: Kane
* @Date: 2023-02-06 14:12:11
* @LastEditors: Kane
* @LastEditTime: 2023-02-06 15:52:55
* @FilePath: /IT/src/utils/api/LocalStorage.js
* @Description: 初始化localStorage中保存的值
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
//常量
const REQUIREMRNT_UI = "requirement_ui";
//需求管理模块
function loadRequirementUI()
{
// debugger;
let requirementUI = null;
try
{
requirementUI = JSON.parse(window.localStorage.getItem(REQUIREMRNT_UI));
}
catch (error)
{
console.log("转换requirement-ui失败", error);
requirementUI = {};
}
//如果之前不存在json转换结果也会是null
if (requirementUI === null)
{
requirementUI = {};
}
if (requirementUI.selected_status === undefined)
{
requirementUI.selected_status = [];
}
if (requirementUI.title === undefined)
{
requirementUI.title = "";
}
if (requirementUI.serial_no === undefined)
{
requirementUI.serial_no = "";
}
if (requirementUI.request_people === undefined)
{
requirementUI.request_people = "";
}
if (requirementUI.commit_start_date === undefined)
{
requirementUI.commit_start_date = new Date();
requirementUI.commit_start_date.setMonth(0);
requirementUI.commit_start_date.setDate(1);
}
if (requirementUI.commit_end_date === undefined)
{
requirementUI.commit_end_date = new Date();
}
return requirementUI;
}
export { loadRequirementUI };

View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-12-22 17:18:10 * @Date: 2022-12-22 17:18:10
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-02-04 21:51:11 * @LastEditTime: 2023-02-06 09:19:32
* @FilePath: /IT/src/utils/api/request.js * @FilePath: /IT/src/utils/api/request.js
* @Description: 配置axios拦截器 * @Description: 配置axios拦截器
* *
@ -72,7 +72,7 @@ service.interceptors.response.use(
confirmButtonText: "是", confirmButtonText: "是",
cancelButtonText: "否", cancelButtonText: "否",
type: "warning", type: "warning",
}, }
).then(() => ).then(() =>
{ {
router.replace("/login"); router.replace("/login");

View File

@ -3,7 +3,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-12-14 15:23:54 * @Date: 2022-12-14 15:23:54
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-02-04 16:55:12 * @LastEditTime: 2023-02-06 14:32:18
* @FilePath: /IT/src/views/account/Login.vue * @FilePath: /IT/src/views/account/Login.vue
* @Description: * @Description:
* *
@ -59,6 +59,7 @@ import { useStore } from "vuex";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { Login } from "@/utils/api/info/account"; import { Login } from "@/utils/api/info/account";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
//import router from "../../router/index"; //import router from "../../router/index";
export default { export default {
@ -77,8 +78,8 @@ export default {
const tab_menu = reactive( const tab_menu = reactive(
[ [
{ type: "login", label: "登录" }, { type: "login", label: "登录", },
{ type: "regiester", label: "注册" }, { type: "regiester", label: "注册", },
]); ]);
const ui = reactive( const ui = reactive(
@ -103,6 +104,23 @@ export default {
type: "error", type: "error",
}); });
}; };
//tokenvuexlocalStorage
const saveUserInfo = (userInfo) =>
{
console.log("保存用户信息");
console.log("保存用户信息", store);
//vuex
store.commit("app/SET_USERINFO", userInfo);
//localStorage
const token = userInfo.token;
const userInfoJson = JSON.stringify(userInfo);
window.localStorage.setItem("token", token);
window.localStorage.setItem("user_info", userInfoJson);
};
/** /**
* 登录 * 登录
*/ */
@ -180,22 +198,6 @@ export default {
}); });
}; };
//tokenvuexlocalStorage
const saveUserInfo = (userInfo) =>
{
console.log("保存用户信息");
console.log("保存用户信息", store);
//vuex
store.commit("app/SET_USERINFO", userInfo);
//localStorage
const token = userInfo.token;
const userInfoJson = JSON.stringify(userInfo);
window.localStorage.setItem("token", token);
window.localStorage.setItem("user_info", userInfoJson);
};
onBeforeMount(() => onBeforeMount(() =>
{ {
// //

View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-02-02 22:19:12 * @Date: 2023-02-02 22:19:12
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-02-06 08:33:42 * @LastEditTime: 2023-02-06 15:57:19
* @FilePath: /IT/src/views/requirement/RequirementManager.vue * @FilePath: /IT/src/views/requirement/RequirementManager.vue
* @Description: * @Description:
* *
@ -38,7 +38,8 @@
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<!-- <el-input v-model="query_param.status"></el-input> --> <!-- <el-input v-model="query_param.status"></el-input> -->
<el-select multiple collapse-tags collapse-tags-tooltip v-model.trim.lazy="query_param.status"> <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" <el-option v-for="option in statusData" :value="option.status_name" lable="option.status_code"
:key="option.status_code + option.status_name"></el-option> :key="option.status_code + option.status_name"></el-option>
</el-select> </el-select>
@ -161,13 +162,13 @@
<span>状态</span> <span>状态</span>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-input readonly v-model="query_param.status"></el-input> <el-input readonly v-model="query_param.select_status"></el-input>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<span>当前处理人</span> <span>当前处理人</span>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-input readonly v-model="query_param.status"></el-input> <el-input readonly v-model="query_param.select_status"></el-input>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="10"> <el-row :gutter="10">
@ -175,19 +176,19 @@
<span>联系人</span> <span>联系人</span>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-input readonly v-model="query_param.status"></el-input> <el-input readonly v-model="query_param.select_status"></el-input>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<span>联系方式</span> <span>联系方式</span>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-input readonly v-model="query_param.status"></el-input> <el-input readonly v-model="query_param.select_status"></el-input>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<span>提交日期</span> <span>提交日期</span>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-input readonly v-model="query_param.status"></el-input> <el-input readonly v-model="query_param.select_status"></el-input>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -228,12 +229,13 @@
</template> </template>
<script> <script>
import { reactive, computed, onBeforeMount } from "vue"; import { reactive, computed, onBeforeMount, onBeforeUnmount } from "vue";
//import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; //import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { requirementTestData } from '@/test/data/TestData'; import { requirementTestData } from '@/test/data/TestData';
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { query_requirement_ui } from "@/utils/api/requirement/requirement"; import { query_requirement_ui } from "@/utils/api/requirement/requirement";
import { loadRequirementUI } from "@/utils/api/LocalStorage.js";
export default { export default {
name: "requirement-manager", name: "requirement-manager",
@ -250,20 +252,39 @@ export default {
dialogRequirementDetailLoadingVisible: true, dialogRequirementDetailLoadingVisible: true,
pageVisible: false, pageVisible: false,
activeTabName: "requirement-detail", activeTabName: "requirement-detail",
requirement_status: [
"未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
],
});
const query_param = reactive(
{
title: "",
serial_no: "",
request_people: "",
commit_start_date: new Date(),
commit_end_date: new Date(),
status: "",
}); });
// const query_param = reactive(
// {
// title: "",
// serial_no: "",
// request_people: "",
// commit_start_date: new Date(),
// commit_end_date: new Date(),
// selected_status: "",
// });
const query_param = reactive(loadRequirementUI());
//
// let saved_ui = query_param;
// if (saved_ui === null || saved_ui === "{}")
// {
// saved_ui = {
// selected_status: [],
// };
// window.localStorage.setItem("requirement_ui", JSON.stringify(saved_ui));
// }
// else
// {
// saved_ui = JSON.parse(saved_ui);
// }
// const selected_status = saved_ui.selected_status;
// //
// const requirement_status = store.state.requirement.status;
/*计算变量 *****************/
const tableHeight = computed(() => const tableHeight = computed(() =>
{ {
return 10 * 50 + 40; return 10 * 50 + 40;
@ -318,7 +339,7 @@ export default {
const showRequirementDetail = (serial_no) => const showRequirementDetail = (serial_no) =>
{ {
console.log("状态", query_param.status); console.log("状态", query_param.select_status);
setTimeout(() => setTimeout(() =>
{ {
ui.dialogRequirementDetailLoadingVisible = false; ui.dialogRequirementDetailLoadingVisible = false;
@ -335,15 +356,45 @@ export default {
ui.dialogRequirementDetailLoadingVisible = true; ui.dialogRequirementDetailLoadingVisible = true;
}; };
//
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;
};
onBeforeMount(() => onBeforeMount(() =>
{ {
query_param.commit_end_date = new Date(Date.now()); // debugger;
query_param.commit_start_date = new Date(); //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;
query_param.commit_start_date.setMonth(query_param.commit_end_date.getMonth() - 1); if (typeof status_name === "string" && status_name.length != 0)
{
query_param.selected_status.push(status_name);
}
}
onUIChange();
}
}); });
// onBeforeUnmount(() =>
{
onUIChange();
});
/*加载数据***************************/
//
query_requirement_ui(store.state.requirement, "ErrorPage"); query_requirement_ui(store.state.requirement, "ErrorPage");
// //
@ -366,6 +417,7 @@ export default {
onTablePageSizeChange, onTablePageSizeChange,
showRequirementDetail, showRequirementDetail,
closeRequirementDetail, closeRequirementDetail,
onUIChange,
// //
onBeforeMount, onBeforeMount,
}; };