parent
d3b6025375
commit
86cc25ecb0
@ -1,93 +1,239 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="containertop">
|
||||
<div class="topleft">
|
||||
<img src="../../../assets/images/detailsicon/1.png" alt="">
|
||||
<span>项目图例</span>
|
||||
</div>
|
||||
<div class="topright">
|
||||
<el-button type="primary" size="medium" plain
|
||||
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleAdd">
|
||||
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="新增"
|
||||
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button type="primary" size="medium" plain
|
||||
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleEdit">
|
||||
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
|
||||
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="main-content">
|
||||
<!-- 上侧三张图 -->
|
||||
<div class="image-row">
|
||||
<div v-for="(item, index) in carousel1Items.slice(0, 3)" :key="index" class="image-item">
|
||||
<img :src="item.imageUrl" :alt="'Image ' + (index + 1)" />
|
||||
<div class="classify">
|
||||
类型A
|
||||
</div>
|
||||
<el-input v-if="dialogVisible" v-model="form.images[index]" placeholder="请输入图片URL"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下侧三张图 -->
|
||||
<div class="image-row">
|
||||
<div v-for="(item, index) in carousel2Items.slice(0, 3)" :key="index" class="image-item">
|
||||
<img :src="item.imageUrl" :alt="'Image ' + (index + 1)" />
|
||||
<div class="classify">
|
||||
类型B
|
||||
</div>
|
||||
<el-input v-if="dialogVisible" v-model="form.images[index + 3]" placeholder="请输入图片URL"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑/新增对话框 -->
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="ID">
|
||||
<el-input v-model="form.id"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件类型" prop="lx">
|
||||
<el-select v-model="form.imgType" placeholder="请选择文件类型">
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="form.type" placeholder="请选择类型">
|
||||
<el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片url">
|
||||
<el-input v-model="form.img"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="经度">
|
||||
<el-input v-model="form.latitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度">
|
||||
<el-input v-model="form.longitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目ID">
|
||||
<el-input v-model="form.xmId"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
<el-form-item label="图片上传">
|
||||
<div v-for="(image, index) in form.images" :key="index" style="margin-bottom: 10px;">
|
||||
<ImageUpload v-model="form.images[index]" />
|
||||
<el-input v-model="form.images[index]" placeholder="请输入图片URL"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addxmtl } from '@/api/ManageApi/index';
|
||||
import ImageUpload from '@/components/ImageUpload';
|
||||
import { getxmtlPageByxmid, addxmtl, updatexmtll } from '@/api/ManageApi/index';
|
||||
|
||||
export default {
|
||||
components: { ImageUpload },
|
||||
dicts: ['tplx'],
|
||||
props: {
|
||||
xmId: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
carousel1Items: [], // 类型A的图片
|
||||
carousel2Items: [], // 类型B的图片
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
form: {
|
||||
createBy: '',
|
||||
createTime: '',
|
||||
id: 0,
|
||||
img: '',
|
||||
imgType: 0,
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
remark: '',
|
||||
updateBy: '',
|
||||
updateTime: '',
|
||||
xmId: 0,
|
||||
},
|
||||
type: '',
|
||||
images: ['', '', '', '', '', ''] // 用于绑定图片上传组件的值
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleFileUploaded(fileUrl) {
|
||||
this.form.img = fileUrl;
|
||||
created() {
|
||||
this.fetchProjectLegends();
|
||||
},
|
||||
handleSubmit() {
|
||||
addxmtl(this.form)
|
||||
.then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.$message.success('新增成功');
|
||||
this.resetForm();
|
||||
} else {
|
||||
this.$message.error('新增失败');
|
||||
methods: {
|
||||
// 获取项目图例数据
|
||||
fetchProjectLegends() {
|
||||
console.log('Fetching data for xmId:', this.xmId);
|
||||
if (this.xmId === null || this.xmId === undefined) {
|
||||
console.error('xmId is null or undefined');
|
||||
return;
|
||||
}
|
||||
getxmtlPageByxmid({ xmId: this.xmId })
|
||||
.then(response => {
|
||||
if (response.code === 200 && response.data.length > 0) {
|
||||
const data = response.data[0]; // 假设返回的数据在数组中
|
||||
// 映射类型A的图片
|
||||
this.carousel1Items = data.type1.images.map(imageUrl => ({ imageUrl }));
|
||||
// 映射类型B的图片
|
||||
this.carousel2Items = data.type2.images.map(imageUrl => ({ imageUrl }));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('新增失败:', error);
|
||||
this.$message.error('新增失败');
|
||||
.catch(error => {
|
||||
console.error("获取项目图例数据失败:", error);
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
// 打开新增对话框
|
||||
handleAdd() {
|
||||
this.dialogTitle = '新增';
|
||||
this.form = { type: '', images: ['', '', '', '', '', ''] }; // 重置表单
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 打开编辑对话框
|
||||
handleEdit() {
|
||||
this.dialogTitle = '编辑';
|
||||
// 假设编辑时填充当前数据
|
||||
this.form = {
|
||||
createBy: '',
|
||||
createTime: '',
|
||||
id: 0,
|
||||
img: '',
|
||||
imgType: 0,
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
remark: '',
|
||||
updateBy: '',
|
||||
updateTime: '',
|
||||
xmId: 0,
|
||||
type: '', // 类型默认为空
|
||||
images: [
|
||||
this.carousel1Items[0] ? this.carousel1Items[0].imageUrl : '',
|
||||
this.carousel1Items[1] ? this.carousel1Items[1].imageUrl : '',
|
||||
this.carousel1Items[2] ? this.carousel1Items[2].imageUrl : '',
|
||||
this.carousel2Items[0] ? this.carousel2Items[0].imageUrl : '',
|
||||
this.carousel2Items[1] ? this.carousel2Items[1].imageUrl : '',
|
||||
this.carousel2Items[2] ? this.carousel2Items[2].imageUrl : ''
|
||||
]
|
||||
};
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
},
|
||||
// 提交表单
|
||||
handleSubmit() {
|
||||
if (this.dialogTitle === '新增') {
|
||||
// 调用新增API
|
||||
addxmtl({ ...this.form, xmId: this.xmId })
|
||||
.then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message.success('新增成功');
|
||||
this.fetchProjectLegends(); // 刷新数据
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("新增失败:", error);
|
||||
});
|
||||
} else if (this.dialogTitle === '编辑') {
|
||||
// 调用编辑API
|
||||
updatexmtll({ ...this.form, xmId: this.xmId })
|
||||
.then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message.success('编辑成功');
|
||||
this.fetchProjectLegends(); // 刷新数据
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("编辑失败:", error);
|
||||
});
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
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;
|
||||
gap: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.containertop {
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .5rem;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.image-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
width: calc(33.33% - 0.67rem); /* 三张图片每张占三分之一减去间隔 */
|
||||
}
|
||||
|
||||
.image-item img {
|
||||
width: 100%;
|
||||
height: 12rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.classify {
|
||||
width: 2.81rem;
|
||||
height: 1.38rem;
|
||||
background-color: rgba(43, 98, 241, 0.8);
|
||||
border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: .5rem;
|
||||
left: .5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: .7rem;
|
||||
z-index: 98;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue