日发运计划接口同步后台更新。数字键盘动作更新。主页、申请页列表功能按钮更新（撤回，编辑，删除）。完善页面细节

付延余

2022-12-22 49e3612d8f4f0dbd3ce261b17f20ad59da59db55

 pages/home/home.vue

@@ -1,587 +1,1113 @@
<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';
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: {
      init() {
         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);
               }
            }
         }
      }
   }
}
<template>

   <view class="home">

      <!-- 轮播图 -->

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



      <!-- 图表 -->

      <combined-title title="煤仓库存明细"></combined-title>

      <view class="charts-box">

         <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" v-if="uchartsData.length > 0" />

         <u-empty mode="data" iconSize="200" textSize="25" width="350" height="350" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="uchartsData.length == 0"></u-empty>

      </view>

      <!-- 我的申请 -->

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

      <view class="card-group">

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

            <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.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 @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 == 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>

                  <!-- 已结束小组按钮 -->

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

      </view>



      <!-- 我的待办 -->

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

      <view class="card-group">

         <combination-card class="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(item.tableId)">

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

      </view>



      <!-- 我的已办 -->

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

      <view class="card-group">

         <combination-card class="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 == 'undefined' ? '未填写' : 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)" v-if="item.processName == '发运通知单'">

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

      </view>



      <!-- 日计划 -->

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

      <view class="card-group bottomChild">

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

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



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

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

      <u-gap height="15" bgColor="#eeeeee"></u-gap>

      <view class="utils">

         <view class="utils-container">

            <view class="utils-container-body" @click="redirectLogin">

               <view class="top"><u-icon name="backspace" color="#FF4233" size="70"></u-icon></view>

               <view class="bottom-text"><text>退出</text></view>

            </view>

            <!-- <view class="utils-container-body" @click="huanBang">

               <view class="top"><u-icon name="lock-open" color="#1987FF" size="70"></u-icon></view>

               <view class="bottom-text"><text>换绑</text></view>

            </view> -->

         </view>

      </view>

      <u-gap height="60" bgColor="#eeeeee"></u-gap>

   </view>

</template>



<script>

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

import { BaseUrl } from '@/utils/request.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, redirectLogin } from '@/utils/status.js';

import { logout } from '@/api/global.js';



export default {

   name: 'home',

   onLaunch() {

      let that = this;

      uni.addInterceptor('redirectTo', {

         //监听关闭本页面跳转

         success(e) {

            that.watchRouter();

         }

      });

   },

   computed: {

      rijihuaMenu() {

         return this.$store.state.rijihuaMenu;

      },

      shenqingMenu() {

         return this.$store.state.shenqingMenu;

      }

   },

   data() {

      return {

         // ucharts图表

         chartData: {},

         opts: {

            color: ['#FAC858', '#EE6666', '#73C0DE', '#91CB74', '#1890FF', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],

            padding: [5, 5, 5, 5],

            extra: {

               pie: {

                  activeOpacity: 0.5,

                  activeRadius: 10,

                  offsetAngle: 0,

                  labelWidth: 15,

                  border: true,

                  borderWidth: 3,

                  borderColor: '#FFFFFF'

               }

            }

         },

         uchartsData: [],

         userId: null,

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

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

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

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

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

         list3: ['../../../../static/groupAppTotalImg/banner.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: [],

         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'

         }

      };

   },

   // 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

   // onReady() {



   // },

   // 点击导航栏菜单后

   onNavigationBarButtonTap(e) {

      console.log('退出导航栏按钮事件', e);

      // this.$refs.menuRef.menuClick();

   },

   // 监听左上角的回退事件

   onUnload(event) {

      //多层级跳转之后，监听左上角返回事件，直接退回到index

      console.log('监听左上角', event);

      this.logout();

   },

   onShow() {

      // 菜单注释（app待用）

      // if (this.menuShow == true) {

      //    this.$refs.menuRef.menuClick();

      // }

      this.init();

   },

   components: {

      combinedTitle,

      combinationCard

      // popupMenu

   },

   methods: {

      watchRouter() {

         console.log('路由跳转');

      },

      init() {

         this.getUserInfo(); // 用户信息

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

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

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

         this.xscarshippingdayplan(); // 日计划

      },

      getUserInfo() {

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

            if (res.code == 0) {

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

               this.userId = res.data.sysUser.userId;

               this.$nextTick(() => {

                  this.coalbunker();

               });

            }

         });

      },

      getServerData() {

         console.log('加载图表', this.uchartsData);

         //模拟从服务器获取数据时的延时

         setTimeout(() => {

            //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接

            let res = {

               series: [

                  {

                     data: this.uchartsData

                  }

               ]

            };

            this.chartData = JSON.parse(JSON.stringify(res));

         }, 500);

      },

      // 煤仓当前剩余量

      coalbunker() {

         this.uchartsData = [];

         this.$reqGet('coalbunker', { customerId: this.userId }).then(res => {

            let newArr = res.data.records;

            newArr.forEach(item => {

               if (item.stock != null) {

                  let a = { name: '', value: '', labelText: '' };

                  a.name = item.bunkerName + '剩余量';

                  a.value = item.stock;

                  // a.labelText ='剩余量：' + item.stock;

                  this.uchartsData.push(a);

               }

            });

            this.getServerData(); // 加载图表

         });

      },

      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(procInstId) {

         this.withDrawShow = true;

         this.withDrawData.procInstId = procInstId;

      },

      withDrawConfirm() {

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

            this.withDrawShow = false;

            if (res.code == 0) {

               uni.showToast({

                  title: res.data,

                  duration: 2000

               });

            }

            // 刷新列表

            this.getProcessDataList();

            this.todoList();

            this.doneList();

         });

      },

      withDrawCancel() {

         this.withDrawShow = false;

      },

      // 通过

      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).then(res => {

            if (res.code == 0) {

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

            } else {

               this.$u.toast('通过失败!!');

            }

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

            this.doneList();

         });

      },

      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).then(res => {

            if (res.code == 0) {

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

            } else {

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

            }

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

            this.doneList();

         });

      },

      rejectModalCancel() {

         this.rejectModalShow = false;

      },

      // 删除申请

      deleteApplicationClick(id) {

         this.deleteApplicationModalShow = true;

         this.procInstId = id;

         console.log(id);

      },

      // 删除申请模态框

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

         });

      },

      // 删除撤回申请

      deleteWithDrawApplication(id) {

         this.deleteWithDrawApplicationGlobal(id)

            .then(res => {

               if (res.code == 0) {

                  // 刷新列表

                  this.getProcessDataList();

               }

            })

            .catch(err => {

               console.log('删除撤回申请异常');

            });

      },

      // 重新申请

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

         });

      },

      redirectLogin() {

         redirectLogin();

      },

      huanBang() {

         uni.navigateTo({

            url: '/pages/register/register'

         });

      }

   }

};

