393 lines
11 KiB
Vue
393 lines
11 KiB
Vue
<template>
|
||
<z-paging ref="paging" v-model="dataList" @query="queryList" :default-page-no="Number('1')" :default-page-size="Number('4')" :auto-show-back-to-top="Boolean(true)">
|
||
<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
|
||
<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
|
||
<template #top>
|
||
<view class="flex">
|
||
<view class="search">
|
||
<uni-search-bar radius="5" placeholder="输入部件类型查询" v-model="componentType" @blur="searchInfo"
|
||
@confirm="searchInfo" />
|
||
</view>
|
||
<view class="searchmore" @click="showDrawer('showRight')">
|
||
<image :src="`${imgPath}/static/image/更多.png`" alt="" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="container">
|
||
<view class="list-panel">
|
||
<view class="list-item" v-for="(item,index) in dataList" :key="index">
|
||
<uni-row>
|
||
<view class="list-title-row">
|
||
<uni-col :span="18">
|
||
<view class="list-title" @click="opendetail(item.componentOutRecordId)">
|
||
{{item.typeName}}
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="6">
|
||
<view class="list-tag-right">
|
||
<view v-if="item.state=='1'">
|
||
<uni-tag :inverted="true" text="已出库" custom-style="background-color: #ecca7733; border-color: #fff; color: #d97340;" />
|
||
</view>
|
||
<view v-else-if="item.state=='2'">
|
||
<uni-tag :inverted="true" text="已归还" custom-style="background-color: #78f18c1a; border-color: #fff; color: #4cd964;" />
|
||
</view>
|
||
<view v-else-if="item.state=='-1'">
|
||
<uni-tag :inverted="true" text="已取消" custom-style="background-color: #dedede4d; border-color: #fff; color: #c0c0c0;" />
|
||
</view>
|
||
<view v-else-if="item.state=='-2'">
|
||
<uni-tag :inverted="true" text="已作废" custom-style="background-color: #e6434033; border-color: #fff; color: #e64340;" />
|
||
</view>
|
||
<view v-else >
|
||
<uni-tag :inverted="true" text="待出库" custom-style="background-color: #31d3f31a; border-color: #fff; color: #007aff;" />
|
||
</view>
|
||
</view>
|
||
</uni-col>
|
||
</view>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="5">
|
||
<view class="list-image-panel" @click="opendetail(item.componentOutRecordId)">
|
||
<view v-if="item.typeCover == null || item.typeCover == ''" class="list-image-box"><uni-icons type="image" size="50" color="#e1e1e1" /></view>
|
||
<image v-if="item.typeCover != null && item.typeCover != ''" class="list-image-box" mode="scaleToFill" :src="item.typeCover"></image>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="19">
|
||
<uni-row>
|
||
<uni-col :span="20">
|
||
<view class="list-item-row" @click="opendetail(item.componentOutRecordId)">
|
||
原部件处理方案：{{item.oldComponentHandleOption}}
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="20">
|
||
<view class="list-item-row font-weight-6" @click="opendetail(item.componentOutRecordId)">
|
||
出库数量：{{item.outQuantity}}
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="24">
|
||
<view class="list-botton-box">
|
||
<button class="mini-btn" type="primary" size="mini" plain="true" v-if="item.state=='0'" @click="dealstate(item.componentOutRecordId,'1', item)">出库</button>
|
||
<button class="mini-btn" type="default" style="color:#1AAD19;backgroundColor:#ffffff;borderColor:#1AAD19" size="mini" plain="true" v-if="item.state=='1'" @click="dealstate(item.componentOutRecordId,'2', item)">归还</button>
|
||
<button class="mini-btn" type="warn" size="mini" plain="true" v-if="item.state=='1'" @click="dealstate(item.componentOutRecordId,'-2', item)">作废</button>
|
||
<button class="mini-btn" type="default" size="mini" plain="true" v-if="item.state=='0'" @click="dealstate(item.componentOutRecordId,'-1', item)">取消</button>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
</view>
|
||
<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-data-checkbox mode="tag" v-model="statevalue" :localdata="rkstatelist" />
|
||
</uni-section>
|
||
</view>
|
||
</uni-drawer>
|
||
</view>
|
||
<template #bottom>
|
||
<view class="nav-panel">
|
||
<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
|
||
</view>
|
||
</template>
|
||
</z-paging>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref
|
||
} from 'vue';
|
||
import { onLoad,onShow,onBackPress } from "@dcloudio/uni-app";
|
||
import {
|
||
showModelMessage,
|
||
dataFormat
|
||
} from '@/utils/tools.js';
|
||
import * as api from '@/utils/api.js';
|
||
import config from '@/utils/config';
|
||
const imgPath = config.imgPath;
|
||
const userInfo = ref(null);
|
||
|
||
const paging = ref(null);
|
||
const dataList = ref([]);
|
||
const navButtonGroup = [{
|
||
text: '新增出库',
|
||
backgroundColor: 'rgb(0,120,212)',
|
||
color: '#fff'
|
||
}];
|
||
// 查询条件定义
|
||
const componentType = ref("");
|
||
const statevalue = ref(''); //状态
|
||
const rkstate = ref('0');//状态
|
||
const rkstatelist = ref([{
|
||
text: '全部',
|
||
value: ''
|
||
}, {
|
||
text: '待出库',
|
||
value: '0'
|
||
}, {
|
||
text: '已出库',
|
||
value: '1'
|
||
}, {
|
||
text: '已归还',
|
||
value: '2'
|
||
}, {
|
||
text: '已取消',
|
||
value: '-1'
|
||
}, {
|
||
text: '已作废',
|
||
value: '-2'
|
||
}])
|
||
|
||
onShow(() => {
|
||
if(paging && paging.value) paging.value.refresh();
|
||
});
|
||
|
||
onLoad((options) => {
|
||
userInfo.value = uni.getStorageSync('userInfo');
|
||
});
|
||
|
||
const queryList = (pageNo, pageSize) => {
|
||
// 组装参数
|
||
const params = {
|
||
"componentType": componentType.value,
|
||
"state": statevalue.value,
|
||
"sortBy": 'created_at',
|
||
"sortMethod": 'desc',
|
||
"pageParam": {
|
||
"pageNum": pageNo,
|
||
"pageSize": pageSize
|
||
}
|
||
}
|
||
|
||
api.callOperateApi("ebikeComponentOutRecords/list", params).then((res) => {
|
||
if (res.code === 200) {
|
||
paging.value.complete(res.data.records);
|
||
} else {
|
||
paging.value.complete(false);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 创建 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 navButtonClick = (e) => {
|
||
const index = e.index;
|
||
if(index == 0){
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/warehouse/component/outdetails`, //
|
||
});
|
||
}, 200); // 延迟100毫秒后执行
|
||
}
|
||
}
|
||
|
||
const dealstate = (componentOutRecordId, state, item) =>{
|
||
const paramsOut = {
|
||
"componentOutRecordId": componentOutRecordId,
|
||
"pageParam": {
|
||
"pageNum": 1,
|
||
"pageSize": 1
|
||
}
|
||
}
|
||
const paramsEnter = {
|
||
"componentEnterRecordId": componentOutRecordId,
|
||
"pageParam": {
|
||
"pageNum": 1,
|
||
"pageSize": 1
|
||
}
|
||
}
|
||
if(item.typeName == '电池'){
|
||
if(state == "1"){
|
||
api.callOperateApi("ebikeBatteryOutRecords/list", paramsOut).then((res) => {
|
||
if(res.code == 200){
|
||
if(res.data.totalRow == 0){
|
||
showModelMessage("出库电池列表为空，不能出库！");
|
||
}
|
||
else savestate(componentOutRecordId, state);
|
||
}
|
||
else showModelMessage(res.message);
|
||
});
|
||
}
|
||
else if(state == "2"){
|
||
api.callOperateApi("ebikeBatteryEnterRecords/list", paramsEnter).then((res) => {
|
||
if(res.code == 200){
|
||
if(res.data.totalRow == 0){
|
||
showModelMessage("归还电池列表为空，不能归还！");
|
||
}
|
||
else savestate(componentOutRecordId, state);
|
||
}
|
||
else showModelMessage(res.message);
|
||
});
|
||
}
|
||
else savestate(componentOutRecordId, state);
|
||
}
|
||
else if(item.typeName == '头盔'){
|
||
if(state == "1"){
|
||
api.callOperateApi("ebikeHelmetOutRecords/list", paramsOut).then((res) => {
|
||
if(res.code == 200){
|
||
if(res.data.totalRow == 0){
|
||
showModelMessage("出库头盔列表为空，不能出库！");
|
||
}
|
||
else savestate(componentOutRecordId, state);
|
||
}
|
||
else showModelMessage(res.message);
|
||
});
|
||
}
|
||
else if(state == "2"){
|
||
api.callOperateApi("ebikeHelmetEnterRecords/list", paramsEnter).then((res) => {
|
||
if(res.code == 200){
|
||
if(res.data.totalRow == 0){
|
||
showModelMessage("归还头盔列表为空，不能归还！");
|
||
}
|
||
else savestate(componentOutRecordId, state);
|
||
}
|
||
else showModelMessage(res.message);
|
||
});
|
||
}
|
||
else savestate(componentOutRecordId, state);
|
||
}
|
||
else savestate(componentOutRecordId, state);
|
||
}
|
||
|
||
const savestate = (componentOutRecordId, state) =>{
|
||
// 组装参数
|
||
const params = {
|
||
"componentOutRecordId": componentOutRecordId,
|
||
"state": state,
|
||
"updateUser": userInfo.value.username,
|
||
"updateAt": dataFormat(new Date(),'yyyy-MM-dd HH:mm:ss')
|
||
}
|
||
api.callOperateApi("ebikeComponentOutRecords/update", params).then((res) => {
|
||
if (res.code != 200) {
|
||
showModelMessage(res.message)
|
||
return
|
||
}
|
||
paging.value.refresh();
|
||
});
|
||
}
|
||
|
||
const opendetail = (componentOutRecordId) => {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/warehouse/component/outdetails?componentOutRecordId=${componentOutRecordId}`, //
|
||
});
|
||
}, 200); // 延迟100毫秒后执行
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
padding: 0px 0px;
|
||
background-color: #f3f3f3;
|
||
}
|
||
|
||
.list-panel{
|
||
padding: 10px 5px 0px 0px;
|
||
}
|
||
|
||
.close {
|
||
padding: 10px;
|
||
}
|
||
|
||
.search {
|
||
width: 90%;
|
||
}
|
||
|
||
.searchmore {
|
||
width: 10%;
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.searchmore image {
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
.searchlist {
|
||
padding: 15px;
|
||
}
|
||
|
||
.nav-panel {
|
||
padding-bottom: 20px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.list-item{
|
||
padding: 15px 15px;
|
||
margin: 20px 10px;
|
||
border: 1px solid #d6d4d4;
|
||
border-radius: 2px;
|
||
background-color: #fff;
|
||
box-shadow: 2px 2px 4px 2px rgba(212, 212, 212, 0.6);
|
||
}
|
||
|
||
.list-title-row{
|
||
line-height: 25px;
|
||
}
|
||
|
||
.list-title{
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.list-tag-right{
|
||
width: 100%;
|
||
text-align: right;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.list-image-panel{
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.list-image-box{
|
||
width: 50px;
|
||
height: 50px;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.list-item-row{
|
||
font-size: 12px;
|
||
padding: 4px 0px;
|
||
}
|
||
|
||
.font-weight-6{
|
||
font-weight: 600;
|
||
}
|
||
|
||
.list-botton-box{
|
||
border-top: 1px solid #d6d4d4;
|
||
padding: 10px 0px 0px 0px;
|
||
text-align: right;
|
||
}
|
||
|
||
button {
|
||
margin-left: 5px;
|
||
border-radius: 5px;
|
||
}
|
||
</style> |