'日发运计划首页展示两条'

zhangxiaoxu123

2022-07-29 973a3155b687eb3bc837af478933b6a68b8c79f2

 pages/home/home.vue

@@ -1,596 +1,902 @@
<template>
   <view class="home">
      <!-- 轮播图 -->
      <view class="home_swipe"><u-swiper :list="list3" indicator indicatorMode="line" circular></u-swiper></view>
      <!-- 我的申请 -->
      <combined-title title="我的申请" detailsPath="/pages/my-application/my-application"></combined-title>
      <combination-card v-for="(item, index) in shenqingData" index="index">
         <template v-slot:top>
            <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.id)" v-if="item.status == 1">
                     <image src="@/static/home/cehui.png" mode=""></image>
                     <view>撤回</view>
                  </view>
                  <view @click="checkTheScheduleClick" v-if="item.status == 1">
                     <image src="@/static/home/jindu.png" mode=""></image>
                     <view>查看进度</view>
                  </view>
                  <view @click="theFormDataClick" 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">
                     <image src="@/static/home/history.png" mode="" ></image>
                     <view>重新申请</view>
                  </view>
                  <view v-if="item.status == 3">
                     <image src="@/static/home/history.png" mode="" ></image>
                     <view>编辑</view>
                  </view>
                  <view @click="approvalHistoryClick" v-if="item.status == 2 || item.status == 3">
                     <image src="@/static/home/history.png" mode=""></image>
                     <view>审批历史</view>
                  </view>
						
               </view>
               <!-- 已结束小组按钮 -->
               <!-- <view class="bottom-content__chulizhong bottom-content__item" v-if="item.status == 2">
                  <view @click="theFormDataClick">
                     <image src="@/static/home/biaodan.png" mode=""></image>
                     <view>表单数据</view>
                  </view>
						
               </view> -->
            </view>
         </template>
      </combination-card>

      <!-- 我的待办 -->
      <combined-title title="我的待办" detailsPath="/pages/my-todo/my-todo"></combined-title>
      <combination-card v-for="(item, index) in daibanData" index="index">
         <template v-slot:top>
            <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="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="adoptModalShow = true">
                     <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">
                     <image src="@/static/home/history.png" mode=""></image>
                     <view>历史</view>
                  </view>
               </view>
            </view>
         </template>
      </combination-card>

      <!-- 我的已办 -->
      <combined-title title="我的已办 " detailsPath="/pages/my-have-todo/my-have-todo"></combined-title>
      <combination-card v-for="(item, index) in yibanData" index="index">
         <template v-slot:top>
            <view>
               <text>{{ item.actBusiness.title }}</text>
            </view>
         </template>
         <template v-slot:center>
            <view class="center-container">
               <view class="center-content__one center-margin">
                  <view>
                     <text>任务名称：{{ item.name }}</text>
                  </view>
                  <view>
                     <text>所属流程：{{ item.processName }}</text>
                  </view>
               </view>
               <view class="center-content__two center-margin">
                  <view>
                     <text>发起人：{{ item.actBusiness.createByName }}</text>
                  </view>
                  <view>
                     <text>审批操作：{{ item.deleteReason }}</text>
                  </view>
               </view>
               <view class="center-content__three center-margin">
                  <view class="">
                     <text>审批意见：{{ item.comment }}</text>
                  </view>
                  <view class="">
                     <text>
                        耗时：{{
                           item.duration >= 86400000
                              ? parseInt(item.duration / 86400000 + '天' + parseInt(item.duration % 86400000) / 3600000 + '时' + parseInt(item.duration % 3600000) / 60000 + '分')
                              : item.duration >= 3600000
                              ? parseInt(item.duration / 3600000) + '时' + parseInt(item.duration / 3600000 % 3600000)  + '分'
                              : parseInt(item.duration / 60000) + '分'
                        }}
                     </text>
                  </view>
               </view>
               <view class="center-content__four">
                  <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/biaodan.png" mode=""></image>
                     <view>表单数据</view>
                  </view>
                  <view @click="approvalHistoryClick">
                     <image src="@/static/home/history.png" mode=""></image>
                     <view>审批历史</view>
                  </view>
                  <view @click="deleteApplicationClick(item.id)">
                     <image src="@/static/home/delete.png" mode=""></image>
                     <view>删除</view>
                  </view>
               </view>
            </view>
         </template>
      </combination-card>

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

      <!-- 驳回模态框 -->
      <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="deleteApplicationModal">
         <u-modal
            :show="deleteApplicationModalShow"
            title="提示"
            content="确定删除该申请？"
            :showCancelButton="true"
            @confirm="deleteApplicationModalConfirm"
            @cancel="deleteApplicationModalCancel"
         ></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>
