1.贺报详情改弹窗2.表格左侧固定住3.时间筛选去掉全部月份保留近一年的

src/components/ebiz/billingDetail/tableDetail2.vue

@@ -124,13 +124,14 @@ export default {
     },
     // 查看详情 跳转至详情页面
     look(num) {
+      this.$emit('fro-child', num);
       console.log(num);
-      this.$router.push({
+      // this.$router.push({
-        path: '/policyDetails',
+      //   path: '/policyDetails',
-        query: {
+      //   query: {
-          orderNo: num,
+      //     orderNo: num,
-        }
+      //   }
-      })
+      // })
     }
   }
 }
@@ -173,6 +174,13 @@ export default {
 table {
   // width: 200vw;
 }
+.th-fixed {
+  position: sticky;
+  border: 1px solid #999 !important;
+  left: 0;
+  width: 35px !important;
+  padding: 0 5px;
+}
 .statisticsTable {
   width: 100%;
   overflow-x: hidden;
@@ -198,12 +206,7 @@ table {
     }
   }
 }
-.th-fixed {
+
-  // position: sticky;
-  left: 0;
-  width: 35px !important;
-  padding: 0 5px;
-}
 .td-fixed {
   // position: sticky;
   width: 33px !important;

src/views/ebiz/billingDetail/billingDetail.vue

@@ -103,6 +103,7 @@
         @currentChange="currentChange"
         @double_click="double_click"
         @from-child="double_click"
+        @fro-child="xiangqing"
       ></tableDetail2>
       <!--      </van-list>-->
     </div>
@@ -126,7 +127,7 @@
         <div style="margin-top: 10px">
           <div>时间</div>
           <div class="button_times">
-            <van-button size="small" :class="dialogForm.dateFlag === 'all' ? 'checked' : ''" @click="typeCheck('all')">全部</van-button>
+            <!-- <van-button size="small" :class="dialogForm.dateFlag === 'all' ? 'checked' : ''" @click="typeCheck('all')">全部</van-button> -->
             <van-button size="small" :class="dialogForm.dateFlag === 'm' ? 'checked' : ''" @click="typeCheck('m')">按月份查询</van-button>
             <van-button size="small" :class="dialogForm.dateFlag === 'y' ? 'checked' : ''" @click="typeCheck('y')">按时间范围查询</van-button>
           </div>
@@ -234,18 +235,33 @@
         title="请选择月份"
         v-model="currentDate"
         type="year-month"
+        :min-date="minDate"
         :max-date="maxDate"
         :formatter="formatter"
         @confirm="confirmChange"
         @cancel="cancelChange"
       />
     </van-popup>
+    <div class="hebao" v-if="hebaoShow">
+      <generateImg
+        @child-colse="closeHebao"
+      ></generateImg>
+    </div>
+    <div class="xiangqing" v-if="xiangqingShow" >
+      <policyDetails
+        :orderNo="orderNo"
+        @child-back="closeDetails"
+      >
+      </policyDetails>
+    </div>
   </div>
 </template>
 
 <script>
 import { Icon, RadioGroup, Radio, DatetimePicker } from 'vant'
 import tableDetail2 from '@/components/ebiz/billingDetail/tableDetail2'
+import generateImg from '../generateImg/generateImg.vue'
+import policyDetails from './policyDetails.vue'
 import { getMisBranchComList2 } from '@/api/ebiz/branchOffice/branchOffice'
 import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
 import { queryOutOrderList, getBranchByUser } from '@/api/ebiz/billingDetail/billingDetail'
@@ -257,6 +273,8 @@ export default {
   name: 'billingDetail',
   components: {
     tableDetail2,
+    generateImg,
+    policyDetails,
     [Icon.name]: Icon,
     [RadioGroup.name]: RadioGroup,
     [Radio.name]: Radio,
@@ -303,18 +321,19 @@ export default {
       timeShow: false,
       dialogForm: {
         outOrderType: '',
-        dateFlag: 'all',
+        dateFlag: 'm',
         startDate: '',
         endDate: ''
       },
       show: false,
       outOrderType: 'accept', // advance
-      dateFlag: '',
+      dateFlag: 'm',
       style02: 'style02', //style02 时，显示红字红三角的样式，不写的话展示默认样式
       currentIndex: 0, //0 当月 1当天
       theads: ['序号', '承保时间', '预收时间', '产品名称', '保费', '业务员姓名', '机构','查看'],
       tableData: [],
       total: 0,
+      minDate: '',
       maxDate: new Date(),
       filterDate: '',
       postDate: '', //实际给后台传的时间
@@ -359,10 +378,14 @@ export default {
       maxDate: new Date(),
       monthDate: new Date(),
       overlayShow: false,
+      hebaoShow: false,
+      xiangqingShow: false,
+      orderNo: '',
     }
   },
   created() {
     this.getyaerMonth();
+    this.getmonthList();
     this.outOrderTypeChange();
   },
   mounted() {
@@ -392,12 +415,12 @@ export default {
     },
     timeConfirm(t) {
       this.$nextTick(() => {
-        console.log(this.currentDate)
+        // console.log(this.currentDate)
         let time = new Date(t)
         let y = time.getFullYear()
         let m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1
         let d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
-        console.log(y, m, d)
+        // console.log(y, m, d)
         this.dialogForm[this.TimeFlag] = y + '-' + m + '-' + d
         this.timeShow = false
       })
@@ -442,6 +465,7 @@ export default {
       this.outOrderType = this.dialogForm.outOrderType
       this.dateFlag = this.dialogForm.dateFlag
       this.show = false
+      this.titleText = this.dialogForm.startDate.toString() + '~' + this.dialogForm.endDate.toString()
       this.outOrderTypeChange()
       this.queryOutOrderListFunc()
     },
@@ -461,7 +485,7 @@ export default {
         this.dialogForm.dateFlag = 'all'
         this.firstTime = false
       }
-      console.log(this.dialogForm.dateFlag);
+      // console.log(this.dialogForm.dateFlag);
       this.show = true
     },
     //时间筛选
@@ -605,10 +629,11 @@ export default {
     },
     // 双击事件
     double_click(data) {
-      console.log(JSON.parse(JSON.stringify(data)), '发生了点击')
+      // console.log(JSON.parse(JSON.stringify(data)), '发生了点击')
-      this.$router.push({
+      this.hebaoShow = true
-        path: '/generateImg'
+      // this.$router.push({
-      })
+      //   path: '/generateImg'
+      // })
       localStorage.setItem('orderList', JSON.stringify(data))
     },
 
@@ -711,16 +736,18 @@ export default {
       var currentYear = currentDate.getFullYear();
       var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
       this.monthValue = currentYear + '-' + currentMonth
+      this.dialogForm.startDate = currentYear + '-' + currentMonth + '-' + '01' // "2024-09-01",
+      this.dialogForm.endDate = currentYear + '-' + currentMonth + '-' + '30'//"2024-09-30",
+      this.titleText = this.monthValue
     },
     typeCheck(e) {
       this.dialogForm.dateFlag = e
-      if(e == 'all') {
+      // if(e == 'all') {
-        this.titleText = '全部'
+      //   this.titleText = '全部'
-      }if(e == 'm') {
+      // }
+      if(e == 'm') {
         this.overlayShow = true
-        this.titleText = '按月份查询'
+        this.titleText = this.monthValue
-      }if(e == 'y') {
-        this.titleText = '按时间范围查询'
       }
 
     },
@@ -740,7 +767,6 @@ export default {
     // 月份选择确认按钮
     confirmChange(t) {
       this.$nextTick(() => {
-        console.log(this.currentDate)
         let time = new Date(t)
         let y = time.getFullYear()
         let m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1
@@ -748,7 +774,6 @@ export default {
         this.monthValue = y + '-' + m
         this.dialogForm.startDate = y + '-' + m + '-' + '01' // "2024-09-01",
         this.dialogForm.endDate = y + '-' + m + '-' + '30'//"2024-09-30",
-        console.log(this.startDate);
       })
       this.overlayShow = false
     },
@@ -756,13 +781,30 @@ export default {
       this.theads = ['序号', '承保时间', '预收时间', '产品名称', '保费', '业务员姓名', '机构','查看']
       if (this.outOrderType === 'accept') {
         this.theads.splice(2,1)
-        console.log(this.theads);
       } else {
         this.theads.splice(1,1)
-        console.log(this.theads);
 
       }
     },
+    xiangqing(num) {
+      this.orderNo = num
+      this.xiangqingShow = true;
+    },
+    closeDetails() {
+      this.xiangqingShow = !this.xiangqingShow
+    },
+    closeHebao() {
+      this.hebaoShow = !this.hebaoShow
+    },
+    getmonthList() {
+      function getOneYearAgoDate() {
+          const now = new Date();
+          now.setFullYear(now.getFullYear() - 1);
+          return now;
+      }
+      const oneYearAgoDate = getOneYearAgoDate();
+      this.minDate = oneYearAgoDate
+    },
   }
 }
 </script>
@@ -908,4 +950,13 @@ table {
     border-color: #ee3030;
   }
 }
+.hebao,
+.xiangqing {
+  width: 100%;
+  height: 100vh;
+  background-color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
 </style>

src/views/ebiz/billingDetail/policyDetails.vue

@@ -30,6 +30,9 @@
           <p class="list" v-show="policyData.subRiskNameList.length == 0" >暂无附加险信息</p>
         </van-collapse-item>
       </van-collapse>
+      <div class="bottom">
+        <button class="back" @click="goback()">返回</button>
+      </div>
   </div>
 </template>
 
@@ -39,14 +42,21 @@ import { queryOutOrderDetail } from '@/api/ebiz/billingDetail/billingDetail'
 // 当前时间
 const currentDate = new Date()
 export default {
+  name: 'policyDetails',
   components: {
     [Collapse.name]: Collapse,
     [CollapseItem.name]: CollapseItem,
   },
+  props: {
+    orderNo: {
+      type: String,
+      default: false
+    }
+  },
   data() {
     return {
         currentDate: '',
-        orderNo: this.$route.query.orderNo,
+        // orderNo: '',
         activeName: ['1'],
         policyData: {},
     }
@@ -64,6 +74,9 @@ export default {
         }).then((res) => {
             this.policyData = res.content;
         })
+      },
+      goback() {
+        this.$emit('child-back', '1');
       }
   }
 }
@@ -104,4 +117,21 @@ export default {
 .list {
   padding: 12px 0;
 }
+.bottom {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  .back {
+    width: 100%;
+    background-color: #e9332e;
+    border: none;
+    padding: 12px 0px;
+    border-radius: 28px;
+    color: #fff;
+    font-size: 20px;
+    text-align: center;
+  }
+}
+
 </style>

src/views/ebiz/generateImg/generateImg.vue

@@ -17,6 +17,9 @@
       <van-button square type="default" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button>
       <van-button square type="danger" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button>
     </div>
+    <div class="close" @click="close()">
+      <van-icon name="cross" size="30" color="#fff" />
+    </div>
   </div>
 </template>
 
@@ -25,6 +28,13 @@ import html2canvas from 'html2canvas'
 import { base64Excel } from '@/api/ebiz/nbs'
 export default {
   name: 'generateImg',
+  // generateImgData
+  props: {
+    // generateImgData: {
+    //   type: Object,
+    //   default: {}
+    // },
+  },
   data() {
     return {
       orderList: {}
@@ -122,6 +132,9 @@ export default {
     },
     downLoadImagesFunc() {
       this.domToImage(this.$refs.generateImg)
+    },
+    close() {
+      this.$emit('child-colse', '1')
     }
   }
 }
@@ -225,4 +238,9 @@ img {
   /*设置按钮为渐变颜色*/
   border: none !important;
 }
+.close {
+  position: fixed;
+  top: 0;
+  right: 0;
+}
 </style>