EmploymentSite/vue/src/views/jobUserManager/recommendMgt/index.vue

<template>
  <div class="card-search">
    <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="searchParamsState"
    >
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="求职人姓名" :label-col="{ span: 8 }" name="name">
            <a-input v-model:value="searchParamsState.name" 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="searchParamsState.companyName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="推荐类型" :label-col="{ span: 8 }" name="recommendType">
            <a-select
              ref="select"
              v-model:value="searchParamsState.recommendType"
              :options="recommendTypeList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
              @change="loadData"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" style="text-align: left">
          <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
          <a-button
            style="margin: 0 8px"
            @click="
              () => {
                formRef.resetFields();
                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="educationId">
            <a-select
              ref="select"
              v-model:value="searchParamsState.entryState"
              :options="entryStateList"
              :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: 8 }" name="zpProfessionName">
            <a-input v-model:value="searchParamsState.zpProfessionName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="求职岗位" :label-col="{ span: 8 }" name="qzProfessionName">
            <a-input v-model:value="searchParamsState.qzProfessionName" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          <a-form-item label="推送人" :label-col="{ span: 8 }" name="pushName">
            <a-input v-model:value="searchParamsState.pushName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="所属驿站" :label-col="{ span: 8 }" name="siteID">
            <a-select
              ref="select"
              v-model:value="searchParamsState.siteID"
              :options="siteList"
              :field-names="{ label: 'siteName', value: 'siteID' }"
              :allow-clear="true"
              @change="loadData"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="所属县区" :label-col="{span:8}" name="regionCode">
            <a-select
              ref="select"
              v-model:value="searchParamsState.regionCode"
              :options="regionList"
              :field-names="{ label: 'name', value: 'code' }"
              :allow-clear="true"
              @change="loadData"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          <a-form-item label="登记时间" :label-col="{ span: 8 }" name="isAccomplish">
            <a-date-picker v-model:value="searchParamsState.startDate" picker="date" value-format="YYYY-MM-DD"
                           style="width: 115px;"/>
            <label style="margin:10px;">-</label>
            <a-date-picker v-model:value="searchParamsState.endDate" picker="date" value-format="YYYY-MM-DD"
                           style="width: 115px"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="edit-operation">
        <a-col :span="24" style="text-align: right"></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="column.key === 'operation'">
            <div class="table-operation">
              <a-button type="link" size="small" v-show="record.entryState!=1" functioncode="T01030203"
                        @click='onSetEntryState(record.recommendMgtID, 1)'>已入职
              </a-button>
              <a-button type="link" size="small" v-show="record.entryState==1" functioncode="T01030203"
                        @click='onSetEntryState(record.recommendMgtID, 0)'>已离职
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts">
import {reactive, ref, computed, defineComponent} from 'vue';
import type {FormInstance, TableColumnsType, TableProps, SelectProps} from 'ant-design-vue';
import {getList, setEntryState} from '@/api/jobUserManager/recommendMgt';
import {getSysDictionaryList} from '@/api/system/dictionary';
import {getPaginationTotalTitle} from '@/utils/common';
import dayjs from "dayjs";
import {getSiteList} from "@/api/baseSettings/siteInfo";
import {get} from "@/api/common";

export default defineComponent({
  name: 'recommendMgtList',
  setup() {
    const expand = ref(false);
    const modalRoleUserRef = ref();
    const modalRoleEditRef = ref();
    const formRef = ref<FormInstance>();
    const searchParamsState = reactive({
      pageIndex: 1,
      pageSize: 20,
      post: '',
      name: '',
      companyName: '',
      recommendType: null,
      entryState: null,
      pushName: '',
      zpProfessionName: '',
      qzProfessionName: '',
      siteID: null,
      regionCode: null,
      startDate: null,
      endDate: null
    });
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false,
    });
    const columns: TableColumnsType = [
      {
        title: '序号',
        align: 'center',
        width: 80,
        key: 'recommendMgtID',
        customRender: (item) =>
          `${searchParamsState.pageSize * (searchParamsState.pageIndex - 1) + item.index + 1}`,
      },
      {title: '求职者', dataIndex: 'name', key: 'name'},
      {title: '求职者电话', dataIndex: 'userMobile', key: 'userMobile'},
      {title: '求职岗位', dataIndex: 'qzProfessionName', key: 'qzProfessionName'},
      {title: '企业', dataIndex: 'companyName', key: 'companyName'},
      {title: '企业电话', dataIndex: 'companyMobile', key: 'companyMobile'},
      {title: '招聘岗位', dataIndex: 'zpProfessionName', key: 'zpProfessionName'},
      {title: '推荐类型', dataIndex: 'recommendTypeName', key: 'recommendTypeName'},
      {title: '入职状态', dataIndex: 'entryStateName', key: 'entryStateName'},
      {title: '推送人', dataIndex: 'pushName', key: 'pushName'},
      {
        title: '推送时间', dataIndex: 'createTime', key: 'createTime',
        customRender: ({record}) => dayjs(record.createTime).format('YYYY-MM-DD'),
      },
      {title: '操作', key: 'operation', width: 100, align: 'center'},
    ];
    const siteList = ref<Array<any>>([]);
    const regionList = ref<SelectProps['options']>();
    const pagination = computed(() => ({
      total: formState.total,
      current: searchParamsState.pageIndex,
      pageSize: searchParamsState.pageSize,
      showSizeChanger: true,
      showTotal: (total) => getPaginationTotalTitle(total),
    }));

    const dataList = ref([]);
    const recommendTypeList = ref<SelectProps['options']>();
    const entryStateList = ref<SelectProps['options']>();

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

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

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

    function getAllSites() {
      getSiteList({pageIndex: 1, pageSize: 9999}).then((result: any) => {
        siteList.value = result.list;
      })
    }

    function getAllRegion() {
      get('system/area/getCityList', {}).then(data => {
        regionList.value = data;
      });
    }

    const loadData = async function () {
      formState.loading = true;
      const result: any = await getList(searchParamsState);

      dataList.value = result.list;
      formState.total = result.total;
      formState.loading = false;
    };

    const onSetEntryState = async (recommendMgtID, entryState) => {
      setEntryState({recommendMgtID: recommendMgtID, entryState: entryState}).then(()=>{
        loadData();
      });
    }

    const getRecommendTypeList = () => {
      getSysDictionaryList('RecommendType').then((data) => {
        recommendTypeList.value = data;
      });
    };

    const getEntryStateList = () => {
      getSysDictionaryList('EntryState').then((data) => {
        entryStateList.value = data;
      });
    };

    return {
      modalRoleUserRef,
      modalRoleEditRef,
      formRef,
      loadData,
      searchParamsState,
      formState,
      columns,
      pagination,
      dataList,
      recommendTypeList,
      entryStateList,
      onSetEntryState,
      onSelectChange,
      handleTableChange,
      onFinish,
      getRecommendTypeList,
      getEntryStateList,
      expand,
      siteList,
      regionList,
      getAllSites,
      getAllRegion,
    };
  },
  created() {
    this.loadData();
    this.getRecommendTypeList();
    this.getEntryStateList();
    this.getAllSites();
    this.getAllRegion();
  },
  activated() {
    if (history.state.params?.reload) this.loadData();
  },
});
</script>

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