Files
JY1.0/src/views/WorkshopProcurement/OfflineProcurement/index.vue
2019-11-18 19:51:48 +08:00

652 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<el-card style="width: 1137px">
<span>机床号</span>
<el-select v-model="Machine" filterable clearable size="small" style="width: 150px;" placeholder="机床号" @change="getGroup">
<el-option
v-for="item in Machines"
:key="item.value"
:label="item.label"
:value="item.value">
<div style="float: left">{{ item.label }}</div>
<div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
</el-option>
</el-select>
<span>组号</span>
<el-select v-model="Group" size="small" clearable placeholder="组号" style="width: 120px;" @change="getTableData">
<el-option
v-for="item in Groups"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<span>零件号</span>
<el-input v-model="number" placeholder="零件号" clearable size="small" style="width: 150px"/>
<el-button type="success" class="el-icon-search" size="small" style="margin: 0px 10px;" @click="pageCurrent10 = 1;pageSize10 = 10;getTableData()">查询</el-button>
</el-card>
<el-card style="width: 1137px">
<el-table v-loading="" :data="tableData10" stripe highlight-current-row border style="width: 100%;max-height: 315px;margin-top: 10px" height="315px" size="mini" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="55"/>
<el-table-column label="机床图号" prop="机床图号" min-width="180" align="center">
<template slot-scope="scope">
{{ scope.row.机床图号 }}
</template>
</el-table-column>
<el-table-column label="组号" prop="组号" width="120" align="center">
<template slot-scope="scope">
{{ scope.row.组号 }}
</template>
</el-table-column>
<el-table-column label="零件图号" align="center" width="220">
<template slot-scope="scope">
{{ scope.row.零件图号 }}
</template>
</el-table-column>
<el-table-column label="零件名称" align="center" width="220">
<template slot-scope="scope">
{{ scope.row.零件名称 }}
</template>
</el-table-column>
<el-table-column label="数量" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.批次数量 }}
</template>
</el-table-column>
<el-table-column label="材料" align="center" min-width="160">
<template slot-scope="scope">
{{ scope.row.材料 }}
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
:current-page="pageCurrent10"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize10"
:total="total10"
style="display:inline-block;width:50%"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange10"
@current-change="handleCurrentChange10"/>
</div>
</el-card>
<el-card style="width: 1137px">
<span>离线采购计划编号:</span>
<el-input v-model="purchasingOrder" placeholder="离线采购计划编号" size="small" style="width: 160px" clearable/>
<span style="margin-left: 10px">供应商:</span>
<el-select v-model="supplierName" placeholder="供应商" size="small" style="width: 150px" filterable clearable>
<el-option
v-for="item in supplierNames"
: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="pageCurrent2=1;pageSize2=10;total2=0;searchTable()">查询</el-button>
<el-button type="primary" size="small" icon="el-icon-plus" style="margin-left: 10px" @click="addPurchaseOrder">创建采购计划单</el-button>
<!--<el-tooltip :open-delay="1200" effect="dark" content="保存选中的采购计划单" placement="top">-->
<!--<el-button type="baocun" size="small" icon="el-icon-download" style="margin-left: 10px" @click="saveMateriel">保存采购计划单</el-button>-->
<!--</el-tooltip>-->
<el-button type="success" size="small" icon="el-icon-download" style="margin-left: 10px" @click="submitAddMaterial">选入备料</el-button>
</el-card>
<el-card style="width: 1137px">
<el-table v-loading="" :data="tableData" stripe highlight-current-row border style="width: 100%;max-height: 230px;margin-top: 10px" height="230px" size="mini" @row-click="searchMX">
<el-table-column label="采购状态" prop="采购计划状态" align="center" width="90">
<template slot-scope="scope">
<el-tag v-if="Number(scope.row.采购计划状态)===0" type="warning" size="mini">未到货</el-tag>
<el-tag v-if="Number(scope.row.采购计划状态)===3" type="success" size="mini">已到货</el-tag>
<el-tag v-if="Number(scope.row.采购计划状态)===4" type="info" size="mini">已结算</el-tag>
</template>
</el-table-column>
<el-table-column label="离线采购计划编号" align="center" width="200">
<template slot-scope="scope">
{{ scope.row.离线采购计划编号 }}
</template>
</el-table-column>
<el-table-column label="离线采购计划名称" align="center" width="180">
<template slot-scope="scope">
{{ scope.row.离线采购计划名称 }}
</template>
</el-table-column>
<el-table-column label="供应商" align="center" width="250">
<template slot-scope="scope">
{{ scope.row.供应商名称 }}
</template>
</el-table-column>
<el-table-column label="下单日期" prop="下单日期" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.下单日期.split(' ')[0] }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="290">
<template slot-scope="scope">
<el-tooltip :open-delay="1200" effect="dark" content="打印采购计划单" placement="top">
<div style="display: inline-block">
<el-button size="mini" type="success" plain icon="el-icon-printer" @click="exportExcel(scope.row)">打印单据</el-button>
</div>
</el-tooltip>
<el-tooltip :open-delay="1200" effect="dark" content="编辑" placement="top">
<div style="display: inline-block">
<el-button :disabled="parseInt(scope.row.采购计划状态)===3 || parseInt(scope.row.采购计划状态)===4" type="primary" plain size="mini" icon="el-icon-edit-outline" @click="editPurchaseOrder(scope.row)">编辑</el-button>
</div>
</el-tooltip>
<el-tooltip :open-delay="1200" effect="dark" content="删除" placement="top">
<div style="display: inline-block">
<el-button :disabled="parseInt(scope.row.采购计划状态)===3 || parseInt(scope.row.采购计划状态)===4" type="primary" plain size="mini" icon="el-icon-delete" @click="deletePurchaseOrder(scope.row)">删除</el-button>
</div>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="block">
<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-card>
<el-card style="width: 1137px">
<el-table v-loading="" :data="tableData3" stripe highlight-current-row border style="width: 100%;max-height: 300px;margin-top: 10px" size="mini">
<el-table-column label="采购状态" align="center" width="90">
<template slot-scope="scope">
<el-tag v-if="Number(scope.row.是否到货)===0" type="warning" size="mini">未到货</el-tag>
<el-tag v-if="Number(scope.row.是否到货)===1" type="success" size="mini">已到货</el-tag>
<el-tag v-if="Number(scope.row.是否到货)===2" type="info" size="mini">已结算</el-tag>
</template>
</el-table-column>
<el-table-column label="物料编码" prop="物料零件编码" align="center" width="180">
<template slot-scope="scope">
{{ scope.row.物料零件编码 }}
</template>
</el-table-column>
<el-table-column label="零件名称" align="center" width="160">
<template slot-scope="scope">
{{ scope.row.零件名称 }}
</template>
</el-table-column>
<el-table-column label="材料" prop="材料" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.材料 }}
</template>
</el-table-column>
<el-table-column label="数量" align="center" prop="数量" width="100px">
<template slot-scope="scope">
<el-input :disabled="parseInt(scope.row.是否到货)===1 || parseInt(scope.row.是否到货)===2" v-model="scope.row.数量" size="mini" style="width: 100%" @change="saveWeight(scope.$index, scope.row)"/>
</template>
</el-table-column>
<el-table-column label="成品尺寸(长、宽、高)" align="center" width="160px">
<template slot-scope="scope">
<el-input :disabled="parseInt(scope.row.是否到货)===1 || parseInt(scope.row.是否到货)===2" v-model="scope.row.成品尺寸" size="mini" style="width:100%" @change="saveWeight(scope.$index, scope.row)"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="备注" width="220px">
<template slot-scope="scope">
<el-input :disabled="parseInt(scope.row.是否到货)===1 || parseInt(scope.row.是否到货)===2" v-model="scope.row.备注" size="mini" style="width:100%" @change="saveWeight(scope.$index, scope.row)"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100px">
<template slot-scope="scope">
<el-tooltip :open-delay="1000" effect="dark" content="物料移出采购计划" placement="top">
<div style="display: inline-block">
<el-button :disabled="parseInt(scope.row.是否到货)===1 || parseInt(scope.row.是否到货)===2" type="info" size="mini" icon="el-icon-right" plain @click="deleteMX(scope.row)">移出</el-button>
</div>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-card>
<el-card style="width: 1137px">
<div id="WGBLD" style="width: 1037px;margin: 0 auto">
<table cellspacing="0px" align="center" border="1 solid black" width="100%">
<tr style="height: 60px">
<th colspan="12"><h3>江苏高精机电装备有限公司</h3></th>
</tr>
<tr style="height: 40px">
<th colspan="12"><h4>{{ 采购单名称 }}</h4></th>
</tr>
<tr style="height: 40px">
<td colspan="2" style="text-align: center;width: 15%">下单单位</td>
<td colspan="4" style="text-align: center;width: 35%">{{ 下单单位 }}</td>
<td colspan="2" style="text-align: center;width: 15%">单号</td>
<td colspan="4" style="text-align: center;width: 35%">{{ 单号 }}</td>
</tr>
<tr style="height: 40px">
<td colspan="2" style="text-align: center;width: 15%">下单日期</td>
<td colspan="4" style="text-align: center;width: 35%">{{ 下单日期 }}</td>
<td colspan="2" style="text-align: center;width: 15%">计划完成日期</td>
<td colspan="4" style="text-align: center;width: 35%">{{ 计划完成日期 }}</td>
</tr>
</table>
<table cellspacing="0px" align="center" border="1 solid black" width="100%" style="margin-top: 0px">
<tr id="tablehead" style="height: 35px">
<td style="text-align: center;width: 7%">序号</td>
<td colspan="2" style="text-align: center;width: 20%">物料编码</td>
<td colspan="2" style="text-align: center;width: 10%">名称</td>
<td colspan="2" style="text-align: center;width: 10%">材料</td>
<td colspan="2" style="text-align: center;width: 8%">数量</td>
<td colspan="2" style="text-align: center;width: 20%">成品尺寸</td>
<td style="text-align: center;width: 17%">备注</td>
</tr>
<tr v-for="(list, index) in tableData3" :key="index" style="height: 35px">
<td style="text-align: center;width: 7%">{{ index + 1 }}</td>
<td colspan="2" style="text-align: center;width: 20%">{{ list.物料零件编码 }}</td>
<td colspan="2" style="text-align: center;width: 10%">{{ list.零件名称 }}</td>
<td colspan="2" style="text-align: center;width: 10%">{{ list.材料 }}</td>
<td colspan="2" style="text-align: center;width: 8%">{{ list.数量 }}</td>
<td colspan="2" style="text-align: center;width: 20%">{{ list.成品尺寸 }}</td>
<td style="text-align: center;width: 17%">{{ list.备注 }}</td>
</tr>
</table>
<div style="margin-top: 20px">联系人:___________ 联系电话:___________ </div>
</div>
</el-card>
<el-dialog v-el-drag-dialog :title="title2" :visible.sync="dialogVisible2" center style="min-height: 300px" width="520px">
<el-form ref="form2" :model="form2" :rules="rules2" label-position="right" label-width="150px">
<el-form-item label="离线采购计划名称" prop="离线采购计划名称">
<el-input v-model="form2.离线采购计划名称" size="small"/>
</el-form-item>
<el-form-item label="供应商" prop="supplierNameValue">
<el-select v-model="form2.supplierNameValue" placeholder="供应商" size="small" filterable>
<el-option
v-for="item in supplierNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button
v-show="title2==='创建离线采购计划'"
type="primary"
size="small"
icon="el-icon-check"
@click="submitAddPurchaseOrder">确定</el-button>
<el-button
v-show="title2==='编辑离线采购计划'"
type="primary"
size="small"
icon="el-icon-check"
@click="submitEditPurchaseOrder">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>import { getMachines, getGroups, getTable, searchSupplier, addPurchaseOrder, editPurchaseOrder, deletePurchaseOrder, searchPurchaseOrder, AddMaterial, searchMX, saveWeight, deleteMX } from '@/api/WorkshopProcurement/OfflineProcurement'
import { mapGetters } from 'vuex'
import $ from 'jquery'
import Cookie from 'js-cookie'
export default {
name: '', // 项目总价查询
data() {
return {
check1: 0,
purchasingOrder: '',
supplierName: '',
supplierNames: [],
Machine: '', // 机床号
Machines: [],
Group: '', // 组号
Groups: [],
number: '', // 零件图号
Number: [], // 数量组
title2: '',
check3: '',
check4: '',
tableData10: [],
pageCurrent10: 1,
pageSize10: 10,
total10: 0,
Materials: [],
materielGroup: [],
pageCurrent2: 1,
pageSize2: 10,
total2: 0,
下单单位: '',
下单日期: '',
单号: '',
计划完成日期: '',
采购单名称: '',
form2: {
离线采购计划名称: '',
supplierNameValue: '',
离线采购计划流水号: ''
},
rules2: {
离线采购计划名称: [{ required: true, message: '请填写离线采购计划名称' }],
supplierNameValue: [{ required: true, message: '请选择供应商' }]
},
form3: {
材料: ''
},
rules3: {
材料: [{ required: true, message: '请选择材料' }]
},
dialogVisible2: false,
dialogVisible3: false,
离线采购计划流水号: '',
tableData: [],
tableData3: [],
arrival: [],
judge: []
}
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'name',
'id' // 人员编号
])
},
created() {
this.searchRawMaterial()
this.searchTable()
this.getMachine()
},
methods: {
searchRawMaterial() {
searchSupplier(0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '').then(response => {
for (let i = 0; i < response.data.length; i++) {
this.supplierNames.push({
label: response.data[i].供应商名称,
value: response.data[i].供应商流水号
})
}
})
},
getMachine() {
if (Cookie.get('machineValue') !== undefined) {
this.Machine = ''
this.Machines = []
this.Group = ''
this.Groups = []
getMachines().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.Machines.push({
label: response.data[i].机床图号,
value: response.data[i].机床流水号,
value2: response.data[i].项目名称
})
}
if (Cookie.get('group') !== undefined) {
this.Machine = parseInt(Cookie.get('machineValue'))
this.getGroup()
this.getTableData()
this.Group = parseInt(Cookie.get('group'))
// this.getTableData()
Cookie.remove('machineValue')
Cookie.remove('group')
} else {
// this.getTableData()
Cookie.remove('machineValue')
Cookie.remove('group')
}
})
} else {
this.Machine = ''
this.Machines = []
this.Group = ''
this.Groups = []
getMachines().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.Machines.push({
label: response.data[i].机床图号,
value: response.data[i].机床流水号,
value2: response.data[i].项目名称
})
}
})
this.getTableData()
}
}, // 获取组号
getGroup() {
this.Group = ''
this.Groups = []
getGroups(this.Machine).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.Groups.push({
label: response.data[i].组号,
value: response.data[i].组件流水号
})
}
this.Group = response.data[0].组件流水号
})
this.getTableData()
}, // 按条件查询
getTableData() {
this.tableData10 = []
if (this.Machine === '') {
this.checkbox_Machine = 0
} else {
this.checkbox_Machine = 1
}
if (this.Group === '') {
this.checkbox_Group = 0
} else {
this.checkbox_Group = 1
}
if (this.number === '') {
this.checkbox_number = 0
} else {
this.checkbox_number = 1
}
getTable(this.checkbox_Machine, this.Machine, this.checkbox_Group, this.Group, this.checkbox_number, this.number, '', '', this.pageCurrent10, this.pageSize10).then(response => {
if (response.data.rows.length !== 0) {
for (let i = 0; i < response.data.rows.length; i++) {
this.tableData10.push({
工艺计划流水号: response.data.rows[i].工艺计划流水号,
机床图号: response.data.rows[i].机床图号,
组号: response.data.rows[i].组号,
零件图号: response.data.rows[i].零件图号,
零件名称: response.data.rows[i].零件名称,
批次数量: response.data.rows[i].批次数量,
材料: response.data.rows[i].材料
})
}
}
this.total10 = response.data.total
this.loading = false
})
},
handleSizeChange10(val) {
this.pageSize10 = val
this.pageCurrent10 = 1
this.getTableData()
},
handleCurrentChange10(val) {
this.pageCurrent10 = val
this.getTableData()
},
handleSelectionChange(val) {
this.materielGroup = []
for (let i = 0; i < val.length; i++) {
this.materielGroup.push(val[i].工艺计划流水号)
this.Number.push(val[i].批次数量)
}
},
searchTable() {
this.purchasingOrder ? this.check3 = 1 : this.check3 = 0
this.supplierName ? this.check4 = 1 : this.check4 = 0
searchPurchaseOrder(this.pageCurrent2, this.pageSize2, this.check3, this.purchasingOrder, this.check4, this.supplierName).then(response => {
this.tableData = response.data.rows
this.total2 = response.data.total
})
},
handleSizeChange2(val) { // 采购单列表分页
this.pageSize2 = val
this.searchTable()
},
handleCurrentChange2(val) { // 采购单列表分页
this.pageCurrent2 = val
this.searchTable()
},
addPurchaseOrder() { // 创建采购单
if (this.$refs['form2'] !== undefined) {
this.$refs['form2'].resetFields()
}
this.form2.离线采购计划名称 = ''
this.form2.supplierNameValue = ''
this.title2 = '创建离线采购计划'
this.dialogVisible2 = true
},
submitAddPurchaseOrder() { // 新建采购单
this.$refs['form2'].validate((valid) => {
if (valid) {
addPurchaseOrder(this.form2.离线采购计划名称, this.form2.supplierNameValue).then(response => {
if (response.data[0].result === '1') {
this.$message.success('新建离线采购计划成功')
this.searchTable()
this.dialogVisible2 = false
} else { this.$message.error('新建离线采购计划失败') }
})
} else {
return false
}
})
},
editPurchaseOrder(row) {
if (this.$refs['form2'] !== undefined) {
this.$refs['form2'].resetFields()
}
this.title2 = '编辑离线采购计划'
this.form2.离线采购计划流水号 = row.离线采购计划流水号
this.form2.离线采购计划名称 = row.离线采购计划名称
this.form2.supplierNameValue = row.供应商流水号
this.dialogVisible2 = true
},
submitEditPurchaseOrder() {
this.$refs['form2'].validate((valid) => {
if (valid) {
editPurchaseOrder(this.form2.离线采购计划流水号, this.form2.离线采购计划名称, this.form2.supplierNameValue).then(response => {
if (response.data[0].result === '1') {
this.$message.success('修改离线采购计划成功')
this.searchTable()
this.dialogVisible2 = false
} else { this.$message.error('修改离线采购计划失败') }
})
} else {
return false
}
})
},
deletePurchaseOrder(row) { // 删除采购单
this.$confirm('确定删除该备料计划?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deletePurchaseOrder(row.离线采购计划流水号).then(response => {
if (response.data[0].result === '1') {
this.$message.success('删除成功')
this.searchTable()
} else { this.$message.error('数据占用,删除失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
submitAddMaterial() {
if (!this.离线采购计划流水号) {
this.$message.warning('请选择离线采购计划')
} else if (this.materielGroup.length === 0) {
this.$message.warning('请勾选物料')
} else {
AddMaterial(this.离线采购计划流水号, this.materielGroup, this.Number).then(response => {
if (response.data[0].result === '1') {
this.$message.success('选入成功')
searchMX(this.离线采购计划流水号).then(response => {
this.tableData3 = response.data
})
} else { this.$message.error('选入失败') }
})
}
},
searchMX(row) {
this.离线采购计划流水号 = row.离线采购计划流水号
this.采购单名称 = row.离线采购计划名称
this.采购计划状态 = row.采购计划状态
this.下单单位 = row.供应商名称
this.单号 = row.离线采购计划编号
this.下单日期 = row.下单日期.split(' ')[0]
searchMX(row.离线采购计划流水号).then(response => {
this.tableData3 = response.data
})
},
saveWeight(index, row) {
saveWeight(row.离线采购计划明细流水号, row.成品尺寸, row.备注, row.数量)
},
deleteMX(row) { // 删除采购单明细
this.$confirm('确定移出该材料?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteMX(row.离线采购计划明细流水号).then(response => {
if (response.data[0].result === '1') {
this.$message.success('移出成功')
searchMX(this.离线采购计划流水号).then(response => {
this.tableData3 = response.data
})
} else { this.$message.error('移出失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
exportExcel(row) {
this.$confirm('确定打印备料计划?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const htmlNode = $('#WGBLD').html()
const body = $('body')
body.children().hide()
const printNode = $(htmlNode)
body.append(printNode)
window.print()
body.removeAttr('style')
body.children().not('script').show()
body.children().not('#app').hide()
printNode.remove()
}).catch(res => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
}
}
}
</script>
<style scoped>
.el-select{
width:200px
}
.el-input{
width:200px
}
span{
margin: 10px 0 10px 10px;
}
.searchForm .el-form-item{
margin-bottom: 5px;
}
.el-tag{
margin: 0
}
</style>