Files
JY1.0/src/views/WorkshopProcurement/OutsourcingMaterialsInvoice/index.vue
liushuai 28177e7cd4 更新
2020-03-09 09:28:04 +08:00

728 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>
<el-row>
<el-input v-model="invoiceNum" placeholder="发票号" size="small" style="margin: 3px 0;width: 140px" clearable/>
<el-input v-show="false" v-model="supplierName0" placeholder="供应商" size="small" style="width:140px;margin-left: 10px" clearable @focus="fetchData"/>
<el-select v-model="gongyingshangValue" placeholder="供应商" style="width: 180px;margin-left: 10px" size="small" filterable clearable @change="searchTable1">
<el-option
v-for="item in gongyingshang"
:key="item.value"
:label="item.label"
:value="item.value"
size="mini"/>
</el-select>
<span v-show="false" class="demonstration">时间段:</span>
<el-date-picker
v-model="dateRange"
size="small"
type="daterange"
align="center"
style="width: 240px;margin: 3px 10px"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"/>
<el-date-picker
v-show="false"
v-model="startTime"
value-format="yyyy-MM-dd"
size="small"
style="width: 180px"
type="date"
placeholder="选择日期"/>
<span v-show="false" class="demonstration">~</span>
<el-date-picker
v-show="false"
v-model="endTime"
value-format="yyyy-MM-dd"
size="small"
style="width: 180px"
type="date"
placeholder="选择日期"/>
<el-tooltip :open-delay="1200" effect="dark" content="查询外购备料发票信息" placement="top">
<el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 10px" @click="total1=0;pageCurrent1=1;pageSize1=30;searchTable1()">查询</el-button>
</el-tooltip>
<el-button class="button111" size="small" icon="el-icon-circle-plus-outline" style="margin-left: 10px" @click="addTable1()">到票</el-button>
</el-row>
</el-card>
<el-card style="float: left">
<el-table
:data="tableData1"
:header-cell-style="{fontFamily:'YouYuan',fontSize:'13px',fontWeight:200}"
size="mini"
style="margin-top: 3px"
height="750px"
stripe
border
highlight-current-row
@row-click="searchTable02">
<el-table-column align="center" label="进程" width="60px">
<template slot-scope="scope">
<span v-if="Number(scope.row.是否请款) === 0" type="warning" size="mini">未请款</span>
<span v-else-if="Number(scope.row.是否请款) === 1" type="primary" size="mini">已请款</span>
</template>
</el-table-column>
<el-table-column align="center" label="发票号" width="110px">
<template slot-scope="scope">
{{ scope.row.发票号 }}
</template>
</el-table-column>
<el-table-column align="center" label="开票时间" prop="开票时间" width="100px">
<template slot-scope="scope">
{{ scope.row.开票时间 | formatTime }}
</template>
</el-table-column>
<el-table-column align="center" label="开票金额(元)" width="110px">
<template slot-scope="scope">
{{ scope.row.开票金额.toFixed(2) }}
</template>
</el-table-column>
<el-table-column align="center" label="供应商" prop="供应商名称" min-width="190px" width="190px" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.供应商名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="备注" width="100px" >
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="210px">
<template slot-scope="scope">
<el-tooltip :open-delay="1200" effect="dark" content="到货单" placement="top" style="margin-left: 0">
<div style="display: inline-block;margin-left: 0px">
<el-button
:disabled="Number(scope.row.是否请款)===1"
type="text"
size="mini"
icon="el-icon-share"
style="margin-left: -15px"
@click="aboutArrival(scope.row)">到货单</el-button>
</div>
</el-tooltip>
<el-button type="text" size="mini" icon="el-icon-download" style="margin-left:8px" @click="downloadExcel(scope.row)">导出</el-button>
<el-tooltip :open-delay="1200" effect="dark" content="编辑" placement="top">
<div style="display: inline-block">
<el-button
:disabled="Number(scope.row.是否请款)===1"
type="text"
size="mini"
icon="el-icon-edit-outline"
style="margin-left: 10px"
@click="editTable1(scope.row)"/>
</div>
</el-tooltip>
<el-tooltip :open-delay="1200" effect="dark" content="删除" placement="top">
<div style="display: inline-block">
<el-button
:disabled="Number(scope.row.是否请款)===1"
type="text"
size="mini"
icon="el-icon-delete"
style="margin-left: 10px"
@click="deleteTable1(scope.row)"/>
</div>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 0px;">
<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 style="float: left;margin-left: 5px">
<el-table :data="gridData" :header-cell-style="{fontFamily:'YouYuan',fontSize:'13px',fontWeight:200}" :summary-method="getSummaries" class="subTableHeader" show-summary border size="mini" style="width: 100%">
<el-table-column width="50" align="center" type="index" label="序号"/>
<el-table-column label="到货单编号" align="center" width="120px">
<template slot-scope="scope">
{{ scope.row.到货单编号 }}
</template>
</el-table-column>
<el-table-column width="100" align="center" label="到货日期">
<template slot-scope="scope">
{{ scope.row.日期.split(' ')[0] }}
</template>
</el-table-column>
<el-table-column label="金额(元)" align="center" width="100" prop="到货金额">
<template slot-scope="scope">
{{ scope.row.到货金额.toFixed(2) }}
</template>
</el-table-column>
<el-table-column min-width="100" width="60" align="center" label="操作">
<template slot-scope="scope">
<el-tooltip effect="dark" content="取消关联" placement="top">
<div style="display: inline-block">
<el-button
type="text"
size="mini"
icon="el-icon-right"
@click="deleteTable10(scope.row)"/>
</div>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog v-el-drag-dialog :visible.sync="dialogVisible1" title="新增备料到票" center style="min-height: 300px" width="800px">
<el-form ref="form1" :model="form1" :rules="rules1" label-width="110px">
<div style="width: 45%;float: left;margin-top: 5px">
<div style="background: white">
<el-form-item label="供应商" prop="supplierNameValue">
<el-select v-model="form1.supplierNameValue" placeholder="供应商" size="small" filterable @change="Name=form1.supplierNameValue;searchTable4()">
<el-option
v-for="item in supplierNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="发票号">
<el-input v-model="form1.Number" size="small" placeholder="发票号"/>
</el-form-item>
<el-form-item label="到票时间" prop="invoiceTime">
<el-date-picker v-model="form1.invoiceTime" size="small" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"/>
</el-form-item>
<el-form-item label="到票金额(元)" prop="money">
<el-input v-positive="'float'" v-model="form1.money" type="float" size="small" placeholder="开票金额"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form1.remark" size="small"/>
</el-form-item>
</div>
</div>
<div style="width: 54%;float: left;margin-left: 5px">
<el-table v-loading="" :data="tableData4" border stripe style="max-height: 460px;" height="280px" size="mini" highlight-current-row @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<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.日期.split(' ')[0] }}
</template>
</el-table-column>
<el-table-column label="金额(元)" align="center">
<template slot-scope="scope">
{{ scope.row.到货金额.toFixed(2) }}
</template>
</el-table-column>
</el-table>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible1 = false">取消</el-button>
<el-button size="small" type="primary" @click="submitAdd1('form1')">确定</el-button>
</div>
</el-dialog>
<el-dialog v-el-drag-dialog :visible.sync="dialogVisible2" title="编辑备料到票" center style="height: 600px" width="400px">
<el-form ref="form1" :model="form1" :rules="rules1" label-width="110px">
<el-form-item label="供应商" prop="supplierNameValue">
<el-select v-model="form1.supplierNameValue" placeholder="供应商" size="small" filterable @change="Name=form1.supplierNameValue;searchTable4()">
<el-option
v-for="item in supplierNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="发票号" prop="money">
<el-input v-model="form1.Number" size="small" placeholder="发票号"/>
</el-form-item>
<el-form-item label="到票时间" prop="invoiceTime">
<el-date-picker v-model="form1.invoiceTime" size="small" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"/>
</el-form-item>
<el-form-item label="到票金额(元)" prop="money">
<el-input v-positive="'float'" v-model="form1.money" type="float" size="small" placeholder="开票金额"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form1.remark" size="small"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible2 = false">取消</el-button>
<el-button size="small" type="primary" @click="submitEdit1('form1')">确定</el-button>
</div>
</el-dialog>
<el-dialog v-el-drag-dialog :visible.sync="dialogVisible" title="关联到货单" center style="min-height: 200px" width="35%">
<el-table v-loading="" :data="tableData4" border stripe style="max-height: 460px;" height="230px" size="mini" highlight-current-row @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<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.日期.split(' ')[0] }}
</template>
</el-table-column>
<el-table-column label="金额(元)" align="center">
<template slot-scope="scope">
{{ scope.row.到货金额.toFixed(2) }}
</template>
</el-table-column>
</el-table>
<span>合计<el-input v-model="SUM" size="mini" style="width: 80px; margin: 10px 10px 0 10px"/></span>
<el-button type="primary" size="small" icon="el-icon-download" style="float:right;margin: 10px 10px 0 10px" @click="addMateriel">关联到货单</el-button>
</el-dialog>
</div>
</template>
<script>
import { searchInvoice, addInvoice, editInvoice, deleteInvoice, searchSupplier, searchInvoiceDetail, searchArriveOrder, addMateriel, deleteInvoiceMX, getGongyingshang } from '@/api/WorkshopProcurement/OutsourcingMaterialsInvoice'
import { mapGetters } from 'vuex'
export default {
name: '', // 发票交接单
data() {
return {
dateRange: '',
pickerOptions: {
shortcuts: [{
text: '上季度',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(end.getTime() - 3600 * 1000 * 24 * 30 * 3)
picker.$emit('pick', [start, end])
}
}, {
text: '过去半年',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(end.getTime() - 3600 * 1000 * 24 * 366 / 2)
picker.$emit('pick', [start, end])
}
}, {
text: '过去一年',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(end.getTime() - 3600 * 1000 * 24 * 365)
picker.$emit('pick', [start, end])
}
}]
},
gongyingshangValue: '',
gongyingshang: [],
startTime: '',
endTime: '',
contractNumValue: '',
supplierName0: '',
contractNums: [],
invoiceNum: '',
invoiceTime: '',
Name: '',
SUM: 0.00,
arrest: [],
pageCurrent1: 1,
pageSize1: 30,
total1: 0,
tableData1: [],
tableData01: [],
tableData4: [],
// dateRange: '',
gridData: [],
check1: 0,
check2: 0,
check3: 0,
check4: 0,
check5: 0,
发票流水号: '',
到货单流水号组: [],
supplierNames: [],
dialogVisible: false,
dialogVisible1: false,
dialogVisible2: false,
title1: '',
form1: {
supplierNameValue: '',
Number: '',
invoiceNumValue: '',
invoiceTime: '',
money: '',
remark: ''
},
rules1: {
supplierNameValue: [{ required: true, message: '请选择供应商' }],
money: [{ required: true, message: '请填写到票金额' }]
}
}
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'name',
'id' // 人员编号
])
},
created() {
this.fetchData()
this.searchTable1()
},
methods: {
getSummaries(param) { // 合计
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计'
} else if (index === 3) {
const values = data.map(item => Number(parseFloat(item['到货金额'])))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
sums[index] = sums[index].toFixed(2) + ' 元'
} else {
sums[index] = 'N/A'
}
}
})
return sums
},
fetchData() {
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].供应商流水号
})
}
})
this.gongyingshangValue = ''
this.gongyingshang = []
getGongyingshang().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.gongyingshang.push({
label: response.data[i].供应商名称,
value: response.data[i].供应商
})
}
})
},
searchTable1() {
this.invoiceNum ? this.check1 = 1 : this.check1 = 0
this.supplierName0 ? this.check2 = 1 : this.check2 = 0
this.gongyingshangValue ? this.check3 = 1 : this.check3 = 0
this.dateRange ? this.check4 = 1 : (this.check4 = 0, this.dateRange = '')
// this.startTime && this.endTime ? this.check4 = 1 : this.check4 = 0
searchInvoice(this.pageCurrent1, this.pageSize1, this.check1, this.invoiceNum, this.check2, this.supplierName0, this.check3, this.gongyingshangValue, this.check4, this.dateRange[0], this.dateRange[1]).then(response => {
for (let j = 0; j < response.data.rows.length; j++) {
response.data.rows[j].开票金额 = parseInt(response.data.rows[j].开票金额 * 100) / 100
if (response.data.rows[j].开票时间 !== null) {
response.data.rows[j].开票时间 = response.data.rows[j].开票时间.substring(0, response.data.rows[j].开票时间.indexOf(' '))
}
if (response.data.rows[j].开票时间 === '1900/1/1') {
response.data.rows[j].开票时间 = ''
}
}
this.tableData1 = response.data.rows
console.log(this.tableData1)
this.total1 = response.data.total
})
},
handleSizeChange1(val) {
this.pageCurrent1 = 1
this.pageSize1 = val
this.searchTable1()
},
handleCurrentChange1(val) {
this.pageCurrent1 = val
this.searchTable1()
},
// 查询到货单
searchTable4() {
console.log(this.Name)
this.Name ? this.check = 1 : this.check = 0
this.dateRange ? this.check1 = 1 : (this.check1 = 0, this.dateRange = '')
searchArriveOrder(this.check, this.Name, this.check1, this.dateRange[0], this.dateRange[1]).then(response => {
this.tableData4 = response.data
})
},
searchTable02(row) { // 查看详情(发票包含的合同)
this.发票流水号 = row.发票流水号
searchInvoiceDetail(this.发票流水号).then(response => {
this.gridData = response.data
})
},
addTable1() {
if (this.$refs['form1'] !== undefined) {
this.$refs['form1'].resetFields()
}
this.tableData4 = []
this.dialogVisible1 = true
console.log(this.supplierNames)
this.form1.supplierNameValue = ''
this.form1.Number = ''
this.form1.invoiceTime = ''
this.form1.money = ''
this.form1.remark = ''
},
submitAdd1(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.arrest.length === 0) {
this.$message.warning('请勾选需要关联的到货单')
} else {
this.到货单流水号组 = []
this.arrest.map(v => {
this.到货单流水号组.push(v.到货单流水号)
})
addInvoice(this.form1.invoiceTime, this.form1.money, this.form1.Number, this.form1.remark, this.form1.supplierNameValue, this.到货单流水号组).then(response => {
if (response.data[0].result === '1') {
this.$message.success('增加成功')
this.dialogVisible1 = false
this.searchTable1()
} else {
this.$message.error('增加失败')
}
})
}
} else {
console.log('error submit!!')
return false
}
})
},
editTable1(row) {
if (this.$refs['form1'] !== undefined) {
this.$refs['form1'].resetFields()
}
this.dialogVisible2 = true
this.form1.invoiceNumValue = row.发票流水号
this.form1.invoiceTime = row.开票时间
this.form1.money = row.开票金额
this.form1.Number = row.发票号
this.form1.remark = row.备注
this.form1.supplierNameValue = parseInt(row.供应商)
if (row.开票时间 === '1900/1/1') {
this.form1.invoiceTime = null
}
},
submitEdit1(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.form1.remark)
editInvoice(this.form1.invoiceNumValue, this.form1.invoiceTime, this.form1.money, this.form1.Number, this.form1.remark, this.form1.supplierNameValue).then(response => {
if (response.data[0].result === '1') {
this.$message.success('编辑成功')
this.dialogVisible2 = false
this.searchTable1()
} else { this.$message.error('编辑失败') }
})
} else {
console.log('error submit!!')
return false
}
})
},
deleteTable1(row) {
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteInvoice(row.发票流水号).then(response => {
console.log(response.data)
if (response.data[0].result === '1') {
this.$message.success('删除成功')
this.searchTable1()
} else { this.$message.error('删除失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
},
aboutArrival(row) {
this.Name = row.供应商
this.发票流水号 = row.发票流水号
this.dialogVisible = true
this.searchTable4()
},
handleSelectionChange(val) {
this.SUM = 0
for (let i = 0; i < val.length; i++) {
this.SUM += parseFloat(val[i].到货金额).toFixed(2)
}
this.arrest = val
},
// 选入
addMateriel() {
if (this.arrest.length === 0) {
this.$message.warning('请勾选需要关联的到货单')
} else {
this.到货单流水号组 = []
this.arrest.map(v => {
this.到货单流水号组.push(v.到货单流水号)
})
addMateriel(this.发票流水号, this.到货单流水号组).then(response => {
if (response.data[0].result === '1') {
this.$message.success('关联成功')
this.dialogVisible = false
searchInvoiceDetail(this.发票流水号).then(response => {
this.gridData = response.data
})
} else { this.$message.error('关联失败') }
})
}
},
deleteTable10(row) {
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteInvoiceMX(row.发票明细流水号, row.到货单流水号).then(response => {
console.log(response.data)
if (response.data[0].result === '1') {
this.$message.success('取消成功')
searchInvoiceDetail(this.发票流水号).then(response => {
this.gridData = response.data
})
} else { this.$message.error('取消失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
},
downloadExcel(row) {
var param = []
param[0] = ['发票流水号', row.发票流水号]
param[1] = ['供应商', row.供应商名称]
var Data = this.CreateData('2001', '报表_备料管理_发票_查询数据', param)
this.exportExcel_NPOI(Data)
// const _ExcelDownLoad = ExcelDownLoad
// this.download(`${_ExcelDownLoad}?Fapiao=${row.发票流水号}&name=${row.供应商名称}`)
},
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
download(url) {
this.getBlob(url, function(blob, filename) {
saveAs(blob, filename)
})
},
getBlob(url, cb) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr, 1111)
const name = xhr.getResponseHeader('content-disposition').split('=')[1]
cb(xhr.response, name)
}
}
xhr.send()
}
}
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs(blob, filename = '下载文件.xls') {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
} else {
var link = document.createElement('a')
var body = document.querySelector('body')
link.href = window.URL.createObjectURL(blob)
link.download = filename
// fix Firefox
link.style.display = 'none'
body.appendChild(link)
link.click()
body.removeChild(link)
window.URL.revokeObjectURL(link.href)
}
}
</script>
<style scoped>
.el-card{
/*margin-bottom: 15px;*/
}
.el-date-editor{
width:150px;
}
.el-select{
width:200px
}
.el-input{
width:200px
}
span{margin: 1px 0px;
}
.searchForm .el-form-item{
margin-top: 1px;
margin-bottom: 1px;
}
</style>
<style lang="scss">
.subTableHeader {
th {
background: #7eaced !important;
color: #FFFFFF;
}
tr.el-table__row td {
background-color: #ffffff !important;
}
tr.el-table__row.el-table__row--striped td {
background: #e9f0f9 !important;
background-color: #e9f0f9;
}
}
</style>
<style lang="scss">
.button111{
background:rgb(253,246,236);
border-color: #ff9759;
color: #ff9759;
&:hover{
background: #ff9759;
border-color: #ff9759;
color: white;
}
&:focus{
background: #ff9759;
border-color: #ff9759;
color: white;
}
}
</style>