tatolpage

付延余

2022-07-26 7c3218e12105b87cab21e9ced57c99c339ffac10

 pages/my-todo/my-todo.vue

@@ -2,30 +2,40 @@
   <!-- 我的待办 -->
   <view class="my-todo">
      <!-- 搜索区域 -->
      <view class="searchBox">
         <view class="search">
            <u-search @clickIcon="searchIconClick" :clearabled="false" :showAction="false" placeholder="请输入标题" v-model="searchData" shape="square"></u-search>
         </view>
         <!-- 状态选择器 -->
         <view class="data-selet" @click="statusSeletShow = true">
            <view class="content">
               <text>{{ dataSeletText }}</text>
      <view class="searchContainer">
         <view class="searchBox">
            <view class="search">
               <u-search @clickIcon="searchIconClick" :clearabled="true" :showAction="false" placeholder="请输入标题" v-model="todoParams.title" shape="square"></u-search>
            </view>
            <view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
            <!-- 状态选择器 -->
            <!-- <view class="data-selet" @click="statusSeletShow = true">
               <view class="content">
                  <text>{{ dataSeletText }}</text>
               </view>
               <view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
            </view> -->
            <view class="search">
               <u-search @clickIcon="searchIconClick" :clearabled="true" :showAction="false" placeholder="请输入任务名称" v-model="todoParams.name" shape="square"></u-search>
            </view>
         </view>
      </view>

      <!-- 时间搜索区域 -->
      <view class="timeContiner">
         <uni-datetime-picker class="time-picker" type="date" :clear-icon="false" v-model="createTime" @change="startDateChange" placeholder="开始时间" />
         <uni-datetime-picker class="time-picker" type="date" :clear-icon="false" v-model="endTime" @change="endDateChange" placeholder="结束时间" />
			
         <!-- 时间搜索区域 -->
         <view class="timeContiner">
            <uni-datetime-picker class="time-picker" type="date" :clear-icon="true" v-model="todoParams.startDate" @change="startDateChange" placeholder="开始时间" />
            <uni-datetime-picker class="time-picker" type="date" :clear-icon="true" v-model="todoParams.endDate" @change="endDateChange" placeholder="结束时间" />
         </view>
			
         <view class="searchButton">
            <u-button type="primary" text="搜索" @click="searchButtonClick"></u-button>
            <u-button type="primary" text="清空" :plain="true" @click="emptyButtonClick"></u-button>
         </view>
      </view>

      <!-- 我的待办卡片区域 -->
      <u-checkbox-group v-model="checkBoxValue" placement="column" @change="checkboxChange" style="margin-bottom:50px">
         <combination-card v-for="(item, index) in daibanData" index="index">
            <template v-slot:top>
               <u-checkbox size="35" :key="item.id" :name="item.id"></u-checkbox>
               <u-checkbox size="35" :key="item.id" :name="item.id+item.procInstId"></u-checkbox>
               <view>
                  <text>{{ item.actBusiness.title }}</text>
               </view>
@@ -53,11 +63,11 @@
               <view class="bottom-container">
                  <!-- 待办按钮 -->
                  <view class="bottom-content__item">
                     <view @click="theFormDataClick">
                     <!-- <view @click="theFormDataClick">
                        <image src="@/static/home/jindu.png" mode=""></image>
                        <view>申请详情</view>
                     </view>
                     <view @click="adoptModalShow = true">
                     </view> -->
                     <view @click="adopClick(item)">
                        <image src="@/static/home/tongguo.png" mode=""></image>
                        <view>通过</view>
                     </view>
@@ -65,7 +75,7 @@
                        <image src="@/static/home/bohui.png" mode=""></image>
                        <view>驳回</view>
                     </view>
                     <view @click="approvalHistoryClick">
                     <view @click="approvalHistoryClick(item.procInstId)">
                        <image src="@/static/home/history.png" mode=""></image>
                        <view>历史</view>
                     </view>
@@ -83,15 +93,18 @@
            </u-checkbox-group>
         </view>
         <view class="bottomTabbar_button">
            <u-button :plain="true" type="primary" text="批量驳回" @click="rejectModalShow = true"></u-button>
            <u-button type="primary" text="批量通过" @click="adoptModalShow = true"></u-button>
            <u-button :plain="true" type="primary" text="批量驳回" @click="batchRejectClick"></u-button>
            <u-button type="primary" text="批量通过" @click="batchAdoptClick"></u-button>
         </view>
      </view>

      <!-- 通过模态框 -->
      <view class="adoptModal">
         <u-modal width="684rpx" :show="adoptModalShow" title="审批通过" :showCancelButton="true" @confirm="adoptModalConfirm" @cancel="adoptModalCancel">
            <view class="slot-content"><u--textarea v-model="adoptModalContent" placeholder="请输入审批意见"></u--textarea></view>
            <view class="slot-content"><view class="rejectMesaage">
                  <u-icon name="info-circle-fill" color="#0307ff"></u-icon>
                  <text>{{ modalType == 0 ? '注意：将默认分配给节点设定的所有可审批用户' : '注意：所有流程将驳回至发起人' }}</text>
               </view><u--textarea v-model="adoptForm.comment" placeholder="请输入审批意见"></u--textarea></view>
         </u-modal>
      </view>

