jemin_new_test.git

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
        <title>参数配置</title>
        
        <script type="text/javascript">
            function loadJsCss(callback) {
                var jscss_urls = [
                    {id: "css_m1", type: "css", url: "root/css/tree.css"},
                ];
                window.top.initJsCss(document, jscss_urls, callback);
            };
            
            function initVue() {
                new ListVue({
                    el: "#vbody",
                    data: {
                        dataname: "md_product_category",
                        title: "参数配置",
                        treeDataList: [
                            { "id": "RX", "categoryname": "参数库", "parentid": null, "dataname": null, "table_id": null, "orderno": null},
                            { "id": "A", "categoryname": "折扣基数", "parentid": "RX", "dataname": "setting_bonus_base", "table_id": "data_setting_bonus_base", "orderno": null},
                            { "id": "B", "categoryname": "折扣Payout", "parentid": "RX", "dataname": "setting_payout", "table_id": "data_setting_payout", "orderno": null},
                            // { "id": "C", "categoryname": "折扣封顶线", "parentid": "RX", "dataname": "setting_payout_ceiling", "table_id": "data_setting_payout_ceiling", "orderno": null},
                            { "id": "001", "categoryname": "达成奖励参数表", "parentid": "RX", "dataname": "setting_bonus_base", "table_id": "data_setting_bonus_base", "orderno": null},
                            { "id": "002", "categoryname": "封顶线参数表", "parentid": "RX", "dataname": "setting_bonus_base", "table_id": "data_setting_bonus_base", "orderno": null},
                            { "id": "003", "categoryname": "超额奖励参数表", "parentid": "RX", "dataname": "setting_bonus_base", "table_id": "data_setting_bonus_base", "orderno": null},
                            
                        ],
                        fieldsMap: {
                            A:[
                                { "id": "setting_bonus_base_field1", "table_id": "data_setting_bonus_base", "isshow": "T", "field": "position", "name": "渠道类型", "defaultval": null, "align": "", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 1 },
                                { "id": "setting_bonus_base_field2", "table_id": "data_setting_bonus_base", "isshow": "T", "field": "typecode", "name": "类型", "defaultval": null, "align": "", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 2 },
                                { "id": "setting_bonus_base_field3", "table_id": "data_setting_bonus_base", "isshow": "T", "field": "bonus", "name": "折扣", "defaultval": null, "align": "right", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": "formatter_money", "orderno": 3 }
                            ],
                            B:[
                                { "id": "setting_payout_field0", "table_id": "data_setting_payout", "isshow": "T", "field": "type", "name": "类型", "defaultval": null, "align": "", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 0 },
                                { "id": "setting_payout_field1", "table_id": "data_setting_payout", "isshow": "T", "field": "achieve_from", "name": "达成起步线", "defaultval": null, "align": "right", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 1 },
                                { "id": "setting_payout_field2", "table_id": "data_setting_payout", "isshow": "T", "field": "achieve_to", "name": "达成封顶线", "defaultval": null, "align": "right", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 2 },
                                { "id": "setting_payout_field3", "table_id": "data_setting_payout", "isshow": "T", "field": "payout_from", "name": "支付起步线", "defaultval": null, "align": "right", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 3 },
                                { "id": "setting_payout_field4", "table_id": "data_setting_payout", "isshow": "T", "field": "payout_to", "name": "支付封顶线", "defaultval": null, "align": "right", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 4 },
                                { "id": "setting_payout_field5", "table_id": "data_setting_payout", "isshow": "T", "field": "acceleration", "name": "加速率", "defaultval": null, "align": "right", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 5 }
                            ],
                            C:[
                                { "id": "setting_payout_ceiling_field1", "table_id": "data_setting_payout_ceiling", "isshow": "T", "field": "position", "name": "渠道类型", "defaultval": null, "align": "", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 1 },
                                { "id": "setting_payout_ceiling_field2", "table_id": "data_setting_payout_ceiling", "isshow": "T", "field": "rate", "name": "折扣率", "defaultval": null, "align": "right", "width": null, "iscellclick": null, "minval": null, "maxval": null, "type": null, "formatter": null, "orderno": 2 }
                            ],
                            "001": [
                                {isshow: "T", field: "field1", name: "类型", width: "200", isminwidth: true},
                                {isshow: "T", field: "", name: "下限", children: [
                                    {isshow: "T", field: "field2", name: "操作符", width: "150"},
                                    {isshow: "T", field: "field3", name: "比率", width: "150"},
                                ]},
                                {isshow: "T", field: "", name: "上限", children: [
                                    {isshow: "T", field: "field4", name: "操作符", width: "150"},
                                    {isshow: "T", field: "field5", name: "比率", width: "150"},
                                ]},
                                
                                {isshow: "T", field: "field6", name: "比率", width: "100"},
                                {isshow: "T", field: "field7", name: "序号", width: "80"},
                            ],
                            "002": [
                                {isshow: "T", field: "2field1", name: "类型", width: "200", isminwidth: true},
                                {isshow: "T", field: "2field2", name: "封顶比率", width: "150"},
                                {isshow: "T", field: "2field3", name: "封顶数量", width: "150"},
                                {isshow: "T", field: "2field4", name: "封顶金额", width: "150"},
                            ],
                            "003": [
                                {isshow: "T", field: "3field1", name: "折扣项目", width: "200", isminwidth: true},
                                {isshow: "T", field: "3field2", name: "比率", width: "150"},
                                {isshow: "T", field: "3field3", name: "数量", width: "150"},
                                {isshow: "T", field: "3field4", name: "金额", width: "150"},
                            ],
                        },
                        
                        datasMap: {
                            A:[
                                { "id": "1", "position": "自营", "typecode": "PartA", "bonus": 80000 },
                                { "id": "2", "position": "自营", "typecode": "PartB", "bonus": 10000 },
                                { "id": "3", "position": "自营", "typecode": "PartC", "bonus": 10000 },
                                { "id": "4", "position": "代理商", "typecode": "PartA", "bonus": 100000 },
                                { "id": "5", "position": "代理商", "typecode": "PartB", "bonus": 20000 },
                                { "id": "6", "position": "代理商", "typecode": "PartC", "bonus": 30000 }
                            ],
                            B:[
                                { "id": "1", "achieve_from": null, "achieve_to": 70, "payout_from": null, "payout_to": 0, "acceleration": 0, "type": "PartA" },
                                { "id": "2", "achieve_from": 70, "achieve_to": 80, "payout_from": 50, "payout_to": 60, "acceleration": 1, "type": "PartA" },
                                { "id": "3", "achieve_from": 80, "achieve_to": 100, "payout_from": 60, "payout_to": 100, "acceleration": 2, "type": "PartA" },
                                { "id": "4", "achieve_from": 100, "achieve_to": 120, "payout_from": 100, "payout_to": 160, "acceleration": 3, "type": "PartA" }
                            ],
                            C:[
                                { "id": "1", "position": "自营", "rate": 115, "rate_achieve": 105 },
                                { "id": "2", "position": "代理商", "rate": 115, "rate_achieve": 105 }
                            ],
                            "001": [
                                { "id": "1", "field1": "季度达成奖励", "field2": "≥", "field3": "0%", "field4": "≤", "field5": "100%", "field6": "0.0%", "field7": 1},
                                { "id": "2", "field1": "季度达成奖励", "field2": ">", "field3": "100%", "field4": "", "field5": "", "field6": "2.0%", "field7": 2},
                                { "id": "3", "field1": "年度达成奖励", "field2": "≥", "field3": "0%", "field4": "≤", "field5": "100%", "field6": "0.0%", "field7": 1},
                                { "id": "4", "field1": "年度达成奖励", "field2": ">", "field3": "100%", "field4": "", "field5": "", "field6": "1.5%", "field7": 2},
                            ],
                            "002": [
                                { "id": "1", "2field1": "季度达成奖励", "2field2": "125.0%", "2field3": "", "2field4": ""},
                                { "id": "2", "2field1": "年度达成奖励", "2field2": "125.0%", "2field3": "", "2field4": ""},
                                
                                { "id": "3", "2field1": "自营", "2field2": "115.0%", "2field3": "", "2field4": ""},
                                { "id": "4", "2field1": "代理商", "2field2": "115.0%", "2field3": "", "2field4": ""},
                            ],
                            "003": [
                                { "id": "1", "3field1": "年度达成超额奖励", "3field2": "1.0%", "3field3": "", "3field4": ""},
                            ],
                            
                        },
                        treedata: [],
                        treeTxtFormatter: "{categoryname}",
                        isTreeReadonly: true,
                        currentnodekey: "A",
                        
                        dataname_p: "md_product",
                        default_tableFields_p_obj: {
                            t1: [
                                {isshow: "T", field: "qty_in", name: "类型", align: "right", width: "80"},
                                {isshow: "T", field: "qty_in", name: "达成起步线", align: "right", width: "80"},
                                {isshow: "T", field: "qty_in", name: "状态", align: "right", width: "80"},
                                {isshow: "T", field: "year", name: "年份", align: "center",width: "50"},
                                {isshow: "T", field: "monthno", name: "月份", align: "center",width: "100"},
                            ],
                            
                        },
                        
                        isRefresh_p: true,
                        tableFields_p: [
                            
                        ],
                        tableData_p: [
                            {}
                        ],
                        pagesize_p: 10,
                        pagenum_p: 1,
                        total_p: 0,
                        tableHeight_p: 100,
                        
                        filterfieldClick: {},
                        tablefieldClick: {},
                    },
                    created() {
                        this.treedata = ArrayToTree(clone(this.treeDataList), "categoryname", "parentid");
                        
                        this.tableFields_p = this.fieldsMap["A"];
                        this.tableData_p = this.datasMap["A"];
                    },
                    
                    mounted() {
                        //获取数据
                        this.initData();
                        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                            hideLoading();
                            this.tableDataAfter_p();
                        });
                    },
                    
                    methods:{
                        initData() {
                            var me = this;
                            // this.onQuery(function(result, callback) {//查询后的回调，用于获取字段的
                            //     if (result.meta && result.meta[me.dataname] && result.meta[me.dataname].fields) {
                            //         var metas = clone(result.meta[me.dataname].fields);
                            //         var filterFields_ = [];
                            //         var tableFields_ = [];
                                    
                            //         metas.map(f=>{
                            //             f.isshow = "T";
                                        
                            //             if (f.isfilter) {
                            //                 filterFields_.push(clone(f));
                            //             }
                            //             else {
                            //                 var filter_f = clone(f);
                            //                 filter_f.isshow = "F";
                            //                 filterFields_.push(filter_f);
                            //             }
                                        
                            //             tableFields_.push(clone(f));
                            //         })
                            //         if (!me.filterFields || (me.filterFields && me.filterFields.length == 0)) {
                            //             me.filterFields = clone(filterFields_);
                            //             me.tableFields = clone(tableFields_);
                                        
                            //             //字段数组转字段obj
                            //             me.fieldsToFieldsObj();
                                        
                            //             //设置字段事件
                            //             me.tableFieldClick();
                            //         }
                            //     }
                                
                            //     if (callback) {
                            //         callback();
                            //     }
                                
                            //     me.getProductMeta();
                            // });
                        },
                        
                        getProductMeta() {
                            var me = this;
                            var param_ = {
                                dataname: this.dataname_p,
                                attachMeta: true,
                            }
                            
                            Server.call("root/data/getEntitySet", param_, function(result) {
                                if (result.meta && result.meta[me.dataname_p] && result.meta[me.dataname_p].fields) {
                                    var metas = clone(result.meta[me.dataname_p].fields);
                                    var filterFields_ = [];
                                    var tableFields_ = [];
                                    
                                    metas.map(f=>{
                                        f.isshow = "T";
                                        tableFields_.push(clone(f));
                                    })
                                    if (!me.tableFields_p || (me.tableFields_p && me.tableFields_p.length == 0)) {
                                        me.tableFields_p = clone(tableFields_);
                                    }
                                }
                                
                                me.tableDataAfter_p();
                            })
                        },
                        
                        tableDataAfter_p() {
                            var me = this;
                            if (this.tableFields_p.length > 0){
                                this.isRefresh_p = false;
                                this.$nextTick(function(){
                                    this.isRefresh_p = true;
                                    this.$nextTick(function(){
                                        var el_list = [];
                                        me.tableHeight_p = setpageHeight(me.$refs.table_p.$el, el_list, me.tableData.length, 5);
                                    })
                                })
                            }
                        },
                        
                        onTableDataAfter() {
                            
                        },
                        
                        tableFieldClick() {
                            var me = this;
                            //筛选字段事件设置
                            this.filterfieldClick = {
                                product_code: {//字段事件设置
                                    popup: {
                                        onclick: function(obj) {//弹窗点击事件
                                            Root.message({
                                                type: 'success',
                                                message: '弹窗点击事件'
                                            });
                                        }
                                    },
                                    visible: {
                                        onchange: function(obj) {//下拉展开事件
                                            Root.message({
                                                type: 'success',
                                                message: '下拉展开事件'
                                            });
                                        }
                                    },
                                    select: {
                                        onchange: function(obj) {//下拉展开事件
                                            Root.message({
                                                type: 'success',
                                                message: '下拉更改事件'
                                            });
                                        }
                                    },
                                    input: {
                                        onchange: function(obj) {//下拉展开事件
                                            Root.message({
                                                type: 'success',
                                                message: '下拉更改事件'
                                            });
                                        }
                                    },
                                },
                            };
                            //表格字段事件设置
                            this.tablefieldClick = {
                                product_code: {//字段事件设置
                                    val: {//有值时的点击事件
                                        notclick_val: "",//不可点击的值,1、是数组["11","22"]；2、以“;”分隔的字符串"111;222"
                                        notclick_bindfield: [],//当该字段值等于指定字段值时不可点击["filterfield": "111"]
                                        onclick: function(obj) {//数据值点击事件
                                            Root.message({
                                                type: 'success',
                                                message: obj.val + '点击事件'
                                            }); 
                                        },
                                    },
                                    defaultval: {
                                        val: "查看",//空值时的显示值
                                        onclick: function(obj) {//默认值点击事件,此事件需要设置val才有效
                                            Root.message({
                                                type: 'success',
                                                message: '默认值点击事件'
                                            });
                                        }
                                    },
                                    suffixval: {
                                        // val: "详情",//有值时的后缀，此后缀和单位后缀不同，如：详情，更多，查看等
                                        // onclick: function(obj) {//有值时的后缀点击事件,此事件需要设置val才有效
                                        //     //打开
                                        //     me.opentest()
                                        // }
                                    },
                                    popup: {
                                        onclick: function(obj) {//弹窗点击事件
                                            Root.message({
                                                type: 'success',
                                                message: '弹窗点击事件'
                                            });
                                        }
                                    },
                                    visible: {
                                        onchange: function(obj) {//下拉展开事件
                                            Root.message({
                                                type: 'success',
                                                message: '下拉展开事件'
                                            });
                                        }
                                    },
                                    select: {
                                        onchange: function(obj) {//下拉更改事件
                                            Root.message({
                                                type: 'success',
                                                message: '下拉更改事件'
                                            });
                                        }
                                    },
                                    input: {
                                        onchange: function(obj) {//输入更改事件
                                            Root.message({
                                                type: 'success',
                                                message: '输入更改事件'
                                            });
                                        }
                                    },
                                    
                                    
                                },
                            };
                        },
                        
                        opentest() {
                            var me = this;
                            Root.message({
                                type: 'success',
                                message: '后缀点击事件'
                            });
                            
                            var config = {
                                totab: false, //true: 以Tab导航的方式打开
                                width: "900px",
                                height: "900px",
                                icon: "icon-product",
                                text: "表单样例页面",
                                id: "test_page",//totab: true时需设置，用于判断是否已打开此页面
                                //url: "module/system/page/coming.html",
                                url: "module/system/page/sample/sample_form.html",
                                data: {},
                                delta: {},
                                sceneCode: "edit", //"add"//"browse",
                                callback: function(obj, callback) {
                                    me.onQuery();
                                    if (callback) {
                                        callback();
                                    }
                                }
                            };
                            me.doPopupByPublic(config);
                        },
                        
                        node_isShow(data, isShow) {
                            if (this.$refs[data.id]) {
                                this.$refs[data.id].style.display = isShow ? '' : 'none';
                            }
                        },
                        
                        handleNodeClick(data, node, el) {
                            var val = data.name;
                            if (data.children && data.children.length) {
                                val = "";
                                data.children.map(r=>{
                                    if (val == "") {
                                        val = r.name;
                                    }
                                    else {
                                        val += "','" + r.name;
                                    }
                                })
                            }
                            
                            // this.filterObjBydefault.category_name = val
                            this.selectedrow = data;
                            this.pagenum_p = 1;
                            this.getNodeData();
                        },
                        
                        rowClick(obj) {
                            this.selectedrow = obj.row;
                            this.pagenum_p = 1;
                            this.getNodeData();
                        },
                        
                        onQueryAfter() {
                            this.pagenum_p = 1;
                            this.tableData_p = [];
                            this.total_p = 0;
                        },
                        
                        getData_p(page) {
                            this.pagesize_p = page.pagesize;
                            this.pagenum_p = page.pagenum;
                            
                            this.getNodeData();
                        },
                        
                        getNodeData() {
                            var me = this;
                            if (!this.selectedrow.id) {
                                return
                            }
                            var filter_ = "store_condition='" + this.selectedrow.name + "'"
                            var param_ = {
                                dataname: this.dataname_p,
                                filter: filter_,
                                orderby: "name",
                                page: {
                                    pageno: this.pagenum_p,
                                    pagesize: this.pagesize_p
                                },
                            }
                            
                            Server.call("root/data/getEntitySet", param_, function(result) {
                                if (result && result.data && result.data.entityset) {
                                    var data_ = result.data.entityset;
                                    me.tableData_p = data_;
                                    me.total_p = result.data.page.recordcount;
                                }
                                else {
                                    me.total_p = 0;
                                }
                            })
                        },
                        
                        onNodeClick(obj) {
                            /* 
                            var obj = {
                                data: data, 
                                node: node, 
                                el: el
                            } 
                             */
                            this.tableFields_p = clone(this.fieldsMap[obj.data.id]);
                            this.tableData_p = clone(this.datasMap[obj.data.id]);
                            
                            this.isRefresh_p = false;
                            this.$nextTick(function(){
                                this.isRefresh_p = true;
                            })
                            
                        },
                        onAddNode() {},
                        onEditNode() {},
                        onDelNode() {},
                        
                    }
                });
            };
            
            loadJsCss(function () {
                initVue();
            });
        </script>
        <style>
            /*  在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
            [v-cloak] {
                display: none !important;
            }
            .el-tabs__nav-scroll {
                overflow: hidden;
                position: relative;
                padding-left: 20px;
            }
            
            .el-badge__content.is-fixed {
                position: absolute;
                top: 8px;
                right: 5px;
                -webkit-transform: translateY(-50%) translateX(100%);
                transform: translateY(-50%) translateX(100%);
            }
            
            .el-badge__content {
                background-color: #F56C6C;
                border-radius: 10px;
                color: #FFF;
                display: inline-block;
                font-size: 10px;
                height: 14px;
                line-height: 14px;
                padding: 0 4px;
                text-align: center;
                white-space: nowrap;
                border: 1px solid #FFF;
            }
            
            .el-badge {
                position: relative;
                vertical-align: baseline;
                display: inline-block;
            }
        </style>
        
        <style>
          .z_menu_tree .el-button--mini{
              padding-left: 2px;
              padding-right: 2px;
              font-size: 14px !important;
          }
          
          .z_left_menu_tree .el-tree-node__content {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              height: 32px;
              line-height: 32px;
              font-size: 14px;
              color: #303133;
              padding: 0px;
              list-style: none;
              cursor: pointer;
              position: relative;
              transition: border-color .3s, background-color .3s, color .3s;
              box-sizing: border-box;
              white-space: nowrap;
              overflow: hidden;
              background-color: #fff;
          }
          
        </style>
    </head>
    
    <body style="margin: 0px;">
        <div v-cloak id="vbody">
            <div id="page_root">
                <div class="topbar">
                    <span>{{title}}</span>
                </div>
            
                <div class="h_dialog__body">
                    <div style="position: absolute;left: 10px; top:45px;width: 320px; bottom: 10px;border: 1px solid #ccc;">
                        <div style="height: 32px;line-height: 32px;border-bottom: 1px solid #ccc ;">
                            <span style="font-size: 14px;margin-left: 20px;">配置参数</span>
                        </div>
                        <div class="z_left_menu_tree" style="padding: 10px 0;">
                            <h-tree
                                :tree-data="treedata"
                                :tree-txt-formatter="treeTxtFormatter"
                                :is-readonly="isTreeReadonly"
                                :currentnodekey="currentnodekey"
                                
                                @node-click="onNodeClick"
                                @add-node="onAddNode"
                                @edit-node="onEditNode"
                                @del-node="onDelNode"
                                >
                            </h-tree>
                        </div>
                    </div>
                    <div style="position: absolute;left: 340px; top:45px; right: 10px; bottom: 10px;border: 1px solid #ccc;">
                        <div>
                            <div style="height: 32px; border-bottom: 1px solid #aaa;">
                                <div class="table_title" style="float: left;">
                                    <span>详情</span>
                                </div>
                            </div>
                            <h-table
                                v-if="isRefresh_p"
                                ref="table_p"
                                :table-fields="tableFields_p" 
                                :table-data="tableData_p" 
                                :pagesize="pagesize_p"
                                :pagenum="pagenum_p"
                                :total="total_p"
                                :table-height="tableHeight_p - 60"
                                :is-highlight-row="true"
                                
                                v-on:get-data="getData_p"
                            >
                            </h-table>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        
        <div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
            <div class="spinner">
              <div class="cube1"></div>
              <div class="cube2"></div>
            </div>
        </div>
        
    </body>
</html>