web/src/components/charge/AssociationIdCode.vue

<template>
  <Mask :height="560" :width="818" :is-show="show" @close="close" :show-footer="true" title="关联追溯码">
    <div class="panel">
      <div class="title">
        <div class="title-content">
          请勾选该追溯码关联的发药项目商品
        </div>
        <div class="code">
          <span class="before-code">
            {{ traceabilityCode.slice(0, 7) }}
          </span>
          <span class="after-code">
            {{ traceabilityCode.slice(7, traceabilityCode.length) }}
          </span>
        </div>
      </div>
      <div style="padding: 0 24px;flex: 1; min-height: 0;">
        <div class="list">
          <el-table :data="tableData" :header-cell-style="{backgroundColor: '#F1F5FB'}">
            <el-table-column label="选择" width="60">
             <template #default="scope">
              <input class="blue-radio" type="radio" :value="scope.row.id" v-model="selected" @click="closeModal"/>
            </template>
            </el-table-column>
            <el-table-column prop="name" label="发药项目" show-overflow-tooltip/>
            <el-table-column prop="idCode" label="产品标识码" width="140" show-overflow-tooltip>
            <template #default="scope">
              <IdCodeListShow :idCodeList="scope.row.idCode" v-if="scope.row.idCode && scope.row.idCode.length > 0"/>
              <div v-else>未关联</div>
            </template>
            </el-table-column>
            <el-table-column label="系统处理" width="160" show-overflow-tooltip>
              <template #default="scope">
                <div v-if="selected === scope.row.id">
                  关联产品标识码，采集追溯码自动识别商品
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="bottom">
        <div class="default-btn" @click="close" type="primary">关闭</div>
        <div class="default-btn" @click="addIdCode" type="primary" style="margin-left: 24px">确定</div>
      </div>
    </template>
  </Mask>
</template>
<script setup lang="ts">

import Mask from "@/components/common/Mask.vue";
import {ref} from "vue"
import IdCodeListShow from "./IdCodeListShow.vue";
import {post} from "@/utils/request.ts";
import {API} from "@/assets/config/API.ts";

interface TableItem {
  id: string;
  name: string;
  idCode?: string[] | undefined; // 可选属性，默认为 undefined
  gatherNumber?: number;
  retailNumber?: number;
  packagingUnit?: string;
  minPackagingUnit?: string;
  selectedUnit?: string;
  minPackagingNumber?: number;
  traceAbilityCodeList?: { code: string; number: number }[];
}


const show = ref(false);
const traceabilityCode = ref("");
const tableData = ref<TableItem[]>([]);
const init = (newIdCode: any, newTableDate: any) => {
  traceabilityCode.value = newIdCode;
  tableData.value = newTableDate;
  show.value = true;
}
const selected = ref()
defineExpose({init})
const addIdCode = () => {
  if (traceabilityCode.value == "") {
    return;
  }
  let idCode = traceabilityCode.value.slice(0, 7);
  post(API.Goods.Base.AddIdCode, {goodsId: selected.value, idCode: idCode}).then((res: any) => {
    for (let subItem of tableData.value) {
      if (subItem.id === selected.value) {
        if (subItem.idCode == null) {
          subItem.idCode = [];
        }
        subItem.idCode?.push(idCode);
        break
      }
      close()
    }
  })
  const selectedItem = tableData.value.find((item: any) => item.id === selected.value);
  if (!selectedItem) {
    return
  }
  addTraceabilityCodeDo(selectedItem)
}

const emit = defineEmits(["addIdCode", "addTraceabilityCode"])
const addTraceabilityCodeDo = (item: any) => {
  emit("addTraceabilityCode", item, traceabilityCode.value)
}
const showRadio = ref<any>(false)
const closeModal = () => {
  showRadio.value = false
  selected.value = null

}
const close = () => {
  show.value = false
  closeModal()
}
</script>
<style scoped lang="scss">
.panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    width: 100%;
    height: 126px;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #F9FAFC;
    padding: 24px;
    margin-bottom: 24px;

    .title-content {
      font-weight: 500;
      font-size: 20px;
      color: #666666;
      font-style: normal;
    }

    .code {
      width: 100%;
      flex: 1;
      min-height: 0;
      font-weight: 800;
      font-size: 30px;
      color: #333333;
      font-style: normal;
      display: flex;
      justify-content: center;
      .before-code {
        color: #999999;
      }
      .after-code {
        min-width: 0;
        margin-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

}

.list {
  height: 100%;
  border-radius: 8px 8px 0 0;
  width: 100%;
  border: 1px solid #EAEAEC;
  border-bottom: none;

  .table {

    th {
      background: none !important;
    }

    .table-title {
      width: 100%;
      height: 52px;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      padding: 0 25px;

      th {
        text-align: left;

        &:first-child {
          padding-left: 25px;
          width: 122px;
        }

        &:nth-child(2) {
          width: 215px;
        }

        &:nth-child(3) {
          width: 140px;
        }

        &:last-child {
          padding-right: 25px;
        }
      }
    }

    .table-body {
      height: 52px;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      font-style: normal;

      tr {
        height: 52px;
        font-size: 14px;
        color: #333333;

        td {
          height: 52px;

          &:first-child {
            width: 132px;
            padding-left: 35px;
          }

          &:last-child {
            padding-right: 25px;
          }
        }
      }

    }
  }
}

table, tbody, td {
  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
}

table {
  border: none;
}

.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}
</style>