保存进度！
This commit is contained in:
259
code/web/IT工具综合平台/src/views/account/Login.vue
Normal file
259
code/web/IT工具综合平台/src/views/account/Login.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<!-- 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>
|
||||
27
code/web/IT工具综合平台/src/views/info/EditStaffInfo.vue
Normal file
27
code/web/IT工具综合平台/src/views/info/EditStaffInfo.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-24 23:25:16
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-24 23:57:11
|
||||
* @FilePath: \admin_system\src\views\info\EditStaffInfo.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EditStaffInfo",
|
||||
data: function ()
|
||||
{
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
189
code/web/IT工具综合平台/src/views/info/StaffInfo.vue
Normal file
189
code/web/IT工具综合平台/src/views/info/StaffInfo.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
/* eslint-disable */
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-12 14:43:46
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-26 23:18:49
|
||||
* @FilePath: \admin_system\src\views\info\StaffInfo.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="query_box">
|
||||
<el-form inline width="600px">
|
||||
<el-row :gutter="10" class="el-row">
|
||||
<el-col :span="8">
|
||||
<el-input v-model="query_param.staff_code" placeholder="请输入P09工号或P13账号"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="danger">查询</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table ref="table" :data="table_data" border width="100%" stripe>
|
||||
<el-table-column type="selection" min-width="30" align="center"></el-table-column>
|
||||
<el-table-column min-width="200" label="员工名称" align="left" fixed="left">
|
||||
<template #default="rowdata">
|
||||
<span @click="onShowStaffInfo(rowdata.row)" style="cursor: pointer; display: block; height: 100%">{{
|
||||
rowdata.row.staff_name
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="staff_code" min-width="100" label="工号" align="left"></el-table-column>
|
||||
<el-table-column prop="p13uid" min-width="200" label="P13账号" align="left"></el-table-column>
|
||||
<el-table-column label="操作" min-width="200" align="center" fixed="right">
|
||||
<template #default>
|
||||
<el-button type="warning">编辑</el-button>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row :gutter="10" width="100%">
|
||||
<el-col :span="18">
|
||||
<el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
|
||||
@size-change="onTablePageSizeChange" size="small" background :current-page="this.table_current_page"
|
||||
:page-size="10" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, nex, jumper"
|
||||
:total="table_data.length">
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable no-unused-vars*/
|
||||
export default {
|
||||
name: "staff-info",
|
||||
data()
|
||||
{
|
||||
return {
|
||||
query_param: {
|
||||
staff_code: "",
|
||||
},
|
||||
table_current_page: 1,
|
||||
table_data: [
|
||||
{
|
||||
staff_name: "王炜",
|
||||
staff_code: "588",
|
||||
p13uid: "wangwei-202",
|
||||
},
|
||||
{
|
||||
staff_name: "王炜",
|
||||
staff_code: "588",
|
||||
p13uid: "wangwei-202",
|
||||
},
|
||||
{
|
||||
staff_name: "王炜",
|
||||
staff_code: "588",
|
||||
p13uid: "wangwei-202",
|
||||
},
|
||||
{
|
||||
staff_name: "王炜",
|
||||
staff_code: "588",
|
||||
p13uid: "wangwei-202",
|
||||
},
|
||||
{
|
||||
staff_name: "王炜",
|
||||
staff_code: "588",
|
||||
p13uid: "wangwei-202",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onTableEdit(row) { },
|
||||
/**
|
||||
* 根据表格行index返回样式，实现斑马纹
|
||||
* @param row
|
||||
* @param rowIndex
|
||||
* @return 返回的样式名称
|
||||
*/
|
||||
tabRowClassName(row, rowIndex)
|
||||
{
|
||||
let index = rowIndex + 1;
|
||||
if (index % 2 == 0)
|
||||
{
|
||||
return "warning-row";
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 点击表格 用户名称 时的消息处理函数
|
||||
* @param {*} staff
|
||||
*/
|
||||
onShowStaffInfo(staff)
|
||||
{
|
||||
console.log("点击名称", staff);
|
||||
},
|
||||
/**
|
||||
* 表格页显示数量变更时消息处理函数
|
||||
*/
|
||||
onTablePageSizeChange() { },
|
||||
/**
|
||||
* 用户变更当前页时消息处理函数
|
||||
*/
|
||||
onCurrentPageIndexChange() { },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.query_box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.query_box>*+* {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.info_box {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-table .warning-row {
|
||||
background-color: #f3f9ff;
|
||||
}
|
||||
|
||||
.query_box:hover,
|
||||
.info_box:hover {
|
||||
box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 25%);
|
||||
}
|
||||
|
||||
div.cell {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pull_left {
|
||||
margin-left: 15px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.pull_right {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.pull_right:last-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-25 11:26:11
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-25 11:26:13
|
||||
* @FilePath: \admin_system\src\views\network\NetworkPoint copy.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-25 11:24:47
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-25 11:24:48
|
||||
* @FilePath: \admin_system\src\views\network\NetworkPoint.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div>网络点位信息修改</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "network-point-editor",
|
||||
data()
|
||||
{
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-25 11:24:47
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-25 11:34:07
|
||||
* @FilePath: \admin_system\src\views\network\NetworkPoint.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div>网络点位管理</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "network-point-management",
|
||||
data()
|
||||
{
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
27
code/web/IT工具综合平台/src/views/network/switch/SwitchManager.vue
Normal file
27
code/web/IT工具综合平台/src/views/network/switch/SwitchManager.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-25 14:48:53
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-25 14:48:54
|
||||
* @FilePath: \admin_system\src\views\network\switch\SwitchManager.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
交换机管理
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "switch-manager",
|
||||
data()
|
||||
{
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
23
code/web/IT工具综合平台/src/views/news/News.vue
Normal file
23
code/web/IT工具综合平台/src/views/news/News.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-06 15:26:44
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-06 15:26:46
|
||||
* @FilePath: \admin_system\src\views\news\News.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
信息管理
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NewsPage"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
52
code/web/IT工具综合平台/src/views/news/NewsEdit.vue
Normal file
52
code/web/IT工具综合平台/src/views/news/NewsEdit.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-06 19:05:53
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-08 19:26:26
|
||||
* @FilePath: \admin_system\src\views\news\NewsEdit.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
信息编辑:{{ getCount }}
|
||||
<br>
|
||||
<el-button type="danger" @click="this.add">计数加一</el-button>
|
||||
<SvgIcon icon="house"></SvgIcon>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//import { ElMessage } from 'element-plus';
|
||||
|
||||
export default {
|
||||
name: "NewsEdit",
|
||||
data()
|
||||
{
|
||||
return {
|
||||
store: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getCount()
|
||||
{
|
||||
return this.$store.state.app.count;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
add()
|
||||
{
|
||||
let count = this.store.state.app.count + 1;
|
||||
|
||||
this.store.commit("app/SET_COUNT", count);
|
||||
},
|
||||
},
|
||||
created()
|
||||
{
|
||||
this.store = this.$store;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
33
code/web/IT工具综合平台/src/views/news/NewsTest.vue
Normal file
33
code/web/IT工具综合平台/src/views/news/NewsTest.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-06 19:23:12
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-06 19:23:29
|
||||
* @FilePath: \admin_system\src\views\news\NewsTest.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-06 15:26:44
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-06 15:26:46
|
||||
* @FilePath: \admin_system\src\views\news\News.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
信息管理
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NewsPage"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
67
code/web/IT工具综合平台/src/views/overview/OverView.vue
Normal file
67
code/web/IT工具综合平台/src/views/overview/OverView.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-06 15:30:12
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-28 09:44:31
|
||||
* @FilePath: \admin_system\src\views\overview\OverView.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<el-form :inline="true" label-width="5em" class="query_form">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="7">
|
||||
<el-form-item label="需求编号">
|
||||
<el-input style="width:100%;"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="标题">
|
||||
<el-input style="width:100%;"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="提交人">
|
||||
<el-input style="width:100%;"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3"></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="7">
|
||||
<el-form-item label="状态">
|
||||
<el-select style="width:100%;">
|
||||
<el-option key="部门审批" value="部门审批"></el-option>
|
||||
<el-option key="需求分析" value="需求分析">需求分析</el-option>
|
||||
<el-option key="技术开发" value="技术开发">技术开发</el-option>
|
||||
<el-option key="被退回" value="被退回"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="提交日期">
|
||||
<el-date-picker style="width:100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="至">
|
||||
<el-date-picker style="width:100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3"></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "OverVue"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.query_form {
|
||||
max-width: 63em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-25 23:16:29
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-25 23:19:00
|
||||
* @FilePath: \admin_system\src\views\requirement\RequirementEditing.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-25 23:13:47
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-25 23:15:21
|
||||
* @FilePath: \admin_system\src\views\requirement\RequirementManager.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
需求编辑页面
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "requirement-editing",
|
||||
data()
|
||||
{
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
407
code/web/IT工具综合平台/src/views/requirement/RequirementManager.vue
Normal file
407
code/web/IT工具综合平台/src/views/requirement/RequirementManager.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-25 23:13:47
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-29 10:03:40
|
||||
* @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></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="400px">
|
||||
<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="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" 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 15px 15px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user