|
@@ -11,7 +11,7 @@
|
|
|
<a-spin :spinning="spinning" tip="Loading...">
|
|
|
<div class="common-main">
|
|
|
<a-alert type="info" v-if="detail.length" style="margin-bottom:10px">
|
|
|
- <div slot="message">箭冠汽配西安大兴店,共 {{ detail && detail.length }} 个出库单,产品款数合计 <span>1266.45</span> ,产品数量合计 <span>158</span>。</div>
|
|
|
+ <div slot="message">箭冠汽配西安大兴店,共 {{ detail && detail.length }} 个出库单,产品款数合计 <span>{{ productTotal&&productTotal.totalCategory }}</span> ,产品数量合计 <span>{{ productTotal&&productTotal.totalQty }}</span>。</div>
|
|
|
</a-alert>
|
|
|
<div class="toolsBar">
|
|
|
<a-form-model
|
|
@@ -23,31 +23,36 @@
|
|
|
>
|
|
|
<a-row>
|
|
|
<a-col span="12">
|
|
|
- <a-form-model-item label="托运日期">
|
|
|
- <a-date-picker v-model="sendDate" :locale="locale"/>
|
|
|
+ <a-form-model-item label="托运日期" prop="sendDate">
|
|
|
+ <a-date-picker v-model="form.sendDate" :locale="locale"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col span="12">
|
|
|
<a-form-model-item label="目的地">
|
|
|
- <a-input placeholder="请输入目的地"></a-input>
|
|
|
+ <a-input placeholder="请输入目的地" v-model.trim="form.customerAddress"></a-input>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col span="12">
|
|
|
- <a-form-model-item label="收货人">
|
|
|
- <a-input placeholder="请输入收货人"></a-input>
|
|
|
+ <a-form-model-item label="收货人" prop="customerCacateName">
|
|
|
+ <a-input placeholder="请输入收货人" v-model.trim="form.customerCacateName"></a-input>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col span="12">
|
|
|
- <a-form-model-item label="电话">
|
|
|
- <a-input placeholder="请输入电话"></a-input>
|
|
|
+ <a-form-model-item label="电话" prop="customerCacatePhone">
|
|
|
+ <a-input placeholder="请输入电话" v-model.trim="form.customerCacatePhone"></a-input>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="24">
|
|
|
+ <a-form-model-item label="详细地址" prop="customerAddressDetail" :label-col="{span:3}" :wrapper-col="{span:19}">
|
|
|
+ <a-textarea placeholder="请输入详细地址" v-model.trim="form.customerAddressDetail"></a-textarea>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col span="12">
|
|
|
<a-form-model-item label="付款方式">
|
|
|
<v-select
|
|
|
- v-model="form.settleStyle"
|
|
|
- ref="settleStyle"
|
|
|
- code="SETTLE_STYLE"
|
|
|
+ v-model="form.payType"
|
|
|
+ ref="payType"
|
|
|
+ code="SEND_BILL_PAY_TYPE"
|
|
|
placeholder="请选择付款方式"
|
|
|
allowClear></v-select>
|
|
|
</a-form-model-item>
|
|
@@ -55,21 +60,16 @@
|
|
|
<a-col span="12">
|
|
|
<a-form-model-item label="交货方式">
|
|
|
<v-select
|
|
|
- v-model="form.settleStyle"
|
|
|
- ref="settleStyle"
|
|
|
- code="SETTLE_STYLE"
|
|
|
+ v-model="form.handoverType"
|
|
|
+ ref="handoverType"
|
|
|
+ code="SEND_BILL_HANDOVER_TYPE"
|
|
|
placeholder="请选择交货方式"
|
|
|
allowClear></v-select>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item label="详细地址">
|
|
|
- <a-textarea placeholder="请输入详细地址"></a-textarea>
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
<a-col span="12">
|
|
|
<a-form-model-item label="运费合计">
|
|
|
- <a-input disabled placeholder="请输入运费合计"></a-input>
|
|
|
+ <a-input disabled placeholder="请输入运费合计" v-model.trim="form.totalSendAmount"></a-input>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -79,39 +79,67 @@
|
|
|
<a-table :columns="columns" :pagination="false" :scroll="{ y: 200 }" :data-source="tableData" bordered>
|
|
|
<!-- 物品名称 -->
|
|
|
<template slot="goodName" slot-scope="text, record">
|
|
|
- <a-input v-model.trim="record.goodName"></a-input>
|
|
|
+ <a-select v-model="record.goodsName" style="width: 100%">
|
|
|
+ <a-select-option value="易损件">
|
|
|
+ 易损件
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value="电池">
|
|
|
+ 电池
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value="机油">
|
|
|
+ 机油
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
</template>
|
|
|
<!-- 数量 -->
|
|
|
<template slot="qty" slot-scope="text, record">
|
|
|
- <a-input-number style="width: 100%;" v-model="record.qty" :min="1" :max="999999"></a-input-number>
|
|
|
+ <a-input-number style="width: 100%;" :precision="0" v-model="record.goodsQty" :min="0" :max="999999"></a-input-number>
|
|
|
</template>
|
|
|
<!-- 体积 -->
|
|
|
<template slot="volume" slot-scope="text, record">
|
|
|
- <a-input-number style="width: 100%;" v-model="record.volume" :min="1" :max="999999"></a-input-number>
|
|
|
+ <a-input-number style="width: 100%;" :precision="2" v-model="record.goodsVolume" :min="0" :max="999999"></a-input-number>
|
|
|
</template>
|
|
|
<!-- 重量 -->
|
|
|
<template slot="weight" slot-scope="text, record">
|
|
|
- <a-input-number style="width: 100%;" v-model="record.weight" :min="1" :max="999999"></a-input-number>
|
|
|
+ <a-input-number style="width: 100%;" :precision="2" v-model="record.goodsWeight" :min="0" :max="999999"></a-input-number>
|
|
|
</template>
|
|
|
<!-- 计费单价 -->
|
|
|
<template slot="price" slot-scope="text, record">
|
|
|
- <a-input-number style="width: 100%;" v-model="record.price" :min="1" :max="999999"></a-input-number>
|
|
|
+ <a-input-number style="width: 100%;" :precision="2" v-model="record.unitPrice" :min="0" :max="999999"></a-input-number>
|
|
|
</template>
|
|
|
<!-- 运费 -->
|
|
|
<template slot="freight" slot-scope="text, record">
|
|
|
- <a-input-number style="width: 100%;" v-model="record.freight" :min="1" :max="999999"></a-input-number>
|
|
|
+ <a-input-number
|
|
|
+ style="width: 100%;"
|
|
|
+ :precision="2"
|
|
|
+ @change="amountChange('transportAmount',record)"
|
|
|
+ v-model="record.transportAmount"
|
|
|
+ :min="0"
|
|
|
+ :max="999999"></a-input-number>
|
|
|
</template>
|
|
|
<!-- 保价 -->
|
|
|
<template slot="supportValue" slot-scope="text, record">
|
|
|
- <a-input-number style="width: 100%;" v-model="record.supportValue" :min="1" :max="999999"></a-input-number>
|
|
|
+ <a-input-number style="width: 100%;" :precision="2" v-model="record.supportValue" :min="0" :max="999999"></a-input-number>
|
|
|
</template>
|
|
|
<!-- 送货费 -->
|
|
|
<template slot="deliveryExpense" slot-scope="text, record">
|
|
|
- <a-input-number style="width: 100%;" v-model="record.deliveryExpense" :min="1" :max="999999"></a-input-number>
|
|
|
+ <a-input-number
|
|
|
+ style="width: 100%;"
|
|
|
+ :precision="2"
|
|
|
+ @change="amountChange('sendAmount',record)"
|
|
|
+ v-model="record.sendAmount"
|
|
|
+ :min="0"
|
|
|
+ :max="999999"></a-input-number>
|
|
|
</template>
|
|
|
<!-- 其他 -->
|
|
|
<template slot="other" slot-scope="text, record">
|
|
|
- <a-input-number style="width: 100%;" v-model="record.other" :min="1" :max="999999"></a-input-number>
|
|
|
+ <a-input-number
|
|
|
+ style="width: 100%;"
|
|
|
+ :precision="2"
|
|
|
+ @change="amountChange('otherAmount',record)"
|
|
|
+ v-model="record.otherAmount"
|
|
|
+ :min="0"
|
|
|
+ :max="999999"></a-input-number>
|
|
|
</template>
|
|
|
<!-- 操作 -->
|
|
|
<template slot="action" slot-scope="text, record, index">
|
|
@@ -142,6 +170,7 @@
|
|
|
import moment from 'moment'
|
|
|
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
|
|
|
import { STable, VSelect } from '@/components'
|
|
|
+import { sendBillInsert } from '@/api/sendBill'
|
|
|
export default {
|
|
|
name: 'CommonModal',
|
|
|
components: { STable, VSelect },
|
|
@@ -174,28 +203,41 @@ export default {
|
|
|
disabled: false,
|
|
|
spinning: false,
|
|
|
form: {
|
|
|
+ 'stockOutSnList': [], // 出库单列表
|
|
|
+ 'sendDate': moment(), // 托运时间
|
|
|
+ 'customerAddress': '', // 目的地
|
|
|
+ 'customerAddressDetail': '', // 详细地址
|
|
|
+ 'customerCacateName': '', // 收货人
|
|
|
+ 'customerCacatePhone': '', // 收货人电话
|
|
|
+ 'payType': '', // 收款方式
|
|
|
+ 'handoverType': '', // 发货方式
|
|
|
+ 'totalSendAmount': '', // 发货总费用
|
|
|
+ 'sendBillDetailList': [] // 发货列表
|
|
|
},
|
|
|
rules: {
|
|
|
- id: [{ required: true, message: '请选择产品分类', trigger: 'change' }]
|
|
|
+ sendDate: [{ required: true, message: '请选择托运日期', trigger: 'change' }],
|
|
|
+ customerCacateName: [{ required: true, message: '请输入收货人', trigger: 'change' }],
|
|
|
+ customerCacatePhone: [{ required: true, message: '请输入电话', trigger: 'change' }],
|
|
|
+ customerAddressDetail: [{ required: true, message: '请输入详细地址', trigger: 'change' }]
|
|
|
},
|
|
|
formItemLayout: {
|
|
|
labelCol: { span: 6 },
|
|
|
wrapperCol: { span: 15 }
|
|
|
},
|
|
|
detail: [],
|
|
|
- sendDate: moment(),
|
|
|
+ productTotal: null,
|
|
|
tableData: [],
|
|
|
columns: [
|
|
|
{ title: '序号', dataIndex: 'no', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
- { title: '货物名称', dataIndex: 'goodName', scopedSlots: { customRender: 'goodName' }, width: '10%', align: 'center' },
|
|
|
- { title: '件数', dataIndex: 'qty', scopedSlots: { customRender: 'qty' }, width: '8%', align: 'center' },
|
|
|
- { title: '体积(m³)', dataIndex: 'volume', scopedSlots: { customRender: 'volume' }, width: '8%', align: 'center' },
|
|
|
- { title: '重量(kg)', dataIndex: 'weight', scopedSlots: { customRender: 'weight' }, width: '8%', align: 'center' },
|
|
|
- { title: '计费单价(元)', dataIndex: 'price', scopedSlots: { customRender: 'price' }, width: '9%', align: 'center' },
|
|
|
- { title: '运费(元)', dataIndex: 'freight', scopedSlots: { customRender: 'freight' }, width: '9%', align: 'center' },
|
|
|
+ { title: '货物名称', dataIndex: 'goodsName', scopedSlots: { customRender: 'goodName' }, width: '10%', align: 'center' },
|
|
|
+ { title: '件数', dataIndex: 'goodsQty', scopedSlots: { customRender: 'qty' }, width: '8%', align: 'center' },
|
|
|
+ { title: '体积(m³)', dataIndex: 'goodsVolume', scopedSlots: { customRender: 'volume' }, width: '8%', align: 'center' },
|
|
|
+ { title: '重量(kg)', dataIndex: 'goodsWeight', scopedSlots: { customRender: 'weight' }, width: '8%', align: 'center' },
|
|
|
+ { title: '计费单价(元)', dataIndex: 'unitPrice', scopedSlots: { customRender: 'price' }, width: '9%', align: 'center' },
|
|
|
+ { title: '运费(元)', dataIndex: 'transportAmount', scopedSlots: { customRender: 'freight' }, width: '9%', align: 'center' },
|
|
|
{ title: '保价(万)', dataIndex: 'supportValue', scopedSlots: { customRender: 'supportValue' }, width: '9%', align: 'center' },
|
|
|
- { title: '送货费', dataIndex: 'deliveryExpense', scopedSlots: { customRender: 'deliveryExpense' }, width: '9%', align: 'center' },
|
|
|
- { title: '其他', dataIndex: 'other', scopedSlots: { customRender: 'other' }, width: '8%', align: 'center' },
|
|
|
+ { title: '送货费', dataIndex: 'sendAmount', scopedSlots: { customRender: 'deliveryExpense' }, width: '9%', align: 'center' },
|
|
|
+ { title: '其他', dataIndex: 'otherAmount', scopedSlots: { customRender: 'other' }, width: '8%', align: 'center' },
|
|
|
{ title: '合计', dataIndex: 'totalAmount', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
|
|
|
{ title: '操作', scopedSlots: { customRender: 'action' }, width: '8%', align: 'center' }
|
|
|
]
|
|
@@ -204,6 +246,36 @@ export default {
|
|
|
methods: {
|
|
|
setData (data) {
|
|
|
this.detail = data
|
|
|
+ this.getProductTotal()
|
|
|
+ },
|
|
|
+ // 出库单数据统计
|
|
|
+ getProductTotal () {
|
|
|
+ const ret = {
|
|
|
+ totalCategory: 0,
|
|
|
+ totalQty: 0
|
|
|
+ }
|
|
|
+ const stockOutSnList = []
|
|
|
+ this.detail.map(item => {
|
|
|
+ ret.totalCategory = ret.totalCategory + item.productTotalCategory
|
|
|
+ ret.totalQty = ret.totalQty + item.productTotalQty
|
|
|
+ stockOutSnList.push(item.stockOutSn)
|
|
|
+ })
|
|
|
+ this.form.stockOutSnList = stockOutSnList
|
|
|
+ this.productTotal = ret
|
|
|
+ },
|
|
|
+ // 计算运费合计
|
|
|
+ getTotalSendAmount () {
|
|
|
+ let ret = 0
|
|
|
+ this.tableData.map(item => {
|
|
|
+ ret = ret + Number(item.totalAmount || 0)
|
|
|
+ })
|
|
|
+ this.form.totalSendAmount = ret.toFixed(2)
|
|
|
+ },
|
|
|
+ // 计算每行发货费用合计
|
|
|
+ amountChange (key, record) {
|
|
|
+ record.totalAmount = (record.transportAmount || 0) + (record.sendAmount || 0) + (record.otherAmount || 0)
|
|
|
+ record.totalAmount = Number(record.totalAmount).toFixed(2)
|
|
|
+ this.getTotalSendAmount()
|
|
|
},
|
|
|
// 删除
|
|
|
handleDel (row, index) {
|
|
@@ -211,19 +283,51 @@ export default {
|
|
|
this.tableData.map((item, i) => {
|
|
|
item.no = i + 1
|
|
|
})
|
|
|
+ this.getTotalSendAmount()
|
|
|
},
|
|
|
// 添加
|
|
|
addItem () {
|
|
|
const len = this.tableData.length
|
|
|
this.tableData.push({
|
|
|
- no: len + 1,
|
|
|
- goodName: '',
|
|
|
- qty: ''
|
|
|
+ 'no': len + 1,
|
|
|
+ 'goodsName': '',
|
|
|
+ 'goodsQty': '',
|
|
|
+ 'goodsVolume': '',
|
|
|
+ 'goodsWeight': '',
|
|
|
+ 'unitPrice': '',
|
|
|
+ 'transportAmount': '',
|
|
|
+ 'supportValue': '',
|
|
|
+ 'sendAmount': '',
|
|
|
+ 'otherAmount': '',
|
|
|
+ 'totalAmount': ''
|
|
|
})
|
|
|
},
|
|
|
// 确定
|
|
|
handleCommonOk () {
|
|
|
- this.$emit('ok')
|
|
|
+ const _this = this
|
|
|
+ if (_this.form.stockOutSnList.length == 0) {
|
|
|
+ _this.$message.info('请选择出库单!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ _this.form.sendBillDetailList = _this.tableData
|
|
|
+ if (valid) {
|
|
|
+ if (_this.form.sendBillDetailList.length == 0) {
|
|
|
+ _this.$message.info('请新增发货明细!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ console.log(_this.form)
|
|
|
+ sendBillInsert(_this.form).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$emit('ok')
|
|
|
+ _this.isShow = false
|
|
|
+ _this.$message.success(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
// 取消
|
|
|
handleCommonCancel () {
|