@@ -99,8 +112,12 @@
      <view class="rejectModal">
         <u-modal width="684rpx" :show="rejectModalShow" title="驳回" :showCancelButton="true" @confirm="rejectModalConfirm" @cancel="rejectModalCancel">
            <view class="slot-content">
               <u--textarea v-model="rejectModalContent" placeholder="请输入审批意见"></u--textarea>
               <view class="rejectBack">
               <view class="rejectMesaage">
                  <u-icon name="info-circle-fill" color="#0307ff"></u-icon>
                  <text>{{ modalType == 0 ? '注意：将默认分配给节点设定的所有可审批用户' : '注意：所有流程将驳回至发起人' }}</text>
               </view>
               <u--textarea v-model="rejectForm.comment" placeholder="请输入审批意见"></u--textarea>
               <!-- <view class="rejectBack">
                  <view class="rejectBack-title"><text>驳回至</text></view>
                  <view class="data-selet" @click="statusSeletShow = true">
                     <view class="content">
@@ -108,7 +125,7 @@
                     </view>
                     <view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
                  </view>
               </view>
               </view> -->
            </view>
         </u-modal>
      </view>
@@ -138,9 +155,6 @@
         </u-modal>
      </view> -->
      
      <!-- 选择器 -->
      <u-picker @cancel="statusSeletShow = false" @confirm="statusConfirm" :show="statusSeletShow" :columns="statusList"></u-picker>
		
      <!-- 菜单栏 -->
      <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
   </view>
