ams_web/src/views/company-information/index.vue

<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: 公司信息页面
 * @Author: Cheney
 */

import { useResponse } from '/@/utils/useResponse';
import * as api from './api';
import InfoCard from './components/InfoCard.vue';
import { Plus } from '@element-plus/icons-vue';
import CompanyCreate from '/@/views/company-information/components/CompanyCreate.vue';


const cardData = ref();
provide('cardData', cardData);

const loading = ref(false);

const isOpen = ref();

onBeforeMount(() => {
  initData();
});

async function initData() {
  const res = await useResponse({}, api.getCardData, loading);
  cardData.value = res.data;
}

async function addCompany() {
  isOpen.value = true;
}

function handleRefresh() {
  initData();
}
</script>

<template>
  <div class="flex flex-col p-5">
    <el-card class="mb-5" style="border: none;">
      <div class="flex justify-between items-baseline">
        <div>
          <span class="font-bold text-xl">公司信息概览</span>
          <el-divider class=" text-3xl" direction="vertical"/>
        </div>
        <span>
           <el-button :icon="Plus" type="primary" @click="addCompany">添 加</el-button>
        </span>
      </div>
    </el-card>
    <el-card v-loading="loading" class="flex-grow" style="border: none;">
      <InfoCard></InfoCard>
    </el-card>
    <CompanyCreate v-model="isOpen" @refresh="handleRefresh"/>
  </div>
</template>

<style scoped>
:deep(.el-divider__text.is-left) {
  background-color: #F5F5F5;
}
</style>