editDetails

付延余

2022-07-28 548b97b82e741b67c4258661352ae28462a34f66

 pages/my-application/my-application.vue

@@ -3,6 +3,15 @@
   <view class="my-application" >
      <!-- 搜索区域 -->
      <view class="searchBox">
      <u-collapse :border="true"
                  @change="searchChange"
                  @close="searchClose"
                  @open="searchOpen"
      >
        <u-collapse-item :border="false"
                         title="搜索框"
                         name="Docs guide"
        >
         <view class="topRow">
            <view class="search">
               <u-search
@@ -16,15 +25,25 @@
               ></u-search>
            </view>

            <data-select-box ref="dataSelectBox" class="data-select-box" placeholder="请选择条件" v-model="selectText" :clearabled="true" @click="dataSelectClick"></data-select-box>
            <data-select-box ref="dataSelectBox" class="data-select-box" placeholder="请选择条件" v-model="selectText"
                             :clearabled="true" @click="dataSelectClick"></data-select-box>
         </view>
         <!-- 时间选择器 -->
         <view class="example-body"><uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" /></view>
         <view class="searchBtn"><u-button type="primary" text="搜索" @click="searchClick"></u-button> <u-button type="primary" :plain="true" text="清空" @click="emptyButtonClick"></u-button></view>
          <view class="example-body">
            <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick"/>
          </view>
          <view class="searchBtn">
            <u-button type="primary" text="搜索" @click="searchClick"></u-button>
            <u-button type="primary" :plain="true" text="清空" @click="emptyButtonClick"></u-button>
          </view>
        </u-collapse-item>
      </u-collapse>
      </view>


      <!-- 选择器 -->
      <u-picker @cancel="dataSelectCancel" @confirm="selectConfirm" :show="selectPickerShow" :columns="selectList"></u-picker>
    <u-picker @cancel="dataSelectCancel" @confirm="selectConfirm" :show="selectPickerShow"
              :columns="selectList"></u-picker>

      <!-- 我的申请卡片区域 -->
      <!-- <u-checkbox-group v-model="checkBoxValue" placement="column" @change="checkboxChange" style="margin-bottom:150px"> -->
@@ -77,7 +96,7 @@
                     </view>
                     <view @click="theFormDataClick(item.tableId)" v-if="item.status == 1 || item.status == 2">
                        <image src="@/static/home/biaodan.png" mode=""></image>
                        <view>表单数据</view>
              <view>申请详情</view>
                     </view>
                     <view v-if="item.status == 3" @click="apply(item)">
                        <image src="@/static/home/history.png" mode=""></image>
@@ -99,8 +118,11 @@

      <!-- 撤回模态框 -->
      <view class="wodeshenqingMotai">
         <u-modal width="684rpx" :show="withDrawShow" title="撤回原因" :showCancelButton="true" @confirm="withDrawConfirm" @cancel="withDrawCancel">
            <view class="slot-content"><u--textarea v-model="withDrawData.reason" placeholder="请输入撤回原因"></u--textarea></view>
      <u-modal width="684rpx" :show="withDrawShow" title="撤回原因" :showCancelButton="true" @confirm="withDrawConfirm"
               @cancel="withDrawCancel">
        <view class="slot-content">
          <u--textarea v-model="withDrawData.reason" placeholder="请输入撤回原因"></u--textarea>
        </view>
         </u-modal>
      </view>

@@ -115,6 +137,9 @@
            @cancel="batchDeleteModalCancel"
         ></u-modal>
      </view>

    <!--返回顶部-->
    <u-back-top :scroll-top="scrollTop"></u-back-top>
      
      <view class="" style="height:50px;">
         
@@ -133,6 +158,8 @@
         </view>
      </view>



      <!-- 菜单栏 -->
      <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
   </view>
@@ -142,10 +169,12 @@
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
import combinationCard from '@/components/common/combination-card/combination-card.vue';
import dataSelectBox from '@/components/common/data-select-box/data-select-box.vue';

export default {
   name: 'MyApplication',
   data() {
      return {
      scrollTop: 0,
         status: ['草稿', '处理中', '已结束', '已撤回'],
         statusColor: ['#dd8b8c', '#FF9900', '#007AFF', '#06BE00'],
         result: ['未提交', '处理中', '通过', '驳回'],
@@ -210,11 +239,15 @@
         }
      };
   },
  // 返回顶部
  onPageScroll(e) {
    // console.log('页面滑动', this.scrollTop);
    this.scrollTop = e.scrollTop;
  },
   onShow() {
      if (this.menuShow == true) {
         this.$refs.menuRef.menuClick();
      }
      this.myApplication.pageNumber = 1;
      this.init();
   },
   // 点击导航栏菜单后
