2025-03-26

src/views/bannerManagement/class/constant/edit.ts

@@ -0,0 +1,79 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+    disabled?: boolean;
+    fileList?: any;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: " Banner分类名称: "
+    },
+    {
+        prop: "recommend",
+        placeholder: "请输入",
+        type: "radio",
+        label: "首页推荐: ",
+        options: [
+            {
+                label: "是",
+                value: 1
+            },
+            {
+                label: "否",
+                value: 0
+            }
+        ]
+    },
+    {
+        prop: "at_platform",
+        placeholder: "请输入",
+        type: "radio",
+        label: "显示端口: ",
+        options: [
+            {
+                label: "PC端",
+                value: "pc"
+            },
+            {
+                label: "移动端",
+                value: "mobile"
+            }
+        ]
+    },
+
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "textarea",
+        label: "描述: "
+    }
+];
+export const EDIT_RULE_FORM = {
+    videoName: "",
+    videoType: "",
+    videoSort: 1,
+    recommend: "",
+    videoDescribe: "",
+    link: "",
+    SEOTitle: "",
+    SEOKeywords: "",
+    SEODescribe: ""
+};
+// editRuleForm: {},
+//editFormData: [],

src/views/bannerManagement/class/constant/index.ts

@@ -0,0 +1,5 @@
+import { FORM_DATA, RULE_FORM } from "./search";
+import { COLUMNS } from "./table";
+import { RULES } from "./rules";
+import { EDIT_FORM_DATA, EDIT_RULE_FORM } from "./edit";
+export { FORM_DATA, RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES };

src/views/bannerManagement/class/constant/rules.ts

@@ -0,0 +1,3 @@
+export const RULES = {
+    at_platform: [{ required: true, message: "首页推荐不能为空 ! ", trigger: "change" }]
+};

src/views/bannerManagement/class/constant/search.ts

@@ -0,0 +1,31 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+}
+export const FORM_DATA: FormItem[] = [
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "Banner名称: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/bannerManagement/class/constant/table.ts

@@ -0,0 +1,52 @@
+import { RenderScope } from "@/components/ProTable/interface";
+const YES_OR_NO: any = {
+    1: "✔️",
+    0: "❌"
+};
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+
+    {
+        align: "left",
+        label: "Banner分类名称",
+        prop: "name"
+    },
+    {
+        align: "left",
+        label: "首页推荐",
+        prop: "recommend",
+        render: (scope: RenderScope<any>): VNode | string | any => {
+            return YES_OR_NO[scope.row.recommend];
+        }
+    },
+    {
+        align: "left",
+        label: "显示端口",
+        prop: "at_platform",
+        render: (scope: RenderScope<any>): VNode | string | any => {
+            const OBJ: any = {
+                pc: "PC端",
+                mobile: "移动端"
+            };
+            return OBJ[scope.row.at_platform];
+        }
+    },
+
+    {
+        align: "left",
+        label: "描述",
+        prop: "desc"
+    },
+    {
+        align: "left",
+        label: "添加时间",
+        prop: "created_at"
+    },
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/bannerManagement/class/index.vue

@@ -0,0 +1,167 @@
+<!-- 视频列表 -->
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd"> 添加 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getBannerClassListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #image="scope">
+                <el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
+            </template>
+            <template #status="scope">
+                <el-tag type="success" effect="dark">{{ scope.row.status }}</el-tag>
+            </template>
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="getBannerClassListRead(scope.row.id)">编辑</el-button>
+                <el-button size="small" type="danger" @click="getBannerClassListDel(scope.row.id)">删除</el-button>
+            </template>
+        </ProTable>
+        <el-drawer
+            v-model="dataStore.visible"
+            :show-close="true"
+            :size="600"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="handleBeforeClone"
+            destroy-on-close
+        >
+            <template #header="{ titleId, titleClass }">
+                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
+            </template>
+            <div>
+                <rulesForm
+                    :ruleForm="dataStore.editRuleForm"
+                    :formData="dataStore.editFormData"
+                    :rules="dataStore.rules"
+                    ref="formRef"
+                />
+            </div>
+            <template #footer>
+                <div style="flex: auto">
+                    <el-button @click="handleResetClick">重置</el-button>
+                    <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup lang="ts" name="bannerClassListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
+//列表接口
+import {
+    getBannerClassListApi,
+    getBannerClassListDelApi,
+    getBannerClassListReadApi,
+    getBannerClassListUpApi,
+    getBannerClassListSaveApi
+} from "@/api/modules/bannerClass";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+// 数据源
+const dataStore = reactive<any>({
+    title: "添加Banner分类",
+    columns: COLUMNS, //列表配置项
+    rules: cloneDeep(RULES), //抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA, //搜索配置项
+    visible: false
+});
+
+//抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            dataStore.title === "添加Banner分类" ? getBannerClassListSave() : getBannerClassListUp();
+            console.log("submit!");
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+};
+//抽屉重置
+const handleResetClick = () => {
+    if (dataStore.title === "添加Banner分类") {
+        resetFields();
+    } else {
+        getBannerClassListRead(dataStore.editRuleForm.id);
+    }
+};
+//添加
+const handleAdd = () => {
+    dataStore.visible = true;
+    dataStore.title = "添加Banner分类";
+};
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+//更新
+const getBannerClassListUp = async () => {
+    const result = await getBannerClassListUpApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        formRef!.value!.ruleFormRef.resetFields();
+        proTableRef?.value?.getTableList();
+    }
+};
+//新增 getBannerListSave
+const getBannerClassListSave = async () => {
+    const result = await getBannerClassListSaveApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        formRef!.value!.ruleFormRef.resetFields();
+        proTableRef?.value?.getTableList();
+    }
+};
+//删除
+const getBannerClassListDel = async (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getBannerClassListDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//详情
+const getBannerClassListRead = async (id: any) => {
+    dataStore.title = "编辑Banner";
+    dataStore.visible = true;
+    const result = await getBannerClassListReadApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+    }
+};
+</script>
+
+<style scoped></style>

