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

2025-12-09 06:26:44 +08:00 · 2024-11-15 16:37:22 +08:00
parent d3076d795a
commit 52dc720c6c
4 changed files with 135 additions and 33 deletions
--- a/src/components/ebiz/billingDetail/tableDetail2.vue
+++ b/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({
-        path: '/policyDetails',
-        query: {
-          orderNo: num,
-        }
-      })
+      // this.$router.push({
+      //   path: '/policyDetails',
+      //   query: {
+      //     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;
--- a/src/views/ebiz/billingDetail/billingDetail.vue
+++ b/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)), '发生了点击')
-      this.$router.push({
-        path: '/generateImg'
-      })
+      // console.log(JSON.parse(JSON.stringify(data)), '发生了点击')
+      this.hebaoShow = true
+      // 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') {
-        this.titleText = '全部'
-      }if(e == 'm') {
+      // if(e == 'all') {
+      //   this.titleText = '全部'
+      // }
+      if(e == 'm') {
        this.overlayShow = true
-        this.titleText = '按月份查询'
-      }if(e == 'y') {
-        this.titleText = '按时间范围查询'
+        this.titleText = this.monthValue
      }

    },
@@ -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>
--- a/src/views/ebiz/billingDetail/policyDetails.vue
+++ b/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>
--- a/src/views/ebiz/generateImg/generateImg.vue
+++ b/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>