mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-09-17 01:04:21 +08:00
develop (merge request !2)
Squash merge branch 'develop' into 'master' Co-author: pengYYYYY <pengyue970715@gmail.com>
This commit is contained in:
pengYYYYY
commit
36c4b55d97
14
.editorconfig
Normal file
14
.editorconfig
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.{ts,js,vue,css}]
|
||||
indent_size = 2
|
||||
1
.env.development
Normal file
1
.env.development
Normal file
|
|
@ -0,0 +1 @@
|
|||
VITE_SOME_KEY=456
|
||||
30
.eslintignore
Normal file
30
.eslintignore
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
snapshot*
|
||||
dist
|
||||
lib
|
||||
es
|
||||
node_modules
|
||||
common
|
||||
static
|
||||
cypress
|
||||
script/test/cypress
|
||||
_site
|
||||
temp*
|
||||
static/
|
||||
|
||||
examples
|
||||
site/*
|
||||
!site/v3.js
|
||||
src/addon
|
||||
src/calendar
|
||||
src/locale
|
||||
src/upload
|
||||
src/dropdown
|
||||
src/transfer
|
||||
src/time-picker
|
||||
src/utils
|
||||
src/textarea
|
||||
typings
|
||||
dist
|
||||
es
|
||||
lib
|
||||
types
|
||||
31
.gitignore
vendored
Executable file
31
.gitignore
vendored
Executable file
|
|
@ -0,0 +1,31 @@
|
|||
node_modules
|
||||
.vscode
|
||||
.DS_Store
|
||||
.vscode
|
||||
|
||||
# build files
|
||||
es/
|
||||
lib/
|
||||
dist/
|
||||
typings/
|
||||
|
||||
_site
|
||||
package
|
||||
tmp*
|
||||
temp*
|
||||
coverage
|
||||
test-report.html
|
||||
.idea/
|
||||
yarn.lock
|
||||
*.zip
|
||||
.history
|
||||
script/test/cypress/screenshots
|
||||
script/test/cypress/videos
|
||||
script/test/cypress/results
|
||||
script/test/cypress/support
|
||||
results/
|
||||
yarn-error.log
|
||||
cypress
|
||||
cypress.json
|
||||
Dockerfile
|
||||
robotMsg.json
|
||||
39
.prettierrc.js
Normal file
39
.prettierrc.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
module.exports = {
|
||||
// 一行最多 120 字符
|
||||
printWidth: 120,
|
||||
// 使用 2 个空格缩进
|
||||
tabWidth: 2,
|
||||
// 不使用缩进符，而使用空格
|
||||
useTabs: false,
|
||||
// 行尾需要有分号
|
||||
semi: true,
|
||||
// 使用单引号
|
||||
singleQuote: true,
|
||||
// 对象的 key 仅在必要时用引号
|
||||
quoteProps: 'as-needed',
|
||||
// jsx 不使用单引号，而使用双引号
|
||||
jsxSingleQuote: false,
|
||||
// 末尾需要有逗号
|
||||
trailingComma: 'all',
|
||||
// 大括号内的首尾需要空格
|
||||
bracketSpacing: true,
|
||||
// jsx 标签的反尖括号需要换行
|
||||
jsxBracketSameLine: false,
|
||||
// 箭头函数，只有一个参数的时候，也需要括号
|
||||
arrowParens: 'always',
|
||||
// 每个文件格式化的范围是文件的全部内容
|
||||
rangeStart: 0,
|
||||
rangeEnd: Infinity,
|
||||
// 不需要写文件开头的 @prettier
|
||||
requirePragma: false,
|
||||
// 不需要自动在文件开头插入 @prettier
|
||||
insertPragma: false,
|
||||
// 使用默认的折行标准
|
||||
proseWrap: 'preserve',
|
||||
// 根据显示样式决定 html 要不要折行
|
||||
htmlWhitespaceSensitivity: 'css',
|
||||
// vue 文件中的 script 和 style 内不用缩进
|
||||
vueIndentScriptAndStyle: false,
|
||||
// 换行符使用 lf
|
||||
endOfLine: 'lf',
|
||||
};
|
||||
1
commitlint.config.js
Normal file
1
commitlint.config.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
module.exports = { extends: ['@commitlint/config-conventional'] };
|
||||
20
docker/nginx.conf
Normal file
20
docker/nginx.conf
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
server {
|
||||
if ($request_method = HEAD) {
|
||||
return 200;
|
||||
}
|
||||
|
||||
location / {
|
||||
alias /usr/share/nginx/html/;
|
||||
index index.html index.htm;
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
access_log /var/log/nginx/access.log main;
|
||||
error_log /var/log/nginx/error.log error;
|
||||
|
||||
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
}
|
||||
BIN
docs/20210627-114325.png
Normal file
BIN
docs/20210627-114325.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
13
globals.d.ts
vendored
Normal file
13
globals.d.ts
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// 通用声明
|
||||
declare type ClassName = { [className: string]: any } | ClassName[] | string;
|
||||
|
||||
declare interface ImportMeta {
|
||||
env: {
|
||||
MODE: 'mock' | 'development' | 'test' | 'release';
|
||||
};
|
||||
}
|
||||
|
||||
declare module '*.svg' {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TDesign Pro</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
6
src/App.vue
Normal file
6
src/App.vue
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
|
||||
88
src/components/card/index.vue
Normal file
88
src/components/card/index.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div :class="containerCls">
|
||||
<div
|
||||
v-show="title || describe"
|
||||
class="card-title"
|
||||
>
|
||||
<span>
|
||||
{{ title }}
|
||||
<span
|
||||
v-if="describe"
|
||||
class="card-describe"
|
||||
>{{ describe }}</span>
|
||||
</span>
|
||||
<span class="card-option">
|
||||
<slot name="option" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Card',
|
||||
props: {
|
||||
title: String,
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
describe: String,
|
||||
},
|
||||
computed: {
|
||||
containerCls() {
|
||||
return ['card-container', { 'card-container-compact': this.compact }];
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
.card {
|
||||
&-option {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 24px;
|
||||
}
|
||||
&-container {
|
||||
padding: 24px;
|
||||
margin: 16px 0;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
width: 100%;
|
||||
|
||||
&-compact {
|
||||
padding: 16px 16px 0;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-family: PingFangSC-Medium;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 500;
|
||||
color: @text-level-1-color;
|
||||
}
|
||||
|
||||
&-describe {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
src/components/result/index.vue
Normal file
83
src/components/result/index.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<card>
|
||||
<div class="result-container">
|
||||
<img
|
||||
class="result-bg-img"
|
||||
:src="bgUrl"
|
||||
>
|
||||
<div class="result-tip">
|
||||
{{ tip }}
|
||||
</div>
|
||||
<div>
|
||||
<router-link
|
||||
class="tdesign-pro-main-link"
|
||||
to="/"
|
||||
>
|
||||
<t-button
|
||||
theme="primary"
|
||||
variant="text"
|
||||
>
|
||||
返回首页
|
||||
</t-button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</card>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import Card from '@/components/card/index.vue';
|
||||
export default defineComponent({
|
||||
name: 'Result',
|
||||
components: { Card },
|
||||
props: ['bgUrl', 'tip', 'linkUrl', 'pageHeader'],
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
.result {
|
||||
&-link {
|
||||
color: @primary-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
min-height: 400px;
|
||||
height: 75vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
&-bg-img {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
margin: 16px 0 8px;
|
||||
font-size: @font-size-base;
|
||||
color: @text-level-2-color;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
src/components/thumbnail/index.vue
Normal file
51
src/components/thumbnail/index.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<img
|
||||
:class="className"
|
||||
:src="url"
|
||||
>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Thumbnail',
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'layout',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
className() {
|
||||
return [
|
||||
'thumbnail-container',
|
||||
{
|
||||
'thumbnail-circle': this.type === 'circle',
|
||||
'thumbnail-layout': this.type === 'layout',
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
.thumbnail {
|
||||
&-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-circle {
|
||||
border-radius: @border-radius-50;
|
||||
}
|
||||
|
||||
&-layout {
|
||||
width: 120px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
11
src/config/global.ts
Normal file
11
src/config/global.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export const prefix = 'tdesign-pro';
|
||||
export const theme = 'light';
|
||||
// 登录方式设定，authenticationMethod取值有：smartProxy(走智能网关内网登录，要求.oa.co../.woa.co.. 等域名，且要求域名申请接入智能网关)
|
||||
// customize(自定义登录，外网域名，统一重定向到登录页面)
|
||||
// export const authenticationMethod = 'smartProxy';
|
||||
export const authenticationMethod = 'customize';
|
||||
export default {
|
||||
prefix,
|
||||
theme,
|
||||
authenticationMethod,
|
||||
};
|
||||
20
src/config/proxy.ts
Normal file
20
src/config/proxy.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export default {
|
||||
development: {
|
||||
// 开发环境接口请求
|
||||
host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
|
||||
// 开发环境 cdn 路径
|
||||
cdn: '',
|
||||
},
|
||||
test: {
|
||||
// 测试环境接口地址
|
||||
host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
|
||||
// 测试环境 cdn 路径
|
||||
cdn: '',
|
||||
},
|
||||
release: {
|
||||
// 正式环境接口地址
|
||||
host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
|
||||
// 正式环境 cdn 路径
|
||||
cdn: '',
|
||||
},
|
||||
};
|
||||
174
src/config/routes.ts
Normal file
174
src/config/routes.ts
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
export default [
|
||||
{
|
||||
path: '/dashboard',
|
||||
icon: 'dashboard',
|
||||
title: '仪表盘',
|
||||
component: '../layouts/td-layout.tsx',
|
||||
redirect: '/dashboard/base',
|
||||
children: [
|
||||
{
|
||||
title: '概览仪表盘',
|
||||
path: 'base',
|
||||
component: '../pages/dashboard/base/index.vue',
|
||||
},
|
||||
{
|
||||
title: '统计报表',
|
||||
path: 'detail',
|
||||
component: '../pages/dashboard/detail/index.vue',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
icon: 'view-module',
|
||||
title: '列表页',
|
||||
component: '../layouts/td-layout.tsx',
|
||||
redirect: '/list/base',
|
||||
children: [
|
||||
{
|
||||
title: '基础列表页',
|
||||
path: 'base',
|
||||
component: '../pages/list/base/index.vue',
|
||||
},
|
||||
{
|
||||
title: '卡片列表页',
|
||||
path: 'card',
|
||||
component: '../pages/list/card/index.vue',
|
||||
},
|
||||
{
|
||||
title: '筛选列表页',
|
||||
path: 'select',
|
||||
component: '../pages/list/select/index.vue',
|
||||
},
|
||||
{
|
||||
title: '树状筛选列表页',
|
||||
path: 'tree',
|
||||
component: '../pages/list/tree/index.vue',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/form',
|
||||
icon: 'queue',
|
||||
title: '表单页',
|
||||
component: '../layouts/td-layout.tsx',
|
||||
redirect: '/form/base',
|
||||
children: [
|
||||
{
|
||||
title: '基础表单页',
|
||||
path: 'base',
|
||||
component: '../pages/form/base/index.vue',
|
||||
},
|
||||
{
|
||||
title: '分步表单页',
|
||||
path: 'step',
|
||||
component: '../pages/form/step/index.vue',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/detail',
|
||||
icon: 'layers',
|
||||
title: '详情页',
|
||||
component: '../layouts/td-layout.tsx',
|
||||
redirect: '/detail/base',
|
||||
children: [
|
||||
{
|
||||
title: '基础详情页',
|
||||
path: 'base',
|
||||
component: '../pages/detail/base/index.vue',
|
||||
// 默认不填，则需要每个页面都会经过登录的校验，若不需要进行登录校验则将needLogin：设为false
|
||||
meta: { needLogin: false, title: '基础详情页' },
|
||||
},
|
||||
{
|
||||
title: '多卡片详情页',
|
||||
path: 'advanced',
|
||||
component: '../pages/detail/advanced/index.vue',
|
||||
},
|
||||
{
|
||||
title: '数据详情页',
|
||||
path: 'deploy',
|
||||
component: '../pages/detail/deploy/index.vue',
|
||||
},
|
||||
{
|
||||
title: '二级详情页',
|
||||
path: 'secondary',
|
||||
component: '../pages/detail/secondary/index.vue',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/result',
|
||||
icon: 'check-circle',
|
||||
title: '结果页',
|
||||
component: '../layouts/td-layout.tsx',
|
||||
redirect: '/result/success',
|
||||
children: [
|
||||
{
|
||||
title: '成功页',
|
||||
path: 'success',
|
||||
component: '../pages/result/success/index.vue',
|
||||
},
|
||||
{
|
||||
title: '失败页',
|
||||
path: 'fail',
|
||||
component: '../pages/result/fail/index.vue',
|
||||
},
|
||||
{
|
||||
title: '网络异常',
|
||||
path: 'network-error',
|
||||
component: '../pages/result/network-error/index.vue',
|
||||
},
|
||||
{
|
||||
title: '无权限',
|
||||
path: '403',
|
||||
component: '../pages/result/403/index.vue',
|
||||
},
|
||||
{
|
||||
title: '访问页面不存在页',
|
||||
path: '404',
|
||||
component: '../pages/result/404/index.vue',
|
||||
},
|
||||
{
|
||||
title: '服务器出错页',
|
||||
path: '500',
|
||||
component: '../pages/result/500/index.vue',
|
||||
},
|
||||
{
|
||||
title: '浏览器不兼容页',
|
||||
path: 'browser-incompatible',
|
||||
component: '../pages/result/browser-incompatible/index.vue',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
icon: 'user-circle',
|
||||
title: '个人页',
|
||||
component: '../layouts/td-layout.tsx',
|
||||
redirect: '/user/index',
|
||||
children: [
|
||||
{
|
||||
title: '个人中心',
|
||||
path: 'index',
|
||||
component: '../pages/user/index.vue',
|
||||
},
|
||||
],
|
||||
},
|
||||
// 自定义登录页面
|
||||
{
|
||||
path: '/login',
|
||||
title: '登录页',
|
||||
component: '../layouts/blank.vue',
|
||||
icon: 'chevron-right-rectangle',
|
||||
redirect: '/login/index',
|
||||
children: [
|
||||
{
|
||||
title: '登录中心',
|
||||
path: 'index',
|
||||
meta: { needLogin: false },
|
||||
component: '../pages/login/index.vue',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
12
src/config/style.ts
Normal file
12
src/config/style.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
export default {
|
||||
showFooter: true,
|
||||
isSidebarCompact: false,
|
||||
showBreadcrumb: false,
|
||||
theme: 'dark',
|
||||
layout: 'side',
|
||||
splitMenu: false,
|
||||
isFooterAside: false,
|
||||
isSidebarFixed: true,
|
||||
isHeaderFixed: true,
|
||||
showHeader: true,
|
||||
};
|
||||
35
src/constants/index.ts
Normal file
35
src/constants/index.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// 合同状态枚举
|
||||
export const CONTRACT_STATUS = {
|
||||
FAIL: 0,
|
||||
AUDIT_PENDING: 1,
|
||||
EXEC_PENDING: 2,
|
||||
EXECUTING: 3,
|
||||
FINISH: 4,
|
||||
};
|
||||
|
||||
export const CONTRACT_STATUS_OPTIONS = [
|
||||
{ value: CONTRACT_STATUS.FAIL, label: '审核失败' },
|
||||
{ value: CONTRACT_STATUS.AUDIT_PENDING, label: '待审核' },
|
||||
{ value: CONTRACT_STATUS.EXEC_PENDING, label: '待履行' },
|
||||
{ value: CONTRACT_STATUS.EXECUTING, label: '审核成功' },
|
||||
{ value: CONTRACT_STATUS.FINISH, label: '已完成' },
|
||||
];
|
||||
|
||||
// 合同类型枚举
|
||||
export const CONTRACT_TYPES = {
|
||||
MAIN: 0,
|
||||
SUB: 1,
|
||||
SUPPLEMENT: 2,
|
||||
};
|
||||
|
||||
export const CONTRACT_TYPE_OPTIONS = [
|
||||
{ value: CONTRACT_TYPES.MAIN, label: '主合同' },
|
||||
{ value: CONTRACT_TYPES.SUB, label: '子合同' },
|
||||
{ value: CONTRACT_TYPES.SUPPLEMENT, label: '补充合同' },
|
||||
];
|
||||
|
||||
// 合同收付类型枚举
|
||||
export const CONTRACT_PAYMENT_TYPES = {
|
||||
PAYMENT: 0,
|
||||
RECIPT: 1,
|
||||
};
|
||||
309
src/pages/dashboard/base/index.less
Normal file
309
src/pages/dashboard/base/index.less
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
@import '@/style/index';
|
||||
|
||||
@media (max-width: @screen-md-max) {
|
||||
.dashboard-panel .t-col-3 {
|
||||
min-width: 50%;
|
||||
&:first-child {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-panel .t-col {
|
||||
.card-container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
}
|
||||
|
||||
.dashboard-panel {
|
||||
padding: 0;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.card-container {
|
||||
.card-content {
|
||||
&-label-title {
|
||||
color: @text-color-primary;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
.t-table th, .t-table td {
|
||||
padding: 10px 8px;
|
||||
}
|
||||
.t-table tr {
|
||||
color: @text-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-item-perfix {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.dashboard-item-bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.dashboard-item-bottom-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items:flex-start;
|
||||
|
||||
&-unit {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.90);
|
||||
padding-left: 4px;
|
||||
padding-top: 17px;
|
||||
}
|
||||
|
||||
&-number {
|
||||
display: inline-block;
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-item-bottom-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
height: 55px;
|
||||
|
||||
.dashboard-item-bottom-emergency {
|
||||
width: 96px;
|
||||
height: 32px;
|
||||
background: #FFE9E9;
|
||||
border-radius: 16px;
|
||||
font-size: 14px;
|
||||
color: #E34D59;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.dashboard-item-bottom-right-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
padding-right: 8px;
|
||||
}
|
||||
div {
|
||||
height: 24px;
|
||||
// font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 14px;
|
||||
|
||||
> span {
|
||||
color: #00A870;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-item-bottom-right-bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
padding-right: 8px;
|
||||
}
|
||||
div {
|
||||
height: 24px;
|
||||
background: #FFE9E9;
|
||||
border-radius: @border-radius;
|
||||
color: #E34D59;
|
||||
// font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1px 8px;
|
||||
|
||||
.t-icon-caret-up {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dashboard-bottom {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
// 左边图表
|
||||
.dashboard-bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dashboard-bottom-left-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// 计量统计
|
||||
.dashboard-bottom-left-top-count-chart {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
border-radius: @border-radius;
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
height: 320px;
|
||||
}
|
||||
// 动态监测
|
||||
.dashboard-bottom-left-top-monitor-chart {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
border-radius: @border-radius;
|
||||
margin-left: 16px;
|
||||
width: 100%;
|
||||
// min-width: 300px;
|
||||
height: 320px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 出入库概览（）
|
||||
.dashboard-bottom-left-bottom {
|
||||
background-color: white;
|
||||
padding: 20px 24px;
|
||||
border-radius: @border-radius;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 366px;
|
||||
}
|
||||
}
|
||||
|
||||
// 右边列表-实时热度趋势
|
||||
.dashboard-bottom-right {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
border-radius: @border-radius;
|
||||
margin-left: 16px;
|
||||
width: 426px;
|
||||
min-height: 690px;
|
||||
|
||||
ul {
|
||||
padding-top: 16px;
|
||||
|
||||
li {
|
||||
.dashboard-chart-tend-item-title {
|
||||
color: grey !important;
|
||||
}
|
||||
|
||||
.dashboard-chart-tend-sep {
|
||||
padding: 0 0 17px 0 !important;
|
||||
}
|
||||
|
||||
.dashboard-chart-tend-item-line {
|
||||
border-bottom: solid 1px #dedede;
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
.dashboard-chart-tend-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.dashboard-chart-tend-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.dashboard-chart-tend-num {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.dashboard-chart-tend-rante {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标题内容
|
||||
.dashboard-chart-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
&-describe {
|
||||
font-size: 14px !important;
|
||||
color: rgba(0,0,0,0.60) !important;
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
}
|
||||
&-container {
|
||||
.t-date-picker {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: rgba(0,0,0,0.90);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dashboard-chart-title-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: @border-radius;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
|
||||
input {
|
||||
border: solid 0px #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal !important;
|
||||
padding: 5px 15px !important;
|
||||
|
||||
.t-radio-button__label {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-chart-container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-item-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
270
src/pages/dashboard/base/index.ts
Normal file
270
src/pages/dashboard/base/index.ts
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
export class DashboardBase {
|
||||
/** 更新容器尺寸 */
|
||||
setContainerSize(containerCopyValue: HTMLElement, absWidth = 0, absHeight = 0): void {
|
||||
const container = containerCopyValue;
|
||||
try {
|
||||
if (container && container.style && container.parentElement) {
|
||||
container.style.width = `${container.parentElement.clientWidth - absWidth}px`;
|
||||
container.style.height = `${container.parentElement.clientHeight - absHeight}px`;
|
||||
}
|
||||
} catch (error) {
|
||||
// hook
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取随机数
|
||||
*
|
||||
* @param {number} [num=100]
|
||||
* @returns
|
||||
*
|
||||
* @memberOf DashboardBase
|
||||
*/
|
||||
export function getRandomNum(num = 100): number {
|
||||
let resultNum = Number((Math.random() * num).toFixed(0));
|
||||
|
||||
if (resultNum <= 1) {
|
||||
resultNum = 1;
|
||||
}
|
||||
|
||||
return resultNum;
|
||||
}
|
||||
|
||||
/** 柱状图数据源 */
|
||||
export function constructInitDataset(dateTime: Array<string> = []) {
|
||||
const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
|
||||
const divideNum = 10;
|
||||
|
||||
for (let i = 0; i < divideNum; i++) {
|
||||
const [timeArray, inArray, outArray] = dataset;
|
||||
if (dateTime.length > 0) {
|
||||
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||
// console.log('dateAbsTime..', dateAbsTime, enhandTime);
|
||||
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
||||
} else {
|
||||
timeArray.push(
|
||||
dayjs()
|
||||
.subtract(divideNum - i, 'day')
|
||||
.format('YYYY-MM-DD'),
|
||||
);
|
||||
}
|
||||
|
||||
inArray.push(getRandomNum().toString());
|
||||
outArray.push(getRandomNum().toString());
|
||||
}
|
||||
return dataset;
|
||||
}
|
||||
|
||||
/**
|
||||
* 线性图表数据源
|
||||
*
|
||||
* @export
|
||||
* @param {Array<string>} [dateTime=[]]
|
||||
* @returns {*}
|
||||
*/
|
||||
export function getLineChartDataSet(dateTime: Array<string> = []): any {
|
||||
if (dateTime.length > 0) {
|
||||
const devideNum = 10;
|
||||
const dateArray: Array<string> = getDateArray(dateTime, devideNum);
|
||||
return [
|
||||
dateArray,
|
||||
getSelftItemList('杯子', devideNum),
|
||||
getSelftItemList('茶叶', devideNum),
|
||||
getSelftItemList('蜂蜜', devideNum),
|
||||
getSelftItemList('面粉', devideNum),
|
||||
];
|
||||
}
|
||||
return [
|
||||
[
|
||||
'日期',
|
||||
'2020-01-16',
|
||||
'2020-01-17',
|
||||
'2020-01-18',
|
||||
'2020-01-19',
|
||||
'2020-01-20',
|
||||
'2020-01-21',
|
||||
'2020-01-22',
|
||||
'2020-01-23',
|
||||
'2020-01-24',
|
||||
'2020-01-25',
|
||||
],
|
||||
['杯子', 5, 15, 15, 25, 24, 13, 32, 37, 43, 35],
|
||||
['茶叶', 1, 6, 13, 38, 39, 44, 48, 75, 62, 52],
|
||||
['蜂蜜', 16, 22, 27, 22, 32, 35, 23, 32, 33, 25],
|
||||
['面粉', 12, 12, 25, 29, 21, 30, 37, 47, 40, 47],
|
||||
];
|
||||
}
|
||||
/** 图表颜色 */
|
||||
export const chartListColor: Array<string> = ['#0052D9', '#00A870', '#7D46BD', '#0594FA', '#ED7B2F'];
|
||||
|
||||
/**
|
||||
* 获取表头数据
|
||||
*
|
||||
* @export
|
||||
* @param {string[]} dateTime
|
||||
* @param {number} divideNum
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
|
||||
const timeArray: string[] = ['日期'];
|
||||
if (dateTime.length > 0) {
|
||||
for (let i = 0; i < divideNum; i++) {
|
||||
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
||||
}
|
||||
}
|
||||
|
||||
return timeArray;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表行数据
|
||||
*
|
||||
* @export
|
||||
* @param {string} productName
|
||||
* @param {number} devideNum
|
||||
*/
|
||||
export function getSelftItemList(productName: string, devideNum: number): string[] {
|
||||
const productArray: string[] = [productName];
|
||||
for (let i = 0; i < devideNum; i++) {
|
||||
productArray.push(getRandomNum(100 * i).toString());
|
||||
}
|
||||
|
||||
return productArray;
|
||||
}
|
||||
|
||||
/**
|
||||
* 散点图数据
|
||||
*
|
||||
* @export
|
||||
* @returns {any[]}
|
||||
*/
|
||||
export function getScattlerDataSet(): any[] {
|
||||
const scatterData = [...Array(40)].map(() => [
|
||||
getRandomNum(Math.random() * 100),
|
||||
getRandomNum(Math.random() * 200),
|
||||
getRandomNum(Math.random() * 30),
|
||||
getRandomNum(Math.random() * 400),
|
||||
]);
|
||||
|
||||
return [
|
||||
['咖啡机质量', '咖啡机效果', '按摩仪质量', '按摩仪效果'],
|
||||
[getRandomNum(100), getRandomNum(200), getRandomNum(100), getRandomNum(500)],
|
||||
...scatterData,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获域图数据结构
|
||||
*
|
||||
* @export
|
||||
* @returns {any[]}
|
||||
*/
|
||||
export function getAreaChartDataSet(text = ''): any {
|
||||
return {
|
||||
title: {
|
||||
text,
|
||||
},
|
||||
dataset: [
|
||||
['时间', '00:00', '02:00', '04:00', '06:00', '08:00'],
|
||||
[
|
||||
'测试',
|
||||
getRandomNum(Math.random() * 100),
|
||||
getRandomNum(Math.random() * 200),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 400),
|
||||
getRandomNum(Math.random() * 500),
|
||||
],
|
||||
[
|
||||
'上线',
|
||||
getRandomNum(Math.random() * 100),
|
||||
getRandomNum(Math.random() * 200),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 400),
|
||||
getRandomNum(Math.random() * 500),
|
||||
],
|
||||
],
|
||||
area: {
|
||||
smooth: true,
|
||||
},
|
||||
injectOption: (option) => ({ ...option, color: chartListColor }),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 柱状图数据结构
|
||||
*
|
||||
* @export
|
||||
* @param {boolean} [isMonth=false]
|
||||
* @returns {*}
|
||||
*/
|
||||
export function getColumnChartDataSet(isMonth = false): any {
|
||||
if (isMonth) {
|
||||
return {
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
dataset: [
|
||||
['日期', '1', '4', '8', '12', '16', '20', '24'],
|
||||
[
|
||||
'告警',
|
||||
getRandomNum(Math.random() * 800),
|
||||
getRandomNum(Math.random() * 700),
|
||||
getRandomNum(Math.random() * 600),
|
||||
getRandomNum(Math.random() * 500),
|
||||
getRandomNum(Math.random() * 400),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 100),
|
||||
],
|
||||
],
|
||||
injectOption: (option) => ({ ...option, color: chartListColor }),
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
dataset: [
|
||||
['时间', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
[
|
||||
'告警',
|
||||
getRandomNum(Math.random() * 200),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 600),
|
||||
getRandomNum(Math.random() * 500),
|
||||
getRandomNum(Math.random() * 100),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 100),
|
||||
],
|
||||
],
|
||||
injectOption: (option) => ({ ...option, color: chartListColor }),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取饼图数据
|
||||
*
|
||||
* @export
|
||||
* @param {number} [radius=1]
|
||||
* @returns {*}
|
||||
*/
|
||||
export function getPieChartDataSet(radius = 42): any {
|
||||
return {
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
dataset: [
|
||||
['状态', '审核中', '待履行', '履行中', '已完成'],
|
||||
['数量', 67, 45, radius, 36],
|
||||
],
|
||||
injectOption: (option) => ({ ...option, color: chartListColor }),
|
||||
pie: {
|
||||
radius: ['45%', '60%'], // 设置内圆和外圆半径
|
||||
},
|
||||
};
|
||||
}
|
||||
147
src/pages/dashboard/detail/index.less
Normal file
147
src/pages/dashboard/detail/index.less
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
@import '@/style/index';
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
}
|
||||
|
||||
.dashboard-panel-detail {
|
||||
padding: 0;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
// 标题内容
|
||||
.dashboard-chart-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: rgba(0,0,0,0.90);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dashboard-chart-title-date {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: @border-radius;
|
||||
padding: 5px 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
|
||||
.dashboard-chart-title-to {
|
||||
color: rgba(0,0,0,0.30);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.t-icon-creditcard {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-chart-title-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: @border-radius;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
|
||||
input {
|
||||
border: solid 0px #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal !important;
|
||||
padding: 5px 15px !important;
|
||||
|
||||
.t-radio-button__label {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dashboard-detail-top-container {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.dashboard-detail-box {
|
||||
.dashboard-detail-container-item:not(:last-child) {
|
||||
border-right: solid 1px #EBEBEB;
|
||||
margin-right: 22.5px;
|
||||
}
|
||||
@media screen and (min-width: @screen-md-max) {
|
||||
.dashboard-detail-container-item-perfix {
|
||||
border-right: solid 1px #EBEBEB;
|
||||
margin-right: 22.5px;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
@media screen and (max-width: @screen-md-max - 1px) and (min-width: 0) {
|
||||
display: normal;
|
||||
}
|
||||
}
|
||||
.dashboard-detail-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
padding-top: 20px;
|
||||
|
||||
.dashboard-detail-container-item {
|
||||
min-width: 108px;
|
||||
width: 100%;
|
||||
height: 106px;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
color: rgba(0,0,0,0.90);
|
||||
font-weight: 500;
|
||||
padding-top: 8px;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.30);
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-detail-container-item-text {
|
||||
// color: #E34D59;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
font-size: 12px;
|
||||
color: rgba(0,0,0,0.40);
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-detail-bottom-container {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
border-radius: @border-radius;
|
||||
margin-top: 16px;
|
||||
min-height: 400px;
|
||||
|
||||
.dashboard-chart-title-container {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
176
src/pages/detail/advanced/index.less
Normal file
176
src/pages/detail/advanced/index.less
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
@import '@/style/index';
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
}
|
||||
.t-layout--content-replace {
|
||||
color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
.row-padding {
|
||||
padding-top: 30px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.operater-block-container {
|
||||
padding: 10px 0 30px;
|
||||
}
|
||||
.operater-add {
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: 20px 10px 24px 20px;
|
||||
border: dashed 1px #dedede;
|
||||
|
||||
.operater-sub {
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.t-icon {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.operater-gap {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.operater-block {
|
||||
background-color: #EBEDF1;
|
||||
padding: 20px 10px 24px 20px;
|
||||
height: 210px;
|
||||
|
||||
.operater-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.operater-item {
|
||||
padding-left: 48px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
h1 {
|
||||
display: inline-block;
|
||||
width: 136px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
}
|
||||
span {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix} {
|
||||
&-panel {
|
||||
background-color: white;
|
||||
padding: @spacer-3;
|
||||
border-radius: @border-radius;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&-search-input {
|
||||
width: 360px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-operater-row {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&-operater-title {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-operater-label {
|
||||
color: #000;
|
||||
padding-left: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-block {
|
||||
column-count: 2;
|
||||
|
||||
.info-item {
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
width: 84px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
}
|
||||
span {
|
||||
margin-left: 24px;
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: @border-radius-50;
|
||||
background: @success-color-5;
|
||||
}
|
||||
.inProgress {
|
||||
color: @success-color-5;
|
||||
}
|
||||
.pdf {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-info-block {
|
||||
|
||||
.info-item {
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
width: 84px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
}
|
||||
span {
|
||||
margin-left: 24px;
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: @border-radius-50;
|
||||
background: @success-color-5;
|
||||
}
|
||||
.green {
|
||||
color: @success-color-5;
|
||||
}
|
||||
.blue {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
285
src/pages/detail/advanced/index.vue
Normal file
285
src/pages/detail/advanced/index.vue
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
<template>
|
||||
<div>
|
||||
<t-page-header>合同详情页</t-page-header>
|
||||
|
||||
<div :class="prefix + '-panel'">
|
||||
<div class="base-info">
|
||||
<t-row
|
||||
:class="prefix + '-operater-row'"
|
||||
justify="space-between"
|
||||
>
|
||||
<p :class="prefix + '-operater-title'">
|
||||
基本信息
|
||||
</p>
|
||||
</t-row>
|
||||
<div class="info-block">
|
||||
<div
|
||||
v-for="(item, index) in baseInfoData"
|
||||
:key="index"
|
||||
class="info-item"
|
||||
>
|
||||
<h1>{{ item.name }}</h1>
|
||||
<span
|
||||
:class="{
|
||||
['inProgress']: item.type && item.type.value === 'inProgress',
|
||||
['pdf']: item.type && item.type.value === 'pdf',
|
||||
}"
|
||||
>
|
||||
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 发票进度 -->
|
||||
<div :class="prefix + '-panel'">
|
||||
<t-row
|
||||
:class="prefix + '-operater-row'"
|
||||
justify="space-between"
|
||||
>
|
||||
<p :class="prefix + '-operater-title'">
|
||||
发票进度
|
||||
</p>
|
||||
</t-row>
|
||||
<t-row
|
||||
:class="prefix + '-operater-row row-padding'"
|
||||
justify="space-between"
|
||||
>
|
||||
<t-steps
|
||||
theme="dot"
|
||||
:current="updateCurrent"
|
||||
>
|
||||
<t-step-item
|
||||
title="申请提交"
|
||||
content="已于12月21日提交"
|
||||
/>
|
||||
<t-step-item
|
||||
title="电子发票"
|
||||
content="预计1～3个工作日"
|
||||
/>
|
||||
<t-step-item
|
||||
title="发票已邮寄"
|
||||
content="电子发票开出后7个工作日内联系"
|
||||
/>
|
||||
<t-step-item
|
||||
title="完成"
|
||||
content=""
|
||||
/>
|
||||
</t-steps>
|
||||
</t-row>
|
||||
</div>
|
||||
|
||||
<!-- 产品目录 -->
|
||||
<div :class="prefix + '-panel'">
|
||||
<t-row
|
||||
:class="prefix + '-operater-row'"
|
||||
justify="space-between"
|
||||
>
|
||||
<p :class="prefix + '-operater-title'">
|
||||
产品目录
|
||||
</p>
|
||||
</t-row>
|
||||
<t-row class="operater-block-container">
|
||||
<t-col :flex="1">
|
||||
<div class="operater-add">
|
||||
<div class="operater-sub">
|
||||
<t-icon
|
||||
name="add"
|
||||
size="20px"
|
||||
/>
|
||||
<span>新增产品</span>
|
||||
</div>
|
||||
</div>
|
||||
</t-col>
|
||||
<t-col :flex="1">
|
||||
<div class="operater-block operater-gap">
|
||||
<div class="operater-title">
|
||||
<t-icon
|
||||
name="server"
|
||||
size="2em"
|
||||
/>
|
||||
<h1>Macbook</h1>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>产品编号</h1>
|
||||
<span>p_tmp_60a637cd0d</span>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>计费方式</h1>
|
||||
<span>按量计费</span>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>交付时间</h1>
|
||||
<span>2020-12-21 11:05:17</span>
|
||||
</div>
|
||||
</div>
|
||||
</t-col>
|
||||
<t-col :flex="1">
|
||||
<div class="operater-block operater-gap">
|
||||
<div class="operater-title">
|
||||
<t-icon
|
||||
name="server"
|
||||
size="2em"
|
||||
/>
|
||||
<h1>椅子</h1>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>产品编号</h1>
|
||||
<span>p_tmp_60a637cd0C</span>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>计费方式</h1>
|
||||
<span>按量计费</span>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>交付时间</h1>
|
||||
<span>2020-12-21 13:08:09</span>
|
||||
</div>
|
||||
</div>
|
||||
</t-col>
|
||||
</t-row>
|
||||
</div>
|
||||
|
||||
<!-- 产品采购明细 -->
|
||||
<div :class="prefix + '-panel'">
|
||||
<t-row
|
||||
:class="prefix + '-operater-row'"
|
||||
justify="space-between"
|
||||
>
|
||||
<p :class="prefix + '-operater-title'">
|
||||
产品采购明细
|
||||
</p>
|
||||
</t-row>
|
||||
|
||||
<t-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
:bordered="bordered"
|
||||
:hover="hover"
|
||||
row-key="index"
|
||||
@sort-change="sortChange"
|
||||
@change="rehandleChange"
|
||||
>
|
||||
<template #op="slotProps">
|
||||
<a
|
||||
:class="prefix + '-link'"
|
||||
@click="listClick(slotProps)"
|
||||
>管理</a>
|
||||
<a
|
||||
:class="prefix + '-link'"
|
||||
@click="deleteClickOp(slotProps)"
|
||||
>删除</a>
|
||||
</template>
|
||||
<t-icon
|
||||
slot="op-column"
|
||||
name="descending-order"
|
||||
/>
|
||||
</t-table>
|
||||
</div>
|
||||
<t-dialog
|
||||
v-model:visible="visible"
|
||||
header="基本信息"
|
||||
@confirm="onConfirm"
|
||||
>
|
||||
<div slot="body">
|
||||
<div class="dialog-info-block">
|
||||
<div
|
||||
v-for="(item, index) in baseInfoData"
|
||||
:key="index"
|
||||
class="info-item"
|
||||
>
|
||||
<h1>{{ item.name }}</h1>
|
||||
<span
|
||||
:class="{
|
||||
['inProgress']: item.type && item.type.value === 'inProgress',
|
||||
['pdf']: item.type && item.type.value === 'pdf',
|
||||
}"
|
||||
>
|
||||
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import model from './index';
|
||||
import { prefix } from '@/config/global';
|
||||
|
||||
// 导入样式
|
||||
import './index.less';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DetailAdvanced',
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
prefix,
|
||||
updateCurrent: 0,
|
||||
columns: model.getTableColumns(),
|
||||
baseInfoData: model.getBaseInfoData(),
|
||||
bordered: true,
|
||||
hover: true,
|
||||
visible: false,
|
||||
pagination: {
|
||||
defaultPageSize: 10,
|
||||
total: 100,
|
||||
defaultCurrent: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
// 模拟进度
|
||||
setInterval(() => {
|
||||
if (this.updateCurrent > 5) {
|
||||
this.updateCurrent = -1;
|
||||
}
|
||||
this.updateCurrent = this.updateCurrent + 1;
|
||||
}, 2000);
|
||||
|
||||
this.$request
|
||||
.get('/api/get-purchase-list')
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
const { list = [] } = res.data;
|
||||
this.data = list;
|
||||
this.pagination = {
|
||||
...this.pagination,
|
||||
total: list.length,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
sortChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
rehandleChange(changeParams, triggerAndData) {
|
||||
console.log('统一Change', changeParams, triggerAndData);
|
||||
},
|
||||
listClick(e) {
|
||||
console.log(e);
|
||||
this.visible = true;
|
||||
},
|
||||
deleteClickOp(e) {
|
||||
this.data.splice(e.index, 1);
|
||||
},
|
||||
onConfirm() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
57
src/pages/detail/base/index.less
Normal file
57
src/pages/detail/base/index.less
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
@import '@/style/index';
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
}
|
||||
|
||||
.@{prefix} {
|
||||
&-panel {
|
||||
background-color: white;
|
||||
padding: @spacer-3;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
&-operater-row {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&-operater-title {
|
||||
font-size: 16px;
|
||||
color: @text-color-primary;
|
||||
font-family: PingFangSC-Medium;
|
||||
}
|
||||
}
|
||||
|
||||
.info-block {
|
||||
column-count: 2;
|
||||
|
||||
.info-item {
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
width: 84px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
}
|
||||
span {
|
||||
margin-left: 24px;
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: @border-radius-50;
|
||||
background: @success-color-5;
|
||||
}
|
||||
.inProgress {
|
||||
color: @success-color-5;
|
||||
}
|
||||
.pdf {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
84
src/pages/detail/base/index.vue
Normal file
84
src/pages/detail/base/index.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div>
|
||||
<t-page-header> 合同基础详情 </t-page-header>
|
||||
<div :class="prefix + '-panel'">
|
||||
<div class="base-info">
|
||||
<t-row
|
||||
:class="prefix + '-operater-row'"
|
||||
justify="space-between"
|
||||
>
|
||||
<p :class="prefix + '-operater-title'">
|
||||
基本信息
|
||||
</p>
|
||||
</t-row>
|
||||
<div class="info-block">
|
||||
<div
|
||||
v-for="(item, index) in baseInfoData"
|
||||
:key="index"
|
||||
class="info-item"
|
||||
>
|
||||
<h1>{{ item.name }}</h1>
|
||||
<span
|
||||
:class="{
|
||||
['inProgress']: item.type && item.type.value === 'inProgress',
|
||||
['pdf']: item.type && item.type.value === 'pdf',
|
||||
}"
|
||||
>
|
||||
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<t-divider style="margin-top: 12px" />
|
||||
<div class="update-history">
|
||||
<t-row
|
||||
:class="prefix + '-operater-row'"
|
||||
justify="space-between"
|
||||
>
|
||||
<p :class="prefix + '-operater-title'">
|
||||
变更记录
|
||||
</p>
|
||||
</t-row>
|
||||
<t-steps
|
||||
direction="vertical"
|
||||
theme="dot"
|
||||
:current="1"
|
||||
>
|
||||
<t-step-item
|
||||
title="上传合同附件"
|
||||
content="这里是提示文字"
|
||||
/>
|
||||
<t-step-item
|
||||
title="修改合同金额"
|
||||
content="这里是提示文字"
|
||||
/>
|
||||
<t-step-item
|
||||
title="新建合同"
|
||||
content="2020-12-01 15:00:00 管理员-李川操作"
|
||||
/>
|
||||
</t-steps>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { prefix } from '@/config/global';
|
||||
import model from './index';
|
||||
import './index.less';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListBase',
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
baseInfoData: model.getBaseInfoData(),
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
64
src/pages/detail/secondary/index.less
Normal file
64
src/pages/detail/secondary/index.less
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@import '@/style/variables.less';
|
||||
|
||||
.secondary-notification {
|
||||
background-color: white;
|
||||
border-radius: @border-radius;
|
||||
margin-top: 16px;
|
||||
|
||||
.t-tabs__content {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.secondary-msg-list {
|
||||
min-height: 443px;
|
||||
max-height: calc(100vh - 400px);
|
||||
|
||||
.t-list-item {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: @bg-color-container-hover;
|
||||
.msg-date {
|
||||
display: none;
|
||||
}
|
||||
.msg-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 14px;
|
||||
color:@text-color-placeholder;
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
font-family: PingFangSC-Regular;
|
||||
}
|
||||
}
|
||||
.unread {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
.msg-action {
|
||||
display: none;
|
||||
|
||||
.set-read-icon {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
&__empty-list {
|
||||
min-height: 443px;
|
||||
padding-top: 170px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
276
src/pages/detail/secondary/index.vue
Normal file
276
src/pages/detail/secondary/index.vue
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<t-page-header> 通知中心 </t-page-header>
|
||||
<div class="secondary-notification">
|
||||
<t-tabs v-model="value">
|
||||
<t-tab-panel
|
||||
value="frist"
|
||||
label="全部通知"
|
||||
>
|
||||
<t-list
|
||||
v-if="msgData.length > 0"
|
||||
class="secondary-msg-list"
|
||||
:split="true"
|
||||
>
|
||||
<t-list-item
|
||||
v-for="(item, index) in msgData"
|
||||
:key="index"
|
||||
>
|
||||
<p
|
||||
:class="['content', { unread: item.status }]"
|
||||
@click="setReadStatus(item)"
|
||||
>
|
||||
{{ item.content }}<span> - {{ item.type }}</span>
|
||||
</p>
|
||||
<template #action>
|
||||
<p class="msg-date">
|
||||
{{ item.date }}
|
||||
</p>
|
||||
<div class="msg-action">
|
||||
<t-tooltip
|
||||
class="set-read-icon"
|
||||
:overlay-style="{ margin: '6px' }"
|
||||
:content="item.status ? '设为已读' : '设为未读'"
|
||||
>
|
||||
<span
|
||||
class="msg-action-icon"
|
||||
@click="setReadStatus(item)"
|
||||
>
|
||||
<t-icon
|
||||
v-if="!!item.status"
|
||||
name="queue"
|
||||
size="16px"
|
||||
/>
|
||||
<svg
|
||||
v-else
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.63795 11.4471H8.5V12.4471H5L2.49205 14.537C2.29666 14.6999 2 14.5609 2 14.3066V4.94708C2 4.3948 2.44772 3.94708 3 3.94708H13C13.5523 3.94708 14 4.3948 14 4.94708V10H13V4.94708H3V12.812L4.63795 11.4471Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M11.7786 14.9286L15.3536 11.3535L14.6464 10.6465L11.7786 13.5144L10.1318 11.8677L9.42471 12.5748L11.7786 14.9286Z"
|
||||
fill="black"
|
||||
/></svg></span>
|
||||
</t-tooltip>
|
||||
<t-tooltip
|
||||
content="删除通知"
|
||||
:overlay-style="{ margin: '6px' }"
|
||||
>
|
||||
<span @click="handleClickDeleteBtn(item)"><t-icon
|
||||
name="delete"
|
||||
size="16px"
|
||||
/></span>
|
||||
</t-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</t-list-item>
|
||||
</t-list>
|
||||
<div
|
||||
v-else
|
||||
class="secondary-msg-list__empty-list"
|
||||
>
|
||||
<img
|
||||
src="https://tdesign.gtimg.com/pro-template/personal/nothing.png"
|
||||
alt="空"
|
||||
>
|
||||
<p>暂无通知</p>
|
||||
</div>
|
||||
</t-tab-panel>
|
||||
<t-tab-panel
|
||||
value="second"
|
||||
label="未读通知"
|
||||
>
|
||||
<t-list
|
||||
v-if="unreadMsg.length > 0"
|
||||
class="secondary-msg-list"
|
||||
:split="true"
|
||||
>
|
||||
<t-list-item
|
||||
v-for="(item, index) in unreadMsg"
|
||||
:key="index"
|
||||
>
|
||||
<p
|
||||
:class="['content', { unread: item.status }]"
|
||||
@click="setReadStatus(item)"
|
||||
>
|
||||
{{ item.content }}<span> - {{ item.type }}</span>
|
||||
</p>
|
||||
<template #action>
|
||||
<p class="msg-date">
|
||||
{{ item.date }}
|
||||
</p>
|
||||
<div class="msg-action">
|
||||
<t-tooltip
|
||||
class="set-read-icon"
|
||||
:overlay-style="{ margin: '6px' }"
|
||||
:content="item.status ? '设为已读' : '设为未读'"
|
||||
>
|
||||
<span @click="setReadStatus(item)">
|
||||
<t-icon
|
||||
name="queue"
|
||||
size="16px"
|
||||
/>
|
||||
</span>
|
||||
</t-tooltip>
|
||||
<t-tooltip
|
||||
content="删除通知"
|
||||
:overlay-style="{ margin: '6px' }"
|
||||
>
|
||||
<span @click="handleClickDeleteBtn(item)"><t-icon
|
||||
name="delete"
|
||||
size="16px"
|
||||
/></span>
|
||||
</t-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</t-list-item>
|
||||
</t-list>
|
||||
<div
|
||||
v-else
|
||||
class="secondary-msg-list__empty-list"
|
||||
>
|
||||
<img
|
||||
src="https://tdesign.gtimg.com/pro-template/personal/nothing.png"
|
||||
alt="空"
|
||||
>
|
||||
<p>暂无未读通知</p>
|
||||
</div>
|
||||
</t-tab-panel>
|
||||
<t-tab-panel
|
||||
value="third"
|
||||
label="已读通知"
|
||||
>
|
||||
<t-list
|
||||
v-if="readMsg.length > 0"
|
||||
class="secondary-msg-list"
|
||||
:split="true"
|
||||
>
|
||||
<t-list-item
|
||||
v-for="(item, index) in readMsg"
|
||||
:key="index"
|
||||
>
|
||||
<p :class="['content', { unread: item.status }]">
|
||||
{{ item.content }}<span> - {{ item.type }}</span>
|
||||
</p>
|
||||
<template #action>
|
||||
<p class="msg-date">
|
||||
{{ item.date }}
|
||||
</p>
|
||||
<div class="msg-action">
|
||||
<t-tooltip
|
||||
class="set-read-icon"
|
||||
:overlay-style="{ margin: '6px' }"
|
||||
:content="item.status ? '设为已读' : '设为未读'"
|
||||
>
|
||||
<span
|
||||
class="msg-action-icon"
|
||||
@click="setReadStatus(item)"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.63795 11.4471H8.5V12.4471H5L2.49205 14.537C2.29666 14.6999 2 14.5609 2 14.3066V4.94708C2 4.3948 2.44772 3.94708 3 3.94708H13C13.5523 3.94708 14 4.3948 14 4.94708V10H13V4.94708H3V12.812L4.63795 11.4471Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M11.7786 14.9286L15.3536 11.3535L14.6464 10.6465L11.7786 13.5144L10.1318 11.8677L9.42471 12.5748L11.7786 14.9286Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</t-tooltip>
|
||||
<t-tooltip
|
||||
content="删除通知"
|
||||
:overlay-style="{ margin: '6px' }"
|
||||
>
|
||||
<span @click="handleClickDeleteBtn(item)"><t-icon
|
||||
name="delete"
|
||||
size="16px"
|
||||
/></span>
|
||||
</t-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</t-list-item>
|
||||
</t-list>
|
||||
<div
|
||||
v-else
|
||||
class="secondary-msg-list__empty-list"
|
||||
>
|
||||
<img
|
||||
src="https://tdesign.gtimg.com/pro-template/personal/nothing.png"
|
||||
alt="空"
|
||||
>
|
||||
<p>暂无已读通知</p>
|
||||
</div>
|
||||
</t-tab-panel>
|
||||
</t-tabs>
|
||||
</div>
|
||||
<t-dialog
|
||||
v-model:visible="visible"
|
||||
header="删除通知"
|
||||
:body="`确认删除通知：${selectedItem && selectedItem.content}吗？`"
|
||||
:on-confirm="deleteMsg"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import { prefix } from '@/config/global';
|
||||
|
||||
// 导入样式
|
||||
import './index.less';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DetailSecondary',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
data: [],
|
||||
value: 'frist',
|
||||
visible: false,
|
||||
selectedItem: undefined,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState('notification', ['msgData']),
|
||||
...mapGetters('notification', ['unreadMsg', 'readMsg']),
|
||||
},
|
||||
methods: {
|
||||
handleClickDeleteBtn(item) {
|
||||
this.visible = true;
|
||||
this.selectedItem = item;
|
||||
},
|
||||
setReadStatus(item) {
|
||||
const changeMsg = this.msgData;
|
||||
changeMsg.forEach((e) => {
|
||||
if (e.id === item.id) {
|
||||
e.status = !e.status;
|
||||
}
|
||||
});
|
||||
this.$store.commit('notification/setMsgData', changeMsg);
|
||||
},
|
||||
deleteMsg() {
|
||||
const item = this.selectedItem;
|
||||
const changeMsg = this.msgData;
|
||||
changeMsg.forEach((e, index) => {
|
||||
if (e.id === item.id) {
|
||||
changeMsg.splice(index, 1);
|
||||
}
|
||||
});
|
||||
this.visible = false;
|
||||
this.$store.commit('notification/setMsgData', changeMsg);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
29
src/pages/form/base/index.less
Normal file
29
src/pages/form/base/index.less
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
@import '@/style/index';
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
}
|
||||
|
||||
.@{prefix} {
|
||||
&-panel {
|
||||
background-color: white;
|
||||
padding: @spacer-3;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.base-form {
|
||||
.t-form__label {
|
||||
min-width: 108px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-form {
|
||||
padding-right: 50px;
|
||||
padding-top: 30px;
|
||||
border-top: solid 1px #EEEEEE;
|
||||
}
|
||||
}
|
||||
.upload-tips {
|
||||
margin-left: 16px;
|
||||
font-size: 12px;
|
||||
color: @text-level-2-color;
|
||||
line-height: 20px;
|
||||
}
|
||||
62
src/pages/form/step/index.less
Normal file
62
src/pages/form/step/index.less
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
@import '@/style/index';
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
}
|
||||
|
||||
.@{prefix} {
|
||||
&-panel {
|
||||
background-color: white;
|
||||
|
||||
&.@{prefix}-step-panel {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&-step {
|
||||
padding: 14px 0 24px 0;
|
||||
}
|
||||
&-form {
|
||||
padding-right: 50px;
|
||||
padding-top: 30px;
|
||||
border-top: solid 1px #eeeeee;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-tips {
|
||||
padding: 24px 24px 0 24px;
|
||||
}
|
||||
|
||||
.step-top {
|
||||
padding: 24px;
|
||||
border-bottom: #eeeeee solid 1px;
|
||||
}
|
||||
|
||||
.step-form {
|
||||
padding: 24px;
|
||||
|
||||
.t-form__label {
|
||||
min-width: 108px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-4 {
|
||||
height: 365px;
|
||||
margin-top: 72px;
|
||||
text-align: center;
|
||||
|
||||
.t-icon {
|
||||
margin: 6px;
|
||||
}
|
||||
.text {
|
||||
margin: 16px 0 8px 0;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: @text-level-1-color;
|
||||
line-height: 30px;
|
||||
}
|
||||
.tips {
|
||||
margin-bottom: 24px;
|
||||
font-size: 14px;
|
||||
color: @text-level-2-color;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
420
src/pages/form/step/index.vue
Normal file
420
src/pages/form/step/index.vue
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
<template>
|
||||
<t-page-header>分步表单页</t-page-header>
|
||||
<div :class="`${prefix}-panel ${prefix}-step-panel`">
|
||||
<!-- 简单步骤条 -->
|
||||
<div :class="`${prefix}-step step-top`">
|
||||
<t-steps
|
||||
:current="activeForm"
|
||||
status="process"
|
||||
>
|
||||
<t-step-item title="提交开票申请" />
|
||||
<t-step-item title="填写发票信息" />
|
||||
<t-step-item title="确认邮寄地址" />
|
||||
<t-step-item title="完成" />
|
||||
</t-steps>
|
||||
</div>
|
||||
|
||||
<!-- 分步表单1 -->
|
||||
<div
|
||||
v-show="activeForm === 0"
|
||||
class="rule-tips"
|
||||
>
|
||||
<t-alert
|
||||
theme="info"
|
||||
title="发票开具规则："
|
||||
:close="true"
|
||||
>
|
||||
<template #message>
|
||||
<p>
|
||||
1、申请开票后，电子发票在1～3个工作日内开具；增值税专用发票（纸质）如资质审核通过，将在电子发票开具后10个工作日内为您寄出；
|
||||
</p>
|
||||
<p>2、开票金额为您实际支付金额；</p>
|
||||
<p>3、如有疑问请直接联系：13300001111。</p>
|
||||
</template>
|
||||
</t-alert>
|
||||
</div>
|
||||
<t-form
|
||||
v-show="activeForm === 0"
|
||||
class="step-form"
|
||||
:data="formData1"
|
||||
:rules="rules"
|
||||
label-align="left"
|
||||
@submit="onSubmit1"
|
||||
>
|
||||
<t-form-item
|
||||
label="合同名称"
|
||||
name="name"
|
||||
>
|
||||
<t-select
|
||||
v-model="formData1.name"
|
||||
:style="{ width: '480px' }"
|
||||
class="demo-select-base"
|
||||
clearable
|
||||
>
|
||||
<t-option
|
||||
v-for="(item, index) in nameOptions"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</t-option>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="发票类型"
|
||||
name="type"
|
||||
>
|
||||
<t-select
|
||||
v-model="formData1.type"
|
||||
:style="{ width: '480px' }"
|
||||
class="demo-select-base"
|
||||
clearable
|
||||
>
|
||||
<t-option
|
||||
v-for="(item, index) in typeOptions"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</t-option>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
<t-form-item label="开票金额">
|
||||
{{ amount }} 元
|
||||
</t-form-item>
|
||||
<t-form-item>
|
||||
<t-button
|
||||
theme="primary"
|
||||
type="submit"
|
||||
>
|
||||
提交申请
|
||||
</t-button>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
|
||||
<!-- 分步表单2 -->
|
||||
<t-form
|
||||
v-show="activeForm === 1"
|
||||
class="step-form"
|
||||
:data="formData2"
|
||||
:rules="rules"
|
||||
label-align="left"
|
||||
@reset="onReset2"
|
||||
@submit="onSubmit2"
|
||||
>
|
||||
<t-form-item
|
||||
label="发票抬头"
|
||||
name="title"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData2.title"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入发票抬头"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="纳税人识别号"
|
||||
name="taxNum"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData2.taxNum"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入纳税人识别号"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="单位地址"
|
||||
name="address"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData2.address"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入单位地址"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="开户行"
|
||||
name="bank"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData2.bank"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入开户行"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="银行账号"
|
||||
name="bankAccount"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData2.bankAccount"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入银行账号"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="通知邮箱"
|
||||
name="email"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData2.email"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入通知邮箱"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="通知手机"
|
||||
name="tel"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData2.tel"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入通知手机"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item>
|
||||
<t-button
|
||||
type="reset"
|
||||
theme="default"
|
||||
variant="base"
|
||||
>
|
||||
上一步
|
||||
</t-button>
|
||||
<t-button
|
||||
theme="primary"
|
||||
type="submit"
|
||||
>
|
||||
下一步
|
||||
</t-button>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
|
||||
<!-- 分步表单3 -->
|
||||
<t-form
|
||||
v-show="activeForm === 2"
|
||||
class="step-form"
|
||||
:data="formData3"
|
||||
:rules="rules"
|
||||
label-align="left"
|
||||
@reset="onReset3"
|
||||
@submit="onSubmit3"
|
||||
>
|
||||
<t-form-item
|
||||
label="收货人"
|
||||
name="consignee"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData3.consignee"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入收货人"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="手机号码"
|
||||
name="mobileNum"
|
||||
>
|
||||
<t-input
|
||||
v-model="formData3.mobileNum"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入手机号码"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="收货地址"
|
||||
name="deliveryAddress"
|
||||
>
|
||||
<t-select
|
||||
v-model="formData3.deliveryAddress"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请选择收货地址"
|
||||
class="demo-select-base"
|
||||
clearable
|
||||
>
|
||||
<t-option
|
||||
v-for="(item, index) in addressOptions"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</t-option>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="详细地址"
|
||||
name="fullAddress"
|
||||
>
|
||||
<t-textarea
|
||||
v-model="formData3.fullAddress"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入详细地址"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item>
|
||||
<t-button
|
||||
type="reset"
|
||||
theme="default"
|
||||
variant="base"
|
||||
>
|
||||
上一步
|
||||
</t-button>
|
||||
<t-button
|
||||
theme="primary"
|
||||
type="submit"
|
||||
>
|
||||
下一步
|
||||
</t-button>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
|
||||
<!-- 分步表单4 -->
|
||||
<div
|
||||
v-show="activeForm === 6"
|
||||
class="step-form-4"
|
||||
>
|
||||
<t-icon
|
||||
name="check-circle-filled"
|
||||
style="color: green"
|
||||
size="52px"
|
||||
/>
|
||||
<p class="text">
|
||||
完成开票申请
|
||||
</p>
|
||||
<p class="tips">
|
||||
预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待
|
||||
</p>
|
||||
<div class="button-group">
|
||||
<t-button
|
||||
theme="primary"
|
||||
@click="onReset4"
|
||||
>
|
||||
再次申请
|
||||
</t-button>
|
||||
<t-button
|
||||
variant="base"
|
||||
theme="default"
|
||||
@click="onSubmit4"
|
||||
>
|
||||
查看进度
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import { prefix } from '@/config/global';
|
||||
// 导入样式
|
||||
import './index.less';
|
||||
|
||||
const INITIAL_DATA1 = {
|
||||
name: '',
|
||||
type: '',
|
||||
};
|
||||
const INITIAL_DATA2 = {
|
||||
title: '',
|
||||
taxNum: '',
|
||||
address: '',
|
||||
bank: '',
|
||||
bankAccount: '',
|
||||
email: '',
|
||||
tel: '',
|
||||
};
|
||||
const INITIAL_DATA3 = {
|
||||
consignee: '',
|
||||
mobileNum: '',
|
||||
deliveryAddress: '',
|
||||
fullAddress: '',
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FormStep',
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
formData1: { ...INITIAL_DATA1 },
|
||||
formData2: { ...INITIAL_DATA2 },
|
||||
formData3: { ...INITIAL_DATA3 },
|
||||
nameOptions: [
|
||||
{ label: '合同A', value: '1' },
|
||||
{ label: '合同B', value: '2' },
|
||||
{ label: '合同C', value: '3' },
|
||||
],
|
||||
typeOptions: [
|
||||
{ label: '类型A', value: '1' },
|
||||
{ label: '类型B', value: '2' },
|
||||
{ label: '类型C', value: '3' },
|
||||
],
|
||||
addressOptions: [
|
||||
{ label: '广东省深圳市南山区', value: '1' },
|
||||
{ label: '北京市海淀区', value: '2' },
|
||||
{ label: '上海市徐汇区', value: '3' },
|
||||
{ label: '四川省成都市高新区', value: '4' },
|
||||
{ label: '广东省广州市天河区', value: '5' },
|
||||
{ label: '陕西省西安市高新区', value: '6' },
|
||||
],
|
||||
rules: {
|
||||
name: [{ required: true, message: '请选择合同名称', type: 'error' }],
|
||||
type: [{ required: true, message: '请选择发票类型', type: 'error' }],
|
||||
title: [{ required: true, message: '请输入发票抬头', type: 'error' }],
|
||||
taxNum: [{ required: true, message: '请输入纳税人识别号', type: 'error' }],
|
||||
consignee: [{ required: true, message: '请输入收货人', type: 'error' }],
|
||||
mobileNum: [{ required: true, message: '请输入手机号码', type: 'error' }],
|
||||
deliveryAddress: [{ required: true, message: '请选择收货地址', type: 'error' }],
|
||||
fullAddress: [{ required: true, message: '请输入详细地址', type: 'error' }],
|
||||
},
|
||||
activeForm: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
amount() {
|
||||
if (this.formData1.name === '1') {
|
||||
return '565421';
|
||||
}
|
||||
if (this.formData1.name === '2') {
|
||||
return '278821';
|
||||
}
|
||||
if (this.formData1.name === '3') {
|
||||
return '109824';
|
||||
}
|
||||
return '--';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSubmit1({ validateResult }) {
|
||||
if (validateResult === true) {
|
||||
this.activeForm = 1;
|
||||
}
|
||||
},
|
||||
onSubmit2({ validateResult }) {
|
||||
if (validateResult === true) {
|
||||
this.activeForm = 2;
|
||||
}
|
||||
},
|
||||
onReset2() {
|
||||
this.activeForm = 0;
|
||||
},
|
||||
onSubmit3({ validateResult }) {
|
||||
if (validateResult === true) {
|
||||
this.activeForm = 6;
|
||||
}
|
||||
},
|
||||
onReset3() {
|
||||
this.activeForm = 1;
|
||||
},
|
||||
onSubmit4() {
|
||||
this.$router.replace({ path: '/detail/advanced' });
|
||||
},
|
||||
onReset4() {
|
||||
this.activeForm = 0;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
19
src/pages/list/select/index.vue
Normal file
19
src/pages/list/select/index.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<t-page-header> 合同档案 </t-page-header>
|
||||
<list-common-table />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import ListCommonTable from '@/components/list-common/list-table.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListBase',
|
||||
components: {
|
||||
ListCommonTable,
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
247
src/pages/login/index.less
Normal file
247
src/pages/login/index.less
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
@import '@/style/index';
|
||||
.login-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.login-container {
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
left: 12%;
|
||||
min-height: 500px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.title-container {
|
||||
.icon {
|
||||
width: 290px;
|
||||
height: 60px;
|
||||
}
|
||||
.side-title {
|
||||
margin-top: 24.9px;
|
||||
.tip1, .tip2 {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
}
|
||||
.tip2 {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step1 {
|
||||
.input-container {
|
||||
margin-top: 72px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
.check-container {
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-step3 {
|
||||
.input-container {
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
.input-container {
|
||||
.tip-container {
|
||||
margin-bottom: 16px;
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
}
|
||||
.tip2 {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
height: 20px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step1 {
|
||||
.bottom-container {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
.login-step3 {
|
||||
.bottom-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.input-container .tip-container {
|
||||
width: 192px;
|
||||
}
|
||||
}
|
||||
.login-step2 {
|
||||
.input-container {
|
||||
margin-top: 108.9px;
|
||||
.tip1 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
color: @gray-color-3;
|
||||
margin: 0 14px;
|
||||
}
|
||||
|
||||
}
|
||||
.rex-check {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
line-height: 22px;
|
||||
}
|
||||
.format-correct {
|
||||
color: @text-color-primary;
|
||||
|
||||
.t-icon {
|
||||
color: @success-color-5;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step4 {
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.verification-code {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.check-container {
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step5 {
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.t-select-popup-reference {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.check-container {
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step6 {
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.verification-code {
|
||||
margin: 24px 0;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.check-container {
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
src/pages/result/403/index.vue
Normal file
17
src/pages/result/403/index.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<result
|
||||
page-header="403"
|
||||
tip="抱歉，您无权限访问此页面，企业微信联系创建者xiaolaoshi"
|
||||
bg-url="https://tdesign.gtimg.com/pro-template/result-page/403.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Result403',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
17
src/pages/result/404/index.vue
Normal file
17
src/pages/result/404/index.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<result
|
||||
page-header="404"
|
||||
tip="抱歉，您访问的页面不存在"
|
||||
bg-url="https://tdesign.gtimg.com/pro-template/result-page/404.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Result404',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
17
src/pages/result/500/index.vue
Normal file
17
src/pages/result/500/index.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<result
|
||||
page-header="500"
|
||||
tip="抱歉，服务器出错啦"
|
||||
bg-url="https://tdesign.gtimg.com/pro-template/result-page/500.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Result500',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
17
src/pages/result/browser-incompatible/index.vue
Normal file
17
src/pages/result/browser-incompatible/index.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<result
|
||||
page-header="浏览器不兼容"
|
||||
tip="抱歉，您正在使用的浏览器版本过低，无法打开当前网页"
|
||||
bg-url="https://tdesign.gtimg.com/pro-template/result-page/browser-incompatible.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultBrowserIncompatible',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
62
src/pages/result/fail/index.vue
Normal file
62
src/pages/result/fail/index.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<card>
|
||||
<div class="result-success">
|
||||
<t-icon
|
||||
class="result-success-icon"
|
||||
name="close-circle-filled"
|
||||
/>
|
||||
<div class="result-success-title">
|
||||
项目创建失败
|
||||
</div>
|
||||
<div class="result-success-describe">
|
||||
企业微信联系检查创建者权限，或返回修改
|
||||
</div>
|
||||
<div>
|
||||
<t-button @click="() => $router.push('/form/base')">
|
||||
返回修改
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import Card from '@/components/card/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultSuccess',
|
||||
components: { Card },
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
|
||||
.result-success {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 75vh;
|
||||
&-icon {
|
||||
font-size: 64px;
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 16px;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&-describe {
|
||||
margin: 8px 0 32px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
src/pages/result/network-error/index.vue
Normal file
17
src/pages/result/network-error/index.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<result
|
||||
page-header="网络异常"
|
||||
tip="网络异常，请稍后再试"
|
||||
bg-url="https://tdesign.gtimg.com/pro-template/result-page/network-error.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultNetworkError',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
68
src/pages/result/success/index.vue
Normal file
68
src/pages/result/success/index.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<card>
|
||||
<div class="result-success">
|
||||
<t-icon
|
||||
class="result-success-icon"
|
||||
name="check-circle-filled"
|
||||
/>
|
||||
<div class="result-success-title">
|
||||
项目已创建成功
|
||||
</div>
|
||||
<div class="result-success-describe">
|
||||
可以联系负责人分发应用
|
||||
</div>
|
||||
<div>
|
||||
<t-button
|
||||
theme="default"
|
||||
@click="() => $router.push('/detail/advanced')"
|
||||
>
|
||||
查看进度
|
||||
</t-button>
|
||||
<t-button @click="() => $router.push('/form/base')">
|
||||
再次创建
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import Card from '@/components/card/index.vue';
|
||||
export default defineComponent({
|
||||
name: 'ResultSuccess',
|
||||
components: { Card },
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
|
||||
.result-success {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 75vh;
|
||||
&-icon {
|
||||
font-size: 64px;
|
||||
color: @success-color;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 16px;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&-describe {
|
||||
margin: 8px 0 32px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
src/pages/user/index.less
Normal file
298
src/pages/user/index.less
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
@import '@/style/index';
|
||||
.user-panel {
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
.user-right {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.user-right {
|
||||
min-width: 33.33%;
|
||||
}
|
||||
}
|
||||
.user-right {
|
||||
transition: width .3s linear;
|
||||
&-greeting {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
&-trend {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
&-todo {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
}
|
||||
.head-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.title {
|
||||
line-height: 24px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 16px;
|
||||
color: @text-level-1-color;
|
||||
text-align: left;
|
||||
}
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 22px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-level-1-color;
|
||||
cursor: pointer;
|
||||
|
||||
.t-icon {
|
||||
vertical-align: bottom;
|
||||
font-size: 20px;
|
||||
}
|
||||
&:hover {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-left {
|
||||
.user-top {
|
||||
padding: 24px;
|
||||
margin: 0 16px 16px 0;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.account {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
color: @text-level-1-color;
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 122px;
|
||||
height: 122px;
|
||||
border-radius: @border-radius-50;
|
||||
background: #EBEDF1;
|
||||
margin-top: 16px;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.name {
|
||||
line-height: 37px;
|
||||
font-family: PingFangSC-Semibold;
|
||||
font-size: 26px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.position {
|
||||
line-height: 24px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.user-info {
|
||||
line-height: 24px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-level-1-color;
|
||||
.hiredate, .del, .mail {
|
||||
display: flex;
|
||||
}
|
||||
.t-icon {
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.del {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-bottom {
|
||||
padding: 24px 24px 0 24px;
|
||||
margin: 0 16px 16px 0;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.t-list-item {
|
||||
height: 64px;
|
||||
min-width: 230px;
|
||||
margin: 8px 0 16px 0;
|
||||
background: #F3F3F3;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.t-list-item__meta-avatar {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin: auto;
|
||||
}
|
||||
.t-list-item__meta-content {
|
||||
line-height: 22px;
|
||||
margin-left: 10px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.t-list-item__meta-title {
|
||||
display: inline-block;
|
||||
margin: 0 7px 0 0;
|
||||
}
|
||||
.t-list-item__meta-description {
|
||||
display: inline-block;
|
||||
color: @text-color-secondary;
|
||||
font-size: 12px;
|
||||
}
|
||||
.t-list-item__action {
|
||||
li {
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.t-icon {
|
||||
color: @text-level-1-color;
|
||||
|
||||
&:hover {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-right {
|
||||
.user-top {
|
||||
.user-right-greeting {
|
||||
padding: 24px;
|
||||
line-height: 28px;
|
||||
font-family: PingFangSC-Semibold;
|
||||
font-size: 20px;
|
||||
color: @text-level-1-color;
|
||||
text-align: left;
|
||||
.regular {
|
||||
vertical-align: bottom;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.user-right-trend {
|
||||
padding: 24px;
|
||||
|
||||
.t-list-item {
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
line-height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-level-1-color;
|
||||
|
||||
.t-icon {
|
||||
margin-right: 8px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
color: @text-level-3-color;
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.t-list-item__action {
|
||||
line-height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 12px;
|
||||
color: @text-level-2-color;
|
||||
}
|
||||
&:hover {
|
||||
.text {
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-list-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
.user-right-todo {
|
||||
padding: 24px;
|
||||
|
||||
.empty-list {
|
||||
margin-top: 18px;
|
||||
line-height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-level-3-color;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin-bottom: 2px;
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-bottom {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.contract {
|
||||
width: 340px;
|
||||
height: 88px;
|
||||
border-radius: @border-radius;
|
||||
margin: 8px 0;
|
||||
cursor: pointer;
|
||||
|
||||
&-type {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 13px 16px;
|
||||
|
||||
img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 24px;
|
||||
margin: 20px 0 6px 0;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 16px;
|
||||
color: @text-level-1-color;
|
||||
}
|
||||
&-date {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 22px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-level-3-color;
|
||||
}
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
}
|
||||
.contract:last-child,
|
||||
.contract:nth-last-child(2) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-bottom .user-right{
|
||||
height: 447px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
}
|
||||
47
src/router/index.ts
Normal file
47
src/router/index.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
import routeConfig from '@/config/routes';
|
||||
|
||||
const layoutModules = import.meta.glob('../layouts/*');
|
||||
const pagesModules = import.meta.glob('../pages/**/*.vue');
|
||||
const fristPagesModules = import.meta.glob('../pages/*.vue');
|
||||
|
||||
const modules = Object.assign({}, layoutModules, fristPagesModules, pagesModules);
|
||||
|
||||
const getMenuRoutes = (list) => {
|
||||
if (!list) {
|
||||
return [];
|
||||
}
|
||||
return list.map((item) => {
|
||||
const { path = '', component, meta = { title: item.title }, redirect = '' } = item;
|
||||
return {
|
||||
path,
|
||||
component: modules[component],
|
||||
children: getMenuRoutes(item.children),
|
||||
meta,
|
||||
redirect,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
...getMenuRoutes(routeConfig),
|
||||
{
|
||||
path: '',
|
||||
redirect: '/dashboard/base',
|
||||
component: () => import('@/pages/dashboard/base/index.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(''),
|
||||
routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return {
|
||||
el: '#app',
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
}
|
||||
},
|
||||
})
|
||||
export default router
|
||||
|
||||
6
src/shims-vue.d.ts
vendored
Normal file
6
src/shims-vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
20
src/store/index.ts
Normal file
20
src/store/index.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { InjectionKey } from 'vue'
|
||||
import { createStore, Store } from 'vuex'
|
||||
import user from './modules/user';
|
||||
import notification from './modules/notification';
|
||||
import setting from './modules/setting';
|
||||
export interface State {
|
||||
count: number
|
||||
}
|
||||
|
||||
export const key: InjectionKey<Store<State>> = Symbol()
|
||||
|
||||
export const store = createStore<State>({
|
||||
modules: {
|
||||
user,
|
||||
setting,
|
||||
notification,
|
||||
},
|
||||
})
|
||||
|
||||
export default store;
|
||||
68
src/store/modules/notification.ts
Normal file
68
src/store/modules/notification.ts
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
// 定义的state初始值
|
||||
const state = {
|
||||
msgData: [
|
||||
{
|
||||
id: '123',
|
||||
content: '腾讯大厦一楼改造施工项目 已通过审核！',
|
||||
type: '合同动态',
|
||||
status: true,
|
||||
date: '2021-01-01 08:00',
|
||||
},
|
||||
{
|
||||
id: '124',
|
||||
content: '三季度生产原材料采购项目 开票成功！',
|
||||
type: '票务动态',
|
||||
status: true,
|
||||
date: '2021-01-01 08:00',
|
||||
},
|
||||
{
|
||||
id: '125',
|
||||
content: '2021-01-01 10:00的【国家电网线下签约】会议即将开始，请提前10分钟前往 会议室1 进行签到！',
|
||||
type: '会议通知',
|
||||
status: true,
|
||||
date: '2021-01-01 08:00',
|
||||
},
|
||||
{
|
||||
id: '126',
|
||||
content: '一季度生产原材料采购项目 开票成功！',
|
||||
type: '票务动态',
|
||||
status: true,
|
||||
date: '2021-01-01 08:00',
|
||||
},
|
||||
{
|
||||
id: '127',
|
||||
content: '二季度生产原材料采购项目 开票成功！',
|
||||
type: '票务动态',
|
||||
status: true,
|
||||
date: '2021-01-01 08:00',
|
||||
},
|
||||
{
|
||||
id: '128',
|
||||
content: '三季度生产原材料采购项目 开票成功！',
|
||||
type: '票务动态',
|
||||
status: true,
|
||||
date: '2021-01-01 08:00',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
setMsgData(state, data) {
|
||||
state.msgData = data;
|
||||
},
|
||||
};
|
||||
|
||||
const getters = {
|
||||
unreadMsg: (state) => state.msgData.filter((item) => item.status),
|
||||
readMsg: (state) => state.msgData.filter((item) => !item.status),
|
||||
};
|
||||
|
||||
const actions = {};
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions,
|
||||
getters,
|
||||
};
|
||||
6
src/style/font-family.less
Normal file
6
src/style/font-family.less
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@font-face {
|
||||
font-family: "TencentSansW7";
|
||||
src: url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAusAA4AAAAAEJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAALkAAAABwAAAAchqPqzUdERUYAAAtwAAAAHgAAAB4AKQAbT1MvMgAAAbgAAABZAAAAYGmceoNjbWFwAAACYAAAAJcAAAHsPmfPZmdhc3AAAAtkAAAADAAAAAwACAAbZ2x5ZgAAAywAAAW8AAAG/Ivn/ztoZWFkAAABRAAAADYAAAA2E+AL5GhoZWEAAAF8AAAAIAAAACQIawJ9aG10eAAAAhQAAABMAAAATCG/Auxsb2NhAAADAAAAACwAAAAsDjIQIm1heHAAAAGcAAAAGgAAACAAfgBDbmFtZQAACOgAAAIUAAAEm0zGvtJwb3N0AAAK/AAAAGYAAAB/4wuGdnByZXAAAAL4AAAACAAAAAhwAgESAAEAAAABBR/xlpGAXw889QALA+gAAAAA2Ac3gwAAAADY+IxB//L/HAPPAwAAAAAIAAIAAAAAAAB42mNgZGBgWf7vFAMD84v/n/7vZD7PABRBAYIAwxQH7XjaY2BkYGAQZXBiYGEAAUYGGEiBUAAMEQDCAAB42mNgYepm2sPAysDA1MUUwcDA4A2hGeMYjBjNgKI8HMxMTCz8TCwLGJj2CzCAgRiI8PX382d0YGBMEmQ2+u/FcIJlOVA9CwMjSI6JlekwkFJgYAQAR1kL+QAAAAJYAHYAAAAAAU0AAAEEAAACUAAhAlYAFQJUACACKgAdAZUANgEUABUBYAAkA5wAFQINABsBqAA0AnAAKgJYACoD6ACF//YANP/yACN42mNgYGBmgGAZBkYGEHgG5DGC+SwMp4C0HIMAUISPQYEhiSGNIZMhl6GUoZJhgeIkfS6/N4GpQQuSBP//B+tMZEgByucwFGOT/7/4/6L/C/7P+z/z/7T/yffqLrJvVFu3Zm3xPJBtcgz4ADPFkIGRDWgMIcBAIWBhZWBj52Bg4GRg4OIGi/Dw8gFJfgYqA/JcCgA99Se8ALgB/4W4AAGNAAAAFAAUABQAFABSAIIAsgD6ASIBOAFYAYIBxgHwAhQCRAJaAogCygMYA3542k1Ua2xTZRj+LmtP23Vdz2lPz3pZb2dr1+u2nq2H0d3Z2OhI5mC4AZMBo0gM98E0oRn1AqgoIYDG4BAkakDkJ4iyiCZGAiISUH8YjIQfEhNUMCoJrme+bTfkx/nxveec53ne533eDxE0Nn0V/0V2I4oYhATWw1ZKrDiGx5Vfzp6NkXPZ7mH8ECGCPNNXiZWokANVIYRjFt7MUI83iuvrWnAzTWA5Xl/nC2G/SZJFr7oUq3mzBaf7F5S0Kt+F59i1aq0j0tbwJmXcwUtsz3HHhEtQaYr0RFUbL0sqB8yRClvcG2uwa7hKg4VLKdFjZmeEN5SwwM0Dd4DcRaXAXuAuxQYqekwSIxRoqRRrxjLevrK/RNCUhXt7lYevpQMf6StjW1sz/gCrIqqm+Z7krsjCmJU67/zexrvMykE+CniA7wb8oUf4EhW9vtm2qGQSvQY808+t9Ov/5ih0zlhfyytfbGodd/ht2rJiH7k7dTtP0NQTYpUo3qDzSnsSVpc5j18O+DzRIzeqyel34nwDOISZHGoCM6I3SvKMRJppKM8pxeIy3tbU4S4y6Oc231Sp3OFLgXMV7dV2xq8L9K9IUZvY5XAZi4wfms2U6K21PoHvnVfvchitXEorhH2O4K253RUTnIYt0Xv4ITanB6M4zPwm9GuBQ4GIEaloEmVJzvXM4JeqXaxWfYg7tCi9qIddqNZZg53yKEv2lLgkEWaDr6fERHfEnEL5/mA+uJzcLmTIJEsMNUl0t5AR7o+kR8jqTCa7nsjZS3nuCvg2DtwcpC3ftQzfgg1ODMRfBjt8eiP8ZLAE7HNDsRJPUKhYTmqy13osvJGm4H/gomsgh8Ksk2oGpM+kAHqAh0wmuitpSWO6SWer2NOX7vu8D2SouFCACSSVk3hgjmBllRp8Takhck6THTT9DZjVoMkPprfgmSE8igHzKNOJ//MX4X4rN6m0VF022lan02g4R11DNngDahqoPQe1YoZ31SRiKWN5fammqNgddMiRcNheAoXIbKGlKsoXo7w3daDjFDmNbOAiM+uJOONSbjoSIzEPI1owpyO0oL6twlAcSbI9zrTzKIePTdeaeZamOHe4zJtA06kTJ3J+BSF7vdCbKZ/swsbGZzyHZvCN9BrlzmN+vUVU2UsFq/CAcjJnVV5bcNpB2gCnPI9jILDquZ1rwflleQzwqx1ri8PJzh+4K3GnUcPsg32pSdfAJmYA+dPm+a61rBj0N3Z5ktio3Gu1uAqZ3IVW0R2Ar4GDwIiyp97jJ5MXLuzbn71IGvYT1fXrR545kvdp+p/pNB0nvyI7QiqR+A2UEZupLPmjOK/KIlg4On741U6xf3hj49Ha0e2bov3tVFd6oOx2uVvb9dlLeOTjxt1797XUvDBx+snTOv1Sk/2y0g7YRTCDNP2WIqSHhLqQCHQGnEuYmpHhhvFYBNHnV8UsUPJLpjjwYZNA8ZC+yv7Uxu5QiG/vMWOfNzzq9uH7XqFoyz3byRWUv1ClnNowsoqi+CYp248fhN0TC94YXrSkYyRod03dWkYOmpdOfUAetGWTiE7/CRomQYML+VG0kHOG5AjjpjjE0kAYMc7JubMsqZnK3GvqMQmNOHcR4u9t5Woai31t3xXxYVrcaZQXt+5cOWZZV7ZXp94Io6u1C5Q+rZzY+pP62YEdZEmpx6QcUb4ZnMJ2nXbs2uWtb+P57w6sSoYytQYnl62juhVEnT1e2HURtF0EbQnUBsrAD9AADglwhfgLHkWxX2TiMqPOeyQzftinXHjhbVwuJVIdiOY9fvBRstDzyh9Ys6B6W2h0HnvO85DbvMsa2xJhNPgiPzBkaN4W/NF+0PaOd/ug7Yz+DNfVp3/v5+Jx8yRdT3F5dLMorLXik6PrnhhYfKAxM/hyb0Oanycm3+86bHMPC6JyZfB8YJnN8sngi4xqqdq3nN0//vzOTNXq5YsR+g8984WfeNq1Us1qFEEQ/npnk0X8IQGJIjnUSRLYLLt7MMlFCHvNKRvMuTPTmZ1kdib0zAY3ePMFfAAvigi5+Ry+gA8iiOLFr3tbTFZWcnGgu76qrvqqpqoAPMQ3KMy+A3wMWOGBehRwAy31LOAIayoPuEmfdwEv4Z76HPAy7quvAbfwqvEz4BXcjd4EvIpG9J5sqnmH2gfP7LDCOn4E3CD/04AjtNXzgJtYV68DXsJj9SngZTxRXwJu4XtDBbyCtehlwKtoRm8xQIlzTGGRIcUINQRXPH100cMOtgLape0QBgVif9dBjxlTkCPnSckj2MCQNudzGeQmrS5PB22ifcYmxII9RuWUf3JXXjOUhvKCt/PEoDyf2iwd1XIl/W5vZ4vXrhyaIjZFTRmPijIv06lsDEemuOTZlEHZact+nXRkL8/FR1diTWXshUnIefNnhtCULv0Rtvk4ox7qopKjbbcNhhVOWK1mXTgw6STX9t8kMh91k1RuRfJXJS98Zyp2rKSbcDIdzqfPB2OrrCyk1+n2F3HOMzrC+aFmPrcOg0i9XvukbhhCbPmaUBv73zqjrcTJf1gPV7PL6PK4yGN6L6oq882IvaWm/0w/ZfOt9014x3yZta1yS/V7fbJKNBcjzaraWJNIbXVixtqeSXly6x3TRSJjPZVjc50qKyQ2ttaUpxObVUkW15xRtXD9rg8Hs3FxRr8ATJnl93jaY2BiAIP/zQxGDNiAKBAzMjAxMjG4MLgyuDN4MHgy+DD4MwQwhDGEM0QwxDAyM7IwsjKyMbKzl+ZlGhgYGHIlFhXllxdlpmeUgISM3AwcQbSJq6sziDY1cjQA0WZGhoYAgBwU3AAAAAEAAgAIAAr//wAPAAEAAAAMAAAAFgAAAAIAAQADABQAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2Ac3gwAAAADY+IxB") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
167
src/style/index.less
Normal file
167
src/style/index.less
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
@import "./common.less";
|
||||
@import "./variables.less";
|
||||
@import "./rewrite.less";
|
||||
@import "./font-family.less";
|
||||
@import "./sidenav.less";
|
||||
|
||||
body {
|
||||
color: @text-level-2-color;
|
||||
font-family: -apple-system, BlinkMacSystemFont, @font-family;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 0;
|
||||
min-width: @screen-sm-min;
|
||||
}
|
||||
pre {
|
||||
font-family: @font-family;
|
||||
}
|
||||
|
||||
ul,
|
||||
dl,
|
||||
li,
|
||||
dd,
|
||||
dt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.@{prefix}-text-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.@{prefix}-text-tip {
|
||||
font-size: 12px;
|
||||
color: @text-level-3-color;
|
||||
}
|
||||
|
||||
.@{prefix}-pic {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.@{prefix}-main-link {
|
||||
color: @text-level-1-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @text-level-1-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @text-level-1-color;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix}-link {
|
||||
color: @primary-color;
|
||||
|
||||
text-decoration: none;
|
||||
margin-right: @spacer-3;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 布局元素调整
|
||||
.@{prefix}-wrapper {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.@{prefix}-sidenav-layout {
|
||||
|
||||
&-relative {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.@{prefix}-content-layout {
|
||||
margin: @spacer-3;
|
||||
}
|
||||
|
||||
.@{prefix}-footer-layout {
|
||||
padding: 0;
|
||||
margin-bottom: @spacer-2;
|
||||
}
|
||||
|
||||
.@{prefix}-footer {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.@{prefix}-icon-container {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.@{prefix}-flat-icon {
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
background: rgba(0,0,0,0.60);
|
||||
}
|
||||
|
||||
.@{prefix}-up-triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 6px 8px 6px;
|
||||
border-color: transparent transparent #00A870 transparent;
|
||||
}
|
||||
|
||||
.@{prefix}-down-triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 8px 6px 0 6px;
|
||||
border-color: #E34D59 transparent transparent transparent;
|
||||
}
|
||||
96
src/style/sidenav.less
Normal file
96
src/style/sidenav.less
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
@import './variables.less';
|
||||
@import './font-family.less';
|
||||
|
||||
.@{prefix} {
|
||||
&-sidebar-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-sidebar-compact {
|
||||
width: 64px;
|
||||
.@{prefix}-sidenav-logo-wrapper {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
&-sidebar-layout-side {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-sidenav{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
transition: all .3s;
|
||||
min-height: 100%;
|
||||
|
||||
&-mix {
|
||||
top: 64px;
|
||||
|
||||
&-fixed {
|
||||
top: 64px;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-no-fixed {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-no-logo {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
&-logo-t-logo {
|
||||
width: 32px;
|
||||
}
|
||||
&-logo-tdesign-logo {
|
||||
width: 112px;
|
||||
}
|
||||
&-logo-normal {
|
||||
font-family: TencentSansKoreanW7;
|
||||
color: @primary-color;
|
||||
font-size: @font-size-l;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-sidenav-placeholder {
|
||||
flex: 1 1 232px;
|
||||
min-width: 232px;
|
||||
transition: all .3s;
|
||||
|
||||
&-hidden {
|
||||
flex: 1 1 72px;
|
||||
min-width: 72px;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.t-menu--dark .t-menu__options:not(:empty) .t-icon-menu-unfold {
|
||||
color: rgba(255, 255, 255, 0.55)
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 64px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.optional-icon {
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
6
src/utils/date.ts
Normal file
6
src/utils/date.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// 获取常用时间
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
|
||||
export const LAST_7_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(7, 'day'), dayjs().subtract(1, 'day')];
|
||||
|
||||
export const LAST_30_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(30, 'day'), dayjs().subtract(1, 'day')];
|
||||
57
src/utils/request.js
Normal file
57
src/utils/request.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import axios from 'axios';
|
||||
import proxy from '../config/proxy';
|
||||
|
||||
const env = import.meta.env.MODE || 'development';
|
||||
|
||||
const host = env === 'mock' ? '/' : proxy[env].host; // 如果是mock模式 就不配置host 会走本地Mock拦截
|
||||
|
||||
const CODE = {
|
||||
LOGIN_TIMEOUT: 1000,
|
||||
REQUEST_SUCCESS: 0,
|
||||
REQUEST_FOBID: 1001,
|
||||
};
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: host,
|
||||
timeout: 1000,
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
instance.interceptors.request.use((config) => config);
|
||||
|
||||
instance.defaults.retry = 3;
|
||||
|
||||
instance.interceptors.response.use(
|
||||
(response) => {
|
||||
if (response.status === 200) {
|
||||
const { data } = response;
|
||||
if (data.code === CODE.REQUEST_SUCCESS) {
|
||||
return data;
|
||||
}
|
||||
return response;
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
const { config } = err;
|
||||
|
||||
if (!config || !config.retry) return Promise.reject(err);
|
||||
|
||||
config.retryCount = config.retryCount || 0;
|
||||
|
||||
if (config.retryCount >= config.retry) {
|
||||
return Promise.reject(err);
|
||||
}
|
||||
|
||||
config.retryCount += 1;
|
||||
|
||||
const backoff = new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, config.retryDelay || 1);
|
||||
});
|
||||
|
||||
return backoff.then(() => instance(config));
|
||||
},
|
||||
);
|
||||
|
||||
export default instance;
|
||||
19
tsconfig.json
Normal file
19
tsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"strict": false,
|
||||
"jsx": "preserve",
|
||||
"sourceMap": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["esnext", "dom"],
|
||||
"noEmit": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/config/proxy.ts", "src/pages/detail/base/index.js"]
|
||||
}
|
||||
27
vite.config.ts
Normal file
27
vite.config.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import { viteMockServe } from 'vite-plugin-mock';
|
||||
const HttpProxyAgent = require('http-proxy-agent');
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
const path = require('path');
|
||||
|
||||
import proxy from './src/config/proxy';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
resolve: {
|
||||
alias: {
|
||||
'~': path.resolve(__dirname, './'),
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx()
|
||||
],
|
||||
server: {
|
||||
port: 3002,
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user