image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 19:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter into site

Browse Source
This commit is contained in:
Uyarn 2023-10-05 10:22:48 +03:00
commit 36ffbead00
108 changed files with 2302 additions and 904 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

@ -47,6 +47,7 @@
"@typescript-eslint/explicit-module-boundary-types": "off",
"vue/first-attribute-linebreak": 0,
"@typescript-eslint/no-unused-vars": [
"error",
{

38
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@tencent/tdesign-vue-next-starter",
"version": "0.8.0",
"version": "0.9.0",
"scripts": {
"dev:mock": "vite --open --mode mock",
"dev": "vite --open --mode development",
@ -24,38 +24,39 @@
"echarts": "5.1.2",
"lodash": "^4.17.21",
"nprogress": "^0.2.0",
"pinia": "^2.1.4",
"pinia-plugin-persistedstate": "^3.1.0",
"pinia": "^2.1.6",
"pinia-plugin-persistedstate": "^3.2.0",
"qrcode.vue": "^3.4.0",
"qs": "^6.11.2",
"tdesign-icons-vue-next": "^0.1.11",
"tdesign-icons-vue-next": "^0.2.0",
"tdesign-vue-next": "^1.4.1",
"tdesign-site-components": "^0.12.9",
"tdesign-theme-generator": "^1.0.5",
"tdesign-vue-next": "^1.3.10",
"tvision-color": "^1.6.0",
"vue": "^3.3.4",
"vue-clipboard3": "^2.0.0",
"vue-router": "~4.2.3"
"vue-i18n": "^9.4.1",
"vue-router": "~4.2.4"
},
"devDependencies": {
"@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^17.6.6",
"@commitlint/cli": "^17.6.7",
"@commitlint/config-conventional": "^17.6.7",
"@types/echarts": "^4.9.18",
"@types/lodash": "^4.14.195",
"@types/lodash": "^4.14.196",
"@types/nprogress": "^0.2.0",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.61.0",
"@typescript-eslint/parser": "^5.61.0",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/compiler-sfc": "^3.3.4",
"@vue/eslint-config-typescript": "^11.0.3",
"commitizen": "^4.3.0",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^8.44.0",
"eslint": "^8.45.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.5",
"eslint-config-prettier": "^8.9.0",
"eslint-plugin-import": "^2.28.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-vue": "^9.15.1",
@ -67,14 +68,14 @@
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"prettier": "^2.8.8",
"stylelint": "~15.10.0",
"stylelint": "~15.10.2",
"stylelint-config-standard": "^34.0.0",
"stylelint-order": "~6.0.3",
"typescript": "~5.1.6",
"vite": "^4.3.9",
"vite": "^4.4.7",
"vite-plugin-mock": "^3.0.0",
"vite-svg-loader": "^4.0.0",
"vue-tsc": "^1.8.4"
"vue-tsc": "^1.8.8"
},
"config": {
"commitizen": {
@ -89,5 +90,8 @@
"*.{html,vue,css,sass,less}": [
"npm run stylelint:fix"
]
},
"engines": {
"node": ">=16.0.0"
}
}

7
src/App.vue
View File

@ -1,11 +1,14 @@
<template>
<router-view :class="[mode]" />
<t-config-provider :global-config="getComponentsLocale">
<router-view :key="locale" :class="[mode]"
/></t-config-provider>
<setting-component />
</template>
<script setup lang="ts">
import { computed } from 'vue';
import SettingComponent from '@/layouts/setting/index.vue';
import { useLocale } from '@/locales/useLocale';
import { useSettingStore } from '@/store';
const store = useSettingStore();
@ -13,6 +16,8 @@ const store = useSettingStore();
const mode = computed(() => {
return store.displayMode;
});
const { getComponentsLocale, locale } = useLocale();
</script>
<style lang="less" scoped>
#nprogress .bar {

2
src/api/permission.ts
View File

@ -2,7 +2,7 @@ import type { MenuListResult } from '@/api/model/permissionModel';
import { request } from '@/utils/request';
const Api = {
MenuList: '/get-menu-list',
MenuList: '/get-menu-list-i18n',
};
export function getMenuList() {

14
src/assets/assets-slide-dashboard.svg
View File

@ -1,14 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H8.125C8.81538 2.5 9.375 3.05965 9.375 3.75V10C9.375 10.6903 8.81538 11.25 8.125 11.25H3.75C3.05962 11.25 2.5 10.6903 2.5 10V3.75ZM3.75 3.75H8.125V10H3.75V3.75Z"
fill="currentcolor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.625 10C10.625 9.30965 11.1846 8.75 11.875 8.75H16.25C16.9404 8.75 17.5 9.30965 17.5 10V16.25C17.5 16.9403 16.9404 17.5 16.25 17.5H11.875C11.1846 17.5 10.625 16.9403 10.625 16.25V10ZM11.875 10H16.25V16.25H11.875V10Z"
fill="currentcolor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.75 12.5C3.05962 12.5 2.5 13.0597 2.5 13.75V16.25C2.5 16.9403 3.05962 17.5 3.75 17.5H8.125C8.81538 17.5 9.375 16.9403 9.375 16.25V13.75C9.375 13.0597 8.81538 12.5 8.125 12.5H3.75ZM8.125 13.75H3.75V16.25H8.125V13.75Z"
fill="currentcolor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.625 3.75C10.625 3.05965 11.1846 2.5 11.875 2.5H16.25C16.9404 2.5 17.5 3.05965 17.5 3.75V6.25C17.5 6.94035 16.9404 7.5 16.25 7.5H11.875C11.1846 7.5 10.625 6.94035 10.625 6.25V3.75ZM11.875 3.75H16.25V6.25H11.875V3.75Z"
fill="currentcolor" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

6
src/assets/assets-slide-detail.svg
View File

@ -1,6 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 5.625H5V6.875H12.5V5.625Z" fill="currentcolor"/>
<path d="M5 8.75H12.5V10H5V8.75Z" fill="currentcolor"/>
<path d="M10 11.875H5V13.125H10V11.875Z" fill="currentcolor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3.75C2.5 3.05962 3.05962 2.5 3.75 2.5H16.25C16.9404 2.5 17.5 3.05962 17.5 3.75V16.25C17.5 16.9404 16.9404 17.5 16.25 17.5H3.75C3.05962 17.5 2.5 16.9404 2.5 16.25V3.75ZM3.75 3.75H16.25V16.25H3.75V3.75Z" fill="currentcolor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 566 B

4
src/assets/assets-slide-form.svg
View File

@ -1,4 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1485 2.60504L7.96107 8.79252C7.88191 8.87167 7.82547 8.97063 7.79764 9.07905L6.98445 12.2468C6.92951 12.4608 6.99164 12.6879 7.14788 12.8442C7.30411 13.0004 7.53121 13.0625 7.74522 13.0076L10.913 12.1944C11.0214 12.1666 11.1204 12.1101 11.1995 12.031L17.387 5.8435C18.2813 4.94923 18.2813 3.49931 17.387 2.60504C16.4927 1.71076 15.0428 1.71076 14.1485 2.60504ZM8.45793 11.5341L8.96586 9.55549L15.0324 3.48892C15.4386 3.08279 16.097 3.0828 16.5031 3.48892C16.9093 3.89504 16.9093 4.5535 16.5031 4.95962L10.4366 11.0262L8.45793 11.5341Z" fill="currentcolor"/>
<path d="M3.75 4.37493H10V3.12493H3.75C3.05964 3.12493 2.5 3.68457 2.5 4.37493V15.6249C2.5 16.3153 3.05964 16.8749 3.75 16.8749H16.25C16.9404 16.8749 17.5 16.3153 17.5 15.6249V9.37493H16.25V15.6249H3.75V4.37493Z" fill="currentcolor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 951 B

6
src/assets/assets-slide-list.svg
View File

@ -1,6 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 5.3125H10V6.5625H5V5.3125Z" fill="currentcolor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H16.25C16.9404 2.5 17.5 3.05965 17.5 3.75V8.125C17.5 8.81535 16.9404 9.375 16.25 9.375H3.75C3.05962 9.375 2.5 8.81535 2.5 8.125V3.75ZM3.75 3.75H16.25V8.125H3.75V3.75Z" fill="currentcolor"/>
<path d="M10 13.4375H5V14.6875H10V13.4375Z" fill="currentcolor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 11.875C2.5 11.1847 3.05962 10.625 3.75 10.625H16.25C16.9404 10.625 17.5 11.1847 17.5 11.875V16.25C17.5 16.9403 16.9404 17.5 16.25 17.5H3.75C3.05962 17.5 2.5 16.9403 2.5 16.25V11.875ZM16.25 11.875V16.25H3.75V11.875H16.25Z" fill="currentcolor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 812 B

3
src/assets/assets-slide-logout.svg
View File

@ -1,3 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10ZM12.5489 9.37547L10.0934 6.91989L10.9772 6.03601L14.4998 9.55853C14.7438 9.80261 14.7438 10.1983 14.4998 10.4424L10.9804 13.9618L10.0965 13.0779L12.5489 10.6255L5.45213 10.6255L5.45214 9.37545L12.5489 9.37547Z" fill="currentcolor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 678 B

111
src/pages/list/components/CommonTable.vue → src/components/common-table/index.vue
View File

@ -5,45 +5,45 @@
<t-col :span="10">
<t-row :gutter="[24, 24]">
<t-col :span="4">
<t-form-item label="合同名称" name="name">
<t-form-item :label="$t('components.commonTable.contractName')" name="name">
<t-input
v-model="formData.name"
class="form-item-content"
type="search"
placeholder="请输入合同名称"
:placeholder="$t('components.commonTable.contractNamePlaceholder')"
:style="{ minWidth: '134px' }"
/>
</t-form-item>
</t-col>
<t-col :span="4">
<t-form-item label="合同状态" name="status">
<t-form-item :label="$t('components.commonTable.contractStatus')" name="status">
<t-select
v-model="formData.status"
class="form-item-content"
:options="CONTRACT_STATUS_OPTIONS"
placeholder="请选择合同状态"
:placeholder="$t('components.commonTable.contractStatusPlaceholder')"
clearable
/>
</t-form-item>
</t-col>
<t-col :span="4">
<t-form-item label="合同编号" name="no">
<t-form-item :label="$t('components.commonTable.contractNum')" name="no">
<t-input
v-model="formData.no"
class="form-item-content"
placeholder="请输入合同编号"
:placeholder="$t('components.commonTable.contractNumPlaceholder')"
:style="{ minWidth: '134px' }"
/>
</t-form-item>
</t-col>
<t-col :span="4">
<t-form-item label="合同类型" name="type">
<t-form-item :label="$t('components.commonTable.contractType')" name="type">
<t-select
v-model="formData.type"
style="display: inline-block"
class="form-item-content"
:options="CONTRACT_TYPE_OPTIONS"
placeholder="请选择合同类型"
:placeholder="$t('components.commonTable.contractTypePlaceholder')"
clearable
/>
</t-form-item>
@ -52,8 +52,10 @@
</t-col>
<t-col :span="2" class="operation-container">
<t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }"> 查询 </t-button>
<t-button type="reset" variant="base" theme="default"> 重置 </t-button>
<t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }">
{{ $t('components.commonTable.query') }}
</t-button>
<t-button type="reset" variant="base" theme="default"> {{ $t('components.commonTable.reset') }} </t-button>
</t-col>
</t-row>
</t-form>
@ -72,29 +74,41 @@
@change="rehandleChange"
>
<template #status="{ row }">
<t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light"> 审核失败 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light"> 待审核 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light"> 待履行 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light"> 履行中 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light"> 已完成 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
{{ $t('components.commonTable.contractStatusEnum.fail') }}
</t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light">
{{ $t('components.commonTable.contractStatusEnum.audit') }}
</t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light">
{{ $t('components.commonTable.contractStatusEnum.pending') }}
</t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light">
{{ $t('components.commonTable.contractStatusEnum.executing') }}
</t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light">
{{ $t('components.commonTable.contractStatusEnum.finish') }}
</t-tag>
</template>
<template #contractType="{ row }">
<p v-if="row.contractType === CONTRACT_TYPES.MAIN">审核失败</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUB">待审核</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">待履行</p>
<p v-if="row.contractType === CONTRACT_TYPES.MAIN">{{ $t('pages.listBase.contractStatusEnum.fail') }}</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUB">{{ $t('pages.listBase.contractStatusEnum.audit') }}</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">
{{ $t('pages.listBase.contractStatusEnum.pending') }}
</p>
</template>
<template #paymentType="{ row }">
<p v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
付款<trend class="dashboard-item-trend" type="up" />
</p>
<p v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col">
收款<trend class="dashboard-item-trend" type="down" />
</p>
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
{{ $t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" />
</div>
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col">
{{ $t('pages.listBase.receive') }}<trend class="dashboard-item-trend" type="down" />
</div>
</template>
<template #op="slotProps">
<t-space>
<t-link theme="primary" @click="rehandleClickOp(slotProps)">管理</t-link>
<t-link theme="danger" @click="handleClickDelete(slotProps)">删除</t-link>
<t-link theme="primary" @click="handleClickDetail()"> {{ $t('pages.listBase.detail') }}</t-link>
<t-link theme="danger" @click="handleClickDelete(slotProps)"> {{ $t('pages.listBase.delete') }}</t-link>
</t-space>
</template>
</t-table>
@ -111,17 +125,13 @@
<script setup lang="ts">
import { MessagePlugin, PageInfo, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getList } from '@/api/list';
import Trend from '@/components/trend/index.vue';
import { prefix } from '@/config/global';
import {
CONTRACT_PAYMENT_TYPES,
CONTRACT_STATUS,
CONTRACT_STATUS_OPTIONS,
CONTRACT_TYPE_OPTIONS,
CONTRACT_TYPES,
} from '@/constants';
import { CONTRACT_PAYMENT_TYPES, CONTRACT_STATUS, CONTRACT_TYPES } from '@/constants';
import { t } from '@/locales';
import { useSettingStore } from '@/store';
interface FormData {
@ -132,37 +142,51 @@ interface FormData {
}
const store = useSettingStore();
const router = useRouter();
const CONTRACT_STATUS_OPTIONS = [
{ value: CONTRACT_STATUS.FAIL, label: t('components.commonTable.contractStatusEnum.fail') },
{ value: CONTRACT_STATUS.AUDIT_PENDING, label: t('components.commonTable.contractStatusEnum.audit') },
{ value: CONTRACT_STATUS.EXEC_PENDING, label: t('components.commonTable.contractStatusEnum.pending') },
{ value: CONTRACT_STATUS.EXECUTING, label: t('components.commonTable.contractStatusEnum.executing') },
{ value: CONTRACT_STATUS.FINISH, label: t('components.commonTable.contractStatusEnum.finish') },
];
const CONTRACT_TYPE_OPTIONS = [
{ value: CONTRACT_TYPES.MAIN, label: t('components.commonTable.contractTypeEnum.main') },
{ value: CONTRACT_TYPES.SUB, label: t('components.commonTable.contractTypeEnum.sub') },
{ value: CONTRACT_TYPES.SUPPLEMENT, label: t('components.commonTable.contractTypeEnum.supplement') },
];
const COLUMNS: PrimaryTableCol[] = [
{
title: '合同名称',
title: t('components.commonTable.contractName'),
fixed: 'left',
width: 280,
ellipsis: true,
align: 'left',
colKey: 'name',
},
{ title: '合同状态', colKey: 'status', width: 160 },
{ title: t('components.commonTable.contractStatus'), colKey: 'status', width: 160 },
{
title: '合同编号',
title: t('components.commonTable.contractNum'),
width: 160,
ellipsis: true,
colKey: 'no',
},
{
title: '合同类型',
title: t('components.commonTable.contractType'),
width: 160,
ellipsis: true,
colKey: 'contractType',
},
{
title: '合同收付类型',
title: t('components.commonTable.contractPayType'),
width: 160,
ellipsis: true,
colKey: 'paymentType',
},
{
title: '合同金额 (元)',
title: t('components.commonTable.contractAmount'),
width: 160,
ellipsis: true,
colKey: 'amount',
@ -172,7 +196,7 @@ const COLUMNS: PrimaryTableCol[] = [
fixed: 'right',
width: 160,
colKey: 'op',
title: '操作',
title: t('components.commonTable.operation'),
},
];
@ -250,6 +274,10 @@ const handleClickDelete = (slot: { row: { rowIndex: number } }) => {
const onReset = (val: unknown) => {
console.log(val);
};
const handleClickDetail = () => {
router.push('/detail/base');
};
const onSubmit = (val: unknown) => {
console.log(val);
console.log(formData.value);
@ -260,9 +288,6 @@ const rehandlePageChange = (pageInfo: PageInfo, newDataSource: TableRowData[]) =
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
console.log('统一Change', changeParams, triggerAndData);
};
const rehandleClickOp = (ctx: unknown) => {
console.log(ctx);
};
const headerAffixedTop = computed(
() =>

6
src/components/product-card/index.vue
View File

@ -13,7 +13,7 @@
</template>
<template #status>
<t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">{{
product.isSetup ? '已启用' : '已停用'
product.isSetup ? $t('components.isSetup.on') : $t('components.isSetup.off')
}}</t-tag>
</template>
<template #content>
@ -36,12 +36,12 @@
trigger="click"
:options="[
{
content: '管理',
content: $t('components.manage'),
value: 'manage',
onClick: () => handleClickManage(product),
},
{
content: '删除',
content: $t('components.delete'),
value: 'delete',
onClick: () => handleClickDelete(product),
},

14
src/constants/index.ts
View File

@ -7,14 +7,6 @@ export const CONTRACT_STATUS = {
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,
@ -22,12 +14,6 @@ export const CONTRACT_TYPES = {
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,

2
src/layouts/components/FrameContent.vue
View File

@ -25,7 +25,7 @@ const settingStore = useSettingStore();
const getWrapStyle = computed((): CSSProperties => {
return {
height: `${unref(heightRef)}px`,
height: `${heightRef.value}px`,
};
});

40
src/layouts/components/Header.vue
View File

@ -23,24 +23,34 @@
<!-- 全局通知 -->
<notice />
<t-tooltip placement="bottom" content="代码仓库">
<t-tooltip placement="bottom" :content="$t('layout.header.code')">
<t-button theme="default" shape="square" variant="text" @click="navToGitHub">
<t-icon name="logo-github" />
</t-button>
</t-tooltip>
<t-tooltip placement="bottom" content="帮助文档">
<t-tooltip placement="bottom" :content="$t('layout.header.help')">
<t-button theme="default" shape="square" variant="text" @click="navToHelper">
<t-icon name="help-circle" />
</t-button>
</t-tooltip>
<t-dropdown trigger="click">
<t-button theme="default" shape="square" variant="text">
<translate-icon />
</t-button>
<t-dropdown-menu>
<t-dropdown-item v-for="(lang, index) in langList" :key="index" :value="lang.value" @click="changeLang">{{
lang.content
}}</t-dropdown-item></t-dropdown-menu
>
</t-dropdown>
<t-dropdown :min-column-width="120" trigger="click">
<template #dropdown>
<t-dropdown-menu>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
<t-icon name="user-circle"></t-icon>个人中心
<user-circle-icon />{{ $t('layout.header.user') }}
</t-dropdown-item>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
<t-icon name="poweroff"></t-icon>退出登录
<poweroff-icon />{{ $t('layout.header.signOut') }}
</t-dropdown-item>
</t-dropdown-menu>
</template>
@ -49,7 +59,7 @@
<t-icon class="header-user-avatar" name="user-circle" />
</template>
<div class="header-user-account">{{ user.userInfo.name }}</div>
<template #suffix><t-icon name="chevron-down" /></template>
<template #suffix><chevron-down-icon /></template>
</t-button>
</t-dropdown>
</div>
@ -59,12 +69,15 @@
</template>
<script setup lang="ts">
import { ChevronDownIcon, PoweroffIcon, TranslateIcon, UserCircleIcon } from 'tdesign-icons-vue-next';
import type { PropType } from 'vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import LogoFull from '@/assets/assets-logo-full.svg?component';
import { prefix } from '@/config/global';
import { langList } from '@/locales/index';
import { useLocale } from '@/locales/useLocale';
import { getActive } from '@/router';
import { useSettingStore, useUserStore } from '@/store';
import type { MenuRoute } from '@/types/interface';
@ -124,6 +137,13 @@ const menuCls = computed(() => {
];
});
const menuTheme = computed(() => props.theme as 'light' | 'dark');
// 切换语言
const { changeLocale } = useLocale();
const changeLang = ({ value: lang }: { value: string }) => {
changeLocale(lang);
};
const changeCollapsed = () => {
settingStore.updateConfig({
isSidebarCompact: !settingStore.isSidebarCompact,
@ -166,6 +186,7 @@ const navToHelper = () => {
z-index: 10;
width: auto;
transition: all 0.3s;
&-compact {
left: 64px;
}
@ -177,6 +198,7 @@ const navToHelper = () => {
display: inline-flex;
}
}
.header-menu {
flex: 1 1 1;
display: inline-flex;
@ -218,6 +240,7 @@ const navToHelper = () => {
.t-logo {
width: 100%;
height: 100%;
&:hover {
cursor: pointer;
}
@ -243,12 +266,14 @@ const navToHelper = () => {
color: var(--td-text-color-primary);
}
}
.t-menu--dark {
.t-head-menu__inner {
border-bottom: 1px solid var(--td-gray-color-10);
}
.header-user-account {
color: rgba(255, 255, 255, 0.55);
color: rgb(255 255 255 / 55%);
}
}
@ -269,8 +294,9 @@ const navToHelper = () => {
:deep(.t-dropdown__item) {
width: 100%;
margin-bottom: 0px;
margin-bottom: 0;
}
&:last-child {
:deep(.t-dropdown__item) {
margin-bottom: 8px;

17
src/layouts/components/LayoutContent.vue
View File

@ -29,29 +29,29 @@
}"
>
<template v-if="!routeItem.isHome">
{{ routeItem.title }}
{{ renderTitle(routeItem.title) }}
</template>
<t-icon v-else name="home" />
<template #dropdown>
<t-dropdown-menu>
<t-dropdown-item @click="() => handleRefresh(routeItem, index)">
<t-icon name="refresh" />
刷新
{{ $t('layout.tagTabs.refresh') }}
</t-dropdown-item>
<t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)">
<t-icon name="arrow-left" />
关闭左侧
{{ $t('layout.tagTabs.closeLeft') }}
</t-dropdown-item>
<t-dropdown-item
v-if="index < tabRouters.length - 1"
@click="() => handleCloseBehind(routeItem.path, index)"
>
<t-icon name="arrow-right" />
关闭右侧
{{ $t('layout.tagTabs.closeRight') }}
</t-dropdown-item>
<t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)">
<t-icon name="close-circle" />
关闭其它
{{ $t('layout.tagTabs.closeOther') }}
</t-dropdown-item>
</t-dropdown-menu>
</template>
@ -75,6 +75,7 @@ import { computed, nextTick, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { prefix } from '@/config/global';
import { useLocale } from '@/locales/useLocale';
import { useSettingStore, useTabsRouterStore } from '@/store';
import type { TRouterInfo, TTabRemoveOptions } from '@/types/interface';
@ -90,6 +91,8 @@ const tabsRouterStore = useTabsRouterStore();
const tabRouters = computed(() => tabsRouterStore.tabRouters.filter((route) => route.isAlive || route.isHome));
const activeTabPath = ref('');
const { locale } = useLocale();
const handleChangeCurrentTab = (path: string) => {
const { tabRouters } = tabsRouterStore;
const route = tabRouters.find((i) => i.path === path);
@ -104,6 +107,10 @@ const handleRemove = (options: TTabRemoveOptions) => {
if ((options.value as string) === route.path) router.push({ path: nextRouter.path, query: nextRouter.query });
};
const renderTitle = (title: string | Record<string, string>) => {
if (typeof title === 'string') return title;
return title[locale.value];
};
const handleRefresh = (route: TRouterInfo, routeIdx: number) => {
tabsRouterStore.toggleTabRouterAlive(routeIdx);
nextTick(() => {

14
src/layouts/components/MenuContent.vue
View File

@ -6,16 +6,16 @@
<template #icon>
<component :is="menuIcon(item)" class="t-icon"></component>
</template>
{{ item.title }}
{{ renderMenuTitle(item.title) }}
</t-menu-item>
<t-menu-item v-else :name="item.path" :value="getPath(item)" :to="item.path">
<template #icon>
<component :is="menuIcon(item)" class="t-icon"></component>
</template>
{{ item.title }}
{{ renderMenuTitle(item.title) }}
</t-menu-item>
</template>
<t-submenu v-else :name="item.path" :value="item.path" :title="item.title">
<t-submenu v-else :name="item.path" :value="item.path" :title="renderMenuTitle(item.title)">
<template #icon>
<component :is="menuIcon(item)" class="t-icon"></component>
</template>
@ -28,6 +28,7 @@
import type { PropType } from 'vue';
import { computed } from 'vue';
import { useLocale } from '@/locales/useLocale';
import { getActive } from '@/router';
import type { MenuRoute } from '@/types/interface';
@ -39,8 +40,10 @@ const props = defineProps({
default: () => [],
},
});
const active = computed(() => getActive());
const { locale } = useLocale();
const list = computed(() => {
const { navData } = props;
return getMenuList(navData);
@ -52,6 +55,11 @@ const menuIcon = (item: ListItemType) => {
return RenderIcon;
};
const renderMenuTitle = (title: string | Record<string, string>) => {
if (typeof title === 'string') return title;
return title[locale.value];
};
const getMenuList = (list: MenuRoute[], basePath?: string): ListItemType[] => {
if (!list || list.length === 0) {
return [];

37
src/layouts/components/Notice.vue
View File

@ -3,9 +3,14 @@
<template #content>
<div class="header-msg">
<div class="header-msg-top">
<p>通知中心</p>
<t-button v-if="unreadMsg.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')"
>清空</t-button
<p>{{ $t('layout.notice.title') }}</p>
<t-button
v-if="unreadMsg.length > 0"
class="clear-btn"
variant="text"
theme="primary"
@click="setRead('all')"
>{{ $t('layout.notice.clear') }}</t-button
>
</div>
<t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false">
@ -16,25 +21,21 @@
</div>
<p class="msg-time">{{ item.date }}</p>
<template #action>
<t-button size="small" variant="outline" @click="setRead('radio', item)"> 设为已读 </t-button>
<t-button size="small" variant="outline" @click="setRead('radio', item)">
{{ $t('layout.notice.setRead') }}
</t-button>
</template>
</t-list-item>
</t-list>
<div v-else class="empty-list">
<img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
<p>暂无通知</p>
<p>{{ $t('layout.notice.empty') }}</p>
</div>
<div class="header-msg-bottom">
<t-button
v-if="unreadMsg.length > 0"
class="header-msg-bottom-link"
variant="text"
theme="default"
block
@click="goDetail"
>查看全部</t-button
>
<div v-if="unreadMsg.length > 0" class="header-msg-bottom">
<t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail">{{
$t('layout.notice.viewAll')
}}</t-button>
</div>
</div>
</template>
@ -85,9 +86,9 @@ const goDetail = () => {
margin: calc(0px - var(--td-comp-paddingTB-xs)) calc(0px - var(--td-comp-paddingLR-s));
.empty-list {
height: calc(100% - 120px);
// height: calc(100% - 120px);
text-align: center;
padding-top: 135px;
padding: var(--td-comp-paddingTB-xxl) 0;
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
@ -96,7 +97,7 @@ const goDetail = () => {
}
p {
margin-top: var(--td-comp-margin-xxl);
margin-top: var(--td-comp-margin-xs);
}
}

15
src/layouts/components/Search.vue
View File

@ -2,7 +2,7 @@
<div v-if="layout === 'side'" class="header-menu-search">
<t-input
:class="['header-search', { 'hover-active': isSearchFocus }]"
placeholder="请输入搜索内容"
:placeholder="$t('layout.searchPlaceholder')"
@blur="changeSearchFocus(false)"
@focus="changeSearchFocus(true)"
>
@ -56,6 +56,7 @@ const changeSearchFocus = (value: boolean) => {
.header-menu-search {
display: flex;
margin-left: 16px;
.hover-active {
background: var(--td-bg-color-secondarycontainer);
}
@ -63,20 +64,22 @@ const changeSearchFocus = (value: boolean) => {
.t-icon {
color: var(--td-text-color-primary) !important;
}
.header-search {
:deep(.t-input) {
border: none;
outline: none;
box-shadow: none;
transition: background @anim-duration-base linear;
.t-input__inner {
transition: background @anim-duration-base linear;
}
.t-input__inner {
background: none;
}
&:hover {
background: var(--td-bg-color-secondarycontainer);
.t-input__inner {
background: var(--td-bg-color-secondarycontainer);
}
@ -91,14 +94,17 @@ const changeSearchFocus = (value: boolean) => {
.t-icon {
font-size: 20px;
&.general {
margin-right: 16px;
}
}
}
.search-icon-hide {
opacity: 0;
}
.header-menu-search-left {
display: flex;
align-items: center;
@ -106,12 +112,15 @@ const changeSearchFocus = (value: boolean) => {
.header-search {
width: 200px;
transition: width @anim-duration-base @anim-time-fn-easing;
:deep(.t-input) {
border: 0;
&:focus {
box-shadow: none;
}
}
&.width-zero {
width: 0;
opacity: 0;

35
src/layouts/setting.vue
View File

@ -3,14 +3,14 @@
v-model:visible="showSettingPanel"
size="408px"
:footer="false"
header="页面配置"
:header="$t('layout.setting.title')"
:close-btn="true"
class="setting-drawer-container"
@close-btn-click="handleCloseDrawer"
>
<div class="setting-container">
<t-form ref="form" :data="formData" label-align="left">
<div class="setting-group-title">主题模式</div>
<div class="setting-group-title">{{ $t('layout.setting.theme.mode') }}</div>
<t-radio-group v-model="formData.mode">
<div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
<div>
@ -21,7 +21,7 @@
</div>
</div>
</t-radio-group>
<div class="setting-group-title">主题色</div>
<div class="setting-group-title">{{ $t('layout.setting.theme.color') }}</div>
<t-radio-group v-model="formData.brandTheme">
<div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
<t-radio-button :key="index" :value="item" class="setting-layout-color-group">
@ -53,7 +53,7 @@
</div>
</t-radio-group>
<div class="setting-group-title">导航布局</div>
<div class="setting-group-title">{{ $t('layout.setting.navigationLayout') }}</div>
<t-radio-group v-model="formData.layout">
<div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
<t-radio-button :key="index" :value="item">
@ -70,23 +70,29 @@
<t-switch v-model="formData.isSidebarFixed" />
</t-form-item>
<div class="setting-group-title">元素开关</div>
<t-form-item v-show="formData.layout === 'side'" label="显示 Header" name="showHeader">
<div class="setting-group-title">{{ $t('layout.setting.element.title') }}</div>
<t-form-item
v-show="formData.layout === 'side'"
:label="$t('layout.setting.element.showHeader')"
name="showHeader"
>
<t-switch v-model="formData.showHeader" />
</t-form-item>
<t-form-item label="显示 Breadcrumbs" name="showBreadcrumb">
<t-form-item :label="$t('layout.setting.element.showBreadcrumb')" name="showBreadcrumb">
<t-switch v-model="formData.showBreadcrumb" />
</t-form-item>
<t-form-item label="显示 Footer" name="showFooter">
<t-form-item :label="$t('layout.setting.element.showFooter')" name="showFooter">
<t-switch v-model="formData.showFooter" />
</t-form-item>
<t-form-item label="使用 多标签Tab页" name="isUseTabsRouter">
<t-form-item :label="$t('layout.setting.element.useTagTabs')" name="isUseTabsRouter">
<t-switch v-model="formData.isUseTabsRouter"></t-switch>
</t-form-item>
</t-form>
<div class="setting-info">
<p>请复制后手动修改配置文件: /src/config/style.ts</p>
<t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button>
<p>{{ $t('layout.setting.tips') }}</p>
<t-button theme="primary" variant="text" @click="handleCopy">
{{ $t('layout.setting.copy.title') }}
</t-button>
</div>
</div>
</t-drawer>
@ -104,6 +110,7 @@ import ColorContainer from '@/components/color/index.vue';
import Thumbnail from '@/components/thumbnail/index.vue';
import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
import STYLE_CONFIG from '@/config/style';
import { t } from '@/locales';
import { useSettingStore } from '@/store';
const settingStore = useSettingStore();
@ -111,9 +118,9 @@ const settingStore = useSettingStore();
const LAYOUT_OPTION = ['side', 'top', 'mix'];
const MODE_OPTIONS = [
{ type: 'light', text: '明亮' },
{ type: 'dark', text: '暗黑' },
{ type: 'auto', text: '跟随系统' },
{ type: 'light', text: t('layout.setting.theme.options.light') },
{ type: 'dark', text: t('layout.setting.theme.options.dark') },
{ type: 'auto', text: t('layout.setting.theme.options.auto') },
];
const initStyleConfig = () => {

68
src/locales/index.ts Normal file
View File

@ -0,0 +1,68 @@
import { DropdownOption } from 'tdesign-vue-next';
import { computed } from 'vue';
import { createI18n } from 'vue-i18n';
// 导入语言文件
const langModules = import.meta.glob('./lang/*/index.ts', { eager: true });
const langModuleMap = new Map<string, Object>();
export const langCode: Array<string> = [];
export const localeConfigKey = 'tdesign-starter-locale';
// 获取浏览器默认语言环境
const browserLanguage = navigator.language.replace('-', '_');
// 生成语言模块列表
const generateLangModuleMap = () => {
const fullPaths = Object.keys(langModules);
console.log(langModules, 'langModules');
fullPaths.forEach((fullPath) => {
const k = fullPath.replace('./lang', '');
const startIndex = 1;
const lastIndex = k.lastIndexOf('/');
const code = k.substring(startIndex, lastIndex);
langCode.push(code);
console.log(langCode, 'langCode');
langModuleMap.set(code, langModules[fullPath]);
});
};
// 导出 Message
const importMessages = computed(() => {
generateLangModuleMap();
const message: Recordable = {};
langModuleMap.forEach((value: any, key) => {
message[key] = value.default;
});
return message;
});
export const i18n = createI18n({
legacy: false,
locale: localStorage.getItem(localeConfigKey) || browserLanguage || 'zh_CN',
fallbackLocale: 'zh_CN',
messages: importMessages.value,
globalInjection: true,
});
export const langList = computed(() => {
if (langModuleMap.size === 0) generateLangModuleMap();
const list: DropdownOption[] = [];
langModuleMap.forEach((value: any, key) => {
list.push({
content: value.default.lang,
value: key,
});
});
return list;
});
// @ts-ignore
export const { t } = i18n.global;
export default i18n;

37
src/locales/lang/en_US/components.ts Normal file
View File

@ -0,0 +1,37 @@
export default {
isSetup: {
on: 'Enabled',
off: 'Disabled',
},
manage: 'Manage',
delete: 'Delete',
commonTable: {
contractName: 'Name',
contractStatus: 'Status',
contractNum: 'Number',
contractType: 'Type',
contractPayType: 'Pay Type',
contractAmount: 'Amount',
contractNamePlaceholder: 'enter contract name',
contractStatusPlaceholder: 'enter contract status',
contractNumPlaceholder: 'enter contract number',
contractTypePlaceholder: 'enter contract type',
operation: 'Operation',
detail: 'detail',
delete: 'delete',
contractStatusEnum: {
fail: 'fail',
audit: 'audit',
executing: 'executing',
pending: 'pending',
finish: 'finish',
},
contractTypeEnum: {
main: 'main',
sub: 'sub',
supplement: 'supplement',
},
reset: 'reset',
query: 'query',
},
};

54
src/locales/lang/en_US/index.ts Normal file
View File

@ -0,0 +1,54 @@
import merge from 'lodash/merge';
import componentsLocale from 'tdesign-vue-next/es/locale/en_US';
import components from './components';
import layout from './layout';
import pages from './pages';
export default {
lang: 'English',
layout,
pages,
components,
constants: {
contract: {
name: 'Name',
status: 'Status',
num: 'Number',
type: 'Type',
typePlaceholder: 'Please enter type',
payType: 'Pay Type',
amount: 'Amount',
amountPlaceholder: 'Please enter amount',
signDate: 'Sign Date',
effectiveDate: 'Effective Date',
endDate: 'End Date',
createDate: 'Create Date',
attachment: 'Attachment',
company: 'Company',
employee: 'Employee',
pay: 'pay',
receive: 'received',
remark: 'remark',
statusOptions: {
fail: 'Failure',
auditPending: 'Pending audit',
execPending: 'Pending performance',
executing: 'Successful',
finish: 'Finish',
},
typeOptions: {
main: 'Master contract',
sub: 'Subcontract',
supplement: 'Supplementary contract',
},
},
},
componentsLocale: merge({}, componentsLocale, {
// 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档
// https://tdesign.tencent.com/vue-next/config?tab=api
// pagination: {
// jumpTo: 'xxx'
// },
}),
};

52
src/locales/lang/en_US/layout.ts Normal file
View File

@ -0,0 +1,52 @@
export default {
header: {
code: 'Code Repository',
help: 'Document',
user: 'Profile',
signOut: 'Sign Out',
setting: 'Setting',
},
notice: {
title: 'Notification Center',
clear: 'Clear',
setRead: 'Set Read',
empty: 'Empty',
emptyNotice: 'No Notice',
viewAll: 'View All',
},
tagTabs: {
closeOther: 'close other',
closeLeft: 'close left',
closeRight: 'close right',
refresh: 'refresh',
},
searchPlaceholder: 'Enter search content',
setting: {
title: 'Setting',
theme: {
mode: 'Theme Mode',
color: 'Theme Color',
options: {
light: 'Light',
dark: 'Dark ',
auto: 'Follow System',
},
},
navigationLayout: 'Navigation Layout',
splitMenu: 'Split Menu（Only Mix mode）',
fixedSidebar: 'Fixed Sidebar',
element: {
title: 'Element Switch',
showHeader: 'Show Header',
showBreadcrumb: 'Show Breadcrumb',
showFooter: 'Show Footer',
useTagTabs: 'Use Tag Tabs',
},
tips: 'Please copy and manually modify the configuration file: /src/config/style.ts',
copy: {
title: 'Copy',
success: 'copied',
fail: 'fail to copy',
},
},
};

62
src/locales/lang/en_US/pages/dashboard-base.ts Normal file
View File

@ -0,0 +1,62 @@
export default {
outputOverview: {
title: 'In/Out Overview',
subtitle: '(pieces)',
export: 'Export data',
month: {
input: 'Total in store this month',
output: 'Total out store this month',
},
since: 'Since last week',
},
rankList: {
title: 'Sales order ranking',
week: 'This week',
month: 'Latest 3 months',
info: 'Detail',
},
topPanel: {
card1: 'Total Revenue',
card2: 'Total Refund',
card3: 'Active User(s)',
card4: 'Generate Order(s)',
cardTips: 'since last week',
analysis: {
title: 'Analysis Data',
unit: 'ten thousand yuan',
series1: 'this month',
series2: 'last month',
channels: 'Sales Channels',
channel1: 'online',
channel2: 'shop',
channelTips: ' sales ratio',
},
},
saleColumns: {
index: 'Ranking',
productName: 'Customer',
growUp: 'Grow up',
count: 'Count',
operation: 'Operation',
},
buyColumns: {
index: 'Ranking',
productName: 'Supplier',
growUp: 'Grow up',
count: 'Count',
operation: 'Operation',
},
chart: {
week1: 'MON',
week2: 'TUE',
week3: 'WED',
week4: 'THU',
week5: 'FRI',
week6: 'SAT',
week7: 'SUN',
max: 'Max',
min: 'Min',
thisMonth: 'this month',
lastMonth: 'last month',
},
};

45
src/locales/lang/en_US/pages/dashboard-detail.ts Normal file
View File

@ -0,0 +1,45 @@
export default {
topPanel: {
title: 'Purchase applications for this month',
quarter: 'Quarter on quarter',
paneList: {
totalRequest: 'Apply count',
suppliers: 'Number of Suppliers',
productCategory: 'Product Category',
applicant: 'Number of Application',
completionRate: 'Completion Rate(%)',
arrivalRate: 'Arrival Rate(%)',
},
},
procurement: {
title: 'Trends in purchase requisitions for goods',
goods: {
cup: 'cup',
tea: 'tea',
honey: 'honey',
flour: 'flour',
coffeeMachine: 'coffee machine',
massageMachine: 'massage machine',
},
},
ssl: 'SSL certificate',
sslDescription:
'SSL certificate, also known as a server certificate, is a digital certificate that authenticates the identity of a website and encrypts information sent to the server using SSL technology. Tencent Cloud provides you with a one-stop service for SSL certificates, including application, management, and deployment of both free and paid certificates.',
satisfaction: {
title: 'distribution of satisfaction levels for purchased goods',
export: 'export data',
},
chart: {
week1: 'MON',
week2: 'TUE',
week3: 'WED',
week4: 'THU',
week5: 'FRI',
week6: 'SAT',
week7: 'SUN',
max: 'Max',
min: 'Min',
thisMonth: 'this month',
lastMonth: 'last month',
},
};

20
src/locales/lang/en_US/pages/detail-base.ts Normal file
View File

@ -0,0 +1,20 @@
export default {
baseInfo: {
title: 'Base Info',
},
changelog: {
title: 'Changelog',
step1: {
title: 'upload file',
subtitle: 'subtitle',
},
step2: {
title: 'modify contract amount',
subtitle: 'subtitle',
},
step3: {
title: 'create contract',
desc: 'administrator',
},
},
};

43
src/locales/lang/en_US/pages/detail-card.ts Normal file
View File

@ -0,0 +1,43 @@
export default {
baseInfo: {
title: 'Base Info',
},
invoice: {
title: 'Invoice Progress',
step1: {
title: 'Apply',
content: 'The electronic invoice has been submitted on December 21st',
},
step2: {
title: 'Electronic invoice',
content: 'expected to be processed within 1-3 business days.',
},
step3: {
title: 'Invoice is send',
content: 'we will contact you within 7 business days.',
},
step4: {
title: 'Finish',
},
},
product: {
title: 'Product Category',
add: 'add production',
month: 'month',
quarter: 'quarter',
},
detail: {
title: 'Product Procurement Detail',
form: {
applyNo: 'Apply no',
product: 'Name',
productNo: 'No.',
department: 'Department',
num: 'Num',
createTime: 'Create time',
operation: 'Operation',
manage: 'manage',
delete: 'delete',
},
},
};

32
src/locales/lang/en_US/pages/detail-deploy.ts Normal file
View File

@ -0,0 +1,32 @@
export default {
deployTrend: {
title: 'Deploy Trend',
warning: 'Warning',
thisMonth: 'this month',
thisWeek: 'this week',
lastMonth: 'last month',
thisYear: 'this year',
lastYear: 'last year',
week1: 'MON',
week2: 'TUE',
week3: 'WED',
week4: 'THU',
week5: 'FRI',
week6: 'SAT',
week7: 'SUN',
},
projectList: {
title: 'Project List',
dialog: {
title: 'Base Info',
},
table: {
name: 'Name',
admin: 'Admin',
createTime: 'Create time',
operation: 'Operation',
manage: 'manage',
delete: 'delete',
},
},
};

9
src/locales/lang/en_US/pages/detail-secondary.ts Normal file
View File

@ -0,0 +1,9 @@
export default {
read: 'Read',
unread: 'Unread',
all: 'All',
setRead: 'set as read',
setUnread: 'set as unread',
delete: 'delete',
empty: 'Empty',
};

27
src/locales/lang/en_US/pages/form-base.ts Normal file
View File

@ -0,0 +1,27 @@
export default {
title: 'Contract Info',
contractName: 'Name',
contractStatus: 'Status',
contractNum: 'Number',
contractType: 'Type',
contractTypePlaceholder: 'Please enter type',
contractPayType: 'Pay Type',
contractAmount: 'Amount',
contractAmountPlaceholder: 'Please enter amount',
contractSignDate: 'Sign Date',
contractEffectiveDate: 'Effective Date',
contractEndDate: 'End Date',
company: 'Company',
employee: 'Employee',
pay: 'pay',
receive: 'received',
upload: 'upload file',
uploadFile: 'upload contract file',
uploadTips: 'Please upload a PDF file, with a size limit of 60MB.',
otherInfo: 'Other Info',
remark: 'Remark',
remarkPlaceholder: 'please enter remark',
notaryPublic: 'Notary Public',
confirm: 'confirm',
cancel: 'cancel',
};

53
src/locales/lang/en_US/pages/form-step.ts Normal file
View File

@ -0,0 +1,53 @@
export default {
step1: {
title: 'Submit Application',
subtitle: 'Submitted on December 21st',
rules: 'rules',
rule1:
'1. After applying for an invoice, the electronic invoice will be issued within 1-3 working days. If the qualification review is passed, the VAT special invoice (paper) will be mailed to you within 10 working days after the electronic invoice is issued;',
rule2: '2. The invoiced amount will be the actual amount you paid;',
rule3: '3. For any questions, please contact us directly at 13300001111.',
contractName: 'Name',
contractTips: 'Please select a contract name',
invoiceType: 'Invoice type',
amount: 'Amount',
submit: 'Submit Application',
},
step2: {
title: 'Electronic Information',
subtitle: 'Contact Customer Service if you have any questions',
invoiceTitle: 'Invoice Title',
taxNum: 'Tax Num',
address: 'Address',
bank: 'Bank',
bankAccount: 'Bank Account',
email: 'Email',
tel: 'Tel',
invoiceTitlePlaceholder: 'please enter invoice title',
taxNumPlaceholder: 'please enter tax num',
addressPlaceholder: 'please enter address',
bankPlaceholder: 'please enter bank',
bankAccountPlaceholder: 'please enter bank account',
emailPlaceholder: 'please enter email',
telPlaceholder: 'please enter tel',
},
step3: {
title: 'Invoice Mailed',
subtitle: 'Contact us after the electronic invoice is issued',
consignee: 'Consignee',
mobileNum: 'Mobile Num',
deliveryAddress: 'Address',
fullAddress: 'Full Address',
},
step4: {
title: 'Application Completed',
subtitle: 'Contact Customer Service if you have any questions',
finishTitle: 'Application is completed.',
finishTips:
'The electronic invoice is expected to be sent to your email within 1-3 working days. Please be patient for the delivery of the paper invoice.',
reapply: 'reapply',
check: 'check progress',
},
preStep: 'pre step',
nextStep: 'next step',
};

33
src/locales/lang/en_US/pages/index.ts Normal file
View File

@ -0,0 +1,33 @@
import dashboardBase from './dashboard-base';
import dashboardDetail from './dashboard-detail';
import detailBase from './detail-base';
import detailCard from './detail-card';
import detailDeploy from './detail-deploy';
import detailSecondary from './detail-secondary';
import formBase from './form-base';
import formStep from './form-step';
import listBase from './list-base';
import listCard from './list-card';
import listFilter from './list-filter';
import listTree from './list-tree';
import login from './login';
import result from './result';
import user from './user';
export default {
dashboardBase,
dashboardDetail,
listBase,
listCard,
listFilter,
listTree,
detailBase,
detailCard,
detailDeploy,
detailSecondary,
formBase,
formStep,
user,
login,
result,
};

25
src/locales/lang/en_US/pages/list-base.ts Normal file
View File

@ -0,0 +1,25 @@
export default {
export: 'export',
create: 'create',
select: 'select',
items: 'items',
contractName: 'Name',
contractStatus: 'Status',
contractNum: 'Number',
contractType: 'Type',
contractPayType: 'Pay Type',
contractAmount: 'Amount',
operation: 'Operation',
detail: 'detail',
delete: 'delete',
pay: 'pay',
receive: 'received',
placeholder: 'please enter to search',
contractStatusEnum: {
fail: 'fail',
audit: 'audit',
executing: 'executing',
pending: 'pending',
finish: 'finish',
},
};

13
src/locales/lang/en_US/pages/list-card.ts Normal file
View File

@ -0,0 +1,13 @@
export default {
create: 'Create Product',
placeholder: 'please enter to search',
productName: 'Name',
productStatus: 'Status',
productDescription: 'Description',
productType: 'Type',
productRemark: 'Remark',
productStatusEnum: {
off: 'off',
on: 'on',
},
};

1
src/locales/lang/en_US/pages/list-filter.ts Normal file
View File

@ -0,0 +1 @@
export default {};

3
src/locales/lang/en_US/pages/list-tree.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
placeholder: 'please enter to search',
};

26
src/locales/lang/en_US/pages/login.ts Normal file
View File

@ -0,0 +1,26 @@
export default {
loginTitle: 'Login in',
noAccount: 'No Account?',
createAccount: 'Create Account',
remember: 'Remember Account',
forget: 'Forget Account',
signIn: 'Sign in',
existAccount: 'Exist Account?',
refresh: 'refresh',
wechatLogin: 'Login with WeChat',
accountLogin: 'Login with Account',
phoneLogin: 'Login with Mobile Phone',
input: {
account: 'please enter account',
password: 'please enter password',
phone: 'please enter phone',
verification: 'please enter verification code',
},
required: {
account: 'account is required',
phone: 'phone is required',
password: 'password is required',
verification: 'verification code is require',
},
sendVerification: 'send',
};

43
src/locales/lang/en_US/pages/result.ts Normal file
View File

@ -0,0 +1,43 @@
export default {
403: {
tips: 'sorry, you don not have permission to access this page. Please contact the creator through WeCom',
back: 'Back to homepage',
},
404: {
subtitle: 'Sorry, the page is not found',
back: 'Back to homepage',
},
500: {
subtitle: 'Sorry, the server is error',
back: 'Back to homepage',
},
fail: {
title: 'Create fail',
subtitle: 'Sorry, your project creation has failed',
back: 'Back to homepage',
modify: 'Back to modify',
},
success: {
title: 'Project is created',
subtitle: 'Contact the person in charge of distributing the application',
back: 'Back to homepage',
progress: 'Check Progress',
},
maintenance: {
title: 'System maintenance',
subtitle: 'Please try again later',
back: 'Back to homepage',
},
browserIncompatible: {
title: 'browser is incompatible',
subtitle: 'the browser version you are using is too outdated to open the current webpage.',
back: 'Back to homepage',
recommend: 'TDesign Starter recommend the following browser',
},
networkError: {
title: 'Network Error',
subtitle: 'Network error, please try again later',
back: 'Back to homepage',
reload: 'Reload',
},
};

23
src/locales/lang/en_US/pages/user.ts Normal file
View File

@ -0,0 +1,23 @@
export default {
markDay: 'Good afternoon, today marks your 100th day at Tencent',
personalInfo: {
title: 'Personal Info',
position: 'Employee of the Hong Kong and Macau Business Expansion team',
desc: {
phone: 'Phone',
mobile: 'Mobile',
seat: 'Seat',
email: 'Email',
position: 'Position',
leader: 'Leader',
entity: 'Entity',
joinDay: 'Day of join',
group: 'Group',
},
},
contentList: 'Content List',
visitData: 'Visit Data',
teamMember: 'Team Member',
serviceProduction: 'Service Product',
};

38
src/locales/lang/zh_CN/components.ts Normal file
View File

@ -0,0 +1,38 @@
export default {
isSetup: {
on: '已启用',
off: '已停用',
},
manage: '管理',
delete: '删除',
commonTable: {
contractName: '合同名称',
contractNamePlaceholder: '请输入合同名称',
contractStatus: '合同状态',
contractStatusPlaceholder: '请输入合同状态',
contractNum: '合同编号',
contractNumPlaceholder: '请输入合同编号',
contractType: '合同类型',
contractTypePlaceholder: '请选择合同类型',
contractPayType: '合同支付类型',
contractAmount: '合同金额',
operation: '操作',
detail: '详情',
delete: '删除',
placeholder: '请输入内容搜索',
contractStatusEnum: {
fail: '审核失败',
audit: '待审核',
executing: '履行中',
pending: '待履行',
finish: '已完成',
},
contractTypeEnum: {
main: '主合同',
sub: '子合同',
supplement: '补充合同',
},
reset: '重置',
query: '查询',
},
};

47
src/locales/lang/zh_CN/index.ts Normal file
View File

@ -0,0 +1,47 @@
import componentsLocale from 'tdesign-vue-next/es/locale/zh_CN';
import components from './components';
import layout from './layout';
import pages from './pages';
export default {
lang: '简体中文',
layout,
pages,
components,
constants: {
contract: {
name: '合同名称',
status: '合同状态',
num: '合同编号',
type: '合同类型',
typePlaceholder: '请输入类型',
payType: '合同收支类型',
amount: '合同金额',
amountPlaceholder: '请输入金额',
signDate: '合同签订日期',
effectiveDate: '合同生效日期',
endDate: '合同结束日期',
createDate: '合同创建时间',
company: '甲方',
employee: '乙方',
pay: '付款',
receive: '收款',
remark: '备注',
attachment: '附件',
statusOptions: {
fail: '审核失败',
auditPending: '待审核',
execPending: '待履行',
executing: '审核成功',
finish: '已完成',
},
typeOptions: {
main: '主合同',
sub: '子合同',
supplement: '补充合同',
},
},
},
componentsLocale,
};

52
src/locales/lang/zh_CN/layout.ts Normal file
View File

@ -0,0 +1,52 @@
export default {
header: {
code: '代码仓库',
help: '帮助文档',
user: '个人中心',
signOut: '退出登录',
setting: '系统设置',
},
notice: {
title: '通知中心',
clear: '清空',
setRead: '设为已读',
empty: '空',
emptyNotice: '暂无通知',
viewAll: '查看全部',
},
searchPlaceholder: '请输入搜索内容',
tagTabs: {
closeOther: '关闭其他',
closeLeft: '关闭左侧',
closeRight: '关闭右侧',
refresh: '刷新',
},
setting: {
title: '页面配置',
theme: {
mode: '主题模式',
color: '主题色',
options: {
light: '明亮',
dark: '暗黑',
auto: '跟随系统',
},
},
navigationLayout: '导航布局',
splitMenu: '分割菜单（混合模式下有效）',
fixedSidebar: '固定侧边栏',
element: {
title: '元素开关',
showHeader: '显示顶栏',
showBreadcrumb: '显示面包屑',
showFooter: '显示页脚',
useTagTabs: '展示多标签Tab页',
},
tips: '请复制后手动修改配置文件: /src/config/style.ts',
copy: {
title: '复制配置项',
success: '复制成功',
fail: '复制失败',
},
},
};

63
src/locales/lang/zh_CN/pages/dashboard-base.ts Normal file
View File

@ -0,0 +1,63 @@
export default {
title: '概览仪表盘',
outputOverview: {
title: '出入库概览',
subtitle: '(件)',
export: '导出数据',
month: {
input: '本月入库总计（件）',
output: '本月出库总计（件）',
},
since: '自从上周以来',
},
rankList: {
title: '销售订单排名',
week: '本周',
month: '近三月',
info: '详情',
},
topPanel: {
card1: '总收入',
card2: '总退款',
card3: '活跃用户（个）',
card4: '产生订单（个）',
cardTips: '自从上周以来',
analysis: {
title: '统计数据',
unit: '万元',
series1: '本月',
series2: '上月',
channels: '销售渠道',
channel1: '线上',
channel2: '门店',
channelTips: '销售占比',
},
},
saleColumns: {
index: '排名',
productName: '客户名称',
growUp: '较上周',
count: '订单量',
operation: '操作',
},
buyColumns: {
index: '排名',
productName: '供应商名称',
growUp: '较上周',
count: '订单量',
operation: '操作',
},
chart: {
week1: '周一',
week2: '周二',
week3: '周三',
week4: '周四',
week5: '周五',
week6: '周六',
week7: '周日',
max: '最大值',
min: '最小值',
thisMonth: '本月',
lastMonth: '上月',
},
};

44
src/locales/lang/zh_CN/pages/dashboard-detail.ts Normal file
View File

@ -0,0 +1,44 @@
export default {
topPanel: {
title: '本月采购申请情况',
quarter: '环比',
paneList: {
totalRequest: '总申请数（次）',
suppliers: '供应商数量（个）',
productCategory: '采购商品品类（类）',
applicant: '申请人数量（人）',
completionRate: '申请完成率（%）',
arrivalRate: '到货及时率（%）',
},
},
procurement: {
title: '采购商品申请趋势',
goods: {
cup: '杯子',
tea: '茶叶',
honey: '蜂蜜',
flour: '面粉',
coffeeMachine: '咖啡机',
massageMachine: '按摩仪',
},
},
ssl: 'SSL证书',
sslDescription: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部署',
satisfaction: {
title: '采购商品满意度分布',
export: '导出数据',
},
chart: {
week1: '周一',
week2: '周二',
week3: '周三',
week4: '周四',
week5: '周五',
week6: '周六',
week7: '周日',
max: '最大值',
min: '最小值',
thisMonth: '本月',
lastMonth: '上月',
},
};

20
src/locales/lang/zh_CN/pages/detail-base.ts Normal file
View File

@ -0,0 +1,20 @@
export default {
baseInfo: {
title: '基本信息',
},
changelog: {
title: '变更记录',
step1: {
title: '上传合同附件',
subtitle: '这里是提示文字',
},
step2: {
title: '修改合同金额',
subtitle: '这里是提示文字',
},
step3: {
title: '新建合同',
desc: '管理员-李川操作',
},
},
};

43
src/locales/lang/zh_CN/pages/detail-card.ts Normal file
View File

@ -0,0 +1,43 @@
export default {
baseInfo: {
title: '基本信息',
},
invoice: {
title: '发票进度',
step1: {
title: '申请提交',
content: '已于12月21日提交',
},
step2: {
title: '电子发票',
content: '预计1～3个工作日',
},
step3: {
title: '发票已邮寄',
content: '电子发票开出后7个工作日联系',
},
step4: {
title: '完成',
},
},
product: {
title: '产品目录',
add: '新增产品',
month: '月份',
quarter: '季度',
},
detail: {
title: '产品采购明细',
form: {
applyNo: '申请号',
product: '产品名称',
productNo: '产品编号',
operation: '操作',
department: '申请部门',
num: '采购数量',
createTime: '创建时间',
manage: '管理',
delete: '删除',
},
},
};

32
src/locales/lang/zh_CN/pages/detail-deploy.ts Normal file
View File

@ -0,0 +1,32 @@
export default {
deployTrend: {
title: '部署趋势',
warning: '告警情况',
thisMonth: '本月',
thisWeek: '本周',
lastMonth: '上月',
thisYear: '今年',
lastYear: '去年',
week1: '周一',
week2: '周二',
week3: '周三',
week4: '周四',
week5: '周五',
week6: '周六',
week7: '周日',
},
projectList: {
title: '项目列表',
dialog: {
title: '基本信息',
},
table: {
name: '名称',
admin: '管理员',
createTime: '创建时间',
operation: '操作',
manage: '管理',
delete: '删除',
},
},
};

9
src/locales/lang/zh_CN/pages/detail-secondary.ts Normal file
View File

@ -0,0 +1,9 @@
export default {
read: '已读通知',
unread: '未读通知',
all: '全部通知',
setRead: '设为已读',
setUnread: '设为未读',
delete: '删除通知',
empty: '暂无通知',
};

27
src/locales/lang/zh_CN/pages/form-base.ts Normal file
View File

@ -0,0 +1,27 @@
export default {
title: '合同信息',
contractName: '合同名称',
contractStatus: '合同状态',
contractNum: '合同编号',
contractType: '合同类型',
contractTypePlaceholder: '请输入类型',
contractPayType: '合同收支类型',
contractAmount: '合同金额',
contractAmountPlaceholder: '请输入金额',
contractSignDate: '合同签订日期',
contractEffectiveDate: '合同生效日期',
contractEndDate: '合同结束日期',
company: '甲方',
employee: '乙方',
pay: '付款',
receive: '收款',
upload: '上传文件',
uploadFile: '上传合同',
uploadTips: '请上传pdf文件，大小在60M以内',
otherInfo: '其他信息',
remark: '备注',
remarkPlaceholder: '请输入备注',
notaryPublic: '公证人',
confirm: '确认提交',
cancel: '取消',
};

54
src/locales/lang/zh_CN/pages/form-step.ts Normal file
View File

@ -0,0 +1,54 @@
export default {
step1: {
title: '提交申请',
subtitle: '已于12月21日提交',
rules: '发票开具规则',
rule1:
'1、申请开票后，电子发票在1～3个工作日内开具；增值税专用发票（纸质）如资质审核通过，将在电子发票开具后10个工作日内为您寄出；',
rule2: '2、开票金额为您实际支付金额；',
rule3: '3、如有疑问请直接联系：13300001111。',
contractName: '合同名称',
contractTips: '请选择合同名称',
invoiceType: '发票类型',
amount: '开票金额',
submit: '提交申请',
},
step2: {
title: '电子信息',
subtitle: '如有疑问联系客服',
invoiceTitle: '发票抬头',
taxNum: '纳税人识别号',
address: '地址',
bank: '开户行',
bankAccount: '银行账号',
email: '邮箱',
tel: '手机号',
titlePlaceholder: '请输入电子信息',
subtitlePlaceholder: '请输入如有疑问联系客服',
invoiceTitlePlaceholder: '请输入发票抬头',
taxNumPlaceholder: '请输入纳税人识别号',
addressPlaceholder: '请输入地址',
bankPlaceholder: '请输入开户行',
bankAccountPlaceholder: '请输入银行账号',
emailPlaceholder: '请输入邮箱',
telPlaceholder: '请输入手机号',
},
step3: {
title: '发票已邮寄',
subtitle: '电子发票开出后联系',
consignee: '收货人',
mobileNum: '手机号码',
deliveryAddress: '收货地址',
fullAddress: '详细地址',
},
step4: {
title: '完成申请',
subtitle: '如有疑问联系客服',
finishTitle: '完成开票申请',
finishTips: '预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待',
reapply: '再次申请',
check: '查看进度',
},
preStep: '上一步',
nextStep: '下一步',
};

33
src/locales/lang/zh_CN/pages/index.ts Normal file
View File

@ -0,0 +1,33 @@
import dashboardBase from './dashboard-base';
import dashboardDetail from './dashboard-detail';
import detailBase from './detail-base';
import detailCard from './detail-card';
import detailDeploy from './detail-deploy';
import detailSecondary from './detail-secondary';
import formBase from './form-base';
import formStep from './form-step';
import listBase from './list-base';
import listCard from './list-card';
import listFilter from './list-filter';
import listTree from './list-tree';
import login from './login';
import result from './result';
import user from './user';
export default {
dashboardBase,
dashboardDetail,
listBase,
listCard,
listFilter,
listTree,
detailBase,
detailCard,
detailDeploy,
detailSecondary,
formBase,
formStep,
user,
login,
result,
};

25
src/locales/lang/zh_CN/pages/list-base.ts Normal file
View File

@ -0,0 +1,25 @@
export default {
export: '导出合同',
create: '新建合同',
select: '已选',
items: '项',
contractName: '合同名称',
contractStatus: '合同状态',
contractNum: '合同编号',
contractType: '合同类型',
contractPayType: '合同收支类型',
contractAmount: '合同金额',
operation: '操作',
detail: '详情',
delete: '删除',
pay: '付款',
receive: '收款',
placeholder: '请输入内容搜索',
contractStatusEnum: {
fail: '审核失败',
audit: '待审核',
executing: '履行中',
pending: '待履行',
finish: '已完成',
},
};

13
src/locales/lang/zh_CN/pages/list-card.ts Normal file
View File

@ -0,0 +1,13 @@
export default {
create: '新建产品',
placeholder: '请输入内容搜索',
productName: '产品名称',
productStatus: '产品状态',
productDescription: '产品描述',
productType: '产品类型',
productRemark: '备注',
productStatusEnum: {
off: '停用',
on: '启用',
},
};

1
src/locales/lang/zh_CN/pages/list-filter.ts Normal file
View File

@ -0,0 +1 @@
export default {};

3
src/locales/lang/zh_CN/pages/list-tree.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
placeholder: '请输入内容进行搜索',
};

27
src/locales/lang/zh_CN/pages/login.ts Normal file
View File

@ -0,0 +1,27 @@
export default {
loginTitle: '登录到',
noAccount: '没有账号吗?',
existAccount: '已有账号?',
createAccount: '注册新账号',
remember: '记住账号',
forget: '忘记账号',
signIn: '登录',
register: '注册',
refresh: '刷新',
wechatLogin: '使用微信扫一扫登录',
accountLogin: '使用账号登录',
phoneLogin: '使用手机号登录',
input: {
account: '请输入账号',
password: '请输入登录密码',
phone: '请输入手机号',
verification: '请输入验证码',
},
required: {
account: '账号必填',
phone: '手机号必填',
password: '密码必填',
verification: '验证码必填',
},
sendVerification: '发送验证码',
};

43
src/locales/lang/zh_CN/pages/result.ts Normal file
View File

@ -0,0 +1,43 @@
export default {
403: {
tips: '抱歉，您无权限访问此页面，企业微信联系创建者',
back: '返回首页',
},
404: {
subtitle: '抱歉，您访问的页面不存在',
back: '返回首页',
},
500: {
subtitle: '抱歉，服务器出错啦',
back: '返回首页',
},
fail: {
title: '创建失败',
subtitle: '抱歉，您的项目创建失败，企业微信联系检查创建者权限，或返回修改。',
back: '回到首页',
progress: '返回修改',
},
success: {
title: '项目已创建成功',
subtitle: '可以联系负责人分发应用',
back: '回到首页',
progress: '查看进度',
},
maintenance: {
title: '系统维护中',
subtitle: '系统维护中，请稍后再试',
back: '回到首页',
},
browserIncompatible: {
title: '浏览器不兼容',
subtitle: '抱歉，您正在使用的浏览器版本过低，无法打开当前网页。',
back: '回到首页',
recommend: 'TDesign Starter 推荐以下主流浏览器',
},
networkError: {
title: '网络异常',
subtitle: '网络异常, 请稍后重试',
back: '回到首页',
reload: '重新加载',
},
};

22
src/locales/lang/zh_CN/pages/user.ts Normal file
View File

@ -0,0 +1,22 @@
export default {
markDay: '下午好，今天是你加入鹅厂的第 100 天',
personalInfo: {
title: '个人信息',
position: '港澳业务拓展组员工 直客销售 ',
desc: {
phone: '座机',
mobile: '手机',
seat: '座位',
email: '邮箱',
position: '职位',
leader: '上级',
entity: '主体',
joinDay: '入职时间',
group: '所属团队',
},
},
visitData: '首页访问数据',
contentList: '内容列表',
teamMember: '团队成员',
serviceProduction: '服务产品',
};

27
src/locales/useLocale.ts Normal file
View File

@ -0,0 +1,27 @@
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { i18n, langCode, localeConfigKey } from '@/locales/index';
export function useLocale() {
const { locale } = useI18n({ useScope: 'global' });
function changeLocale(lang: string) {
// 如果切换的语言不在对应语言文件里则默认为简体中文
if (!langCode.includes(lang)) {
lang = 'zh_CN';
}
locale.value = lang;
localStorage.setItem(localeConfigKey, lang);
}
const getComponentsLocale = computed(() => {
return i18n.global.getLocaleMessage(locale.value).componentsLocale;
});
return {
changeLocale,
getComponentsLocale,
locale,
};
}

2
src/main.ts
View File

@ -5,6 +5,7 @@ import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { store } from './store';
import i18n from './locales';
import 'tdesign-vue-next/es/style/index.css';
import '@/style/index.less';
@ -18,5 +19,6 @@ const app = createApp(App);
app.use(TDesign);
app.use(store);
app.use(router);
app.use(i18n);
app.mount('#app');

18
src/pages/dashboard/base/components/MiddleChart.vue
View File

@ -1,8 +1,13 @@
<template>
<t-row :gutter="16" class="row-container">
<t-col :xs="12" :xl="9">
<t-card title="统计数据" :subtitle="`(万元)${currentMonth}`" class="dashboard-chart-card" :bordered="false">
<template #option>
<t-card
:title="$t('pages.dashboardBase.topPanel.analysis.title')"
:subtitle="currentMonth"
class="dashboard-chart-card"
:bordered="false"
>
<template #actions>
<div class="dashboard-chart-title-container">
<t-date-range-picker
class="card-date-picker-container"
@ -21,11 +26,16 @@
</t-card>
</t-col>
<t-col :xs="12" :xl="3">
<t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
<t-card
:title="$t('pages.dashboardBase.topPanel.analysis.channels')"
:subtitle="currentMonth"
class="dashboard-chart-card"
:bordered="false"
>
<div
id="countContainer"
:style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
class="dashboard-chart-container"
:style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
/>
</t-card>
</t-col>

22
src/pages/dashboard/base/components/OutputOverview.vue
View File

@ -4,8 +4,8 @@
<t-col :xs="12" :xl="9">
<t-card
:bordered="false"
title="出入库概览"
subtitle="(件)"
:title="$t('pages.dashboardBase.outputOverview.title')"
:subtitle="$t('pages.dashboardBase.outputOverview.subtitle')"
:class="{ 'dashboard-overview-card': true, 'overview-panel': true }"
>
<template #actions>
@ -23,26 +23,34 @@
<t-col :xs="12" :xl="3">
<t-card :bordered="false" :class="{ 'dashboard-overview-card': true, 'export-panel': true }">
<template #actions>
<t-button>导出数据</t-button>
<t-button>{{ $t('pages.dashboardBase.outputOverview.export') }}</t-button>
</template>
<t-row>
<t-col :xs="6" :xl="12">
<t-card :bordered="false" subtitle="本月出库总计（件）" class="inner-card">
<t-card
:bordered="false"
:subtitle="$t('pages.dashboardBase.outputOverview.month.input')"
class="inner-card"
>
<div class="inner-card__content">
<div class="inner-card__content-title">1726</div>
<div class="inner-card__content-footer">
自从上周以来
{{ $t('pages.dashboardBase.outputOverview.since') }}
<trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
</div>
</div>
</t-card>
</t-col>
<t-col :xs="6" :xl="12">
<t-card :bordered="false" subtitle="本月入库总计（件）" class="inner-card">
<t-card
:bordered="false"
:subtitle="$t('pages.dashboardBase.outputOverview.month.output')"
class="inner-card"
>
<div class="inner-card__content">
<div class="inner-card__content-title">226</div>
<div class="inner-card__content-footer">
自从上周以来
{{ $t('pages.dashboardBase.outputOverview.since') }}
<trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
</div>
</div>

100
src/pages/dashboard/base/components/RankList.vue
View File

@ -1,11 +1,11 @@
<template>
<t-row :gutter="16" class="row-container">
<t-col :xs="12" :xl="6">
<t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
<t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
<template #actions>
<t-radio-group default-value="dateVal" variant="default-filled">
<t-radio-button value="dateVal">本周</t-radio-button>
<t-radio-button value="monthVal">近三个月</t-radio-button>
<t-radio-button value="dateVal">{{ $t('pages.dashboardBase.rankList.week') }}</t-radio-button>
<t-radio-button value="monthVal">{{ $t('pages.dashboardBase.rankList.month') }}</t-radio-button>
</t-radio-group>
</template>
<t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
@ -20,17 +20,19 @@
</span>
</template>
<template #operation="slotProps">
<t-link theme="primary" @click="rehandleClickOp(slotProps)">详情</t-link>
<t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
$t('pages.dashboardBase.rankList.info')
}}</t-link>
</template>
</t-table>
</t-card>
</t-col>
<t-col :xs="12" :xl="6">
<t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
<t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
<template #actions>
<t-radio-group default-value="dateVal" variant="default-filled">
<t-radio-button value="dateVal">本周</t-radio-button>
<t-radio-button value="monthVal">近三个月</t-radio-button>
<t-radio-button value="dateVal">{{ $t('pages.dashboardBase.rankList.week') }}</t-radio-button>
<t-radio-button value="monthVal">{{ $t('pages.dashboardBase.rankList.month') }}</t-radio-button>
</t-radio-group>
</template>
<t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
@ -43,7 +45,9 @@
<trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
</template>
<template #operation="slotProps">
<t-link theme="primary" @click="rehandleClickOp(slotProps)">详情</t-link>
<t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
$t('pages.dashboardBase.rankList.info')
}}</t-link>
</template>
</t-table>
</t-card>
@ -52,10 +56,84 @@
</template>
<script setup lang="ts">
// 导入样式
import Trend from '@/components/trend/index.vue';
import type { TdBaseTableProps } from 'tdesign-vue-next';
import { BUY_COLUMNS, BUY_TEND_LIST, SALE_COLUMNS, SALE_TEND_LIST } from '../constants';
import Trend from '@/components/trend/index.vue';
import { t } from '@/locales';
import { BUY_TEND_LIST, SALE_TEND_LIST } from '../constants';
const SALE_COLUMNS: TdBaseTableProps['columns'] = [
{
align: 'center',
colKey: 'index',
title: t('pages.dashboardBase.saleColumns.index'),
width: 70,
fixed: 'left',
},
{
align: 'left',
ellipsis: true,
colKey: 'productName',
title: t('pages.dashboardBase.saleColumns.productName'),
width: 150,
},
{
align: 'center',
colKey: 'growUp',
width: 70,
title: t('pages.dashboardBase.saleColumns.growUp'),
},
{
align: 'center',
colKey: 'count',
title: t('pages.dashboardBase.saleColumns.count'),
width: 70,
},
{
align: 'center',
colKey: 'operation',
title: t('pages.dashboardBase.saleColumns.operation'),
width: 70,
fixed: 'right',
},
];
const BUY_COLUMNS: TdBaseTableProps['columns'] = [
{
align: 'center',
colKey: 'index',
title: t('pages.dashboardBase.buyColumns.index'),
width: 70,
fixed: 'left',
},
{
align: 'left',
ellipsis: true,
colKey: 'productName',
width: 150,
title: t('pages.dashboardBase.buyColumns.productName'),
},
{
align: 'center',
colKey: 'growUp',
width: 70,
title: t('pages.dashboardBase.buyColumns.growUp'),
},
{
align: 'center',
colKey: 'count',
title: t('pages.dashboardBase.buyColumns.count'),
width: 70,
},
{
align: 'center',
colKey: 'operation',
title: t('pages.dashboardBase.buyColumns.operation'),
width: 70,
fixed: 'right',
},
];
const rehandleClickOp = (val: MouseEvent) => {
console.log(val);

31
src/pages/dashboard/base/components/TopPanel.vue
View File

@ -32,7 +32,7 @@
<template #footer>
<div class="dashboard-item-bottom">
<div class="dashboard-item-block">
自从上周以来
{{ $t('pages.dashboardBase.topPanel.cardTips') }}
<trend
class="dashboard-item-trend"
:type="item.upTrend ? 'up' : 'down'"
@ -63,10 +63,10 @@ import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
// 导入样式
import Trend from '@/components/trend/index.vue';
import { t } from '@/locales';
import { useSettingStore } from '@/store';
import { changeChartsTheme } from '@/utils/color';
import { PANE_LIST } from '../constants';
import { constructInitDashboardDataset } from '../index';
echarts.use([LineChart, BarChart, CanvasRenderer]);
@ -74,6 +74,33 @@ echarts.use([LineChart, BarChart, CanvasRenderer]);
const store = useSettingStore();
const resizeTime = ref(1);
const PANE_LIST = [
{
title: t('pages.dashboardBase.topPanel.card1'),
number: '¥ 28,425.00',
upTrend: '20.5%',
leftType: 'echarts-line',
},
{
title: t('pages.dashboardBase.topPanel.card2'),
number: '¥ 768.00',
downTrend: '20.5%',
leftType: 'echarts-bar',
},
{
title: t('pages.dashboardBase.topPanel.card3'),
number: '1126',
upTrend: '20.5%',
leftType: 'icon-usergroup',
},
{
title: t('pages.dashboardBase.topPanel.card4'),
number: 527,
downTrend: '20.5%',
leftType: 'icon-file-paste',
},
];
// moneyCharts
let moneyContainer: HTMLElement;
let moneyChart: echarts.ECharts;

109
src/pages/dashboard/base/constants.ts
View File

@ -1,13 +1,3 @@
import { TdBaseTableProps } from 'tdesign-vue-next';
interface DashboardPanel {
title: string;
number: string | number;
leftType: string;
upTrend?: string;
downTrend?: string;
}
interface TendItem {
growUp?: number;
productName: string;
@ -15,33 +5,6 @@ interface TendItem {
date: string;
}
export const PANE_LIST: Array<DashboardPanel> = [
{
title: '总收入',
number: '¥ 28,425.00',
upTrend: '20.5%',
leftType: 'echarts-line',
},
{
title: '总退款',
number: '¥ 768.00',
downTrend: '20.5%',
leftType: 'echarts-bar',
},
{
title: '活跃用户（个）',
number: '1126',
upTrend: '20.5%',
leftType: 'icon-usergroup',
},
{
title: '产生订单（个）',
number: 527,
downTrend: '20.5%',
leftType: 'icon-file-paste',
},
];
export const SALE_TEND_LIST: Array<TendItem> = [
{
growUp: 1,
@ -119,75 +82,3 @@ export const BUY_TEND_LIST: Array<TendItem> = [
date: '2021-09-12',
},
];
export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
{
align: 'center',
colKey: 'index',
title: '排名',
width: 70,
fixed: 'left',
},
{
align: 'left',
ellipsis: true,
colKey: 'productName',
title: '客户名称',
width: 150,
},
{
align: 'center',
colKey: 'growUp',
width: 70,
title: '较上周',
},
{
align: 'center',
colKey: 'count',
title: '订单量',
width: 70,
},
{
align: 'center',
colKey: 'operation',
title: '操作',
width: 70,
fixed: 'right',
},
];
export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
{
align: 'center',
colKey: 'index',
title: '排名',
width: 70,
fixed: 'left',
},
{
align: 'left',
ellipsis: true,
colKey: 'productName',
width: 150,
title: '供应商名称',
},
{
align: 'center',
colKey: 'growUp',
width: 70,
title: '较上周',
},
{
align: 'center',
colKey: 'count',
title: '订单量',
width: 70,
},
{
align: 'center',
colKey: 'operation',
title: '操作',
width: 70,
fixed: 'right',
},
];

20
src/pages/dashboard/base/index.ts
View File

@ -2,12 +2,14 @@ import dayjs from 'dayjs';
import { EChartsOption } from 'echarts';
import { TChartColor } from '@/config/color';
import { t } from '@/locales/index';
import { getRandomArray } from '@/utils/charts';
import { getChartListColor } from '@/utils/color';
/** 首页 dashboard 折线图 */
export function constructInitDashboardDataset(type: string) {
const dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const datasetAxis = {
xAxis: {
type: 'category',
@ -162,16 +164,16 @@ export function constructInitDataset({
left: 'center',
bottom: '0',
orient: 'horizontal',
data: ['本月', '上月'],
data: [t('pages.dashboardBase.chart.thisMonth'), t('pages.dashboardBase.chart.lastMonth')],
},
series: [
{
name: '本月',
name: t('pages.dashboardBase.chart.thisMonth'),
data: outArray,
type: 'bar',
},
{
name: '上月',
name: t('pages.dashboardBase.chart.lastMonth'),
data: inArray,
type: 'bar',
},
@ -231,7 +233,7 @@ export function getLineChartDataSet({
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: ['本月', '上月'],
data: [t('pages.dashboardBase.chart.thisMonth'), t('pages.dashboardBase.chart.lastMonth')],
textStyle: {
fontSize: 12,
color: placeholderColor,
@ -263,7 +265,7 @@ export function getLineChartDataSet({
},
series: [
{
name: '本月',
name: t('pages.dashboardBase.chart.thisMonth'),
data: outArray,
type: 'line',
smooth: false,
@ -279,7 +281,7 @@ export function getLineChartDataSet({
},
},
{
name: '上月',
name: t('pages.dashboardBase.chart.lastMonth'),
data: inArray,
type: 'line',
smooth: false,
@ -347,7 +349,7 @@ export function getPieChartDataSet({
label: {
show: true,
position: 'center',
formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
formatter: ['{value|{d}%}', '{name|{b}}'].join('\n'),
rich: {
value: {
color: textColor,
@ -388,9 +390,9 @@ export function getPieChartDataSet({
data: [
{
value: 1048,
name: '线上',
name: t('pages.dashboardBase.topPanel.analysis.channel1'),
},
{ value: radius * 7, name: '门店' },
{ value: radius * 7, name: t('pages.dashboardBase.topPanel.analysis.channel2') },
],
},
],

22
src/pages/dashboard/detail/constants.ts
View File

@ -1,32 +1,34 @@
import { t } from '@/locales';
export const PANE_LIST_DATA = [
{
title: '总申请数（次）',
title: t('pages.dashboardDetail.topPanel.paneList.totalRequest'),
number: '1126',
upTrend: '10%',
},
{
title: '供应商数量（个）',
title: t('pages.dashboardDetail.topPanel.paneList.suppliers'),
number: '13',
downTrend: '13%',
},
{
title: '采购商品品类（类）',
title: t('pages.dashboardDetail.topPanel.paneList.productCategory'),
number: '4',
upTrend: '10%',
},
{
title: '申请人数量（人）',
title: t('pages.dashboardDetail.topPanel.paneList.applicant'),
number: 90,
downTrend: '44%',
leftType: 'icon-file-paste',
},
{
title: '申请完成率（%）',
title: t('pages.dashboardDetail.topPanel.paneList.completionRate'),
number: 80.5,
upTrend: '70%',
},
{
title: '到货及时率（%）',
title: t('pages.dashboardDetail.topPanel.paneList.arrivalRate'),
number: 78,
upTrend: '16%',
},
@ -34,17 +36,17 @@ export const PANE_LIST_DATA = [
export const PRODUCT_LIST = [
{
description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
description: t('pages.dashboardDetail.sslDescription'),
index: 1,
isSetup: true,
name: 'SSL证书',
name: t('pages.dashboardDetail.ssl'),
type: 4,
},
{
description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
description: t('pages.dashboardDetail.sslDescription'),
index: 1,
isSetup: true,
name: 'SSL证书',
name: t('pages.dashboardDetail.ssl'),
type: 4,
},
];

32
src/pages/dashboard/detail/index.ts
View File

@ -1,9 +1,9 @@
import dayjs from 'dayjs';
import { TChartColor } from '@/config/color';
import { t } from '@/locales';
import { getDateArray, getRandomArray } from '@/utils/charts';
import { getChartListColor } from '@/utils/color';
/**
* 散点图数据
*
@ -54,7 +54,6 @@ export function getScatterDataSet({
},
yAxis: {
type: 'value',
// splitLine: { show: false},
axisLabel: {
color: placeholderColor,
},
@ -89,7 +88,10 @@ export function getScatterDataSet({
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: ['按摩仪', '咖啡机'],
data: [
t(`pages.dashboardDetail.procurement.goods.massageMachine`),
t(`pages.dashboardDetail.procurement.goods.coffeeMachine`),
],
itemHeight: 8,
itemWidth: 8,
textStyle: {
@ -99,13 +101,13 @@ export function getScatterDataSet({
},
series: [
{
name: '按摩仪',
name: t(`pages.dashboardDetail.procurement.goods.massageMachine`),
symbolSize: 10,
data: outArray.reverse(),
type: 'scatter',
},
{
name: '咖啡机',
name: t(`pages.dashboardDetail.procurement.goods.coffeeMachine`),
symbolSize: 10,
data: inArray.concat(inArray.reverse()),
type: 'scatter',
@ -120,7 +122,10 @@ export function getFolderLineDataSet({
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
let dateArray = [];
for (let i = 1; i < 7; i++) {
dateArray.push(t(`pages.dashboardDetail.chart.week${i}`));
}
if (dateTime.length > 0) {
const divideNum = 7;
dateArray = getDateArray(dateTime, divideNum);
@ -137,7 +142,12 @@ export function getFolderLineDataSet({
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: ['杯子', '茶叶', '蜂蜜', '面粉'],
data: [
t(`pages.dashboardDetail.procurement.goods.cup`),
t(`pages.dashboardDetail.procurement.goods.tea`),
t(`pages.dashboardDetail.procurement.goods.honey`),
t(`pages.dashboardDetail.procurement.goods.flour`),
],
textStyle: {
fontSize: 12,
color: placeholderColor,
@ -176,7 +186,7 @@ export function getFolderLineDataSet({
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '杯子',
name: t(`pages.dashboardDetail.procurement.goods.cup`),
stack: '总量',
data: [
getRandomArray(),
@ -197,7 +207,7 @@ export function getFolderLineDataSet({
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '茶叶',
name: t(`pages.dashboardDetail.procurement.goods.tea`),
stack: '总量',
data: [
getRandomArray(),
@ -218,7 +228,7 @@ export function getFolderLineDataSet({
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '蜂蜜',
name: t(`pages.dashboardDetail.procurement.goods.honey`),
stack: '总量',
data: [
getRandomArray(),
@ -239,7 +249,7 @@ export function getFolderLineDataSet({
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '面粉',
name: t(`pages.dashboardDetail.procurement.goods.flour`),
stack: '总量',
data: [
getRandomArray(),

15
src/pages/dashboard/detail/index.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="dashboard-panel-detail">
<t-card title="本月采购申请情况" class="dashboard-detail-card" :bordered="false">
<t-card :title="$t('pages.dashboardDetail.topPanel.title')" class="dashboard-detail-card" :bordered="false">
<t-row :gutter="[16, 16]">
<t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
<t-card class="dashboard-list-card" :description="item.title">
<div class="dashboard-list-card__number">{{ item.number }}</div>
<div class="dashboard-list-card__text">
<div class="dashboard-list-card__text-left">
环比
{{ $t('pages.dashboardDetail.topPanel.quarter') }}
<trend class="icon" :type="item.upTrend ? 'up' : 'down'" :describe="item.upTrend || item.downTrend" />
</div>
<t-icon name="chevron-right" />
@ -18,7 +18,7 @@
</t-card>
<t-row :gutter="[16, 16]" class="row-margin">
<t-col :xs="12" :xl="9">
<t-card class="dashboard-detail-card" title="采购商品申请趋势" subtitle="(件)" :bordered="false">
<t-card class="dashboard-detail-card" :title="$t('pages.dashboardDetail.procurement.title')" :bordered="false">
<template #actions>
<t-date-range-picker
class="card-date-picker-container"
@ -41,7 +41,11 @@
/>
</t-col>
</t-row>
<t-card :class="['dashboard-detail-card', 'row-margin']" title="采购商品满意度分布" :bordered="false">
<t-card
:class="['dashboard-detail-card', 'row-margin']"
:title="$t('pages.dashboardDetail.satisfaction.title')"
:bordered="false"
>
<template #actions>
<t-date-range-picker
class="card-date-picker-container"
@ -51,7 +55,7 @@
style="display: inline-block; margin-right: var(--td-comp-margin-s); width: 248px"
@change="onSatisfyChange"
/>
<t-button class="card-date-button"> 导出数据 </t-button>
<t-button class="card-date-button"> {{ $t('pages.dashboardDetail.satisfaction.export') }} </t-button>
</template>
<div id="scatterContainer" style="width: 100%; height: 434px" />
</t-card>
@ -258,6 +262,7 @@ const onMaterialChange = (value: string[]) => {
.t-icon {
font-size: var(--td-comp-size-xxxs);
}
&-left {
display: flex;

87
src/pages/detail/advanced/constants.ts
View File

@ -1,11 +1,13 @@
import { t } from '@/locales';
export const BASE_INFO_DATA = [
{
name: '合同名称',
name: t('constants.contract.name'),
value: '总部办公用品采购项目',
type: null,
},
{
name: '合同状态',
name: t('constants.contract.status'),
value: '履行中',
type: {
key: 'contractStatus',
@ -13,52 +15,52 @@ export const BASE_INFO_DATA = [
},
},
{
name: '合同编号',
name: t('constants.contract.num'),
value: 'BH00010',
type: null,
},
{
name: '合同类型',
value: '主合同',
name: t('constants.contract.type'),
value: t('constants.contract.typeOptions.main'),
type: null,
},
{
name: '合同收付类型',
value: '付款',
name: t('constants.contract.payType'),
value: t('constants.contract.pay'),
type: null,
},
{
name: '合同金额',
value: '5,000,000元',
name: t('constants.contract.amount'),
value: '¥ 5,000,000',
type: null,
},
{
name: '甲方',
name: t('constants.contract.company'),
value: '腾讯科技（深圳）有限公司',
type: null,
},
{
name: '乙方',
name: t('constants.contract.employee'),
value: '欧尚',
type: null,
},
{
name: '合同签订日期',
name: t('constants.contract.signDate'),
value: '2020-12-20',
type: null,
},
{
name: '合同生效日期',
name: t('constants.contract.effectiveDate'),
value: '2021-01-20',
type: null,
},
{
name: '合同结束日期',
name: t('constants.contract.endDate'),
value: '2022-12-20',
type: null,
},
{
name: '合同附件',
name: t('constants.contract.attachment'),
value: '总部办公用品采购项目合同.pdf',
type: {
key: 'contractAnnex',
@ -66,68 +68,17 @@ export const BASE_INFO_DATA = [
},
},
{
name: '备注',
name: t('constants.contract.remark'),
value: '--',
type: null,
},
{
name: '创建时间',
name: t('constants.contract.createDate'),
value: '2020-12-22 10:00:00',
type: null,
},
];
export const TABLE_COLUMNS_DATA = [
{
width: 280,
ellipsis: true,
colKey: 'index',
title: '申请号',
sorter: (a: any, b: any) => a.index.substr(3) - b.index.substr(3),
},
{
width: 200,
ellipsis: true,
colKey: 'pdName',
title: '产品名称',
sorter: (a: any, b: any) => a.pdName.length - b.pdName.length,
},
{
width: 200,
ellipsis: true,
colKey: 'pdNum',
title: '产品编号',
},
{
width: 160,
ellipsis: true,
colKey: 'purchaseNum',
title: '采购数量',
sorter: (a: any, b: any) => a.purchaseNum - b.purchaseNum,
},
{
width: 160,
ellipsis: true,
colKey: 'adminName',
title: '申请部门',
},
{
width: 200,
ellipsis: true,
colKey: 'updateTime',
title: '创建时间',
sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left' as const,
fixed: 'right' as const,
width: 200,
className: 'test2',
colKey: 'op',
title: '操作',
},
];
export const PRODUCT_LIST = [
{
name: 'MacBook Pro 2021',

95
src/pages/detail/advanced/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="detail-advanced">
<t-card title="基本信息" :bordered="false">
<t-card :title="$t('pages.detailCard.baseInfo.title')" :bordered="false">
<div class="info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1>
@ -18,23 +18,32 @@
</t-card>
<!-- 发票进度 -->
<t-card title="发票进度" class="container-base-margin-top" :bordered="false">
<t-card :title="$t('pages.detailCard.invoice.title')" class="container-base-margin-top" :bordered="false">
<t-row justify="space-between">
<t-steps :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-step-item
:title="$t('pages.detailCard.invoice.step1.title')"
:content="$t('pages.detailCard.invoice.step1.content')"
/>
<t-step-item
:title="$t('pages.detailCard.invoice.step2.title')"
:content="$t('pages.detailCard.invoice.step2.content')"
/>
<t-step-item
:title="$t('pages.detailCard.invoice.step3.title')"
:content="$t('pages.detailCard.invoice.step3.content')"
/>
<t-step-item :title="$t('pages.detailCard.invoice.step4.title')" />
</t-steps>
</t-row>
</t-card>
<!-- 产品目录 -->
<t-card title="产品目录" class="container-base-margin-top" :bordered="false">
<template #option>
<t-card :title="$t('pages.detailCard.product.title')" class="container-base-margin-top" :bordered="false">
<template #actions>
<t-radio-group default-value="dateVal">
<t-radio-button value="dateVal"> 季度 </t-radio-button>
<t-radio-button value="monthVal"> 月份 </t-radio-button>
<t-radio-button value="dateVal"> {{ $t('pages.detailCard.product.quarter') }} </t-radio-button>
<t-radio-button value="monthVal"> {{ $t('pages.detailCard.product.month') }} </t-radio-button>
</t-radio-group>
</template>
<t-row :gutter="16" class="product-block-container">
@ -42,7 +51,7 @@
<div class="product-add">
<div class="product-sub">
<t-icon name="add" class="product-sub-icon" />
<span>新增产品</span>
<span>{{ $t('pages.detailCard.product.add') }}</span>
</div>
</div>
</t-col>
@ -53,7 +62,7 @@
</t-card>
<!-- 产品采购明细 -->
<t-card title="产品采购明细" class="container-base-margin-top" :bordered="false">
<t-card :title="$t('pages.detailCard.detail.title')" class="container-base-margin-top" :bordered="false">
<t-table
:columns="columns"
:data="data"
@ -88,8 +97,10 @@
<template #op="slotProps">
<t-space>
<t-link theme="primary" @click="listClick()">管理</t-link>
<t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
<t-link theme="primary" @click="listClick()">{{ t('pages.detailCard.detail.form.manage') }}</t-link>
<t-link theme="danger" @click="deleteClickOp(slotProps)">{{
t('pages.detailCard.detail.form.delete')
}}</t-link>
</t-space>
</template>
@ -99,7 +110,7 @@
</t-table>
</t-card>
<t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
<t-dialog v-model:visible="visible" :header="$t('pages.detailCard.baseInfo.title')" @confirm="onConfirm">
<template #body>
<div class="dialog-info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
@ -130,9 +141,61 @@ export default {
import { onMounted, ref } from 'vue';
import { getPurchaseList } from '@/api/detail';
import { t } from '@/locales';
import Product from './components/Product.vue';
import { BASE_INFO_DATA, PRODUCT_LIST, TABLE_COLUMNS_DATA as columns } from './constants';
import { BASE_INFO_DATA, PRODUCT_LIST } from './constants';
const columns = [
{
width: 280,
ellipsis: true,
colKey: 'index',
title: t('pages.detailCard.detail.form.applyNo'),
sorter: (a: any, b: any) => a.index.substr(3) - b.index.substr(3),
},
{
width: 200,
ellipsis: true,
colKey: 'pdName',
title: t('pages.detailCard.detail.form.product'),
sorter: (a: any, b: any) => a.pdName.length - b.pdName.length,
},
{
width: 200,
ellipsis: true,
colKey: 'pdNum',
title: t('pages.detailCard.detail.form.productNo'),
},
{
width: 160,
ellipsis: true,
colKey: 'purchaseNum',
title: t('pages.detailCard.detail.form.num'),
sorter: (a: any, b: any) => a.purchaseNum - b.purchaseNum,
},
{
width: 160,
ellipsis: true,
colKey: 'adminName',
title: t('pages.detailCard.detail.form.department'),
},
{
width: 200,
ellipsis: true,
colKey: 'updateTime',
title: t('pages.detailCard.detail.form.createTime'),
sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left' as const,
fixed: 'right' as const,
width: 200,
className: 'test2',
colKey: 'op',
title: t('pages.detailCard.detail.form.operation'),
},
];
const data = ref([]);
const pagination = ref({

78
src/pages/detail/base/constants.ts
View File

@ -1,78 +0,0 @@
export const BASE_INFO_DATA = [
{
name: '合同名称',
value: '总部办公用品采购项目',
type: null,
},
{
name: '合同状态',
value: '履行中',
type: {
key: 'contractStatus',
value: 'inProgress',
},
},
{
name: '合同编号',
value: 'BH00010',
type: null,
},
{
name: '合同类型',
value: '主合同',
type: null,
},
{
name: '合同收付类型',
value: '付款',
type: null,
},
{
name: '合同金额',
value: '5,000,000元',
type: null,
},
{
name: '甲方',
value: '腾讯科技（深圳）有限公司',
type: null,
},
{
name: '乙方',
value: '欧尚',
type: null,
},
{
name: '合同签订日期',
value: '2020-12-20',
type: null,
},
{
name: '合同生效日期',
value: '2021-01-20',
type: null,
},
{
name: '合同结束日期',
value: '2022-12-20',
type: null,
},
{
name: '合同附件',
value: '总部办公用品采购项目合同.pdf',
type: {
key: 'contractAnnex',
value: 'pdf',
},
},
{
name: '备注',
value: '--',
type: null,
},
{
name: '创建时间',
value: '2020-12-22 10:00:00',
type: null,
},
];

60
src/pages/detail/base/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="detail-base">
<t-card title="基本信息" :bordered="false">
<t-card :title="$t('pages.detailBase.baseInfo.title')" :bordered="false">
<div class="info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1>
@ -17,11 +17,20 @@
</div>
</t-card>
<t-card title="变更记录" class="container-base-margin-top" :bordered="false">
<t-card :title="$t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">
<t-steps class="detail-base-info-steps" layout="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-step-item
:title="$t('pages.detailBase.changelog.step1.title')"
:content="$t('pages.detailBase.changelog.step1.subtitle')"
/>
<t-step-item
:title="$t('pages.detailBase.changelog.step2.title')"
:content="$t('pages.detailBase.changelog.step2.subtitle')"
/>
<t-step-item
:title="$t('pages.detailBase.changelog.step3.title')"
:content="$t('pages.detailBase.changelog.step3.desc')"
/>
</t-steps>
</t-card>
</div>
@ -34,14 +43,16 @@ export default {
</script>
<script setup lang="ts">
import { t } from '@/locales';
const BASE_INFO_DATA = [
{
name: '合同名称',
name: t('constants.contract.name'),
value: '总部办公用品采购项目',
type: null,
},
{
name: '合同状态',
name: t('constants.contract.status'),
value: '履行中',
type: {
key: 'contractStatus',
@ -49,52 +60,52 @@ const BASE_INFO_DATA = [
},
},
{
name: '合同编号',
name: t('constants.contract.num'),
value: 'BH00010',
type: null,
},
{
name: '合同类型',
value: '主合同',
name: t('constants.contract.type'),
value: t('constants.contract.typeOptions.main'),
type: null,
},
{
name: '合同收付类型',
value: '付款',
name: t('constants.contract.payType'),
value: t('constants.contract.pay'),
type: null,
},
{
name: '合同金额',
value: '5,000,000元',
name: t('constants.contract.amount'),
value: '¥ 5,000,000',
type: null,
},
{
name: '甲方',
name: t('constants.contract.company'),
value: '腾讯科技（深圳）有限公司',
type: null,
},
{
name: '乙方',
name: t('constants.contract.employee'),
value: '欧尚',
type: null,
},
{
name: '合同签订日期',
name: t('constants.contract.signDate'),
value: '2020-12-20',
type: null,
},
{
name: '合同生效日期',
name: t('constants.contract.effectiveDate'),
value: '2021-01-20',
type: null,
},
{
name: '合同结束日期',
name: t('constants.contract.endDate'),
value: '2022-12-20',
type: null,
},
{
name: '合同附件',
name: t('constants.contract.attachment'),
value: '总部办公用品采购项目合同.pdf',
type: {
key: 'contractAnnex',
@ -102,12 +113,7 @@ const BASE_INFO_DATA = [
},
},
{
name: '备注',
value: '--',
type: null,
},
{
name: '创建时间',
name: t('constants.contract.createDate'),
value: '2020-12-22 10:00:00',
type: null,
},
@ -115,5 +121,5 @@ const BASE_INFO_DATA = [
</script>
<style lang="less" scoped>
@import url('./index.less');
@import './index.less';
</style>

33
src/pages/detail/deploy/constants.ts
View File

@ -80,36 +80,3 @@ export const BASE_INFO_DATA = [
type: null,
},
];
export const TABLE_COLUMNS = [
{
width: '280',
ellipsis: true,
colKey: 'name',
title: '项目名称',
sorter: (a: any, b: any) => a.name.substr(10) - b.name.substr(10),
},
{
width: '280',
ellipsis: true,
colKey: 'adminName',
title: '管理员',
},
{
width: '280',
className: 'test',
ellipsis: true,
colKey: 'updateTime',
title: '创建时间',
sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left' as const,
width: '200',
className: 'test2',
ellipsis: true,
colKey: 'op',
fixed: 'right' as const,
title: '操作',
},
];

20
src/pages/detail/deploy/index.ts
View File

@ -1,4 +1,5 @@
import { TChartColor } from '@/config/color';
import { t } from '@/locales/index';
import { getDateArray, getRandomArray } from '@/utils/charts';
import { getChartListColor } from '@/utils/color';
@ -52,7 +53,7 @@ export function getSmoothLineDataSet({
},
},
legend: {
data: ['本月', '上月'],
data: [t('pages.detailDeploy.deployTrend.thisMonth'), t('pages.detailDeploy.deployTrend.lastMonth')],
icon: 'circle',
bottom: '0',
itemGap: 48,
@ -65,7 +66,7 @@ export function getSmoothLineDataSet({
},
series: [
{
name: '上月',
name: t('pages.detailDeploy.deployTrend.lastMonth'),
data: [
getRandomArray(),
getRandomArray(),
@ -86,7 +87,7 @@ export function getSmoothLineDataSet({
},
},
{
name: '本月',
name: t('pages.detailDeploy.deployTrend.thisMonth'),
data: [
getRandomArray(),
getRandomArray(),
@ -129,6 +130,11 @@ export function get2ColBarChartDataSet({
thisYearListCopy = thisYearListCopy.reverse();
}
const data = [];
for (let i = 1; i < 7; i++) {
data.push(t(`pages.detailDeploy.deployTrend.week${i}`));
}
return {
color: getChartListColor(),
tooltip: {
@ -144,7 +150,7 @@ export function get2ColBarChartDataSet({
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
data,
axisTick: {
alignWithLabel: true,
},
@ -173,7 +179,7 @@ export function get2ColBarChartDataSet({
},
],
legend: {
data: ['去年', '今年'],
data: [t('pages.detailDeploy.deployTrend.lastYear'), t('pages.detailDeploy.deployTrend.thisYear')],
bottom: '0',
icon: 'rect',
itemGap: 48,
@ -186,7 +192,7 @@ export function get2ColBarChartDataSet({
},
series: [
{
name: '去年',
name: t('pages.detailDeploy.deployTrend.lastYear'),
type: 'bar',
barWidth: '30%',
data: lastYearListCopy,
@ -195,7 +201,7 @@ export function get2ColBarChartDataSet({
},
},
{
name: '今年',
name: t('pages.detailDeploy.deployTrend.thisYear'),
type: 'bar',
barWidth: '30%',
data: thisYearListCopy,

62
src/pages/detail/deploy/index.vue
View File

@ -2,18 +2,18 @@
<div class="detail-deploy">
<t-row :gutter="16">
<t-col :lg="6" :xs="12">
<t-card title="部署趋势" :bordered="false">
<t-card :title="$t('pages.detailDeploy.deployTrend.title')" :bordered="false">
<div class="deploy-panel-left">
<div id="monitorContainer" style="width: 100%; height: 265px" />
</div>
</t-card>
</t-col>
<t-col :lg="6" :xs="12">
<t-card title="告警情况" :bordered="false">
<template #option>
<t-card :title="$t('pages.detailDeploy.deployTrend.warning')" :bordered="false">
<template #actions>
<t-radio-group default-value="dateVal" @change="onAlertChange">
<t-radio-button value="dateVal"> 本周 </t-radio-button>
<t-radio-button value="monthVal"> 本月 </t-radio-button>
<t-radio-button value="dateVal"> {{ $t('pages.detailDeploy.deployTrend.thisWeek') }} </t-radio-button>
<t-radio-button value="monthVal"> {{ $t('pages.detailDeploy.deployTrend.thisMonth') }} </t-radio-button>
</t-radio-group>
</template>
<div id="dataContainer" style="width: 100%; height: 265px" />
@ -22,7 +22,7 @@
</t-row>
<!-- 项目列表 -->
<t-card title="项目列表" class="container-base-margin-top" :bordered="false">
<t-card :title="$t('pages.detailDeploy.projectList.title')" class="container-base-margin-top" :bordered="false">
<t-table
:columns="columns"
:data="data"
@ -41,8 +41,12 @@
</template>
<template #op="slotProps">
<t-space>
<t-link theme="primary" @click="listClick()">管理</t-link>
<t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
<t-link theme="primary" @click="listClick()">{{
$t('pages.detailDeploy.projectList.table.manage')
}}</t-link>
<t-link theme="danger" @click="deleteClickOp(slotProps)">{{
$t('pages.detailDeploy.projectList.table.delete')
}}</t-link>
</t-space>
</template>
<template #op-column>
@ -51,7 +55,11 @@
</t-table>
</t-card>
<t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
<t-dialog
v-model:visible="visible"
:header="$t('pages.detailDeploy.projectList.dialog.title')"
@confirm="onConfirm"
>
<template #body>
<div class="dialog-info-block">
<div class="dialog-info-block">
@ -86,12 +94,46 @@ import { CanvasRenderer } from 'echarts/renderers';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { getProjectList } from '@/api/detail';
import { t } from '@/locales';
import { useSettingStore } from '@/store';
import { changeChartsTheme } from '@/utils/color';
import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
import { BASE_INFO_DATA } from './constants';
import { get2ColBarChartDataSet, getSmoothLineDataSet } from './index';
const columns = [
{
width: '280',
ellipsis: true,
colKey: 'name',
title: t('pages.detailDeploy.projectList.table.name'),
sorter: (a: any, b: any) => a.name.substr(10) - b.name.substr(10),
},
{
width: '280',
ellipsis: true,
title: t('pages.detailDeploy.projectList.table.admin'),
colKey: 'adminName',
},
{
width: '280',
className: 'test',
ellipsis: true,
colKey: 'updateTime',
title: t('pages.detailDeploy.projectList.table.createTime'),
sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left' as const,
width: '200',
className: 'test2',
ellipsis: true,
colKey: 'op',
fixed: 'right' as const,
title: t('pages.detailDeploy.projectList.table.operation'),
},
];
echarts.use([
TitleComponent,
ToolboxComponent,

15
src/pages/detail/secondary/index.vue
View File

@ -18,14 +18,14 @@
<t-tooltip
class="set-read-icon"
:overlay-style="{ margin: '6px' }"
:content="item.status ? '设为已读' : '设为未读'"
:content="item.status ? $t('pages.detailSecondary.setRead') : $t('pages.detailSecondary.setUnread')"
>
<span class="msg-action-icon" @click="setReadStatus(item)">
<t-icon v-if="!!item.status" name="queue" size="16px" />
<t-icon v-else name="chat" />
</span>
</t-tooltip>
<t-tooltip content="删除通知" :overlay-style="{ margin: '6px' }">
<t-tooltip :content="t('pages.detailSecondary.delete')" :overlay-style="{ margin: '6px' }">
<span @click="handleClickDeleteBtn(item)">
<t-icon name="delete" size="16px" />
</span>
@ -36,7 +36,7 @@
</t-list>
<div v-else class="secondary-msg-list__empty-list">
<empty-icon></empty-icon>
<p>暂无通知</p>
<p>{{ t('pages.detailSecondary.empty') }}</p>
</div>
</t-tab-panel>
</t-tabs>
@ -62,20 +62,21 @@ import { computed, ref } from 'vue';
import EmptyIcon from '@/assets/assets-empty.svg?component';
import { NOTIFICATION_TYPES } from '@/constants';
import { t } from '@/locales';
import { useNotificationStore } from '@/store';
import type { NotificationItem } from '@/types/interface';
const TAB_LIST = [
{
label: '全部通知',
label: t('pages.detailSecondary.all'),
value: 'msgData',
},
{
label: '未读通知',
label: t('pages.detailSecondary.unread'),
value: 'unreadMsg',
},
{
label: '已读通知',
label: t('pages.detailSecondary.read'),
value: 'readMsg',
},
];
@ -124,5 +125,5 @@ const deleteMsg = () => {
</script>
<style lang="less" scoped>
@import url('./index.less');
@import './index.less';
</style>

18
src/pages/form/base/constants.ts
View File

@ -27,19 +27,19 @@ export const INITIAL_DATA = {
};
export const TYPE_OPTIONS = [
{ label: '类型A', value: '1' },
{ label: '类型B', value: '2' },
{ label: '类型C', value: '3' },
{ label: 'Type A', value: '1' },
{ label: 'Type B', value: '2' },
{ label: 'Type C', value: '3' },
];
export const PARTY_A_OPTIONS = [
{ label: '公司A', value: '1' },
{ label: '公司B', value: '2' },
{ label: '公司C', value: '3' },
{ label: 'Company A', value: '1' },
{ label: 'Company B', value: '2' },
{ label: 'Company C', value: '3' },
];
export const PARTY_B_OPTIONS = [
{ label: '公司A', value: '1' },
{ label: '公司B', value: '2' },
{ label: '公司C', value: '3' },
{ label: 'Company A', value: '1' },
{ label: 'Company B', value: '2' },
{ label: 'Company C', value: '3' },
];

62
src/pages/form/base/index.vue
View File

@ -11,25 +11,19 @@
>
<div class="form-basic-container">
<div class="form-basic-item">
<div class="form-basic-container-title">合同信息</div>
<div class="form-basic-container-title">{{ $t('pages.formBase.title') }}</div>
<!-- 表单内容 -->
<!-- 合同名称,合同类型 -->
<t-row class="row-gap" :gutter="[32, 24]">
<t-col :span="6">
<t-form-item label="合同名称" name="name">
<t-form-item :label="$t('pages.formBase.contractName')" name="name">
<t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
</t-form-item>
</t-col>
<t-col :span="6">
<t-form-item label="合同类型" name="type">
<t-select
v-model="formData.type"
:style="{ width: '322px' }"
placeholder="请选择类型"
class="demo-select-base"
clearable
>
<t-form-item :label="$t('pages.formBase.contractType')" name="type">
<t-select v-model="formData.type" :style="{ width: '322px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }}
</t-option>
@ -39,25 +33,25 @@
<!-- 合同收付类型 -->
<t-col :span="8">
<t-form-item label="合同收付类型" name="payment">
<t-form-item :label="$t('pages.formBase.contractPayType')" name="payment">
<t-radio-group v-model="formData.payment">
<t-radio value="1"> 收款 </t-radio>
<t-radio value="2"> 付款 </t-radio>
<t-radio value="1"> {{ $t('pages.formBase.receive') }} </t-radio>
<t-radio value="2"> {{ $t('pages.formBase.pay') }} </t-radio>
</t-radio-group>
<span class="space-item" />
<div>
<t-input placeholder="请输入金额" :style="{ width: '160px' }" />
<t-input :placeholder="$t('pages.formBase.contractAmountPlaceholder')" :style="{ width: '160px' }" />
</div>
</t-form-item>
</t-col>
<t-col :span="6">
<t-form-item label="甲方" name="partyA">
<t-form-item :label="$t('pages.formBase.company')" name="partyA">
<t-select
v-model="formData.partyA"
:style="{ width: '322px' }"
class="demo-select-base"
placeholder="请选择类型"
:placeholder="$t('pages.formBase.contractTypePlaceholder')"
clearable
>
<t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label">
@ -67,11 +61,11 @@
</t-form-item>
</t-col>
<t-col :span="6">
<t-form-item label="乙方" name="partyB">
<t-form-item :label="$t('pages.formBase.employee')" name="partyB">
<t-select
v-model="formData.partyB"
:style="{ width: '322px' }"
placeholder="请选择类型"
:placeholder="$t('pages.formBase.contractTypePlaceholder')"
class="demo-select-base"
clearable
>
@ -82,7 +76,7 @@
</t-form-item>
</t-col>
<t-col :span="6">
<t-form-item label="合同签订日期" name="signDate">
<t-form-item :label="$t('pages.formBase.contractSignDate')" name="signDate">
<t-date-picker
v-model="formData.signDate"
:style="{ width: '322px' }"
@ -93,7 +87,7 @@
</t-form-item>
</t-col>
<t-col :span="6">
<t-form-item label="合同生效日期" name="startDate">
<t-form-item :label="$t('pages.formBase.contractEffectiveDate')" name="startDate">
<t-date-picker
v-model="formData.startDate"
:style="{ width: '322px' }"
@ -104,7 +98,7 @@
</t-form-item>
</t-col>
<t-col :span="6">
<t-form-item label="合同结束日期" name="endDate">
<t-form-item :label="$t('pages.formBase.contractEndDate')" name="endDate">
<t-date-picker
v-model="formData.endDate"
:style="{ width: '322px' }"
@ -115,28 +109,30 @@
</t-form-item>
</t-col>
<t-col :span="6">
<t-form-item label="上传文件" name="files">
<t-form-item :label="$t('pages.formBase.upload')" name="files">
<t-upload
v-model="formData.files"
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
tips="请上传pdf文件，大小在60M以内"
:tips="$t('pages.formBase.uploadTips')"
:size-limit="{ size: 60, unit: 'MB' }"
:format-response="formatResponse"
:before-upload="beforeUpload"
@fail="handleFail"
>
<t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
<t-button class="form-submit-upload-btn" variant="outline">
{{ $t('pages.formBase.uploadFile') }}
</t-button>
</t-upload>
</t-form-item>
</t-col>
</t-row>
<div class="form-basic-container-title form-title-gap">其它信息</div>
<div class="form-basic-container-title form-title-gap">{{ $t('pages.formBase.otherInfo') }}</div>
<t-form-item label="备注" name="comment">
<t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
<t-form-item :label="$t('pages.formBase.remark')" name="comment">
<t-textarea v-model="formData.comment" :height="124" :placeholder="$t('pages.formBase.remarkPlaceholder')" />
</t-form-item>
<t-form-item label="公证人">
<t-form-item :label="$t('pages.formBase.notaryPublic')">
<t-avatar-group>
<t-avatar>D</t-avatar>
<t-avatar>S</t-avatar>
@ -149,8 +145,12 @@
<div class="form-submit-container">
<div class="form-submit-sub">
<div class="form-submit-left">
<t-button theme="primary" class="form-submit-confirm" type="submit"> 确认提交 </t-button>
<t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
<t-button theme="primary" class="form-submit-confirm" type="submit">
{{ $t('pages.formBase.confirm') }}
</t-button>
<t-button type="reset" class="form-submit-cancel" theme="default" variant="base">
{{ $t('pages.formBase.cancel') }}
</t-button>
</div>
</div>
</div>
@ -201,5 +201,5 @@ const formatResponse = (res: any) => {
</script>
<style lang="less" scoped>
@import url('./index.less');
@import './index.less';
</style>

28
src/pages/form/step/constants.ts
View File

@ -1,26 +1,26 @@
import { FormRule } from 'tdesign-vue-next';
export const FORM_RULES: Record<string, FormRule[]> = {
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' }],
name: [{ required: true, type: 'error' }],
type: [{ required: true, type: 'error' }],
title: [{ required: true, type: 'error' }],
taxNum: [{ required: true, type: 'error' }],
consignee: [{ required: true, type: 'error' }],
mobileNum: [{ required: true, type: 'error' }],
deliveryAddress: [{ required: true, type: 'error' }],
fullAddress: [{ required: true, type: 'error' }],
};
export const NAME_OPTIONS = [
{ label: '合同A', value: '1' },
{ label: '合同B', value: '2' },
{ label: '合同C', value: '3' },
{ label: 'A', value: '1' },
{ label: 'B', value: '2' },
{ label: 'C', value: '3' },
];
export const TYPE_OPTIONS = [
{ label: '类型A', value: '1' },
{ label: '类型B', value: '2' },
{ label: '类型C', value: '3' },
{ label: 'Type A', value: '1' },
{ label: 'Type B', value: '2' },
{ label: 'Type C', value: '3' },
];
export const ADDRESS_OPTIONS = [

130
src/pages/form/step/index.vue
View File

@ -4,22 +4,22 @@
<!-- 简单步骤条 -->
<t-card :bordered="false">
<t-steps class="step-container" :current="1" status="process">
<t-step-item title="提交申请" content="已于12月21日提交" />
<t-step-item title="电子信息" content="预计1-3个工作日" />
<t-step-item title="发票已邮寄" content="电子发票开出后联系" />
<t-step-item title="完成申请" content="如有疑问联系客服" />
<t-step-item :title="$t('pages.formStep.step1.title')" :content="$t('pages.formStep.step1.subtitle')" />
<t-step-item :title="$t('pages.formStep.step2.title')" :content="$t('pages.formStep.step2.subtitle')" />
<t-step-item :title="$t('pages.formStep.step3.title')" :content="$t('pages.formStep.step3.subtitle')" />
<t-step-item :title="$t('pages.formStep.step4.title')" :content="$t('pages.formStep.step4.subtitle')" />
</t-steps>
</t-card>
<!-- 分步表单1 -->
<div v-show="activeForm === 0" class="rule-tips">
<t-alert theme="info" title="发票开具规则：" :close="true">
<t-alert theme="info" :title="$t('pages.formStep.step1.rules')" :close="true">
<template #message>
<p>
1、申请开票后，电子发票在1～3个工作日内开具；增值税专用发票（纸质）如资质审核通过，将在电子发票开具后10个工作日内为您寄出；
{{ $t('pages.formStep.step1.rule1') }}
</p>
<p>2、开票金额为您实际支付金额；</p>
<p>3、如有疑问请直接联系：13300001111。</p>
<p>{{ $t('pages.formStep.step1.rule2') }}</p>
<p>{{ $t('pages.formStep.step1.rule3') }}</p>
</template>
</t-alert>
</div>
@ -31,23 +31,23 @@
label-align="right"
@submit="(result: SubmitContext) => onSubmit(result, 1)"
>
<t-form-item label="合同名称" name="name">
<t-form-item :label="$t('pages.formStep.step1.contractName')" name="name">
<t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in NAME_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }}
</t-option>
</t-select>
</t-form-item>
<t-form-item label="发票类型" name="type">
<t-form-item :label="$t('pages.formStep.step1.invoiceType')" name="type">
<t-select v-model="formData1.type" :style="{ width: '480px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in TYPE_OPTIONS" :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 :label="$t('pages.formStep.step1.amount')"> ¥ {{ amount }} </t-form-item>
<t-form-item>
<t-button theme="primary" type="submit"> 提交申请 </t-button>
<t-button theme="primary" type="submit"> {{ $t('pages.formStep.step1.submit') }} </t-button>
</t-form-item>
</t-form>
@ -61,30 +61,58 @@
@reset="onReset(0)"
@submit="(result: SubmitContext) => onSubmit(result, 2)"
>
<t-form-item label="发票抬头" name="title">
<t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
<t-form-item :label="$t('pages.formStep.step2.invoiceTitle')" name="title">
<t-input
v-model="formData2.title"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.invoiceTitlePlaceholder')"
/>
</t-form-item>
<t-form-item label="纳税人识别号" name="taxNum">
<t-input v-model="formData2.taxNum" :style="{ width: '480px' }" placeholder="请输入纳税人识别号" />
<t-form-item :label="$t('pages.formStep.step2.taxNum')" name="taxNum">
<t-input
v-model="formData2.taxNum"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.taxNumPlaceholder')"
/>
</t-form-item>
<t-form-item label="单位地址" name="address">
<t-input v-model="formData2.address" :style="{ width: '480px' }" placeholder="请输入单位地址" />
<t-form-item :label="$t('pages.formStep.step2.address')" name="address">
<t-input
v-model="formData2.address"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.addressPlaceholder')"
/>
</t-form-item>
<t-form-item label="开户行" name="bank">
<t-input v-model="formData2.bank" :style="{ width: '480px' }" placeholder="请输入开户行" />
<t-form-item :label="$t('pages.formStep.step2.bank')" name="bank">
<t-input
v-model="formData2.bank"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.bankPlaceholder')"
/>
</t-form-item>
<t-form-item label="银行账号" name="bankAccount">
<t-input v-model="formData2.bankAccount" :style="{ width: '480px' }" placeholder="请输入银行账号" />
<t-form-item :label="$t('pages.formStep.step2.bankAccount')" name="bankAccount">
<t-input
v-model="formData2.bankAccount"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.bankAccountPlaceholder')"
/>
</t-form-item>
<t-form-item label="通知邮箱" name="email">
<t-input v-model="formData2.email" :style="{ width: '480px' }" placeholder="请输入通知邮箱" />
<t-form-item :label="$t('pages.formStep.step2.email')" name="email">
<t-input
v-model="formData2.email"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.emailPlaceholder')"
/>
</t-form-item>
<t-form-item label="通知手机" name="tel">
<t-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
<t-form-item :label="$t('pages.formStep.step2.tel')" name="tel">
<t-input
v-model="formData2.tel"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.telPlaceholder')"
/>
</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-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button>
<t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button>
</t-form-item>
</t-form>
@ -98,43 +126,41 @@
@reset="onReset(1)"
@submit="(result: SubmitContext) => onSubmit(result, 6)"
>
<t-form-item label="收货人" name="consignee">
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
<t-form-item :label="$t('pages.formStep.step3.consignee')" name="consignee">
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" />
</t-form-item>
<t-form-item label="手机号码" name="mobileNum">
<t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" placeholder="请输入手机号码" />
<t-form-item :label="$t('pages.formStep.step3.mobileNum')" name="mobileNum">
<t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" />
</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-form-item :label="$t('pages.formStep.step3.deliveryAddress')" name="deliveryAddress">
<t-select v-model="formData3.deliveryAddress" :style="{ width: '480px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in ADDRESS_OPTIONS" :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 :label="$t('pages.formStep.step3.fullAddress')" name="fullAddress">
<t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" />
</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-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button>
<t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </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="onReset(0)"> 再次申请 </t-button>
<t-button variant="base" theme="default" @click="complete"> 查看进度 </t-button>
</div>
<t-space direction="vertical" style="align-items: center">
<t-icon name="check-circle-filled" style="color: green" size="52px" />
<p class="text">{{ $t('pages.formStep.step4.finishTitle') }}</p>
<p class="tips">{{ $t('pages.formStep.step4.finishTips') }}</p>
<div class="button-group">
<t-button theme="primary" @click="onReset(0)"> {{ $t('pages.formStep.step4.reapply') }} </t-button>
<t-button variant="base" theme="default" @click="complete">
{{ $t('pages.formStep.step4.check') }}
</t-button>
</div>
</t-space>
</div>
</div>
</div>
@ -194,5 +220,5 @@ const complete = () => {
</script>
<style lang="less" scoped>
@import url('./index.less');
@import './index.less';
</style>

44
src/pages/list/base/constants.ts
View File

@ -1,44 +0,0 @@
import { PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
{ colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
{
title: '合同名称',
align: 'left',
width: 320,
colKey: 'name',
fixed: 'left',
},
{ title: '合同状态', colKey: 'status', width: 160 },
{
title: '合同编号',
width: 160,
ellipsis: true,
colKey: 'no',
},
{
title: '合同类型',
width: 160,
ellipsis: true,
colKey: 'contractType',
},
{
title: '合同收付类型',
width: 160,
ellipsis: true,
colKey: 'paymentType',
},
{
title: '合同金额 (元)',
width: 160,
ellipsis: true,
colKey: 'amount',
},
{
align: 'left',
fixed: 'right',
width: 160,
colKey: 'op',
title: '操作',
},
];

96
src/pages/list/base/index.vue
View File

@ -3,12 +3,16 @@
<t-card class="list-card-container" :bordered="false">
<t-row justify="space-between">
<div class="left-operation-container">
<t-button @click="handleSetupContract"> 新建合同 </t-button>
<t-button variant="base" theme="default" :disabled="!selectedRowKeys.length"> 导出合同 </t-button>
<p v-if="!!selectedRowKeys.length" class="selected-count">已选{{ selectedRowKeys.length }}项</p>
<t-button @click="handleSetupContract"> {{ $t('pages.listBase.create') }} </t-button>
<t-button variant="base" theme="default" :disabled="!selectedRowKeys.length">
{{ $t('pages.listBase.export') }}</t-button
>
<p v-if="!!selectedRowKeys.length" class="selected-count">
{{ $t('pages.listBase.select') }} {{ selectedRowKeys.length }} {{ $t('pages.listBase.items') }}
</p>
</div>
<div class="search-input">
<t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
<t-input v-model="searchValue" :placeholder="$t('pages.listBase.placeholder')" clearable>
<template #suffix-icon>
<search-icon size="16px" />
</template>
@ -30,30 +34,42 @@
@select-change="rehandleSelectChange"
>
<template #status="{ row }">
<t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light"> 审核失败 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light"> 待审核 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light"> 待履行 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light"> 履行中 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light"> 已完成 </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
{{ $t('pages.listBase.contractStatusEnum.fail') }}</t-tag
>
<t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light">
{{ $t('pages.listBase.contractStatusEnum.audit') }}
</t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light">
{{ $t('pages.listBase.contractStatusEnum.pending') }}
</t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light">
{{ $t('pages.listBase.contractStatusEnum.executing') }}
</t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light">
{{ $t('pages.listBase.contractStatusEnum.finish') }}
</t-tag>
</template>
<template #contractType="{ row }">
<p v-if="row.contractType === CONTRACT_TYPES.MAIN">审核失败</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUB">待审核</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">待履行</p>
<p v-if="row.contractType === CONTRACT_TYPES.MAIN">{{ $t('pages.listBase.contractStatusEnum.fail') }}</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUB">{{ $t('pages.listBase.contractStatusEnum.audit') }}</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">
{{ $t('pages.listBase.contractStatusEnum.pending') }}
</p>
</template>
<template #paymentType="{ row }">
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
付款<trend class="dashboard-item-trend" type="up" />
{{ $t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" />
</div>
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col">
收款<trend class="dashboard-item-trend" type="down" />
{{ $t('pages.listBase.receive') }}<trend class="dashboard-item-trend" type="down" />
</div>
</template>
<template #op="slotProps">
<t-space>
<t-link theme="primary" @click="handleClickDetail()">详情</t-link>
<t-link theme="danger" @click="handleClickDelete(slotProps)">删除</t-link>
<t-link theme="primary" @click="handleClickDetail()"> {{ $t('pages.listBase.detail') }}</t-link>
<t-link theme="danger" @click="handleClickDelete(slotProps)"> {{ $t('pages.listBase.delete') }}</t-link>
</t-space>
</template>
</t-table>
@ -77,7 +93,7 @@ export default {
<script setup lang="ts">
import { SearchIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { MessagePlugin, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
@ -85,12 +101,54 @@ import { getList } from '@/api/list';
import Trend from '@/components/trend/index.vue';
import { prefix } from '@/config/global';
import { CONTRACT_PAYMENT_TYPES, CONTRACT_STATUS, CONTRACT_TYPES } from '@/constants';
import { t } from '@/locales';
import { useSettingStore } from '@/store';
import { COLUMNS } from './constants';
const store = useSettingStore();
const COLUMNS: PrimaryTableCol<TableRowData>[] = [
{ colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
{
title: t('pages.listBase.contractName'),
align: 'left',
width: 320,
colKey: 'name',
fixed: 'left',
},
{ title: t('pages.listBase.contractStatus'), colKey: 'status', width: 160 },
{
title: t('pages.listBase.contractNum'),
width: 160,
ellipsis: true,
colKey: 'no',
},
{
title: t('pages.listBase.contractType'),
width: 160,
ellipsis: true,
colKey: 'contractType',
},
{
title: t('pages.listBase.contractPayType'),
width: 160,
ellipsis: true,
colKey: 'paymentType',
},
{
title: t('pages.listBase.contractAmount'),
width: 160,
ellipsis: true,
colKey: 'amount',
},
{
title: t('pages.listBase.operation'),
align: 'left',
fixed: 'right',
width: 160,
colKey: 'op',
},
];
const data = ref([]);
const pagination = ref({
defaultPageSize: 20,

50
src/pages/list/card/components/DialogForm.vue
View File

@ -1,29 +1,29 @@
<template>
<t-dialog v-model:visible="formVisible" header="新建产品" :width="680" :footer="false">
<t-dialog v-model:visible="formVisible" :header="$t('pages.listCard.create')" :width="680" :footer="false">
<template #body>
<!-- 表单内容 -->
<t-form ref="form" :data="formData" :rules="rules" :label-width="100" @submit="onSubmit">
<t-form-item label="产品名称" name="name">
<t-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入产品名称" />
<t-form-item :label="$t('pages.listCard.productName')" name="name">
<t-input v-model="formData.name" :style="{ width: '480px' }" />
</t-form-item>
<t-form-item label="产品状态" name="status">
<t-form-item :label="$t('pages.listCard.productStatus')" name="status">
<t-radio-group v-model="formData.status">
<t-radio value="0">已停用</t-radio>
<t-radio value="1">已启用</t-radio>
<t-radio value="0">{{ $t('pages.listCard.productStatusEnum.off') }}</t-radio>
<t-radio value="1">{{ $t('pages.listCard.productStatusEnum.on') }}</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="产品描述" name="description">
<t-input v-model="formData.description" :style="{ width: '480px' }" placeholder="请输入产品描述" />
<t-form-item :label="$t('pages.listCard.productDescription')" name="description">
<t-input v-model="formData.description" :style="{ width: '480px' }" />
</t-form-item>
<t-form-item label="产品类型" name="type">
<t-form-item :label="$t('pages.listCard.productType')" name="type">
<t-select v-model="formData.type" clearable :style="{ width: '480px' }">
<t-option v-for="(item, index) in SELECT_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }}
</t-option>
</t-select>
</t-form-item>
<t-form-item label="备注" name="mark">
<t-textarea v-model="textareaValue" :style="{ width: '480px' }" placeholder="请输入内容" name="description" />
<t-form-item :label="$t('pages.listCard.productRemark')" name="mark">
<t-textarea v-model="textareaValue" :style="{ width: '480px' }" name="description" />
</t-form-item>
<t-form-item style="float: right">
<t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
@ -35,10 +35,20 @@
</template>
<script setup lang="ts">
import { Data, FormRule, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import type { PropType } from 'vue';
import { ref, watch } from 'vue';
const INITIAL_DATA = {
export interface FormData {
name: string;
status: string;
description: string;
type: string;
mark: string;
amount: number;
}
const INITIAL_DATA: FormData = {
name: '',
status: '',
description: '',
@ -58,19 +68,13 @@ const props = defineProps({
type: Boolean,
default: false,
},
data: {
type: Object,
default: () => {
return {};
},
},
data: Object as PropType<FormData>,
});
const formVisible = ref(false);
const formData = ref(props.data);
const formData = ref({ ...INITIAL_DATA });
const textareaValue = ref('');
const onSubmit = ({ validateResult, firstError }: SubmitContext<Data>) => {
const onSubmit = ({ validateResult, firstError }: SubmitContext<FormData>) => {
if (!firstError) {
MessagePlugin.success('提交成功');
formVisible.value = false;
@ -107,7 +111,7 @@ watch(
},
);
const rules: Record<string, FormRule[]> = {
const rules: FormRules<FormData> = {
name: [{ required: true, message: '请输入产品名称', type: 'error' }],
};
</script>

19
src/pages/list/card/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<div class="list-card-operation">
<t-button @click="formDialogVisible = true"> 新建产品 </t-button>
<t-button @click="formDialogVisible = true"> {{ $t('pages.listCard.create') }} </t-button>
<div class="search-input">
<t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
<t-input v-model="searchValue" :placeholder="$t('pages.listCard.placeholder')" clearable>
<template #suffix-icon>
<search-icon v-if="searchValue === ''" size="var(--td-comp-size-xxxs)" />
</template>
@ -76,23 +76,14 @@ import { getCardList } from '@/api/list';
import type { CardProductType } from '@/components/product-card/index.vue';
import ProductCard from '@/components/product-card/index.vue';
import type { FormData } from './components/DialogForm.vue';
import DialogForm from './components/DialogForm.vue';
interface FormData {
name: string;
status: string;
description: string;
type: number;
mark: string;
amount: number;
[key: string]: unknown;
}
const INITIAL_DATA: FormData = {
name: '',
status: '',
description: '',
type: 0,
type: '0',
mark: '',
amount: 0,
};
@ -158,7 +149,7 @@ const handleManageProduct = (product: CardProductType) => {
name: product.name,
status: product?.isSetup ? '1' : '0',
description: product.description,
type: product.type,
type: product.type.toString(),
mark: '',
amount: 0,
};

2
src/pages/list/filter/index.vue
View File

@ -7,5 +7,5 @@ export default {
};
</script>
<script setup lang="ts">
import CommonTable from '../components/CommonTable.vue';
import CommonTable from '@/components/common-table/index.vue';
</script>

5
src/pages/list/tree/index.vue
View File

@ -2,7 +2,7 @@
<div class="table-tree-container">
<div class="list-tree-wrapper">
<div class="list-tree-operator">
<t-input v-model="filterText" placeholder="请输入关键词" @change="onInput">
<t-input v-model="filterText" :placeholder="$t('pages.listTree.placeholder')" @change="onInput">
<template #suffix-icon>
<search-icon size="var(--td-comp-size-xxxs)" />
</template>
@ -27,7 +27,8 @@ import { SearchIcon } from 'tdesign-icons-vue-next';
import type { TreeNodeModel } from 'tdesign-vue-next';
import { ref } from 'vue';
import CommonTable from '../components/CommonTable.vue';
import CommonTable from '@/components/common-table/index.vue';
import { TREE_DATA } from './constants';
const filterByText = ref();

47
src/pages/login/components/Login.vue
View File

@ -9,7 +9,7 @@
>
<template v-if="type == 'password'">
<t-form-item name="account">
<t-input v-model="formData.account" size="large" placeholder="请输入账号：admin">
<t-input v-model="formData.account" size="large" :placeholder="`${$t('pages.login.input.account')}：admin`">
<template #prefix-icon>
<t-icon name="user" />
</template>
@ -22,7 +22,7 @@
size="large"
:type="showPsw ? 'text' : 'password'"
clearable
placeholder="请输入登录密码：admin"
:placeholder="`${$t('pages.login.input.password')}：admin`"
>
<template #prefix-icon>
<t-icon name="lock-on" />
@ -34,24 +34,24 @@
</t-form-item>
<div class="check-container remember-pwd">
<t-checkbox>记住账号</t-checkbox>
<span class="tip">忘记账号？</span>
<t-checkbox>{{ $t('pages.login.remember') }}</t-checkbox>
<span class="tip">{{ $t('pages.login.forget') }}</span>
</div>
</template>
<!-- 扫码登陆 -->
<!-- 扫码登录 -->
<template v-else-if="type == 'qrcode'">
<div class="tip-container">
<span class="tip">请使用微信扫一扫登录</span>
<span class="refresh">刷新 <t-icon name="refresh" /> </span>
<span class="tip">{{ $t('pages.login.wechatLogin') }}</span>
<span class="refresh">{{ $t('pages.login.refresh') }} <t-icon name="refresh" /> </span>
</div>
<qrcode-vue value="" :size="160" level="H" />
</template>
<!-- 手机号登陆 -->
<!-- 手机号登录 -->
<template v-else>
<t-form-item name="phone">
<t-input v-model="formData.phone" size="large" placeholder="请输入手机号码">
<t-input v-model="formData.phone" size="large" :placeholder="$t('pages.login.input.phone')">
<template #prefix-icon>
<t-icon name="mobile" />
</template>
@ -59,21 +59,25 @@
</t-form-item>
<t-form-item class="verification-code" name="verifyCode">
<t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" />
<t-input v-model="formData.verifyCode" size="large" :placeholder="$t('pages.login.input.verification')" />
<t-button size="large" variant="outline" :disabled="countDown > 0" @click="sendCode">
{{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
{{ countDown == 0 ? $t('pages.login.sendVerification') : `${countDown}秒后可重发` }}
</t-button>
</t-form-item>
</template>
<t-form-item v-if="type !== 'qrcode'" class="btn-container">
<t-button block size="large" type="submit"> 登录 </t-button>
<t-button block size="large" type="submit"> {{ $t('pages.login.signIn') }} </t-button>
</t-form-item>
<div class="switch-container">
<span v-if="type !== 'password'" class="tip" @click="switchType('password')">使用账号密码登录</span>
<span v-if="type !== 'qrcode'" class="tip" @click="switchType('qrcode')">使用微信扫码登录</span>
<span v-if="type !== 'phone'" class="tip" @click="switchType('phone')">使用手机号登录</span>
<span v-if="type !== 'password'" class="tip" @click="switchType('password')">{{
$t('pages.login.accountLogin')
}}</span>
<span v-if="type !== 'qrcode'" class="tip" @click="switchType('qrcode')">{{
$t('pages.login.wechatLogin')
}}</span>
<span v-if="type !== 'phone'" class="tip" @click="switchType('phone')">{{ $t('pages.login.phoneLogin') }}</span>
</div>
</t-form>
</template>
@ -86,6 +90,7 @@ import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useCounter } from '@/hooks';
import { t } from '@/locales';
import { useUserStore } from '@/store';
const userStore = useUserStore();
@ -99,10 +104,10 @@ const INITIAL_DATA = {
};
const FORM_RULES: Record<string, FormRule[]> = {
phone: [{ required: true, message: '手机号必填', type: 'error' }],
account: [{ required: true, message: '账号必填', type: 'error' }],
password: [{ required: true, message: '密码必填', type: 'error' }],
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
phone: [{ required: true, message: t('pages.login.required.phone'), type: 'error' }],
account: [{ required: true, message: t('pages.login.required.account'), type: 'error' }],
password: [{ required: true, message: t('pages.login.required.password'), type: 'error' }],
verifyCode: [{ required: true, message: t('pages.login.required.verification'), type: 'error' }],
};
const type = ref('password');
@ -136,7 +141,7 @@ const onSubmit = async (ctx: SubmitContext) => {
try {
await userStore.login(formData.value);
MessagePlugin.success('登陆成功');
MessagePlugin.success('登录成功');
const redirect = route.query.redirect as string;
const redirectUrl = redirect ? decodeURIComponent(redirect) : '/dashboard';
router.push(redirectUrl);
@ -149,5 +154,5 @@ const onSubmit = async (ctx: SubmitContext) => {
</script>
<style lang="less" scoped>
@import url('../index.less');
@import '../index.less';
</style>

10
src/pages/login/index.vue
View File

@ -4,12 +4,12 @@
<div class="login-container">
<div class="title-container">
<h1 class="title margin-no">登录到</h1>
<h1 class="title margin-no">{{ $t('pages.login.loginTitle') }}</h1>
<h1 class="title">TDesign Starter</h1>
<div class="sub-title">
<p class="tip">{{ type == 'register' ? '已有账号?' : '没有账号吗?' }}</p>
<p class="tip">{{ type == 'register' ? $t('pages.login.existAccount') : $t('pages.login.noAccount') }}</p>
<p class="tip" @click="switchType(type == 'register' ? 'login' : 'register')">
{{ type == 'register' ? '登录' : '注册新账号' }}
{{ type == 'register' ? $t('pages.login.signIn') : $t('pages.login.createAccount') }}
</p>
</div>
</div>
@ -18,7 +18,7 @@
<register v-else @register-success="switchType('login')" />
</div>
<footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
<footer class="copyright">Copyright @ 2021-2023 Tencent. All Rights Reserved</footer>
</div>
</template>
<script lang="ts">
@ -40,5 +40,5 @@ const switchType = (val: string) => {
</script>
<style lang="less" scoped>
@import url('./index.less');
@import './index.less';
</style>

4
src/pages/result/403/index.vue
View File

@ -1,6 +1,6 @@
<template>
<result title="403 Forbidden" tip="抱歉，您无权限访问此页面，企业微信联系创建者xiaolaoshi">
<t-button @click="() => $router.push('/')">返回首页</t-button>
<result title="403 Forbidden" :tip="$t('pages.result.403.tips')">
<t-button @click="() => $router.push('/')">{{ $t('pages.result.403.back') }}</t-button>
</result>
</template>
<script lang="ts">

4
src/pages/result/404/index.vue
View File

@ -1,6 +1,6 @@
<template>
<result title="404 Not Found" tip="抱歉，您访问的页面不存在" type="404">
<t-button @click="() => $router.push('/')">返回首页</t-button>
<result title="404 Not Found" :tip="$t('pages.result.404.subtitle')" type="404">
<t-button @click="() => $router.push('/')">{{ $t('pages.result.404.back') }}</t-button>
</result>
</template>

4
src/pages/result/500/index.vue
View File

@ -1,6 +1,6 @@
<template>
<result title="500 Internal Server Error" type="500" tip="抱歉，服务器出错啦">
<t-button @click="() => $router.push('/')">返回首页</t-button>
<result title="500 Internal Server Error" type="500" :tip="$t('pages.result.500.subtitle')">
<t-button @click="() => $router.push('/')">{{ $t('pages.result.500.back') }}</t-button>
</result>
</template>
<script lang="ts">

14
src/pages/result/browser-incompatible/index.vue
View File

@ -1,9 +1,15 @@
<template>
<result title="浏览器不兼容" type="ie" tip="抱歉，您正在使用的浏览器版本过低，无法打开当前网页。">
<result
:title="$t('pages.result.browserIncompatible.title')"
type="ie"
:tip="$t('pages.result.browserIncompatible.subtitle')"
>
<div class="result-slot-container">
<t-button class="result-button" @click="() => $router.push('/')">返回首页</t-button>
<t-button class="result-button" @click="() => $router.push('/')">{{
$t('pages.result.browserIncompatible.back')
}}</t-button>
<div class="recommend-container">
<div>TDesign Starter 推荐以下主流浏览器</div>
<div>{{ $t('pages.result.browserIncompatible.recommend') }}</div>
<div class="recommend-browser">
<div>
<thumbnail class="browser-icon" url="https://tdesign.gtimg.com/starter/result-page/chorme.png" />
@ -47,7 +53,7 @@ import Thumbnail from '@/components/thumbnail/index.vue';
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
width: 640px;
background: var(--td-bg-color-container);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
border-radius: var(--td-radius-medium);
}

11
src/pages/result/fail/index.vue
View File

@ -1,11 +1,13 @@
<template>
<div class="result-success">
<t-icon class="result-success-icon" name="error-circle" />
<div class="result-success-title">项目创建失败</div>
<div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
<div class="result-success-title">{{ $t('pages.result.fail.title') }}</div>
<div class="result-success-describe">{{ $t('pages.result.fail.subtitle') }}</div>
<div>
<t-button theme="default" @click="() => $router.push('/dashboard/base')">返回首页</t-button>
<t-button @click="() => $router.push('/form/base')">返回修改</t-button>
<t-button theme="default" @click="() => $router.push('/dashboard/base')">{{
$t('pages.result.fail.back')
}}</t-button>
<t-button @click="() => $router.push('/form/base')">{{ $t('pages.result.fail.modify') }} </t-button>
</div>
</div>
</template>
@ -21,6 +23,7 @@ export default {
justify-content: center;
align-items: center;
height: 75vh;
&-icon {
font-size: var(--td-comp-size-xxxxl);
color: var(--td-text-color-secondary);

8
src/pages/result/maintenance/index.vue
View File

@ -1,6 +1,10 @@
<template>
<result title="系统维护中" tip="系统维护中，请稍后再试" type="maintenance">
<t-button theme="primary" @click="() => $router.push('/')">返回首页</t-button>
<result
:title="$t('pages.result.maintenance.title')"
:tip="$t('pages.result.maintenance.subtitle')"
type="maintenance"
>
<t-button theme="primary" @click="() => $router.push('/')">{{ $t('pages.result.maintenance.back') }}</t-button>
</result>
</template>

6
src/pages/result/network-error/index.vue
View File

@ -1,8 +1,8 @@
<template>
<result title="网络异常" tip="网络异常，请稍后再试" type="wifi">
<result :title="$t('pages.result.networkError.title')" :tip="$t('pages.result.networkError.subtitle')" type="wifi">
<div>
<t-button theme="default" @click="() => $router.push('/')">返回首页</t-button>
<t-button @click="() => $router.push('/')">重新加载</t-button>
<t-button theme="default" @click="() => $router.push('/')">{{ $t('pages.result.networkError.back') }}</t-button>
<t-button @click="() => $router.push('/')">{{ $t('pages.result.networkError.reload') }}</t-button>
</div>
</result>
</template>

10
src/pages/result/success/index.vue
View File

@ -1,11 +1,13 @@
<template>
<div class="result-success">
<t-icon class="result-success-icon" name="check-circle" />
<div class="result-success-title">项目已创建成功</div>
<div class="result-success-describe">可以联系负责人分发应用</div>
<div class="result-success-title">{{ $t('pages.result.success.title') }}</div>
<div class="result-success-describe">{{ $t('pages.result.success.subtitle') }}</div>
<div>
<t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button>
<t-button @click="() => $router.push('/form/base')"> 返回首页 </t-button>
<t-button theme="default" @click="() => $router.push('/detail/advanced')">
{{ $t('pages.result.success.progress') }}
</t-button>
<t-button @click="() => $router.push('/dashboard/base')"> {{ $t('pages.result.success.back') }} </t-button>
</div>
</div>
</template>

20
src/pages/user/constants.ts
View File

@ -1,3 +1,5 @@
import { t } from '@/locales';
export interface UserInfoListType {
title: string;
content: string;
@ -6,39 +8,39 @@ export interface UserInfoListType {
export const USER_INFO_LIST: Array<UserInfoListType> = [
{
title: '手机',
title: t('pages.user.personalInfo.desc.mobile'),
content: '+86 13923734567',
},
{
title: '座机',
title: t('pages.user.personalInfo.desc.phone'),
content: '734567',
},
{
title: '办公室邮箱',
title: t('pages.user.personalInfo.desc.email'),
content: 'Account@qq.com',
},
{
title: '座位',
title: t('pages.user.personalInfo.desc.seat'),
content: 'T32F 012',
},
{
title: '管理主体',
title: t('pages.user.personalInfo.desc.entity'),
content: '腾讯集团',
},
{
title: '直属上级',
title: t('pages.user.personalInfo.desc.leader'),
content: 'Michael Wang',
},
{
title: '职位',
title: t('pages.user.personalInfo.desc.position'),
content: '高级 UI 设计师',
},
{
title: '入职时间',
title: t('pages.user.personalInfo.desc.joinDay'),
content: '2021-07-01',
},
{
title: '所属团队',
title: t('pages.user.personalInfo.desc.group'),
content: '腾讯/腾讯公司/某事业群/某产品部/某运营中心/商户服务组',
span: 6,
},

24
src/pages/user/index.vue
View File

@ -4,12 +4,12 @@
<div class="user-left-greeting">
<div>
Hi，Image
<span class="regular"> 下午好，今天是你加入鹅厂的第 100 天～</span>
<span class="regular"> {{ $t('pages.user.markDay') }}</span>
</div>
<img src="@/assets/assets-tencent-logo.png" class="logo" />
</div>
<t-card class="user-info-list" title="个人信息" :bordered="false">
<t-card class="user-info-list" :title="$t('pages.user.personalInfo.title')" :bordered="false">
<template #actions>
<t-button theme="default" shape="square" variant="text">
<t-icon name="ellipsis" />
@ -29,11 +29,11 @@
<t-card class="content-container" :bordered="false">
<t-tabs value="second">
<t-tab-panel value="first" label="内容列表">
<p>内容列表</p>
<t-tab-panel value="first" :label="$t('pages.user.contentList')">
<p>{{ $t('pages.user.contentList') }}</p>
</t-tab-panel>
<t-tab-panel value="second" label="内容列表">
<t-card :bordered="false" class="card-padding-no" title="主页访问数据" describe="（次）">
<t-tab-panel value="second" :label="$t('pages.user.contentList')">
<t-card :bordered="false" class="card-padding-no" :title="$t('pages.user.visitData')" describe="（次）">
<template #actions>
<t-date-range-picker
class="card-date-picker-container"
@ -46,8 +46,8 @@
<div id="lineContainer" style="width: 100%; height: 328px" />
</t-card>
</t-tab-panel>
<t-tab-panel value="third" label="内容列表">
<p>内容列表</p>
<t-tab-panel value="third" :label="$t('pages.user.contentList')">
<p>{{ $t('pages.user.contentList') }}</p>
</t-tab-panel>
</t-tabs>
</t-card>
@ -57,10 +57,10 @@
<t-card class="user-intro" :bordered="false">
<t-avatar size="80px">T</t-avatar>
<div class="name">My Account</div>
<div class="position">XXG 港澳业务拓展组员工 直客销售</div>
<div class="position">{{ $t('pages.user.personalInfo.position') }}</div>
</t-card>
<t-card title="团队成员" class="user-team" :bordered="false">
<t-card :title="$t('pages.user.teamMember')" class="user-team" :bordered="false">
<template #actions>
<t-button theme="default" shape="square" variant="text">
<t-icon name="ellipsis" />
@ -73,7 +73,7 @@
</t-list>
</t-card>
<t-card title="服务产品" class="product-container" :bordered="false">
<t-card :title="$t('pages.user.serviceProduction')" class="product-container" :bordered="false">
<template #actions>
<t-button theme="default" shape="square" variant="text">
<t-icon name="ellipsis" />
@ -184,5 +184,5 @@ watch(
</script>
<style lang="less" scoped>
@import url('./index.less');
@import './index.less';
</style>

2
src/router/index.ts
View File

@ -60,9 +60,11 @@ export const getRoutesExpanded = () => {
export const getActive = (maxLevel = 3): string => {
const route = useRoute();
if (!route.path) {
return '';
}
return route.path
.split('/')
.filter((_item: string, index: number) => index <= maxLevel && index > 0)

Some files were not shown because too many files have changed in this diff Show More