tatolpage

付延余

2022-07-26 7c3218e12105b87cab21e9ced57c99c339ffac10

 pages/my-have-todo/my-have-todo.vue

@@ -1,25 +1,36 @@
<template>
   <view class="my-have-todo">
      <!-- 搜索区域 -->
      <view class="searchContainer">
			
		
      <view class="searchBox">
         <view class="search">
            <u-search @clickIcon="searchIconClick" :clearabled="false" :showAction="false" placeholder="请输入标题" v-model="searchData" shape="square"></u-search>
            <u-search :clearabled="true" :showAction="false" placeholder="请输入标题" v-model="haveTodoParams.title" shape="square"></u-search>
         </view>
         <!-- 状态选择器 -->
         <view class="data-selet" @click="statusSeletShow = true">
         <!-- <view class="data-selet" @click="statusSeletShow = true">
            <view class="content">
               <text>{{ dataSeletText }}</text>
            </view>
            <view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
         </view> -->
         <view class="search">
            <u-search  :clearabled="true" :showAction="false" placeholder="请输入任务名称" v-model="haveTodoParams.name" shape="square"></u-search>
         </view>
      </view>

      <!-- 时间搜索区域 -->
      <view class="timeContiner">
         <uni-datetime-picker class="time-picker" type="date" :clear-icon="false" v-model="createTime" @change="startDateChange" placeholder="开始时间" />
         <uni-datetime-picker class="time-picker" type="date" :clear-icon="false" v-model="endTime" @change="endDateChange" placeholder="结束时间" />
         <uni-datetime-picker class="time-picker" type="date" :clear-icon="true" v-model="haveTodoParams.startDate" @change="startDateChange" placeholder="开始时间" />
         <uni-datetime-picker class="time-picker" type="date" :clear-icon="true" v-model="haveTodoParams.endDate" @change="endDateChange" placeholder="结束时间" />
      </view>

		
      <view class="searchButton">
         <u-button type="primary" text="搜索" @click="searchButtonClick"></u-button>
         <u-button type="primary" :plain="true" text="清空" @click="emptyButtonClick"></u-button>
      </view>
</view>
      <!-- 我的已办卡片区域 -->
      <u-checkbox-group v-model="checkBoxValue" placement="column" @change="checkboxChange" style="margin-bottom:50px">
      <combination-card v-for="(item, index) in yibanData" index="index">
@@ -70,11 +81,11 @@
            <view class="bottom-container">
               <!-- 已办按钮 -->
               <view class="bottom-content__item">
                  <view @click="theFormDataClick">
                  <view @click="theFormDataClick(item.tableId)">
                     <image src="@/static/home/biaodan.png" mode=""></image>
                     <view>表单数据</view>
                  </view>
                  <view @click="approvalHistoryClick">
                  <view @click="approvalHistoryClick(item.procInstId)">
                     <image src="@/static/home/history.png" mode=""></image>
                     <view>审批历史</view>
                  </view>
@@ -94,7 +105,7 @@
            <u-checkbox-group size="35" v-model="totalSelectValue" placement="column" @change="totalSelectChange"><u-checkbox labelSize="13px" label="全选" name="tatalSelect"></u-checkbox></u-checkbox-group>
         </view>
         <view class="bottomTabbar_button">
            <u-button :plain="true" type="primary"  text="批量删除" @click="deleteApplicationClick()"></u-button>
            <u-button :plain="true" type="primary"  text="批量删除" @click="deleteApplicationClickAll()"></u-button>
         </view>
      </view>
      
@@ -111,7 +122,7 @@
      </view>

      <!-- 选择器 -->
      <u-picker @cancel="statusSeletShow = false" @confirm="statusConfirm" :show="statusSeletShow" :columns="statusList"></u-picker>
      <!-- <u-picker @cancel="statusSeletShow = false" @confirm="statusConfirm" :show="statusSeletShow" :columns="statusList"></u-picker> -->
      
      <!-- 菜单栏 -->
      <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
