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

<template>
  <Modal v-model:visible="visible" title="岗位信息"  @ok="handleOk()" @cancel="handleCancel()" style="width:800px;">
    <div>
      <Form ref="modalFormRef"  autocomplete="off">
        <div class="search-result-list">
          <a-table :columns="columns" :data-source="curPositionList" :scroll="{ x:'100%', y: 500 }" :pagination="pagination"
                   @change="handleTableChange"
                   :row-selection="{ selectedRowKeys: formState.selectedRowKeys, onChange: onSelectChange}"
                   :row-key="record=>record.postID"
                   bordered>
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.key === 'operation'">
                <div class="table-operation">
<!--                  <a-button type="link" size="small" @click='onDetail(record)' functioncode="T01020103">详情</a-button>-->
                </div>
              </template>
            </template>
          </a-table>
        </div>

      </Form>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {Form, Modal, TableColumnsType, TableProps} from 'ant-design-vue';
import {computed, reactive, ref} from "vue";
import type {FormInstance} from 'ant-design-vue';
import Button from "@/components/basic/button/button.vue";
import dayjs from "dayjs";
import {getPaginationTotalTitle} from "@/utils/common";

defineOptions({
  name: 'positionShowModal',
  inheritAttrs: false,
  components: {Form,Modal,Button}
});

const modalFormRef = ref<FormInstance>();
const visible = ref<boolean>(false);
const curPositionList = ref([]);
const searchParams = reactive({
  pageIndex: 1,
  pageSize: 10,
});
const formState = reactive({
  total: 0,
  selectedRowKeys: [],
});
const columns: TableColumnsType = [
  {title: '序号', align: "center", key: 'companyID', width:60,
    customRender: item => `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`},
  {title: '岗位名称', dataIndex: 'professionName', key: 'professionName',width: 200, align: "center"},
  {title: '招聘人数', dataIndex: 'recruitCount', key: 'recruitCount', width: 120, align: "center"},
  {title: '招聘开始日期', dataIndex: 'startTime', key: 'startTime', width: 120,align: "center",
    customRender: (item) => {return item.record.startTime == null ? "" : (dayjs(item.record.startTime).format('YYYY-MM-DD'))}
  },
  {title: '招聘结束日期', dataIndex: 'endTime', key: 'endTime', width: 120,align: "center",
    customRender: (item) => {return item.record.endTime == null ? "" : (dayjs(item.record.endTime).format('YYYY-MM-DD'))}
  },
  //{title: '操作', key: 'operation', fixed: 'right', width: 100, align: "center"},
];
const pagination = computed(() => ({
  total: formState.total,
  current: searchParams.pageIndex,
  pageSize: searchParams.pageSize,
  showSizeChanger: true,
  showTotal: total => getPaginationTotalTitle(total)
}));

const handleTableChange: TableProps['onChange'] = (pag: { pageSize: number; current: number },) => {
  searchParams.pageIndex = pag.current;
  searchParams.pageSize = pag.pageSize;
};

const onSelectChange = (selectedRowKeys: any) => {
  formState.selectedRowKeys = selectedRowKeys;
};

const show = (curPostList:any) => {
  visible.value = false;
  curPositionList.value = curPostList;
  formState.total = curPositionList.value.length;
  visible.value = true;
};

defineExpose({show});
const emits = defineEmits(['modalClosed']);
const handleModalClosed = (e) => {
  emits('modalClosed', e);
};


const handleOk = () => {
  visible.value = false;
  handleModalClosed(true);
};

const handleCancel = () => {
    visible.value = false;
};

</script>