调整

src/views/sys/sysSwiper/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/sys/sysSwiper/components/sysSwiperEdit.vue

@@ -0,0 +1,145 @@
+<!-- 编辑弹窗 -->
+<template>
+    <ele-modal
+        :width="800"
+        :visible="visible"
+        :maskClosable="false"
+        :maxable="maxable"
+        :title="isUpdate ? '编辑轮播图' : '添加轮播图'"
+        :body-style="{ paddingBottom: '28px' }"
+        @update:visible="updateVisible"
+        @ok="save"
+    >
+        <a-form
+            ref="formRef"
+            :model="form"
+            :rules="rules"
+            :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+            :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+        >
+
+            <a-form-item
+                label="图片"
+                name="image">
+                <a-space>
+                    <a-image  v-if="form.image" :src="form.image" style="width: 100px; height: 100px"></a-image>
+                    <UploadFile v-model:value="form.image" />
+                </a-space>
+            </a-form-item>
+        </a-form>
+    </ele-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch } from "vue";
+import { Form, message } from "ant-design-vue";
+import { assignObject, uuid } from "ele-admin-pro";
+import { addSysSwiper, updateSysSwiper } from "@/api/sys/sysSwiper";
+import { SysSwiper } from "@/api/sys/sysSwiper/model";
+import { useThemeStore } from "@/store/modules/theme";
+import { storeToRefs } from "pinia";
+import { FormInstance } from "ant-design-vue/es/form";
+import { FileRecord } from "@/api/system/file/model";
+
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const { styleResponsive } = storeToRefs(themeStore);
+
+const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: SysSwiper | null;
+}>();
+
+const emit = defineEmits<{
+    (e: "done"): void;
+    (e: "update:visible", visible: boolean): void;
+}>();
+
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+
+// 用户信息
+const form = reactive<SysSwiper>({
+    id: undefined,
+    type: undefined,
+    image: undefined,
+    jumpType: undefined,
+    jumpPk: undefined,
+    color: undefined,
+    color1: undefined,
+    comments: undefined,
+    sortNumber: undefined,
+    userId: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined
+});
+
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+    emit("update:visible", value);
+};
+
+// 表单验证规则
+const rules = reactive({});
+
+const { resetFields } = useForm(form, rules);
+
+/* 保存编辑 */
+const save = () => {
+    if (!formRef.value) {
+        return;
+    }
+    formRef.value
+        .validate()
+        .then(() => {
+            loading.value = true;
+            const formData = {
+                ...form
+            };
+            const saveOrUpdate = isUpdate.value ? updateSysSwiper : addSysSwiper;
+            saveOrUpdate(formData)
+                .then((msg) => {
+                    loading.value = false;
+                    message.success(msg);
+                    updateVisible(false);
+                    emit("done");
+                })
+                .catch((e) => {
+                    loading.value = false;
+                    message.error(e.message);
+                });
+        })
+        .catch(() => {
+        });
+};
+
+watch(
+    () => props.visible,
+    (visible) => {
+        if (visible) {
+            if (props.data) {
+                assignObject(form, props.data);
+                isUpdate.value = true;
+            } else {
+                isUpdate.value = false;
+            }
+        } else {
+            resetFields();
+        }
+    },
+    { immediate: true }
+);
+</script>

