pull editor

付延余

2022-12-19 d698c77ac8f21ef383a1557be3dfdabbc2d76d61

 pages/my-todo/my-todo.vue

@@ -1,705 +1,857 @@
<template>
   <!-- 我的待办 -->
   <view class="my-todo">
      <!-- 搜索区域 -->
      <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="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="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 class="my-todo">
    <!-- 搜索区域 -->

    <view class="searchContainer">
      <u-collapse :border="true"
                  @change="searchChange"
                  @close="searchChange"
                  @open="searchOpen"
      >
        <u-collapse-item :border="false"
                         title="搜索框"
                         name="Docs guide"
        >
          <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="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="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>
        </u-collapse-item>
      </u-collapse>
    </view>


    <!-- 我的待办卡片区域 -->
      <view class="cardCheckGroup">
    <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>
          <view class="daibanTop">
                  <u-checkbox size="30" iconSize="18" :key="item.id" :name="item.id+item.procInstId"></u-checkbox>
            <text>{{ item.actBusiness.title }}</text>
          </view>
        </template>
        <template v-slot:center>
          <view class="center-container">
            <view class="center-content__one center-margin">
              <view class="">
                <text>任务名称：{{ item.name }}</text>
              </view>
              <view class="">
                <text>所属流程：{{ item.processName }}</text>
              </view>
            </view>
            <view class="center-content__two center-margin">
              <text>发起人：{{ item.actBusiness.createByName }}</text>
            </view>

            <view class="center-content__three">
              <text>创建时间：{{ item.createTime }}</text>
            </view>
          </view>
        </template>
        <template v-slot:bottom>
          <view class="bottom-container">
            <!-- 待办按钮 -->
            <view class="bottom-content__item">
              <view @click="theFormDataClick(item.tableId)" v-if="item.processName == '发运通知单'">
                <image src="@/static/home/jindu.png" mode=""></image>
                <view>申请详情</view>
              </view>
              <view @click="adopClick(item)">
                <image src="@/static/home/tongguo.png" mode=""></image>
                <view>通过</view>
              </view>
              <view @click="rejectClick(item)">
                <image src="@/static/home/bohui.png" mode=""></image>
                <view>驳回</view>
              </view>
              <view @click="approvalHistoryClick(item.procInstId)">
                <image src="@/static/home/history.png" mode=""></image>
                <view>历史</view>
              </view>
            </view>
          </view>
        </template>
      </combination-card>
    </u-checkbox-group>
      </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+item.procInstId"></u-checkbox>
               <view>
                  <text>{{ item.actBusiness.title }}</text>
               </view>
            </template>
            <template v-slot:center>
               <view class="center-container">
                  <view class="center-content__one center-margin">
                     <view class="">
                        <text>任务名称：{{ item.name }}</text>
                     </view>
                     <view class="">
                        <text>所属流程：{{ item.processName }}</text>
                     </view>
                  </view>
                  <view class="center-content__two center-margin">
                     <text>发起人：{{ item.actBusiness.createByName }}</text>
                  </view>
    <!-- 底部全选 -->
    <view class="bottomTabbar">
      <view class="bottomTabbar_checkBox">
        <u-checkbox-group size="35" iconSize="18" v-model="totalSelectValue" placement="column" @change="totalSelectChange">
          <u-checkbox labelSize="13px" label="全选" name="tatalSelect"></u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="bottomTabbar_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="center-content__three">
                     <text>创建时间：{{ item.createTime }}</text>
                  </view>
               </view>
            </template>
            <template v-slot:bottom>
               <view class="bottom-container">
                  <!-- 待办按钮 -->
                  <view class="bottom-content__item">
                     <!-- <view @click="theFormDataClick">
                        <image src="@/static/home/jindu.png" mode=""></image>
                        <view>申请详情</view>
                     </view> -->
                     <view @click="adopClick(item)">
                        <image src="@/static/home/tongguo.png" mode=""></image>
                        <view>通过</view>
                     </view>
                     <view @click="rejectModalShow = true">
                        <image src="@/static/home/bohui.png" mode=""></image>
                        <view>驳回</view>
                     </view>
                     <view @click="approvalHistoryClick(item.procInstId)">
                        <image src="@/static/home/history.png" mode=""></image>
                        <view>历史</view>
                     </view>
                  </view>
               </view>
            </template>
         </combination-card>
      </u-checkbox-group>
    <!-- 通过模态框 -->
    <view class="adoptModal">
      <u-modal width="684rpx" :show="adoptModalShow" title="审批通过" :showCancelButton="true" @confirm="adoptModalConfirm"
               @cancel="adoptModalCancel">
        <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>

      <!-- 底部全选 -->
      <view class="bottomTabbar">
         <view class="bottomTabbar_checkBox">
            <u-checkbox-group size="35" v-model="totalSelectValue" placement="column" @change="totalSelectChange">
               <u-checkbox labelSize="13px" label="全选" name="tatalSelect"></u-checkbox>
            </u-checkbox-group>
         </view>
         <view class="bottomTabbar_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="rejectModal">
      <u-modal width="684rpx" :show="rejectModalShow" title="驳回" :showCancelButton="true" @confirm="rejectModalConfirm"
               @cancel="rejectModalCancel">
        <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="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">
                <text>{{ dataSeletText }}</text>
              </view>
              <view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
            </view>
          </view> -->
        </view>
      </u-modal>
    </view>

      <!-- 通过模态框 -->
      <view class="adoptModal">
         <u-modal width="684rpx" :show="adoptModalShow" title="审批通过" :showCancelButton="true" @confirm="adoptModalConfirm" @cancel="adoptModalCancel">
            <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>
    <!-- 批量驳回模态框 -->
    <!-- <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="rejectBack-title"><text>驳回至</text></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>
        </view>
      </u-modal>
    </view> -->

      <!-- 驳回模态框 -->
      <view class="rejectModal">
         <u-modal width="684rpx" :show="rejectModalShow" title="驳回" :showCancelButton="true" @confirm="rejectModalConfirm" @cancel="rejectModalCancel">
            <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="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">
                        <text>{{ dataSeletText }}</text>
                     </view>
                     <view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
                  </view>
               </view> -->
            </view>
         </u-modal>
      </view>
		
      <!-- 批量驳回模态框 -->
      <!-- <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="rejectBack-title"><text>驳回至</text></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>
            </view>
         </u-modal>
      </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>
         </u-modal>
      </view> -->
		
      <!-- 菜单栏 -->
      <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
   </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>
      </u-modal>
    </view> -->

    <!--返回顶部-->
    <view class="back-top-container">
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </view>

    <!-- 菜单栏 -->
    <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
  </view>
