日发运计划接口同步后台更新。完善页面细节

付延余

2022-12-22 05b5c1f397bad8fb53a73ffe55209f573d309f4e

 pages/my-application/my-application.vue

@@ -1,721 +1,829 @@
<template>
   <!-- 我的申请 -->
   <view class="my-application" >
      <!-- 搜索区域 -->
      <view class="searchBox">
         <view class="topRow">
            <view class="search">
               <u-search
                  @clickIcon="searchIconClick"
                  :clearabled="true"
                  :showAction="false"
                  placeholder="请输入标题"
                  v-model="myApplication.title"
                  shape="square"
                  searchIconColor="#cccccc"
               ></u-search>
            </view>
  <!-- 我的申请 -->
  <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
                  @clickIcon="searchIconClick"
                  :clearabled="true"
                  :showAction="false"
                  placeholder="请输入标题"
                  v-model="myApplication.title"
                  shape="square"
                  searchIconColor="#cccccc"
              ></u-search>
            </view>

            <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>
            <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>
        </u-collapse-item>
      </u-collapse>
    </view>

      <!-- 选择器 -->
      <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"> -->
         <combination-card v-for="(item, index) in shenqingData" index="index">
            <template v-slot:top>
               <!-- <u-checkbox size="35" :key="item.id" :name="item.id"></u-checkbox> -->
               <view>
                  <text>{{ item.title }}</text>
               </view>
            </template>
            <template v-slot:center>
               <view class="center-container">
                  <view class="center-content__one center-margin">
                     <view class="">
                        <text>所属流程：{{ item.processName }}</text>
                     </view>
                     <view class="">
                        <text>审批环节：{{ item.currTaskName }}</text>
                     </view>
    <!-- 选择器 -->
    <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"> -->
    <combination-card v-for="(item, index) in shenqingData" index="index">
        <template v-slot:top>
        <!-- <u-checkbox size="35" :key="item.id" :name="item.id"></u-checkbox> -->
        <view>
          <text>{{ item.title }}</text>
        </view>
      </template>
      <template v-slot:center>
        <view class="center-container">
          <view class="center-content__one center-margin">
            <view class="">
              <text>所属流程：{{ item.processName }}</text>
            </view>
            <view class="">
              <text>审批环节：{{ item.currTaskName ||'' }}</text>
            </view>
          </view>
          <view class="center-content__two center-margin">
            <view class="">
              状态：
              <text :style="{ color: statusColor[item.status] }">{{ status[item.status] }}</text>
            </view>
            <view class="">
              结果：
              <text :style="{ color: resultColor[item.result] }">{{ result[item.result] }}</text>
            </view>
          </view>
          <view class="center-content__three center-margin">
            <text>创建时间：{{ item.createTime }}</text>
          </view>
          <view class="center-content__four">
            <text>提交申请时间：{{ item.applyTime }}</text>
          </view>
        </view>
      </template>
      <template v-slot:bottom>
        <view class="bottom-container">
          <!-- 按钮区域 -->
          <view class="bottom-content__chulizhong bottom-content__item">
            <view @click="withDrawClick(item.procInstId)" v-if="item.status == 1">
              <image src="@/static/home/cehui.png" mode=""></image>
              <view>撤回</view>
            </view>
            <view @click="checkTheScheduleClick(item.procInstId)" v-if="item.status == 1">
              <image src="@/static/home/jindu.png" mode=""></image>
              <view>查看进度</view>
            </view>
            <view @click="theFormDataClick(item.tableId)" v-if="(item.status == 1 || item.status == 2 || item.status == 3 ) && (item.processName == '发运通知单')">
              <image src="@/static/home/biaodan.png" mode=""></image>
              <view>申请详情</view>
            </view>
            <!-- <view v-if="item.status == 3" @click="apply(item)">
              <image src="@/static/home/history.png" mode=""></image>
              <view>重新申请</view>
            </view> -->
            <view @click="editMyApplication(item)" v-if="item.status == 1 && item.processName == '发运通知单'">
              <image src="@/static/home/history.png" mode=""></image>
              <view>编辑</view>
            </view>
            <view @click="approvalHistoryClick(item.procInstId)" v-if="item.status == 2 || item.status == 3">
              <image src="@/static/home/history.png" mode=""></image>
              <view>审批历史</view>
            </view>
                  <view @click="deleteWithDrawApplication(item.tableId)" v-if="item.status == 3">
                     <image src="@/static/home/delete.png" mode=""></image>
                     <view>删除</view>
                  </view>
                  <view class="center-content__two center-margin">
                     <view class="">
                        状态：
                        <text :style="{ color: statusColor[item.status] }">{{ status[item.status] }}</text>
                     </view>
                     <view class="">
                        结果：
                        <text :style="{ color: resultColor[item.result] }">{{ result[item.result] }}</text>
                     </view>
                  </view>
                  <view class="center-content__three center-margin">
                     <text>创建时间：{{ item.createTime }}</text>
                  </view>
                  <view class="center-content__four">
                     <text>提交申请时间：{{ item.applyTime }}</text>
                  </view>
               </view>
            </template>
            <template v-slot:bottom>
               <view class="bottom-container">
                  <!-- 按钮区域 -->
                  <view class="bottom-content__chulizhong bottom-content__item">
                     <view @click="withDrawClick(item.id)" v-if="item.status == 1">
                        <image src="@/static/home/cehui.png" mode=""></image>
                        <view>撤回</view>
                     </view>
                     <view @click="checkTheScheduleClick(item.procInstId)" v-if="item.status == 1">
                        <image src="@/static/home/jindu.png" mode=""></image>
                        <view>查看进度</view>
                     </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 v-if="item.status == 3" @click="apply(item)">
                        <image src="@/static/home/history.png" mode=""></image>
                        <view>重新申请</view>
                     </view>
                     <view v-if="item.status == 3" @click="editMyApplication(item)">
                        <image src="@/static/home/history.png" mode=""></image>
                        <view>编辑</view>
                     </view>
                     <view @click="approvalHistoryClick(item.procInstId)" v-if="item.status == 2 || item.status == 3">
                        <image src="@/static/home/history.png" mode=""></image>
                        <view>审批历史</view>
                     </view>
                  </view>
               </view>
            </template>
         </combination-card>
      <!-- </u-checkbox-group> -->
          </view>
        </view>
      </template>
    </combination-card>
    <!-- </u-checkbox-group> -->

      <!-- 撤回模态框 -->
      <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>
      </view>
    <!-- 撤回模态框 -->
    <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> -->
               <text>确认撤回该申请吗？</text>
        </view>
      </u-modal>
    </view>

      <!--  批量删除模态框 -->
      <view class="batchDeleteModal">
         <u-modal
            :show="batchDeleteModalShow"
            title="提示"
            content="确定删除申请？"
            :showCancelButton="true"
            @confirm="batchDeleteModalConfirm"
            @cancel="batchDeleteModalCancel"
         ></u-modal>
      </view>
		
      <view class="" style="height:50px;">
			
      </view>
    <!--  批量删除模态框 -->
    <view class="batchDeleteModal">
      <u-modal
          :show="batchDeleteModalShow"
          title="提示"
          content="确定删除申请？"
          :showCancelButton="true"
          @confirm="batchDeleteModalConfirm"
          @cancel="batchDeleteModalCancel"
      ></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="batchDeleteClick"></u-button> -->
            <u-button type="primary" text="新增申请" @click="newApplicationClick"></u-button>
         </view>
      </view>
    <!--返回顶部-->
    <view class="back-top-container">
      <u-back-top :scroll-top="scrollTop" style="position:fixed;bottom:100px;right:100px;"></u-back-top>
    </view>

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

    </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="batchDeleteClick"></u-button> -->
        <u-button type="primary" text="新增申请" @click="newApplicationClick"></u-button>
      </view>
    </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 dataSelectBox from '@/components/common/data-select-box/data-select-box.vue';

