BTDK-DMS/src/pages/deviceInfo/components/TestInfo.vue

<template>
  <div class="device-test-info-from">
    <div class="template-table">
      <EdfsTable
        class="table"
        :data="list"
        :usePaging="false"
        :highlight-current-row="true"
        row-class-name="row"
      >
        <template v-for="(col, idx) in testTableCol" :key="idx">
          <el-table-column
            v-if="col.prop.endsWith('Time')"
            :label="col.label"
            :min-width="col.minWidth"
          >
            <template #default="scope">
              {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>

          <el-table-column
            v-else-if="col.prop === 'status'"
            :label="col.label"
            :min-width="col.minWidth"
          >
            <template #default="scope">
              {{ testSheetStatus.find(item => item.value === scope.row.status)?.label }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :prop="col.prop"
            :label="col.label"
            :min-width="col.minWidth"
          />
        </template>
        <el-table-column label="操作" width="190" align="center">
          <template #default="scope">
            <EdfsButton
              link
              type="primary"
              inner-text="查看详情"
              @click="loadSheetDetail(scope.row)"
            />
          </template>
        </el-table-column>
      </EdfsTable>
      <EdfsButton
        inner-text="提交并入库"
        type="primary"
        class="save-button"
        v-if="isShowSaveButton"
        @click="onSave"
      />
    </div>
  </div>
  <testSheetInfoDlg
    :info="sheetDetail"
    :title="curSheetDetailName"
    :isShow="isShowDetail"
    @on-close="isShowDetail = false"
  />
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import EdfsTable from '@/components/dashboard/Edfs-table/index.vue'
import EdfsButton from '@/components/dashboard/Edfs-button/index.vue'
import { testSheetStatus, testTableCol, type OptAction } from '../utils'
import {
  getSheetDetail,
  updateSheetStatus,
  updateTestSheetStatus,
} from '@/api/module/eam/device/template'
import { isResError, useMessage } from '@/hooks/useMessage'
import { getDeviceTestSheet, type IDevice } from '@/api/module/eam/device'
import { useRoute } from 'vue-router'
import testSheetInfoDlg from './testSheetInfoDlg.vue'
const route = useRoute()
const action = route.query.action as OptAction
const massage = useMessage()

const props = defineProps<{
  disabled: boolean
  deviceId: number | undefined
  info: IDevice | undefined
}>()

const emit = defineEmits(['onSave'])
const list = ref<any>([])
const isShowSaveButton = computed(() => {
  if (action === 'view') return false
  return props.info?.status === undefined ? true : props.info.status < 2
})

async function onChangeRadio(row: any) {
  const res = await updateSheetStatus(row.id, row.actualResult)
  if (isResError(res)) return
  massage.success('更新成功')
}

async function onSave() {
  if (!props.info) return
  const res = await updateTestSheetStatus({
    id: props.info.testSheetId,
    deviceId: props.info.id,
  })
  if (isResError(res)) return
  emit('onSave')
}

async function loadDeviceTestSheet() {
  const res = await getDeviceTestSheet({
    deviceId: props.deviceId as number,
    isLast: true,
  })
  if (isResError(res)) return
  list.value = res.data
}
const isShowDetail = ref(false)
const sheetDetail = ref<any>([])
const curSheetDetailName = ref<any>()
async function loadSheetDetail(row: any) {
  const res = await getSheetDetail(row.id)
  if (isResError(res)) return
  sheetDetail.value = res.data
  isShowDetail.value = true
  curSheetDetailName.value = row.name
}

watch(
  () => props.deviceId,
  newVal => {
    if (newVal) {
      loadDeviceTestSheet()
    }
  }
)
</script>

<style scoped lang="scss">
.device-test-info-from {
  height: 100%;
  width: 100%;
  .template-table {
    display: flex;
    column-gap: 24px;
    .table {
      width: 1090px;
      height: 100%;
    }
    .save-button {
      margin-top: auto;
      margin-bottom: 12px;
    }
  }
}
</style>