refactor(detail): 移除i18n相关

This commit is contained in:
悠静萝莉 2024-09-03 01:14:29 +08:00
parent 6dc5b4c829
commit c5535de8f9
No known key found for this signature in database
GPG Key ID: 4EDF1CA1CEA8EBCC
8 changed files with 244 additions and 278 deletions

View File

@ -1,13 +1,11 @@
import { t } from '@/locales';
export const BASE_INFO_DATA = [
{
name: t('constants.contract.name'),
name: '合同名称',
value: '总部办公用品采购项目',
type: null,
},
{
name: t('constants.contract.status'),
name: '合同状态',
value: '履行中',
type: {
key: 'contractStatus',
@ -15,52 +13,52 @@ export const BASE_INFO_DATA = [
},
},
{
name: t('constants.contract.num'),
name: '合同编号',
value: 'BH00010',
type: null,
},
{
name: t('constants.contract.type'),
value: t('constants.contract.typeOptions.main'),
name: '合同类型',
value: '主合同',
type: null,
},
{
name: t('constants.contract.payType'),
value: t('constants.contract.pay'),
name: '合同收付类型',
value: '付款',
type: null,
},
{
name: t('constants.contract.amount'),
value: '¥ 5,000,000',
name: '合同金额',
value: '5,000,000',
type: null,
},
{
name: t('constants.contract.company'),
name: '甲方',
value: '腾讯科技(深圳)有限公司',
type: null,
},
{
name: t('constants.contract.employee'),
name: '乙方',
value: '欧尚',
type: null,
},
{
name: t('constants.contract.signDate'),
name: '合同签订日期',
value: '2020-12-20',
type: null,
},
{
name: t('constants.contract.effectiveDate'),
name: '合同生效日期',
value: '2021-01-20',
type: null,
},
{
name: t('constants.contract.endDate'),
name: '合同结束日期',
value: '2022-12-20',
type: null,
},
{
name: t('constants.contract.attachment'),
name: '合同附件',
value: '总部办公用品采购项目合同.pdf',
type: {
key: 'contractAnnex',
@ -68,17 +66,68 @@ export const BASE_INFO_DATA = [
},
},
{
name: t('constants.contract.remark'),
name: '备注',
value: '--',
type: null,
},
{
name: t('constants.contract.createDate'),
name: '创建时间',
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',

View File

@ -1,8 +1,9 @@
<template>
<div class="detail-advanced">
<t-card :bordered="false">
<t-descriptions :title="$t('pages.detailCard.baseInfo.title')">
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
<t-card 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>
<span
:class="{
['inProgress']: item.type && item.type.value === 'inProgress',
@ -12,37 +13,28 @@
<i v-if="item.type && item.type.key === 'contractStatus'" />
{{ item.value }}
</span>
</t-descriptions-item>
</t-descriptions>
</div>
</div>
</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-steps :current="updateCurrent">
<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-step-item title="申请提交" content="已于12月21日提交" />
<t-step-item title="电子发票" content="预计13个工作日" />
<t-step-item title="发票已邮寄" content="电子发票开出后7个工作日联系" />
<t-step-item title="完成" content="" />
</t-steps>
</t-row>
</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>
<t-radio-group default-value="dateVal">
<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-button value="dateVal"> 季度 </t-radio-button>
<t-radio-button value="monthVal"> 月份 </t-radio-button>
</t-radio-group>
</template>
<t-row :gutter="16" class="product-block-container">
@ -50,7 +42,7 @@
<div class="product-add">
<div class="product-sub">
<t-icon name="add" class="product-sub-icon" />
<span>{{ $t('pages.detailCard.product.add') }}</span>
<span>新增产品</span>
</div>
</div>
</t-col>
@ -61,7 +53,7 @@
</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
:columns="columns"
:data="data"
@ -96,10 +88,8 @@
<template #op="slotProps">
<t-space>
<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-link theme="primary" @click="listClick()">管理</t-link>
<t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
</t-space>
</template>
@ -109,11 +99,11 @@
</t-table>
</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>
<div class="dialog-info-block">
<t-descriptions :column="1">
<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
:class="{
['inProgress']: item.type && item.type.value === 'inProgress',
@ -123,8 +113,7 @@
<i v-if="item.type && item.type.key === 'contractStatus'" />
{{ item.value }}
</span>
</t-descriptions-item>
</t-descriptions>
</div>
</div>
</template>
</t-dialog>
@ -141,61 +130,9 @@ 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 } 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'),
},
];
import { BASE_INFO_DATA, PRODUCT_LIST, TABLE_COLUMNS_DATA as columns } from './constants';
const data = ref([]);
const pagination = ref({

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

View File

@ -1,8 +1,9 @@
<template>
<div class="detail-base">
<t-card :bordered="false">
<t-descriptions :title="$t('pages.detailBase.baseInfo.title')">
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
<t-card 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>
<span
:class="{
['inProgress']: item.type && item.type.value === 'inProgress',
@ -12,24 +13,15 @@
<i v-if="item.type && item.type.key === 'contractStatus'" />
{{ item.value }}
</span>
</t-descriptions-item>
</t-descriptions>
</div>
</div>
</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-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-step-item title="上传合同附件" content="这里是提示文字" />
<t-step-item title="修改合同金额" content="这里是提示文字" />
<t-step-item title="新建合同" content="2020-12-01 15:00:00 管理员-李川操作" />
</t-steps>
</t-card>
</div>
@ -42,81 +34,7 @@ export default {
</script>
<script setup lang="ts">
import { t } from '@/locales';
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,
},
];
import { BASE_INFO_DATA } from './constants';
</script>
<style lang="less" scoped>

View File

@ -80,3 +80,36 @@ 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: '操作',
},
];

