mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 09:39:08 +08:00
refactor(detail): 移除i18n相关
This commit is contained in:
parent
6dc5b4c829
commit
c5535de8f9
|
@ -1,13 +1,11 @@
|
||||||
import { t } from '@/locales';
|
|
||||||
|
|
||||||
export const BASE_INFO_DATA = [
|
export const BASE_INFO_DATA = [
|
||||||
{
|
{
|
||||||
name: t('constants.contract.name'),
|
name: '合同名称',
|
||||||
value: '总部办公用品采购项目',
|
value: '总部办公用品采购项目',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.status'),
|
name: '合同状态',
|
||||||
value: '履行中',
|
value: '履行中',
|
||||||
type: {
|
type: {
|
||||||
key: 'contractStatus',
|
key: 'contractStatus',
|
||||||
|
@ -15,52 +13,52 @@ export const BASE_INFO_DATA = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.num'),
|
name: '合同编号',
|
||||||
value: 'BH00010',
|
value: 'BH00010',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.type'),
|
name: '合同类型',
|
||||||
value: t('constants.contract.typeOptions.main'),
|
value: '主合同',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.payType'),
|
name: '合同收付类型',
|
||||||
value: t('constants.contract.pay'),
|
value: '付款',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.amount'),
|
name: '合同金额',
|
||||||
value: '¥ 5,000,000',
|
value: '5,000,000元',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.company'),
|
name: '甲方',
|
||||||
value: '腾讯科技(深圳)有限公司',
|
value: '腾讯科技(深圳)有限公司',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.employee'),
|
name: '乙方',
|
||||||
value: '欧尚',
|
value: '欧尚',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.signDate'),
|
name: '合同签订日期',
|
||||||
value: '2020-12-20',
|
value: '2020-12-20',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.effectiveDate'),
|
name: '合同生效日期',
|
||||||
value: '2021-01-20',
|
value: '2021-01-20',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.endDate'),
|
name: '合同结束日期',
|
||||||
value: '2022-12-20',
|
value: '2022-12-20',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.attachment'),
|
name: '合同附件',
|
||||||
value: '总部办公用品采购项目合同.pdf',
|
value: '总部办公用品采购项目合同.pdf',
|
||||||
type: {
|
type: {
|
||||||
key: 'contractAnnex',
|
key: 'contractAnnex',
|
||||||
|
@ -68,17 +66,68 @@ export const BASE_INFO_DATA = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.remark'),
|
name: '备注',
|
||||||
value: '--',
|
value: '--',
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('constants.contract.createDate'),
|
name: '创建时间',
|
||||||
value: '2020-12-22 10:00:00',
|
value: '2020-12-22 10:00:00',
|
||||||
type: null,
|
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 = [
|
export const PRODUCT_LIST = [
|
||||||
{
|
{
|
||||||
name: 'MacBook Pro 2021',
|
name: 'MacBook Pro 2021',
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="detail-advanced">
|
<div class="detail-advanced">
|
||||||
<t-card :bordered="false">
|
<t-card title="基本信息" :bordered="false">
|
||||||
<t-descriptions :title="$t('pages.detailCard.baseInfo.title')">
|
<div class="info-block">
|
||||||
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
|
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
|
||||||
|
<h1>{{ item.name }}</h1>
|
||||||
<span
|
<span
|
||||||
:class="{
|
:class="{
|
||||||
['inProgress']: item.type && item.type.value === 'inProgress',
|
['inProgress']: item.type && item.type.value === 'inProgress',
|
||||||
|
@ -12,37 +13,28 @@
|
||||||
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
||||||
{{ item.value }}
|
{{ item.value }}
|
||||||
</span>
|
</span>
|
||||||
</t-descriptions-item>
|
</div>
|
||||||
</t-descriptions>
|
</div>
|
||||||
</t-card>
|
</t-card>
|
||||||
|
|
||||||
<!-- 发票进度 -->
|
<!-- 发票进度 -->
|
||||||
<t-card :title="$t('pages.detailCard.invoice.title')" class="container-base-margin-top" :bordered="false">
|
<t-card title="发票进度" class="container-base-margin-top" :bordered="false">
|
||||||
<t-row justify="space-between">
|
<t-row justify="space-between">
|
||||||
<t-steps :current="updateCurrent">
|
<t-steps :current="updateCurrent">
|
||||||
<t-step-item
|
<t-step-item title="申请提交" content="已于12月21日提交" />
|
||||||
:title="$t('pages.detailCard.invoice.step1.title')"
|
<t-step-item title="电子发票" content="预计1~3个工作日" />
|
||||||
:content="$t('pages.detailCard.invoice.step1.content')"
|
<t-step-item title="发票已邮寄" content="电子发票开出后7个工作日联系" />
|
||||||
/>
|
<t-step-item title="完成" 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-steps>
|
||||||
</t-row>
|
</t-row>
|
||||||
</t-card>
|
</t-card>
|
||||||
|
|
||||||
<!-- 产品目录 -->
|
<!-- 产品目录 -->
|
||||||
<t-card :title="$t('pages.detailCard.product.title')" class="container-base-margin-top" :bordered="false">
|
<t-card title="产品目录" class="container-base-margin-top" :bordered="false">
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<t-radio-group default-value="dateVal">
|
<t-radio-group default-value="dateVal">
|
||||||
<t-radio-button value="dateVal"> {{ $t('pages.detailCard.product.quarter') }} </t-radio-button>
|
<t-radio-button value="dateVal"> 季度 </t-radio-button>
|
||||||
<t-radio-button value="monthVal"> {{ $t('pages.detailCard.product.month') }} </t-radio-button>
|
<t-radio-button value="monthVal"> 月份 </t-radio-button>
|
||||||
</t-radio-group>
|
</t-radio-group>
|
||||||
</template>
|
</template>
|
||||||
<t-row :gutter="16" class="product-block-container">
|
<t-row :gutter="16" class="product-block-container">
|
||||||
|
@ -50,7 +42,7 @@
|
||||||
<div class="product-add">
|
<div class="product-add">
|
||||||
<div class="product-sub">
|
<div class="product-sub">
|
||||||
<t-icon name="add" class="product-sub-icon" />
|
<t-icon name="add" class="product-sub-icon" />
|
||||||
<span>{{ $t('pages.detailCard.product.add') }}</span>
|
<span>新增产品</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</t-col>
|
</t-col>
|
||||||
|
@ -61,7 +53,7 @@
|
||||||
</t-card>
|
</t-card>
|
||||||
|
|
||||||
<!-- 产品采购明细 -->
|
<!-- 产品采购明细 -->
|
||||||
<t-card :title="$t('pages.detailCard.detail.title')" class="container-base-margin-top" :bordered="false">
|
<t-card title="产品采购明细" class="container-base-margin-top" :bordered="false">
|
||||||
<t-table
|
<t-table
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data="data"
|
:data="data"
|
||||||
|
@ -96,10 +88,8 @@
|
||||||
|
|
||||||
<template #op="slotProps">
|
<template #op="slotProps">
|
||||||
<t-space>
|
<t-space>
|
||||||
<t-link theme="primary" @click="listClick()">{{ t('pages.detailCard.detail.form.manage') }}</t-link>
|
<t-link theme="primary" @click="listClick()">管理</t-link>
|
||||||
<t-link theme="danger" @click="deleteClickOp(slotProps)">{{
|
<t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
|
||||||
t('pages.detailCard.detail.form.delete')
|
|
||||||
}}</t-link>
|
|
||||||
</t-space>
|
</t-space>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -109,11 +99,11 @@
|
||||||
</t-table>
|
</t-table>
|
||||||
</t-card>
|
</t-card>
|
||||||
|
|
||||||
<t-dialog v-model:visible="visible" :header="$t('pages.detailCard.baseInfo.title')" @confirm="onConfirm">
|
<t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="dialog-info-block">
|
<div class="dialog-info-block">
|
||||||
<t-descriptions :column="1">
|
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
|
||||||
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
|
<h1>{{ item.name }}</h1>
|
||||||
<span
|
<span
|
||||||
:class="{
|
:class="{
|
||||||
['inProgress']: item.type && item.type.value === 'inProgress',
|
['inProgress']: item.type && item.type.value === 'inProgress',
|
||||||
|
@ -123,8 +113,7 @@
|
||||||
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
||||||
{{ item.value }}
|
{{ item.value }}
|
||||||
</span>
|
</span>
|
||||||
</t-descriptions-item>
|
</div>
|
||||||
</t-descriptions>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</t-dialog>
|
</t-dialog>
|
||||||
|
@ -141,61 +130,9 @@ export default {
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
import { getPurchaseList } from '@/api/detail';
|
import { getPurchaseList } from '@/api/detail';
|
||||||
import { t } from '@/locales';
|
|
||||||
|
|
||||||
import Product from './components/Product.vue';
|
import Product from './components/Product.vue';
|
||||||
import { BASE_INFO_DATA, PRODUCT_LIST } from './constants';
|
import { BASE_INFO_DATA, PRODUCT_LIST, TABLE_COLUMNS_DATA as columns } 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 data = ref([]);
|
||||||
const pagination = ref({
|
const pagination = ref({
|
||||||
|
|
78
src/pages/detail/base/constants.ts
Normal file
78
src/pages/detail/base/constants.ts
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
];
|
|
@ -1,8 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="detail-base">
|
<div class="detail-base">
|
||||||
<t-card :bordered="false">
|
<t-card title="基本信息" :bordered="false">
|
||||||
<t-descriptions :title="$t('pages.detailBase.baseInfo.title')">
|
<div class="info-block">
|
||||||
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
|
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
|
||||||
|
<h1>{{ item.name }}</h1>
|
||||||
<span
|
<span
|
||||||
:class="{
|
:class="{
|
||||||
['inProgress']: item.type && item.type.value === 'inProgress',
|
['inProgress']: item.type && item.type.value === 'inProgress',
|
||||||
|
@ -12,24 +13,15 @@
|
||||||
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
||||||
{{ item.value }}
|
{{ item.value }}
|
||||||
</span>
|
</span>
|
||||||
</t-descriptions-item>
|
</div>
|
||||||
</t-descriptions>
|
</div>
|
||||||
</t-card>
|
</t-card>
|
||||||
|
|
||||||
<t-card :title="$t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">
|
<t-card title="变更记录" class="container-base-margin-top" :bordered="false">
|
||||||
<t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
|
<t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
|
||||||
<t-step-item
|
<t-step-item title="上传合同附件" content="这里是提示文字" />
|
||||||
:title="$t('pages.detailBase.changelog.step1.title')"
|
<t-step-item title="修改合同金额" content="这里是提示文字" />
|
||||||
:content="$t('pages.detailBase.changelog.step1.subtitle')"
|
<t-step-item title="新建合同" content="2020-12-01 15:00:00 管理员-李川操作" />
|
||||||
/>
|
|
||||||
<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-steps>
|
||||||
</t-card>
|
</t-card>
|
||||||
</div>
|
</div>
|
||||||
|
@ -42,81 +34,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { t } from '@/locales';
|
import { BASE_INFO_DATA } from './constants';
|
||||||
|
|
||||||
const BASE_INFO_DATA = [
|
|
||||||
{
|
|
||||||
name: t('constants.contract.name'),
|
|
||||||
value: '总部办公用品采购项目',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.status'),
|
|
||||||
value: '履行中',
|
|
||||||
type: {
|
|
||||||
key: 'contractStatus',
|
|
||||||
value: 'inProgress',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.num'),
|
|
||||||
value: 'BH00010',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.type'),
|
|
||||||
value: t('constants.contract.typeOptions.main'),
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.payType'),
|
|
||||||
value: t('constants.contract.pay'),
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.amount'),
|
|
||||||
value: '¥ 5,000,000',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.company'),
|
|
||||||
value: '腾讯科技(深圳)有限公司',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.employee'),
|
|
||||||
value: '欧尚',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.signDate'),
|
|
||||||
value: '2020-12-20',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.effectiveDate'),
|
|
||||||
value: '2021-01-20',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.endDate'),
|
|
||||||
value: '2022-12-20',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.attachment'),
|
|
||||||
value: '总部办公用品采购项目合同.pdf',
|
|
||||||
type: {
|
|
||||||
key: 'contractAnnex',
|
|
||||||
value: 'pdf',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: t('constants.contract.createDate'),
|
|
||||||
value: '2020-12-22 10:00:00',
|
|
||||||
type: null,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -80,3 +80,36 @@ export const BASE_INFO_DATA = [
|
||||||
type: null,
|
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: '操作',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { TChartColor } from '@/config/color';
|
import { TChartColor } from '@/config/color';
|
||||||
import { t } from '@/locales/index';
|
|
||||||
import { getDateArray, getRandomArray } from '@/utils/charts';
|
import { getDateArray, getRandomArray } from '@/utils/charts';
|
||||||
import { getChartListColor } from '@/utils/color';
|
import { getChartListColor } from '@/utils/color';
|
||||||
|
|
||||||
|
@ -53,7 +52,7 @@ export function getSmoothLineDataSet({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: [t('pages.detailDeploy.deployTrend.thisMonth'), t('pages.detailDeploy.deployTrend.lastMonth')],
|
data: ['本月', '上月'],
|
||||||
icon: 'circle',
|
icon: 'circle',
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
itemGap: 48,
|
itemGap: 48,
|
||||||
|
@ -66,7 +65,7 @@ export function getSmoothLineDataSet({
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: t('pages.detailDeploy.deployTrend.lastMonth'),
|
name: '上月',
|
||||||
data: [
|
data: [
|
||||||
getRandomArray(),
|
getRandomArray(),
|
||||||
getRandomArray(),
|
getRandomArray(),
|
||||||
|
@ -87,7 +86,7 @@ export function getSmoothLineDataSet({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('pages.detailDeploy.deployTrend.thisMonth'),
|
name: '本月',
|
||||||
data: [
|
data: [
|
||||||
getRandomArray(),
|
getRandomArray(),
|
||||||
getRandomArray(),
|
getRandomArray(),
|
||||||
|
@ -130,11 +129,6 @@ export function get2ColBarChartDataSet({
|
||||||
thisYearListCopy = thisYearListCopy.reverse();
|
thisYearListCopy = thisYearListCopy.reverse();
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = [];
|
|
||||||
for (let i = 1; i < 7; i++) {
|
|
||||||
data.push(t(`pages.detailDeploy.deployTrend.week${i}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
color: getChartListColor(),
|
color: getChartListColor(),
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
@ -150,7 +144,7 @@ export function get2ColBarChartDataSet({
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data,
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||||
axisTick: {
|
axisTick: {
|
||||||
alignWithLabel: true,
|
alignWithLabel: true,
|
||||||
},
|
},
|
||||||
|
@ -179,7 +173,7 @@ export function get2ColBarChartDataSet({
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
legend: {
|
legend: {
|
||||||
data: [t('pages.detailDeploy.deployTrend.lastYear'), t('pages.detailDeploy.deployTrend.thisYear')],
|
data: ['去年', '今年'],
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
icon: 'rect',
|
icon: 'rect',
|
||||||
itemGap: 48,
|
itemGap: 48,
|
||||||
|
@ -192,7 +186,7 @@ export function get2ColBarChartDataSet({
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: t('pages.detailDeploy.deployTrend.lastYear'),
|
name: '去年',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '30%',
|
barWidth: '30%',
|
||||||
data: lastYearListCopy,
|
data: lastYearListCopy,
|
||||||
|
@ -201,7 +195,7 @@ export function get2ColBarChartDataSet({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('pages.detailDeploy.deployTrend.thisYear'),
|
name: '今年',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '30%',
|
barWidth: '30%',
|
||||||
data: thisYearListCopy,
|
data: thisYearListCopy,
|
||||||
|
|
|
@ -2,18 +2,18 @@
|
||||||
<div class="detail-deploy">
|
<div class="detail-deploy">
|
||||||
<t-row :gutter="16">
|
<t-row :gutter="16">
|
||||||
<t-col :lg="6" :xs="12">
|
<t-col :lg="6" :xs="12">
|
||||||
<t-card :title="$t('pages.detailDeploy.deployTrend.title')" :bordered="false">
|
<t-card title="部署趋势" :bordered="false">
|
||||||
<div class="deploy-panel-left">
|
<div class="deploy-panel-left">
|
||||||
<div id="monitorContainer" style="width: 100%; height: 265px" />
|
<div id="monitorContainer" style="width: 100%; height: 265px" />
|
||||||
</div>
|
</div>
|
||||||
</t-card>
|
</t-card>
|
||||||
</t-col>
|
</t-col>
|
||||||
<t-col :lg="6" :xs="12">
|
<t-col :lg="6" :xs="12">
|
||||||
<t-card :title="$t('pages.detailDeploy.deployTrend.warning')" :bordered="false">
|
<t-card title="告警情况" :bordered="false">
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<t-radio-group default-value="dateVal" @change="onAlertChange">
|
<t-radio-group default-value="dateVal" @change="onAlertChange">
|
||||||
<t-radio-button value="dateVal"> {{ $t('pages.detailDeploy.deployTrend.thisWeek') }} </t-radio-button>
|
<t-radio-button value="dateVal"> 本周 </t-radio-button>
|
||||||
<t-radio-button value="monthVal"> {{ $t('pages.detailDeploy.deployTrend.thisMonth') }} </t-radio-button>
|
<t-radio-button value="monthVal"> 本月 </t-radio-button>
|
||||||
</t-radio-group>
|
</t-radio-group>
|
||||||
</template>
|
</template>
|
||||||
<div id="dataContainer" style="width: 100%; height: 265px" />
|
<div id="dataContainer" style="width: 100%; height: 265px" />
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
</t-row>
|
</t-row>
|
||||||
|
|
||||||
<!-- 项目列表 -->
|
<!-- 项目列表 -->
|
||||||
<t-card :title="$t('pages.detailDeploy.projectList.title')" class="container-base-margin-top" :bordered="false">
|
<t-card title="项目列表" class="container-base-margin-top" :bordered="false">
|
||||||
<t-table
|
<t-table
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data="data"
|
:data="data"
|
||||||
|
@ -41,12 +41,8 @@
|
||||||
</template>
|
</template>
|
||||||
<template #op="slotProps">
|
<template #op="slotProps">
|
||||||
<t-space>
|
<t-space>
|
||||||
<t-link theme="primary" @click="listClick()">{{
|
<t-link theme="primary" @click="listClick()">管理</t-link>
|
||||||
$t('pages.detailDeploy.projectList.table.manage')
|
<t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
|
||||||
}}</t-link>
|
|
||||||
<t-link theme="danger" @click="deleteClickOp(slotProps)">{{
|
|
||||||
$t('pages.detailDeploy.projectList.table.delete')
|
|
||||||
}}</t-link>
|
|
||||||
</t-space>
|
</t-space>
|
||||||
</template>
|
</template>
|
||||||
<template #op-column>
|
<template #op-column>
|
||||||
|
@ -55,11 +51,7 @@
|
||||||
</t-table>
|
</t-table>
|
||||||
</t-card>
|
</t-card>
|
||||||
|
|
||||||
<t-dialog
|
<t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
|
||||||
v-model:visible="visible"
|
|
||||||
:header="$t('pages.detailDeploy.projectList.dialog.title')"
|
|
||||||
@confirm="onConfirm"
|
|
||||||
>
|
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="dialog-info-block">
|
<div class="dialog-info-block">
|
||||||
<div class="dialog-info-block">
|
<div class="dialog-info-block">
|
||||||
|
@ -94,46 +86,12 @@ import { CanvasRenderer } from 'echarts/renderers';
|
||||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||||
|
|
||||||
import { getProjectList } from '@/api/detail';
|
import { getProjectList } from '@/api/detail';
|
||||||
import { t } from '@/locales';
|
|
||||||
import { useSettingStore } from '@/store';
|
import { useSettingStore } from '@/store';
|
||||||
import { changeChartsTheme } from '@/utils/color';
|
import { changeChartsTheme } from '@/utils/color';
|
||||||
|
|
||||||
import { BASE_INFO_DATA } from './constants';
|
import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
|
||||||
import { get2ColBarChartDataSet, getSmoothLineDataSet } from './index';
|
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([
|
echarts.use([
|
||||||
TitleComponent,
|
TitleComponent,
|
||||||
ToolboxComponent,
|
ToolboxComponent,
|
||||||
|
|
|
@ -18,14 +18,14 @@
|
||||||
<t-tooltip
|
<t-tooltip
|
||||||
class="set-read-icon"
|
class="set-read-icon"
|
||||||
:overlay-style="{ margin: '6px' }"
|
:overlay-style="{ margin: '6px' }"
|
||||||
:content="item.status ? $t('pages.detailSecondary.setRead') : $t('pages.detailSecondary.setUnread')"
|
:content="item.status ? '设为已读' : '设为未读'"
|
||||||
>
|
>
|
||||||
<span class="msg-action-icon" @click="setReadStatus(item)">
|
<span class="msg-action-icon" @click="setReadStatus(item)">
|
||||||
<t-icon v-if="!!item.status" name="queue" size="16px" />
|
<t-icon v-if="!!item.status" name="queue" size="16px" />
|
||||||
<t-icon v-else name="chat" />
|
<t-icon v-else name="chat" />
|
||||||
</span>
|
</span>
|
||||||
</t-tooltip>
|
</t-tooltip>
|
||||||
<t-tooltip :content="t('pages.detailSecondary.delete')" :overlay-style="{ margin: '6px' }">
|
<t-tooltip content="删除通知" :overlay-style="{ margin: '6px' }">
|
||||||
<span @click="handleClickDeleteBtn(item)">
|
<span @click="handleClickDeleteBtn(item)">
|
||||||
<t-icon name="delete" size="16px" />
|
<t-icon name="delete" size="16px" />
|
||||||
</span>
|
</span>
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
</t-list>
|
</t-list>
|
||||||
<div v-else class="secondary-msg-list__empty-list">
|
<div v-else class="secondary-msg-list__empty-list">
|
||||||
<empty-icon></empty-icon>
|
<empty-icon></empty-icon>
|
||||||
<p>{{ t('pages.detailSecondary.empty') }}</p>
|
<p>暂无通知</p>
|
||||||
</div>
|
</div>
|
||||||
</t-tab-panel>
|
</t-tab-panel>
|
||||||
</t-tabs>
|
</t-tabs>
|
||||||
|
@ -62,21 +62,20 @@ import { computed, ref } from 'vue';
|
||||||
|
|
||||||
import EmptyIcon from '@/assets/assets-empty.svg?component';
|
import EmptyIcon from '@/assets/assets-empty.svg?component';
|
||||||
import { NOTIFICATION_TYPES } from '@/constants';
|
import { NOTIFICATION_TYPES } from '@/constants';
|
||||||
import { t } from '@/locales';
|
|
||||||
import { useNotificationStore } from '@/store';
|
import { useNotificationStore } from '@/store';
|
||||||
import type { NotificationItem } from '@/types/interface';
|
import type { NotificationItem } from '@/types/interface';
|
||||||
|
|
||||||
const TAB_LIST = [
|
const TAB_LIST = [
|
||||||
{
|
{
|
||||||
label: t('pages.detailSecondary.all'),
|
label: '全部通知',
|
||||||
value: 'msgData',
|
value: 'msgData',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('pages.detailSecondary.unread'),
|
label: '未读通知',
|
||||||
value: 'unreadMsg',
|
value: 'unreadMsg',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('pages.detailSecondary.read'),
|
label: '已读通知',
|
||||||
value: 'readMsg',
|
value: 'readMsg',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
Loading…
Reference in New Issue
Block a user