EmploymentSite/vue/src/views/jobUserManager/jobhunt/recommend.vue

<template>
  <a-modal
    :width="1400"
    v-model:visible="visible"
    :title="title"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    ok-text="确认"
    cancel-text="取消"
    :keyboard="false"
    :mask-closable="false"
  >
    <div class="card-search">
      <a-form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="searchParams"
      >
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="求职人员姓名" :label-col="{ span: 8 }" name="name">
              <a-input v-model:value="searchParams.jobUserName" style="color: black;" disabled="true" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="求职岗位" :label-col="{ span: 8 }" name="professionName">
              <a-input v-model:value="searchParams.professionName" style="color: black;" disabled="true"
                       placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="招聘企业" :label-col="{ span: 8 }" name="companyName">
<!--              <a-input v-model:value="searchParams.companyName" placeholder=""/>-->
              <a-select ref="select" show-search optionFilterProp="label" allow-clear="true"
                        v-model:value="searchParams.companyName" >
                <a-select-option v-for="item in companyList" :label="item.companyName" :value="item.companyName"
                                 :key="item.companyID" @change="companyChange">
                  <span>{{ item.companyName }}</span>
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" style="text-align: left;">
            <a-button type="primary" html-type="submit" @click="onSearch">查询</a-button>
            <a-button
              style="margin: 0 8px"
              @click="
              () => {
                searchParams.pageIndex = 1;
                searchParams.pageSize = 10;
                searchParams.companyName = null;
                searchParams.parentProfessionID= '';
                searchParams.cultureRank= null;
                searchParams.workYear= null;
                searchParams.minSalary= null;
                searchParams.maxSalary= null;
                loadData();
              }
            ">重置
            </a-button>
            <!--          <a style="font-size: 12px" @click="expand = !expand">-->
            <!--            <template v-if="expand">-->
            <!--              <UpOutlined />-->
            <!--            </template>-->
            <!--            <template v-else>-->
            <!--              <DownOutlined />-->
            <!--            </template>-->
            <!--            {{ expand ? '收缩' : '展开' }}-->
            <!--          </a>-->
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="招聘岗位" :label-col="{ span: 8 }" name="inviteProfessionName">
              <a-auto-complete
                v-model:value="searchParams.inviteProfessionName"
                :options="inviteProfessionList"
                @search="selectInviteProfessionList"
                @change="inviteProfessionChange"
                :field-names="{
                            value:'professionName',
                          }"
              >
                <template #option="item">
                  <span v-html="formatStr(item.professionName)"></span>({{ item.parentProfessionName }})
                </template>
              </a-auto-complete>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="searchParams.type===0">
            <a-form-item label="推荐岗位筛选：" :label-col="{ span: 4 }" name="recommendPostWhere">
              <!--              <div :style="{ borderBottom: '1px solid #E9E9E9' }">-->
              <!--              <a-checkbox-->
              <!--                v-model:checked="checkAll"-->
              <!--                :indeterminate="indeterminate"-->
              <!--                @change="onCheckAllChange">-->
              <!--                全选-->
              <!--              </a-checkbox>-->
              <!--            </div>-->
              <a-checkbox-group v-model:value="checkRecommendPostWhereList" :options="recommendPostWhereList"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" >
        </a-row>
        <a-row class="edit-operation">
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" v-if="searchParams.type===0" html-type="submit" functioncode="T01030207"
                      @click='onBatchRecommend()'>批量推荐
            </a-button>
          </a-col>
        </a-row>
      </a-form>
      <div class="search-result-list">
        <a-table :columns="columns" :data-source="dataList" :scroll="{ x: '100%', y: 500 }" :pagination="pagination"
                 :loading="formState.loading"
                 :row-selection="{ selectedRowKeys: formState.selectedRowKeys, onChange: onSelectChange }"
                 :row-key="(record) => record.recommendMgtID" bordered @change="handleTableChange">
          <template #bodyCell="{ column, text, record }">
            <template v-if="searchParams.type===0 && column.key === 'operation'">
              <div class="table-operation">
                <a-button type="link" size="small" @click='onRecommend(record)'>推荐</a-button>
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import {reactive, ref, computed, defineComponent, toRefs, watch} from 'vue';
import type {FormInstance, TableColumnsType, TableProps} from 'ant-design-vue';
import {getRecommendCompanyPostList, addRecommend,getProfessionLikeList, getCompanyProfessionLikeList} from '@/api/jobUserManager/recommendMgt';
import {getPaginationTotalTitle} from '@/utils/common';
import dayjs from 'dayjs';
import {message, SelectProps} from "ant-design-vue";
import {getSysDictionaryList} from '@/api/system/dictionary';
import {get} from "@/api/common";
import {debounce} from "lodash-es";

