diff --git a/src/api/backend/api/index.ts b/src/api/backend/api/index.ts
index 59951c8..eaf51e9 100644
--- a/src/api/backend/api/index.ts
+++ b/src/api/backend/api/index.ts
@@ -31,6 +31,8 @@ import * as project from './project';
 import * as company from './company';
 import * as product from './product';
 import * as materialsInOut from './materialsInOut';
+import * as vehicleUsage from './vehicleUsage';
+
 export default {
   auth,
   account,
@@ -61,4 +63,5 @@ export default {
   product,
   materialsInOut,
   project,
+  vehicleUsage,
 };
diff --git a/src/api/backend/api/typings.d.ts b/src/api/backend/api/typings.d.ts
index 98789b5..d7e2b29 100644
--- a/src/api/backend/api/typings.d.ts
+++ b/src/api/backend/api/typings.d.ts
@@ -1656,6 +1656,119 @@ declare namespace API {
     id: number;
   };
 
+  // VehicleUsage
+  type VehicleUsageEntity = {
+    /** 年度 */
+    year: number;
+    /** 外出使用的车辆Id */
+    vechicleId: number;
+    /** 外出使用的车辆名称(字典) */
+    vechicle: DictItemEntity;
+    /** 申请人 */
+    applicant: string;
+    /** 出行司机 */
+    driver: string;
+    /** 当前车辆里程数(KM) */
+    currentMileage: number;
+    /** 预计出行开始时间 */
+    expectedStartDate: Date;
+    /** 预计出行结束时间 */
+    expectedEndDate: Date;
+    /** 使用事由 */
+    purpose: string;
+    /** 实际回司时间 */
+    actualReturnTime: Date;
+    /** 回城车辆里程数(KM) */
+    returnMileage: number;
+    /** 审核人 */
+    reviewer: string;
+    /** 审核状态：0待审核，1同意，2.不同意(字典) */
+    status: number;
+    /** 备注 */
+    remark: string;
+    /** 附件 */
+    files?: StorageInfo[];
+    id: number;
+    createdAt: string;
+    updatedAt: string;
+  };
+  type VehicleUsageDto = {
+    /** 年度 */
+    year: number;
+    /** 外出使用的车辆名称(字典) */
+    vechicleId: number;
+    /** 申请人 */
+    applicant: string;
+    /** 出行司机 */
+    driver: string;
+    /** 当前车辆里程数(KM) */
+    currentMileage: number;
+    /** 预计出行开始时间 */
+    expectedStartDate: Date;
+    /** 预计出行结束时间 */
+    expectedEndDate: Date;
+    /** 使用事由 */
+    purpose: string;
+    /** 实际回司时间 */
+    actualReturnTime: Date;
+    /** 回城车辆里程数(KM) */
+    returnMileage: number;
+    /** 审核人 */
+    reviewer: string;
+    /** 审核状态：0待审核，1同意，2.不同意(字典) */
+    status: number;
+    /** 备注 */
+    remark: string;
+    fileIds?: number[];
+  };
+  type VehicleUsageUpdateParams = {
+    id: number;
+
+  };
+  type VehicleUsageParams = {
+    page?: number;
+    pageSize?: number;
+    field?: string;
+    order?: 'ASC' | 'DESC';
+    _t?: number;
+  };
+  type VehicleUsageInfoParams = {
+    id: number;
+  };
+  type VehicleUsageUpdateDto = {
+    /** 年度 */
+    year?: number;
+    /** 外出使用的车辆名称(字典) */
+    vechicleId?: number;
+    /** 申请人 */
+    applicant?: string;
+    /** 出行司机 */
+    driver?: string;
+    /** 当前车辆里程数(KM) */
+    currentMileage?: number;
+    /** 预计出行开始时间 */
+    expectedStartDate?: Date;
+    /** 预计出行结束时间 */
+    expectedEndDate?: Date;
+    /** 使用事由 */
+    purpose?: string;
+    /** 实际回司时间 */
+    actualReturnTime?: Date;
+    /** 回城车辆里程数(KM) */
+    returnMileage?: number;
+    /** 审核人 */
+    reviewer?: string;
+    /** 审核状态：0待审核，1同意，2.不同意(字典) */
+    status?: number;
+    /** 备注 */
+    remark?: string;
+    /** 附件 */
+    fileIds?: number[];
+  };
+  type VehicleUsageDeleteParams = {
+    id: number;
+  };
+
   // Materials In out history
   type MaterialsInOutUpdateParams = {
     id: number;
diff --git a/src/api/backend/api/vehicleUsage.ts b/src/api/backend/api/vehicleUsage.ts
new file mode 100644
index 0000000..79d2294
--- /dev/null
+++ b/src/api/backend/api/vehicleUsage.ts
@@ -0,0 +1,106 @@
+import { request, type RequestOptions } from '@/utils/request';
+
+
+
+/** 获取车辆使用记录列表 GET /api/vehicle-usage */
+export async function vehicleUsageList(params: API.VehicleUsageParams, options?: RequestOptions) {
+  return request<{
+    items?: API.VehicleUsageEntity[];
+    meta?: {
+      itemCount?: number;
+      totalItems?: number;
+      itemsPerPage?: number;
+      totalPages?: number;
+      currentPage?: number;
+    };
+  }>('/api/vehicle-usage', {
+    method: 'GET',
+    params: {
+      // page has a default value: 1
+      page: '1',
+      // pageSize has a default value: 10
+      pageSize: '10',
+
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
+/** 新增车辆使用记录 POST /api/vehicle-usage */
+export async function vehicleUsageCreate(body: API.VehicleUsageDto, options?: RequestOptions) {
+  return request<any>('/api/vehicle-usage', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || { successMsg: '创建成功' }),
+  });
+}
+
+/** 获取车辆使用记录信息 GET /api/vehicle-usage/${param0} */
+export async function vehicleUsageInfo(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.VehicleUsageInfoParams,
+  options?: RequestOptions,
+) {
+  const { id: param0, ...queryParams } = params;
+  return request<API.VehicleUsageEntity>(`/api/vehicle-usage/${param0}`, {
+    method: 'GET',
+    params: { ...queryParams },
+    ...(options || {}),
+  });
+}
+
+/** 解除车辆使用记录和附件关联 PUT /api/vehicle-usage/unlink-attachments/${param0} */
+export async function unlinkAttachments(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.VehicleUsageUpdateParams,
+  body: API.VehicleUsageUpdateDto,
+  options?: RequestOptions,
+) {
+  const { id: param0, ...queryParams } = params;
+  return request<any>(`/api/vehicle-usage/unlink-attachments/${param0}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    params: { ...queryParams },
+    data: body,
+    ...options,
+  });
+}
+
+/** 更新车辆使用记录 PUT /api/vehicle-usage/${param0} */
+export async function vehicleUsageUpdate(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.VehicleUsageUpdateParams,
+  body: API.VehicleUsageUpdateDto,
+  options?: RequestOptions,
+) {
+  const { id: param0, ...queryParams } = params;
+  return request<any>(`/api/vehicle-usage/${param0}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    params: { ...queryParams },
+    data: body,
+    ...(options || { successMsg: '更新成功' }),
+  });
+}
+
+/** 删除车辆使用记录 DELETE /api/vehicle-usage/${param0} */
+export async function vehicleUsageDelete(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.VehicleUsageDeleteParams,
+  options?: RequestOptions,
+) {
+  const { id: param0, ...queryParams } = params;
+  return request<any>(`/api/vehicle-usage/${param0}`, {
+    method: 'DELETE',
+    params: { ...queryParams },
+    ...(options || { successMsg: '删除成功' }),
+  });
+}
diff --git a/src/views/vehicle-usage/columns.tsx b/src/views/vehicle-usage/columns.tsx
new file mode 100644
index 0000000..6119587
--- /dev/null
+++ b/src/views/vehicle-usage/columns.tsx
@@ -0,0 +1,62 @@
+import Api from '@/api';
+import type { TableColumn } from '@/components/core/dynamic-table';
+
+export type TableListItem = API.VehicleUsageEntity;
+export type TableColumnItem = TableColumn<TableListItem>;
+export const baseColumns: TableColumnItem[] = [
+  {
+    title: '外出使用的车辆名称及车牌号',
+    dataIndex: 'vechicle',
+    customRender: ({ record }) => {
+      return record?.vechicle?.label || '';
+    },
+  },
+  {
+    title: '申请人',
+    dataIndex: 'applicant',
+  },
+  {
+    title: '出行司机',
+    dataIndex: 'driver',
+  },
+  // /** 外出使用的车辆Id */
+  // vechicleId: number;
+  // /** 外出使用的车辆名称(字典) */
+  // vechicle: DictItemEntity;
+  // /** 申请人 */
+  // applicant: string;
+  // /** 出行司机 */
+  // driver: string;
+  // /** 当前车辆里程数(KM) */
+  // currentMileage: number;
+  // /** 预计出行开始时间 */
+  // expectedStartDate: Date;
+  // /** 预计出行结束时间 */
+  // expectedEndDate: Date;
+  // /** 使用事由 */
+  // purpose: string;
+  // /** 实际回司时间 */
+  // actualReturnTime: Date;
+  // /** 回城车辆里程数(KM) */
+  // returnMileage: number;
+  // /** 审核人 */
+  // reviewer: string;
+  // /** 审核状态：0待审核，1同意，2.不同意(字典) */
+  // status: number;
+  // /** 备注 */
+  // remark: string;
+  // {
+  //   title: '所属公司',
+  //   dataIndex: 'company',
+  //   customRender: ({ record }) => {
+  //     return record?.company?.name || '';
+  //   },
+  // },
+  // {
+  //   title: '单位',
+  //   dataIndex: 'unit',
+  //   customRender: ({ record }) => {
+  //     return record?.unit?.label || '';
+  //   },
+  // },
+];
diff --git a/src/views/vehicle-usage/formSchemas.ts b/src/views/vehicle-usage/formSchemas.ts
new file mode 100644
index 0000000..0e8ec4a
--- /dev/null
+++ b/src/views/vehicle-usage/formSchemas.ts
@@ -0,0 +1,99 @@
+import Api from '@/api';
+import type { FormSchema } from '@/components/core/schema-form/';
+import { DictEnum } from '@/enums/dictEnum';
+import { useDictStore } from '@/store/modules/dict';
+import { debounce } from 'lodash-es';
+const { getDictItemsByCode } = useDictStore();
+export const formSchemas: FormSchema<API.VehicleUsageDto>[] = [
+  // {
+  //   field: 'name',
+  //   component: 'Input',
+  //   label: '车辆使用名称',
+  //   rules: [{ required: true, type: 'string' }],
+  //   colProps: {
+  //     span: 12,
+  //   },
+  // },
+  // {
+  //   label: '单位',
+  //   component: 'Select',
+  //   field: 'unitId',
+  //   colProps: {
+  //     span: 12,
+  //   },
+  //   componentProps: ({ formInstance, schema, formModel }) => ({
+  //     showSearch: true,
+  //     filterOption: (input: string, option: any) => {
+  //       return option.label.indexOf(input) >= 0;
+  //     },
+  //     fieldNames: {
+  //       label: 'label',
+  //       value: 'value',
+  //     },
+  //     options: getDictItemsByCode(DictEnum.Unit).map((item) => ({
+  //       value: item.id,
+  //       label: item.label,
+  //     })),
+   
+  //     getPopupContainer: () => document.body,
+  //     defaultActiveFirstOption: true,
+  //   }),
+  // },
+  // {
+  //   field: 'companyId',
+  //   component: 'Select',
+  //   label: '所属公司',
+  //   helpMessage: '如未找到对应公司，请先去公司管理添加公司。',
+  //   componentProps: ({ formInstance, schema }) => ({
+  //     showSearch: true,
+  //     filterOption: false,
+  //     fieldNames: {
+  //       label: 'label',
+  //       value: 'value',
+  //     },
+  //     options: [],
+  //     getPopupContainer: () => document.body,
+  //     defaultActiveFirstOption: true,
+  //     onChange: async (value) => {
+  //       if (!value) {
+  //         formInstance?.setFieldsValue({ companyId: undefined });
+  //         const options = await getCompanyOptions();
+  //         const newSchema = {
+  //           field: schema.field,
+  //           componentProps: {
+  //             options,
+  //           },
+  //         };
+  //         formInstance?.updateSchema([newSchema]);
+  //       }
+  //     },
+
+  //     request: () => {
+  //       return getCompanyOptions();
+  //     },
+  //     onSearch: debounce(async (keyword) => {
+  //       schema.loading = true;
+  //       const newSchema = {
+  //         field: schema.field,
+  //         componentProps: {
+  //           options: [] as LabelValueOptions,
+  //         },
+  //       };
+  //       formInstance?.updateSchema([newSchema]);
+  //       const options = await getCompanyOptions(keyword).finally(() => (schema.loading = false));
+  //       newSchema.componentProps.options = options;
+  //       formInstance?.updateSchema([newSchema]);
+  //     }, 500),
+  //   }),
+  // },
+];
+
+const getCompanyOptions = async (keyword?: string): Promise<LabelValueOptions> => {
+  const { items: result } = await Api.company.companyList({ pageSize: 100, name: keyword });
+  return (
+    result?.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })) || []
+  );
+};
diff --git a/src/views/vehicle-usage/index.vue b/src/views/vehicle-usage/index.vue
index b6347f7..e378d20 100644
--- a/src/views/vehicle-usage/index.vue
+++ b/src/views/vehicle-usage/index.vue
@@ -1,7 +1,220 @@
-<template><div>车辆使用</div></template>
-<script setup lang="ts">
+<template>
+  <div v-if="columns?.length">
+    <DynamicTable
+      row-key="id"
+      header-title="车辆使用管理"
+      title-tooltip=""
+      :data-request="Api.vehicleUsage.vehicleUsageList"
+      :columns="columns"
+      :exportFileName="'车辆使用'"
+      bordered
+      size="small"
+    >
+      <template #toolbar>
+        <a-button
+          type="primary"
+          :disabled="!$auth('system:role:create')"
+          @click="openEditModal({})"
+        >
+          新增
+        </a-button>
+      </template>
+    </DynamicTable>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { useTable, type LoadDataParams, type TableColumn } from '@/components/core/dynamic-table';
+  import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
+  import Api from '@/api/';
+  import { useFormModal, useModal } from '@/hooks/useModal';
+  import { formSchemas } from './formSchemas';
+  import { Button } from 'ant-design-vue';
+  import AttachmentManage from '@/components/business/attachment-manage/index.vue';
+  import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
+  import { ref, onMounted, type FunctionalComponent } from 'vue';
+  import { useDictStore } from '@/store/modules/dict';
   defineOptions({
     name: 'VehicleUsage',
   });
