jg_app/src/components/SxPopup.vue

<template>
  <div>
    <div class="popup_box" :style="{ marginTop: p_top + 'px' }" v-if="showPopup" @click="onHide" @touchmove.prevent>
      <div class="detail_box">
        <div v-for="(item, index) in list" :key="index" class="other_type_box">
          <div class="other_type_title">{{ item.title }}</div>
          <span>
            <span v-for="(it, ind) in item.array" :key="ind">
              <van-tag plain class="tag_item" :type="it.isCheck ? 'primary' : 'default'" @click.stop="onClickTag(item, it)">{{ it.name }}
              </van-tag>
              <br v-if="['超时签收','巡逻中','手动确认到达现场(实际未到达)','超时到达现场','处置完成'].includes(it.name)" />
            </span>
          </span>
          <!-- showSolt 是否自定义插槽  SoltName:名字-->
           <template v-if="item.showSolt">
            <slot :name="item.SoltName"></slot>
          </template>
        </div>

        <slot>
          <div v-show="showTime" class="other_type_title" style="margin-left: 3vw">自定义时间</div>
          <div v-show="showTime" class="time_box">
            <van-field
                v-model="startTime"
                label-width="60px"
                placeholder="开始日期"
                input-align="left"
                right-icon="arrow-down"
                readonly
                @click.stop="onClickTime('start')"
            ></van-field>
            <div class="relevance">至</div>
            <van-field
                v-model="endTime"
                label-width="60px"
                input-align="left"
                right-icon="arrow-down"
                placeholder="结束日期"
                @click.stop="onClickTime('end')"
                readonly
            ></van-field>
          </div>
        </slot>
        <div class="but_box">
          <van-button round block type="primary" size="small" @click.stop="onConfirm" style="margin: 0 3vw 0 0vw">确定</van-button>
          <van-button round block type="warning" size="small" @click.stop="onReset" style="margin: 0 0 0 3vw">重置 </van-button>
        </div>
      </div>
    </div>
    <SelectTime :timeType="timeType" v-if="timeShow" @update:time="onSelectTime" @update:cancelTime="timeShow = false"/>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, defineEmits, watch } from "vue";
import { dateFormat } from "../utils/tools.js";
import SelectTime from "./SelectTime.vue";
import store from "../store/index.js";
import { hintToast } from "../utils/tools.js";
const props = defineProps({
  showPopup: Boolean, //是否显示
  list: Array, //其余赛选条件
  p_top: Number, //距离顶部的内填充距离
  kssj: String, //开始时间
  jssj: String, // 结束时间,
  showTime:{
    type:Boolean,
    default:true
  } ,//是否展示时间筛选
});
const tagIndex = ref(1); //如果是单选，选中的下标
const emits = defineEmits(["update:close", 'reset', "update:onConfirm"]);
const startTime = ref(props.kssj); //开始时间
const endTime = ref(props.jssj); //结束时间
const timeShow = ref(false); //是否显示时间选择器
const timeType = ref("start"); //选择时间的类型
const keyIndex = ref(1);
//点击选择时间
function onClickTime(val) {
  timeType.value = val;
  timeShow.value = true;
}
/**
 * 点击赛选项
 * @param {Object} item 父级选项
 * @param {Object} it 子集选项
 */
function onClickTag(item, it) {
  //多选
  if (item.isCheckBox) {
    item.array.forEach((_item) => {
      _item.isCheck = false
      if (_item.key == it.key) {
        _item.isCheck = !_item.isCheck;
      }
    });
  } else {
    //单选
    item.array.forEach((_item) => {
      _item.isCheck = false;
      if (_item.key == it.key) {
        _item.isCheck = !_item.isCheck;
        //如果是时间段选项
        if (item.title == "按时间") {
          setTimeSjd(it.name);
        }
      }
    });
  }
}
//如果选中的是时间段条件
function setTimeSjd(valName) {
  switch (valName) {
    case "今日":
      startTime.value = dateFormat();
      break;
    case "近三日":
      startTime.value = dateFormat("3");
      break;
    case "近一周":
      startTime.value = dateFormat("week");
      break;
    case "近一月":
      startTime.value = dateFormat("month");
      break;
    case "近三月":
      startTime.value = dateFormat("3month");
      break;
    case "近半年":
      startTime.value = dateFormat("6month");
      break;
  }
  endTime.value = dateFormat();
  keyIndex.value++;
}
//选中的时间
function onSelectTime(val) {
  props.list.forEach((item) => {
    if (item.title == "按时间") {
      item.array.forEach((_item) => {
        _item.isCheck = false;
      });
    }
  });
  if (timeType.value == "start") {
    startTime.value = val;
  } else {
    endTime.value = val;
  }

  if (new Date(startTime.value).getTime() > new Date(endTime.value).getTime()) {
    hintToast("起始时间错误！！");
    return;
  }

  timeShow.value = false;
}
//打开开始时间
function onSlectStartTime(val) {
  timeType.value = "start";
  timeShow.value = true;
}
//打开结束时间
function onSlectEndTime(val) {
  timeType.value = "end";
  timeShow.value = true;
}
//关闭
function onHide() {
  // props.list.forEach((item) => {
  //   item.array.forEach((_item) => {
  //     _item.isCheck = false;
  //   });
  // });
  // startTime.value = "";
  // endTime.value = "";
  emits("update:close", false);
}
//确认选中数据
function onConfirm() {
  const list = props?.list ? JSON.parse(JSON.stringify(props?.list)) : [];
  let array = [];
  //筛选出按时间的筛选条件
  for (let i = 0; i < list?.length; i++) {
    if (list[i].title != "按时间") {
      array.push(list[i]);
    }
  }
  store.commit("setStartTime", startTime.value);
  store.commit("setEndTime", endTime.value);
  emits("update:onConfirm", {
    list: array,
    startTime: startTime.value,
    endTime: endTime.value,
  });
  emits("update:close", false);
  //清空当前时间
  // startTime.value = "";
  // endTime.value = "";
}
//重置选项
function onReset() {
  props.list?.forEach((item) => {
    item.array?.forEach((_item) => {
      _item.isCheck = false;
    });
  });
  startTime.value = "";
  endTime.value = "";
  emits('reset')
}
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";

.popup_box {
  @include font_size($font_medium_s);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

.detail_box {
  background: #fff;
  padding: 4vw 0;
}

.other_type_box,
.time_box,
.but_box {
  padding: 0 3vw;
}

.but_box {
  display: flex;
  align-items: center;
  color: #fff;
}

.time_box {
  display: flex;
  margin-bottom: 4vw;

  .relevance {
    position: relative;
    bottom: 0;
    line-height: 33.5px;
    margin: 0 2.5vw;
  }
}

.other_type_box {
  margin-bottom: 2vw;

  .tag_item {
    padding: 1vw 3vw;
    margin: 0 3vw 3vw 0;
    border-radius: 5px;
  }
}

.other_type_title {
  margin-bottom: 2vw;
  @include font_size($font_medium);
}

::v-deep .van-cell {
  padding: 0;
}

::v-deep .van-field__body {
  border: 1px solid #507ce9;
  border-radius: 5px;
  padding: 1vw;
  //   margin: 0 2vw;
}

.isChecked {
  border: 1px solid #507ce9;
}
</style>