queueRecordsOption.vue

<template>
  <div class="behavior-more-option behavior-test-option">
    <div class="opt-left">
      <!-- 广场 -->
      <div class="test-opt-mall test-camera">
        <span class="labelName">{{$t('table.squareName')}}</span>
        <el-select v-model="mallVal" class="mall-opt" filterable :placeholder="$t('pholder.shopSelect')" @change="chooseMall">
          <el-option v-for="item in mallOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
        </el-select>
      </div>
      <!-- 区域 -->
      <div class="test-opt-mall test-camera">
        <span class="labelName">{{$t('table.areaName')}}</span>
        <el-select v-model="areaVal" class="mall-opt" filterable :placeholder="$t('pholder.areaSelect')" @change="chooseArea">
          <el-option v-for="item in areaOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
        </el-select>
      </div>
      <!-- 通道 -->
      <div class="test-opt-mall test-camera">
        <span class="labelName">{{$t('table.channelName')}}</span>
        <el-select v-model="cashierChannelId" class="mall-opt" filterable :placeholder="$t('pholder.selectLane')" @change="chooseChannel">
          <el-option value="" :label="$t('pholder.all')"></el-option>
          <el-option v-for="item in channelOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
        </el-select>
      </div>
      <!-- 人员类型 -->
      <div class="test-opt-mall">
        <span class="labelName">{{$t('table.personTypeName')}}</span>
        <el-select class="manage-sel" v-model="personType" :placeholder="$t('asisTab.all') + $t('asisTab.manType')" @change="chooseType">
          <el-option
            v-for="item in allTypeList"
            :key="item.id"
            :label="item.name === 'all' ? $t('pholder.allType') : item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>

      <div class="test-opt-time mr20">
        <span class="labelName">trackType</span>
        <el-select v-model="trackType" class="mall-opt" filterable :placeholder="$t('pholder.select')" @change="chooseTrackType">
          <el-option value="" :label="$t('pholder.all')"></el-option>
          <el-option v-for="item in trackTypeOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
        </el-select>
      </div>
      <!-- 日期时间 -->
      <div class="test-opt-time mr20 timeHr">
        <span class="labelName">{{$t('table.date')}}</span>
        <el-date-picker
              v-model="countDate"
              type="datetimerange"
              :range-separator="$t('dialog.to')"
              :start-placeholder="$t('table.startTime')"
              :end-placeholder="$t('table.endTime')"
              :default-time="['08:00:00', '23:00:00']">
            </el-date-picker>
      </div>
      <!-- trackTime -->
      <div class="test-opt-time mr20 timeHr">
        <span class="labelName">trackTime(s)</span>
        <el-input-number v-model="trackTimeStart" :precision='0' :min=0 :controls='false'></el-input-number>
         — <el-input-number :controls='false' v-model="trackTimeEnd" :min=0 :precision='0'></el-input-number>
      </div>
      <!-- serviceTime -->
      <div class="test-opt-time mr20 timeHr">
        <span class="labelName">serviceTime(s)</span>
        <el-input-number v-model="serviceTimeStart" :precision='0' :min=0 :controls='false'></el-input-number>
         — <el-input-number :controls='false' v-model="serviceTimeEnd" :min=0 :precision='0'></el-input-number>
      </div>
      <!-- queueTime -->
      <div class="test-opt-time mr20 timeHr">
        <span class="labelName">queueTime(s)</span>
        <el-input-number v-model="queueTimeStart" :precision='0' :min=0 :controls='false'></el-input-number>
         — <el-input-number :controls='false' v-model="queueTimeEnd" :min=0 :precision='0'></el-input-number>
      </div>
      <div class="test-opt-time timeHr">
        <el-button type="primary" class="primary-btn behavior-collapse-btn" size="small"
          @click="clickHandle">{{$t('button.confirm')}}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as Cookies from 'js-cookie'
