Files
yudao-ui-admin/src/views/erp/bill/modules/PurchaseInModal.vue
T
2022-05-31 17:38:15 +08:00

564 lines
23 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>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
:maskClosable="false"
:keyboard="false"
:forceRender="true"
v-bind:prefixNo="prefixNo"
switchHelp
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
wrapClassName="ant-modal-cust-warp"
:id="prefixNo"
style="top: 5%; height: 100%; overflow-y: hidden"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row class="form-row" :gutter="24">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="供应商"
data-step="1"
data-title="供应商"
data-intro="供应商必须选择如果发现需要选择的供应商尚未录入可以在下拉框中点击新增供应商进行录入"
>
<a-select
placeholder="选择供应商"
v-decorator="['organId', validatorRules.organId]"
:dropdownMatchSelectWidth="false"
showSearch
>
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0" />
<div
v-if="isTenant"
style="padding: 4px 8px; cursor: pointer"
@mousedown="(e) => e.preventDefault()"
@click="addSupplier"
>
<a-icon type="plus" /> 新增供应商
</div>
</div>
<a-select-option v-for="(item, index) in supList" :key="index" :value="item.id">
{{ item.supplier }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true" />
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="单据编号"
data-step="2"
data-title="单据编号"
data-intro="单据编号自动生成自动累加开头是单据类型的首字母缩写累加的规则是每次打开页面会自动占用一个新的编号"
>
<a-input placeholder="请输入单据编号" v-decorator.trim="['number']" :readOnly="true" />
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="关联订单"
data-step="3"
data-title="关联订单"
data-intro="采购入库单据可以通过关联订单来选择已录入的订单选择之后会自动加载订单的内容然后继续录入仓库等信息完成单据的提交
提交之后原来的采购订单会对应的改变单据状态另外本系统支持订单多次入库只需选择订单之后修改对应的商品数量即可"
>
<a-input-search
placeholder="请选择关联订单"
v-decorator="['linkNumber']"
@search="onSearchLinkNumber"
:readOnly="true"
/>
</a-form-item>
</a-col>
</a-row>
<j-editable-table
id="billModal"
:ref="refKeys[0]"
:loading="materialTable.loading"
:columns="materialTable.columns"
:dataSource="materialTable.dataSource"
:maxHeight="300"
:rowNumber="false"
:rowSelection="true"
:actionButton="true"
:dragSort="true"
@valueChange="onValueChange"
@added="onAdded"
@deleted="onDeleted"
>
<template #buttonAfter>
<a-row
:gutter="24"
style="float: left"
data-step="4"
data-title="扫码录入"
data-intro="此功能支持扫码枪扫描商品物料编码进行录入"
>
<a-col v-if="scanStatus" :md="6" :sm="24">
<a-button @click="scanEnter">扫码录入</a-button>
</a-col>
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px">
<a-input
placeholder="请扫码商品物料编码并回车"
v-model="scanBarCode"
@pressEnter="scanPressEnter"
ref="scanBarCode"
/>
</a-col>
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px">
<a-button @click="stopScan">收起扫码</a-button>
</a-col>
</a-row>
<a-row :gutter="24" style="float: left">
<a-col :md="24" :sm="24">
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting" />批量设置</a-menu-item>
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus" />新增仓库</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button>
</a-dropdown>
</a-col>
</a-row>
<a-button type="primary" @click="clearKh" style="margin-left: 10px">清空空行</a-button>
</template>
</j-editable-table>
<a-row class="form-row" :gutter="24">
<a-col :lg="24" :md="24" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }" label="">
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="['remark']" style="margin-top: 8px" />
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="优惠率"
data-step="5"
data-title="优惠率"
data-intro="针对单据明细中商品总金额进行优惠的比例"
>
<a-input
style="width: 185px"
placeholder="请输入优惠率"
v-decorator.trim="['discount']"
suffix="%"
@keyup="onKeyUpDiscount"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="付款优惠"
data-step="6"
data-title="付款优惠"
data-intro="针对单据明细中商品总金额进行优惠的金额"
>
<a-input
placeholder="请输入付款优惠"
v-decorator.trim="['discountMoney']"
@keyup="onKeyUpDiscountMoney"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="优惠后金额"
data-step="7"
data-title="优惠后金额"
data-intro="针对单据明细中商品总金额进行优惠后的金额"
>
<a-input placeholder="请输入优惠后金额" v-decorator.trim="['discountLastMoney']" :readOnly="true" />
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="其它费用"
data-step="8"
data-title="其它费用"
data-intro="比如快递费油费过路费"
>
<a-input placeholder="请输入其它费用" v-decorator.trim="['otherMoney']" @keyup="onKeyUpOtherMoney" />
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="结算账户"
data-step="9"
data-title="结算账户"
data-intro="如果在下拉框中选择多账户则可以通过多个结算账户进行结算"
>
<a-select
style="width: 185px"
placeholder="选择结算账户"
v-decorator="['accountId']"
:dropdownMatchSelectWidth="false"
allowClear
@select="selectAccount"
>
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0" />
<div
v-if="isTenant"
style="padding: 4px 8px; cursor: pointer"
@mousedown="(e) => e.preventDefault()"
@click="addAccount"
>
<a-icon type="plus" /> 新增结算账户
</div>
</div>
<a-select-option v-for="(item, index) in accountList" :key="index" :value="item.id">
{{ item.name }}
</a-select-option>
</a-select>
<a-tooltip title="多账户明细">
<a-button
type="default"
icon="folder"
style="margin-left: 8px"
size="small"
v-show="manyAccountBtnStatus"
@click="handleManyAccount"
/>
</a-tooltip>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次付款">
<a-input placeholder="请输入本次付款" v-decorator.trim="['changeAmount']" @keyup="onKeyUpChangeAmount" />
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="本次欠款"
data-step="10"
data-title="本次欠款"
data-intro="欠款产生的费用后续可以在付款单进行支付"
>
<a-input placeholder="请输入本次欠款" v-decorator.trim="['debt']" :readOnly="true" />
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24"> </a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="附件"
data-step="11"
data-title="附件"
data-intro="可以上传与单据相关的图片文档支持多个文件"
>
<j-upload v-model="fileList" bizPath="bill"></j-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
<many-account-modal ref="manyAccountModalForm" @ok="manyAccountModalFormOk"></many-account-modal>
<link-bill-list ref="linkBillList" @ok="linkBillListOk"></link-bill-list>
<vendor-modal ref="vendorModalForm" @ok="vendorModalFormOk"></vendor-modal>
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal>
<account-modal ref="accountModalForm" @ok="accountModalFormOk"></account-modal>
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import ManyAccountModal from '../dialog/ManyAccountModal'
import LinkBillList from '../dialog/LinkBillList'
import VendorModal from '../../system/modules/VendorModal'
import DepotModal from '../../system/modules/DepotModal'
import AccountModal from '../../system/modules/AccountModal'
import BatchSetDepot from '../dialog/BatchSetDepot'
import { FormTypes } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { BillModalMixin } from '../mixins/BillModalMixin'
import { getMpListShort, changeListFmtMinus } from "@/utils/util"
import { getAction } from '@/api/manage'
import JUpload from '@/components/jeecg/JUpload'
import JDate from '@/components/jeecg/JDate'
import Vue from 'vue'
export default {
name: "PurchaseInModal",
mixins: [JEditableTableMixin, BillModalMixin],
components: {
ManyAccountModal,
LinkBillList,
VendorModal,
DepotModal,
AccountModal,
BatchSetDepot,
JUpload,
JDate,
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
}
},
data () {
return {
title:"操作",
width: '100%',
moreStatus: false,
// 新增时子表默认添加几行空数据
addDefaultRowNum: 10,
visible: false,
operTimeStr: '',
prefixNo: 'CGRK',
fileList:[],
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
refKeys: ['materialDataTable', ],
activeKey: 'materialDataTable',
materialTable: {
loading: false,
dataSource: [],
columns: [
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [],
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }]
},
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true,
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal },
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal },
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal },
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal },
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal },
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true },
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal },
{ title: '序列号', key: 'snList', width: '12%', type: FormTypes.input, placeholder: '多个序列号请用逗号隔开',
validateRules: [{ pattern: /^\S{1,100}$/, message: '请小于100位字符' }]
},
{ title: '批号', key: 'batchNumber', width: '5%', type: FormTypes.input },
{ title: '有效期', key: 'expirationDate',width: '7%', type: FormTypes.date },
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal },
{ title: '原数量', key: 'preNumber', width: '4%', type: FormTypes.normal },
{ title: '已入库', key: 'finishNumber', width: '4%', type: FormTypes.normal },
{ title: '数量', key: 'operNumber', width: '4%', type: FormTypes.inputNumber, statistics: true,
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{ title: '单价', key: 'unitPrice', width: '4%', type: FormTypes.inputNumber, validateRules: [{ required: true, message: '${title}不能为空' }]},
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true },
{ title: '税率', key: 'taxRate', width: '3%', type: FormTypes.inputNumber,placeholder: '%'},
{ title: '税额', key: 'taxMoney', width: '5%', type: FormTypes.inputNumber, readonly: true, statistics: true },
{ title: '价税合计', key: 'taxLastMoney', width: '5%', type: FormTypes.inputNumber, statistics: true },
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input }
]
},
confirmLoading: false,
validatorRules:{
operTime:{
rules: [
{ required: true, message: '请输入单据日期!' }
]
},
organId:{
rules: [
{ required: true, message: '请选择供应商!' }
]
},
accountId:{
rules: [
{ required: true, message: '请选择结算账户!' }
]
}
},
url: {
add: '/erp/depotHead/addDepotHeadAndDetail',
edit: '/erp/depotHead/updateDepotHeadAndDetail',
detailList: '/erp/depotItem/getDetailList'
}
}
},
created () {
},
methods: {
//调用完edit()方法之后会自动调用此方法
editAfter() {
this.changeColumnHide()
this.changeFormTypes(this.materialTable.columns, 'snList', 0)
this.changeFormTypes(this.materialTable.columns, 'batchNumber', 0)
this.changeFormTypes(this.materialTable.columns, 'expirationDate', 0)
this.changeFormTypes(this.materialTable.columns, 'preNumber', 0)
this.changeFormTypes(this.materialTable.columns, 'finishNumber', 0)
if (this.action === 'add') {
this.addInit(this.prefixNo)
this.fileList = []
} else {
this.model.operTime = this.model.operTimeStr
this.model.debt = (this.model.discountLastMoney + this.model.otherMoney - this.model.changeAmount).toFixed(2)
if(this.model.accountId == null) {
this.model.accountId = 0
this.manyAccountBtnStatus = true
this.accountIdList = this.model.accountIdList
this.accountMoneyList = this.model.accountMoneyList
} else {
this.manyAccountBtnStatus = false
}
this.fileList = this.model.fileName
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'organId', 'operTime', 'number', 'linkNumber', 'remark',
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount','debt'))
});
// 加载子表数据
let params = {
headerId: this.model.id,
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性
}
let url = this.readOnly ? this.url.detailList : this.url.detailList;
this.requestSubTableData(url, params, this.materialTable);
}
//复制新增单据-初始化单号和日期
if(this.action === 'copyAdd') {
this.model.id = ''
this.model.tenantId = ''
this.copyAddInit(this.prefixNo)
}
this.initSupplier()
this.initDepot()
this.initAccount()
},
//提交单据时整理成formData
classifyIntoFormData(allValues) {
let totalPrice = 0
let billMain = Object.assign(this.model, allValues.formValue)
let detailArr = allValues.tablesValue[0].values
billMain.type = '入库'
billMain.subType = '采购'
billMain.defaultNumber = billMain.number
for(let item of detailArr){
totalPrice += item.allPrice-0
}
billMain.totalPrice = 0-totalPrice
billMain.changeAmount = 0-billMain.changeAmount
if(billMain.accountId === 0) {
billMain.accountId = ''
}
this.accountMoneyList = changeListFmtMinus(this.accountMoneyList)
billMain.accountIdList = this.accountIdList.length>0 ? JSON.stringify(this.accountIdList) : ""
billMain.accountMoneyList = this.accountMoneyList.length>0 ? JSON.stringify(this.accountMoneyList) : ""
if(this.fileList && this.fileList.length > 0) {
billMain.fileName = this.fileList
}
if(this.model.id){
billMain.id = this.model.id
}
return {
info: billMain,
rows: detailArr,
}
},
onSearchLinkNumber() {
this.$refs.linkBillList.show('其它', '采购订单', '供应商', "1,3")
this.$refs.linkBillList.title = "选择采购订单"
},
linkBillListOk(selectBillRows) {
console.log(selectBillRows,'selectBillRows')
this.changeFormTypes(this.materialTable.columns, 'preNumber', 1)
this.changeFormTypes(this.materialTable.columns, 'finishNumber', 1)
if(selectBillRows && selectBillRows.length>0) {
let record = selectBillRows[0]
this.$nextTick(() => {
this.form.setFieldsValue({
'organId': record.organId,
'linkNumber': record.number,
'remark': record.remark,
'discountLastMoney': record.totalPrice,
'changeAmount': record.totalPrice,
'operTime': record.operTimeStr
})
});
// 加载子表数据
let params = {
headerId: record.id,
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性
}
this.requestSubTableDataEx(this.url.detailList, params, this.materialTable);
}
},
/** 查询某个tab的数据,给明细里面的价税合计赋值 */
requestSubTableDataEx(url, params, tab, success) {
tab.loading = true
getAction(url, params).then(res => {
if(res && res.code === 200){
let list = res.data.rows
let listEx = []
let discountLastMoney = 0
for(let j=0; j<list.length; j++){
let info = list[j];
if(info.preNumber) {
info.operNumber = info.preNumber - info.finishNumber
// info.allPrice = info.allPrice;
// info.allPrice = info.operNumber * info.unitPrice-0;
discountLastMoney += info.allPrice
}
info.taxMoney = 0
info.taxLastMoney = info.allPrice
listEx.push(info)
this.changeColumnShow(info)
}
tab.dataSource = listEx
//给优惠后金额重新赋值
if(discountLastMoney) {
this.$nextTick(() => {
this.form.setFieldsValue({
'discountLastMoney': discountLastMoney,
'changeAmount': discountLastMoney
})
});
}
typeof success === 'function' ? success(res) : ''
}
}).finally(() => {
tab.loading = false
})
}
}
}
</script>
<style scoped>
</style>