EmploymentSite/vue/src/views/companyService/company/CompanyTableCom.vue

<template>
  <a-modal
    :width="1100"
    v-model:visible="visible"
    title="已录入企业信息"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    ok-text="确认"
    cancel-text="取消"
    :keyboard="false"
    :mask-closable="false"
  >
    <div class="card-search">
      <a-form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="searchParams"
      >
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="企业名称" :label-col="{ span: 8 }" name="name">
              <a-input v-model:value="searchParams.companyName" style="color: black;" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="统一信用代码" :label-col="{ span: 8 }" name="name">
              <a-input v-model:value="searchParams.companyCode" style="color: black;" 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="
              () => {
                searchParams.pageIndex = 1;
                searchParams.pageSize = 10;
                searchParams.companyName = '';
                searchParams.companyCode = '';
                loadData();
              }
            ">重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table :columns="columns" :data-source="dataList" :scroll="{ x:'100%', y: 500 }" :pagination="pagination"
             :loading="formState.loading"
             @change="handleTableChange"
             bordered>
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'postCount'">
          <div style="text-align: center;">
            <a-button name="postCount" type="link" size="small"
                      @click='onShowPosition(record)'>{{ record.postCount }}
            </a-button>
          </div>
        </template>
      </template>
    </a-table>
  </a-modal>

  <PositionShowModal ref="modalShowRef"></PositionShowModal>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import type {TableColumnsType, TableProps} from "ant-design-vue";
import {getPaginationTotalTitle} from "@/utils/common";
import {getList} from "@/api/companyService/company";
import {get} from "@/api/common";
import PositionShowModal from "@/views/companyService/company/show.vue";

// 对话框显示隐藏开关
const visible = ref(false);
// 加载动画开关
const confirmLoading = ref(false);
// 企业数据
const dataList = ref<Array<any>>();
// 企业信息表格数据定义
const columns: TableColumnsType = [
  {
    title: '序号',
    align: "center",
    key: 'companyID',
    width: 60,
    customRender: item => `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`
  },
  {title: '企业名称', dataIndex: 'companyName', key: 'companyName', width: 200, align: "center"},
  {title: '统一信用代码', dataIndex: 'companyCode', key: 'companyCode', width: 200, align: "center"},
  {
    title: '企业状态',
    dataIndex: 'recordStatus',
    key: 'recordStatus',
    width: 120,
    align: "center",
    customRender: (item) => {
      return item.record.recordStatus == 1 ? "在营" : "关闭";
    }
  },
  {title: '企业规模', dataIndex: 'companyModelType', key: 'companyModelType', width: 120, align: "center"},
  {title: '当前岗位数量', dataIndex: 'postCount', key: 'postCount', width: 120, align: "center"},
];
const searchParams = reactive({
  pageIndex: 1,
  pageSize: 20,
  companyName: '',
  companyCode: '',
  createUserId: "",
  workTime: ""
});
const pagination = computed(() => ({
  total: formState.total,
  current: searchParams.pageIndex,
  pageSize: searchParams.pageSize,
  showSizeChanger: true,
  showTotal: total => getPaginationTotalTitle(total)
}));
const formState = reactive({
  total: 0,
  loading: false
});
// 岗位对话框ref
const modalShowRef = ref();

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

// 显示
function show(record) {
  visible.value = true;
  searchParams.createUserId = record.userId;
  searchParams.workTime = record.workTime;
  loadData()
}

// 获取数据
const loadData = async function () {
  formState.loading = true;
  await getList(searchParams).then((result: any) => {
    dataList.value = result.list;
    formState.total = result.total;
  }).finally(() => {
    formState.loading = false;
  })
}

// 表格状态变更事件
const handleTableChange: TableProps['onChange'] = (pag: { pageSize: number; current: number },) => {
  searchParams.pageIndex = pag.current;
  searchParams.pageSize = pag.pageSize;
  loadData();
};

// 开启岗位数据对话框
async function onShowPosition(record) {
  if (record.postCount == 0) {
    return;
  }
  const curPositionList: any = await get("companyService/post/getPostsByCompanyID", {companyId: record.companyID});
  modalShowRef.value.show(curPositionList);
}

// 表单查询事件
function onSearch() {
  loadData()
}

defineExpose({
  show
})
</script>

<style scoped>

</style>