</script>



<style lang="scss" scoped>

::v-deep.home {

   width: 100%;

   display: flex;

   flex-direction: column;



   // 横向菜单栏

   .utils {

      .utils-container {

         display: flex;

         // justify-content: space-between;

         justify-content: center;

         width: 66%;

         margin: 0 auto;

         .utils-container-body {

            display: flex;

            align-items: center;

         }

      }

   }



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

                  }

               }

            }

         }

      }

   }



   // echarts图表

   .charts-box {

      width: 91%;

      height: vww(330);

      margin: 0 auto;

      .u-empty {

         height: 100%;

      }

   }



   .u-input {

      height: vww(16);

      width: vww(100);

   }



   //卡片

   .card-group {

      .card {

         &:nth-of-type(2) {

            .combination-card {

               margin-bottom: 0px !important;

            }

         }

      }

   }

   .bottomChild {

      margin-bottom: vww(20);

   }



   // 卡片中间

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

         width: vww(330);

         .rejectMesaage {

            display: flex;

            padding: vww(3);

            border: 1px solid #0307ff;

            border-radius: vww(4);

            font-size: 13px;



            text {

               margin-left: vww(5);

            }

         }



         .u-textarea {

            margin-top: vww(10);

            width: vww(280);

            height: vww(90) !important;



            .u-textarea__field {

               height: vww(90) !important;

            }

         }

      }

   }



   // 驳回模态框

   .rejectModal {

      .slot-content {

         display: inline-block;

         .rejectMesaage {

            display: flex;

            padding: vww(3);

            border: 1px solid #0307ff;

            border-radius: vww(4);

            font-size: 13px;



            text {

               margin-left: vww(5);

            }

         }



         .u-textarea {

            margin-top: vww(10);

            width: vww(280);

            height: vww(90) !important;



            .u-textarea__field {

               height: vww(90) !important;

            }

         }



         .rejectBack {

            margin-top: vww(24);



            .rejectBack-title {

               font-size: vww(13);

            }



            // 下拉菜单

            .data-selet {

               border: 1px solid #d1d1d1;

               border-radius: 4px;

               width: vww(300);

               height: 40px;

               display: flex;

               align-items: center;

               font-size: 13px;

               color: #666;

               margin-top: vww(8);



               .uni-select__icon {

                  display: flex;

                  align-content: center;

                  margin: 0 10px;



                  image {

                     width: 10px;

                     height: 5.5px;

                  }

               }



               .content {

                  margin-left: vww(8);

                  width: vww(280);

               }

            }

         }

      }

   }



   //日发运计划

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