From 2667d6931e0f85f3dda26238330d9c45385025cf Mon Sep 17 00:00:00 2001
From: wzp <2880584989@qq.com>
Date: 星期一, 21 二月 2022 17:51:57 +0800
Subject: [PATCH] 最新版本
---
assetMgtH5/pages/assets/borrow.vue | 436 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 302 insertions(+), 134 deletions(-)
diff --git a/assetMgtH5/pages/assets/borrow.vue b/assetMgtH5/pages/assets/borrow.vue
index 4f1bb25..b1e190c 100644
--- a/assetMgtH5/pages/assets/borrow.vue
+++ b/assetMgtH5/pages/assets/borrow.vue
@@ -1,182 +1,350 @@
-<!-- 璧勪骇鍊熺敤 -->
<template>
+ <!-- mescroll-body鏈川鏄師鐢焢age鐨勬粴鍔�,鏃犳硶鍍弇escroll-uni閭ｆ牱鐢╢lex甯冨眬宓屽湪鏌愪釜view涓娇鐢ㄥ眬閮ㄥ尯鍩熸粴鍔�, 浣嗘槸鍙互閫氳繃fixed瀹氫綅鍏朵粬鍏冪礌鏉ュ疄鐜�"灞�閮ㄥ尯鍩熸粴鍔�"-->
<view>
- <view class="">
- <cu-custom bgColor="bg-gradual-blue" :isBack="true">
- <block slot="backText">杩斿洖</block>
- <block slot="content">璧勪骇鍊熺敤</block>
- </cu-custom>
- </view>
- <view class="">
- <view class="cu-bar bg-white solid-bottom ">
- <view class="action">
- <text class="cuIcon-title text-orange"></text> 鍙�熺敤璧勪骇鍒楄〃
- </view>
- </view>
- <view class="cu-list menu-avatar">
- <view class="cu-item">
- <view class="cu-avatar radius lg"
- style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);">
- </view>
- <view class="content">
- <view>
- <view class="text-cut text-bold text-xl">璇炬</view>
- <view class="cu-tag radius bg-orange sm">鍙�熺敤锛�100</view>
- <view class="numbox">
- <u-number-box v-model="value" :min="0" :showMinus="value > 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="value"></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">瑙勬牸锛�120*120 鐧借壊 缂栫爜锛�1234533333</view>
- </view>
- </view>
- <view class="action">
- <!-- <view class="text-grey text-xs">22:20</view> -->
- <view class="cu-tag round bg-red sm">鍒犻櫎</view>
- </view>
- </view>
-
- <view class="cu-item">
- <view class="cu-avatar radius lg"
- style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);">
- </view>
- <view class="content">
- <view>
- <view class="text-cut text-bold text-xl">鍦嗚</view>
- <view class="cu-tag radius bg-orange sm">鍙�熺敤锛�100</view>
- <view class="numbox">
- <u-number-box v-model="value" :min="0" :showMinus="value > 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="value"></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">瑙勬牸锛�120*120 鐧借壊 缂栫爜锛�12345</view>
- </view>
- </view>
- <view class="action">
- <!-- <view class="text-grey text-xs">22:20</view> -->
- <view class="cu-tag round bg-red sm">鍒犻櫎</view>
- </view>
- </view>
-
- <view class="cu-item">
- <view class="cu-avatar radius lg"
- style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);">
- </view>
- <view class="content">
- <view>
- <view class="text-cut text-bold text-xl">妞呭瓙</view>
- <view class="cu-tag radius bg-orange sm">鍙�熺敤锛�100</view>
- <view class="numbox">
- <u-number-box v-model="value" :min="0" :showMinus="value > 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="value"></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">瑙勬牸锛�120*120 鐧借壊 缂栫爜锛�12345</view>
- </view>
- </view>
- <view class="action">
- <!-- <view class="text-grey text-xs">22:20</view> -->
- <view class="cu-tag round bg-red sm">鍒犻櫎</view>
- </view>
- </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.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 v-model="reason" placeholder="璇疯緭鍏ュ唴瀹�" placeholderStyle="font-size: 15rpx;" ></u--textarea>
+ <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;">
- 鑱屽姟: 鐝富浠�
- </view>
- <view class="" style="margin-top: 5rpx;">
- 鐢宠鍗曚綅: 鍒濅竴1鐝�
- </view>
- <view class="" style="margin-top: 5rpx;">
- 鐢宠鏃堕棿: 2022骞�2鏈�8鏃� 23:00
+ 鐢宠鏃堕棿: {{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 class="margin-top">
- <u-button style="width: 40%;" type="primary" text="鎻愪氦鐢宠"></u-button>
- </view>
-
-
</view>
</template>
+
<script>
+ import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+
+
export default {
+ mixins: [MescrollMixin], // 浣跨敤mixin
data() {
return {
- value: 10,
- reason:''
+ 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: {
- valChange(e) {
- console.log('褰撳墠鍊间负: ' + e.value)
+ /*涓婃媺鍔犺浇鐨勫洖璋�: 鍏朵腑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/search', {
+ params: {
+ pageNum: pageNum,
+ pageSize: pageSize,
+ keyStr: this.keyword,
+ state: "1"
+ }
+ })
+ .then(res => {
+ if (res.data.code === 0) {
+ let data = res.data.rows;
+ console.log(res.data.total)
+ 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;
+ //鑾峰彇棰嗙敤鐨勬ā鏉縄D
+ 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;
+ }
- .numbox{
+ // 璁剧疆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;
@@ -189,11 +357,11 @@
justify-content: center;
align-items: center;
}
-
+
.input {
padding: 0 5px;
}
-
+
.plus {
width: 15px;
height: 15px;
@@ -205,4 +373,4 @@
justify-content: center;
align-items: center;
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.1