651 lines
14 KiB
Vue
651 lines
14 KiB
Vue
<template>
|
||
<z-paging
|
||
ref="paging"
|
||
v-model="listdata"
|
||
@query="loadMoreData"
|
||
:default-page-no="1"
|
||
:default-page-size="10"
|
||
:auto-show-back-to-top="true"
|
||
:paging-style="{
|
||
'background-color': '#f3f4f6',
|
||
}"
|
||
>
|
||
<!-- 顶部 -->
|
||
<template #top>
|
||
<view class="flex" style="background-color: white">
|
||
<view class="search">
|
||
<uni-search-bar
|
||
radius="5"
|
||
placeholder="输入车辆编号查询"
|
||
v-model="bikeCodeValue"
|
||
@blur="searchInfo"
|
||
@confirm="searchInfo"
|
||
@clear="searchInfo"
|
||
/>
|
||
</view>
|
||
<view class="searchmore" @click="showDrawer('showRight')">
|
||
<image :src="`${imgPath}static/image/更多.png`" alt="" />
|
||
</view>
|
||
</view>
|
||
<z-tabs ref="tabs" :list="tabList" @change="tabChange" />
|
||
</template>
|
||
|
||
<view class="container">
|
||
<checkbox-group @change="checkboxGroupChange">
|
||
<view v-for="(item, index) in listdata" :key="index" class="list-item">
|
||
<view class="flex list-title" @click="opendetail(item.bikeId)">
|
||
<checkbox
|
||
:value="item.bikeCode"
|
||
@click.stop
|
||
:checked="item.checked"
|
||
></checkbox>
|
||
<view
|
||
v-if="item.state == 1 && item.stateName == '待投放'"
|
||
class="title-xz"
|
||
>
|
||
</view>
|
||
<view class="title-wz">
|
||
{{ item.bikeCode }}
|
||
</view>
|
||
<view v-if="item.state == 1" class="title-zt">
|
||
<view v-if="item.stateName == '投放中'" class="cu-tag bg-blue sm">
|
||
{{ item.stateName }}
|
||
</view>
|
||
<view v-else class="cu-tag bg-orange sm">
|
||
{{ item.stateName }}
|
||
</view>
|
||
</view>
|
||
<view v-else class="title-zt">
|
||
<view class="cu-tag bg-green sm">{{ item.stateName }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex row">
|
||
<view class="list-name"> 车辆编号 </view>
|
||
<view class="list-value">
|
||
{{ item.bikeCode }}
|
||
</view>
|
||
</view>
|
||
<view class="flex row">
|
||
<view class="list-name"> 车辆型号 </view>
|
||
<view class="list-value">
|
||
{{ item.bikeModel }}
|
||
</view>
|
||
</view>
|
||
<view class="flex row">
|
||
<view class="list-name"> 入库时间 </view>
|
||
<view class="list-value">
|
||
{{ item.enterTime }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</checkbox-group>
|
||
<view style="width: 100%; height: 100rpx"></view>
|
||
</view>
|
||
|
||
<!-- 底部 -->
|
||
<template #bottom>
|
||
<view class="nav-panel">
|
||
<button
|
||
v-if="statevalue === '1'"
|
||
class="fancy-btn"
|
||
@click="
|
||
handleBtn({
|
||
tip: '请选择需要批量投放的车辆',
|
||
status: 2,
|
||
})
|
||
"
|
||
>
|
||
批量投放
|
||
</button>
|
||
<button
|
||
v-if="statevalue === '2'"
|
||
class="fancy-btn"
|
||
@click="
|
||
handleBtn({
|
||
tip: '请选择需要批量下架的车辆',
|
||
status: 0,
|
||
})
|
||
"
|
||
>
|
||
批量下架
|
||
</button>
|
||
</view>
|
||
</template>
|
||
</z-paging>
|
||
<!-- 筛选 -->
|
||
<uni-drawer ref="showRight" mode="right" :mask-click="false" :width="320">
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
leftText="返回"
|
||
title="筛选"
|
||
@clickLeft="closeDrawer('showRight')"
|
||
/>
|
||
<uni-section title="入库时间" type="line">
|
||
<view style="width: 100%; padding: 0 20px">
|
||
<uni-datetime-picker type="date" v-model="enterTime" />
|
||
</view>
|
||
</uni-section>
|
||
</uni-drawer>
|
||
<!-- 普通弹窗 -->
|
||
<uni-popup ref="popup" background-color="#fff" @change="changepopup">
|
||
<view
|
||
class="popup-content"
|
||
:class="{
|
||
'popup-height': typepopup === 'left' || typepopup === 'right',
|
||
}"
|
||
>
|
||
<view class="padding plcrk">
|
||
<uni-forms
|
||
ref="customForm"
|
||
:rules="customRules"
|
||
:modelValue="customFormData"
|
||
>
|
||
<uni-section v-if="statusZT == 2" title="站点" type="line">
|
||
<uni-forms-item required name="reginvalue">
|
||
<uni-data-select
|
||
v-model="customFormData.reginvalue"
|
||
:localdata="regindata"
|
||
@change="changeZT"
|
||
></uni-data-select>
|
||
</uni-forms-item>
|
||
</uni-section>
|
||
<uni-section title="请添加设备" type="line">
|
||
<uni-forms-item required name="deviceValues">
|
||
<uni-easyinput
|
||
type="textarea"
|
||
v-model="customFormData.deviceValues"
|
||
placeholder="请输入车辆编号，用逗号(，)隔开，一次最多添加1000个"
|
||
/>
|
||
</uni-forms-item>
|
||
</uni-section>
|
||
</uni-forms>
|
||
<button
|
||
style="width: 100%"
|
||
@click="submit"
|
||
:disabled="isSubmit"
|
||
:loading="isSubmit"
|
||
size="mini"
|
||
>
|
||
提交
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import * as api from "@/utils/api.js";
|
||
import config from "@/utils/config";
|
||
import { stringToArray } from "@/utils/tools";
|
||
import { onShow, onUnload } from "@dcloudio/uni-app";
|
||
|
||
const paging = ref(null);
|
||
const tabs = ref(null);
|
||
const imgPath = config.imgPath;
|
||
const tabList = ref([
|
||
{ name: "待投放", value: "1" },
|
||
{ name: "投放中", value: "2" },
|
||
]);
|
||
const listdata = ref([]);
|
||
|
||
// 查询条件定义
|
||
const bikeCodeValue = ref(""); //车辆编号
|
||
const statevalue = ref("1"); //状态
|
||
const enterTime = ref(""); //入库时间
|
||
|
||
// 创建 drawer 的 ref 引用
|
||
const showRight = ref(null);
|
||
|
||
// 多选框选中值
|
||
const checkboxValue = ref([]);
|
||
|
||
// 处理 popup
|
||
const popup = ref(null);
|
||
const typepopup = ref("center");
|
||
|
||
//提交表单相关信息
|
||
const customForm = ref(null);
|
||
const customFormData = ref({
|
||
reginvalue: "",
|
||
deviceValues: "",
|
||
});
|
||
|
||
// 校验规则
|
||
const customRules = ref({
|
||
reginvalue: {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
errorMessage: "站点信息不能为空",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
deviceValues: {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
errorMessage: "车辆编号不能为空！",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
});
|
||
const statusZT = ref(1);
|
||
|
||
//运营区域下拉值 和列表
|
||
const regindata = ref([]);
|
||
|
||
// 提交按钮状态
|
||
const isSubmit = ref(false);
|
||
|
||
// 数据加载
|
||
function loadMoreData(pageNo, pageSize) {
|
||
uni.showLoading({
|
||
title: "加载中...",
|
||
mask: true,
|
||
});
|
||
|
||
const params = {
|
||
bikeCode: bikeCodeValue.value, //车辆编号
|
||
enterTime: enterTime.value, //入库时间 例：2025-03-21
|
||
state: statevalue.value,
|
||
pageParam: {
|
||
pageNum: pageNo,
|
||
pageSize: pageSize,
|
||
},
|
||
};
|
||
|
||
api
|
||
.callEbikeInfo("getOperationalBikeList", params)
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
let records = res.data.records;
|
||
records = records.map((item) => {
|
||
item.checked = checkboxValue.value.includes(item.bikeCode);
|
||
return item;
|
||
});
|
||
paging.value.complete(records);
|
||
} else {
|
||
paging.value.complete(false);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.hideLoading();
|
||
console.error("加载数据失败:", err);
|
||
paging.value.complete(false);
|
||
});
|
||
}
|
||
|
||
//搜索
|
||
const searchInfo = () => {
|
||
paging.value.reload();
|
||
};
|
||
|
||
// tab切换
|
||
const tabChange = (index) => {
|
||
statevalue.value = tabList.value[index].value;
|
||
checkboxValue.value = [];
|
||
listdata.value = []; // 清空数据
|
||
paging.value.refresh();
|
||
};
|
||
|
||
const checkboxGroupChange = (e) => {
|
||
const { value } = e.detail;
|
||
checkboxValue.value = value;
|
||
};
|
||
|
||
// 打开窗口
|
||
const showDrawer = (e) => {
|
||
const drawer = showRight.value;
|
||
drawer.open();
|
||
};
|
||
|
||
// 关闭窗口
|
||
const closeDrawer = (e) => {
|
||
const drawer = showRight.value;
|
||
drawer.close();
|
||
searchInfo();
|
||
};
|
||
|
||
// 打开详情
|
||
const opendetail = (id) => {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/warehouse/ebikehouse/vehicleoperation_view?ebikeId_zcck=${id}`, //
|
||
});
|
||
}, 200); // 延迟100毫秒后执行
|
||
};
|
||
|
||
// 处理弹窗关闭事件
|
||
const changepopup = (e) => {
|
||
const { show } = e;
|
||
if (!show) {
|
||
customFormData.value = {
|
||
reginvalue: "",
|
||
deviceValues: "",
|
||
};
|
||
}
|
||
};
|
||
|
||
// 处理按钮点击事件
|
||
const handleBtn = ({ tip, status }) => {
|
||
if (checkboxValue.value.length === 0) {
|
||
uni.showToast({
|
||
title: tip,
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
customFormData.value.deviceValues = checkboxValue.value.join(",");
|
||
statusZT.value = status;
|
||
popup.value.open("center");
|
||
};
|
||
|
||
const changeZT = (e) => {
|
||
console.log("e:", e);
|
||
};
|
||
|
||
// 处理下架逻辑
|
||
const handleLeaveWarehouse = () => {
|
||
isSubmit.value = true; // 设置提交状态为加载中
|
||
const params = {
|
||
bikeCode: stringToArray(customFormData.value.deviceValues, ""), // 车辆编号
|
||
status: statusZT.value,
|
||
reginId: "",
|
||
};
|
||
|
||
console.log(params);
|
||
|
||
api.callEbikeInfo("vehicleLeaveWarehouse", params).then((res) => {
|
||
isSubmit.value = false;
|
||
if (res.code == 200) {
|
||
popup.value.close("center");
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success",
|
||
duration: 2000,
|
||
});
|
||
searchInfo();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message || "操作失败",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
// 处理投放逻辑
|
||
const handleLaunch = () => {
|
||
// 在这里编写投放的具体逻辑
|
||
console.log("投放逻辑执行");
|
||
isSubmit.value = true;
|
||
const params = {
|
||
bikeCodes: stringToArray(customFormData.value.deviceValues, ""), // 车辆编号
|
||
status: statusZT.value,
|
||
siteId: customFormData.value.reginvalue,
|
||
dispatchType: "仓库车调度",
|
||
};
|
||
console.log(params);
|
||
|
||
// 例如，调用API处理投放
|
||
api.callEbikeInfo("createWorkOrderDispatch", params).then((res) => {
|
||
isSubmit.value = false;
|
||
if (res.code == 200) {
|
||
popup.value.close("center");
|
||
// 显示成功提示
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success",
|
||
duration: 1000,
|
||
});
|
||
// 延时跳转，确保提示完毕后再跳转
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/warehouse/vehicledispatch/vehicledispatch?orderId=${res.data}`,
|
||
});
|
||
}, 1000); // 跳转延迟与提示时长一致
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message || "操作失败",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
// 提交表单
|
||
const submit = () => {
|
||
customForm.value
|
||
.validate()
|
||
.then((res) => {
|
||
if (statusZT.value == 0) {
|
||
// 下架
|
||
handleLeaveWarehouse();
|
||
} else {
|
||
// 投放
|
||
handleLaunch();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log("err", err);
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
let userDefultOperation = uni.getStorageSync("userDefultOperation");
|
||
//获取站点信息
|
||
api
|
||
.callOperateApi(
|
||
"ebikeRegion/getRegion?regionId=" + userDefultOperation.operationRegionId,
|
||
{},
|
||
"get"
|
||
)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
res.data.forEach((res) => {
|
||
let quyuemap = {
|
||
text: res.siteName,
|
||
value: res.siteRegionId,
|
||
};
|
||
regindata.value.push(quyuemap);
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
onShow(() => {
|
||
uni.$on("refreshData", (data) => {
|
||
const { isRefresh } = data;
|
||
if (isRefresh) {
|
||
paging.value.refresh();
|
||
}
|
||
});
|
||
});
|
||
|
||
onUnload(() => {
|
||
uni.$off("refreshData");
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
padding: 10px 0px 0px 0px;
|
||
}
|
||
|
||
.list-title {
|
||
margin: 5px 0px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.list-title .title-xz {
|
||
margin: 5px;
|
||
}
|
||
|
||
.list-title .title-wz {
|
||
margin-left: 5px;
|
||
font-size: 14px;
|
||
line-height: 35px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.list-title .title-zt {
|
||
margin-left: 8px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.list-item {
|
||
background: #fff;
|
||
padding: 10px;
|
||
margin: 13px 10px;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
button {
|
||
margin-top: 20px;
|
||
padding: 15rpx;
|
||
background-color: #007aff;
|
||
color: white;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.list-name {
|
||
color: #999999;
|
||
font-size: 14px;
|
||
width: 30%;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.list-value {
|
||
width: 70%;
|
||
color: #4f4f53;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.row {
|
||
margin: 8px 5px;
|
||
}
|
||
|
||
.scroll-view {
|
||
height: 100%;
|
||
}
|
||
|
||
.example-body {
|
||
padding: 10px;
|
||
}
|
||
|
||
.scroll-view {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
height: 100%;
|
||
/* #endif */
|
||
flex: 1;
|
||
}
|
||
|
||
.scroll-view-box {
|
||
flex: 1;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.info {
|
||
padding: 15px;
|
||
color: #666;
|
||
}
|
||
|
||
.info-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.info-content {
|
||
padding: 5px 15px;
|
||
}
|
||
|
||
.close {
|
||
padding: 10px;
|
||
}
|
||
|
||
.search {
|
||
width: 90%;
|
||
}
|
||
|
||
.searchmore {
|
||
width: 10%;
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.searchmore image {
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
.searchlist {
|
||
padding: 15px;
|
||
}
|
||
|
||
.nav-panel {
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
width: 100%;
|
||
padding-bottom: 20px;
|
||
z-index: 999;
|
||
background-color: #fff;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.plcrk {
|
||
width: 80vw;
|
||
height: 360px;
|
||
}
|
||
|
||
.fancy-btn {
|
||
background-color: #0078d4; /* 主色 */
|
||
color: #fff; /* 白色文字 */
|
||
border: none;
|
||
padding: 5px 24px; /* 舒服的内边距 */
|
||
font-weight: 600;
|
||
border-radius: 10px; /* 圆角 */
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.25s ease; /* 平滑过渡 */
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
/* active 点击时 */
|
||
.fancy-btn:active {
|
||
background-color: #0078d4bd;
|
||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
radio::before,
|
||
checkbox::before {
|
||
font-family: "cuIcon";
|
||
content: "\e645";
|
||
position: absolute;
|
||
color: #ffffff !important;
|
||
top: 41%;
|
||
margin-top: -8px;
|
||
right: 5px;
|
||
font-size: 32rpx;
|
||
line-height: 16px;
|
||
pointer-events: none;
|
||
transform: scale(1, 1);
|
||
transition: all 0.3s ease-in-out 0s;
|
||
z-index: 9;
|
||
}
|
||
</style>
|