2025-03-26

2025-03-26 11:00:21 +08:00
parent 927d7381b8
commit b45f4950d3
468 changed files with 54473 additions and 124 deletions
--- a/src/views/downloadManagement/list/constant/edit.ts
+++ b/src/views/downloadManagement/list/constant/edit.ts
@@ -0,0 +1,111 @@
+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: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "下载名称: "
+    },
+
+    {
+        prop: "category_id",
+        placeholder: "请选择",
+        type: "select",
+        label: "下载分类: ",
+        options: []
+    },
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "下载排序: "
+    },
+    {
+        prop: "recommend",
+        placeholder: "请输入",
+        type: "radio",
+        label: "首页推荐: ",
+        options: [
+            {
+                label: "是",
+                value: 1
+            },
+            {
+                label: "否",
+                value: 0
+            }
+        ]
+    },
+    {
+        prop: "image",
+        type: "upImg",
+        label: "下载图片: ",
+        prompt: "图片尺寸320x320"
+    },
+    {
+        prop: "table",
+        type: "table",
+        label: "下载文件: "
+    },
+    {
+        prop: "applicable_to",
+        placeholder: "请输入",
+        type: "input",
+        label: "适合型号: "
+    },
+    {
+        prop: "support_platform",
+        placeholder: "请输入",
+        type: "input",
+        label: "支持系统: "
+    },
+
+    {
+        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_TABLE_DATA = [
+    {
+        file_path: "", //文件路径
+        btn_name: "", //按钮名字
+        file_ext: "" //文件格式
+    }
+];
+export const EDIT_RULE_FORM = {};
+// editRuleForm: {},
+//editFormData: [],
--- a/src/views/downloadManagement/list/constant/index.ts
+++ b/src/views/downloadManagement/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, EDIT_TABLE_DATA } from "./edit";
+export { FORM_DATA, RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES, EDIT_TABLE_DATA };
--- a/src/views/downloadManagement/list/constant/rules.ts
+++ b/src/views/downloadManagement/list/constant/rules.ts
@@ -0,0 +1,5 @@
+export const RULES = {
+    name: [{ required: true, message: "下载名称不能为空 ! ", trigger: "blur" }],
+    category_id: [{ required: true, message: "下载分类不能为空 ! ", trigger: "blur" }],
+    sort: [{ required: true, message: "下载排序不能为空 ! ", trigger: "blur" }]
+};
--- a/src/views/downloadManagement/list/constant/search.ts
+++ b/src/views/downloadManagement/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: "name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "下载名称: "
+    },
+
+    {
+        prop: "category_id",
+        placeholder: "请选择",
+        type: "select",
+        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
+};
--- a/src/views/downloadManagement/list/constant/table.ts
+++ b/src/views/downloadManagement/list/constant/table.ts
@@ -0,0 +1,59 @@
+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: "center",
+        label: "图片",
+        prop: "image",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "下载名称",
+        prop: "name"
+    },
+    {
+        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: "created_at"
+    },
+
+    {
+        align: "center",
+        label: "状态",
+        prop: "status",
+        width: 80
+    },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];
--- a/src/views/downloadManagement/list/edit.vue
+++ b/src/views/downloadManagement/list/edit.vue
@@ -0,0 +1,268 @@
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button @click="handleResetClick()"> 重置 </el-button>
+            <el-button type="primary" @click="handleConfirmClick()"> 提交 </el-button>
+        </div>
+        <div class="card table-main">
+            <div style="width: 900px">
+                <rulesForm
+                    :ruleForm="dataStore.editRuleForm"
+                    :formData="dataStore.editFormData"
+                    :rules="dataStore.rules"
+                    ref="formRef"
+                >
+                    <el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleEditAdd">添加行</el-button>
+                    <FormTable :columns="dataStore.editColumns" :tableData="dataStore.editTableData" :height="200">
+                        <template #up="scope">
+                            <el-upload
+                                action="#"
+                                class="upload"
+                                :limit="1"
+                                :multiple="true"
+                                :show-file-list="false"
+                                :http-request="param => uploadExcel(param)"
+                                :before-upload="file => beforeExcelUpload(file)"
+                                :on-exceed="handleExceed"
+                                :on-success="(response, file, fileList) => excelUploadSuccess(response, scope.row)"
+                                :on-error="excelUploadError"
+                                :accept="filesType!.join(',')"
+                                ref="uploadRef"
+                            >
+                                <el-button type="primary" size="small">文件上传</el-button>
+                            </el-upload>
+                            <!-- 显示文件名 -->
+                            <div v-if="scope.row.file_path" style="display: flex; align-items: center; justify-content: center">
+                                <span style="padding: 0 10px; margin-right: 20px; border: 1px solid #eeeeee">
+                                    {{ scope.row.file_path }}</span
+                                >
+                                <el-icon style="cursor: pointer" @click="handleDelete(scope.row)"><Delete /></el-icon>
+                            </div>
+                        </template>
+
+                        <template #operation="scope">
+                            <el-button type="danger" size="small" @click="handleEditDelete(scope)">删除行</el-button>
+                        </template>
+                    </FormTable>
+                </rulesForm>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import rulesForm from "@/components/rulesForm/index.vue";
+import FormTable from "@/components/FormTable/index.vue";
+import { EDIT_TABLE_DATA, RULES, EDIT_RULE_FORM, EDIT_FORM_DATA } from "./constant/index";
+import { useMsg } from "@/hooks/useMsg";
+import { Delete } from "@element-plus/icons-vue";
+const $route = useRoute();
+import { getCategorysApi } from "@/api/modules/downloadClass";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+import {
+    getAttachmentUpFileApi,
+    getAttachmentSaveApi,
+    getAttachmentUpdateApi,
+    getAttachmentReadApi
+} from "@/api/modules/downloadList";
+//上传文件格式
+const filesType = ref([".inf", ".sys", ".dll", ".exe", ".cat", ".ko", ".rpm", ".kext", ".zip", ".bin‌", ".rar", ".tar", ".gz"]);
+const dataStore = reactive<any>({
+    rules: cloneDeep(RULES), //抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
+    editTableData: cloneDeep(EDIT_TABLE_DATA), //添加|编辑里的表格数据
+    editColumns: [
+        {
+            label: "文件",
+            prop: "file_path",
+            disabled: false,
+            formType: "up",
+            width: "350",
+            align: "left"
+        },
+        {
+            label: "文件格式",
+            prop: "file_ext",
+            disabled: false,
+            formType: "input",
+            maxLength: 50,
+            width: "150"
+        },
+        //operation
+        {
+            label: "按钮名称",
+            prop: "btn_name",
+            disabled: false,
+            formType: "input",
+            maxLength: 50,
+            width: "150"
+        },
+        {
+            label: "操作",
+            prop: "operation",
+
+            width: "112"
+        }
+    ] //添加|编辑里的表格配置项
+});
+const formRef: any = ref(null);
+const uploadRef = ref<any>(null);
+// 文件上传
+const uploadExcel = async (param: any) => {
+    let excelFormData = new FormData();
+    excelFormData.append("attachment", param.file);
+    const result = await getAttachmentUpFileApi(excelFormData);
+    return result;
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param file 上传的文件
+ * @param row 当前行数据
+ * */
+const beforeExcelUpload = (file: any) => {
+    const maxSize = 50 * 1024 * 1024;
+    if (file.size > maxSize) {
+        setTimeout(() => {
+            ElNotification({
+                title: "温馨提示",
+                message: `上传文件大小不能超过 ${50}MB！`,
+                type: "warning"
+            });
+        }, 0);
+    }
+    // return isExcel && fileSize;
+};
+
+// 上传错误提示
+const excelUploadError = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: `文件上传失败，请您重新上传！`,
+        type: "error"
+    });
+};
+
+// 上传成功提示
+const excelUploadSuccess = (response: any, row: any) => {
+    console.log(response, "=response=");
+    // 假设后端返回的数据中有文件路径和文件格式
+    if (response?.code === 0) {
+        row.file_path = response.data.path; // 假设后端返回的文件路径在 data.path 中
+    }
+    console.log(row, "====row========");
+    ElNotification({
+        title: "温馨提示",
+        message: `文件上传成功！`,
+        type: "success"
+    });
+};
+// 文件数超出提示
+const handleExceed = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: "最多只能上传一个文件！",
+        type: "warning"
+    });
+};
+//添加
+const getAttachmentSave = async () => {
+    const result = await getAttachmentSaveApi({ ...dataStore.editRuleForm, attach: JSON.stringify(dataStore.editTableData) });
+    if (result?.code === 0) {
+        useMsg("success", result?.msg);
+    }
+};
+// //更新
+const getAttachmentUpdate = async () => {
+    const result = await getAttachmentUpdateApi({ ...dataStore.editRuleForm, attach: JSON.stringify(dataStore.editTableData) });
+    if (result?.code === 0) {
+        useMsg("success", result?.msg);
+    }
+};
+//抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            console.log("submit!");
+            $route.query.title === "添加下载" ? getAttachmentSave() : getAttachmentUpdate();
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//抽屉重置
+const handleResetClick = () => {
+    if ($route.query.title === "添加下载") {
+        resetFields();
+    } else {
+        getAttachmentRead();
+    }
+};
+//重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+};
+
+const handleEditDelete = (scope: any) => {
+    dataStore.editTableData.splice(scope.$index, 1);
+};
+const handleEditAdd = () => {
+    dataStore.editTableData.push({
+        file_path: "", //文件路径
+        btn_name: "", //按钮名字
+        file_ext: "" //文件格式
+    });
+};
+//详情
+const getAttachmentRead = async () => {
+    let id = $route.query.id;
+    if (!id) {
+        return;
+    }
+    const result = await getAttachmentReadApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+        dataStore.editTableData = result?.data.attach;
+    }
+};
+getAttachmentRead();
+
+//分类
+const getCategorys = async () => {
+    const result = await getCategorysApi();
+
+    if (result?.code === 0) {
+        let arr: any[] = [];
+        result?.data?.forEach((item: any) => {
+            let obj = {
+                value: item.id,
+                label: item.name
+            };
+            arr.push(obj);
+        });
+        dataStore.editFormData[1].options = arr;
+    }
+};
+getCategorys();
+const handleDelete = async (row: any) => {
+    row.file_path = "";
+    // 清空上传组件的文件列表
+
+    if (uploadRef.value) {
+        uploadRef.value.clearFiles();
+    }
+
+    ElNotification({
+        title: "温馨提示",
+        message: `文件已删除！`,
+        type: "success"
+    });
+};
+</script>
+
+<style scoped></style>
--- a/src/views/downloadManagement/list/index.vue
+++ b/src/views/downloadManagement/list/index.vue
@@ -0,0 +1,172 @@
+<!-- 视频列表 -->
+<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="getAttachmentListApi"
+            :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="scope.row.status === 1 ? 'success' : 'danger'" effect="dark">{{
+                    scope.row.status === 1 ? "启用" : "禁用"
+                }}</el-tag>
+            </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="handleBtnClick('编辑', scope.row)">编辑</el-button>
+
+                <el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
+            </template>
+        </ProTable>
+    </div>
+</template>
+
+<script setup lang="ts" name="downloadListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+
+//列表接口
+import { getAttachmentListApi, getAttachmentListDelApi, getAttachmentSortApi } from "@/api/modules/downloadList";
+import { getCategorysApi } from "@/api/modules/downloadClass";
+import { integerRexg } from "@/utils/regexp/index";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件 FORM_DATA
+import { RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES, EDIT_TABLE_DATA, FORM_DATA } from "./constant/index";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const $router = useRouter();
+
+//图片地址
+const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
+// 数据源
+const dataStore = reactive<any>({
+    editTableData: cloneDeep(EDIT_TABLE_DATA), //添加|编辑里的表格数据
+    editColumns: [
+        {
+            label: "文件",
+            prop: "file_path",
+            disabled: false,
+            formType: "up",
+            width: "250",
+            align: "left"
+        },
+        {
+            label: "文件格式",
+            prop: "file_ext",
+            disabled: false,
+            formType: "input",
+            maxLength: 50,
+            width: "100"
+        },
+        //operation
+        {
+            label: "按钮名称",
+            prop: "btn_name",
+            disabled: false,
+            formType: "input",
+            maxLength: 50,
+            width: "150"
+        },
+        {
+            label: "操作",
+            prop: "operation",
+
+            width: "112"
+        }
+    ], //添加|编辑里的表格配置项
+    formData: cloneDeep(FORM_DATA),
+    columns: COLUMNS, //列表配置项
+    rules: cloneDeep(RULES), //抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
+    initParam: cloneDeep(RULE_FORM) // 初始化搜索条件|重置搜索条件
+});
+
+//按钮点击事件
+const handleBtnClick = (type: any, row: any) => {
+    //编辑
+    if (type === "编辑") {
+        $router.push({
+            path: "/admin/downloadManagement/list/edit",
+            query: {
+                id: row.id,
+                title: "编辑下载"
+            }
+        });
+        return;
+    }
+    //删除
+    if (type === "删除") {
+        getAttachmentListDel(row.id);
+    }
+};
+
+const handleAdd = () => {
+    $router.push({
+        path: "/admin/downloadManagement/list/edit",
+        query: {
+            title: "添加下载"
+        }
+    });
+};
+
+//删除
+const getAttachmentListDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getAttachmentListDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//排序
+const getAttachmentSort = async (row: any) => {
+    const result = await getAttachmentSortApi({ id: row.id, sort: row.sort });
+    useMsg("success", result?.msg);
+    if (result?.code === 0) {
+        proTableRef?.value?.getTableList();
+    }
+};
+
+//排序input框失焦
+const handleBlur = (row: any) => {
+    getAttachmentSort(row);
+};
+//排序input输入
+const handleInput = (row: any) => {
+    row.sort = integerRexg(row.sort);
+};
+const getCategorys = async () => {
+    const result = await getCategorysApi();
+
+    if (result?.code === 0) {
+        let arr: any[] = [];
+        result?.data?.forEach((item: any) => {
+            let obj = {
+                value: item.id,
+                label: item.name
+            };
+            arr.push(obj);
+        });
+
+        dataStore.formData[1].options = arr;
+    }
+};
+getCategorys();
+</script>
+
+<style scoped></style>