<template>
|
<!-- mescroll-body本质是原生page的滚动,无法像mescroll-uni那样用flex布局嵌在某个view中使用局部区域滚动, 但是可以通过fixed定位其他元素来实现"局部区域滚动"-->
|
<view>
|
<!-- 顶部 fixed定位 -->
|
<view class="top-warp">
|
<view class="">
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
|
<block slot="backText">返回</block>
|
<block slot="content">资产归还</block>
|
</cu-custom>
|
</view>
|
|
</view>
|
<view class="search-box">
|
<view class="item">
|
<u-search placeholder="请输入关键字搜索" v-model="keyword" :clearabled="true" :show-action="false"
|
@search="onSearch">
|
</u-search>
|
</view>
|
</view>
|
|
|
|
<!-- mescroll-body跟随page滚动, 不可fixed定位, 可设置 top, bottom, topbar, bottombar, safearea的偏移量-->
|
<mescroll-body ref="mescrollRef" top="176" bottom="300" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
<view class="cu-list menu-avatar ">
|
<view class="cu-item" v-for="(item,index) in assetsList" :key="index">
|
<view class="cu-avatar radius lg bg-white"
|
style="background-image:url(../../static/device.png)">
|
</view>
|
<view class="content">
|
<view>
|
<view class="text-cut text-bold text-xl">{{item.assets.name}}</view>
|
<view class="cu-tag radius bg-orange sm">可归还：{{item.quantity}}</view>
|
<view class="numbox">
|
<u-number-box v-model="valueList[index]" :min="0" :max="item.quantity"
|
:showMinus="valueList[index] > 0">
|
<view slot="minus" class="minus">
|
<u-icon name="minus" size="12"></u-icon>
|
</view>
|
<input slot="input" style="width: 38px;text-align: center; " class="input"
|
:value="valueList[index]?valueList[index]:0"></input>
|
<view slot="plus" class="plus">
|
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
</view>
|
</u-number-box>
|
</view>
|
</view>
|
<!-- <view class="text-gray text-sm flex">
|
<view class="text-cut">规格：{{item.model?item.model:'无'}} 编码：{{item.serialNumber}}</view>
|
</view> -->
|
</view>
|
</view>
|
</view>
|
</mescroll-body>
|
|
<!-- 底部 fixed定位 -->
|
<view class="bottom-warp">
|
<view class="margin-top">
|
<view class="margin-left border-title">
|
备注
|
</view>
|
<view class="flex justify-center align-center" style="margin-top: 10rpx;">
|
<view class="" style="width: 95%; ">
|
<u--textarea height="50" v-model="reason" placeholder="请输入内容" placeholderStyle="font-size: 15rpx;">
|
</u--textarea>
|
</view>
|
|
</view>
|
</view>
|
|
<view class="padding-left padding-top border-title " style="padding-bottom: 10rpx;">
|
<view class="action">
|
申请人信息
|
</view>
|
</view>
|
<view class="flex justify-center">
|
<view class="u-border radius" style="width: 95%; padding:20rpx 0 20rpx 20rpx;">
|
<view class="">
|
申请人: {{applicant}}
|
</view>
|
|
<view class="" style="margin-top: 5rpx;">
|
申请时间: {{applicationTime}}
|
</view>
|
</view>
|
</view>
|
|
<view class="margin-top" style="margin-bottom: 30rpx;">
|
<u-button style="width: 40%;" type="primary" text="提交申请" @click="submit" :disabled="isDisabled"></u-button>
|
</view>
|
|
<u-toast ref="uToast"></u-toast>
|
</view>
|
</view>
|
</template>
|
|
|
<script>
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
export default {
|
mixins: [MescrollMixin], // 使用mixin
|
data() {
|
return {
|
keyword: '',
|
value: 0,
|
reason: '',
|
total:0,
|
assetsList: [],
|
listFlag: false,
|
|
valueList: [],
|
applicant: "", //申请人
|
|
applicationTime: '', //申请时间
|
templateId: '', //模板ID
|
isDisabled: false,
|
|
|
page: 1,
|
pageSize: 10,
|
status: 'loadmore',
|
user:null
|
}
|
},
|
onLoad() {
|
this.user =uni.getStorageSync('user');
|
this.applicant = this.user.userName;
|
this.applicationTime = this.$dayjs().format("YYYY-MM-DD HH:mm:ss")
|
},
|
onShow() {
|
this.initTemplateData();
|
},
|
methods: {
|
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
onSearch(e) {
|
console.log("搜索：" + this.keyword)
|
this.page = 1;
|
let page ={};
|
page.num =1;
|
this.upCallback(page);
|
},
|
|
upCallback(page) {
|
|
let pageNum = page.num; //页码，默认从1开始
|
let pageSize = 10; //页长，默认每页10条
|
|
console.log(pageNum)
|
this.$http.get('/assets/approval/myAssets', {
|
params: {
|
pageNum: pageNum,
|
pageSize: pageSize,
|
keyStr: this.keyword
|
}
|
})
|
.then(res => {
|
// debugger;
|
if (res.data.code === 0) {
|
let data = res.data.data;
|
console.log('总资产'+ data.length)
|
if (page.num == 1) this.assetsList = []; //如果是第一页，需手动置空列表
|
this.assetsList = this.assetsList.concat(data); //追加新数据
|
console.log(this.assetsList.length)
|
this.mescroll.endBySize(this.assetsList.length, res.data.total);
|
}
|
else{
|
this.mescroll.endBySize(0, 0);
|
}
|
|
})
|
.catch(err => {
|
this.mescroll.endErr();
|
console.log('异常', err);
|
});
|
},
|
|
//获取借用的模板
|
initTemplateData() {
|
this.$http.get('/assets/approval/getTemplate')
|
.then(res => {
|
// debugger;
|
if (res.data.code === 0) {
|
let data = res.data.data;
|
//获取领用的模板ID
|
for (let i = 0; i < data.length; i++) {
|
if (data[i].type === 2) {
|
this.templateId = data[i].templateId;
|
break;
|
}
|
}
|
console.log('模板ID=' + this.templateId)
|
}
|
|
|
}).catch(err => {
|
|
console.log(err.data)
|
})
|
},
|
|
submit() {
|
this.isDisabled = true;
|
if (this.reason.length <= 0) {
|
this.isDisabled = false;
|
this.$refs.uToast.show({
|
type: 'error',
|
message: "请填写备注"
|
});
|
return;
|
}
|
if (this.valueList.length <= 0) {
|
this.isDisabled = false;
|
this.$refs.uToast.show({
|
type: 'error',
|
message: "请选择一个或多个领用资产！"
|
});
|
|
return;
|
}
|
|
this.submitApply();
|
},
|
|
submitApply() {
|
let assets = [];
|
for (let i = 0; i < this.valueList.length; i++) {
|
if (this.valueList[i] > 0) {
|
let item = this.assetsList[i];
|
assets.push({
|
"id": item.id,
|
"name": item.name,
|
"serialNumber": item.serialNumber,
|
"quantity": this.valueList[i]
|
})
|
}
|
}
|
|
// console.log(assets);
|
let data = {
|
"assets": assets,
|
"templateId": this.templateId,
|
"reason": this.reason
|
}
|
|
this.$http.post('/assets/approval/submit', data)
|
.then(res => {
|
// debugger;
|
if (res.data.code === 0) {
|
console.log("成功了");
|
this.reason="";
|
this.$refs.uToast.show({
|
type: 'success',
|
message: "提交成功"
|
});
|
} else {
|
this.$refs.uToast.show({
|
type: 'error',
|
message: res.data.msg
|
});
|
}
|
this.isDisabled = false;
|
|
}).catch(err => {
|
this.isDisabled = false;
|
console.log(err.data)
|
})
|
}
|
}
|
}
|
</script>
|
|
|
<style lang="scss">
|
/* 顶部 fixed定位*/
|
.top-warp{
|
z-index: 200;
|
position: fixed;
|
top: var(--window-top);
|
left: 0;
|
width: 100%;
|
height: 88rpx;
|
padding-top: 10rpx;
|
font-size: 28rpx;
|
text-align: center;
|
background-color: #CFE0DA;
|
}
|
|
// 设置padding
|
.mescroll-body,
|
/deep/.mescroll-body{
|
padding-left: 0rpx;
|
}
|
|
/* 底部 fixed定位*/
|
.bottom-warp{
|
z-index: 200;
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
background-color: #FFFFFF;
|
}
|
|
.itembox {
|
/* 父容器设置宽度, 并超出部分不显示 */
|
width: 100%;
|
height: 100%;
|
overflow: scroll;
|
|
.item {
|
/* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
|
// width: 5517px;
|
// height: 100%;
|
// line-height: 30px;
|
text-align: center;
|
overflow-y: scroll;
|
}
|
|
}
|
|
.content-box {
|
position: relative;
|
// border: 1rpx red solid;
|
height: 50vh;
|
}
|
|
.search-box {
|
background-color: #FFFFFF;
|
// margin-top: 88rpx;
|
z-index: 200;
|
top:88rpx;
|
width: 100%;
|
position: fixed;
|
padding: 10rpx 30rpx 0rpx 30rpx;
|
// border: 1rpx red solid;
|
}
|
|
|
.numbox {
|
margin-left: 20rpx;
|
}
|
|
.minus {
|
|
width: 15px;
|
height: 15px;
|
border-width: 1px;
|
border-color: #E6E6E6;
|
border-top-left-radius: 50px;
|
border-top-right-radius: 50px;
|
border-bottom-left-radius: 50px;
|
border-bottom-right-radius: 50px;
|
@include flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.input {
|
padding: 0 5px;
|
}
|
|
.plus {
|
width: 15px;
|
height: 15px;
|
background-color: #53C21D; //#FF0000;
|
border-radius: 50%;
|
/* #ifndef APP-NVUE */
|
display: flex;
|
/* #endif */
|
justify-content: center;
|
align-items: center;
|
}
|
</style>
|
