This commit is contained in:
liushuai
2018-12-12 18:07:43 +08:00
parent e65183a40c
commit c11dc467a7
8 changed files with 1279 additions and 140 deletions

View File

@@ -0,0 +1,525 @@
<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>