+  const [DynamicTable, dynamicTableInstance] = useTable();
+  const [showModal] = useFormModal();
+  const [fnModal] = useModal();
+  const isUploadPopupVisiable = ref(false);
+  const dictStore = useDictStore();
+  let columns = ref<TableColumnItem[]>();
+  // const loadData = async (params): Promise<API.VehicleUsageEntity> => {
+  //   console.log('params', params);
+  //   return Api.vehicleUsage.vehicleUsageList(params);
+  // };
+  // const loadTableData = async (params: any) => {
+  //   const { company, ...res } = params;
+  //   const data = await Api.vehicleUsage.vehicleUsageList({
+  //     ...res,
+  //     company,
+  //   });
+  //   return data;
+  // };
+  const exportFormatter = (columns: TableColumn[], tableData: any[]) => {
+    return { header: columns.map((item) => item.title), data: [] };
+  };
+  onMounted(() => {
+    columns.value = [
+      ...baseColumns,
+      {
+        title: '附件',
+        width: 50,
+        maxWidth: 50,
+        hideInSearch: true,
+        hideInExport: true,
+        dataIndex: 'files',
+        customRender: ({ record }) => <FilesRender {...record} />,
+      },
+      {
+        title: '操作',
+        maxWidth: 150,
+        width: 150,
+        minWidth: 150,
+        fixed: 'right',
+        dataIndex: 'ACTION',
+        hideInSearch: true,
+        actions: ({ record }) => [
+          {
+            icon: 'ant-design:edit-outlined',
+            tooltip: '编辑',
+            auth: {
+              perm: 'app:vehicleUsage:update',
+              effect: 'disable',
+            },
+            onClick: () => openEditModal(record),
+          },
+          {
+            icon: 'ant-design:delete-outlined',
+            color: 'red',
+            tooltip: '删除此车辆使用',
+            auth: 'app:vehicleUsage:delete',
+            popConfirm: {
+              title: '你确定要删除吗？',
+              placement: 'left',
+              onConfirm: () => delRowConfirm(record.id),
+            },
+          },
+          {
+            icon: 'ant-design:cloud-upload-outlined',
+            tooltip: '上传附件',
+            onClick: () => openAttachmentUploadModal(record),
+          },
+        ],
+      },
+    ];
+  });
+
+  const openAttachmentUploadModal = async (record: TableListItem) => {
+    isUploadPopupVisiable.value = true;
+    fnModal.show({
+      width: 800,
+      title: `车辆使用: ${record.vechicleId}`,
+      content: () => {
+        return (
+          <AttachmentUpload
+            onClose={handleUploadClose}
+            afterUploadCallback={(files) => {
+              afterUploadCallback(files, record.id);
+            }}
+          ></AttachmentUpload>
+        );
+      },
+      destroyOnClose: true,
+      open: isUploadPopupVisiable.value,
+      footer: null,
+    });
+  };
+  const handleUploadClose = (hasSuccess: boolean) => {
+    fnModal.hide();
+    isUploadPopupVisiable.value = false;
+  };
+  const afterUploadCallback = async (
+    files: { filename: { path: string; id: number } }[],
+    id: number,
+  ) => {
+    await Api.vehicleUsage.vehicleUsageUpdate(
+      { id },
+      { fileIds: files.map((item) => item.filename.id) },
+    );
+    dynamicTableInstance?.reload();
+  };
+
+  /**
+   * @description 打开新增/编辑弹窗
+   */
+  const openEditModal = async (record: Partial<TableListItem>) => {
+    const [formRef] = await showModal({
+      modalProps: {
+        title: `${record.id ? '编辑' : '新增'}车辆使用`,
+        width: '50%',
+        onFinish: async (values) => {
+          if (record.id) {
+            await Api.vehicleUsage.vehicleUsageUpdate({ id: record.id }, values);
+          } else {
+            await Api.vehicleUsage.vehicleUsageCreate(values);
+          }
+          dynamicTableInstance?.reload();
+        },
+      },
+      formProps: {
+        labelWidth: 100,
+        schemas: formSchemas,
+      },
+    });
+
+    // 如果是编辑的话，需要获取角色详情
+    if (record.id) {
+      const info = await Api.vehicleUsage.vehicleUsageInfo({ id: record.id });
+      formRef?.setFieldsValue({
+        ...info,
+      });
+    }
+  };
+  const delRowConfirm = async (record) => {
+    await Api.vehicleUsage.vehicleUsageDelete({ id: record });
+    dynamicTableInstance?.reload();
+  };
+
+  const FilesRender: FunctionalComponent<TableListItem> = (vehicleUsage: TableListItem) => {
+    const [fnModal] = useModal();
+    return (
+      <Button
+        type="link"
+        onClick={() => {
+          openFilesManageModal(fnModal, vehicleUsage);
+        }}
+      >
+        {vehicleUsage.files?.length || 0}
+      </Button>
+    );
+  };
+
+  const openFilesManageModal = (fnModal, vehicleUsage: TableListItem) => {
+    const fileIds = vehicleUsage.files?.map((item) => item.id) || [];
+    fnModal.show({
+      width: 1200,
+      title: `附件管理`,
+      content: () => {
+        return (
+          <AttachmentManage
+            fileIds={fileIds}
+            onDelete={(unlinkIds) => unlinkAttachments(vehicleUsage.id, unlinkIds)}
+          ></AttachmentManage>
+        );
+      },
+      destroyOnClose: true,
+      footer: null,
+    });
+  };
+  const unlinkAttachments = async (id: number, unlinkIds: number[]) => {
+    await Api.vehicleUsage.unlinkAttachments({ id }, { fileIds: unlinkIds });
+    dynamicTableInstance?.reload();
+  };
 </script>
-<style scoped lang="less"></style>
+
+<style lang="less" scoped></style>