</template>

<script>
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
import combinationCard from '@/components/common/combination-card/combination-card.vue';
import { callWithErrorHandling } from "vue";

export default {
   data() {
      return {
         // 复选框
         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,
            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();
   },
   // 点击导航栏菜单后
   onNavigationBarButtonTap(e) {
      // console.log(e);
      this.$refs.menuRef.menuClick()
   },
   components: {
      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.getMoreNews();
      },
      // 待办列表
      // 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();
         // });
      },
      endDateChange() {
         // this.queryRealTimeShippingData.endDate = '';
         // this.$nextTick(() => {
         //    console.log(this.queryRealTimeShippingData);
         //    this.realTimeShipping();
         // });
      },
      // 搜索
      searchIconClick() {
         console.log(1111, this.searchData);
      },
		
      // 状态
      statusConfirm(a) {
         this.statusSeletShow = false;
         console.log(a);
      },
      // 复选框
      checkboxChange(n){
         console.log('checkbox',n);
      },
      totalSelectChange(n){
         if(n[0] == 'tatalSelect'){
            this.daibanData.forEach(item=>{
               this.totalSelectValue.push(item.id+item.procInstId)
  data() {
    return {
      scrollTop: 0,
      // 复选框
      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,
        title: '',
        startDate: '',
        endDate: '',
      },
      // 上拉加载更多
      timer: {},
      load: 0,
      loadingText: '加载中...',
      loadingType: 0,
      contentText: {
        contentDown: '上拉显示更多',
        contentRefresh: '正在加载...',
        contentNomore: '没有更多数据了'
      }
    };
  },
  // 返回顶部
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onShow() {
    if (this.menuShow == true) {
      this.$refs.menuRef.menuClick()
    }
    this.todoParams.pageNumber = 1;
    this.init();
  },
  // 点击导航栏菜单后
  onNavigationBarButtonTap(e) {
    // console.log(e);
    this.$refs.menuRef.menuClick()
  },
  components: {
    combinationCard,
    popupMenu
  },
  // 上拉加载更多
  onReachBottom() {
    if (this.timer != null) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
      this.getMoreNews();
    }, 1000);
  },
  // 下拉加载
  onPullDownRefresh() {
    console.log('refresh');
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
    this.init();
  },
  methods: {
    init() {
      this.todoParams.pageNumber = 1;
      this.loadingType = 0;
      this.daibanData = [];
      // this.todoList();
      this.getMoreNews();
    },
    // 待办列表
    // 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;
      }
      uni.showLoading({
        title: "加载中..."
      })
      this.loadingType = 1;
      uni.showNavigationBarLoading(); //显示加载动画
      this.$reqGet('todoList', this.todoParams).then(res => {
        uni.hideLoading();
        // 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.startDate != '' || this.todoParams.endDate != '' || this.todoParams.title != '') {
          if(this.todoParams.pageNumber == 1){
            this.daibanData = res.data.content;
          }else{
            this.daibanData = this.daibanData.concat(res.data.content);
          }
        } else {
          if(this.todoParams.pageNumber == 1){
            this.daibanData = [];
          }
          this.daibanData = this.daibanData.concat(res.data.content);
        }
        //将数据拼接在一起
        this.loadingType = 0; // 将loadingType归0重置
        uni.hideNavigationBarLoading(); // 关闭加载动画
      });
    },
    // 搜索点击
    searchButtonClick() {
      this.loadingType == 0;
      this.todoParams.pageNumber = 1;
      this.init();
    },
    // 清空
    emptyButtonClick() {
      this.loadingType == 0;
      this.todoParams.pageNumber = 1;
      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();
      // });
    },
    endDateChange() {
      // this.queryRealTimeShippingData.endDate = '';
      // this.$nextTick(() => {
      //    console.log(this.queryRealTimeShippingData);
      //    this.realTimeShipping();
      // });
    },
    searchChange(e){
      console.log('e', e);
    },
    searchClose(e){
      console.log('e', e);
    },
    searchOpen(e){
      console.log('e', e);
    },
    // 搜索
    searchIconClick() {
      console.log(1111, this.searchData);
    },

    // 状态
    statusConfirm(a) {
      this.statusSeletShow = false;
      console.log(a);
    },
    // 复选框
    checkboxChange(n) {
      console.log('checkbox', n);
    },
    totalSelectChange(n) {
      if (n[0] == 'tatalSelect') {
        this.daibanData.forEach(item => {
          this.totalSelectValue.push(item.id + item.procInstId)
        })
        this.checkBoxValue = this.totalSelectValue
      } else {
        this.checkBoxValue = []
      }
      console.log('totalSelect', n);
    },
    // 表单数据
    theFormDataClick(v) {
      uni.navigateTo({
        url: `/pages/the-form-data/the-form-data?index=${v}`
      });
    },
    // 审批历史
    approvalHistoryClick(v) {
      uni.navigateTo({
        url: `/pages/approval-history/approval-history?index=${v}`
      });
    },
    // 通过
    adopClick(v) {
         console.log('通过',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;
         if(this.checkBoxValue.length >= 1){
            this.checkBoxValue.forEach(item => {
              this.adoptDataBox.push(item.slice(0, 6))
            })
            this.checkBoxValue = this.totalSelectValue
         } else {
            this.checkBoxValue = [] 
            this.adoptForm.ids = this.adoptDataBox.toString();
         }
         console.log('totalSelect',n);
      },
      // 表单数据
      theFormDataClick() {
         uni.navigateTo({
            url: '/pages/the-form-data/the-form-data'
         });
      },
      // 审批历史
      approvalHistoryClick(v) {
         uni.navigateTo({
            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;
      },
      // 驳回模态框
      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;
      },
      this.$reqPost('passAll', this.adoptForm).then(res => {
        console.log('是否还原', this.adoptForm.ids, this.rejectForm.procInstIds);
        if (res.code == 0) {
          this.$u.toast('操作成功!');
        } else {
          this.$u.toast('添加失败!!');
        }
            // 初始化
            this.checkBoxValue = []
            this.adoptForm.ids = '';
            this.adoptForm.comment = '';
        this.init();
      });
    },
    adoptModalCancel() {
      this.adoptModalShow = false;
    },
      // 驳回点击
      rejectClick(v) {
         this.modalType = 1;
         this.rejectModalShow = true;
         this.rejectForm.procInstIds = v.procInstId;
        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('未选中申请！')
    // 驳回模态框
    rejectModalConfirm() {
      this.rejectModalShow = false;
         if(this.checkBoxValue.length >= 1){
            this.checkBoxValue.forEach(item => {
              this.rejectDataBox.push(item.slice(6, 12))
            })
            this.rejectForm.procInstIds = this.rejectDataBox.toString();
         }
			
      }
   }
      this.$reqPost('backAll', this.rejectForm).then(res => {
        if (res.code == 0) {
          this.$u.toast('操作成功！');
        } else {
          this.$u.toast('操作失败！！！');
        }
            // 初始化
            this.rejectForm.procInstIds = '';
            this.rejectForm.comment = '';
            this.checkBoxValue = []
        this.init();
      });
    },
    rejectModalCancel() {
      this.rejectModalShow = false;
    },
    
    batchRejectClick() {
      if (this.checkBoxValue.length != 0) {
        this.rejectModalShow = true;

        console.log(this.rejectDataBox);
      } else {
        this.$u.toast('未选中申请！')
      }

    }
  }
};
</script>

