|
|
@@ -8,15 +8,18 @@ import { useRouter } from 'vue-router';
|
|
|
import { ref } from 'vue';
|
|
|
import { usePagination } from '/@/utils/usePagination';
|
|
|
import { useTableData } from '/@/utils/useTableData';
|
|
|
-import { EditPen, Picture as IconPicture, Plus, Search } from '@element-plus/icons-vue';
|
|
|
+import { Picture as IconPicture, Plus, Search } from '@element-plus/icons-vue';
|
|
|
import * as api from '/@/views/employee-information/api';
|
|
|
-import { useResponse } from '/@/utils/useResponse';
|
|
|
-import EditEmployeeInfo from '/@/views/employee-information/components/EditEmployeeInfo.vue';
|
|
|
import CreateEmployee from '/@/views/employee-information/components/CreateEmployee.vue';
|
|
|
import { ElCol } from 'element-plus';
|
|
|
|
|
|
const router = useRouter();
|
|
|
-const loading = ref();
|
|
|
+// const loading = ref(false);
|
|
|
+
|
|
|
+const searchName = ref([]);
|
|
|
+const employeeOptions = ref([]);
|
|
|
+const searchDepartment = ref('');
|
|
|
+
|
|
|
// 创建弹窗
|
|
|
const showDialog = ref(false);
|
|
|
// const isDrawerVisible = ref(false);
|
|
|
@@ -29,8 +32,10 @@ async function fetchCardData() {
|
|
|
const query = {
|
|
|
page: tableOptions.value.page,
|
|
|
limit: tableOptions.value.limit,
|
|
|
+ name: Array.isArray(searchName.value) ? searchName.value.join(',') : searchName.value,
|
|
|
+ department: searchDepartment.value,
|
|
|
};
|
|
|
- await useTableData(api.getCardData, query, tableOptions,loading);
|
|
|
+ await useTableData(api.getCardData, query, tableOptions);
|
|
|
}
|
|
|
|
|
|
async function addEmployee() {
|
|
|
@@ -46,20 +51,24 @@ const checkItem = (item) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-// async function editItem(item) {
|
|
|
-// const res = await useResponse(item.id, api.getEmployeeDetailOverview);
|
|
|
-// employeeInfo.value = res.data;
|
|
|
-// if (employeeInfo.value) {
|
|
|
-// isDrawerVisible.value = true; // 显示 Drawer
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
const getImageUrl = (images) => {
|
|
|
// 如果有图片，返回第一个图片的 image_url，否则返回占位图
|
|
|
return images.length > 0 ? images[0].image_url : '';
|
|
|
};
|
|
|
|
|
|
+async function fetchUsersSelect() {
|
|
|
+ try {
|
|
|
+ const resp = await api.getEmployeeList();
|
|
|
+ employeeOptions.value = resp.data.map((item: any) => {
|
|
|
+ return { value: item.id, label: item.name };
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.error('Failed to fetch operation select:', e);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
+ fetchUsersSelect();
|
|
|
fetchCardData();
|
|
|
});
|
|
|
</script>
|
|
|
@@ -71,6 +80,20 @@ onMounted(() => {
|
|
|
<div>
|
|
|
<span class="font-bold text-xl">人员信息概览</span>
|
|
|
<el-divider class="text-3xl" direction="vertical" />
|
|
|
+ <el-select
|
|
|
+ v-model="searchName"
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ filterable
|
|
|
+ multiple
|
|
|
+ placeholder="姓名"
|
|
|
+ style="width: 200px;padding-right: 10px;"
|
|
|
+ @change="fetchCardData"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in employeeOptions" :key="item.label" :label="item.label" :value="item.label" />
|
|
|
+ </el-select>
|
|
|
+ <el-input v-model="searchDepartment" clearable placeholder="部门" style="width: 200px" @change="fetchCardData"></el-input>
|
|
|
</div>
|
|
|
<span>
|
|
|
<el-button :icon="Plus" bg text type="primary" @click="addEmployee">添 加</el-button>
|
|
|
@@ -78,12 +101,12 @@ onMounted(() => {
|
|
|
</div>
|
|
|
</el-card>
|
|
|
<!-- 卡片展示区域 -->
|
|
|
- <el-card class="flex-grow" style="border: none" :body-style="{ padding: '0px' }">
|
|
|
- <el-card v-loading="loading" class="card-container" shadow="never" style="border: none">
|
|
|
+ <el-card :body-style="{ padding: '0px' }" class="flex-grow" style="border: none">
|
|
|
+ <el-card v-loading="tableOptions.loading" class="card-container" shadow="never" style="border: none">
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col v-for="(item, index) in tableOptions.data" :key="index" :lg="4" :md="6" :sm="8" :xl="4" :xs="12" class="my-2.5">
|
|
|
- <el-card class="item-card" shadow="hover" :body-style="{ padding: '20px 20px 5px 20px' }">
|
|
|
- <div class="image-wrapper">
|
|
|
+ <el-col v-for="(item, index) in tableOptions.data" :key="index" :lg="4" :md="6" :sm="8" :xl="4" :xs="12" class="my-2.5">
|
|
|
+ <el-card :body-style="{ padding: '20px 20px 5px 20px' }" class="item-card" shadow="hover">
|
|
|
+ <div class="image-wrapper">
|
|
|
<el-image :src="getImageUrl(item.images)" alt="电脑图片" class="card-image">
|
|
|
<template #error>
|
|
|
<el-icon class="card-image" style="font-size: 4rem">
|
|
|
@@ -94,34 +117,34 @@ onMounted(() => {
|
|
|
</div>
|
|
|
<hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)" />
|
|
|
<div class="card-content">
|
|
|
- <div class="text-wrapper">
|
|
|
+ <div class="text-wrapper">
|
|
|
<span style="color: #808d97; font-weight: 500">姓名: </span>
|
|
|
<span style="font-weight: 500">{{ item.name }}</span>
|
|
|
</div>
|
|
|
- <div class="text-wrapper">
|
|
|
+ <div class="text-wrapper">
|
|
|
<span style="color: #808d97; font-weight: 500">部门: </span>
|
|
|
<span style="font-weight: 500">{{ item.department }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <template #footer>
|
|
|
- <div style="text-align: center; padding: 0 10px">
|
|
|
- <!--<el-button :icon="Search" bg circle text type="primary" @click="checkItem(item)" />-->
|
|
|
- <!--<el-button :icon="EditPen" bg circle text type="warning" @click="editItem(item)" />-->
|
|
|
- <el-button :icon="Search" plain round style="width: 100%" type="primary" @click="checkItem(item)"> 查看详情 </el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <template #footer>
|
|
|
+ <div style="text-align: center; padding: 0 10px">
|
|
|
+ <!--<el-button :icon="Search" bg circle text type="primary" @click="checkItem(item)" />-->
|
|
|
+ <!--<el-button :icon="EditPen" bg circle text type="warning" @click="editItem(item)" />-->
|
|
|
+ <el-button :icon="Search" plain round style="width: 100%" type="primary" @click="checkItem(item)"> 查看详情 </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
- <div class="pagination-container" >
|
|
|
+ <div class="pagination-container">
|
|
|
<el-pagination
|
|
|
v-model:current-page="tableOptions.page"
|
|
|
v-model:page-size="tableOptions.limit"
|
|
|
:page-sizes="[6, 12, 24, 36, 48, 60]"
|
|
|
:total="tableOptions.total"
|
|
|
background
|
|
|
- layout="sizes, prev, pager, next, total"
|
|
|
+ layout="sizes, prev, pager, next, total, jumper"
|
|
|
@change="handlePageChange"
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -134,62 +157,64 @@ onMounted(() => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.card-container {
|
|
|
- margin-bottom: 30px;
|
|
|
- padding:0;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
.item-card {
|
|
|
- border-radius: 10px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.card-image {
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
- object-fit: cover;
|
|
|
- padding-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ object-fit: cover;
|
|
|
+ padding-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.card-content {
|
|
|
- padding-top: 10px;
|
|
|
- font-size: 14px;
|
|
|
- max-height: 60px; /* 根据需要设置最大高度 */
|
|
|
- overflow: hidden; /* 隐藏超出部分 */
|
|
|
- text-overflow: ellipsis; /* 省略号效果 */
|
|
|
- display: -webkit-box; /* 适用于多行文本处理 */
|
|
|
- -webkit-box-orient: vertical; /* 垂直排列 */
|
|
|
+ padding-top: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ max-height: 60px; /* 根据需要设置最大高度 */
|
|
|
+ overflow: hidden; /* 隐藏超出部分 */
|
|
|
+ text-overflow: ellipsis; /* 省略号效果 */
|
|
|
+ display: -webkit-box; /* 适用于多行文本处理 */
|
|
|
+ -webkit-box-orient: vertical; /* 垂直排列 */
|
|
|
}
|
|
|
|
|
|
.text-wrapper {
|
|
|
- white-space: nowrap; /* 不换行 */
|
|
|
- overflow: hidden; /* 隐藏超出部分 */
|
|
|
- text-overflow: ellipsis; /* 省略号效果 */
|
|
|
+ white-space: nowrap; /* 不换行 */
|
|
|
+ overflow: hidden; /* 隐藏超出部分 */
|
|
|
+ text-overflow: ellipsis; /* 省略号效果 */
|
|
|
}
|
|
|
|
|
|
.image-wrapper {
|
|
|
- width: 150px; /* 设置固定宽度 */
|
|
|
- height: 150px; /* 设置固定高度 */
|
|
|
- padding-bottom: 10px;
|
|
|
- margin: 0 auto; /* 横向居中 */
|
|
|
- overflow: hidden; /* 隐藏溢出部分 */
|
|
|
+ width: 150px; /* 设置固定宽度 */
|
|
|
+ height: 150px; /* 设置固定高度 */
|
|
|
+ padding-bottom: 10px;
|
|
|
+ margin: 0 auto; /* 横向居中 */
|
|
|
+ overflow: hidden; /* 隐藏溢出部分 */
|
|
|
}
|
|
|
|
|
|
.card-footer {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- // padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ // padding: 10px;
|
|
|
}
|
|
|
|
|
|
.pagination-container {
|
|
|
- display: flex;
|
|
|
- // justify-content: flex-end;
|
|
|
- // margin-bottom: 20px;
|
|
|
- position: absolute; right: 30px; bottom: 35px
|
|
|
+ display: flex;
|
|
|
+ // justify-content: flex-end;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ bottom: 35px;
|
|
|
}
|
|
|
|
|
|
:deep(.el-card__footer) {
|
|
|
- border-top: none;
|
|
|
- padding: 0 0 10px 0;
|
|
|
+ border-top: none;
|
|
|
+ padding: 0 0 10px 0;
|
|
|
}
|
|
|
</style>
|
xinyan