fix: 查看明细组件

src/views/salesleads/components/dataDetail.vue

@@ -8,22 +8,18 @@
     </dm-sub-title>
     <el-row>
       <div class="leftBox">
-        <el-input class="w260 mr10" placeholder="请输入门店名称/code" prefix-icon="el-icon-search"></el-input>
-        <el-input class="w260 mr10" placeholder="请输入导购名称/code" prefix-icon="el-icon-search"></el-input>
+        <el-input class="w260 mr10" placeholder="请输入门店名称/code" v-model="pageParam.search1" prefix-icon="el-icon-search"></el-input>
+        <el-input class="w260 mr10" placeholder="请输入导购名称/code" v-model="pageParam.search2" prefix-icon="el-icon-search"></el-input>
       </div>
 
       <div class="rightBox">
-        <div class="datebox" v-for="lis in dateLis" :key="lis.key">
-          <el-button type="text" class="mr24">{{ lis.value }}</el-button>
-        </div>
-        <el-date-picker class="w256" v-model="value1" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']"> </el-date-picker>
-        <!-- <el-button type="text" class="mr24">近30天</el-button>
-        <el-button type="text" class="mr24">近三个月</el-button>
-        <el-button type="text" class="mr24">近半年</el-button>
-        <el-date-picker v-if="lis.key == 5" class="w256" v-model="value1" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']"> </el-date-picker> -->
+        <ul class="datebox" v-for="(lis, index) in dateLis" :key="lis.key">
+          <li :class="active == index ? 'activeClass' : 'noActive'" class="dateLisBox" @click="btnChange(index)">{{ lis.value }}</li>
+        </ul>
+        <el-date-picker class="w256" v-model="pageParam.dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange"> </el-date-picker>
       </div>
     </el-row>
-    <el-table class="mt18" :data="tableData">
+    <el-table class="mt18" :data="tableData" @sort-change="sortChange">
       <el-table-column label="导购信息">
         <template slot-scope="{ row }">
           <p class="overflow-ellipsis" :title="row.guideMsg">{{ row.guideMsg }}</p>
@@ -46,7 +42,7 @@
       <el-table-column label="今日新增总人数" prop="todayAddTotal" sortable></el-table-column>
       <el-table-column label="今日流失人数" prop="toadyLess" sortable></el-table-column>
       <el-table-column label="流失总人数" prop="lessTotal" sortable></el-table-column>
-      <el-table-column label="今日已达上限" prop="status" sortable>
+      <el-table-column label="今日已达上限" prop="status">
         <template slot-scope="{ row }">
           <p>{{ row.status == 1 ? '是' : '否' }}</p>
         </template>
