Newer
Older
smart-metering-front / src / components / Sample / certificationRecords.vue
<!-- 检定证书列表 -->
<script lang="ts" setup name="CertificationRecords">
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { certificateRecordsById } from '@/api/business/schedule/task'
const props = defineProps({
  // 样品id
  sampleId: {
    type: String,
    required: true,
  },
  // 客户id
  customerId: {
    type: String,
    required: true,
  },
})

// 证书列表
interface SimpleCertification {
  certificationCode: string // 证书编号
  certificationName: string // 证书形成
  certificationType: string // 证书类型
  effectiveDate: string // 证书出具日期
  expirationDate: string // 证书有效期
}

// 查询条件
const searchQuery = ref({
  sampleId: props.sampleId,
  customerId: props.customerId,
})

// 表格表头
const columns = ref<TableColumn[]>([
  { text: '证书编号', value: 'certificationCode', align: 'center' },
  { text: '证书名称', value: 'certificationName', align: 'center' },
  { text: '证书类型', value: 'certificationType', align: 'center' },
  { text: '证书出具日期', value: 'effectiveDate', align: 'center' },
  { text: '证书有效期', value: 'expirationDate', align: 'center' },
])

// 证书列表
const list = ref<SimpleCertification[]>([])
const total = ref(0)
// 加载状态
const loading = ref(false)
// 查找证书状态及列表
function fetchData() {
  loading.value = true
  certificateRecordsById({ ...searchQuery.value }).then((res) => {
    list.value = res.data.rows
  })
  loading.value = false
}
fetchData()
</script>

<template>
  <div>
    <normal-table
      :data="list" :total="total" :columns="columns"
      :list-loading="loading"
      :pagination="false"
    />
  </div>
</template>