96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<template>
|
|
<div class="layout-padding">
|
|
<div class="layout-padding-auto layout-padding-view">
|
|
<el-row :gutter="24">
|
|
<el-col :span="4">
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item title="汇总" name="1">
|
|
<div v-for="(item, index) in infoList" :key="index">
|
|
{{ item }}
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-col>
|
|
|
|
<el-col :span="20">
|
|
<el-tabs v-model="tabsActiveName" @tab-click="handleClick">
|
|
<el-tab-pane name="1" label="学历"></el-tab-pane>
|
|
<el-tab-pane name="2" label="职称"></el-tab-pane>
|
|
<el-tab-pane name="3" label="职业资格"></el-tab-pane>
|
|
<el-tab-pane name="4" label="教师资格"></el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<el-table :data="tableData" show-summary style="height: 800px; overflow-y: auto" border>
|
|
<el-table-column prop="deptName" label="部门/资质(人数)" min-width="150" align="center" />
|
|
|
|
<el-table-column v-for="(item, index) in tableHead" :key="index" :prop="item" :label="item" min-width="120" align="center">
|
|
<template #default="scope">
|
|
{{ scope.row[item] ? scope.row[item] : 0 }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { countInfo } from '/@/api/professional/professionaluser/professionalteacheracademicrelation';
|
|
import { titleCountInfo } from '/@/api/professional/professionaluser/professionaltitlerelation';
|
|
import { quaCountInfo } from '/@/api/professional/professionaluser/professionalqualificationrelation';
|
|
import { cerCountInfo } from '/@/api/professional/professionaluser/professionalteachercertificaterelation';
|
|
|
|
const activeNames = ref(['1']);
|
|
const tabsActiveName = ref('1');
|
|
const tableData = ref<any[]>([]);
|
|
const tableHead = ref<string[]>([]);
|
|
const infoList = ref<string[]>([]);
|
|
|
|
const init = async () => {
|
|
try {
|
|
const res = await countInfo();
|
|
tableData.value = res.data.data.tableData || [];
|
|
tableHead.value = res.data.data.tableHead || [];
|
|
infoList.value = res.data.data.infoList || [];
|
|
} catch (error) {
|
|
console.error('Failed to load data:', error);
|
|
}
|
|
};
|
|
|
|
const handleClick = (tab: any) => {
|
|
tableData.value = [];
|
|
tableHead.value = [];
|
|
infoList.value = [];
|
|
|
|
if (tab.name === '1') {
|
|
init();
|
|
} else if (tab.name === '2') {
|
|
titleCountInfo().then((res) => {
|
|
tableData.value = res.data.data.tableData || [];
|
|
tableHead.value = res.data.data.tableHead || [];
|
|
infoList.value = res.data.data.infoList || [];
|
|
});
|
|
} else if (tab.name === '3') {
|
|
quaCountInfo().then((res) => {
|
|
tableData.value = res.data.data.tableData || [];
|
|
tableHead.value = res.data.data.tableHead || [];
|
|
infoList.value = res.data.data.infoList || [];
|
|
});
|
|
} else if (tab.name === '4') {
|
|
cerCountInfo().then((res) => {
|
|
tableData.value = res.data.data.tableData || [];
|
|
tableHead.value = res.data.data.tableHead || [];
|
|
infoList.value = res.data.data.infoList || [];
|
|
});
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
init();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|