Commit 076930a0 authored by mengzixuan's avatar mengzixuan

feat: 报表中心

parent 16f20e96
......@@ -205,45 +205,56 @@ export const tabList = [
{
key: '1',
tab: '投资计划',
component: 'InvestmentPlan',
},
{
key: '2',
tab: '计划完成情况',
component: 'performance',
},
{
key: '3',
tab: '年度资金计划',
component: 'annualPlan',
},
{
key: '4',
tab: '月度资金计划',
component: 'monthlyPlan',
},
{
key: '5',
tab: '已竣工验收项目陈欠资金计划',
component: 'completed',
},
{
key: '6',
tab: '招标计划',
component: 'biddingPlan',
},
{
key: '7',
tab: '招标管理',
component: 'biddingManagement',
},
{
key: '8',
tab: '结算管理',
component: 'settlementManagement',
},
{
key: '9',
tab: '变更签证管理',
component: 'changeSignature',
},
{
key: '10',
tab: '安全隐患管理',
component: 'potentialSafety',
},
{
key: '11',
tab: '安全教育培训',
component: 'safetyEducation',
},
];
<template>
<div>
<BasicTable @register="registerTable" :title="'报表中心'">
<template #tabSlot>
<Tabs v-model:activeKey="activeKey" @change="change">
<template v-for="item in tabList" :key="item.key">
<TabPane :tab="item.tab" />
</template>
</Tabs>
</template>
<template #toolbar>
<a-button type="primary" @click="Import"> 导入数据 </a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
<div class="body">
<Tabs v-model:activeKey="activeKey" @change="change">
<template v-for="item in tabList" :key="item.key">
<TabPane :tab="item.tab">
<component :is="tabs[item.component]" />
</TabPane>
</template>
</Tabs>
</div>
</template>
<script lang="ts" setup>
import { Tabs } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getList } from '@/api/project/statement';
import { Tabs } from 'ant-design-vue';
import { useDrawer } from '@/components/Drawer';
import InvestmentPlan from '@/views/statement/tabs/InvestmentPlan.vue';
import { columns, searchFormSchema, tabList } from './data';
import { tabList } from './data';
defineOptions({ name: 'Statement' });
import { ref } from 'vue';
import performance from '@/views/statement/tabs/performance.vue';
import annualPlan from '@/views/statement/tabs/annualPlan.vue';
import monthlyPlan from '@/views/statement/tabs/monthlyPlan.vue';
import completed from '@/views/statement/tabs/completed.vue';
import biddingPlan from '@/views/statement/tabs/biddingPlan.vue';
import biddingManagement from '@/views/statement/tabs/biddingManagement.vue';
import settlementManagement from '@/views/statement/tabs/settlementManagement.vue';
import changeSignature from '@/views/statement/tabs/changeSignature.vue';
import potentialSafety from '@/views/statement/tabs/potentialSafety.vue';
import safetyEducation from '@/views/statement/tabs/safetyEducation.vue';
import contract from '@/views/statement/tabs/contract.vue';
import annex from '@/views/statement/tabs/annex.vue';
import updateRecords from '@/views/statement/tabs/updateRecords.vue';
import { ref } from 'vue';
const activeKey = ref('1');
defineOptions({ name: 'Statement' });
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerTable, { reload }] = useTable({
api: getList,
title: '123',
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {tabName: activeKey},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleEdit(record: Recordable) {
openDrawer(true, {
record,
isUpdate: true,
});
}
function handleDelete(record: Recordable) {
console.log(record);
}
function handleSuccess() {
reload();
}
const Import = () => {
console.log('导入数据');
};
const change = (key: string) => {
reload();
};
const tabs = {
InvestmentPlan,
performance,
annualPlan,
monthlyPlan,
completed,
biddingPlan,
biddingManagement,
settlementManagement,
changeSignature,
potentialSafety,
safetyEducation,
contract,
annex,
updateRecords,
};
const TabPane = Tabs.TabPane;
const activeKey = ref('1');
</script>
<style lang="less" scoped>
.body {
margin: 16px;
padding: 10px 22px;
background-color: #ffffff;
.vben-basic-table-form-container {
padding: 0 !important;
}
.page-card {
padding: 0 !important;
}
.page-card-body {
padding: 0 !important;
}
}
</style>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.reviewStatus == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { columns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { inject } from 'vue';
import { getEngineeringList } from '@/api/project/engineeringProject';
import { router } from '@/router';
const [registerTable, { reload }] = useTable({
api: getEngineeringList,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
if (record.planType === '工程') {
router.push({
path: '/engineeringProject/engineeringEdit',
query: {
id: record.id,
disabled: String(disabled),
},
});
} else if (record.planType === '承建') {
router.push({
path: '/engineeringProject/constructionEdit',
query: {
id: record.id,
disabled: String(disabled),
},
});
} else if (record.planType === '储备') {
router.push({
path: '/engineeringProject/reserveEdit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'tenderYear'">
{{ record.tenderYear + '年' + record.biddingQuarter + '季度' }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '下载',
onClick: handleDown.bind(null, record),
},
{
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
ifShow: (_action) => {
return record.reviewStatus == null;
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { annexColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getAnnexList, deleteAnnex } from '@/api/project/project';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getAnnexList,
columns: annexColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDown(record: Recordable) {
window.open(record.url);
}
function handleDelete(record: Recordable) {
deleteAnnex({ id: record.id });
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { annualPlanColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { inject } from 'vue';
import { getAnnualPlanList } from '@/api/project/annualPlan';
import { router } from '@/router';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getAnnualPlanList,
columns: annualPlanColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/annualPlan/annualPlanEdit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'tenderYear'">
{{ record.tenderYear + '年' + record.biddingQuarter + '季度' }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { biddingManagementColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getListByPage } from '@/api/project/biddingManagement';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getListByPage,
columns: biddingManagementColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/biddingManagement/edit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'tenderYear'">
{{ record.tenderYear + '年' + record.biddingQuarter + '季度' }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { biddingPlanColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getListByPage } from '@/api/project/biddingPlan';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getListByPage,
columns: biddingPlanColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/biddingPlan/edit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'tenderYear'">
{{ record.tenderYear + '年' + record.biddingQuarter + '季度' }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { changeSignatureColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getSettlementManageList } from '@/api/changeSignatrue/changeSignatrue';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getSettlementManageList,
columns: changeSignatureColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/changeSignature/edit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { completedColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { inject } from 'vue';
import { getCompletedList } from '@/api/project/completed';
import { router } from '@/router';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getCompletedList,
columns: completedColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/completed/completedEdit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'tenderYear'">
{{ record.tenderYear + '年' + record.biddingQuarter + '季度' }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { contractColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getContractListPage } from '@/api/contract/contract';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getContractListPage,
columns: contractColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/contract/edit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
This diff is collapsed.
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.reviewStatus == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { monthlyPlanColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { inject } from 'vue';
import { getAnnualPlanList } from '@/api/project/annualPlan';
import { router } from '@/router';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getAnnualPlanList,
columns: monthlyPlanColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/monthlyPlan/monthlyPlanEdit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'completionResult'">
<Tag color="processing">
{{ record.completionResult == 1 ? '已审核' : '未审核' }}
</Tag>
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { performanceColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getListByPage } from '@/api/project/performance';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getListByPage,
columns: performanceColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/performance/edit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'tenderYear'">
{{ record.tenderYear + '年' + record.biddingQuarter + '季度' }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { potentialSafetyColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getListByPage } from '@/api/project/saftyManage';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getListByPage,
columns: potentialSafetyColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/potentialSafety/edit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'tenderYear'">
{{ record.tenderYear + '年' + record.biddingQuarter + '季度' }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { safetyEducationColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getListByPage } from '@/api/project/safetyEducation';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getListByPage,
columns: safetyEducationColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/safetyEducation/edit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'serialNumber'">
{{ index + 1 }}
</template>
<template v-if="column.key === 'tenderYear'">
{{ record.tenderYear + '年' + record.biddingQuarter + '季度' }}
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看详情',
onClick: handleDetail.bind(null, record, 1),
ifShow: (_action) => {
return record.completionResult == '1';
},
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { settlementManagementColumns, searchFormSchema } from './data';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getSettlementManageList } from '@/api/project/settlementManage';
import { inject } from 'vue';
import { router } from '@/router';
import { Tag } from 'ant-design-vue';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getSettlementManageList,
columns: settlementManagementColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {
proId: detailId,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleDetail(record: Recordable, disabled: number) {
router.push({
path: '/settlementManagement/edit',
query: {
id: record.id,
disabled: String(disabled),
},
});
}
</script>
<template>
<Timeline>
<Timeline.Item v-for="item in arr">
<div class="timeCard">
<div class="timeCard-time">{{ formatTime(item.updateTime, 'mm:ss') }}</div>
<div class="timeCard-content">
<img src="/src/assets/images/header.jpg" class="timeCard-head" alt="" />
<div class="timeCard-right">
<div class="timeCard-right-name"
><span>{{ item.updateBy }}</span
>{{ item.updateCompany }}</div
>
<div class="timeCard-right-detail">{{ item.newData }}</div>
<div class="timeCard-right-times">
<Icon icon="ant-design:clock-circle-twotone"></Icon> {{ item.updateTime }}</div
>
</div>
</div>
</div>
</Timeline.Item>
</Timeline>
</template>
<script lang="ts" setup>
import { dateUtil } from '@/utils/dateUtil';
import { Timeline } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { changeRecord } from '@/api/project/project';
import { inject, onMounted, ref } from 'vue';
let detailId = inject('detailId');
let arr = ref([]);
console.log('detailId', detailId);
onMounted(async () => {
let res = await changeRecord({ proId: detailId });
console.log('res', res);
arr.value = res.items;
});
function formatTime(time: string, format: string) {
if (format === 'timestamp') {
return dateUtil(time).unix();
} else if (format === 'timestampStartDay') {
return dateUtil(time).startOf('day').unix();
}
return dateUtil(time).format(format);
}
</script>
<style lang="less" scoped>
.timeCard {
&-time {
font-size: 14px;
font-weight: 600;
}
&-content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin: 10px;
}
&-right {
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.098) 0px 0px 5px;
border-radius: 10px;
&-name {
display: flex;
align-items: center;
justify-content: flex-start;
}
&-detail {
display: flex;
align-items: center;
justify-content: flex-start;
}
&-times {
display: flex;
align-items: center;
justify-content: flex-start;
}
}
&-head {
border-radius: 50%;
width: 40px;
margin-right: 10px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment