mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-11-10 10:38:23 +08:00
feat/initialize (merge request !1)
Squash merge branch 'feat/initialize' into 'develop' Co-author: pengYYYYY <pengyue970715@gmail.com>
This commit is contained in:
pengYYYYY
parent
ae4bb6a439
commit
063ba99491
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
|
||||||
30
.gitignore
vendored
Normal file → Executable file
30
.gitignore
vendored
Normal file → Executable file
|
|
@ -1 +1,31 @@
|
||||||
node_modules
|
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