@@ -64,8 +60,15 @@
 <script>
 export default {
   name: 'DateDetail',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
+      active: 0,
       dateLis: [
         { key: 1, value: '近7天' },
         { key: 2, value: '近30天' },
@@ -74,16 +77,109 @@ export default {
       ],
       tableData: [],
       pageParam: {
+        search1: '',
+        search2: '',
+        dateDefault: [],
         currentPage: 1,
         pageSize: 20
       },
-      totalCount: 0
+      totalCount: 0,
+      pickerOptions() {
+        let pickerMinDate;
+        return {
+          onPick(obj) {
+            pickerMinDate = obj.minDate;
+            // console.log(pickerMinDate);
+          },
+          disabledDate(time) {
+            // const date = new Date();
+            // const year = date.getFullYear();
+            // return time.getTime() > Date.now() || time.getTime() < date.setFullYear(year - 2);
+            let start = new Date();
+            start = new Date(`${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`);
+            let start2 = new Date(pickerMinDate);
+            let end = new Date();
+            end = new Date(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()} 23:59:59`);
+            let end2 = new Date(pickerMinDate);
+            if (pickerMinDate) {
+              start = start.setFullYear(start.getFullYear() - 2);
+              start2 = start2.setDate(start2.getDate() - 60);
+              start = start > start2 ? start : start2;
+              end2 = end2.setDate(end2.getDate() + 60);
+              end = end.getTime() > end2 ? end2 : end.getTime();
+              // console.log('end2', end2, end);
+            } else {
+              start = start.setFullYear(start.getFullYear() - 2);
+              end = end.getTime();
+            }
+            return time.getTime() < start || time.getTime() > end;
+          }
+        };
+      }
     };
   },
   created() {
     this.getTableList();
+    // 默认显示近七天
+    this.btnChange(0);
   },
   methods: {
+    getDateRange(setEndDate) {
+      const start = new Date();
+      let end = new Date();
+      end = setEndDate(end);
+      function getDate(date) {
+        const result = [];
+        result.push(date.getFullYear());
+        result.push((date.getMonth() + 1).toString().padStart(2, '0'));
+        result.push(
+          date
+            .getDate()
+            .toString()
+            .padStart(2, '0')
+        );
+        return result.join('-');
+      }
+      // yyyy-MM-dd
+      return [getDate(start), getDate(end)];
+    },
+    btnChange(index) {
+      //把index值赋给active，点击改变样式
+      this.active = index;
+      this.pageParam.dateDefault = [];
+      let setDate;
+      if (index == 0) {
+        // 近7天
+        setDate = endDate => {
+          endDate.setDate(endDate.getDate() - 6);
+          return new Date(endDate);
+        };
+      } else if (index == 1) {
+        // 近30天
+        setDate = endDate => {
+          endDate.setDate(endDate.getDate() - 29);
+          return new Date(endDate);
+        };
+      } else if (index == 2) {
+        // 近三个月
+        setDate = endDate => {
+          endDate.setMonth(endDate.getMonth() - 3);
+          return new Date(endDate);
+        };
+      } else if (index == 3) {
+        // 近半年
+        setDate = endDate => {
+          endDate.setMonth(endDate.getMonth() - 6);
+          return new Date(endDate);
+        };
+      }
+      const [start, end] = this.getDateRange(setDate);
+      this.pageParam.dateDefault.push(end);
+      this.pageParam.dateDefault.push(start);
+    },
+    onDateChange() {
+      this.active = -1;
+    },
     // 当前页变化
     handleCurrentChange(val) {
       this.pageParam.currentPage = val;
@@ -95,6 +191,10 @@ export default {
       this.pageParam.pageSize = val;
       this.getTableList();
     },
+    // 排序
+    sortChange(e) {
+      console.log(e);
+    },
     // 列表数据
     getTableList() {
       this.tableData = [
@@ -110,6 +210,19 @@ export default {
           toadyLess: 89,
           lessTotal: 23,
           staus: 1
+        },
+        {
+          guideMsg: '导购信息1索尼大法根据历史的快乐风格问题',
+          guideMsgs: '2364756qre',
+          guideStore: '门店名称1哈金斯的看法和大家说法可接受的垡健康是的发送到',
+          guideStoreCode: '4564564',
+          qw: '趣味',
+          qwCode: '23674726',
+          addTotal: 9,
+          todayAddTotal: 5,
+          toadyLess: 77,
+          lessTotal: 66,
+          staus: 0
         }
       ];
     }
@@ -117,6 +230,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.activeClass {
+  color: #2f54eb;
+}
+.noActive {
+  color: #303133;
+}
+
 .m20 {
   margin: 20px;
 }
@@ -149,6 +269,11 @@ export default {
   line-height: 32px;
   .datebox {
     display: inline-block;
+    .dateLisBox {
+      font-size: 14px;
+      margin-right: 24px;
+      cursor: pointer;
+    }
   }
 }
 .title {
@@ -167,6 +292,6 @@ export default {
   cursor: pointer;
 }
 .el-button--text {
-  color: #303133;
+  color: #2f54eb;
 }
 </style>