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

<template id="com-export-window">
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        :width="width"
        @close="close"
        @open="open"
    >
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedFields" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(item, index) in exportList" :label="item[exportKey]" :key="index">
                {{ item[exportValue] }}
            </el-checkbox>
        </el-checkbox-group>
    
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" v-loading="submitLoading" @click="submit">导 出</el-button>
        </span>
    </el-dialog>
</template>
<script>
    Vue.component('com-export-window', {
        template: '#com-export-window',
        props: {
            defaultCheck: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            title: {
                type: String,
                default: () => {
                    return '导出'
                }
            },
            width: {
                type: String,
                default: () => {
                    return '50%'
                }
            },
            exportList: Array,
            params: Object,
            actionUrl: String,
            visible: {
                type: Boolean,
                default: false,
            },
            // 对象的key
            exportKey: {
                type: String,
                default: () => {
                    return 'value'
                }
            },
            // 对象显示的值
            exportValue: {
                type: String,
                default: () => {
                    return 'title'
                }
            },
        },
        data() {
            return {
                checkAll: false,
                checkedFields: [],
                isIndeterminate: true,
                submitLoading: false,
            }
        },
        computed: {
            dialogVisible: {
                get() {
                    return this.visible
                },
                set() {},
            }
        },
        methods: {
            open() {
                // 默认全选
                if (this.defaultCheck) {
                    this.checkAll = true
                    this.checkedFields = this.exportList.map((item) => {
                        return item[this.exportKey]
                    })
                    this.isIndeterminate = false
                }
            },
            close() {
                this.$emit('closed')
            },
            handleCheckAllChange(val) {
                let options = this.exportList.map((item) => {
                    return item[this.exportKey]
                })
                this.checkedFields = val ? options : []
                this.isIndeterminate = false
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length
                this.checkAll = checkedCount === this.checkedFields.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
            },
            submit() {
                if (this.submitLoading) return 
                this.submitLoading = true
                request({
                    params: {
                        r: this.actionUrl
                    },
                    data: {
                        params: this.params,
                        fields: this.checkedFields
                    },
                    method: 'post',
                }).then(res => {
                    if (res.data.code == 0) {
                        this.submitLoading = false
                        this.$message.success(res.data.msg)
                        this.close()
                    } else {
                        this.submitLoading = false
                        this.$message.error(res.data.msg)
                    }
                })
            },
        }
    })
</script>