|
@@ -26,36 +26,54 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="点位图标">
|
|
|
- <div
|
|
|
- style="width: 120px;"
|
|
|
- v-loading="actionUrlLoading"
|
|
|
- element-loading-text="上传中..."
|
|
|
- element-loading-spinner="el-icon-loading"
|
|
|
- element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
- >
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- :action="actionUrl"
|
|
|
- :data="{
|
|
|
- bucket: 'tourism'
|
|
|
- }"
|
|
|
- :show-file-list="false"
|
|
|
- accept=".jpg, .png, jpeg"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :on-progress="handleAvatarProgress"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- :disabled="actionUrlLoading"
|
|
|
- :on-error="handleAvatarError"
|
|
|
- >
|
|
|
- <img v-if="form.imgUrl" style="width: 100px;height: 100px;background-color: rgba(211,211,211,0.6);" :src="form.imgUrl" class="avatar">
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- <span>建议尺寸40*40,支持jpg,png,gif,支持1MB大小以内的图片上传</span>
|
|
|
+ <el-form-item label="营业时间:" prop="workTime">
|
|
|
+ <el-input style="width: 350px;" v-model="form.workTime" placeholder="请输入营业时间" />
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="点位图片" prop="imgUrl">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div
|
|
|
+ v-for="(item,index) in form.imgUrl"
|
|
|
+ :key="index"
|
|
|
+ style="width: 100px; height: 100px;position: relative;border: 1px solid #999;border-radius: 5px;margin-right: 20px;">
|
|
|
+ <el-image
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="item"
|
|
|
+ :preview-src-list="form.imgUrl">
|
|
|
+ </el-image>
|
|
|
+ <span @click="handleRemove(index)" style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
|
|
|
+ <i class="el-icon-error"></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="width: 100px; height: 100px;"
|
|
|
+ v-if="!form.imgUrl||form.imgUrl.length<5"
|
|
|
+ v-loading="actionUrlLoading"
|
|
|
+ element-loading-text="上传中..."
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
+ >
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="actionUrl"
|
|
|
+ :data="{
|
|
|
+ bucket: 'tourism'
|
|
|
+ }"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :on-progress="handleAvatarProgress"
|
|
|
+ :disabled="actionUrlLoading"
|
|
|
+ :on-error="handleAvatarError"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <span>建议尺寸40*40,支持jpg,png,gif,支持1MB大小以内的图片上传</span>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="点位信息:">
|
|
|
- <el-input style="width: 350px;" v-model="form.remark" type="textarea" placeholder="请输入点位信息" maxlength="200" show-word-limit />
|
|
|
+ <el-input :rows="4" v-model="form.remark" type="textarea" placeholder="请输入点位信息" maxlength="500" show-word-limit />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="地图定位:">
|
|
|
<div style="display: flex;">
|
|
@@ -125,6 +143,7 @@ export default {
|
|
|
longitude: [{ required: true, message: "请输入经度", trigger: ["change","blur"] }],
|
|
|
latitude: [{ required: true, message: "请输入纬度", trigger: ["change","blur"] }],
|
|
|
content: [{ required: true, message: "请输入开放状态", trigger: ["change","blur"] }],
|
|
|
+ workTime: [{ required: true, message: "请输入营业时间", trigger: ["change","blur"] }],
|
|
|
},
|
|
|
pointTypeList: [],// 景点产品关联
|
|
|
// 上传文件
|
|
@@ -158,7 +177,7 @@ export default {
|
|
|
}else if(model=='EDIT') { // 新增
|
|
|
let obj = {
|
|
|
...row,
|
|
|
- openDate: row.openDate?row.openDate.join('~') : null
|
|
|
+ imgUrl: row.imgUrl?row.imgUrl.split(','):[]
|
|
|
}
|
|
|
this.$set(this,'form',obj)
|
|
|
this.formStatus = 1
|
|
@@ -189,7 +208,8 @@ export default {
|
|
|
let res = await getTableDeatilsByIdApi(this.configUrl.details,{id})
|
|
|
if(res.code == 200) {
|
|
|
let obj = {
|
|
|
- ...res.data
|
|
|
+ ...res.data,
|
|
|
+ imgUrl: res.data.imgUrl?res.data.imgUrl.split(','):[]
|
|
|
}
|
|
|
this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
|
|
|
this.formStatus = 1
|
|
@@ -231,7 +251,8 @@ export default {
|
|
|
if (this.model != 'ADD') {
|
|
|
addTableApi(
|
|
|
this.configUrl.edit,{
|
|
|
- ...this.form
|
|
|
+ ...this.form,
|
|
|
+ imgUrl: this.form.imgUrl ? this.form.imgUrl.join(','):'',
|
|
|
}).then(response => {
|
|
|
this.$modal.msgSuccess("修改成功");
|
|
|
this.loading = false
|
|
@@ -243,7 +264,8 @@ export default {
|
|
|
})
|
|
|
} else {
|
|
|
addTableApi(this.configUrl.edit,{
|
|
|
- ...this.form
|
|
|
+ ...this.form,
|
|
|
+ imgUrl: this.form.imgUrl ? this.form.imgUrl.join(','):'',
|
|
|
}).then(response => {
|
|
|
this.$modal.msgSuccess("新增成功");
|
|
|
this.loading = false
|
|
@@ -295,16 +317,16 @@ export default {
|
|
|
this.$set(this.form,'longitude',params.lng)
|
|
|
this.$set(this.form,'latitude',params.lat)
|
|
|
},
|
|
|
+ handleRemove(index) {
|
|
|
+ this.form.imgUrl.splice(index,1)
|
|
|
+ },
|
|
|
/** 上传图片 */
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- console.log("res, file",res, file)
|
|
|
+ handleAvatarSuccess(response, file, fileList) {
|
|
|
+ console.log("res, file",response, file, fileList)
|
|
|
this.actionUrlLoading = false
|
|
|
- if(res.code != 200) {
|
|
|
- this.$set(this.form,'imgUrl',null)
|
|
|
- }else {
|
|
|
- this.$set(this.form,'imgUrl',res.data.url)
|
|
|
+ if(response.code == 200) {
|
|
|
+ this.form.imgUrl.push(response.data.url)
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
beforeAvatarUpload(file) {
|
|
|
const isLt2M = file.size / 1024 / 1024 <= 1;
|
|
@@ -312,10 +334,10 @@ export default {
|
|
|
let typeList = ['png','jepg','jpg','gif']
|
|
|
const isJPG = typeList.includes(testmsg);
|
|
|
if (!isJPG) {
|
|
|
- this.$message.error(`上传头像图片只能是 ${typeList} 格式!`);
|
|
|
+ this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
|
|
|
}
|
|
|
if (!isLt2M) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
+ this.$message.error('上传图片图片大小不能超过 2MB!');
|
|
|
}
|
|
|
|
|
|
let isSize = new Promise(function (resolve, reject) {
|