Skip to content

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

feat: 项目详情

parent dde64191
Expand all Hide 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 @@
<component :is="tabs[item.component]" />
</TabPane>
</template>
</Tabs>
</div>
</div>
......
src/views/project/detail.vue
View file @ 580604c8
This diff is collapsed.
src/views/project/project.data.ts
View file @ 580604c8
......@@ -215,19 +215,139 @@ export const formSchema: FormSchema[] = [
];
export const searchFormSchema: FormSchema[] = [
{
field: 'year',
field: 'projecName',
label: '',
component: 'DatePicker',
required: true,
component: 'Input',
componentProps: {
placeholder: '输入搜索关键词',
},
colProps: { span: 4 },
},
{
field: 'constructionMode',
component: 'RadioButtonGroup',
colProps: {
span: 6,
},
componentProps: {
options: [
{
label: '全部项目',
value: undefined,
},
{
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: '选择填报周期',
valueFormat: 'YYYY-MM-dd',
format: 'YYYY-MM-dd',
style: {
width: '100%',
},
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 = [
{
key: '1',
tab: '投资计划',
component: 'InvestmentPlan',
},
{
key: '2',
tab: '计划完成情况',
component: 'InvestmentPlan',
},
{
key: '3',
tab: '年度资金计划',
component: 'InvestmentPlan',
},
{
key: '4',
tab: '月度资金计划',
component: 'InvestmentPlan',
},
{
key: '5',
tab: '已竣工验收项目陈欠资金计划',
component: 'InvestmentPlan',
},
{
key: '6',
tab: '招标计划',
component: 'InvestmentPlan',
},
{
key: '7',
tab: '招标管理',
component: 'InvestmentPlan',
},
{
key: '8',
tab: '结算管理',
component: 'InvestmentPlan',
},
{
key: '9',
tab: '变更签证管理',
component: 'InvestmentPlan',
},
{
key: '10',
tab: '安全隐患管理',
component: 'InvestmentPlan',
},
{
key: '11',
tab: '安全教育培训',
component: 'InvestmentPlan',
},
{
key: '12',
tab: '合同管理',
component: 'InvestmentPlan',
},
{
key: '13',
tab: '附件记录',
component: 'InvestmentPlan',
},
{
key: '14',
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