Compare commits

..

No commits in common. "67b6b6f8c9588a471f0cf8df07ac91dce1aaedd4" and "7cc53e5191066cb3b506409bb169d6db79ead700" have entirely different histories.

16 changed files with 491 additions and 1399 deletions

View File

@ -2,4 +2,4 @@
NODE_ENV = 'production' NODE_ENV = 'production'
# 打包模式连生产服 # 打包模式连生产服
VUE_APP_BASE_API = '/api-prod' VUE_APP_BASE_API = '/api-prod'

View File

@ -3,4 +3,4 @@ NODE_ENV = 'development'
# 开发模式连生产服 # 开发模式连生产服
VUE_APP_BASE_API = '/api-prod' VUE_APP_BASE_API = '/api-prod'
VUE_APP_COOKIE = '' VUE_APP_COOKIE = ''

1
auto-imports.d.ts vendored
View File

@ -3,5 +3,4 @@ export {}
declare global { declare global {
const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const ElNotification: typeof import('element-plus/es')['ElNotification']
} }

9
components.d.ts vendored
View File

@ -13,15 +13,14 @@ 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']
ElCard: typeof import('element-plus/es')['ElCard'] ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
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'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
@ -36,9 +35,9 @@ declare module '@vue/runtime-core' {
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'] ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRate: typeof import('element-plus/es')['ElRate'] ElRate: typeof import('element-plus/es')['ElRate']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
@ -53,6 +52,8 @@ declare module '@vue/runtime-core' {
ElTabs: typeof import('element-plus/es')['ElTabs'] 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'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTree: typeof import('element-plus/es')['ElTree']
ElUpload: typeof import('element-plus/es')['ElUpload']
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']

View File

@ -1 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h54.857v54.857H0V0zm0 73.143h54.857V128H0V73.143zm73.143 0H128V128H73.143V73.143zm27.428-18.286C115.72 54.857 128 42.577 128 27.43 128 12.28 115.72 0 100.571 0 85.423 0 73.143 12.28 73.143 27.429c0 15.148 12.28 27.428 27.428 27.428z"/></svg> <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h54.857v54.857H0V0zm0 73.143h54.857V128H0V73.143zm73.143 0H128V128H73.143V73.143zm27.428-18.286C115.72 54.857 128 42.577 128 27.43 128 12.28 115.72 0 100.571 0 85.423 0 73.143 12.28 73.143 27.429c0 15.148 12.28 27.428 27.428 27.428z"/></svg>

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 319 B

View File

@ -3,7 +3,7 @@
<template <template
v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !(item.meta && item.meta.alwaysShow)"> v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !(item.meta && item.meta.alwaysShow)">
<app-link class="link" :to="resolvePath(onlyOneChild.path)"> <app-link class="link" :to="resolvePath(onlyOneChild.path)">
<el-menu-item class="left-menu-item" v-if="onlyOneChild.meta" :index="resolvePath(onlyOneChild.path)" <el-menu-item class="left-menu-item" v-if="onlyOneChild.meta" :index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }"> :class="{ 'submenu-title-noDropdown': !isNest }">
<!-- <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" /> --> <!-- <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" /> -->

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: 'Dashboard', 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'] // 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'] // 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']
// } }
// } }
] ]
}, },
// { {
// 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

@ -8,7 +8,7 @@ const tableRouter = {
redirect: '/table/complex-table', redirect: '/table/complex-table',
name: 'Table', name: 'Table',
meta: { meta: {
title: '个人项目', title: 'Table',
icon: 'table' icon: 'table'
}, },
children: [ children: [
@ -16,25 +16,25 @@ const tableRouter = {
path: 'dynamic-table', path: 'dynamic-table',
component: () => import('@/views/table/dynamic-table/index.vue'), component: () => import('@/views/table/dynamic-table/index.vue'),
name: 'DynamicTable', name: 'DynamicTable',
meta: { title: '我参与的' } meta: { title: 'Dynamic Table' }
}, },
{ {
path: 'drag-table', path: 'drag-table',
component: () => import('@/views/table/drag-table.vue'), component: () => import('@/views/table/drag-table.vue'),
name: 'DragTable', name: 'DragTable',
meta: { title: '我管理的' } meta: { title: 'Drag Table' }
},
{
path: 'inline-edit-table',
component: () => import('@/views/table/inline-edit-table.vue'),
name: 'InlineEditTable',
meta: { title: 'Inline Edit' }
}, },
// {
// path: 'inline-edit-table',
// component: () => import('@/views/table/inline-edit-table.vue'),
// name: 'InlineEditTable',
// meta: { title: 'Inline Edit' }
// },
{ {
path: 'complex-table', path: 'complex-table',
component: () => import('@/views/table/complex-table.vue'), component: () => import('@/views/table/complex-table.vue'),
name: 'ComplexTable', name: 'ComplexTable',
meta: { title: '我负责的' } meta: { title: 'Complex Table' }
} }
] ]
}; };

