wangyifang
/
h5-service-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 2 years ago
parent 30de835b79
commit fef6d62d4c
3 changed files with 329 additions and 352 deletions
Show Stats Download Patch File Download Diff File

1
src/views/PartyshistoryRecoder/components/addImg.vue
Unescape View File

@ -236,6 +236,7 @@ export default {
} else { } else {
this.id = '' this.id = ''
this.type = '' this.type = ''
this.image_id=[];
this.init(); this.init();
this.$refs['dialog'].clearValidate(); this.$refs['dialog'].clearValidate();
delete this.form.id delete this.form.id

678
src/views/PartyshistoryRecoder/components/addPointer.vue
Unescape View File

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

2
src/views/PartyshistoryRecoder/components/imgBox.vue
Unescape View File

@ -22,7 +22,7 @@
@pageSizeChange="pageSizeChange" @pageSizeChange="pageSizeChange"
@pageIndexChange="pageChange" @pageIndexChange="pageChange"
@delete="row => destroy({ @delete="row => destroy({
table_name: 'map_point_contents', table_name: 'map_point_images',
id: row.id, id: row.id,
activity_list_id: 7 activity_list_id: 7
}).then(_ => getList())" }).then(_ => getList())"

Write Preview
Loading…
Cancel
Save