src/views/sys/sysSwiper/index.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="page">
+        <div class="ele-body">
+            <a-card :bordered="false" :body-style="{ padding: '16px' }">
+                <ele-pro-table
+                    ref="tableRef"
+                    row-key="id"
+                    :columns="columns"
+                    :datasource="datasource"
+                    :customRow="customRow"
+                    tool-class="ele-toolbar-form"
+                    class="sys-org-table"
+                >
+                    <template #toolbar>
+                        <search
+                            @search="reload"
+                            :selection="selection"
+                            @add="openEdit"
+                            @remove="removeBatch"
+                            @batchMove="openMove"
+                        />
+                    </template>
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="column.key === 'image'">
+                            <a-image :src="record.image" :width="50" />
+                        </template>
+                        <template v-if="column.key === 'status'">
+                            <a-tag v-if="record.status === 1" color="green">显示</a-tag>
+                            <a-tag v-if="record.status === 0" color="red">隐藏</a-tag>
+                        </template>
+                        <template v-if="column.key === 'action'">
+                            <a-space>
+                                <a @click="openEdit(record)">修改</a>
+                                <a-divider type="vertical" />
+                                <a-popconfirm
+                                    title="确定要删除此记录吗？"
+                                    @confirm="remove(record)"
+                                >
+                                    <a class="ele-text-danger">删除</a>
+                                </a-popconfirm>
+                            </a-space>
+                        </template>
+                    </template>
+                </ele-pro-table>
+            </a-card>
+
+            <!-- 编辑弹窗 -->
+            <SysSwiperEdit v-model:visible="showEdit" :data="current" @done="reload" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { createVNode, ref } from "vue";
+import { message, Modal } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import type { EleProTable } from "ele-admin-pro";
+import { toDateString } from "ele-admin-pro";
+import type {
+    DatasourceFunction,
+    ColumnItem
+} from "ele-admin-pro/es/ele-pro-table/types";
+import Search from "./components/search.vue";
+import SysSwiperEdit from "./components/sysSwiperEdit.vue";
+import { pageSysSwiper, removeSysSwiper, removeBatchSysSwiper } from "@/api/sys/sysSwiper";
+import type { SysSwiper, SysSwiperParam } from "@/api/sys/sysSwiper/model";
+
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+// 表格选中数据
+const selection = ref<SysSwiper[]>([]);
+// 当前编辑数据
+const current = ref<SysSwiper | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 加载状态
+const loading = ref(true);
+
+// 表格数据源
+const datasource: DatasourceFunction = ({
+                                            page,
+                                            limit,
+                                            where,
+                                            orders,
+                                            filters
+                                        }) => {
+    if (filters) {
+        where.status = filters.status;
+    }
+    return pageSysSwiper({
+        ...where,
+        ...orders,
+        page,
+        limit
+    });
+};
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+    {
+        title: "ID",
+        dataIndex: "id",
+        key: "id",
+        align: "center",
+        width: 90
+    },
+    {
+        title: "图片",
+        dataIndex: "image",
+        key: "image",
+        align: "center"
+    },
+    {
+        title: "创建时间",
+        dataIndex: "createTime",
+        key: "createTime",
+        align: "center",
+        sorter: true,
+        ellipsis: true,
+        customRender: ({ text }) => toDateString(text, "yyyy-MM-dd HH:mm:ss")
+    },
+    {
+        title: "修改时间",
+        dataIndex: "updateTime",
+        key: "updateTime",
+        align: "center",
+        customRender: ({ text }) => toDateString(text, "yyyy-MM-dd HH:mm:ss")
+    },
+    {
+        title: "操作",
+        key: "action",
+        width: 180,
+        fixed: "right",
+        align: "center",
+        hideInSetting: true
+    }
+]);
+
+/* 搜索 */
+const reload = (where?: SysSwiperParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: SysSwiper) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+};
+
+/* 打开批量移动弹窗 */
+const openMove = () => {
+    showMove.value = true;
+};
+
+/* 删除单个 */
+const remove = (row: SysSwiper) => {
+    const hide = message.loading("请求中..", 0);
+    removeSysSwiper(row.id)
+        .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+        })
+        .catch((e) => {
+            hide();
+            message.error(e.message);
+        });
+};
+
+/* 批量删除 */
+const removeBatch = () => {
+    if (!selection.value.length) {
+        message.error("请至少选择一条数据");
+        return;
+    }
+    Modal.confirm({
+        title: "提示",
+        content: "确定要删除选中的记录吗?",
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+            const hide = message.loading("请求中..", 0);
+            removeBatchSysSwiper(selection.value.map((d) => d.id))
+                .then((msg) => {
+                    hide();
+                    message.success(msg);
+                    reload();
+                })
+                .catch((e) => {
+                    hide();
+                    message.error(e.message);
+                });
+        }
+    });
+};
+
+/* 查询 */
+const query = () => {
+    loading.value = true;
+};
+
+/* 自定义行属性 */
+const customRow = (record: SysSwiper) => {
+    return {
+        // 行点击事件
+        onClick: () => {
+            // console.log(record);
+        },
+        // 行双击事件
+        onDblclick: () => {
+            openEdit(record);
+        }
+    };
+};
+query();
+</script>
+
+<script lang="ts">
+export default {
+    name: "SysSwiper"
+};
+</script>
+
+<style lang="less" scoped></style>