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 | 277 ++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 180 insertions(+), 97 deletions(-) diff --git a/assetMgtH5/pages/assets/borrow.vue b/assetMgtH5/pages/assets/borrow.vue index 21667bf..b1e190c 100644 --- a/assetMgtH5/pages/assets/borrow.vue +++ b/assetMgtH5/pages/assets/borrow.vue @@ -1,32 +1,37 @@ -<!-- 璧勪骇鍊熺敤 --> <template> + <!-- mescroll-body鏈川鏄師鐢焢age鐨勬粴鍔�,鏃犳硶鍍弇escroll-uni閭f牱鐢╢lex甯冨眬宓屽湪鏌愪釜view涓娇鐢ㄥ眬閮ㄥ尯鍩熸粴鍔�, 浣嗘槸鍙互閫氳繃fixed瀹氫綅鍏朵粬鍏冪礌鏉ュ疄鐜�"灞�閮ㄥ尯鍩熸粴鍔�"--> <view> - <view class=""> - <cu-custom bgColor="bg-gradual-blue" :isBack="true"> - <block slot="backText">杩斿洖</block> - <block slot="content">璧勪骇鍊熺敤</block> - </cu-custom> + <!-- 椤堕儴 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=""> - <view class="cu-bar bg-white solid-bottom "> - <view class="action"> - <text class="cuIcon-title text-orange"></text> 鍙�熺敤璧勪骇鍒楄〃 - </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 class="" v-if="listFlag"> - <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"> - </u-empty> - </view> - - <view class="cu-list menu-avatar"> + </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 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="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"> @@ -45,29 +50,25 @@ <view class="text-cut">瑙勬牸锛歿{item.model?item.model:'鏃�'}} 缂栫爜锛歿{item.serialNumber}}</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> - - - <!-- 鐢宠鐞嗙敱 --> + </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 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"> 鐢宠浜轰俊鎭� @@ -78,113 +79,128 @@ <view class=""> 鐢宠浜�: {{applicant}} </view> - <view class="" style="margin-top: 5rpx;"> - 鑱屽姟: {{jobTitle}} - </view> - <view class="" style="margin-top: 5rpx;"> - 鐢宠鍗曚綅: {{applicationUnit}} - </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 class="margin-top"> - <u-button style="width: 40%;" type="primary" text="鎻愪氦鐢宠" @click="submit" :disabled="isDisabled"></u-button> - </view> - - <u-toast ref="uToast"></u-toast> </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: "", //鐢宠浜� - jobTitle: "", //鑱屽姟 - applicationUnit: '', //鐢宠鍗曚綅 + applicationTime: '', //鐢宠鏃堕棿 templateId: '', //妯℃澘ID - isDisabled: false + 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() { - console.log(this.$dayjs().format("YYYY-MM-DD")); - this.initUseListData(); 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); }, - //鑾峰彇鍙鐢ㄨ澶� - initUseListData() { + + upCallback(page) { + + let pageNum = page.num; //椤电爜锛岄粯璁や粠1寮�濮� + let pageSize = 10; //椤甸暱锛岄粯璁ゆ瘡椤�10鏉� + + console.log(pageNum) this.$http.get('/assets/approval/search', { params: { - pageNum: "1", - pageSize: "3", - keyStr: '', - state: "2" + pageNum: pageNum, + pageSize: pageSize, + keyStr: this.keyword, + state: "1" } }) - .then(res => { - // debugger; if (res.data.code === 0) { let data = res.data.rows; - this.assetsList = data; - // console.log(JSON.stringify(data.data)) - // let tt = data.data; - console.log(data.length) - } else { - this.listFlag = true; + 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); } - - - }).catch(err => { - this.listFlag = true; - console.log(err.data) + 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; - - console.log(data.length) - - //鑾峰彇鍊熺敤鐨勬ā鏉縄D + //鑾峰彇棰嗙敤鐨勬ā鏉縄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) { @@ -199,15 +215,15 @@ this.isDisabled = false; this.$refs.uToast.show({ type: 'error', - message: "璇烽�夋嫨涓�涓垨澶氫釜鍊熺敤璧勪骇锛�" + message: "璇烽�夋嫨涓�涓垨澶氫釜棰嗙敤璧勪骇锛�" }); - + return; } - + this.submitApply(); }, - + submitApply() { let assets = []; for (let i = 0; i < this.valueList.length; i++) { @@ -221,19 +237,20 @@ }) } } - - console.log(assets); + + // console.log(assets); let data = { "assets": assets, "templateId": this.templateId, "reason": this.reason } - + this.$http.post('/assets/approval/submit', data) .then(res => { - debugger; + // debugger; if (res.data.code === 0) { - console.log("鎴愬姛浜�") + console.log("鎴愬姛浜�"); + this.reason=""; this.$refs.uToast.show({ type: 'success', message: "鎻愪氦鎴愬姛" @@ -245,7 +262,7 @@ }); } this.isDisabled = false; - + }).catch(err => { this.isDisabled = false; console.log(err.data) @@ -255,13 +272,79 @@ } </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, 缁忔祴姝eソ鏄粴鍔ㄦ潯鐨勯粯璁ゅ搴� */ + // 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; @@ -274,11 +357,11 @@ justify-content: center; align-items: center; } - + .input { padding: 0 5px; } - + .plus { width: 15px; height: 15px; @@ -290,4 +373,4 @@ justify-content: center; align-items: center; } -</style> +</style> \ No newline at end of file -- Gitblit v1.9.1