mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 04:46:31 +08:00
refactor(list): 移除i18n相关
This commit is contained in:
悠静萝莉
parent
ad8f477483
commit
890a645dcc
44
src/pages/list/base/constants.ts
Normal file
44
src/pages/list/base/constants.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
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: '操作',
|
||||
},
|
||||
];
|
||||
|
|
@ -3,16 +3,12 @@
|
|||
<t-card class="list-card-container" :bordered="false">
|
||||
<t-row justify="space-between">
|
||||
<div class="left-operation-container">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="search-input">
|
||||
<t-input v-model="searchValue" :placeholder="$t('pages.listBase.placeholder')" clearable>
|
||||
<t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
|
||||
<template #suffix-icon>
|
||||
<search-icon size="16px" />
|
||||
</template>
|
||||
|
|
@ -31,45 +27,33 @@
|
|||
:header-affixed-top="headerAffixedTop"
|
||||
@page-change="rehandlePageChange"
|
||||
@change="rehandleChange"
|
||||
@select-change="(value: number[]) => rehandleSelectChange(value)"
|
||||
@select-change="rehandleSelectChange"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
<template #contractType="{ row }">
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
<template #paymentType="{ row }">
|
||||
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
|
||||
{{ $t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" />
|
||||
付款<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" />
|
||||
收款<trend class="dashboard-item-trend" type="down" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #op="slotProps">
|
||||
<t-space>
|
||||
<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-link theme="primary" @click="handleClickDetail()">详情</t-link>
|
||||
<t-link theme="danger" @click="handleClickDelete(slotProps)">删除</t-link>
|
||||
</t-space>
|
||||
</template>
|
||||
</t-table>
|
||||
|
|
@ -93,7 +77,7 @@ export default {
|
|||
|
||||
<script setup lang="ts">
|
||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||
import { MessagePlugin, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
|
@ -101,53 +85,11 @@ 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';
|
||||
|
||||
const store = useSettingStore();
|
||||
import { COLUMNS } from './constants';
|
||||
|
||||
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 store = useSettingStore();
|
||||
|
||||
const data = ref([]);
|
||||
const pagination = ref({
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
<template>
|
||||
<t-dialog v-model:visible="formVisible" :header="$t('pages.listCard.create')" :width="680" :footer="false">
|
||||
<t-dialog v-model:visible="formVisible" header="新建产品" :width="680" :footer="false">
|
||||
<template #body>
|
||||
<!-- 表单内容 -->
|
||||
<t-form ref="form" :data="formData" :rules="rules" :label-width="100" @submit="onSubmit">
|
||||
<t-form-item :label="$t('pages.listCard.productName')" name="name">
|
||||
<t-input v-model="formData.name" :style="{ width: '480px' }" />
|
||||
<t-form-item label="产品名称" name="name">
|
||||
<t-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入产品名称" />
|
||||
</t-form-item>
|
||||
<t-form-item :label="$t('pages.listCard.productStatus')" name="status">
|
||||
<t-form-item label="产品状态" name="status">
|
||||
<t-radio-group v-model="formData.status">
|
||||
<t-radio value="0">{{ $t('pages.listCard.productStatusEnum.off') }}</t-radio>
|
||||
<t-radio value="1">{{ $t('pages.listCard.productStatusEnum.on') }}</t-radio>
|
||||
<t-radio value="0">已停用</t-radio>
|
||||
<t-radio value="1">已启用</t-radio>
|
||||
</t-radio-group>
|
||||
</t-form-item>
|
||||
<t-form-item :label="$t('pages.listCard.productDescription')" name="description">
|
||||
<t-input v-model="formData.description" :style="{ width: '480px' }" />
|
||||
<t-form-item label="产品描述" name="description">
|
||||
<t-input v-model="formData.description" :style="{ width: '480px' }" placeholder="请输入产品描述" />
|
||||
</t-form-item>
|
||||
<t-form-item :label="$t('pages.listCard.productType')" name="type">
|
||||
<t-form-item label="产品类型" 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="$t('pages.listCard.productRemark')" name="mark">
|
||||
<t-textarea v-model="textareaValue" :style="{ width: '480px' }" name="description" />
|
||||
<t-form-item label="备注" name="mark">
|
||||
<t-textarea v-model="textareaValue" :style="{ width: '480px' }" placeholder="请输入内容" name="description" />
|
||||
</t-form-item>
|
||||
<t-form-item style="float: right">
|
||||
<t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="list-card-operation">
|
||||
<t-button @click="formDialogVisible = true"> {{ $t('pages.listCard.create') }} </t-button>
|
||||
<t-button @click="formDialogVisible = true"> 新建产品 </t-button>
|
||||
<div class="search-input">
|
||||
<t-input v-model="searchValue" :placeholder="$t('pages.listCard.placeholder')" clearable>
|
||||
<t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
|
||||
<template #suffix-icon>
|
||||
<search-icon v-if="searchValue === ''" size="var(--td-comp-size-xxxs)" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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="$t('pages.listTree.placeholder')" @change="onInput">
|
||||
<t-input v-model="filterText" placeholder="请输入关键词" @change="onInput">
|
||||
<template #suffix-icon>
|
||||
<search-icon size="var(--td-comp-size-xxxs)" />
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user