From 21b56d186ea8c536f6a922d484ca3d93260997e5 Mon Sep 17 00:00:00 2001
From: yangchunlong <292345300@qq.com>
Date: Mon, 10 Aug 2026 09:51:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=E6=80=A7=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/compatibility.ts              |  38 +++
 src/components.d.ts                           |   1 +
 .../compatibility/constant/edit.ts            | 141 +++++++++++
 .../compatibility/constant/index.ts           |   5 +
 .../compatibility/constant/rules.ts           |   5 +
 .../compatibility/constant/search.ts          |  59 +++++
 .../compatibility/constant/table.ts           |  82 +++++++
 .../productManagement/compatibility/index.vue | 223 ++++++++++++++++++
 8 files changed, 554 insertions(+)
 create mode 100644 src/api/modules/compatibility.ts
 create mode 100644 src/views/productManagement/compatibility/constant/edit.ts
 create mode 100644 src/views/productManagement/compatibility/constant/index.ts
 create mode 100644 src/views/productManagement/compatibility/constant/rules.ts
 create mode 100644 src/views/productManagement/compatibility/constant/search.ts
 create mode 100644 src/views/productManagement/compatibility/constant/table.ts
 create mode 100644 src/views/productManagement/compatibility/index.vue

diff --git a/src/api/modules/compatibility.ts b/src/api/modules/compatibility.ts
new file mode 100644
index 0000000..44a1b01
--- /dev/null
+++ b/src/api/modules/compatibility.ts
@@ -0,0 +1,38 @@
+import http from "@/api";
+const BASE = `product/compat`;
+// 列表
+export const getCompatListApi = (params: any) => {
+    return http.get<any>(`${BASE}/index`, params);
+};
+// 详情
+export const getCompatDetailsApi = (params: any) => {
+    return http.get<any>(`${BASE}/read/${params}`);
+};
+// 删除
+export const getCompatDelApi = (params: any) => {
+    return http.delete<any>(`${BASE}/delete/${params}`);
+};
+//新增
+
+export const getCompatSaveApi = (params: any) => {
+    return http.post<any>(`${BASE}/save`, params, {
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+        }
+    });
+};
+//更新
+export const getCompatUpApi = (params: any) => {
+    return http.put<any>(`${BASE}/update/${params.id}`, params);
+};
+
+// 导出
+export const getCompatUpExportApi = (params: any) => {
+    return http.get<any>(`${BASE}/export`, params, {
+        responseType: "arraybuffer"
+    });
+};
+//导入
+export const getCompatImportApi = (params: any) => {
+    return http.post<any>(`${BASE}/import`, params);
+};
diff --git a/src/components.d.ts b/src/components.d.ts
index 207249a..18b47a5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -62,5 +62,6 @@ declare module "vue" {
         IEpSwitchButton: typeof import("~icons/ep/switch-button")["default"];
         RouterLink: typeof import("vue-router")["RouterLink"];
         RouterView: typeof import("vue-router")["RouterView"];
+        RulesForm: typeof import("./components/rulesForm/index.vue")["default"];
     }
 }