<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;
         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;
                     }
                  }
               }
            }
         }
         // 下拉菜单
         .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;
               }
            }
         }
      }
		
   }
	
  // 搜索区域
  .searchContainer {
    width:94%;
    margin:vww(16) auto;
    .u-collapse {
      .u-collapse-item {
        .u-collapse-item__content {
          .searchButton {
            width: 100%;
            margin: 0 auto;
            display: flex;

	
	
            .u-button {
              width: 30%;
            }
          }

   // 卡片中间
   .center-container {
      display: flex;
      flex-direction: column;
      .center-content__one {
         display: flex;
         view {
            width: 50%;
         }
      }
      .center-content__two {
         display: flex;
         // margin: vww(10) 0;
         view {
            width: 50%;
         }
      }
      .center-content__three {
         display: flex;
         view {
            width: 50%;
         }
      }
      .center-content__four {
      }
   }
   // 中间部分样式
   .center-margin {
      margin-bottom: vww(16);
   }
          // 条件搜索
          .searchBox {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 0 auto vww(16);

   // 卡片底部
   .bottom-container {
      .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() {
               margin-right: 0;
            }
            view {
               display: inline-block;
            }
            image {
               width: vww(16);
               height: vww(16);
               margin-right: vww(4);
            }
         }
            .search {
              width: vww(158);
              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__close {
                    width: 16px !important;
                    height: 16px !important;
                    background-color: #cccccc !important;

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

                  .u-search__content__input {
                    background-color: #ffffff !important;

                    .uni-input-placeholder {
                      color: #CCCCCC !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(160);
              }
            }
          }

          // 时间搜索
          .timeContiner {
            width: 100%;
            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;
                }
              }
            }
          }
        }
      }
    }


  }

   // 卡片头部
   .cardCheckGroup{
      margin-bottom: vww(48);
   }
   .daibanTop{
      .u-checkbox{
         display:inline-block;
      }
   }

   // 底部
   .bottomTabbar {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: vww(48);
      display: flex;
      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);
            width: vww(90);
            height: vww(32);
         }
      }
   }
  // 卡片中间
  .center-container {
    display: flex;
    flex-direction: column;

   // 通过模态框
   .adoptModal {
      // 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 {
               height: vww(90) !important;
            }
         }
      }
   }
    .center-content__one {
      display: flex;

   // 驳回模态框
   .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 {
               height: vww(90) !important;
            }
         }
			
         .rejectBack {
            margin-top:vww(24);
            .rejectBack-title {
               font-size: vww(13);
            }
            // 下拉菜单
            .data-selet {
               border: 1px solid #d1d1d1;
               border-radius: 4px;
               width: vww(300);
               height: 40px;
               display: flex;
               align-items: center;
               font-size: 13px;
               color: #666;
               margin-top:vww(8);
               .uni-select__icon {
                  display: flex;
                  align-content: center;
                  margin: 0 10px;
                  image {
                     width: 10px;
                     height: 5.5px;
                  }
               }
               .content {
                  margin-left: vww(8);
                  width: vww(280);
               }
            }
         }
      }
   }
	
	
      view {
        width: 50%;
      }
    }

    .center-content__two {
      display: flex;
      // margin: vww(10) 0;
      view {
        width: 50%;
      }
    }

    .center-content__three {
      display: flex;

      view {
        width: 50%;
      }
    }

    .center-content__four {
    }
  }

  // 中间部分样式
  .center-margin {
    margin-bottom: vww(16);
  }

  // 卡片底部
  .bottom-container {
    .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(1) {
          margin-right: 0;
        }

        view {
          display: inline-block;
        }

        image {
          width: vww(16);
          height: vww(16);
          margin-right: vww(4);
        }
      }
    }
  }

  // 返回顶部
  .back-top-container{
    .u-transition{
      position:fixed;
      bottom:vww(80)!important;
      right:vww(20)!important;
    }
  }

  // 底部
  .bottomTabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: vww(48);
    display: flex;
    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);
        width: vww(90);
        height: vww(32);
      }
    }
  }

  // 通过模态框
  .adoptModal {
    // 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;

        .u-textarea__field {
          height: vww(90) !important;
        }
      }
    }
  }

  // 驳回模态框
  .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;

        .u-textarea__field {
          height: vww(90) !important;
        }
      }

      .rejectBack {
        margin-top: vww(24);

        .rejectBack-title {
          font-size: vww(13);
        }

        // 下拉菜单
        .data-selet {
          border: 1px solid #d1d1d1;
          border-radius: 4px;
          width: vww(300);
          height: 40px;
          display: flex;
          align-items: center;
          font-size: 13px;
          color: #666;
          margin-top: vww(8);

          .uni-select__icon {
            display: flex;
            align-content: center;
            margin: 0 10px;

            image {
              width: 10px;
              height: 5.5px;
            }
          }

          .content {
            margin-left: vww(8);
            width: vww(280);
          }
        }
      }
    }
  }


}
</style>