zfire-newmall-admin/src/views/workOrder/workOrderPool/detailModule/OperationDetail/index.vue

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container>
        <zj-form-module title="操作明细">
          <zj-table :columns="operationDetailColumns" :tableData="logList" :tableAttributes="{
            border: true
          }"></zj-table>
        </zj-form-module>
      </zj-form-container>
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
import { orderBaseLogList } from "@/api/workOrderPool.js"
export default {
  props: {
    id: {
      type: [String, Number],
      default: null,
    }
  },
  data() {
    return {
      logList: []
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        this.getOrderBaseLogList()
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    operationDetailColumns() {
      return [
        {
          columnAttributes: {
            label: '操作类别',
            prop: 'type',
            width: 140
          }
        },
        {
          columnAttributes: {
            label: '操作内容',
            prop: 'content'
          }
        },
        {
          columnAttributes: {
            label: '操作时间',
            prop: 'createTime',
            width: 140
          }
        },
        {
          columnAttributes: {
            label: '操作人',
            prop: 'createBy',
            width: 140
          }
        }
      ]
    }
  },
  methods: {
    // 获取操作记录
    getOrderBaseLogList() {
      if (this.id) {
        orderBaseLogList({
          orderBaseId: this.id
        }).then(res => {
          this.logList = res.data
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    &>div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>