export default defineComponent({
  name: 'RecommendCompanyPostList',
  setup() {
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const formRef = ref<FormInstance>();
    const expand = ref(false);
    const title = ref<string>();
    const dataList = ref([]);
    const companyList = ref<SelectProps['options']>();
    const addRecommendList = ref([] as any);
    const recommendPostWhereList = ref([] as any);

    get('companyService/company/getList', {pageIndex: 1, pageSize: 9999}).then(result => {
      companyList.value = result.list;
    });

    function companyChange(value: any) {
      getCompanyProfessionLikeList({
        pageIndex: 1,
        pageSize: 30,
        professionName:"",
        companyName:value
      }).then(data => {
        inviteProfessionList.value = data.list;
      })
    }

    const searchParams = reactive({
      pageIndex: 1,
      pageSize: 10,
      jobUserName: null,
      professionName: null,
      inviteProfessionName: null,
      type: 0,
      jobHuntID: '',
      companyName: null,
      professionID: '',
      inviteProfessionID: '',
      parentProfessionID: '',
      cultureRank: null,
      workYear: null,
      minSalary: null,
      maxSalary: null
    });
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false,
    });
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkRecommendPostWhereList: [1],
      professionID: '',
      parentProfessionID: '',
      cultureRank: null,
      workYear: null,
      minSalary: null,
      maxSalary: null
    });
    const columns: TableColumnsType = [
      {
        title: '序号',
        align: 'center',
        width: 80,
        key: 'recommendMgtID',
        customRender: (item) =>
          `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`,
      },
      {title: '企业名称', dataIndex: 'companyName', key: 'companyName', align: "center",},
      {title: '招聘岗位', dataIndex: 'professionName', key: 'professionName', align: "center",},
      {title: '要求学历', dataIndex: 'cultureRankName', key: 'cultureRankName', align: "center",},
      {title: '工作年限', dataIndex: 'workYearName', key: 'workYearName', align: "center",},
      {title: '招聘人数', dataIndex: 'recruitCount', key: 'recruitCount', align: "center",},
      {
        title: '薪资要求', dataIndex: 'salary', key: 'salary', align: "center",
        customRender: (item) => {
          const salary = showSalary(item.record.minSalary, item.record.maxSalary);
          return salary;
        }
      },
      {title: '工作地点', dataIndex: 'companyAddress', key: 'companyAddress', align: "center",},
      {
        title: '工作开始时间', dataIndex: 'startTime', key: 'startTime', align: "center",
        customRender: ({record}) => record.startTime == null ? "" : dayjs(record.startTime).format('YYYY-MM-DD'),
      },
      {
        title: '工作结束时间', dataIndex: 'endTime', key: 'endTime',align: "center",
        customRender: ({record}) => record.endTime == null ? "" : dayjs(record.endTime).format('YYYY-MM-DD'),
      },
      {title: '操作', key: 'operation', width: 60, align: 'center'},
    ];
    const pagination = computed(() => ({
      total: formState.total,
      current: searchParams.pageIndex,
      pageSize: searchParams.pageSize,
      showSizeChanger: true,
      showTotal: (total) => getPaginationTotalTitle(total),
    }));
    const onSelectChange = (selectedRowKeys: any) => {
      formState.selectedRowKeys = selectedRowKeys;
    };

    const handleTableChange: TableProps['onChange'] = (pag: {
      pageSize: number;
      current: number;
    }) => {
      searchParams.pageIndex = pag.current;
      searchParams.pageSize = pag.pageSize;
      loadData();
    };

    // 名称搜索关键字高亮
    const formatStr = (str: any) => {
      if (!str) {
        return "";
      }
      return str.replace(searchParams.inviteProfessionName, '<span style="color: coral">' + searchParams.inviteProfessionName + '</span>');
    }
    const inviteProfessionList = ref<Array<any>>([]);
    // 查询岗位
    const selectInviteProfessionList = debounce((professionName: string) => {
      if (professionName) {
        if(searchParams.companyName){
          getCompanyProfessionLikeList({
            pageIndex: 1,
            pageSize: 30,
            professionName:professionName,
            companyName:searchParams.companyName
          }).then(data => {
            inviteProfessionList.value = data.list;
          })
        }else{
          getProfessionLikeList({
            pageIndex: 1,
            pageSize: 30,
            professionName
          }).then(data => {
            inviteProfessionList.value = data.list;
          })
        }
      }
    }, 200)

    // 岗位名称变更
    function inviteProfessionChange(value: any) {
      searchParams.inviteProfessionName = value;
      console.log("当前搜索的招聘岗位名称",value);
      const profession = inviteProfessionList.value.find(prof => prof.professionName === value);
      if (profession) {
        searchParams.inviteProfessionID = profession.professionID;
        onSearch();
      } else {
        searchParams.inviteProfessionID = "";
      }
    }

    const onSearch = () => {
      searchParams.professionID = state.checkRecommendPostWhereList.findIndex(x => x == 1) >= 0 ? state.professionID : "";
      searchParams.cultureRank = state.checkRecommendPostWhereList.findIndex(x => x == 2) >= 0 ? state.cultureRank : null;
      searchParams.workYear = state.checkRecommendPostWhereList.findIndex(x => x == 3) >= 0 ? state.workYear : null;
      if (state.checkRecommendPostWhereList.findIndex(x => x == 4) >= 0) {
        searchParams.minSalary = state.minSalary;
        searchParams.maxSalary = state.maxSalary;
      } else {
        searchParams.minSalary = null;
        searchParams.maxSalary = null;
      }
      searchParams.parentProfessionID = state.checkRecommendPostWhereList.findIndex(x => x == 5) >= 0 ? state.parentProfessionID : "";
      loadData();
    }

    const loadData = async function () {
      formState.loading = true;
      const result: any = await getRecommendCompanyPostList(searchParams);
      dataList.value = result.list;
      formState.total = result.total;
      formState.loading = false;
    };

    const onCheckAllChange = (e: any) => {
      Object.assign(state, {
        checkRecommendPostWhereList: e.target.checked ? recommendPostWhereList.value.map(x => x.value) : [],
        indeterminate: false,
      });
    };

    watch(
      () => state.checkRecommendPostWhereList,
      val => {
        state.indeterminate = !!val.length && val.length < recommendPostWhereList.value.length;
        state.checkAll = val.length === recommendPostWhereList.value.length;
      },
    );

    const showSalary = (minSalary: any, maxSalary: any) => {
      if (minSalary != null) {
        if (maxSalary != null) {
          return minSalary.toString() + "-" + maxSalary.toString();
        } else {
          return "≥" + minSalary.toString();
        }
      } else {
        if (maxSalary != null) {
          return "≤" + maxSalary.toString();
        } else {
          return "";
        }
      }
    }

    const show = (professionID: any, professionName: any, jobHuntID: any, jobUserName: any, type: any,
                  parentProfessionID: any, cultureRank: any, workYear: any, minSalary: any, maxSalary: any,
                  titleName: string) => {
      visible.value = true;
      searchParams.jobHuntID = jobHuntID;
      searchParams.jobUserName = jobUserName;
      searchParams.professionID = professionID;
      searchParams.professionName = professionName;
      searchParams.type = type;
      searchParams.parentProfessionID = '';
      searchParams.cultureRank = null;
      searchParams.workYear = null;
      searchParams.minSalary = null;
      searchParams.maxSalary = null;
      state.checkRecommendPostWhereList = [1];
      state.professionID = professionID;
      state.parentProfessionID = parentProfessionID;
      state.cultureRank = cultureRank;
      state.workYear = workYear;
      state.workYear = workYear;
      state.minSalary = minSalary;
      state.maxSalary = maxSalary;
      title.value = titleName;
      loadData();
    }

    const onRecommend = (item: any) => {
      formState.selectedRowKeys = [];
      if(item){
        formState.selectedRowKeys.push(item.recommendMgtID as never);
      }
      addRecommendList.value.push({
        recommendMgtID: item.recommendMgtID,
        postID: item.postID,
        jobHuntID: searchParams.jobHuntID,
        recommendType: 1
      });
      addRecommend(addRecommendList.value).then((data) => {
        if(data!=-1){
          message.info("提交成功！");
          loadData();
          addRecommendList.value = [];
        }else{
          message.error("该岗位招聘日期已结束，不能推荐！");
        }
      });
    };

    const onBatchRecommend = () => {
      if (formState.selectedRowKeys.length == 0) {
        message.warn("请选择需要推荐的企业！")
        return;
      }
      formState.selectedRowKeys.forEach(id => {
        const item: any = dataList.value.find((x: any) => x.recommendMgtID == id)
        if (item) {
          addRecommendList.value.push({
            recommendMgtID: item.recommendMgtID,
            postID: item.postID,
            jobHuntID: searchParams.jobHuntID,
            recommendType: 1
          });
        }
      })
      addRecommend(addRecommendList.value).then((data) => {
        if(data!=-1){
          message.info("提交成功！");
          loadData();
          addRecommendList.value = [];
        }else{
          message.error("存在已停用或招聘日期已结束的岗位，推荐失败！");
        }
      });
    };

    const getRecommendPostWhereList = () => {
      getSysDictionaryList('RecommendPostWhere').then((data) => {
        recommendPostWhereList.value = data.map((x: any) => ({label: x.name, value: x.value}));
      });
    };

    const handleOk = () => {
      visible.value = false;
    };

    const handleCancel = () => {
      visible.value = false;
    };

    return {
      title,
      visible,
      confirmLoading,
      formRef,
      expand,
      searchParams,
      ...toRefs(state),
      formState,
      columns,
      pagination,
      dataList,
      companyList,
      inviteProfessionList,
      recommendPostWhereList,
      show,
      onSearch,
      formatStr,
      companyChange,
      inviteProfessionChange,
      showSalary,
      onCheckAllChange,
      onRecommend,
      onBatchRecommend,
      onSelectChange,
      handleTableChange,
      loadData,
      getRecommendPostWhereList,
      selectInviteProfessionList,
      handleOk,
      handleCancel
    };
  },
  mounted() {
    this.getRecommendPostWhereList();
  }
});
</script>

<style lang="less" scoped></style>