feat/initialize (merge request !1)

Squash merge branch 'feat/initialize' into 'develop'

Co-author: pengYYYYY <pengyue970715@gmail.com>
This commit is contained in:
pengYYYYY 2021-08-26 11:25:15 +08:00
parent ae4bb6a439
commit 063ba99491
54 changed files with 4119 additions and 0 deletions

14
.editorconfig Normal file
View 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 Normal file
View File

@ -0,0 +1 @@
VITE_SOME_KEY=123

1
.env.development Normal file
View File

@ -0,0 +1 @@
VITE_SOME_KEY=456

30
.eslintignore Normal file
View 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
View File

@ -1 +1,31 @@
node_modules
.vscode
.DS_Store
.vscode
# build files
es/
lib/
dist/
typings/
_site
package
tmp*
temp*
coverage
test-report.html
.idea/
yarn.lock
*.zip
.history
script/test/cypress/screenshots
script/test/cypress/videos
script/test/cypress/results
script/test/cypress/support
results/
yarn-error.log
cypress
cypress.json
Dockerfile
robotMsg.json

39
.prettierrc.js Normal file
View 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
View File

@ -0,0 +1 @@
module.exports = { extends: ['@commitlint/config-conventional'] };

20
docker/nginx.conf Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

13
globals.d.ts vendored Normal file
View 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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

6
src/App.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<router-view />
</template>
<script>
</script>

View 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>

View 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>

View 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
View 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
View 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
View 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
View 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
View 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,
};

View 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;
}

View 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%'], // 设置内圆和外圆半径
},
};
}

View 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;
}
}

View 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;
}
}
}

View 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="预计13个工作日"
/>
<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>

View 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;
}
}
}

View 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>

View 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;
}
}

View 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>

View 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;
}

View 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;
}
}

View 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申请开票后电子发票在13个工作日内开具增值税专用发票纸质如资质审核通过将在电子发票开具后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">
预计13个工作日会将电子发票发至邮箱发票邮寄请耐心等待
</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>

View 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
View 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;
}
}
}
}

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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
View 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
View 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
View 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
View 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;

View 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,
};

View File

@ -0,0 +1,6 @@
@font-face {
font-family: "TencentSansW7";
src: url("data:application/font-woff;charset=utf-8;base64,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") format("woff");
font-weight: normal;
font-style: normal;
}

167
src/style/index.less Normal file
View 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
View 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
View 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
View 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
View 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
View 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,
},
})