继续使用setup()函数。
This commit is contained in:
parent
841741523a
commit
6cda734793
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: Kane
|
||||
* @Date: 2022-12-14 15:12:46
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-02-02 22:39:25
|
||||
* @LastEditTime: 2023-02-03 15:47:58
|
||||
* @FilePath: \IT工具综合平台\src\router\index.js
|
||||
* @Description: 定义应用路由配置
|
||||
*
|
||||
|
|
@ -71,7 +71,7 @@ const routes = [
|
|||
title: "需求管理",
|
||||
icon: "Document",
|
||||
},
|
||||
component: () => import("../views/requirement/RequirementManager32.vue"),
|
||||
component: () => import("../views/requirement/RequirementManager.vue"),
|
||||
},
|
||||
{
|
||||
path: "/requirement-editing",
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
* @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
|
||||
* @LastEditTime: 2023-02-03 15:46:55
|
||||
* @FilePath: \IT工具综合平台\src\views\account\Login32.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
<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 :class="{ 'current': ui.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"> -->
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<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">
|
||||
<el-form-item v-show="ui.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>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<el-form-item>
|
||||
<el-button type="primary" class="el-button-block" @click="login" :disabled="submit_btn_disable"
|
||||
:loading="submit_btn_loading">
|
||||
{{ current_menu === "login" ? "登录" : "注册" }}
|
||||
{{ ui.current_menu === "login" ? "登录" : "注册" }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -54,51 +54,61 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, onBeforeMount, onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { useRouter } from "vue-router";
|
||||
import { Login } from "@/utils/api/info/account";
|
||||
import { ElMessage } from "element-plus";
|
||||
import router from "../../router/index";
|
||||
//import router from "../../router/index";
|
||||
|
||||
export default {
|
||||
name: "loginPage",
|
||||
data()
|
||||
setup()
|
||||
{
|
||||
return {
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
confirm_password: "",
|
||||
validateCode: "",
|
||||
},
|
||||
tab_menu: [
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
|
||||
const loginForm = reactive({
|
||||
username: "",
|
||||
password: "",
|
||||
confirm_password: "",
|
||||
validateCode: "",
|
||||
});
|
||||
|
||||
const tab_menu = reactive(
|
||||
[
|
||||
{ type: "login", label: "登录" },
|
||||
{ type: "regiester", label: "注册" },
|
||||
],
|
||||
current_menu: "",
|
||||
staffInfo: null,
|
||||
submit_btn_disable: false,
|
||||
submit_btn_loading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onToggleMenu(type)
|
||||
]);
|
||||
|
||||
const ui = reactive(
|
||||
{
|
||||
current_menu: "",
|
||||
staffInfo: null,
|
||||
submit_btn_disable: false,
|
||||
submit_btn_loading: false,
|
||||
});
|
||||
|
||||
const onToggleMenu = (type) =>
|
||||
{
|
||||
this.current_menu = type;
|
||||
ui.current_menu = type;
|
||||
console.log(process.env.VUE_APP_API_URL_LOGIN);
|
||||
},
|
||||
getValidateCode()
|
||||
};
|
||||
|
||||
const getValidateCode = () =>
|
||||
{
|
||||
ElMessage({
|
||||
message: "测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字",
|
||||
center: true,
|
||||
type: "error",
|
||||
});
|
||||
},
|
||||
};
|
||||
/**
|
||||
* 登录
|
||||
*/
|
||||
login()
|
||||
const login = () =>
|
||||
{
|
||||
if (this.loginForm.username.length === 0 || this.loginForm.password === 0)
|
||||
if (loginForm.username.length === 0 || loginForm.password === 0)
|
||||
{
|
||||
ElMessage({
|
||||
message: "请填写您的P13账号和密码！",
|
||||
|
|
@ -108,12 +118,12 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
this.submit_btn_disable = true;
|
||||
this.submit_btn_loading = true;
|
||||
ui.submit_btn_disable = true;
|
||||
ui.submit_btn_loading = true;
|
||||
|
||||
const userInfo = {
|
||||
p13account: this.loginForm.username,
|
||||
password: this.loginForm.password,
|
||||
p13account: loginForm.username,
|
||||
password: loginForm.password,
|
||||
};
|
||||
|
||||
Login(userInfo)
|
||||
|
|
@ -133,10 +143,10 @@ export default {
|
|||
center: true,
|
||||
});
|
||||
|
||||
this.staffInfo = data.staffInfo;
|
||||
ui.staffInfo = data.staffInfo;
|
||||
|
||||
//保存用户信息和token
|
||||
this.saveUserInfo(data);
|
||||
saveUserInfo(data);
|
||||
|
||||
//验证成功，跳转路由
|
||||
router.push("/Desktop");
|
||||
|
|
@ -150,8 +160,8 @@ export default {
|
|||
center: true,
|
||||
});
|
||||
|
||||
this.submit_btn_disable = false;
|
||||
this.submit_btn_loading = false;
|
||||
ui.submit_btn_disable = false;
|
||||
ui.submit_btn_loading = false;
|
||||
}
|
||||
})
|
||||
.catch((error) =>
|
||||
|
|
@ -165,14 +175,16 @@ export default {
|
|||
center: true,
|
||||
});
|
||||
|
||||
this.submit_btn_disable = false;
|
||||
this.submit_btn_loading = false;
|
||||
ui.submit_btn_disable = false;
|
||||
ui.submit_btn_loading = false;
|
||||
});
|
||||
},
|
||||
saveUserInfo(userInfo) //将获取到的用户信息和token保存到vuex和localStorage
|
||||
};
|
||||
|
||||
//将获取到的用户信息和token保存到vuex和localStorage
|
||||
const saveUserInfo = (userInfo) =>
|
||||
{
|
||||
//保存到vuex
|
||||
this.$store.commit("app/SET_USERINFO", userInfo);
|
||||
store.commit("app/SET_USERINFO", userInfo);
|
||||
|
||||
//保存到localStorage
|
||||
const token = userInfo.token;
|
||||
|
|
@ -180,17 +192,31 @@ export default {
|
|||
|
||||
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;
|
||||
};
|
||||
|
||||
onBeforeMount(() =>
|
||||
{
|
||||
//初始化菜单选项
|
||||
ui.current_menu = tab_menu[0].type;
|
||||
});
|
||||
|
||||
onMounted(() =>
|
||||
{
|
||||
//清理状态
|
||||
store.state.app.userInfo = null;
|
||||
});
|
||||
|
||||
return {
|
||||
//数据
|
||||
ui,
|
||||
loginForm,
|
||||
tab_menu,
|
||||
//方法
|
||||
onToggleMenu,
|
||||
saveUserInfo,
|
||||
login,
|
||||
getValidateCode,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
* @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
|
||||
* @LastEditTime: 2023-02-03 11:07:02
|
||||
* @FilePath: \IT工具综合平台\src\views\requirement\RequirementEditing.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
|
|
@ -23,16 +23,28 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { onBeforeMount, onBeforeUpdate } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default {
|
||||
name: "requirement-editing",
|
||||
data()
|
||||
setup()
|
||||
{
|
||||
const route = useRoute();
|
||||
|
||||
//生命周期
|
||||
onBeforeMount(() =>
|
||||
{
|
||||
console.log("接收的参数：", route.query);
|
||||
});
|
||||
|
||||
onBeforeUpdate(() =>
|
||||
{
|
||||
console.log("接收的参数：", route.query);
|
||||
});
|
||||
|
||||
return {};
|
||||
},
|
||||
mounted()
|
||||
{
|
||||
console.log("接收的参数：", this.$route.query);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-25 23:13:47
|
||||
* @Date: 2023-02-02 22:19:12
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-02-02 22:16:13
|
||||
* @LastEditTime: 2023-02-03 16:09:22
|
||||
* @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager.vue
|
||||
* @Description:
|
||||
*
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<span>标题：</span>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-input v-model.trim.lazy="this.query_param.title"></el-input>
|
||||
<el-input v-model.trim.lazy="query_param.title"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<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">{{
|
||||
<span @click="showRequirementDetail(requirement.row.serial_no)" class="requirement-serial">{{
|
||||
requirement.row.serial_no
|
||||
}}</span>
|
||||
</template>
|
||||
|
|
@ -115,22 +115,22 @@
|
|||
</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]"
|
||||
@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">
|
||||
<el-tabs :v-loading="ui.dialogRequirementDetailLoadingVisible" v-model="ui.activeTabName">
|
||||
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>标题</span>
|
||||
<span>标题1</span>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<el-input readonly></el-input>
|
||||
|
|
@ -228,71 +228,75 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, computed, onBeforeMount } from "vue";
|
||||
//import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
||||
import { requirementTestData } from '@/test/data/TestData';
|
||||
import router from "@/router/index";
|
||||
import { useRouter } from "vue-router";
|
||||
//import router from "@/router/index";
|
||||
|
||||
export default {
|
||||
name: "requirement-manager",
|
||||
data()
|
||||
setup()
|
||||
{
|
||||
return {
|
||||
requirement_data: requirementTestData, //需求数据，当前值是测试数据
|
||||
ui: {
|
||||
const router = useRouter();
|
||||
|
||||
const requirement_data = requirementTestData;
|
||||
const ui = reactive(
|
||||
{
|
||||
table_current_page: 1,//分页组件当前的页面索引
|
||||
table_page_size: 10,
|
||||
dialogRequirementDetailVisible: false, //需求详情对话框是否显示
|
||||
dialogRequirementDetailLoadingVisible: false,
|
||||
dialogRequirementDetailLoadingVisible: true,
|
||||
activeTabName: "requirement-detail",
|
||||
requirement_status: [
|
||||
"未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
|
||||
],
|
||||
},
|
||||
query_param: {
|
||||
});
|
||||
const query_param = reactive(
|
||||
{
|
||||
title: "",
|
||||
serial_no: "",
|
||||
request_people: "",
|
||||
commit_start_date: "",
|
||||
commit_end_date: "",
|
||||
commit_start_date: new Date(),
|
||||
commit_end_date: new Date(),
|
||||
status: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
//计算表格的高度
|
||||
tableHeight()
|
||||
});
|
||||
|
||||
const tableHeight = computed(() =>
|
||||
{
|
||||
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)
|
||||
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 onTablePageSizeChange = (pageSize) =>
|
||||
{
|
||||
console.log("选择的pageSize", pageSize);
|
||||
this.ui.table_page_size = pageSize;
|
||||
},
|
||||
ui.table_page_size = pageSize;
|
||||
};
|
||||
//用户变更当前页时消息处理函数
|
||||
onCurrentPageIndexChange(pageIndex)
|
||||
const onCurrentPageIndexChange = (pageIndex) =>
|
||||
{
|
||||
this.ui.table_current_page = pageIndex;
|
||||
},
|
||||
addNewRequirement()
|
||||
ui.table_current_page = pageIndex;
|
||||
};
|
||||
|
||||
const addNewRequirement = () =>
|
||||
{
|
||||
//console.log("router", this.$route);
|
||||
router.push({
|
||||
name: "RequirementEditing",
|
||||
query: {
|
||||
serial: "new",
|
||||
}
|
||||
});
|
||||
},
|
||||
editRequirement(requirement_serial)
|
||||
};
|
||||
|
||||
const editRequirement = (requirement_serial) =>
|
||||
{
|
||||
window.localStorage.setItem("requirement_serial", requirement_serial);
|
||||
|
||||
|
|
@ -302,17 +306,53 @@ export default {
|
|||
serial: requirement_serial,
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
},
|
||||
const showRequirementDetail = (serial_no) =>
|
||||
{
|
||||
setTimeout(() =>
|
||||
{
|
||||
ui.dialogRequirementDetailLoadingVisible = false;
|
||||
}, 1000);
|
||||
|
||||
ui.dialogRequirementDetailVisible = true;
|
||||
|
||||
console.log("查看需求号:", serial_no);
|
||||
};
|
||||
|
||||
//需求详情对话框关闭事件
|
||||
const closeRequirementDetail = () =>
|
||||
{
|
||||
ui.dialogRequirementDetailLoadingVisible = true;
|
||||
};
|
||||
|
||||
onBeforeMount(() =>
|
||||
{
|
||||
query_param.commit_end_date = new Date(Date.now());
|
||||
query_param.commit_start_date = new Date();
|
||||
|
||||
query_param.commit_start_date.setMonth(query_param.commit_end_date.getMonth() - 1);
|
||||
});
|
||||
|
||||
return {
|
||||
//data
|
||||
requirement_data,
|
||||
ui,
|
||||
query_param,
|
||||
//计算属性
|
||||
tableHeight,
|
||||
tableData,
|
||||
//方法
|
||||
editRequirement,
|
||||
addNewRequirement,
|
||||
onCurrentPageIndexChange,
|
||||
onTablePageSizeChange,
|
||||
showRequirementDetail,
|
||||
closeRequirementDetail,
|
||||
//生命周期
|
||||
onBeforeMount,
|
||||
};
|
||||
},
|
||||
//声明周期
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-02-02 22:19:12
|
||||
* @Date: 2023-01-25 23:13:47
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-02-02 23:32:08
|
||||
* @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager32.vue
|
||||
* @LastEditTime: 2023-02-02 22:16:13
|
||||
* @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<span>标题：</span>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-input v-model.trim.lazy="query_param.title"></el-input>
|
||||
<el-input v-model.trim.lazy="this.query_param.title"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<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">{{
|
||||
<span @click="ui.dialogRequirementDetailVisible = true;" class="requirement-serial">{{
|
||||
requirement.row.serial_no
|
||||
}}</span>
|
||||
</template>
|
||||
|
|
@ -115,8 +115,8 @@
|
|||
</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]"
|
||||
@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>
|
||||
|
|
@ -124,13 +124,13 @@
|
|||
<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-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>
|
||||
<span>标题</span>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<el-input readonly></el-input>
|
||||
|
|
@ -228,62 +228,61 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, computed, onBeforeMount } from "vue";
|
||||
//import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
||||
import { requirementTestData } from '@/test/data/TestData';
|
||||
import router from "@/router/index";
|
||||
|
||||
export default {
|
||||
name: "requirement-manager",
|
||||
setup()
|
||||
data()
|
||||
{
|
||||
const requirement_data = requirementTestData;
|
||||
const ui = reactive(
|
||||
{
|
||||
return {
|
||||
requirement_data: requirementTestData, //需求数据，当前值是测试数据
|
||||
ui: {
|
||||
table_current_page: 1,//分页组件当前的页面索引
|
||||
table_page_size: 10,
|
||||
dialogRequirementDetailVisible: false, //需求详情对话框是否显示
|
||||
dialogRequirementDetailLoadingVisible: true,
|
||||
dialogRequirementDetailLoadingVisible: false,
|
||||
activeTabName: "requirement-detail",
|
||||
requirement_status: [
|
||||
"未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
|
||||
],
|
||||
});
|
||||
const query_param = reactive(
|
||||
{
|
||||
},
|
||||
query_param: {
|
||||
title: "",
|
||||
serial_no: "",
|
||||
request_people: "",
|
||||
commit_start_date: new Date(),
|
||||
commit_end_date: new Date(),
|
||||
commit_start_date: "",
|
||||
commit_end_date: "",
|
||||
status: "",
|
||||
});
|
||||
|
||||
const tableHeight = computed(() =>
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
//计算表格的高度
|
||||
tableHeight()
|
||||
{
|
||||
return 10 * 50 + 40;
|
||||
});
|
||||
|
||||
const tableData = computed(() =>
|
||||
},
|
||||
tableData()
|
||||
{
|
||||
const startIndex = ui.table_page_size * (ui.table_current_page - 1);
|
||||
const endIndex = (ui.table_page_size * ui.table_current_page);
|
||||
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 requirement_data.slice(startIndex, endIndex);
|
||||
});
|
||||
|
||||
function onTablePageSizeChange(pageSize)
|
||||
return this.requirement_data.slice(startIndex, endIndex);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onTablePageSizeChange(pageSize)
|
||||
{
|
||||
console.log("选择的pageSize", pageSize);
|
||||
ui.table_page_size = pageSize;
|
||||
}
|
||||
this.ui.table_page_size = pageSize;
|
||||
},
|
||||
//用户变更当前页时消息处理函数
|
||||
function onCurrentPageIndexChange(pageIndex)
|
||||
onCurrentPageIndexChange(pageIndex)
|
||||
{
|
||||
ui.table_current_page = pageIndex;
|
||||
}
|
||||
|
||||
function addNewRequirement()
|
||||
this.ui.table_current_page = pageIndex;
|
||||
},
|
||||
addNewRequirement()
|
||||
{
|
||||
//console.log("router", this.$route);
|
||||
router.push({
|
||||
|
|
@ -292,9 +291,8 @@ export default {
|
|||
serial: "new",
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function editRequirement(requirement_serial)
|
||||
},
|
||||
editRequirement(requirement_serial)
|
||||
{
|
||||
window.localStorage.setItem("requirement_serial", requirement_serial);
|
||||
|
||||
|
|
@ -304,46 +302,17 @@ export default {
|
|||
serial: requirement_serial,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showRequirementDetail(serial_no)
|
||||
{
|
||||
setTimeout(() =>
|
||||
{
|
||||
ui.dialogRequirementDetailLoadingVisible = false;
|
||||
}, 5000);
|
||||
|
||||
ui.dialogRequirementDetailVisible = true;
|
||||
|
||||
console.log("查看需求号:", serial_no);
|
||||
}
|
||||
|
||||
onBeforeMount(() =>
|
||||
{
|
||||
query_param.commit_end_date = new Date(Date.now());
|
||||
query_param.commit_start_date = new Date();
|
||||
|
||||
query_param.commit_start_date.setMonth(query_param.commit_end_date.getMonth() - 1);
|
||||
});
|
||||
|
||||
return {
|
||||
//data
|
||||
requirement_data,
|
||||
ui,
|
||||
query_param,
|
||||
//计算属性
|
||||
tableHeight,
|
||||
tableData,
|
||||
//方法
|
||||
editRequirement,
|
||||
addNewRequirement,
|
||||
onCurrentPageIndexChange,
|
||||
onTablePageSizeChange,
|
||||
showRequirementDetail,
|
||||
//生命周期
|
||||
onBeforeMount,
|
||||
};
|
||||
},
|
||||
},
|
||||
//声明周期
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue