feat:库管首页样式更新

yangan

2024-06-03 13f63b301fbae86ad08c6517461507101f913d12

 pages/loadUnload-page/selectTarget/selectTarget.vue

@@ -1,6 +1,14 @@
<template>
   <view class="main">
      <u--form labelPosition="top"
      <!-- 当前选择仓库 -->
      <view class="top-tag">
         <u-tag 
         size='large'
         :text="dataForm.firstClass ? dataForm.firstClass : '请选择仓库'"
         @click="firstClassSelect"
         ></u-tag>
      </view>
      <!-- <u--form labelPosition="top"
         labelWidth="20%"
         :borderBottom="false"
         :model="dataForm"
@@ -17,56 +25,82 @@
                     size="30"></u-icon></u-cell>
            </u-cell-group>
         </u-form-item>
         <!-- <u-form-item label="煤仓"
            prop="secondClass"
            :borderBottom="false">
            <u-cell-group>
               <u-cell :title="dataForm.secondClass"
                  value="请选择"
                  @click="secondClassSelect"
                  :disabled="!dataForm.firstClass">
                  <u-icon name="arrow-right"
                     slot="right-icon"
                     size="30"></u-icon></u-cell>
            </u-cell-group>
         </u-form-item>
         <u-form-item label="磅单"
            prop="orderType"
            :borderBottom="false">
            <u-cell-group>
               <u-cell :title="dataForm.orderType"
                  :value="isOrderType"
                  @click="orderTypeSelect">
                  <view slot="right-icon"
                     @click.stop="cleanOrderType">
                     <u-icon :name="!dataForm.orderType?'arrow-right':'close-circle'"
                        size="30"></u-icon>
                  </view>
               </u-cell>
            </u-cell-group>
         </u-form-item> -->
      </u--form>
      <view class="coal-name"
         v-show="coalList.length!==0">
         <u-checkbox-group v-model="checkedCoal"
            placement="column"
            @change="checkboxChange"
            size="30">
            <u-checkbox :customStyle="{marginBottom: '8px',fontSize:'20px'}"
               v-for="(item, index) in coalList"
               :key="item.id"
               :label="item.name"
               :name="item.name"
               labelSize='40'
               iconSize='40'></u-checkbox></u-checkbox-group>
      </view>
      <view style="margin-top: 20rpx;">

      </u--form> -->
		 
      <!-- <view style="margin-top: 20rpx;">
         <u-button type="primary"
            shape="circle"
            text="查看该仓库收发单"
            @click.stop="formHandle"></u-button>
      </view>
      </view> -->
      <!-- 煤场 -->
      <view class='div-box'>
            <u-empty mode="data"
                     icon="http://cdn.uviewui.com/uview/empty/data.png"
                     text="暂无数据"
                     textSize="30"
                     iconSize="1000"
                     v-if="detailData.length===0"></u-empty>
         <!-- 渲染区域 -->
         <zh-collapse @change='change' accordion     v-for="item,i in detailData" 		
         :key="i">
            <zh-collapse-item 
         class="collItem"
                @clickContent='clickContent'>
                <view class="" slot='title'>
               <view class="history-information">
                     <view class="first">
                        <view class="">{{ item.deptName || '' }}</view>
                        <view class=""><u-icon name="arrow-right"
                              color="#999999"
                              size="40"></u-icon></view>
                     </view>
                     <view class="second">
                        <view class="coal-name">{{ item.coalName || '' }}</view>
                        <view class="order-type">{{ item.orderType || '' }}</view>
                     </view>
                     <view class="third">
                        <view class="third-line">
                           <view class="third-line_text">领取数:</view>
                           <view class="third-line_num">{{ item.cars2 }}</view>
                        </view>
                        <view class="third-line">
                           <view class="third-line_text">剩余数:</view>
                           <view class="third-line_num"
                              v-if="roleType == 1">{{ item.carNumSurplus1 }}</view>
                           <view class="third-line_num"
                              v-else-if="roleType == 2">{{ item.carNumSurplus }}</view>
                        </view>
                        <view class="third-line">
                           <view class="third-line_text">提煤单个数:</view>
                           <view class="third-line_num">{{ item.tmCount }}</view>
                        </view>
                     </view>
                     <view class="fourth">
                        <view class="fourth-icon">
                           <view
                              style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9096/appimg/image/banner/clock.png') no-repeat;background-size: cover">
                           </view>
                        </view>
                        <view class="senddate">{{ item.sendDate }}</view>
                     </view>
                     <view class="fourth">
                        <view class="fourth-icon">
                           <view
                              style="width: 26rpx;height: 26rpx;line-height: 26rpx;background: url('https://mx.jzeg.cn:9096/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover;">
                           </view>
                        </view>
                        <view class="senddate">{{ item.orderCode }}</view>
                     </view>
               </view>
				
            </view>
                <view class="" slot='cont'>支持定义内容</view>
            </zh-collapse-item>
        </zh-collapse>

      </view>
      <u-action-sheet :actions="firstClassActionsList"
         :show="firstClassShow"
         cancelText='取消'
