提交
This commit is contained in:
给我
284
src/components/SxPopup.vue
Normal file
284
src/components/SxPopup.vue
Normal file
@ -0,0 +1,284 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user