lg_frontend/pages/cleanTravel/ledger.vue

<template>
  <new-bg>
    <flex-col>
      <system-title show-back custom-title="厂区车辆台账" />
      <ModuleContent padding="0px 20px 20px">

        <div style="height: 144px;width: 100%;">
          <ModuleContent2 bg bg-str :border="false">
            <butgroup2 style="height: 100%;">
              <ModuleContent2 bg bg-color border>
                <miaoshu title="运输车辆" :value="headCount.t1" color="rgba(42, 207, 255, 1)"></miaoshu>
              </ModuleContent2>

              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
                <miaoshu title="国Ⅵ输车辆" :value="headCount.t2" color="rgba(255, 171, 87, 1)"></miaoshu>
              </ModuleContent2>

              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
                <miaoshu title="非道路工程机械" :value="headCount.t3" color="rgba(122, 175, 255, 1)"></miaoshu>
              </ModuleContent2>

              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
                <miaoshu title="燃油运输车辆" :value="headCount.t4" color="rgba(76, 243, 129, 1)"></miaoshu>
              </ModuleContent2>
            </butgroup2>
          </ModuleContent2>
        </div>

    <a-divider />
    <CustomTable
      hide-search
      hide-action
      :columns="columns"
      :api-conf="apiConf"
      :form-items="formItems"
      @edit="editHandler"
    >
      <template slot="search-button" slot-scope="{ search }">
        <a-button type="primary" @click="exportList(search)">导出历史数据</a-button>
        <Split height="10"></Split>
      </template>
    </CustomTable>
      </ModuleContent>
    </flex-col>
  </new-bg>

</template>
<script>
import Curd from "../../components/smallCommon/Curd.vue";
import moment from 'moment'
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
import NewBg from "../../components/NewBg.vue";
import FlexCol from "../../components/FlexCol.vue";
import ModuleContent from "../../components/ModuleContent.vue";
import CustomTable from "../../components/smallCommon/CustomTable.vue";
import Miaoshu from "../../components/smallCommon/miaoshu.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
import Split from "../../components/smallCommon/Split.vue";
export default {
  name: "user",
  components: {
    Split,
    Butgroup2, ModuleContent2, Miaoshu,
    CustomTable,
    ModuleContent,
    FlexCol, NewBg, SystemTitle,
    Curd
  },
  data () {
    return {
      headCount: {},
      isEdit: false,
      roles: [],
      columns: [
        {
          dataIndex: 'outTime',
          key: 'outTime',
          title: '日期'
        },
        {
          dataIndex: 'carNum',
          key: 'carNum',
          title: '车牌号'
        },
        {
          dataIndex: 'carModel',
          key: 'carModel',
          title: '车型'
        },
        {
          dataIndex: 'newCar',
          key: 'newCar',
          title: '新能源',
          customRender (text) {
            if (text) return '是'
            return '否'
          }
        },
        {
          dataIndex: 'emissions',
          key: 'emissions',
          title: '燃油车标准'
        },
        {
          dataIndex: 'createDateTime',
          key: 'createDateTime',
          title: '出厂日期'
        }
      ],
      apiConf: {
        listApi: { api: '/api/Ledger/list', method: 'get' },
        addApi: {api: '/api/Ledger/add', method: 'post',}
      }
    }
  },

  computed: {
    formItems () {
      return [
        {
          type: 'dateRange',
          key: 'time',
          label: '日期',
          isSearch: true,
          hide: true,
          placeholder: ['请选择开始日期', '请选择结束日期'],
          rules: [
            { required: true, message: '请选择时间范围' }
          ],
          fields: ['startTime', 'endTime']
        },
        {
          type: 'date',
          key: 'outTime',
          label: '日期',
          placeholder: '请选择日期'
        },
        {
          type: 'input',
          key: 'carNum',
          label: '车牌号',
          placeholder: '请输入车牌号'
        },
        {
          type: 'input',
          key: 'carModel',
          label: '车型',
          placeholder: '请输入车型'
        },
        {
          type: 'select',
          key: 'newCar',
          label: '新能源',
          placeholder: '是否新能源',
          children: [
            { label: '是', value: '是' },
            { label: '否', value: '否' },
          ]
        },
        {
          type: 'select',
          key: 'emissions',
          label: '燃油车标准',
          placeholder: '',
        },
        {
          type: 'date',
          key: 'createDateTime',
          label: '出厂日期',
          placeholder: '',
        }
      ]
    }
  },
  created() {
    this.$get('/api/Ledger/HeaderCount').then(({data}) => {
      this.headCount = data || {}
    })


  },

  methods: {
    add () {

    },
    editHandler (isEdit) {
      this.isEdit = isEdit
    },
    exportList ({ time }) {
      const [ start, end ] = time
      const fmt = 'YYYY-MM-DD'
      window.open(`http://101.43.201.20:5000/api/Ledger/export?start=${moment(start).format(fmt)}&end=${moment(end).format(fmt)}`, '_blank')
    }

  }
}
</script>
<style scoped lang="less">

</style>