@@ -152,38 +166,57 @@
export default {
   data() {
      return {
         // 条件搜索
         searchData: '',
         dataSeletText: '请选择状态',
         // 时间选择
         createTime: '',
         endTime: '',
         // 选择器
         statusSeletShow: false,
         statusList: [['中国', '美国', '日本']],
         // 复选框
         checkBoxValue:[],
         totalSelectValue:[],
         // 通过模态框
         adoptModalShow: false,
         adoptModalContent: '',
         adoptDataBox:[],
         // 通过请求
         adoptForm: {
            ids: '',
            comment: ''
         },
         // 驳回模态框
         rejectModalShow: false,
         rejectModalContent: '',
         menuShow:false,
         rejectDataBox:[],
         // 驳回请求
         rejectForm: {
            procInstIds: '',
            comment: ''
         },
         modalType:0,
         // data
         daibanData: [],
         // 待办
         todoParams: {
            name: '',
            pageNumber: 1,
            pageSize: 10
            pageSize: 10,
            title: '',
            startDate: '',
            endDate: '',
         },
         // 上拉加载更多
         timer: {},
         load: 0,
         loadingText: '加载中...',
         loadingType: 0,
         contentText: {
            contentDown: '上拉显示更多',
            contentRefresh: '正在加载...',
            contentNomore: '没有更多数据了'
         }
      };
   },
   onShow(){
      if(this.menuShow == true){
         this.$refs.menuRef.menuClick()
      }
      this.myApplication.pageNumber = 1;
      this.init();
   },
   // 点击导航栏菜单后
@@ -195,40 +228,108 @@
      combinationCard,
      popupMenu
   },
   // 上拉加载更多
   onReachBottom() {
      if (this.timer != null) {
         clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
         this.getMoreNews();
      }, 1000);
   },
   // 下拉加载
   onPullDownRefresh() {
      console.log('refresh');
      this.todoParams.pageNumber = 1;
      this.loadingType = 0;
      this.daibanData = [];
      setTimeout(()=> {
         uni.stopPullDownRefresh();
      }, 1000);
      this.init();
   },
   methods: {
      init(){
         this.todoList();
         // this.todoList();
         this.getMoreNews();
      },
      // 待办列表
      todoList(){
      // todoList(){
      //    this.$reqGet('todoList', this.todoParams).then(res => {
      //       if (res.code === 0) {
      //          this.daibanData = res.data.content;
      //       }
      //    });
      // },
      getMoreNews() {
         if (this.loadingType !== 0) {
            //loadingType!=0;直接返回
            return false;
         }
         this.loadingType = 1;
         uni.showNavigationBarLoading(); //显示加载动画
         this.$reqGet('todoList', this.todoParams).then(res => {
            if (res.code === 0) {
               this.daibanData = res.data.content;
            }
         });
               // if (res.code === 0) {
               //    this.daibanData = res.data.content;
               // }
               this.todoParams.pageNumber++; // 得到数据之后 page+1
               if (res.data.content.length < 1) {
                  // 没有数据
                  this.loadingType = 2;
                  uni.hideNavigationBarLoading(); // 关闭加载动画
                  uni.showToast({
                     title: '没有更多数据了！',
                     icon: 'error'
                  });
                  return;
               }
					
               if(this.todoParams.name||this.todoParams.startTime||this.todoParams.endTime||this.todoParams.title){
                  this.daibanData = res.data.content
               } else{
                  this.daibanData = this.daibanData.concat(res.data.content);
               }
                //将数据拼接在一起
               this.loadingType = 0; // 将loadingType归0重置
               uni.hideNavigationBarLoading(); // 关闭加载动画
            });
      },
      // 搜索点击
      searchButtonClick(){
         this.todoParams.pageNumber = 1;
         this.init();
      },
      // 清空
      emptyButtonClick(){
         this.todoParams.name = '';
         this.todoParams.title = '';
         this.todoParams.startDate = '';
         this.todoParams.endDate = '';
         this.init();
      },
      menushow(e){
         this.menuShow = e;
      },
      // 时间选择器
      startDateChange() {
         this.queryRealTimeShippingData.startDate = '';
         this.$nextTick(() => {
            console.log(this.queryRealTimeShippingData);
            this.realTimeShipping();
         });
         // this.queryRealTimeShippingData.startDate = '';
         // this.$nextTick(() => {
         //    console.log(this.queryRealTimeShippingData);
         //    this.realTimeShipping();
         // });
      },
      endDateChange() {
         this.queryRealTimeShippingData.endDate = '';
         this.$nextTick(() => {
            console.log(this.queryRealTimeShippingData);
            this.realTimeShipping();
         });
         // this.queryRealTimeShippingData.endDate = '';
         // this.$nextTick(() => {
         //    console.log(this.queryRealTimeShippingData);
         //    this.realTimeShipping();
         // });
      },
      // 搜索
      searchIconClick() {
         console.log(1111, this.searchData);
      },
		
      // 状态
      statusConfirm(a) {
         this.statusSeletShow = false;
@@ -241,7 +342,7 @@
      totalSelectChange(n){
         if(n[0] == 'tatalSelect'){
            this.daibanData.forEach(item=>{
               this.totalSelectValue.push(item.id)
               this.totalSelectValue.push(item.id+item.procInstId)
            })
            this.checkBoxValue = this.totalSelectValue
         } else {
@@ -256,14 +357,40 @@
         });
      },
      // 审批历史
      approvalHistoryClick() {
      approvalHistoryClick(v) {
         uni.navigateTo({
            url: '/pages/approval-history/approval-history'
            url: `/pages/approval-history/approval-history?index=${v}`
         });
      },
      // 通过
      adopClick(v){
         this.adoptModalShow = true;
         this.adoptForm.ids = v.id;
         this.modalType = 0;
      },
      batchAdoptClick(){
         if(this.checkBoxValue.length != 0){
            this.adoptModalShow = true;
         } else {
            this.$u.toast('未选择申请！')
         }
      },
      // 通过模态框
      adoptModalConfirm() {
         this.adoptModalShow = false;
         this.checkBoxValue.forEach(item=>{
            this.adoptDataBox.push(item.slice(0,6))
         })
         this.adoptForm.ids = this.adoptDataBox.toString();
         this.$reqPost('passAll', this.adoptForm, 'form').then(res => {
            console.log('是否还原',this.adoptForm.ids,this.rejectForm.procInstIds);
            if (res.code == 0) {
               this.$u.toast('操作成功!');
            } else {
               this.$u.toast('添加失败!!');
            }
            this.init();
         });
      },
      adoptModalCancel() {
         this.adoptModalShow = false;
@@ -271,9 +398,36 @@
      // 驳回模态框
      rejectModalConfirm() {
         this.rejectModalShow = false;
         this.checkBoxValue.forEach(item=>{
            this.rejectDataBox.push(item.slice(6,12))
         })
         this.rejectForm.procInstIds = this.rejectDataBox.toString();
         this.$reqPost('backAll', this.rejectForm, 'form').then(res => {
            if (res.code == 0) {
               this.$u.toast('操作成功！');
            } else {
               this.$u.toast('操作失败！！！');
            }
            this.init();
         });
      },
      rejectModalCancel() {
         this.rejectModalShow = false;
      },
      rejectClick(v) {
         this.modalType = 1;
         this.rejectModalShow = true;
         this.rejectForm.procInstIds = v.procInstId;
      },
      batchRejectClick(){
         if(this.checkBoxValue.length != 0){
            this.rejectModalShow = true;
				
            console.log(this.rejectDataBox);
         } else{
            this.$u.toast('未选中申请！')
         }
			
      }
   }
};
@@ -282,87 +436,102 @@
<style lang="scss" scoped>
::v-deep.my-todo {
   // 搜索区域
   .searchBox {
      width: 91%;
      display: flex;
      justify-content: space-between;
      margin: vww(16) auto;
      .search {
         width: vww(160);
         border: 1px solid #d1d1d1;
         border-radius: vww(4);
         .u-search {
            .u-search__content {
               height: 38px;
               background-color: #ffffff !important;
               .u-search__content__icon {
                  width: 10px;
                  height: 5.5px;
               }
               .u-search__content__input {
                  background-color: #ffffff !important;
                  .uni-input-placeholder{
                     color:#CCCCCC!important;
                  }
               }
            }
   .searchContainer{
      .searchButton{
         width:91%;
         margin: vww(16) auto;
         display:flex;
         .u-button{
            width:30%;
         }
      }
      // 下拉菜单
      .data-selet {
         border: 1px solid #d1d1d1;
         border-radius: 4px;
         width: vww(160);
         // width: 100%;
         height: 40px;
      // 条件搜索
      .searchBox {
         width: 91%;
         display: flex;
         align-items: center;
         font-size: 13px;
         color: #CCCCCC;
         .uni-select__icon {
            display: flex;
            align-content: center;
            margin: 0 10px;
            image {
               width: 10px;
               height: 5.5px;
            }
         }
         .content {
            margin-left: vww(8);
            width: vww(150);
         }
      }
   }

   // 时间搜索
   .timeContiner {
      width: 91%;
      margin: 0 auto vww(16);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .uni-date {
         width: vww(160);
         .uni-date-editor {
            .uni-date-editor--x  {
               .uni-date-x {
                  .uni-date__x-input {
                     .uni-input-wrapper{
                        .uni-input-placeholder{
                           color:#CCCCCC;
                           font-size: vww(13);
                        }
         justify-content: space-between;
         margin: vww(16) auto;
         .search {
            width: vww(160);
            border: 1px solid #d1d1d1;
            border-radius: vww(4);
            .u-search {
               .u-search__content {
                  height: 38px;
                  background-color: #ffffff !important;
                  .u-search__content__icon {
                     width: 10px;
                     height: 5.5px;
                  }
                  .u-search__content__input {
                     background-color: #ffffff !important;
                     .uni-input-placeholder{
                        color:#CCCCCC!important;
                     }
                  }
               }
            }
            .uni-date-x--border{
               border: 1px solid #d1d1d1!important;
         }
         // 下拉菜单
         .data-selet {
            border: 1px solid #d1d1d1;
            border-radius: 4px;
            width: vww(160);
            // width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #CCCCCC;
            .uni-select__icon {
               display: flex;
               align-content: center;
               margin: 0 10px;
               image {
                  width: 10px;
                  height: 5.5px;
               }
            }
            .content {
               margin-left: vww(8);
               width: vww(150);
            }
         }
      }
      // 时间搜索
      .timeContiner {
         width: 91%;
         margin: 0 auto vww(16);
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         .uni-date {
            width: vww(160);
            .uni-date-editor {
               .uni-date-editor--x  {
                  .uni-date-x {
                     .uni-date__x-input {
                        .uni-input-wrapper{
                           .uni-input-placeholder{
                              color:#CCCCCC;
                              font-size: vww(13);
                           }
                        }
                     }
                  }
               }
               .uni-date-x--border{
                  border: 1px solid #d1d1d1!important;
               }
            }
         }
      }
		
   }
	

	
	

   // 卡片中间
   .center-container {
@@ -453,7 +622,18 @@
      // width:100%;
      // height:vww(244);
      .slot-content {
         .rejectMesaage {
            display: flex;
            padding: vww(3);
            border: 1px solid #0307ff;
            border-radius: vww(4);
            font-size: 13px;
            text {
               margin-left: vww(5);
            }
         }
         .u-textarea {
            margin-top:vww(10);
            width: vww(280);
            height: vww(90) !important;
            .uni-textarea-wrapper {
@@ -467,7 +647,18 @@
   .rejectModal {
      .slot-content {
         display: inline-block;
         .rejectMesaage {
            display: flex;
            padding: vww(3);
            border: 1px solid #0307ff;
            border-radius: vww(4);
            font-size: 13px;
            text {
               margin-left: vww(5);
            }
         }
         .u-textarea {
            margin-top:vww(10);
            width: vww(280);
            height: vww(90) !important;
            .uni-textarea-wrapper {