@@ -110,6 +144,7 @@
            coalList: [],
            checkedCoal: [],
            userInfo: {},
            detailData:[],
            filedId: "",
            selectedCoal: [],
            orderTypeShow: false,
@@ -145,6 +180,7 @@
                  this.firstClassActionsList = res.data;
                  if(res.data.length === 1){
                     this.dataForm.bunkerId = res.data[0].id;
                        uni.setStorageSync('bunkerId',res.data[0].id)
                     this.dataForm.firstClass = res.data[0].name;
                     setTimeout(()=>{
                        uni.navigateTo({
@@ -169,6 +205,16 @@
         firstClassSelectClick(val) {
            this.dataForm.firstClass = val.name;
            this.dataForm.bunkerId= val.id;
            uni.setStorageSync('bunkerId', val.id);
            this.$reqGet('getTaskCoalListByBunkerId', { bunkerId:this.dataForm.bunkerId }).then(res => {
               uni.hideLoading()
               if (res.code === 0) {
                  this.detailData = res.data;
                  console.log(this.detailData,'detailData')
               } else {
                  this.$u.toast('加载失败')
               }
            })
            this.filedId = val.id
         },
         // 获取煤仓
@@ -221,7 +267,15 @@
               })
            })
            
         }
         },
         change(){

         },
         close(){

         },
         open(){}

      },
      onShow(){
         uni.showLoading({
@@ -233,6 +287,7 @@
                  this.firstClassActionsList = res.data;
                  if(res.data.length === 1){
                     this.dataForm.bunkerId = res.data[0].id;
                     uni.setStorageSync('bunkerId', res.data[0].id)
                     this.dataForm.firstClass = res.data[0].name;
               
                  }
@@ -253,7 +308,24 @@
      margin: 10px;
      // margin-top: vww(100);
      position: relative;
      top: vww(-120);
      top: vww(-160);
      .top-tag{
             width: 25%;
            height: 100rpx;
            margin-left: 70%;
            display: flex;
            /* margin-top: 40rpx; */
            color: #fff;
            justify-content: space-between;
               }

               .div-box{
                  width: 100%;
                  /deep/ .u-collapse{
                     background: #fff;
                  }
						
               }
   }

   .slide-fade-enter-active {
@@ -261,11 +333,117 @@
   }

   .coal-name {
      width: 95%;
      width: 75%;
      min-height: vww(100);

      .u-checkbox-group {
         .u-checkbox {}
      }
   }
   .box{
      display: flex;
      flex-direction: column;
      width: 100%;
      .box-top{
         width: 100%;
         height: 100rpx;
         display: inline-block;
         display: flex;
         justify-content: space-between;
         align-items: center;

      }
   }
            .collItem{
               margin-top: 30rpx;
            }
            .history-information {
		
         background: #ffffff;
         border-radius: 20rpx;
         @include flex flex-direction: column;
         padding: 10px;
         align-items: flex-start;
         justify-content: space-evenly;
         box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);


         .first {
            width: 96%;
            height: 34rpx;
            font-size: 32rpx;
            font-weight: 300;
            color: #303030;
            @include flex;
            margin: vww(10) vww(10) 0;
         }

         .second {
            width: 100%;
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;
            justify-content: flex-start;

            .coal-name {
               min-width: vww(20);
               height: vww(20);
               margin-right: vww(21);
            }

            .order-type {
               height: 45rpx;
               color: #035cfb;
               border: 2px solid #035cfb;
               border-radius: 4rpx;
               padding: vww(2) vww(4);
               text-align: center;
            }
         }

         .third {
            width: 96%;
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;

            .third-line {
               @include flex;

               &_text {
                  color: #919090;
               }

               &_num {
                  color: #035cfb;
               }
            }
         }

         .fourth {
            width: 100%;
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;

            .fourth-icon {
               width: vww(13);
               height: vww(13);
               margin-right: vww(14);
            }

            .senddate {
               flex: 1;
            }
         }
      }
</style>