Compare commits

...

7 Commits

Author SHA1 Message Date
b39ef26930 后台页面补丁 2024-04-15 21:08:42 +08:00
25f546333c Merge remote-tracking branch 'origin/sht' into feature-guji
# Conflicts:
#	src/views/error-log/index.vue
#	src/views/tab/index.vue
#	src/views/table/dynamic-table/index.vue
#	src/views/theme/index.vue
2024-04-15 18:41:26 +08:00
ba9435fff7 假界面导入 2024-04-15 14:55:33 +08:00
240cafe11d Merge remote-tracking branch 'origin/feature-yaojie' into feature-guji 2024-04-15 12:58:18 +08:00
b39d1900ab 重大改变!登录,退出,侧边栏渲染均ok了 2024-04-15 12:47:42 +08:00
5293fc2840 Merge remote-tracking branch 'origin/master' into feature-guji
# Conflicts:
#	.env.dev_prod
#	components.d.ts
#	src/api/user.js
#	src/router/index.ts
#	src/store/modules/user.ts
#	src/views/login/index.vue
2024-04-13 14:51:39 +08:00
66f597f514 登录 2024-04-13 14:47:41 +08:00
30 changed files with 1197 additions and 988 deletions

View File

@ -2,5 +2,5 @@
NODE_ENV = 'production' NODE_ENV = 'production'
# 打包模式连测试服 # 打包模式连测试服
#VUE_APP_BASE_API = './api-test' VUE_APP_BASE_API = './api-test'
VUE_APP_BASE_API = '/' VUE_APP_BASE_API = '/'

View File

@ -4,4 +4,4 @@ NODE_ENV = 'development'
# 开发模式连生产服 # 开发模式连生产服
VUE_APP_BASE_API = '/api-prod' VUE_APP_BASE_API = '/api-prod'
VUE_APP_COOKIE = '' VUE_APP_COOKIE = ''
VUE_APP_BASE_API2 = 'http://nbxt.oa.x-lf.cn' VUE_APP_INNER='http://nbxt.oa.x-lf.cn'

18
components.d.ts vendored
View File

@ -13,46 +13,33 @@ declare module '@vue/runtime-core' {
DropdownMenu: typeof import('./src/components/Share/DropdownMenu.vue')['default'] DropdownMenu: typeof import('./src/components/Share/DropdownMenu.vue')['default']
Dropzone: typeof import('./src/components/Dropzone/index.vue')['default'] Dropzone: typeof import('./src/components/Dropzone/index.vue')['default']
EditorImage: typeof import('./src/components/Tinymce/components/EditorImage.vue')['default'] EditorImage: typeof import('./src/components/Tinymce/components/EditorImage.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
ElBadge: typeof import('element-plus/es')['ElBadge'] ElBadge: typeof import('element-plus/es')['ElBadge']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'] ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElCard: typeof import('element-plus/es')['ElCard'] ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress'] ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRate: typeof import('element-plus/es')['ElRate']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElSlider: typeof import('element-plus/es')['ElSlider']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import('element-plus/es')['ElTag']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ErrorLog: typeof import('./src/components/ErrorLog/index.vue')['default'] ErrorLog: typeof import('./src/components/ErrorLog/index.vue')['default']
GithubCorner: typeof import('./src/components/GithubCorner/index.vue')['default'] GithubCorner: typeof import('./src/components/GithubCorner/index.vue')['default']
Hamburger: typeof import('./src/components/Hamburger/index.vue')['default'] Hamburger: typeof import('./src/components/Hamburger/index.vue')['default']
@ -79,7 +66,4 @@ declare module '@vue/runtime-core' {
UploadExcel: typeof import('./src/components/UploadExcel/index.vue')['default'] UploadExcel: typeof import('./src/components/UploadExcel/index.vue')['default']
VueCountTo: typeof import('./src/components/vue-count-to/vue-countTo.vue')['default'] VueCountTo: typeof import('./src/components/vue-count-to/vue-countTo.vue')['default']
} }
export interface ComponentCustomProperties {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
}
} }

View File

