<template>
<div class="ecoShoreline-page">
<div class="top">
<el-button type="primary" icon="Refresh" @click="onSearch"> 刷新</el-button>
<el-button type="primary" plain icon="Plus" @click="onAdd">新增</el-button>
</div>
<el-table :data="tableData" v-loading="tableLoading" stripe max-height="700" @selection-change="handleSelectionChange">
<el-table-column type="index" width="55" :index="getIndex" label="序号" align="center" />
<el-table-column prop="pointName" label="名称" align="center"></el-table-column>
<el-table-column prop="address" label="地址" align="center"></el-table-column>
<el-table-column prop="description" label="描述" align="center"></el-table-column>
<el-table-column prop="length" label="长度(km)" align="center"></el-table-column>
<el-table-column prop="pointX" label="经度" align="center"></el-table-column>
<el-table-column prop="pointY" label="维度" align="center"></el-table-column>
<el-table-column label="图片" align="center">
<template #default="scope">
<div class="img-cnt">
<img :src="item.pathSmall" alt v-for="(item, index) in scope.row.pics" :key="index"
@click="onShowImg(item.pathPrimeval)" />
</div>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template #default="{ row }">
<el-button link type="primary" @click="onEdit(row)">修改</el-button>
<el-button link type="danger" @click="onDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="float: right;">
<el-pagination :page-sizes="[10, 20, 30, 50]" layout="total,sizes, prev, pager, next,jumper"
style="margin-top: 15px;" @size-change="sizeChange" @current-change="handleCurrentChange" v-model::pageNum-page="pageNum"
v-model:page-size="pageSize" background :total="total"></el-pagination>
</div>
<el-dialog v-model="visible1" :close-on-click-modal="false" :modal-append-to-body="false" @close="visible1 = false">
<div class="img-cnt1">
<img :src="imgSrc" alt />
</div>
</el-dialog>
<el-dialog v-model="visible" :close-on-click-modal="false" :modal-append-to-body="false" @close="onModalClose"
title="操作">
<el-form label-width="auto" :model="formData" :rules="rules" ref="ruleForm">
<el-form-item label="名称：" prop="pointName">
<el-input placeholder="名称" v-model="formData.pointName"></el-input>
</el-form-item>
<el-form-item label="长度：" prop="length">
<el-input placeholder="长度" v-model="formData.length" type="number"></el-input>
</el-form-item>
<el-form-item label="地址：" prop="address" @click="clickMap">
<el-input placeholder="地址" v-model="formData.address"></el-input>
</el-form-item>
<el-form-item label="经度：" prop="pointX">
<el-input placeholder="经度" disabled v-model="formData.pointX" type="number"></el-input>
</el-form-item>
<el-form-item label="维度：" prop="pointY">
<el-input placeholder="维度" disabled v-model="formData.pointY" type="number"></el-input>
</el-form-item>
<el-form-item label="描述：">
<el-input placeholder="描述" type="textarea"
v-model="formData.description"></el-input>
</el-form-item>
<!-- <el-form-item label="图片：">
<el-upload class="upload-demo" ref="upload" accept="image/*" action="#" :limit="3"
:on-change="handleChange" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item> -->
<el-form-item label="上传照片">
<el-upload :action="FileUpSrc" list-type="picture-card" :auto-upload="false"
:on-change="handleExceed"
:limit='1'
v-model:file-list="investFileUrl"
:on-remove="handleExceedMove">
<el-icon>
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="onSubmit" :loading="formLoading">提交</el-button>
</el-form-item> -->
</el-form>
<div style="text-align: right;padding: 10px;">
<el-button @click="closed" :loading="formLoading">关闭</el-button>
<el-button type="primary" @click="onSubmit" :loading="formLoading">确定</el-button>
</div>
</el-dialog>
<el-dialog v-model="isMap" title="地址" :modal-append-to-body="false" :close-on-click-modal="false"
width="800px">
<div class="nf-o-d-content-right map-is-collapse" :class="{ 'map-is-collapse': isCollapse }">
<aliMap></aliMap>
</div>
</el-dialog>
</div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import {
proecologicalcoastData,
uploadImages,
proecologicalcoastSave,
proecologicalcoastDelete,
editCalcoast,
systemUpload
} from "@/services";
import config from '@/config'
import aliMap from '@/components/aliMap/index.vue';
import bus from '@/bus'
export default {
components:{
aliMap
},
data() {
return {
isMap:false,
FileUpSrc: config.baseUrl + '/system/upload',
isAdd: true,
tableHeight: 0,
pageNum: 1,
pageSize: 10,
total: 0,
tableData: [],
tableLoading: false,
selectList: [], // 选中的表格行
visible1: false,
imgSrc: "",
visible: false,
formLoading: false,
formData: {
address: "", // 地址
description: "", // 描述
length: "", // 长度
pics: [], // 图片列表
pointName: "", // 名称
pointX: "", // 经度
pointY: "" // 维度
},
rules: {
pointName: [{ required: true, message: "请输入名称" }],
address: [{ required: true, message: "请输入地址" }],
length: [{ required: true, message: "请输入长度" }],
pointX: [{ required: true, message: "请输入经度" }],
pointY: [{ required: true, message: "请输入维度" }]
},
fileList: []
};
},
methods: {
getIndex(index) {
return (this.pageNum - 1) * this.pageSize + index + 1
},
clickMap(){
this.isMap=true
},
onSearch(){
this.getTableData();
},
closed() {
this.visible = false;
},
handleExceed(uploadFile,uploadFiles) {
// this.systemUploadM(uploadFile)
},
async systemUploadM(p){
let formData = new FormData()
formData.append("file",p.raw)
let {data:{originalName, url}}=await systemUpload(formData)
this.formData.pics=[url]
},
// 点击修改站点
onEdit(val) {
this.visible = true;
this.dialogTitle1 = "修改";
this.siteNoDisable = true;
this.formData = val
this.isAdd = false
this.investFileUrl=[{url:val.pic}]
},
//编辑
async editConfig(v) {
let { code } = await editCalcoast(v)
if (code == 200) {
this.visible = false;
this.getTableData();
}
},
//删除
async deleteConfig(v) {
let { code } = await proecologicalcoastDelete(v)
if (code == 200) {
this.getTableData();
}
},
// 点击s删除
onDelete(v) {
console.log(v, 333);
ElMessageBox.confirm(
'您确定删除吗？',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
this.deleteConfig(v)
ElMessage({
type: 'success',
message: '删除成功',
})
})
},
// 切换分页
handleCurrentChange(pageNum) {
this.pageNum = pageNum;
this.getTableData();
},
sizeChange(pageSize){
this.pageSize = pageSize;
this.getTableData();
},
// 获取表格数据
async getTableData() {
let _data = {
pageNum: this.pageNum,
pageSize: this.pageSize,
data: {}
};
this.tableLoading = true;
let res = await proecologicalcoastData(_data);
this.tableLoading = false;
if (res.code === 200) {
const { total, data } = res;
this.total = total;
this.tableData = data;
this.selectList = [];
}
},
// 点击图片
onShowImg(src) {
this.visible1 = true;
this.imgSrc = src;
},
// 关闭弹框
onModalClose() {
this.visible = false;
this.fileList = [];
this.formData = {
address: "", // 地址
description: "", // 描述
length: "", // 长度
pics: [], // 图片列表
pointName: "", // 名称
pointX: "", // 经度
pointY: "" // 维度
};
this.$refs["ruleForm"].clearValidate();
this.$refs["ruleForm"].resetFields();
},
// 点击新增
onAdd() {
this.isAdd = true
this.visible = true;
},
handleRemove(file, fileList) {
// console.log(file, fileList);
// this.fileList = fileList;
},
handleChange(file, fileList) {
// this.fileList = fileList;
},
// 点击提交按钮
onSubmit() {
if( this.investFileUrl.length>0){
let formDataM = new FormData();
formDataM.append("file", this.investFileUrl[0]?.raw);
systemUpload(formDataM).then(({ data: { originalName, url } }) => {
// this.formData.fileName = originalName
// this.formData.fileUpicrl = url
this.formData.pic = url
this.$refs["ruleForm"].validate(valid => {
if (valid) {
this.uploadImg();
} else {
return false;
}
});
})
}else{
this.$message({
type: "warning",
message: "请上传文件"
})
return
}
},
// 上传图片
async uploadImg() {
const formData = new FormData();
if (this.fileList.length) {
this.fileList.map(item => {
formData.append("file", item.raw, item.name);
});
this.formLoading = true;
let res = await uploadImages(formData);
this.formLoading = false;
if (res.code === 200) {
this.formData.pics = res.data;
this.onSave();
} else if (res.code && res.code !== 200) {
this.$message({
type: "error",
message: res.msg
});
}
} else {
this.onSave();
}
},
// 提交保存
async onSave() {
// let _data = {
// data: this.formData
// };
if (this.isAdd) {
this.formLoading = true;
let res = await proecologicalcoastSave(this.formData);
this.formLoading = false;
if (res.code === 200) {
this.$message({
type: "success",
message: "新增成功"
});
this.getTableData();
this.onModalClose();
} else if (res.code && res.code !== 200) {
this.$message({
type: "error",
message: res.msg
});
}
} else {
this.editConfig(this.formData)
}
},
// 切换表格选中行
handleSelectionChange(list) {
this.selectList = list;
},
// 提交删除
async deleteData() {
let list = [];
this.selectList.map(item => {
list.push(item.id);
});
let res = await proecologicalcoastDelete(list);
if (res.code === 200) {
this.$message({
type: "success",
message: "删除成功"
});
this.getTableData();
} else if (res.code && res.code !== 200) {
this.$message({
type: "error",
message: res.msg
});
}
},
// 重置高度
resetHeight() {
return new Promise((resolve, reject) => {
this.tableH = 0
resolve()
})
},
// 设置table高度
// fetTableHeight() {
// this.resetHeight().then(res => {
// let bodyH = document.documentElement.clientHeight; // 屏幕高度
// let h = document.getElementsByClassName('top-menu')[0].clientHeight + 100; // 二级菜单栏高度
// let topH = document.getElementsByClassName('top')[0].clientHeight; // 二级菜单栏高度
// this.tableHeight = bodyH - h - topH - 100 + "px";
// })
// }
},
mounted() {
bus.on("mapPointClick", ({ lat, lng, address }) => {
console.log(2232323);
this.formData.siteAddress = address
this.formData.pointY = lat + ''
this.formData.pointX = lng + ''
// this.visible = true
this.isMap = false
})
this.getTableData();
// this.fetTableHeight();
}
};
</script>
<style lang="less" scoped>
.ecoShoreline-page {
padding: 20px;
border: 1px solid #ddd;
height: 90vh;
.top {
margin-bottom: 15px;
}
.img-cnt {
img {
max-width: 100px;
height: 50px;
margin: 0 5px;
transition: all 0.2s ease-in-out;
}
img:hover {
transform: scale(1.2);
}
}
.img-cnt1 {
min-height: 600px;
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 100%;
}
}
.el-input__inner {
// color: #fff;
}
}
</style>
