保存进度!

This commit is contained in:
2023-02-04 01:19:18 +08:00
parent 1787838b3a
commit 02b2fc9ef2
8 changed files with 176 additions and 869 deletions

View File

@@ -1,259 +0,0 @@
<!-- eslint-disable no-unused-vars -->
<!--
* @Author: Kane
* @Date: 2022-12-14 15:23:54
* @LastEditors: Kane
* @LastEditTime: 2023-01-28 21:35:47
* @FilePath: \admin_system\src\views\account\Login.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<div id="login">
<div class="form-warp">
<ul class="menu-tab">
<li :class="{ 'current': current_menu === item.type }" @click="onToggleMenu(item.type)" v-for="item in tab_menu"
:key="item.type">{{ item.label }}
</li>
</ul>
<!-- <el-form ref="form" :model="form"> -->
<el-form ref="form">
<el-form-item>
<label class="form-label">用户名</label>
<el-input type="text" v-model.lazy.trim="loginForm.username"></el-input>
</el-form-item>
<el-form-item>
<label class="form-label">密码</label>
<el-input type="password" v-model.lazy.trim="loginForm.password"></el-input>
</el-form-item>
<el-form-item v-show="current_menu === tab_menu[1].type">
<label class="form-label">确认密码</label>
<el-input type="password" disabled v-model.lazy.trim="loginForm.confirm_password"></el-input>
</el-form-item>
<el-form-item>
<label class="form-label">验证码</label>
<el-row :gutter="10">
<el-col :span="14">
<el-input type="text" disabled></el-input>
</el-col>
<el-col :span="10">
<el-button type="danger" disabled class="el-button-block" @click="getValidateCode()">获取验证码</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary" class="el-button-block" @click="login" :disabled="submit_btn_disable"
:loading="submit_btn_loading">
{{ current_menu === "login" ? "登录" : "注册" }}
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { Login } from "@/utils/api/info/account";
import { ElMessage } from "element-plus";
import router from "../../router/index";
export default {
name: "loginPage",
data()
{
return {
loginForm: {
username: "",
password: "",
confirm_password: "",
validateCode: "",
},
tab_menu: [
{ type: "login", label: "登录" },
{ type: "regiester", label: "注册" },
],
current_menu: "",
staffInfo: null,
submit_btn_disable: false,
submit_btn_loading: false,
};
},
methods: {
onToggleMenu(type)
{
this.current_menu = type;
console.log(process.env.VUE_APP_API_URL_LOGIN);
},
getValidateCode()
{
ElMessage({
message: "测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字",
center: true,
type: "error",
});
},
/**
* 登录
*/
login()
{
if (this.loginForm.username.length === 0 || this.loginForm.password === 0)
{
ElMessage({
message: "请填写您的P13账号和密码",
type: "error",
});
return;
}
this.submit_btn_disable = true;
this.submit_btn_loading = true;
const userInfo = {
p13account: this.loginForm.username,
password: this.loginForm.password,
};
Login(userInfo)
.then((response) =>
{
//成功获取到返回值时的响应函数,要判断返回值的成功标志
//验证成功将获取到的token和用户信息保存到vuex和localStoreage
//然后router.push进行路由跳转到控制台
const data = response.data;
//判断是否成功,显示提示信息
if (data.success === true)
{
ElMessage({
message: data.message,
type: "success",
center: true,
});
this.staffInfo = data.staffInfo;
//保存用户信息和token
this.saveUserInfo(data);
//验证成功,跳转路由
router.push("/Desktop");
}
else
{
//验证失败
ElMessage({
message: data.message,
type: "error",
center: true,
});
this.submit_btn_disable = false;
this.submit_btn_loading = false;
}
})
.catch((error) =>
{
//没有获取到响应数据
console.log(error);
ElMessage({
message: error.message,
type: "error",
center: true,
});
this.submit_btn_disable = false;
this.submit_btn_loading = false;
});
},
saveUserInfo(userInfo) //将获取到的用户信息和token保存到vuex和localStorage
{
//保存到vuex
this.$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);
}
},
created()
{
//初始化菜单选项
this.current_menu = this.tab_menu[0].type;
},
mounted()
{
//清理状态
this.$store.state.app.userInfo = null;
},
};
</script>
<style scoped>
#login {
height: 100vh;
background-color: #344a5f;
padding-top: 50px;
}
.form-warp {
width: 320px;
padding: 30px;
margin: auto;
background-color: #ffffff10;
border-radius: 5px;
}
/*.menu-tab {
text-align: center;
margin-bottom: 15px;
li {
display: inline-block;
padding: 10px 24px;
margin: 0 10px;
color: #fff;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
&.current {
background-color: rgba(0, 0, 0, 0.1);
}
}
}*/
.menu-tab {
text-align: center;
margin-bottom: 15px;
}
.menu-tab li {
display: inline-block;
padding: 10px 24px;
margin: 0 10px;
color: #fff;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}
.menu-tab .current {
background-color: rgba(0, 0, 0, 0.1);
}
.form-label {
display: block;
color: #fff;
font-size: 14px;
}
.el-button-block {
width: 100%;
}
</style>

View File

@@ -2,14 +2,14 @@
* @Author: Kane
* @Date: 2023-02-02 22:19:12
* @LastEditors: Kane
* @LastEditTime: 2023-02-03 18:49:39
* @LastEditTime: 2023-02-04 00:51:35
* @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<div class="requirement_wrapper">
<div class="requirement_wrapper" v-loading="ui.pageVisible">
<!-- 查询框 -->
<div class="search-box">
<el-row :gutter="10">
@@ -246,6 +246,7 @@ export default {
table_page_size: 10,
dialogRequirementDetailVisible: false, //需求详情对话框是否显示
dialogRequirementDetailLoadingVisible: true,
pageVisible: false,
activeTabName: "requirement-detail",
requirement_status: [
"未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
@@ -287,6 +288,7 @@ export default {
const addNewRequirement = () =>
{
router.push({
name: "RequirementEditing",
query: {
@@ -309,6 +311,7 @@ export default {
const showRequirementDetail = (serial_no) =>
{
console.log("状态", query_param.status);
setTimeout(() =>
{
ui.dialogRequirementDetailLoadingVisible = false;

View File

@@ -1,458 +0,0 @@
<!--
* @Author: Kane
* @Date: 2023-01-25 23:13:47
* @LastEditors: Kane
* @LastEditTime: 2023-02-02 22:16:13
* @FilePath: \IT工具综合平台\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 v-model.trim.lazy="this.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.status">
<el-option v-for="option in ui.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.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="ui.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="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="this.ui.table_current_page"
:page-size="this.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">
<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>标题</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.status"></el-input>
</el-col>
<el-col :span="2">
<span>当前处理人</span>
</el-col>
<el-col :span="6">
<el-input readonly v-model="query_param.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.status"></el-input>
</el-col>
<el-col :span="2">
<span>联系方式</span>
</el-col>
<el-col :span="6">
<el-input readonly v-model="query_param.status"></el-input>
</el-col>
<el-col :span="2">
<span>提交日期</span>
</el-col>
<el-col :span="6">
<el-input readonly v-model="query_param.status"></el-input>
</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="备注">
<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';
import router from "@/router/index";
export default {
name: "requirement-manager",
data()
{
return {
requirement_data: requirementTestData, //需求数据,当前值是测试数据
ui: {
table_current_page: 1,//分页组件当前的页面索引
table_page_size: 10,
dialogRequirementDetailVisible: false, //需求详情对话框是否显示
dialogRequirementDetailLoadingVisible: false,
activeTabName: "requirement-detail",
requirement_status: [
"未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
],
},
query_param: {
title: "",
serial_no: "",
request_people: "",
commit_start_date: "",
commit_end_date: "",
status: "",
},
};
},
computed: {
//计算表格的高度
tableHeight()
{
return 10 * 50 + 40;
},
tableData()
{
const startIndex = this.ui.table_page_size * (this.ui.table_current_page - 1);
const endIndex = (this.ui.table_page_size * this.ui.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.ui.table_page_size = pageSize;
},
//用户变更当前页时消息处理函数
onCurrentPageIndexChange(pageIndex)
{
this.ui.table_current_page = pageIndex;
},
addNewRequirement()
{
//console.log("router", this.$route);
router.push({
name: "RequirementEditing",
query: {
serial: "new",
}
});
},
editRequirement(requirement_serial)
{
window.localStorage.setItem("requirement_serial", requirement_serial);
router.push({
name: "RequirementEditing",
query: {
serial: requirement_serial,
}
});
},
},
//声明周期
created()
{
this.query_param.commit_end_date = new Date(Date.now());
this.query_param.commit_start_date = new Date();
this.query_param.commit_start_date.setMonth(this.query_param.commit_end_date.getMonth() - 1);
}
};
</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 15px 15px !important;
}
</style>