bonus-ui/src/views/company-manage/index.vue

<template>
    <!-- 公司管理 -->
    <div class="app-container">
        <el-form ref="queryForm" size="small" :inline="true">
            <el-form-item>
                <el-input placeholder="请输入搜索关键词">
                    <i
                        slot="suffix"
                        class="el-icon-search"
                        style="cursor: pointer"
                        @click="getCompanyList"
                    />
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="onRegisterCompany"
                >
                    注册公司
                </el-button>
            </el-form-item>
        </el-form>

        <div class="company-list">
            <div
                :key="index"
                class="company-items"
                v-for="(item, index) in companyList"
            >
                <CompanyCard @openAddForm="openAddForm" :companyInfo="item" />
            </div>
        </div>

        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getCompanyList"
        />

        <AddForm
            :formType="formType"
            v-if="formDialogVisible"
            :formDialogVisible.sync="formDialogVisible"
            @updateTableList="getCompanyList"
        />
    </div>
</template>

<script>
import AddForm from './components/add-form'
import CompanyCard from './components/company-card'
import { getDeptListAPI } from '@/api/company-manage/index.js'
export default {
    components: {
        AddForm,
        CompanyCard,
    },
    data() {
        return {
            total: 0,
            formType: 3,
            companyList: [],
            formDialogVisible: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        }
    },
    methods: {
        onRegisterCompany() {
            this.formDialogVisible = true
        },
        async getCompanyList() {
            const res = await getDeptListAPI()
            this.companyList = res.rows
            this.total = res.total
        },
        openAddForm(type) {
            this.formType = type
            this.formDialogVisible = true
        },
    },
    mounted() {
        this.getCompanyList()
    },
}
</script>

<style scoped lang="scss">
.company-list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    overflow-y: auto;
    .company-items {
        width: calc((100% - 30px) / 3);
        margin-right: 15px;
        margin-bottom: 15px;
    }

    & .company-items:nth-child(3n) {
        margin-right: 0;
    }
}
</style>