b4beb49f91
添加 formatDecimal 函数用于格式化小数显示，去除末尾无效0和孤立小数点 在库存管理、采购、出入库等模块中应用该格式化函数，统一数字显示格式 调整仪表盘统计数据的精度显示为整数 优化采购截止日期的显示逻辑，增加状态判断和剩余天数计算
112 lines
4.1 KiB
Vue
112 lines
4.1 KiB
Vue
<template>
|
||
<div @click="open = true" style="cursor: pointer;">
|
||
<!-- 触发区插槽：默认展示选择按钮/已选物料信息 -->
|
||
<slot name="trigger">
|
||
<el-button v-if="!materialId" type="primary" size="small">选择配料</el-button>
|
||
<el-tag v-else type="info" closable @close="handleClear">
|
||
{{ currentMaterial.materialName }}({{ currentMaterial.spec }})[{{ currentMaterial.model }}] - {{
|
||
currentMaterial.factory }}，库存：{{ currentMaterial.currentStock }}{{ currentMaterial.unit }}
|
||
</el-tag>
|
||
</slot>
|
||
</div>
|
||
|
||
<!-- 选择弹窗：表格+分页+底部按钮 -->
|
||
<el-dialog title="选择配料" v-model="open" width="800px" destroy-on-close>
|
||
<el-table :data="list" style="width: 100%" border stripe @row-click="handleRowSelect" highlight-current-row
|
||
row-key="materialId" :current-row-key="materialId">
|
||
<el-table-column prop="materialName" label="配料名称" min-width="120" align="center" />
|
||
<el-table-column prop="spec" label="配料规格" min-width="100" align="center" />
|
||
<el-table-column prop="model" label="配料型号" min-width="100" align="center" />
|
||
<el-table-column prop="factory" label="生产厂家" min-width="120" align="center" />
|
||
<el-table-column prop="currentStock" label="现存库存" min-width="80" align="center">
|
||
<template #default="scope">
|
||
{{ formatDecimal(scope.row.currentStock) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="unit" label="计量单位" width="80" align="center" :formatter="formatUnit" />
|
||
</el-table>
|
||
|
||
<!-- 分页组件 -->
|
||
<div style="margin: 15px 0; text-align: right; width: 100%">
|
||
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
|
||
:page-sizes="[5, 10, 20, 50]" layout="prev, pager, next, jumper, ->, total, sizes"
|
||
@size-change="fetchMaterialList" @current-change="fetchMaterialList" small />
|
||
</div>
|
||
|
||
<template #footer>
|
||
<el-button @click="open = false">取消</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup name="RawSelector">
|
||
import { ref, computed, watch, onMounted } from 'vue';
|
||
import { listMaterial, getMaterial } from '@/api/mat/material';
|
||
import { ElMessage } from 'element-plus';
|
||
import { formatDecimal } from '@/utils/gear'
|
||
|
||
// 双向绑定物料ID
|
||
const materialId = defineModel({
|
||
type: String,
|
||
default: ""
|
||
})
|
||
|
||
// 计算当前选中的物料信息
|
||
const currentMaterial = computed(() => {
|
||
if (!materialId.value) return {};
|
||
return list.value.find(item => item.materialId === materialId.value) || {};
|
||
});
|
||
|
||
// 定义事件
|
||
const emit = defineEmits(['change']);
|
||
|
||
// 基础响应式数据
|
||
const list = ref([]); // 物料列表
|
||
const open = ref(false); // 弹窗显隐
|
||
|
||
// 分页响应式数据（核心新增）
|
||
const pageNum = ref(1); // 当前页码
|
||
const pageSize = ref(10); // 每页条数
|
||
const total = ref(0); // 总数据条数
|
||
|
||
// 组件挂载加载列表
|
||
onMounted(async () => {
|
||
await fetchMaterialList();
|
||
});
|
||
|
||
// 加载物料列表（适配分页参数）
|
||
async function fetchMaterialList() {
|
||
try {
|
||
const res = await listMaterial({ pageNum: pageNum.value, pageSize: pageSize.value });
|
||
|
||
list.value = res.rows;
|
||
total.value = res.total; // 赋值总条数供分页使用
|
||
// 分页查询后检查是否存在当前选中的物料ID
|
||
const isExist = res.rows.some(item => item.materialId === materialId.value);
|
||
if (!isExist) {
|
||
console.log('获取物料详情:', materialId.value);
|
||
if (!materialId.value) return;
|
||
const res = await getMaterial(materialId.value);
|
||
list.value.push(res.data);
|
||
}
|
||
} catch (err) {
|
||
console.error('加载物料列表失败：', err);
|
||
ElMessage.error('配料列表加载失败，请刷新重试');
|
||
}
|
||
}
|
||
|
||
// 表格行选择物料
|
||
function handleRowSelect(row) {
|
||
if (row.materialId === materialId.value) return;
|
||
materialId.value = row.materialId;
|
||
emit('change', row);
|
||
open.value = false;
|
||
}
|
||
|
||
// 清空已选物料
|
||
function handleClear() {
|
||
materialId.value = '';
|
||
emit('change', {});
|
||
ElMessage.info('已清空配料选择');
|
||
}
|
||
</script> |