feat:库管首页样式更新

yangan

2024-06-03 13f63b301fbae86ad08c6517461507101f913d12

 pages/loadUnload-page/selectTarget/selectTarget.vue

@@ -1,11 +1,19 @@
<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"
         ref="uForm">
         <u-form-item label="煤场"
         <u-form-item label="仓库"
            prop="firstClass"
            :borderBottom="false">
            <u-cell-group>
@@ -17,40 +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">
                  <u-icon name="arrow-right"
                     slot="right-icon"
                     size="30"></u-icon></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="提交"
            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='取消'
@@ -58,12 +108,19 @@
         @close='firstClassClose'
         @select="firstClassSelectClick"></u-action-sheet>
      <!-- 煤仓 -->
      <u-action-sheet :actions="secondClassActionsList"
      <!-- <u-action-sheet :actions="secondClassActionsList"
         :show="secondClassShow"
         cancelText='取消'
         :closeOnClickOverlay='true'
         @close='secondClassClose'
         @select="secondClassSelectClick"></u-action-sheet>
         @select="secondClassSelectClick"></u-action-sheet> -->
      <!--磅单类型 -->
      <!-- <u-action-sheet :actions="orderTypeList"
         :show="orderTypeShow"
         cancelText='取消'
         :closeOnClickOverlay='true'
         @close='orderTypeClose'
         @select="orderTypeSelectClick"></u-action-sheet> -->
   </view>
</template>

@@ -74,6 +131,8 @@
            dataForm: {
               firstClass: "",
               secondClass: "",
               orderType: '',
               bunkerId:""
            },
            index: '',
            // 煤场操作菜单
@@ -85,8 +144,22 @@
            coalList: [],
            checkedCoal: [],
            userInfo: {},
            detailData:[],
            filedId: "",
            selectedCoal: []
            selectedCoal: [],
            orderTypeShow: false,
            orderTypeList: [{
                  name: '外销',
                  id: Math.floor(Math.random() * 100) + 1,
               },
               {
                  name: '外购',
                  id: Math.floor(Math.random() * 100) + 1,
               }
            ],
            isOrderType: '请选择', //磅房类型是否选择了 选择了清空
            cleanIconClick: true, //修改点击清空磅房选择会出现

         };
      },
      methods: {
@@ -101,10 +174,21 @@
            uni.showLoading({
               title: "加载中"
            })
            this.$reqGet('getDeptIdFiled').then(res => {
            this.$reqGet('getWarehouseList').then(res => {
               uni.hideLoading()
               if (res.code === 0) {
                  this.firstClassActionsList = res.data
                  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({
                     url: `/pages/loadUnload-page/loadUnload-detail/loadUnload-detail?bunkerId=${this.dataForm.bunkerId}`
               })
                     },300)
					
                  }
               } else {
                  this.$u.toast('加载失败')
               }
@@ -119,49 +203,100 @@
            this.firstClassShow = false
         },
         firstClassSelectClick(val) {
            this.dataForm.firstClass = val.name
            this.getFiledIdCoalBunker(val.id)
            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
         },
         // 获取煤仓
         getFiledIdCoalBunker(filedId) {
            this.$reqGet('getFiledIdCoalBunker', { filedId, }).then(res => {
               this.secondClassActionsList = res.data
            })
         },
         // getFiledIdCoalBunker(filedId) {
         //    this.$reqGet('getFiledIdCoalBunker', { filedId, }).then(res => {
         //       this.secondClassActionsList = res.data
         //    })
         // },
         //煤仓菜单
         secondClassSelect() {
            this.secondClassShow = true
         },
         secondClassClose() {
            this.secondClassShow = false
         },
         secondClassSelectClick(val) {
            this.dataForm.secondClass = val.name
            this.coalList = this.secondClassActionsList.find(v => v.id === val.id).coalNames.split(',').map(v => {
               return {
                  name: v,
                  id: Math.floor(Math.random() * 100) + 1,
                  checked: false
               }
            })
         },
         checkboxChange(e) {
            this.selectedCoal = e
         },
         // secondClassSelect() {
         //    this.secondClassShow = true
         // },
         // secondClassClose() {
         //    this.secondClassShow = false
         // },
         // secondClassSelectClick(val) {
         //    this.dataForm.secondClass = val.name
         //    this.coalList = this.secondClassActionsList.find(v => v.id === val.id).coalNames.split(',').map(v => {
         //       return {
         //          name: v,
         //          id: Math.floor(Math.random() * 100) + 1,
         //          checked: false
         //       }
         //    })
         // },
         // orderTypeSelect() {
         //    this.orderTypeShow = true
         // },
         // orderTypeClose() {
         //    this.orderTypeShow = false
         // },
         // orderTypeSelectClick(val) {
         //    this.orderTypeShow = false
         //    this.dataForm.orderType = val.name
         //    this.isOrderType = ''
         // },
         // cleanOrderType() {
         //    this.dataForm.orderType = null
         //    this.isOrderType = '请选择'
         //    this.orderTypeShow = false
         // },
         // checkboxChange(e) {
         //    this.selectedCoal = e
         // },
         formHandle() {
            if (!this.dataForm.firstClass || !this.dataForm.secondClass) return this.$u.toast('请选择煤场或者煤仓')
            if (this.selectedCoal.length === 0) return this.$u.toast('请选择煤种')
            this.$reqPost('updateUser', Object.assign(this.userInfo, {
               responsibilityCoal: this.selectedCoal.join(),
               filedId: this
                  .filedId
            }), 'json').then(res => {
               uni.navigateTo({
                  url: `/pages/loadUnload-page/loadUnload-detail/loadUnload-detail`
            if (!this.dataForm.firstClass) return this.$u.toast('请选择煤场或者煤仓');
            this.$nextTick(()=>{
                uni.navigateTo({
                  url: `/pages/loadUnload-page/loadUnload-detail/loadUnload-detail?bunkerId=${this.dataForm.bunkerId}`
               })
            })
         }
			   
         },
         change(){

         },
         close(){

         },
         open(){}

      },
      onShow(){
         uni.showLoading({
               title: "加载中"
            })
            this.$reqGet('getWarehouseList').then(res => {
               uni.hideLoading()
               if (res.code === 0) {
                  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;
					
                  }
               } else {
                  this.$u.toast('加载失败')
               }
            }).then(() => {
               this.getUserInfo()
            })
      }
   }
</script>
@@ -173,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 {
@@ -181,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>