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

<template>
  <div class="common-dialog">
    <div class="common-dialog-content">
      <div class="common-dialog-title-box">
        <i class="common-dialog-title-icon" />
        <div>物资申报详情</div>
      </div>
      <div class="common-dialog-box">
        <el-row :gutter="20" style="width: 100%">
          <el-col :span="12">
            <div class="text-box">
              <div class="text1">申报金额：</div>
              <div v-show="!!detailData.declaration_amount" class="text2">{{ formatToTwoDecimalPlaces(detailData.declaration_amount) }}元</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text-box">
              <div class="text1">审批状态：</div>
              <div class="text2">
                <dict-tag :options="material_approval_status" :value="detailData.declaration_details" />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-table :data="detailData.detail" border :height="height">
          <el-table-column label="序号" width="80" align="center">
            <template #default="{ $index }">
              <span>{{ $index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物资名称" prop="material_name" align="center" />
          <el-table-column label="仓库" prop="warehouse_name" align="center" />
          <el-table-column label="物资类型" prop="material_category_name" align="center" />
          <el-table-column label="物资数量（件）" prop="material_quantity" align="center" />
          <el-table-column label="物资单价（元）" prop="material_unit_price" align="center" />
          <el-table-column label="物资用途" prop="material_purpose" align="center" />
        </el-table>
        <div class="common-dialog-footer" style="margin-top: 18px">
          <el-row :span="24" :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" @click="handleReturn">返回</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getDeclarationDetail } from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDeclaration';
import { formatToTwoDecimalPlaces } from '@/utils';

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

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { material_approval_status } = toRefs<any>(proxy?.useDict('material_approval_status'));
const emits = defineEmits(['close']);
let detailData = reactive({
  declaration_amount: '',
  declaration_details: '',
  detail: []
});

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

let height = ref(300);
// 计算表格高度
const calcHeight = () => {
  const el = document.getElementsByClassName('common-dialog-content')[0];
  height.value = el && el.clientHeight - 173 > 400 ? el.clientHeight - 173 : 300;
};
onMounted(() => {
  getDeclarationDetail(props.id).then((res) => {
    detailData.declaration_amount = res.data.declaration_amount;
    detailData.declaration_details = res.data.declaration_details;
    detailData.detail = res.data.detail;
  });
  calcHeight();
  window.addEventListener('resize', calcHeight);
});
onUnmounted(() => {
  window.removeEventListener('resize', calcHeight);
});
</script>

<style lang="scss" scoped>
.text-box {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  color: rgba(0, 0, 0, 0.85);
  .text1 {
    font-size: 18px;
    font-weight: bold;
  }
  .text2 {
    font-size: 18px;
  }
}
</style>