yjhtgl-web/src/views/globalMap/MaterialDetail.vue

<template>
  <Dialog hideTitle custom-show hide-footer @close="handleClose">
    <el-select
      v-model="warehouseId"
      placeholder="请选择"
      class="custom-select"
      size="large"
      popper-class="custom-select-popper"
      :teleported="false"
      @change="changSelect"
    >
      <el-option v-for="item in wareHouseList" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <div class="material-detail-container">
      <div class="common-table">
        <div class="table-header">
          <div class="td">物资名称</div>
          <div class="td">已有物资名称</div>
          <div class="td">物资型号</div>
          <div class="td">物资数量</div>
          <div class="td">物资单位</div>
        </div>
        <div v-for="(item, index) in detailData" :key="index" class="tr">
          <div class="td">{{ item.materia_name }}</div>
          <div class="td">-</div>
          <div class="td">-</div>
          <div class="td">{{ item.materia_num }}</div>
          <div class="td">{{ item.materia_unit }}</div>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script lang="ts" setup name="MaterialDetail">
import { getRescueMateriaDetails, getWarehouseDetails2 } from '@/api/globalMap/spatialAnalysis';

const props = defineProps({
  modelValue: Boolean,
  warehouseData: Object
});
const showDetail = inject('showDetail');
let wareHouseList = ref([]);
let warehouseId = ref();
const emits = defineEmits(['update:modelValue']);
let detailData = ref();
const changSelect = (id) => {
  for (let i = 0; i < wareHouseList.value.length; i++) {
    if (wareHouseList.value[i].id === id) {
      const data = {
        id: wareHouseList.value[i].id,
        lat: wareHouseList.value[i].latitude,
        lng: wareHouseList.value[i].longitude
      };
      showDetail(data, 2);
      break;
    }
  }
  initData();
};
const initData = () => {
  getRescueMateriaDetails(warehouseId.value).then((res) => {
    detailData.value = res.rows;
  });
};
onMounted(() => {
  warehouseId.value = props.warehouseData.id;
  getWarehouseDetails2().then((res) => {
    wareHouseList.value = res.data.list;
  });
  initData();
});
const handleClose = () => {
  emits('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.custom-select {
  width: 800px;
  position: absolute;
  top: 20px;
  left: 55px;
}
</style>