最新版本，修复bug

wzp

2022-03-08 1f478b4b033d518f6de21f931d828d2a175b2a3e

 assetMgtH5/pages/assets/borrow.vue

@@ -1,40 +1,46 @@
<!-- 资产借用 -->
<template>
   <!-- mescroll-body本质是原生page的滚动,无法像mescroll-uni那样用flex布局嵌在某个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.availableQuantity}}</view>
                     <view class="numbox">
                        <u-number-box v-model="valueList[index]" :min="0" :max="item.quantity"
                           :showMinus="valueList[index] > 0">
                        <u-number-box v-model="valueList[index]" :min="0" :max="item.availableQuantity"
                           :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>
                           <input slot="input" style="width: 38px;text-align: center; " class="input" @blur="inputChange(index)"
                               :value="valueList[index] ? valueList[index] : 0" @input="valueList[index] = $event.detail.value" ></input>
                           <view slot="plus" class="plus">
                              <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
                           </view>
@@ -45,146 +51,180 @@
                     <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>


         <!-- 申请理由 -->
         <view class="margin-top">
      </mescroll-body>
		
      <!-- 底部 fixed定位 -->
      <view class="bottom-warp">
         <view class="" style="padding: 0px 15px 0px 15px;">
            <u--form>
               <u-form-item label="使用人" labelWidth="80" borderBottom>
                  <u--input v-model="usePeople" border="none" placeholder="物资使用人(选填)"></u--input>
               </u-form-item>
               <u-form-item label="使用地点" labelWidth="80" borderBottom>
                  <u--input v-model="address" border="none" placeholder="填写地点(选填)"></u--input>
               </u-form-item>
            </u--form>
				
         </view>
			
         <view class="" style="margin-top: 10rpx;">
            <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="30" 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="padding-left border-title " style="padding-bottom: 10rpx; pa">
            <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="u-border radius" style="width: 95%; padding:10rpx 0 10rpx 20rpx;">
               <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,
            address:'',
            usePeople:'',
				
            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)
         inputChange(index){
            // console.log('开始:',this.valueList[index]);
            this.valueList[index] = this.valueList[index];
            // console.log('结束:',this.valueList[index]);
            console.log('列表',this.valueList)
         },
         //获取可领用设备
         initUseListData() {
			
			
			
			
         /*上拉加载的回调: 其中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: "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)

                     //获取借用的模板ID
                     //获取领用的模板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) {
@@ -199,15 +239,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,23 +261,28 @@
                  })
               }
            }

            console.log(assets);
			
            // console.log(assets);
            let data = {
               "assets": assets,
               "templateId": this.templateId,
               "reason": this.reason
               "reason": this.reason,
               "useAddress":this.address,
               "usePeople":this.usePeople,
            }

			
            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: "提交成功"
                     });
							
                     this.onSearch()
                  } else {
                     this.$refs.uToast.show({
                        type: 'error',
@@ -245,7 +290,7 @@
                     });
                  }
                  this.isDisabled = false;

			
               }).catch(err => {
                  this.isDisabled = false;
                  console.log(err.data)
@@ -255,13 +300,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: #FFFFFF;
   }
	
   // 设置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;
@@ -274,11 +385,11 @@
      justify-content: center;
      align-items: center;
   }

	
   .input {
      padding: 0 5px;
   }

	
   .plus {
      width: 15px;
      height: 15px;
@@ -290,4 +401,4 @@
      justify-content: center;
      align-items: center;
   }
</style>
</style>