[FE] 报表样式统一修改模板

ebc-middle-platform/src/modules/attendance/track.scss

  box-sizing: border-box;
  .search-container{
    width: 100%;
    padding: 0 0 20px;
    .search-ctn{
      width: 100%;
      overflow: hidden;
      display: flex;
      position: relative;
      >div{
        display: flex; 
        margin: 0 20px 16px 0;    
        //margin: 0 20px 16px 0;
        line-height: 2;
        .input-rule{
          flex: 1;
          }
        }
      }
      .btns button{
        margin: 0 2px;
      .btns{
        margin-left: auto;
        display: block;
        button{
          margin: 0 2px;
        }
      }
    }
  }
  .table-pager{
    margin: 20px auto;
  }
}
  .allCondition{
    border: 1px solid rgba(0, 0, 0, 0.09);
    background-color: #f8f9fa;
    flex-wrap: wrap;
    padding: 20px 20px 20px 20px;
    margin: 5px auto;
  }
}

ebc-middle-platform/src/modules/attendance/track.vue

<template>
  <div class="track-container">
  <div class="track-container" @click="customVisibled = false">
    <div class="search-container">
      <div class="search-ctn">
        <div>
          <div class="input-rule">
            <t-date-picker v-model="queryCondition.rangeDate"
                           align-right
                           style="width:320px;"
                           type="dateTimeRange"
                           placeholder="选择时间段"
                           @date-change="onChange"></t-date-picker>
          <div style="display: flex;">
            <t-input v-model="queryCondition.alarmPerson" placeholder="员工姓名/员工工号">
              <template slot="append">
                <t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
              </template>
            </t-input>
            <t-button icon="filter-outline" style="margin: 0 10px;" @click="slideVisible = !slideVisible"></t-button>
          </div>
        </div>
        <div>
          <div class="label">姓名:</div>
          <div class="input-rule">
            <t-input v-model="queryCondition.alarmPerson" placeholder="请输入..."></t-input>
          </div>
        </div>
        <div class="btns">
          <t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
          <t-button color="secondary" icon="loading" class="reset-btn" @click="onReset">重置</t-button>
        <div class="btns" >
          <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
          <t-dropdown :visibled="customVisibled" trigger-mode="custom">
            <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button><!--aid-table-edit-->
            <div slot="popper">
              <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                  <t-checkbox v-for="(item) in columns" :key="item.label" :value="item.label" :label="item.label">
                    <span>{{ item.label }}</span>
                  </t-checkbox>
                </t-checkbox-group>
                <div style="padding-bottom: 10px">
                  <t-checkbox
                    :indeterminate="indeterminate"
                    :checked.sync="checkAll"
                    @click.prevent.native="handleCheckAll">全选
                  </t-checkbox>
                </div>
                <t-button color="success" size="sm" @click="onCloseClick">确认</t-button>
              </div>
            </div>
          </t-dropdown>
          <t-button color="secondary" icon="loading" class="reset-btn" @click="onReset"></t-button>
        </div>
      </div>
      <div class="animate-demo-wrapper">
        <transition name="slide-up">
          <div v-show="slideVisible" class="transition-box allCondition">
            <div class="input-rule" style="display: flex;">
              <div class="label" style="display: flex;align-items: center;">时间：</div>
              <t-date-picker v-model="queryCondition.rangeDate"
                             align-right
                             style="width:320px;"
                             type="dateTimeRange"
                             placeholder="选择时间段"
                             @date-change="onChange"></t-date-picker>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div>
    <div style="padding-top: 5px">
      <t-table :data="table.data" :loading="tableLoading" >
        <t-table-column type="selection" width="70"></t-table-column>
        <t-table-column prop="entityName" label="姓名"></t-table-column>
        <t-table-column prop="entityPosition" label="职务"></t-table-column>
        <t-table-column prop="mapAreaName" label="位置区域"></t-table-column>
        <t-table-column prop="durationTime" label="停留时长"></t-table-column>
        <t-table-column prop="inTime" :formatter="timestampToTime" label="进入时间"></t-table-column>
        <t-table-column prop="outTime" :formatter="timestampToTime" label="离开时间"></t-table-column>
        <t-table-column v-if="columns[0].show" prop="entityName" label="姓名"></t-table-column>
        <t-table-column v-if="columns[1].show" prop="entityPosition" label="职务"></t-table-column>
        <t-table-column v-if="columns[2].show" prop="mapAreaName" label="位置区域"></t-table-column>
        <t-table-column v-if="columns[3].show" prop="durationTime" label="停留时长"></t-table-column>
        <t-table-column v-if="columns[4].show" :formatter="timestampToTime" prop="inTime" label="进入时间"></t-table-column>
        <t-table-column v-if="columns[5].show" :formatter="timestampToTime" prop="outTime" label="离开时间"></t-table-column>
      </t-table>
      <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
               :page-size.sync="table.pager.size"
export default {
  data() {
    return {
      slideVisible: false,
      indeterminate: true,
      checkAll: true,
      social: ['姓名', '职务', '位置区域', '停留时长', '进入时间', '离开时间'],
      columns: [
        {
          label: '姓名',
          show: true
        }, {
          label: '职务',
          show: true
        }, {
          label: '位置区域',
          show: true
        }, {
          label: '停留时长',
          show: true
        }, {
          label: '进入时间',
          show: true
        }, {
          label: '离开时间',
          show: true
        }
      ],
      customVisibled: false,
      table: {
        data: [],
        pager: {
    this.getList()
  },
  methods: {
    checkAllGroupChange () {
      if (this.social.length === 6) {
        this.indeterminate = false
        this.checkAll = true
      } else if (this.social.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    },
    handleCheckAll () {
      debugger
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      if (this.checkAll) {
        this.social = ['姓名', '职务', '位置区域', '停留时长', '进入时间', '离开时间']
      } else {
        this.social = []
      }
    },
    onTriggerClick() {
      this.customVisibled = true
    },
    onCloseClick() {
      this.columns.forEach(e => {
        e.show = this.social.indexOf(e.label) >= 0
      })
      this.customVisibled = false
    },
    getList() {
      this.tableLoading = true
      var start = ''