|
|
|
@ -9,20 +9,29 @@ |
|
|
|
:disabled="formType === 'detail'" |
|
|
|
class="form" |
|
|
|
> |
|
|
|
|
|
|
|
<el-form-item label="头像" label-width="150px" |
|
|
|
<el-form-item |
|
|
|
label="头像" |
|
|
|
label-width="150px" |
|
|
|
prop="imageList" |
|
|
|
style="display: block"> |
|
|
|
style="display: block" |
|
|
|
> |
|
|
|
<div class="imsg-list"> |
|
|
|
<div v-for="(item, index) in dataForm.imageList" :key="index" class="imgs-item"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in dataForm.imageList" |
|
|
|
:key="index" |
|
|
|
class="imgs-item" |
|
|
|
> |
|
|
|
<el-image |
|
|
|
style="width: 100px; height: 100px" |
|
|
|
:src="item" |
|
|
|
fit="fill" |
|
|
|
:preview-src-list="dataForm.imageList"></el-image> |
|
|
|
:preview-src-list="dataForm.imageList" |
|
|
|
></el-image> |
|
|
|
<i class="el-icon-delete" @click="handleDelimg(item, index)"></i> |
|
|
|
</div> |
|
|
|
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" |
|
|
|
<el-upload |
|
|
|
:headers="$getElUploadHeaders()" |
|
|
|
class="avatar-uploader" |
|
|
|
v-if="dataForm.imageList.length < 1 && !disabled" |
|
|
|
:action="uploadUlr" |
|
|
|
:data="{ customerId: customerId }" |
|
|
|
@ -31,10 +40,15 @@ |
|
|
|
:on-progress="handleProgress" |
|
|
|
:on-success="handleImgSuccess" |
|
|
|
:before-upload="beforeImgUpload" |
|
|
|
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"> |
|
|
|
<el-progress v-if="uploading" :width="100" type="circle" :percentage="unloadPencent"></el-progress> |
|
|
|
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" |
|
|
|
> |
|
|
|
<el-progress |
|
|
|
v-if="uploading" |
|
|
|
:width="100" |
|
|
|
type="circle" |
|
|
|
:percentage="unloadPencent" |
|
|
|
></el-progress> |
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
|
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
@ -203,8 +217,7 @@ |
|
|
|
:disabled="btnDisable" |
|
|
|
@click="handleComfirm" |
|
|
|
>确 定 |
|
|
|
</el-button |
|
|
|
> |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -223,11 +236,11 @@ let loading; // 加载动画 |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2', |
|
|
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2", |
|
|
|
btnLoading: false, |
|
|
|
uploading: false, |
|
|
|
disabled: false, |
|
|
|
customerId: '', |
|
|
|
customerId: "", |
|
|
|
formType: "add", //表单操作类型 add新增，edit编辑，detail详情 |
|
|
|
|
|
|
|
agencyId: "", |
|
|
|
@ -316,7 +329,7 @@ export default { |
|
|
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|
|
|
map = new window.TMap.Map(document.getElementById("app"), { |
|
|
|
center: center, // 设置地图中心点坐标 |
|
|
|
zoom: 17.2, // 设置地图缩放级别 |
|
|
|
zoom: 16.2, // 设置地图缩放级别 |
|
|
|
pitch: 43.5, // 设置俯仰角 |
|
|
|
rotation: 45, // 设置地图旋转角度 |
|
|
|
}); |
|
|
|
@ -358,9 +371,11 @@ export default { |
|
|
|
markers.setGeometries([]); |
|
|
|
// 在地图显示范围内以给定的关键字搜索地点 |
|
|
|
search |
|
|
|
.searchRectangle({ |
|
|
|
.searchNearby({ |
|
|
|
keyword: this.dataForm.address, |
|
|
|
bounds: map.getBounds(), |
|
|
|
radius: 1000, |
|
|
|
autoExtend: true, |
|
|
|
center: map.getCenter(), |
|
|
|
}) |
|
|
|
.then((result) => { |
|
|
|
let { data } = result; |
|
|
|
@ -378,32 +393,32 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
beforeImgUpload(file) { |
|
|
|
const isPNG = (file.type === 'image/png') || (file.type === 'image/jpeg') |
|
|
|
const isLt1M = file.size / 1024 / 1024 < 10 |
|
|
|
const isPNG = file.type === "image/png" || file.type === "image/jpeg"; |
|
|
|
const isLt1M = file.size / 1024 / 1024 < 10; |
|
|
|
|
|
|
|
if (!isPNG) { |
|
|
|
this.$message.error('上传图片只能是 PNG 或 JPEG 格式!') |
|
|
|
this.$message.error("上传图片只能是 PNG 或 JPEG 格式!"); |
|
|
|
} |
|
|
|
if (!isLt1M) { |
|
|
|
this.$message.error('上传图片大小不能超过 10MB!') |
|
|
|
this.$message.error("上传图片大小不能超过 10MB!"); |
|
|
|
} |
|
|
|
return isPNG && isLt1M |
|
|
|
return isPNG && isLt1M; |
|
|
|
}, |
|
|
|
handleProgress(event, file, fileList) { |
|
|
|
this.uploading = true |
|
|
|
this.unloadPencent = Number(file.percentage.toFixed(0)) |
|
|
|
this.uploading = true; |
|
|
|
this.unloadPencent = Number(file.percentage.toFixed(0)); |
|
|
|
}, |
|
|
|
handleImgSuccess(res, file) { |
|
|
|
if (res.code === 0 && res.msg === 'success') { |
|
|
|
this.uploading = false |
|
|
|
this.unloadPencent = 0 |
|
|
|
this.dataForm.imageList.push(res.data.url) |
|
|
|
if (res.code === 0 && res.msg === "success") { |
|
|
|
this.uploading = false; |
|
|
|
this.unloadPencent = 0; |
|
|
|
this.dataForm.imageList.push(res.data.url); |
|
|
|
} else { |
|
|
|
this.$message.error(res.msg) |
|
|
|
this.$message.error(res.msg); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleDelimg(item, index) { |
|
|
|
this.dataForm.imageList.splice(index, 1) |
|
|
|
this.dataForm.imageList.splice(index, 1); |
|
|
|
}, |
|
|
|
handleMoveCenter() { |
|
|
|
//修改地图中心点 |
|
|
|
@ -419,7 +434,7 @@ export default { |
|
|
|
this.$refs.ref_form.resetFields(); |
|
|
|
|
|
|
|
this.formType = type; |
|
|
|
this.dataForm.imageList = [] |
|
|
|
this.dataForm.imageList = []; |
|
|
|
if (row) { |
|
|
|
this.dataForm = { ...this.dataForm, ...row }; |
|
|
|
if (row.imgUrl) { |
|
|
|
@ -485,7 +500,6 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
async submit() { |
|
|
|
|
|
|
|
let url = ""; |
|
|
|
if (this.formType === "add") { |
|
|
|
url = "/heart/societyorg/add"; |
|
|
|
@ -535,7 +549,6 @@ export default { |
|
|
|
latitude: "", |
|
|
|
imageList:[] |
|
|
|
};*/ |
|
|
|
|
|
|
|
}, |
|
|
|
// 开启加载动画 |
|
|
|
startLoading() { |
|
|
|
@ -597,15 +610,14 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-uploader { |
|
|
|
::v-deep |
|
|
|
.el-upload { |
|
|
|
::v-deep .el-upload { |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.el-upload:hover { |
|
|
|
border-color: #409EFF; |
|
|
|
border-color: #409eff; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar { |
|
|
|
|
dai
3 years ago