bonus-ui/src/views/company-manage/components/company-card.vue

<template>
    <div class="company-card">
        <div class="company-info">
            <div>
                <el-avatar size="large" :src="companyInfo.logo" />
            </div>
            <div style="flex: 1; padding-left: 14px">
                <div class="company-title">
                    <span> {{ companyInfo.deptName }} </span>
                    <el-tag
                        type="success"
                        effect="dark"
                        size="mini"
                        v-if="companyInfo.status == 0"
                    >
                        启用中
                    </el-tag>
                    <el-tag
                        type="warning"
                        effect="dark"
                        size="mini"
                        v-if="companyInfo.status == 1"
                    >
                        停用
                    </el-tag>
                    <el-tag
                        type="danger"
                        effect="dark"
                        size="mini"
                        v-if="companyInfo.status == 2"
                    >
                        注销
                    </el-tag>
                </div>

                <p> {{ companyInfo.remark }} </p>
            </div>
        </div>

        <div class="items-card">
            <div
                :key="index"
                class="items-center"
                v-for="(item, index) in userList"
            >
                <div>{{ item.title_name }}</div>
                <div>{{ item.count }}</div>
            </div>
        </div>
        <div class="items-card">
            <el-button
                type="text"
                :key="index"
                :icon="item.icon"
                v-for="(item, index) in btnList"
                @click="onClickButton(item.type)"
            >
                {{ item.btn_name }}
            </el-button>
        </div>
    </div>
</template>

<script>
import { editCompanyAPI } from '@/api/company-manage/index.js'
export default {
    props: {
        companyInfo: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            userList: [
                { title_name: '用户', count: 20 },
                { title_name: '项目', count: 20 },
                { title_name: '设备', count: 20 },
            ],
            btnList: [
                { btn_name: '详情', icon: 'el-icon-chat-dot-round', type: 1 },
                { btn_name: '编辑', icon: 'el-icon-edit', type: 2 },
                { btn_name: '注销', icon: 'el-icon-delete', type: 3 },
            ],
        }
    },

    methods: {
        onClickButton(type) {
            if (type === 1 || type === 2) {
                this.$emit('openAddForm', type, this.companyInfo.deptId)
            } else {
                this.$modal
                    .confirm('是否确认注销')
                    .then(async () => {
                        // 组装参数
                        const { deptId, parentId, deptName, orderNum } =
                            this.companyInfo
                        const params = {
                            deptId,
                            parentId,
                            status: '2',
                            deptName,
                            orderNum,
                        }
                        const res = await editCompanyAPI(params)
                        if (res.code === 200) {
                            this.$modal.msgSuccess('注销成功')
                            this.$emit('updateTableList')
                        }
                    })
                    .catch(() => {})
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.company-card {
    padding: 12px 10px;
    border-radius: 6px;
    background-color: #f7f8fc;
    min-height: 220px;
    max-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .company-info {
        display: flex;
        align-items: center;

        .company-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            & span:first-child {
                font-weight: bold;
            }
        }

        p {
            font-size: 14px;
            color: #abafb3;
        }
    }
    .items-card {
        margin-top: 16px;
        display: flex;
        justify-content: space-around;
        color: #454545;

        .items-center {
            display: flex;
            flex-direction: column;
            align-items: center;

            & div:last-child {
                margin-top: 14px;
                font-weight: bold;
            }
        }
    }
}
</style>