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

<template>
  <div style="margin-top: 20px">
    <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.inspectionRecordCharacteristicsRespVO.number"
                  placeholder="根据系统生成"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="描述" prop="inspectionRecordCharacteristicsRespVO.description">
                <el-input
                  v-model="item.inspectionRecordCharacteristicsRespVO.description"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="检验方法"
                prop="inspectionRecordCharacteristicsRespVO.inspectionMethodCode"
              >
                <div style="display: flex; width: 100%">
                  <el-input
                    v-model="item.inspectionRecordCharacteristicsRespVO.inspectionMethodName"
                    disabled
                    placeholder="请输入检验方法"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="采样过程"
                prop="inspectionRecordCharacteristicsRespVO.inspectionMethod"
              >
                <div style="display: flex; width: 100%">
                  <el-input
                    v-model="item.inspectionRecordCharacteristicsRespVO.samplingProcessName"
                    disabled
                    placeholder="请输入采样过程"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="采样过程编码"
                prop="inspectionRecordCharacteristicsRespVO.samplingProcessCode"
              >
                <div style="display: flex; width: 100%">
                  <el-input
                    v-model="item.inspectionRecordCharacteristicsRespVO.samplingProcessName"
                    disabled
                    placeholder="请选择采样过程编码"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="样品份数" prop="inspectionRecordCharacteristicsRespVO.sampleQty">
                <div style="display: flex; width: 100%">
                  <el-input
                    v-model="item.inspectionRecordCharacteristicsRespVO.sampleQty"
                    disabled
                    placeholder="请输入样品份数"
                  />
                </div>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                  <el-form-item
                    label="动态修改规则编码"
                    prop="inspectionRecordCharacteristicsRespVO.dynamicUpdateCode"
                  >
                    <div style="display: flex; width: 100%">
                      <el-input
                        v-model="item.inspectionRecordCharacteristicsRespVO.dynamicUpdateName"
                        disabled
                        placeholder="请输入动态修改规则编码"
                      />
                    </div>
                  </el-form-item>
                </el-col> -->
            <el-col :span="12">
              <el-form-item
                label="是否允许修改特征值"
                prop="inspectionRecordCharacteristicsRespVO.isCanUpdate"
              >
                <el-switch
                  v-model="item.inspectionRecordCharacteristicsRespVO.isCanUpdate"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="结果录入方式"
                prop="inspectionRecordCharacteristicsRespVO.resultEntryMethod"
              >
                <el-select
                  v-model="item.inspectionRecordCharacteristicsRespVO.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="inspectionRecordCharacteristicsRespVO.featureType"
              >
                <el-select
                  v-model="item.inspectionRecordCharacteristicsRespVO.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-col :span="12">
              <el-form-item
                label="开始时间"
                prop="inspectionRecordCharacteristicsRespVO.inspectionStartTime"
              >
                <el-date-picker
                  v-model="item.inspectionRecordCharacteristicsRespVO.inspectionStartTime"
                  type="datetime"
                  placeholder="请选择开始时间"
                  style="width: 100%"
                  value-format="x"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="结束时间"
                prop="inspectionRecordCharacteristicsRespVO.inspectionEndTime"
              >
                <el-date-picker
                  v-model="item.inspectionRecordCharacteristicsRespVO.inspectionEndTime"
                  type="datetime"
                  placeholder="请选择结束时间"
                  style="width: 100%"
                  value-format="x"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="计量单位"
                prop="inspectionRecordCharacteristicsRespVO.quantifyUom"
                v-if="item.inspectionRecordCharacteristicsRespVO.featureType == 0"
              >
                <el-select
                  v-model="item.inspectionRecordCharacteristicsRespVO.quantifyUom"
                  placeholder="请选择计量单位"
                  disabled
                >
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.UOM)"
                    :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="inspectionRecordCharacteristicsRespVO.quantifyDecimal"
                v-if="item.inspectionRecordCharacteristicsRespVO.featureType == 0"
              >
                <el-input
                  v-model="item.inspectionRecordCharacteristicsRespVO.quantifyDecimal"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="item.inspectionRecordCharacteristicsRespVO.featureType == 0">
              <el-form-item
                label="是否设定上限"
                prop="inspectionCharacteristicsBaseVO.quantifyIsCapping"
              >
                <el-switch
                  v-model="item.inspectionRecordCharacteristicsRespVO.quantifyIsCapping"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="item.inspectionRecordCharacteristicsRespVO.featureType == 0">
              <el-form-item
                prop="inspectionRecordCharacteristicsRespVO.quantifyIsLowlimit"
                label="是否设定下限"
              >
                <el-switch
                  v-model="item.inspectionRecordCharacteristicsRespVO.quantifyIsLowlimit"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="inspectionRecordCharacteristicsRespVO.quantifyIsTarget"
                label="是否设定目标值"
                v-if="item.inspectionRecordCharacteristicsRespVO.featureType == 0"
              >
                <el-switch
                  v-model="item.inspectionRecordCharacteristicsRespVO.quantifyIsTarget"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              v-if="
                item.inspectionRecordCharacteristicsRespVO.featureType == 0 &&
                item.inspectionRecordCharacteristicsRespVO.quantifyIsCapping
              "
            >
              <el-form-item
                label="上限值"
                prop="inspectionRecordCharacteristicsRespVO.quantifyCapping"
              >
                <el-input
                  v-model="item.inspectionRecordCharacteristicsRespVO.quantifyCapping"
                  type="number"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              v-if="
                item.inspectionRecordCharacteristicsRespVO.featureType == 0 &&
                item.inspectionRecordCharacteristicsRespVO.quantifyIsLowlimit
              "
            >
              <el-form-item
                label="下限值"
                prop="inspectionRecordCharacteristicsRespVO.quantifyLowlimit"
              >
                <el-input
                  v-model="item.inspectionRecordCharacteristicsRespVO.quantifyLowlimit"
                  type="number"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              v-if="
                item.inspectionRecordCharacteristicsRespVO.featureType == 0 &&
                item.inspectionRecordCharacteristicsRespVO.quantifyIsTarget
              "
            >
              <el-form-item
                label="目标值"
                prop="inspectionRecordCharacteristicsRespVO.quantifyTarget"
              >
                <el-input
                  v-model="item.inspectionRecordCharacteristicsRespVO.quantifyTarget"
                  type="number"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评估代码">
                <el-select
                  v-model="item.inspectionRecordCharacteristicsRespVO.estimateCode"
                  placeholder="请选择评估代码"
                  disabled
                >
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.EVALUATION_CODE)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    disabled
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="24"
              v-for="(cur, i) in item.inspectionRecordCharacteristicsRespVO
                .recordInspectionQuantifyList"
              :key="i"
              style="
                border: 1px solid #dedede;
                border-radius: 4px;
                padding-top: 16px;
                margin-bottom: 10px;
              "
            >
              <el-row>
                <!-- 汇总录入的时候显示 -->
                <el-col
                  :span="12"
                  v-if="item.inspectionRecordCharacteristicsRespVO.resultEntryMethod == 1"
                >
                  <el-form-item label="合格数量">
                    <el-input
                      v-model="cur.qualifiedQuantity"
                      placeholder="请输入合格数量"
                      type="number"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="12"
                  v-if="item.inspectionRecordCharacteristicsRespVO.resultEntryMethod == 1"
                >
                  <el-form-item label="不合格数量">
                    <el-input
                      v-model="cur.unqualifiedQuantity"
                      type="number"
                      placeholder="请输入不合格数量"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="12"
                  v-if="item.inspectionRecordCharacteristicsRespVO.featureType == '0'"
                >
                  <el-form-item label="检验值">
                    <el-input
                      v-model="cur.inspectionValue"
                      placeholder="请输入检验值"
                      type="number"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="12"
                  v-if="item.inspectionRecordCharacteristicsRespVO.featureType == '1'"
                >
                  <el-form-item label="选定集">
                    <el-select v-model="cur.qualitativeCode" placeholder="请选择选定集" disabled>
                      <el-option
                        v-for="dict in item.selectedProjectRespVOList"
                        :key="dict.dictionaryValue"
                        :label="dict.dictionaryLabel"
                        :value="dict.dictionaryValue"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="12"
                  v-if="item.inspectionRecordCharacteristicsRespVO.featureType == '1'"
                >
                  <el-form-item label="缺陷级别">
                    <el-select v-model="cur.defectLevel" placeholder="请选择缺陷级别" disabled>
                      <el-option
                        v-for="dict in getStrDictOptions(DICT_TYPE.DEFECT_LEVEL)"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

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

defineOptions({ name: 'InspectionRecordDetail' })

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: null
  }
})
console.log(props.data)
const data = ref(props.data.data)
const editableTabsValue = ref('1')

onMounted(async () => {
  let list = []
  list = await InspectionRecordDetailPageApi.getInspectionRecordDetailList(data.value.id)
  list.forEach((item, index) => {
    editableTabsValue.value = index + 1
    item.name = index + 1
    item.inspectionRecordCharacteristicsRespVO.recordInspectionQuantifyList =
      item.inspectionRecordCharacteristicsRespVO.featureType == 1
        ? item.inspectionRecordCharacteristicsRespVO.qualitativeRespVOList
        : item.inspectionRecordCharacteristicsRespVO.quantifyRespVOList
  })
  data.value.subList = list
})
</script>
<style lang="scss">
.el-drawer__body {
  background: #f5f5f5 !important;
}

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