zsy-recycling-supervision-admin/src/pages/dispose-recode/DisposeRecodeDetail.vue

<script lang="ts" setup>
const show = ref(false)
const ins = ref<HTMLElement | null>(null)
const data = reactive<DisposeRecodeTypes.DisposeRecodeData>({
  id: '',
  origin: '',
  clearingCompany: '',
  licensePlate: '',
  contact: '',
  contactPhone: '',
  inWeight: '',
  outWeight: '',
  suttleWeight: '',
  inTime: '',
  outTime: '',
  disposalSite: '',
  inFrontPhoto: '',
  inBodyPhoto: '',
  outFrontPhoto: '',
  outBodyPhoto: '',
  timeOutStatus: '',
  timeOutStatusTxt: ''
})
const container = ref<HTMLElement | undefined>(undefined)

function closeHandler() {
  container.value!.style!.width = '0'
  container.value!.style!.height = '0'
  show.value = false
}

defineExpose({
  open(detail: DisposeRecodeTypes.DisposeRecodeData) {
    Object.assign(data, detail)
    container.value!.style.width = '100%'
    container.value!.style.height = '100%'
    show.value = true
  }
})

</script>

<template>
  <div ref="container" style="position: absolute;width: 0;height: 0">
    <IxModal ref="ins" v-model:visible="show" :container="container"
        :mask="false"
        :on-before-close="closeHandler" cancel-text="关闭" class="dispose-recode-detail" draggable header="处置详情" maskClosable type="default" width="50rem">
      <div class="dispose-recode-detail-info">
        <p class="detail-item"><span>来源地：</span><span>{{ data.origin ?? '-' }}</span></p>
        <p class="detail-item"><span>清运公司：</span><span>{{ data.clearingCompany ?? '-' }}</span></p>
        <p class="detail-item"><span>车牌号：</span><span>{{ data.licensePlate ?? '-' }}</span></p>
        <p class="detail-item"><span>联系人：</span><span>{{ data.contact ?? '-' }}</span></p>
        <p class="detail-item"><span>联系电话：</span><span>{{ data.contactPhone ?? '-' }}</span></p>
        <p class="detail-item"><span>进场磅重（吨）：</span><span>{{ data.inWeight ?? '-' }}</span></p>
        <p class="detail-item"><span>出场磅重（吨）：</span><span>{{ data.outWeight ?? '-' }}</span></p>
        <p class="detail-item"><span>净重（吨）：</span><span>{{ data.suttleWeight ?? '-' }}</span></p>
        <p class="detail-item"><span>进场时间：</span><span>{{ data.inTime ?? '-' }}</span></p>
        <p class="detail-item"><span>出场时间：</span><span>{{ data.outTime ?? '-' }}</span></p>
        <p class="detail-item"><span>消纳场名称：</span><span>{{ data.disposalSite ?? '-' }}</span></p>
      </div>
      <div class="dispose-recode-detail-img-title">车辆照片</div>
      <div class="dispose-recode-detail-img">
        <div class="detail-item img-card">
          <div class="img-title">进场车头照</div>
          <IxImage :src="data.inFrontPhoto" alt="进场前"/>
        </div>
        <div class="detail-item img-card">
          <div class="img-title">进场车身照</div>
          <IxImage :src="data.inBodyPhoto" alt="进场后"/>
        </div>
        <div class="detail-item img-card">
          <div class="img-title">出出场车头照</div>
          <IxImage :src="data.outFrontPhoto" alt="出场前"/>
        </div>
        <div class="detail-item img-card">
          <div class="img-title">出场车身照</div>
          <IxImage :src="data.outBodyPhoto" alt="出场后"/>
        </div>
      </div>
      <div class="dispose-recode-detail-img-title">装车照片</div>
      <div v-if="data.tspPhotos == null || data.tspPhotos.length === 0">
        <IxEmpty/>
      </div>
      <div v-else class="dispose-recode-detail-img">
        <p v-for="tspPhoto in data.tspPhotos" class="detail-item img-card"><span class="img-title"></span>
          <IxImage :src="tspPhoto" alt="装车照片"/>
        </p>
      </div>

      <template #footer="{ cancel:_, ok }">
        <IxButton mode="primary" @click="ok">确定</IxButton>
      </template>
    </IxModal>
  </div>
</template>

<style lang="stylus" scoped>
.dispose-recode-detail-info, .dispose-recode-detail-img {
  display grid !important
  grid-template-columns 1fr 1fr
  grid-gap 1rem
}

.dispose-recode-detail-img-title {
  color #1F2937
  font-weight bold
  margin-bottom .5rem
}

.img-card {
  background-color: rgb(249 250 251);
  padding .5rem
  border-radius .5rem

  .img-title {
    text-align center
  }

  :deep(.ix-image) {
    img {
      width: 100%;
      height: auto;
      object-fit: cover;
      min-height unset
      min-width unset;
    }
  }
}


.detail-item {

  span, img {
    display block
  }

  span:first-child {
    color #6B7280
  }

  span:nth-child(2) {
    color #111827
  }
}

:deep(.ix-modal-body) {
  max-height: 45rem;
}

:deep(.ix-modal-wrapper),
:deep(.ix-mask) {
  position absolute
}

</style>