给采购入库单据增加详情页面

This commit is contained in:
季圣华 2021-04-16 21:03:37 +08:00
parent be3f42c12d
commit ccbe9dd7e7
5 changed files with 204 additions and 4 deletions

View File

@ -254,9 +254,8 @@ export const JeecgListMixin = {
this.loadData();
},
handleDetail:function(record){
this.$refs.modalForm.edit(record);
this.$refs.modalForm.title="详情";
this.$refs.modalForm.disableSubmit = true;
this.$refs.modalDetail.show(record);
this.$refs.modalDetail.title="详情";
},
/* 导出 */
handleExportXls2(){

View File

@ -62,6 +62,8 @@
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="myHandleDetail(record)">查看</a>
<a-divider type="vertical" />
<a @click="myHandleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
@ -73,10 +75,12 @@
<!-- table区域-end -->
<!-- 表单区域 -->
<purchase-in-modal ref="modalForm" @ok="modalFormOk"></purchase-in-modal>
<bill-detail ref="modalDetail"></bill-detail>
</a-card>
</template>
<script>
import PurchaseInModal from './modules/PurchaseInModal'
import BillDetail from './dialog/BillDetail'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { BillListMixin } from './mixins/BillListMixin'
import JDate from '@/components/jeecg/JDate'
@ -85,6 +89,7 @@
mixins:[JeecgListMixin,BillListMixin],
components: {
PurchaseInModal,
BillDetail,
JDate
},
data () {

View File

@ -0,0 +1,184 @@
<template>
<a-card :bordered="false" class="card-area">
<j-modal
:title="title"
:width="width"
:visible="visible"
:maskClosable="false"
:keyboard="false"
:forceRender="true"
@cancel="handleCancel"
wrapClassName="ant-modal-cust-warp"
style="top:5%;height: 100%;overflow-y: hidden">
<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="供应商">
<a-input v-decorator="['id']" hidden/>
{{model.organName}}
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
{{model.operTimeStr}}
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
{{model.number}}
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24"></a-col>
</a-row>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:pagination="false"
:columns="columns"
:dataSource="dataSource">
</a-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="" style="padding:20px 10px;">
{{model.remark}}
</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="优惠率">
{{model.discount}}%
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款优惠">
{{model.discountMoney}}
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="{xs: { span: 24 },sm: { span: 6 }}" :wrapperCol="wrapperCol" label="优惠后金额">
{{model.discountLastMoney}}
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="其它费用">
{{model.otherMoney}}
</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="结算账户">
{{model.accountName}}
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次付款">
{{model.changeAmount}}
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次欠款">
{{model.debt}}
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24">
</a-col>
</a-row>
</a-form>
</j-modal>
</a-card>
</template>
<script>
import pick from 'lodash.pick'
import { httpAction, getAction } from '@/api/manage'
import { getMpListShort } from "@/utils/util"
import Vue from 'vue'
export default {
name: 'BillDetail',
data () {
return {
title: "详情",
width: '1450px',
visible: false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
form: this.$form.createForm(this),
loading: false,
dataSource: [],
columns: [
{ title: '仓库名称', dataIndex: 'depotName', width: '8%'},
{ title: '条码', dataIndex: 'barCode', width: '10%'},
{ title: '名称', dataIndex: 'name', width: '8%'},
{ title: '规格', dataIndex: 'standard', width: '5%'},
{ title: '型号', dataIndex: 'model', width: '5%'},
{ title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
{ title: '库存', dataIndex: 'stock', width: '5%'},
{ title: '单位', dataIndex: 'unit', width: '4%'},
{ title: '数量', dataIndex: 'operNumber', width: '5%'},
{ title: '单价', dataIndex: 'unitPrice', width: '5%'},
{ title: '含税单价', dataIndex: 'taxUnitPrice', width: '6%'},
{ title: '金额', dataIndex: 'allPrice', width: '5%'},
{ title: '税率(%)', dataIndex: 'taxRate', width: '6%'},
{ title: '税额', dataIndex: 'taxMoney', width: '5%'},
{ title: '价税合计', dataIndex: 'taxLastMoney', width: '6%'},
{ title: '备注', dataIndex: 'remark', width: '5%'}
],
url: {
detailList: '/depotItem/getDetailList'
}
}
},
created () {
},
methods: {
show(record) {
this.visible = true;
this.model = Object.assign({}, record);
this.model.debt = (this.model.discountLastMoney + this.model.otherMoney - this.model.changeAmount).toFixed(2)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'id'))
});
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);
},
requestSubTableData(url, params, success) {
this.loading = true
getAction(url, params).then(res => {
if(res && res.code === 200){
this.dataSource = res.data.rows
typeof success === 'function' ? success(res) : ''
}
}).finally(() => {
this.loading = false
})
},
handleCancel() {
this.close()
},
close() {
this.$emit('close');
this.visible = false;
}
}
}
</script>
<style scoped>
</style>

View File

@ -24,7 +24,6 @@ export const BillListMixin = {
this.handleEdit(record);
},
myHandleDetail(record) {
this.$refs.modalForm.action = "detail";
this.handleDetail(record);
},
handleApprove(record) {

View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: 'FinancialDetail'
}
</script>
<style scoped>
</style>