src/views/bannerManagement/list/constant/edit.ts

@@ -0,0 +1,187 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+    disabled?: boolean;
+    fileList?: any;
+    prompt?: any;
+    placeholder1?: any;
+    prop1?: any;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "title",
+        placeholder: "请输入",
+        type: "input",
+        label: "Banner名称: "
+    },
+    {
+        prop: "title_txt_color",
+        placeholder: "填写RGB值",
+        type: "input",
+        label: "文字颜色: "
+    },
+    {
+        prop: "type",
+        placeholder: "请输入",
+        type: "radio",
+        label: "前台显示: ",
+        options: [
+            {
+                label: "显示图片",
+                value: "image"
+            },
+            {
+                label: "显示视频",
+                value: "video"
+            }
+        ]
+    },
+    {
+        prop: "image",
+        type: "upImg",
+        label: "Banner图片: "
+    },
+
+    {
+        prop: "banner_id",
+        placeholder: "请选择",
+        type: "select",
+        label: "Banner分类: ",
+        options: [
+            {
+                value: "1",
+                label: "Level one 1"
+            }
+        ]
+    },
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "Banner排序: "
+    },
+    {
+        prop: "link",
+        placeholder: "请输入",
+        type: "treeSelectInput",
+        label: "链接地址: ",
+        placeholder1: "请选择",
+        prop1: "link_to",
+        options: []
+    },
+
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "textarea",
+        label: "Banner描述: "
+    },
+    {
+        prop: "desc_txt_color",
+        placeholder: "填写RGB值",
+        type: "input",
+        label: "描述颜色: "
+    }
+];
+
+export const EDIT_FORM_DATA1: FormItem[] = [
+    {
+        prop: "title",
+        placeholder: "请输入",
+        type: "input",
+        label: "Banner名称: "
+    },
+    {
+        prop: "title_txt_color",
+        placeholder: "填写RGB值",
+        type: "input",
+        label: "文字颜色: "
+    },
+    {
+        prop: "type",
+        placeholder: "请输入",
+        type: "radio",
+        label: "前台显示: ",
+        options: [
+            {
+                label: "显示图片",
+                value: "image"
+            },
+            {
+                label: "显示视频",
+                value: "video"
+            }
+        ]
+    },
+    {
+        prop: "image",
+        type: "upImg",
+        label: "Banner图片: "
+    },
+
+    {
+        prop: "banner_id",
+        placeholder: "请选择",
+        type: "select",
+        label: "Banner分类: ",
+        options: [
+            {
+                value: "1",
+                label: "Level one 1"
+            }
+        ]
+    },
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "Banner排序: "
+    },
+    {
+        prop: "link",
+        placeholder: "请输入",
+        type: "inputSelect",
+        label: "链接地址: ",
+        placeholder1: "请选择",
+        prop1: "link_type",
+        options: []
+    },
+    {
+        prop: "video",
+        type: "video",
+        label: "视频文件: ",
+        fileList: []
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "textarea",
+        label: "Banner描述: "
+    },
+    {
+        prop: "desc_txt_color",
+        placeholder: "填写RGB值",
+        type: "input",
+        label: "描述颜色: "
+    }
+];
+
+export const EDIT_RULE_FORM = {
+    type: "image",
+    sort: 1
+};
+// editRuleForm: {},
+//editFormData: [],