</template>

<script>
import { timeConsuming } from '@/utils/nowDate.js';
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
import combinedTitle from '@/components/common/combined-title/combined-title.vue';
import combinationCard from '@/components/common/combination-card/combination-card.vue';
import {setAccessToken} from '@/utils/status.js'
export default {
   name: 'home',
   data() {
      return {
         // menuShow:false,// 菜单显示
         status: ['草稿', '处理中', '已结束', '已撤回'],
         statusColor: ['#DDDDDD', '#FF9900', '#007AFF', '#06BE00'],
         result: ['未提交', '处理中', '通过', '驳回'],
         resultColor: ['#DDDDDD', '#FF9900', '#06BE00', '#be2b2d'],
         list3: ['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png'],
         // 撤回模态框
         withDrawShow: false,
         withDrawContent: '',
         withDrawId: 0, // 撤回申请ID
         // 通过模态框
         adoptModalShow: false,
         adoptModalContent: '',
         // 驳回模态框
         rejectModalShow: false,
         rejectModalContent: '',
         dataSeletText: '请选择状态',
         // 删除申请模态框
         deleteApplicationModalShow: false,
         // 选择器
         statusSeletShow: false,
         statusList: [['中国', '美国', '日本']],
         // data
         shenqingData: [],
         daibanData: [],
         daibanData: [],
         yibanData: [],
         menuShow: false,
         // 申请
         myApplicationParams: {
            status: '',
            result: '',
            pageNumber: 1,
            pageSize: 2,
            sort: 'createTime',
            order: 'desc'
         },
         // 待办
         todoParams: {
            pageNumber: 1,
            pageSize: 2
         },
         haveTodoParams: {
            pageNumber: 1,
            pageSize: 2,
            sort: 'createTime',
            order: 'desc'
         }
      };
   },
   // 点击导航栏菜单后
   onNavigationBarButtonTap(e) {
      console.log(e);
      this.$refs.menuRef.menuClick();
   },
   onShow() {
      if (this.menuShow == true) {
         this.$refs.menuRef.menuClick();
      }
      this.init();
   },
   components: {
      combinedTitle,
      combinationCard,
      popupMenu
   },
   methods: {
      getUserInfo() {
         this.$reqGet('getUserInfo').then(res => {
            if(res.code == 0) {
               uni.setStorageSync('userInfo',res.data.sysUser)
            }
         })
      },
      init() {
         this.getUserInfo()
         this.getProcessDataList(); // 申请列表
         this.todoList(); // 我的待办
         this.doneList(); // 我的已办
      },
      getProcessDataList() {
         this.$reqGet('getProcessDataList', this.myApplicationParams).then(res => {
            if (res.code === 0) {
               // console.log('申请', res);
               this.shenqingData = res.data.records;
            }
         });
      },
      todoList() {
         this.$reqGet('todoList', this.todoParams).then(res => {
            if (res.code === 0) {
               // console.log('待办', res);
               this.daibanData = res.data.content;
            }
         });
      },
      doneList() {
         this.$reqGet('doneList', this.haveTodoParams).then(res => {
            if (res.code === 0) {
               // console.log('已办', res);
               this.yibanData = res.data.content;
            }
         });
      },
      menushow(e) {
         this.menuShow = e;
      },
      // 撤回模态框
      withDrawClick(id) {
         this.withDrawShow = true;
         this.withDrawId = id;
      },
      withDrawConfirm() {
         console.log(this.withDrawId);
         if (this.withDrawContent.length >= 2) {
            console.log(this.withDrawContent);
         } else {
            uni.showToast({
               title: '请规范输入',
               duration: 2000
            });
         }
      },
      // 通过模态框
      adoptModalConfirm() {
         this.adoptModalShow = false;
      },
      adoptModalCancel() {
         this.adoptModalShow = false;
      },
      // 驳回模态框
      rejectModalConfirm() {
         this.rejectModalShow = false;
      },
      rejectModalCancel() {
         this.rejectModalShow = false;
      },
      withDrawCancel() {
         this.withDrawShow = false;
      },
      // 删除申请模态框
      deleteApplicationModalConfirm() {
         this.deleteApplicationModalShow = false;
      },
      deleteApplicationModalCancel() {
         this.deleteApplicationModalShow = false;
      },
      // 查看进度
      checkTheScheduleClick() {
         uni.navigateTo({
            url: '/pages/check-the-schedule/check-the-schedule'
         });
      },
      // 表单数据
      theFormDataClick() {
         uni.navigateTo({
            url: '/pages/the-form-data/the-form-data'
         });
      },
      // 审批历史
      approvalHistoryClick() {
         uni.navigateTo({
            url: '/pages/approval-history/approval-history'
         });
      },
      // 删除申请
      deleteApplicationClick(id) {
         this.deleteApplicationModalShow = true;
         console.log(id);
      }
   }
};
</script>

