avue一个完整页面
作者：互联网
<template>
<div class="app-container">
<div class="sekuai">
<span class="xunjia">其他出库单</span>
</div>
<div class="page-container">
<avue-crud :option="option" :data="data" :page.sync="page" :before-open="beforeOpen" v-model="form"
@row-save="saveOrder" @row-update="saveOrder2" @current-change="currentChange">
<template slot="infoForm" slot-scope="{type,size,row}">
<avue-crud :option="infoOption" :data="infoData" @row-save="saveInfo" @row-update="saveInfo2"
v-model="form2">
</avue-crud>
</template>
</avue-crud>
</div>
</div>
</template>
<script>
import {
generationNumber,
getOtherOutboundOrderDetail,
getOtherOutboundOrderList,
getWarehouseList,
saveOtherOutboundOrder
} from "@/api/otheroutbound";
import {addCustomer} from "@/api/customer";
import otherOutboundOrderOption from "@/option/otherOutboundOrder";
import otherOutboundGoodOption from "@/option/otherOutboundGood";
export default {
data() {
return {
form: {},
form2: {},
page: {
total: 0,
currentPage: 1,
pageSize: 10
},
params: {},
data: [],
infoData: [],
option: otherOutboundOrderOption(this),
infoOption: otherOutboundGoodOption(this),
}
},
methods: {
getWarehouseList() {
getWarehouseList().then(res => {
var column = this.findObject(this.option.column,'warehouse');
column.dicData= res.data.list;
})
},
getList() {
this.loading = true;
const data = Object.assign({
pageNum: this.page.currentPage,
pageSize: this.page.pageSize,
}, this.params)
this.data = [];
getOtherOutboundOrderList(data).then(res => {
const data = res.data
this.loading = false;
const result = data.list;
this.data = result;
this.page.total = data.count;
})
},
getInfo(id) {
getOtherOutboundOrderDetail({id: id}).then(res => {
const data = res.data
this.infoData = data.otherOutboundOrder;
})
},
//子表单初始化
// beforeOpen根据id获取子表单数据
beforeOpen(done, type) {
// alert(this.form.id)
// 如果是edit，则获取子表单数据
if (type === 'edit') {
this.getInfo(this.form.id)
} else if (type === 'add') {
this.infoData = [];
}
done()
},
// beforeClose如果新增，根据仓库生成单号
beforeClose(done, type) {
if (type === 'add') {
generationNumber({warehouseId: this.form.warehouse}).then(res => {
this.form.checkoutCode = res.data.wareHouseNumber;
done()
})
}
done()
},
saveOrder(row, done, loading) {
generationNumber({warehouseId: this.form.warehouse}).then(res => {
// this.form.checkoutCode = res.data.wareHouseNumber;
// $set
this.$set(row, 'checkoutCode', res.data.wareHouseNumber);
const data = Object.assign(row,{
otherOutboundGoodsString: JSON.stringify(this.infoData),
})
console.log(row);
saveOtherOutboundOrder(data).then(() => {
this.$message.success('新增成功')
this.getList();
done();
}).catch(() => {
loading()
})
})
},
saveOrder2(row, done, loading) {
const data = Object.assign({
otherOutboundGoodsString: JSON.stringify(this.infoData),
}, row)
console.log(data);
saveOtherOutboundOrder(data).then(() => {
this.$message.success('新增成功')
this.getList();
done();
}).catch(() => {
loading()
})
},
saveInfo(row, done, loading) {
this.infoData.push(row)
done()
},
saveInfo2(row, Index,done, loading ) {
// 把修改的数据放到infoData中
this.infoData.splice(Index, 1, row)
done()
},
currentChange() {
this.getList();
},
},
mounted() {
this.getList();
this.getWarehouseList();
},
}
otheroutboundgood.js
xport default (safe)=>{
return {
index: true,
align: 'center',
headerAlign: 'center',
border: true,
dialogWidth:'100%',
dialogFullscreen:true,
column: [
// private String repositoryNumber;//存库编码
{
label: "存库编码",
prop: 'repositoryNumber'
},
// repositoryName;//存库名称
{
label: "存库名称",
prop: 'repositoryName'
},
// specifications;//规格
{
label: "规格",
prop: 'specifications'
},
// unit;//单位
{
label: "单位",
prop: 'unit'
},
// goodsNumber;//数量
{
label: "数量",
prop: 'goodsNumber'
},
// price;//单价
{
label: "单价",
prop: 'price'
},
// sumPrice;//金额
{
label: "金额",
prop: 'sumPrice'
},
// brand;//品牌
{
label: "品牌",
prop: 'brand'
},
// minPackages;//最小包装数量
{
label: "最小包装数量",
prop: 'minPackages'
},
// fullPackages;//整箱
{
label: "整箱",
prop: 'fullPackages'
},
// createdbyId;//创建人id
// createdbyName;//创建人姓名
{
label: "创建人姓名",
prop: 'createdbyName'
},
// createdTime;//创建时间
/* {
label: "创建时间",
prop: 'createdTime'
},
// updateTime;//
{
label: "更新时间",
prop: 'updateTime'
},*/
// updateId;//修改人id
// updateName;//最后修改人姓名
/* {
label: "最后修改人姓名",
prop: 'updateName'
},*/
// otherOutboundOrderId;//其他出库单id
/* {
label: "其他出库单id",
prop: 'otherOutboundOrderId'
},*/
],
}
}
otheroutboundorder.js
export default (safe)=>{
return {
index: true,
align: 'center',
headerAlign: 'center',
border: true,
dialogWidth:'100%',
dialogFullscreen:true,
column: [
// 出库单号
{
label: "出库单号",
prop: "checkoutCode",
addDisplay:false,
editDisabled: true,
},
/* // 出库日期
{
label: "出库日期",
prop: "checkoutTime",
type: "date",
format: "yyyy-MM-dd",
},*/
// 仓库
{
label: "仓库",
prop: "warehouse",
type: "select",
editDisabled: true,
dicData:[],
props:{
value: "id",
label: "stockName",
},
rules: [{required: true, message: "请选择仓库", trigger: "blur"}]
},
// type
{
label: "业务类型",
prop: "type",
},
// 业务号
{
label: "业务号",
prop: "businessNumber",
},
// examine_time
{
label: "审核日期",
prop: "examineTime",
},
// 备注
{
label: "备注",
prop: "remark",
},
// customer_name
{
label: "客户名称",
prop: "customerName",
},
// reviewedby_name
{
label: "审核人",
prop: "reviewedbyName",
},
// createdby_name
/* {
label: "创建人",
prop: "createdbyName",
},
// created_time
{
label: "创建时间",
prop: "createdTime",
},*/
// update_name
{
label: "最后修改人",
prop: "updateName",
},
// state
{
label: "状态",
prop: "state",
}
, {
labelWidth: 0,
label: '',
prop: 'info',
span: 24,
hide: true,
formslot: true,
}
]
}
}
标签：avue,true,prop,完整,done,res,label,data,页面 来源： https://www.cnblogs.com/laroux/p/16531789.html