EmploymentSite/vue/src/views/companyService/post/recommend.vue

<template>
  <a-modal
    :width="1300"
    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="companyName">
              <a-input v-model:value="searchParams.companyName" 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="7"></a-col>
          <a-col :span="5" 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;
                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" v-show="expand">
          <a-col :span="6">
            <a-form-item label="求职人员姓名" :label-col="{ span: 8 }" name="userName">
              <a-input v-model:value="searchParams.userName" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="学历选择" :label-col="{span:6}" name="cultureLevel">
              <a-select
                ref="select"
                v-model:value="searchParams.cultureLevel"
                :options="cultureLevelList"
                :field-names="{ label: 'name', value: 'value' }"
                :allow-clear="true"
                @change="loadData"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="重点人员类别" :label-col="{span:6}" name="cultureLevel">
              <a-select
                ref="select"
                v-model:value="searchParams.keyPersonType"
                :options="keyPersonTypeList"
                :field-names="{ label: 'name', value: 'value' }"
                :allow-clear="true"
                @change="loadData"
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="edit-operation">
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" html-type="submit" v-if="searchParams.type===0" functioncode="T01030202" @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} from 'vue';
import type {FormInstance, TableColumnsType, TableProps} from 'ant-design-vue';
import {getRecommendJobList, addRecommend} from '@/api/jobUserManager/recommendMgt';
import {getPaginationTotalTitle} from '@/utils/common';
import type {SelectProps} from "ant-design-vue";
import {getSysDictionaryList} from "@/api/system/dictionary";
import {message} from "ant-design-vue";

export default defineComponent({
  name: 'RecommendJobList',
  setup() {
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const formRef = ref<FormInstance>();
    const expand = ref(true);
    const title = ref<string>('');
    const searchParams = reactive({
      pageIndex: 1,
      pageSize: 10,
      postID: null,
      userName: '',
      companyName: '',
      professionID: '',
      professionName: null,
      cultureLeve: null,
      keyPersonType: null,
      type: null
    });
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false,
    });
    const cultureLevelList = ref<SelectProps['options']>();
    const keyPersonTypeList = ref<SelectProps['options']>();

    const columns: TableColumnsType = [
      {
        title: '序号',
        align: 'center',
        width: 80,
        key: 'recommendMgtID',
        customRender: (item) =>
          `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`,
      },
      {title: '求职人员姓名', dataIndex: 'userName', key: 'userName', width: 100, align: "center",},
      {title: '联系电话', dataIndex: 'userMobile', key: 'userMobile', width: 150, align: "center",},
      {title: '所属驿站', dataIndex: 'siteName', key: 'siteName', width: 150, align: "center",},
      {title: '文化程度', dataIndex: 'culturerankName', key: 'culturerankName', width: 150, align: "center",},
      {title: '重点人员类别', dataIndex: 'keypersontypeName', key: 'keypersontypeName', width: 150, align: "center",},
      {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 dataList = ref([]);
    const addRecommendList = ref([] as any);

    const onSelectChange = (selectedRowKeys: any) => {
      console.log(selectedRowKeys)
      formState.selectedRowKeys = selectedRowKeys;
    };

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

    const onSearch = () => {
      loadData();
    }

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

    const show = (professionID: any, professionName: any, postID: any, companyName: any, type: any, titleName: string) => {
      visible.value = true;
      title.value = titleName;
      searchParams.postID = postID;
      searchParams.companyName = companyName;
      searchParams.professionID = professionID;
      searchParams.professionName = professionName;
      searchParams.type = type;
      loadData();
    }

    const onRecommend = (item: any) => {
      addRecommendList.value.push({
        recommendMgtID: item.recommendMgtID,
        jobHuntID: item.jobhuntID,
        postID: searchParams.postID,
        recommendType: 0
      });
      addRecommend(addRecommendList.value).then(() => {
        loadData();
        addRecommendList.value = [];
      });
    };

    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,
            jobHuntID: item.jobhuntID,
            postID: searchParams.postID,
            recommendType: 0
          });
        }
      })
      addRecommend(addRecommendList.value).then(() => {
        loadData();
        addRecommendList.value = [];
      });
    };

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

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

    const getCultureLevelList = () => {
      getSysDictionaryList('CultureLevel').then((data) => {
        cultureLevelList.value = data;
      });
    };

    const getKeyPersonTypeList = () => {
      getSysDictionaryList('KeyPersonType').then((data) => {
        keyPersonTypeList.value = data;
      });
    };

    return {
      title,
      visible,
      confirmLoading,
      formRef,
      expand,
      searchParams,
      formState,
      columns,
      pagination,
      dataList,
      cultureLevelList,
      addRecommendList,
      keyPersonTypeList,
      show,
      onSearch,
      onRecommend,
      onBatchRecommend,
      onSelectChange,
      handleTableChange,
      loadData,
      getCultureLevelList,
      getKeyPersonTypeList,
      handleOk,
      handleCancel
    };
  },
  created() {
  }
});
</script>

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