<style lang="scss" scoped>
::v-deep.home {
   height: 100%;
   width: 100%;
   padding-bottom: vww(24);
   .home_swipe {
      width: 100%;
      height: vww(160);
      .u-swiper {
         height: vww(160) !important;
         .u-swiper__wrapper {
            height: vww(160) !important;
            .uni-swiper-slides {
               .u-swiper__wrapper__item {
                  .u-swiper__wrapper__item__wrapper {
                     .u-swiper__wrapper__item__wrapper__image {
                        height: vww(160) !important;
                     }
                  }
               }
            }
         }
      }
   }

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

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

   // 通过模态框
   .adoptModal {
      // width:100%;
      // height:vww(244);
      .slot-content {
         .u-textarea {
            width: vww(280);
            height: vww(90) !important;
            .uni-textarea-wrapper {
               height: vww(90) !important;
            }
         }
      }
   }

   // 驳回模态框
   .rejectModal {
      .slot-content {
         display: inline-block;
         .u-textarea {
            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);
               }
            }
         }
      }
   }
}
</style>
<template>

   <view class="home">

      <!-- 轮播图 -->

      <view class="home_swipe"><u-swiper :list="list3" indicator indicatorMode="line" circular></u-swiper></view>

      <!-- 我的申请 -->

      <combined-title title="我的申请" detailsPath="/pages/my-application/my-application"></combined-title>

      <combination-card v-for="(item, index) in shenqingData" index="index">

         <template v-slot:top>

            <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.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 @click="apply(item)" v-if="item.status == 3">

                     <image src="@/static/home/history.png" mode=""></image>

                     <view>重新申请</view>

                  </view>

                  <view @click="editMyApplication(item)" v-if="item.status == 3">

                     <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 class="bottom-content__chulizhong bottom-content__item" v-if="item.status == 2">

                  <view @click="theFormDataClick">

                     <image src="@/static/home/biaodan.png" mode=""></image>

                     <view>表单数据</view>

                  </view>

						
               </view> -->

            </view>

         </template>

      </combination-card>



      <!-- 我的待办 -->

      <combined-title title="我的待办" detailsPath="/pages/my-todo/my-todo"></combined-title>

      <combination-card v-for="(item, index) in daibanData" index="index">

         <template v-slot:top>

            <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="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="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>



      <!-- 我的已办 -->

      <combined-title title="我的已办 " detailsPath="/pages/my-have-todo/my-have-todo"></combined-title>

      <combination-card v-for="(item, index) in yibanData" index="index">

         <template v-slot:top>

            <view>

               <text>{{ item.actBusiness.title }}</text>

            </view>

         </template>

         <template v-slot:center>

            <view class="center-container">

               <view class="center-content__one center-margin">

                  <view>

                     <text>任务名称：{{ item.name }}</text>

                  </view>

                  <view>

                     <text>所属流程：{{ item.processName }}</text>

                  </view>

               </view>

               <view class="center-content__two center-margin">

                  <view>

                     <text>发起人：{{ item.actBusiness.createByName }}</text>

                  </view>

                  <view>

                     <text>审批操作：{{ item.deleteReason }}</text>

                  </view>

               </view>

               <view class="center-content__three center-margin">

                  <view class="">

                     <text>审批意见：{{ item.comment }}</text>

                  </view>

                  <view class="">

                     <text>

                        耗时：{{

                           item.duration >= 86400000

                              ? parseInt(item.duration / 86400000 + '天' + parseInt(item.duration % 86400000) / 3600000 + '时' + parseInt(item.duration % 3600000) / 60000 + '分')

                              : item.duration >= 3600000

                              ? parseInt(item.duration / 3600000) + '时' + parseInt((item.duration / 3600000) % 3600000) + '分'

                              : parseInt(item.duration / 60000) + '分'

                        }}

                     </text>

                  </view>

               </view>

               <view class="center-content__four">

                  <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)">

                     <image src="@/static/home/biaodan.png" mode=""></image>

                     <view>表单数据</view>

                  </view>

                  <view @click="approvalHistoryClick(item.procInstId)">

                     <image src="@/static/home/history.png" mode=""></image>

                     <view>审批历史</view>

                  </view>

                  <view @click="deleteApplicationClick(item.id)">

                     <image src="@/static/home/delete.png" mode=""></image>

                     <view>删除</view>

                  </view>

               </view>

            </view>

         </template>

      </combination-card>

      <combined-title title="日发运计划" detailsPath="/pages/jihua/jihua"></combined-title>

      <combination-card :showTop="false"  v-for="(item,index) in fyData.slice(0,2)" :key="item.id">

           <template v-slot:top></template>

           <template v-slot:center>

              <view class="main-block-box">

                 <view class="jihua-main-line">

                    <view class="name">客户名称：{{item.customerName || ''}}</view>

                 </view>

                 <view class="jihua-main-line">

                    <view class="main-flex">

                       <view>煤种：{{item.order.coalName || ''}}</view>

                       <view>剩余量：{{item.order.executiveSurplus || ''}}</view>

                    </view>

                 </view>

                 <view class="jihua-main-line">

                    <view class="main-flex">

                       <view class="carNum-box">

                          <view>计划车数：</view>

                          <u--input placeholder="请输入发运车数" border="surround" :disabled="true" v-model="item.numPlan"

                             @change="inputTotalChange(item)"></u--input>

                       </view>

                       <view>实际发车数：{{item.order.numReal || ''}}</view>

                    </view>

                 </view>

              </view>

           </template>

           <template v-slot:bottom></template>

      </combination-card>



      <!-- 撤回模态框 -->

      <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="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">

               <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="deleteApplicationModal">

         <u-modal

            :show="deleteApplicationModalShow"

            title="提示"

            content="确定删除该申请？"

            :showCancelButton="true"

            @confirm="deleteApplicationModalConfirm"

            @cancel="deleteApplicationModalCancel"

         ></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>

