index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518
  1. <template>
  2. <fs-page>
  3. <div class="job-application-container">
  4. <div class="sidebar">
  5. <div class="tree-container">
  6. <!-- 职位分类 -->
  7. <div class="category-title" @click="togglePositionList">
  8. <el-icon><Briefcase /></el-icon>
  9. <span>职位</span>
  10. <el-icon class="expand-icon" :class="{ 'is-expanded': showPositionList }">
  11. <ArrowRight />
  12. </el-icon>
  13. </div>
  14. <!-- 职位列表 -->
  15. <div v-if="showPositionList" class="position-list">
  16. <!-- 全部职位 -->
  17. <div class="tree-item" :class="{ active: activeNode === 'position-all' }" @click="handleNodeClick({ type: 'all', id: 'position-all' })">
  18. <div class="item-content">
  19. <span>全部</span>
  20. </div>
  21. </div>
  22. <!-- 职位列表项 -->
  23. <div
  24. v-for="position in positions"
  25. :key="'position-' + position.id"
  26. class="tree-item"
  27. :class="{ active: activeNode === 'position-' + position.id }"
  28. @click="handleNodeClick({ type: 'position', value: position.title, id: 'position-' + position.id })"
  29. >
  30. <div class="item-content">
  31. <el-icon><ArrowRight /></el-icon>
  32. <span>{{ position.title }}</span>
  33. </div>
  34. <div class="item-count" v-if="position.count">{{ position.count }}</div>
  35. </div>
  36. </div>
  37. <!-- 全部 -->
  38. <div class="tree-item" :class="{ active: activeNode === 'all' }" @click="handleNodeClick({ type: 'all' })">
  39. <div class="item-content">
  40. <el-icon><Grid /></el-icon>
  41. <span>全部</span>
  42. </div>
  43. <div class="item-count">{{ totalCount }}人</div>
  44. </div>
  45. <!-- 试用期 -->
  46. <div class="tree-item" :class="{ active: activeNode === 'status-1' }" @click="handleNodeClick({ type: 'status', value: 1, id: 'status-1' })">
  47. <div class="item-content">
  48. <el-icon><Clock /></el-icon>
  49. <span>试用期</span>
  50. <el-icon class="expand-icon" :class="{ 'is-expanded': showProbationSubMenu }" @click="toggleProbationSubMenu">
  51. <ArrowRight />
  52. </el-icon>
  53. </div>
  54. <div class="item-count" v-if="statusCounts['1']">{{ statusCounts['1'] }}</div>
  55. </div>
  56. <!-- 试用期子菜单 -->
  57. <div v-if="showProbationSubMenu" class="submenu">
  58. <div class="tree-item" :class="{ active: activeNode === 'status-1-1' }" @click="handleNodeClick({ type: 'status', value: '1-1', id: 'status-1-1' })">
  59. <div class="item-content">
  60. <span>通过考核</span>
  61. </div>
  62. <div class="item-count" v-if="statusCounts['1-1']">{{ statusCounts['1-1'] }}</div>
  63. </div>
  64. <div class="tree-item" :class="{ active: activeNode === 'status-1-2' }" @click="handleNodeClick({ type: 'status', value: '1-2', id: 'status-1-2' })">
  65. <div class="item-content">
  66. <span>未通过考核</span>
  67. </div>
  68. <div class="item-count" v-if="statusCounts['1-2']">{{ statusCounts['1-2'] }}</div>
  69. </div>
  70. <div class="tree-item" :class="{ active: activeNode === 'status-1-3' }" @click="handleNodeClick({ type: 'status', value: '1-3', id: 'status-1-3' })">
  71. <div class="item-content">
  72. <span>尚未考核</span>
  73. </div>
  74. <div class="item-count" v-if="statusCounts['1-3']">{{ statusCounts['1-3'] }}</div>
  75. </div>
  76. </div>
  77. <!-- 考察期 -->
  78. <div class="tree-item" :class="{ active: activeNode === 'status-2' }" @click="handleNodeClick({ type: 'status', value: 2, id: 'status-2' })">
  79. <div class="item-content">
  80. <el-icon><ArrowRight /></el-icon>
  81. <span>考察期</span>
  82. </div>
  83. <div class="item-count" v-if="statusCounts['2']">{{ statusCounts['2'] }}</div>
  84. </div>
  85. <!-- 正式员工 -->
  86. <div class="tree-item" :class="{ active: activeNode === 'status-3' }" @click="handleNodeClick({ type: 'status', value: 3, id: 'status-3' })">
  87. <div class="item-content">
  88. <el-icon><Check /></el-icon>
  89. <span>正式员工</span>
  90. <el-icon class="expand-icon" :class="{ 'is-expanded': showFormalSubMenu }" @click="toggleFormalSubMenu">
  91. <ArrowRight />
  92. </el-icon>
  93. </div>
  94. <div class="item-count" v-if="statusCounts['3']">{{ statusCounts['3'] }}</div>
  95. </div>
  96. <!-- 正式员工子菜单 -->
  97. <div v-if="showFormalSubMenu" class="submenu">
  98. <div class="tree-item" :class="{ active: activeNode === 'status-3-1' }" @click="handleNodeClick({ type: 'status', value: '5', id: 'status-3-1' })">
  99. <div class="item-content">
  100. <span>已盘点</span>
  101. </div>
  102. <div class="item-count" v-if="statusCounts['3-1']">{{ statusCounts['3-1'] }}</div>
  103. </div>
  104. </div>
  105. <!-- 已离职 -->
  106. <div class="tree-item" :class="{ active: activeNode === 'status-4' }" @click="handleNodeClick({ type: 'status', value: 4, id: 'status-4' })">
  107. <div class="item-content">
  108. <el-icon><RefreshRight /></el-icon>
  109. <span>已离职</span>
  110. </div>
  111. <div class="item-count" v-if="statusCounts['4']">{{ statusCounts['4'] }}</div>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="content">
  116. <fs-crud ref="crudRef" v-bind="crudBinding">
  117. <!-- 可以添加自定义插槽,如果需要 -->
  118. </fs-crud>
  119. <div class="show-resigned-checkbox">
  120. <el-checkbox v-model="showResigned" @change="handleShowResignedChange">
  121. 显示已离职员工
  122. </el-checkbox>
  123. </div>
  124. </div>
  125. </div>
  126. <BatchTagsDialog ref="batchTagsDialogRef" :crudExpose="crudExpose" />
  127. <BatchStatusDialog ref="batchStatusDialogRef" :crudExpose="crudExpose" @success="handleBatchStatusSuccess" />
  128. </fs-page>
  129. </template>
  130. <script lang="ts" setup name="areas">
  131. import { onMounted, ref, reactive } from 'vue';
  132. import { useFs } from '@fast-crud/fast-crud';
  133. import { createCrudOptions } from './crud';
  134. import { GetPermission } from './api';
  135. import { handleColumnPermission } from '/@/utils/columnPermission';
  136. import { Grid, Clock, ArrowRight, Check, RefreshRight, Briefcase } from '@element-plus/icons-vue';
  137. import BatchTagsDialog from './components/BatchTagsDialog.vue';
  138. import BatchStatusDialog from './components/BatchStatusDialog.vue';
  139. import { getApplicationStatusSummary } from './api';
  140. import { Session } from '/@/utils/storage';
  141. const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({
  142. createCrudOptions,
  143. context: {
  144. openBatchTagsDialog: (selection: any) => {
  145. batchTagsDialogRef.value.open(selection);
  146. },
  147. openBatchStatusDialog: (selection: any) => {
  148. batchStatusDialogRef.value.open(selection);
  149. },
  150. selectedRows: ref([]) // 修改为响应式引用
  151. }
  152. });
  153. const batchTagsDialogRef = ref();
  154. const batchStatusDialogRef = ref();
  155. // 子菜单展开状态
  156. const showProbationSubMenu = ref(false);
  157. const showFormalSubMenu = ref(false);
  158. // 显示已离职员工勾选框状态
  159. const showResigned = ref(false);
  160. // 状态计数
  161. const totalCount = ref(0);
  162. const statusCounts = reactive<Record<string, number>>({
  163. '1': 0, // 试用期
  164. '1-1': 0, // 通过考核
  165. '1-2': 0, // 未通过考核
  166. '1-3': 0, // 尚未考核
  167. '3': 0, // 正式员工
  168. '3-1': 0, // 已盘点
  169. '3-2': 0, // 未盘点
  170. '2': 0, // 考察期
  171. '4': 0 // 已离职
  172. });
  173. // 职位列表
  174. const showPositionList = ref(true);
  175. const positions = ref<Array<{id: number|string, title: string, count?: number}>>([]);
  176. // 获取职位列表
  177. const fetchPositions = async () => {
  178. try {
  179. const res = await fetch(`${import.meta.env.VITE_API_URL}/api/system/job/list?page=1&limit=100&tenant_id=${Session.get('tenant_id')}`);
  180. const data = await res.json();
  181. if (data.code === 2000 && data.data ) {
  182. positions.value = data.data.map((item: any) => ({
  183. id: item.id,
  184. title: item.title || item.name || item.job_name,
  185. count: 0
  186. }));
  187. } else {
  188. console.error('获取职位列表失败:', data.msg || '未知错误');
  189. }
  190. } catch (error) {
  191. console.error('获取职位列表异常:', error);
  192. // 设置默认职位,以防接口失败
  193. positions.value = [{ id: 1, title: '流水线操作工', count: 0 }];
  194. }
  195. };
  196. // 获取申请状态统计数据
  197. const fetchStatusSummary = async () => {
  198. try {
  199. const res = await getApplicationStatusSummary();
  200. const data = res;
  201. console.log(data)
  202. if (data.code === 2000 && data.data) {
  203. totalCount.value = data.data.total || 0;
  204. // 更新状态计数
  205. if (data.data.status_data && Array.isArray(data.data.status_data)) {
  206. data.data.status_data.forEach((item: any) => {
  207. // 注意:API返回的status可能与前端定义的不完全一致,需要映射
  208. const statusMap: Record<number, number> = {
  209. 0: 1, // API中的0对应前端的1(待面试)
  210. 2: 2, // 已面试
  211. 3: 3, // 已录用
  212. 4: 4 // 已拒绝
  213. };
  214. const frontendStatus = statusMap[item.status];
  215. if (frontendStatus && frontendStatus in statusCounts) {
  216. statusCounts[frontendStatus] = item.count;
  217. }
  218. });
  219. } else {
  220. // 如果没有status_data,则使用单独的字段
  221. statusCounts['1'] = data.data.pending || 0;
  222. statusCounts['2'] = data.data.interviewed || 0;
  223. statusCounts['3'] = data.data.hired || 0;
  224. statusCounts['4'] = data.data.rejected || 0;
  225. }
  226. } else {
  227. console.error('获取申请状态统计失败:', data.message || '未知错误');
  228. }
  229. } catch (error) {
  230. console.error('获取申请状态统计异常:', error);
  231. }
  232. };
  233. // 切换职位列表显示
  234. const togglePositionList = () => {
  235. showPositionList.value = !showPositionList.value;
  236. };
  237. // 当前激活的节点
  238. const activeNode = ref('all');
  239. // 处理树节点点击
  240. const handleNodeClick = (data: any) => {
  241. activeNode.value = data.id || 'all';
  242. if (data.type === 'all') {
  243. try {
  244. // 尝试重置表单,如果方法存在的话
  245. const searchRef = crudExpose.getSearchRef();
  246. if (searchRef && typeof searchRef.resetFields === 'function') {
  247. searchRef.resetFields();
  248. }
  249. } catch (error) {
  250. console.warn('重置表单失败:', error);
  251. }
  252. // 点击"全部"时也只显示状态为1,2,3,4,5的数据
  253. crudExpose.doSearch({
  254. form: {
  255. status: '1, 2, 3, 4, 5' // 试用期、考察期、在职、已离职、在职已盘点
  256. }
  257. });
  258. } else if (data.type === 'status') {
  259. // 按状态筛选
  260. crudExpose.doSearch({
  261. form: {
  262. status: data.value
  263. }
  264. });
  265. } else if (data.type === 'position') {
  266. // 按职位筛选
  267. crudExpose.doSearch({
  268. form: {
  269. title: data.value
  270. }
  271. });
  272. }
  273. };
  274. // 更新计数
  275. const updateCounts = (data: any) => {
  276. if (!data || !data.records) return;
  277. // 统计各职位数量
  278. // 重置职位计数
  279. positions.value.forEach(position => {
  280. position.count = 0;
  281. });
  282. // 统计职位数量
  283. data.records.forEach((record: any) => {
  284. if (record.position_title) {
  285. const position = positions.value.find(p => p.title === record.position_title);
  286. if (position) {
  287. position.count = (position.count || 0) + 1;
  288. }
  289. }
  290. });
  291. };
  292. // 处理批量状态修改成功
  293. const handleBatchStatusSuccess = () => {
  294. // 刷新数据和状态统计
  295. crudExpose.doRefresh();
  296. fetchStatusSummary();
  297. };
  298. // 切换子菜单显示
  299. const toggleProbationSubMenu = (event: Event) => {
  300. event.stopPropagation();
  301. showProbationSubMenu.value = !showProbationSubMenu.value;
  302. };
  303. const toggleFormalSubMenu = (event: Event) => {
  304. event.stopPropagation();
  305. showFormalSubMenu.value = !showFormalSubMenu.value;
  306. };
  307. // 处理显示已离职员工勾选框变化
  308. const handleShowResignedChange = (value: boolean) => {
  309. if (value) {
  310. // 显示已离职员工
  311. crudExpose.doSearch({
  312. form: {
  313. status: 4 // 已离职状态
  314. }
  315. });
  316. } else {
  317. // 重置搜索,只显示状态为1,2,3,4,5的员工
  318. crudExpose.doSearch({
  319. form: {
  320. status: '1, 2, 3, 4, 5' // 试用期、考察期、在职、已离职、在职已盘点
  321. }
  322. });
  323. }
  324. };
  325. // 页面打开后获取列表数据
  326. onMounted(async () => {
  327. // 获取职位列表
  328. await fetchPositions();
  329. // 获取申请状态统计
  330. await fetchStatusSummary();
  331. // 设置列权限
  332. const newOptions = await handleColumnPermission(GetPermission, crudOptions);
  333. // 添加数据加载后的回调,用于更新职位计数
  334. if (newOptions && newOptions.crudOptions && newOptions.crudOptions.request) {
  335. const originalPageRequest = newOptions.crudOptions.request.pageRequest;
  336. newOptions.crudOptions.request.pageRequest = async (query: any) => {
  337. const res = await originalPageRequest(query);
  338. updateCounts(res.data);
  339. return res;
  340. };
  341. }
  342. // 重置crudBinding
  343. resetCrudOptions(newOptions);
  344. // 初始化时只显示状态为1,2,3,4,5的数据(排除状态7:转入在外人才库)
  345. crudExpose.doSearch({
  346. form: {
  347. status: '1, 2, 3, 4, 5' // 试用期、考察期、在职、已离职、在职已盘点
  348. }
  349. });
  350. });
  351. </script>
  352. <style scoped>
  353. .job-application-container {
  354. display: flex;
  355. height: 100%;
  356. }
  357. .sidebar {
  358. overflow: auto;
  359. margin-top: 10px;
  360. width: 200px;
  361. margin-right: 5px;
  362. flex-shrink: 0;
  363. background-color: #fff;
  364. border-right: 1px solid #ebeef5;
  365. border-radius: 10px;
  366. }
  367. .tree-container {
  368. padding: 8px 0;
  369. }
  370. .tree-item {
  371. display: flex;
  372. justify-content: space-between;
  373. align-items: center;
  374. padding: 10px 16px;
  375. cursor: pointer;
  376. transition: background-color 0.3s;
  377. width: 185px;
  378. }
  379. .item-content span{
  380. overflow: hidden;
  381. text-overflow: ellipsis;
  382. white-space: nowrap;
  383. width: 100%;
  384. }
  385. .tree-item:hover {
  386. background-color: #f5f7fa;
  387. }
  388. .tree-item.active {
  389. background-color: #f0f7ff;
  390. color: #409eff;
  391. border-right: 2px solid #409eff;
  392. }
  393. .item-content {
  394. display: flex;
  395. align-items: center;
  396. gap: 8px;
  397. min-width: 0;
  398. flex: 1;
  399. }
  400. .item-count {
  401. font-size: 12px;
  402. color: #909399;
  403. }
  404. .category-title {
  405. display: flex;
  406. align-items: center;
  407. padding: 12px 16px;
  408. margin-top: 8px;
  409. font-weight: 500;
  410. border-top: 1px solid #ebeef5;
  411. border-bottom: 1px solid #ebeef5;
  412. gap: 8px;
  413. cursor: pointer;
  414. }
  415. .expand-icon {
  416. margin-left: auto;
  417. transition: transform 0.3s;
  418. }
  419. .expand-icon.is-expanded {
  420. transform: rotate(90deg);
  421. }
  422. .position-list {
  423. width: 100%;
  424. padding-left: 8px;
  425. }
  426. .content {
  427. flex: 1;
  428. overflow: hidden;
  429. }
  430. .submenu {
  431. padding-left: 20px;
  432. background-color: #f8f9fa;
  433. }
  434. .submenu .tree-item {
  435. padding: 8px 16px;
  436. font-size: 13px;
  437. }
  438. .submenu .tree-item .item-content {
  439. padding-left: 16px;
  440. }
  441. .expand-icon {
  442. margin-left: auto;
  443. transition: transform 0.3s;
  444. font-size: 12px;
  445. }
  446. .expand-icon.is-expanded {
  447. transform: rotate(90deg);
  448. }
  449. .show-resigned-checkbox {
  450. position: fixed;
  451. bottom: 20px;
  452. right: 20px;
  453. background-color: #fff;
  454. padding: 8px 12px;
  455. border-radius: 4px;
  456. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  457. z-index: 100;
  458. }
  459. </style>