his/openhis-ui-vue3/src/components/OpenHis/TraceNoDialog/index.vue

<template>
  <el-dialog
    title="药品追溯码"
    v-model="props.openDialog"
    width="842"
    append-to-body
    destroy-on-close
    :draggable="true"
    @close="cancel"
    @opened="
      () => {
        traceNoTempRef.focus();
      }
    "
  >
    <div>
      <div style="font-size: 16px">
        <div style="margin-bottom: 15px">药品名称： {{ props.ypName }}</div>
        扫描追溯码
        <el-input
          ref="traceNoTempRef"
          type="textarea"
          :rows="1"
          v-model="traceNoTemp"
          style="width: 180px; margin-right: 20px"
          @input="throttledGetList(traceNoTemp)"
        />
        输入追溯码
        <el-input
          v-model="traceNoInput"
          style="width: 180px; margin-right: 20px"
          @keyup.enter="handelTraceNo(traceNoInput)"
        />
        <el-button type="primary" plain icon="CircleClose" @click="handleReturn"> 撤回 </el-button>
        <el-button type="danger" plain icon="CircleClose" @click="handleClear"> 清除 </el-button>
      </div>
      <!-- <el-input
          ref="inputRef"
          v-model="traceNo"
          type="textarea"
          :rows="15"
          disabled
          @input="throttledGetList"
          style="width: 100%; margin-top: 10px; margin-right: 20px"
        /> -->
      <div
        style="
          background: #f5f7fa;
          margin-top: 10px;
          padding: 10px;
          width: 780px;
          height: 350px;
          border: solid 1px #ebeef5;
          overflow-y: auto;
        "
      >
        <div style="display: flex; flex-wrap: wrap; gap: 8px">
          <div
            v-for="(item, index) in traceNoList"
            :key="item + index"
            style="
              display: inline-flex;
              align-items: center;
              background: white;
              padding: 4px 8px 4px 12px;
              border-radius: 12px;
            "
          >
            <span style="margin-right: 6px">
              [{{ index + 1 }}]
              <template v-if="index < 9">&nbsp;</template>
              <template v-else></template>
              {{ item }}
            </span>
            <div
              @click="removeTraceNo(index)"
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                width: 16px;
                height: 16px;
                background: #f56c6c;
                border-radius: 50%;
                cursor: pointer;
              "
            >
              <el-icon size="10" color="white">
                <Close />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      <div>
        追溯码：{{ existenceTraceNoList[rowData ? rowData.itemId : 0] }}
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {watch} from 'vue';
import {searchTraceNo} from '@/api/public';
import {debounce} from 'lodash-es';

const props = defineProps({
  openDialog: {
    type: Boolean,
    default: false,
  },
  ypName: {
    type: String,
    default: '',
  },
  rowData: {
    type: Object,
    default: () => {},
  },
});
const openTraceNo = ref(false);
const traceNo = ref('');
const traceNoList = ref([]);
const existenceTraceNoList = ref([]);
const traceNoTemp = ref('');
const traceNoInput = ref('');
const traceNoTempRef = ref();
const emit = defineEmits(['submit', 'cancel']);

watch(
  () => props.rowData,
  async (newRowData) => {
    if (newRowData && Object.keys(newRowData).length > 0) {
      const { itemType, itemId, locationId, lotNumber } = newRowData;

      try {
        const response = await searchTraceNo({
          itemType,
          itemId,
          locationId,
          lotNumber,
        });

        // 处理返回数据，例如更新 traceNoList
        existenceTraceNoList.value = response.data || [];
      } catch (error) {
        console.error('获取追溯码失败:', error);
      }
    }
  },
  { deep: true, immediate: true }
);

// 撤回最后一条追溯码
function handleReturn() {
  if (traceNoList.value.length !== 0) {
    // 1. 从数组中移除最后一项
    traceNoList.value.pop();
    // 2. 重新构建显示文本
    traceNo.value = traceNoList.value
      .map((item, index) => {
        return index < 9 ? `[${index + 1}]   ${item}` : `[${index + 1}] ${item}`;
      })
      .join(', ');
    if (traceNoList.value != 0) {
      traceNo.value += '\n';
    }
  }
  traceNoTempRef.value.focus();
}

function removeTraceNo(index) {
  traceNoList.value.splice(index, 1);
  traceNoTempRef.value.focus();
}

function formatValue(index) {
  if (index >= 10) {
    return `&nbsp;&nbsp;`;
  } else {
    return `&nbsp;`;
  }
}

function handleClear() {
  traceNo.value = '';
  traceNoList.value = [];
}
const throttledGetList = debounce(handelTraceNo, 500);
function handelTraceNo(value) {
  let list = value.trim().split('\n');
  list.forEach((item) => {
    if(traceNoList.value.indexOf(item) === -1) {  
      traceNoList.value.push(item);
    }
  });
  traceNo.value = traceNoList.value
    .map((item, index) => {
      return index < 9 ? `[${index + 1}]   ${item}` : `[${index + 1}] ${item}`;
    })
    .join(', ');
  if (traceNoList.value != 0) {
    traceNo.value += '\n';
  }
  traceNoTemp.value = '';
  traceNoInput.value = '';
  // let saveValue = value.substring(inputValue.length + 5, value.length);
  // inputValue = value;
  // console.log(value);
  // console.log(saveValue);
  // traceNoList.value.push(saveValue);
  // traceNo.value = value + '[' + (traceNoList.value.length + 1) + ']' + '  ';
}
function cancel() {
  emit('cancel');
  traceNoList.value = [];
  traceNo.value = '';
}

function submit() {
  emit('submit', traceNoList.value.join(','));
  openTraceNo.value = false;
  traceNoList.value = [];
  traceNo.value = '';
}
</script>