| | |
| | | <!-- mescroll-body本质是原生page的滚动,无法像mescroll-uni那样用flex布局嵌在某个view中使用局部区域滚动, 但是可以通过fixed定位其他元素来实现"局部区域滚动"--> |
| | | <view> |
| | | <!-- 顶部 fixed定位 --> |
| | | <view class="top-warp"> |
| | | <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> |
| | | </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"> |
| | | <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.assets.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" |
| | | <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> |
| | | </u-number-box> |
| | | |
| | | |
| | | </view> |
| | | </view> |
| | | <!-- <view class="text-gray text-sm flex"> |
| | |
| | | </view> |
| | | </view> |
| | | </mescroll-body> |
| | | |
| | | |
| | | <!-- 底部 fixed定位 --> |
| | | <view class="bottom-warp"> |
| | | <view class="margin-top"> |
| | |
| | | </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 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> |
| | | |
| | | |
| | | <view class="margin-top" style="margin-bottom: 30rpx;"> |
| | | <u-button style="width: 40%;" type="primary" text="提交申请" @click="submit" :disabled="isDisabled"></u-button> |
| | | <u-button style="width: 40%;" type="primary" text="提交申请" @click="submit" :disabled="isDisabled"> |
| | | </u-button> |
| | | </view> |
| | | |
| | | |
| | | <u-toast ref="uToast"></u-toast> |
| | | </view> |
| | | </view> |
| | |
| | | <script> |
| | | import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"; |
| | | |
| | | |
| | | |
| | | export default { |
| | | mixins: [MescrollMixin], // 使用mixin |
| | | data() { |
| | |
| | | keyword: '', |
| | | value: 0, |
| | | reason: '', |
| | | total:0, |
| | | total: 0, |
| | | assetsList: [], |
| | | listFlag: false, |
| | | |
| | | |
| | | valueList: [], |
| | | applicant: "", //申请人 |
| | | |
| | | |
| | | applicationTime: '', //申请时间 |
| | | templateId: '', //模板ID |
| | | isDisabled: false, |
| | | |
| | | |
| | | approvalAssetsId: [], //非必传 我的资产报修、报废、归还时填写 审批资产ID |
| | | productCode: [], //非必传 报修报废时 填写 |
| | | page: 1, |
| | | pageSize: 10, |
| | | status: 'loadmore', |
| | | user:null |
| | | user: null |
| | | } |
| | | }, |
| | | onLoad() { |
| | | this.user =uni.getStorageSync('user'); |
| | | this.user = uni.getStorageSync('user'); |
| | | this.applicant = this.user.userName; |
| | | this.applicationTime = this.$dayjs().format("YYYY-MM-DD HH:mm:ss") |
| | | }, |
| | |
| | | this.initTemplateData(); |
| | | }, |
| | | methods: { |
| | | inputChange(index){ |
| | | // console.log('开始:',this.valueList[index]); |
| | | this.valueList[index] = this.valueList[index]; |
| | | // console.log('结束:',this.valueList[index]); |
| | | |
| | | console.log('列表',this.valueList) |
| | | }, |
| | | |
| | | /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ |
| | | onSearch(e) { |
| | | console.log("搜索:" + this.keyword) |
| | | this.page = 1; |
| | | let page ={}; |
| | | page.num =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 |
| | | keyStr: this.keyword, |
| | | approvalType:2 |
| | | } |
| | | }) |
| | | .then(res => { |
| | | // debugger; |
| | | if (res.data.code === 0) { |
| | | let data = res.data.data; |
| | | console.log('总资产'+ data.length) |
| | | if (page.num == 1) this.assetsList = []; //如果是第一页,需手动置空列表 |
| | | |
| | | if (page.num == 1) { |
| | | this.assetsList = []; //如果是第一页,需手动置空列表 |
| | | this.approvalAssetsId = []; |
| | | } |
| | | |
| | | for (let i = 0; i < data.length; i++) { |
| | | this.approvalAssetsId.push(data[i].id) |
| | | // console.log(data[i].assets.id) |
| | | } |
| | | |
| | | // console.log('id=',this.approvalAssetsId) |
| | | this.assetsList = this.assetsList.concat(data); //追加新数据 |
| | | console.log(this.assetsList.length) |
| | | |
| | | this.mescroll.endBySize(this.assetsList.length, res.data.total); |
| | | } |
| | | else{ |
| | | } else { |
| | | this.mescroll.endBySize(0, 0); |
| | | } |
| | | |
| | | |
| | | }) |
| | | .catch(err => { |
| | | this.mescroll.endErr(); |
| | |
| | | let data = res.data.data; |
| | | //获取领用的模板ID |
| | | for (let i = 0; i < data.length; i++) { |
| | | if (data[i].type === 2) { |
| | | if (data[i].type === 3) { |
| | | 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: "请选择一个或多个领用资产!" |
| | | 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] |
| | | "id": 31377, |
| | | "name": item.assets.name, |
| | | "serialNumber": item.assets.serialNumber, |
| | | "quantity": this.valueList[i], |
| | | "approvalAssetsId":this.approvalAssetsId[i]==="0"?"":this.approvalAssetsId[i] |
| | | }) |
| | | } |
| | | } |
| | | |
| | | // console.log(assets); |
| | | |
| | | console.log(assets); |
| | | let data = { |
| | | "assets": assets, |
| | | "templateId": this.templateId, |
| | | "reason": this.reason |
| | | "reason": this.reason, |
| | | "approvalAssetsId":140 |
| | | } |
| | | |
| | | |
| | | console.log('data=',data) |
| | | |
| | | this.$http.post('/assets/approval/submit', data) |
| | | .then(res => { |
| | | // debugger; |
| | | debugger; |
| | | if (res.data.code === 0) { |
| | | console.log("成功了"); |
| | | this.reason=""; |
| | | this.reason = ""; |
| | | this.$refs.uToast.show({ |
| | | type: 'success', |
| | | message: "提交成功" |
| | |
| | | }); |
| | | } |
| | | this.isDisabled = false; |
| | | |
| | | |
| | | }).catch(err => { |
| | | this.isDisabled = false; |
| | | console.log(err.data) |
| | |
| | | |
| | | <style lang="scss"> |
| | | /* 顶部 fixed定位*/ |
| | | .top-warp{ |
| | | .top-warp { |
| | | z-index: 200; |
| | | position: fixed; |
| | | top: var(--window-top); |
| | |
| | | padding-top: 10rpx; |
| | | font-size: 28rpx; |
| | | text-align: center; |
| | | background-color: #CFE0DA; |
| | | background-color: #FFFFFF; |
| | | } |
| | | |
| | | |
| | | // 设置padding |
| | | .mescroll-body, |
| | | /deep/.mescroll-body{ |
| | | /deep/.mescroll-body { |
| | | padding-left: 0rpx; |
| | | } |
| | | |
| | | |
| | | /* 底部 fixed定位*/ |
| | | .bottom-warp{ |
| | | .bottom-warp { |
| | | z-index: 200; |
| | | position: fixed; |
| | | left: 0; |
| | |
| | | width: 100%; |
| | | background-color: #FFFFFF; |
| | | } |
| | | |
| | | |
| | | .itembox { |
| | | /* 父容器设置宽度, 并超出部分不显示 */ |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: scroll; |
| | | |
| | | |
| | | .item { |
| | | /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */ |
| | | // width: 5517px; |
| | |
| | | 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; |
| | | 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; |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | |
| | | |
| | | .input { |
| | | padding: 0 5px; |
| | | } |
| | | |
| | | |
| | | .plus { |
| | | width: 15px; |
| | | height: 15px; |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | </style> |
| | | </style> |