Skip to content

W
web-project
Commit 580604c8 authored by jiaxu.yan's avatar jiaxu.yan
Browse files
Options

feat: 项目详情

parent dde64191
Show whitespace changes
Inline Side-by-side
Showing with 643 additions and 146 deletions
src/views/demo/page/account/center/index.vue
View file @ 580604c8
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
<component :is="tabs[item.component]" /> <component :is="tabs[item.component]" />
</TabPane> </TabPane>
</template> </template>
</Tabs> </Tabs>
</div> </div>
</div> </div>
......
src/views/project/detail.vue
View file @ 580604c8
<template> <template>
<PageWrapper :class="prefixCls">
<PageCard>
<div class="header"> <div class="header">
<div class="header-tab"> <div class="header-tab">
<!-- <img class="header-tab-logo" src="../../assets/images/logo.png" alt="" /> --> <!-- <img class="header-tab-logo" src="../../assets/images/logo.png" alt="" /> -->
...@@ -67,94 +65,44 @@ ...@@ -67,94 +65,44 @@
</div> </div>
<!-- <Descriptions></Descriptions> --> <!-- <Descriptions></Descriptions> -->
</div> </div>
</PageCard> <div class="body">
<BasicTable @register="registerTable"> <Tabs v-model:activeKey="activeKey">
<template #tabSlot>
<Tabs v-model:activeKey="activeKey" @change="reload()">
<template v-for="item in tabList" :key="item.key"> <template v-for="item in tabList" :key="item.key">
<TabPane :tab="item.tab" /> <TabPane :tab="item.tab">
<component :is="tabs[item.component]" />
</TabPane>
</template> </template>
</Tabs> </Tabs>
</template> </div>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'projectName'">
<Tag color="warning" v-if="record.isReserveProject == 'true'"> 储备 </Tag>
{{ record.projectName }}
</template>
<template v-if="column.key === 'constructionMode'">
<Tag color="processing">
{{ record.constructionMode }}
</Tag>
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
// {
// label: '详情',
// onClick: handleDetail.bind(null, record),
// },
// {
// label: '编辑',
// onClick: handleEdit.bind(null, record, false),
// },
// {
// label: '删除',
// color: 'error',
// popConfirm: {
// title: '是否确认删除',
// placement: 'left',
// confirm: handleDelete.bind(null, record),
// },
// },
]"
/>
</template>
</template>
</BasicTable>
</PageWrapper>
<projectDrawer @register="registerDrawer" @success="handleSuccess" /> <projectDrawer @register="registerDrawer" @success="handleSuccess" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import projectDrawer from './projectDrawer.vue'; import projectDrawer from './projectDrawer.vue';
import { Tabs } from 'ant-design-vue'; import { Tabs } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { getItem, deleteItem } from '@/api/project/project';
import { getListByPage, getItem, deleteItem } from '@/api/project/project'; import { tabList } from './project.data';
import { columns, searchFormSchema, tabList } from './project.data'; import { ref, onMounted, provide } from 'vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useDrawer } from '@/components/Drawer'; import { useDrawer } from '@/components/Drawer';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { router } from '@/router'; import { router } from '@/router';
import InvestmentPlan from './tabs/InvestmentPlan.vue';
const tabs = {
InvestmentPlan,
};
const TabPane = Tabs.TabPane;
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer(); const [registerDrawer, { openDrawer }] = useDrawer();
let detail = ref<any>({}); let detail = ref<any>({});
let detailId = ref<any>(0); let detailId = ref<any>(0);
const activeKey = ref('1'); const activeKey = ref('1');
const [registerTable, { reload }] = useTable({
api: getListByPage,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: { tabName: activeKey },
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
onMounted(async () => { onMounted(async () => {
const route = useRoute(); const route = useRoute();
detailId.value = route.query.id; // 获取名为id的参数 detailId.value = route.query.id; // 获取名为id的参数
provide('detailId', detailId.value);
await handleDetail(); await handleDetail();
}); });
function handleEdit() { function handleEdit() {
openDrawer(true, { openDrawer(true, {
record: detail, record: detail,
...@@ -163,7 +111,7 @@ ...@@ -163,7 +111,7 @@
} }
async function handleSuccess(record: any) { async function handleSuccess(record: any) {
// detail.value = record; // detail.value = record;
await handleDetail() await handleDetail();
} }
async function handleDetail() { async function handleDetail() {
let res = await getItem({ id: detailId.value }); let res = await getItem({ id: detailId.value });
...@@ -238,3 +186,19 @@ ...@@ -238,3 +186,19 @@
} }
} }
</style> </style>
<style lang="less">
.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>
src/views/project/project.data.ts
View file @ 580604c8
...@@ -215,19 +215,139 @@ export const formSchema: FormSchema[] = [ ...@@ -215,19 +215,139 @@ export const formSchema: FormSchema[] = [
]; ];
export const searchFormSchema: FormSchema[] = [ export const searchFormSchema: FormSchema[] = [
{ {
field: 'year', field: 'projecName',
label: '', label: '',
component: 'DatePicker', component: 'Input',
required: true, componentProps: {
placeholder: '输入搜索关键词',
},
colProps: { span: 4 },
},
{
field: 'constructionMode',
component: 'RadioButtonGroup',
colProps: {
span: 6,
},
componentProps: { componentProps: {
placeholder: '选择填报周期', options: [
valueFormat: 'YYYY-MM-dd', {
format: 'YYYY-MM-dd', label: '全部项目',
style: { value: undefined,
width: '100%', },
{
label: '自建',
value: '1自建',
},
{
label: '委托建设',
value: '委托建设',
},
{
label: '代理',
value: '代理',
},
{
label: '承建',
value: '承建',
},
],
},
},
{
field: 'isReserveProject',
component: 'Checkbox',
colProps: {
span: 2,
}, },
renderComponentContent: '储备项目',
},
{
field: 'ImplementingEntity',
label: '',
component: 'Select',
componentProps: {
placeholder: '实施主体',
options: [
{
label: '了解产品',
value: '了解产品',
key: '了解产品',
},
{
label: '正在跟进',
value: '正在跟进',
key: '正在跟进',
},
{
label: '正在试用',
value: '正在试用',
key: '正在试用',
},
{
label: '准备购买',
value: '准备购买',
key: '准备购买',
},
{
label: '准备付款',
value: '准备付款',
key: '准备付款',
},
{
label: '已经购买',
value: '已经购买',
key: '已经购买',
},
{
label: '暂时闲置',
value: '暂时闲置',
key: '暂时闲置',
},
],
},
colProps: { span: 3 },
},
{
field: 'projectType',
label: '',
component: 'Select',
componentProps: {
placeholder: '项目类型',
options: [
{
label: '公共设施配套类',
value: '公共设施配套类',
key: '公共设施配套类',
},
{
label: '基础设施类',
value: '基础设施类',
key: '基础设施类',
},
{
label: '产业载体类',
value: '产业载体类',
key: '产业载体类',
},
{
label: '房地产类',
value: '房地产类',
key: '房地产类',
},
{
label: '存量盘活类',
value: '存量盘活类',
key: '存量盘活类',
},
{
label: '其他类（零星工程)',
value: '其他类（零星工程)',
key: '其他类（零星工程)',
},
],
}, },
colProps: { span: 5 }, colProps: { span: 3 },
}, },
]; ];
...@@ -277,57 +397,71 @@ export const tabList = [ ...@@ -277,57 +397,71 @@ export const tabList = [
{ {
key: '1', key: '1',
tab: '投资计划', tab: '投资计划',
component: 'InvestmentPlan',
}, },
{ {
key: '2', key: '2',
tab: '计划完成情况', tab: '计划完成情况',
component: 'InvestmentPlan',
}, },
{ {
key: '3', key: '3',
tab: '年度资金计划', tab: '年度资金计划',
component: 'InvestmentPlan',
}, },
{ {
key: '4', key: '4',
tab: '月度资金计划', tab: '月度资金计划',
component: 'InvestmentPlan',
}, },
{ {
key: '5', key: '5',
tab: '已竣工验收项目陈欠资金计划', tab: '已竣工验收项目陈欠资金计划',
component: 'InvestmentPlan',
}, },
{ {
key: '6', key: '6',
tab: '招标计划', tab: '招标计划',
component: 'InvestmentPlan',
}, },
{ {
key: '7', key: '7',
tab: '招标管理', tab: '招标管理',
component: 'InvestmentPlan',
}, },
{ {
key: '8', key: '8',
tab: '结算管理', tab: '结算管理',
component: 'InvestmentPlan',
}, },
{ {
key: '9', key: '9',
tab: '变更签证管理', tab: '变更签证管理',
component: 'InvestmentPlan',
}, },
{ {
key: '10', key: '10',
tab: '安全隐患管理', tab: '安全隐患管理',
component: 'InvestmentPlan',
}, },
{ {
key: '11', key: '11',
tab: '安全教育培训', tab: '安全教育培训',
component: 'InvestmentPlan',
}, },
{ {
key: '12', key: '12',
tab: '合同管理', tab: '合同管理',
component: 'InvestmentPlan',
}, },
{ {
key: '13', key: '13',
tab: '附件记录', tab: '附件记录',
component: 'InvestmentPlan',
}, },
{ {
key: '14', key: '14',
tab: '更新记录', tab: '更新记录',
component: 'InvestmentPlan',
}, },
]; ];
src/views/project/tabs/Article.vue 0 → 100644
View file @ 580604c8
<template>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" preIcon="mdi:plus" @click="handleCreate"> 新增项目 </a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'projectName'">
<Tag color="warning" v-if="record.isReserveProject == 'true'"> 储备 </Tag>
{{ record.projectName }}
</template>
<template v-if="column.key === 'constructionMode'">
<Tag color="processing">
{{ record.constructionMode }}
</Tag>
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '详情',
onClick: handleDetail.bind(null, record),
},
{
label: '编辑',
onClick: handleEdit.bind(null, record, false),
},
{
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
<projectDrawer @register="registerDrawer" @success="handleSuccess" />
</template>
<script lang="ts" setup>
import { Tag } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getListByPage, deleteItem, getItem } from '@/api/project/project';
import { columns, searchFormSchema } from '../project.data';
import { Row, Col } from 'ant-design-vue';
import projectDrawer from '../projectDrawer.vue';
import { useDrawer } from '@/components/Drawer';
import { useRouter } from 'vue-router';
const { push } = useRouter();
const [registerDrawer, { openDrawer }] = useDrawer();
const prefixCls = 'list-basic';
const [registerTable, { reload }] = useTable({
api: getListByPage,
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 handleCreate() {
openDrawer(true, {
isUpdate: false,
});
}
function handleDetail(record: any) {
push({
path: '/project/detail',
query: {
id: record.id,
},
});
}
async function handleEdit(record: Recordable, disabled: boolean) {
// let res = await getItem({ id: record.id });
// console.log(res);
// res[0]
openDrawer(true, {
record,
isUpdate: true,
disabled,
});
}
function handleDelete(record: Recordable) {
deleteItem({ id: record.id });
reload();
}
function handleSuccess() {
reload();
}
</script>
<style lang="less" scoped>
.list-basic {
&__top {
height: 150px;
padding: 35px;
background-color: @component-background;
text-align: center;
position: relative;
margin: 16px;
margin-bottom: 0;
&-img {
width: 58px;
height: 54px;
position: absolute;
left: 10%;
}
&-col {
// &:not(:last-child) {
// border-right: 1px dashed @border-color-base;
// }
.title {
margin-bottom: 12px;
color: #5d5d5d;
font-size: 18px;
text-align: center;
line-height: 22px;
}
.content {
display: flex;
align-items: flex-end;
width: 100%;
justify-content: center;
}
p {
margin: 0;
color: @text-color-base;
font-size: 40px;
color: #225bde;
font-family: DINAlternate;
font-weight: 700;
margin-bottom: -7px;
}
span {
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
color: #878787;
}
}
}
&__list {
&-header {
color: #333;
font-weight: bold;
}
}
&__content {
background-color: @component-background;
.list {
position: relative;
}
.icon {
font-size: 40px !important;
}
.extra {
position: absolute;
top: 20px;
right: 15px;
color: @primary-color;
font-weight: normal;
cursor: pointer;
}
.description {
display: inline-block;
width: 40%;
}
.info {
display: inline-block;
width: 30%;
text-align: center;
div {
display: inline-block;
padding: 0 20px;
span {
display: block;
}
}
}
.progress {
display: inline-block;
width: 15%;
vertical-align: top;
}
}
}
</style>
src/views/project/tabs/InvestmentPlan.vue 0 → 100644
View file @ 580604c8
<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),
},
]"
/>
</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 { getListByPage } from '@/api/project/project';
let detailId = inject('detailId');
console.log('detailId', detailId);
const [registerTable, { reload }] = useTable({
api: getListByPage,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
searchInfo: {},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
</script>
src/views/project/tabs/data.ts 0 → 100644
View file @ 580604c8
import { FormSchema, BasicColumn } from '@/components/Table';
export const searchFormSchema: FormSchema[] = [
{
field: 'year',
label: '',
component: 'DatePicker',
componentProps: {
placeholder: '选择填报周期',
valueFormat: 'YYYY-MM-dd',
format: 'YYYY-MM-dd',
style: {
width: '100%',
},
},
colProps: { span: 5 },
},
];
export const columns: BasicColumn[] = [
{
title: '',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '填报周期',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '项目名称',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '建设地点',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '项目概况',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '建设规模',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '建设目的及项目功能',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '建设模式',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '资金来源',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '项目类型',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '总投资',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '该年之前总投资额（不含该年）',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '该年计划投资额',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '该年实际完成投资额',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '该年计划资金',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '该年实付资金',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '该年计建设性质划资金',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '开工竣工时间',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '该年底形象进度',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '实施主体',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '项目主管部门',
dataIndex: 'serialNumber',
width: 180,
},
{
title: '备注',
dataIndex: 'serialNumber',
width: 180,
},
];
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