index.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. <template>
  2. <fs-page>
  3. <div class="job-application-container">
  4. <div class="sidebar">
  5. <div class="tree-container">
  6. <!-- 全部 -->
  7. <div class="tree-item" :class="{ active: activeNode === 'all' }" @click="handleNodeClick({ type: 'all' })">
  8. <div class="item-content">
  9. <el-icon><Grid /></el-icon>
  10. <span>全部</span>
  11. </div>
  12. <div class="item-count">{{ totalCount }}人</div>
  13. </div>
  14. <!-- 待安排 -->
  15. <div class="tree-item" :class="{ active: activeNode === 'status-1' }" @click="handleNodeClick({ type: 'status', value: 1, id: 'status-1' })">
  16. <div class="item-content">
  17. <el-icon><Clock /></el-icon>
  18. <span>待面试</span>
  19. </div>
  20. <div class="item-count" v-if="statusCounts[1]">{{ statusCounts[1] }}</div>
  21. </div>
  22. <!-- 推进中 -->
  23. <div class="tree-item" :class="{ active: activeNode === 'status-2' }" @click="handleNodeClick({ type: 'status', value: 2, id: 'status-2' })">
  24. <div class="item-content">
  25. <el-icon><ArrowRight /></el-icon>
  26. <span>已面试</span>
  27. </div>
  28. <div class="item-count" v-if="statusCounts[2]">{{ statusCounts[2] }}</div>
  29. </div>
  30. <!-- 已入职 -->
  31. <div class="tree-item" :class="{ active: activeNode === 'status-3' }" @click="handleNodeClick({ type: 'status', value: 3, id: 'status-3' })">
  32. <div class="item-content">
  33. <el-icon><Check /></el-icon>
  34. <span>已录用</span>
  35. </div>
  36. <div class="item-count" v-if="statusCounts[3]">{{ statusCounts[3] }}</div>
  37. </div>
  38. <!-- 待召回 -->
  39. <div class="tree-item" :class="{ active: activeNode === 'status-4' }" @click="handleNodeClick({ type: 'status', value: 4, id: 'status-4' })">
  40. <div class="item-content">
  41. <el-icon><RefreshRight /></el-icon>
  42. <span>已拒绝</span>
  43. </div>
  44. <div class="item-count" v-if="statusCounts[4]">{{ statusCounts[4] }}</div>
  45. </div>
  46. <!-- 职位分类 -->
  47. <div class="category-title" @click="togglePositionList">
  48. <el-icon><Briefcase /></el-icon>
  49. <span>职位</span>
  50. <el-icon class="expand-icon" :class="{ 'is-expanded': showPositionList }">
  51. <ArrowRight />
  52. </el-icon>
  53. </div>
  54. <!-- 职位列表 -->
  55. <div v-if="showPositionList" class="position-list">
  56. <!-- 全部职位 -->
  57. <div class="tree-item" :class="{ active: activeNode === 'position-all' }" @click="handleNodeClick({ type: 'all', id: 'position-all' })">
  58. <div class="item-content">
  59. <span>全部</span>
  60. </div>
  61. </div>
  62. <!-- 职位列表项 -->
  63. <div
  64. v-for="position in positions"
  65. :key="'position-' + position.id"
  66. class="tree-item"
  67. :class="{ active: activeNode === 'position-' + position.id }"
  68. @click="handleNodeClick({ type: 'position', value: position.title, id: 'position-' + position.id })"
  69. >
  70. <div class="item-content">
  71. <el-icon><ArrowRight /></el-icon>
  72. <span>{{ position.title }}</span>
  73. </div>
  74. <div class="item-count" v-if="position.count">{{ position.count }}</div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="content">
  80. <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
  81. </div>
  82. </div>
  83. </fs-page>
  84. </template>
  85. <script lang="ts" setup name="areas">
  86. import { onMounted, ref, reactive } from 'vue';
  87. import { useFs } from '@fast-crud/fast-crud';
  88. import { createCrudOptions } from './crud';
  89. import { GetPermission } from './api';
  90. import { handleColumnPermission } from '/@/utils/columnPermission';
  91. import { Grid, Clock, ArrowRight, Check, RefreshRight, Briefcase } from '@element-plus/icons-vue';
  92. const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({ createCrudOptions });
  93. // 状态计数
  94. const totalCount = ref(0);
  95. const statusCounts = reactive<Record<number, number>>({
  96. 1: 0, // 待面试
  97. 2: 0, // 已面试
  98. 3: 0, // 已录用
  99. 4: 0 // 已拒绝
  100. });
  101. // 职位列表
  102. const showPositionList = ref(true);
  103. const positions = ref<Array<{id: number|string, title: string, count?: number}>>([
  104. { id: 1, title: '流水线操作工', count: 0 },
  105. { id: 2, title: '咖啡师', count: 0 },
  106. { id: 3, title: '餐厅服务员', count: 0 }
  107. ]);
  108. // 切换职位列表显示
  109. const togglePositionList = () => {
  110. showPositionList.value = !showPositionList.value;
  111. };
  112. // 当前激活的节点
  113. const activeNode = ref('all');
  114. // 处理树节点点击
  115. const handleNodeClick = (data: any) => {
  116. activeNode.value = data.id || 'all';
  117. if (data.type === 'all') {
  118. // 清除所有筛选条件
  119. crudExpose.getSearchRef().resetFields();
  120. crudExpose.doRefresh();
  121. } else if (data.type === 'status') {
  122. // 按状态筛选
  123. crudExpose.doSearch({
  124. form: {
  125. status: data.value
  126. }
  127. });
  128. } else if (data.type === 'position') {
  129. // 按职位筛选
  130. crudExpose.doSearch({
  131. form: {
  132. position_title: data.value
  133. }
  134. });
  135. }
  136. };
  137. // 更新计数
  138. const updateCounts = (data: any) => {
  139. if (!data || !data.records) return;
  140. totalCount.value = data.total || 0;
  141. // 重置计数
  142. Object.keys(statusCounts).forEach(key => {
  143. statusCounts[Number(key)] = 0;
  144. });
  145. // 统计各状态数量
  146. data.records.forEach((record: any) => {
  147. const status = record.status;
  148. if (status && typeof status === 'number' && status in statusCounts) {
  149. statusCounts[status]++;
  150. }
  151. });
  152. // 统计各职位数量
  153. // 重置职位计数
  154. positions.value.forEach(position => {
  155. position.count = 0;
  156. });
  157. // 统计职位数量
  158. data.records.forEach((record: any) => {
  159. if (record.position_title) {
  160. const position = positions.value.find(p => p.title === record.position_title);
  161. if (position) {
  162. position.count = (position.count || 0) + 1;
  163. }
  164. }
  165. });
  166. };
  167. // 页面打开后获取列表数据
  168. onMounted(async () => {
  169. // 设置列权限
  170. const newOptions = await handleColumnPermission(GetPermission, crudOptions);
  171. // 添加数据加载后的回调,用于更新计数
  172. if (newOptions && newOptions.crudOptions && newOptions.crudOptions.request) {
  173. const originalPageRequest = newOptions.crudOptions.request.pageRequest;
  174. newOptions.crudOptions.request.pageRequest = async (query: any) => {
  175. const res = await originalPageRequest(query);
  176. updateCounts(res.data);
  177. return res;
  178. };
  179. }
  180. // 重置crudBinding
  181. resetCrudOptions(newOptions);
  182. // 刷新
  183. crudExpose.doRefresh();
  184. });
  185. </script>
  186. <style scoped>
  187. .job-application-container {
  188. display: flex;
  189. height: 100%;
  190. }
  191. .sidebar {
  192. margin-top: 10px;
  193. width: 200px;
  194. margin-right: 16px;
  195. flex-shrink: 0;
  196. background-color: #fff;
  197. border-right: 1px solid #ebeef5;
  198. border-radius: 10px;
  199. }
  200. .tree-container {
  201. padding: 8px 0;
  202. }
  203. .tree-item {
  204. display: flex;
  205. justify-content: space-between;
  206. align-items: center;
  207. padding: 10px 16px;
  208. cursor: pointer;
  209. transition: background-color 0.3s;
  210. }
  211. .tree-item:hover {
  212. background-color: #f5f7fa;
  213. }
  214. .tree-item.active {
  215. background-color: #f0f7ff;
  216. color: #409eff;
  217. border-right: 2px solid #409eff;
  218. }
  219. .item-content {
  220. display: flex;
  221. align-items: center;
  222. gap: 8px;
  223. }
  224. .item-count {
  225. font-size: 12px;
  226. color: #909399;
  227. }
  228. .category-title {
  229. display: flex;
  230. align-items: center;
  231. padding: 12px 16px;
  232. margin-top: 8px;
  233. font-weight: 500;
  234. border-top: 1px solid #ebeef5;
  235. border-bottom: 1px solid #ebeef5;
  236. gap: 8px;
  237. cursor: pointer;
  238. }
  239. .expand-icon {
  240. margin-left: auto;
  241. transition: transform 0.3s;
  242. }
  243. .expand-icon.is-expanded {
  244. transform: rotate(90deg);
  245. }
  246. .position-list {
  247. padding-left: 8px;
  248. }
  249. .content {
  250. flex: 1;
  251. overflow: hidden;
  252. }
  253. </style>