index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. <template>
  2. <div class="card-search">
  3. <a-form
  4. ref="formRef"
  5. name="advanced_search"
  6. class="ant-advanced-search-form"
  7. :model="searchParamsState"
  8. >
  9. <a-row :gutter="24">
  10. <a-col :span="6">
  11. <a-form-item label="姓名" :label-col="{ span: 8 }" name="jobUserName">
  12. <a-input v-model:value="searchParamsState.jobUserName" placeholder=""/>
  13. </a-form-item>
  14. </a-col>
  15. <a-col :span="6">
  16. <a-form-item label="求职岗位" :label-col="{ span: 8 }" name="professionName">
  17. <a-input v-model:value="searchParamsState.professionName" placeholder=""/>
  18. </a-form-item>
  19. </a-col>
  20. <a-col :span="8">
  21. <a-form-item label="工作年限" :label-col="{ span: 6 }" name="workYear">
  22. <a-input-number :min="0" :controls="false" v-model:value="searchParamsState.minWorkYear"
  23. style="width:110px;" placeholder=""/>
  24. <label style="margin:10px;">-</label>
  25. <a-input-number :min="searchParamsState.minWorkYear" :controls="false"
  26. v-model:value="searchParamsState.maxWorkYear" style="width:110px;" placeholder=""/>
  27. </a-form-item>
  28. </a-col>
  29. <a-col :span="4" style="text-align: left">
  30. <a-button type="primary" html-type="submit" @click="onSearch">查询</a-button>
  31. <a-button
  32. style="margin: 0 8px"
  33. @click="
  34. () => {
  35. searchParamsState.minWorkYear = null;
  36. searchParamsState.maxWorkYear = null;
  37. searchParamsState.minSalary = null;
  38. searchParamsState.maxSalary = null;
  39. formRef.resetFields();
  40. loadData();
  41. }
  42. ">重置
  43. </a-button>
  44. <a style="font-size: 12px" @click="expand = !expand">
  45. <template v-if="expand">
  46. <UpOutlined/>
  47. </template>
  48. <template v-else>
  49. <DownOutlined/>
  50. </template>
  51. {{ expand ? '收缩' : '展开' }}
  52. </a>
  53. </a-col>
  54. </a-row>
  55. <a-row :gutter="24" v-show="expand">
  56. <a-col :span="6">
  57. <a-form-item label="求职类型" :label-col="{ span: 8 }" name="jobHuntTypeID">
  58. <a-select ref="select"
  59. v-model:value="searchParamsState.jobHuntTypeID"
  60. :options="jobHuntTypeList"
  61. :field-names="{ label: 'name', value: 'value' }"
  62. :allow-clear="true"
  63. @change="loadData"
  64. >
  65. </a-select>
  66. </a-form-item>
  67. </a-col>
  68. <a-col :span="6">
  69. <a-form-item label="人才类型" :label-col="{ span: 8 }" name="jobUserTypeID">
  70. <a-select ref="select"
  71. v-model:value="searchParamsState.jobUserTypeID"
  72. :options="jobUserTypeList"
  73. :field-names="{ label: 'name', value: 'value' }"
  74. :allow-clear="true"
  75. @change="loadData">
  76. </a-select>
  77. </a-form-item>
  78. </a-col>
  79. <a-col :span="8">
  80. <a-form-item label="月薪要求" :label-col="{ span: 6 }" name="salary">
  81. <a-input-number style="width: 110px" :controls="false" :min="0" v-model:value="searchParamsState.minSalary"
  82. placeholder=""/>
  83. <label style="margin:10px;">-</label>
  84. <a-input-number style="width: 110px" :controls="false" :min="searchParamsState.minSalary"
  85. v-model:value="searchParamsState.maxSalary"
  86. placeholder=""/>
  87. </a-form-item>
  88. </a-col>
  89. <a-col :span="4" style="text-align: left"></a-col>
  90. </a-row>
  91. <a-row :gutter="24" v-show="expand">
  92. <a-col :span="6">
  93. <a-form-item label="是否完成求职" :label-col="{ span: 8 }" name="isAccomplish">
  94. <a-select ref="select"
  95. v-model:value="searchParamsState.isAccomplish"
  96. :options="isAccomplishList"
  97. :field-names="{ label: 'name', value: 'value' }"
  98. :allow-clear="true"
  99. @change="loadData"
  100. >
  101. </a-select>
  102. </a-form-item>
  103. </a-col>
  104. <a-col :span="6">
  105. <a-form-item label="所属驿站" :label-col="{ span: 8 }" name="siteID">
  106. <a-select
  107. ref="select"
  108. v-model:value="searchParamsState.siteID"
  109. :options="siteList"
  110. :field-names="{ label: 'siteName', value: 'siteID' }"
  111. :allow-clear="true"
  112. @change="loadData"
  113. >
  114. </a-select>
  115. </a-form-item>
  116. </a-col>
  117. <a-col :span="6">
  118. <a-form-item label="所属县区" :label-col="{span:8}" name="regionCode">
  119. <a-select
  120. ref="select"
  121. v-model:value="searchParamsState.regionCode"
  122. :options="regionList"
  123. :field-names="{ label: 'name', value: 'code' }"
  124. :allow-clear="true"
  125. @change="loadData"
  126. >
  127. </a-select>
  128. </a-form-item>
  129. </a-col>
  130. </a-row>
  131. <a-row :gutter="24" v-show="expand">
  132. <a-col :span="6">
  133. <a-form-item label="登记时间" :label-col="{ span: 8 }" name="isAccomplish">
  134. <a-range-picker v-model:value="createDate" :placeholder="['开始日期', '结束日期']" format="YYYY-MM-DD"
  135. @change="onCreateTimeChange"/>
  136. </a-form-item>
  137. </a-col>
  138. </a-row>
  139. <a-row class="edit-operation">
  140. <a-col :span="24" class="flex-space-between">
  141. <div>
  142. <!-- 表格字段筛选按钮 -->
  143. <ColumnsSetting :table-columns="originalColumns" :checked-table-columns="columns"
  144. @on-check="columnsCheckSub"></ColumnsSetting>
  145. </div>
  146. <div>
  147. <a-button type="primary" html-type="submit" functioncode="T01030202" @click='onAdd'>新增</a-button>
  148. <BImportExcel functioncode="T01030205"
  149. :options="importOptions"
  150. @success="loadData"
  151. ></BImportExcel>
  152. <BExportExcel :title="'导出'" :filename="'求职意向信息'" :url="'jobUserService/jobHunt/export'"
  153. :params="{...exportSearchParams, rows:100000,jobHuntIDList:formState.selectedRowKeys.join(',')}"></BExportExcel>
  154. </div>
  155. </a-col>
  156. </a-row>
  157. </a-form>
  158. <div class="search-result-list">
  159. <a-table :columns="columns" :data-source="dataList" :scroll="{ x: '100%', y: 500 }" :pagination="pagination"
  160. :loading="formState.loading"
  161. :row-selection="{ selectedRowKeys: formState.selectedRowKeys, onChange: onSelectChange }"
  162. :row-key="(record) => record.jobHuntID" bordered @change="handleTableChange">
  163. <template #bodyCell="{ column, text, record }">
  164. <template v-if="column.key === 'recommendNum'">
  165. <div>
  166. <a-button type="link" size="small" @click='onRecommendInfo(record)'>{{ record.recommendNum }}</a-button>
  167. </div>
  168. </template>
  169. <template v-if="column.key === 'operation'">
  170. <div class="table-operation">
  171. <a-button type="link" size="small" functioncode="T01030201" @click="onDetail(record.jobHuntID)">查看
  172. </a-button>
  173. <a-button type="link" size="small" functioncode="T01030203" @click='onEdit(record.jobHuntID)'>编辑
  174. </a-button>
  175. <a-button type="link" size="small" functioncode="T01030204" @click="onDel(record)">删除</a-button>
  176. <a-button type="link" size="small" functioncode="T01030207" @click="onRecommendCompanyPost(record)">推荐岗位
  177. </a-button>
  178. </div>
  179. </template>
  180. </template>
  181. </a-table>
  182. </div>
  183. <Recommend ref="recommendRef"></Recommend>
  184. </div>
  185. </template>
  186. <script lang="ts">
  187. import {computed, createVNode, defineComponent, reactive, ref} from 'vue';
  188. import type {FormInstance, SelectProps, TableProps} from 'ant-design-vue';
  189. import {message, Modal} from "ant-design-vue";
  190. import {delJobHunt, getJobHuntList} from '@/api/jobUserManager/jobhunt';
  191. import {getSysDictionaryList} from '@/api/system/dictionary';
  192. import {getPaginationTotalTitle} from '@/utils/common';
  193. import dayjs from 'dayjs';
  194. import BImportExcel from "@/components/basic/excel/importExcel/importExcel.vue";
  195. import BExportExcel from "@/components/basic/excel/exportExcel/exportExcel.vue";
  196. import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
  197. import type {ImportProps} from "@/components/basic/excel/importExcel/ImportProps";
  198. import {useTabsViewStore} from "@/store/modules/tabsView";
  199. import Recommend from "@/views/jobUserManager/jobhunt/recommend.vue";
  200. import {getSiteList} from "@/api/baseSettings/siteInfo";
  201. import {get} from "@/api/common";
  202. import ColumnsSetting from "@/components/common/ColumnsSetting.vue";
  203. export default defineComponent({
  204. name: 'JobHuntList',
  205. components: {ColumnsSetting, BImportExcel, BExportExcel, Recommend},
  206. setup() {
  207. const formRef = ref<FormInstance>();
  208. const tabsViewStore = useTabsViewStore();
  209. const expand = ref(false);
  210. const recommendRef = ref();
  211. const searchParamsState = reactive({
  212. pageIndex: 1,
  213. pageSize: 20,
  214. jobUserName: null,
  215. professionName: null,
  216. minWorkYear: null,
  217. maxWorkYear: null,
  218. jobHuntTypeID: null,
  219. jobUserTypeID: null,
  220. minSalary: null,
  221. maxSalary: null,
  222. isAccomplish: null,
  223. siteID: null,
  224. regionCode: null,
  225. startDate: null,
  226. endDate: null
  227. });
  228. // 导出Excel查询参数
  229. const exportSearchParams = computed(() => {
  230. let data = JSON.parse(JSON.stringify(searchParamsState));
  231. data.pageSize = formState.total;
  232. return data;
  233. })
  234. const formState = reactive({
  235. total: 0,
  236. selectedRowKeys: [],
  237. loading: false,
  238. });
  239. // 原始表格定义数据
  240. const originalColumns = [
  241. {
  242. title: '序号',
  243. align: 'center',
  244. width: 80,
  245. key: 'jobHuntID',
  246. customRender: (item) =>
  247. `${searchParamsState.pageSize * (searchParamsState.pageIndex - 1) + item.index + 1}`,
  248. isDisabled: true
  249. },
  250. {title: '姓名', dataIndex: 'jobUserName', key: 'jobUserName', width: 120, align: "center",},
  251. {title: '希望工作地区', dataIndex: 'areaWork', key: 'areaWork', width: 180, align: "center",},
  252. {title: '工作年限', dataIndex: 'workYear', key: 'workYear', width: 140, align: "center",},
  253. {title: '求职类型', dataIndex: 'jobHuntTypeStr', key: 'jobHuntTypeStr', align: "center",},
  254. {title: '求职岗位', dataIndex: 'professionName', key: 'professionName', align: "center",},
  255. {title: '推荐数量', dataIndex: 'recommendNum', key: 'recommendNum', align: "center"},
  256. {
  257. title: '可到职日期', dataIndex: 'inDate', key: 'inDate', width: 120, align: "center",
  258. customRender: ({record}) => record.inDate == null ? "" : dayjs(record.inDate).format('YYYY-MM-DD'),
  259. isDefaultClose: true
  260. },
  261. {title: '人才类型', dataIndex: 'jobUserTypeStr', key: 'jobUserTypeStr', align: "center", isDefaultClose: true},
  262. {
  263. title: '月薪要求', dataIndex: 'salary', key: 'salary', align: "center",
  264. customRender: (item) => {
  265. const salary = showSalary(item.record.minSalary, item.record.maxSalary);
  266. return salary;
  267. }, isDefaultClose: true
  268. },
  269. {title: '操作', key: 'operation', fixed: 'right', width: 220, align: "center", isDisabled: true},
  270. ];
  271. // 响应式表格定义
  272. const columns = ref<Array<any>>(originalColumns.filter(item => !item.isDefaultClose));
  273. const pagination = computed(() => ({
  274. total: formState.total,
  275. current: searchParamsState.pageIndex,
  276. pageSize: searchParamsState.pageSize,
  277. showSizeChanger: true,
  278. showTotal: (total) => getPaginationTotalTitle(total),
  279. }));
  280. const importOptions = ref<ImportProps>({
  281. title: '导入',
  282. url: '/jobUserService/jobHunt/importJobHunt',
  283. columns: [
  284. {cnName: '姓名', enName: 'jobUserName', width: 100},
  285. // {cnName: '工种名称', enName: 'workName', width: 100},
  286. {cnName: '求职类型', enName: 'jobHuntTypeStr', width: 100},
  287. {cnName: '人才类型', enName: 'jobUserTypeStr', width: 100},
  288. {cnName: '最低月薪(元)', enName: 'minSalary', width: 100},
  289. {cnName: '最高月薪(元)', enName: 'maxSalary', width: 100},
  290. {cnName: '求职岗位', enName: 'professionName', width: 100},
  291. {cnName: '希望工作地区', enName: 'areaWork', width: 100},
  292. {cnName: '可到职日期', enName: 'inDate', width: 100},
  293. {cnName: '工作年限', enName: 'workYear', width: 100},
  294. {cnName: '其他要求', enName: 'otherDemand', width: 100},
  295. ],
  296. template: {
  297. tempFileName: '求职意向导入模板.xlsx',
  298. url: '',
  299. params: null,
  300. },
  301. });
  302. const dataList = ref([]);
  303. const jobHuntTypeList = ref<SelectProps['options']>();
  304. const jobUserTypeList = ref<SelectProps['options']>();
  305. const isAccomplishList = ref<SelectProps['options']>();
  306. const createDate = ref([]);
  307. const siteList = ref<Array<any>>([]);
  308. const regionList = ref<SelectProps['options']>();
  309. const showSalary = (minSalary: any, maxSalary: any) => {
  310. if (minSalary != null) {
  311. if (maxSalary != null) {
  312. return minSalary.toString() + "-" + maxSalary.toString();
  313. } else {
  314. return "≥" + minSalary.toString();
  315. }
  316. } else {
  317. if (maxSalary != null) {
  318. return "≤" + maxSalary.toString();
  319. } else {
  320. return "";
  321. }
  322. }
  323. }
  324. const onSelectChange = (selectedRowKeys: any) => {
  325. formState.selectedRowKeys = selectedRowKeys;
  326. };
  327. const handleTableChange: TableProps['onChange'] = (pag: {
  328. pageSize: number;
  329. current: number;
  330. }) => {
  331. searchParamsState.pageIndex = pag.current;
  332. searchParamsState.pageSize = pag.pageSize;
  333. loadData();
  334. };
  335. const onSearch = () => {
  336. loadData();
  337. }
  338. const onDel = (item: any) => {
  339. formState.selectedRowKeys = [];
  340. if (item) {
  341. formState.selectedRowKeys.push(item.jobHuntID as never)
  342. }
  343. if (formState.selectedRowKeys.length <= 0) {
  344. message.warning('请选择需要删除的数据!');
  345. return false;
  346. }
  347. Modal.confirm({
  348. title: '确认删除选中的求职意向?',
  349. icon: createVNode(ExclamationCircleOutlined),
  350. content: '',
  351. okText: '确认删除',
  352. okType: 'danger',
  353. okButtonProps: {},
  354. cancelText: '取消',
  355. onOk() {
  356. delJobHunt(formState.selectedRowKeys).then(() => {
  357. loadData();
  358. });
  359. },
  360. onCancel() {
  361. formState.selectedRowKeys = [];
  362. },
  363. });
  364. };
  365. function getAllSites() {
  366. getSiteList({pageIndex: 1, pageSize: 9999}).then((result: any) => {
  367. siteList.value = result.list;
  368. })
  369. }
  370. function getAllRegion() {
  371. get('system/area/getCityList', {}).then(data => {
  372. regionList.value = data;
  373. });
  374. }
  375. const loadData = async function () {
  376. formState.loading = true;
  377. getJobHuntTypeList();
  378. getJobUserTypeList();
  379. getIsAccomplishList();
  380. const result: any = await getJobHuntList(searchParamsState);
  381. dataList.value = result.list;
  382. formState.total = result.total;
  383. formState.loading = false;
  384. };
  385. const onAdd = () => {
  386. tabsViewStore.addTabByPath('/jobusermgr/jobhunt/add', {id: null});
  387. };
  388. const onEdit = (id: string) => {
  389. tabsViewStore.addTabByPath('/jobusermgr/jobhunt/edit', {id: id});
  390. };
  391. const onDetail = (id: string) => {
  392. tabsViewStore.addTabByPath('/jobusermgr/jobhunt/detail', {id: id});
  393. };
  394. const onRecommendCompanyPost = (item) => {
  395. recommendRef.value.show(item.professionID, item.professionName, item.jobHuntID, item.jobUserName, 0,
  396. item.parentProfessionID, item.cultureRank, item.workYear, item.minSalary, item.maxSalary, "推荐企业岗位");
  397. }
  398. const onRecommendInfo = (item) => {
  399. if(item.recommendNum == 0){
  400. return;
  401. }
  402. recommendRef.value.show('', item.professionName, item.jobHuntID, item.jobUserName, 1,
  403. '', null, null, null, null, '已推荐企业岗位信息');
  404. }
  405. const getJobHuntTypeList = () => {
  406. getSysDictionaryList('JobHuntType').then((data) => {
  407. jobHuntTypeList.value = data;
  408. });
  409. };
  410. const getJobUserTypeList = () => {
  411. getSysDictionaryList('JobUserType').then((data) => {
  412. jobUserTypeList.value = data;
  413. });
  414. };
  415. const getIsAccomplishList = () => {
  416. getSysDictionaryList('ContractRecord').then((data) => {
  417. isAccomplishList.value = data;
  418. });
  419. };
  420. // 登记时间组件调整
  421. const onCreateTimeChange = (dateString) => {
  422. createDate.value = dateString;
  423. searchParamsState.startDate = dateString ? dateString[0].format("YYYY-MM-DD") : '';
  424. searchParamsState.endDate = dateString ? dateString[1].format("YYYY-MM-DD") : '';
  425. loadData();
  426. }
  427. // 字段展示列选择完毕
  428. function columnsCheckSub(columnsKeys: Array<string>) {
  429. // 从原始表格定义数据中过滤出已选择的字段
  430. columns.value = originalColumns.filter((item: any) => columnsKeys.includes(item.key));
  431. }
  432. return {
  433. formRef,
  434. expand,
  435. searchParamsState,
  436. formState,
  437. columns,
  438. originalColumns,
  439. columnsCheckSub,
  440. pagination,
  441. dataList,
  442. importOptions,
  443. jobHuntTypeList,
  444. jobUserTypeList,
  445. isAccomplishList,
  446. recommendRef,
  447. exportSearchParams,
  448. showSalary,
  449. loadData,
  450. onSearch,
  451. onAdd,
  452. onEdit,
  453. onDel,
  454. onRecommendCompanyPost,
  455. onRecommendInfo,
  456. onSelectChange,
  457. handleTableChange,
  458. getJobHuntTypeList,
  459. getJobUserTypeList,
  460. getIsAccomplishList,
  461. onDetail,
  462. getAllSites,
  463. getAllRegion,
  464. siteList,
  465. regionList,
  466. createDate,
  467. onCreateTimeChange
  468. };
  469. },
  470. created() {
  471. this.getAllSites();
  472. this.getAllRegion();
  473. this.loadData();
  474. },
  475. activated() {
  476. if (history.state.params?.reload) this.loadData();
  477. },
  478. });
  479. </script>
  480. <style lang="less" scoped></style>