addShop.vue

<template>
  <div>
    <el-dialog :title="$t('button.addArea')" class="manage-dialog" :visible.sync="addDialogVisible"
      :close-on-click-modal="false" @open="dialogOpen(addForm)" @close="addDialogClose()">
      <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
        <!-- 区域名称 -->
        <el-form-item :label="$t('table.areaName')" prop="name">
          <el-input v-model.trim="addForm.name"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item :label="$t('table.type')" prop="type">
          <el-select class="manage-sel" v-model="addForm.type" :placeholder="$t('pholder.type')"
            @change="typeChange(addForm.type)">
            <el-option :label="$t('pholder.type1')" :value="1"></el-option>
            <el-option :label="$t('pholder.type2')" :value="3"></el-option>
            <el-option :label="$t('pholder.type3')" :value="2"></el-option>
            <el-option :label="$t('pholder.type4')" :value="4"></el-option>
            <el-option :label="$t('pholder.type5')" :value="5"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item :label="$t('table.state')" prop="status">
          <el-select class="manage-sel" v-model="addForm.status" :placeholder="$t('pholder.state')">
            <el-option :label="$t('pholder.state1')" :value="1"></el-option>
            <el-option :label="$t('pholder.state2')" :value="2"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <!-- 铺位号 -->
        <el-form-item :label="$t('table.shopNum')" prop="shopNo">
          <el-autocomplete class="unit-input" v-model.trim="addForm.shopNo" :placeholder="$t('table.shopNum')">
          </el-autocomplete>
        </el-form-item>
        <!-- 铺位id -->
        <el-form-item :label="$t('table.shopUnitId')" prop="locationNo">
          <el-autocomplete class="unit-input" v-model.trim="addForm.locationNo" :placeholder="$t('table.shopUnitId')">
          </el-autocomplete>
        </el-form-item>
        <!-- <el-form-item :label="$t('table.shopNum')" prop="locationNo">
                    <el-input v-model="addForm.locationNo"></el-input>
                </el-form-item>  -->
        <!-- 面积大小 -->
        <el-form-item :label="$t('table.zoneArea')" prop="externalId">
          <el-input v-model.trim="addForm.area" :placeholder="$t('pholder.metre')"></el-input>
        </el-form-item>
        <!-- 外部编号 -->
        <el-form-item :label="$t('table.externalNum')" prop="externalId">
          <el-input v-model.trim="addForm.externalId"></el-input>
        </el-form-item>
        <el-form-item :label="$t('dialog.subFormat')" prop="subFormatId">
          <el-cascader :options="subFormatOpts" :props="props" class="manage-sel" :placeholder="$t('pholder.select')" v-model='addForm.formatId' :show-all-levels="false"></el-cascader>
         <!-- <el-select class="manage-sel" v-model="addForm.formatId" filterable :placeholder="$t('pholder.subFormat')"
            :no-data-text="$t('pholder.nodata')">
            <el-option v-for="item in subFormatOpts" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select> -->
        </el-form-item>
        <!-- 所属门店 -->
        <el-form-item :label="$t('table.square')" prop="mallId">
          <el-select class="manage-sel" v-model="addForm.mallId" filterable :placeholder="$t('pholder.select')"
            :no-data-text="$t('pholder.nodata')" @change="changeAddMall">
            <el-option v-for="item in mallList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <!-- 所属楼层 -->
        <el-form-item :label="$t('table.floor')" prop="floorId">
          <el-select class="manage-sel" v-model="addForm.floorId" filterable :placeholder="$t('pholder.select')"
            :no-data-text="$t('pholder.nodata')" @change="getFloorImg">
            <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <!-- 动线区域显示坐标轴 -->
        <!-- <el-form-item :label="$t('dialog.coordinate')" v-if="isMl">
                    <el-col :span="7">
                        <el-form-item prop="x" class="spe-form-item">
                            <el-input v-model="addForm.x" :placeholder="$t('pholder.x')" class="gate-xy-inp"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="7">
                        <el-form-item prop="y" class="spe-form-item">
                            <el-input v-model="addForm.y" :placeholder="$t('pholder.y')" class="gate-xy-inp"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button class="bdmap-btn" icon="el-icon-location" @click="getXY()">{{$t('button.getXY')}}</el-button>
                    </el-col>
                    <i class="error-tip">*</i>
                </el-form-item> -->
        <!-- 描述 -->
        <el-form-item :label="$t('table.describe')">
          <el-input type="textarea" v-model.trim="addForm.intro"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button type="primary" @click="addSubmit('addForm')" class="dialog-btn dialog-confirm-btn">
          {{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 楼层平面图 -->
    <floor-pos-dialog ref="posModel" @posXY="getPosXY"></floor-pos-dialog>
  </div>
</template>


<script>
  import defaultImg from '@/assets/img/manage/defaultFloor.svg';
  import floorPos from './addFloorpos';
  export default {
    data() {
      var checkX = (rule, value, callback) => {
        if (this.isMl) {
          if (!value && value != 0) {
            return callback(new Error('X坐标不能为空'));
          }
          var valReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
          if (!valReg.test(value)) {
            callback(new Error('请输入正确的格式'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      var checkY = (rule, value, callback) => {
        if (this.isMl) {
          if (!value && value != 0) {
            return callback(new Error('Y坐标不能为空'));
          }
          var valReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
          if (!valReg.test(value)) {
            callback(new Error('请输入正确的格式'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      var checkName = (rule, value, callback) => {
        //var flag = new RegExp("[`’\"·_ ~!%\\-@#$^&*=|{}':;',\\[\\].<>《》/?~！@#￥……&*——|{}【】‘；：”“'。，、？ ]");
        var flag = new RegExp("'");
        if (flag.test(value) || /\\/.test(value)) {
          callback(new Error("名称包含特殊字符,请重新输入！"));
        } else {
          callback();
        }
      }
      return {
        addDialogVisible: false,
        addForm: {
          name: '',
          type: null,
          status: null,
          locationNo: '',
          shopNo: '',
          externalId: '',
          mallId: '',
          floorId: '',
          formatId: [],
          subFormatId: '',
          area: '',
          x: null,
          y: null,
          intro: ''
        },
        isMl: false,
        // XyActive: true,
        mallList: [],
        floorList: [],
        zoneTypeList: [],
        floorPlanUrl: window._vionConfig.picUrl,
        // rules: {},
        rules: {
          name: [{
              required: true,
              message: '请输入区域名称',
              trigger: 'blur'
            },
            {
              validator: checkName,
              trigger: "blur"
            }
            // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          type: [{
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }, ],
          status: [{
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }, ],
          mallId: [{
            required: true,
            message: '请选择广场',
            trigger: 'change'
          }, ],
          // accountId: [
          // 	{ required: true, message: '请选择集团', trigger: 'blur' },
          // ],
          floorId: [{
            required: true,
            message: '请选择楼层',
            trigger: 'change'
          }, ],
          x: [
            // { required: true, message: '请输入x坐标', trigger: 'change' },
            {
              validator: checkX,
              trigger: 'change'
            }
          ],
          y: [
            // { required: true, message: '请输入y坐标', trigger: 'change' },
            {
              validator: checkY,
              trigger: 'change'
            }
          ],
        },
        floorImg: '',
        curMallId: null,
        isMl: false,
        formatOpts: [],
        subFormatOpts: [],
        filterSubFormat: [],
        props:{
          value:'id',
          label:'name'
        }
      }
    },
    components: {
      'floor-pos-dialog': floorPos
    },
    created() {
      // zoneTypeList
    },
    methods: {
      dialogInit(mall_id) {
        this.curMallId = mall_id;
        this.addDialogVisible = true;
        this.addForm.formatId = []
        this.getFormat();
      },
      dialogOpen(formDatas) {
        formDatas.accountId = this.$cookie.get('accountId');
        this.getMallList(formDatas.accountId);
      },
      getMallList(accountId) {
        this.mallList = [];
        this.floorList = [];
        this.addForm.mallId = '';
        this.addForm.floorId = '';
        this.$api.base.mall({
            accountId: accountId,
            status_arr: '1,3'
          }, null, true)
          .then((data) => {
            let result = data.data;
            result.data.forEach(item => {
              if (item.id == this.curMallId) {
                this.addForm.mallId = item.id;
              }
            })
            this.mallList = result.data;
            if (this.mallList.length > 0) {
              if (!this.curMallId) {
                this.addForm.mallId = this.mallList[0].id;
              }
              this.getFloorList(this.addForm.mallId)
            }
          })
          .catch((error) => {})
      },
      getFloorList(mallId) {
        this.floorList = [];
        this.addForm.floorId = '';
        this.$api.base.floor({
            mallId: mallId,
            status: 1
          })
          .then((data) => {
            let result = data.data;
            this.floorList = result.data;
            if (this.floorList.length > 0) {
              this.addForm.floorId = this.floorList[0].id;
              this.getFloorImg();
            }
          })
          .catch((error) => {})
      },
      //获取业态
      getFormat() {
        this.subFormatOpts = []
        this.$api.base.formatlist()
          .then((data) => {
            let result = data.data;
            this.subFormatOpts = this.toTree(result.data);
          })
      },
      toTree(data) {
        // 空数组
        let result = [];
        // 判断不是数组  直接返回
        if (!Array.isArray(data)) {
            return result
        }
        // 遍历  删除  children 属性  做初始化操作
        data.forEach(item => {
            delete item.children;
        });
        //  空对象
        let map = {};
        data.forEach(item => {
            map[item.id] = item;
        });

        /**
         * map对象的 键: 是每个id  值：对应的item
         * 1: {id: 1, pid: 0, name: "body"}
         * 2: {id: 2, pid: 1, name: "title"}
         * 3: {id: 3, pid: 2, name: "div"}
         */
        data.forEach(item => {
            // item.pid 为0时 返回underfined
            let parent = map[item.pid];
            if (parent) {
                (parent.children || (parent.children = [])).push(item);
            } else {
                // 这里push的item是pid为0的数据
                result.push(item);
            }
        });
        return result;
    },
      changeAddMall(val) {
        this.getFloorList(val);
      },
      getFloorImg() {
        this.$api.base.floor({
            id: this.addForm.floorId
          })
          .then(res => {
            if (res.data.data[0].floorPlan) {
              this.floorImg = this.floorPlanUrl + res.data.data[0].floorPlan;
            } else {
              this.floorImg = defaultImg
              this.$message({
                showClose: true,
                message: this.$t('message.NoFloorImg'),
                type: 'warning'
              })
            }
          })
          .catch(err => {
            // console.log('add gate err:', err.message)
          })
      },
      typeChange(val) {
        this.isMl = val == 4 ? true : false;
      },
      getXY() {
        this.$refs.posModel.dialogInit(this.floorImg);
      },
      getPosXY(XY) {
        this.addForm.x = XY.x;
        this.addForm.y = XY.y;
      },
      createFilter(queryString, key) {
        return (restaurant) => {
          return (restaurant[key].toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      addSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addForm.accountId = this.$cookie.get('accountId');
            this.addForm.createUser = this.$cookie.get('userId');
            this.addForm.modifyUser = this.$cookie.get('userId');
            if(this.addForm.formatId){
              this.addForm.formatId = this.addForm.formatId[this.addForm.formatId.length - 1]
            }
            // return
            this.$api.management.addZone(this.addForm)
              .then((data) => {
                this.addDialogVisible = false;
                this.sessionFormat('filterFormat', true).then()
                this.$parent.getTableData();
              })
              .catch((error) => {
                // this.$message.error(error.message)
              })
          } else {
            return false;
          }
        });
      },
      addDialogClose() {
        this.$refs.addForm.resetFields();
      },
    }
  }
</script>

<style scoped>
  .bdmap-btn {
    margin-left: 17px;
    padding: 0 8px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 2px;
    font-size: 13px;
  }

  .unit-input {
    width: 100%;
  }
</style>