sfms3.0-ui/src/views/qms/inspectionJobPurchase/detail.vue

<template>
  <div>
    <el-drawer v-model="isShowDrawer" title="详情" direction="rtl" size="80%" v-loading="detailLoading">
      <template #header>
        <div class="font-size-18px">
          {{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
        </div>
      </template>
      <ContentWrap v-if="!isBasic">
        <Descriptions :data="data" labelClassName="label-class-name" label-align="left" direction="vertical" :column="8" :schema="allSchemas.detailSchema" :columns="2" width="200px" />
      </ContentWrap>
      <ContentWrap>
        <el-tabs v-model="editableTabsValue" class="demo-tabs" type="border-card" tab-position="left" :stretch="false">
          <el-tab-pane v-for="item in data.subList" :key="item.name" :label="item.processDescribe" :name="item.name">
            <div class="small-title">检验工序</div>
            <el-form :model="item" label-width="auto" ref="formProcessRef">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="编码" prop="processCode">
                    <el-input v-model="item.processCode" placeholder="根据系统生成" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="描述" prop="processDescribe">
                    <el-input v-model="item.processDescribe" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="顺序号" prop="sequenceCode">
                    <el-input v-model="item.sequenceCode"  :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="small-title">检验特性</div>
            <el-form :model="item" label-width="auto"  ref="formFeaturesRef">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="编码">
                    <el-input v-model="item.inspectionJobCharacteristicsRespVO.number" placeholder="根据系统生成" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="描述" prop="inspectionJobCharacteristicsRespVO.description">
                    <el-input v-model="item.inspectionJobCharacteristicsRespVO.description"  :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="检验方法" prop="inspectionJobCharacteristicsRespVO.inspectionMethodCode">
                    <div style="display: flex; width: 100%">
                      <el-input v-model="item.inspectionJobCharacteristicsRespVO.inspectionMethodName" disabled placeholder="请选择检验方法" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="采样过程编码" prop="inspectionJobCharacteristicsRespVO.samplingProcessCode">
                    <div style="display: flex; width: 100%">
                      <el-input v-model="item.inspectionJobCharacteristicsRespVO.samplingProcessName" disabled placeholder="请选择采样过程编码" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="样品份数" prop="inspectionJobCharacteristicsRespVO.sampleQty">
                    <div style="display: flex; width: 100%">
                      <el-input v-model="item.inspectionJobCharacteristicsRespVO.sampleQty" disabled placeholder="请输入样品份数" />
                    </div>
                  </el-form-item>
                </el-col>
                
                <el-col :span="12">
                  <el-form-item label="每份样品量" prop="inspectionJobCharacteristicsRespVO.samplePieceSize">
                    <div style="display: flex; width: 100%">
                      <el-input v-model="item.inspectionJobCharacteristicsRespVO.samplePieceSize" disabled placeholder="请输入每份样品量" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否允许修改特征值" prop="inspectionJobCharacteristicsRespVO.isCanUpdate">
                    <el-switch v-model="item.inspectionJobCharacteristicsRespVO.isCanUpdate" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结果录入方式" prop="inspectionJobCharacteristicsRespVO.resultEntryMethod">
                    <el-select v-model="item.inspectionJobCharacteristicsRespVO.resultEntryMethod" placeholder="请选择结果录入方式" @change="resultEntryMethodChange($event,item)" disabled>
                      <el-option v-for="dict in getStrDictOptions(DICT_TYPE.INSPECTION_CHARACTERISTICS_RESULT_ENTRY)" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="特征类型" prop="inspectionJobCharacteristicsRespVO.featureType">
                    <el-select v-model="item.inspectionJobCharacteristicsRespVO.featureType" placeholder="请选择特征类型" @change="changeFeatureType" disabled>
                      <el-option v-for="dict in getStrDictOptions( DICT_TYPE.INSPECTION_CHARACTERISTICS_FEATURE_TYPE )" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </ContentWrap>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import * as InspectionJobDetailPageApi from '@/api/qms/inspectionJob/inspectionJobDetail'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'

defineOptions({ name: 'Detail' })

const editableTabsValue = ref('1')
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const updateKey = ref(0)

const props = defineProps({
  // 表单，列表 相关信息
  allSchemas: {
    type: Object,
    required: true,
    default: null
  },
  // 明细列表相关信息
  detailAllSchemas: {
    type: Object,
    required: true,
    default: null
  },
  // 详情列表扩展操作按钮
  buttondataTable: {
    type: Array,
    required: false,
    default: ()=>{
      return []
    }
  },
})
const isShowDrawer = ref(false)
const detailLoading = ref(false)
const data = ref({
  code: '',
  itemCode: '',
  version: '',
  testTypeCode: '',
  programmeTemplateCode: '',
  splitRule: '',
  aql: '',
  inspectionLevel: '',
  effectiveDate: '',
  expirationDate: '',
  available: 'TRUE',
  subList: []
})

/** 打开弹窗 */
const formRef = ref()
const titleNameRef = ref()
const titleValueRef = ref()
const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
  titleNameRef.value = titleName
  titleValueRef.value = titleValue
 
  isShowDrawer.value = true
  if (row) {
    detailLoading.value = true
    try {
      data.value = row
      let list = []
      list = await InspectionJobDetailPageApi.getInspectionJobDetailList(row.id)
      list.forEach((item, index) => {
      editableTabsValue.value = index + 1
      item.name = index + 1
      })
      data.value.subList = list
    } finally {
      detailLoading.value = false
    }
  }
}
defineExpose({ openDetail }) // 提供 open 方法，用于打开弹窗


</script>
<style lang="scss">
.el-drawer__body {
  background: #f5f5f5 !important;
}

::v-deep(.label-class-name) {
  color: #dedede;
}
</style>
<style scoped lang="scss"></style>