export default {
   name: 'MyApplication',
   data() {
      return {
         status: ['草稿', '处理中', '已结束', '已撤回'],
         statusColor: ['#dd8b8c', '#FF9900', '#007AFF', '#06BE00'],
         result: ['未提交', '处理中', '通过', '驳回'],
         resultColor: ['#dd8b8c', '#FF9900', '#06BE00', '#be2b2d'],
         // 搜索区域
         selectText: '',
         // 选择器
         selectPickerShow: false,
         selectList: [['草稿', '处理中', '已结束', '已撤回'], ['未提交', '处理中', '通过', '驳回']],
         activeColor: '#cccccc',
         isActive: false,
         // 时间选择器
         range: [],
         // 撤回模态框
         withDrawShow: false,
         withDrawData: {
            reason: '',
            id: '', // 撤回申请ID
            procInstId: ''
         },
         // 重新申请
         form: {
            sendMessage: true,
            sendSms: true,
            sendEmail: true,
            procDefId: '',
            assignees: [],
            priority: '0'
         },
         assigneeList: [],
         showAssign: false,
         isGateway: false,
         isCustom: false,
         // 批量删除申请
         batchDeleteModalShow: false,
         // 复选框
         checkBoxValue: [],
         totalSelectValue: [],
         menuShow: false,
         shenqingData: [], // 容器
         // 请求参数
         myApplication: {
            title: '',
            status: '',
            result: '',
            pageNumber: 1,
            pageSize: 10,
            startTime: '',
            endTime: '',
            sort: 'createTime',
            order: 'desc'
         },
         // 上拉加载更多
         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();
   },
   watch: {
      // 时间绑定日期
      range(nVal) {
         console.log('范围选:', this.range);
         this.myApplication.startTime = this.range[0];
         this.myApplication.endTime = this.range[1];
      },
      // 监听输入框的内容
      selectText(nVal) {
         if (nVal == '') {
            this.myApplication.status = '';
            this.myApplication.result = '';
         }
      }
   },
   components: {
      combinationCard,
      popupMenu,
      dataSelectBox
   },
   // 上拉加载更多
   onReachBottom() {
      if (this.timer != null) {
         clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
         this.getMoreNews();
      }, 1000);
   },
   // 下拉加载
   onPullDownRefresh() {
      console.log('refresh');
      this.myApplication.pageNumber = 1;
      this.loadingType = 0;
      this.shenqingData = [];
      setTimeout(()=> {
         uni.stopPullDownRefresh();
      }, 1000);
      this.init();
   },
   methods: {
      init() {
         this.getMoreNews();
      },
      // getProcessDataList() {
      //    this.$reqGet('getProcessDataList', this.myApplication).then(res => {
      //       if (res.code === 0) {
      //          console.log('申请', res);
      //          this.shenqingData = res.data.records;
      //       }
      //    });
      // },
      getMoreNews() {
         if (this.loadingType !== 0) {
            //loadingType!=0;直接返回
            return false;
         }
         this.loadingType = 1;
         uni.showNavigationBarLoading(); //显示加载动画
         this.$reqGet('getProcessDataList', this.myApplication).then(response => {
            console.log('response', response);
            this.myApplication.pageNumber++; // 得到数据之后 page+1
            if (response.data.records.length < 1) {
               // 没有数据
               this.loadingType = 2;
               uni.hideNavigationBarLoading(); // 关闭加载动画
               uni.showToast({
                  title: '没有更多数据了！',
                  icon: 'error'
               });
               return;
            }
            // this.myApplication.pageNumber++; // 每触底一次 page +1
            if(this.myApplication.title||this.myApplication.status||this.myApplication.result||this.myApplication.startTime||this.myApplication.endTime){
               this.shenqingData = response.data.records
            } else{
               this.shenqingData = this.shenqingData.concat(response.data.records);
            }
             //将数据拼接在一起
            this.loadingType = 0; // 将loadingType归0重置
            uni.hideNavigationBarLoading(); // 关闭加载动画
         });
      },
      // 条件选择器
      selectConfirm(v) {
         this.selectText = v.value.toString();
         this.myApplication.status = v.indexs[0];
         this.myApplication.result = v.indexs[1];
         this.selectPickerShow = false;
      },
      dataSelectCancel() {
         this.selectPickerShow = false;
         this.$refs.dataSelectBox.isActive = false;
      },
      dataSelectClick() {
         this.selectPickerShow = true;
      },
      // 菜单
      menushow(e) {
         this.menuShow = e;
      },
      // 时间选择器
      maskClick(e) {
         console.log('maskClick事件:', e);
      },
      searchClick() {
         console.log('this.myApplication', this.myApplication);
         this.myApplication.pageNumber = 1;
         this.loadingType = 0;
         this.getMoreNews();
      },
      emptyButtonClick(){
         this.myApplication.title = '';
         this.selectText = '';
         this.range = [];
         this.init();
      },
      // 撤回模态框
      withDrawClick(id) {
         this.withDrawShow = true;
         this.withDrawData.id = id;
      },
      withDrawConfirm() {
         this.shenqingData.forEach(i => {
            if (i.id == this.withDrawData.id) {
               this.withDrawData.procInstId = i.procInstId;
            }
         });
         this.$reqPost('withDraw', this.withDrawData, 'form').then(res => {
            console.log('res', res);
            if (res.code == 0) {
               uni.showToast({
                  title: res.data,
                  duration: 2000
               });
            }
            this.withDrawShow = false;
            // 初始化申请列表
            this.myApplication.pageNumber = 1;
            this.shenqingData = [];
            this.getMoreNews();
         });
  name: 'MyApplication',
  data() {
    return {
      scrollTop: 0,
      status: ['草稿', '处理中', '已结束', '已撤回'],
      statusColor: ['#dd8b8c', '#FF9900', '#007AFF', '#06BE00'],
      result: ['未提交', '处理中', '通过', '驳回'],
      resultColor: ['#dd8b8c', '#FF9900', '#06BE00', '#be2b2d'],
      // 搜索区域
      selectText: '',
      // 选择器
      selectPickerShow: false,
      selectList: [['草稿', '处理中', '已结束', '已撤回'], ['未提交', '处理中', '通过', '驳回']],
      activeColor: '#cccccc',
      isActive: false,
      // 时间选择器
      range: [],
      // 撤回模态框
      withDrawShow: false,
      withDrawData: {
        // reason: '',
        // id: '', // 撤回申请ID
        procInstId: ''
      },
      // 重新申请
      form: {
        sendMessage: true,
        sendSms: true,
        sendEmail: true,
        procDefId: '',
        assignees: [],
        priority: '0'
      },
      assigneeList: [],
      showAssign: false,
      isGateway: false,
      isCustom: false,
      // 批量删除申请
      batchDeleteModalShow: false,
      // 复选框
      checkBoxValue: [],
      totalSelectValue: [],
      menuShow: false,
      shenqingData: [], // 容器
      // 请求参数
      myApplication: {
        title: '',
        status: '',
        result: '',
        pageNumber: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
        sort: 'createTime',
        order: 'desc'
      },
      // 上拉加载更多
      timer: {},
      load: 0,
      loadingText: '加载中...',
      loadingType: 0,
      contentText: {
        contentDown: '上拉显示更多',
        contentRefresh: '正在加载...',
        contentNomore: '没有更多数据了'
      }
    };
  },
  // 返回顶部
  onPageScroll(e) {
    // console.log('页面滑动', this.scrollTop);
    this.scrollTop = e.scrollTop;
  },
  onShow() {
    if (this.menuShow == true) {
      this.$refs.menuRef.menuClick();
    }
    this.init();
  },
  // 点击导航栏菜单后
  onNavigationBarButtonTap(e) {
    // console.log(e);
    this.$refs.menuRef.menuClick();
  },
  watch: {
    // 时间绑定日期
    range(nVal) {
      console.log('范围选:', this.range);
      this.myApplication.startTime = this.range[0];
      this.myApplication.endTime = this.range[1];
    },
    // 监听输入框的内容
    selectText(nVal) {
      if (nVal == '') {
        this.myApplication.status = '';
        this.myApplication.result = '';
      }
    },
    scrollTop(nVal){
      if(nVal){
        // console.log('页面滑动变化');
      }
    }
  },
  components: {
    combinationCard,
    popupMenu,
    dataSelectBox
  },
  // 上拉加载更多
  onReachBottom() {
    if (this.timer != null) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
      this.getMoreNews();
    }, 1000);
  },
  // 下拉加载
  onPullDownRefresh() {
    console.log('refresh');

         console.log(this.withDrawId);
         if (this.withDrawData.reason.length >= 2) {
            console.log(this.withDrawData.reason);
         } else {
            uni.showToast({
               title: '请规范输入',
               duration: 2000
            });
         }
      },
      withDrawCancel() {
         this.withDrawShow = false;
      },
      apply(v) {
         if (!v.procDefId || v.procDefId == 'null') {
            this.$u.toast('流程定义为空');
            return;
         }
         this.form.id = v.id;
         this.form.procDefId = v.procDefId;
         this.form.title = v.title;
         // 加载审批人
         // this.userLoading = true;
         uni.showLoading({
            title: '审批人加载中'
         });
         // getFirstNode(v.procDefId).then((res) => {
         this.$reqGet('getFirstNode', {}, v.procDefId).then(res => {
            // this.userLoading = false;
            console.log('审批人', res);
            uni.hideLoading();
            if (res.data) {
               this.error = '';
               if (res.data.type == 3 || res.data.type == 4) {
                  this.isGateway = true;
                  this.form.firstGateway = true;
                  this.showAssign = false;
                  this.isCustom = false;
                  return;
               }
               if (res.data.type == 5) {
                  this.isCustom = true;
                  this.isGateway = false;
                  this.form.firstGateway = false;
                  this.showAssign = false;
                  return;
               }
               if (res.data.type == 1) {
                  this.showAssign = true;
                  this.isGateway = false;
                  this.form.firstGateway = false;
                  this.isCustom = false;
                  if (res.data.users && res.data.users.length > 0) {
                     this.assigneeList = res.data.users;
                     // 默认勾选
                     let ids = [];
                     res.data.users.forEach(e => {
                        ids.push(e.userId);
                     });
                     this.form.assignees = ids;
                     this.showAssign = true;
                     // 获取表单内容，重新创建申请
                     this.$reqPost('apply',this.form,'form').then(res=>{
                        console.log('重新提交申请',res);
                        if(res.code == 0){
                           uni.showToast({
                              title:res.data,
                              icon:'success',
                              duration:2000	
                           });
                        }
                        // 初始化申请列表
                        this.myApplication.pageNumber = 1;
                        this.shenqingData = [];
                        this.getMoreNews();
                     })
                  } else {
                     this.form.assignees = [];
                     this.showAssign = true;
                     this.error = '请进入"流程管理"为审批节点分配候选审批人员';
                  }
               }
            }
            console.log(this.form);
         });
			
         this.modalVisible = true;
      // }
      },
      // 修改申请
      editMyApplication(v){
         console.log('修改申请');
         uni.navigateTo({
            url: `/pages/edit-my-application/edit-my-application?index=${v.tableId}`
         });
      },
      // 批量删除模态框
      batchDeleteClick() {
         this.batchDeleteModalShow = true;
      },
      batchDeleteModalConfirm() {
         this.batchDeleteModalShow = false;
      },
      batchDeleteModalCancel() {
         this.batchDeleteModalShow = false;
      },
      // 搜索
      searchIconClick() {
         console.log(1111, this.myApplication.title);
      },
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
    this.init();
  },
  methods: {
    init() {
      this.myApplication.pageNumber = 1;
      this.loadingType = 0;
      this.shenqingData = [];
      this.getMoreNews();
    },
    // getProcessDataList() {
    //    this.$reqGet('getProcessDataList', this.myApplication).then(res => {
    //       if (res.code === 0) {
    //          console.log('申请', res);
    //          this.shenqingData = res.data.records;
    //       }
    //    });
    // },
    getMoreNews() {
      if (this.loadingType !== 0) {
        //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) {
          // 没有数据
          this.loadingType = 2;
          uni.hideNavigationBarLoading(); // 关闭加载动画
          uni.showToast({
            title: '没有更多数据了！',
            icon: 'error'
          });
          return;
        }
        // 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);
        }
        //将数据拼接在一起
        this.loadingType = 0; // 将loadingType归0重置
        uni.hideNavigationBarLoading(); // 关闭加载动画
      });
    },
    // 条件选择器
    selectConfirm(v) {
      this.selectText = v.value.toString();
      this.myApplication.status = v.indexs[0];
      this.myApplication.result = v.indexs[1];
      this.selectPickerShow = false;
    },
    dataSelectCancel() {
      this.selectPickerShow = false;
      this.$refs.dataSelectBox.isActive = false;
    },
    dataSelectClick() {
      this.selectPickerShow = true;
    },
    // 菜单
    menushow(e) {
      this.menuShow = e;
    },
    // 时间选择器
    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;
      this.loadingType = 0;
      this.getMoreNews();
    },
    emptyButtonClick() {
      this.loadingType == 0;
      this.myApplication.pageNumber = 1;
      this.myApplication.title = '';
      this.selectText = '';
      this.range = [];
      this.init();
    },
    // 撤回模态框
    withDrawClick(procInstId) {
      this.withDrawShow = true;
      this.withDrawData.procInstId = procInstId;
    },
    withDrawConfirm() {
      this.$reqPost('cancel', this.withDrawData).then(res => {
        console.log('res', res);
        if (res.code == 0) {
          uni.showToast({
            title: res.data,
            duration: 2000
          });
        }
        this.withDrawShow = false;
        // 初始化申请列表
        this.myApplication.pageNumber = 1;
        this.shenqingData = [];
        this.getMoreNews();
      });

      checkboxChange(n) {
         console.log('change', n);
      },
      totalSelectChange(n) {
         if (n[0] == 'tatalSelect') {
            this.shenqingData.forEach(item => {
               this.totalSelectValue.push(item.id);
            });
            this.checkBoxValue = this.totalSelectValue;
         } else {
            this.checkBoxValue = [];
         }
         console.log('totalChange', n);
      },
      // 查看进度
      checkTheScheduleClick(v) {
         uni.navigateTo({
            url: `/pages/check-the-schedule/check-the-schedule?index=${v}`
         });
      },
      // 表单数据
      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}`
         });
      },
      // 新增申请
      newApplicationClick() {
         uni.navigateTo({
            url: '/pages/new-application/new-application'
         });
      }
   }
    },
    withDrawCancel() {
      this.withDrawShow = false;
    },
    // apply(v) {
    //   if (!v.procDefId || v.procDefId == 'null') {
    //     this.$u.toast('流程定义为空');
    //     return;
    //   }
    //   this.form.id = v.id;
    //   this.form.procDefId = v.procDefId;
    //   this.form.title = v.title;
    //   // 加载审批人
    //   // this.userLoading = true;
    //   uni.showLoading({
    //     title: '审批人加载中'
    //   });
    //   // getFirstNode(v.procDefId).then((res) => {
    //   this.$reqGet('getFirstNode', {}, v.procDefId).then(res => {
    //     // this.userLoading = false;
    //     console.log('审批人', res);
    //     uni.hideLoading();
    //     if (res.data) {
    //       this.error = '';
    //       if (res.data.type == 3 || res.data.type == 4) {
    //         this.isGateway = true;
    //         this.form.firstGateway = true;
    //         this.showAssign = false;
    //         this.isCustom = false;
    //         return;
    //       }
    //       if (res.data.type == 5) {
    //         this.isCustom = true;
    //         this.isGateway = false;
    //         this.form.firstGateway = false;
    //         this.showAssign = false;
    //         return;
    //       }
    //       if (res.data.type == 1) {
    //         this.showAssign = true;
    //         this.isGateway = false;
    //         this.form.firstGateway = false;
    //         this.isCustom = false;
    //         if (res.data.users && res.data.users.length > 0) {
    //           this.assigneeList = res.data.users;
    //           // 默认勾选
    //           let ids = [];
    //           res.data.users.forEach(e => {
    //             ids.push(e.userId);
    //           });
    //           this.form.assignees = ids;
    //           this.showAssign = true;
    //           // 获取表单内容，重新创建申请
    //           this.$reqPost('apply', this.form, 'form').then(res => {
    //             console.log('重新提交申请', res);
    //             if (res.code == 0) {
    //               uni.showToast({
    //                 title: res.data,
    //                 icon: 'success',
    //                 duration: 2000
    //               });
    //             }
    //             // 初始化申请列表
    //             this.myApplication.pageNumber = 1;
    //             this.shenqingData = [];
    //             this.getMoreNews();
    //           })
    //         } else {
    //           this.form.assignees = [];
    //           this.showAssign = true;
    //           this.error = '请进入"流程管理"为审批节点分配候选审批人员';
    //         }
    //       }
    //     }
    //     console.log(this.form);
    //   });

    //   this.modalVisible = true;
    //   // }
    // },
    // 修改申请
    editMyApplication(v) {
      console.log('修改申请');
      uni.navigateTo({
        url: `/pages/edit-my-application/edit-my-application?index=${v.tableId}`
      });
    },
    // 批量删除模态框
    batchDeleteClick() {
      this.batchDeleteModalShow = true;
    },
    batchDeleteModalConfirm() {
      this.batchDeleteModalShow = false;
    },
    batchDeleteModalCancel() {
      this.batchDeleteModalShow = false;
    },
    // 搜索
    searchIconClick() {
      console.log(1111, this.myApplication.title);
    },

    checkboxChange(n) {
      console.log('change', n);
    },
    totalSelectChange(n) {
      if (n[0] == 'tatalSelect') {
        this.shenqingData.forEach(item => {
          this.totalSelectValue.push(item.id);
        });
        this.checkBoxValue = this.totalSelectValue;
      } else {
        this.checkBoxValue = [];
      }
      console.log('totalChange', n);
    },
    // 查看进度
    checkTheScheduleClick(v) {
      uni.navigateTo({
        url: `/pages/check-the-schedule/check-the-schedule?index=${v}`
      });
    },
    // 表单数据
    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}`
      });
    },
    // 新增申请
    newApplicationClick() {
      uni.navigateTo({
        url: '/pages/new-application/new-application'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep.my-application {
   width: 100%;
   height: 100%;
   .searchBox {
      width: 94%;
      margin: vww(16) auto;
      .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;
                  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;
                     }
                  }
               }
            }
         }
         .data-select-box {
            width: 48%;
         }
         // 下拉菜单
         // .data-selet {
         //    border: 1px solid #d1d1d1;
         //    border-radius: 4px;
         //    // width: vww(160);
         //    width:48%;
         //    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);
         //    }
         // }
      }
  width: 100%;
  height: 100%;

      // 时间选择器
      .example-body {
         margin-top: vww(16);
         width: 100%;
      }
  .searchBox {
    width: 94%;
    margin: vww(16) auto;

      // 搜索按钮
      .searchBtn {
         width: 100%;
         display: flex;
         align-items: center;
         .u-button {
            width: vww(90);
            height: vww(32);
            margin: vww(16) auto 0;
         }
      }
    .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: 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;
                    }
                  }
                }
              }
            }

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

            // 下拉菜单
            // .data-selet {
            //    border: 1px solid #d1d1d1;
            //    border-radius: 4px;
            //    // width: vww(160);
            //    width:48%;
            //    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);
            //    }
            // }
          }

          // 时间选择器
          .example-body {
            margin-top: vww(16);
            width: 100%;
          }

          // 搜索按钮
          .searchBtn {
            width: 100%;
            display: flex;
            align-items: center;

            .u-button {
              width: vww(90);
              height: vww(32);
              margin: vww(16) auto 0;
            }
          }
        }
      }
    }


  }

  // 卡片中间
  .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);
  }

  // 卡片底部
  .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);
        }
      }
    }
  }

  // 模态框
  .wodeshenqingMotai {
    // width:100%;
    // height:vww(244);
    .slot-content {
      .u-textarea {
        width: vww(280);
        height: vww(90) !important;

        .uni-textarea-wrapper {
          height: vww(90) !important;
        }
      }
    }
  }

  // 返回顶部
  .back-top-container{
    .u-transition{
      position:fixed;
      bottom:vww(80)!important;
      right:vww(20)!important;
    }
  }
	
   // 底部占位
   .empty-placeH{
      height:vww(50);
   }

   // 卡片中间
   .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);
   }

   // 卡片底部
   .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);
            }
         }
      }
   }
  // 底部
  .bottomTabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: vww(48);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;

   // 模态框
   .wodeshenqingMotai {
      // width:100%;
      // height:vww(244);
      .slot-content {
         .u-textarea {
            width: vww(280);
            height: vww(90) !important;
            .uni-textarea-wrapper {
               height: vww(90) !important;
            }
         }
      }
   }
    .bottomTabbar_checkBox {
      margin-left: vww(16);

   // 底部
   .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);
         }
      }
   }
      .u-checkbox-group {
        .u-checkbox {
        }
      }
    }

    .bottomTabbar_button {
      display: flex;

      .u-button {
        font-size: 13px;
        margin-right: vww(14);
        width: vww(90);
        height: vww(32);
      }
    }
  }
}
</style>