515 lines
12 KiB
Vue
515 lines
12 KiB
Vue
<template>
|
||
<z-paging
|
||
ref="paging"
|
||
v-model="dataList"
|
||
@query="queryList"
|
||
:default-page-no="Number('1')"
|
||
:default-page-size="Number('10')"
|
||
:auto-show-back-to-top="Boolean(true)"
|
||
bg-color="#f3f3f3"
|
||
>
|
||
<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
|
||
<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
|
||
<template #top>
|
||
<view class="flex" style="background-color: white">
|
||
<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.componentEnterRecordId)"
|
||
>
|
||
{{ 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: #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.componentEnterRecordId)"
|
||
>
|
||
<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.componentEnterRecordId)"
|
||
>
|
||
品牌：{{ item.typeBrand }}
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="20">
|
||
<view
|
||
class="list-item-row font-weight-6"
|
||
@click="opendetail(item.componentEnterRecordId)"
|
||
>
|
||
入库数量：{{ item.enterQuantity }}
|
||
</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="opendetail(item.componentEnterRecordId)"
|
||
>
|
||
入库
|
||
</button>
|
||
<button
|
||
class="mini-btn"
|
||
type="warn"
|
||
size="mini"
|
||
plain="true"
|
||
v-if="item.state == '1'"
|
||
@click="
|
||
dealstate(
|
||
item.componentEnterRecordId,
|
||
'invalidateDevicePart',
|
||
'作废'
|
||
)
|
||
"
|
||
>
|
||
作废
|
||
</button>
|
||
<button
|
||
class="mini-btn"
|
||
type="default"
|
||
size="mini"
|
||
plain="true"
|
||
v-if="item.state == '0'"
|
||
@click="
|
||
dealstate(
|
||
item.componentEnterRecordId,
|
||
'cancelDevicePart',
|
||
'取消'
|
||
)
|
||
"
|
||
>
|
||
取消
|
||
</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: "#0078D4",
|
||
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: "-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("ebikeComponentEnterRecords/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/enterdetails`, //
|
||
});
|
||
}, 200); // 延迟100毫秒后执行
|
||
}
|
||
};
|
||
|
||
const dealstate = (componentEnterRecordId, url, mes) => {
|
||
api
|
||
.callOperateApi(
|
||
"ebikeComponent/" +
|
||
url +
|
||
"?componentEnterRecordId=" +
|
||
componentEnterRecordId,
|
||
{},
|
||
"get"
|
||
)
|
||
.then((res) => {
|
||
if (res.code == "200") {
|
||
uni.showToast({
|
||
title: mes + "成功",
|
||
icon: "success",
|
||
duration: 5000,
|
||
});
|
||
queryList(1, 10);
|
||
} else {
|
||
uni.showToast({
|
||
title: mes + "失败",
|
||
icon: "error",
|
||
duration: 5000,
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const listBatteryData = ref([]);
|
||
const listHelmetData = ref([]);
|
||
const getBatteryList = (
|
||
componentEnterRecordId,
|
||
pageNo = 1,
|
||
pageSize = 100,
|
||
callback
|
||
) => {
|
||
// 组装参数
|
||
const params = {
|
||
componentEnterRecordId: componentEnterRecordId,
|
||
pageParam: {
|
||
pageNum: pageNo,
|
||
pageSize: pageSize,
|
||
},
|
||
};
|
||
api.callOperateApi("ebikeBatteryEnterRecords/list", params).then((res) => {
|
||
if (res.code === 200) {
|
||
listBatteryData.value.push(...res.data.records);
|
||
if (res.data.totalRow > pageNo * pageSize) {
|
||
pageNo += 1;
|
||
getBatteryList(componentEnterRecordId, pageNo, pageSize, callback);
|
||
} else {
|
||
if (callback) callback(true);
|
||
}
|
||
} else {
|
||
if (callback) callback(false);
|
||
}
|
||
});
|
||
};
|
||
|
||
const getHelmetList = (
|
||
componentEnterRecordId,
|
||
pageNo = 1,
|
||
pageSize = 100,
|
||
callback
|
||
) => {
|
||
// 组装参数
|
||
const params = {
|
||
componentEnterRecordId: componentEnterRecordId,
|
||
pageParam: {
|
||
pageNum: pageNo,
|
||
pageSize: pageSize,
|
||
},
|
||
};
|
||
api.callOperateApi("ebikeHelmetEnterRecords/list", params).then((res) => {
|
||
if (res.code === 200) {
|
||
listHelmetData.value.push(...res.data.records);
|
||
if (res.data.totalRow > pageNo * pageSize) {
|
||
pageNo += 1;
|
||
getHelmetList(componentEnterRecordId, pageNo, pageSize, callback);
|
||
} else {
|
||
if (callback) callback();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const savestate = (componentEnterRecordId, state) => {
|
||
// 组装参数
|
||
const params = {
|
||
componentEnterRecordId: componentEnterRecordId,
|
||
state: state,
|
||
updateUser: userInfo.value.username,
|
||
updateAt: dataFormat(new Date(), "yyyy-MM-dd HH:mm:ss"),
|
||
};
|
||
api
|
||
.callOperateApi("ebikeComponentEnterRecords/update", params)
|
||
.then((res) => {
|
||
if (res.code != 200) {
|
||
showModelMessage(res.message);
|
||
return;
|
||
}
|
||
paging.value.refresh();
|
||
});
|
||
};
|
||
|
||
const opendetail = (componentEnterRecordId) => {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/warehouse/component/enterdetails?componentEnterRecordId=${componentEnterRecordId}`, //
|
||
});
|
||
}, 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: 10px;
|
||
margin: 10px;
|
||
/* border: 1px solid #d6d4d4; */
|
||
border-radius: 5px;
|
||
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>
|