@@ -125,19 +136,31 @@
   data() {
      return {
         // 条件搜索
         searchData: '',
         dataSeletText: '请选择状态',
         // searchData: '',
         // dataSeletText: '请选择状态',
         // 时间选择
         createTime: '',
         endTime: '',
         // createTime: '',
         // endTime: '',
         // 复选框
         checkBoxValue:[],
         totalSelectValue:[],
         // 选择器
         statusSeletShow: false,
         statusList: [['中国', '美国', '日本']],
         // statusSeletShow: false,
         // statusList: [['中国', '美国', '日本']],
         yibanData: [],
         // 删除申请
         deleteIds:'',
         deleteApplicationModalShow:false,
         yibanData: []
         haveTodoParams:{
            name: '',
            pageNumber: 1,
            pageSize: 10,
            sort: 'createTime',
            order: 'desc',
            title: '',
            startDate: '',
            endDate: ''
         }
      };
   },
   onShow(){
@@ -161,46 +184,76 @@
      },
      // 已办
      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;
            }
         });
      },
      // 搜索
      searchButtonClick(){
         this.init();
      },
      // 清空
      emptyButtonClick(){
         this.haveTodoParams.name = '';
         this.haveTodoParams.title = '';
         this.haveTodoParams.startDate = '';
         this.haveTodoParams.endDate = '';
         this.init();
      },
      menushow(e){
         this.menuShow = e
      },
      deleteApplicationClick(id){
         this.deleteIds = id;
         this.deleteApplicationModalShow = true;
      },
      deleteApplicationClickAll(){
         if(this.checkBoxValue.length > 0){
            this.deleteIds = this.checkBoxValue.toString(',');
            this.deleteApplicationModalShow = true;
         } else{
            this.$u.toast('未选中申请')
         }
      },
      // 删除申请模态框
      deleteApplicationModalConfirm() {
         this.deleteApplicationModalShow = false;
         this.$reqPost('deleteHistoric',{ids:this.deleteIds},'form').then(res=>{
            if(res.code == 0){
               this.$nextTick(()=>{
                  this.$u.toast('操作成功！')
               })
               this.yibanData = [];
               this.init();
            } else {
               this.$u.toast('操作失败！！！')
            }	
         })
      },
      deleteApplicationModalCancel() {
         this.deleteApplicationModalShow = false;
      },
      // 时间选择器
      startDateChange() {
         this.queryRealTimeShippingData.startDate = '';
         this.$nextTick(() => {
            console.log(this.queryRealTimeShippingData);
            this.realTimeShipping();
         });
         // this.queryRealTimeShippingData.startDate = '';
         // this.$nextTick(() => {
         //    console.log(this.queryRealTimeShippingData);
         //    this.realTimeShipping();
         // });
      },
      endDateChange() {
         this.queryRealTimeShippingData.endDate = '';
         this.$nextTick(() => {
            console.log(this.queryRealTimeShippingData);
            this.realTimeShipping();
         });
      },
      // 搜索
      searchIconClick() {
         console.log(1111, this.searchData);
         // this.queryRealTimeShippingData.endDate = '';
         // this.$nextTick(() => {
         //    console.log(this.queryRealTimeShippingData);
         //    this.realTimeShipping();
         // });
      },
      // 复选框
      checkboxChange(n){
@@ -217,20 +270,20 @@
         }
      },
      // 状态
      statusConfirm(a){
         this.statusSeletShow = false
         console.log(a)
      },
      // statusConfirm(a){
      //    this.statusSeletShow = false
      //    console.log(a)
      // },
      // 表单数据
      theFormDataClick() {
      theFormDataClick(v) {
         uni.navigateTo({
            url: '/pages/the-form-data/the-form-data'
            url:  `/pages/the-form-data/the-form-data?index=${v}`
         });
      },
      // 审批历史
      approvalHistoryClick() {
      approvalHistoryClick(v) {
         uni.navigateTo({
            url: '/pages/approval-history/approval-history'
            url: `/pages/approval-history/approval-history?index=${v}`
         });
      }
   }
@@ -240,87 +293,103 @@
<style lang="scss" scoped>
::v-deep.my-have-todo {
   // 搜索区域
   .searchBox {
      width: 91%;
      display: flex;
      justify-content: space-between;
      margin: vww(16) auto;
      .search {
         width: vww(160);
         border: 1px solid #d1d1d1;
         border-radius: vww(4);
         .u-search {
            .u-search__content {
               height: 40px;
               background-color: #ffffff !important;
               .u-search__content__icon {
                  width: 10px;
                  height: 5.5px;
               }
               .u-search__content__input {
                  background-color: #ffffff !important;
                  .uni-input-placeholder{
                     color:#CCCCCC!important;
                  }
               }
            }
         }
      }
      // 下拉菜单
      .data-selet {
         border: 1px solid #d1d1d1;
         border-radius: 4px;
         width: vww(160);
         // width: 100%;
         height: 40px;
   .searchContainer{
		
      .searchButton{
         width: 91%;
         margin: vww(16) auto;
         display: flex;
         align-items: center;
         font-size: 13px;
         color: #CCCCCC;
         .uni-select__icon {
            display: flex;
            align-content: center;
            margin: 0 10px;
            image {
               width: 10px;
               height: 5.5px;
            }
         }
         .content {
            margin-left: vww(8);
            width: vww(150);
         .u-button{
            width:30%;
         }
      }
   }

   // 时间搜索
   .timeContiner {
      width: 91%;
      margin: 0 auto vww(16);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .uni-date {
         width: vww(160);
         .uni-date-editor {
            .uni-date-editor--x  {
               .uni-date-x {
                  .uni-date__x-input {
                     .uni-input-wrapper{
                        .uni-input-placeholder{
                           color:#CCCCCC;
                           font-size: vww(13);
                        }
		
      .searchBox {
         width: 91%;
         display: flex;
         justify-content: space-between;
         margin: vww(16) auto;
         .search {
            width: vww(160);
            border: 1px solid #d1d1d1;
            border-radius: vww(4);
            .u-search {
               .u-search__content {
                  height: 40px;
                  background-color: #ffffff !important;
                  .u-search__content__icon {
                     width: 10px;
                     height: 5.5px;
                  }
                  .u-search__content__input {
                     background-color: #ffffff !important;
                     .uni-input-placeholder{
                        color:#CCCCCC!important;
                     }
                  }
               }
            }
            .uni-date-x--border{
               border: 1px solid #d1d1d1!important;
         }
         // 下拉菜单
         .data-selet {
            border: 1px solid #d1d1d1;
            border-radius: 4px;
            width: vww(160);
            // width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #CCCCCC;
            .uni-select__icon {
               display: flex;
               align-content: center;
               margin: 0 10px;
               image {
                  width: 10px;
                  height: 5.5px;
               }
            }
            .content {
               margin-left: vww(8);
               width: vww(150);
            }
         }
      }
		
      // 时间搜索
      .timeContiner {
         width: 91%;
         margin: 0 auto vww(16);
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         .uni-date {
            width: vww(160);
            .uni-date-editor {
               .uni-date-editor--x  {
                  .uni-date-x {
                     .uni-date__x-input {
                        .uni-input-wrapper{
                           .uni-input-placeholder{
                              color:#CCCCCC;
                              font-size: vww(13);
                           }
                        }
                     }
                  }
               }
               .uni-date-x--border{
                  border: 1px solid #d1d1d1!important;
               }
            }
         }
      }
		
   }
	

	

   // 卡片中间
   .center-container {