@ -5,7 +5,7 @@ const tokens = {
}, },
editor: { editor: {
token: 'editor-token' token: 'editor-token'
} },
}; };
const users = { const users = {
@ -20,13 +20,13 @@ const users = {
introduction: 'I am an editor', introduction: 'I am an editor',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: 'Normal Editor' name: 'Normal Editor'
} },
}; };
export default [ export default [
// user login // user login
{ {
url: '/vue-element-admin/user/login', url: '/auth/login',
method: 'post', method: 'post',
response: config => { response: config => {
const { username } = config.body; const { username } = config.body;

7
package-lock.json generated
View File

@ -30,6 +30,7 @@
"xlsx": "0.18.5" "xlsx": "0.18.5"
}, },
"devDependencies": { "devDependencies": {
"@types/sortablejs": "^1.15.8",
"@vitejs/plugin-vue": "3.2.0", "@vitejs/plugin-vue": "3.2.0",
"@vitejs/plugin-vue-jsx": "2.1.1", "@vitejs/plugin-vue-jsx": "2.1.1",
"@vue/cli-plugin-typescript": "5.0.8", "@vue/cli-plugin-typescript": "5.0.8",
@ -1211,6 +1212,12 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@types/sortablejs": {
"version": "1.15.8",
"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
"integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
"dev": true
},
"node_modules/@types/web-bluetooth": { "node_modules/@types/web-bluetooth": {
"version": "0.0.16", "version": "0.0.16",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz", "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",

View File

@ -33,6 +33,7 @@
"xlsx": "0.18.5" "xlsx": "0.18.5"
}, },
"devDependencies": { "devDependencies": {
"@types/sortablejs": "^1.15.8",
"@vitejs/plugin-vue": "3.2.0", "@vitejs/plugin-vue": "3.2.0",
"@vitejs/plugin-vue-jsx": "2.1.1", "@vitejs/plugin-vue-jsx": "2.1.1",
"@vue/cli-plugin-typescript": "5.0.8", "@vue/cli-plugin-typescript": "5.0.8",

View File

@ -1,10 +1,17 @@
import request from '@/utils/request'; import request from '@/utils/request';
function getCurrentTimestamp() {
export function fetchList(query) { return new Date().getTime();
}
export function SystemGetByProjId(projectId, token) {
return request({ return request({
url: '/vue-element-admin/article/list', url: '/module/get',
method: 'get', method: 'get',
params: query params: { projectId },
headers: {
'Authorization':'Bearer '+token,
'content-type': 'application/json;charset=utf-8',
'Timestamp': getCurrentTimestamp()
}
}); });
} }

View File

@ -1,24 +1,40 @@
import request from '@/utils/request'; import request from '@/utils/request';
function getCurrentTimestamp() {
return new Date().getTime();
}
export function login(data) { export function login(data) {
return request({ return request({
url: '/auth/login', url: '/auth/login',
method: 'post', method: 'post',
data data,
headers: {
'Timestamp':getCurrentTimestamp()
}
}); });
} }
export function getInfo(token) { export function getInfo(token) {
return request({ return request({
url: '/vue-element-admin/user/info', url: '/user/profile/get',
method: 'get', method: 'get',
params: { token } // params: {token},
headers: {
'Authorization':'Bearer '+token,
'Timestamp': getCurrentTimestamp()
}
}); });
} }
export function logout(token) { export function logout(token) {
return request({ return request({
url: '/vue-element-admin/user/logout', url: '/auth/logout',
method: 'post', method: 'get',
params: { token } headers: {
'Authorization':'Bearer '+token,
'Timestamp': getCurrentTimestamp()
}
}); });
} }

View File

@ -3,7 +3,7 @@
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path"> <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">{{ <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
item.meta.title item.meta.title
}}</span> }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item> </el-breadcrumb-item>

View File

@ -1,4 +1,5 @@
<template> <template>
<!-- 顶部缩放侧边栏icon-->
<div style="padding: 0 15px;" @click="toggleClick"> <div style="padding: 0 15px;" @click="toggleClick">
<svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
width="64" height="64"> width="64" height="64">

View File

@ -1,4 +1,5 @@
<template> <template>
<!-- 顶部全屏icon-->
<div> <div>
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" /> <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
</div> </div>

View File

@ -62,6 +62,7 @@ import Search from '@/components/HeaderSearch';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { CaretBottom } from '@element-plus/icons-vue'; import { CaretBottom } from '@element-plus/icons-vue';
export default defineComponent({ export default defineComponent({
components: { components: {
Breadcrumb, Breadcrumb,
@ -86,7 +87,10 @@ export default defineComponent({
store.app().toggleSidebar(); store.app().toggleSidebar();
}, },
async logout() { async logout() {
console.log('5989569898')
// store.user().login()
await store.user().logout(); await store.user().logout();
console.log('hhhh')
this.$router.push(`/login?redirect=${this.$route.fullPath}`); this.$router.push(`/login?redirect=${this.$route.fullPath}`);
} }
} }

View File

@ -35,7 +35,7 @@ export default defineComponent({
}; };
}, },
computed: { computed: {
...mapState(store.app, ['sidebar']), ...mapState(store.app, ['Sidebar']),
...mapState(store.permission, { ...mapState(store.permission, {
permission_routes: 'routes' permission_routes: 'routes'
}), }),

View File

@ -10,6 +10,7 @@ NProgress.configure({ showSpinner: false }); // NProgress Configuration
const whiteList = ['/login', '/auth-redirect']; // no redirect whitelist const whiteList = ['/login', '/auth-redirect']; // no redirect whitelist
//每次路由变动,都会调用这个路由守卫
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
console.log('router.beforeEach', to.path, from.path); console.log('router.beforeEach', to.path, from.path);
// start progress bar // start progress bar
@ -20,29 +21,43 @@ router.beforeEach(async (to, from, next) => {
// determine whether the user has logged in // determine whether the user has logged in
const hasToken = getToken(); const hasToken = getToken();
console.log('88888',hasToken)
if (hasToken) { if (hasToken) {
//有token
// 且前往登录
if (to.path === '/login') { if (to.path === '/login') {
// if is logged in, redirect to the home page // if is logged in, redirect to the home page
NProgress.done(); // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939 NProgress.done(); // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
next({ path: '/' }); next({ path: '/' });
} else { } else {
// 有token但是不去登录
// determine whether the user has obtained his permission roles through getInfo // determine whether the user has obtained his permission roles through getInfo
const hasRoles = userStore().roles && userStore().roles.length > 0; // const hasRoles = userStore().roles && userStore().roles.length > 0;
const hasRoles = true;
// console.log('hasRoles=', hasRoles); // console.log('hasRoles=', hasRoles);
// 如果用角色
if (hasRoles) { if (hasRoles) {
// 继续执行
const accessRoutes = await permissionStore().generateRoutes(['admin']);
accessRoutes.forEach(item => {
router.addRoute(item);
});
next(); next();
} else { } else {
// 没有角色
try { try {
// get user info // get user info
// note: roles must be a object array! such as: ['admin'] or ,['developer','editor'] // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const infoRes = await userStore().getInfo() as any; const infoRes = await userStore().getInfo() as any; //获取角色,调用查询个人信息的接口
let roles = []; console.log('permissionuserinfor:',infoRes)
let roles:any = [];
if (infoRes.roles) { if (infoRes.roles) {
roles = infoRes.roles; roles = infoRes.roles;
} }
roles = ['admin']
// generate accessible routes map based on roles // generate accessible routes map based on roles
const accessRoutes = await permissionStore().generateRoutes(roles); const accessRoutes = await permissionStore().generateRoutes(roles);
// console.log('accessRoutes=', accessRoutes) // console.log('accessRoutes=', accessRoutes)
@ -68,6 +83,7 @@ router.beforeEach(async (to, from, next) => {
} }
} }
} else { } else {
// 没有token
/* has no token*/ /* has no token*/
if (whiteList.indexOf(to.path) !== -1) { if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly // in the free login whitelist, go directly

View File

@ -1,15 +1,15 @@
// import { markRaw } from 'vue'; import { markRaw } from 'vue';
import { createRouter, createWebHistory } from 'vue-router'; // createWebHashHistory, createWebHistory import { createRouter, createWebHistory } from 'vue-router'; // createWebHashHistory, createWebHistory
import type { Router, RouteRecordRaw, RouteComponent } from 'vue-router'; import type { Router, RouteRecordRaw, RouteComponent } from 'vue-router';
// import { Help as IconHelp } from '@element-plus/icons-vue'; import { Help as IconHelp } from '@element-plus/icons-vue';
/* Layout */ /* Layout */
const Layout = ():RouteComponent => import('@/layout/index.vue'); const Layout = ():RouteComponent => import('@/layout/index.vue');
/* Router Modules */ /* Router Modules */
// import componentsRouter from './modules/components'; import componentsRouter from './modules/components';
// import chartsRouter from './modules/charts'; import chartsRouter from './modules/charts';
// import nestedRouter from './modules/nested'; import nestedRouter from './modules/nested';
import tableRouter from './modules/table'; import tableRouter from './modules/table';
/** /**
@ -51,44 +51,44 @@ export const constantRoutes:RouteRecordRaw[] = [
component: () => import('@/views/error-page/401.vue'), component: () => import('@/views/error-page/401.vue'),
meta: { hidden: true } meta: { hidden: true }
}, },
// { {
// path: '/', path: '/',
// component: Layout, component: Layout,
// redirect: '/dashboard', redirect: '/dashboard',
// children: [ children: [
// { {
// path: 'dashboard', path: 'dashboard',
// component: () => import('@/views/dashboard/index.vue'), component: () => import('@/views/dashboard/index.vue'),
// name: 'Dashboard', name: 'Dashboard',
// meta: { title: 'Dashboard', icon: 'dashboard', affix: true } meta: { title: '我管理的', icon: 'dashboard', affix: true }
// } }
// ] ]
// }, },
// { {
// path: '/documentation', path: '/documentation',
// component: Layout, component: Layout,
// children: [ children: [
// { {
// path: 'index', path: 'index',
// component: () => import('@/views/documentation/index.vue'), component: () => import('@/views/documentation/index.vue'),
// name: 'Documentation', name: 'Documentation',
// meta: { title: 'Documentation', icon: 'documentation', affix: true } meta: { title: 'Documentation', icon: 'documentation', affix: true }
// } }
// ] ]
// }, },
// { {
// path: '/guide', path: '/guide',
// component: Layout, component: Layout,
// redirect: '/guide/index', redirect: '/guide/index',
// children: [ children: [
// { {
// path: 'index', path: 'index',
// component: () => import('@/views/guide/index.vue'), component: () => import('@/views/guide/index.vue'),
// name: 'Guide', name: 'Guide',
// meta: { title: 'Guide', icon: 'guide', noCache: true } meta: { title: 'Guide', icon: 'guide', noCache: true }
// } }
// ] ]
// }, },
{ {
path: '/profile', path: '/profile',
component: Layout, component: Layout,
@ -118,91 +118,91 @@ export const asyncRoutes:RouteRecordRaw[] = [
redirect: '/permission/page', redirect: '/permission/page',
name: 'Permission', name: 'Permission',
meta: { meta: {
// alwaysShow: true, // will always show the root menu alwaysShow: true, // will always show the root menu
title: '内部系统' title: 'Permission',
// icon: 'lock' icon: 'lock',
// roles: ['admin', 'editor'] // you can set roles in root nav roles: ['admin', 'editor','teacher_user', 'xiao_lfeng'] // you can set roles in root nav
}, },
children: [ children: [
// { {
// path: 'page', path: 'page',
// component: () => import('@/views/permission/page.vue'), component: () => import('@/views/permission/page.vue'),
// name: 'PagePermission', name: 'PagePermission',
// meta: { meta: {
// title: 'Page Permission', title: 'Page Permission',
// roles: ['admin'] // or you can only set roles in sub nav roles: ['admin','teacher_user'] // or you can only set roles in sub nav
// } }
// }, },
// { {
// path: 'directive', path: 'directive',
// component: () => import('@/views/permission/directive.vue'), component: () => import('@/views/permission/directive.vue'),
// name: 'DirectivePermission', name: 'DirectivePermission',
// meta: { meta: {
// title: 'Directive Permission' title: 'Directive Permission'
// // if do not set roles, means: this page does not require permission // if do not set roles, means: this page does not require permission
// } }
// }, },
// { {
// path: 'role', path: 'role',
// component: () => import('@/views/permission/role.vue'), component: () => import('@/views/permission/role.vue'),
// name: 'RolePermission', name: 'RolePermission',
// meta: { meta: {
// title: 'Role Permission', title: 'Role Permission',
// roles: ['admin'] roles: ['admin','teacher']
// } }
// } }
] ]
}, },
// { {
// path: '/icon', path: '/icon',
// component: Layout, component: Layout,
// children: [ children: [
// { {
// path: 'index', path: 'index',
// component: () => import('@/views/icons/index.vue'), component: () => import('@/views/icons/index.vue'),
// name: 'Icons', name: 'Icons',
// meta: { title: 'Icons', icon: 'icon', noCache: true } meta: { title: 'Icons', icon: 'icon', noCache: true }
// } }
// ] ]
// }, },
// /** when your routing map is too long, you can split it into small modules **/ // /** when your routing map is too long, you can split it into small modules **/
// componentsRouter, componentsRouter,
// chartsRouter, chartsRouter,
// nestedRouter, nestedRouter,
tableRouter, tableRouter,
//
// { {
// path: '/example', path: '/example',
// component: Layout, component: Layout,
// redirect: '/example/list', redirect: '/example/list',
// name: 'Example', name: 'Example',
// meta: { meta: {
// title: 'Example', title: 'Example',
// icon: markRaw(IconHelp) icon: markRaw(IconHelp)
// }, },
// children: [ children: [
// { {
// path: 'create', path: 'create',
// component: () => import('@/views/example/create.vue'), component: () => import('@/views/example/create.vue'),
// name: 'CreateArticle', name: 'CreateArticle',
// meta: { title: 'Create Article', icon: 'edit' } meta: { title: 'Create Article', icon: 'edit' }
// }, },
// { {
// path: 'edit/:id(\\d+)', path: 'edit/:id(\\d+)',
// component: () => import('@/views/example/edit.vue'), component: () => import('@/views/example/edit.vue'),
// name: 'EditArticle', name: 'EditArticle',
// meta: { hidden: true, title: 'Edit Article', noCache: true, activeMenu: '/example/list' } meta: { hidden: true, title: 'Edit Article', noCache: true, activeMenu: '/example/list' }
// }, },
// { {
// path: 'list', path: 'list',
// component: () => import('@/views/example/list.vue'), component: () => import('@/views/example/list.vue'),
// name: 'ArticleList', name: 'ArticleList',
// meta: { title: 'Article List', icon: 'list' } meta: { title: 'Article List', icon: 'list' }
// } }
// ] ]
// }, },
{ {
path: '/tab', path: '/tab',
@ -212,35 +212,35 @@ export const asyncRoutes:RouteRecordRaw[] = [
path: 'index', path: 'index',
component: () => import('@/views/tab/index.vue'), component: () => import('@/views/tab/index.vue'),
name: 'Tab', name: 'Tab',
meta: { title: '日报', icon: 'tab' } meta: { title: 'Tab', icon: 'tab' }
} }
] ]
}, },
// { {
// path: '/error', path: '/error',
// component: Layout, component: Layout,
// redirect: 'noRedirect', redirect: 'noRedirect',
// name: 'ErrorPages', name: 'ErrorPages',
// meta: { meta: {
// title: 'Error Pages', title: 'Error Pages',
// icon: '404' icon: '404'
// }, },
// children: [ children: [
// { {
// path: '401', path: '401',
// component: () => import('@/views/error-page/401.vue'), component: () => import('@/views/error-page/401.vue'),
// name: 'Page401', name: 'Page401',
// meta: { title: '401', noCache: true } meta: { title: '401', noCache: true }
// }, },
// { {
// path: '404', path: '404',
// component: () => import('@/views/error-page/404.vue'), component: () => import('@/views/error-page/404.vue'),
// name: 'Page404', name: 'Page404',
// meta: { title: '404', noCache: true } meta: { title: '404', noCache: true }
// } }
// ] ]
// }, },
{ {
path: '/error-log', path: '/error-log',
@ -250,7 +250,7 @@ export const asyncRoutes:RouteRecordRaw[] = [
path: 'log', path: 'log',
component: () => import('@/views/error-log/index.vue'), component: () => import('@/views/error-log/index.vue'),
name: 'ErrorLog', name: 'ErrorLog',
meta: { title: '消息', icon: 'bug' } meta: { title: 'Error Log', icon: 'bug' }
} }
] ]
}, },
@ -261,7 +261,7 @@ export const asyncRoutes:RouteRecordRaw[] = [
redirect: '/excel/export-excel', redirect: '/excel/export-excel',
name: 'Excel', name: 'Excel',
meta: { meta: {
title: '申请和审批', title: 'Excel',
icon: 'excel' icon: 'excel'
}, },
children: [ children: [
@ -269,63 +269,63 @@ export const asyncRoutes:RouteRecordRaw[] = [
path: 'export-excel', path: 'export-excel',
component: () => import('@/views/excel/export-excel.vue'), component: () => import('@/views/excel/export-excel.vue'),
name: 'ExportExcel', name: 'ExportExcel',
meta: { title: '提交申请' } meta: { title: 'Export Excel' }
}, },
{ {
path: 'export-selected-excel', path: 'export-selected-excel',
component: () => import('@/views/excel/select-excel.vue'), component: () => import('@/views/excel/select-excel.vue'),
name: 'SelectExcel', name: 'SelectExcel',
meta: { title: '我的审批' } meta: { title: 'Export Selected' }
}, },
{ {
path: 'export-merge-header', path: 'export-merge-header',
component: () => import('@/views/excel/merge-header.vue'), component: () => import('@/views/excel/merge-header.vue'),
name: 'MergeHeader', name: 'MergeHeader',
meta: { title: '记录查询' } meta: { title: 'Merge Header' }
},
{
path: 'upload-excel',
component: () => import('@/views/excel/upload-excel.vue'),
name: 'UploadExcel',
meta: { title: 'Upload Excel' }
} }
// {
// path: 'upload-excel',
// component: () => import('@/views/excel/upload-excel.vue'),
// name: 'UploadExcel',
// meta: { title: 'Upload Excel' }
// }
] ]
}, },
// { {
// path: '/zip', path: '/zip',
// component: Layout, component: Layout,
// redirect: '/zip/download', redirect: '/zip/download',
// name: 'Zip', name: 'Zip',
// meta: { alwaysShow: true, title: 'Zip', icon: 'zip' }, meta: { alwaysShow: true, title: 'Zip', icon: 'zip' },
// children: [ children: [
// { {
// path: 'download', path: 'download',
// component: () => import('@/views/zip/index.vue'), component: () => import('@/views/zip/index.vue'),
// name: 'ExportZip', name: 'ExportZip',
// meta: { title: 'Export Zip' } meta: { title: 'Export Zip' }
// } }
// ] ]
// }, },
// { {
// path: '/pdf', path: '/pdf',
// component: Layout, component: Layout,
// redirect: '/pdf/index', redirect: '/pdf/index',
// children: [ children: [
// { {
// path: 'index', path: 'index',
// component: () => import('@/views/pdf/index.vue'), component: () => import('@/views/pdf/index.vue'),
// name: 'PDF', name: 'PDF',
// meta: { title: 'PDF', icon: 'pdf' } meta: { title: 'PDF', icon: 'pdf' }
// } }
// ] ]
// }, },
// { {
// path: '/pdf/download', path: '/pdf/download',
// component: () => import('@/views/pdf/download.vue'), component: () => import('@/views/pdf/download.vue'),
// meta: { hidden: true } meta: { hidden: true }
// }, },
{ {
path: '/theme', path: '/theme',
@ -335,65 +335,65 @@ export const asyncRoutes:RouteRecordRaw[] = [
path: 'index', path: 'index',
component: () => import('@/views/theme/index.vue'), component: () => import('@/views/theme/index.vue'),
name: 'Theme', name: 'Theme',
meta: { title: '个人信息管理', icon: 'theme' } meta: { title: 'Theme', icon: 'theme' }
} }
] ]
}, },
// { {
// path: '/clipboard', path: '/clipboard',
// component: Layout, component: Layout,
// children: [ children: [
// { {
// path: 'index', path: 'index',
// component: () => import('@/views/clipboard/index.vue'), component: () => import('@/views/clipboard/index.vue'),
// name: 'ClipboardDemo', name: 'ClipboardDemo',
// meta: { title: 'Clipboard', icon: 'clipboard' } meta: { title: 'Clipboard', icon: 'clipboard' }
// } }
// ] ]
// }, },
// { {
// path: '/external-link', path: '/external-link',
// component: Layout, component: Layout,
// children: [ children: [
// { {
// path: 'https://element-plus.midfar.com', path: 'https://element-plus.midfar.com',
// meta: { title: 'External Link', icon: 'link' }, meta: { title: 'External Link', icon: 'link' },
// redirect: '' redirect: ''
// } }
// ] ]
// }, },
//
// { {
// path: '/my-demo', path: '/my-demo',
// component: Layout, component: Layout,
// name: 'MyDemo', name: 'MyDemo',
// meta: { meta: {
// title: 'MyDemo', title: 'MyDemo',
// icon: 'component' icon: 'component'
// }, },
// children: [ children: [
// { {
// path: 'element-demo', path: 'element-demo',
// component: () => import('@/views/mydemo/ElementDemo.vue'), component: () => import('@/views/mydemo/ElementDemo.vue'),
// name: 'ElementDemo', name: 'ElementDemo',
// meta: { title: 'ElementDemo', icon: 'skill' } meta: { title: 'ElementDemo', icon: 'skill' }
// }, },
// { {
// path: 'store-demo', path: 'store-demo',
// component: () => import('@/views/mydemo/StoreDemo.vue'), component: () => import('@/views/mydemo/StoreDemo.vue'),
// name: 'StoreDemo', name: 'StoreDemo',
// meta: { title: 'StoreDemo', icon: 'lock' } meta: { title: 'StoreDemo', icon: 'lock' }
// }, },
// { {
// path: 'webSocket-demo', path: 'webSocket-demo',
// component: () => import('@/views/mydemo/WebSocketDemo.vue'), component: () => import('@/views/mydemo/WebSocketDemo.vue'),
// name: 'WebSocketDemo', name: 'WebSocketDemo',
// meta: { title: 'WebSocketDemo', icon: 'lock' } meta: { title: 'WebSocketDemo', icon: 'lock' }
// } }
// ] ]
// }, },
// 404 page must be placed at the end !!! // 404 page must be placed at the end !!!
{ path: '/:pathMatch(.*)*', redirect: '/404', meta: { hidden: true }} { path: '/:pathMatch(.*)*', redirect: '/404', meta: { hidden: true }}

View File

@ -55,10 +55,15 @@ export default defineStore({
this.routes = constantRoutes.concat(routes); this.routes = constantRoutes.concat(routes);
}, },
generateRoutes(roles: string[]) { generateRoutes(roles: string[]) {
console.log("asdasd")
let accessedRoutes; let accessedRoutes;
if (roles.includes('admin')) { if (roles.includes('admin')) {
console.log("123")
accessedRoutes = asyncRoutes || []; accessedRoutes = asyncRoutes || [];
} else { } else {
console.log("456")
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles); accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
} }
this.setRoutes(accessedRoutes); this.setRoutes(accessedRoutes);

View File

@ -1,5 +1,5 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { login as apiLogin, logout as apiLogout, getInfo as apiGetInfo } from '@/api/user'; import {login as apiLogin, logout as apiLogout, getInfo as apiGetInfo, } from '@/api/user';
import { getToken, setToken, removeToken } from '@/utils/auth'; import { getToken, setToken, removeToken } from '@/utils/auth';
import router, { resetRouter } from '@/router'; import router, { resetRouter } from '@/router';
import tagsViewStore from './tagsView'; import tagsViewStore from './tagsView';
@ -16,26 +16,53 @@ export interface IUserState {
export default defineStore({ export default defineStore({
id: 'user', id: 'user',
state: ():IUserState => ({ state: ():{
address: string;
signature: string;
sex: string;
roles: any[];
description: string;
avatar: string;
token: any;
phone: string;
nickname: string;
id: string;
email: string;
age: string;
username: string
} => ({
token: getToken(), token: getToken(),
userId: '', id:'',
name: '', username:'',
avatar: '', address:'',
introduction: '', phone:'',
roles: [] email:'',
age:'',
signature:'',
avatar:'',
nickname:'',
sex:'',
description:'',
roles:['admin']
}), }),
getters: {}, getters: {},
actions: { actions: {
// user login // user login
login({ commit }, userInfo):Promise<void> {
login(userInfo):Promise<void> {
const { username, password } = userInfo; const { username, password } = userInfo;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
apiLogin({ username: username.trim(), password: password }).then(response => { apiLogin({ user: username.trim(), password: password }).then(response => {
const { data } = response; const { data } = response;
commit('SET_TOKEN', data.token); this.token = data.token;
setToken(data.token); setToken(data.token);
console.log("token", this.token)
router.push('/')
resolve(); resolve();
console.log('2222',response)
}).catch(error => { }).catch(error => {
console.log('3333',error)
reject(error); reject(error);
}); });
}); });
@ -46,22 +73,28 @@ export default defineStore({
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
apiGetInfo(this.token).then(response => { apiGetInfo(this.token).then(response => {
const { data } = response; const { data } = response;
console.log('66666',data)
if (!data) { if (!data) {
reject('Verification failed, please Login again.'); reject('Verification failed, please Login again.');
} }
const { id,username,address,phone,email,age,signature,avatar,nickname,sex,description } = data;
const { roles, name, avatar, introduction } = data;
// roles must be a non-empty array // roles must be a non-empty array
if (!roles || roles.length <= 0) { // if (!roles || roles.length <= 0) {
reject('getInfo: roles must be a non-null array!'); // reject('getInfo: roles must be a non-null array!');
} // }
this.id = id;
this.roles = roles; // this.roles = roles;
this.name = name; // this.roles =['admin'];
this.username = username;
this.avatar = avatar; this.avatar = avatar;
this.introduction = introduction; this.description = description;
this.sex = sex;
this.age = age;
this.address = address;
this.phone = phone;
this.email = email;
this.signature = signature;
this.nickname = nickname;
resolve(data); resolve(data);
}).catch(error => { }).catch(error => {
reject(error); reject(error);
@ -71,17 +104,17 @@ export default defineStore({
// user logout // user logout
logout():Promise<void> { logout():Promise<void> {
console.log("token",this.token)
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
apiLogout(this.token).then(() => { apiLogout(this.token).then(() => {
this.token = ''; this.token = '';
this.roles = []; this.roles = [];
console.log('退出',this.token)
removeToken(); removeToken();
resetRouter(); resetRouter();
// reset visited views and cached views // reset visited views and cached views
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485 // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
tagsViewStore().delAllViews(); tagsViewStore().delAllViews();
resolve(); resolve();
}).catch(error => { }).catch(error => {
reject(error); reject(error);
@ -105,11 +138,11 @@ export default defineStore({
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const infoRes = await this.getInfo() as any; const infoRes = await this.getInfo() as any;
let roles = []; let roles : any[] = [];
if (infoRes.roles) { if (infoRes.roles) {
roles = infoRes.roles; roles = infoRes.roles;
} }
roles = ['admin']
resetRouter(); resetRouter();
// generate accessible routes map based on roles // generate accessible routes map based on roles

View File

@ -1,30 +1,25 @@
import axios from 'axios'; import axios from 'axios';
import store from '@/store'; import store from '@/store';
import { getToken } from '@/utils/auth'; import {getToken, removeToken} from '@/utils/auth';
const BaseURL ='https://nbxt.oa.x-lf.cn'
// create an axios instance // create an axios instance
const service = axios.create({ const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url baseURL: BaseURL, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests // withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout timeout: 10000 // request timeout
}); });
const service2 = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
});
// request interceptor
service.interceptors.request.use( service.interceptors.request.use(
config => { config => {
// do something before request is sent // do something before request is sent
console.log('wwww')
if (store.user().token) { if (store.user().token) {
// let each request carry token // let each request carry token
// ['X-Token'] is a custom headers key // ['X-Token'] is a custom headers key
// please modify it according to the actual situation // please modify it according to the actual situation
config.headers['X-Token'] = getToken(); config.headers['Token'] = getToken();
} }
return config; return config;
}, },
@ -35,6 +30,8 @@ service.interceptors.request.use(
} }
); );
// response interceptor // response interceptor
service.interceptors.response.use( service.interceptors.response.use(
/** /**
@ -49,9 +46,10 @@ service.interceptors.response.use(
*/ */
response => { response => {
const res = response.data; const res = response.data;
// console.log("removeToken:",removeToken())
console.log('999999',response)
// if the custom code is not 20000, it is judged as an error. // if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) { if (res.code !== 20000 && res.code !== 200) {
ElMessage({ ElMessage({
message: res.message || 'Error', message: res.message || 'Error',
type: 'error', type: 'error',
@ -86,74 +84,6 @@ service.interceptors.response.use(
} }
); );
service2.interceptors.request.use(
config => {
// do something before request is sent
if (store.user().token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken();
}
return config;
},
error => {
// do something with request error
console.log(error); // for debug
return Promise.reject(error);
}
);
// response interceptor // response interceptor
service2.interceptors.response.use( export default service ;
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data;
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
ElMessage({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
});
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
ElMessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.user().resetToken();
location.reload();
});
}
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
console.log('err' + error); // for debug
ElMessage({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
);
export default { service, service2 };

View File

@ -15,7 +15,7 @@ export function isExternal(path) {
* @returns {Boolean} * @returns {Boolean}
*/ */
export function validUsername(str) { export function validUsername(str) {
const valid_map = ['admin', 'editor']; const valid_map = ['admin', 'editor', 'teacher_user', 'xiao_lfeng'];
return valid_map.indexOf(str.trim()) >= 0; return valid_map.indexOf(str.trim()) >= 0;
} }

View File

@ -32,7 +32,7 @@ export default defineComponent({
}; };
}, },
created() { created() {
this.fetchData(); // this.fetchData();
}, },
methods: { methods: {
statusFilter(status) { statusFilter(status) {

View File

@ -1,9 +1,10 @@
<template> <template>
<div style=" width:100%"> <div style=" width:100%">
<el-card style="max-width: 100vw;margin: 1.5vw;"> <el-card style="max-width: 100vw;margin: 1.5vw;">
<template #header><span>消息</span></template> <template #header>
<span>消息</span>
</template>
<div style="display:flex;flex-direction:row;justify-content: space-around "> <div style="display:flex;flex-direction:row;justify-content: space-around ">
<div> <div>
时间 时间
@ -11,11 +12,12 @@
v-model="value2" v-model="value2"
type="daterange" type="daterange"
unlink-panels unlink-panels
range-separator="To" range-separator="——"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
:shortcuts="shortcuts" :shortcuts="shortcuts"
:size="large" :size="large"
style="margin-left:0.5vw"
/> />
</div> </div>
<div> <div>
@ -23,8 +25,8 @@
<el-select <el-select
v-model="value" v-model="value"
clearable clearable
placeholder="Select" placeholder="Status"
style="width: 240px" style="width: 240px;margin-left:0.5vw"
> >
<el-option <el-option
v-for="item in options" v-for="item in options"
@ -37,13 +39,13 @@
</div> </div>
<div> <div>
<el-button type="primary">查询</el-button> <el-button type="primary" style="width:80px">查询</el-button>
<el-button>重置</el-button> <el-button style="width:80px">重置</el-button>
</div> </div>
</div> </div>
</el-card> </el-card>
<el-card style="max-width: 100vw;height:50vh;margin:1.3vw"> <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
<div style="display:flex;flex-direction: row;justify-content: space-between"> <div style="display:flex;flex-direction: row;justify-content: space-between">
<el-button <el-button
text text
@ -64,26 +66,41 @@
</div> </div>
<div class="table-cell table-cell-right"> <div class="table-cell table-cell-right">
<el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button> <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
<el-button size="small" type="danger" @click="handleDelete(index, row);centerDialogVisible = true">Delete</el-button>
<el-dialog v-model="centerDialogVisible" title="删除" width="500" :modal="false">
<span>
是否确认删除此条信息
</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="centerDialogVisible = false">取消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">
确认
</el-button>
</div>
</template>
</el-dialog>
</div> </div>
</div> </div>
<el-pagination <el-pagination
size="large"
background background
layout="prev, pager, next" layout="prev, pager, next"
:total="50" :total="50"
class="mt-[5vh]" style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
/> />
</el-card> </el-card>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
//
const centerDialogVisible = ref(false);
// //
const value2 = ref(''); const value2 = ref('');
const shortcuts = [ const shortcuts = [
{ {
text: 'Last week', text: 'Last week',
@ -120,15 +137,15 @@ const value = ref('');
const options = [ const options = [
{ {
value: 'Option1', value: 'Option1',
label: 'Option1' label: '未开始'
}, },
{ {
value: 'Option2', value: 'Option2',
label: 'Option2' label: '进行中'
}, },
{ {
value: 'Option3', value: 'Option3',
label: 'Option3' label: '暂停'
}, },
{ {
value: 'Option4', value: 'Option4',
@ -136,7 +153,7 @@ const options = [
}, },
{ {
value: 'Option5', value: 'Option5',
label: 'Option5' label: '已完成'
} }
]; ];
@ -167,6 +184,11 @@ const tableData: User[] = [
name: 'Tom', name: 'Tom',
address: 'No. 189, Grove St, Los Angeles' address: 'No. 189, Grove St, Los Angeles'
}, },
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{ {
date: '2016-05-01', date: '2016-05-01',
name: 'Tom', name: 'Tom',

View File

@ -30,7 +30,7 @@
</el-tooltip> </el-tooltip>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.prevent="handleLogin"> <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.prevent="handleLogin">
登录</el-button> Login</el-button>
<div style="position:relative"> <div style="position:relative">
<div class="tips"> <div class="tips">
@ -65,6 +65,7 @@ import SocialSign from './components/SocialSignin.vue';
import type { FormItemRule } from 'element-plus'; import type { FormItemRule } from 'element-plus';
import type { IForm } from '@/types/element-plus'; import type { IForm } from '@/types/element-plus';
import store from '@/store'; import store from '@/store';
export default defineComponent({ export default defineComponent({
name: 'Login', name: 'Login',
components: { SocialSign }, components: { SocialSign },
@ -85,7 +86,7 @@ export default defineComponent({
}; };
return { return {
loginForm: { loginForm: {
username: 'teacher_demo', username: 'teacher_user',
password: '123456' password: '123456'
}, },
loginRules: { loginRules: {
@ -144,7 +145,7 @@ export default defineComponent({
(this.$refs.loginForm as IForm).validate(valid => { (this.$refs.loginForm as IForm).validate(valid => {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
this.$store.dispatch("login", this.loginForm) store.user().login(this.loginForm)
.then(() => { .then(() => {
this.$router.push({ path: this.redirect || '/', query: this.otherQuery }); this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
this.loading = false; this.loading = false;
@ -166,6 +167,24 @@ export default defineComponent({
return acc; return acc;
}, {}); }, {});
} }
// afterQRScan() {
// if (e.key === 'x-admin-oauth-code') {
// const code = getQueryObject(e.newValue)
// const codeMap = {
// wechat: 'code',
// tencent: 'code'
// }
// const type = codeMap[this.auth_type]
// const codeName = code[type]
// if (codeName) {
// store.user().LoginByThirdparty(codeName).then(() => {
// this.$router.push({ path: this.redirect || '/' })
// })
// } else {
// alert('')
// }
// }
// }
} }
}); });
</script> </script>

View File

@ -3,7 +3,7 @@ import { defineComponent, h } from 'vue';
export default defineComponent({ export default defineComponent({
created() { created() {
// console.log('redirect', this.$route); //console.log('redirect', this.$route);
const { params, query } = this.$route; const { params, query } = this.$route;
const { path } = params; const { path } = params;
this.$router.replace({ path: '/' + path, query }); this.$router.replace({ path: '/' + path, query });

View File

@ -1,161 +1,148 @@
<!--<template>-->
<!-- <div class="tab-container">-->
<!--&lt;!&ndash; <el-tag>mounted times {{ createdTimes }}</el-tag>&ndash;&gt;-->
<!--&lt;!&ndash; <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />&ndash;&gt;-->
<!-- <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">-->
<!-- <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">-->
<!-- <keep-alive>-->
<!-- <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />-->
<!-- </keep-alive>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import { defineComponent } from 'vue';-->
<!--import TabPane from './components/TabPane';-->
<!--export default defineComponent({-->
<!-- name: 'Tab',-->
<!-- components: { TabPane },-->
<!-- data() {-->
<!-- return {-->
<!-- tabMapOptions: [-->
<!-- { label: 'China', key: 'CN' },-->
<!-- { label: 'USA', key: 'US' },-->
<!-- { label: 'Japan', key: 'JP' },-->
<!-- { label: 'Eurozone', key: 'EU' }-->
<!-- ],-->
<!-- activeName: 'CN',-->
<!-- createdTimes: 0-->
<!-- };-->
<!-- },-->
<!-- // watch: {-->
<!-- // activeName(val) { // url-->
<!-- // this.$router.push(`${this.$route.path}?tab=${val}`);-->
<!-- // }-->
<!-- // },-->
<!-- created() {-->
<!-- // init the default selected tab-->
<!-- const tab = this.$route.query.tab;-->
<!-- if (tab) {-->
<!-- this.activeName = tab;-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- showCreatedTimes() {-->
<!-- this.createdTimes = this.createdTimes + 1;-->
<!-- }-->
<!-- }-->
<!--});-->
<!--</script>-->
<!--<style scoped>-->
<!-- .tab-container {-->
<!-- margin: 30px;-->
<!-- }-->
<!--</style>-->
<template> <template>
<div style=" width:100%">
<el-card style="max-width: 100vw;margin: 1.5vw;">
<template #header><span>日报</span></template>
<div style="display:flex;flex-direction:row;justify-content: space-around ">
<div>
项目
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearch"
popper-class="my-autocomplete"
placeholder="Please input"
@select="handleSelect"
style="margin-left:0.5vw"
>
<template #suffix>
<el-icon class="el-input__icon" @click="handleIconClick">
<ArrowDownBold />
</el-icon>
</template>
<template #default="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
</el-autocomplete>
</div>
<div>
时间
<el-date-picker
v-model="value2" type="daterange"
unlink-panels
range-separator="——"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
style="margin-left:0.5vw"
/>
</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 >历史记录</el-button>
<el-button type="primary" @click="AddDialogVisible=true">新建</el-button>
<el-dialog v-model="AddDialogVisible" width="500" center :modal="false" :show-close="false">
<template #header>
<div style="display:flex;flex-direction: row;justify-content: flex-start;color:red;font-size:large" >新增日报</div>
<el-divider content-position="left" style="background:red"><el-icon><CaretTop /></el-icon></el-divider>
</template>
<div style=" width:100%"> <div>
<el-card style="max-width: 100vw;margin: 1.5vw;"> <div style="margin-top:-4vh ">
<template #header><span>日报</span></template> <span style="color:red">项目名称</span>
<div style="display:flex;flex-direction:row;justify-content: space-around "> <el-input
<div> v-model="input"
项目 style="width: 200px"
<el-autocomplete placeholder="请输入"
v-model="state" />
:fetch-suggestions="querySearch" </div>
popper-class="my-autocomplete" <div style="margin-top:2vh ">
placeholder="Please input" <span style="color:red"> 工作时间</span>
@select="handleSelect" <el-date-picker
> v-model="value1"
<template #suffix> type="date"
<el-icon class="el-input__icon" @click="handleIconClick"> placeholder="请选择日期"
<edit /> style="width: 200px"
</el-icon> :default-value="new Date(2010, 9, 1)"
/>
</div>
<div style="margin-top:2vh ;display:flex;flex-direction:row;">
<span style="color: red">日报内容</span>
<el-input
v-model="textarea"
style="width: 300px;"
:rows="4"
type="textarea"
placeholder="请输入"
/>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="AddDialogVisible = false" type="info" style="width: 80px">取消 </el-button>
<el-button type="danger" style="width:80px" @click="AddDialogVisible = false">
新增
</el-button>
</div>
</template> </template>
<template #default="{ item }"> </el-dialog>
<div class="value">{{ item.value }}</div> </div>
<span class="link">{{ item.link }}</span> <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
</template> @selection-change="handleSelectionChange">
</el-autocomplete>
</div>
<div>
时间
<el-date-picker
v-model="value2"
type="daterange"
unlink-panels
range-separator="To"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
:size="large"
/>
</div>
<div>
<el-button type="primary">查询</el-button>
<el-button>重置</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
>
<el-button type="primary">新建</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 type="selection" width="55" />
<el-table-column label="序号" width="120"> <el-table-column label="序号" width="120">
<template #default="scope">{{ scope.row.date }}</template> <template #default="scope">{{ scope.row.date }}</template>
</el-table-column> </el-table-column>
<el-table-column property="name" label="项目名称" width="120" /> <el-table-column property="name" label="项目名称" width="120" />
<el-table-column property="address" label="项目负责人" show-overflow-tooltip /> <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-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> <el-button size="small" text style="color:deepskyblue" @click="EditDialogVisible = true">修改</el-button>
<el-pagination <el-dialog v-model="EditDialogVisible" title="删除" width="500" :modal="false">
larger <template #footer>
background <div class="dialog-footer">
layout="prev, pager, next" <el-button @click="EditDialogVisible = false">取消</el-button>
:total="50" <el-button type="primary" @click="EditDialogVisible = false">
class="mt-4" 确认
style="margin-top:2vh" </el-button>
/> </div>
</el-card> </template>
<!-- <div style="margin-top: 20px">--> </el-dialog>
<!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"--> </el-table-column>
<!-- >Toggle selection status of second and third rows</el-button--> </el-table>
<!-- >--> <el-pagination
<!-- <el-button @click="toggleSelection()">Clear selection</el-button>--> larger
<!-- </div>--> 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> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { ElTable } from 'element-plus'; import { ElTable } from 'element-plus';
import { ArrowDownBold, CaretTop } from '@element-plus/icons-vue';
const value1 = ref('');
//
const EditDialogVisible = ref(false);
//
const AddDialogVisible = ref(false);
interface User { interface User {
date: string date: string
name: string name: string
address: string address: string
} }
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@ -191,11 +178,11 @@ const tableData: User[] = [
// 1 // 1
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { Edit } from '@element-plus/icons-vue';
interface LinkItem { interface LinkItem {
value: string value: string
link: string link: string
} }
const state = ref(''); const state = ref('');
@ -205,7 +192,7 @@ const querySearch = (queryString: string, cb) => {
const results = queryString const results = queryString
? links.value.filter(createFilter(queryString)) ? links.value.filter(createFilter(queryString))
: links.value; : links.value;
// call callback function to return suggestion objects // call callback function to return suggestion objects
cb(results); cb(results);
}; };
const createFilter = (queryString) => { const createFilter = (queryString) => {
@ -238,7 +225,7 @@ onMounted(() => {
}); });
// //
const value1 = ref('');
const value2 = ref(''); const value2 = ref('');
const shortcuts = [ const shortcuts = [
@ -271,20 +258,24 @@ const shortcuts = [
} }
]; ];
</script> </script>
<style> <style>
.my-autocomplete li { .my-autocomplete li {
line-height: normal; line-height: normal;
padding: 7px; padding: 7px;
} }
.my-autocomplete li .name { .my-autocomplete li .name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.my-autocomplete li .addr { .my-autocomplete li .addr {
font-size: 12px; font-size: 12px;
color: #b4b4b4; color: #b4b4b4;
} }
.my-autocomplete li .highlighted .addr { .my-autocomplete li .highlighted .addr {
color: #ddd; color: #ddd;
} }
</style> </style>

View File

@ -32,17 +32,51 @@
<el-card style="max-width: 100vw;margin: 1.5vw;"> <el-card style="max-width: 100vw;margin: 1.5vw;">
<div> <div>
<el-table :data="tableData" ref="multipleTableRef" style="width: 100%" @selection-change="handleSelectionChange"> <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" /> <el-table-column prop="id" label="序号">
<el-table-column prop="date" label="序号"/> <template v-slot="{row}">
<el-table-column prop="name" label="项目名称"/> <span>{{ row.id }}</span>
<el-table-column prop="address" label="工作量" /> </template>
<el-table-column prop="address" label="周期" /> </el-table-column>
<el-table-column prop="address" label="负责人" /> <el-table-column prop="name" label="子系统称">
<el-table-column prop="address" label="状态" /> <template v-slot="{row}">
<el-table-column prop="address" label="标签" /> <span>{{ row.name }}</span>
<el-table-column prop="address" label="文档(点击下载)" /> </template>
<el-table-column prop="address" label="截止时间" /> </el-table-column>
<el-table-column prop="address" label="操作" /> <el-table-column prop="workLoad" label="工作量">
<template v-slot="{row}">
<span>{{ row.workLoad }}</span>
</template>
</el-table-column>
<el-table-column prop="cycle" label="周期">
<template v-slot="{row}">
<span>{{ row.cycle }}</span>
</template>
</el-table-column>
<el-table-column prop="principalId" label="负责人">
<template v-slot="{row}">
<span>{{ row.principalId }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态">
<template v-slot="{row}">
<span>{{ row.status }}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="子系统简介">
<template v-slot="{row}">
<span>{{ row.description }}</span>
</template>
</el-table-column>
<el-table-column prop="id" label="文档(点击下载)">
<template v-slot="{row}">
<span>{{ row.id }}</span>
</template>
</el-table-column>
<el-table-column prop="completeTime" label="截止时间">
<template v-slot="{row}">
<span>{{ row.completeTime }}</span>
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
<div style="display: flex; justify-content: center;margin-top: 2vh"> <div style="display: flex; justify-content: center;margin-top: 2vh">
@ -90,8 +124,8 @@ const tableData = [
}, },
]; ];
</script> </script>
<!--
<template> <!--<template>
<div class="app-container"> <div class="app-container">
&lt;!&ndash; Note that row-key is necessary to get a correct row order. &ndash;&gt; &lt;!&ndash; Note that row-key is necessary to get a correct row order. &ndash;&gt;
<el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%"> <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
@ -156,20 +190,22 @@ const tableData = [
<script> <script>
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { fetchList } from '@/api/article'; import { SystemGetByProjId } from '@/api/article';
import Sortable from 'sortablejs'; import Sortable from "sortablejs";
import { parseTime } from '@/utils'; import { parseTime } from '@/utils';
const token: string | null = window.localStorage.getItem('token')
export default defineComponent({ export default defineComponent({
name: 'DragTable', name: 'DragTable',
data() { data() {
return { return {
list: null, list: [],
total: null, total: null,
listLoading: true, listLoading: true,
listQuery: { listQuery: {
page: 1, /* page: 1,
limit: 10 limit: 10 */
projectId:'',
}, },
sortable: null, sortable: null,
oldList: [], oldList: [],
@ -191,7 +227,7 @@ export default defineComponent({
}, },
async getList() { async getList() {
this.listLoading = true; this.listLoading = true;
const { data } = await fetchList(this.listQuery); const { data } = await SystemGetByProjId(this.listQuery, token);
this.list = data.items; this.list = data.items;
this.total = data.total; this.total = data.total;
this.listLoading = false; this.listLoading = false;
@ -222,7 +258,7 @@ export default defineComponent({
} }
} }
}); });
</script> </script>-->
<style> <style>
.sortable-ghost{ .sortable-ghost{
@ -245,4 +281,3 @@ export default defineComponent({
margin-top: 15px; margin-top: 15px;
} }
</style> </style>
-->

View File

@ -0,0 +1,137 @@
<template>
<div style=" width:100%">
<el-card style="max-width: 100vw;margin: 1.5vw;max-height:100vh;height:80vh ">
<template #header>
<strong>子模块1</strong>
</template>
<!-- <div style=" display: flex;flex-direction: column;justify-content: center">-->
<div class="ModuleData" style="margin-left: 30vw;width: 24vw;height: 55vh;display: flex;flex-direction: column;justify-content: space-around;
">
<div style="display: flex;flex-direction: row;justify-content: space-between">
<strong>01.模块名称 </strong>
<span style="width: 250px">子模块1</span>
</div>
<div style="display: flex;flex-direction: row;justify-content: space-between">
<strong>02.模块周期</strong>
<span style="width: 250px">13</span>
</div>
<div style="display: flex;flex-direction: row;justify-content: space-between">
<strong>03.工作量 </strong>
<span style="width: 250px">子模块1</span>
</div>
<div style="display: flex;flex-direction: row;justify-content: space-between">
<strong>04.负责人 </strong>
<span style="width: 250px">子模块1</span>
</div>
<div style="display: flex;flex-direction: row;justify-content: space-between">
<strong>05.状态 </strong>
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearch"
popper-class="my-autocomplete"
placeholder="Please input"
@select="handleSelect"
style="width: 250px"
>
<template #suffix>
<el-icon class="el-input__icon" @click="handleIconClick">
<edit />
</el-icon>
</template>
<template #default="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
</el-autocomplete>
</div>
<div style="display: flex;flex-direction: row;justify-content: space-between">
<strong>06.截止时间 </strong>
<span style="width: 250px">子模块1</span>
</div>
<div style="display: flex;flex-direction: row;justify-content: space-between">
<strong>07.简介 </strong>
<el-input
v-model="textarea2"
style="width: 250px"
:autosize="{ minRows: 4, maxRows: 6 }"
type="textarea"
placeholder="Please input"
:row="4"
/>
</div>
</div>
<!-- </div>-->
</el-card>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Edit } from '@element-plus/icons-vue';
interface LinkItem {
value: string
link: string
}
const state = ref('');
const links = ref<LinkItem[]>([]);
const querySearch = (queryString: string, cb) => {
const results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
// call callback function to return suggestion objects
cb(results);
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
);
};
};
const loadAll = () => {
return [
{ value: 'vue', link: 'https://github.com/vuejs/vue' },
{ value: 'element', link: 'https://github.com/ElemeFE/element' },
{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
{ value: 'babel', link: 'https://github.com/babel/babel' }
];
};
const handleSelect = (item: LinkItem) => {
console.log(item);
};
const handleIconClick = (ev: Event) => {
console.log(ev);
};
onMounted(() => {
links.value = loadAll();
});
</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>

View File

@ -0,0 +1,202 @@
<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>
</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;
};
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'
}
];
// 1
import { onMounted } from 'vue';
import { Edit } from '@element-plus/icons-vue';
interface LinkItem {
value: string
link: string
}
const state = ref('');
const links = ref<LinkItem[]>([]);
const querySearch = (queryString: string, cb) => {
const results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
// call callback function to return suggestion objects
cb(results);
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
);
};
};
const loadAll = () => {
return [
{ value: '1' },
{ value: '2' },
{ value: '3' },
{ value: '4' },
{ value: '5' }
];
};
const handleSelect = (item: LinkItem) => {
console.log(item);
};
const handleIconClick = (ev: Event) => {
console.log(ev);
};
//
const value1 = ref('');
const value2 = ref('');
const shortcuts = [
{
text: 'Last week',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: 'Last month',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: 'Last 3 months',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
}
}
];
</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>

View File

@ -1,105 +1,71 @@
<!--<template>-->
<!-- -->
<!-- <div class="app-container">-->
<!-- <div style="margin:0 0 5px 20px">-->
<!-- Fixed header, sorted by header order,-->
<!-- </div>-->
<!-- <fixed-thead />-->
<!-- <div style="margin:30px 0 5px 20px">-->
<!-- Not fixed header, sorted by click order-->
<!-- </div>-->
<!-- <unfixed-thead />-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import { defineComponent } from 'vue';-->
<!--import FixedThead from './components/FixedThead';-->
<!--import UnfixedThead from './components/UnfixedThead';-->
<!--export default defineComponent({-->
<!-- name: 'DynamicTable',-->
<!-- components: { FixedThead, UnfixedThead }-->
<!--});-->
<!--</script>-->
<template> <template>
<div style=" width:100%">
<div style=" width:100%"> <el-card style="max-width: 100vw;margin: 1.5vw;">
<el-card style="max-width: 100vw;margin: 1.5vw;"> <template #header><strong >项目1</strong></template>
<template #header><span>项目1</span></template> <div style="display:flex;flex-direction:row;justify-content: space-around ">
<div style="display:flex;flex-direction:row;justify-content: space-around "> <div>
<div> 名称
名称 <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
<el-input v-model="input" style="width: 240px" placeholder="Please input" /> </div>
</div> <div>
<div> 状态
状态 <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
<el-input v-model="input" style="width: 240px" placeholder="Please input" /> </div>
</div> <div>
<div> <el-button type="primary" style="width:80px">查询</el-button>
<el-button type="primary">查询</el-button> <el-button style="width:80px">重置</el-button>
<el-button>重置</el-button> </div>
</div>
</div> </el-card>
</div> <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
</el-card> <div style="display:flex;flex-direction: row;justify-content: space-between">
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw"> <el-button
<div style="display:flex;flex-direction: row;justify-content: space-between"> text
<el-button type=''
text >子系统列表</el-button
type='' >
>子系统列表</el-button </div>
> <el-table
</div> ref="multipleTableRef"
<el-table :data="tableData"
ref="multipleTableRef" style="max-width: 100vw;"
:data="tableData" @selection-change="handleSelectionChange"
style="max-width: 100vw;" >
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="55" />--> <!-- <el-table-column type="selection" width="55" />-->
<el-table-column label="序号" width="120"> <el-table-column label="序号" width="120">
<template #default="scope">{{ scope.row.date }}</template> <template #default="scope">{{ scope.row.date }}</template>
</el-table-column> </el-table-column>
<el-table-column property="name" label="子系统名称" width="120" /> <el-table-column property="name" label="子系统名称" width="120" />
<el-table-column property="address" label="工作量" show-overflow-tooltip /> <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-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 <el-button
link link
style="color:deepskyblue" style="color:deepskyblue"
>查看详情</el-button >查看详情</el-button
> >
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
larger larger
background background
layout="prev, pager, next" layout="prev, pager, next"
:total="50" :total="50"
class="mt-4" class="mt-4"
style="margin-top:2vh" style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
/> />
</el-card> </el-card>
<!-- <div style="margin-top: 20px">-->
<!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
<!-- >Toggle selection status of second and third rows</el-button-->
<!-- >-->
<!-- <el-button @click="toggleSelection()">Clear selection</el-button>-->
<!-- </div>-->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { ElTable } from 'element-plus'; import { ElTable } from 'element-plus';
interface User { interface User {
date: string date: string
name: string name: string
@ -137,87 +103,7 @@ const tableData: User[] = [
]; ];
// 1
import { onMounted } from 'vue';
import { Edit } from '@element-plus/icons-vue';
interface LinkItem {
value: string
link: string
}
const state = ref('');
const links = ref<LinkItem[]>([]);
const querySearch = (queryString: string, cb) => {
const results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
// call callback function to return suggestion objects
cb(results);
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
);
};
};
const loadAll = () => {
return [
{ value: '1' },
{ value: '2' },
{ value: '3' },
{ value: '4' },
{ value: '5' }
];
};
const handleSelect = (item: LinkItem) => {
console.log(item);
};
const handleIconClick = (ev: Event) => {
console.log(ev);
};
onMounted(() => {
links.value = loadAll();
});
//
const value1 = ref('');
const value2 = ref('');
const shortcuts = [
{
text: 'Last week',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: 'Last month',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: 'Last 3 months',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
}
}
];
</script> </script>
<style> <style>
.my-autocomplete li { .my-autocomplete li {

View File

@ -1,227 +1,140 @@
<!--<template>-->
<!-- <div class="app-container">-->
<!-- <el-card class="box-card">-->
<!-- <template #header>-->
<!-- <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">-->
<!-- Theme documentation-->
<!-- </a>-->
<!-- </template>-->
<!-- <div class="box-item">-->
<!-- <span class="field-label">Change Theme : </span>-->
<!-- <el-switch v-model="theme" />-->
<!-- <aside style="margin-top:15px;">-->
<!-- Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.-->
<!-- </aside>-->
<!-- </div>-->
<!-- </el-card>-->
<!-- <div class="block">-->
<!-- <el-button type="primary">-->
<!-- Primary-->
<!-- </el-button>-->
<!-- <el-button type="success">-->
<!-- Success-->
<!-- </el-button>-->
<!-- <el-button type="info">-->
<!-- Info-->
<!-- </el-button>-->
<!-- <el-button type="warning">-->
<!-- Warning-->
<!-- </el-button>-->
<!-- <el-button type="danger">-->
<!-- Danger-->
<!-- </el-button>-->
<!-- </div>-->
<!-- <div class="block">-->
<!-- <el-button type="primary" :icon="IconEdit" />-->
<!-- <el-button type="primary" :icon="IconShare" />-->
<!-- <el-button type="primary" :icon="IconDelete" />-->
<!-- <el-button type="primary" :icon="IconSearch">-->
<!-- Search-->
<!-- </el-button>-->
<!-- <el-button type="primary">-->
<!-- Upload <el-icon><icon-upload /></el-icon>-->
<!-- </el-button>-->
<!-- </div>-->
<!-- <div class="block">-->
<!-- <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">-->
<!-- {{ tag.name }}-->
<!-- </el-tag>-->
<!-- </div>-->
<!-- <div class="block">-->
<!-- <el-radio-group v-model="radio">-->
<!-- <el-radio :label="3">-->
<!-- Option A-->
<!-- </el-radio>-->
<!-- <el-radio :label="6">-->
<!-- Option B-->
<!-- </el-radio>-->
<!-- <el-radio :label="9">-->
<!-- Option C-->
<!-- </el-radio>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<!-- <div class="block">-->
<!-- <el-slider v-model="slideValue" />-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import { defineComponent, markRaw } from 'vue';-->
<!--import {-->
<!-- Edit as IconEdit,-->
<!-- Share as IconShare,-->
<!-- Delete as IconDelete,-->
<!-- Search as IconSearch,-->
<!-- Upload as IconUpload-->
<!--} from '@element-plus/icons-vue';-->
<!--export default defineComponent({-->
<!-- name: 'Theme',-->
<!-- components: { IconUpload },-->
<!-- data() {-->
<!-- return {-->
<!-- IconEdit: markRaw(IconEdit),-->
<!-- IconShare: markRaw(IconShare),-->
<!-- IconDelete: markRaw(IconDelete),-->
<!-- IconSearch: markRaw(IconSearch),-->
<!-- theme: false,-->
<!-- tags: [-->
<!-- { name: 'Tag One', type: '' },-->
<!-- { name: 'Tag Two', type: 'info' },-->
<!-- { name: 'Tag Three', type: 'success' },-->
<!-- { name: 'Tag Four', type: 'warning' },-->
<!-- { name: 'Tag Five', type: 'danger' }-->
<!-- ],-->
<!-- slideValue: 50,-->
<!-- radio: 3-->
<!-- };-->
<!-- },-->
<!-- watch: {-->
<!-- theme() {-->
<!-- console.log('watch theme', this.theme);-->
<!-- // toggleClass(document.body, 'custom-theme');-->
<!-- const htmlTag = document.querySelector('html');-->
<!-- if (this.theme) {-->
<!-- htmlTag.classList.add('dark');-->
<!-- } else {-->
<!-- htmlTag.classList.remove('dark');-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--});-->
<!--</script>-->
<!--<style scoped>-->
<!--.field-label{-->
<!-- vertical-align: middle;-->
<!--}-->
<!--.box-card {-->
<!-- width: 400px;-->
<!-- max-width: 100%;-->
<!-- margin: 20px auto;-->
<!--}-->
<!--.block {-->
<!-- padding: 30px 24px;-->
<!--}-->
<!--.tag-item {-->
<!-- margin-right: 15px;-->
<!--}-->
<!--</style>-->
<template> <template>
<div> <div>
<div v-for="(row, index) in tableData" :key="index" class="table-row"> <div class="app-container">
<div class="table-cell"> <el-card class="box-card">
<div class="date"> <template #header>
<el-icon><timer /></el-icon> <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">
<span>{{ row.date }}</span> Theme documentation
</div> </a>
</div> </template>
<div class="table-cell"> <div class="box-item">
<el-popover effect="light" trigger="hover" placement="top" width="auto"> <span class="field-label">Change Theme : </span>
<template #default> <el-switch v-model="theme" />
<div>name: {{ row.name }}</div> <aside style="margin-top:15px;">
<div>address: {{ row.address }}</div> Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
</template> </aside>
<template #reference> </div>
<el-tag>{{ row.name }}</el-tag> </el-card>
</template>
</el-popover> <div class="block">
</div> <el-button type="primary">
<div class="table-cell"> Primary
<el-button size="small" @click="handleEdit(index, row)">Edit</el-button> </el-button>
<el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button> <el-button type="success">
</div> Success
</div> </el-button>
<el-button type="info">
Info
</el-button>
<el-button type="warning">
Warning
</el-button>
<el-button type="danger">
Danger
</el-button>
</div> </div>
</template> <div class="block">
<el-button type="primary" :icon="IconEdit" />
<el-button type="primary" :icon="IconShare" />
<el-button type="primary" :icon="IconDelete" />
<el-button type="primary" :icon="IconSearch">
Search
</el-button>
<el-button type="primary">
Upload <el-icon><icon-upload /></el-icon>
</el-button>
</div>
<div class="block">
<el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
{{ tag.name }}
</el-tag>
</div>
<div class="block">
<el-radio-group v-model="radio">
<el-radio :label="3">
Option A
</el-radio>
<el-radio :label="6">
Option B
</el-radio>
<el-radio :label="9">
Option C
</el-radio>
</el-radio-group>
</div>
<div class="block">
<el-slider v-model="slideValue" />
</div>
</div>
</div>
</template>
<script>
import { defineComponent, markRaw } from 'vue';
import {
Edit as IconEdit,
Share as IconShare,
Delete as IconDelete,
Search as IconSearch,
Upload as IconUpload
} from '@element-plus/icons-vue';
export default defineComponent({
name: 'Theme',
components: { IconUpload },
data() {
return {
IconEdit: markRaw(IconEdit),
IconShare: markRaw(IconShare),
IconDelete: markRaw(IconDelete),
IconSearch: markRaw(IconSearch),
theme: false,
tags: [
{ name: 'Tag One', type: '' },
{ name: 'Tag Two', type: 'info' },
{ name: 'Tag Three', type: 'success' },
{ name: 'Tag Four', type: 'warning' },
{ name: 'Tag Five', type: 'danger' }
],
slideValue: 50,
radio: 3
};
},
watch: {
theme() {
console.log('watch theme', this.theme);
// toggleClass(document.body, 'custom-theme');
const htmlTag = document.querySelector('html');
if (this.theme) {
htmlTag.classList.add('dark');
} else {
htmlTag.classList.remove('dark');
}
}
}
});
</script>
<style scoped> <style scoped>
.table-row { .field-label{
display: flex; vertical-align: middle;
align-items: center;
margin-bottom: 10px;
} }
.box-card {
.table-cell { width: 400px;
flex: 1; max-width: 100%;
padding: 5px; margin: 20px auto;
} }
.block {
.date { padding: 30px 24px;
display: flex;
align-items: center;
} }
.tag-item {
.date el-icon { margin-right: 15px;
margin-right: 10px;
} }
</style> </style>
<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
interface User {
date: string
name: string
address: string
}
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
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',
},
]
</script>

View File

@ -65,13 +65,12 @@ export default defineConfig(({ command, mode }) => {
host: 'localhost', host: 'localhost',
port: 8001, port: 8001,
proxy: { proxy: {
'/api-test': { '/api-prod': {
target: 'https://api.midfar.com/dspt_test/api', target: 'https://nbxt.oa.x-lf.cn',
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api-test/, '') pathRewrite: {
}, '^/api-prod': ''
headers: { }
Cookie: env.VUE_APP_COOKIE
} }
} }
} }