src/views/bannerManagement/list/constant/index.ts

@@ -0,0 +1,5 @@
+import { FORM_DATA, RULE_FORM } from "./search";
+import { COLUMNS } from "./table";
+import { RULES, RULES1 } from "./rules";
+import { EDIT_FORM_DATA, EDIT_RULE_FORM, EDIT_FORM_DATA1 } from "./edit";
+export { FORM_DATA, RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_FORM_DATA1, EDIT_RULE_FORM, RULES, RULES1 };

src/views/bannerManagement/list/constant/rules.ts

@@ -0,0 +1,15 @@
+export const RULES = {
+    title: [{ required: true, message: "Banner名称不能为空 ! ", trigger: "blur" }],
+    type: [{ required: true, message: "前台显示不能为空 ! ", trigger: "change" }],
+    image: [{ required: true, message: "Banner图片不能为空 ! ", trigger: "change" }],
+    banner_id: [{ required: true, message: "Banner分类不能为空 ! ", trigger: "change" }],
+    sort: [{ required: true, message: "排序不能为空 ! ", trigger: "change" }]
+};
+export const RULES1 = {
+    title: [{ required: true, message: "Banner名称不能为空 ! ", trigger: "blur" }],
+    type: [{ required: true, message: "前台显示不能为空 ! ", trigger: "change" }],
+    image: [{ required: true, message: "Banner图片不能为空 ! ", trigger: "change" }],
+    banner_id: [{ required: true, message: "Banner分类不能为空 ! ", trigger: "change" }],
+    sort: [{ required: true, message: "排序不能为空 ! ", trigger: "change" }],
+    video: [{ required: true, message: "视频不能为空 ! ", trigger: "change" }]
+};

src/views/bannerManagement/list/constant/search.ts

