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,
            }
        ]
    }
}