View File

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

View File

@ -2,18 +2,18 @@
<div class="detail-deploy">
<t-row :gutter="16">
<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 id="monitorContainer" style="width: 100%; height: 265px" />
</div>
</t-card>
</t-col>
<t-col :lg="6" :xs="12">
<t-card :title="$t('pages.detailDeploy.deployTrend.warning')" :bordered="false">
<t-card title="告警情况" :bordered="false">
<template #actions>
<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="monthVal"> {{ $t('pages.detailDeploy.deployTrend.thisMonth') }} </t-radio-button>
<t-radio-button value="dateVal"> 本周 </t-radio-button>
<t-radio-button value="monthVal"> 本月 </t-radio-button>
</t-radio-group>
</template>
<div id="dataContainer" style="width: 100%; height: 265px" />
@ -22,7 +22,7 @@
</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
:columns="columns"
:data="data"
@ -41,12 +41,8 @@
</template>
<template #op="slotProps">
<t-space>
<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-link theme="primary" @click="listClick()">管理</t-link>
<t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
</t-space>
</template>
<template #op-column>
@ -55,11 +51,7 @@
</t-table>
</t-card>
<t-dialog
v-model:visible="visible"
:header="$t('pages.detailDeploy.projectList.dialog.title')"
@confirm="onConfirm"
>
<t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
<template #body>
<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 { getProjectList } from '@/api/detail';
import { t } from '@/locales';
import { useSettingStore } from '@/store';
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';
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,

View File

@ -18,14 +18,14 @@
<t-tooltip
class="set-read-icon"
: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)">
<t-icon v-if="!!item.status" name="queue" size="16px" />
<t-icon v-else name="chat" />
</span>
</t-tooltip>
<t-tooltip :content="t('pages.detailSecondary.delete')" :overlay-style="{ margin: '6px' }">
<t-tooltip content="删除通知" :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>{{ t('pages.detailSecondary.empty') }}</p>
<p>暂无通知</p>
</div>
</t-tab-panel>
</t-tabs>
@ -62,21 +62,20 @@ 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: t('pages.detailSecondary.all'),
label: '全部通知',
value: 'msgData',
},
{
label: t('pages.detailSecondary.unread'),
label: '未读通知',
value: 'unreadMsg',
},
{
label: t('pages.detailSecondary.read'),
label: '已读通知',
value: 'readMsg',
},
];