View File

@ -4,7 +4,7 @@ import { getToken } from '@/utils/auth';
// 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: process.env.VUE_APP_BASE_API = 'https://nbxt.oa.x-lf.cn', // 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: 5000 // request timeout
}); });

View File

@ -1,219 +1,33 @@
<template> <template>
<div class="errPage-container">
<div style=" width:100%"> <ErrorA />
<el-card style="max-width: 100vw;margin: 1.5vw;"> <ErrorB />
<template #header><span>消息</span></template> <h3>Please click the bug icon in the upper right corner</h3>
<div style="display:flex;flex-direction:row;justify-content: space-around "> <aside>
<div> Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
时间 <a target="_blank" class="link-type" href="https://vue3-element-admin-site.midfar.com/guide/advanced/error.html">
<el-date-picker Document introduction
v-model="value2" </a>
type="daterange" </aside>
unlink-panels <a href="#">
range-separator="To" <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
start-placeholder="开始时间" </a>
end-placeholder="结束时间" </div>
:shortcuts="shortcuts"
:size="large"
/>
</div>
<div>
状态
<el-select
v-model="value"
clearable
placeholder="Select"
style="width: 240px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div>
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
</div>
</div>
</el-card>
<el-card style="max-width: 100vw;height:50vh;margin:1.3vw">
<div style="display:flex;flex-direction: row;justify-content: space-between">
<el-button
text
type=''
>历史记录</el-button
>
</div>
<div v-for="(row, index) in tableData" :key="index" class="table-row">
<div class="table-cell">
<div class="date" style="display:flex;flex-direction: column">
<span style="color:skyblue">{{row.name}}</span>
<span>{{ row.date }}</span>
</div>
</div>
<div class="table-cell">
<div>address: {{ row.address }}</div>
</div>
<div class="table-cell table-cell-right">
<el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
</div>
</div>
<el-pagination
background
layout="prev, pager, next"
:total="50"
class="mt-[5vh]"
/>
</el-card>
</div>
</template> </template>
<script lang="ts" setup> <script>
import { ref } from 'vue'; import { defineComponent } from 'vue';
// import ErrorA from './components/ErrorTestA';
import ErrorB from './components/ErrorTestB';
const value2 = ref(''); export default defineComponent({
name: 'ErrorLog',
const shortcuts = [ components: { ErrorA, ErrorB }
{ });
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];
}
}
];
//
const value = ref('');
const options = [
{
value: 'Option1',
label: 'Option1'
},
{
value: 'Option2',
label: 'Option2'
},
{
value: 'Option3',
label: 'Option3'
},
{
value: 'Option4',
label: 'Option4'
},
{
value: 'Option5',
label: 'Option5'
}
];
//
interface User {
date: string
name: string
address: string
}
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> </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;
}
.table-row { <style scoped>
display: flex; .errPage-container {
align-items: center; padding: 30px;
margin-bottom: 10px; }
}
.table-cell {
flex: 1;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.table-cell-right {
justify-content: flex-end;
margin-right:5vw;
}
.date {
display: flex;
/*align-items: center;*/
}
.date el-icon {
margin-right: 10px;
}
</style> </style>

View File

@ -87,7 +87,7 @@ export default defineComponent({
return { return {
loginForm: { loginForm: {
username: 'admin', username: 'admin',
password: '123456' password: '111111'
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [{ required: true, trigger: 'blur', validator: validateUsername }],

View File

@ -1,290 +1,58 @@
<!--<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 class="tab-container">
<div style=" width:100%"> <el-tag>mounted times {{ createdTimes }}</el-tag>
<el-card style="max-width: 100vw;margin: 1.5vw;"> <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
<template #header><span>日报</span></template> <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
<div style="display:flex;flex-direction:row;justify-content: space-around "> <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
<div> <keep-alive>
项目 <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
<el-autocomplete </keep-alive>
v-model="state" </el-tab-pane>
:fetch-suggestions="querySearch" </el-tabs>
popper-class="my-autocomplete"
placeholder="Please input"
@select="handleSelect"
>
<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>
时间
<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 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>
<el-pagination
larger
background
layout="prev, pager, next"
:total="50"
class="mt-4"
style="margin-top:2vh"
/>
</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>
import { ref } from 'vue'; import { defineComponent } from 'vue';
import { ElTable } from 'element-plus'; import TabPane from './components/TabPane';
interface User { export default defineComponent({
date: string name: 'Tab',
name: string components: { TabPane },
address: string data() {
} return {
tabMapOptions: [
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); { label: 'China', key: 'CN' },
const multipleSelection = ref<User[]>([]); { label: 'USA', key: 'US' },
{ label: 'Japan', key: 'JP' },
const handleSelectionChange = (val: User[]) => { { label: 'Eurozone', key: 'EU' }
multipleSelection.value = val; ],
}; activeName: 'CN',
createdTimes: 0
const tableData: User[] = [ };
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, },
{ // watch: {
date: '2016-05-02', // activeName(val) { // url
name: 'Tom', // this.$router.push(`${this.$route.path}?tab=${val}`);
address: 'No. 189, Grove St, Los Angeles' // }
// },
created() {
// init the default selected tab
const tab = this.$route.query.tab;
if (tab) {
this.activeName = tab;
}
}, },
{ methods: {
date: '2016-05-04', showCreatedTimes() {
name: 'Tom', this.createdTimes = this.createdTimes + 1;
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);
};
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>
.my-autocomplete li { <style scoped>
line-height: normal; .tab-container {
padding: 7px; margin: 30px;
} }
.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> </style>

View File

@ -1,95 +1,3 @@
<template>
<el-card style="max-width: 100vw;margin: 1.5vw;">
<template #header>
<div class="card-header">
<span>项目1</span>
</div>
</template>
<div style="display: flex; gap: 100px">
<el-input
v-model="input1"
style="width: 550px"
placeholder="请输入"
>
<template #prepend>名称</template>
</el-input>
<el-input
v-model="input2"
style="width: 550px"
placeholder="请输入"
>
<template #prepend>状态</template>
</el-input>
<div>
<el-button-group>
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
</el-button-group>
</div>
</div>
<template #footer>Footer content</template>
</el-card>
<el-card style="max-width: 100vw;margin: 1.5vw;">
<div>
<el-table :data="tableData" ref="multipleTableRef" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="date" label="序号"/>
<el-table-column prop="name" label="子系统名称"/>
<el-table-column prop="address" label="工作量" />
<el-table-column prop="address" label="周期" />
<el-table-column prop="address" label="负责人" />
<el-table-column prop="address" label="状态" />
<el-table-column prop="address" label="子系统简介" />
<el-table-column prop="address" label="截止时间" />
<el-table-column prop="address" label="操作" />
</el-table>
</div>
<div style="display: flex; justify-content: center;margin-top: 2vh">
<el-pagination background layout="prev, pager, next" :total="1000" />
</div>
</el-card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
const input1 = ref('');
const input2 = ref('');
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 = [
{
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>
<!--
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="filter-container"> <div class="filter-container">
@ -127,51 +35,51 @@ const tableData = [
style="width: 100%;" style="width: 100%;"
@sort-change="sortChange" @sort-change="sortChange"
> >
<el-table-column label="序号" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')"> <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
<template v-slot="{row}"> <template v-slot="{row}">
<span>{{ row.id }}</span> <span>{{ row.id }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="子系统名称" width="150px" align="center"> <el-table-column label="Date" width="150px" align="center">
<template v-slot="{row}"> <template v-slot="{row}">
<span>{{ parseTime(row.timestamp, '{y}-{m}-{d} {h}:{i}') }}</span> <span>{{ parseTime(row.timestamp, '{y}-{m}-{d} {h}:{i}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="工作量" min-width="150px"> <el-table-column label="Title" min-width="150px">
<template v-slot="{row}"> <template v-slot="{row}">
<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span> <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
<el-tag>{{ typeFilter(row.type) }}</el-tag> <el-tag>{{ typeFilter(row.type) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="周期" width="110px" align="center"> <el-table-column label="Author" width="110px" align="center">
<template v-slot="{row}"> <template v-slot="{row}">
<span>{{ row.author }}</span> <span>{{ row.author }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="showReviewer" label="负责人" width="110px" align="center"> <el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
<template v-slot="{row}"> <template v-slot="{row}">
<span style="color:red;">{{ row.reviewer }}</span> <span style="color:red;">{{ row.reviewer }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" width="80px"> <el-table-column label="Imp" width="80px">
<template v-slot="{row}"> <template v-slot="{row}">
<svg-icon v-for="n in row.importance" :key="n" icon-class="star" class="meta-item__icon" /> <svg-icon v-for="n in row.importance" :key="n" icon-class="star" class="meta-item__icon" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="子系统简介" align="center" width="95"> <el-table-column label="Readings" align="center" width="95">
<template v-slot="{row}"> <template v-slot="{row}">
<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span> <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
<span v-else>0</span> <span v-else>0</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="截止时间" class-name="status-col" width="100"> <el-table-column label="Status" class-name="status-col" width="100">
<template v-slot="{row}"> <template v-slot="{row}">
<el-tag :type="statusFilter(row.status)"> <el-tag :type="statusFilter(row.status)">
{{ row.status }} {{ row.status }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width"> <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
<template v-slot="{row,$index}"> <template v-slot="{row,$index}">
<el-button type="primary" size="small" @click="handleUpdate(row)"> <el-button type="primary" size="small" @click="handleUpdate(row)">
Edit Edit
@ -477,4 +385,3 @@ export default defineComponent({
} }
}); });
</script> </script>
-->

View File

@ -1,99 +1,6 @@
<template>
<el-card style="max-width: 100vw;margin: 1.5vw;">
<template #header>
<div class="card-header">
<span>我管理的项目</span>
</div>
</template>
<div style="display: flex; gap: 100px">
<el-input
v-model="input1"
style="width: 550px"
placeholder="请输入"
>
<template #prepend>名称</template>
</el-input>
<el-input
v-model="input2"
style="width: 550px"
placeholder="请输入"
>
<template #prepend>状态</template>
</el-input>
<div>
<el-button-group>
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
</el-button-group>
</div>
</div>
<template #footer>Footer content</template>
</el-card>
<el-card style="max-width: 100vw;margin: 1.5vw;">
<div>
<el-table :data="tableData" ref="multipleTableRef" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="date" label="序号"/>
<el-table-column prop="name" label="项目名称"/>
<el-table-column prop="address" label="工作量" />
<el-table-column prop="address" label="周期" />
<el-table-column prop="address" label="负责人" />
<el-table-column prop="address" label="状态" />
<el-table-column prop="address" label="标签" />
<el-table-column prop="address" label="文档(点击下载)" />
<el-table-column prop="address" label="截止时间" />
<el-table-column prop="address" label="操作" />
</el-table>
</div>
<div style="display: flex; justify-content: center;margin-top: 2vh">
<el-pagination background layout="prev, pager, next" :total="1000" />
</div>
</el-card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
const input1 = ref('');
const input2 = ref('');
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 = [
{
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>
<!--
<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; <!-- Note that row-key is necessary to get a correct row order. -->
<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%">
<el-table-column align="center" label="ID" width="65"> <el-table-column align="center" label="ID" width="65">
<template v-slot="{row}"> <template v-slot="{row}">
@ -245,4 +152,3 @@ export default defineComponent({
margin-top: 15px; margin-top: 15px;
} }
</style> </style>
-->

View File

@ -1,238 +1,25 @@
<!--<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 class="app-container">
<div style=" width:100%"> <div style="margin:0 0 5px 20px">
<el-card style="max-width: 100vw;margin: 1.5vw;"> Fixed header, sorted by header order,
<template #header><span>项目1</span></template>
<div style="display:flex;flex-direction:row;justify-content: space-around ">
<div>
名称
<el-input v-model="input" style="width: 240px" placeholder="Please input" />
</div>
<div>
状态
<el-input v-model="input" style="width: 240px" placeholder="Please input" />
</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
>
</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="margin-top:2vh"
/>
</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>
<fixed-thead />
<div style="margin:30px 0 5px 20px">
Not fixed header, sorted by click order
</div>
<unfixed-thead />
</div>
</template> </template>
<script lang="ts" setup> <script>
import { ref } from 'vue'; import { defineComponent } from 'vue';
import { ElTable } from 'element-plus'; import FixedThead from './components/FixedThead';
import UnfixedThead from './components/UnfixedThead';
interface User { export default defineComponent({
date: string name: 'DynamicTable',
name: string components: { FixedThead, UnfixedThead }
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);
};
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>
.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,227 +1,137 @@
<!--<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 class="app-container">
<div v-for="(row, index) in tableData" :key="index" class="table-row"> <el-card class="box-card">
<div class="table-cell"> <template #header>
<div class="date"> <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">
<el-icon><timer /></el-icon> Theme documentation
<span>{{ row.date }}</span> </a>
</div> </template>
</div> <div class="box-item">
<div class="table-cell"> <span class="field-label">Change Theme : </span>
<el-popover effect="light" trigger="hover" placement="top" width="auto"> <el-switch v-model="theme" />
<template #default> <aside style="margin-top:15px;">
<div>name: {{ row.name }}</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.
<div>address: {{ row.address }}</div> </aside>
</template> </div>
<template #reference> </el-card>
<el-tag>{{ row.name }}</el-tag>
</template> <div class="block">
</el-popover> <el-button type="primary">
</div> Primary
<div class="table-cell"> </el-button>
<el-button size="small" @click="handleEdit(index, row)">Edit</el-button> <el-button type="success">
<el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button> Success
</div> </el-button>
</div> <el-button type="info">
Info
</el-button>
<el-button type="warning">
Warning
</el-button>
<el-button type="danger">
Danger
</el-button>
</div> </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> </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 {
width: 400px;
max-width: 100%;
margin: 20px auto;
} }
.table-cell { .block {
flex: 1; padding: 30px 24px;
padding: 5px;
} }
.date { .tag-item {
display: flex; margin-right: 15px;
align-items: center;
}
.date el-icon {
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>