web/src/components/charge/CheckoutDetail.vue

<template>
  <Mask :top="50" :height="650" :width="900" :is-show="show">
    <CloseBtn @click="show = false"></CloseBtn>
    <el-card>
      <template #header>
        <div class="header">追溯码采集</div>
      </template>
      <div class="detail">
        <el-input placeholder="请输入追溯码" v-model="inputIdCode" clearable @keydown.enter="openAssociationIdCode()">
          <template #prefix>
            <el-icon>
              <Monitor/>
            </el-icon>
          </template>
        </el-input>
        <div class="list">
          <table class="simple-table">
            <thead>
            <tr>
              <th>发药项目</th>
              <th>产品标识码</th>
              <th>发药数量</th>
              <th>已采/应采</th>
              <th>追溯码</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list" :key="index">
              <td>{{ item.name }}</td>
              <td>
                <IdCodeListShow :idCodeList="item.idCode" v-if="item.idCode&&item.idCode.length>0"
                                @addTraceabilityCode="addTraceAbilityCodeHandler"/>
                <div v-else>未关联</div>
              </td>
              <td>{{ item.selectedNum }}{{ item.selectedUnit }}</td>
              <td>{{ item.traceAbilityCodeList ? item.traceAbilityCodeList.length : 0 }}/{{ item.shouldNumber }}</td>
              <td>
                <TraceabilityCodeAdd :item="item" @addTraceabilityCode="addTraceAbilityCodeHandler"/>
              </td>
            </tr>
            </tbody>
          </table>

        </div>

      </div>
      <template #footer>
        <div class="bottom-btn">
          <el-button @click="saveRetail()" type="primary">确定</el-button>
          <el-button @click="show = false">关闭</el-button>
        </div>
      </template>
    </el-card>
    <AssociationIdCode
        ref="associationIdCodeRef"
        @addIdCode="cleanInputIdCode"
        @addTraceabilityCode="addTraceAbilityCodeHandler"></AssociationIdCode>
  </Mask>
</template>
<script setup lang="ts">
import Mask from "@/components/Mask.vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {nextTick, ref} from "vue";
import IdCodeListShow from "@/components/charge/IdCodeListShow.vue";
import AssociationIdCode from "@/components/charge/AssociationIdCode.vue";
import TraceabilityCodeAdd from "@/components/charge/TraceabilityCodeAdd.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Monitor} from '@element-plus/icons-vue'
import {post} from "@/utils/request.ts";


const show = ref(false)
const list = ref()
const orderInfo = ref()
const init = (data: any) => {
  list.value = data
  console.log(list)
  show.value = true
}
const close = () => {
  show.value = false
}
defineExpose({init, close})
const emit = defineEmits(['confirm'])
const saveRetail = () => {
  if (!checkTraceCode()) {
    ElMessageBox.confirm(
        `追溯码采集未完成是否继续？`,
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
      emit('confirm')
    })
    return
  }
  emit('confirm')
}
const checkTraceCode = () => {
  for (let i = 0; i < list.value.length; i++) {
    const item = list.value[i];
    if (!item.traceAbilityCodeList || item.shouldNumber !== item.traceAbilityCodeList.length) {
      return false;
    }
  }
  return true;
}
const inputIdCode = ref()
const associationIdCodeRef = ref()
const openAssociationIdCode = () => {
  if(!inputIdCode.value || inputIdCode.value.length <20){
    ElMessage({
      message: '追溯码长度不足20位',
      type: 'info',
    })
    return
  }

  if (addTraceAbilityCode()) {
    return
  }
  nextTick(() => {
    associationIdCodeRef.value.init(inputIdCode.value, list.value)
  })
}
const addTraceAbilityCode = () => {
  for (let i = 0; i < list.value.length; i++) {
    let item = list.value[i];
    let idCode = inputIdCode.value.slice(0, 7);
    if (!item.idCode) break
    if (item.idCode.includes(idCode)) {
      addTraceabilityCodeDo(item, inputIdCode.value);
      return true
    }
  }
  return false

}

const addTraceabilityCodeDo = (item: any, inputStr: any) => {
  if (!item.traceAbilityCodeList) {
    item.traceAbilityCodeList = []
  }
  let traceAbilityCodeListList = item.traceAbilityCodeList.length
  if(!inputStr || inputStr.length <20){
    ElMessage({
      message: '追溯码长度不足20位',
      type: 'info',
    })
    return
  }

  if (traceAbilityCodeListList == item.shouldNumber) {
    ElMessage({
      message: '采集数量已满',
      type: 'warning',
    })
    return
  }
  const index = item.traceAbilityCodeList.findIndex((codeObj: any) => codeObj.code === inputStr);
  if (index != -1) {
    ElMessage({
      message: '该追溯码已采集',
      type: 'warning',
    })
    return
  }
  item.traceAbilityCodeList.push(inputStr)
  cleanInputIdCode()
}


const cleanInputIdCode = () => {
  inputIdCode.value = ''
}
const addTraceAbilityCodeHandler = (item: any, code: any) => {
  addTraceabilityCodeDo(item, code)

}

</script>
<style scoped lang="scss">
.header {
  font-size: 18px;
  font-weight: bold;
}

.detail {
  .list {
    height: 400px;
  }
}
</style>