ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

avue一个完整页面

2022-07-29 12:03:29  阅读:219  来源: 互联网

标签:avue true prop 完整 done res label data 页面


<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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有