</template>



<script>

import { timeConsuming } from '@/utils/nowDate.js';

import popupMenu from '@/components/common/popup-menu/popup-menu.vue';

import combinedTitle from '@/components/common/combined-title/combined-title.vue';

import combinationCard from '@/components/common/combination-card/combination-card.vue';

import { setAccessToken } from '@/utils/status.js';

export default {

   name: 'home',

   data() {

      return {

         // menuShow:false,// 菜单显示

         status: ['草稿', '处理中', '已结束', '已撤回'],

         statusColor: ['#dd8b8c', '#FF9900', '#007AFF', '#06BE00'],

         result: ['未提交', '处理中', '通过', '驳回'],

         resultColor: ['#dd8b8c', '#FF9900', '#06BE00', '#be2b2d'],

         list3: ['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png'],

         // 撤回模态框

         withDrawShow: false,

         fyData: [],

         withDrawData: {

            reason: '',

            id: '', // 撤回申请ID

            procInstId: ''

         },

         withDrawContent: '',

         // 重新申请

         form: {

            sendMessage: true,

            sendSms: true,

            sendEmail: true,

            procDefId: '',

            assignees: [],

            priority: '0'

         },

         assigneeList: [],

         showAssign: false,

         isGateway: false,

         isCustom: false,

         // 通过模态框

         adoptModalShow: false,

         // 通过请求

         adoptForm: {

            ids: '',

            comment: ''

         },

         // 驳回模态框

         rejectModalShow: false,

         rejectModalContent: '',

         // dataSeletText: '请选择状态',

         // 驳回请求

         rejectForm: {

            procInstIds: '',

            comment: ''

         },

         modalType: 0,

         // 删除申请模态框

         deleteApplicationModalShow: false,

         procInstId:'',

         // 选择器

         statusSeletShow: false,

         statusList: [['中国', '美国', '日本']],

         // data

         shenqingData: [],

         daibanData: [],

         daibanData: [],

         yibanData: [],

         menuShow: false,

         // 申请

         myApplicationParams: {

            status: '',

            result: '',

            pageNumber: 1,

            pageSize: 2,

            sort: 'createTime',

            order: 'desc'

         },

         // 待办

         todoParams: {

            pageNumber: 1,

            pageSize: 2

         },

         haveTodoParams: {

            pageNumber: 1,

            pageSize: 2,

            sort: 'createTime',

            order: 'desc'

         }

      };

   },

   // 点击导航栏菜单后

   onNavigationBarButtonTap(e) {

      console.log(e);

      this.$refs.menuRef.menuClick();

   },

   onShow() {

      if (this.menuShow == true) {

         this.$refs.menuRef.menuClick();

      }

      this.init();

   },

   components: {

      combinedTitle,

      combinationCard,

      popupMenu

   },

   methods: {

      getUserInfo() {

         this.$reqGet('getUserInfo').then(res => {

            if (res.code == 0) {

               uni.setStorageSync('userInfo', res.data.sysUser);

            }

         });

      },

      init() {

         this.getUserInfo();

         this.getProcessDataList(); // 申请列表

         this.todoList(); // 我的待办

         this.doneList(); // 我的已办

         this.xscarshippingdayplan();  //日计划

      },

      xscarshippingdayplan(allList) { //已经设置的

      console.log(allList,'allList==========')

         let params = {

            current: 1,

            size: 2,

            shippingDate: this.todayDate()

         }

         this.$reqGet('xscarshippingdayplan', params).then(res => {

            if (res.code == 0) {

               this.fyData = res.data.records

               uni.hideLoading();

            }

         }).catch(e => {

            uni.hideLoading();

         })

      },

      todayDate() {

         let yes = new Date().getTime()

         let date = new Date(yes)

         let y = date.getFullYear()

         let m = date.getMonth() + 1

         m = m < 10 ? ('0' + m) : m

         let d = date.getDate()

         d = d < 10 ? ('0' + d) : d

         const time = y + '-' + m + '-' + d

         console.log('todayDate---------', time)

         return time

      },

      getProcessDataList() {

         this.$reqGet('getProcessDataList', this.myApplicationParams).then(res => {

            if (res.code === 0) {

               // console.log('申请', res);

               this.shenqingData = res.data.records;

            }

         });

      },

      todoList() {

         this.$reqGet('todoList', this.todoParams).then(res => {

            if (res.code === 0) {

               // console.log('待办', res);

               this.daibanData = res.data.content;

            }

         });

      },

      doneList() {

         uni.showLoading({

            title:'加载中...'

         })

         this.$reqGet('doneList', this.haveTodoParams).then(res => {

            uni.hideLoading();

            if (res.code === 0) {

               // console.log('已办', res);

               this.yibanData = res.data.content;

            }

         });

      },

      menushow(e) {

         this.menuShow = e;

      },

      // 撤回模态框

      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;

            }

         });

         if (this.withDrawData.reason.length >= 2) {

            this.$reqPost('withDraw', this.withDrawData, 'form').then(res => {

               this.withDrawShow = false;

               if (res.code == 0) {

                  uni.showToast({

                     title: res.data,

                     duration: 2000

                  });

               }

               this.getProcessDataList();

            });

         } else {

            uni.showToast({

               title: '请规范输入',

               duration: 2000

            });

         }

      },

      // 通过

      adopClick(v) {

         console.log('通过点击', v);

         this.adoptModalShow = true;

         this.adoptForm.ids = v.id;

         this.modalType = 0;

         // let urlparam = v.procDefId+'/'+v.key;

         // this.$reqGet('getNextNode',{},urlparam).then(res=>{

         //    console.log('通过欲请求');

         // })

      },

      // 通过模态框

      adoptModalConfirm() {

         this.adoptModalShow = false;

         this.adoptForm.comment = this.adoptModalContent;



         this.$reqPost('passAll', this.adoptForm, 'form').then(res => {

            if (res.code == 0) {

               this.$u.toast('操作成功!');

            } else {

               this.$u.toast('添加失败!!');

            }

         });

      },

      adoptModalCancel() {

         this.adoptModalShow = false;

      },

      // 驳回

      rejectClick(v) {

         this.modalType = 1;

         this.rejectModalShow = true;

         this.rejectForm.procInstIds = v.procInstId;

      },

      // 驳回模态框

      rejectModalConfirm() {

         this.rejectModalShow = false;



         this.$reqPost('backAll', this.rejectForm, 'form').then(res => {

            if (res.code == 0) {

               this.$u.toast('操作成功！');

            } else {

               this.$u.toast('操作失败！！！');

            }

            this.todoList(); // 我的待办

         });

      },

      rejectModalCancel() {

         this.rejectModalShow = false;

      },

      withDrawCancel() {

         this.withDrawShow = false;

      },

      // 删除申请模态框

      deleteApplicationModalConfirm() {

         this.deleteApplicationModalShow = false;

         this.$reqPost('deleteHistoric',{ids:this.procInstId},'form').then(res=>{

            if(res.code == 0){

               this.$u.toast('操作成功！')

               this.yibanData = [];

               this.doneList(); // 我的已办

            } else {

               this.$u.toast('操作失败！！！')

            }

         })

			
      },

      deleteApplicationModalCancel() {

         this.deleteApplicationModalShow = false;

      },

      // 查看进度

      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}`

         });

      },

      // 重新申请

      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();

                        this.getProcessDataList();

                     })

                  } 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}`

         });

      },

      // 审批历史

      approvalHistoryClick(v) {

         uni.navigateTo({

            url: `/pages/approval-history/approval-history?index=${v}`

         });

      },

      // 删除申请

      deleteApplicationClick(id) {

         this.deleteApplicationModalShow = true;

         this.procInstId = id;

         console.log(id);

      }

   }

};

