BusinessBenchmark/src/components/elbuttonS.vue

<template>
    <el-row :gutter="10" class="btnsA">
        <el-col :span="1.5" v-if="showAdd">
            <el-button color="#3B7AD1" size="mini" :disabled="disAdd" @click="handleAdd">
                <img :src="addW" style="margin-right: 10px">
                <span>{{ addName }}</span>
            </el-button>
        </el-col>
        <el-col :span="1.5" v-if="showSave">
            <el-button type="warning" size="mini" @click="handleEdit" :disabled="disSave">
                <img :src="editW" style="margin-right: 10px">
                <span>{{ saveName }}</span>
            </el-button>
        </el-col>
        <el-col :span="1.5" v-if="showDelete">
            <el-button type="danger" size="mini" :disabled="disDelete" @click="handleDelete">
                <img :src="deleteW" style="margin-right: 10px">
                <span>{{ deleteName }}</span>
            </el-button>
        </el-col>
        <el-col :span="1.5" v-if="showImport">
            <el-button type="success" icon="Upload" size="mini" :disabled="disImport"
                @click="handleImport">{{ importName }}</el-button>
        </el-col>
        <el-col :span="1.5" v-if="showExport">
            <el-button type="warning" icon="Download" size="mini" :disabled="disExport"
                @click="handleExport">{{ exportName }}</el-button>
        </el-col>
        <el-col :span="1.5" v-if="showreportForms">
            <el-button type="info" size="mini" @click="handleReport">
                <img :src="report" style="margin-right: 10px">
                <span>{{ reportFormsName }}</span>
            </el-button>
        </el-col>
        <el-col :span="1.5" v-if="showRelease">
            <el-button type="success" size="mini" @click="handleRelease">
                <img :src="fabu" style="margin-right: 10px">
                <span>{{ releaseName }}</span>
            </el-button>
        </el-col>
        <el-col :span="1.5" v-if="showCancelRelease">
            <el-button type="info" size="mini" @click="handleCancelRelease">
                <img :src="cancel" style="margin-right: 10px">
                <span>{{ cancelRelease }}</span>
            </el-button>
        </el-col>
    </el-row>
</template>

<script>
import fabu from '../assets/btnIcon/fabu.png'
import cancel from '../assets/btnIcon/cancel.png'
import addW from '../assets/btnIcon/addW.png'
import editW from '../assets/btnIcon/editW.png'
import deleteW from '../assets/btnIcon/deleteW.png'
import report from '../assets/btnIcon/report.png'
export default {
    props: {
        showRelease: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        releaseName: {
            type: String,
            default: () => {
                return '发布';
            },
        },
        showCancelRelease: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        cancelRelease: {
            type: String,
            default: () => {
                return '取消发布';
            },
        },
        showAdd: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disAdd: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        addName: {
            type: String,
            default: () => {
                return '新增';
            },
        },
        showSave: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disSave: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        saveName: {
            type: String,
            default: () => {
                return '修改';
            },
        },
        showDelete: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disDelete: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        deleteName: {
            type: String,
            default: () => {
                return '删除';
            },
        },
        showImport: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disImport: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        importName: {
            type: String,
            default: () => {
                return '导入';
            },
        },
        showExport: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disExport: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        exportName: {
            type: String,
            default: () => {
                return '导出';
            },
        },
        showreportForms: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        reportFormsName: {
            type: String,
            default: () => {
                return '报表';
            },
        },
    },
    data() {
        return {
            fabu: fabu,
            cancel: cancel,
            addW: addW,
            editW: editW,
            deleteW: deleteW,
            report: report
        }
    },
    methods: {
        handleAdd() {
            this.$emit('handleAdd')
        },
        handleEdit() {
            this.$emit('handleEdit')
        },
        handleDelete() {
            this.$emit('handleDelete')
        },
        handleImport() {
            this.$emit('handleImport')
        },
        handleExport() {
            this.$emit('handleExport')
        },
        handleReport() {
            this.$emit('handleReport')
        },
        handleRelease() {
            this.$emit('handleRelease')
        },
        handleCancelRelease() {
            this.$emit('handleCancelRelease')
        }
    }
}
</script>

<style lang="less">
.btnsA {
    padding-left: 10px;

    .is-disabled {
        opacity: 0.5;
    }
}
</style>