DeXun/GEAR-OA
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

辅材修正，详情页迭代，产品图片加载

Browse Source
This commit is contained in:
朱昊天
2026-04-22 18:33:04 +08:00
parent 2e7a50bf64
commit d02ef34751
6 changed files with 934 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

464
gear-ui3/src/views/mat/auxiliary/index.vue Normal file
View File

@@ -0,0 +1,464 @@
<!-- 辅料管理 -->
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="辅料名称" prop="materialName">
<el-input v-model="queryParams.materialName" placeholder="请输入辅料名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="辅料规格" prop="spec">
<el-input v-model="queryParams.spec" placeholder="请输入辅料规格" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="辅料型号" prop="model">
<el-input v-model="queryParams.model" placeholder="请输入辅料型号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="厂家" prop="factory">
<el-input v-model="queryParams.factory" placeholder="请输入厂家" clearable @keyup.enter="handleQuery" />
</el-form-item>
<!-- <el-form-item label="计量单位 个/公斤/米等" prop="unit">
<el-input v-model="queryParams.unit" placeholder="请输入计量单位 个/公斤/米等" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="现存库存" prop="currentStock">
<el-input v-model="queryParams.currentStock" placeholder="请输入现存库存" clearable @keyup.enter="handleQuery" />
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="materialList" @selection-change="handleSelectionChange" @row-click="handleRowClick">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="辅料ID 主键" align="center" prop="materialId" v-if="true" /> -->
<el-table-column label="辅料名称" align="center" prop="materialName" />
<el-table-column label="物料类型" align="center" prop="materialType">
<template #default="scope">
{{ scope.row.materialType === 1 ? '辅料' : '原料' }}
</template>
</el-table-column>
<el-table-column label="辅料规格" align="center" prop="spec" />
<el-table-column label="辅料型号" align="center" prop="model" />
<el-table-column label="厂家" align="center" prop="factory" />
<el-table-column label="计量单位" align="center" prop="unit" />
<el-table-column label="现存库存" align="center" prop="currentStock">
<template #default="scope">
{{ formatDecimal(scope.row.currentStock) }}
</template>
</el-table-column>
<el-table-column label="在途数量" align="center" prop="inTransitNum">
<template #default="scope">
{{ formatDecimal(scope.row.inTransitNum) }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Plus" @click="handleIn(scope.row)">入库</el-button>
<el-button link type="primary" icon="Minus" @click="handleOut(scope.row)">出库</el-button>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
<!-- 添加或修改辅料基础信息对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="materialRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="辅料名称" prop="materialName">
<el-input v-model="form.materialName" placeholder="请输入辅料名称" />
</el-form-item>
<el-form-item label="物料类型" prop="materialType">
<el-select v-model="form.materialType" placeholder="请选择物料类型" disabled>
<el-option label="辅料" value="1" />
</el-select>
</el-form-item>
<el-form-item label="辅料规格" prop="spec">
<el-input v-model="form.spec" placeholder="请输入辅料规格" />
</el-form-item>
<el-form-item label="辅料型号" prop="model">
<el-input v-model="form.model" placeholder="请输入辅料型号" />
</el-form-item>
<el-form-item label="厂家" prop="factory">
<el-input v-model="form.factory" placeholder="请输入厂家" />
</el-form-item>
<el-form-item label="计量单位" prop="unit">
<el-input v-model="form.unit" placeholder="请输入计量单位" />
</el-form-item>
<!-- <el-form-item label="现存库存" prop="currentStock">
<el-input v-model="form.currentStock" placeholder="请输入现存库存" />
</el-form-item> -->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog title="入库" v-model="inOpen" width="500px" append-to-body>
<el-form ref="materialInRef" :model="inForm" label-width="80px">
<el-form-item label="辅料" prop="materialId">
<raw-selector ref="rawSelector" v-model="inForm.materialId" placeholder="请选择辅料" />
</el-form-item>
<el-form-item label="入库数量" prop="inNum">
<el-input v-model="inForm.inNum" placeholder="请输入入库数量" />
</el-form-item>
<el-form-item label="入库单价" prop="inPrice">
<el-input v-model="inForm.inPrice" placeholder="请输入入库单价" />
</el-form-item>
<el-form-item label="入库时间" prop="inTime">
<el-date-picker clearable v-model="inForm.inTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择实际入库时间">
</el-date-picker>
</el-form-item>
<el-form-item label="操作人" prop="operator">
<el-input v-model="inForm.operator" placeholder="请输入入库操作人" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="inForm.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitFormIn">确 定</el-button>
<el-button @click="cancelIn">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog title="出库" v-model="outOpen" width="500px" append-to-body>
<el-form ref="materialOutRef" :model="outForm" label-width="80px">
<el-form-item label="出库单号" prop="outNo">
<el-input v-model="outForm.outNo" placeholder="请输入出库单号" />
</el-form-item>
<el-form-item label="辅料" prop="materialId">
<raw-selector ref="rawSelector" v-model="outForm.materialId" placeholder="请选择辅料" />
</el-form-item>
<el-form-item label="出库数量" prop="outNum">
<el-input v-model="outForm.outNum" placeholder="请输入出库数量" />
</el-form-item>
<el-form-item label="出库原因" prop="outReason">
<el-input v-model="outForm.outReason" placeholder="请输入出库原因" />
</el-form-item>
<el-form-item label="操作人" prop="operator">
<el-input v-model="outForm.operator" placeholder="请输入操作人" />
</el-form-item>
<el-form-item label="出库时间" prop="outTime">
<el-date-picker clearable v-model="outForm.outTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择实际出库时间">
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="outForm.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitFormOut">确 定</el-button>
<el-button @click="cancelOut">取 消</el-button>
</div>
</template>
</el-dialog>
<Price :materialId="currentMaterialId" ref="priceRef" />
</div>
</template>
<script setup name="AuxiliaryMaterial">
import { listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial } from "@/api/mat/material";
import { addPurchaseInDetail } from "@/api/mat/purchaseInDetail";
import { addMaterialOut } from "@/api/mat/materialOut";
import Price from "@/views/mat/components/price.vue";
import RawSelector from "@/components/RawSelector/index.vue";
import { formatDecimal } from '@/utils/gear'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const materialList = ref([]);
const open = ref(false);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const inForm = ref({});
const outForm = ref({});
const inOpen = ref(false);
const outOpen = ref(false);
const currentMaterialId = ref(null);
function handleRowClick(row) {
currentMaterialId.value = row.materialId;
}
const priceHistoryList = ref([]);
const nickName = computed(() => userStore.nickName)
const formatterTime = (time) => {
return proxy.parseTime(time, '{y}-{m}-{d}')
}
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
materialName: undefined,
spec: undefined,
model: undefined,
factory: undefined,
unit: undefined,
currentStock: undefined,
materialType: 1, // 固定为辅料
},
rules: {
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询辅料基础信息列表 */
function getList() {
loading.value = true;
listMaterial(queryParams.value).then(response => {
materialList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
materialId: null,
materialName: null,
materialType: 1, // 固定为辅料
spec: null,
model: null,
factory: null,
unit: null,
currentStock: null,
delFlag: null,
createTime: null,
createBy: null,
updateTime: null,
updateBy: null,
remark: null
};
proxy.resetForm("materialRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
queryParams.value.materialType = 1; // 重置后仍为辅料
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.materialId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加辅料基础信息";
}
/** 修改按钮操作 */
function handleUpdate(row) {
loading.value = true
reset();
const _materialId = row.materialId || ids.value
getMaterial(_materialId).then(response => {
loading.value = false;
form.value = response.data;
open.value = true;
title.value = "修改辅料基础信息";
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["materialRef"].validate(valid => {
if (valid) {
buttonLoading.value = true;
if (form.value.materialId != null) {
updateMaterial(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
}).finally(() => {
buttonLoading.value = false;
});
} else {
addMaterial(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
}).finally(() => {
buttonLoading.value = false;
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _materialIds = row.materialId || ids.value;
proxy.$modal.confirm('是否确认删除辅料基础信息编号为"' + _materialIds + '"的数据项？').then(function () {
loading.value = true;
return delMaterial(_materialIds);
}).then(() => {
loading.value = true;
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
loading.value = false;
});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('mat/material/export', {
...queryParams.value
}, `auxiliary_material_${new Date().getTime()}.xlsx`)
}
function handleIn(row) {
const inTime = proxy.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
inOpen.value = true;
inForm.value = {
detailId: null,
purchaseId: null,
materialId: row.materialId,
inNum: null,
inPrice: null,
inAmount: null,
inTime: inTime,
operator: nickName,
delFlag: null,
createTime: null,
createBy: null,
updateTime: null,
updateBy: null,
remark: null
};
proxy.resetForm("materialInRef");
}
function cancelIn() {
inOpen.value = false;
}
const priceRef = ref(null);
function submitFormIn() {
loading.value = true;
buttonLoading.value = true;
addPurchaseInDetail(inForm.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
inOpen.value = false;
getList();
priceRef.value.getListChart();
}).finally(() => {
buttonLoading.value = false;
loading.value = false;
});
}
function handleOut(row) {
const outNo = proxy.parseTime(new Date(), '{y}{m}{d}{hh}{i}{s}')
const outTime = proxy.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
outOpen.value = true;
outForm.value = {
outId: null,
outNo: outNo,
materialId: row.materialId,
outNum: null,
outReason: null,
operator: nickName,
outTime: outTime,
delFlag: null,
createTime: null,
createBy: null,
updateTime: null,
updateBy: null,
remark: null
};
proxy.resetForm("materialOutRef");
}
function cancelOut() {
outOpen.value = false;
}
function submitFormOut() {
loading.value = true;
buttonLoading.value = true;
addMaterialOut(outForm.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
outOpen.value = false;
getList();
}).finally(() => {
buttonLoading.value = false;
loading.value = false;
});
}
getList();
</script>