kd-aiot-frontend-wt/src/views/bpm/handleTask/components/inoutBound/detailDialog.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div>
        <div class="content-detail">
          <header-title title="基本信息" size="16px"></header-title>
          <div class="mt20">
            <el-form label-width="120px">
              <el-col :span="8">
                <el-form-item label="入库单:">
                  <span>{{ infoData.bizNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库物品类型:">
                  <span>{{ handleAssetType(extInfo.assetType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库场景:">
                  <span>{{ getSceneState(infoData.bizType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="销售订单:">
                  <span>{{ extInfo.documentSource }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="权属部门:">
                  <span>{{ extInfo.deptName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库登记人:">
                  <span>{{ extInfo.createUserName }}</span>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="创建时间:">
                  <span>{{ infoData.createTime }}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="入库时间:">
                  <span>{{ infoData.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态:">
                  <span>{{ getAuditStatus(infoData.verifyStatus) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核人:">
                  <span>{{ infoData.verifyName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="infoData.bizType == 2">
                <el-form-item label="客户:">
                  <span>{{ infoData.clientName }}</span>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8" v-if="infoData.bizType == 2">
                <el-form-item label="客户代码:">
                  <span>{{ infoData.clientCode }}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="8" v-if="infoData.bizType == 2">
                <el-form-item label="供应商:">
                  <span>{{ extInfo.supplierName }}</span>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8" v-if="infoData.bizType != 2">
                <el-form-item label="供应商代码:">
                  <span>{{ extInfo.supplierCode }}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="送货人:">
                  <span>{{ infoData.fromUser }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="送货人联系方式:">
                  <span>{{ extInfo.deliveryPhone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="附件:">
                  <!-- <el-link
                    type="primary"
                    v-for="(item, index) in infoData.contentImage"
                    @click="contentImageDownload(item)"
                    :key="item.name"
                    >{{ item.name }}</el-link
                  > -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  prop="qualityFile"
                  label="回执附件"
                  :rules="{
                    required: true,
                    trigger: 'blur'
                  }"
                >
                  <fileUpload
                    v-model="qualityFile"
                    module="main"
                    :showLib="false"
                    :limit="10"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注:">
                  <span>{{ infoData.remark }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
        </div>
        <div class="content-detail mt20">
          <header-title title="物品信息" size="16px"></header-title>
          <!-- =={{ warehousingMaterialList }} -->
          <div class="mt20">
            <div class="mt10">
              <el-form
                ref="warehousingMaterialListRef"
                :model="{ warehousingMaterialList: warehousingMaterialList }"
                :show-message="false"
              >
                <el-table
                  ref="warehousingMaterialListTable"
                  :data="warehousingMaterialList"
                  tooltip-effect="dark"
                  :key="infoData.assetType"
                  style="width: 100%"
                  stripe
                  :header-cell-style="rowClass"
                >
                  <el-table-column label="序号" type="index" width="50">
                  </el-table-column>
                  <el-table-column
                    label="编码"
                    prop="categoryCode"
                    align="center"
                    width="150"
                  ></el-table-column>
                  <el-table-column
                    label="名称"
                    align="center"
                    width="170"
                    prop="name"
                  ></el-table-column>
                  <el-table-column
                    v-for="(item, index) in tableHeader"
                    :key="index"
                    align="center"
                    :label="item.label"
                    width="150"
                    :prop="item.prop"
                  >
                    <template slot-scope="{ row }">
                      <template v-if="item.formatter">{{
                        item.formatter(row)
                      }}</template>
                      <template v-else>{{ row[item.prop] }}</template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="批号"
                    prop="manualBatchNo"
                    width="100"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    label="批次号"
                    prop="batchNo"
                    width="70"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    label="最小包装单元"
                    align="center"
                    prop="minPackingCount"
                    width="100"
                  >
                    <el-table-column
                      label=""
                      prop="minPackingCount"
                      width="100"
                      align="center"
                    >
                      <template slot-scope="{ row, $index }">
                        <template v-if="row.isSave">
                          {{ row.minPackingCount }}
                        </template>
                        <el-form-item
                          v-else
                          :prop="`warehousingMaterialList.${$index}.minPackingCount`"
                          required
                        >
                          <el-input
                            v-model="row.minPackingCount"
                            @input="
                              (value) =>
                                (row.minPackingCount = value.replace(
                                  /^(0+)|[^\d]+/g,
                                  ''
                                ))
                            "
                          >
                          </el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="" prop="minPackingCount">
                      <template slot-scope="{ row, $index }">
                        {{ handleRowUnit(row) }} /{{ row.packingUnit }}
                      </template>
                    </el-table-column>
                  </el-table-column>

                  <el-table-column
                    label="包装数量"
                    prop="packingCount"
                    width="130"
                    align="center"
                  >
                    <!-- <template slot-scope="{ row, $index }">
                      {{ row.packingCount }} {{ row.packingUnit }}
                    </template> -->
                    <template slot-scope="{ row, $index }">
                      <template v-if="row.isSave">
                        {{ row.packingCount }} {{ row.packingUnit }}
                      </template>
                      <el-form-item
                        v-else
                        :prop="`warehousingMaterialList.${$index}.packingCount`"
                        required
                      >
                        <el-input
                          v-model="row.packingCount"
                          @input="packNum(row, $event)"
                        >
                          <template slot="append">
                            {{ row.packingUnit ? row.packingUnit : '/' }}
                          </template>
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="计量数量"
                    prop="batchNo"
                    width="100"
                    align="center"
                  >
                    <template slot-scope="{ row, $index }">
                      <template>
                        {{ row.minPackingCount * row.packingCount }}
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="计量单位"
                    prop="batchNo"
                    width="100"
                    align="center"
                  >
                    <template slot-scope="{ row, $index }">
                      <template>
                        {{ row.measuringUnit }}
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="重量"
                    prop="count"
                    width="100"
                    align="center"
                  >
                    <template slot-scope="{ row, $index }">
                      {{ row.weight }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="重量单位"
                    prop="count"
                    width="100"
                    align="center"
                  >
                    <template slot-scope="{ row, $index }">
                      {{ row.weightUnit }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="单价"
                    prop="price"
                    width="190"
                    align="center"
                  >
                    <template slot-scope="{ row, $index }">
                      <template v-if="row.isSave">
                        {{ row.price }}
                      </template>
                      <el-form-item v-else>
                        <el-input
                          v-model="row.price"
                          placeholder="非必填"
                          @input="
                            (value) =>
                              (row.price = value.replace(/[^0-9.]+/g, ''))
                          "
                        >
                          <template slot="append">
                            元/{{ handleRowUnit(row) }}
                          </template>
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="金额"
                    align="center"
                    prop="contentImage"
                    :show-overflow-tooltip="true"
                    width="100"
                  >
                    <template slot-scope="{ row, $index }">
                      <!-- // calcSum(
                      //   row.outInNum,
                      //   row.univalenceUnit,
                      //   row.univalence,
                      //   row
                      // ) -->
                      {{
                        calcSumTotal(
                          row.packingCount,
                          row.minPackingCount,
                          row.price,
                          row
                        )
                      }}
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="货位"
                    prop="position"
                    :show-overflow-tooltip="true"
                    width="200"
                  >
                    <template slot-scope="{ row, $index }">
                      <template v-if="row.isSave">
                        {{ row.position }}
                      </template>
                      <el-form-item
                        v-else
                        :prop="`warehousingMaterialList.${$index}.position`"
                        :required="true"
                      >
                        <span @click="handleWareHouse(row, $index)">
                          {{ row.position }}</span
                        >
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column
                    label="操作"
                    width="200"
                    fixed="right"
                    align="center"
                  >
                    <template slot-scope="{ row, $index }">
                      <el-button
                        type="text"
                        v-show="!row.isSave"
                        @click="listSave(row, $index)"
                        >保存</el-button
                      >
                      <el-button
                        type="text"
                        v-show="row.isSave"
                        @click="listEdit(row, $index)"
                        >编辑</el-button
                      >
                    </template>
                  </el-table-column> -->
                </el-table>
              </el-form>
            </div>
          </div>
        </div>
        <div class="mt20">
          <!-- =={{ getDictValue('类型用途', infoData.assetType) }} -->
          <!-- ${handleAssetType(extInfo.assetType)} -->
          <header-title :title="`包装明细`" size="16px"></header-title>

          <el-table
            ref="detailListTable"
            :data="detailList"
            tooltip-effect="dark"
            :header-cell-style="rowClass"
            style="width: 100%"
            stripe
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column label="编码" prop="categoryCode"></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column
              label="批号"
              prop="manualBatchNo"
            ></el-table-column>
            <el-table-column label="批次号" prop="batchNo"></el-table-column>
            <el-table-column label="包装编码" prop="code"></el-table-column>
            <el-table-column
              label="包装数量"
              prop="packingCount"
              width="80"
            ></el-table-column>
            <el-table-column
              label="包装单位"
              prop="packingUnit"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="minPackingCount"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measuringUnit"
            ></el-table-column>
            <el-table-column label="物料代号" prop="materielCode" width="130">
              <template slot-scope="{ row }">
                <el-input
                  v-show="!row.isPack"
                  v-model="row.materielCode"
                ></el-input>
                <span v-show="row.isPack">{{ row.materielCode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户代号" prop="clientCode">
              <template slot-scope="{ row }">
                <el-input
                  v-show="!row.isPack"
                  v-model="row.clientCode"
                ></el-input>
                <span v-show="row.isPack">{{ row.clientCode }}</span>
              </template>
            </el-table-column>
            <!-- v-if="infoData.bizType == 1" -->
            <el-table-column label="刻码" prop="engrave">
              <template slot-scope="{ row }">
                <el-input v-show="!row.isPack" v-model="row.engrave"></el-input>
                <span v-show="row.isPack">{{ row.engrave }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight">
              <template slot-scope="{ row }">
                <el-input v-show="!row.isPack" v-model="row.weight"></el-input>
                <span v-show="row.isPack">{{ row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量单位" prop="weightUtil">
              <template slot-scope="{ row }">
                {{ row.weightUtil }}
              </template>
            </el-table-column>

            <el-table-column label="质检结果" prop="result" width="120">
              <template slot-scope="{ row }">
                <DictSelection
                  dictName="质检结果"
                  clearable
                  v-model="row.result"
                  v-if="!row.isPack"
                  @updateVal="changeWrapStatus($event, row)"
                />
                <span v-else>{{ qualityResults[row.result] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="质检状态" prop="status" width="120">
              <template slot-scope="{ row }">
                <span>{{ qualityStatus[row.status] }}</span>
              </template>
            </el-table-column>

            <el-table-column label="日期" prop="createTime" width="200">
              <template slot="header" slot-scope="scope">
                {{ dateTypes == 1 ? '采购日期' : '生产日期' }}
              </template>
              <template slot-scope="{ row }">
                {{ row.createTime }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="操作"
              width="100"
              fixed="right"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <el-button
                  type="text"
                  v-show="!row.isPack"
                  @click="packSave(row, $index)"
                  >保存</el-button
                >
                <el-button
                  type="text"
                  v-show="row.isPack"
                  @click="packEdit(row, $index)"
                  >编辑</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="mt20">
          <header-title :title="`物料明细`" size="16px"> </header-title>
          <el-table
            ref="metailListTable"
            :data="metailList"
            tooltip-effect="dark"
            :header-cell-style="rowClass"
            style="width: 100%"
            stripe
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column label="编码" prop="assetCode"></el-table-column>
            <el-table-column
              label="名称"
              prop="assetName"
              width="200"
            ></el-table-column>
            <el-table-column
              label="批号"
              prop="manualBatchNo"
              width="100"
            ></el-table-column>
            <el-table-column
              label="批次号"
              prop="batchNo"
              width="80"
            ></el-table-column>
            <el-table-column
              label="物料编码"
              prop="no"
              width="200"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="minPackingCount"
              width="90"
            ></el-table-column>
            <el-table-column
              width="80"
              label="计量单位"
              prop="measuringUnit"
            ></el-table-column>
            <el-table-column label="物料代号" prop="materielCode" width="130">
              <template slot-scope="{ row }">
                {{ row.materielCode }}
              </template>
            </el-table-column>
            <el-table-column label="客户代号" prop="clientCode">
              <template slot-scope="{ row }">
                {{ row.clientCode }}
              </template>
            </el-table-column>
            <!-- v-if="infoData.bizType == 1" -->
            <el-table-column label="刻码" prop="engrave">
              <template slot-scope="{ row }">
                {{ row.engrave }}
              </template>
            </el-table-column>
            <el-table-column width="100" label="重量" prop="weight">
              <template slot-scope="{ row }">
                <el-input v-show="!row.isPack" v-model="row.weight"></el-input>
                <span v-show="row.isPack">{{ row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量单位" prop="weightUnit">
              <template slot-scope="{ row }">
                {{ row.weightUnit }}
              </template>
            </el-table-column>

            <el-table-column label="质检结果" prop="result" width="120">
              <template slot-scope="{ row }">
                <DictSelection
                  dictName="质检结果"
                  clearable
                  v-model="row.result"
                  v-if="!row.isPack"
                  @updateVal="changeWrapStatus($event, row)"
                />
                <span v-else>{{ qualityResults[row.result] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="质检状态" prop="status" width="120">
              <template slot-scope="{ row }">
                <span>{{ qualityStatus[row.status] }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="操作"
              width="80"
              fixed="right"
              v-if="taskDefinitionKey == 'qualityInspection'"
            >
              <template slot-scope="{ row }">
                <el-button
                  v-show="!row.isPack"
                  type="text"
                  @click="packMeta(row)"
                >
                  保存
                </el-button>
                <el-button v-show="row.isPack" type="text" @click="edit(row)">
                  编辑
                </el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </div>
      <!-- <div class="center mt20" style="text-align: center">
        <el-button type="primary" @click="handleSave" :loading="saveLoading"
          >保存</el-button
        >
        <el-button @click="$router.go(-1)">返回</el-button>
      </div> -->
      <!-- <WareHouseDailog
        ref="wareHouseDailogRef"
        @houseData="houseData"
      ></WareHouseDailog> -->
    </el-card>
  </div>
</template>

<script>
  // import { getInfo } from '@/api/stockManagement';
  import StatusStep from '@/components/StatusStep/common.vue';
  // import { fileSystemDownload } from '@/utils';
  import outin from '@/api/warehouseManagement/outin';
  import fileUpload from '@/components/upload/fileUpload';

  import {
    allCategoryLevel,
    getTreeByPid,
    getOutInBySourceBizNo,
    getOutInBySourceBizNoOrError,
    updateOutInRecord,
    updateMaterialById
  } from '@/api/classifyManage';

  import {
    materialType,
    warehousingType,
    useDict,
    useDictLabel,
    inputStatus,
    emergencyState,
    sceneState
  } from '@/utils/dict/index';
  import { auditStatus } from '@/utils/dict/common';
  // import { batchBarPrint } from '@/api/ledgerAssets/booksList';
  import { tableHeader } from './common';
  import { mapGetters, mapActions } from 'vuex';
  export default {
    components: { StatusStep, fileUpload },
    props: {
      businessId: {
        default: ''
      },
      type: {
        default: ''
      },
      taskDefinitionKey: {
        default: ''
      }
    },
    data() {
      return {
        qualityStatus: {
          0: '未检',
          1: '已检',
          2: '部分检'
        }, // 质检状态 0未检 1已检
        qualityResults: {
          0: '合格',
          1: '不合格',
          3: '让步接收'
        },
        qualityFile: '',
        saveLoading: false,
        metailList: [],
        dateTypes: 1,
        detailList: [],
        extInfo: {},
        codeList: [],
        auditStatus,
        infoData: {},
        warehousingMaterialList: [],
        tableData2: [],
        activeName: 'a',
        num: 1,
        openWindows: false, //打印弹窗
        barCodeConfig: [],
        stepsTitle: '已完成',
        stepsStatus: 'success',
        active: 0,

        // 条码类型枚举
        codeTypeObj: {
          生产设备: 'EQUIPMENT',
          舟皿: '',
          周转车: 'TURNOVER_CAR',
          模具: 'MODE',
          库位: 'STORE_LOCAL',
          混合料: 'MIX_MATER',
          混炼料: 'MIXING_MATER',
          破碎料: 'CRUSH_MATER',
          货架: 'GOODS_SHELF',
          返回料: 'RETURN_MATER',
          返工料: 'REWORK_MATER',
          备品备件: 'SPARE_PART',
          车削料: 'LATHE_MATER',
          风管料: 'WIND_PIPE_MATER',
          地面料: 'GROUND_MATER'
        }
      };
    },
    watch: {
      'infoData.verifyStatus': {
        immediate: true,
        handler(val) {
          if (val == 0) {
            this.active = 1;
            this.stepsTitle = '未审核';
            this.stepsStatus = 'wait';
          } else if (val == 1) {
            this.active = 2;
            this.stepsTitle = '审核中';
            this.stepsStatus = 'process';
          } else if (val == 2) {
            this.active = 2;
            this.stepsTitle = '审核通过';
            this.stepsStatus = 'success';
          } else if (val == 3) {
            this.active = 2;
            this.stepsTitle = '驳回';
            this.stepsStatus = 'error';
          }
        }
      },
      // 解决右侧悬浮操作栏不对称问题
      warehousingMaterialList: {
        handler() {
          this.$nextTick(() => {
            this.$refs.warehousingMaterialListTable.doLayout();
          });
        },
        deep: true
      },
      // 解决右侧悬浮操作栏不对称问题
      detailList: {
        handler() {
          this.$nextTick(() => {
            this.$refs.detailListTable.doLayout();
          });
        },
        deep: true
      },
      // 解决右侧悬浮操作栏不对称问题
      metailList: {
        handler() {
          this.$nextTick(() => {
            this.$refs.metailListTable.doLayout();
          });
        },
        deep: true
      }
    },
    computed: {
      ...mapGetters(['getDictValue']),
      curDateType() {
        if (this.materialCodeReqList) {
          return this.materialCodeReqList[0].manufactureTime
            ? 'manufactureTime'
            : 'procurementTime';
        }
      },
      tableHeader() {
        return tableHeader(this.infoData.assetType);
      },
      emergencyState() {
        return useDict(emergencyState)(this.infoData.emergencyState);
      }
      // 条码信息
      // materialCodeReqList() {
      //   return this.warehousingMaterialList.warehouseLedgerDetails;
      // }
    },
    created() {
      // this.requestDict('类型用途');
      this._getInfo();
    },
    methods: {
      // 选择质检结果改变质检状态
      changeWrapStatus(resultValue, row) {
        switch (resultValue) {
          case '':
            // 清空质检状态
            row.status = '0';
            break;
          default:
            // 默认已检质检状态
            row.status = '1';
            break;
        }
      },
      //包装结果
      packItem(val, row) {
        row.status = '1';
      },
      edit(data) {
        this.$set(data, 'isPack', false);
      },
      //质检物料提交
      async packMeta(data) {
        if (!data.result) {
          return this.$message.error('请选择质检结果！');
        }
        this.$set(data, 'isPack', true);
        // data.status = 1;
        // data.result = Number(data.result);
        await updateMaterialById(data);
        // this._getInfo();
        this.detailList.forEach((outItem) => {
          let arr = [];
          this.metailList.forEach((inneritem) => {
            if (inneritem.onlyCode == outItem.code) {
              arr.push(inneritem);
            }
          });
          console.log('arr-----------', arr);
          // 首先判断是未填/合格不合格
          let boolen = arr.every((item) => {
            return item.result == '' || item.result == undefined;
          });
          // 判断只要物料全部质检结果(未填)——>包装质检结果(未填) 状态(未检)
          if (boolen) {
            this.$set(outItem, 'result', '');
            this.$set(outItem, 'status', '0');
          } else {
            // 判断只要物料有一个质检结果(不合格)——>包装质检结果(不合格) 状态(已检)
            let boolen = arr.some((item) => {
              return item.result == '1';
            });
            if (boolen) {
              this.$set(outItem, 'result', '1');
              this.$set(outItem, 'status', '1');
            } else {
              // 判断只要物料有一个质检结果(让步接收)——>包装质检结果(让步接收) 状态(已检)
              let boolen = arr.some((item) => {
                return item.result == '3';
              });
              if (boolen) {
                // 让步接收 已检
                this.$set(outItem, 'result', '3');
                this.$set(outItem, 'status', '1');
              } else {
                // 判断只要物料有全部质检结果(合格)——>包装质检结果(合格) 状态(已检)
                let boolen = arr.every((item) => {
                  return item.result == '0';
                });
                if (boolen) {
                  // 合格 已检
                  this.$set(outItem, 'result', '0');
                  this.$set(outItem, 'status', '1');
                } else {
                  // 合格 部分检
                  this.$set(outItem, 'result', '0');
                  this.$set(outItem, 'status', '2');
                }
              }
            }
          }
          // this.$set(outItem, 'result', boolen ? '1' : '0');
        });
      },
      //质检提交
      async packCout(data) {
        if (!data.result) {
          return this.$message.error('请选择质检结果！');
        }
        data.status = 1;
        await updateOutInRecord(data);
        this._getInfo();
      },
      //获取质检状态
      getStatus() {
        return this.detailList.filter((item) => item.status == 1);
      },
      //获取回执附件
      getQualityFile() {
        return { qualityFile: this.qualityFile, id: this.infoData.id };
      },
      //包装保存
      async packSave(row, index) {
        console.log('===', row);
        console.log('row.minPackingCount', row.minPackingCount);
        console.log(' this.detailList.length', this.detailList.length);
        console.log(this.warehousingMaterialList);
        let packNo = 0;
        this.warehousingMaterialList.forEach((item) => {
          if (
            item.categoryCode == row.categoryCode &&
            item.batchNo == row.batchNo
          ) {
            if (this.warehousingMaterialList.length != 1) {
              packNo = this.warehousingMaterialList.length;
            } else {
              packNo = item.packingCount;
            }
          }
        });

        console.log('packNopackNopackNo', packNo);

        if (packNo != this.detailList.length) {
          //存当前没改之前包装数量
          let count = 0;

          for (const item of this.warehousingMaterialList) {
            console.log('item', item);
            if (item.categoryId == row.categoryId) {
              count = item.outInNum;
            }
          }
          console.log(111);
          //新增包装更新物料
          const arr = [];
          console.log('==================', row);
          // row.outInDetailRecordVOList.forEach((it) => {
          //   it.outInDetailRecordMaterialDetailVOList.forEach((item) => {
          //     arr.push({ ...item });
          //   });
          // });
          this.warehousingMaterialList.forEach((item) => {
            item.outInDetailRecordVOList.forEach((it) => {
              it.outInDetailRecordMaterialDetailVOList.forEach((item) => {
                arr.push({ ...item });
              });
            });
          });

          if (row.minPackingCount < Number(count)) {
            console.log(1);
            console.log('arr====arr', arr);
            console.log('rrrr', this.metailList.length);
            this.metailList = this.metaUpdate(arr, row);
          } else {
            console.log(2);
            this.metailList = this.metaAdd(arr, row);
          }

          this.$set(row, 'isPack', true);
          await updateOutInRecord(row);
          this.$message.success('修改成功');
          return;
        }
        this.$set(row, 'isPack', true);
        //更新包装明细数据，同步物料明细

        for (const i in this.metailList) {
          if (this.metailList[i].onlyCode == row.code) {
            this.metailList[i].clientCode = row.clientCode; //客户代号
            this.metailList[i].materielCode = row.materielCode; //物料代号
            this.metailList[i].result = row.result; //质检结果
            this.metailList[i].status = row.status; //质检状态
            this.metailList[i].weight = row.weight / row.minPackingCount; //重量
          }
        }
        //更新包装明细重量，更新物品重量
        const list = this.detailList;
        let sum = 0;
        for (let i = 0; i < list.length; i++) {
          sum += Number(list[i].weight);
        }
        await updateOutInRecord(row);
        this.$message.success('修改成功');

        this.warehousingMaterialList.forEach((item) => {
          if (
            item.categoryCode == row.categoryCode &&
            item.categoryCode == row.categoryCode
          ) {
            item.weight = sum;
          }
        });
        console.log(this.warehousingMaterialList);
      },
      //更新物料
      metaUpdate(arr, row) {
        const obj = {
          assetCode: row.categoryCode,
          assetName: row.name,
          manualBatchNo: row.manualBatchNo,
          batchNo: row.batchNo,
          clientCode: row.clientCode,
          createTime: row.createTime,
          engrave: '',
          id: '',
          materielCode: row.materielCode,
          measuringUnit: row.measuringUnit,
          minPackingCount: 1,
          no: '',
          onlyCode: row.code,
          outInDetailRecordId: '',
          pathName: row.position,
          result: row.result,
          status: row.status,
          weight: row.weight / row.minPackingCount,
          weightUnit: row.weightUtil,
          counts: row.minPackingCount
        };
        // 生成 no 字段的值
        let newArr = [];
        for (let i = 1; i <= obj.counts; i++) {
          newArr.push({
            ...obj,
            no: obj.onlyCode + i.toString().padStart(4, '0')
          });
        }
        console.log('新增', newArr);
        console.log(arr);

        let data = this.metailList.concat(newArr);
        const uniqueData = data.reduce((acc, curr) => {
          acc[curr.no] = curr;
          return acc;
        }, {});

        const result = Object.values(uniqueData);
        return result;
      },
      //包装编辑
      packEdit(row, index) {
        console.log('row', row);
        console.log('this.detailList', this.detailList);
        this.$set(row, 'isPack', false);
        this.$set(
          row,
          'result',
          row.result != null ? row.result.toString() : ''
        );
        this.$set(
          row,
          'status',
          row.status != null ? row.status.toString() : ''
        );
      },
      houseData(argum, idx) {
        this.$set(this.warehousingMaterialList[idx], 'houseList', argum);
        argum.forEach((item) => {
          item.position = `${item.warehouseName}-${item.areaName}-${item.shelfCode}-${item.cargoSpaceCode}`;
          item.pathIds = `${item.warehouseId},${item.areaId},${item.shelfId},${item.cargoSpaceId}`;
        });
        console.log(argum);
        this.$set(
          this.warehousingMaterialList[idx],
          'position',
          argum[0].position
        );
        console.log(
          'this.warehousingMaterialList',
          this.warehousingMaterialList
        );
      },
      // 仓库编辑
      handleWareHouse(row, idx) {
        const a = row.pathIds.split(',');
        const b = row.position.split('-');
        row.houseList = [
          {
            warehouseId: a[0],
            warehouseNam: b[0] + '-' + b[1],
            areaId: a[1],
            areaName: b[2],
            shelfId: a[2],
            shelfCode: b[3],
            cargoSpaceId: a[3],
            cargoSpaceCode: b[4],
            num: row.packingCount
          }
        ];
        this.$refs.wareHouseDailogRef.open(
          { ...row, outInNum: row.packingCount, warehouseId: a[0] },
          idx
        );
      },
      async handleSave() {
        this.saveLoading = true;

        if (this.detailList.length != 0) {
          let a = this.infoData;
          let array1 = this.warehousingMaterialList;
          let array2 = this.detailList.map((item) => {
            return { ...item, materialDetails: this.metailList };
          });
          // 遍历数组1
          array1.forEach((item1) => {
            item1.arr = [];
            item1.outInDetailRecordUpdatePOList = [];
            // 遍历数组2
            array2.forEach((item2) => {
              if (
                item1.id == item2.outInDetailId &&
                item1.batchNo == item2.batchNo &&
                item1.categoryCode == item2.categoryCode
              ) {
                // 判断id、batchNo、categoryId是否相等
                // 将数组2对象添加到数组1对象的outInDetailRecordVOList中
                item1.arr.push(item2);
              } else {
                console.log(item2);
                item1.outInDetailRecordUpdatePOList.push({ ...item2 });
              }
            });
          });
          array1.forEach((ele) => {
            if (ele.outInDetailRecordUpdatePOList.length == ele.arr.length) {
              delete ele.arr;
            } else {
              ele.outInDetailRecordUpdatePOList = ele.arr;
              delete ele.arr;
            }
          });
          array1.forEach((e) => {
            if (e.hasOwnProperty('houseList')) {
              e.houseList.forEach((item) => {
                e.position = `${item.warehouseName}-${item.areaName}-${item.shelfCode}-${item.cargoSpaceCode}`;
                e.pathIds = `${item.warehouseId},${item.areaId},${item.shelfId},${item.cargoSpaceId}`;
              });
            }
          });
          delete array1.houseList;
          a.outInDetailUpdatePOList = array1;
          a.extInfo = this.extInfo;

          const obj = this.formatUpdate(a);
          console.log('sss===》', obj);

          try {
            const data = await outin.update(obj);
            if (data.code == 0) {
              this.$message.success('修改成功！');
              // this.$router.push('/warehouseManagement/stockManagement');
            }
          } catch (error) {
            this.saveLoading = false;
          }
        } else {
          this.$message.warning('包装明细为空！');
        }
        this.saveLoading = false;
      },
      formatUpdate(a) {
        delete a.outInDetailVOList;
        console.log(a);
        // 删除 outInDetailVOList 数组对象里面的 outInDetailRecordVOList 数组对象里面的 outInDetailRecordMaterialDetailVOList
        a.outInDetailUpdatePOList = a.outInDetailUpdatePOList.map((item) => {
          const newItem = { ...item };
          delete newItem.outInDetailRecordVOList;
          return newItem;
        });

        const newData = {
          ...a,
          outInDetailUpdatePOList: a.outInDetailUpdatePOList.map((detail) => {
            const { outInDetailRecordMaterialDetailVOList, ...rest } = detail;
            return {
              ...rest,
              outInDetailRecordUpdatePOList:
                rest.outInDetailRecordUpdatePOList.map((record) => {
                  const {
                    outInDetailRecordMaterialDetailVOList,
                    ...recordRest
                  } = record;
                  return { ...recordRest };
                })
            };
          })
        };

        // 对原始数据进行深拷贝，以避免修改原始数据
        const arr = JSON.parse(JSON.stringify(newData));

        // 遍历 outInDetailUpdatePOList 数组
        arr.outInDetailUpdatePOList.forEach((detail) => {
          // 遍历 outInDetailRecordUpdatePOList 数组
          detail.outInDetailRecordUpdatePOList.forEach((record) => {
            // 筛选出与 code 相等的 materialDetails 项
            const matchedDetails = record.materialDetails.filter(
              (item) => item.onlyCode === record.code
            );
            // 将匹配项放入 materialDetails 数组中
            record.materialDetails = matchedDetails;
          });
        });

        return arr;
      },
      packNum(row, value) {
        const total = {
          packingCount: Number(
            row.minPackingCount > 0 ? row.minPackingCount : 0
          ),
          outInNum: Number(row.outInNum > 0 ? row.outInNum : 0)
        };
        if (row.measuringUnit == row.weightUnit) {
          row.weight = Number(
            this.$math.format(
              total.packingCount * 1 * total.outInNum.toFixed(2),
              14
            )
          );
        } else {
          const totals = Number(
            this.$math.format(total.packingCount * total.outInNum, 14)
          );
          row.weight = Number(
            this.$math.format(
              totals * (row.netWeight > 0 ? row.netWeight.toFixed(2) : 0),
              14
            )
          );
        }
        return (row.outInNum = value.replace(/^(0+)|[^\d]+/g, ''));
      },
      listEdit(row) {
        this.$set(row, 'isSave', false);
        //包装
        const list = this.detailList;
        for (let i = 0; i < list.length; i++) {
          if (list[i].categoryCode === row.categoryCode) {
            // 删除满足条件的对象
            this.detailList.splice(i, 1);
            // 因为删除了一个对象，需要将索引减1
            i--;
          }
        }
        //物料
        const lists = this.metailList;
        for (let i = 0; i < lists.length; i++) {
          if (lists[i].assetCode === row.categoryCode) {
            // 删除满足条件的对象
            this.metailList.splice(i, 1);
            // 因为删除了一个对象，需要将索引减1
            i--;
          }
        }
      },
      listSave(row, index) {
        console.log(row);
        const fileds = [
          // `warehousingMaterialList.${index}.batchNo`,
          `warehousingMaterialList.${index}.position`
        ];
        console.log('==1', this.infoData.bizType);
        if (this.infoData.bizType != 5) {
          fileds.push(
            ...[
              // `warehousingMaterialList.${index}.packingCount`,
              // `warehousingMaterialList.${index}.minPackingCount`
            ]
          );
        } else if (
          this.warehousingMaterialList.some(
            (i) => !i.outInDetailRecordVOList?.length
          )
        ) {
          this.$message.error('请选择资产编号！');
          return;
        }
        Promise.all(
          fileds.map(
            (item) =>
              new Promise(async (resolve, rej) => {
                this.$refs.warehousingMaterialListRef.validateField(
                  item,
                  (err) => {
                    if (err) {
                      rej(err);
                    } else {
                      resolve();
                    }
                  }
                );
              })
          )
        )
          .then((res) => {
            this.$set(row, 'isSave', true);
            if (this.infoData.bizType != 5) {
              this.createMaterialCode(row);
            } else {
              // 退还
              // this.createMaterialCodeReturn(row);
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message.error('请填入必填项！');
          });
      },
      async createMaterialCode(row) {
        console.log('==--', row);
        const {
          packingCount,
          minPackingCount,
          weight,
          outInDetailRecordVOList
        } = row;
        // console.log(row);
        // if (row.houseList) {
        //   row.houseList.forEach((item) => {
        //     position = `${item.warehouseName}-${item.areaName}-${item.shelfCode}-${item.cargoSpaceCode}`;
        //     pathIds = `${item.warehouseId},${item.areaId},${item.shelfId},${item.cargoSpaceId}`;
        //   });
        // }
        const codes = outInDetailRecordVOList[0].code;
        const index = outInDetailRecordVOList[0].code.indexOf('636');
        const result = codes.slice(-3);
        const dataArray = []; // 物品列表
        for (let i = 0; i < packingCount; i++) {
          const newData = { ...row };
          if (outInDetailRecordVOList.length != packingCount) {
            newData.minPackingCount = row.minPackingCount;
            newData.packingCount = 1;
            newData.weight = weight / packingCount;
            newData.weightUtil = row.weightUnit;
            newData.outInDetailId = row.id;
          } else {
            newData.minPackingCount = row.minPackingCount;
            newData.weight = weight / packingCount;
            newData.packingCount = row.packingCount / packingCount;
            newData.weightUtil = row.weightUnit;
            newData.outInDetailId = row.id;
          }
          dataArray.push(newData);
        }
        for (let j = 0; j < dataArray.length; j++) {
          const num = Number(result);
          const nums = num + j;
          const str = nums.toString().padStart(result.length, '0');
          dataArray[j].code =
            dataArray[j].categoryCode + dataArray[j].batchNo + str;
          dataArray[j].isPack = true;
        }
        const list = JSON.parse(localStorage.getItem('exitList'));
        console.log('list', '-------------');
        dataArray.forEach((ele, index) => {
          if (index < list.length) {
            if (ele.code === list[index].code) {
              ele.id = list[index].id;
            } else {
              ele.isPack = false;
              ele.id = ''; // 当 code 不匹配时，将 id 设为空字符串
            }
          } else {
            ele.isPack = false;
            ele.id = ''; // 如果 index 超出了 list 的范围，将 id 设为空字符串
          }
        });
        console.log('dataArray----', dataArray);
        this.detailList = this.pacKUpdate(dataArray);
        this.metailList = this.metailUpdate(dataArray);
        // this.metailList = this.metaAdd(dataArray);
        console.log('====>>>>>1', dataArray);
      },
      //包装修改
      pacKUpdate(arr) {
        for (const it of arr) {
          for (const ti of it.outInDetailRecordVOList) {
            if (ti.id == it.id) {
              it.materielCode = ti.materielCode;
              it.clientCode = ti.clientCode;
              it.result = ti.result;
              it.status = ti.status;
            }
          }
        }
        return arr;
      },
      //物料新增
      metaAdd(arr) {
        const list = arr;
        let resultArray = [];
        list.forEach((item) => {
          for (let i = 1; i <= Number(item.minPackingCount); i++) {
            resultArray.push({
              onlyCode: item.code,
              no: item.code + i.toString().padStart(4, '0'),
              assetCode: item.categoryCode,
              assetName: item.name,
              manualBatchNo: item.manualBatchNo,
              batchNo: item.batchNo,
              minPackingCount: 1,
              measuringUnit: item.measuringUnit,
              materielCode: item.materielCode,
              clientCode: item.clientCode,
              weight: item.weight / Number(item.minPackingCount),
              weightUnit: item.weightUnit,
              engrave: item.engrave,
              result: item.result,
              status: item.status
            });
          }
        });
        return resultArray;
        // console.log('物料', resultArray);
      },
      // 物料明细保存
      materialBtn(row) {
        console.log(row);
        console.log(this.resultArray);
        console.log(this.materialCodeReqList);
        // true保存 false编辑
        if (!row.isPack) {
          row.isPack = true;
          // 物料维度修改质检改变包装维度质检（结果和状态）
          this.materialCodeReqList.forEach((outItem) => {
            let arr = [];
            this.resultArray.forEach((inneritem) => {
              if (inneritem.onlyCode == outItem.onlyCode) {
                arr.push(inneritem);
              }
            });
            console.log(arr);
            // 首先判断是未填/合格不合格
            let boolen = arr.every((item) => {
              return item.result === '' || item.result === undefined;
            });
            // 判断只要物料全部质检结果(未填)——>包装质检结果(未填) 状态(未检)
            if (boolen) {
              this.$set(outItem, 'result', '');
              this.$set(outItem, 'status', '0');
            } else {
              // 判断只要物料有一个质检结果(不合格)——>包装质检结果(不合格) 状态(已检)
              let boolen = arr.some((item) => {
                return item.result === '1';
              });
              if (boolen) {
                this.$set(outItem, 'result', '1');
                this.$set(outItem, 'status', '1');
              } else {
                // 判断只要物料有一个质检结果(让步接收)——>包装质检结果(让步接收) 状态(已检)
                let boolen = arr.some((item) => {
                  return item.result === '3';
                });
                if (boolen) {
                  // 让步接收 已检
                  this.$set(outItem, 'result', '3');
                  this.$set(outItem, 'status', '1');
                } else {
                  // 判断只要物料有全部质检结果(合格)——>包装质检结果(合格) 状态(已检)
                  let boolen = arr.every((item) => {
                    return item.result === '0';
                  });
                  if (boolen) {
                    // 合格 已检
                    this.$set(outItem, 'result', '0');
                    this.$set(outItem, 'status', '1');
                  } else {
                    // 合格 部分检
                    this.$set(outItem, 'result', '0');
                    this.$set(outItem, 'status', '2');
                  }
                }
              }
            }
            // this.$set(outItem, 'result', boolen ? '1' : '0');
          });
          // 物料维度修改重量改变包装维度重量
          let onlyCode = row.onlyCode;
          this.materialCodeReqList.forEach((item) => {
            if (item.onlyCode === onlyCode) {
              let arr = [];
              for (const key in this.resultArray) {
                if (this.resultArray[key].onlyCode == item.onlyCode) {
                  arr.push({ ...this.resultArray[key] });
                }
              }
              const count = arr.reduce(
                (acc, curr) =>
                  Number(this.$math.format(+acc + +curr.weight, 14)),
                0
              );
              this.$set(item, 'weight', count);
            }
          });
          // 包装维度修改重量改变产品信息
          this.isWeight = false;
          // 批量修改包装明细
          this.bulkEditingWrap();
          this.$nextTick(() => {
            this.isWeight = true;
          });
        } else {
          row.isPack = false;
        }
      },
      //物料修改
      metailUpdate(arr) {
        console.log('---', arr);

        const extractedArray = [];

        arr.forEach((item) => {
          item.outInDetailRecordVOList.forEach((record) => {
            extractedArray.push(
              ...record.outInDetailRecordMaterialDetailVOList
            );
          });
        });
        // 用于存储已经遇到的ID
        let idMap = {};
        // 用于存储结果的数组
        let uniqueArray = [];
        // 遍历原始数据
        for (let i = 0; i < extractedArray.length; i++) {
          let currentItem = extractedArray[i];
          // 检查当前ID是否已经在map中存在
          if (!idMap[currentItem.id]) {
            // 如果ID不存在，将当前ID添加到map中，并将当前数据添加到结果数组中
            idMap[currentItem.id] = true;
            uniqueArray.push(currentItem);
          }
        }
        return uniqueArray;
      },
      //计算金额
      calcSumTotal(PackingCount, outInNum, univalence) {
        //最小包装单元,包装数量,单价
        const total = {
          PackingCount: Number(PackingCount),
          outInNum: Number(outInNum),
          univalence: Number(univalence == undefined ? 0 : univalence)
        };
        return total.PackingCount * total.outInNum * total.univalence;
      },
      ...mapActions('dict', ['requestDict']),
      getAuditStatus: useDictLabel(auditStatus),
      getMaterialType: useDictLabel(materialType),
      getInputStatus: useDictLabel(inputStatus),
      getSceneState: useDictLabel(sceneState),
      handleRowUnit(row) {
        return row.measuringUnit;
        // if (this.extInfo.assetType == 1) {
        //   console.log(row);
        //   return row.weightUnit;
        // } else if (this.extInfo.assetType == 4) {
        //   return row.measuringUnit;
        // } else {
        //   return row.measuringUnit;
        // }
      },
      handleAssetType(r) {
        const code = this.codeList.find((item) => item.dictCode == r);
        return code?.dictValue;
      },
      rowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1) {
          return {
            display: 'none',
            background: '#EEEEEE',
            border: 'none'
          };
        }

        return { background: '#EEEEEE', border: 'none' };
      },
      // 初始化数据
      async _getInfo() {
        const res =
          this.type == 'sourceBizNo'
            ? await getOutInBySourceBizNo(this.businessId)
            : await outin.getById(this.businessId);
        console.log('===', res);
        if (res) {
          this.infoData = res;
          this.extInfo = res.extInfo;
          // 获取物品维度列表
          this.warehousingMaterialList = res.outInDetailVOList.map((item) => {
            return { ...item, isSave: true };
          });
          const arr = [];
          for (const key in this.warehousingMaterialList) {
            for (const k in this.warehousingMaterialList[key]
              .outInDetailRecordVOList) {
              arr.push({
                ...this.warehousingMaterialList[key].outInDetailRecordVOList[k],
                weightUnit: this.warehousingMaterialList[key].weightUnit
              });
            }
          }
          this.exitList = arr;
          localStorage.setItem('exitList', JSON.stringify(arr));
          this.dateTypes = arr[0].dateType;
          // 获取包装维度列表
          this.detailList = arr.map((item) => {
            return { ...item, isPack: true };
          });
          let iArr = [];
          arr.forEach((item) => {
            item.outInDetailRecordMaterialDetailVOList.forEach((ele) => {
              iArr.push({ ...ele });
            });
          });
          this.metailList = iArr.map((item) => {
            return {
              ...item,
              isPack: true,
              result:
                item.result == 0
                  ? '0'
                  : item.result != null
                  ? item.result.toString()
                  : ''
            };
          });
        }
        // const { data } = await getTreeByPid(0);
        const { data } = await allCategoryLevel();

        this.codeList = data.map((item) => {
          return { dictCode: item.id, dictValue: item.name };
        });
      },
      calcSum(a, b, c, row) {
        if (
          (Number.isNaN(+a) && a !== '') ||
          (Number.isNaN(+b) && b !== '') ||
          (Number.isNaN(+c) && c !== '')
        ) {
          return '';
        }

        return a * b * c + { yuan: '元', wanyuan: '万元' }[row.univalenceUnit];
      },
      contentImageDownload(item) {
        fileSystemDownload(item);
      },
      selectActive(num) {
        this.num = num;
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .page-title {
    border-bottom: none;
  }
  ::v-deep .page-title-div {
    width: 100%;
  }
  .stepsStatus {
    width: 40%;
    margin: 0 auto;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .p20 {
    padding: 20px;
  }
  .flex {
    display: flex;
  }
  .title {
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    span {
      font-size: 16px;
    }
    .col {
      padding-left: 40px;
      font-size: 14px;
      color: #aaaaaa;
    }
  }
  .degree {
    margin-right: 10px;
    padding: 0px 15px;
    color: #fff;
    font-size: 13px;
    line-height: 23px;
    border-radius: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      width: 5px;
      height: 5px;
      border-radius: 100%;
      margin-right: 6px;
      background-color: #fff;
    }
  }
  .red {
    background-color: rgb(163, 0, 20);
  }
  .blue {
    background-color: #1989fa;
  }
  .createdInfo {
    justify-content: space-around;
    margin-top: 10px;
    font-size: 14px;
    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }
  .mt40 {
    margin-top: 40px;
  }

  .custSteps {
    margin-top: 20px;
    margin-left: 70px;
    .box {
      width: 158px;
      border: 1px solid #ccc;
      padding: 10px;
      flex-direction: row;
      flex-wrap: wrap;
      // justify-content: space-between;
      font-size: 12px;
      color: #9e9e9e;
      .x {
        width: 20px;
        height: 15px;
        margin-right: 5px;
      }
      .q {
        background-color: #d0e4d5;
      }
      .b {
        background-color: #1989fa;
      }
      .g {
        background-color: #157a2c;
      }
      .r {
        background-color: #a30014;
      }
      .a {
        align-items: center;
        margin-bottom: 10px;
      }
      .mr10 {
        margin-right: 10px;
      }
      .mb0 {
        margin-bottom: 0;
      }
    }
    .stepsInfo {
      // flex: 1;
      width: 483px;
    }
  }
  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    overflow: hidden;
  }
  .executor {
    font-size: 14px;
    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }
  .result {
    justify-content: space-around;
  }
  .mr20 {
    margin-right: 20px;
  }
  .details {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .customSteps {
    margin-top: 40px;
    font-size: 14px;
    margin-left: 80px;
    .time {
      font-size: 12px;
      color: #6e6e6e;
      margin-right: 20px;
      position: relative;
      &::after {
        content: '';
        width: 1px;
        height: 100%;
        background-color: #157a2c;
        position: absolute;
        right: -26px;
      }
    }
    .flex:last-child {
      .time {
        &::after {
          display: none;
        }
      }
    }
    .round {
      margin-right: 20px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #157a2c;
      position: relative;
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background-color: #fff;
        border-radius: 100%;
        transform: translate(-2px, -2px);
      }
    }
    .text {
      .info {
        margin-top: 10px;
        width: 955px;
        background-color: #f0f3f3;
        overflow: hidden;
        padding: 10px;
        margin-bottom: 10px;
      }
    }
  }
  .switch_left li {
    border-right: 1px solid rgba(222, 222, 222, 1);
    border-left: 1px solid rgba(222, 222, 222, 1);
  }
</style>