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">
                    <div> {{ companyInfo.deptName }} </div>
                    <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 class="company-remark"> {{ 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> -->
            <el-button
                type="text"
                icon="el-icon-chat-dot-round"
                @click="onClickButton(1)"
            >
                详情
            </el-button>
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="onClickButton(2)"
            >
                编辑
            </el-button>
            <el-button
                type="text"
                icon="el-icon-delete"
                @click="onClickButton(3)"
                v-if="companyInfo.status != 2"
            >
                注销
            </el-button>
        </div>
    </div>
</template>

<script>
import { editDeptLogoutAPI } from '@/api/company-manage/index.js'
export default {
    props: {
        companyInfo: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            userList: [
                { title_name: '用户', count: 0 },
                { title_name: '项目', count: 0 },
                { title_name: '设备', count: 0 },
            ],
            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 {
                if (this.companyInfo.status == 2) {
                    this.$modal.msgError('该公司已注销，无法重复注销')
                    return
                }
                this.$modal
                    .confirm('是否确认注销')
                    .then(async () => {
                        // 组装参数
                        const { deptId } = this.companyInfo
                        const params = {
                            deptId,
                        }
                        const res = await editDeptLogoutAPI(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;
            & div:first-child {
                font-weight: bold;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
            }
        }

        p {
            font-size: 14px;
            color: #abafb3;
        }

        .company-remark {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
        }
    }
    .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>