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

$(function () {
    $("#jqGrid").jqGrid({
        url: '../mkstoretopicstat/list',
        datatype: "json",
        colModel: [
            {
                label: '操作', width: 160, align: 'center', sortable: false, frozen: true, formatter: function (value, col, row) {
                    let htmlStr = "<button class='btn btn-outline btn-primary' " +
                        "onclick='vm.getOrderInfo(" + row.storeTopicId + ")'><i class='fa fa-qrcode'></i>订单明细</button>&nbsp;&nbsp;&nbsp;&nbsp;" +
                        "<button class='btn btn-outline btn-primary' " +
                        "onclick='vm.updateById(" + row.storeTopicStatId + ")'><i class='fa fa-qrcode'></i>明细</button>";
                    return htmlStr;
                }
            },
			{label: 'storeTopicStatId', name: 'storeTopicStatId', index: 'store_topic_stat_id', key: true, hidden: true},
			{label: '活动名称', name: 'storeTopicName', index: 'storeTopicName', width: 180, align: 'center'},
            {label: '活动类型', name: 'storeTopicType', index: 'storeTopicType', width: 180, align: 'center'},
			{label: '门店名称', name: 'storeName', index: 'storeName', width: 180, align: 'center'},
			{label: '浏览数', name: 'browseNum', index: 'browse_num', width: 100, align: 'center'},
			{label: '访客量', name: 'visitNum', index: 'visit_num', width: 100, align: 'center'},
            {label: '领取量', name: 'receiveNum', index: 'receiveNum', width: 100, align: 'center',
                formatter: function (value) {
                    if ((value == null || value == '')) {
                        return '-';
                    }
                    return value;
            }},
			// {label: '连带浏览量', name: 'relaBrowseNum', index: 'rela_browse_num', width: 80},
			// {label: '连带访客量', name: 'relaVisitorNum', index: 'rela_visitor_num', width: 80},
			{label: '页面访问深度', name: 'visitPageDeep', index: 'visit_page_deep', width: 100, align: 'center'},
			// {label: '转发访客量', name: 'transVisitorNum', index: 'trans_visitor_num', width: 80},
			{label: '下单单数', name: 'submitOrderNum', index: 'submit_order_num', width: 100, align: 'center'},
			{label: '下单人数', name: 'submitNum', index: 'submit_num', 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: '连带实收金额', name: 'relaActMoney', index: 'rela_act_money', width: 80, align: 'center'},
			// {label: '是否有效,0:有效，1:无效', name: 'isValid', index: 'is_valid', width: 80},
			// {label: '备注', name: 'note', index: 'note', width: 80, align: 'center'},
			// {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"});
        }
    });

    // 启动冻结列
    $("#jqGrid").jqGrid("setFrozenColumns");

    $("#jqGridOrder").jqGrid({
        url: '../mkstoretopicstat/storeTopicOrderList',
        datatype: "json",
        colModel: [
            {label: '活动名称', name: 'storeTopicName', index: 'storeTopicName', width: 80, align: 'center'},
            {label: '活动类型', name: 'storeTopicType', index: 'storeTopicType', 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, col, row) {
                    if ((value == null || value == '') && row.couponId == 0 ) {
                        return '<span style="color: #cccccc">未使用</span>';
                    }else{
                        return '<span style="color: red">'+value+'</span>';
                    }
                    return value;
                }},
            {label: '促销满减使用', name: 'campName', index: 'campName', width: 70, align: 'center',
                formatter: function (value, col, row) {
                    if (value == null || value == '') {
                        return '<span style="color: #cccccc">未使用</span>';
                    }else{
                        return '<span style="color: red">'+value+'</span>';
                    }
                    return value;
                }},
            {label: '运费', name: 'freightPrice', index: 'freight_price', width: 40, 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: 500,
        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,
                    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: 'storeTopicId', index: 'store_topic_id', width: 80, align: 'center',
                            formatter: function (value, col, row) {
                                if (value == null || value == '') {
                                    return '<span style="color: #cccccc">未使用</span>';
                                }else{
                                    return '<span style="color: red">'+value+'</span>';
                                }
                                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,
		mkStoreTopicStat: {},
		ruleValidate: {
			name: [
				{required: true, message: '名称不能为空', trigger: 'blur'}
			]
		},
		q: {
            storeName: ''
		},
        o:{
            orderStatus:''
        },
        showViewList: false,
        statInfoList: true,
        showOrderList: true,
        storeTopicId: '',
        orderStatusList: []
	},
	methods: {
		query: function () {
			vm.reload();
		},
		add: function () {
			vm.showList = false;
			vm.title = "新增";
			vm.mkStoreTopicStat = {};
		},
		update: function (event) {
            let storeTopicStatId = getSelectedRow();
			if (storeTopicStatId == null) {
				return;
			}
			vm.showList = false;
            vm.title = "修改";

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

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

            let page = $("#jqGridOrder").jqGrid('getGridParam', 'page');
            $("#jqGridOrder").jqGrid('setGridParam', {
                postData: {'storeTopicId': vm.storeTopicId,'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 (storeTopicStatId) {
            if (storeTopicStatId == null) {
                return;
            }
            vm.showList = true;
            vm.showViewList = true;
            vm.statInfoList = false;
            vm.showOrderList = true;
            vm.title = "统计明细";
            vm.getInfo(storeTopicStatId);
        },
        // exportOrder: function () {
        //     exportFile('#rrapp', '../mkstorepromstat/exportPromOrderList', {'promId': vm.promId,'orderStatus': vm.o.orderStatus});
        // },
		getInfo: function(storeTopicStatId){
			$.get("../mkstoretopicstat/info/"+storeTopicStatId, function (r) {
                vm.mkStoreTopicStat = r.mkStoreTopicStat;
            });
		},
        reloadSearch: function() {
            vm.q = {
                storeName: ''
            }
            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: {'storeName': vm.q.storeName},
                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;
        // });
    }
});