<template>
<el-dialog :title="title" :visible.sync="visiable" width="1000px">
<el-form :model="form" size="small" :rules="rules" ref="form" label-width="80px">
<el-form-item label="门票名" prop="Title">
<el-input v-model="form.Title" placeholder="请输入门票标题"></el-input>
</el-form-item>
<div style="overflow:hidden">
<div style="float:left;width:50%;">
<el-form-item label="门票分类" prop="CategoryId">
<el-select style="width:100%;" v-model="form.CategoryId" placeholder="请选择门票分类">
<el-option
v-for="item in categories"
:key="item.Id"
:label="item.Name"
:value="item.Id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="单价" prop="Price">
<el-input v-model="form.Price" placeholder="请输入单价"></el-input>
</el-form-item>
<el-form-item label="库存" prop="Stock">
<el-input v-model="form.Stock" placeholder="请输入库存"></el-input>
</el-form-item>
<el-form-item label="门票描述" prop="Content">
<wangEditor v-model="form.Content"></wangEditor>
</el-form-item>
</div>
<div style="float:left;width:50%;">
<el-form-item label="图片" prop="Src">
<input
accept="image/*"
type="file"
id="aa"
@change="fileChange"
style="width:100%;height:32px;position:absolute;z-index:1;opacity:0;"
/>
<el-input placeholder="请选择图片" v-model="form.Src"></el-input>
</el-form-item>
<el-form-item label="商户名" prop="ShopName">
<el-input placeholder="请输入商户名(选填)" v-model="form.ShopName"></el-input>
</el-form-item>
<el-form-item label="商户电话" prop="ShopPhone">
<el-input placeholder="请输入商户电话(选填)" v-model="form.ShopPhone"></el-input>
</el-form-item>
<el-form-item label="商户地址" prop="ShopAddress">
<baidumap
ref="map"
suggestId="search"
mapStyle="width:100%;height:200px;margin-top:20px"
:controllers="false"
@suggestSelect="select"
@click="clickMap"
>
<el-input
type="text"
id="search"
v-model="form.ShopAddress"
placeholder="请输入商户地址(选填)"
/>
</baidumap>
</el-form-item>
<el-form-item label="状态" prop="Enable">
<el-select placeholder="请选择状态" v-model="form.Enable" style="width:100%">
<el-option label="启用" :value="1"></el-option>
<el-option label="禁用" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="排序号" prop="SortNum">
<el-input placeholder="请输入排序号" v-model="form.SortNum"></el-input>
</el-form-item>
</div>
</div>
</el-form>
<span slot="footer">
<el-button @click=" visiable= false">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import baidumap from "../common/baidumap";
import wangEditor from "../common/wangEditor";
import axios from "axios";
export default {
components: {
wangEditor,
baidumap
},
mounted() {
axios.get("/api/category/get").then(res => {
this.categories = res.data.rows;
});
},
data() {
return {
title: "添加",
visiable: false,
categories: [],
form: {
Id: 0,
Title: "",
Price: "",
Stock: 0,
ShopName: "",
ShopAddress: "",
ShopPhone: "",
Lat: "",
Long: "",
Content: "",
Src: "",
CategoryId: "",
Enable: 1,
SortNum: 100
},
rules: {
Title: [
{ required: true, message: "必填" },
{ max: 64, message: "最大64字符" }
],
Price: [
{ required: true, message: "必填" },
{
pattern: /^\d{1,8}(\.\d{1,2})?$/,
message: "价格范围:0~99999999.99"
}
],
Stock: [
{ required: true, message: "必填" },
{ pattern: /^\d{1,5}$/, message: "库存范围:0~99999" }
],
ShopName: [{ max: 64, message: "最大64字符" }],
ShopAddress: [{ max: 64, message: "最大64字符" }],
ShopPhone: [
{ max: 64, message: "最大12字符" },
{
pattern: /^([1]\d{10}|(0[0-9]{2,4}[-]?)?([0-9]{6,8}))$/,
message: "请输入正确的电话号码或手机号"
}
],
Content: [{ required: true, message: "必填" }],
Src: [
{ required: true, message: "必填" },
{ max: 64, message: "最大64字符" }
],
CategoryId: [{ required: true, message: "必填" }],
Enable: [{ required: true, message: "必填" }],
SortNum: [
{ required: true, message: "必填" },
{ pattern: /^[-]?\d{1,5}$/, message: "排序号范围:-99999~99999" }
]
}
};
},
methods: {
fileChange(e) {
console.log(e);
//判断选择的文件列表中的第0项是否有值
if (e.target.files[0]) {
this.form.Src = e.target.files[0].name;
} else {
this.form.Src = "";
}
},
openAddDialog() {
this.form = {
Id: 0,
Title: "",
Price: "",
Stock: 0,
ShopName: "",
ShopAddress: "",
ShopPhone: "",
Lat: "",
Long: "",
Content: "",
Src: "",
CategoryId: "",
Enable: 1,
SortNum: 100
};
this.visiable = true;
this.$nextTick(() => {
document.getElementById('aa').value=""; //文件选择框重置为空
this.$refs.form.clearValidate();
});
//加延迟100ms,保证百度地图已经显示,可以正确读取自己的宽高度
setTimeout(() => {
this.$refs.map.center({ lng: 118.156801, lat: 24.485408, level: 12 });
this.$refs.map.clearMarker();
}, 100);
},
openEditDialog(data) {
this.form = data;
this.visiable = true;
this.$nextTick(() => {
document.getElementById('aa').value="";
this.$refs.form.clearValidate();
});
//加延迟是为了保证百度地图可以正确识别地图大小
setTimeout(() => {
//判断有没有标点,如果为0.000000,就表示没有标点
if(this.form.Long!='0.000000'){
this.$refs.map.center({ lng: this.form.Long, lat: this.form.Lat, level: 15 });
this.$refs.map.clearMarker();
this.$refs.map.addMarker({ lng: this.form.Long, lat: this.form.Lat})
}else{
this.$refs.map.center({ lng: 118.156801, lat: 24.485408, level: 12 });
this.$refs.map.clearMarker();
}
}, 100);
//修bug
//1. 修改时,会弹出地址的下拉提示框
//2. 修复首次进入直接打开修改窗口,地址会被百度地图设置为空的bug
var timer=setInterval(() => {
try {
var eles=document.getElementsByClassName('tangram-suggestion-main');
for(var i in eles){
eles[i].style.display='none';
}
} catch (error) {
//
}
if(document.getElementById('search').value!=this.form.ShopAddress){
document.getElementById('search').value=this.form.ShopAddress
}
}, 0);
//一秒后,关闭循环定时器
setTimeout(function(){
clearInterval(timer)
},1000)
},
ok() {
this.$refs.form.validate(result => {
if (result) {
this.$loading("文件上传中");
//保存
var formData = new FormData();
for (var name in this.form) {
formData.append(name.toLowerCase(), this.form[name]);
}
formData.delete("src"); //多余的删除
if (document.getElementById("aa").files.length == 1) {
formData.append("file", document.getElementById("aa").files[0]);
}
var url ;
if(this.form.Id>0){
url = "/api/ticket/edit"
}else{
url = "/api/ticket/add"
}
axios.post(url, formData).then(res => {
this.$loading().close(); //关闭全局遮罩
if (res.data.success) {
this.visiable = false;
this.$emit("refresh");
}
this.$message({
message: res.data.message,
type: res.data.success ? "success" : "error"
});
});
}
});
},
select(address) {
console.log(address);
this.$refs.map.getSuggessPoint({
address: address,
success: point => {
this.form.Long = point.lng;
this.form.Lat = point.lat;
this.form.ShopAddress = address;
this.$refs.map.clearMarker(); //清空所有标记
point.level = 15;
this.$refs.map.addMarker(point); //加标记
this.$refs.map.center(point); //居中
}
});
},
clickMap(e) {
var point = e.point;
this.$refs.map.clearMarker(); //清空所有标记
this.$refs.map.addMarker(point); //加标记
this.form.Long = point.lng;
this.form.Lat = point.lat;
}
}
};
</script>
<style>
.w-e-menu {
display: inline-block;
}
.w-e-toolbar {
display: block;
}
/* 调整地址提示框的层叠次序,避免被对话框挡住 */
.tangram-suggestion-main {
z-index: 99999;
}
</style>