238 lines
7.1 KiB
Vue
238 lines
7.1 KiB
Vue
<!-- 取件页面 -->
|
||
<template>
|
||
<!-- 搜索nav -->
|
||
<SearchPage
|
||
@handleSearch="handleSearch"
|
||
ref="search"
|
||
@clearSearchData="clearSearchData"
|
||
></SearchPage>
|
||
<!-- end -->
|
||
<view>
|
||
<!-- tab切换 -->
|
||
<UniTab
|
||
:tabBars="tabBars"
|
||
ref="tab"
|
||
@getTabIndex="getTabIndex"
|
||
class="pickupTab"
|
||
></UniTab>
|
||
<!-- end -->
|
||
<!-- 距离\时间\超时筛选 -->
|
||
<ListFiltrate
|
||
v-if="tabIndex === 0"
|
||
@getList="getList"
|
||
class="pickupFilrate"
|
||
></ListFiltrate>
|
||
<!-- end -->
|
||
<!-- 取件状态列表 -->
|
||
<view
|
||
:class="tabIndex === 0 ? 'pickupBoxTop' : 'pickupTop'"
|
||
style="padding: 0 0 200rpx 0"
|
||
>
|
||
<TabList
|
||
:tabBars="tabBars"
|
||
:tabIndex="tabIndex"
|
||
:isAdmin="isAdmin"
|
||
@onChangeSwiperTab="onChangeSwiperTab"
|
||
@checkbox="checkbox"
|
||
:isInput="isInput"
|
||
ref="list"
|
||
></TabList>
|
||
</view>
|
||
|
||
<!-- end -->
|
||
</view>
|
||
<ExpressageFoot
|
||
ref="expressageFoot"
|
||
@getAdmin="getAdmin"
|
||
:isAdmin="isAdmin"
|
||
:selected="selected"
|
||
:tabIndex="tabIndex"
|
||
@allSelect="allSelect"
|
||
@handleClick="handleClick"
|
||
></ExpressageFoot>
|
||
<!-- footer -->
|
||
<UniFooter :pagePath="'pages/delivery/index'"></UniFooter>
|
||
<!-- end -->
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from "vue";
|
||
import { useStore } from "vuex";
|
||
|
||
// 基本数据
|
||
import { DeliveryData } from "@/utils/commonData.js";
|
||
// 接口api
|
||
import { taskBatchDelete } from "@/pages/api/index.js";
|
||
// 导入组件
|
||
// 导航
|
||
import UniNav from "@/components/uni-nav/index.vue";
|
||
// 搜索组件
|
||
import SearchPage from "@/components/uni-search/index.vue";
|
||
// 底部导航
|
||
import UniFooter from "@/components/uni-footer/index.vue";
|
||
// tab切换
|
||
import UniTab from "@/components/uni-tab/index.vue";
|
||
// 筛选
|
||
import ListFiltrate from "@/components/uni-list-filtrate/index.vue";
|
||
// 底部管理全选组件
|
||
import ExpressageFoot from "@/components/uni-expressage-foot/index.vue";
|
||
// list
|
||
import TabList from "./components/list.vue";
|
||
// ------定义变量------
|
||
const store = useStore();
|
||
const users = store.state.user;
|
||
const emit = defineEmits(""); //子组件向父组件事件传递
|
||
const tab = ref();
|
||
const list = ref(); //定义列表 ref
|
||
const search = ref(); //定义搜索 ref
|
||
const tabBars = DeliveryData;
|
||
let tabIndex = ref(0); //当前tab
|
||
let isInput = ref(false); //是否触发了输入框
|
||
let isAdmin = ref(false); //是否触发管理按钮
|
||
// 存储已选内容， 因为这个列表是增删很频繁的，所以选用map而不是数组，key对应的是数据的下标。至于value存放什么，完全由自己定
|
||
let selected = reactive(new Map());
|
||
// ------生命周期------
|
||
onMounted(() => {
|
||
if (users.tabIndex) {
|
||
tabIndex.value = users.tabIndex;
|
||
}
|
||
if (users.tabIndex === 0) {
|
||
list.value.dealPList();
|
||
} else if (users.tabIndex === 1) {
|
||
list.value.alreadList();
|
||
} else {
|
||
list.value.cancelList();
|
||
}
|
||
});
|
||
|
||
// ------定义方法------
|
||
// 搜索
|
||
const handleSearch = () => {
|
||
list.value.searchInfo.taskType = 1;
|
||
list.value.searchInfo.keyword = search.value.searchVal;
|
||
store.commit("user/setIsInput", false); //是否在文本框里输入了文字，默认false
|
||
store.commit("user/setDeliveryData", []);
|
||
if (tabIndex.value === 0) {
|
||
list.value.searchInfo.status = 1;
|
||
list.value.dealSearchList();
|
||
} else if (tabIndex.value === 1) {
|
||
list.value.searchInfo.status = 2;
|
||
list.value.alreadSearchList();
|
||
} else {
|
||
list.value.searchInfo.status = 3;
|
||
list.value.cancelSearchList();
|
||
}
|
||
};
|
||
// 批量删除
|
||
const handleClick = async () => {
|
||
const ids = [];
|
||
// 要批量删除的id
|
||
for (const [key, value] of selected) {
|
||
ids.push(value);
|
||
}
|
||
await taskBatchDelete({ idList: ids }).then((res) => {
|
||
if (res.code === 200) {
|
||
list.value.cancelList();
|
||
return uni.showToast({
|
||
title: "删除成功!",
|
||
duration: 1000,
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
};
|
||
// 清除搜索
|
||
const clearSearchData = () => {
|
||
store.commit("user/setIsInput", true);
|
||
store.commit("user/setDeliveryData", []); //清空列表数据
|
||
store.commit("user/setSearchText", ""); //清空搜索框内容
|
||
store.commit("user/setSearchClear", true); //是否清空搜索框
|
||
list.value.searchInfo.keyword = ""; //清空搜索框内容
|
||
// 总页数清空
|
||
store.commit("user/setPages", 0);
|
||
if (tabIndex.value === 0) {
|
||
list.value.dealPList();
|
||
} else if (tabIndex.value === 1) {
|
||
list.value.alreadList();
|
||
} else {
|
||
list.value.cancelList();
|
||
}
|
||
};
|
||
// 获取tab切换当前的index
|
||
const getTabIndex = (index) => {
|
||
store.commit("user/setFilterOverTime", null);
|
||
search.value.searchVal = "";
|
||
store.commit("user/setSearchText", ""); //清空搜索框内容
|
||
store.commit("user/setSearchClear", true); //是否清空搜索框
|
||
tabIndex.value = index;
|
||
// 根据不同的tab值切更新 取件数据
|
||
if (index === 0) {
|
||
list.value.dealPList();
|
||
} else if (index === 1) {
|
||
list.value.alreadList();
|
||
} else {
|
||
list.value.cancelList();
|
||
}
|
||
selected.clear();
|
||
// 修改底部管理按钮状态，因为取件、派件公用了一个底部管理组件，因此切换tab的时候先把isAdmin设置成false，以防数据混搅。
|
||
isAdmin.value = false;
|
||
// 存储列表数据
|
||
store.commit("user/setDeliveryData", []);
|
||
// 总页数清空
|
||
store.commit("user/setPages", 0);
|
||
store.commit("user/setSelectTaskData", new Map());
|
||
};
|
||
// 触发选项卡事件
|
||
const onChangeSwiperTab = (e) => {
|
||
tab.value.changeTab(e.detail.current);
|
||
};
|
||
// 获取foot底部组件的管理按钮触发值，向列表页传递，用来控制全选，单选功能
|
||
const getAdmin = (val) => {
|
||
isAdmin.value = val;
|
||
};
|
||
// 给筛选组件传递，刷新列表
|
||
const getList = () => {
|
||
list.value.dealPList();
|
||
};
|
||
// 全选与反选事件
|
||
const allSelect = () => {
|
||
// 已经全选情况下，就是反选，全选就说明长度一样
|
||
let itemData = users.deliveryData;
|
||
if (selected.size === itemData.length) {
|
||
selected.clear(); // 全部清除
|
||
itemData.forEach((element) => {
|
||
element.selected = false; // 全部不选，就行了
|
||
});
|
||
}
|
||
// 还未全选的状态下
|
||
else {
|
||
itemData.forEach((element, index) => {
|
||
// 因为可能存在部分已经选择了，所以得先判断是否已存在，不存在才需要添加
|
||
if (!selected.has(index)) {
|
||
selected.set(index, element.id); // key是对应的下标index，而value是可以自定义的
|
||
element.selected = true; // 设为选中
|
||
}
|
||
});
|
||
}
|
||
emit("getSelected", selected);
|
||
store.commit("user/setSelectTaskData", selected);
|
||
};
|
||
// 选项框点击事件，参数是数据的下标
|
||
const checkbox = (index) => {
|
||
// 选中的状态下再次点击，即为取消选中
|
||
let itemData = users.deliveryData;
|
||
if (itemData[index].selected) {
|
||
itemData[index].selected = false;
|
||
selected.delete(index); // 然后删除对应key即可
|
||
}
|
||
// 未选中状态下点击
|
||
else {
|
||
itemData[index].selected = true;
|
||
selected.set(index, itemData[index].id);
|
||
}
|
||
store.commit("user/setSelectTaskData", selected);
|
||
};
|
||
</script>
|
||
<style src="../../styles/expressage.scss" lang="scss" scoped></style>
|
||
<style src="./index.scss" lang="scss" scoped></style>
|