@@ -0,0 +1,50 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+}
+export const FORM_DATA: FormItem[] = [
+    {
+        prop: "title",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "Banner名称: "
+    },
+
+    {
+        prop: "banner_id",
+        placeholder: "请选择",
+        type: "select",
+        isArray: true,
+        label: "Banner分类: ",
+        options: []
+    },
+    {
+        prop: "Time",
+        type: "daterange",
+        options: [],
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        startDate: "created_at",
+        //  endDate: "createEndDate",
+        label: "添加时间: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/bannerManagement/list/constant/table.ts

@@ -0,0 +1,38 @@
+//import { RenderScope } from "@/components/ProTable/interface";
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id"
+    },
+    {
+        align: "center",
+        label: "图片",
+        prop: "image",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "Banner名称",
+        prop: "title"
+    },
+    {
+        align: "left",
+        label: "Banner分类",
+        prop: "banner_name"
+    },
+    {
+        align: "left",
+        label: "Banner排序",
+        prop: "sort"
+    },
+
+    {
+        align: "left",
+        label: "添加时间",
+        prop: "created_at"
+    },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/bannerManagement/list/index.vue

@@ -0,0 +1,339 @@
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd"> 添加 </el-button>
+            <el-button type="primary" @click="handleExport"> 导出 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getBannerListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #image="scope">
+                <el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
+            </template>
+            <template #sort="scope">
+                <el-input v-model="scope.row.sort" @blur="handleBlur(scope.row)" @input="handleInput(scope.row)"></el-input>
+            </template>
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="getBannerRead(scope.row.id)">编辑</el-button>
+                <el-button size="small" type="danger" @click="getBannerDel(scope.row.id)">删除</el-button>
+            </template>
+        </ProTable>
+        <el-drawer
+            v-model="dataStore.visible"
+            :show-close="true"
+            :size="640"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="handleBeforeClone"
+            destroy-on-close
+        >
+            <template #header="{ titleId, titleClass }">
+                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
+            </template>
+            <div>
+                <rulesForm
+                    :ruleForm="dataStore.editRuleForm"
+                    :formData="dataStore.editFormData"
+                    :rules="dataStore.rules"
+                    ref="formRef"
+                    @handleRadioGroupEmits="handleRadioGroupEmits"
+                >
+                    <el-input v-model.trim="dataStore.editRuleForm.link" clearable style="width: 440px">
+                        <template #append>
+                            <el-tree-select
+                                lazy
+                                :props="treeProps"
+                                :load="getSystemUrls"
+                                show-checkbox
+                                v-model="selectedNodes"
+                                ref="treeRef"
+                                check-strictly
+                                accordion
+                                :cache-data="dataStore.data"
+                                @check="handleCheck"
+                                placeholder="请选择"
+                                style="padding: 0"
+                                @visible-change="visibleChange"
+                            />
+                        </template>
+                    </el-input>
+                </rulesForm>
+            </div>
+            <template #footer>
+                <div style="flex: auto">
+                    <el-button @click="handleResetClick">重置</el-button>
+                    <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup lang="ts" name="bannerListIndex">
+import rulesForm from "@/components/rulesForm/index.vue";
+import ProTable from "@/components/ProTable/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+import { useExport } from "@/hooks/useExport";
+import { integerRexg } from "@/utils/regexp/index";
+// 图片地址
+const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
+// 列表接口
+import {
+    getBannerListApi,
+    getBannerDelApi,
+    getBannerReadApi,
+    getBannerListSortApi,
+    getBannerUpApi,
+    getBannerListSaveApi,
+    getBannerListExportApi
+} from "@/api/modules/banner";
+import { getBannerClassListApi } from "@/api/modules/bannerClass";
+import { getSystemUrlsApi } from "@/api/modules/home";
+// 深拷贝方法
+import { cloneDeep } from "lodash-es";
+// 表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_FORM_DATA1, EDIT_RULE_FORM, RULES, RULES1 } from "./constant/index";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+// 数据源
+const dataStore = reactive<any>({
+    title: "添加Banner",
+    columns: COLUMNS, // 列表配置项
+    rules: cloneDeep(RULES), // 抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA), // 抽屉表单配置项
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA, // 搜索配置项 dataStore.formData
+    visible: false,
+    data: [],
+    is: false
+});
+
+const selectedNodes = ref(null);
+
+const treeRef = ref(null);
+
+// 配置 tree-select 的属性
+const treeProps = {
+    children: "children",
+    label: "label",
+    value: "value"
+};
+const visibleChange = (is: any) => {
+    dataStore.is = is;
+    if (dataStore.is) {
+    }
+};
+const buildTree = (data: any, outerLinkTo: any = "") => {
+    return data.map((item: any) => {
+        const { name, id, url, data: childData = [], children: nestedChildren = [] } = item;
+        const currentLinkTo = item.link_to || outerLinkTo;
+        const value = id ? `${currentLinkTo}/${id}/${name}` : currentLinkTo || name;
+
+        const combinedChildren = [...childData, ...nestedChildren];
+        const childNodes = buildTree(combinedChildren, currentLinkTo);
+
+        return {
+            label: name,
+            value,
+            url,
+            link_to: currentLinkTo,
+            children: childNodes
+        };
+    });
+};
+let isFirstRequest = true;
+const getSystemUrls = async (node: any, resolve: any) => {
+    //第一次请求
+    if (isFirstRequest) {
+        const result = await getSystemUrlsApi();
+        if (result?.code === 0) {
+            const children = buildTree(result?.data);
+            resolve(children);
+            isFirstRequest = false;
+        }
+    } else {
+        //第二次请求
+        if (node.data.children) {
+            resolve(node.data.children);
+        }
+        if (!node.data.children.length && !node.data.url && node.level > 1) {
+            const [link_to, id] = node?.data?.value?.split("/");
+            const result = await getSystemUrlsApi({ link_to, id });
+            if (result?.code === 0) {
+                const children = buildTree(result?.data, link_to);
+                resolve(children);
+            } else {
+                resolve([]);
+            }
+        }
+    }
+};
+// 详情
+const getBannerRead = async (id: any) => {
+    dataStore.title = "编辑Banner";
+    dataStore.visible = true;
+    const result = await getBannerReadApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+        if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
+            let { id, name, link } = dataStore.editRuleForm.link_echo_data;
+            let obj: any = {
+                label: name, // 确保这里的name是你想要显示的文本
+                value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`,
+                url: link,
+                link_to: dataStore.editRuleForm.link_to,
+                children: []
+            };
+            let data: any = [];
+            data.push(obj);
+            selectedNodes.value = obj.value;
+            dataStore.data = data;
+        }
+    }
+};
+const handleCheck = (checkedNodes: any, values: any) => {
+    const { checkedKeys } = values;
+    if (checkedKeys.length) {
+        dataStore.editRuleForm.link = checkedNodes.url;
+        dataStore.editRuleForm.link_to = checkedNodes.link_to;
+    } else {
+        dataStore.editRuleForm.link = "";
+        dataStore.editRuleForm.link_to = "";
+    }
+};
+
+// 更新
+const getBannerUp = async () => {
+    const result = await getBannerUpApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        formRef!.value!.ruleFormRef.resetFields();
+        proTableRef?.value?.getTableList();
+    }
+};
+
+// 分类
+const getBannerClassList = async () => {
+    const result = await getBannerClassListApi({ page: 1, size: 500 });
+    if (result?.code === 0) {
+        let arr: any = [];
+        result?.data?.data?.forEach((item: any) => {
+            arr.push({ value: item.id, label: item.name });
+        });
+        dataStore.formData[1].options = arr;
+        dataStore.editFormData[4].options = arr;
+    }
+};
+getBannerClassList();
+// 新增 getBannerListSave
+const getBannerListSave = async () => {
+    const result = await getBannerListSaveApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        useMsg("success", result?.msg);
+        formRef!.value!.ruleFormRef.resetFields();
+        proTableRef?.value?.getTableList();
+    }
+};
+// 导出接口
+const getArticleListExport = async () => {
+    const result = await getBannerListExportApi(dataStore.ruleForm);
+    await useExport(result);
+};
+// 导出
+const handleExport = () => {
+    getArticleListExport();
+};
+// 抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            dataStore.title === "编辑Banner" ? getBannerUp() : getBannerListSave();
+            console.log("submit!");
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+// 重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+};
+// 抽屉重置
+const handleResetClick = () => {
+    if (dataStore.title === "添加Banner") {
+        resetFields();
+    } else {
+        getBannerRead(dataStore.editRuleForm.id);
+    }
+};
+// 添加
+const handleAdd = () => {
+    dataStore.title = "添加Banner";
+    dataStore.visible = true;
+};
+// 抽屉关闭前的钩子
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+
+const handleRadioGroupEmits = (value: any) => {
+    if (value === "image") {
+        dataStore.editFormData = EDIT_FORM_DATA;
+        dataStore.rules = RULES;
+    } else {
+        dataStore.editFormData = EDIT_FORM_DATA1;
+        dataStore.rules = RULES1;
+    }
+};
+// 删除
+const getBannerDel = async (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getBannerDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+// 排序
+const getBannerListSort = async (row: any) => {
+    const result = await getBannerListSortApi({ id: row.id, sort: row.sort });
+
+    if (result?.code === 0) {
+        useMsg("success", result?.msg);
+        proTableRef?.value?.getTableList();
+    }
+};
+
+// 排序 input 框失焦
+const handleBlur = (row: any) => {
+    getBannerListSort(row);
+};
+// 排序 input 输入
+const handleInput = (row: any) => {
+    row.sort = integerRexg(row.sort);
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep(.el-input-group__append) {
+    padding: 0;
+}
+</style>