kmall-haikong/kmall-admin/src/main/webapp/js/statis/mkstorepromstat.js

$(function () {
    $("#jqGrid").jqGrid({
        url: '../mkstorepromstat/list',
        datatype: "json",
        colModel: [
			{label: 'promStatId', name: 'promStatId', index: 'prom_stat_id', key: true, hidden: true},
			{label: '推广名称', name: 'promName', index: 'promName', width: 180, align: 'center'},
			{label: '门店名称', name: 'storeName', index: 'storeName', width: 180, align: 'center'},
            {label: '推广用户', name: 'shareUserName', index: 'shareUserName', width: 120, align: 'center'},
			{label: '浏览数', name: 'browseNum', index: 'browse_num', width: 100, align: 'center'},
			{label: '访客量', name: 'visitNum', index: 'visit_num', width: 100, align: 'center'},
			// {label: '连带浏览量', name: 'relaBrowseNum', index: 'rela_browse_num', width: 80},
			// {label: '连带访客量', name: 'relaVisitorNum', index: 'rela_visitor_num', width: 80},
			// {label: '人均停留时长(秒)', name: 'aveStopTime', index: 'ave_stop_time', width: 80},
			// {label: '人均访问次数', name: 'aveVisitorNum', index: 'ave_visitor_num', width: 80},
			{label: '页面访问深度', name: 'visitPageDeep', index: 'visit_page_deep', width: 100, align: 'center'},
			{label: '转发访客量', name: 'transVisitorNum', index: 'trans_visitor_num', width: 100, align: 'center'},
			{label: '转发次数', name: 'transNum', index: 'trans_num', width: 100, align: 'center'},
            {label: '下单单数', name: 'submitOrderNum', index: 'submitOrderNum', width: 100, align: 'center'},
            {label: '下单人数', name: 'submitNum', index: 'submitNum', width: 100, align: 'center'},
			{label: '支付单数', name: 'payOrderNum', index: 'pay_order_num', width: 100, align: 'center'},
			// {label: '连带支付单数', name: 'relaPayOrderNum', index: 'rela_pay_order_num', width: 80},
			{label: '支付人数', name: 'payerNum', index: 'payer_num', width: 100, align: 'center'},
			// {label: '连带支付人数', name: 'relaPayerNum', index: 'rela_payer_num', width: 80},
			{label: '支付件数', name: 'payCaseNum', index: 'pay_case_num', width: 100, align: 'center'},
			// {label: '连带支付件数', name: 'relaPayCaseNum', index: 'rela_pay_case_num', width: 80},
			{label: '应收金额', name: 'receivMoney', index: 'receiv_money', width: 100, align: 'right'},
			// {label: '连带应收金额', name: 'relaReceivMoney', index: 'rela_receiv_money', width: 80},
			{label: '实收金额', name: 'actMoney', index: 'act_money', width: 100, align: 'right'},
            {
                label: '操作', width: 160, align: 'center', sortable: false, formatter: function (value, col, row) {
                let htmlStr = "<button class='btn btn-outline btn-primary' " +
                    "onclick='vm.getOrderInfo(" + row.promId + ")'><i class='fa fa-qrcode'></i>订单明细</button>&nbsp;&nbsp;&nbsp;&nbsp;" +
                    "<button class='btn btn-outline btn-primary' " +
                    "onclick='vm.updateById(" + row.promStatId + ")'><i class='fa fa-qrcode'></i>明细</button>";
                return htmlStr;
            }}
			// {label: '连带实收金额', name: 'relaActMoney', index: 'rela_act_money', width: 80},
			// {label: '备注', name: 'note', index: 'note', width: 80},
			// {label: '创建人编号', name: 'createrSn', index: 'creater_sn', width: 80},
			// {label: '创建时间', name: 'createTime', index: 'create_time', width: 80},
			// {label: '修改人编号', name: 'moderSn', index: 'moder_sn', width: 80},
			// {label: '修改时间', name: 'modTime', index: 'mod_time', width: 80},
			// {label: '时间戳', name: 'tstm', index: 'tstm', width: 80}
			],
		viewrecords: true,
        height: 670,
        rowNum: 10,
        rowList: [10, 30, 50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        shrinkToFit: false,
        autoScroll: true,   //开启水平滚动条
        width: 1500,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
        }
    });

    $("#jqGridOrder").jqGrid({
        url: '../mkstorepromstat/promOrderList',
        datatype: "json",
        colModel: [
            {label: '推广渠道ID', name: 'promId', index: 'promId', width: 80, align: 'center'},
            {label: '所属门店', name: 'storeName', index: 'storeName', width: 80, align: 'center'},
            {label: '订单号', name: 'orderSn', index: 'order_sn', width: 100, align: 'center'},
            {label: '会员', name: 'userName', index: 'user_name', width: 80, align: 'center'},
            {label: '商户订单号', name: 'merchOrderSn', index: 'merchOrderSn', width: 100, align: 'center'},
            {label: '优惠券使用', name: 'couponName', index: 'couponName', width: 70, align: 'center',
                formatter: function (value) {
                    if (value == null || value == '') {
                        return '<span style="color: red">未使用</span>';
                    }
                    return value;
                }},
            {label: '运费', name: 'freightPrice', index: 'freight_price', width: 60, align: 'center'},
            {label: '订单件数', name: 'orderDetailCount', index: 'orderDetailCount', width: 70, align: 'center'},
            {
                label: '订单状态', name: 'orderStatus', index: 'order_status', width: 80, align: 'center',
                formatter: function (value) {
                    if (value == '0') {
                        return '订单创建成功等待付款';
                    } else if (value == '100') {
                        return '订单付款中';
                    } else if (value == '101') {
                        return '订单已取消';
                    } else if (value == '102') {
                        return '订单已删除';
                    } else if (value == '201') {
                        return '订单已付款，等待发货';
                    } else if (value == '300') {
                        return '订单已发货';
                    } else if (value == '301') {
                        return '用户确认收货';
                    } else if (value == '401') {
                        return '没有发货，退款';
                    } else if (value == '402') {
                        return '已收货，退款退货';
                    }
                    return value;
                }
            },
            {
                label: '付款状态', name: 'payStatus', index: 'pay_status', width: 80, align: 'center',
                formatter: function (value) {
                    if (value == '0') {
                        return '未付款';
                    } else if (value == '1') {
                        return '付款中';
                    } else if (value == '2') {
                        return '已付款';
                    } else if (value == '3') {
                        return '退款中';
                    } else if (value == '4') {
                        return '退款';
                    }
                    return value;
                }
            },
            {label: '实际支付', name: 'actualPrice', index: 'actual_price', width: 60, align: 'center'},
            {label: '推广实收金额', name: 'promActualPrice', index: 'promActualPrice', width: 60, align: 'center'},
            {
                label: '下单时间', name: 'addTime', index: 'add_time', width: 120, align: 'center',
                formatter: function (value) {
                    // console.log(value);
                    return transDate(value, 'yyyy-MM-dd hh:mm:ss');
                }
            },
            {
                label: '发货状态', name: 'shippingStatus', index: 'shipping_status', width: 60, align: 'center',
                formatter: function (value) {
                    if (value == '0') {
                        return '未发货';
                    } else if (value == '1') {
                        return '已发货';
                    } else if (value == '2') {
                        return '已收货';
                    } else if (value == '4') {
                        return '退货';
                    }
                    return value;
                }
            }
        ],
        viewrecords: true,
        height: 550,
        width:1600,
        rowNum: 10,
        rowList: [10, 30, 50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth: false,
        multiselect: false,
        caption: "统计订单明细",
        sortname : 'o.id',
        sortorder : "asc",
        subGrid : true,
        subGridRowExpanded : function(subgrid_id, row_id) {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id + "_t";
            pager_id = "p_" + subgrid_table_id;
            $("#" + subgrid_id).html(
                "<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
            var rowData = $("#jqGridOrder").jqGrid('getRowData', row_id);
            jQuery("#" + subgrid_table_id).jqGrid(
                {
                    url : '../ordergoods/queryListByOrderId?id=' + row_id+'&promId='+rowData.promId,
                    datatype : "json",
                    colModel : [
                        {label: '商品',name : "goodsName",index : "goodsName",  width : 130, align : "center"},
                        {label: '数量',name : "number",index : "number",width : 70, align : "center"},
                        {label: '商品价格', name: 'retailPrice', index: 'retail_price', width: 80, align: 'center'},
                        {label: '是否属于当前推广渠道商品', name: 'isPromGoods', index: 'isPromGoods', width: 80, align: 'center',
                            formatter: function (value) {
                                if (value == '0') {
                                    return '<span style="color: red;font-weight: bolder">否</span>';
                                } else if (value == '1') {
                                    return '是';
                                }
                                return value;
                            }}
                    ],
                    sortname : 'num',
                    sortorder : "asc",
                    height: "100%",
                    rowNum: 5,
                    pager: "#" + pager_id,
                    jsonReader: {
                        root: "page.list",
                        page: "page.currPage",
                        total: "page.totalPage",
                        records: "page.totalCount"
                    },
                    prmNames: {
                        page: "page",
                        rows: "limit",
                        order: "order"
                    },
                });
            jQuery("#" + subgrid_table_id).jqGrid('navGrid',
                "#" + pager_id, {
                    edit : false,
                    add : false,
                    del : false
                });
        },
        pager: "#jqGridPagerOrder",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            $("#jqGridOrder").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
        }
    });
});

let vm = new Vue({
	el: '#rrapp',
	data: {
        showList: true,
        title: null,
		mkStorePromStat: {},
		ruleValidate: {
			name: [
				{required: true, message: '名称不能为空', trigger: 'blur'}
			]
		},
		q: {
		    name: ''
		},
        o:{
            orderStatus:''
        },
        showViewList: false,
        statInfoList: true,
		showOrderList: true,
        orderStatusList:[],
        promId: ''
	},
	methods: {
		query: function () {
			vm.reload();
		},
		add: function () {
			vm.showList = false;
			vm.showViewList = true;
            vm.statInfoList = true;
            vm.showOrderList = true;
			vm.title = "新增";
			vm.mkStorePromStat = {};
		},
		update: function (event) {
            let promStatId = getSelectedRow();
			if (promStatId == null) {
				return;
			}
			vm.showList = false;
            vm.showViewList = true;
            vm.statInfoList = true;
            vm.showOrderList = true;
            vm.title = "修改";

            vm.getInfo(promStatId)
		},
		saveOrUpdate: function (event) {
            let url = vm.mkStorePromStat.promStatId == null ? "../mkstorepromstat/save" : "../mkstorepromstat/update";
			$.ajax({
				type: "POST",
			    url: url,
			    contentType: "application/json",
			    data: JSON.stringify(vm.mkStorePromStat),
                success: function (r) {
                    if (r.code === 0) {
                        alert('操作成功', function (index) {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
			});
		},
		del: function (event) {
            let promStatIds = getSelectedRows();
			if (promStatIds == null){
				return;
			}

			confirm('确定要删除选中的记录？', function () {
				$.ajax({
					type: "POST",
				    url: "../mkstorepromstat/delete",
				    contentType: "application/json",
				    data: JSON.stringify(promStatIds),
				    success: function (r) {
						if (r.code == 0) {
							alert('操作成功', function (index) {
								$("#jqGrid").trigger("reloadGrid");
							});
						} else {
							alert(r.msg);
						}
					}
				});
			});
		},
		getInfo: function(promStatId){
			$.get("../mkstorepromstat/info/"+promStatId, function (r) {
                vm.mkStorePromStat = r.mkStorePromStat;
            });
		},
        getOrderInfo: function (promId) {
		    vm.promId = promId;
            vm.showList = true;
            vm.showViewList = true;
            vm.statInfoList = true;
            vm.showOrderList = false;
            // vm.title = "统计订单明细";

            let page = $("#jqGridOrder").jqGrid('getGridParam', 'page');
            $("#jqGridOrder").jqGrid('setGridParam', {
                postData: {'promId': vm.promId,'orderStatus': vm.o.orderStatus},
                page: page
            }).trigger("reloadGrid");
        },
        queryOrder: function () {
            vm.reloadOrder();
        },
        reloadOrderSearch: function() {
            vm.o = {
                orderStatus: ''
            }
            vm.reloadOrder();
        },
        reloadOrder: function (event) {
            // vm.showList = true;
            // vm.statInfoList = true;
            // vm.showOrderList = true;
            // vm.showViewList = false;
            let page = $("#jqGridOrder").jqGrid('getGridParam', 'page');
            $("#jqGridOrder").jqGrid('setGridParam', {
                postData: {'promId': vm.promId,'orderStatus': vm.o.orderStatus},
                page: page
            }).trigger("reloadGrid");
            // vm.handleReset('formValidate');
        },
        updateById: function (promId) {
            if (promId == null) {
                return;
            }
            vm.showList = true;
            vm.showViewList = true;
            vm.statInfoList = false;
            vm.showOrderList = true;
            vm.title = "统计明细";
            vm.getInfo(promId)
        },
        exportOrder: function () {
            exportFile('#rrapp', '../mkstorepromstat/exportPromOrderList', {'promId': vm.promId,'orderStatus': vm.o.orderStatus});
        },
        reloadSearch: function() {
            vm.q = {
                name: ''
            }
            vm.reload();
		},
		reload: function (event) {
			vm.showList = true;
            vm.statInfoList = true;
            vm.showOrderList = true;
            vm.showViewList = false;
            let page = $("#jqGrid").jqGrid('getGridParam', 'page');
			$("#jqGrid").jqGrid('setGridParam', {
                postData: {'name': vm.q.name},
                page: page
            }).trigger("reloadGrid");
            vm.handleReset('formValidate');
		},
        handleSubmit: function (name) {
            handleSubmitValidate(this, name, function () {
                vm.saveOrUpdate()
            });
        },
        handleReset: function (name) {
            handleResetForm(this, name);
        }
	},
    mounted() {
        // $.get("../store/queryAll", function (r) {
        //     vm.stores = r.list;
        // });
        $.get("../sys/macro/queryMacrosByValue?value=orderStatus", function (r) {
            vm.orderStatusList = r.list;
        });
        // $.get("../sys/macro/queryMacrosByValue?value=payStatus", function (r) {
        //     vm.payStatusList = r.list;
        // });
        // $.get("../sys/macro/queryMacrosByValue?value=goodsBizType", function (r) {
        //     vm.orderBizTypeList = r.list;
        // });
    }
});