EmploymentSite/vue/src/views/jobUserManager/jobuser/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="" :allow-clear="true"/>
          </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="jobStatus">
            <a-select
              ref="select"
              v-model:value="searchParamsState.jobStatus"
              :options="jobStatusList"
              :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="sexId">
            <a-select
              ref="select"
              v-model:value="searchParamsState.sexId"
              :options="sexTypeList"
              :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="educationId">
            <a-select
              ref="select"
              v-model:value="searchParamsState.educationTypeId"
              :options="educationTypeList"
              :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="emphasisTypeId">
            <a-select
              ref="select"
              v-model:value="searchParamsState.emphasisTypeId"
              :options="emphasisTypeList"
              :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" @click='onAdd' functioncode="T01030102">新增</a-button>
          <BExportExcel :title="'导出'" :filename="'求职人员信息'"
                        :url="'jobUserService/jobUser/export'"
                        :params="{...exportSearchParams, isExport: true, rows:10000,jobUserIDList: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.jobUserID"
        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="T01030106" @click='onVitae(record)'>个人简历</a-button>
              <a-button type="link" size="small" functioncode="T01030103" @click='onEdit(record)'>编辑</a-button>
              <a-button type="link" size="small" functioncode="T01030104" @click="onDel(record)">删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'JobUserList',
  components: {DownOutlined, UpOutlined, BExportExcel, BImportExcel},
  setup() {
    const modalRoleUserRef = ref();
    const expand = ref(false);
    const modalRoleEditRef = ref();
    const formRef = ref<FormInstance>();
    const searchParamsState = reactive({
      pageIndex: 1,
      pageSize: 20,
      name: null,
      siteId: null,
      jobStatus: null,
      sexId: null,
      educationTypeId: null,
      emphasisTypeId: null
    });
    // 导出Excel查询参数
    const exportSearchParams = computed(() => {
      let data = JSON.parse(JSON.stringify(searchParamsState));
      data.pageSize = formState.total;
      return data;
    })
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false,
    });
    const columns: TableColumnsType = [
      {
        title: '序号',
        align: 'center',
        width: 80,
        key: 'jobUserID',
        customRender: (item) =>
          `${searchParamsState.pageSize * (searchParamsState.pageIndex - 1) + item.index + 1}`,
      },
      {title: '姓名', dataIndex: 'name', key: 'name', width: 100,align: "center"},
      {title: '公民身份号码', dataIndex: 'identityNumber', key: 'identityNumber', width: 170,align: "center"},
      {title: '性别', dataIndex: 'genderName', key: 'genderName', width: 80,align: "center"},
      {title: '民族', dataIndex: 'nationName', key: 'nationName', width: 80, align: "center"},
      {title: '联系电话', dataIndex: 'userMobile', key: 'userMobile',align: "center"},
      {title: '所属驿站', dataIndex: 'siteName', key: 'siteName',align: "center"},
      {
        title: '年龄', dataIndex: 'age', key: 'age',align: "center", customRender: item => {
          return calculateAge(item.record.identityNumber);
        }
      },
      {title: '最高学历', dataIndex: 'cultureName', key: 'cultureName', align: "center"},
      {title: '地址', dataIndex: 'address', key: 'address',align: "center"},
      {title: '就业状态', dataIndex: 'jobStatusName', key: 'jobStatusName',align: "center"},
      {title: '重点人员类别', dataIndex: 'keyTypeName', key: 'keyTypeName',align: "center"},
      {title: '操作', key: 'operation', width: 170, align: 'center'},
    ];
    const pagination = computed(() => ({
      total: formState.total,
      current: searchParamsState.pageIndex,
      pageSize: searchParamsState.pageSize,
      showSizeChanger: true,
      showTotal: (total) => getPaginationTotalTitle(total),
    }));

    const dataList = ref([]);
    const siteList = ref<any>([]);
    const jobStatusList = ref<SelectProps['options']>();
    const sexTypeList = ref<SelectProps['options']>();
    const educationTypeList = ref<SelectProps['options']>();
    const emphasisTypeList = ref<SelectProps['options']>();

    const calculateAge = (idCardNumber) => {
      // 假设身份证号中出生日期的格式为YYYYMMDD
      const birthYear = parseInt(idCardNumber.substring(6, 10), 10);
      const birthMonth = parseInt(idCardNumber.substring(10, 12), 10);
      const birthDay = parseInt(idCardNumber.substring(12, 14), 10);
      // 获取当前日期
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始
      const currentDay = currentDate.getDate();
      // 计算年龄
      let age = currentYear - birthYear;
      if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
        age--; // 生日还未过，减去一岁
      }
      return age;
    }
    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();
    };

    const loadData = async function () {
      formState.loading = true;
      getAllSites();
      const result: any = await getList(searchParamsState);
      dataList.value = result.list;
      //console.log(dataList.value);
      formState.total = result.total;
      formState.loading = false;
      // console.log("userParams",searchParamsState);
    };


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

    const getJobStatusList = () => {
      getSysDictionaryList('jobStatus').then((data) => {
        jobStatusList.value = data;
      });
    };

    const getSexList = () => {
      getSysDictionaryList('Gender').then((data) => {
        sexTypeList.value = data;
      });
    };

    const getEducationList = () => {
      getSysDictionaryList('HighestDegree').then((data) => {
        educationTypeList.value = data;
      });
    };

    const getEmphasisTypeList = () => {
      getSysDictionaryList('KeyPersonType').then((data) => {
        emphasisTypeList.value = data;
      });
    };

    const tabsViewStore = useTabsViewStore();
    const onAdd = () => {
      tabsViewStore.addTabByPath('/jobusermgr/jobseeker/add', null);
    };
    const onEdit = (item: any) => {
      tabsViewStore.addTabByPath('/jobusermgr/jobseeker/edit', {id: item.jobUserID});
    };
    const onVitae = (item: any) => {
      tabsViewStore.addTabByPath('/jobusermgr/jobseeker/vitae', {id: item.jobUserID});
    };

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

      if (formState.selectedRowKeys.length <= 0) {
        message.warning('请选择需要删除的数据！');
        return false;
      }
      Modal.confirm({
        title: '确认删除？',
        icon: createVNode(ExclamationCircleOutlined),
        content: '',
        okText: '确认删除',
        okType: 'danger',
        okButtonProps: {},
        cancelText: '取消',
        onOk() {
          del(formState.selectedRowKeys).then(() => {
            loadData();
          });
        },
        onCancel() {
        },
      })
    }

    return {
      modalRoleUserRef,
      modalRoleEditRef,
      formRef,
      loadData,
      onAdd,
      onDel,
      onEdit,
      searchParamsState,
      formState,
      columns,
      pagination,
      dataList,
      siteList,
      jobStatusList,
      sexTypeList,
      educationTypeList,
      emphasisTypeList,
      onSelectChange,
      handleTableChange,
      onFinish,
      getJobStatusList,
      getSexList,
      getEducationList,
      getEmphasisTypeList,
      calculateAge,
      onVitae,
      expand,
      exportSearchParams
    };
  },
  created() {
    this.loadData();
    this.getJobStatusList();
    this.getSexList();
    this.getEducationList();
    this.getEmphasisTypeList();
  },
  activated() {
    if (history.state.params?.reload) this.loadData();
  },
});
</script>

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