vol-vue框架基本使用

vol框架官方链接：vol-vue (volcore.xyz)；

展示一个由代码生成的页面。vue文件如下：

<template>
    <div>
        <view-grid :columns="columns"
                   :detail="detail"
                   :editFormFileds="editFormFileds"
                   :editFormOptions="editFormOptions"
                   :searchFormFileds="searchFormFileds"
                   :searchFormOptions="searchFormOptions"
                   :table="table"
                   :extend="extend">
        </view-grid>
    </div>
</template>

<script>
    import gridExtend from "../doc_viewGrid/doc_viewGirdExtension.js";
    import ViewGrid from "@/components/basic/ViewGrid.vue";
    var vueParam = {
        components: {
            ViewGrid
        },
        data() {
            return {
                table: {
                    key: 'Order_Id', //排序字段
                    footer: "Foots",
                    cnName: '主从表ViewGird组件使用',//表中文名
                    name: 'SellOrder',//表名(代码生码的别名)
                    url: "/SellOrder/",//后台控制名
                    sortName: "CreateDate" //后台排序字段
                },
                //所以自定义扩展对象，包括：方法、属性、自定义vue组件
                extend: gridExtend,
                //编辑字段
                editFormFileds: {"OrderType":"","TranNo":"","Qty":"","SellNo":"","Remark":"","Creator":"","CreateDate":"","ModifyDate":""},
                //编辑配置
                editFormOptions: [[{"dataKey":"ordertype","title":"订单类型","required":true,"field":"OrderType","type":"select"},
                               {"type":"text","title":"运单号","required":true,"field":"TranNo"},
                               {"type":"number","title":"销售数量","required":true,"field":"Qty"}],
                              [ {"type":"text","title":"销售订单号","required":true,"field":"SellNo"},{"type":"text","title":"创建人","field":"Creator","disabled":true},
                               {"type":"datetime","title":"创建时间","field":"CreateDate","disabled":true}
                             ],
                              [{"title":"备注","field":"Remark","colSize":12,"type":"textarea"}
                              ]],
                //查询字段,第一个字段为快捷查询字段
                searchFormFileds: {"OrderType":"","TranNo":"","SellNo":"","AuditStatus":"","AuditDate":"","Auditor":"","Creator":"","CreateDate":"","ModifyDate":""},
                //查询配置
                searchFormOptions: [
                    [
                        {"title":"运单号","field":"TranNo"},
                        {"type":"text","title":"销售订单号","field":"SellNo"},
                        {"dataKey":"ordertype","title":"订单类型","field":"OrderType","type":"select"}
                    ],
                    [
                        {"columnType":"int","dataKey":"audit","title":"审核状态","field":"AuditStatus","type":"select"},
                        {"title":"审核时间","field":"AuditDate","type":"datetime"},
                        {"type":"text","title":"审核人","field":"Auditor"}
                    ],
                    [
                        {"type":"text","title":"创建人","field":"Creator"},
                        {"title":"创建时间","field":"CreateDate","type":"datetime"},
                        {"title":"修改时间","field":"ModifyDate","type":"datetime"}
                    ]
                ],
                //主表table配置
                columns: [ //列参数为voltable组件的配置
                       {field:'Order_Id',title:'Id',type:'string',width:90,hidden:true,readonly:true,require:true},
                       {field:'OrderType',title:'订单类型',type:'int',bind:{ key:'ordertype',data:[]},width:90,require:true,sortable:true},
                       {field:'TranNo',title:'运单号(点击可弹出框)',type:'string',link:true,width:140,require:true},
                       {field:'SellNo',title:'销售订单号',type:'string',width:140,require:true},
                       {field:'Qty',title:'销售数量',type:'int',width:90,require:true},
                       {field:'Remark',title:'备注',type:'string',width:170},
                       {field:'Creator',title:'创建人',type:'string',width:100,readonly:true},
                       {field:'CreateDate',title:'创建时间',type:'datetime',width:90,readonly:true,sortable:true},
                       {field:'ModifyID',title:'ModifyID',type:'int',width:80,hidden:true}
                    ],
                //从表明细表配置
                detail: {
                    cnName:"订单明细",//明细表中文名
                    //明细表table配置
                    columns: [
                        {field:'OrderList_Id',title:'OrderList_Id',type:'string',width:90,hidden:true,require:true},
                       {field:'Order_Id',title:'订单Id',type:'string',width:90,hidden:true,readonly:true,require:true},
                       {field:'ProductName',title:'商品名称',type:'string',bind:{ key:'pn',data:[]},width:150,edit:{type:'select'},require:true,sortable:true},
                       {field:'MO',title:'批次',type:'string',width:100,edit:{type:''},require:true},
                       {field:'Qty',title:'数量',type:'int',width:90,edit:{type:'drop'},require:true},
                       {field:'Weight',title:'重量',type:'decimal',width:90,edit:{type:''}},
                       {field:'Remark',title:'备注',type:'string',width:120,edit:{type:''}},
                       {field:'CreateID',title:'CreateID',type:'int',width:80,hidden:true},
                       {field:'Creator',title:'创建人',type:'string',width:130},
                       {field:'CreateDate',title:'创建时间',type:'datetime',width:90,sortable:true},
                       {field:'ModifyID',title:'ModifyID',type:'int',width:80,hidden:true},
                       {field:'Modifier',title:'修改人',type:'string',width:100},
                       {field:'ModifyDate',title:'修改时间',type:'datetime',width:90,sortable:true}
                    ],
                    //明细表排序字段
                    sortName: "CreateDate",
                    //明细表主键
                    key:"OrderList_Id"
                }
            };
        }
    };
    export default vueParam;
