tatolpage

付延余

2022-07-26 7c3218e12105b87cab21e9ced57c99c339ffac10

 pages/my-todo/my-todo.vue

@@ -2,30 +2,40 @@
   <!-- 我的待办 -->
   <view class="my-todo">
      <!-- 搜索区域 -->
      <view class="searchContainer">
      <view class="searchBox">
         <view class="search">
            <u-search @clickIcon="searchIconClick" :clearabled="false" :showAction="false" placeholder="请输入标题" v-model="searchData" shape="square"></u-search>
               <u-search @clickIcon="searchIconClick" :clearabled="true" :showAction="false" placeholder="请输入标题" v-model="todoParams.title" shape="square"></u-search>
         </view>
         <!-- 状态选择器 -->
         <view class="data-selet" @click="statusSeletShow = true">
            <!-- <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 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="结束时间" />
            <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(){
         this.$reqGet('todoList', this.todoParams).then(res => {
            if (res.code === 0) {
               this.daibanData = res.data.content;
      // 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;
               // }
               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,6 +436,16 @@
<style lang="scss" scoped>
::v-deep.my-todo {
   // 搜索区域
   .searchContainer{
      .searchButton{
         width:91%;
         margin: vww(16) auto;
         display:flex;
         .u-button{
            width:30%;
         }
      }
      // 条件搜索
   .searchBox {
      width: 91%;
      display: flex;
@@ -334,7 +498,6 @@
         }
      }
   }

   // 时间搜索
   .timeContiner {
      width: 91%;
@@ -363,6 +526,12 @@
         }
      }
   }
		
   }
	

	
	

   // 卡片中间
   .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 {