|
@@ -0,0 +1,286 @@
|
|
|
+<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="siteId">
|
|
|
+ <a-select
|
|
|
+ ref="select"
|
|
|
+ v-model:value="searchParamsState.siteId"
|
|
|
+ :options="siteList"
|
|
|
+ :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="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-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <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-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"
|
|
|
+ functioncode=""
|
|
|
+ @click="edit(record.jobUserId)"
|
|
|
+ >修改</a-button
|
|
|
+ >
|
|
|
+ <a-button
|
|
|
+ type="link"
|
|
|
+ functioncode=""
|
|
|
+ @click="delete(record.jobUserId,)"
|
|
|
+ >删除</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 } from '@/api/jobUserManager/jobuser';
|
|
|
+ import { getSysDictionaryList } from '@/api/system/dictionary';
|
|
|
+ import { getPaginationTotalTitle } from '@/utils/common';
|
|
|
+
|
|
|
+ export default defineComponent({
|
|
|
+ name: 'JobUserList',
|
|
|
+ setup() {
|
|
|
+ const modalRoleUserRef = ref();
|
|
|
+ const modalRoleEditRef = ref();
|
|
|
+ const formRef = ref<FormInstance>();
|
|
|
+ const searchParamsState = reactive({ page: 1, limit: 20, name: '', siteId: '',jobStatus:'' ,sexId:'',educationTypeId:'',emphasisTypeId:''});
|
|
|
+ const formState = reactive({
|
|
|
+ total: 0,
|
|
|
+ selectedRowKeys: [],
|
|
|
+ loading: false,
|
|
|
+ });
|
|
|
+ const columns: TableColumnsType = [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ align: 'center',
|
|
|
+ width: 80,
|
|
|
+ key: 'jobUserId',
|
|
|
+ customRender: (item) =>
|
|
|
+ `${searchParamsState.limit * (searchParamsState.page - 1) + item.index + 1}`,
|
|
|
+ },
|
|
|
+ { title: '姓名', dataIndex: 'name', key: 'name', width: 100 },
|
|
|
+ { title: '公民身份号码', dataIndex: 'IdCard', key: 'IdCard', width: 150 },
|
|
|
+ { title: '性别', dataIndex: 'sexName', key: 'sexName', width: 80 },
|
|
|
+ { title: '民族', dataIndex: 'nationTypeName', key: 'nationTypeName', width: 80 },
|
|
|
+ { title: '联系电话', dataIndex: 'mobile', key: 'mobile' },
|
|
|
+ { title: '所属驿站', dataIndex: 'siteName', key: 'siteName' },
|
|
|
+ { title: '年龄', dataIndex: 'age', key: 'age' },
|
|
|
+ { title: '文化程度', dataIndex: 'educationName', key: 'educationName' },
|
|
|
+ { title: '地址', dataIndex: 'address', key: 'address' },
|
|
|
+ { title: '就业状态', dataIndex: 'jobStatusName', key: 'jobStatusName' },
|
|
|
+ { title: '重点人员类别', dataIndex: 'emphasisTypeName', key: 'emphasisTypeName' },
|
|
|
+ { title: '操作', key: 'operation', width: 100, align: 'center' },
|
|
|
+ ];
|
|
|
+ const pagination = computed(() => ({
|
|
|
+ total: formState.total,
|
|
|
+ current: searchParamsState.page,
|
|
|
+ pageSize: searchParamsState.limit,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showTotal: (total) => getPaginationTotalTitle(total),
|
|
|
+ }));
|
|
|
+
|
|
|
+ const dataList = ref([]);
|
|
|
+ const siteList = ref<SelectProps['options']>();
|
|
|
+ const jobStatusList = ref<SelectProps['options']>();
|
|
|
+ const sexTypeList = ref<SelectProps['options']>();
|
|
|
+ const educationTypeList = ref<SelectProps['options']>();
|
|
|
+ const emphasisTypeList = ref<SelectProps['options']>();
|
|
|
+
|
|
|
+ const onSelectChange = (selectedRowKeys: any) => {
|
|
|
+ formState.selectedRowKeys = selectedRowKeys;
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleTableChange: TableProps['onChange'] = (pag: {
|
|
|
+ pageSize: number;
|
|
|
+ current: number;
|
|
|
+ }) => {
|
|
|
+ searchParamsState.page = pag.current;
|
|
|
+ searchParamsState.limit = pag.pageSize;
|
|
|
+ loadData();
|
|
|
+ };
|
|
|
+
|
|
|
+ const onFinish = () => {
|
|
|
+ loadData();
|
|
|
+ };
|
|
|
+
|
|
|
+ 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 getSiteList = () => {
|
|
|
+ /*getSysDictionaryList('UserType').then((data) => {
|
|
|
+ siteList.value = data;
|
|
|
+ });*/
|
|
|
+ };
|
|
|
+
|
|
|
+ const getJobStatusList = () => {
|
|
|
+ getSysDictionaryList('jobStatus').then((data) => {
|
|
|
+ jobStatusList.value = data;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const getSexList = () => {
|
|
|
+ getSysDictionaryList('sexType').then((data) => {
|
|
|
+ sexTypeList.value = data;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const getEducationList = () => {
|
|
|
+ getSysDictionaryList('educationType').then((data) => {
|
|
|
+ educationTypeList.value = data;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const getEmphasisTypeList = () => {
|
|
|
+ getSysDictionaryList('emphasisType').then((data) => {
|
|
|
+ emphasisTypeList.value = data;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ modalRoleUserRef,
|
|
|
+ modalRoleEditRef,
|
|
|
+ formRef,
|
|
|
+ loadData,
|
|
|
+ getSiteList,
|
|
|
+ searchParamsState,
|
|
|
+ formState,
|
|
|
+ columns,
|
|
|
+ pagination,
|
|
|
+ dataList,
|
|
|
+ siteList,
|
|
|
+ jobStatusList,
|
|
|
+ sexTypeList,
|
|
|
+ educationTypeList,
|
|
|
+ emphasisTypeList,
|
|
|
+ onSelectChange,
|
|
|
+ handleTableChange,
|
|
|
+ onFinish,
|
|
|
+ getJobStatusList,
|
|
|
+ getSexList,
|
|
|
+ getEducationList,
|
|
|
+ getEmphasisTypeList
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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>
|