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

<template>
  <a-modal
    :width="1100"
    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-form-item>
          </a-col>
          <a-col :span="4" 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 class="edit-operation">
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" v-if="searchParams.type===0" html-type="submit" 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 {getRecommendCompanyPostList, addRecommend} from '@/api/jobUserManager/recommendMgt';
import {getPaginationTotalTitle} from '@/utils/common';
import dayjs from 'dayjs';
import {message} from "ant-design-vue";

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 searchParams = reactive({
      pageIndex: 1,
      pageSize: 10,
      jobUserName: null,
      jobHuntID: '',
      professionID: '',
      companyName: null,
      professionName: null,
      type: 0
    });
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false,
    });
    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', width: 100, align: "center",},
      {title: '岗位名称', dataIndex: 'professionName', key: 'professionName', width: 150, align: "center",},
      {title: '招聘人数', dataIndex: 'recruitCount', key: 'recruitCount', width: 150, align: "center",},
      {
        title: '工作开始时间', dataIndex: 'startTime', key: 'startTime', width: 100, align: "center",
        customRender: ({record}) => record.startTime == null ? "" : dayjs(record.startTime).format('YYYY-MM-DD'),
      },
      {
        title: '工作结束时间', dataIndex: 'endTime', key: 'endTime', width: 100, align: "center",
        customRender: ({record}) => record.endTime == null ? "" : dayjs(record.endTime).format('YYYY-MM-DD'),
      },
      {title: '工作地点', dataIndex: 'companyAddress', key: 'companyAddress', 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) => {
      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 getRecommendCompanyPostList(searchParams);
      dataList.value = result.list;
      formState.total = result.total;
      formState.loading = false;
    };

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

    const onRecommend = (item: any) => {
      addRecommendList.value.push({
        recommendMgtID: item.recommendMgtID,
        postID: item.postID,
        jobHuntID: searchParams.jobHuntID,
        recommendType: 1
      });
      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,
            postID: item.postID,
            jobHuntID: searchParams.jobHuntID,
            recommendType: 1
          });
        }
      })
      addRecommend(addRecommendList.value).then(() => {
        loadData();
        addRecommendList.value = [];
      });
    };

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

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

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

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