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

<?php
/**
 * @link:http://www.gdqijianshi.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 .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="btn.type" size="small">{{btn.title}}</el-button>
        <el-dialog
                title="选择导出信息"
                :visible.sync="dialogVisible"
                :modal-append-to-body='false'
                :append-to-body='true'
                width="50%">
            <el-form :model="exportForm" method="post" ref="export_form">
                <div class="modal-body">
                    <input v-model="exportForm._csrf" type="hidden" id="_csrf" value="<?= Yii::$app->request->csrfToken ?>">
                    <input v-model="exportForm.flag" value="EXPORT" type="hidden">
                    <input v-model="exportForm.fields" 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 @click="submitForm" class="el-button el-button--primary el-button--small">导出</button>
                </div>
            </el-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 ?>'
            },//跳转路由
            btn: {
                type: Object,
                default: function () {
                    return {
                        title: '批量导出',
                        type: 'primary'
                    }
                }
            },
            export_type: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                dialogVisible: false,
                isIndeterminate: false,
                checkAll: false,
                checkedFields: [],
                exportForm:{
                    _csrf:'<?= Yii::$app->request->csrfToken ?>',
                    flag:'EXPORT',
                    fields:[]
                }
            }
        },
        computed: {},
        watch: {
            params: {
                deep: true,
                handler(newVal, oldVal) {
                    this.data = newVal;
                    if(newVal.exportUrl){
                        this.action_url = newVal.exportUrl;
                        console.log(this.action_url);
                    }
                    if(newVal.fields){
                        this.exportForm.fields = newVal.fields;
                        this.checkedFields = newVal.fields;
                    }
                },
            },
            checkedFields:{
                handler(newVal, oldVal) {
                    this.exportForm.fields = newVal;
                }
            }
        },
        methods: {
            submitForm(){
                event.preventDefault();
                self = this;
                delete self.params.fields;
                let data = Object.assign({},self.exportForm,self.params);
                request({
                    params: {
                        r: this.action_url,
                        type: this.export_type
                    },
                    method: 'post',
                    data:data
                }).then(e => {
                    if (e.data.code == 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.dialogVisible = false;
                }).catch(e => {
                    this.remarksLoading = false;
                    this.$message.error('未知错误');
                });
            },
            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() {
                this.dialogVisible = true;
                this.$emit('selected');
            }
        },
        created() {
            // TODO 此处需获取网址上的所有参数、且需考虑参数名重复问题
            // TODO 已无作用
            if (this.params.status === undefined) {
                this.params.status = getQuery('status');
            }
        }
    });
</script>