@@ -235,6 +268,11 @@
            this.myApplication.status = '';
            this.myApplication.result = '';
         }
    },
    scrollTop(nVal){
      if(nVal){
        // console.log('页面滑动变化');
      }
      }
   },
   components: {
@@ -254,9 +292,7 @@
   // 下拉加载
   onPullDownRefresh() {
      console.log('refresh');
      this.myApplication.pageNumber = 1;
      this.loadingType = 0;
      this.shenqingData = [];

      setTimeout(()=> {
         uni.stopPullDownRefresh();
      }, 1000);
@@ -264,6 +300,9 @@
   },
   methods: {
      init() {
      this.myApplication.pageNumber = 1;
      this.loadingType = 0;
      this.shenqingData = [];
         this.getMoreNews();
      },
      // getProcessDataList() {
@@ -279,9 +318,13 @@
            //loadingType!=0;直接返回
            return false;
         }
      uni.showLoading({
        title: '加载中...'
      })
         this.loadingType = 1;
         uni.showNavigationBarLoading(); //显示加载动画
         this.$reqGet('getProcessDataList', this.myApplication).then(response => {
        uni.hideLoading();
            console.log('response', response);
            this.myApplication.pageNumber++; // 得到数据之后 page+1
            if (response.data.records.length < 1) {
@@ -296,8 +339,15 @@
            }
            // this.myApplication.pageNumber++; // 每触底一次 page +1
            if(this.myApplication.title||this.myApplication.status||this.myApplication.result||this.myApplication.startTime||this.myApplication.endTime){
          if(this.myApplication.pageNumber == 1){
               this.shenqingData = response.data.records
            } else{
            this.shenqingData = this.shenqingData.concat(response.data.records);
          }
        } else {
          if(this.myApplication.pageNumber == 1){
            this.shenqingData = [];
          }
               this.shenqingData = this.shenqingData.concat(response.data.records);
            }
             //将数据拼接在一起
@@ -327,6 +377,15 @@
      maskClick(e) {
         console.log('maskClick事件:', e);
      },
    searchChange(e){
      console.log('e', e);
    },
    searchClose(e){
      console.log('e', e);
    },
    searchOpen(e){
      console.log('e', e);
    },
      searchClick() {
         console.log('this.myApplication', this.myApplication);
         this.myApplication.pageNumber = 1;
@@ -334,6 +393,8 @@
         this.getMoreNews();
      },
      emptyButtonClick(){
      this.loadingType == 0;
      this.myApplication.pageNumber = 1;
         this.myApplication.title = '';
         this.selectText = '';
         this.range = [];
@@ -522,47 +583,62 @@
::v-deep.my-application {
   width: 100%;
   height: 100%;

   .searchBox {
      width: 94%;
      margin: vww(16) auto;

    .u-collapse{
      .u-collapse-item{
        .u-collapse-item__content{
      .topRow {
         display: flex;
         justify-content: space-between;
         flex-wrap: nowrap;

         .search {
            // width: vww(160);
            width: 48%;

            .u-search {
               border: 1px solid #d1d1d1;
               border-radius: vww(4);

               .u-search__content {
                  height: 38px;
                  height: vww(38);
                  background-color: #ffffff !important;

                  .u-search__content__icon {
                     width: 10px;
                     height: 5.5px;

                     .u-icon {
                        .u-icon__icon {
                           font-size: 20px !important;
                        }
                     }
                  }

                  .u-search__content__close {
                     width: 16px !important;
                     height: 16px !important;
                     background-color: #cccccc !important;

                     .u-icon {
                        .u-icon__icon {
                           font-size: 10px !important;
                        }
                     }
                  }

                  .u-search__content__input {
                     margin-left: vww(10);
                     background-color: #ffffff !important;

                     .uni-input-placeholder {
                        color: #cccccc !important;
                     }

                     .u-search__content__input--placeholder {
                        // color:#CCCCCC;
                     }
@@ -570,9 +646,11 @@
               }
            }
         }

         .data-select-box {
            width: 48%;
         }

         // 下拉菜单
         // .data-selet {
         //    border: 1px solid #d1d1d1;
@@ -611,6 +689,7 @@
         width: 100%;
         display: flex;
         align-items: center;

         .u-button {
            width: vww(90);
            height: vww(32);
@@ -618,17 +697,25 @@
         }
      }
   }
      }
    }


  }

   // 卡片中间
   .center-container {
      display: flex;
      flex-direction: column;

      .center-content__one {
         display: flex;

         view {
            width: 50%;
         }
      }

      .center-content__two {
         display: flex;
         // margin: vww(10) 0;
@@ -636,15 +723,19 @@
            width: 50%;
         }
      }

      .center-content__three {
         display: flex;

         view {
            width: 50%;
         }
      }

      .center-content__four {
      }
   }

   // 中间部分样式
   .center-margin {
      margin-bottom: vww(16);
@@ -655,17 +746,21 @@
      .bottom-content__item {
         display: flex;
         justify-content: space-around;

         view {
            display: flex;
            justify-content: center;
            align-content: center;
            margin-right: vww(10);
            &:nth-last-child() {

        &:nth-last-child(1) {
               margin-right: 0;
            }

            view {
               display: inline-block;
            }

            image {
               width: vww(16);
               height: vww(16);
@@ -683,6 +778,7 @@
         .u-textarea {
            width: vww(280);
            height: vww(90) !important;

            .uni-textarea-wrapper {
               height: vww(90) !important;
            }
@@ -700,15 +796,19 @@
      align-items: center;
      justify-content: space-between;
      background-color: #f5f5f5;

      .bottomTabbar_checkBox {
         margin-left: vww(16);

         .u-checkbox-group {
            .u-checkbox {
            }
         }
      }

      .bottomTabbar_button {
         display: flex;

         .u-button {
            font-size: 13px;
            margin-right: vww(14);