3 changed files with 564 additions and 1 deletions
-
34src/api/erf/erf.js
-
510src/views/modules/erf/components/expRawMaterialList.vue
-
21src/views/modules/erf/expApplyList.vue
@ -0,0 +1,510 @@ |
|||||
|
<template> |
||||
|
<!-- 原材料清单组件 --> |
||||
|
<div class="raw-material-container"> |
||||
|
<!-- 工具栏 --> |
||||
|
<div style="margin-bottom: 10px"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
class="add-btn" |
||||
|
v-if="!disabled" |
||||
|
@click="openAddDialog"> |
||||
|
新增物料 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
class="reset-btn" |
||||
|
v-if="!disabled" |
||||
|
:disabled="selectedRows.length === 0" |
||||
|
@click="batchDeleteRawMaterial"> |
||||
|
批量删除 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 数据表格 --> |
||||
|
<el-table |
||||
|
ref="rawMaterialTable" |
||||
|
:data="rawMaterialList" |
||||
|
v-loading="tableLoading" |
||||
|
border |
||||
|
:height="260" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
style="width: 100%"> |
||||
|
|
||||
|
<!-- 多选框 --> |
||||
|
<el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
align="center" |
||||
|
v-if="!disabled"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 序号 --> |
||||
|
<el-table-column |
||||
|
type="index" |
||||
|
label="序号" |
||||
|
width="60" |
||||
|
align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 物料编码 --> |
||||
|
<el-table-column |
||||
|
prop="partNo" |
||||
|
label="物料编码" |
||||
|
min-width="150" |
||||
|
align="left" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.partNo || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 物料描述 --> |
||||
|
<el-table-column |
||||
|
prop="partDesc" |
||||
|
label="物料描述" |
||||
|
min-width="200" |
||||
|
align="left" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 数量 --> |
||||
|
<el-table-column |
||||
|
prop="quantity" |
||||
|
label="数量" |
||||
|
width="120" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 备注 --> |
||||
|
<el-table-column |
||||
|
prop="remark" |
||||
|
label="备注" |
||||
|
min-width="150" |
||||
|
align="left" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.remark || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 操作列 --> |
||||
|
<el-table-column |
||||
|
label="操作" |
||||
|
width="150" |
||||
|
align="center" |
||||
|
header-align="center" |
||||
|
v-if="!disabled"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-link |
||||
|
style="cursor:pointer; margin-right: 10px;" |
||||
|
@click="openEditDialog(scope.row)"> |
||||
|
修改 |
||||
|
</el-link> |
||||
|
<el-link |
||||
|
style="cursor:pointer; color: #F56C6C;" |
||||
|
@click="deleteRawMaterial(scope.row)"> |
||||
|
删除 |
||||
|
</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 新增/编辑弹窗 --> |
||||
|
<el-dialog |
||||
|
:title="dialogTitle" |
||||
|
:visible.sync="dialogVisible" |
||||
|
width="420px" |
||||
|
append-to-body |
||||
|
:close-on-click-modal="false"> |
||||
|
|
||||
|
<el-form :model="formData" label-width="80px" size="small"> |
||||
|
<el-form-item label="物料编码"> |
||||
|
<el-input |
||||
|
v-model="formData.partNo" |
||||
|
placeholder="请输入物料编码（可为空）" |
||||
|
clearable |
||||
|
@blur="handlePartNoBlur" |
||||
|
@keyup.enter.native="handlePartNoBlur"> |
||||
|
</el-input> |
||||
|
<div style="color: #909399; font-size: 12px; margin-top: -10px;"> |
||||
|
输入物料编码后按回车或失去焦点，自动查询物料描述 |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="物料描述" required> |
||||
|
<el-input |
||||
|
v-model="formData.partDesc" |
||||
|
placeholder="请输入物料描述（必填）" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="数量" required> |
||||
|
<el-input |
||||
|
v-model="formData.quantity" |
||||
|
:precision="2" |
||||
|
:min="0.01" |
||||
|
:controls="true" |
||||
|
style="width: 100%"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="备注"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
v-model="formData.remark" |
||||
|
placeholder="请输入备注" |
||||
|
:autosize="{minRows: 2, maxRows: 3}" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<span slot="footer" class="dialog-footer" style="margin-top: 10px"> |
||||
|
<el-button type="primary" @click="saveRawMaterial" :loading="saveLoading"> |
||||
|
{{ saveLoading ? '保存中...' : '保存' }} |
||||
|
</el-button> |
||||
|
<el-button @click="dialogVisible = false">关闭</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getRawMaterialList, saveRawMaterial, deleteRawMaterial, batchDeleteRawMaterial, getPartDescByPartNo } from '@/api/erf/erf' |
||||
|
|
||||
|
export default { |
||||
|
name: 'ExpRawMaterialList', |
||||
|
|
||||
|
props: { |
||||
|
// 申请单号 |
||||
|
applyNo: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
// 工厂编码 |
||||
|
site: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// buNo |
||||
|
buNo: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 是否禁用编辑 |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 组件高度 |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default: 300 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
// 原材料清单数据 |
||||
|
rawMaterialList: [], |
||||
|
|
||||
|
// 表格加载状态 |
||||
|
tableLoading: false, |
||||
|
|
||||
|
// 已选中的行 |
||||
|
selectedRows: [], |
||||
|
|
||||
|
// 弹窗显示状态 |
||||
|
dialogVisible: false, |
||||
|
|
||||
|
// 弹窗标题 |
||||
|
dialogTitle: '新增物料', |
||||
|
|
||||
|
// 表单数据 |
||||
|
formData: { |
||||
|
id: null, |
||||
|
applyNo: '', |
||||
|
site: '', |
||||
|
buNo: '', |
||||
|
partNo: '', |
||||
|
partDesc: '', |
||||
|
quantity: '', |
||||
|
remark: '' |
||||
|
}, |
||||
|
|
||||
|
// 保存加载状态 |
||||
|
saveLoading: false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.loadRawMaterialList() |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
applyNo(newVal) { |
||||
|
if (newVal) { |
||||
|
this.loadRawMaterialList() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
/** |
||||
|
* 加载原材料清单列表 |
||||
|
*/ |
||||
|
loadRawMaterialList() { |
||||
|
if (!this.applyNo) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.tableLoading = true |
||||
|
|
||||
|
getRawMaterialList({ applyNo: this.applyNo }).then(({data}) => { |
||||
|
this.tableLoading = false |
||||
|
if (data && data.code === 0) { |
||||
|
this.rawMaterialList = data.list || [] |
||||
|
} else { |
||||
|
this.rawMaterialList = [] |
||||
|
this.$message.error(data.msg || '查询原材料清单失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.tableLoading = false |
||||
|
this.$message.error('查询原材料清单异常') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 打开新增弹窗 |
||||
|
*/ |
||||
|
openAddDialog() { |
||||
|
this.dialogTitle = '新增物料' |
||||
|
this.formData = { |
||||
|
id: null, |
||||
|
applyNo: this.applyNo, |
||||
|
site: this.site || this.$store.state.user.site, |
||||
|
buNo: this.buNo, |
||||
|
partNo: '', |
||||
|
partDesc: '', |
||||
|
quantity: '', |
||||
|
remark: '' |
||||
|
} |
||||
|
this.dialogVisible = true |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 打开编辑弹窗 |
||||
|
*/ |
||||
|
openEditDialog(row) { |
||||
|
this.dialogTitle = '修改物料' |
||||
|
this.formData = { |
||||
|
id: row.id, |
||||
|
applyNo: row.applyNo, |
||||
|
site: row.site, |
||||
|
buNo: this.buNo, |
||||
|
partNo: row.partNo, |
||||
|
partDesc: row.partDesc, |
||||
|
quantity: row.quantity, |
||||
|
remark: row.remark |
||||
|
} |
||||
|
this.dialogVisible = true |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 保存物料 |
||||
|
*/ |
||||
|
saveRawMaterial() { |
||||
|
// 数据验证 |
||||
|
if (!this.formData.partDesc) { |
||||
|
this.$message.warning('请输入物料描述') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
const qty = Number(this.formData.quantity) |
||||
|
if (isNaN(qty) || qty <= 0) { |
||||
|
this.$message.warning('请输入有效数字（必须大于0）') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.saveLoading = true |
||||
|
|
||||
|
// 保存数据 |
||||
|
const saveData = { |
||||
|
id: this.formData.id, |
||||
|
applyNo: this.formData.applyNo, |
||||
|
site: this.formData.site, |
||||
|
partNo: this.formData.partNo || null, |
||||
|
partDesc: this.formData.partDesc, |
||||
|
quantity: this.formData.quantity, |
||||
|
remark: this.formData.remark |
||||
|
} |
||||
|
|
||||
|
saveRawMaterial(saveData).then(({data}) => { |
||||
|
this.saveLoading = false |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('保存成功') |
||||
|
this.dialogVisible = false |
||||
|
this.loadRawMaterialList() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '保存失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.saveLoading = false |
||||
|
this.$message.error('保存异常') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 删除物料 |
||||
|
*/ |
||||
|
deleteRawMaterial(row) { |
||||
|
this.$confirm('确定删除该物料记录？', '操作提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
deleteRawMaterial({ id: row.id }).then(({data}) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('删除成功') |
||||
|
this.loadRawMaterialList() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '删除失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.$message.error('删除异常') |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 批量删除物料 |
||||
|
*/ |
||||
|
batchDeleteRawMaterial() { |
||||
|
if (this.selectedRows.length === 0) { |
||||
|
this.$message.warning('请先选择要删除的物料') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.$confirm(`确定删除选中的 ${this.selectedRows.length} 条物料记录？`, '操作提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const ids = this.selectedRows.map(row => row.id) |
||||
|
|
||||
|
batchDeleteRawMaterial({ ids: ids }).then(({data}) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('删除成功') |
||||
|
this.loadRawMaterialList() |
||||
|
this.selectedRows = [] |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '删除失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.$message.error('删除异常') |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 物料编码失去焦点或回车时查询part表 |
||||
|
*/ |
||||
|
handlePartNoBlur() { |
||||
|
const partNo = this.formData.partNo |
||||
|
|
||||
|
if (!partNo || !partNo.trim()) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 如果已经有物料描述，不自动查询（避免覆盖用户手动输入） |
||||
|
if (this.formData.partDesc) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 查询part表获取物料描述 |
||||
|
getPartDescByPartNo({ |
||||
|
partNo: partNo.trim(), |
||||
|
site: this.formData.site, |
||||
|
buNo: this.buNo |
||||
|
}).then(({data}) => { |
||||
|
if (data && data.code === 0 && data.partDesc) { |
||||
|
this.formData.partDesc = data.partDesc |
||||
|
} else { |
||||
|
this.$message.warning('未找到该物料编码，请手动填写物料描述') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('查询物料描述异常:', error) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 表格多选变化 |
||||
|
*/ |
||||
|
handleSelectionChange(selection) { |
||||
|
this.selectedRows = selection |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.raw-material-container { |
||||
|
padding: 10px; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
/* 按钮样式 - 与附件上传保持一致 */ |
||||
|
.add-btn { |
||||
|
background-color: #F0F9FF; |
||||
|
border-color: #C0E6C7; |
||||
|
color: #67C23A; |
||||
|
} |
||||
|
|
||||
|
.add-btn:hover:not(:disabled) { |
||||
|
background-color: #67C23A; |
||||
|
border-color: #67C23A; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.reset-btn { |
||||
|
background-color: #F5F7FA; |
||||
|
border-color: #D3D4D6; |
||||
|
color: #606266; |
||||
|
} |
||||
|
|
||||
|
.reset-btn:hover:not(:disabled) { |
||||
|
background-color: #909399; |
||||
|
border-color: #909399; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.reset-btn:disabled { |
||||
|
opacity: 0.5; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
/* 表格样式 */ |
||||
|
.el-table >>> .el-table__header-wrapper th { |
||||
|
background-color: #F5F7FA; |
||||
|
color: #606266; |
||||
|
font-weight: 600; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.el-table >>> .el-table__body-wrapper td { |
||||
|
font-size: 13px; |
||||
|
color: #606266; |
||||
|
} |
||||
|
|
||||
|
/* 弹窗表单样式 */ |
||||
|
.dialog-footer { |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue