feature-sht #3
2
auto-imports.d.ts
vendored
2
auto-imports.d.ts
vendored
|
|
@ -1,5 +1,5 @@
|
|||
// Generated by 'unplugin-auto-import'
|
||||
export {}
|
||||
declare global {
|
||||
|
||||
const ElMessage: typeof import('element-plus/es')['ElMessage']
|
||||
}
|
||||
|
|
|
|||
5
components.d.ts
vendored
5
components.d.ts
vendored
|
|
@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
|
|||
DropdownMenu: typeof import('./src/components/Share/DropdownMenu.vue')['default']
|
||||
Dropzone: typeof import('./src/components/Dropzone/index.vue')['default']
|
||||
EditorImage: typeof import('./src/components/Tinymce/components/EditorImage.vue')['default']
|
||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||
ElBadge: typeof import('element-plus/es')['ElBadge']
|
||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
|
|
@ -21,6 +22,8 @@ declare module '@vue/runtime-core' {
|
|||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||
|
|
@ -44,8 +47,10 @@ declare module '@vue/runtime-core' {
|
|||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTableRow: typeof import('element-plus/es')['ElTableRow']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
ErrorLog: typeof import('./src/components/ErrorLog/index.vue')['default']
|
||||
GithubCorner: typeof import('./src/components/GithubCorner/index.vue')['default']
|
||||
Hamburger: typeof import('./src/components/Hamburger/index.vue')['default']
|
||||
|
|
|
|||
275
src/api/manage.js
Normal file
275
src/api/manage.js
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
import axios from "axios";
|
||||
|
||||
function getCurrentTimestamp() {
|
||||
return new Date().getTime();
|
||||
}
|
||||
|
||||
const api = 'http://nbxt.oa.x-lf.cn'
|
||||
|
||||
/**
|
||||
* 根据项目id获取项目信息
|
||||
* @param id 项目id
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
const projectGetById = (id, token) => {
|
||||
return axios({
|
||||
url: api + "/project/get/id?id=" + id,
|
||||
method: "get",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取项目信息
|
||||
* @param projectId 项目id
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
|
||||
export const getproject = (projectId, token) => {
|
||||
return axios({
|
||||
url: api +"/project/get?projectId=" + projectId,
|
||||
method: "get",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取我管理页面的项目列表(接口有问题)
|
||||
*
|
||||
* @param pageSize 页面大小
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getManageList = (params ,token ,) => {
|
||||
|
||||
const {pageSize ,is ,page} = params;
|
||||
return axios({
|
||||
url: `${api}/project/child/get?is=${is}&pageSize=${pageSize}&page=${page}` ,
|
||||
method: "get",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
// 我管理的所有接口
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取我管理的页面的项目列表
|
||||
*
|
||||
* @param projectId 项目id
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getManageProjectList = (token) => {
|
||||
return axios({
|
||||
url: api +'/project/child/get' ,
|
||||
method: "get",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取我管理的页面的子系统项目列表
|
||||
* @param projectId 项目id
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getProjectSysList = (projectId,token) => {
|
||||
return axios({
|
||||
url: api +"/module/get?projectId=" + projectId ,
|
||||
method: "get",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 获取我管理的页面的子模块项目列表(接口没数据)
|
||||
* @param sysId 子系统id
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getProjectModList = (sysId,token) => {
|
||||
return axios({
|
||||
url: api +"/module/get/min?sysId=" + sysId ,
|
||||
method: "get",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 获取我管理的页面的子模块详细信息
|
||||
* @param id 子模块id
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getProjectModDetail = (id,token) => {
|
||||
return axios({
|
||||
url: api +"/project/module/id?id=" + id ,
|
||||
method: "get",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
//功能接口
|
||||
|
||||
|
||||
//删除项目
|
||||
|
||||
/**
|
||||
* 选择项目删除
|
||||
* @param id 项目id
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const deleteProject = (id,token) => {
|
||||
return axios({
|
||||
url: api +"/project/delete?id=" + id ,
|
||||
method: "delete",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 修改项目信息
|
||||
* @param {Object} body 包含项目更新信息的对象
|
||||
* @param {number} id 项目ID
|
||||
* @param {string} token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*/
|
||||
export const editProject = (body ,id,token) => {
|
||||
return axios({
|
||||
url: api +"/project/edit?id=" + id ,
|
||||
method: "put",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
},
|
||||
data:body
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 新增子模块
|
||||
* @param {Object} body 包含项目更新信息的对象
|
||||
* @param {string} token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*
|
||||
*/
|
||||
export const addModule = (body,token) => {
|
||||
return axios({
|
||||
url: api +"/project/module/add" ,
|
||||
method: "post",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
},
|
||||
data:body
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
/**
|
||||
*
|
||||
* 删除子模块
|
||||
* @param {number} id 子模块ID
|
||||
* @param {string} token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*
|
||||
*/
|
||||
export const deleteModule = (id,token) => {
|
||||
return axios({
|
||||
url: api +"/project/module/delete?id=" +id ,
|
||||
method: "delete",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
},
|
||||
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
/**
|
||||
*
|
||||
* 修改子模块
|
||||
* @param {number} id 子模块ID
|
||||
* @param {Object} body 包含子模块更新信息的对象
|
||||
* @param {string} token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*
|
||||
*/
|
||||
export const editModule = ( body,id,token) => {
|
||||
return axios({
|
||||
url: api +"/project/module/edit?id=" +id ,
|
||||
method: "put",
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
},
|
||||
data:body
|
||||
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
76
src/api/participate.js
Normal file
76
src/api/participate.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import axios from "axios";
|
||||
|
||||
function getCurrentTimestamp() {
|
||||
return new Date().getTime();
|
||||
}
|
||||
|
||||
const api = 'http://nbxt.oa.x-lf.cn'
|
||||
|
||||
/**
|
||||
* 获取我参与的项目列表
|
||||
*
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getParticipateProjectList = (token)=> {
|
||||
return axios({
|
||||
method: 'get',
|
||||
url: `${api}/project/participate/get`,
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Timestamp':getCurrentTimestamp()
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 获取我参与的项目的子系统列表
|
||||
* @param projectId 项目ID
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getParticipateSystemList = ( projectId,token)=> {
|
||||
return axios({
|
||||
method: 'get',
|
||||
url: `${api}/module/get?projectId=${projectId}`,
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Timestamp':getCurrentTimestamp()
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 获取我参与的项目的子模块列表
|
||||
* @param SysId 项目ID
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getParticipateModuleList = ( SysId,token)=> {
|
||||
return axios({
|
||||
method: 'get',
|
||||
url: `${api}/module/get/min?sysId=${SysId}`,
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Timestamp':getCurrentTimestamp()
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 获取我参与的项目的子模块的详细信息
|
||||
* @param ModId 项目ID
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
export const getParticipateDetail = ( ModId,token)=> {
|
||||
return axios({
|
||||
method: 'get',
|
||||
url: `${api}/project/module/id?id=${ModId}`,
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Timestamp':getCurrentTimestamp()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
import request from '@/utils/request';
|
||||
|
||||
const api = 'http://nbxt.oa.x-lf.cn'
|
||||
|
||||
function getCurrentTimestamp() {
|
||||
return new Date().getTime();
|
||||
}
|
||||
export function login(data) {
|
||||
return request({
|
||||
url: '/auth/login',
|
||||
url: api+ '/auth/login',
|
||||
method: 'post',
|
||||
data,
|
||||
headers: {
|
||||
|
|
@ -17,7 +18,7 @@ export function login(data) {
|
|||
|
||||
export function getInfo(token) {
|
||||
return request({
|
||||
url: '/user/profile/get',
|
||||
url: api +'/user/profile/get',
|
||||
method: 'get',
|
||||
// params: {token},
|
||||
headers: {
|
||||
|
|
@ -30,7 +31,7 @@ export function getInfo(token) {
|
|||
|
||||
export function logout(token) {
|
||||
return request({
|
||||
url: '/auth/logout',
|
||||
url: api +'/auth/logout',
|
||||
method: 'get',
|
||||
headers: {
|
||||
'Authorization':'Bearer '+token,
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
|
||||
item.meta.title
|
||||
}}</span>
|
||||
item.meta.title
|
||||
}}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
|
|
@ -41,8 +41,9 @@ export default defineComponent({
|
|||
const first = matched[0];
|
||||
|
||||
if (!this.isDashboard(first)) {
|
||||
matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched);
|
||||
matched = [{ path: '/dashboard', meta: { title: 'Dashboard' } }].concat(matched);
|
||||
}
|
||||
|
||||
|
||||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
||||
@toggleClick="toggleSidebar" />
|
||||
|
||||
<!-- 面包屑导航 -->
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||||
|
||||
<div class="right-menu">
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const Layout = ():RouteComponent => import('@/layout/index.vue');
|
|||
// import chartsRouter from './modules/charts';
|
||||
// import nestedRouter from './modules/nested';
|
||||
// import tableRouter from './modules/table';
|
||||
import manageRouter from './modules/manage';
|
||||
|
||||
/**
|
||||
* constantRoutes
|
||||
|
|
@ -31,6 +32,7 @@ export const constantRoutes:RouteRecordRaw[] = [
|
|||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login/index.vue'),
|
||||
|
|
@ -112,87 +114,10 @@ export const constantRoutes:RouteRecordRaw[] = [
|
|||
* 注意：hidden、alwaysShow 属性配置移动到了meta中！！！
|
||||
*/
|
||||
export const asyncRoutes:RouteRecordRaw[] = [
|
||||
// {
|
||||
// path: '/permission',
|
||||
// component: Layout,
|
||||
// redirect: '/permission/page',
|
||||
// name: 'Permission',
|
||||
// meta: {
|
||||
// alwaysShow: true, // will always show the root menu
|
||||
// title: 'Permission',
|
||||
// icon: 'lock',
|
||||
// roles: ['admin', 'editor','teacher_user'] // you can set roles in root nav
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'page',
|
||||
// component: () => import('@/views/permission/page.vue'),
|
||||
// name: 'PagePermission',
|
||||
// meta: {
|
||||
// title: 'Page Permission',
|
||||
// roles: ['admin','teacher_user'] // or you can only set roles in sub nav
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: 'directive',
|
||||
// component: () => import('@/views/permission/directive.vue'),
|
||||
// name: 'DirectivePermission',
|
||||
// meta: {
|
||||
// title: 'Directive Permission'
|
||||
// // if do not set roles, means: this page does not require permission
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: 'role',
|
||||
// component: () => import('@/views/permission/role.vue'),
|
||||
// name: 'RolePermission',
|
||||
// meta: {
|
||||
// title: 'Role Permission',
|
||||
// roles: ['admin','teacher']
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// 个人项目
|
||||
{
|
||||
path: '/myself',
|
||||
component: Layout,
|
||||
redirect: '/myself',
|
||||
meta: {
|
||||
alwaysShow: true, // will always show the root menu
|
||||
title: '个人项目',
|
||||
icon: 'nested',
|
||||
roles: ['admin', 'teacher_user', 'principle', 'developer', 'console']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
// 我负责的
|
||||
path: 'charge',
|
||||
component: () => import('@/views/personal/project/charge.vue'),
|
||||
name: 'Charge',
|
||||
meta: { title: '我负责的', icon: 'user', affix: true, role: ['console'] }
|
||||
},
|
||||
{
|
||||
// 我管理的
|
||||
path: 'manage',
|
||||
component: () => import('@/views/personal/project/manage.vue'),
|
||||
name: 'Manage',
|
||||
meta: { title: '我管理的', icon: 'user', affix: true, role: ['principle', 'developer', 'console'] }
|
||||
},
|
||||
{
|
||||
// 我参与的
|
||||
path: 'participate',
|
||||
component: () => import('@/views/personal/project/participate.vue'),
|
||||
name: 'Participate',
|
||||
meta: { title: '我参与的', icon: 'user', affix: true, role: ['principle', 'developer', 'console'] }
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
manageRouter,
|
||||
|
||||
|
||||
// {
|
||||
|
|
|
|||
81
src/router/modules/manage.ts
Normal file
81
src/router/modules/manage.ts
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
|
||||
|
||||
const Layout = () => import('@/layout/index.vue')
|
||||
|
||||
const manageRouter = {
|
||||
path: '/myslef',
|
||||
component: Layout,
|
||||
|
||||
|
||||
meta: {
|
||||
alwaysShow: false, // 始终显示根菜单
|
||||
title: '个人项目',
|
||||
icon: 'nested',
|
||||
roles: ['admin', 'teacher_user']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'charge',
|
||||
component: () => import('@/views/personal/project/charge.vue'),
|
||||
name: 'Charge',
|
||||
meta: { title: '我负责的', icon: 'user', affix: true }
|
||||
},
|
||||
//我管理的以及子页面
|
||||
|
||||
{
|
||||
path: 'manage',
|
||||
component: () => import('@/views/personal/project/manage.vue'),
|
||||
name: 'Manage',
|
||||
meta: { title: '我管理的', icon: 'user', affix: true, },
|
||||
|
||||
},
|
||||
{
|
||||
path: 'childSysManage',
|
||||
component: () => import('@/views/personal/project/childSystem/manage.vue'),
|
||||
name: 'ChildSysManage',
|
||||
meta: { title: '我管理的 / 子系统', breadcrumb: true , hidden: true },
|
||||
|
||||
},
|
||||
{
|
||||
path: 'childModManage',
|
||||
component: () => import('@/views/personal/project/childModel/manage.vue'),
|
||||
name: 'ChildModManage',
|
||||
meta: { title: '我管理的 / 子系统 / 子模块', breadcrumb: true , hidden: true }
|
||||
},
|
||||
{
|
||||
path:'manageDetail',
|
||||
component:()=>import('@/views/personal/project/detail/manage.vue'),
|
||||
name: 'ManageDetail',
|
||||
meta: { title: '我管理的 / 子系统 / 子模块 / 详情', breadcrumb: true , hidden: true }
|
||||
},
|
||||
//我参与的以及子界面
|
||||
{
|
||||
path: 'participate',
|
||||
component: () => import('@/views/personal/project/participate.vue'),
|
||||
name: 'Participate',
|
||||
meta: { title: '我参与的', icon: 'user', affix: true }
|
||||
},
|
||||
{
|
||||
path: 'childSysParticipate',
|
||||
component: () => import('@/views/personal/project/childSystem/participate.vue'),
|
||||
name: 'ChildSysParticipate',
|
||||
meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true ,affix:false},
|
||||
|
||||
},
|
||||
{
|
||||
path: 'childModParticipate',
|
||||
component: () => import('@/views/personal/project/childModel/participate.vue'),
|
||||
name: 'ChildModParticipate',
|
||||
meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true }
|
||||
},
|
||||
{
|
||||
path: 'participateDetail',
|
||||
component:()=>import('@/views/personal/project/detail/participate.vue'),
|
||||
name: 'ParticipateDetail',
|
||||
meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
export default manageRouter
|
||||
|
|
@ -15,7 +15,7 @@ export function isExternal(path) {
|
|||
* @returns {Boolean}
|
||||
*/
|
||||
export function validUsername(str) {
|
||||
const valid_map = ['admin', 'editor', 'teacher_user', 'teacher_demo', 'demo', 'xiao_lfeng', 'yangna'];
|
||||
const valid_map = ['console_user', 'developer_user', 'principal_user'];
|
||||
return valid_map.indexOf(str.trim()) >= 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<template>
|
||||
hello
|
||||
hi
|
||||
</template>
|
||||
218
src/views/personal/project/childSystem/manage.vue
Normal file
218
src/views/personal/project/childSystem/manage.vue
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<div style=" width:100%">
|
||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||
<template #header><strong>项目{{ projectId }}</strong></template>
|
||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||
<div>
|
||||
名称
|
||||
<el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
状态
|
||||
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="width:80px" @click="search">查询</el-button>
|
||||
<el-button style="width:80px" @click="reset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
|
||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button text type=''>子系统列表</el-button>
|
||||
</div>
|
||||
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="55" />-->
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="{ row }">{{ row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="子系统名称" width="120" />
|
||||
<el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
|
||||
<el-table-column property="cycle" label="周期" />
|
||||
<el-table-column property="principalName" label="负责人" />
|
||||
<el-table-column property="status" label="状态" />
|
||||
<el-table-column property="description" label="子系统简介">
|
||||
<template #default="{ row }">
|
||||
<!-- 在模板中直接处理超长文本的显示 -->
|
||||
<span>
|
||||
{{ row.description.length > 20 ? row.description.substring(0, 20) + '...' : row.description }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="deadLine" label="截止时间" #default="{ row }">
|
||||
<span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
|
||||
</el-table-column>
|
||||
<el-table-column property="address" label="操作" #default="{ row }">
|
||||
<el-button link style="color:deepskyblue" @click="toChildModel(row.id)">查看详情</el-button>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination larger background layout="prev, pager, next" :total="5" class="mt-4"
|
||||
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
|
||||
</el-card>
|
||||
<el-alert>
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElTable } from 'element-plus';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { getProjectSysList } from '@/api/manage';
|
||||
|
||||
//跳转到子模块
|
||||
const router = useRouter();
|
||||
|
||||
const toChildModel = (id) => {
|
||||
router.push({ name: 'ChildModManage', query: { id: id } })
|
||||
};
|
||||
|
||||
|
||||
|
||||
interface User {
|
||||
cycle: number
|
||||
deadLine: string
|
||||
description: { description: string }
|
||||
id: number
|
||||
isDelete: number
|
||||
name: string
|
||||
principalName: string
|
||||
projectId: number
|
||||
status: string
|
||||
workLoad: number
|
||||
}
|
||||
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<User[]>([]);
|
||||
|
||||
const handleSelectionChange = (val: User[]) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// console.log(searchSys);
|
||||
|
||||
const input1 = ref('');
|
||||
const input2 = ref('');
|
||||
|
||||
const tableData = ref<User[]>([
|
||||
|
||||
]);
|
||||
const initialTableData = ref<User[]>([]);
|
||||
|
||||
// 获取projectid
|
||||
const route = useRoute();
|
||||
const projectId = route.query.id;
|
||||
console.log(projectId);
|
||||
|
||||
//处理数据函数
|
||||
const parseData = (data) => {
|
||||
|
||||
|
||||
return {
|
||||
cycle: data.cycle,
|
||||
deadLine: data.deadLine,
|
||||
description: data.description,
|
||||
id: data.id,
|
||||
isDelete: data.isDelete,
|
||||
name: data.name,
|
||||
principalName: data.principalName,
|
||||
projectId: data.projectId,
|
||||
status: data.status,
|
||||
workLoad: data.workLoad,
|
||||
}
|
||||
}
|
||||
|
||||
const fetchData = () => {
|
||||
|
||||
const project = getProjectSysList(projectId, getToken());
|
||||
|
||||
//处理数据
|
||||
project.then(res => {
|
||||
console.log(res);
|
||||
|
||||
const data = res.data.data
|
||||
|
||||
|
||||
|
||||
if (data) {
|
||||
const newData = data.map(item => parseData(item))
|
||||
console.log(newData);
|
||||
|
||||
tableData.value = [...newData, ...tableData.value];
|
||||
initialTableData.value = tableData.value.slice(); // 将tableData的内容赋值给initialTableData
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
fetchData();
|
||||
|
||||
// 统一检索函数
|
||||
const search = () => {
|
||||
const keyword = input1.value.trim().toLowerCase();
|
||||
const status = input2.value.trim().toLowerCase();
|
||||
|
||||
// 如果搜索关键词和状态都为空，则恢复初始数据
|
||||
if (keyword === '' && status === '') {
|
||||
tableData.value = initialTableData.value.slice();
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据关键词和状态进行检索
|
||||
tableData.value = initialTableData.value.filter(item => {
|
||||
const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
|
||||
const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
|
||||
return matchKeyword && matchStatus;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
input1.value = '';
|
||||
input2.value = '';
|
||||
tableData.value = initialTableData.value.slice();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
206
src/views/personal/project/childSystem/participate.vue
Normal file
206
src/views/personal/project/childSystem/participate.vue
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
<template>
|
||||
<div style=" width:100%">
|
||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||
<template #header><strong>项目{{ projectid }}</strong></template>
|
||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||
<div>
|
||||
名称
|
||||
<el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
状态
|
||||
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="width:80px" @click="search()">查询</el-button>
|
||||
<el-button style="width:80px" @click="reset()">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
|
||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button text type=''>子系统列表</el-button>
|
||||
</div>
|
||||
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="55" />-->
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="scope">{{ scope.$index + 1 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="子系统名称" width="120" />
|
||||
<el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
|
||||
<el-table-column property="cycle" label="周期" />
|
||||
<el-table-column property="principalName" label="负责人" />
|
||||
<el-table-column property="status" label="状态" />
|
||||
<el-table-column property="description" label="子系统简介">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.description }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="deadLine" label="截止时间" #default="{row}">
|
||||
<span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
|
||||
</el-table-column>
|
||||
<el-table-column property="address" label="操作" #default="{row}">
|
||||
<el-button link style="color:deepskyblue" @click="toChildModel(row.id)">查看详情</el-button>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination larger background layout="prev, pager, next" :total="5" class="mt-4"
|
||||
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { ElTable } from 'element-plus';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { getParticipateSystemList } from '@/api/participate.js';
|
||||
|
||||
|
||||
//取值
|
||||
const route = useRoute();
|
||||
const projectid = route.query.projectId ? route.query.projectId : 1 ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//跳转到子模块
|
||||
const router = useRouter();
|
||||
|
||||
const toChildModel = (SysId: number) => {
|
||||
router.push({ name: 'ChildModParticipate' , query: { SysId: SysId } })
|
||||
};
|
||||
|
||||
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
|
||||
cycle: number
|
||||
description: { description: string }
|
||||
isDeleted: number
|
||||
name: string
|
||||
principalId: number
|
||||
deadLine: string
|
||||
projectId: number
|
||||
workLoad: number
|
||||
status: string
|
||||
principalName:string
|
||||
}
|
||||
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<User[]>([]);
|
||||
|
||||
const handleSelectionChange = (val: User[]) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
const tableData = ref<User[]>([]);
|
||||
const initialTableData = ref<User[]>([]);
|
||||
|
||||
const parseData = (data) => {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return {
|
||||
id: data.id,
|
||||
deadLine: data.deadLine,
|
||||
cycle: data.cycle,
|
||||
description: data.description,
|
||||
isDeleted: data.isDeleted,
|
||||
name: data.name,
|
||||
principalId: data.principalId,
|
||||
projectId: data.projectId,
|
||||
workLoad: data.workLoad,
|
||||
status:data.status,
|
||||
principalName:data.principalName
|
||||
}
|
||||
}
|
||||
|
||||
//获取子系统列表
|
||||
const fetchData = () => {
|
||||
//调用接口
|
||||
const project = getParticipateSystemList(<number>projectid, getToken());
|
||||
|
||||
project.then((res) => {
|
||||
console.log(res);
|
||||
|
||||
|
||||
const data = res.data.data;
|
||||
console.log(data);
|
||||
|
||||
if (data) {
|
||||
const dataProject = data.map(item => parseData(item));
|
||||
|
||||
tableData.value = [...dataProject, ...tableData.value];
|
||||
console.log(tableData.value);
|
||||
initialTableData.value = tableData.value.slice();
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
fetchData();
|
||||
|
||||
const input1 = ref('');
|
||||
const input2 = ref('');
|
||||
|
||||
// 统一检索函数
|
||||
const search = () => {
|
||||
const keyword = input1.value.trim().toLowerCase();
|
||||
const status = input2.value.trim().toLowerCase();
|
||||
|
||||
// 如果搜索关键词和状态都为空，则恢复初始数据
|
||||
if (keyword === '' && status === '') {
|
||||
tableData.value = initialTableData.value.slice();
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据关键词和状态进行检索
|
||||
tableData.value = initialTableData.value.filter(item => {
|
||||
const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
|
||||
const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
|
||||
return matchKeyword && matchStatus;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
input1.value = '';
|
||||
input2.value = '';
|
||||
tableData.value = initialTableData.value.slice();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
320
src/views/personal/project/childmodel/manage.vue
Normal file
320
src/views/personal/project/childmodel/manage.vue
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
<template>
|
||||
<div style=" width:100%">
|
||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||
<template #header><strong>子系统{{ sysId }}</strong></template>
|
||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||
<div>
|
||||
名称
|
||||
<el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
状态
|
||||
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="width:80px" @click="search">查询</el-button>
|
||||
<el-button style="width:80px" @click="reset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
|
||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button text type=''>子模块列表</el-button>
|
||||
<div>
|
||||
<el-button type="primary" style="width:80px" @click="openEditDialog">新增</el-button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="55" /> -->
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="{ row }">{{ row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="子模块名称" width="120" />
|
||||
<el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
|
||||
<el-table-column property="cycle" label="周期" />
|
||||
<el-table-column property="principalUser" label="负责人" />
|
||||
<el-table-column property="status" label="状态" />
|
||||
<el-table-column property="description" label="子模块简介" #default="{ row }">
|
||||
<span>{{ row.description }}</span>
|
||||
</el-table-column>
|
||||
<el-table-column property="deadLine" label="截止时间" #default="{ row }">
|
||||
<span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
|
||||
</el-table-column>
|
||||
<el-table-column property="address" label="操作" #default="{ row }">
|
||||
<el-button link style="color:deepskyblue" @click="toDetail(row.id)">查看详情</el-button>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination larger background layout="prev, pager, next" :total="total" class="mt-4"
|
||||
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
|
||||
</el-card>
|
||||
|
||||
|
||||
<!-- 新增弹窗 -->
|
||||
<el-dialog title="新增子模块信息" v-model="dialogVisible" style="width: 27%">
|
||||
<el-form :model="editForm" label-width="100px">
|
||||
|
||||
<!-- <el-form-item label="序号">
|
||||
<el-input v-model="editForm.id" placeholder="请输入id" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="editForm.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-input v-model="editForm.status" placeholder="请输入状态" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作量">
|
||||
<el-input v-model="editForm.workLoad" placeholder="请输入工作量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="周期">
|
||||
<el-input v-model="editForm.cycle" placeholder="请输入周期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人">
|
||||
<el-select v-model="editForm.principalId" placeholder="请选择负责人">
|
||||
<el-option v-for="person in persons" :key="person.id" :label="person.name" :value="person.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="子系统">
|
||||
<el-input :placeholder="`子系统 ${editForm.projectChildId}`" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="截止时间">
|
||||
<el-date-picker v-model="editForm.deadLine" type="date" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="子模块简介">
|
||||
<el-input v-model="editForm.description" placeholder="请输入子模块简介" />
|
||||
</el-form-item>
|
||||
<!-- 添加其他需要编辑的表单项 -->
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer" style="display: flex;flex-direction: row;justify-content: center;">
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button type="primary" @click="submitEditInfo">确认</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElTable, ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
|
||||
import { getProjectModList, addModule } from '@/api/manage';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { getToken } from '@/utils/auth';
|
||||
|
||||
//获取参数
|
||||
const route = useRoute();
|
||||
const sysId = route.query.id;
|
||||
|
||||
const router = useRouter();
|
||||
const dialogVisible = ref(false);
|
||||
const total = ref(5);
|
||||
|
||||
|
||||
|
||||
|
||||
//表单显示内容
|
||||
const editForm = ref({
|
||||
name: 'name',
|
||||
status: '',
|
||||
workLoad: '',
|
||||
cycle: '',
|
||||
projectChildId: sysId,
|
||||
deadLine: '',
|
||||
description: '',
|
||||
principalId: '',
|
||||
|
||||
});
|
||||
|
||||
const persons = [
|
||||
{id:0 ,name:"principal_user"},
|
||||
{id:1 ,name:"console_user"},
|
||||
{id:2 ,name:"developer_user"}
|
||||
]
|
||||
// 点击新增按钮打开弹窗
|
||||
const openEditDialog = () => {
|
||||
|
||||
|
||||
dialogVisible.value = true;
|
||||
// console.log(dialogVisible.value);
|
||||
|
||||
};
|
||||
//关闭弹窗
|
||||
const handleCloseDialog = () => {
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
|
||||
const submitEditInfo = () => {
|
||||
// 将日期对象转换为日期字符串
|
||||
const formattedDate = editForm.value.deadLine instanceof Date ? editForm.value.deadLine.toISOString() : editForm.value.deadLine;
|
||||
|
||||
|
||||
const body = {
|
||||
name: editForm.value.name,
|
||||
status: editForm.value.status,
|
||||
workLoad: editForm.value.workLoad,
|
||||
cycle: editForm.value.cycle,
|
||||
projectChildId: sysId,
|
||||
deadLine: formattedDate,
|
||||
description: editForm.value.description,
|
||||
principalId: editForm.value.principalId,
|
||||
}
|
||||
console.log(body);
|
||||
|
||||
const promise = addModule(body, getToken());
|
||||
console.log(promise);
|
||||
|
||||
promise.then(res => {
|
||||
if (res.data.code === 200) {
|
||||
console.log(res.data);
|
||||
|
||||
dialogVisible.value = false;
|
||||
|
||||
fetchData();
|
||||
ElMessage.success('新增成功');
|
||||
} else {
|
||||
ElMessage.error("新增失败" + res.message);
|
||||
console.log(res.message);
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 路由跳转
|
||||
const toDetail = (id) => {
|
||||
router.push({ name: 'ManageDetail', query: { id: id } }); // 跳转到子系统详情页面
|
||||
};
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
name: string
|
||||
principalId: number
|
||||
principalUser: string
|
||||
workLoad: number
|
||||
description: { description: string }
|
||||
status: string
|
||||
deadLine: string
|
||||
cycle: number
|
||||
}
|
||||
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<User[]>([]);
|
||||
|
||||
const handleSelectionChange = (val: User[]) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const initialTableData = ref<User[]>([]);
|
||||
const tableData = ref<User[]>([
|
||||
|
||||
]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//处理接口方法
|
||||
const parseData = (data) => {
|
||||
|
||||
|
||||
|
||||
return {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
principalId: data.principalId,
|
||||
principalUser: data.principalUser,
|
||||
workLoad: data.workLoad,
|
||||
description: data.description,
|
||||
status: data.status,
|
||||
deadLine: data.deadLine,
|
||||
cycle: data.cycle,
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//接口处理
|
||||
const fetchData = () => {
|
||||
//请求数据
|
||||
const project = getProjectModList(sysId, getToken());
|
||||
console.log(project);
|
||||
//处理数据
|
||||
project.then(res => {
|
||||
const data = res.data.data;
|
||||
|
||||
if (data) {
|
||||
const newData = data.map(item => parseData(item))
|
||||
// console.log(newData);
|
||||
|
||||
tableData.value = [...newData];
|
||||
initialTableData.value = tableData.value.slice(); // 将tableData的内容赋值给initialTableData
|
||||
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
|
||||
}
|
||||
fetchData();
|
||||
const input1 = ref('');
|
||||
const input2 = ref('');
|
||||
|
||||
// 统一检索函数
|
||||
const search = () => {
|
||||
const keyword = input1.value.trim().toLowerCase();
|
||||
const status = input2.value.trim().toLowerCase();
|
||||
|
||||
// 如果搜索关键词和状态都为空，则恢复初始数据
|
||||
if (keyword === '' && status === '') {
|
||||
tableData.value = initialTableData.value.slice();
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据关键词和状态进行检索
|
||||
tableData.value = initialTableData.value.filter(item => {
|
||||
const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
|
||||
const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
|
||||
return matchKeyword && matchStatus;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
input1.value = '';
|
||||
input2.value = '';
|
||||
tableData.value = initialTableData.value.slice();
|
||||
};
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
205
src/views/personal/project/childmodel/participate.vue
Normal file
205
src/views/personal/project/childmodel/participate.vue
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
<template>
|
||||
<div style=" width:100%">
|
||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||
<template #header><strong>子系统{{ SysId }}</strong></template>
|
||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||
<div>
|
||||
名称
|
||||
<el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
状态
|
||||
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="width:80px" @click="search()">查询</el-button>
|
||||
<el-button style="width:80px" @click="reset()">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
|
||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button text type=''>子模块列表</el-button>
|
||||
|
||||
</div>
|
||||
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="55" />-->
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="{ row }">{{ row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="子模块名称" width="120" />
|
||||
<el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
|
||||
<el-table-column property="cycle" label="周期" />
|
||||
<el-table-column property="principalUser" label="负责人" />
|
||||
<el-table-column property="status" label="状态" />
|
||||
<el-table-column property="description" label="子模块简介" />
|
||||
|
||||
|
||||
<el-table-column property="deadLine" label="截止时间" #default="{row}">
|
||||
<span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
|
||||
</el-table-column>
|
||||
<el-table-column property="address" label="操作" #default="{ row }">
|
||||
<el-button link style="color:deepskyblue" @click="toDetail(row.id)">查看详情</el-button>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination larger background layout="prev, pager, next" :total="5" class="mt-4"
|
||||
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElTable } from 'element-plus';
|
||||
import { getParticipateModuleList } from '@/api/participate';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { getToken } from '@/utils/auth';
|
||||
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
//取值
|
||||
const route = useRoute()
|
||||
const SysId = route.query.SysId;
|
||||
|
||||
// 路由跳转
|
||||
const toDetail = (ModId) => {
|
||||
router.push({ name: 'ParticipateDetail', query: { ModId: ModId } }); // 跳转到子系统详情页面
|
||||
};
|
||||
|
||||
interface User {
|
||||
beginTime: string;
|
||||
childSystemName: string;
|
||||
completeTime: string;
|
||||
cycle: string;
|
||||
description: string;
|
||||
id: number;
|
||||
isDelete: number
|
||||
isFinishi: string
|
||||
name: string;
|
||||
pid: string
|
||||
principalId: number
|
||||
principalUser: string
|
||||
projectId: number
|
||||
status: string
|
||||
type: string
|
||||
workLoad: number
|
||||
deadLine: string
|
||||
}
|
||||
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<User[]>([]);
|
||||
|
||||
const handleSelectionChange = (val: User[]) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
|
||||
|
||||
//列表
|
||||
const tableData = ref<User[]>([]);
|
||||
const initialTableData = ref<User[]>([]);
|
||||
|
||||
const parseData = (data) => {
|
||||
|
||||
|
||||
return {
|
||||
beginTime: data.beginTime,
|
||||
childSystemName: data.childSystemName,
|
||||
completeTime: data.completeTime,
|
||||
cycle: data.cycle,
|
||||
description: data.description,
|
||||
id: data.id,
|
||||
isDelete: data.isDelete,
|
||||
isFinishi: data.isFinishi,
|
||||
name: data.name,
|
||||
pid: data.pid,
|
||||
principalId: data.principalId,
|
||||
principalUser: data.principalUser,
|
||||
projectId: data.projectId,
|
||||
status: data.status,
|
||||
type: data.type,
|
||||
workLoad: data.workLoad,
|
||||
deadLine: data.deadLine
|
||||
}
|
||||
}
|
||||
|
||||
//接口获取内容
|
||||
const fetchData = () => {
|
||||
const project = getParticipateModuleList(SysId, getToken());
|
||||
console.log(project);
|
||||
|
||||
project.then((res) => {
|
||||
const data = res.data.data
|
||||
console.log(data);
|
||||
|
||||
if (data) {
|
||||
const newData = data.map((item) => parseData(item));
|
||||
tableData.value = [...newData, ...tableData.value]
|
||||
|
||||
|
||||
initialTableData.value = tableData.value.slice();
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
fetchData();
|
||||
|
||||
// 统一检索函数
|
||||
const search = () => {
|
||||
const keyword = input1.value.trim().toLowerCase();
|
||||
const status = input2.value.trim().toLowerCase();
|
||||
|
||||
// 如果搜索关键词和状态都为空，则恢复初始数据
|
||||
if (keyword === '' && status === '') {
|
||||
tableData.value = initialTableData.value.slice();
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据关键词和状态进行检索
|
||||
tableData.value = initialTableData.value.filter(item => {
|
||||
const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
|
||||
const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
|
||||
return matchKeyword && matchStatus;
|
||||
});
|
||||
};
|
||||
|
||||
const input1 = ref('');
|
||||
const input2 = ref('');
|
||||
|
||||
// 重置检索条件
|
||||
const reset = () => {
|
||||
input1.value = '';
|
||||
input2.value = '';
|
||||
console.log(tableData.value);
|
||||
|
||||
tableData.value = initialTableData.value.slice(); // 恢复初始数据
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
255
src/views/personal/project/detail/manage.vue
Normal file
255
src/views/personal/project/detail/manage.vue
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<div style=" width:100%;">
|
||||
<el-card style="max-width: 100vw;">
|
||||
<template #header><strong>子模块{{ projectId }}</strong></template>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-row v-for="item in projectItems" :key="item.label">
|
||||
<el-col :span="24">
|
||||
<div style="margin-top: 10%;"><strong>{{ item.label }}</strong></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row v-for="item in projectItems" :key="item.label">
|
||||
<el-col :span="24">
|
||||
<div v-if="item.label !== '07.简介'" style="margin-top: 11%;">
|
||||
<template v-if="editMode">
|
||||
<input v-model="item.value" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item.value }}
|
||||
</template>
|
||||
</div>
|
||||
<textarea v-if="item.label === '07.简介'" style="resize: none; margin-top: 15%; width: 100%;"
|
||||
v-model="item.value" :disabled="!editMode" rows="4" cols="50">
|
||||
</textarea>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<el-button @click="toggleEditMode" :type="editMode ? 'success' : 'primary'" style="width:80px">
|
||||
{{ editMode ? '保存' : '编辑' }}
|
||||
</el-button>
|
||||
<el-button style="width:80px ;background-color: #bd3124;color: azure;" @click="deleteModuleClick">删除</el-button>
|
||||
</div>
|
||||
|
||||
<el-alert>
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { getProjectModDetail, editModule, deleteModule } from '@/api/manage';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
|
||||
|
||||
const projectItems = ref([
|
||||
{ label: '01.模块名称', value: '项目名称1' },
|
||||
{ label: '02.模块周期', value: '3个月' },
|
||||
{ label: '03.工作量', value: '100小时' },
|
||||
{ label: '04.负责人ID', value: '张三' },
|
||||
{ label: '05.状态', value: '进行中' },
|
||||
{ label: '06.时间', value: '2024-01-01 12:00:00' },
|
||||
{ label: '07.简介', value: '大王iu大概iudg拍高端屁股的怕耽搁u对爬过文档爬过无' },
|
||||
]);
|
||||
|
||||
const editMode = ref(false); // 编辑模式状态
|
||||
|
||||
|
||||
|
||||
|
||||
//获取id
|
||||
const route = useRoute();
|
||||
const projectId = Number(route.query.id);
|
||||
|
||||
|
||||
|
||||
//加载数据
|
||||
//修改表单内数据
|
||||
const parseData = (data) => {
|
||||
|
||||
|
||||
projectItems.value.forEach(item => {
|
||||
if (item.label === '01.模块名称') {
|
||||
item.value = data.name;
|
||||
} else if (item.label === '02.模块周期') {
|
||||
item.value = data.cycle;
|
||||
} else if (item.label === '03.工作量') {
|
||||
item.value = data.workLoad ;
|
||||
} else if (item.label === '04.负责人ID') {
|
||||
item.value = "1";
|
||||
} else if (item.label === '05.状态') {
|
||||
item.value = data.status.toString();
|
||||
} else if (item.label === '06.时间') {
|
||||
item.value = new Date(data.deadLine).toLocaleDateString();
|
||||
} else if (item.label === '07.简介') {
|
||||
item.value = data.description;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取数据方法
|
||||
const fetchData = async () => {
|
||||
const res = await getProjectModDetail(projectId, getToken());
|
||||
console.log(res.data);
|
||||
if (res.data.data) {
|
||||
parseData(res.data.data); // 解析数据
|
||||
ElMessage.success('加载成功!');
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
// 创建提交给后端的数据对象
|
||||
let payload = {
|
||||
name: '',
|
||||
description: '',
|
||||
principalId: '', // 需要一种方式来映射或转换为ID
|
||||
workLoad: '',
|
||||
cycle: '',
|
||||
completeTime: '',
|
||||
status: '',
|
||||
deadLine: ''
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
const date = new Date(dateStr);
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
projectItems.value.forEach(item => {
|
||||
switch (item.label) {
|
||||
case '01.模块名称':
|
||||
payload.name = item.value;
|
||||
break;
|
||||
case '02.模块周期':
|
||||
payload.cycle = item.value.toString();
|
||||
break;
|
||||
case '03.工作量':
|
||||
payload.workLoad = item.value.toString();
|
||||
break;
|
||||
case '04.负责人':
|
||||
payload.principalId = item.value; // 假设这里的值已经是ID，或者需要其他逻辑处理为ID
|
||||
break;
|
||||
case '05.状态':
|
||||
payload.status = item.value.toString();
|
||||
break;
|
||||
case '06.时间':
|
||||
payload.completeTime = formatDate(item.value);
|
||||
payload.deadLine = formatDate(item.value); // 如果deadLine和completeTime相同
|
||||
break;
|
||||
case '07.简介':
|
||||
payload.description = item.value;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
console.log(payload);
|
||||
|
||||
const res = editModule(payload, projectId, getToken());
|
||||
res.then(response => {
|
||||
if (response.data.code === 200) {
|
||||
ElMessage.success('保存成功!');
|
||||
fetchData(); // 刷新页面数据
|
||||
} else {
|
||||
ElMessage.error('保存失败!');
|
||||
}
|
||||
}).catch(error => {
|
||||
ElMessage.error('保存失败!'+error);
|
||||
});
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
const toggleEditMode = () => {
|
||||
if (editMode.value) {
|
||||
saveData(); // 如果当前处于编辑模式，调用 saveData 函数保存数据
|
||||
}
|
||||
|
||||
editMode.value = !editMode.value; // 切换编辑模式的状态
|
||||
};
|
||||
|
||||
fetchData();
|
||||
|
||||
//删除模块
|
||||
const deleteModuleClick = () => {
|
||||
//确认删除吗
|
||||
|
||||
const confirm = ElMessageBox.confirm('确认删除吗？');
|
||||
confirm.then(() => {
|
||||
const res = deleteModule(projectId, getToken());
|
||||
console.log(res);
|
||||
|
||||
res.then(response => {
|
||||
if (response.data.code === 200) {
|
||||
ElMessage.success('删除成功!');
|
||||
//返回上一级页面
|
||||
window.history.go(-1);
|
||||
} else if(response.data.code === 40019) {
|
||||
ElMessage.error('删除失败!没有权限');
|
||||
}else{
|
||||
ElMessage.error('删除失败!');
|
||||
}
|
||||
}).catch(error => {
|
||||
ElMessage.error('删除失败!'+error);
|
||||
});
|
||||
}).catch(() => {
|
||||
//取消删除
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 28%;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
158
src/views/personal/project/detail/participate.vue
Normal file
158
src/views/personal/project/detail/participate.vue
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div style=" width:100%;">
|
||||
<el-card style="max-width: 100vw;">
|
||||
<template #header><strong>子模块{{ projectId }}</strong></template>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-row v-for="item in projectItems" :key="item.label">
|
||||
<el-col :span="24">
|
||||
<div style="margin-top: 10%;"><strong>{{ item.label }}</strong></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row v-for="item in projectItems" :key="item.label">
|
||||
<el-col :span="24">
|
||||
<div v-if="item.label !== '07.简介'" style="margin-top: 11%;">
|
||||
<template v-if="editMode">
|
||||
<input v-model="item.value" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item.value }}
|
||||
</template>
|
||||
</div>
|
||||
<textarea v-if="item.label === '07.简介'" style="resize: none; margin-top: 15%; width: 100%;"
|
||||
v-model="item.value" :disabled="!editMode" rows="4" cols="50">
|
||||
</textarea>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<div style="display: flex;justify-content: center;">
|
||||
<el-button style="width: 80px;background-color: #409eff;color: azure" @click="toBack" >完成</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<el-alert>
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { getProjectModDetail} from '@/api/manage';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
|
||||
const projectItems = ref([
|
||||
{ label: '01.模块名称', value: '' },
|
||||
{ label: '02.模块周期', value: '' },
|
||||
{ label: '03.工作量', value: '' },
|
||||
{ label: '04.负责人ID', value: '' },
|
||||
{ label: '05.状态', value: '' },
|
||||
{ label: '06.时间', value: '' },
|
||||
{ label: '07.简介', value: '' },
|
||||
]);
|
||||
|
||||
const editMode = ref(false); // 编辑模式状态
|
||||
|
||||
|
||||
|
||||
|
||||
//获取id
|
||||
const route = useRoute();
|
||||
const projectId = Number(route.query.ModId);
|
||||
|
||||
|
||||
|
||||
//加载数据
|
||||
//修改表单内数据
|
||||
const parseData = (data) => {
|
||||
|
||||
|
||||
projectItems.value.forEach(item => {
|
||||
if (item.label === '01.模块名称') {
|
||||
item.value = data.name;
|
||||
} else if (item.label === '02.模块周期') {
|
||||
item.value = data.cycle;
|
||||
} else if (item.label === '03.工作量') {
|
||||
item.value = data.workLoad ;
|
||||
} else if (item.label === '04.负责人ID') {
|
||||
item.value = "1";
|
||||
} else if (item.label === '05.状态') {
|
||||
item.value = data.status.toString();
|
||||
} else if (item.label === '06.时间') {
|
||||
item.value = new Date(data.deadLine).toLocaleDateString();
|
||||
} else if (item.label === '07.简介') {
|
||||
item.value = data.description;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取数据方法
|
||||
const fetchData = async () => {
|
||||
console.log(projectId);
|
||||
|
||||
const res = await getProjectModDetail(projectId, getToken());
|
||||
console.log(res);
|
||||
if (res.data.data) {
|
||||
parseData(res.data.data); // 解析数据
|
||||
ElMessage.success('加载成功!');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//完成返回上一级
|
||||
const toBack = () => {
|
||||
window.history.go(-1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
fetchData();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 28%;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,124 +1,471 @@
|
|||
<template>
|
||||
<div style=" width:100%">
|
||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||
<template #header><strong >项目1</strong></template>
|
||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||
<div>
|
||||
名称
|
||||
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
状态
|
||||
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="width:80px">查询</el-button>
|
||||
<el-button style="width:80px">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
|
||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button
|
||||
text
|
||||
type=''
|
||||
>子系统列表</el-button
|
||||
>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<!-- <el-table-column type="selection" width="55" />-->
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="子系统名称" width="120" />
|
||||
<el-table-column property="address" label="工作量" show-overflow-tooltip />
|
||||
<el-table-column property="address" label="周期" />
|
||||
<el-table-column property="address" label="负责人" />
|
||||
<el-table-column property="address" label="状态" />
|
||||
<el-table-column property="address" label="子系统简介" />
|
||||
<el-table-column property="address" label="截止时间" />
|
||||
<el-table-column property="address" label="操作" >
|
||||
<el-button
|
||||
link
|
||||
style="color:deepskyblue"
|
||||
>查看详情</el-button
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
larger
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="50"
|
||||
class="mt-4"
|
||||
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<div style=" width:100%">
|
||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||
<template #header><strong>我管理的</strong></template>
|
||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||
<div>
|
||||
名称
|
||||
<el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
状态
|
||||
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="width:80px" @click="search">查询</el-button>
|
||||
<el-button style="width:80px" @click="reset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElTable } from 'element-plus';
|
||||
interface User {
|
||||
date: string
|
||||
name: string
|
||||
address: string
|
||||
}
|
||||
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<User[]>([]);
|
||||
|
||||
const handleSelectionChange = (val: User[]) => {
|
||||
multipleSelection.value = val;
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
|
||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button text type=''>项目列表</el-button>
|
||||
<div style="text-align: right;">
|
||||
<el-button type="primary" style="width:80px" @click="showEditDialog">编辑</el-button>
|
||||
<el-button style="width:80px ;background-color: #bd3124;color: azure;"
|
||||
@click="handleDeleteProjects">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="{ row }">{{ row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="项目名称" width="120" />
|
||||
<el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
|
||||
<el-table-column property="cycle" label="周期" />
|
||||
<el-table-column property="principalUser" label="负责人" />
|
||||
<el-table-column property="status" label="状态" />
|
||||
|
||||
|
||||
<el-table-column property="isFinish" label="文档（点击下载）">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row.files && row.files.URI">
|
||||
<a :href="row.files.URI" target="_blank" style="color: deepskyblue">
|
||||
下载文档
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
无
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="tags" label="标签">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="tag in row.tags" :key="tag">{{ tag.toString() }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="description" label="项目简介">
|
||||
<template v-slot="{ row }">
|
||||
<span v-for="(des, index) in row.description" :key="index">{{ des.toString() }} </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="deadLine" label="截止时间" />
|
||||
<el-table-column property="name" label="操作" #default="{ row }">
|
||||
<el-button link style="color:deepskyblue" @click="toChildSystem(row.id)">查看详情</el-button>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination larger background layout="prev, pager, next" @current-change="handleCurrentChange"
|
||||
:current-page="currentPage" :page-size="pageSize" :total="total"
|
||||
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
|
||||
</el-card>
|
||||
<el-dialog v-model="isDialogVisible" title="编辑项目" :close-on-click-modal="false">
|
||||
<el-form :model="editFormData">
|
||||
<el-form-item label="项目名称">
|
||||
<el-input v-model="editFormData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目描述">
|
||||
<el-input v-model="editFormData.description"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人ID">
|
||||
<el-input v-model="editFormData.principalUser"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作量">
|
||||
<el-input v-model="editFormData.workLoad"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="周期">
|
||||
<el-input v-model="editFormData.cycle"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="截止时间">
|
||||
<el-input v-model="editFormData.deadLine"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签">
|
||||
<el-input v-model="editFormData.tags"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文档">
|
||||
<el-input v-model="editFormData.files"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitEditForm">提交</el-button>
|
||||
<el-button @click="isDialogVisible = false">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { ElTable, ElTableColumn, ElPagination, ElButton, ElInput, ElTag, ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getManageList, deleteProject, editProject } from '@/api/manage.js';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 初始化路由
|
||||
const router = useRouter();
|
||||
|
||||
// 定义响应式变量
|
||||
const pageSize = ref(5);
|
||||
const currentPage = ref(1);
|
||||
const total = ref(6);
|
||||
const input1 = ref('');
|
||||
const input2 = ref('');
|
||||
const tableData = ref<User[]>([]);
|
||||
const selectedIds = ref([]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 定义用户接口
|
||||
interface User {
|
||||
id: number;
|
||||
cycle: number;
|
||||
name: string;
|
||||
description: string;
|
||||
workLoad: number;
|
||||
status: string;
|
||||
deadLine: string;
|
||||
tags: Array<any>;
|
||||
files: Array<any>;
|
||||
principalUser: string;
|
||||
}
|
||||
|
||||
// 定义解析数据的函数
|
||||
const parseData = (data) => {
|
||||
const files = JSON.parse(data.files);
|
||||
const tags = JSON.parse(data.tags);
|
||||
return {
|
||||
id: data.id,
|
||||
cycle: data.cycle,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
workLoad: data.workLoad,
|
||||
status: data.status,
|
||||
deadLine: data.deadLine,
|
||||
tags: tags,
|
||||
files: files,
|
||||
principalUser: data.principalUser
|
||||
};
|
||||
};
|
||||
|
||||
// 定义处理当前页码变化的函数
|
||||
watch(currentPage, () => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
// 定义获取数据的函数
|
||||
const fetchData = () => {
|
||||
const params = {
|
||||
page: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
is: 1
|
||||
};
|
||||
const project = getManageList(params, getToken());
|
||||
project.then(res => {
|
||||
const data = res.data.data.list;
|
||||
const dataTotal = res.data.data.total;
|
||||
|
||||
|
||||
|
||||
const tableData: User[] = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
|
||||
total.value = dataTotal;
|
||||
|
||||
|
||||
if (data) {
|
||||
const newData = data.map(item => parseData(item));
|
||||
console.log(newData);
|
||||
|
||||
tableData.value = newData;
|
||||
console.log(tableData.value);
|
||||
|
||||
initialTableData.value = tableData.value.slice();
|
||||
} else {
|
||||
console.log("没有可用数据");
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
fetchData();
|
||||
|
||||
// 定义处理当前页码变化的函数
|
||||
const handleCurrentChange = (page) => {
|
||||
currentPage.value = page;
|
||||
};
|
||||
|
||||
// 定义处理选择变化的函数
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedIds.value = selection.map(item => item.id);
|
||||
};
|
||||
|
||||
// 定义确认删除项目的函数
|
||||
const confirmDelete = (selectedIds) => {
|
||||
const message = `确认删除 ID 为 ${selectedIds} 的项目吗？`;
|
||||
ElMessageBox.confirm(message, {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
center: true,
|
||||
}).then(async () => {
|
||||
const token = getToken();
|
||||
for (let id of selectedIds) {
|
||||
await deleteProject(id, token)
|
||||
.then(() => {
|
||||
console.log("项目删除成功", id);
|
||||
fetchData();
|
||||
ElMessage.success('项目删除成功');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("删除失败", error);
|
||||
ElMessage.error('删除操作失败');
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessage.info('删除操作已取消');
|
||||
});
|
||||
};
|
||||
|
||||
// 定义处理项目删除的函数
|
||||
const handleDeleteProjects = async () => {
|
||||
if (selectedIds.value.length === 0) {
|
||||
ElMessage({
|
||||
message: '请选择一个进行删除',
|
||||
type: 'warning',
|
||||
duration: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
confirmDelete(selectedIds.value);
|
||||
};
|
||||
|
||||
const initialTableData = ref<User[]>([]);
|
||||
|
||||
// 统一检索函数
|
||||
const search = () => {
|
||||
const keyword = input1.value.trim().toLowerCase();
|
||||
const status = input2.value.trim().toLowerCase();
|
||||
|
||||
// 如果搜索关键词和状态都为空，则恢复初始数据
|
||||
if (keyword === '' && status === '') {
|
||||
tableData.value = initialTableData.value.slice();
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据关键词和状态进行检索
|
||||
tableData.value = initialTableData.value.filter(item => {
|
||||
const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
|
||||
const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
|
||||
return matchKeyword && matchStatus;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
input1.value = '';
|
||||
input2.value = '';
|
||||
tableData.value = initialTableData.value.slice();
|
||||
};
|
||||
|
||||
// 定义跳转到子系统的函数
|
||||
const toChildSystem = (id) => {
|
||||
router.push({ name: 'ChildSysManage', query: { id: id } });//目前只有4有数据
|
||||
};
|
||||
|
||||
//编辑功能
|
||||
|
||||
//创建响应式变量和数据
|
||||
const isDialogVisible = ref(false);
|
||||
|
||||
interface EditFormData {
|
||||
id: number;
|
||||
cycle: number;
|
||||
name: string;
|
||||
description: string;
|
||||
workLoad: number;
|
||||
status: string;
|
||||
deadLine: string;
|
||||
tags: Array<any>;
|
||||
files: Array<any>;
|
||||
principalUser: string;
|
||||
}
|
||||
|
||||
const editFormData = ref<EditFormData>({
|
||||
id: 0, // 默认为0，表示新建时的默认值
|
||||
cycle: 0,
|
||||
name: '',
|
||||
description: '',
|
||||
workLoad: 0,
|
||||
status: '',
|
||||
deadLine: '',
|
||||
tags: [],
|
||||
files: [],
|
||||
principalUser: ''
|
||||
});
|
||||
//添加显示数据
|
||||
const showEditDialog = () => {
|
||||
if (selectedIds.value.length === 0 || selectedIds.value.length > 1) {
|
||||
ElMessage({
|
||||
message: '请选择一个项目进行编辑',
|
||||
type: 'warning',
|
||||
duration: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const idToEdit = selectedIds.value[0]; // 由于是编辑，只选中一个进行编辑
|
||||
const projectToEdit = tableData.value.find(project => project.id === idToEdit);
|
||||
|
||||
];
|
||||
if (projectToEdit) {
|
||||
editFormData.value = { ...projectToEdit };
|
||||
editFormData.value.tags = projectToEdit.tags.tags;
|
||||
editFormData.value.files = projectToEdit.files.URI;
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
|
||||
isDialogVisible.value = true;
|
||||
} else {
|
||||
ElMessage.error('选中的项目未找到');
|
||||
}
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
};
|
||||
|
||||
|
||||
//提交表单按钮以及提交
|
||||
const submitEditForm = async () => {
|
||||
|
||||
// 假设有一个API方法updateProject来处理PUT请求
|
||||
console.log(editFormData);
|
||||
const body = {
|
||||
id: editFormData.value.id,
|
||||
name: editFormData.value.name,
|
||||
description: editFormData.value.description,
|
||||
workLoad: editFormData.value.workLoad,
|
||||
cycle: editFormData.value.cycle,
|
||||
deadLine: editFormData.value.deadLine,
|
||||
tags: editFormData.value.tags.toString(),
|
||||
files: editFormData.value.files.toString(),
|
||||
principalUser: editFormData.value.principalUser,
|
||||
status: editFormData.value.status
|
||||
}
|
||||
console.log(body);
|
||||
|
||||
editProject(body, editFormData.value.id, getToken()).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
ElMessage.error('更新失败');
|
||||
}
|
||||
|
||||
isDialogVisible.value = false;
|
||||
fetchData(); // 重新加载列表数据
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
ElMessage.error('更新失败');
|
||||
});
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/* 自定义弹窗样式 */
|
||||
.el-message-box {
|
||||
background-color: #fff;
|
||||
/* 设置背景颜色 */
|
||||
border: 2px solid #eee;
|
||||
/* 设置边框样式 */
|
||||
border-radius: 8px;
|
||||
/* 设置边框圆角 */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
/* 添加阴影效果 */
|
||||
}
|
||||
|
||||
.el-message-box__message {
|
||||
color: #333;
|
||||
/* 设置文本颜色 */
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
/* 设置按钮水平居中 */
|
||||
}
|
||||
|
||||
|
||||
.el-message-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* 垂直居中 */
|
||||
align-items: center;
|
||||
/* 水平居中 */
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.el-message-box__message {
|
||||
margin-bottom: 20px;
|
||||
/* 设置文字与按钮之间的距离 */
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* 水平居中 */
|
||||
gap: 10px;
|
||||
/* 设置按钮间隔 */
|
||||
}
|
||||
|
||||
.el-message-box__close {
|
||||
display: none;
|
||||
/* 隐藏默认关闭按钮 */
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,218 @@
|
|||
<template>
|
||||
hi
|
||||
</template>
|
||||
<div style=" width:100%">
|
||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||
<template #header><strong>我参与的</strong></template>
|
||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||
<div>
|
||||
名称
|
||||
<el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
状态
|
||||
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="width:80px" @click="search">查询</el-button>
|
||||
<el-button style="width:80px" @click="reset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
|
||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button text type=''>项目列表</el-button>
|
||||
</div>
|
||||
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="55" /> -->
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="{row}">{{ row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="项目名称" width="120" />
|
||||
<el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
|
||||
<el-table-column property="cycle" label="周期" />
|
||||
<el-table-column property="principalUser" label="负责人" />
|
||||
<el-table-column property="status" label="状态" />
|
||||
<el-table-column property="tags" label="标签">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="tag in row.tags" :key="tag">{{ tag.toString() }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="files" label="文档(点击下载)">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row.files && row.files.URI">
|
||||
<a :href="row.files.URI" target="_blank" style="color: deepskyblue">
|
||||
下载文档
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
无
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="description" label="项目简介" />
|
||||
<el-table-column property="deadline" label="截止时间" />
|
||||
<el-table-column property="address" label="操作" #default="{ row }">
|
||||
|
||||
<el-button link style="color:deepskyblue" @click="toChildSystem( row.id)">查看详情</el-button>
|
||||
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination larger background layout="prev, pager, next" :total="total" class="mt-4" :page-size="pageSize" :current-page="currentPage"
|
||||
@current-change="handleCurrentChange" style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElTable } from 'element-plus';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getParticipateProjectList } from '@/api/participate.js';
|
||||
import { getToken } from '@/utils/auth';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 设置页码
|
||||
const pageSize = ref(2);
|
||||
const currentPage = ref(1);
|
||||
const total = ref(4);
|
||||
|
||||
// 定义用户数据接口
|
||||
interface User {
|
||||
id: number;
|
||||
cycle: number;
|
||||
name: string;
|
||||
description: string;
|
||||
workLoad: number;
|
||||
files: { URI: string };
|
||||
status: string;
|
||||
principalUser: string;
|
||||
deadline: string;
|
||||
tags: Array<any>;
|
||||
}
|
||||
|
||||
// 响应式数据
|
||||
const input1 = ref('');
|
||||
const input2 = ref('');
|
||||
const tableData = ref<User[]>([
|
||||
|
||||
]);
|
||||
const initialTableData = ref<User[]>([]);
|
||||
|
||||
// 处理返回数据函数
|
||||
const parseData = (data) => {
|
||||
const files = JSON.parse(data.files);
|
||||
const tags = JSON.parse(data.tags);
|
||||
|
||||
return {
|
||||
id: data.id,
|
||||
cycle: data.cycle,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
workLoad: data.workLoad,
|
||||
files: files,
|
||||
status: data.status,
|
||||
principalUser: data.principalUser,
|
||||
deadline: data.deadLine,
|
||||
tags: tags
|
||||
};
|
||||
};
|
||||
|
||||
// 处理接口数据
|
||||
const fetchData = () => {
|
||||
const project = getParticipateProjectList(getToken());
|
||||
console.log(project);
|
||||
|
||||
project.then(res => {
|
||||
const data = res.data.data.list;
|
||||
const dataTotal = res.data.data.total;
|
||||
const dataPageSize = res.data.data.pageSize;
|
||||
|
||||
console.log(dataTotal, dataPageSize);
|
||||
|
||||
total.value = dataTotal;
|
||||
pageSize.value = dataPageSize;
|
||||
|
||||
if (data) {
|
||||
const dataProject = data.map(item => parseData(item));
|
||||
tableData.value = [...dataProject, ...tableData.value];
|
||||
initialTableData.value = tableData.value.slice();
|
||||
} else {
|
||||
console.log('没有数据');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
// 调用获取数据的函数
|
||||
fetchData();
|
||||
|
||||
// 处理路由跳转
|
||||
const toChildSystem = (id) => {
|
||||
router.push({ name: 'ChildSysParticipate', query: { projectId: id } });
|
||||
};
|
||||
|
||||
// 监听表格行选择事件
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<User[]>([]);
|
||||
|
||||
const handleSelectionChange = (val: User[]) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
// 统一检索函数
|
||||
const search = () => {
|
||||
const keyword = input1.value.trim().toLowerCase();
|
||||
const status = input2.value.trim().toLowerCase();
|
||||
|
||||
// 如果搜索关键词和状态都为空，则恢复初始数据
|
||||
if (keyword === '' && status === '') {
|
||||
tableData.value = initialTableData.value.slice();
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据关键词和状态进行检索
|
||||
tableData.value = initialTableData.value.filter(item => {
|
||||
const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
|
||||
const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
|
||||
return matchKeyword && matchStatus;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 定义处理当前页码变化的函数
|
||||
const handleCurrentChange = (page) => {
|
||||
currentPage.value = page;
|
||||
};
|
||||
// 重置检索条件
|
||||
const reset = () => {
|
||||
input1.value = '';
|
||||
input2.value = '';
|
||||
tableData.value = initialTableData.value.slice();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user