2025-03-26

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>