</script>



<style lang="scss" scoped>

::v-deep.home {

   width: 100%;

   display: flex;

   flex-direction: column;

   padding-bottom: vww(20);

   .home_swipe {

     width: 100%;

     .u-swiper {

      height: vww(160) !important;

      .u-swiper__wrapper {

       height: vww(160) !important;

       .u-swiper__wrapper__item {

        .u-swiper__wrapper__item__wrapper {

         .u-swiper__wrapper__item__wrapper__image {

          height: vww(160) !important;

         }

        }

       }

      }

     }

    }

   .u-input {

      height: vww(16);

      width: vww(100);

   }

   // 卡片中间

   .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);

            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;

            }

         }

      }

   }



   // 通过模态框

   .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;

            }

         }

      }

   }



   // 驳回模态框

   .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);

               }

            }

         }

      }

   }

    
   //日发运计划

   .main-block-box {

      // box-shadow: 0px 0px 8px 0px rgba(216,218,238,0.80); 
      height: vww(80);

      // padding: vww(10);

      box-sizing: border-box;

      margin-top: vww(12);

      border-radius: vww(8);

       &:first-child{

         margin-top: vww(5);

      }

      .jihua-main-line {

         width: 100%;

         display: flex;

	
         view {

            font-size: vww(14);

         }

	
         .name {

            font-weight: 600 !important;

         }

	
         .main-flex {

            width: 100%;

            display: flex;

            justify-content: space-between;

               view{

               font-size: vww(14);

               line-height: vww(32);

            }

            .carNum-box {

               display: flex;

                   view {

                      font-size: vww(14);

                       line-height: vww(32);

                   }

					
            }

         }

      }

	
   }

}

</style>