qimall/backend/views/components/common/com-export-dialog-syn.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-04-24
 * Time: 16:21
 */

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

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

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

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

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

    .com-export-dialog-syn .choose-list .export-checkbox {
        width: 135px;
        height: 30px;
        line-height: 30px;
    }
</style>
<template id="com-export-dialog-syn">
    <div class="com-export-dialog-syn" style="display: inline-block">
        <el-button @click="confirm" type="primary" size="small" style="padding: 9px 15px !important;">批量导出</el-button>
        <el-dialog
                title="选择导出信息"
                :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,index) in field_list" :key="index"
                                     :label="index">{{item}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
                <div flex="dir:right" style="margin-top: 20px;">
                    <button type="submit" class="el-button el-button--primary el-button--small">导出</button>
                </div>
            </form>
        </el-dialog>
    </div>
</template>
<script>
    Vue.component('com-export-dialog-syn', {
        template: '#com-export-dialog-syn',
        props: {
            count: {
                type: Object,
                default: null,
            },
            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) {
                    this.checkedFields = objectKeys(this.field_list);
                } 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() {
                // 父级未传参 不判断
                if (typeof(this.count) == 'object' && this.count != null) {
                    var total_count = this.count.totalCount
                    var limit = 3000
                    if (total_count > limit) {
                        this.$message({
                            message: '当前导出数量大于' + limit + ',请重新按条件筛选,当前数量:' + total_count,
                            type: 'error'
                        });
                        return
                    }
                }

                // 未加载完成 不弹出
                if (this.field_list.length == 0) {
                    return
                }
                this.dialogVisible = true;
                this.$emit('selected');
            }
        },
        created() {
            // TODO 此处需获取网址上的所有参数、且需考虑参数名重复问题
            // TODO 已无作用
            this.params.status = getQuery('status');
        }
    });
</script>