463 lines
10 KiB
Vue
463 lines
10 KiB
Vue
<template>
|
||
<z-paging ref="paging" v-model="listdata" @query="loadMoreData" :default-page-no="1" :default-page-size="4"
|
||
:auto-show-back-to-top="true">
|
||
<template #top>
|
||
<view class="flex">
|
||
<view class="search">
|
||
<uni-search-bar radius="5" placeholder="输入车辆编号查询" v-model="bikeCodeValue" @blur="searchInfo"
|
||
@confirm="search" />
|
||
</view>
|
||
<view class="searchmore" @click="showDrawer('showRight')">
|
||
<image :src="`${imgPath}static/image/更多.png`" alt="" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="container">
|
||
<!-- <scroll-view ref="scroView" class="scroll-view" :scroll-y="true" @scrolltolower="loadMoreData"
|
||
:scroll-top="scroTop" @scroll="handleScroll">
|
||
<uni-load-more v-if="isupshow" iconType="circle" status="loading" /> -->
|
||
<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)">
|
||
<view v-if="item.state==4" class="title-xz">
|
||
<!-- <checkbox disabled="true" :value="item.bikeId" @click.stop></checkbox> -->
|
||
</view>
|
||
<view v-else class="title-xz">
|
||
<checkbox :value="item.bikeCode" @click.stop></checkbox>
|
||
</view>
|
||
<view class="title-wz">
|
||
{{item.bikeCode}}
|
||
</view>
|
||
<view v-if="item.state==0" class="title-zt">
|
||
<view class="cu-tag bg-orange sm ">待出库</view>
|
||
</view>
|
||
<view v-else-if="item.state==4" class="title-zt">
|
||
<view class="cu-tag bg-yellow sm ">待维修</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>
|
||
<!-- <uni-load-more :status="status" />
|
||
</scroll-view> -->
|
||
<!-- 回到顶部按钮 -->
|
||
<!-- <text class="cuIcon-top lg text-gray back-to-top" @click="scrollToTop"></text> -->
|
||
</view>
|
||
<template #bottom>
|
||
<view class="nav-panel">
|
||
<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
|
||
</view>
|
||
</template>
|
||
</z-paging>
|
||
|
||
<uni-drawer ref="showRight" mode="right" :mask-click="false">
|
||
<view>
|
||
<uni-nav-bar left-icon="left" leftText="返回" rightText="X" title="筛选" @clickLeft="closeDrawer('showRight')"
|
||
@clickRight="closeDrawer('showRight')" />
|
||
</view>
|
||
<view class="searchlist">
|
||
<uni-section title="入库时间" type="line">
|
||
<uni-datetime-picker type="date" return-type="timestamp" v-model="enterTime" />
|
||
</uni-section>
|
||
<uni-section title="状态" type="line">
|
||
<uni-data-checkbox mode="tag" v-model="statevalue" :localdata="sjztlist" />
|
||
</uni-section>
|
||
</view>
|
||
</uni-drawer>
|
||
<view>
|
||
<!-- 普通弹窗 -->
|
||
<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 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>
|
||
<view class="button-group">
|
||
<button style="width: 100%;" type="primary" @click="submit" size="mini">提交</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted
|
||
} from 'vue';
|
||
import * as api from '@/utils/api.js';
|
||
import {
|
||
forEach
|
||
} from 'lodash';
|
||
import config from '@/utils/config';
|
||
const imgPath = config.imgPath;
|
||
const listdata = ref([]);
|
||
const popup = ref(null);
|
||
const typepopup = ref("center");
|
||
// 获取滚动容器的引用
|
||
const scroTop = ref(0);
|
||
const navButtonGroup = [{
|
||
text: '批量上架',
|
||
backgroundColor: 'rgb(0,120,212)',
|
||
color: '#fff'
|
||
}];
|
||
//下拉刷新
|
||
const isupshow = ref(false);
|
||
const paging = ref(null);
|
||
|
||
//运营区域下拉值 和列表
|
||
const regindata = ref([])
|
||
|
||
//提交表单相关信息
|
||
const customForm = ref(null)
|
||
const customFormData = ref({
|
||
reginvalue: "",
|
||
deviceValues: ""
|
||
})
|
||
// 校验规则
|
||
const customRules = ref({
|
||
reginvalue: {
|
||
rules: [{
|
||
required: true,
|
||
message: '请选择运营区域',
|
||
trigger: 'blur'
|
||
}]
|
||
},
|
||
deviceValues: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '车辆编号不能为空！',
|
||
trigger: 'blur'
|
||
}]
|
||
}
|
||
})
|
||
// 查询条件定义
|
||
const bikeCodeValue = ref(""); //车辆编号
|
||
const enterTime = ref(null); //入库时间
|
||
const statevalue = ref('0,4'); //状态（待维修，待入库
|
||
const statusZT = ref(0);
|
||
const sjztlist = ref([{
|
||
text: '全部',
|
||
value: '0,4'
|
||
}, {
|
||
text: '待维修',
|
||
value: 4
|
||
}, {
|
||
text: '待出库',
|
||
value: 0
|
||
}])
|
||
const status = ref('more'); //,more,loading，noMore
|
||
const selectedItems = ref([]);
|
||
const usableHeight = ref(0);
|
||
onMounted(() => {
|
||
// 获取设备信息
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
// 获取屏幕高度和状态栏高度
|
||
const screenHeight = systemInfo.screenHeight;
|
||
const statusBarHeight = systemInfo.statusBarHeight;
|
||
// 计算去掉状态栏后的可用区域高度
|
||
usableHeight.value = screenHeight - statusBarHeight - 170;
|
||
let userZone = uni.getStorageSync('userZone');
|
||
userZone.forEach(res => {
|
||
let quyuemap = {
|
||
"text": res.name,
|
||
"value": res.id
|
||
};
|
||
regindata.value.push(quyuemap);
|
||
});
|
||
|
||
|
||
});
|
||
const checkboxGroupChange = (e) => {
|
||
selectedItems.value = e.target.value
|
||
}
|
||
const opendetail = (id) => {
|
||
uni.setStorageSync('ebikeId_zcck', id);
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/warehouse/ebikehouse/ebikehouse_view?ebikeId_zcck=${id}`, //
|
||
});
|
||
}, 200); // 延迟100毫秒后执行
|
||
}
|
||
const loadMoreData = (pageNo, pageSize) => {
|
||
// 组装参数
|
||
const params = {
|
||
"bikeCode": bikeCodeValue.value, //车辆编号
|
||
"enterTime": enterTime.value, //入库时间 例：2025-03-21
|
||
"state": statevalue.value,
|
||
"pageParam": {
|
||
"pageNum": pageNo,
|
||
"pageSize": pageSize
|
||
}
|
||
}
|
||
api.callEbikeInfo("pageQueryEbikeList", params).then((res) => {
|
||
if (res.code === 200) {
|
||
const records = res.data.records;
|
||
paging.value.complete(res.data.records);
|
||
} else {
|
||
paging.value.complete(false);
|
||
}
|
||
});
|
||
};
|
||
|
||
const submit = (ref) => {
|
||
customForm.value.validate().then(res => {
|
||
const params = {
|
||
"bikeCode": customFormData.value.deviceValues, //车辆编号
|
||
"status": statusZT.value, //入库时间 例：2025-03-21
|
||
"regionId":customFormData.reginvalue
|
||
}
|
||
api.callEbikeInfo("vehicleLeaveWarehouse", params).then((res) => {
|
||
if (res.code == 200) {
|
||
popup.value.close("center")
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
searchInfo();
|
||
} else {
|
||
|
||
uni.showToast({
|
||
title: '操作失败',
|
||
icon: 'error',
|
||
duration: 2000
|
||
});
|
||
}
|
||
|
||
})
|
||
}).catch(err => {
|
||
console.log('err', err);
|
||
})
|
||
}
|
||
|
||
|
||
const onPullDownRefresh = () => {
|
||
console.log('onPullDownRefresh')
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh()
|
||
console.log('stopPullDownRefresh')
|
||
}, 1000)
|
||
}
|
||
// 创建 drawer 的 ref 引用
|
||
const showRight = ref(null);
|
||
|
||
// 打开窗口
|
||
const showDrawer = (e) => {
|
||
const drawer = showRight.value
|
||
drawer.open()
|
||
}
|
||
// 关闭窗口
|
||
const closeDrawer = (e) => {
|
||
const drawer = showRight.value
|
||
drawer.close();
|
||
searchInfo();
|
||
}
|
||
|
||
//搜索
|
||
const searchInfo = () => {
|
||
paging.value.reload();
|
||
}
|
||
|
||
const changeZT = (e) => {
|
||
console.log("e:", e);
|
||
}
|
||
const changepopup = (e) => {
|
||
|
||
}
|
||
//批量出库事件按钮
|
||
const navButtonClick = (index, content) => {
|
||
uni.showModal({
|
||
title: '确认上架',
|
||
content: '您确定要进行上架操作吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
customFormData.value.deviceValues = selectedItems.value
|
||
popup.value.open("center");
|
||
statusZT.value = 1;
|
||
} else if (res.cancel) {}
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
padding: 0px 0px;
|
||
background-color: #f3f4f6;
|
||
}
|
||
|
||
.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: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
button {
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
background-color: #007aff;
|
||
color: white;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.list-name {
|
||
color: #999999;
|
||
font-size: 12px;
|
||
width: 30%;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.list-value {
|
||
width: 70%;
|
||
color: #4F4F53;
|
||
font-size: 13px;
|
||
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;
|
||
}
|
||
|
||
.back-to-top {
|
||
position: fixed;
|
||
bottom: 135px;
|
||
right: 30px;
|
||
border: none;
|
||
font-size: 30px;
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
}
|
||
|
||
.nav-panel {
|
||
height: 70px;
|
||
width: 100%;
|
||
padding-bottom: 20px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.plcrk {
|
||
width: 240px;
|
||
height: 360px;
|
||
}
|
||
</style> |