fix: 数据明细组件框架搭建

src/views/salesleads/components/dataDetail.vue

+<template>
+  <div class="m20">
+    <dm-sub-title class="mb16">
+      <div class="title">
+        <span>查看明细</span>
+        <span class="info-content cur-po"><i class="el-icon-info info-icon"></i>指标说明</span>
+      </div>
+    </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>
+      </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> -->
+      </div>
+    </el-row>
+    <el-table class="mt18" :data="tableData">
+      <el-table-column label="导购信息">
+        <template slot-scope="{ row }">
+          <p class="overflow-ellipsis" :title="row.guideMsg">{{ row.guideMsg }}</p>
+          <p>{{ row.guideMsgs }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="导购所属门店">
+        <template slot-scope="{ row }">
+          <p class="overflow-ellipsis" :title="row.guideStore">{{ row.guideStore }}</p>
+          <p>{{ row.guideStoreCode }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="企微号">
+        <template slot-scope="{ row }">
+          <p class="overflow-ellipsis" :title="row.qw">{{ row.qw }}</p>
+          <p>{{ row.qwCode }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="新增总人数" prop="addTotal" sortable></el-table-column>
+      <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>
+        <template slot-scope="{ row }">
+          <p>{{ row.status == 1 ? '是' : '否' }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="{ row }">
+          <el-button type="text" @change="looks(row)">查看记录</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParam.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </dm-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DateDetail',
+  data() {
+    return {
+      dateLis: [
+        { key: 1, value: '近7天' },
+        { key: 2, value: '近30天' },
+        { key: 3, value: '近三个月' },
+        { key: 4, value: '近半年' }
+      ],
+      tableData: [],
+      pageParam: {
+        currentPage: 1,
+        pageSize: 20
+      },
+      totalCount: 0
+    };
+  },
+  created() {
+    this.getTableList();
+  },
+  methods: {
+    // 当前页变化
+    handleCurrentChange(val) {
+      this.pageParam.currentPage = val;
+      sessionStorage.setItem('currentPage', val);
+    },
+    // 页码
+    handleSizeChange(val) {
+      this.pageParam.currentPage = 1;
+      this.pageParam.pageSize = val;
+      this.getTableList();
+    },
+    // 列表数据
+    getTableList() {
+      this.tableData = [
+        {
+          guideMsg: '导购信息1索尼大法根据历史的快乐风格问题',
+          guideMsgs: '2364756qre',
+          guideStore: '门店名称1哈金斯的看法和大家说法可接受的垡健康是的发送到',
+          guideStoreCode: '4564564',
+          qw: '趣味',
+          qwCode: '23674726',
+          addTotal: 1,
+          todayAddTotal: 2,
+          toadyLess: 89,
+          lessTotal: 23,
+          staus: 1
+        }
+      ];
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.m20 {
+  margin: 20px;
+}
+.mb16 {
+  margin-bottom: 16px;
+}
+.w260 {
+  width: 260px;
+}
+.w256 {
+  width: 256px;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.mr24 {
+  margin-right: 24px;
+}
+.mr12 {
+  margin-right: 12px;
+}
+.mt18 {
+  margin-top: 18px;
+}
+.leftBox {
+  float: left;
+}
+.rightBox {
+  float: right;
+  line-height: 32px;
+  .datebox {
+    display: inline-block;
+  }
+}
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  .info-content {
+    color: #2f54eb;
+    font-size: 14px;
+  }
+  .info-icon {
+    margin-right: 8px;
+  }
+}
+.cur-po {
+  cursor: pointer;
+}
+.el-button--text {
+  color: #303133;
+}
+</style>