qimall/backend/modules/mall/views/order/component/com-export-dialog.php

<?php

$url = Yii::$app->urlManager->createUrl(\Yii::$app->requestedRoute);
?>
<style>
    .com-export-dialog .el-dialog__body .el-checkbox + .el-checkbox {
        margin-left: 0;
    }

    .com-export-dialog .el-date-editor .el-range-separator {
        padding: 0;
    }

    .com-export-dialog .modal-body {
        border: 1px solid #F0F2F7;
    }

    .com-export-dialog .all-choose {
        height: 50px;
        line-height: 50px;
        background-color: #F3F5F6;
        width: 100%;
        padding-left: 20px;
    }

    .com-export-dialog .choose-list {
        padding: 10px 25px 20px;
    }

    .com-export-dialog .choose-list .export-checkbox {
        width: 135px;
        height: 30px;
        line-height: 30px;
    }
</style>
<template id="com-export-dialog">
    <div class="com-export-dialog" style="display: inline-block">
        <el-button @click="confirm" type="primary" size="small">批量导出</el-button>
        <el-dialog
                title="选择导出信息"
                :close-on-click-modal="false"
                :visible.sync="dialogVisible"
                :modal-append-to-body='false'
                :append-to-body='true'
                width="50%">
            <form target="_blank" :action="action_url" method="post">
                <div class="modal-body">
                    <input name="_csrf" type="hidden" id="_csrf" value="<?= Yii::$app->request->csrfToken ?>">
                    <input name="flag" value="EXPORT" type="hidden">
                    <input name="fields" :value="checkedFields" type="hidden">
                    <input v-for="(value,key,index) in params" :name="key" :value="value" type="hidden">
                    <el-checkbox class="all-choose" :indeterminate="isIndeterminate" v-model="checkAll"
                                 @change="exportCheckAll">全选
                    </el-checkbox>
                    <el-checkbox-group class="choose-list" v-model="checkedFields" @change="exportCheck">
                        <el-checkbox class="export-checkbox" v-for="item in field_list" :key="item.key"
                                     :label="item.key">{{item.value}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
                <div flex="dir:right" style="margin-top: 20px;">
                    <button type="button" class="el-button el-button--primary el-button--small" @click="onsubmit">导出</button>
                </div>
            </form>
        </el-dialog>
    </div>
</template>
<script>
    Vue.component('com-export-dialog', {
        template: '#com-export-dialog',
        props: {
            field_list: Object,
            params: Object,
            action_url: {
                type: String,
                default:'<?= $url ?>'
            },//跳转路由

        },
        data() {
            return {
                dialogVisible: false,
                isIndeterminate: false,
                checkAll: false,
                checkedFields: [],
            }
        },
        computed: {},
        watch: {
            params: {
                deep: true,
                handler(newVal, oldVal) {
                    this.data = newVal;
                    if(newVal.exportUrl){
                        this.action_url = newVal.exportUrl;
                        console.log(this.action_url);
                    }
                },
            },
        },
        methods: {
            exportCheckAll(val) {
                if (val) {
                    let field_list = this.field_list;
                    let array = [];
                    field_list.forEach((item, index) => {
                        array.push(item['key']);
                    });
                    this.checkedFields = array;
                } else {
                    this.checkedFields = [];
                }
                this.isIndeterminate = false;
            },
            exportCheck(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.field_list.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.field_list.length;
            },
            confirm() {
                this.dialogVisible = true;
                this.$emit('selected');
            },
            onsubmit(){
                this.params['fields'] = this.checkedFields;
                this.params['flag'] = 'EXPORT';
                // this.params['r'] = 'mall/order/index';
                request({
                    params: this.params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.dialogVisible = false;
                        this.$message({
                            message: e.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                    self.listLoading = false;
                });
            }
        },
        created() {
            // TODO 此处需获取网址上的所有参数、且需考虑参数名重复问题
            // TODO 已无作用
            this.params.status = getQuery('status');
        }
    });
</script>