taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新采购计划和出入库管理功能

Browse Source 
添加清除所有草稿功能
扩展采购计划和出入库接口类型定义
新增出入库统计和产品列表接口
重写计划详情页面数据展示逻辑
改进数据分析组件支持动态数据
优化库存管理页面查询和展示逻辑
完善详情信息组件展示和文件预览功能
This commit is contained in:
re-JZzzz
2025-09-28 20:04:30 +08:00
parent 11f9433ba7
commit 321c3fce49
12 changed files with 856 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
src/views/materialManagement/components/detailInfo.vue
View File

@ -1,84 +1,32 @@
<template>
<div class="approval-form">
<!-- 基础信息 -->
<el-card class="card" shadow="hover">
<template #header>
<h3>基础信息</h3>
</template>
<el-form :model="detailInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="采购单号">
<el-input v-model="detailInfo.id" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="创建时间">
<el-input v-model="detailInfo.createTime" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="经办人">
<el-input v-model="detailInfo.jingbanrenName" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属部门">
<el-select v-model="detailInfo.caigouDanweiName" placeholder="请选择">
<el-option label="运维部" value="运维部" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采购类型">
<el-select v-model="detailInfo.caigouType" placeholder="请选择">
<el-option label="项目业务" value="项目业务" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="申请原因">
<el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
</el-form-item>
</el-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">
<template #header>
<h3>供应商信息</h3>
</template>
<el-form :model="detailInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="供应商单位">
<el-select v-model="detailInfo.gonyingshangId" placeholder="请选择">
<el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出货时间">
<el-select v-model="detailInfo.chouhuoTime" placeholder="请选择">
<el-option label="2年零4个月" value="2年零4个月" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<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">
<template #header>
<h3>产品信息</h3>
</template>
<el-table :data="detailInfo.opsCaigouPlanChanpinVos" border style="width: 100%">
<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="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="合计" />
@ -87,163 +35,89 @@
<!-- 合同条款 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>合同条款</h3>
</template>
<el-form :model="contractInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="付款条件">
<el-select v-model="detailInfo.fukuantiaojian" placeholder="请选择">
<el-option label="银行卡" value="银行卡" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票开具方式">
<el-select v-model="detailInfo.fapiaoKjfs" placeholder="请选择">
<el-option label="请选择" value="请选择" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<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">
<template #header>
<h3>附件</h3>
</template>
<el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
:on-preview="handlePreview">
<el-table :data="fileList" border style="width: 100%">
<el-table-column prop="name" label="文件名" width="300" />
<el-table-column prop="size" label="大小" width="100" />
<el-table-column label="操作" width="100">
<template #default="scope">
<!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
<el-link type="primary">
预览
</el-link>
</template>
</el-table-column>
</el-table>
</el-upload>
<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, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import { ref, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
import { defineProps } from 'vue';
import type { ComponentInternalInstance } from 'vue';
const route = useRoute();
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, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
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'));
import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
// 存储计划详情数据
const detailInfo = ref<CaigouPlanVO>({} as CaigouPlanVO);
// 存储计划编号
const id = ref('');
const getDetailInfo = async () => {
const res = await caigouPlanDetail(id.value);
if (res.code === 200) {
detailInfo.value = res.data;
console.log(detailInfo.value);
}
// 根据字典数组和值获取标签文本
const getTagLabel = (dictArray: any[], value: any): string => {
if (!dictArray || !value) return '';
const item = dictArray.find(item => item.value === value);
return item?.label || value;
}
onMounted(() => {
// 接收路由参数
id.value = route.query.id as string;
getDetailInfo();
});
// 基础信息数据
const basicInfo = ref({
orderNo: '0035455',
createTime: '2023-11-02 16:32',
handler: '李四',
dept: '运维部',
purchaseType: '项目业务',
applyReason:
'随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
});
// 供应商信息数据
const supplierInfo = ref({
supplierName: 'AAAA精密仪器制造有限公司',
deliveryTime: '2年零4个月',
remark: '',
});
// 产品信息数据
const productInfo = ref({
tableData: [
{
productName: 'AAABBBCCC',
productModel: '15-42',
productPrice: 500,
buyQuantity: 10,
usage: '组件',
total: 5000,
},
],
remark: '',
});
// 合同条款数据
const contractInfo = ref({
paymentCondition: '银行卡',
invoiceWay: '请选择',
remark: '',
});
// 附件数据
const fileList = ref([
{
name: 'MWwwwww.jpg',
size: '30kb',
url: '',
},
{
name: '231234124w.zip',
size: '50kb',
url: '',
},
{
name: '12451asdas.doc',
size: '80kb',
url: '',
},
{
name: '21seasda.xls',
size: '29kb',
url: '',
},
{
name: '12kjaklskw.png',
size: '16kb',
url: '',
},
]);
// 获取文件类型（后缀名）
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) => {
console.log('预览文件：', file);
// 实际场景可在这里处理文件预览逻辑，如打开新窗口等
window.open(file.fileUrl, '_blank');
};
</script>
<style scoped>
.infoTitle {
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
.approval-form {
padding: 20px;
}