index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  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: 0, 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">
  81. <!-- 可以添加自定义插槽,如果需要 -->
  82. </fs-crud>
  83. </div>
  84. </div>
  85. <BatchTagsDialog ref="batchTagsDialogRef" :crudExpose="crudExpose" />
  86. <BatchStatusDialog ref="batchStatusDialogRef" :crudExpose="crudExpose" @success="handleBatchStatusSuccess" />
  87. </fs-page>
  88. </template>
  89. <script lang="ts" setup name="areas">
  90. import { onMounted, ref, reactive } from 'vue';
  91. import { useFs } from '@fast-crud/fast-crud';
  92. import { createCrudOptions } from './crud';
  93. import { GetPermission } from './api';
  94. import { handleColumnPermission } from '/@/utils/columnPermission';
  95. import { Grid, Clock, ArrowRight, Check, RefreshRight, Briefcase } from '@element-plus/icons-vue';
  96. import BatchTagsDialog from './components/index.vue';
  97. import BatchStatusDialog from './components/BatchStatusDialog.vue';
  98. import { getApplicationStatusSummary } from './api';
  99. const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({
  100. createCrudOptions,
  101. context: {
  102. openBatchTagsDialog: (selection: any) => {
  103. batchTagsDialogRef.value.open(selection);
  104. },
  105. openBatchStatusDialog: (selection: any) => {
  106. batchStatusDialogRef.value.open(selection);
  107. },
  108. selectedRows: [] // 存储选中的行
  109. }
  110. });
  111. const batchTagsDialogRef = ref();
  112. const batchStatusDialogRef = ref();
  113. // 状态计数
  114. const totalCount = ref(0);
  115. const statusCounts = reactive<Record<number, number>>({
  116. 1: 0, // 待面试
  117. 2: 0, // 已面试
  118. 3: 0, // 已录用
  119. 4: 0 // 已拒绝
  120. });
  121. // 职位列表
  122. const showPositionList = ref(true);
  123. const positions = ref<Array<{id: number|string, title: string, count?: number}>>([]);
  124. // 获取职位列表
  125. const fetchPositions = async () => {
  126. try {
  127. const res = await fetch(`${import.meta.env.VITE_API_URL}/api/system/job/list?page=1&limit=100&tenant_id=1`);
  128. const data = await res.json();
  129. if (data.code === 2000 && data.data ) {
  130. positions.value = data.data.map((item: any) => ({
  131. id: item.id,
  132. title: item.title || item.name || item.job_name,
  133. count: 0
  134. }));
  135. } else {
  136. console.error('获取职位列表失败:', data.msg || '未知错误');
  137. }
  138. } catch (error) {
  139. console.error('获取职位列表异常:', error);
  140. // 设置默认职位,以防接口失败
  141. positions.value = [{ id: 1, title: '流水线操作工', count: 0 }];
  142. }
  143. };
  144. // 获取申请状态统计数据
  145. const fetchStatusSummary = async () => {
  146. try {
  147. const res = await getApplicationStatusSummary();
  148. const data = res;
  149. console.log(data)
  150. if (data.code === 2000 && data.data) {
  151. totalCount.value = data.data.total || 0;
  152. // 更新状态计数
  153. if (data.data.status_data && Array.isArray(data.data.status_data)) {
  154. data.data.status_data.forEach((item: any) => {
  155. // 注意:API返回的status可能与前端定义的不完全一致,需要映射
  156. const statusMap: Record<number, number> = {
  157. 0: 1, // API中的0对应前端的1(待面试)
  158. 2: 2, // 已面试
  159. 3: 3, // 已录用
  160. 4: 4 // 已拒绝
  161. };
  162. const frontendStatus = statusMap[item.status];
  163. if (frontendStatus && frontendStatus in statusCounts) {
  164. statusCounts[frontendStatus] = item.count;
  165. }
  166. });
  167. } else {
  168. // 如果没有status_data,则使用单独的字段
  169. statusCounts[1] = data.data.pending || 0;
  170. statusCounts[2] = data.data.interviewed || 0;
  171. statusCounts[3] = data.data.hired || 0;
  172. statusCounts[4] = data.data.rejected || 0;
  173. }
  174. } else {
  175. console.error('获取申请状态统计失败:', data.message || '未知错误');
  176. }
  177. } catch (error) {
  178. console.error('获取申请状态统计异常:', error);
  179. }
  180. };
  181. // 切换职位列表显示
  182. const togglePositionList = () => {
  183. showPositionList.value = !showPositionList.value;
  184. };
  185. // 当前激活的节点
  186. const activeNode = ref('all');
  187. // 处理树节点点击
  188. const handleNodeClick = (data: any) => {
  189. activeNode.value = data.id || 'all';
  190. if (data.type === 'all') {
  191. try {
  192. // 尝试重置表单,如果方法存在的话
  193. const searchRef = crudExpose.getSearchRef();
  194. if (searchRef && typeof searchRef.resetFields === 'function') {
  195. searchRef.resetFields();
  196. }
  197. } catch (error) {
  198. console.warn('重置表单失败:', error);
  199. }
  200. // 无论如何都执行搜索,确保数据刷新
  201. crudExpose.doSearch({
  202. form: {}
  203. });
  204. } else if (data.type === 'status') {
  205. // 按状态筛选
  206. crudExpose.doSearch({
  207. form: {
  208. status: data.value
  209. }
  210. });
  211. } else if (data.type === 'position') {
  212. // 按职位筛选
  213. crudExpose.doSearch({
  214. form: {
  215. position_title: data.value
  216. }
  217. });
  218. }
  219. };
  220. // 更新计数
  221. const updateCounts = (data: any) => {
  222. if (!data || !data.records) return;
  223. // 统计各职位数量
  224. // 重置职位计数
  225. positions.value.forEach(position => {
  226. position.count = 0;
  227. });
  228. // 统计职位数量
  229. data.records.forEach((record: any) => {
  230. if (record.position_title) {
  231. const position = positions.value.find(p => p.title === record.position_title);
  232. if (position) {
  233. position.count = (position.count || 0) + 1;
  234. }
  235. }
  236. });
  237. };
  238. // 处理批量状态修改成功
  239. const handleBatchStatusSuccess = () => {
  240. // 刷新数据和状态统计
  241. crudExpose.doRefresh();
  242. fetchStatusSummary();
  243. };
  244. // 页面打开后获取列表数据
  245. onMounted(async () => {
  246. // 获取职位列表
  247. await fetchPositions();
  248. // 获取申请状态统计
  249. await fetchStatusSummary();
  250. // 设置列权限
  251. const newOptions = await handleColumnPermission(GetPermission, crudOptions);
  252. // 添加数据加载后的回调,用于更新职位计数
  253. if (newOptions && newOptions.crudOptions && newOptions.crudOptions.request) {
  254. const originalPageRequest = newOptions.crudOptions.request.pageRequest;
  255. newOptions.crudOptions.request.pageRequest = async (query: any) => {
  256. const res = await originalPageRequest(query);
  257. updateCounts(res.data);
  258. return res;
  259. };
  260. }
  261. // 重置crudBinding
  262. resetCrudOptions(newOptions);
  263. // 刷新
  264. crudExpose.doRefresh();
  265. });
  266. </script>
  267. <style scoped>
  268. .job-application-container {
  269. display: flex;
  270. height: 100%;
  271. }
  272. .sidebar {
  273. margin-top: 10px;
  274. width: 200px;
  275. margin-right: 5px;
  276. flex-shrink: 0;
  277. background-color: #fff;
  278. border-right: 1px solid #ebeef5;
  279. border-radius: 10px;
  280. }
  281. .tree-container {
  282. padding: 8px 0;
  283. }
  284. .tree-item {
  285. display: flex;
  286. justify-content: space-between;
  287. align-items: center;
  288. padding: 10px 16px;
  289. cursor: pointer;
  290. transition: background-color 0.3s;
  291. }
  292. .tree-item:hover {
  293. background-color: #f5f7fa;
  294. }
  295. .tree-item.active {
  296. background-color: #f0f7ff;
  297. color: #409eff;
  298. border-right: 2px solid #409eff;
  299. }
  300. .item-content {
  301. display: flex;
  302. align-items: center;
  303. gap: 8px;
  304. }
  305. .item-count {
  306. font-size: 12px;
  307. color: #909399;
  308. }
  309. .category-title {
  310. display: flex;
  311. align-items: center;
  312. padding: 12px 16px;
  313. margin-top: 8px;
  314. font-weight: 500;
  315. border-top: 1px solid #ebeef5;
  316. border-bottom: 1px solid #ebeef5;
  317. gap: 8px;
  318. cursor: pointer;
  319. }
  320. .expand-icon {
  321. margin-left: auto;
  322. transition: transform 0.3s;
  323. }
  324. .expand-icon.is-expanded {
  325. transform: rotate(90deg);
  326. }
  327. .position-list {
  328. padding-left: 8px;
  329. }
  330. .content {
  331. flex: 1;
  332. overflow: hidden;
  333. }
  334. </style>