|
@@ -0,0 +1,364 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="借出台账"></u-navbar>
|
|
|
+ <ujp-collapse accordion >
|
|
|
+ <ujp-collapse-item v-for="(itemDept,index) in list"
|
|
|
+ :open="itemDept.id==valueDept"
|
|
|
+ :key="index" :title="itemDept.name" >
|
|
|
+ <view >
|
|
|
+
|
|
|
+ <view class="list" v-for="(item,index2) in itemDept.list" :key="index2">
|
|
|
+
|
|
|
+ <view class="list-infos">
|
|
|
+
|
|
|
+ <view class="infos-head">
|
|
|
+ <view class="name">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view class="qr-code ">
|
|
|
+ 领取数量:{{itemDept.map.get(item.title).length}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="infos">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-name">
|
|
|
+ 规格:
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{itemDept.map.get(item.title)[0].specifications}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-name">
|
|
|
+ 型号:
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+
|
|
|
+ {{itemDept.map.get(item.title)[0].model}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="prepare-out" >
|
|
|
+ <view class="head">
|
|
|
+ <view class="amount" v-if="false">
|
|
|
+ <view class="title">
|
|
|
+ 领用数量:
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ {{itemDept.map.get(item.title).length}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="unfold" v-show="itemDept.map.get(item.title).length>4" @click="changeShow(item)">
|
|
|
+ {{item.show?'收起':'展开'}}<u-icon name="arrow-down"></u-icon>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 编号 -->
|
|
|
+ <view class="serial-number" v-for="(item2,j) in itemDept.map.get(item.title)" v-show="j<4||item.show"
|
|
|
+ :key="j">
|
|
|
+ <view class="itemLine" style=" color: #9E9E9E;" v-if="!item2.show" >{{item2.outUserName}}{{item2.outUserPhone}}</view>
|
|
|
+ <view class="itemLine">
|
|
|
+ <span class="text">
|
|
|
+ 设备编号:
|
|
|
+ </span>
|
|
|
+ <span class="number">
|
|
|
+ <span v-if="item2.healthStatus!=1"
|
|
|
+ :style="' margin-right: 1px;color:'+recordStatusColor(item2.healthStatus)">[{{item2.healthStatusN}}]</span>
|
|
|
+
|
|
|
+ {{item2.code}}
|
|
|
+ </span>
|
|
|
+ <!-- <span class="view" @tap="ckInfo(item2)">
|
|
|
+ 查看设备
|
|
|
+
|
|
|
+ </span> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </ujp-collapse-item>
|
|
|
+ </ujp-collapse>
|
|
|
+ <u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ import ujpCollapse from "@/pages/otherFunctions/components/u-collapse.vue"
|
|
|
+ import ujpCollapseItem from "@/pages/otherFunctions/components/u-collapse-item.vue"
|
|
|
+
|
|
|
+
|
|
|
+ import * as API from '@/apis/pagejs/index.js'
|
|
|
+ import {
|
|
|
+ recordItemStatus,
|
|
|
+ recordStatusColor
|
|
|
+ } from '@/apis/status.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ valueDept:"",
|
|
|
+ list: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ ujpCollapse,ujpCollapseItem
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ recordItemStatus,
|
|
|
+ recordStatusColor,
|
|
|
+ changeShow(item) {
|
|
|
+ console.log(item.show)
|
|
|
+ console.log(item)
|
|
|
+ if (item.show) {
|
|
|
+ item.show = false;
|
|
|
+ } else {
|
|
|
+ item.show = true;
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+
|
|
|
+ },
|
|
|
+ ckInfo(item) {
|
|
|
+ console.log("1111")
|
|
|
+ var url = "/pages/otherFunctions/equipmentRetrieval/equipmentInfo?id=" + item.id;
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url,
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.outDeviceList().then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ this.list = res.data.departmentList;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.list.forEach(item2 => {
|
|
|
+ if(this.valueDept==""){
|
|
|
+ this.valueDept=item2.id
|
|
|
+ }
|
|
|
+ var map = new Map()
|
|
|
+ var listmap = [];
|
|
|
+ item2.outDeviceInfoList.forEach(item => {
|
|
|
+
|
|
|
+ if (map.has(item.title)) {
|
|
|
+ var list = map.get(item.title)
|
|
|
+ list.unshift(item)
|
|
|
+ list.sort((a,b)=>{
|
|
|
+ return a.outUserId==b.outUserId?1:-1
|
|
|
+ })
|
|
|
+ var k=""
|
|
|
+ for(var i in list){
|
|
|
+ if(k==""){
|
|
|
+ k=list[i].outUserId
|
|
|
+ list[i].show=false;
|
|
|
+ }else{
|
|
|
+ if(list[i].outUserId==k){
|
|
|
+ list[i].show=true;
|
|
|
+ }else{
|
|
|
+ k=list[i].outUserId;
|
|
|
+ list[i].show=false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ map.set(item.title, list)
|
|
|
+ } else {
|
|
|
+ map.set(item.title, [item])
|
|
|
+ listmap.push({
|
|
|
+ title:item.title,
|
|
|
+ show:false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item2.map = map;
|
|
|
+ item2.list = listmap;
|
|
|
+ console.log(item2)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+ .list {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 24rpx;
|
|
|
+ padding: 22rpx 32rpx;
|
|
|
+
|
|
|
+ // 清单信息
|
|
|
+ .list-infos {
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .infos-head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qr-code {
|
|
|
+ border-radius: 4px;
|
|
|
+ //background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(16, 98, 213, 1) 100%);
|
|
|
+ //color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ img {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos {
|
|
|
+ //margin-top: 6rpx;
|
|
|
+ display: flex;
|
|
|
+ color: #777777;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ .infos-1 {
|
|
|
+ margin-right: 68rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .infos-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ width: 50%;
|
|
|
+ .item-value {
|
|
|
+ max-width: 200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .address,
|
|
|
+ .remark {
|
|
|
+ display: flex;
|
|
|
+ color: #777777;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .prepare-out {
|
|
|
+ padding: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(245, 246, 249, 1);
|
|
|
+
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ display: flex;
|
|
|
+ color: rgba(0, 81, 255, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unfold {
|
|
|
+ color: rgba(146, 158, 165, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .u-icon--right {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .option {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 30rpx;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 编号
|
|
|
+ .serial-number {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .itemLine {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .view {
|
|
|
+ float: right;
|
|
|
+ color: #0051ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 备注
|
|
|
+ .textarea {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-indent: 24rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ background-color: rgba(241, 242, 245, 1);
|
|
|
+ color: rgba(136, 136, 136, 1);
|
|
|
+ border-radius: 8px;
|
|
|
+ font-family: Microsoft Yahei;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|