2025-03-26

src/views/articleManagement/class/constant/btns.ts

@@ -0,0 +1,5 @@
+export const BTNS = [
+    { name: "编辑", type: "edit", btnType: "primary" },
+    { name: "添加文章", type: "add", btnType: "primary" },
+    { name: "删除", type: "del", btnType: "danger" }
+];

src/views/articleManagement/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: "文章分类名称: "
+    },
+
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "文章分类排序: "
+    },
+    {
+        prop: "is_show",
+        placeholder: "请输入",
+        type: "radio",
+        label: "是否显示: ",
+        options: [
+            {
+                label: "是",
+                value: 1
+            },
+            {
+                label: "否",
+                value: 0
+            }
+        ]
+    }
+
+    // {
+    //     prop: "seo_title",
+    //     placeholder: "请输入",
+    //     type: "input",
+    //     label: "SEO标题: "
+    // },
+    // {
+    //     prop: "seo_keywords",
+    //     placeholder: "请输入",
+    //     type: "input",
+    //     label: "SEO关键词: "
+    // },
+    // {
+    //     prop: "seo_desc",
+    //     placeholder: "请输入",
+    //     type: "input",
+    //     label: "SEO描述: "
+    // }
+];
+export const EDIT_RULE_FORM = {
+    is_show: 1,
+    seo_desc: "",
+    seo_keywords: "",
+    seo_title: "",
+    sort: 1,
+    name: ""
+};
+// editRuleForm: {},
+//editFormData: [],

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

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

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

@@ -0,0 +1,4 @@
+export const RULES = {
+    name: [{ required: true, message: "文章分类名称不能为空 ! ", trigger: "blur" }],
+    sort: [{ required: true, message: "文章分类排序不能为空 ! ", trigger: "blur" }]
+};

src/views/articleManagement/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: "文章分类名称: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

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

@@ -0,0 +1,38 @@
+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: "文章分类名称",
+        prop: "name"
+    },
+
+    {
+        align: "left",
+        label: "文章分类排序",
+        prop: "sort"
+    },
+    {
+        align: "left",
+        label: "是否显示",
+        prop: "is_show",
+        render: (scope: RenderScope<any>): VNode | string | any => {
+            return YES_OR_NO[scope.row.is_show];
+        }
+    },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 300 }
+];

src/views/articleManagement/class/index.vue

