You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

519 lines
20 KiB

<template>
<div class="container">
2 months ago
<!-- 顶部信息 -->
<div class="containertop">
<div class="topleft">
2 months ago
<img src="../../../assets/images/detailsicon/1.png" alt="">
<span>基本信息</span>
</div>
<div class="topright">
1 month ago
<el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="edit">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
1 month ago
</el-button>
<el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleExport">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
1 month ago
</el-button>
2 months ago
</div>
</div>
1 month ago
<!-- 内容展示区 -->
2 months ago
<div class="content">
<div class="picturediv">
<img v-if="form.fj" :src="form.fj" alt="项目代表性照片" style="width: 100%; height: auto;">
</div>
2 months ago
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="3" border>
1 month ago
<el-descriptions-item v-for="(item, index) in descriptions" :key="index"
:span="item.label === '项目法人单位简介' ? 3 : 1">
2 months ago
<template slot="label">
1 month ago
{{ item.label }}
2 months ago
</template>
{{ item.value }}
2 months ago
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<!-- 添加或编辑项目对话框 -->
1 month ago
<el-dialog :title="title" :visible.sync="dialogVisible" width="70rem" append-to-body>
<el-form :model="form" :rules="rules" ref="form" label-width="180px">
<el-row>
<el-col :span="12">
<el-form-item label="项目名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建设地点">
<el-input v-model="form.jsdd"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="项目法人单位">
<el-input v-model="form.xmfrdwxz"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重点发展产业">
<el-input v-model="form.prioritize
"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="项目法人单位性质">
<el-select v-model="form.nature" placeholder="请选择" value-key="value"
style="width: 22.5rem;">
<el-option v-for="dict in dict.type.xmfrdwxz" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建设模式">
<el-select v-model="form.jsms" placeholder="请选择" value-key="value" style="width: 22.5rem;">
<el-option v-for="dict in dict.type.jsms" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="施工单位">
<el-input v-model="form.sgdw"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目标签">
<el-input v-model="form.label"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="设计单位">
<el-input v-model="form.sjdw"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目负责人">
<el-input v-model="form.projectLeader"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="总投资额(万元)">
<el-input v-model.number="form.ztze"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系方式">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="所属功能区">
<el-select v-model="form.ssgnq" placeholder="请选择" value-key="value" style="width: 22.5rem;">
<el-option v-for="dict in dict.type.ssgnq" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-form-item label="施工许可证发放时间">
<el-date-picker
v-model="form.issuingTime"
type="datetime"
placeholder="选择日期时间"
style="width: 22.5rem;"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</el-form-item> -->
<el-form-item label="施工许可证发放时间">
<el-input v-model="form.issuingTime"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="建设起止时间">
<el-date-picker v-model="form.begainTime" type="daterange" range-separator=""
start-placeholder="开始日期" end-placeholder="结束日期"
style="width: 22.5rem;"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="竣工验收时间">
<el-input v-model="form.acceptanceTime"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="现状分类">
<el-select v-model="form.xzfl" placeholder="请选择" value-key="value" style="width: 22.5rem;">
<el-option v-for="dict in dict.type.xzfl" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建设进度">
<el-input v-model="form.constructionProgress"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="项目法人单位简介">
<el-input v-model="form.unitIntroduction" type="textarea" rows="4"></el-input>
</el-form-item>
<el-form-item label="项目简介">
<el-input v-model="form.introduction" type="textarea" rows="4"></el-input>
</el-form-item>
<el-form-item label="项目代表性照片">
<ImageUpload v-model="form.fj" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="saveForm"> </el-button>
</span>
</el-dialog>
</div>
</template>
1 month ago
<script>
1 month ago
import { getBasicInformationById, updateBasicInformation,exportBasicInformation } from '@/api/ManageApi/index';
import ImageUpload from '@/components/ImageUpload2/index.vue';
export default {
1 month ago
components: {
ImageUpload
},
dicts: [
1 month ago
'ssgnq', 'xmfrdwxz', 'xzfl', 'jsms'
],
props: {
size: {
type: String,
1 month ago
default: ''
},
id: {
1 month ago
type: [Number, String],
required: true
}
},
data() {
return {
descriptions: [],
dialogImageUrl: '',
dialogVisibletwo: false,
dialogVisible: false,
title: '编辑基本信息',
form: {
name: '',
xmfrdwxz: '',
nature: 0,
sgdw: '',
sjdw: '',
ztze: 0,
1 month ago
ssgnq: 0,
begainTime: '',
xzfl: 0,
jsdd: '',
prioritize: '',
jsms: 0,
label: '',
projectLeader: '',
phone: '',
issuingTime: '',
acceptanceTime: '',
unitIntroduction: '',
introduction: '',
fj: ''
},
rules: {
name: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
jsdd: [{ required: true, message: '建设地点不能为空', trigger: 'blur' }],
1 month ago
},
// select映射
ssgnqMap: {
1: '高端制造与国际贸易区',
2: '阳澄湖半岛旅游度假区',
3: '金鸡湖商务区',
4: '苏相合作区'
},
xmfrdwxzMap: {
1: '国企',
2: '外资企业',
3: '民营企业',
4: '其他'
},
jsmsMap: {
1: '工地实施',
2: '利用存量用地改扩建',
},
xzflMap: {
1: '已建',
2: '再建',
3: '拟建',
}
};
},
created() {
this.fetchData();
},
methods: {
// 获取数据
fetchData() {
getBasicInformationById(this.id)
.then(response => {
const data = response.data;
this.descriptions = this.formatDescriptions(data);
this.form = { ...data };
})
.catch(error => {
console.error('数据获取失败:', error);
});
},
// 格式化描述信息
formatDescriptions(data) {
return [
{ label: '项目名称', value: data.name },
{ label: '项目法人单位', value: data.xmfrdwxz },
1 month ago
{ label: '项目法人单位性质', value: this.xmfrdwxzMap[data.nature] || '未知' },
{ label: '施工单位', value: data.sgdw },
{ label: '设计单位', value: data.sjdw },
{ label: '总投资额(万元)', value: data.ztze },
1 month ago
{ label: '所属功能区', value: this.ssgnqMap[data.ssgnq] || '未知' },
{ label: '建设起止时间', value: data.begainTime },
1 month ago
{ label: '现状分类', value: this.xzflMap[data.xzfl] || '未知' },
{ label: '建设地点', value: data.jsdd },
{ label: '重点发展产业', value: data.prioritize },
1 month ago
{ label: '建设模式', value: this.jsmsMap[data.jsms] || '未知' },
{ label: '项目标签', value: data.label },
{ label: '项目负责人', value: data.projectLeader },
{ label: '联系方式', value: data.phone },
{ label: '施工许可证发放时间', value: data.issuingTime },
{ label: '竣工验收时间', value: data.acceptanceTime },
{ label: '建设进度', value: data.acceptanceTime },
{ label: '项目法人单位简介', value: data.unitIntroduction },
{ label: '项目简介', value: data.introduction }
];
},
// 导出操作
1 month ago
handleExport() {
1 month ago
// 构建请求参数
const queryParams = {
acceptanceTime: this.form.acceptanceTime,
begainTime: this.formatDateRange(this.form.begainTime),
createBy: '',
createId: 0,
createTime: '',
fj: this.form.fj,
id: this.id,
introduction: this.form.introduction,
issuingTime: this.form.issuingTime,
jsdd: this.form.jsdd,
jsms: parseInt(this.form.jsms),
label: this.form.label,
name: this.form.name,
nature: parseInt(this.form.nature),
phone: this.form.phone,
prioritize: this.form.prioritize,
projectLeader: this.form.projectLeader,
sgdw: this.form.sgdw,
sjdw: this.form.sjdw,
ssgnq: parseInt(this.form.ssgnq),
unitIntroduction: this.form.unitIntroduction,
updateBy: '',
updateId: 0,
updateTime: '',
xmfrdwxz: this.form.xmfrdwxz,
xzfl: parseInt(this.form.xzfl),
ztze: parseFloat(this.form.ztze)
};
console.log('queryParams:', queryParams); // 日志
// 调用导出接口
exportBasicInformation(queryParams)
.then(response => {
console.log('response:', response); // 日志
const url = window.URL.createObjectURL(new Blob([response]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `basic_information_${new Date().getTime()}.xlsx`);
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error('导出失败:', error);
this.$message.error('导出失败,请重试!');
});
1 month ago
},
// 打开编辑对话框
edit() {
this.dialogVisible = true;
},
// 保存表单
saveForm() {
this.$refs.form.validate(valid => {
if (valid) {
const formData = this.prepareFormData();
updateBasicInformation(formData) // 调用接口
.then(response => {
this.$message.success('数据保存成功!');
this.dialogVisible = false;
this.fetchData(); // 刷新数据
1 month ago
// window.location.reload();//修改标题
})
.catch(error => {
console.error('数据保存失败:', error);
this.$message.error('数据保存失败,请重试!');
});
} else {
this.$message.warning('请填写完整信息!');
}
});
},
// 准备表单数据
prepareFormData() {
return {
1 month ago
id: this.id,
name: this.form.name,
xmfrdwxz: this.form.xmfrdwxz,
nature: parseInt(this.form.nature),
sgdw: this.form.sgdw,
sjdw: this.form.sjdw,
ztze: parseFloat(this.form.ztze),
ssgnq: '',
begainTime: this.formatDateRange(this.form.begainTime),
1 month ago
xzfl: parseInt(this.form.xzfl),
jsdd: this.form.jsdd,
prioritize: this.form.prioritize,
jsms: parseInt(this.form.jsms),
label: this.form.label,
projectLeader: this.form.projectLeader,
phone: this.form.phone,
issuingTime: this.form.issuingTime,
acceptanceTime: this.form.acceptanceTime,
unitIntroduction: this.form.unitIntroduction,
introduction: this.form.introduction,
fj: this.form.fj,
createBy: '',
createId: 0,
createTime: '',
updateBy: '',
updateId: 0,
updateTime: ''
1 month ago
};
},
// 格式化日期范围
1 month ago
formatDateRange(dateRange) {
if (!dateRange || dateRange.length !== 2) return '';
const startDate = dateRange[0].toISOString().split('T')[0];
const endDate = dateRange[1].toISOString().split('T')[0];
return `${startDate}${endDate}`;
},
// 处理附件上传成功
handleAttachmentSuccess(response, file) {
this.form.fj = response.url;
},
// 上传前验证
beforeAttachmentUpload(file) {
const isImage = file.type.startsWith('image/');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isImage) this.$message.error('只能上传图片文件!');
if (!isLt2M) this.$message.error('上传图片大小不能超过 2MB!');
return isImage && isLt2M;
},
// 删除附件
removeAttachment() {
this.form.fj = '';
}
}
};
</script>
1 month ago
<style scoped>
.container {
display: flex;
flex-direction: column;
width: 100%;
2 months ago
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.content {
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 500;
font-size: 0.88rem;
color: #3D424C;
line-height: 0.88rem;
text-align: right;
font-style: normal;
text-transform: none;
}
.picturediv {
width: 18.31rem;
height: 25rem;
/* background-color: lightblue; */
2 months ago
}
.descriptionsdiv {
width: calc(100% - 18.31rem);
2 months ago
margin-left: 1rem;
1 month ago
height: auto;
2 months ago
}
.two-row-item {
1 month ago
height: auto;
}
.tanchuang {
width: 70rem;
height: auto;
padding: 2rem;
}
</style>