EmploymentSite/vue/src/views/jobUserManager/jobhunt/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="jobUserName">
            <a-input v-model:value="searchParamsState.jobUserName" placeholder="" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="工种名称" :label-col="{ span: 8 }" name="workName">
            <a-input v-model:value="searchParamsState.workName" placeholder="" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="工作年限" :label-col="{ span: 6 }" name="workYear">
            <a-input type="number" v-model:value="searchParamsState.minWorkYear" style="width:110px;" placeholder="" />
            <label style="margin:10px;">-</label>
            <a-input type="number" v-model:value="searchParamsState.maxWorkYear" style="width:110px;" 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="
              () => {
                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="jobHuntTypeID">
            <a-select ref="select"
              v-model:value="searchParamsState.jobHuntTypeID"
              :options="jobHuntTypeList"
              :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="jobUserTypeID">
            <a-select ref="select"
                      v-model:value="searchParamsState.jobUserTypeID"
                      :options="jobUserTypeList"
                      :field-names="{ label: 'name', value: 'value' }"
                      :allow-clear="true"
                      @change="loadData">
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="月薪要求" :label-col="{ span: 6 }" name="salary">
            <a-input type="number" v-model:value="searchParamsState.minSalary" style="width:110px;" placeholder="" />
            <label style="margin:10px;">-</label>
            <a-input type="number" v-model:value="searchParamsState.maxSalary" style="width:110px;" placeholder="" />
          </a-form-item>
        </a-col>
        <a-col :span="4" style="text-align: left"></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-select ref="select"
                      v-model:value="searchParamsState.isAccomplish"
                      :options="isAccomplishList"
                      :field-names="{ label: 'name', value: 'value' }"
                      :allow-clear="true"
                      @change="loadData"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="8"> </a-col>
        <a-col :span="4" style="text-align: left"> </a-col>
      </a-row>
      <a-row class="edit-operation">
        <a-col :span="24" style="text-align: right">
          <a-button type="primary" html-type="submit" functioncode="T01030202" @click='onAdd' >新增</a-button>
          <BImportExcel functioncode="T01030205"
            :options="importOptions"
            @success="loadData"
          ></BImportExcel>
          <BExportExcel :title="'导出'" :filename="'求职意向信息'" :url="'/jobUserService/jobHunt/export'" :params="{...searchParamsState, rows:100000,jobHuntIDList:formState.selectedRowKeys.join(',')}"></BExportExcel>
        </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.jobHuntID" bordered @change="handleTableChange" >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'operation'">
            <div class="table-operation">
              <a-button type="link" size="small" functioncode="T01030203" @click='onEdit(record.jobHuntID)' >编辑</a-button>
              <a-button type="link" size="small" functioncode="T01030204" @click="onDel(record)" >删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts">
import {reactive, ref, computed, defineComponent, createVNode} from 'vue';
import type { FormInstance, TableColumnsType, TableProps, SelectProps } from 'ant-design-vue';
import { getJobHuntList, delJobHunt} from '@/api/jobUserManager/jobhunt';
import { getSysDictionaryList } from '@/api/system/dictionary';
import { getPaginationTotalTitle } from '@/utils/common';
import dayjs from 'dayjs';
import BImportExcel from "@/components/basic/excel/importExcel/importExcel.vue";
import BExportExcel from "@/components/basic/excel/exportExcel/exportExcel.vue";
import {message, Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import type {ImportProps} from "@/components/basic/excel/importExcel/ImportProps";
import {useTabsViewStore} from "@/store/modules/tabsView";

  export default defineComponent({
    name: 'JobHuntList',
    components: {BImportExcel,BExportExcel},
    setup() {
      const formRef = ref<FormInstance>();
      const tabsViewStore = useTabsViewStore();
      const expand = ref(false);
      const searchParamsState = reactive({
        pageIndex: 1,
        pageSize: 20,
        jobUserName: null,
        workName:null,
        minWorkYear: null,
        maxWorkYear: null,
        jobHuntTypeID: null,
        jobUserTypeID:null,
        minSalary:null,
        maxSalary:null,
        isAccomplish:null
      });
      const formState = reactive({
        total: 0,
        selectedRowKeys: [],
        loading: false,
      });
      const columns: TableColumnsType = [
        {
          title: '序号',
          align: 'center',
          width: 80,
          key: 'jobHuntID',
          customRender: (item) =>
            `${searchParamsState.pageSize * (searchParamsState.pageIndex - 1) + item.index + 1}`,
        },
        { title: '姓名', dataIndex: 'jobUserName', key: 'jobUserName', width: 100,align: "center", },
        { title: '工种名称', dataIndex: 'workName', key: 'workName', width: 150, align: "center", },
        { title: '希望工作地区', dataIndex: 'areaWork', key: 'areaWork', width: 150, align: "center", },
        { title: '可到职日期', dataIndex: 'inDate', key: 'inDate', width: 100, align: "center",
          customRender: ({ record }) => record.inDate == null?"":dayjs(record.inDate).format('YYYY-MM-DD'), },
        { title: '工作年限', dataIndex: 'workYear', key: 'workYear' , align: "center",},
        { title: '求职类型', dataIndex: 'jobHuntTypeStr', key: 'jobHuntTypeStr', align: "center", },
        { title: '求职岗位', dataIndex: 'postName', key: 'postName', align: "center", },
        { title: '人才类型', dataIndex: 'jobUserTypeStr', key: 'jobUserTypeStr' , align: "center",},
        { title: '月薪要求', dataIndex: 'salary', key: 'salary' , align: "center",
          customRender: (item) => {
          const salary = showSalary(item.record.minSalary,item.record.maxSalary);
          return salary;
          }
        },
        { title: '操作', key: 'operation', width: 100, align: 'center' },
      ];
      const pagination = computed(() => ({
        total: formState.total,
        current: searchParamsState.pageIndex,
        pageSize: searchParamsState.pageSize,
        showSizeChanger: true,
        showTotal: (total) => getPaginationTotalTitle(total),
      }));
      const importOptions = ref<ImportProps>({
        title: '导入',
        url: '/jobUserService/jobHunt/importJobHunt',
        columns: [
          {cnName: '姓名', enName: 'jobUserName', width: 100},
          {cnName: '工种名称', enName: 'workName', width: 100},
          {cnName: '希望工作地区', enName: 'areaWork', width: 100},
          {cnName: '可到职日期', enName: 'inDate', width: 100},
          {cnName: '工作年限', enName: 'workYear', width: 100},
          {cnName: '求职类型', enName: 'jobHuntType', width: 100},
          {cnName: '人才类型', enName: 'jobUserType', width: 100},
          {cnName: '月薪要求', enName: 'salary', width: 100},
        ],
        template: {
          tempFileName: '求职意向导入模板.xlsx',
          url: '',
          params: null,
        },
      });
      const dataList = ref([]);
      const jobHuntTypeList = ref<SelectProps['options']>();
      const jobUserTypeList = ref<SelectProps['options']>();
      const isAccomplishList = ref<SelectProps['options']>();
      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 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 onSearch = () => {
        loadData();
      }

      const onDel= (item: any) => {
        if (item) {
          formState.selectedRowKeys.push(item.jobHuntID as never)
        }

        if (formState.selectedRowKeys.length <= 0) {
          message.warning('请选择需要删除的数据！');
          return false;
        }

        Modal.confirm({
          title: '确认删除选中的驿站站点?',
          icon: createVNode(ExclamationCircleOutlined),
          content: '',
          okText: '确认删除',
          okType: 'danger',
          okButtonProps: {},
          cancelText: '取消',
          onOk() {
            delJobHunt(formState.selectedRowKeys).then(() => {
              loadData();
            });
          },
          onCancel() {

          },
        });
      };

      const loadData = async function () {
        formState.loading = true;
        getJobHuntTypeList();
        getJobUserTypeList();
        getIsAccomplishList();
        const result: any = await getJobHuntList(searchParamsState);
        dataList.value = result.list;
        formState.total = result.total;
        formState.loading = false;
        console.log("huntParams",searchParamsState);
      };

      const onAdd =()=>{
        tabsViewStore.addTabByPath('/jobusermgr/jobhunt/add', {id:null});
      };

      const onEdit = (id: string) => {
        tabsViewStore.addTabByPath('/jobusermgr/jobhunt/edit', {id:id});
      };

      const getJobHuntTypeList = () => {
        getSysDictionaryList('JobHuntType').then((data) => {
          jobHuntTypeList.value = data;
        });
      };

      const getJobUserTypeList = () => {
        getSysDictionaryList('JobUserType').then((data) => {
          jobUserTypeList.value = data;
        });
      };

      const getIsAccomplishList = () => {
        getSysDictionaryList('ContractRecord').then((data) => {
          isAccomplishList.value = data;
        });
      };

      return {
        formRef,
        expand,
        searchParamsState,
        formState,
        columns,
        pagination,
        dataList,
        importOptions,
        jobHuntTypeList,
        jobUserTypeList,
        isAccomplishList,
        showSalary,
        loadData,
        onSearch,
        onAdd,
        onEdit,
        onDel,
        onSelectChange,
        handleTableChange,
        getJobHuntTypeList,
        getJobUserTypeList,
        getIsAccomplishList,
      };
    },
    created() {
      this.loadData();
    },
    activated() {
      if (history.state.params?.reload) this.loadData();
    },
  });
</script>

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