2-27 门票添加和修改

Profile Picture
- Published on Feb 27, 2020🌏 Public
<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>