diff --git a/src/views/system/systemBanner/SysBanner.api.ts b/src/views/system/systemBanner/SysBanner.api.ts
new file mode 100644
index 0000000..ec51a91
--- /dev/null
+++ b/src/views/system/systemBanner/SysBanner.api.ts
@@ -0,0 +1,92 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createConfirm } = useMessage();
+
+enum Api {
+    list = '/sys/sysBanner/list',
+    save = '/sys/sysBanner/add',
+    edit = '/sys/sysBanner/edit',
+    deleteOne = '/sys/sysBanner/delete',
+    deleteBatch = '/sys/sysBanner/deleteBatch',
+    importExcel = '/sys/sysBanner/importExcel',
+    exportXls = '/sys/sysBanner/exportXls',
+}
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params, handleSuccess) => {
+    createConfirm({
+        iconType: 'warning',
+        title: '确认删除',
+        content: '是否删除选中数据',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+            return defHttp
+                .delete(
+                    {
+                        url: Api.deleteOne,
+                        data: params,
+                    },
+                    { joinParamsToUrl: true }
+                )
+                .then(() => {
+                    handleSuccess();
+                });
+        },
+    });
+    // return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
+    //     handleSuccess();
+    // });
+};
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+    createConfirm({
+        iconType: 'warning',
+        title: '确认删除',
+        content: '是否删除选中数据',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+            return defHttp
+                .delete(
+                    {
+                        url: Api.deleteBatch,
+                        data: params,
+                    },
+                    { joinParamsToUrl: true }
+                )
+                .then(() => {
+                    handleSuccess();
+                });
+        },
+    });
+};
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+    const url = isUpdate ? Api.edit : Api.save;
+    return defHttp.post({ url: url, params });
+};
diff --git a/src/views/system/systemBanner/SysBanner.data.ts b/src/views/system/systemBanner/SysBanner.data.ts
new file mode 100644
index 0000000..6b3352a
--- /dev/null
+++ b/src/views/system/systemBanner/SysBanner.data.ts
@@ -0,0 +1,177 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { rules } from '/@/utils/helper/validator';
+import { render } from '/@/utils/common/renderUtils';
+import { h } from 'vue';
+import { Image } from 'ant-design-vue';
+import { getDefaultImage, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { BODY_CONTAINER } from "/@/utils/domUtils";
+//列表数据
+export const columns: BasicColumn[] = [
+    {
+        title: '名称',
+        align: 'center',
+        dataIndex: 'name',
+    },
+    {
+        title: '序号',
+        align: 'center',
+        dataIndex: 'sort',
+    },
+    {
+        title: '图片',
+        align: 'center',
+        dataIndex: 'photoUrl',
+        minWidth: 230,
+        customRender: ({ text }) => {
+            return h(Image, {
+                placeholder: true,
+                src: getFileAccessHttpUrl(text),
+                height: 80,
+                width: 200,
+                fallback: getDefaultImage(),
+            });
+        },
+    },
+    {
+        title: '展示位置',
+        align: 'center',
+        dataIndex: 'showLocation_dictText',
+    },
+    {
+        title: '是否有效',
+        align: 'center',
+        dataIndex: 'status_dictText',
+    },
+    {
+        title: '有效期',
+        align: 'center',
+        dataIndex: 'isLongTermEffective_dictText',
+    },
+];
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+    {
+        field: 'name',
+        label: '名称',
+        component: 'Input',
+    },
+    {
+        field: 'showLocation',
+        label: '展示位置',
+        component: 'JDictSelectTag',
+        componentProps: {
+            dictCode: 'show_location',
+        },
+    },
+    {
+        field: 'status',
+        label: '是否有效',
+        component: 'JDictSelectTag',
+        componentProps: {
+            dictCode: 'yes_no_status',
+        },
+    },
+];
+//表单数据
+export const formSchema: FormSchema[] = [
+    {
+        label: '序号',
+        field: 'sort',
+        component: 'InputNumber',
+        rules: [{ required: true }],
+    },
+    {
+        label: '名称',
+        field: 'name',
+        component: 'Input',
+        rules: [{ required: true }],
+    },
+    {
+        label: '图片',
+        field: 'photoUrl',
+        component: 'JImageUpload',
+        rules: [{ required: true, message: '请上传图片' }],
+    },
+    {
+        label: '展示位置',
+        field: 'showLocation',
+        component: 'JDictSelectTag',
+        componentProps: {
+            dictCode: 'show_location',
+        },
+        rules: [{ required: true }],
+    },
+    {
+        label: '是否有效',
+        field: 'status',
+        component: 'JDictSelectTag',
+        defaultValue: '1',
+        componentProps: {
+            type: 'radio',
+            dictCode: 'yes_no_status',
+        },
+        rules: [{ required: true }],
+    },
+    {
+        label: '有效期',
+        field: 'isLongTermEffective',
+        component: 'JDictSelectTag',
+        defaultValue: '1',
+        componentProps: {
+            type: 'radio',
+            dictCode: 'is_long_term_effective',
+        },
+        rules: [{ required: true }],
+    },
+    {
+        label: '有效期时间',
+        field: 'rangeTime',
+        component: 'RangePicker',
+        dynamicRules: ({ model }) => {
+            return [{ required: model.isLongTermEffective !== '1', message: '请选择有效期时间' }];
+        },
+        ifShow: ({ model }) => {
+            return model.isLongTermEffective !== '1';
+        },
+        componentProps: ({ formModel }) => {
+            return {
+                valueType: 'Date',
+                valueFormat: 'YYYY-MM-DD',
+                getPopupContainer: () => BODY_CONTAINER,
+                onChange: ([start, end]) => {
+                    formModel.startTime = start;
+                    formModel.endTime = end;
+                },
+            };
+        },
+    },
+    {
+        label: '',
+        field: 'startTime',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '',
+        field: 'endTime',
+        component: 'Input',
+        show: false,
+    },
+    // TODO 主键隐藏字段，目前写死为ID
+    {
+        label: '',
+        field: 'id',
+        component: 'Input',
+        show: false,
+    },
+];
+
+/**
+ * 流程表单调用这个方法获取formSchema
+ * @param param
+ */
+export function getBpmFormSchema(_formData): FormSchema[] {
+    // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
+    return formSchema;
+}
diff --git a/src/views/system/systemBanner/SysBannerList.vue b/src/views/system/systemBanner/SysBannerList.vue
new file mode 100644
index 0000000..ff578fa
--- /dev/null
+++ b/src/views/system/systemBanner/SysBannerList.vue
@@ -0,0 +1,195 @@
+<template>
+    <div>
+        <!--引用表格-->
+        <BasicTable @register="registerTable" :rowSelection="rowSelection">
+            <!--插槽:table标题-->
+            <template #tableTitle>
+                <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增 </a-button>
+                <a-button type="primary" @click="batchHandleDelete" preIcon="ant-design:delete-outlined"> 批量删除 </a-button>
+                <!--                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出 </a-button>-->
+                <!--                <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入 </j-upload-button>-->
+                <!--                <a-dropdown v-if="selectedRowKeys.length > 0">-->
+                <!--                    <template #overlay>-->
+                <!--                        <a-menu>-->
+                <!--                            <a-menu-item key="1" @click="batchHandleDelete">-->
+                <!--                                <Icon icon="ant-design:delete-outlined" />-->
+                <!--                                删除-->
+                <!--                            </a-menu-item>-->
+                <!--                        </a-menu>-->
+                <!--                    </template>-->
+                <!--                    <a-button-->
+                <!--                        >批量操作-->
+                <!--                        <Icon icon="mdi:chevron-down" />-->
+                <!--                    </a-button>-->
+                <!--                </a-dropdown>-->
+            </template>
+            <!--操作栏-->
+            <template #action="{ record }">
+                <!--                <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />-->
+                <TableAction :actions="getTableAction(record)" />
+            </template>
+            <!--字段回显插槽-->
+            <template #htmlSlot="{ text }">
+                <div v-html="text"></div>
+            </template>
+            <!--省市区字段回显插槽-->
+            <template #pcaSlot="{ text }">
+                {{ getAreaTextByCode(text) }}
+            </template>
+            <template #fileSlot="{ text }">
+                <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+                <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)"
+                    >下载
+                </a-button>
+            </template>
+        </BasicTable>
+        <!-- 表单区域 -->
+        <SysBannerModal @register="registerModal" @success="handleSuccess" />
+    </div>
+</template>
+
+<script lang="ts" name="system-sysBanner" setup>
+    import { ref, computed, unref } from 'vue';
+    import { BasicTable, useTable, TableAction } from '/@/components/Table';
+    import { useModal } from '/@/components/Modal';
+    import { useListPage } from '/@/hooks/system/useListPage';
+    import SysBannerModal from './components/SysBannerModal.vue';
+    import { columns, searchFormSchema } from './SysBanner.data';
+    import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './SysBanner.api';
+    import { downloadFile } from '/@/utils/common/renderUtils';
+    import { message } from 'ant-design-vue';
+
+    const checkedKeys = ref<Array<string | number>>([]);
+    //注册model
+    const [registerModal, { openModal }] = useModal();
+    //注册table数据
+    const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+        tableProps: {
+            title: '轮播图',
+            api: list,
+            columns,
+            canResize: false,
+            formConfig: {
+                //labelWidth: 120,
+                schemas: searchFormSchema,
+                autoSubmitOnEnter: true,
+                showAdvancedButton: true,
+                fieldMapToNumber: [],
+                fieldMapToTime: [],
+            },
+            actionColumn: {
+                width: 120,
+                fixed: 'right',
+            },
+        },
+        exportConfig: {
+            name: '轮播图',
+            url: getExportUrl,
+        },
+        importConfig: {
+            url: getImportUrl,
+            success: handleSuccess,
+        },
+    });
+
+    const [registerTable, { reload, getDataSource, getRawDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+
+    /**
+     * 新增事件
+     */
+    function handleAdd() {
+        openModal(true, {
+            record: { sort: getDataSource().length + 1 },
+            isUpdate: false,
+            showFooter: true,
+            type: '新增',
+        });
+    }
+
+    /**
+     * 编辑事件
+     */
+    function handleEdit(record: Recordable) {
+        openModal(true, {
+            record,
+            isUpdate: true,
+            showFooter: true,
+            type: '编辑',
+        });
+    }
+
+    /**
+     * 详情
+     */
+    function handleDetail(record: Recordable) {
+        openModal(true, {
+            record,
+            isUpdate: true,
+            showFooter: false,
+        });
+    }
+
+    /**
+     * 删除事件
+     */
+    async function handleDelete(record) {
+        await deleteOne({ id: record.id }, handleSuccess);
+    }
+
+    /**
+     * 批量删除事件
+     */
+    async function batchHandleDelete() {
+        if (selectedRowKeys.value.length === 0) return message.info('请至少选择一条');
+        await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+    }
+    ``;
+
+    /**
+     * 成功回调
+     */
+    function handleSuccess() {
+        (selectedRowKeys.value = []) && reload();
+    }
+
+    /**
+     * 操作栏
+     */
+    function getTableAction(record) {
+        return [
+            {
+                label: '编辑',
+                onClick: handleEdit.bind(null, record),
+            },
+            {
+                label: '删除',
+                // popConfirm: {
+                //     title: '是否确认删除',
+                //     confirm: handleDelete.bind(null, record),
+                // },
+                onClick: handleDelete.bind(null, record),
+            },
+        ];
+    }
+
+    /**
+     * 下拉操作栏
+     */
+    // function getDropDownAction(record) {
+    //     return [
+    //         {
+    //             label: '详情',
+    //             1onClick: handleDetail.bind(null, record),
+    //         },
+    //         {
+    //             label: '删除',
+    //             popConfirm: {
+    //                 title: '是否确认删除',
+    //                 confirm: handleDelete.bind(null, record),
+    //             },
+    //         },
+    //     ];
+    // }
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/systemBanner/components/SysBannerForm.vue b/src/views/system/systemBanner/components/SysBannerForm.vue
new file mode 100644
index 0000000..20c291a
--- /dev/null
+++ b/src/views/system/systemBanner/components/SysBannerForm.vue
@@ -0,0 +1,70 @@
+<template>
+    <div style="min-height: 400px">
+        <BasicForm @register="registerForm"></BasicForm>
+        <div style="width: 100%;text-align: center" v-if="!formDisabled">
+            <a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {BasicForm, useForm} from '/@/components/Form/index';
+    import {computed, defineComponent} from 'vue';
+    import {defHttp} from '/@/utils/http/axios';
+    import { propTypes } from '/@/utils/propTypes';
+    import {getBpmFormSchema} from '../SysBanner.data';
+    import {saveOrUpdate} from '../SysBanner.api';
+    
+    export default defineComponent({
+        name: "SysBannerForm",
+        components:{
+            BasicForm
+        },
+        props:{
+            formData: propTypes.object.def({}),
+            formBpm: propTypes.bool.def(true),
+        },
+        setup(props){
+            const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({
+                labelWidth: 150,
+                schemas: getBpmFormSchema(props.formData),
+                showActionButtonGroup: false,
+                baseColProps: {span: 24}
+            });
+
+            const formDisabled = computed(()=>{
+                if(props.formData.disabled === false){
+                    return false;
+                }
+                return true;
+            });
+
+            let formData = {};
+            const queryByIdUrl = '/system/sysBanner/queryById';
+            async function initFormData(){
+                let params = {id: props.formData.dataId};
+                const data = await defHttp.get({url: queryByIdUrl, params});
+                formData = {...data}
+                //设置表单的值
+                await setFieldsValue(formData);
+                //默认是禁用
+                await setProps({disabled: formDisabled.value})
+            }
+
+            async function submitForm() {
+                let data = getFieldsValue();
+                let params = Object.assign({}, formData, data);
+                console.log('表单数据', params)
+                await saveOrUpdate(params, true)
+            }
+
+            initFormData();
+            
+            return {
+                registerForm,
+                formDisabled,
+                submitForm,
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/views/system/systemBanner/components/SysBannerModal.vue b/src/views/system/systemBanner/components/SysBannerModal.vue
new file mode 100644
index 0000000..2fc7f39
--- /dev/null
+++ b/src/views/system/systemBanner/components/SysBannerModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
+      <BasicForm @register="registerForm"/>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+    import {ref, computed, unref} from 'vue';
+    import {BasicModal, useModalInner} from '/@/components/Modal';
+    import {BasicForm, useForm} from '/@/components/Form/index';
+    import {formSchema} from '../SysBanner.data';
+    import {saveOrUpdate} from '../SysBanner.api';
+    // Emits声明
+    const emit = defineEmits(['register','success']);
+    const isUpdate = ref(true);
+    //设置标题
+    const title = ref(String);
+    //表单配置
+    const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
+        //labelWidth: 150,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        baseColProps: {span: 24}
+    });
+    //表单赋值
+    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+        //重置表单
+        await resetFields();
+        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
+        isUpdate.value = !!data?.isUpdate;
+        title.value = data.type;
+        if (unref(isUpdate)) {
+            if (data.record.isLongTermEffective === '0') {
+                data.record['rangeTime'] = [data.record.startTime, data.record.endTime];
+            }
+        }
+        //表单赋值
+        await setFieldsValue({
+            ...data.record,
+        });
+        // 隐藏底部时禁用整个表单
+       setProps({ disabled: !data?.showFooter })
+    });
+    //表单提交事件
+    async function handleSubmit(v) {
+        try {
+            let values = await validate();
+            setModalProps({confirmLoading: true});
+            //提交表单
+            await saveOrUpdate(values, isUpdate.value);
+            //关闭弹窗
+            closeModal();
+            //刷新列表
+            emit('success');
+        } finally {
+            setModalProps({confirmLoading: false});
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+	/** 时间和数字输入框样式 */
+  :deep(.ant-input-number){
+		width: 100%
+	}
+
+	:deep(.ant-calendar-picker){
+		width: 100%
+	}
+</style>