EmploymentSite/vue/src/views/jobUserManager/jobuser/ClaimJobUserTableCom.vue

<!-- 认领求职人员对话框 -->
<template>
  <div>
    <a-modal
      width="1300px"
      v-model:visible="visible"
      title="认领求职人员"
      @ok="handleOk"
      @cancel="handleOk"
      :keyboard="false"
      :mask-closable="false"
    >
      <template #footer>
        <a-button key="submit" type="primary" @click="handleOk">关闭</a-button>
      </template>
      <a-form ref="formRef" class="ant-advanced-search-form" :model="searchParamsState">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="姓名" :label-col="{ span: 6 }" 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: 6 }" name="address">
              <a-input v-model:value="searchParamsState.address" placeholder="" :allow-clear="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="重点人员类别" :label-col="{ span: 8 }" name="keyPersonTypeID">
              <a-select
                ref="select"
                v-model:value="searchParamsState.keyPersonTypeID"
                :options="keyPersonTypeList"
                :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="loadData">查询</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: 6 }" name="name">
              <a-input v-model:value="searchParamsState.IdentityNumber" placeholder="" :allow-clear="true"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-row class="edit-operation" style="margin-bottom: 10px">
        <a-col :span="24" class="flex-space-between">
          <div>
          </div>
          <div>
            <a-button type="primary" html-type="submit" @click='onClaimJobUser(formState.selectedRowKeys)'
                      :disabled="formState.selectedRowKeys.length == 0"
                      :loading="claimJobUserLoading">
              批量调整
            </a-button>
          </div>
        </a-col>
      </a-row>
      <a-table :dataSource="jobUserList"
               :columns="originalColumns"
               bordered
               :scroll="{ x: '100%', y: 500 }"
               :pagination="tablePagination"
               :loading="formState.loading"
               :row-selection="{ selectedRowKeys: formState.selectedRowKeys, onChange: onSelectChange }"
               :row-key="(record) => record.jobUserID"
               @change="handleTableChange">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'serviceTime'">
            <div>
              {{ dayjs(record.serviceTime).format('YYYY-MM-DD') }}
            </div>
          </template>
          <template v-if="column.key === 'operation'">
            <div class="table-operation">
              <a-button type="link" size="small" :loading="claimJobUserLoading"
                        @click="onClaimJobUser([record.jobUserID])">调整到本驿站
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {claimJobUser, getClaimJobUserList} from "@/api/jobUserManager/jobuser";
import {computed, reactive, ref} from "vue";
import dayjs from "dayjs";
import {getPaginationTotalTitle} from "@/utils/common";
import {type FormInstance, Modal, type SelectProps, type TableProps} from "ant-design-vue";
import {getSysDictionaryList} from "@/api/system/dictionary";
import {useUserStore} from "@/store/modules/user";
import crtyptoHelp from "@/utils/crypto";

const userStore = useUserStore();
const userInfo = ref(userStore.getUserInfo);
const emit = defineEmits(["modalOk"]);

const formRef = ref<FormInstance>();
// 查询参数
const searchParamsState = reactive({
  pageIndex: 1,
  pageSize: 20,
  name: null,
  address: null,
  keyPersonTypeID: null,
  IdentityNumber: null
});
// 对话框显示关闭开关
const visible = ref(false);
// 求职人员数据
const jobUserList = ref()
// 数据表格定义
const originalColumns = [
  {
    title: '序号',
    align: 'center',
    width: 80,
    key: 'jobUserID',
    customRender: (item) =>
      `${searchParamsState.pageSize * (searchParamsState.pageIndex - 1) + item.index + 1}`,
    isDisabled: true
  },
  {title: '姓名', dataIndex: 'name', key: 'name', width: 100, align: "center"},
  {title: '性别', dataIndex: 'sexName', key: 'sexName', 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"},
  {title: '就业状态', dataIndex: 'jobStatusName', key: 'jobStatusName', align: "center"},
  {title: '重点人员类别', dataIndex: 'keyTypeName', key: 'keyTypeName', align: "center"},
  {title: '地址', dataIndex: 'address', key: 'address', align: "center", isDefaultClose: true},
  {title: '操作', key: 'operation', width: 110, align: 'center', isDisabled: true},
];
const formState = reactive({
  total: 0,
  selectedRowKeys: [],
  loading: false,
});
// 表格分页数据
const tablePagination = computed(() => ({
  total: formState.total,
  current: searchParamsState.pageIndex,
  pageSize: searchParamsState.pageSize,
  showSizeChanger: true,
  showTotal: (total) => getPaginationTotalTitle(total),
}));
const keyPersonTypeList = ref<SelectProps['options']>();
// 调整按钮加载
const claimJobUserLoading = ref(false);

// 数据加载
async function loadData() {
  formState.loading = true;
  let params = JSON.parse(JSON.stringify(searchParamsState));
  params.IdentityNumber = crtyptoHelp.encryptDesText(params.IdentityNumber);
  await getClaimJobUserList(params).then((result: any) => {
    jobUserList.value = result.list;
    formState.total = result.total;
  }).finally(() => {
    formState.loading = false;
  });
}

// 表格分页触发事件
const handleTableChange: TableProps['onChange'] = (pag: {
  pageSize: number;
  current: number;
}) => {
  searchParamsState.pageIndex = pag.current;
  searchParamsState.pageSize = pag.pageSize;
  loadData();
};

// 对话框确定事件
function handleOk() {
  visible.value = false;
  emit("modalOk");
}

// 表格数据选择
const onSelectChange = (selectedRowKeys: any) => {
  formState.selectedRowKeys = selectedRowKeys;
};

const getKeyPersonTypeList = () => {
  getSysDictionaryList('KeyPersonType').then((data) => {
    keyPersonTypeList.value = data;
  });
};

// 显示
function show() {
  visible.value = true;
  loadData();
  getKeyPersonTypeList();
}

function onClaimJobUser(ids) {
  if (!userInfo.value.siteID) {
    Modal.error({
      title: '提示',
      content: `当前账号未绑定驿站，请切换账号重试！`,
    });
    return;
  }
  if (ids.length == 0) {
    return;
  }
  claimJobUserLoading.value = true;
  claimJobUser(ids, userInfo.value.siteID).then((result: any) => {
    if (result > 0) {
      loadData();
      emit("modalOk");
    }
  }).finally(() => {
    claimJobUserLoading.value = false;
  })
}

defineExpose({
  show
})
</script>

<style scoped>

</style>