diff --git a/src/views/productManagement/compatibility/constant/edit.ts b/src/views/productManagement/compatibility/constant/edit.ts
new file mode 100644
index 0000000..66461c0
--- /dev/null
+++ b/src/views/productManagement/compatibility/constant/edit.ts
@@ -0,0 +1,141 @@
+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: "category_id1",
+        placeholder: "请选择",
+        type: "select",
+        label: "产品类型: ",
+        options: [
+            {
+                value: 1,
+                label: "私有云NAS"
+            },
+            {
+                value: 2,
+                label: "直连存储DAS"
+            }
+        ]
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "品牌: "
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "市场型号: "
+    },
+
+    {
+        prop: "category_id1",
+        placeholder: "请选择",
+        type: "select",
+        label: "配件类型: ",
+        options: [
+            {
+                value: 1,
+                label: "机械硬盘"
+            },
+            {
+                value: 2,
+                label: "2.5寸固态硬盘"
+            },
+            {
+                value: 3,
+                label: "M.2固态硬盘"
+            },
+            {
+                value: 4,
+                label: "内存条"
+            },
+            {
+                value: 5,
+                label: "UPS不间断电源"
+            }
+        ]
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "级别: "
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "规格: "
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "系列: "
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "容量: "
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "频率: "
+    },
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "兼容型号: "
+    },
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "排序: "
+    },
+    {
+        prop: "recommend",
+        placeholder: "请输入",
+        type: "radio",
+        label: "首页启用: ",
+        options: [
+            {
+                label: "是",
+                value: 1
+            },
+            {
+                label: "否",
+                value: 0
+            }
+        ]
+    }
+];
+export const EDIT_RULE_FORM = {
+    sort: 1
+};
+// editRuleForm: {},
+//editFormData: [],
diff --git a/src/views/productManagement/compatibility/constant/index.ts b/src/views/productManagement/compatibility/constant/index.ts
new file mode 100644
index 0000000..e7463b2
--- /dev/null
+++ b/src/views/productManagement/compatibility/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 };
diff --git a/src/views/productManagement/compatibility/constant/rules.ts b/src/views/productManagement/compatibility/constant/rules.ts
new file mode 100644
index 0000000..b24b9ba
--- /dev/null
+++ b/src/views/productManagement/compatibility/constant/rules.ts
@@ -0,0 +1,5 @@
+export const RULES = {
+    name: [{ required: true, message: "视频名称不能为空 ! ", trigger: "blur" }],
+    category_id1: [{ required: true, message: "视频分类不能为空 ! ", trigger: "blur" }],
+    sort: [{ required: true, message: "视频排序不能为空 ! ", trigger: "blur" }]
+};
diff --git a/src/views/productManagement/compatibility/constant/search.ts b/src/views/productManagement/compatibility/constant/search.ts
new file mode 100644
index 0000000..eada64b
--- /dev/null
+++ b/src/views/productManagement/compatibility/constant/search.ts
@@ -0,0 +1,59 @@
+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: "name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "型号: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "产品类型: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "配件类型: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "品牌: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};
diff --git a/src/views/productManagement/compatibility/constant/table.ts b/src/views/productManagement/compatibility/constant/table.ts
new file mode 100644
index 0000000..a0a9f14
--- /dev/null
+++ b/src/views/productManagement/compatibility/constant/table.ts
@@ -0,0 +1,82 @@
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+
+    {
+        align: "left",
+        label: "产品类型",
+        prop: "name",
+        fixed: true
+    },
+    {
+        align: "left",
+        label: "品牌",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "型号",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "配件类型",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "级别",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "规格",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "系列",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "容量",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "频率",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "兼容型号",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "点赞数",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "排序",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "创建时间",
+        prop: "created_at"
+    },
+    {
+        align: "left",
+        label: "更新时间",
+        prop: "created_at"
+    },
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];
diff --git a/src/views/productManagement/compatibility/index.vue b/src/views/productManagement/compatibility/index.vue
new file mode 100644
index 0000000..8b5669b
--- /dev/null
+++ b/src/views/productManagement/compatibility/index.vue
@@ -0,0 +1,223 @@
+<!-- 列表 -->
+<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>
+            <el-button type="primary" @click="handleImport"> 导入 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getCompatListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #image="scope">
+                <el-image :src="scope.row.image ? 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 #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>
+        <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"
+                >
+                </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>
+        <ImportExcel ref="importRef" />
+    </div>
+</template>
+
+<script setup lang="ts" name="productCompatibilityList">
+import ProTable from "@/components/ProTable/index.vue";
+import ImportExcel from "@/components/ImportExcel/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+
+import {
+    getCompatListApi,
+    getCompatDetailsApi,
+    getCompatDelApi,
+    getCompatSaveApi,
+    getCompatUpApi,
+    getCompatUpExportApi,
+    getCompatImportApi
+} from "@/api/modules/compatibility";
+
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
+import { useExport } from "@/hooks/useExport";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+const importRef = ref();
+//图片地址
+import { h } from "@/utils/url";
+// 数据源
+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,
+    selectRow: {} //当前选择的row
+});
+
+//抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            dataStore.title === "添加" ? getCompatSave() : getCompatUp();
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+};
+//抽屉重置
+const handleResetClick = () => {
+    if (dataStore.title === "添加") {
+        resetFields();
+    } else {
+        getCompatDetails(dataStore.selectRow.id);
+    }
+};
+
+//添加
+const handleAdd = () => {
+    dataStore.visible = true;
+    dataStore.title = "添加";
+};
+//抽屉关闭前的钩子
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+//详情
+const getCompatDetails = async (id: any) => {
+    const result = await getCompatDetailsApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+    }
+};
+
+//保存
+const getCompatSave = async () => {
+    const result = await getCompatSaveApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//更新
+const getCompatUp = async () => {
+    const result = await getCompatUpApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//导出接口
+const getCompatUpExport = async () => {
+    const result = await getCompatUpExportApi({
+        ...proTableRef?.value?.searchParam,
+        ...proTableRef?.value?.pageable
+    });
+    await useExport(result);
+};
+//删除
+const getCompatDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getCompatDelApi(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 === "编辑") {
+        dataStore.visible = true;
+        dataStore.title = "编辑";
+        getCompatDetails(row.id);
+        return;
+    }
+    //删除
+    if (type === "删除") {
+        getCompatDel(row.id);
+    }
+};
+//导出
+const handleExport = () => {
+    getCompatUpExport();
+};
+//导入
+const handleImport = () => {
+    let params = {
+        title: "数据",
+        tempApi: "",
+        importApi: getCompatImportApi
+        // proTableRef: getMenusList
+    };
+    importRef.value.acceptParams(params);
+    setTimeout(() => {
+        proTableRef.value?.getTableList();
+    }, 1000);
+};
+</script>
+
+<style scoped></style>