代码备份

[solocao]

<template>
  <div class="row">
    <div>haha11111</div>
    <div>{{ historyTable}}</div>
    <q-data-table :data="historyTable" :config="config" :columns="columns" @refresh="refresh" @selection="selection" @rowclick="rowClick">
      <template slot="col-did" scope="cell">
        <span class="light-paragraph">{{cell.data}}</span>
      </template>
      <template slot="col-source" scope="cell">
        <div v-if="cell.data === 'Audit'" class="my-label text-white bg-primary">
          Audit
          <q-tooltip>Some data</q-tooltip>
        </div>
        <div v-else class="my-label text-white bg-negative">{{cell.data}}</div>
      </template>

      <template slot="selection" scope="props">
        <q-btn flat color="primary" @click="changeMessage(props)">
          <q-icon name="edit" />
        </q-btn>
        <q-btn flat color="primary" @click="deleteRow(props)">
          <q-icon name="delete" />
        </q-btn>
      </template>
    </q-data-table>
  </div>
</template>
<script>

import { createNamespacedHelpers } from 'vuex';
import table from './table.json';
import { timeFormat } from 'lib/utils';

const { mapState, mapGetters } = createNamespacedHelpers('global');

export default {
  computed: {
    ...mapGetters({
      historyTable: 'historyTable'
    })
  },
  methods: {
    changeMessage(props) {
      props.rows.forEach((row) => {
        row.data.message = 'Gogu';
      });
    },
    deleteRow(props) {
      props.rows.forEach((row) => {
        this.table.splice(row.index, 1);
      });
    },
    refresh(done) {
      this.timeout = setTimeout(() => {
        done();
      }, 5000);
    },
    selection(number, rows) {
      console.log(`selected ${number}: ${rows}`);
    },
    rowClick(row) {
      console.log('clicked on a row', row);
    }
  },
  created() {

  },
  mounted() {
    console.log('查看一下');
    console.log(this.historyTable);
  },
  updated() {
    alert('更新啦');
    console.log('更新啦');
    console.log(this.historyTable);
    console.log(this.$store.state.global.historyTable);
  },
  beforeDestroy() {
    clearTimeout(this.timeout);
  },
  data() {
    return {
      table,
      config: {
        title: '历史记录',
        refresh: true,
        noHeader: false,
        columnPicker: true,
        leftStickyColumns: 0,
        rightStickyColumns: 2,
        bodyStyle: {
          maxHeight: '900px'
        },
        rowHeight: '50px',
        responsive: true,
        pagination: {
          rowsPerPage: 15,
          options: [5, 10, 15, 30, 50, 500]
        }
      },
      columns: [
        {
          label: '设备号',
          field: 'did',
          width: '100px',
          classes: 'bg-orange-2',
          filter: true
        },
        {
          label: '开始时间',
          field: 'startedAt',
          format(value) {
            return timeFormat(value);
          },
          width: '180px'
        },
        {
          label: '结束时间',
          field: 'endedAt',
          sort: true,
          format(value) {
            return timeFormat(value);
          },
          width: '180px'
        },
        {
          label: '视频',
          field: 'record',
          sort: true,
          type: 'string',
          width: '80px'
        },
        {
          label: '状态',
          field: 'status',
          filter: true,
          sort: true,
          type: 'string',
          width: '120px'
        },
        {
          label: '距离',
          field: 'distance',
          sort: true,
          type: 'string',
          width: '100px'
        },
        {
          label: '操作',
          field: 'log_number',
          sort: true,
          type: 'string',
          width: '100px'
        }
      ],

      pagination: true,
      rowHeight: 50,
      bodyHeightProp: 'maxHeight',
      bodyHeight: 500
    };
  },
  watch: {
    historyTable: {
      handler: (val, oldVal) => {
        console.log('改变啦');
        console.log(this.historyTable);
        console.log(val);
        console.log(oldVal);
      },
      // 深度观察
      deep: true
    },
    pagination(value) {
      alert('gaibianla');
      if (!value) {
        this.oldPagination = clone(this.config.pagination);
        this.config.pagination = false;
        return;
      }

      this.config.pagination = this.oldPagination;
    },
    rowHeight(value) {
      this.config.rowHeight = `${value}px`;
    },
    bodyHeight(value) {
      const style = {};
      if (this.bodyHeightProp !== 'auto') {
        style[this.bodyHeightProp] = `${value}px`;
      }
      this.config.bodyStyle = style;
    },
    bodyHeightProp(value) {
      const style = {};
      if (value !== 'auto') {
        style[value] = `${this.bodyHeight}px`;
      }
      this.config.bodyStyle = style;
    }
  }
};
</script>

<style lang="stylus">
.my-label {
  padding: 5px;
  border-radius: 3px;
  display: inline-block;
}
</style>

[solocao]

// 查询历史记录
async routineHistory() {
  const payload = {
    url: '/routine/history',
    data: {
      did: '041DD10615',
      starttime: 1506096000,
      endtime: 1508774399,
      page: 1,
      pagesize: 100
    },
    router: 'home'
  };
  const history = await this.post(payload);
  if (history.status) {
    this.set({ key: 'historyTable', val: history.data.result });
    console.log(history.data.result);
  }
  console.log(history.data.result);
}

[solocao]

// 查询历史记录
async routineHistory() {
  const payload = {
    url: '/routine/history',
    data: {
      did: '041DD10615',
      starttime: 1506096000,
      endtime: 1508774399,
      page: 1,
      pagesize: 100
    },
    router: 'home'
  };
  const history = await this.post(payload);
  if (history.status) {
    this.set({ key: 'historyTable', val: history.data.result });
    console.log(history.data.result);
  }
  console.log(history.data.result);
}