|
|
<template>
|
|
|
<div>
|
|
|
<xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增点位场馆' : '编辑点位场馆'"
|
|
|
:form="form" :rules="rules" @submit="submit">
|
|
|
<template v-slot:activity_list_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red; font-weight: 600; padding-right: 4px">*</span>
|
|
|
项目 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select style="width: 300px" v-model="form.activity_list_id" placeholder="请选择">
|
|
|
<el-option
|
|
|
v-for="item in listActivity"
|
|
|
:key="item.id"
|
|
|
:label="item.name"
|
|
|
:value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:name>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red; font-weight: 600; padding-right: 4px">*</span>
|
|
|
名称 ：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.name" clearable placeholder="请输入名称" style="width: 300px"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:image_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">封面图 ：</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-upload style="width: 300px" class="upload-demo" :action="action" :on-success="
|
|
|
(response, file, fileList) =>
|
|
|
successHandle(response, file, fileList, 'image_id')
|
|
|
" :before-upload="uploadBefore" :file-list="image_id" :on-remove="
|
|
|
(file, fileList) => removeHande(file, fileList, 'image_id')
|
|
|
" :limit="1" list-type="picture-card">
|
|
|
<i slot="default" class="el-icon-plus"></i>
|
|
|
<div slot="tip" class="el-upload__tip">
|
|
|
只能上传jpg/png文件，且不超过500kb
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:lat>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">纬度 ：</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input-number v-model="form.lat" clearable placeholder="请输入纬度" style="width: 300px"
|
|
|
:controls="false"></el-input-number>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:lng>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">经度 ：</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input-number v-model="form.lng" clearable placeholder="请输入经度" style="width: 300px"
|
|
|
:controls="false"></el-input-number>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #jiaodu>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">旋转角度 ：</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input-number v-model="form.jiaodu" clearable :precision="2" placeholder="请输入旋转角度" style="width: 300px"
|
|
|
:controls="false"></el-input-number>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:x>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">x轴位置 ：</div>
|
|
|
<div class="xy-table-item-content xy-table-item-price-per">
|
|
|
<el-input-number v-model="form.x" clearable :precision="2" placeholder="请输入x轴位置" style="width: 300px"
|
|
|
:controls="false"></el-input-number>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:y>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">y轴位置 ：</div>
|
|
|
<div class="xy-table-item-content xy-table-item-price-per">
|
|
|
<el-input-number v-model="form.y" :precision="2" clearable placeholder="请输入y轴位置" style="width: 300px"
|
|
|
:controls="false"></el-input-number>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:video_image_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">视频封面图 ：</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-upload style="width: 300px" class="upload-demo" :action="action" :on-success="
|
|
|
(response, file, fileList) =>
|
|
|
successHandle(response, file, fileList, 'video_image_id')
|
|
|
" :before-upload="uploadBefore" :file-list="video_image_id" :on-remove="
|
|
|
(file, fileList) => removeHande(file, fileList, 'video_image_id')
|
|
|
" :limit="1" list-type="picture-card">
|
|
|
<i slot="default" class="el-icon-plus"></i>
|
|
|
<div slot="tip" class="el-upload__tip">
|
|
|
只能上传jpg/png文件，且不超过500kb
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:video_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">视频 ：</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-upload style="width: 300px" ref="upload" multiple :on-success="
|
|
|
(response, file, fileList) =>
|
|
|
successHandle(response, file, fileList, 'video_id')
|
|
|
" :before-upload="uploadBefore" accept=".mp4,.avi,.wmv,.mp3" :action="action" :file-list="video_id"
|
|
|
:auto-upload="false" :on-remove="
|
|
|
(file, fileList) => removeHande(file, fileList, 'video_id')
|
|
|
">
|
|
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
|
|
<el-button style="margin-left: 10px" size="small" type="success"
|
|
|
@click="$refs['upload'].submit()">开始上传</el-button>
|
|
|
<div slot="tip" class="el-upload__tip">
|
|
|
支持文件格式：.mp4 .avi .wmv .mp3
|
|
|
<br />单个文件不能超过300M
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:content>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">内容 ：</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<tinymce style="width: 700px;" v-model="form.content"></tinymce>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</xy-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
show,
|
|
|
save
|
|
|
} from "@/api/index";
|
|
|
import { index as activityIndex } from "@/api/activity/index";
|
|
|
import tinymce from "@/components/XyTinymce"
|
|
|
export default {
|
|
|
components: {
|
|
|
tinymce
|
|
|
},
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
id: "",
|
|
|
type: "",
|
|
|
image_id: [],
|
|
|
video_image_id: [],
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
video_id: [],
|
|
|
listActivity:[],
|
|
|
form: {
|
|
|
activity_list_id: '',
|
|
|
name: "",
|
|
|
image_id: "",
|
|
|
lat: "",
|
|
|
lng: "",
|
|
|
x: "",
|
|
|
y: "",
|
|
|
jiaodu: "",
|
|
|
video_id: "",
|
|
|
video_image_id: "",
|
|
|
content: "",
|
|
|
},
|
|
|
rules: {
|
|
|
name: [{
|
|
|
required: true,
|
|
|
message: "请填写名称",
|
|
|
}, ],
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
async loadActivity() {
|
|
|
const res = await activityIndex({
|
|
|
page: 1,
|
|
|
page_size: 999,
|
|
|
});
|
|
|
this.listActivity = res.data;
|
|
|
},
|
|
|
show() {
|
|
|
this.isShow = true;
|
|
|
},
|
|
|
hidden() {
|
|
|
this.isShow = false;
|
|
|
},
|
|
|
init() {
|
|
|
for (let key in this.form) {
|
|
|
if (this.form[key] instanceof Array) {
|
|
|
this.form[key] = [];
|
|
|
} else {
|
|
|
this.form[key] = "";
|
|
|
}
|
|
|
}
|
|
|
this.$refs["dialog"].clearValidate();
|
|
|
},
|
|
|
setId(id) {
|
|
|
if (typeof id == "number") {
|
|
|
this.id = id;
|
|
|
} else {
|
|
|
console.error("error typeof id: " + typeof id);
|
|
|
}
|
|
|
},
|
|
|
getId() {
|
|
|
return this.id;
|
|
|
},
|
|
|
setType(type = "add") {
|
|
|
let types = ["add", "editor"];
|
|
|
if (types.includes(type)) {
|
|
|
this.type = type;
|
|
|
} else {
|
|
|
console.warn("Unknown type: " + type);
|
|
|
}
|
|
|
},
|
|
|
setForm(key = [], value = []) {
|
|
|
if (key instanceof Array) {
|
|
|
key.forEach((key, index) => {
|
|
|
this.form[key] = value[index] ?? "";
|
|
|
});
|
|
|
}
|
|
|
if (typeof key === "string") {
|
|
|
this.form[key] = value;
|
|
|
}
|
|
|
if (!key) {
|
|
|
this.init();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//上传
|
|
|
successHandle(response, file, fileList, key) {
|
|
|
this[key] = fileList;
|
|
|
},
|
|
|
removeHande(file, fileList, key) {
|
|
|
console.log("fileList", fileList)
|
|
|
console.log("key", key)
|
|
|
this[key] = fileList;
|
|
|
this.form[key] = "";
|
|
|
},
|
|
|
uploadBefore(file) {
|
|
|
console.log(file);
|
|
|
if (file.size / 1000 > 300 * 1024) {
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: "上传大小超过300MB！",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async getDetail() {
|
|
|
const res = await show({
|
|
|
id: this.id,
|
|
|
table_name: "map_points",
|
|
|
with_relations: ['video', 'image', "videoImage"]
|
|
|
});
|
|
|
this.$integrateData(this.form, res);
|
|
|
this.image_id = res.image ? [{
|
|
|
url: res.image?.url,
|
|
|
name: res.image?.original_name,
|
|
|
response: res.image
|
|
|
}] : []
|
|
|
this.video_id = res.video ? [{
|
|
|
url: res.video?.url,
|
|
|
name: res.video?.original_name,
|
|
|
response: res.video
|
|
|
}] : []
|
|
|
|
|
|
|
|
|
this.video_image_id = res.video_image ? [{
|
|
|
url: res.video_image?.url,
|
|
|
name: res.video_image?.original_name,
|
|
|
response: res.video_image
|
|
|
}] : [];
|
|
|
},
|
|
|
|
|
|
submit() {
|
|
|
|
|
|
if (this.type === "add") {
|
|
|
if (this.form.hasOwnProperty("id")) {
|
|
|
delete this.form.id;
|
|
|
}
|
|
|
}
|
|
|
if (this.type === "editor") {
|
|
|
Object.defineProperty(this.form, "id", {
|
|
|
value: this.id,
|
|
|
enumerable: true,
|
|
|
configurable: true,
|
|
|
writable: true,
|
|
|
});
|
|
|
}
|
|
|
this.form.image_id = this.image_id.length == 0 ? "" : (this.image_id[0]?.response?.id);
|
|
|
this.form.video_id = this.video_id.length == 0 ? "" : (this.video_id[0]?.response?.id);
|
|
|
this.form.video_image_id = this.video_image_id.length == 0 ? "" : (this.video_image_id[0]?.response?.id);
|
|
|
save(Object.assign(this.form, {
|
|
|
table_name: "map_points"
|
|
|
})).then(
|
|
|
(res) => {
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: this.type === "add" ? "新增点位场馆" : "编辑点位场馆" + "成功",
|
|
|
});
|
|
|
this.isShow = false;
|
|
|
this.$emit("refresh");
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
created(){
|
|
|
this.loadActivity()
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(val) {
|
|
|
if (val) {
|
|
|
console.log("form",this.form.activity_list_id)
|
|
|
if (this.type === "editor") {
|
|
|
this.getDetail();
|
|
|
}
|
|
|
} else {
|
|
|
this.id = "";
|
|
|
this.type = "";
|
|
|
this.image_id = [];
|
|
|
this.video_id = [];
|
|
|
this.video_image_id = [];
|
|
|
this.init();
|
|
|
this.$refs["dialog"].clearValidate();
|
|
|
delete this.form.id;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
::v-deep .el-input__inner {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.xy-table-item-price-per {
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
top: 0;
|
|
|
content: "%";
|
|
|
}
|
|
|
|
|
|
::v-deep .el-input__clear {
|
|
|
position: relative;
|
|
|
right: 46px;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
