addGate.vue

<template>
  <div>
    <el-dialog :title="$t('button.addSite')" append-to-body class="manage-dialog" :visible.sync="addDialogVisible"
      :close-on-click-modal="false" @open="dialogOpenAdd(addForm)" @close="addDialogClose()">
      <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
        <el-form-item :label="$t('dialog.name')" 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')">
            <el-option v-for="item in types" :key="item.key" :label="isEn?item.valueEn:item.value" :value="item.key">
            </el-option>
            <!-- <el-tooltip  v-for="item in types" :key="item.key" class="item" popper-class="tooltipClass"  effect="light" placement="top-start" offset="-200">
                            <div slot="content">{{ item.content }}</div>
                            <el-option :label="$t(`dictionary.${item.value}`)" :value="item.key"></el-option>
                        </el-tooltip>                                     -->
          </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('table.stateA')" :value="1"></el-option>
            <el-option :label="$t('table.stateB')" :value="2"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </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.InstallationFloor')" 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>
        </el-form-item>
        <el-form-item v-show="addForm.type === 4" :label="$t('table.heatDeivce')" prop="heatMapDeviceType">
          <el-select class="manage-sel" v-model="addForm.heatMapDeviceType" :placeholder="$t('pholder.select')">
            <el-option :label="'鱼眼'" :value="1"></el-option>
            <el-option :label="'盒子'" :value="2"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </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('table.SquareEntrance')" prop="isMallGate">
          <el-select class="manage-sel" v-model="addForm.isMallGate" :placeholder="$t('pholder.select')">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item> -->
        <el-form-item :label="$t('table.Source')" prop="Source" v-if="addForm.isMallGate == 1">
          <el-select class="manage-sel" v-model="addForm.source" :placeholder="$t('pholder.select')">
            <el-option :value="item.key" v-for="(item,index) in sourceData" :key="index" :label="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item :label="$t('table.faceCamera')" prop="isHasFace">
          <el-select class="manage-sel" v-model="addForm.isHasFace" :placeholder="$t('pholder.select')">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
          <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 floorPos from './addFloorpos'
  import defaultImg from '@/assets/img/manage/defaultFloor.svg'
  export default {
    data() {
      var checkName = (rule, value, callback) => {
        //var flag = new RegExp("[`’\"·_ ~!%\\-@#$^&*=|{}':;',\\[\\].<>《》/?~！@#￥……&*——|{}【】‘；：”“'。，、？ ]");
        var flag = new RegExp("'");
        if (flag.test(value) || /\\/.test(value)) {
          callback(new Error(this.$t('pholder.nameError')));
        } else {
          callback();
        }
      }
      var checkDeviceType = (rule, value, callback) => {
        if (this.addForm.type == 4 && !value) {
          callback(new Error(this.$t('pholder.select')));
        } else {
          callback();
        }

      }
      var checkX = (rule, value, callback) => {
        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();
        }
      };
      var checkY = (rule, value, callback) => {
        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();
        }
      };
      return {
        isEn: localStorage.getItem('lang') == 'en_US',
        types: [
          // { content: '传统客流智能机或者CBOX统计基础客流量。', value: 'tradCount', key: 1 },
          // { content: '通过人体抓拍识别统计客流量及人体属性分析。', value: 'faceFlow', key: 3 },
          // { content: '通过人体抓拍识别仅分析人体属性。无客流量。', value: 'faceCapture', key: 5 },
          // { content: '通过店外设备统计门前路过的客流量。', value: 'inStoreRate', key: 2 },
          // { content: '通过鱼眼相机采集人员位置信息，并做热力呈现。', value: 'heatmap', key: 4 }
        ],
        addDialogVisible: false,
        sourceData: [],
        addForm: {
          name: '',
          externalId: '',
          type: null,
          status: null,
          mallId: null,
          floorId: null,
          x: null,
          y: null,
          isMallGate: null,
          isHasFace: null,
          intro: '',
          heatMapDeviceType: ''
        },
        mallList: [],
        floorList: [],
        XyActive: true,
        floorPlanUrl: window._vionConfig.picUrl,
        floorImg: '',
        btnDisabled: true,
        rules: {
          name: [{
              required: true,
              message: this.$t('pholder.Site'),
              trigger: 'blur'
            },
            {
              validator: checkName,
              trigger: "blur"
            }
          ],
          type: [{
            required: true,
            message: this.$t('pholder.type'),
            trigger: 'change'
          }],
          status: [{
            required: true,
            message: this.$t('pholder.state'),
            trigger: 'change'
          }],
          heatMapDeviceType: [
            // { required: true, message: '请选择', trigger: 'change' },
            {
              validator: checkDeviceType,
              trigger: "blur"
            }
          ],
          // x: [
          // 	{ validator: checkX, trigger: 'change' }
          // ],
          // y: [
          // 	{ validator: checkY, trigger: 'change' }
          // ],
          mallId: [{
            required: true,
            message: this.$t('pholder.shopSelect'),
            trigger: 'change'
          }, ],
          isMallGate: [{
            required: true,
            message: '请选择是否为入口',
            trigger: 'change'
          }, ],
          isHasFace: [{
            required: true,
            message: '请选择是否为人脸',
            trigger: 'change'
          }, ]
        },
        curMallId: null,
        isShortcut:false
      }
    },
    components: {
      'floor-pos-dialog': floorPos
    },
    methods: {
      dialogInit(mall_id,isShortcut) {
        this.curMallId = mall_id;
        this.addDialogVisible = true;
        this.isShortcut = isShortcut
        this.getDic()
      },
      dialogOpenAdd(formDatas) {
        formDatas['accountId'] = this.$cookie.get('accountId');
        this.getMallList(formDatas.accountId);
      },
      getMallList(accountId) {
        this.addForm.mallId = '';
        this.addForm.floorId = '';
        this.floorList = [];
        this.mallList = [];
        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) => {})
      },
      changeAddMall(val) {
        this.getFloorList(val)
      },
      getFloorList(mallId) {
        this.addForm.floorId = '';
        this.floorList = [];
        this.$api.base.floor({
            mallId: mallId,
            status: 1,
            // _t: Date.parse(new Date()) / 1000
          })
          .then((data) => {
            var result = data.data;
            if (result.data.length > 0) {
              this.floorList = result.data;
              this.addForm.floorId = this.floorList[0].id;
            }
            this.floorList = result.data;
          })
          .catch((error) => {})
      },
      //获取新增楼层照片
      getFloorImg() {
        if (this.addForm.floorId) {
          this.XyActive = false;
        } else {
          this.XyActive = true;
        }
        this.$api.base.floor({
            id: this.addForm.floorId,
            // _t: Date.parse(new Date()) / 1000
          })
          .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 => {
            this.$throw(err)
          })
      },
      getXY() {
        this.$refs.posModel.dialogInit(this.floorImg);
      },
      getPosXY(XY) {
        this.addForm.x = XY.x;
        this.addForm.y = XY.y;
      },
      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');
            this.$api.management.addGate(this.addForm)
              .then((data) => {
                // 判断是否是快捷操作，即从门店管理直接新增监控点
                if(this.isShortcut){
                  this.bindGate(data.data.data)
                }else{
                  this.addDialogVisible = false;
                  this.$parent.getTableData();
                }
              })
              .catch((error) => {})
          } else {
            return false;
          }
        });
        // this.$refs.addUpload.submit();
      },
      // 默认绑定进出口正向
      bindGate(resData) {
        this.$api.management.addBindMallGate({
          mallId:resData.mallId,
          type: 1,
          isMallGate:1,
          gateId:resData.id,
          inOut:1,
          leftRight:0
        }).then(res => {
          let result = res.data;
          if (result.code == 200) {
            this.$emit('updateGateList')
            this.$message({
              type: "success",
              message: result.msg
            });
            this.addDialogVisible = false;
          }else{
            this.$message({
              type: "error",
              message: result.msg
            });
          }
        })
      },
      addDialogClose() {
        this.$refs.addForm.resetFields();
        this.XyActive = true;
      },
      getDic() {
        this.$api.base.dataDic({
          type: 'gateSourceType'
        }).then(res => {
          this.sourceData = res.data.data.map(item=>{
               if(this.isEn){
                  item.value = item.valueEn;
               }
               return item;
            });
        })
        this.$api.base.dataDic({
          type: 'gateType'
        }).then(res => {
          this.types = res.data.data.map(item=>{
               if(this.isEn){
                  item.value = item.valueEn;
               }
               return item;
            });
        })
      }
    },
    created() {

    }
  }
</script>

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