vue/src/views/history/index.vue

<template>
  <div>
    <p class="title">对话记录</p>
    <div>
      <a-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        bordered
      >

        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="detail(record.chat_id)">详情</a-button>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import {addDataset, deleteDataset, getChatRecord, listPage} from "../../api";
import moment from "moment";
import {filterObj, formatDate, formatDateTime} from "../../utils";

export default {
  data() {
    return {
      loading: false,
      dataSource: [],
      // 表头
      columns: [
        {
          title: '摘要',
          align: "center",
          dataIndex: 'abstract'
        },
        {
          title: '聊天记录条数',
          align: "center",
          dataIndex: 'chat_record_count'
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'create_time',
          customRender: (text, record) => {
            return formatDateTime(text, 'yyyy-MM-dd HH:mm:ss')
          }
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'update_time',
          customRender: (text, record) => {
            return formatDateTime(text, 'yyyy-MM-dd HH:mm:ss')
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 80,
          scopedSlots: {customRender: 'action'},
        }
      ],
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    detail(chat_id) {
      this.$router.push({
        path: '/historyDetail',
        query: {
          chat_id
        }
      })
    },
    async loadData() {
      var params = {
        history_day: 7
      }//查询条件
      this.loading = true;
      try {
        const result = await getChatRecord(params)
        if (result.code === 200) {
          this.dataSource = result.data
        } else {
          this.$message.warning(result.message)
        }
      } catch (e) {
        throw e
      } finally {
        this.loading = false
      }
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table {
  background: #fff;

  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 10px;
  }
}

.title {
  text-align: left;
  font-size: 18px;
  color: #000;
  margin-bottom: 16px;
  position: relative;
  padding-left: 14px;

  &::before {
    content: "";
    position: absolute;
    top: 2px;
    height: 20px;
    left: 0;
    bottom: 0;
    border-right: 3px solid #1890ff;
    transform: scaleY(1);
    opacity: 1;
    transition: transform .15s cubic-bezier(.645, .045, .355, 1), opacity .15s cubic-bezier(.645, .045, .355, 1);
  }
}

.head {
  text-align: left;
  margin-bottom: 16px;

  .mr10 {
    margin-right: 10px;
  }
}

</style>