parent
d3b6025375
commit
86cc25ecb0
@ -1,93 +1,239 @@
|
|||||||
<template>
|
<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 :model="form" label-width="120px">
|
||||||
<el-form-item label="ID">
|
<el-form-item label="类型">
|
||||||
<el-input v-model="form.id"></el-input>
|
<el-select v-model="form.type" placeholder="请选择类型">
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="文件类型" prop="lx">
|
|
||||||
<el-select v-model="form.imgType" placeholder="请选择文件类型">
|
|
||||||
<el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
|
<el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
|
||||||
:value="dict.value"></el-option>
|
:value="dict.value"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="图片url">
|
<el-form-item label="图片上传">
|
||||||
<el-input v-model="form.img"></el-input>
|
<div v-for="(image, index) in form.images" :key="index" style="margin-bottom: 10px;">
|
||||||
</el-form-item>
|
<ImageUpload v-model="form.images[index]" />
|
||||||
<el-form-item label="经度">
|
<el-input v-model="form.images[index]" placeholder="请输入图片URL"></el-input>
|
||||||
<el-input v-model="form.latitude"></el-input>
|
</div>
|
||||||
</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>
|
</el-form-item>
|
||||||
</el-form>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { addxmtl } from '@/api/ManageApi/index';
|
|
||||||
import ImageUpload from '@/components/ImageUpload';
|
import ImageUpload from '@/components/ImageUpload';
|
||||||
|
import { getxmtlPageByxmid, addxmtl, updatexmtll } from '@/api/ManageApi/index';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ImageUpload },
|
components: { ImageUpload },
|
||||||
dicts: ['tplx'],
|
dicts: ['tplx'],
|
||||||
|
props: {
|
||||||
|
xmId: {
|
||||||
|
type: Number,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
carousel1Items: [], // 类型A的图片
|
||||||
|
carousel2Items: [], // 类型B的图片
|
||||||
|
dialogVisible: false,
|
||||||
|
dialogTitle: '',
|
||||||
form: {
|
form: {
|
||||||
createBy: '',
|
type: '',
|
||||||
createTime: '',
|
images: ['', '', '', '', '', ''] // 用于绑定图片上传组件的值
|
||||||
id: 0,
|
}
|
||||||
img: '',
|
|
||||||
imgType: 0,
|
|
||||||
latitude: '',
|
|
||||||
longitude: '',
|
|
||||||
remark: '',
|
|
||||||
updateBy: '',
|
|
||||||
updateTime: '',
|
|
||||||
xmId: 0,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
created() {
|
||||||
handleFileUploaded(fileUrl) {
|
this.fetchProjectLegends();
|
||||||
this.form.img = fileUrl;
|
|
||||||
},
|
},
|
||||||
handleSubmit() {
|
methods: {
|
||||||
addxmtl(this.form)
|
// 获取项目图例数据
|
||||||
.then((response) => {
|
fetchProjectLegends() {
|
||||||
if (response.code === 200) {
|
console.log('Fetching data for xmId:', this.xmId);
|
||||||
this.$message.success('新增成功');
|
if (this.xmId === null || this.xmId === undefined) {
|
||||||
this.resetForm();
|
console.error('xmId is null or undefined');
|
||||||
} else {
|
return;
|
||||||
this.$message.error('新增失败');
|
}
|
||||||
|
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) => {
|
.catch(error => {
|
||||||
console.error('新增失败:', error);
|
console.error("获取项目图例数据失败:", error);
|
||||||
this.$message.error('新增失败');
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
resetForm() {
|
// 打开新增对话框
|
||||||
|
handleAdd() {
|
||||||
|
this.dialogTitle = '新增';
|
||||||
|
this.form = { type: '', images: ['', '', '', '', '', ''] }; // 重置表单
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
// 打开编辑对话框
|
||||||
|
handleEdit() {
|
||||||
|
this.dialogTitle = '编辑';
|
||||||
|
// 假设编辑时填充当前数据
|
||||||
this.form = {
|
this.form = {
|
||||||
createBy: '',
|
type: '', // 类型默认为空
|
||||||
createTime: '',
|
images: [
|
||||||
id: 0,
|
this.carousel1Items[0] ? this.carousel1Items[0].imageUrl : '',
|
||||||
img: '',
|
this.carousel1Items[1] ? this.carousel1Items[1].imageUrl : '',
|
||||||
imgType: 0,
|
this.carousel1Items[2] ? this.carousel1Items[2].imageUrl : '',
|
||||||
latitude: '',
|
this.carousel2Items[0] ? this.carousel2Items[0].imageUrl : '',
|
||||||
longitude: '',
|
this.carousel2Items[1] ? this.carousel2Items[1].imageUrl : '',
|
||||||
remark: '',
|
this.carousel2Items[2] ? this.carousel2Items[2].imageUrl : ''
|
||||||
updateBy: '',
|
]
|
||||||
updateTime: '',
|
|
||||||
xmId: 0,
|
|
||||||
};
|
};
|
||||||
|
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>
|
</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