byte-sailing-new/src/views/EHSD/procurement/InspectionGoodsEHSD/index.vue

<template>
  <div class="tenant">
    <byTable
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      :selectConfig="selectConfig"
      highlight-current-row
      @get-list="getList">
      <template #amount="{ item }">
        <div>
          <span style="padding-right: 4px">{{ item.currency }}</span>
          <span>{{ moneyFormat(item.amount, 2) }}</span>
        </div>
      </template>
    </byTable>

    <el-dialog title="质检" v-if="openInspection" v-model="openInspection" width="90%">
      <div style="width: 100%">
        <el-steps align-center>
          <el-step
            v-for="(item, index) in steps"
            :key="index"
            :title="item.label"
            style="cursor: pointer"
            :status="getStepStatus(item)"
            @click="clickSteps(item.value)" />
        </el-steps>
        <div v-show="selectSteps === 1" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit1">
            <template #steps>
              <div style="width: 100%">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Supplier" prop="supplyName" style="margin-top: 20px">
                      <el-input v-model="formData.data.supplyName" disabled />
                    </el-form-item>
                    <el-form-item label="Product Name" prop="productName" style="margin-top: 20px">
                      <el-input v-model="formData.data.productName" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="P.O. NO." prop="code" style="margin-top: 20px">
                      <el-input v-model="formData.data.code" />
                    </el-form-item>
                    <el-form-item label="Inspection Date" prop="inspectionDate" style="margin-top: 20px">
                      <el-date-picker v-model="formData.data.inspectionDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Reference Sample" prop="referenceSample" style="margin-top: 20px">
                      <el-radio-group v-model="formData.data.referenceSample">
                        <el-radio :key="0" label="0">No Reference Sample On-site</el-radio>
                        <el-radio :key="1" label="1">Product Specification</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="Order Quantity" prop="orderQuantity" style="margin-top: 20px">
                      <el-input-number onmousewheel="return false;" v-model="formData.data.orderQuantity" :precision="0" :controls="false" :min="0" />
                    </el-form-item>
                    <el-form-item label="Inspection Location" prop="inspectionLocation" style="margin-top: 20px">
                      <el-input v-model="formData.data.inspectionLocation" :rows="4" type="textarea" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 2" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit2">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px; font-weight: 700">INSPECTION SUMMARY</div>
                <div>
                  <el-button type="primary" @click="clickAdd()" plain>添加行</el-button>
                  <el-table :data="formData.data.inspectionSummaryList" style="width: 100%; margin-top: 16px">
                    <el-table-column>
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'inspectionSummaryList.' + $index + '.summaryLabel'" :rules="rules.summaryLabel" :inline-message="true">
                            <el-input v-model="row.summaryLabel" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column>
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'inspectionSummaryList.' + $index + '.summaryValue'" :rules="rules.summaryValue" :inline-message="true">
                            <el-radio-group v-model="row.summaryValue" class="ml-4">
                              <el-radio v-for="(item, index) in summaryType" :key="index" :label="item.label"></el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60" align="center" fixed="right">
                      <template #default="{ $index }">
                        <el-button type="primary" link @click="handleDelete($index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="margin-top: 20px; font-weight: 700">AQL Result</div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Summary" prop="summary" style="margin-top: 20px">
                      <el-input v-model="formData.data.summary" :rows="4" type="textarea" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-table :data="formData.data.ehsdQualityAqlList" style="width: 100%; margin-top: 16px">
                  <el-table-column label="AQL Level" prop="aqlLevel" />
                  <el-table-column label="Sample Size" width="160">
                    <template #default="{ row, $index }">
                      <div style="width: 100%">
                        <el-form-item :prop="'ehsdQualityAqlList.' + $index + '.sampleSize'" :rules="rules.sampleSize" :inline-message="true">
                          <el-input-number onmousewheel="return false;" v-model="row.sampleSize" :precision="2" :controls="false" :min="0" />
                        </el-form-item>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="Acceptance" width="160">
                    <template #default="{ row, $index }">
                      <div style="width: 100%">
                        <el-form-item :prop="'ehsdQualityAqlList.' + $index + '.acceptance'" :rules="rules.acceptance" :inline-message="true">
                          <el-input v-model="row.acceptance" />
                        </el-form-item>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="Finding" width="160">
                    <template #default="{ row, $index }">
                      <div style="width: 100%">
                        <el-form-item :prop="'ehsdQualityAqlList.' + $index + '.finding'" :rules="rules.finding" :inline-message="true">
                          <el-input v-model="row.finding" />
                        </el-form-item>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="Result" width="160">
                    <template #default="{ row, $index }">
                      <div style="width: 100%">
                        <el-form-item :prop="'ehsdQualityAqlList.' + $index + '.result'" :rules="rules.result" :inline-message="true">
                          <el-input v-model="row.result" />
                        </el-form-item>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="AQL Result" width="160">
                    <template #default="{ row, $index }">
                      <div style="width: 100%">
                        <el-form-item :prop="'ehsdQualityAqlList.' + $index + '.aqlResult'" :rules="rules.aqlResult" :inline-message="true">
                          <el-select v-model="row.aqlResult" @change="changeAqlResult">
                            <el-option v-for="item in aqlResult" :key="item.value" :label="item.label" :value="item.value" />
                          </el-select>
                        </el-form-item>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Result" prop="summaryResult" style="margin-top: 20px">
                      <span style="color: red" v-if="formData.data.summaryResult === 1">Failed</span>
                      <span style="color: #03d503" v-else-if="formData.data.summaryResult === 0">Passed</span>
                    </el-form-item>
                    <el-form-item label="Description" prop="summaryDescription" style="margin-top: 20px">
                      <el-input v-model="formData.data.summaryDescription" :rows="4" type="textarea" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 3" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit3">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px">Problem Remarks</div>
                <div>
                  <el-button type="primary" @click="clickProblemAdd()" plain>添加行</el-button>
                  <el-table :data="formData.data.ehsdQualityProblemList" style="width: 100%; margin-top: 16px">
                    <el-table-column label="#" width="50">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          {{ $index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column>
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualityProblemList.' + $index + '.remark'" :rules="rules.remark" :inline-message="true">
                            <el-input v-model="row.remark" :rows="4" type="textarea" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60" align="center" fixed="right">
                      <template #default="{ $index }">
                        <el-button type="primary" link @click="handleProblemDelete($index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-form-item label="Sample Collection Record" style="margin-top: 20px">
                  <el-upload
                    v-model:fileList="fileListOne"
                    action="https://winfaster.oss-cn-fuzhou.aliyuncs.com"
                    :data="uploadDataOne"
                    multiple
                    list-type="picture-card"
                    :before-upload="uploadFileOne"
                    accept=".gif, .jpeg, .jpg, .png">
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                      <div>
                        <div>
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" style="cursor: pointer" />
                          <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="onPreviewFile(file)">
                              <el-icon><zoom-in /></el-icon>
                            </span>
                            <span class="el-upload-list__item-delete" @click="onRemoveOne(file)">
                              <el-icon><Delete /></el-icon>
                            </span>
                          </span>
                          <el-button type="primary" @click="clickFileRemark(file, 1)" text>Remark</el-button>
                        </div>
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 4" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit4">
            <template #steps>
              <div style="width: 100%"></div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 5" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit5">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px">Quantity</div>
                <div>
                  <el-table :data="formData.data.ehsdQualityProductList" style="width: 100%; margin-top: 16px">
                    <el-table-column>
                      <el-table-column label="P.I." prop="contractCode" width="140" />
                      <el-table-column label="item" prop="item" min-width="160" />
                      <el-table-column label="Order Qty" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityProductList.' + $index + '.orderQty'" :rules="rules.orderQty" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="row.orderQty" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Qty/Carton" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityProductList.' + $index + '.cartonQty'" :rules="rules.cartonQty" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="row.cartonQty" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Order Cartons" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityProductList.' + $index + '.orderCartons'" :rules="rules.orderCartons" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="row.orderCartons" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="Quantity Breakdown">
                      <el-table-column label="Packed" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityProductList.' + $index + '.packed'" :rules="rules.packed" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="row.packed" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Unpacked" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityProductList.' + $index + '.unpacked'" :rules="rules.unpacked" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="row.unpacked" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Unfinished" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityProductList.' + $index + '.unfinished'" :rules="rules.unfinished" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="row.unfinished" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="Sample Size">
                      <el-table-column label="Packed" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityProductList.' + $index + '.samplePacked'" :rules="rules.samplePacked" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="row.samplePacked" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Unpacked" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityProductList.' + $index + '.sampleUnpacked'" :rules="rules.sampleUnpacked" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="row.sampleUnpacked" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="margin-top: 20px">Selected Cartons</div>
                <div>
                  <el-button type="primary" @click="clickCartonsAdd()" plain>添加列</el-button>
                  <el-table :data="formData.data.ehsdQualityCartonsList" style="width: 100%; margin-top: 16px" :row-class-name="changeClass">
                    <el-table-column label="item" prop="item" min-width="160" />
                    <template v-for="(item, index) in formData.data.ehsdQualityCartonsList" :key="index">
                      <el-table-column label="Carton Number" width="160">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityCartonsList.' + index + '.cartonNumber'" :rules="rules.cartonNumber" :inline-message="true">
                              <el-input-number onmousewheel="return false;" v-model="item.cartonNumber" :precision="0" :controls="false" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </template>
                    <el-table-column label="Total" prop="item" width="140" fixed="right">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">{{ formData.data.ehsdQualityCartonsList.length }} CTN</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 6" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit6">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px">Workmanship Defectives / Function Inspection Findings</div>
                <div>
                  <el-button type="primary" @click="clickWorkShipAdd()" plain>添加行</el-button>
                  <el-table :data="formData.data.ehsdQualityWorkshipList" style="width: 100%; margin-top: 16px" show-summary :summary-method="getSummaries">
                    <el-table-column label="#" width="50">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          {{ $index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Description">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualityWorkshipList.' + $index + '.description'" :rules="rules.description" :inline-message="true">
                            <el-input v-model="row.description" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Critical" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualityWorkshipList.' + $index + '.critical'" :rules="rules.critical" :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.critical" :precision="0" :controls="false" :min="0" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Major" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualityWorkshipList.' + $index + '.major'" :rules="rules.major" :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.major" :precision="0" :controls="false" :min="0" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Minor" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualityWorkshipList.' + $index + '.minor'" :rules="rules.minor" :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.minor" :precision="0" :controls="false" :min="0" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60" align="center" fixed="right">
                      <template #default="{ $index }">
                        <el-button type="primary" link @click="handleWorkShipDelete($index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-form-item label="Defect photos of Items" style="margin-top: 20px">
                  <el-upload
                    v-model:fileList="fileListTwo"
                    action="https://winfaster.oss-cn-fuzhou.aliyuncs.com"
                    :data="uploadDataTwo"
                    multiple
                    list-type="picture-card"
                    :before-upload="uploadFileTwo"
                    accept=".gif, .jpeg, .jpg, .png">
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                      <div>
                        <div>
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" style="cursor: pointer" />
                          <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="onPreviewFile(file)">
                              <el-icon><zoom-in /></el-icon>
                            </span>
                            <span class="el-upload-list__item-delete" @click="onRemoveTwo(file)">
                              <el-icon><Delete /></el-icon>
                            </span>
                          </span>
                          <el-button type="primary" @click="clickFileRemark(file, 2)" text>Remark</el-button>
                        </div>
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 7" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit7">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px">ON-SITE TESTS</div>
                <div>
                  <el-button type="primary" @click="clickSiteTestAdd()" plain>添加行</el-button>
                  <el-table :data="formData.data.ehsdQualitySiteTestList" style="width: 100%; margin-top: 16px">
                    <el-table-column label="#" width="50">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          {{ $index + 1 }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Description" min-width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualitySiteTestList.' + $index + '.description'" :rules="rules.description" :inline-message="true">
                            <el-input v-model="row.description" :rows="4" type="textarea" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Sample Size" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualitySiteTestList.' + $index + '.sampleSize'" :rules="rules.sampleSize" :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.sampleSize" :precision="2" :controls="false" :min="0" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Passed" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualitySiteTestList.' + $index + '.passed'" :rules="rules.passed" :inline-message="true">
                            <el-input v-model="row.passed" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Failed" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualitySiteTestList.' + $index + '.failed'" :rules="rules.failed" :inline-message="true">
                            <el-input v-model="row.failed" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Result / Reading" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualitySiteTestList.' + $index + '.result'" :rules="rules.result" :inline-message="true">
                            <el-select v-model="row.result" @change="changeSiteTestResult">
                              <el-option v-for="item in aqlResult" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Result" prop="siteTestResult" style="margin-top: 20px">
                      <span style="color: red" v-if="formData.data.siteTestResult === 1">Failed</span>
                      <span style="color: #03d503" v-else-if="formData.data.siteTestResult === 0">Passed</span>
                    </el-form-item>
                    <el-form-item label="Remark" prop="siteTestRemark" style="margin-top: 20px">
                      <el-input v-model="formData.data.siteTestRemark" :rows="4" type="textarea" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="Photos" style="margin-top: 20px">
                  <el-upload
                    v-model:fileList="fileListThree"
                    action="https://winfaster.oss-cn-fuzhou.aliyuncs.com"
                    :data="uploadDataThree"
                    multiple
                    list-type="picture-card"
                    :before-upload="uploadFileThree"
                    accept=".gif, .jpeg, .jpg, .png">
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                      <div>
                        <div>
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" style="cursor: pointer" />
                          <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="onPreviewFile(file)">
                              <el-icon><zoom-in /></el-icon>
                            </span>
                            <span class="el-upload-list__item-delete" @click="onRemoveThree(file)">
                              <el-icon><Delete /></el-icon>
                            </span>
                          </span>
                          <el-button type="primary" @click="clickFileRemark(file, 3)" text>Remark</el-button>
                        </div>
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 8" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit8">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px">PRODUCT SPECIFICATION</div>
                <div>
                  <el-table :data="formData.data.ehsdQualityProductColorList" style="width: 100%; margin-top: 16px">
                    <el-table-column min-width="180">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <span v-if="$index === 0">L * W * H (cm)</span>
                          <span v-else-if="$index === 1">Net Weight (g)</span>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Client Spec." prop="productModel" width="180" />
                    <el-table-column label="Ref. Sample" width="180">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualityProductColorList.' + $index + '.refSample'" :rules="rules.refSample" :inline-message="true">
                            <el-input v-model="row.refSample" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="1# Sample" width="180">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualityProductColorList.' + $index + '.refSampleOne'" :rules="rules.refSampleOne" :inline-message="true">
                            <el-input v-model="row.refSampleOne" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="2# Sample" width="180">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'ehsdQualityProductColorList.' + $index + '.refSampleTwo'" :rules="rules.refSampleTwo" :inline-message="true">
                            <el-input v-model="row.refSampleTwo" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="3# Sample" width="180">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item
                            :prop="'ehsdQualityProductColorList.' + $index + '.refSampleThree'"
                            :rules="rules.refSampleThree"
                            :inline-message="true">
                            <el-input v-model="row.refSampleThree" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Result" prop="productSpecificationResult" style="margin-top: 20px">
                      <el-select v-model="formData.data.productSpecificationResult">
                        <el-option v-for="item in aqlResult" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="Remark" prop="productSpecificationRemark" style="margin-top: 20px">
                      <el-input v-model="formData.data.productSpecificationRemark" :rows="4" type="textarea" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 9" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit9">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px">Package Details</div>
                <div>
                  <el-table :data="formData.data.ehsdQualityPackList" style="width: 100%; margin-top: 16px">
                    <el-table-column>
                      <el-table-column label="Item No." prop="itemNo" min-width="180" />
                    </el-table-column>
                    <el-table-column label="Qty/Carton">
                      <el-table-column label="Marking/Spec." width="160">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityPackList.' + $index + '.cartonSpec'" :rules="rules.cartonSpec" :inline-message="true">
                              <el-input v-model="row.cartonSpec" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Actual" width="180">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityPackList.' + $index + '.cartonActual'" :rules="rules.cartonActual" :inline-message="true">
                              <el-input v-model="row.cartonActual" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="Carton Size (L x W x H, cm)">
                      <el-table-column label="Marking/Spec." width="160">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityPackList.' + $index + '.cartonSizeSpec'" :rules="rules.cartonSizeSpec" :inline-message="true">
                              <el-input v-model="row.cartonSizeSpec" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Actual" width="180">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityPackList.' + $index + '.cartonSizeActual'" :rules="rules.cartonSizeActual" :inline-message="true">
                              <el-input v-model="row.cartonSizeActual" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="Gross Weight (kgs)">
                      <el-table-column label="Marking/Spec." width="160">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityPackList.' + $index + '.grossWeightSpec'" :rules="rules.grossWeightSpec" :inline-message="true">
                              <el-input v-model="row.grossWeightSpec" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Actual" width="180">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item
                              :prop="'ehsdQualityPackList.' + $index + '.grossWeightActual'"
                              :rules="rules.grossWeightActual"
                              :inline-message="true">
                              <el-input v-model="row.grossWeightActual" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="Qty / Inner box">
                      <el-table-column label="Marking/Spec." width="160">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityPackList.' + $index + '.innerBoxSpec'" :rules="rules.innerBoxSpec" :inline-message="true">
                              <el-input v-model="row.innerBoxSpec" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="Actual" width="180">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'ehsdQualityPackList.' + $index + '.innerBoxActual'" :rules="rules.innerBoxActual" :inline-message="true">
                              <el-input v-model="row.innerBoxActual" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 10" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit10">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px">MARKING & LABELING</div>
                <el-form-item label="Marking type" prop="markingType" style="margin-top: 20px">
                  <el-select v-model="formData.data.markingType">
                    <el-option v-for="item in markingType" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
                <div style="margin-top: 20px">Detail</div>
                <div>
                  <el-button type="primary" @click="clickMarkingAdd()" plain>添加行</el-button>
                  <el-table :data="formData.data.markingDetailList" style="width: 100%; margin-top: 16px">
                    <el-table-column label="Name" min-width="300">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'markingDetailList.' + $index + '.name'" :rules="rules.name" :inline-message="true">
                            <el-input v-model="row.name" :rows="4" type="textarea" />
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="Result" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'markingDetailList.' + $index + '.result'" :rules="rules.result" :inline-message="true">
                            <el-select v-model="row.result">
                              <el-option v-for="item in aqlResult" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="margin-top: 20px">Shipping Marks</div>
                <div>
                  <el-table :data="formData.data.shippingMarksList" style="width: 100%; margin-top: 16px">
                    <el-table-column label="Name" prop="name" min-width="300" />
                    <el-table-column label="Result" width="160">
                      <template #default="{ row, $index }">
                        <div style="width: 100%">
                          <el-form-item :prop="'shippingMarksList.' + $index + '.result'" :rules="rules.result" :inline-message="true">
                            <el-select v-model="row.result">
                              <el-option v-for="item in aqlResult" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                          </el-form-item>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Result" prop="markingResult" style="margin-top: 20px">
                      <el-select v-model="formData.data.markingResult">
                        <el-option v-for="item in aqlResult" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
          </byForm>
        </div>
        <div v-show="selectSteps === 11" style="width: 100%">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit11">
            <template #steps>
              <div style="width: 100%">
                <div style="margin-top: 20px">SUPPORT DOCUMENTATION</div>
                <el-form-item label="Video" required>
                  <el-upload
                    class="avatar-uploader"
                    action="https://winfaster.oss-cn-fuzhou.aliyuncs.com"
                    :data="uploadDataFour"
                    :show-file-list="false"
                    :on-success="onSuccess"
                    :before-upload="uploadFileFour"
                    accept=".mp4">
                    <video
                      v-if="formData.data.supportDocumentationFileList && formData.data.supportDocumentationFileList.length > 0"
                      :src="formData.data.supportDocumentationFileList[0].fileUrl"
                      style="width: 300px; height: 300px"
                      controls></video>
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
                </el-form-item>
              </div>
            </template>
          </byForm>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="openInspection = false" size="large">取 消</el-button>
          <el-button @click="submitFollow(false)" size="large" plain>暂 存</el-button>
          <el-button type="primary" @click="submitFollow(true)" size="large">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="Remark" v-if="openRemark" v-model="openRemark" width="40%">
      <byForm :formConfig="formRemarkConfig" :formOption="formOption" v-model="formRemarkData.data" :rules="rulesRemark" ref="submitRemark">
        <template #remark>
          <div style="width: 100%">
            <el-form-item label="Remark" prop="remark" style="margin-top: 20px">
              <el-input v-model="formRemarkData.data.remark" :rows="4" type="textarea" />
            </el-form-item>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="openRemark = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitFileRemark" size="large">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { ElMessage, ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
const qualityStatus = ref([
  {
    label: "未质检",
    value: 0,
  },
  {
    label: "质检中",
    value: 10,
  },
  {
    label: "已质检",
    value: 20,
  },
]);
const orderType = ref([
  {
    label: "样品单",
    value: "样品单",
  },
  {
    label: "外销合同",
    value: "外销合同",
  },
]);
// const orderType = ref([
//   {
//     label: "样品单",
//     value: "样品单",
//   },
//   {
//     label: "外销合同",
//     value: "外销合同",
//   },
// ]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    qualityStatus: "",
    orderType: "",
    summary: "",
  },
});
const loading = ref(false);
const selectConfig = computed(() => {
  return [
    {
      label: "质检状态",
      prop: "qualityStatus",
      data: qualityStatus.value,
    },
    {
      label: "订单类型",
      prop: "orderType",
      data: orderType.value,
    },
    {
      label: "结论",
      prop: "summary",
      data: [],
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "订单类型",
        prop: "orderType",
        width: 140,
      },
    },
    {
      attrs: {
        label: "订单号",
        prop: "contractCode",
        width: 180,
      },
    },
    {
      attrs: {
        label: "客户名称",
        prop: "customerName",
        "min-width": 180,
      },
    },
    {
      attrs: {
        label: "产品名称",
        prop: "productName",
        "min-width": 180,
      },
    },
    {
      attrs: {
        label: "尺寸",
        prop: "productModel",
        width: 160,
      },
    },
    {
      attrs: {
        label: "数量",
        prop: "expendQuantity",
        width: 140,
      },
    },
    {
      attrs: {
        label: "质检状态",
        prop: "qualityStatus",
        width: 140,
      },
      render(type) {
        return proxy.dictValueLabel(type, qualityStatus.value);
      },
    },
    {
      attrs: {
        label: "验货人",
        prop: "qualityUserName",
        width: 140,
      },
    },
    {
      attrs: {
        label: "质检时间",
        prop: "qualityTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "操作",
        width: 100,
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          row.qualityStatus === 0
            ? {
                attrs: {
                  label: "质检",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  clickInspection(row);
                },
              }
            : {},
          row.qualityStatus === 10
            ? {
                attrs: {
                  label: "继续质检",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  clickInspectionTwo(row);
                },
              }
            : {},
        ];
      },
    },
  ];
});
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/stay/quality/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const openInspection = ref(false);
const steps = ref([
  { value: 1, label: "GENERAL INFORMATION" },
  { value: 2, label: "INSPECTION SUMMARY" },
  { value: 3, label: "REMARKS" },
  { value: 4, label: "CONCLUSION" },
  { value: 5, label: "QUANTITY" },
  { value: 6, label: "WORKMANSHIP" },
  { value: 7, label: "ON-SITE TESTS" },
  { value: 8, label: "PRODUCT SPECIFICATION" },
  { value: 9, label: "PACKING" },
  { value: 10, label: "MARKING & LABELING" },
  { value: 11, label: "SUPPORT DOCUMENTATION" },
]);
const summaryType = ref([
  { value: "Passed", label: "Passed" },
  { value: "Failed", label: "Failed" },
  { value: "Pending", label: "Pending" },
  { value: "Actual Finding", label: "Actual Finding" },
]);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formConfig = computed(() => {
  return [
    {
      type: "slot",
      slotName: "steps",
    },
  ];
});
const rules = ref({
  code: [{ required: true, message: "请输入", trigger: "blur" }],
  inspectionDate: [{ required: true, message: "请输入", trigger: "change" }],
  referenceSample: [{ required: true, message: "请选择", trigger: "change" }],
  orderQuantity: [{ required: true, message: "请输入", trigger: "blur" }],
  inspectionLocation: [{ required: true, message: "请输入", trigger: "blur" }],
  summaryLabel: [{ required: true, message: "请输入", trigger: "blur" }],
  summaryValue: [{ required: true, message: "请选择", trigger: "change" }],
  summary: [{ required: true, message: "请输入", trigger: "blur" }],
  sampleSize: [{ required: true, message: "请输入", trigger: "blur" }],
  acceptance: [{ required: true, message: "请输入", trigger: "blur" }],
  finding: [{ required: true, message: "请输入", trigger: "blur" }],
  result: [{ required: true, message: "请输入", trigger: "blur" }],
  aqlResult: [{ required: true, message: "请选择", trigger: "change" }],
  summaryResult: [{ required: true, message: "请选择", trigger: "change" }],
  summaryDescription: [{ required: true, message: "请输入", trigger: "blur" }],
  remark: [{ required: true, message: "请输入", trigger: "blur" }],
  orderQty: [{ required: true, message: "请输入", trigger: "blur" }],
  cartonQty: [{ required: true, message: "请输入", trigger: "blur" }],
  orderCartons: [{ required: true, message: "请输入", trigger: "blur" }],
  packed: [{ required: true, message: "请输入", trigger: "blur" }],
  unpacked: [{ required: true, message: "请输入", trigger: "blur" }],
  unfinished: [{ required: true, message: "请输入", trigger: "blur" }],
  samplePacked: [{ required: true, message: "请输入", trigger: "blur" }],
  sampleUnpacked: [{ required: true, message: "请输入", trigger: "blur" }],
  description: [{ required: true, message: "请输入", trigger: "blur" }],
  critical: [{ required: true, message: "请输入", trigger: "blur" }],
  major: [{ required: true, message: "请输入", trigger: "blur" }],
  minor: [{ required: true, message: "请输入", trigger: "blur" }],
  siteTestResult: [{ required: true, message: "请输入", trigger: "blur" }],
  siteTestRemark: [{ required: true, message: "请输入", trigger: "blur" }],
  passed: [{ required: true, message: "请输入", trigger: "blur" }],
  failed: [{ required: true, message: "请输入", trigger: "blur" }],
  productSpecificationResult: [{ required: true, message: "请选择", trigger: "change" }],
  productSpecificationRemark: [{ required: true, message: "请输入", trigger: "blur" }],
  cartonSpec: [{ required: true, message: "请输入", trigger: "blur" }],
  cartonActual: [{ required: true, message: "请输入", trigger: "blur" }],
  cartonSizeSpec: [{ required: true, message: "请输入", trigger: "blur" }],
  cartonSizeActual: [{ required: true, message: "请输入", trigger: "blur" }],
  grossWeightSpec: [{ required: true, message: "请输入", trigger: "blur" }],
  grossWeightActual: [{ required: true, message: "请输入", trigger: "blur" }],
  innerBoxSpec: [{ required: true, message: "请输入", trigger: "blur" }],
  innerBoxActual: [{ required: true, message: "请输入", trigger: "blur" }],
  markingType: [{ required: true, message: "请选择", trigger: "change" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  markingResult: [{ required: true, message: "请选择", trigger: "change" }],
});
const submit1 = ref(null);
const submit2 = ref(null);
const submit3 = ref(null);
const submit4 = ref(null);
const submit5 = ref(null);
const submit6 = ref(null);
const submit7 = ref(null);
const submit8 = ref(null);
const submit9 = ref(null);
const submit10 = ref(null);
const submit11 = ref(null);
const formData = reactive({
  data: {},
});
const selectSteps = ref("1");
const aqlResult = ref([
  {
    label: "Failed",
    value: 1,
  },
  {
    label: "Passed",
    value: 0,
  },
]);
const markingType = ref([
  {
    label: "Barcode",
    value: 0,
  },
  {
    label: "Labeling",
    value: 1,
  },
  {
    label: "Printing",
    value: 2,
  },
]);
const clickInspection = (row) => {
  fileListOne.value = [];
  fileListTwo.value = [];
  fileListThree.value = [];
  selectSteps.value = 1;
  let orderType = 0;
  if (row.orderType === "外销合同") {
    orderType = 1;
  } else {
    orderType = 2;
  }
  formData.data = {
    businessType: orderType,
    businessId: row.id,
    supplyId: row.supplyId,
    supplyName: row.supplyName,
    productId: row.productId,
    productName: row.productName,
    status: 0,
    summaryResult: 1,
    siteTestResult: 1,
    orderQuantity: undefined,
    ehsdQualityAqlList: [
      {
        aqlLevel: "Critical: Not Allowed",
        sampleSize: undefined,
        acceptance: "",
        finding: "",
        result: "",
        aqlResult: "",
      },
      {
        aqlLevel: "Major: 1.0",
        sampleSize: undefined,
        acceptance: "",
        finding: "",
        result: "",
        aqlResult: "",
      },
      {
        aqlLevel: "Major: 1.5",
        sampleSize: undefined,
        acceptance: "",
        finding: "",
        result: "",
        aqlResult: "",
      },
    ],
    ehsdQualityProblemList: [],
    ehsdQualityProductList: [
      {
        contractCode: row.contractCode,
        item: row.productName,
        orderQty: undefined,
        cartonQty: undefined,
        orderCartons: undefined,
        packed: undefined,
        unpacked: undefined,
        unfinished: undefined,
        samplePacked: undefined,
        sampleUnpacked: undefined,
        remark: "",
      },
    ],
    ehsdQualityCartonsList: [
      {
        item: row.productName,
        cartonNumber: undefined,
        total: 1,
      },
    ],
    ehsdQualityProductColorList: [
      {
        productId: row.productId,
        productModel: row.productSpec,
        refSample: "",
        refSampleOne: "",
        refSampleTwo: "",
        refSampleThree: "",
        remark: "",
      },
      {
        productId: row.productId,
        productModel: row.netWeight,
        refSample: "",
        refSampleOne: "",
        refSampleTwo: "",
        refSampleThree: "",
        remark: "",
      },
    ],
    ehsdQualityPackList: [
      {
        itemNo: row.productName,
        cartonSpec: undefined,
        cartonActual: undefined,
        cartonSizeSpec: undefined,
        cartonSizeActual: undefined,
        grossWeightSpec: undefined,
        grossWeightActual: undefined,
        innerBoxSpec: undefined,
        innerBoxActual: undefined,
        remark: "",
      },
    ],
    markingDetailList: [],
    shippingMarksList: [
      {
        name: "Shipping Marks (on 2 sides)",
        result: "",
      },
      {
        name: "Side Marks (no marks)",
        result: "",
      },
    ],
    ehsdQualityWorkshipList: [],
    sampleCollectionRecordFileList: [],
    workshipPhotoFileList: [],
    defectPhotosOfItemsFileList: [],
    supportDocumentationFileList: [],
  };
  openInspection.value = true;
};
const clickInspectionTwo = (row) => {
  selectSteps.value = 1;
  fileListOne.value = [];
  fileListTwo.value = [];
  fileListThree.value = [];
  openInspection.value = true;
  proxy.post("/ehsdQuality/detail", { id: row.id }).then((res) => {
    formData.data = res;
    if (formData.data.inspectionSummary) {
      formData.data.inspectionSummaryList = JSON.parse(formData.data.inspectionSummary);
    }
    if (formData.data.shippingMarks) {
      formData.data.shippingMarksList = JSON.parse(formData.data.shippingMarks);
    }
    proxy.post("/fileInfo/getList", { businessIdList: [res.id], fileType: 10 }).then((fileObj) => {
      formData.data.sampleCollectionRecordFileList = fileObj[res.id] || [];
      if (formData.data.sampleCollectionRecordFileList && formData.data.sampleCollectionRecordFileList.length > 0) {
        fileListOne.value = formData.data.sampleCollectionRecordFileList.map((item) => {
          return {
            raw: item,
            name: item.fileName,
            url: item.fileUrl,
          };
        });
      }
    });
    proxy.post("/fileInfo/getList", { businessIdList: [res.id], fileType: 20 }).then((fileObj) => {
      formData.data.workshipPhotoFileList = fileObj[res.id] || [];
      if (formData.data.workshipPhotoFileList && formData.data.workshipPhotoFileList.length > 0) {
        fileListTwo.value = formData.data.workshipPhotoFileList.map((item) => {
          return {
            raw: item,
            name: item.fileName,
            url: item.fileUrl,
          };
        });
      }
    });
    proxy.post("/fileInfo/getList", { businessIdList: [res.id], fileType: 30 }).then((fileObj) => {
      formData.data.defectPhotosOfItemsFileList = fileObj[res.id] || [];
      if (formData.data.defectPhotosOfItemsFileList && formData.data.defectPhotosOfItemsFileList.length > 0) {
        fileListThree.value = formData.data.defectPhotosOfItemsFileList.map((item) => {
          return {
            raw: item,
            name: item.fileName,
            url: item.fileUrl,
          };
        });
      }
    });
    proxy.post("/fileInfo/getList", { businessIdList: [res.id], fileType: 40 }).then((fileObj) => {
      formData.data.supportDocumentationFileList = fileObj[res.id] || [];
    });
  });
};
const clickSteps = (val) => {
  selectSteps.value = val;
};
const getStepStatus = (item) => {
  if (selectSteps.value === item.value) {
    return "success";
  }
  return "process";
};
const submitFollow = async (status) => {
  if (status) {
    let statusSubmit1 = await submit1.value.handleSubmit(() => {});
    if (!statusSubmit1) {
      selectSteps.value = 1;
      return ElMessage("GENERAL INFORMATION填写不正确");
    }
    let statusSubmit2 = await submit2.value.handleSubmit(() => {});
    if (!statusSubmit2) {
      selectSteps.value = 2;
      return ElMessage("INSPECTION SUMMARY填写不正确");
    }
    let statusSubmit3 = await submit3.value.handleSubmit(() => {});
    if (!statusSubmit3) {
      selectSteps.value = 3;
      return ElMessage("REMARKS填写不正确");
    }
    let statusSubmit4 = await submit4.value.handleSubmit(() => {});
    if (!statusSubmit4) {
      selectSteps.value = 4;
      return ElMessage("CONCLUSION填写不正确");
    }
    let statusSubmit5 = await submit5.value.handleSubmit(() => {});
    if (!statusSubmit5) {
      selectSteps.value = 5;
      return ElMessage("QUANTITY填写不正确");
    }
    let statusSubmit6 = await submit6.value.handleSubmit(() => {});
    if (!statusSubmit6) {
      selectSteps.value = 6;
      return ElMessage("WORKMANSHIP填写不正确");
    }
    let statusSubmit7 = await submit7.value.handleSubmit(() => {});
    if (!statusSubmit7) {
      selectSteps.value = 7;
      return ElMessage("ON-SITE TESTS填写不正确");
    }
    let statusSubmit8 = await submit8.value.handleSubmit(() => {});
    if (!statusSubmit8) {
      selectSteps.value = 8;
      return ElMessage("PRODUCT SPECIFICATION填写不正确");
    }
    let statusSubmit9 = await submit9.value.handleSubmit(() => {});
    if (!statusSubmit9) {
      selectSteps.value = 9;
      return ElMessage("PACKING填写不正确");
    }
    let statusSubmit10 = await submit10.value.handleSubmit(() => {});
    if (!statusSubmit10) {
      selectSteps.value = 10;
      return ElMessage("MARKING & LABELING填写不正确");
    }
    let statusSubmit11 = await submit11.value.handleSubmit(() => {});
    if (!statusSubmit11) {
      selectSteps.value = 11;
      return ElMessage("SUPPORT DOCUMENTATION填写不正确");
    }
    formData.data.inspectionSummary = JSON.stringify(formData.data.inspectionSummaryList);
    if (fileListOne.value && fileListOne.value.length > 0) {
      formData.data.sampleCollectionRecordFileList = fileListOne.value.map((item) => {
        return {
          id: item.raw.id,
          fileName: item.raw.fileName,
          fileUrl: item.raw.fileUrl,
          remark: item.raw.remark,
        };
      });
    } else {
      formData.data.sampleCollectionRecordFileList = [];
    }
    formData.data.ehsdQualityCartonsList = formData.data.ehsdQualityCartonsList.map((item) => {
      return {
        ...item,
        total: formData.data.ehsdQualityCartonsList.length,
      };
    });
    if (fileListTwo.value && fileListTwo.value.length > 0) {
      formData.data.workshipPhotoFileList = fileListTwo.value.map((item) => {
        return {
          id: item.raw.id,
          fileName: item.raw.fileName,
          fileUrl: item.raw.fileUrl,
          remark: item.raw.remark,
        };
      });
    } else {
      formData.data.workshipPhotoFileList = [];
    }
    if (fileListThree.value && fileListThree.value.length > 0) {
      formData.data.defectPhotosOfItemsFileList = fileListThree.value.map((item) => {
        return {
          id: item.raw.id,
          fileName: item.raw.fileName,
          fileUrl: item.raw.fileUrl,
          remark: item.raw.remark,
        };
      });
    } else {
      formData.data.defectPhotosOfItemsFileList = [];
    }
    formData.data.shippingMarks = JSON.stringify(formData.data.shippingMarksList);
    if (!(formData.data.supportDocumentationFileList && formData.data.supportDocumentationFileList.length > 0)) {
      return ElMessage("请上传视频");
    }
    formData.data.step = "1,2,3,4,5,6,7,8,9,10,11";
    proxy.post("/ehsdQuality/submit", formData.data).then(() => {
      ElMessage({
        message: "保存成功",
        type: "success",
      });
      getList();
      openInspection.value = false;
    });
  } else {
    formData.data.inspectionSummary = JSON.stringify(formData.data.inspectionSummaryList);
    if (fileListOne.value && fileListOne.value.length > 0) {
      formData.data.sampleCollectionRecordFileList = fileListOne.value.map((item) => {
        return {
          id: item.raw.id,
          fileName: item.raw.fileName,
          fileUrl: item.raw.fileUrl,
          remark: item.raw.remark,
        };
      });
    } else {
      formData.data.sampleCollectionRecordFileList = [];
    }
    formData.data.ehsdQualityCartonsList = formData.data.ehsdQualityCartonsList.map((item) => {
      return {
        ...item,
        total: formData.data.ehsdQualityCartonsList.length,
      };
    });
    if (fileListTwo.value && fileListTwo.value.length > 0) {
      formData.data.workshipPhotoFileList = fileListTwo.value.map((item) => {
        return {
          id: item.raw.id,
          fileName: item.raw.fileName,
          fileUrl: item.raw.fileUrl,
          remark: item.raw.remark,
        };
      });
    } else {
      formData.data.workshipPhotoFileList = [];
    }
    if (fileListThree.value && fileListThree.value.length > 0) {
      formData.data.defectPhotosOfItemsFileList = fileListThree.value.map((item) => {
        return {
          id: item.raw.id,
          fileName: item.raw.fileName,
          fileUrl: item.raw.fileUrl,
          remark: item.raw.remark,
        };
      });
    } else {
      formData.data.defectPhotosOfItemsFileList = [];
    }
    formData.data.shippingMarks = JSON.stringify(formData.data.shippingMarksList);
    proxy.post("/ehsdQuality/submit", formData.data).then(() => {
      ElMessage({
        message: "暂存成功",
        type: "success",
      });
    });
  }
};
const clickAdd = () => {
  if (formData.data.inspectionSummaryList && formData.data.inspectionSummaryList.length > 0) {
    formData.data.inspectionSummaryList.push({
      summaryLabel: "",
      summaryValue: "Passed",
    });
  } else {
    formData.data.inspectionSummaryList = [
      {
        summaryLabel: "",
        summaryValue: "Passed",
      },
    ];
  }
};
const handleDelete = (index) => {
  formData.data.inspectionSummaryList.splice(index, 1);
};
const changeAqlResult = () => {
  let data = formData.data.ehsdQualityAqlList.filter((item) => item.aqlResult === 0);
  if (data && data.length === 3) {
    formData.data.summaryResult = 0;
  } else {
    formData.data.summaryResult = 1;
  }
};
const clickProblemAdd = () => {
  if (formData.data.ehsdQualityProblemList && formData.data.ehsdQualityProblemList.length > 0) {
    formData.data.ehsdQualityProblemList.push({
      remark: "",
    });
  } else {
    formData.data.ehsdQualityProblemList = [
      {
        remark: "",
      },
    ];
  }
};
const handleProblemDelete = (index) => {
  formData.data.ehsdQualityProblemList.splice(index, 1);
};
const onPreviewFile = (file) => {
  window.open(file.raw.fileUrl, "_blank");
};
const fileListOne = ref([]);
const uploadDataOne = ref({});
const uploadFileOne = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadDataOne.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  file.uploadState = true;
  return true;
};
const onRemoveOne = (file) => {
  fileListOne.value = fileListOne.value.filter((item) => item.raw.fileUrl !== file.raw.fileUrl);
};
const fileListTwo = ref([]);
const uploadDataTwo = ref({});
const uploadFileTwo = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadDataTwo.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  file.uploadState = true;
  return true;
};
const onRemoveTwo = (file) => {
  fileListTwo.value = fileListTwo.value.filter((item) => item.raw.fileUrl !== file.raw.fileUrl);
};
const fileListThree = ref([]);
const uploadDataThree = ref({});
const uploadFileThree = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadDataThree.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  file.uploadState = true;
  return true;
};
const onRemoveThree = (file) => {
  fileListThree.value = fileListThree.value.filter((item) => item.raw.fileUrl !== file.raw.fileUrl);
};
const uploadDataFour = ref({});
const uploadFileFour = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadDataFour.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  file.uploadState = true;
  return true;
};
const onSuccess = (response, uploadFile) => {
  formData.data.supportDocumentationFileList = [
    {
      id: uploadFile.raw.id,
      fileName: uploadFile.raw.fileName,
      fileUrl: uploadFile.raw.fileUrl,
    },
  ];
};
const remarkIndex = ref("");
const remarkFileUrl = ref("");
const openRemark = ref(false);
const submitRemark = ref(null);
const formRemarkData = reactive({
  data: {
    remark: "",
  },
});
const formRemarkConfig = computed(() => {
  return [
    {
      type: "slot",
      slotName: "remark",
    },
  ];
});
const rulesRemark = ref({
  remark: [{ required: true, message: "请输入", trigger: "blur" }],
});
const clickFileRemark = (file, index) => {
  remarkIndex.value = index;
  remarkFileUrl.value = file.raw.fileUrl;
  formRemarkData.data.remark = file.raw.remark;
  openRemark.value = true;
};
const submitFileRemark = () => {
  submitRemark.value.handleSubmit(() => {
    if (remarkIndex.value === 1) {
      fileListOne.value = fileListOne.value.map((item) => {
        if (item.raw.fileUrl === remarkFileUrl.value) {
          item.raw.remark = formRemarkData.data.remark;
        }
        return {
          ...item,
        };
      });
    } else if (remarkIndex.value === 2) {
      fileListTwo.value = fileListTwo.value.map((item) => {
        if (item.raw.fileUrl === remarkFileUrl.value) {
          item.raw.remark = formRemarkData.data.remark;
        }
        return {
          ...item,
        };
      });
    } else if (remarkIndex.value === 3) {
      fileListThree.value = fileListThree.value.map((item) => {
        if (item.raw.fileUrl === remarkFileUrl.value) {
          item.raw.remark = formRemarkData.data.remark;
        }
        return {
          ...item,
        };
      });
    }
    openRemark.value = false;
  });
};
const clickCartonsAdd = () => {
  formData.data.ehsdQualityCartonsList.push({
    item: formData.data.ehsdQualityCartonsList[0].item,
    cartonNumber: undefined,
    total: 1,
  });
};
const changeClass = ({ row, rowIndex }) => {
  if (rowIndex !== 0) {
    return "hideClass";
  }
};
const clickWorkShipAdd = () => {
  if (formData.data.ehsdQualityWorkshipList && formData.data.ehsdQualityWorkshipList.length > 0) {
    formData.data.ehsdQualityWorkshipList.push({
      description: "",
      remark: "",
      critical: undefined,
      major: undefined,
      minor: undefined,
    });
  } else {
    formData.data.ehsdQualityWorkshipList = [
      {
        description: "",
        remark: "",
        critical: undefined,
        major: undefined,
        minor: undefined,
      },
    ];
  }
};
const handleWorkShipDelete = (index) => {
  formData.data.ehsdQualityWorkshipList.splice(index, 1);
};
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = " ";
      return;
    } else if (index === 1) {
      sums[index] = "Finding";
      return;
    } else if (index === 2) {
      let num = 0;
      data.map((item) => {
        if (item.critical) {
          num = num + Number(item.critical);
        }
      });
      sums[index] = num;
      return;
    } else if (index === 3) {
      let num = 0;
      data.map((item) => {
        if (item.major) {
          num = num + Number(item.major);
        }
      });
      sums[index] = num;
      return;
    } else if (index === 4) {
      let num = 0;
      data.map((item) => {
        if (item.minor) {
          num = num + Number(item.minor);
        }
      });
      sums[index] = num;
      return;
    }
  });
  return sums;
};
const clickSiteTestAdd = () => {
  if (formData.data.ehsdQualitySiteTestList && formData.data.ehsdQualitySiteTestList.length > 0) {
    formData.data.ehsdQualitySiteTestList.push({
      description: "",
      sampleSize: undefined,
      passed: "",
      failed: "",
      remark: "",
      result: "",
    });
  } else {
    formData.data.ehsdQualitySiteTestList = [
      {
        description: "",
        sampleSize: undefined,
        passed: "",
        failed: "",
        remark: "",
        result: "",
      },
    ];
  }
};
const changeSiteTestResult = () => {
  let data = formData.data.ehsdQualitySiteTestList.filter((item) => item.result === 0);
  if (data && data.length === formData.data.ehsdQualitySiteTestList.length) {
    formData.data.siteTestResult = 0;
  } else {
    formData.data.siteTestResult = 1;
  }
};
const clickMarkingAdd = () => {
  if (formData.data.markingDetailList && formData.data.markingDetailList.length > 0) {
    formData.data.markingDetailList.push({
      name: "",
      result: "",
    });
  } else {
    formData.data.markingDetailList = [
      {
        name: "",
        result: "",
      },
    ];
  }
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
  border: 0 !important;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item-thumbnail) {
  width: 110px !important;
  height: 110px !important;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item-actions) {
  width: 110px !important;
  height: 110px !important;
}
::v-deep(.hideClass) {
  display: none;
}
.avatar-uploader .avatar {
  width: 148px;
  height: 148px;
  display: block;
  background-color: black;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
}
</style>