bxztApp/packages/screen/src/views/MaterialManagement/detailDialog.vue

<template>
  <div class="detail-container">
    <el-card shadow="hover">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions title="基础信息" column="1">
            <el-descriptions-item label="物资名称: ">{{
              detailData.material?.wzmc
            }}</el-descriptions-item>
            <el-descriptions-item label="余量: ">{{
              detailData.material?.ye + ' ' + detailData.material?.dw
            }}</el-descriptions-item>
            <el-descriptions-item label="所属服务站: ">{{
              detailData.material?.yhzMc
            }}</el-descriptions-item>
            <el-descriptions-item label="备注: ">{{
              detailData.material?.remark
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12" style="position: relative">
          <el-image
            style="
              max-width: 180px;
              max-height: 180px;
              position: absolute;
              right: 0;
            "
            :src="detailData.photos[0]?.photoUrl"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="detailData.photos?.map((item) => item.photoUrl)"
            show-progresss
            fit="cover"
          />
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="hover">
      <el-descriptions title="物资位置信息" column="3">
        <el-descriptions-item label="区县名称: ">{{
          detailData.material?.qxmc
        }}</el-descriptions-item>
        <el-descriptions-item label="物资经度: ">{{
          detailData.material?.jd
        }}</el-descriptions-item>
        <el-descriptions-item label="物资纬度: ">{{
          detailData.material?.wd
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card shadow="hover">
      <el-descriptions title="物资管理情况" column="3">
        <el-descriptions-item label="负责人: ">{{
          detailData.material?.fzr
        }}</el-descriptions-item>
        <el-descriptions-item label="入库人: ">{{
          detailData.material?.rkrName
        }}</el-descriptions-item>
        <el-descriptions-item label="入库日期: ">{{
          detailData.material?.rkrq?.slice(0, 10)
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
const props = defineProps({
  detailData: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<style>
.detail-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
</style>