yjhtgl-web/src/views/comprehensiveGuarantee/materialReserves/materialsDistributionView.vue

<template>
  <div class="app-container p-2">
    <el-row :gutter="20">
      <el-col :span="20">
        <h2>详情</h2>
        <div class="report-info">
          <p class="report-amount">调度目的：应对高州泰利台风前置</p>
          <p class="approval-status">审批情况：{{ approvalStatus }}</p>
        </div>
      </el-col>
      <el-col :lg="24" :xs="24">
        <el-table :data="tableData" border height="400">
          <el-table-column label="序号" prop="seqNo" width="80">
            <template #default="{ $index }">
              <span>{{ $index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物资类型" prop="materialType"></el-table-column>
          <el-table-column label="物资名称" prop="materialName"></el-table-column>
          <el-table-column label="物资数量（件）" prop="quantity"></el-table-column>
          <el-table-column label="物资用途" prop="purpose"></el-table-column>
        </el-table>
      </el-col>
      <div class="common-dialog-footer" style="width: 100%; justify-content: center; display: flex">
        <el-row :span="24" :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="danger" @click="handleReturn">返回</el-button>
          </el-col>
        </el-row>
      </div>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  eventId: String
});

const emits = defineEmits(['close']);

// 静态数据
const tableData = ref([
  { materialType: '三防物资', materialName: '雨衣', quantity: '100', purpose: '高州泰利台风前置' },
  { materialType: '三防物资', materialName: '水鞋', quantity: '10', purpose: '高州泰利台风前置' },
  { materialType: '三防物资', materialName: '雨伞', quantity: '50', purpose: '高州泰利台风前置' }
]);

const approvalStatus = ref('待审批');

const handleReturn = () => {
  emits('close');
};
</script>

<style scoped>
.app-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.report-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.report-amount,
.approval-status {
  font-size: 14px;
  color: #606266;
}
</style>