@@ -0,0 +1,194 @@
+<!-- 文章分类 -->
+<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="getArticleClassListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #operation="scope">
+                <el-button
+                    size="small"
+                    v-for="(item, index) in dataStore.btns"
+                    :key="index"
+                    :type="item.btnType"
+                    @click="handleBtnClick(item.type, scope.row)"
+                    >{{ item.name }}</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="articleClassListIndex">
+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 {
+    getArticleClassListApi,
+    getArticleClassAddSaveApi,
+    getArticleClassDelApi,
+    getArticleClassEditUpApi,
+    getArticleClassDetailsApi
+} from "@/api/modules/articleClass";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES, BTNS } from "./constant/index";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+const $router = useRouter();
+// 数据源
+const dataStore = reactive<any>({
+    title: "添加文章分类",
+    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,
+    btns: BTNS,
+    selectRow: {} //当前选择的row
+});
+
+//新增文章接口
+const getArticleClassAddSave = async () => {
+    const result = await getArticleClassAddSaveApi(dataStore.editRuleForm);
+    const { msg, code } = result;
+    if (code === 0) {
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//文章编辑
+const getArticleClassUpEdit = async () => {
+    const result = await getArticleClassEditUpApi(dataStore.editRuleForm);
+    const { msg, code } = result;
+
+    if (code === 0) {
+        useMsg("success", msg);
+        dataStore.visible = false;
+        proTableRef?.value?.getTableList();
+    }
+};
+//删除文章
+const getArticleClassDel = (row: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getArticleClassDelApi(row.id);
+        const { msg, code } = result;
+        if (code === 0) {
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            dataStore.title === "添加文章分类" ? getArticleClassAddSave() : getArticleClassUpEdit();
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+};
+//抽屉重置
+const handleResetClick = () => {
+    resetFields();
+    getArticleClassDetails(dataStore.selectRow);
+};
+
+//添加
+const handleAdd = () => {
+    dataStore.visible = true;
+};
+//弹窗关闭钩子
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+//文章分类详情
+const getArticleClassDetails = async (row: any) => {
+    const result = await getArticleClassDetailsApi(row.id);
+    const { code, data } = result;
+    if (code === 0) {
+        dataStore.editRuleForm = cloneDeep(data);
+    }
+};
+//按钮点击事件
+const handleBtnClick = (type: any, row: any) => {
+    dataStore.selectRow = row;
+    //添加
+    if (type === "add") {
+        $router.push({
+            path: "/admin/articleManagement/list/edit",
+            query: {
+                type,
+                title: "添加文章",
+                category_id: row.id
+            }
+        });
+    }
+    //编辑
+    if (type === "edit") {
+        dataStore.visible = true;
+        dataStore.title = "编辑文章分类";
+        getArticleClassDetails(row);
+        return;
+    }
+    //删除
+    if (type === "del") {
+        getArticleClassDel(row);
+    }
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,112 @@
+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;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "title",
+        placeholder: "请输入",
+        type: "input",
+        label: "文章名称: "
+    },
+
+    {
+        prop: "category_id",
+        placeholder: "请选择",
+        type: "treeSelect",
+        label: "文章分类: ",
+        options: []
+    },
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "文章排序: "
+    },
+    {
+        prop: "recommend",
+        placeholder: "请选择",
+        type: "radio",
+        label: "首页推荐: ",
+        options: [
+            {
+                label: "是",
+                value: 1
+            },
+            {
+                label: "否",
+                value: 0
+            }
+        ]
+    },
+    {
+        prop: "link",
+        placeholder: "请输入",
+        type: "input",
+        label: "跳转链接: "
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "textarea",
+        label: "文章描述: "
+    },
+    {
+        prop: "release_time",
+        placeholder: "请选择",
+        type: "datetime",
+        label: "发布时间: "
+    },
+    {
+        prop: "image",
+        type: "upImg",
+        label: "封面图: ",
+        prompt: "图片尺寸320x320"
+    },
+
+    {
+        prop: "seo_title",
+        placeholder: "请输入",
+        type: "input",
+        label: "SEO标题: "
+    },
+    {
+        prop: "seo_keywords",
+        placeholder: "请输入",
+        type: "input",
+        label: "SEO关键词: "
+    },
+    {
+        prop: "seo_desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "SEO描述: "
+    }
+];
+export const EDIT_RULE_FORM = {
+    category_id: "",
+    title: "",
+    image: "",
+    link: "",
+    sort: 1,
+    desc: "",
+    content: "",
+    recommend: 1,
+    release_time: ""
+};

src/views/articleManagement/list/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/articleManagement/list/constant/rules.ts

@@ -0,0 +1,5 @@
+export const RULES = {
+    title: [{ required: true, message: "文章名称不能为空 ! ", trigger: "blur" }],
+    category_id: [{ required: true, message: "文章分类不能为空 ! ", trigger: "change" }],
+    sort: [{ required: true, message: "文章排序不能为空 ! ", trigger: "blur" }]
+};

src/views/articleManagement/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: "文章名称: "
+    },
+
+    {
+        prop: "category_id",
+        placeholder: "请选择",
+        type: "treeSelect",
+        isArray: true,
+        label: "文章分类: ",
+        options: []
+    },
+    {
+        prop: "Time",
+        type: "daterange",
+        options: [],
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        startDate: "created_at",
+        // endDate: "createEndDate",
+        label: "发布时间: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

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

@@ -0,0 +1,53 @@
+//import { RenderScope } from "@/components/ProTable/interface";
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+    {
+        align: "center",
+        label: "图片",
+        prop: "image",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "文章名称",
+        prop: "title"
+    },
+    {
+        align: "left",
+        label: "文章分类",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "文章排序",
+        prop: "sort",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "首页推荐",
+        prop: "recommend"
+    },
+
+    {
+        align: "left",
+        label: "发布时间",
+        prop: "release_time",
+        width: 160
+    },
+
+    {
+        align: "center",
+        label: "状态",
+        prop: "enabled",
+        width: 80
+    },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/articleManagement/list/edit.vue

@@ -0,0 +1,126 @@
+<template>
+    <!-- style="margin-bottom: 16px" -->
+
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button @click="handleReset"> 重置 </el-button>
+            <el-button type="primary" @click="handleConfirmClick"> 提交 </el-button>
+        </div>
+        <div class="card table-main">
+            <el-tabs v-model="activeName" class="demo-tabs">
+                <el-tab-pane label="基本信息" name="basicInfo">
+                    <rulesForm
+                        :ruleForm="dataStore.editRuleForm"
+                        :formData="dataStore.editFormData"
+                        :rules="dataStore.rules"
+                        ref="formRef"
+                    />
+                </el-tab-pane>
+
+                <el-tab-pane label="详细内容" name="third">
+                    <div style="width: 1280px; margin: 0 auto">
+                        <WangEditor v-model:value="dataStore.editRuleForm.content" />
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="articleEditIndex">
+import rulesForm from "@/components/rulesForm/index.vue";
+import {
+    getArticleClassDataApi,
+    getArticleListAddSaveApi,
+    getArticleListDetailsApi,
+    getArticleListUpApi
+} from "@/api/modules/articleList";
+// /handleSubmit,
+import { EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
+import { useSearchInfoArray } from "@/hooks/useSearch";
+import { ref, reactive } from "vue";
+import WangEditor from "@/components/WangEditor/index.vue";
+// import rulesForm from "@/components/rulesForm/index.vue";
+
+import { cloneDeep } from "lodash-es";
+import { useMsg } from "@/hooks/useMsg";
+const formRef = ref<any>(null);
+const activeName = ref("basicInfo");
+const $route = useRoute();
+
+//数据集合
+const dataStore = reactive<any>({
+    rules: cloneDeep(RULES), //抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA) //抽屉表单配置项
+});
+//新增
+const getArticleListAddSave = async () => {
+    const result = await getArticleListAddSaveApi(dataStore.editRuleForm);
+    if (result.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+    }
+};
+//文章分类
+const getArticleClassData = async () => {
+    const result = await getArticleClassDataApi();
+    if (result?.code === 0) {
+        const { data } = result;
+        dataStore.editFormData[1].options = useSearchInfoArray(data);
+        //如果有category_id就代表是从文章分类跳转过来的
+        if ($route.query.category_id) {
+            dataStore.editRuleForm.category_id = Number($route.query.category_id);
+        }
+    }
+};
+getArticleClassData();
+
+//文章详情
+const getArticleListDetails = async () => {
+    let id = $route.query.id;
+    if (!id) {
+        return;
+    }
+    const result = await getArticleListDetailsApi(id);
+    if (result?.code === 0) {
+        const { data } = result;
+        dataStore.editRuleForm = data;
+        console.log(data);
+    }
+};
+//更新
+const getArticleListUp = async () => {
+    const result = await getArticleListUpApi({ id: $route.query.id, ...dataStore.editRuleForm });
+
+    if (result?.code === 0) {
+        useMsg("success", result?.msg);
+    }
+};
+
+getArticleListDetails();
+
+//提交
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            console.log("submit!");
+            $route.query.type === "add" ? getArticleListAddSave() : getArticleListUp();
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//重置
+const handleReset = () => {
+    if ($route.query.type === "add") {
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    } else {
+        getArticleListDetails();
+    }
+};
+</script>
+
+<style scoped></style>

src/views/articleManagement/list/index.vue

@@ -0,0 +1,122 @@
+<!-- 视频列表 -->
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd('add')"> 添加 </el-button>
+            <el-button type="primary" @click="handleExport"> 导出 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getArticleListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #image="scope">
+                <el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
+            </template>
+            <template #enabled="scope">
+                <el-tag type="success" effect="dark">{{ scope.row.enabled === 1 ? "启用" : "禁用" }}</el-tag>
+            </template>
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="handleBtnClick('edit', scope.row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="handleBtnClick('del', scope.row)">删除</el-button>
+            </template>
+        </ProTable>
+    </div>
+</template>
+
+<script setup lang="ts" name="articleListIndex">
+import { useExport } from "@/hooks/useExport";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+import ProTable from "@/components/ProTable/index.vue";
+//列表接口
+import {
+    getArticleListApi,
+    getArticleClassDataApi,
+    getArticleListExportApi,
+    getArticleListDelApi
+} from "@/api/modules/articleList";
+import { useSearchInfoArray } from "@/hooks/useSearch";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS } from "./constant/index";
+//图片地址
+const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const $router = useRouter();
+
+// 数据源
+const dataStore = reactive<any>({
+    columns: COLUMNS, //列表配置项
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA, //搜索配置项
+    selectRow: {} //当前选择的row
+});
+
+//文章分类(搜索条件)
+const getArticleClassData = async () => {
+    const result = await getArticleClassDataApi();
+    if (result?.code === 0) {
+        const { data } = result;
+        dataStore.formData[1].options = useSearchInfoArray(data);
+    }
+};
+getArticleClassData();
+//添加
+const handleAdd = (type: any) => {
+    $router.push({
+        path: "/admin/articleManagement/list/edit",
+        query: {
+            type,
+            title: "添加文章"
+        }
+    });
+};
+
+//导出接口
+const getArticleListExport = async () => {
+    const result = await getArticleListExportApi(dataStore.ruleForm);
+    await useExport(result);
+};
+//导出
+const handleExport = () => {
+    getArticleListExport();
+};
+//删除
+const getArticleListDel = async (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getArticleListDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//按钮点击事件
+const handleBtnClick = (type: any, row: any) => {
+    dataStore.selectRow = row;
+    //编辑
+    if (type === "edit") {
+        $router.push({
+            path: "/admin/articleManagement/list/edit",
+            query: {
+                id: row.id,
+                type
+            }
+        });
+        return;
+    }
+    //删除
+    if (type === "del") {
+        getArticleListDel(row.id);
+    }
+};
+</script>
+
+<style scoped></style>

src/views/articleManagement/recycle/constant/index.ts

@@ -0,0 +1,3 @@
+import { FORM_DATA, RULE_FORM } from "./search";
+import { COLUMNS } from "./table";
+export { FORM_DATA, RULE_FORM, COLUMNS };

src/views/articleManagement/recycle/constant/search.ts

@@ -0,0 +1,40 @@
+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: "文章名称: "
+    },
+
+    {
+        prop: "category_id",
+        placeholder: "请选择",
+        type: "select",
+        isArray: true,
+        label: "文章分类: ",
+        options: []
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/articleManagement/recycle/constant/table.ts

@@ -0,0 +1,61 @@
+import { RenderScope } from "@/components/ProTable/interface";
+const YES_OR_NO: any = {
+    1: "✔️",
+    0: "❌"
+};
+export const COLUMNS = [
+    { type: "selection", fixed: "left", width: 40 },
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+    {
+        align: "center",
+        label: "图片",
+        prop: "image",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "文章名称",
+        prop: "title"
+    },
+    {
+        align: "left",
+        label: "文章分类",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "文章排序",
+        prop: "sort",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "首页推荐",
+        prop: "recommend",
+        render: (scope: RenderScope<any>): VNode | string | any => {
+            return YES_OR_NO[scope.row.recommend];
+        }
+    },
+
+    {
+        align: "left",
+        label: "发布时间",
+        prop: "release_time",
+        width: 160
+    },
+
+    {
+        align: "center",
+        label: "状态",
+        prop: "status",
+        width: 80
+    },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/articleManagement/recycle/index.vue

@@ -0,0 +1,81 @@
+<!-- 文章回收 -->
+<template>
+    <div class="table-box">
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getArticleTrashListApi"
+            :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="danger" effect="dark">{{ scope.row.status ? "删除" : "删除" }}</el-tag>
+            </template>
+            <template #operation="scope">
+                <el-button size="small" type="danger" @click="getArticleTrashDel(scope.row.id)">删除</el-button>
+                <el-button size="small" type="primary" @click="getArticleTrashRestore(scope.row.id)">恢复</el-button>
+            </template>
+        </ProTable>
+    </div>
+</template>
+
+<script setup lang="ts" name="articleRecycleListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+import { useSearchInfoArray } from "@/hooks/useSearch";
+const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
+//列表接口
+import { getArticleTrashListApi, getArticleTrashDelApi, getArticleTrashRestoreApi } from "@/api/modules/articleRecycle";
+import { getArticleClassDataApi } from "@/api/modules/articleList";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS } from "./constant/index";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+
+// 数据源
+const dataStore = reactive<any>({
+    columns: COLUMNS, //列表配置项
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA //搜索配置项
+});
+//恢复
+const getArticleTrashRestore = async (id: any) => {
+    const result = await getArticleTrashRestoreApi(id);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        proTableRef?.value?.getTableList();
+    }
+};
+//删除
+const getArticleTrashDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getArticleTrashDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//文章分类(搜索条件)
+const getArticleClassData = async () => {
+    const result = await getArticleClassDataApi();
+    if (result?.code === 0) {
+        const { data } = result;
+        dataStore.formData[1].options = useSearchInfoArray(data);
+    }
+};
+getArticleClassData();
+</script>
+
+<style scoped></style>
+@/api/modules/articleRecycle

src/views/articleManagement/remark/constant/edit.ts

@@ -0,0 +1,136 @@
+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;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "videoName",
+        placeholder: "请输入",
+        type: "input",
+        label: "下载名称: "
+    },
+
+    {
+        prop: "videoType",
+        placeholder: "请选择",
+        type: "treeSelect",
+        label: "下载分类: ",
+        options: [
+            {
+                value: "1",
+                label: "Level one 1",
+                children: [
+                    {
+                        value: "1-1",
+                        label: "Level two 1-1",
+                        children: [
+                            {
+                                value: "1-1-1",
+                                label: "Level three 1-1-1"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        prop: "videoSort",
+        placeholder: "请输入",
+        type: "input",
+        label: "下载排序: "
+    },
+    {
+        prop: "recommend",
+        placeholder: "请输入",
+        type: "radio",
+        label: "首页推荐: ",
+        options: [
+            {
+                label: "是",
+                value: "是"
+            },
+            {
+                label: "否",
+                value: "否"
+            }
+        ]
+    },
+    {
+        prop: "imgUrl",
+        type: "upImg",
+        label: "下载图片: ",
+        prompt: "图片尺寸320x320"
+    },
+    {
+        prop: "table",
+        type: "table",
+        label: "下载文件: "
+    },
+    {
+        prop: "videoDescribe",
+        placeholder: "请输入",
+        type: "input",
+        label: "适合型号: "
+    },
+    {
+        prop: "videoDescribe",
+        placeholder: "请输入",
+        type: "input",
+        label: "支持系统: "
+    },
+    {
+        prop: "videoDescribe",
+        placeholder: "请输入",
+        type: "input",
+        label: "文件格式: "
+    },
+
+    {
+        prop: "SEOTitle",
+        placeholder: "请输入",
+        type: "input",
+        label: "SEO标题: "
+    },
+    {
+        prop: "SEOKeywords",
+        placeholder: "请输入",
+        type: "input",
+        label: "SEO关键词: "
+    },
+    {
+        prop: "SEODescribe",
+        placeholder: "请输入",
+        type: "input",
+        label: "SEO描述: "
+    }
+];
+export const EDIT_RULE_FORM = {
+    videoName: "",
+    videoType: "",
+    videoSort: 1,
+    recommend: "",
+    videoDescribe: "",
+    link: "",
+    SEOTitle: "",
+    SEOKeywords: "",
+    SEODescribe: ""
+};
+// editRuleForm: {},
+//editFormData: [],

src/views/articleManagement/remark/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/articleManagement/remark/constant/rules.ts

@@ -0,0 +1,5 @@
+export const RULES = {
+    videoName: [{ required: true, message: "下载名称不能为空 ! ", trigger: "blur" }],
+    videoType: [{ required: true, message: "下载分类不能为空 ! ", trigger: "blur" }],
+    videoSort: [{ required: true, message: "下载排序不能为空 ! ", trigger: "blur" }]
+};

src/views/articleManagement/remark/constant/search.ts

@@ -0,0 +1,57 @@
+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: "文章标题: "
+    },
+    {
+        prop: "is_audited",
+        placeholder: "请选择",
+        type: "select",
+        options: [
+            {
+                value: 0,
+                label: "待审核"
+            },
+            {
+                value: 1,
+                label: "已审核"
+            }
+        ],
+        label: "状态: "
+    },
+    {
+        prop: "Time",
+        type: "daterange",
+        options: [],
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        startDate: "created_at",
+        // endDate: "createEndDate",
+        label: "提交时间: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/articleManagement/remark/constant/table.ts

@@ -0,0 +1,41 @@
+//import { RenderScope } from "@/components/ProTable/interface";
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "留言人",
+        prop: "name",
+        width: 80
+    },
+    {
+        align: "center",
+        label: "联系邮箱",
+        prop: "email",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "留言内容",
+        prop: "content"
+    },
+    {
+        align: "left",
+        label: "文章标题",
+        prop: "article_title"
+    },
+    {
+        align: "left",
+        label: "提交时间",
+        prop: "created_at",
+        width: 160
+    },
+
+    {
+        align: "center",
+        label: "状态",
+        prop: "is_audited",
+        width: 160
+    },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/articleManagement/remark/index.vue

@@ -0,0 +1,90 @@
+<!-- 文章评论 -->
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="getArticleRemarkExport"> 导出 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getArticleRemarkListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #image="scope">
+                <el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
+            </template>
+            <template #is_audited="scope">
+                <el-tag :type="scope.row.is_audited ? 'success' : 'danger'" effect="dark">{{
+                    scope.row.is_audited ? "已审核" : "待审核"
+                }}</el-tag>
+            </template>
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="getArticleRemarkExamine(scope.row.id)">{{
+                    scope.row.is_audited ? "取消审核" : "审核通过"
+                }}</el-button>
+                <el-button size="small" type="danger" @click="getArticleRemarkDel(scope.row.id)">删除</el-button>
+            </template>
+        </ProTable>
+    </div>
+</template>
+
+<script setup lang="ts" name="articleRemarkListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+import { useExport } from "@/hooks/useExport";
+const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
+//列表接口
+
+import {
+    getArticleRemarkListApi,
+    getArticleRemarkDelApi,
+    getArticleRemarkExamineApi,
+    getArticleRemarkExportApi
+} from "@/api/modules/articleRemark";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, RULES } from "./constant/index";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+
+// 数据源
+const dataStore = reactive<any>({
+    columns: COLUMNS, //列表配置项
+    rules: cloneDeep(RULES), //抽屉表单验证
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA, //搜索配置项
+    selectRow: {} //当前选择的row
+});
+//导出
+const getArticleRemarkExport = async () => {
+    const result = await getArticleRemarkExportApi(dataStore.ruleForm);
+    await useExport(result);
+};
+
+//删除
+const getArticleRemarkDel = async (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getArticleRemarkDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//审核
+const getArticleRemarkExamine = async (id: any) => {
+    const result = await getArticleRemarkExamineApi(id);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        proTableRef?.value?.getTableList();
+    }
+};
+</script>
+
+<style scoped></style>