import moment  from 'moment'
export default {
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      mallName: '',
      mallVal: '',
      mallOpt: [],
      areaVal:'',
      areaOpt:[],
      cashierChannelId:'',
      channelOpt:[],
      personType: null,
      countDate:['',''],
      trackTimeStart:0,
      trackTimeEnd:100,
      serviceTimeStart:0,
      serviceTimeEnd:100,
      queueTimeStart:0,
      queueTimeEnd:100,
      Params: {},
      pageLimit: 45,
      typeList: [],
      accountId: this.$cookie.get('accountId'),
      trackType:'',
      trackTypeOpt:[
        {
          name:'complete',
          id:0,
        },
        {
          name:'abandonQueue',
          id:1,
        },
        {
          name:'disappearInMid',
          id:2,
        },
        {
          name:'appearInMid',
          id:3,
        }
      ]
    }
  },
  computed: {
    allTypeList() {
      let list = this.typeList.map(item => {
        return item;
      });
      list.unshift({
        name: "all",
        id: null
      });
      return list;
    },
  },
  async mounted() {
    const storage = window.sessionStorage.valueOf()
    this.typeList = []
    let { dayDate } = this.createDate();
    this.countDate = [moment().format('YYYY-MM-DD')+' 08:00:00',moment().format('YYYY-MM-DD')+' 23:00:00']
    this.getMallList()
  },
  methods: {
    // 获取人员类型
    fetchPersonType() {
      if (!this.mallVal) return false
      this.personType = null
      this.typeList = []
      this.$api.management.personTypeList({
        accountId: this.$cookie.get('accountId'),
        mallId: this.mallVal,
        // 是否有顾客店员基础类型
        hasBaseType: 1,
      }).then(res => {
        const { code, data } = res.data
        if (code === 200) {
          this.typeList = data.reduce((arr, curr) => {
            arr.push(curr)
            return arr
          }, [])
        }
      })
    },
    // 获取门店列表
    getMallList() {
        this.mallOpt = [];
        this.mallVal = '';
        this.mallName = '';
        this.getCommonMalls().then(resolveData => {
          let { mallData, localMallId, titleName, multiMallId } = resolveData;
          this.mallOpt = mallData;
          this.mallVal = localMallId;
          this.mallName = titleName + ' ';
          this.getAreaList()
          this.fetchPersonType()
        })
    },
    // 选择门店
    async chooseMall() {
      this.mallName = this.behaviorMallChange(this.mallVal, this.mallOpt)
      this.getAreaList()
      this.personType = null
      this.fetchPersonType()
    },
    getAreaList(val) {
      this.areaListData = [];
      this.$api.queueManagementApi.getAreaList({
          mallId: this.mallVal,
          pageNum: 1,
          pageSize: 999999,
        }).then((res) => {
          let result = res.data;
          if (result.code == 200) {
            if (result.data.list && result.data.list.length > 0) {
              // this.floorImg = window._vionConfig.picUrl + result.data.list[0].pic;
              this.areaOpt = result.data.list;
              this.areaVal = result.data.list[0].id
              this.getChannelList()
            }
          }
        });
    },
    chooseArea(){
      this.getChannelList()
    },
    getChannelList(){
      this.$api.queueManagementApi
        .getChannelList({
          areaId: this.areaVal,
          pageNum: 1,
          pageSize: 9999999,
        })
        .then((res) => {
          let result = res.data;
          this.loading = false;
          if (result.code == 200) {
            this.channelOpt = result.data.list;
            this.clickHandle()
          }
        });
    },
    chooseChannel() {
      this.clickHandle()
    },
    chooseType() {
      this.clickHandle()
    },
    chooseTrackType(){
      this.$forceUpdate()
      this.clickHandle()
    },
    chooseTime() {
      this.clickHandle()
    },
    clickHandle() {
      this.$emit('startLoading', 'camera');
      // if((this.trackTimeStart>this.trackTimeStart) || (this.serviceTimeStart>this.serviceTimeEnd) || (this.queueTimeStart>this.queueTimeEnd)){
      //   return
      // }
      let _params = {
        pageNum: 1,
        pageSize: this.pageLimit,
        cashierChannelId:this.cashierChannelId,
        personType: typeof this.personType === 'number' ? this.personType : null,
        countDateStart:moment(this.countDate[0]).format("YYYY-MM-DD HH:mm:ss"),
        countDateEnd:moment(this.countDate[1]).format("YYYY-MM-DD HH:mm:ss"),
        trackTimeStart:this.trackTimeStart,
        trackTimeEnd:this.trackTimeEnd,
        serviceTimeStart:this.serviceTimeStart,
        serviceTimeEnd:this.serviceTimeEnd,
        queueTimeStart:this.queueTimeStart,
        queueTimeEnd:this.queueTimeEnd,
        trackType:this.trackType
      }
      Object.keys(_params).forEach(item=>{
        if (_params[item] === '' || _params[item] === undefined || _params[item] === null || _params[item] === 'null')
        delete _params[item]
      })
      this.$emit('emitParams', _params);
    },
  }
}
</script>

<style scoped lang="less">
.test-opt-mall {
  width: auto !important;
}
.labelName{
  display: inline-block;
  margin-right: 10px;
}
/deep/.el-select{
  width: 180px !important;
}
/deep/.el-date-editor .el-range-separator{
  line-height: 22px !important;
}
/deep/.el-date-editor--datetimerange.el-input__inner{
  width: 380px !important;
}
/deep/.el-input-number{
  width: 85px;
  line-height: 30px;
  .el-input__inner{
    height: 30px !important
  }
}
.test-opt-time .date-time {
  width: 150px !important;
}
.timeHr{
  margin-top: 15px;
}
@media only screen and (max-width: 1680px) {
  .test-opt-time .time-opt {
    width: 264px;
  }
}

@media only screen and (max-width: 1440px) {
  .test-opt-time .time-opt {
    width: 264px;
  }
}

@media only screen and (max-width: 1366px) {
  .test-opt-time .time-opt {
    width: 264px;
  }
}

@media only screen and (max-width: 1280px) {
  .test-opt-time .time-opt {
    width: 264px;
  }
}
</style>