2-26 添加门表对话框

<template>
  <el-dialog :title="title" :visible.sync="visiable" width="1000px">
    <el-form :model="form" size="small" 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="门票分类">
            <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="门票描述">
            <wangEditor v-model="form.Content"></wangEditor>
          </el-form-item>
        </div>
        <div style="float:left;width:50%;">
          <el-form-item label="商户地址">
            <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" />
            </baidumap>
          </el-form-item>
        </div>
      </div>
      {{form}}
    </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: true,
      categories: [],
      form: {
        Id: 0,
        Title: "",
        Price: "",
        Stock: 0,
        ShopName: "",
        ShopAddress: "",
        ShopPhone: "",
        Lat: "",
        Long: "",
        Content:'',
        Src: "",
        CategoryId: '',
        Enable: 1,
        SortNum: 100
      }
    };
  },
  methods: {
    ok() {},
    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 {
  position: relative;
  display: inline-block;
}
.w-e-toolbar {
  display: block;
}
.tangram-suggestion-main{
    z-index:99999;
}
</style>