321c3fce49
添加清除所有草稿功能 扩展采购计划和出入库接口类型定义 新增出入库统计和产品列表接口 重写计划详情页面数据展示逻辑 改进数据分析组件支持动态数据 优化库存管理页面查询和展示逻辑 完善详情信息组件展示和文件预览功能
138 lines
5.7 KiB
Vue
138 lines
5.7 KiB
Vue
<template>
|
|
<div class="approval-form">
|
|
<!-- 基础信息 -->
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|
<el-descriptions title="基础信息" direction="vertical" :column="3" border size="large" class="infoClass">
|
|
<el-descriptions-item label="采购单编号">{{ props.detailInfo.id }}</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ props.detailInfo.createTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="经办人">{{ props.detailInfo.jingbanrenName }}</el-descriptions-item>
|
|
<el-descriptions-item label="所属部门">{{ props.detailInfo.caigouDanweiName }}</el-descriptions-item>
|
|
<el-descriptions-item label="采购类型">{{ getTagLabel(wz_purchase_type, props.detailInfo.caigouType)
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="申请原因">{{ props.detailInfo.reason }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
<!-- 供应商信息 -->
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|
<el-descriptions title="供应商信息" direction="vertical" :column="2" border size="large">
|
|
<el-descriptions-item label="供应商单位">{{ props.detailInfo.gonyingshangId }}</el-descriptions-item>
|
|
<el-descriptions-item label="出货时间">{{ props.detailInfo.chuhuoTime }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
<!-- 产品信息 -->
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|
<div slot="header" class="infoTitle">产品信息</div>
|
|
<el-table :data="props.detailInfo.opsCaigouPlanChanpinVos || []" border style="width: 100%">
|
|
<el-table-column prop="chanpinName" label="产品名称" />
|
|
<el-table-column prop="chanpinType" label="产品型号" />
|
|
<el-table-column prop="chanpinMonovalent" label="产品单价" align="center"
|
|
:cell-style="{ background: 'pink' }" />
|
|
<el-table-column prop="goumaiNumber" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
|
|
<el-table-column prop="yontu" label="用途" />
|
|
<el-table-column prop="totalPrice" label="合计" />
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<!-- 合同条款 -->
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|
<el-descriptions title="合同条款" direction="vertical" :column="3" border size="large">
|
|
<el-descriptions-item label="付款条件">{{ getTagLabel(wz_payment_terms, props.detailInfo.fukuantiaojian)
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="发票开具方式">{{ getTagLabel(wz_invoicing_way, props.detailInfo.fapiaoKjfs)
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="合同类型">{{
|
|
getTagLabel(wz_contract_type, props.detailInfo.hetonType) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
|
|
<!-- 附件 -->
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|
<div slot="header" class="infoTitle">附件</div>
|
|
|
|
<el-table :data="props.detailInfo.opsCaigouPlanFilesVos || []" border>
|
|
<el-table-column prop="fileName" label="文件名" width="300" />
|
|
<el-table-column label="文件类型" width="200">
|
|
<template #default="scope">
|
|
{{ getFileType(scope.row.fileName) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200">
|
|
<template #default="scope">
|
|
<el-link type="primary" @click="handlePreview(scope.row)">
|
|
预览
|
|
</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
|
|
import { defineProps } from 'vue';
|
|
import type { ComponentInternalInstance } from 'vue';
|
|
import type { CaigouPlanVO } from '@/api/wuziguanli/caigouPlan/types';
|
|
|
|
// 定义props
|
|
const props = defineProps<{
|
|
detailInfo: CaigouPlanVO
|
|
}>();
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
|
|
|
|
|
|
|
|
|
|
// 根据字典数组和值获取标签文本
|
|
const getTagLabel = (dictArray: any[], value: any): string => {
|
|
if (!dictArray || !value) return '';
|
|
const item = dictArray.find(item => item.value === value);
|
|
return item?.label || value;
|
|
}
|
|
onMounted(() => {
|
|
|
|
});
|
|
|
|
|
|
// 获取文件类型（后缀名）
|
|
const getFileType = (fileName: string): string => {
|
|
if (!fileName) return '';
|
|
const lastDotIndex = fileName.lastIndexOf('.');
|
|
if (lastDotIndex === -1) return '';
|
|
return fileName.substring(lastDotIndex + 1).toLowerCase();
|
|
};
|
|
|
|
// 预览文件
|
|
const handlePreview = (file) => {
|
|
// 实际场景可在这里处理文件预览逻辑，如打开新窗口等
|
|
window.open(file.fileUrl, '_blank');
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.infoTitle {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.approval-form {
|
|
padding: 20px;
|
|
}
|
|
|
|
.card {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.error-tip {
|
|
color: red;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
::v-deep(.el-input__inner) {
|
|
color: red;
|
|
}
|
|
</style> |