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 === 'actualResult'"
            :label="col.label"
            :min-width="col.minWidth"
          >
            <template #default="scope">
              <el-radio-group
                v-if="isShowSaveButton"
                v-model="scope.row[col.prop]"
                @change="onChangeRadio(scope.row)"
              >
                <template v-for="item in testSheetStatus">
                  <el-radio :value="item.value">{{ item.label }}</el-radio>
                </template>
              </el-radio-group>
              <div v-else>
                {{ testSheetStatus.find(r => r.value === scope.row.status)?.label ?? '' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :prop="col.prop"
            :label="col.label"
            :min-width="col.minWidth"
          />
        </template>
      </EdfsTable>
      <EdfsButton
        inner-text="提交并入库"
        type="success"
        class="save-button"
        v-if="isShowSaveButton"
        @click="onSave"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
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 {
  updateSheetStatus,
  updateTestSheetStatus,
} from '@/api/module/eam/device/template'
import { isResError, useMessage } from '@/hooks/useMessage'
import type { IDevice } from '@/api/module/eam/device'
import { useRoute } from 'vue-router'
const route = useRoute()
const action = route.query.action as OptAction
const massage = useMessage()

const props = defineProps<{
  disabled: boolean
  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
})
watch(
  () => props.info,
  val => {
    if (val) {
      list.value = Array.isArray(val?.testSheetDetail) ? val.testSheetDetail : []
    }
  },
  { immediate: true }
)

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')
}
</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>