526 lines
19 KiB
Vue
526 lines
19 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<span>物料名称:</span>
|
||
<el-input v-model="materialName" placeholder="物料名称" size="small" clearable/>
|
||
<span>库存状态:</span>
|
||
<el-select v-model="inventoryStateValue" placeholder="库存状态" size="small" clearable>
|
||
<el-option
|
||
v-for="item in inventoryState"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"/>
|
||
</el-select>
|
||
<el-button
|
||
type="success"
|
||
size="small"
|
||
icon="el-icon-search"
|
||
style="margin-left: 10px"
|
||
@click="pageCurrent1=1;pageSize1=10;total1=0;searchTable1()">查询</el-button>
|
||
</el-card>
|
||
|
||
<el-card>
|
||
<el-table
|
||
v-loading="loading1"
|
||
:data="tableData1"
|
||
border
|
||
style="width: 100%;max-height: 300px;"
|
||
height="300px"
|
||
size="mini"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" align="center" width="55"/>
|
||
<el-table-column label="库存状态" width="100" align="center">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="parseInt(scope.row.库存是否不足)===1" type="danger" size="small">不足</el-tag>
|
||
<el-tag v-else type="success" size="small">充足</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="物料名称" min-width="200" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.物料名称 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="物料型号" min-width="200" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.物料型号 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="物料规格" min-width="200" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.物料规格 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="供货商" min-width="200" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.供货商 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="当前库存量" min-width="200" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.当前库存量 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="安全库存量" min-width="200" align="center">
|
||
<template slot-scope="scope">
|
||
<template v-if="scope.row.changeSafeValue">
|
||
<el-input v-model="scope.row.安全库存量" class="edit-input" size="mini"/>
|
||
<el-button class="cancel-btn" size="mini" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
|
||
</template>
|
||
<span v-else>{{ scope.row.安全库存量 }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="设置" min-width="100" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button v-if="scope.row.changeSafeValue" type="mini" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>
|
||
<el-button
|
||
v-else
|
||
type="primary"
|
||
size="mini"
|
||
icon="el-icon-edit"
|
||
@click="scope.row.changeSafeValue=!scope.row.changeSafeValue">设置</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block" style="margin-top: 10px;">
|
||
<el-pagination
|
||
:current-page="pageCurrent1"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="pageSize1"
|
||
:total="total1"
|
||
style="display:inline-block;width:50%"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange1"
|
||
@current-change="handleCurrentChange1"/>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card>
|
||
<el-row>
|
||
<span>请购单号：</span>
|
||
<el-input v-model="PurchaseOrder" size="small" style="width: 200px" placeholder="请购单号" clearable/>
|
||
<el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="pageCurrent2=1;pageSize2=10;total2=0;searchTable2()">查询</el-button>
|
||
<el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left: 15px" @click="handleAdd()">创建</el-button>
|
||
<el-button
|
||
type="warning"
|
||
size="small"
|
||
icon="el-icon-download"
|
||
style="margin-left: 10px"
|
||
@click="addMateriel">选入物料</el-button>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<el-card>
|
||
<el-table :data="tableData2" border style="max-height: 300px;" height="300px" size="mini" highlight-current-row @row-click="searchTable3">
|
||
<el-table-column label="请购单状态" align="center" width="150">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="parseInt(scope.row.请购单状态)===1" type="warning" size="small">编辑中</el-tag>
|
||
<el-tag v-if="parseInt(scope.row.请购单状态)===2" type="primary" size="small">已导出</el-tag>
|
||
<el-tag v-if="parseInt(scope.row.请购单状态)===3" type="primary" size="small">已禁用</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="请购单号" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.请购单编号 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="请购人" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.姓名 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="请购时间" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.请购时间 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="350px" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||
<el-button type="warning" size="mini" icon="el-icon-download" @click="exportTable('QG')">导出</el-button>
|
||
<el-button type="danger" size="mini" icon="el-icon-delete" style="margin-left: 15px" @click="handleDelete(scope.row)">作废</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block" style="margin: 10px 0;">
|
||
<el-pagination
|
||
:current-page="pageCurrent2"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="pageSize2"
|
||
:total="total2"
|
||
style="display:inline-block;width:50%"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange2"
|
||
@current-change="handleCurrentChange2"/>
|
||
</div>
|
||
<el-table :data="tableData3" border style="max-height: 300px;" height="300px" size="mini">
|
||
<el-table-column label="请购单编号" align="center" min-width="150">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.请购单编号 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="物料名称" align="center" min-width="150">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.物料名称 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="物料规格" align="center" min-width="100">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.物料规格 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="物料型号" align="center" min-width="200">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.物料型号 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="数量" align="center" min-width="100">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.数量" size="mini" style="width:70px" @change="update(scope.row)"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="用途" align="center" min-width="100">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.用途" size="mini" style="width:150px" @change="update(scope.row)"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" min-width="100">
|
||
<template slot-scope="scope">
|
||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteMateriel(scope.row)">移除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<el-dialog :title="title" :visible.sync="dialogFormVisible" center style="min-height: 300px" width="400px">
|
||
<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
|
||
<el-form-item label="请购单编号" prop="请购单编号">
|
||
<el-input
|
||
v-model="form.请购单编号"
|
||
size="small"
|
||
style="width:200px"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="请购人">
|
||
<el-input
|
||
v-model="name"
|
||
size="small"
|
||
readonly
|
||
style="width:200px"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="请购时间" prop="请购时间">
|
||
<el-date-picker
|
||
v-model="form.请购时间"
|
||
size="small"
|
||
type="date"
|
||
format="yyyy-MM-dd"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="选择日期"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="cancel('form')">取消</el-button>
|
||
<el-button v-show="title==='增加'" type="primary" @click="submitAdd('form')">确定</el-button>
|
||
<el-button v-show="title==='编辑'" type="primary" @click="submitEdit('form')">确定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<table id="QG" cellspacing="0px" border align="center" style="display: none">
|
||
<thead>
|
||
<tr id="tableHead">
|
||
<th>请购单编号</th>
|
||
<th>物料名称</th>
|
||
<th>物料规格</th>
|
||
<th>物料型号</th>
|
||
<th>数量</th>
|
||
<th>用途</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(list, index) in tableData3" :key="index">
|
||
<td align="center"> {{ list.请购单编号 }}</td>
|
||
<td>{{ list.物料名称 }}</td>
|
||
<td>{{ list.物料规格 }}</td>
|
||
<td align="center">{{ list.物料型号 }}</td>
|
||
<td>{{ list.数量 }}</td>
|
||
<td>{{ list.用途 }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { searchInventoryNum, searchOfflineContract, addData, editData, deleteData, searchMateriel, update,
|
||
addMateriel, deleteMateriel, setSafeValue } from '@/api/WorkshopProcurement/OfflineContract1'
|
||
import { mapGetters } from 'vuex'
|
||
import { getExplorer, method5, Cleanup } from '@/vendor/exportExcel'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading1: false,
|
||
title: '',
|
||
check1: 0,
|
||
check2: 0,
|
||
check3: 0,
|
||
materialName: '',
|
||
inventoryStateValue: '', // 库存状态
|
||
inventoryState: [
|
||
{
|
||
label: '充足',
|
||
value: 2
|
||
},
|
||
{
|
||
label: '不足',
|
||
value: 1
|
||
}
|
||
],
|
||
tableData1: [],
|
||
pageCurrent1: 1,
|
||
pageSize1: 10,
|
||
total1: 0,
|
||
PurchaseOrder: '', // 请购单编号
|
||
PurchaseNumber: '',
|
||
tableData2: [],
|
||
total2: 0,
|
||
pageCurrent2: 1,
|
||
pageSize2: 10,
|
||
dialogFormVisible: false,
|
||
RequisitionList: '',
|
||
form: {
|
||
请购单编号: '',
|
||
请购时间: ''
|
||
},
|
||
rules: {
|
||
请购单编号: [{ required: true, message: '请输入请购单编号', trigger: 'blur' }],
|
||
请购时间: [{ required: true, message: '请选择请购时间', trigger: 'change' }]
|
||
},
|
||
tableData3: [],
|
||
materielGroup: [], // 物料流水号组
|
||
partGroup: [] // 离线合同明细流水号组
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'sidebar',
|
||
'avatar',
|
||
'name',
|
||
'id' // 人员编号
|
||
])
|
||
},
|
||
methods: {
|
||
searchTable1() { // 查询物料库物料
|
||
this.loading1 = true
|
||
this.materialName ? this.check1 = 1 : this.check1 = 0
|
||
this.inventoryStateValue ? this.check2 = 1 : this.check2 = 0
|
||
searchInventoryNum(this.pageCurrent1, this.pageSize1, this.check1, this.materialName, this.check2, this.inventoryStateValue).then(response => {
|
||
this.tableData1 = response.data.rows
|
||
this.tableData1.map(v => {
|
||
this.$set(v, 'changeSafeValue', false)
|
||
v.原安全库存量 = v.安全库存量
|
||
return v
|
||
})
|
||
this.total1 = response.data.total
|
||
this.loading1 = false
|
||
})
|
||
},
|
||
handleSizeChange1(val) {
|
||
this.pageSize1 = val
|
||
this.pageCurrent1 = 1
|
||
this.searchTable1()
|
||
},
|
||
handleCurrentChange1(val) {
|
||
this.pageCurrent1 = val
|
||
this.searchTable1()
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.materielGroup = []
|
||
for (let i = 0; i < val.length; i++) {
|
||
this.materielGroup.push(val[i].物料流水号)
|
||
}
|
||
},
|
||
cancelEdit(row) { // 取消设置
|
||
row.安全库存量 = row.原安全库存量
|
||
row.changeSafeValue = false
|
||
this.$message('取消修改')
|
||
},
|
||
confirmEdit(row) { // 确认设置
|
||
Number(row.安全库存量) ? row.安全库存量 = Number(row.安全库存量) : row.安全库存量 = 0
|
||
setSafeValue(row.物料流水号, parseInt(row.安全库存量)).then(response => {
|
||
if (response.data[0].result === '1') {
|
||
row.changeSafeValue = false
|
||
this.$message.success('设置成功')
|
||
this.searchTable1()
|
||
} else {
|
||
this.$message.error('设置失败')
|
||
}
|
||
})
|
||
},
|
||
searchTable2() { // 查询请购单列表
|
||
this.PurchaseOrder ? this.check3 = 1 : this.check3 = 0
|
||
searchOfflineContract(this.pageCurrent2, this.pageSize2, this.check3, this.PurchaseOrder).then(response => {
|
||
this.tableData2 = response.data.rows
|
||
this.total2 = response.data.total
|
||
})
|
||
},
|
||
handleSizeChange2(val) { // 请购单列表分页
|
||
this.pageSize2 = val
|
||
this.searchTable2()
|
||
},
|
||
handleCurrentChange2(val) { // 请购单列表分页
|
||
this.pageCurrent2 = val
|
||
this.searchTable2()
|
||
},
|
||
exportTable(tableid) {
|
||
if (this.tableData3.length === 0) {
|
||
this.$message.warning('暂无数据')
|
||
} else {
|
||
getExplorer()
|
||
method5(tableid)
|
||
Cleanup()
|
||
}
|
||
},
|
||
update(row) {
|
||
update(row.请购单明细流水号, row.数量, row.用途).then(response => {})
|
||
},
|
||
handleAdd() {
|
||
this.addForm('form', [this.dialogFormVisible = true, this.title = '增加'])
|
||
},
|
||
submitAdd(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
addData(this.form.请购单编号, this.id, this.form.请购时间).then(response => {
|
||
if (response.data[0].result === '1') {
|
||
this.$message.success('增加成功')
|
||
this.dialogFormVisible = false
|
||
this.searchTable2()
|
||
} else { this.$message.error('增加失败') }
|
||
})
|
||
} else {
|
||
console.log('error submit!!')
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
handleEdit(row) { // 弹出单据编辑
|
||
if (this.$refs['form'] !== undefined) {
|
||
this.$refs['form'].resetFields()
|
||
}
|
||
this.title = '编辑'
|
||
this.dialogFormVisible = true
|
||
this.RequisitionList = row.请购单流水号
|
||
this.form.请购单编号 = row.请购单编号
|
||
this.form.请购时间 = row.请购时间
|
||
},
|
||
submitEdit(formName) { // 提交单据编辑
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
editData(this.RequisitionList, this.form.请购单编号, this.form.请购时间).then(response => {
|
||
if (response.data[0].result === '1') {
|
||
this.$message.success('编辑成功')
|
||
this.dialogFormVisible = false
|
||
this.searchTable2()
|
||
} else { this.$message.error('编辑失败') }
|
||
})
|
||
} else {
|
||
console.log('error submit!!')
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
handleDelete(row) { // 作废单据
|
||
this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteData(row.请购单流水号).then(response => {
|
||
if (response.data[0].result === '1') {
|
||
this.$message.success('作废成功')
|
||
this.searchTable2()
|
||
} else { this.$message.error('作废失败') }
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
},
|
||
cancel(formName) {
|
||
this.form = {}
|
||
this.dialogFormVisible = false
|
||
this.$refs[formName].resetFields()
|
||
},
|
||
searchTable3(row) { // 查询请购单明细
|
||
this.PurchaseNumber = row.请购单流水号
|
||
searchMateriel(this.PurchaseNumber).then(response => {
|
||
this.tableData3 = response.data
|
||
})
|
||
},
|
||
addMateriel() { // 将物料选入请购单
|
||
addMateriel(this.PurchaseNumber, this.materielGroup).then(response => {
|
||
if (response.data[0].result === '1') {
|
||
this.$message.success('选入成功')
|
||
searchMateriel(this.PurchaseNumber).then(response => {
|
||
this.tableData3 = response.data
|
||
})
|
||
} else { this.$message.error('选入失败') }
|
||
})
|
||
},
|
||
deleteMateriel(row) { // 移除物料
|
||
this.$confirm('确定移除该物料?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteMateriel(row.请购单明细流水号).then(response => {
|
||
if (response.data[0].result === '1') {
|
||
this.$message.success('移除成功')
|
||
searchMateriel(this.PurchaseNumber).then(response => {
|
||
this.tableData3 = response.data
|
||
})
|
||
} else { this.$message.error('移除失败') }
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消移除'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-card{
|
||
margin-bottom: 15px;
|
||
}
|
||
.el-date-editor{
|
||
width:150px;
|
||
}
|
||
.el-select{
|
||
width:200px
|
||
}
|
||
.el-input{
|
||
width:200px
|
||
}
|
||
span{
|
||
margin: 10px 0 10px 10px;
|
||
}
|
||
.el-tag{
|
||
margin: 0
|
||
}
|
||
.searchForm .el-form-item{
|
||
margin-bottom: 5px;
|
||
}
|
||
.edit-input {
|
||
padding-right: 100px;
|
||
}
|
||
.cancel-btn {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 5px;
|
||
}
|
||
</style>
|