</script>

对应的js文件，代码：

let extension = {
    components: {//动态扩充组件或组件路径
        gridHeader: '',//自定义扩展查询界面header部份
        gridBody: "",//扩展同上
        gridFooter: "",//扩展同上
        modelHeader: '',//扩展同上
        modelBody: "",//自定义扩展弹出框界面body部份
        modelFooter: ''//扩展同上
    },
    tableAction:'SellOrder',//设置获取指定表的权限按钮
    text: "此处为主从表扩展示例,doc_viewGird.vue与doc_viewGirdExtension.js可由代码生成,其他两个文件自己写的扩展", //查询界面文字描述
    buttons: { //扩展的按钮
        //查询界面的按钮
        view: [],
        //弹出框的按钮，配置同上
        box: [],
        //弹出框的明细table按钮，配置同上
        detail: []
    },
    methods: {
        //事件扩展 拿到vue文件中editFormOptions下的所有属性
        getFormOption(field) {
            let option;
            this.editFormOptions.forEach(x => {
              x.forEach(item => {
                if (item.field == field) {
                  option = item;
                }
              });
            });
            return option;
          },
        onInit() {
            // 获取editFormOptions中的某一属性
            let OrderType = this.getFormOption("OrderType") // 拿到了 订单类型 就可以对他进行一系列操作
            // 给select类型的添加change事件 进行监听 可进行一系列操作
            OrderType.onChange = (val,item) => {
                console.log(val,item)
            }
        },
        onInited() {},
        //其他可以在此处定义的事件，全部事件可参照serviceFilter.js或SellOrder.js
        mounted() {
            console.log('mounted');
        },
        searchBefore(param) { //查询ViewGird表数据前,param查询参数
            console.log('表' + this.table.cnName + '触发loadTableBefore');
            return true;
        },
        searchAfter(param, result) { //查询ViewGird表数据后param查询参数,result回返查询的结果
            console.log('表' + this.table.cnName + '触发loadTableAfter');
            return true;
        },
        searchDetailBefore(param) {//查询从表表数据前,param查询参数
            console.log(this.detailOptions.cnName + '触发loadDetailTableBefore');
            return true;
        },
        searchDetailAfter(param, data) {//查询从表后param查询参数,result回返查询的结果
            console.log(this.detailOptions.cnName + '触发loadDetailTableAfter');
            return true;
        },
        delBefore(ids, rows) { //查询界面的表删除前 ids为删除的id数组,,rows删除的行
            return true;
        },
        delAfter(result) {//查询界面的表删除后
            return true;
        },
         async modelOpenBeforeAsync(row) { //点击编辑/新建按钮弹出框前，可以在此处写逻辑，如，从后台获取数据  常用
     //2021.01.10增加
      if(row){
        console.log("编辑操作")
      }else{
        console.log("新建操作")
      }
      //打开弹出框前，http请求同步执行
      // var _result = await this.http.post("url", {}, true).then(result => {
        
      //   _result = result;
      // })
      // console.log(result);
      //返回false不会弹出框 
      //this.$message.error("不能打开弹出框 ");
      return true;
    },
    modelOpenBefore (row) { //点击编辑/新建按钮弹出框前，可以在此处写逻辑，如，从后台获取数据 常用

    },
    modelOpenAfter (row) {  //点击编辑/新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
      this.$message.error("此处是打开弹出框后事件,当前操作：" + this.currentAction + "，你可以在此处编写逻辑，如，从后台获取数据"); 常用
    },
};
export default extension;

根据js中的扩展方法getFormOption()对vue文件中的变量进行选中，从而实现js的编写。