From d5512ad8d38f8090508a8548062bdfb41aed006d Mon Sep 17 00:00:00 2001
From: yangchunlong <292345300@qq.com>
Date: Tue, 7 Jul 2026 14:37:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E9=85=8D=E4=BB=B6?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                           |   4 -
 src/components/rulesForm/index.vue            |  18 ++
 .../accessoryType/constant/edit.ts            |  55 ++++
 .../accessoryType/constant/index.ts           |   5 +
 .../accessoryType/constant/rules.ts           |   5 +
 .../accessoryType/constant/search.ts          |  31 +++
 .../accessoryType/constant/table.ts           |  39 +++
 .../productManagement/accessoryType/index.vue | 262 ++++++++++++++++++
 .../compatibility/list/constant/edit.ts       | 108 ++++++++
 .../compatibility/list/constant/index.ts      |   5 +
 .../compatibility/list/constant/rules.ts      |   5 +
 .../compatibility/list/constant/search.ts     |  36 +++
 .../compatibility/list/constant/table.ts      |  75 +++++
 .../compatibility/list/index.vue              | 262 ++++++++++++++++++
 .../productManagement/list/constant/form.ts   |  87 ++++++
 .../productManagement/list/constant/index.ts  |  16 +-
 .../list/constant/ruleForm.ts                 |   2 +
 .../productManagement/list/constant/rules.ts  |   7 +
 src/views/productManagement/list/edit.vue     |  42 ++-
 .../list/utils/edit/submit.ts                 |  18 +-
 20 files changed, 1061 insertions(+), 21 deletions(-)
 create mode 100644 src/views/productManagement/accessoryType/constant/edit.ts
 create mode 100644 src/views/productManagement/accessoryType/constant/index.ts
 create mode 100644 src/views/productManagement/accessoryType/constant/rules.ts
 create mode 100644 src/views/productManagement/accessoryType/constant/search.ts
 create mode 100644 src/views/productManagement/accessoryType/constant/table.ts
 create mode 100644 src/views/productManagement/accessoryType/index.vue
 create mode 100644 src/views/productManagement/compatibility/list/constant/edit.ts
 create mode 100644 src/views/productManagement/compatibility/list/constant/index.ts
 create mode 100644 src/views/productManagement/compatibility/list/constant/rules.ts
 create mode 100644 src/views/productManagement/compatibility/list/constant/search.ts
 create mode 100644 src/views/productManagement/compatibility/list/constant/table.ts
 create mode 100644 src/views/productManagement/compatibility/list/index.vue
 create mode 100644 src/views/productManagement/list/constant/form.ts
 create mode 100644 src/views/productManagement/list/constant/ruleForm.ts
 create mode 100644 src/views/productManagement/list/constant/rules.ts

diff --git a/src/components.d.ts b/src/components.d.ts
index 207249a..5849469 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,11 +12,8 @@ declare module "vue" {
         ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
         ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
         ElButton: typeof import("element-plus/es")["ElButton"];
-        ElCarousel: typeof import("element-plus/es")["ElCarousel"];
-        ElCarouselItem: typeof import("element-plus/es")["ElCarouselItem"];
         ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
         ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
-        ElColorPicker: typeof import("element-plus/es")["ElColorPicker"];
         ElContainer: typeof import("element-plus/es")["ElContainer"];
         ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
         ElDialog: typeof import("element-plus/es")["ElDialog"];
@@ -38,7 +35,6 @@ declare module "vue" {
         ElOption: typeof import("element-plus/es")["ElOption"];
         ElPagination: typeof import("element-plus/es")["ElPagination"];
         ElRadio: typeof import("element-plus/es")["ElRadio"];
-        ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
         ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
         ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
         ElSelect: typeof import("element-plus/es")["ElSelect"];
diff --git a/src/components/rulesForm/index.vue b/src/components/rulesForm/index.vue
index fa7293b..bfb52f6 100644
--- a/src/components/rulesForm/index.vue
+++ b/src/components/rulesForm/index.vue
@@ -149,6 +149,24 @@
                         />
                     </el-select>
                 </template>
+                <template v-if="item.type === 'selectMultiple'">
+                    <el-select
+                        style="width: 240px"
+                        v-model="_ruleForm[`${item.prop}`]"
+                        :placeholder="item.placeholder"
+                        clearable
+                        multiple
+                        @change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
+                    >
+                        <el-option
+                            :label="option.label"
+                            :value="option.value"
+                            v-for="option in item.options"
+                            :key="option.value"
+                        />
+                    </el-select>
+                </template>
+
                 <template v-if="item.type === 'treeSelect'">
                     <el-tree-select
                         clearable
diff --git a/src/views/productManagement/accessoryType/constant/edit.ts b/src/views/productManagement/accessoryType/constant/edit.ts
new file mode 100644
index 0000000..c63ac0d
--- /dev/null
+++ b/src/views/productManagement/accessoryType/constant/edit.ts
@@ -0,0 +1,55 @@
+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: "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/accessoryType/constant/index.ts b/src/views/productManagement/accessoryType/constant/index.ts
new file mode 100644
index 0000000..e7463b2
--- /dev/null
+++ b/src/views/productManagement/accessoryType/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/accessoryType/constant/rules.ts b/src/views/productManagement/accessoryType/constant/rules.ts
new file mode 100644
index 0000000..b24b9ba
--- /dev/null
+++ b/src/views/productManagement/accessoryType/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/accessoryType/constant/search.ts b/src/views/productManagement/accessoryType/constant/search.ts
new file mode 100644
index 0000000..a2d0101
--- /dev/null
+++ b/src/views/productManagement/accessoryType/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
+};
diff --git a/src/views/productManagement/accessoryType/constant/table.ts b/src/views/productManagement/accessoryType/constant/table.ts
new file mode 100644
index 0000000..2f29409
--- /dev/null
+++ b/src/views/productManagement/accessoryType/constant/table.ts
@@ -0,0 +1,39 @@
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+
+    {
+        align: "left",
+        label: "配件类型",
+        prop: "name"
+    },
+    {
+        align: "left",
+        label: "使用状态",
+        prop: "category_name"
+    },
+
+    {
+        align: "left",
+        label: "创建时间",
+        prop: "created_at"
+    },
+    {
+        align: "left",
+        label: "更新时间",
+        prop: "created_at"
+    },
+    // {
+    //     align: "center",
+    //     label: "状态",
+    //     prop: "status",
+    //     width: 80
+    // },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];
diff --git a/src/views/productManagement/accessoryType/index.vue b/src/views/productManagement/accessoryType/index.vue
new file mode 100644
index 0000000..36e4362
--- /dev/null
+++ b/src/views/productManagement/accessoryType/index.vue
@@ -0,0 +1,262 @@
+<!-- 视频列表 -->
+<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="getVideoListApi"
+            :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"
+                    @handleSelectChangeEmits="handleSelectChangeEmits"
+                >
+                </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="accessoryType">
+import ProTable from "@/components/ProTable/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+
+//列表接口
+import {
+    getVideoListApi,
+    getVideoListExportApi,
+    getVideoListDelApi,
+    getVideoReadApi,
+    getVideoUpdateApi,
+    getVideoSaveApi,
+    getVideoClassListApi
+} from "@/api/modules/videoList";
+import { recursiveCompare } from "@/utils/recursiveCompare";
+// import { getVideoClassListApi } from "@/api/modules/videoClass";
+//深拷贝方法
+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);
+//图片地址
+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 === "添加视频" ? getVideoSave() : getVideoUpdate();
+        } 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 {
+        getVideoRead(dataStore.selectRow.id);
+    }
+};
+
+//视频分类接口
+const getVideoClassList = async () => {
+    const result = await getVideoClassListApi();
+    if (result?.code === 0) {
+        let arr: any[] = [];
+        if (result?.data?.length) {
+            result?.data?.forEach((item: any) => {
+                let obj = {
+                    value: item.id,
+                    label: item.name
+                };
+                arr.push(obj);
+            });
+            dataStore.formData[1].options = arr;
+        }
+    }
+};
+getVideoClassList();
+
+const getVideoClassEditList = async () => {
+    const result = await getVideoClassListApi({ is_show: 1 });
+    if (result?.code === 0) {
+        let arr: any[] = [];
+        if (result?.data?.length) {
+            result?.data?.forEach((item: any) => {
+                let obj = {
+                    value: item.id,
+                    label: item.name
+                };
+                arr.push(obj);
+            });
+            dataStore.editFormData[1].options = arr;
+        }
+    }
+};
+getVideoClassEditList();
+
+//添加
+const handleAdd = () => {
+    dataStore.visible = true;
+    dataStore.title = "添加视频";
+};
+//抽屉关闭前的钩子
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+//详情
+const getVideoRead = async (id: any) => {
+    const result = await getVideoReadApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+        // let is = dataStore.editFormData[1].options.some((item: any) => {
+        //     console.log(item.id);
+        //     console.log(dataStore.editRuleForm.category_id);
+        //     return item.value == dataStore.editRuleForm.category_id;
+        // });
+        let is = dataStore.editFormData[1].options.some((item: any) =>
+            recursiveCompare(item, dataStore.editRuleForm.category_id)
+        );
+        dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
+    }
+};
+
+const handleSelectChangeEmits = (value: any) => {
+    console.log(value, "========value=33========");
+    if (value.prop === "category_id1") {
+        dataStore.editRuleForm.category_id = value.id;
+    }
+};
+
+//保存
+const getVideoSave = async () => {
+    const result = await getVideoSaveApi(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 getVideoUpdate = async () => {
+    const result = await getVideoUpdateApi(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 getProductListExport = async () => {
+    const result = await getVideoListExportApi({
+        ...proTableRef?.value?.searchParam,
+        ...proTableRef?.value?.pageable
+    });
+    await useExport(result);
+};
+//删除
+const getVideoListDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getVideoListDelApi(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 = "编辑视频";
+        getVideoRead(row.id);
+        return;
+    }
+    //删除
+    if (type === "删除") {
+        getVideoListDel(row.id);
+    }
+};
+//导出
+const handleExport = () => {
+    getProductListExport();
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/productManagement/compatibility/list/constant/edit.ts b/src/views/productManagement/compatibility/list/constant/edit.ts
new file mode 100644
index 0000000..fb6a3e5
--- /dev/null
+++ b/src/views/productManagement/compatibility/list/constant/edit.ts
@@ -0,0 +1,108 @@
+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: "name",
+        placeholder: "请输入",
+        type: "select",
+        label: "配件类型: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "品牌: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "级别: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "类别: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "系列: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "市场型号: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "容器: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "接口类型: "
+    },
+    {
+        prop: "name",
+        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/list/constant/index.ts b/src/views/productManagement/compatibility/list/constant/index.ts
new file mode 100644
index 0000000..e7463b2
--- /dev/null
+++ b/src/views/productManagement/compatibility/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 };
diff --git a/src/views/productManagement/compatibility/list/constant/rules.ts b/src/views/productManagement/compatibility/list/constant/rules.ts
new file mode 100644
index 0000000..b24b9ba
--- /dev/null
+++ b/src/views/productManagement/compatibility/list/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/list/constant/search.ts b/src/views/productManagement/compatibility/list/constant/search.ts
new file mode 100644
index 0000000..da7898c
--- /dev/null
+++ b/src/views/productManagement/compatibility/list/constant/search.ts
@@ -0,0 +1,36 @@
+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",
+        label: "标签名称: "
+    },
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "型号: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};
diff --git a/src/views/productManagement/compatibility/list/constant/table.ts b/src/views/productManagement/compatibility/list/constant/table.ts
new file mode 100644
index 0000000..9f31a63
--- /dev/null
+++ b/src/views/productManagement/compatibility/list/constant/table.ts
@@ -0,0 +1,75 @@
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+
+    {
+        align: "left",
+        label: "标签名称",
+        prop: "name"
+    },
+    {
+        align: "left",
+        label: "配件类型",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "品牌",
+        prop: "sort",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "级别",
+        prop: "sort",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "系列",
+        prop: "sort",
+        width: 160
+    },
+
+    {
+        align: "left",
+        label: "型号",
+        prop: "created_at"
+    },
+    {
+        align: "left",
+        label: "容量",
+        prop: "created_at"
+    },
+    {
+        align: "left",
+        label: "接口型号",
+        prop: "created_at"
+    },
+    {
+        align: "left",
+        label: "兼容性状态",
+        prop: "created_at"
+    },
+    {
+        align: "left",
+        label: "排序",
+        prop: "created_at"
+    },
+    {
+        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/list/index.vue b/src/views/productManagement/compatibility/list/index.vue
new file mode 100644
index 0000000..ce923a8
--- /dev/null
+++ b/src/views/productManagement/compatibility/list/index.vue
@@ -0,0 +1,262 @@
+<!-- 视频列表 -->
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd"> 添加 </el-button>
+            <el-button type="primary" @click="handleImport"> 导入 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getVideoListApi"
+            :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"
+                    @handleSelectChangeEmits="handleSelectChangeEmits"
+                >
+                </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 rulesForm from "@/components/rulesForm/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+const importRef = ref();
+//列表接口
+import {
+    getVideoListApi,
+    getVideoListDelApi,
+    getVideoReadApi,
+    getVideoUpdateApi,
+    getVideoSaveApi,
+    getVideoClassListApi
+} from "@/api/modules/videoList";
+import { recursiveCompare } from "@/utils/recursiveCompare";
+// import { getVideoClassListApi } from "@/api/modules/videoClass";
+//深拷贝方法
+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);
+//图片地址
+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 === "添加视频" ? getVideoSave() : getVideoUpdate();
+        } 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 {
+        getVideoRead(dataStore.selectRow.id);
+    }
+};
+
+//视频分类接口
+const getVideoClassList = async () => {
+    const result = await getVideoClassListApi();
+    if (result?.code === 0) {
+        let arr: any[] = [];
+        if (result?.data?.length) {
+            result?.data?.forEach((item: any) => {
+                let obj = {
+                    value: item.id,
+                    label: item.name
+                };
+                arr.push(obj);
+            });
+            dataStore.formData[1].options = arr;
+        }
+    }
+};
+getVideoClassList();
+
+const getVideoClassEditList = async () => {
+    const result = await getVideoClassListApi({ is_show: 1 });
+    if (result?.code === 0) {
+        let arr: any[] = [];
+        if (result?.data?.length) {
+            result?.data?.forEach((item: any) => {
+                let obj = {
+                    value: item.id,
+                    label: item.name
+                };
+                arr.push(obj);
+            });
+            dataStore.editFormData[1].options = arr;
+        }
+    }
+};
+getVideoClassEditList();
+
+//添加
+const handleAdd = () => {
+    dataStore.visible = true;
+    dataStore.title = "添加视频";
+};
+//抽屉关闭前的钩子
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+//详情
+const getVideoRead = async (id: any) => {
+    const result = await getVideoReadApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+        // let is = dataStore.editFormData[1].options.some((item: any) => {
+        //     console.log(item.id);
+        //     console.log(dataStore.editRuleForm.category_id);
+        //     return item.value == dataStore.editRuleForm.category_id;
+        // });
+        let is = dataStore.editFormData[1].options.some((item: any) =>
+            recursiveCompare(item, dataStore.editRuleForm.category_id)
+        );
+        dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
+    }
+};
+
+const handleSelectChangeEmits = (value: any) => {
+    console.log(value, "========value=33========");
+    if (value.prop === "category_id1") {
+        dataStore.editRuleForm.category_id = value.id;
+    }
+};
+
+//保存
+const getVideoSave = async () => {
+    const result = await getVideoSaveApi(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 getVideoUpdate = async () => {
+    const result = await getVideoUpdateApi(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 getVideoListDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getVideoListDelApi(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 = "编辑视频";
+        getVideoRead(row.id);
+        return;
+    }
+    //删除
+    if (type === "删除") {
+        getVideoListDel(row.id);
+    }
+};
+
+const handleImport = () => {
+    //getProductBuypassListImportApi,
+    let params = {
+        title: "数据",
+        tempApi: "",
+        importApi: "",
+        proTableRef: proTableRef
+    };
+    importRef.value.acceptParams(params);
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/productManagement/list/constant/form.ts b/src/views/productManagement/list/constant/form.ts
new file mode 100644
index 0000000..73accf7
--- /dev/null
+++ b/src/views/productManagement/list/constant/form.ts
@@ -0,0 +1,87 @@
+//兼容性信息(否)
+export const FORM_DATA_LV1: any[] = [
+    {
+        prop: "tag",
+        placeholder: "请输入",
+        type: "selectMultiple",
+        label: "关联标签: ",
+        options: [
+            {
+                value: 1,
+                label: "测试1"
+            },
+            {
+                value: 2,
+                label: "测试2"
+            },
+            {
+                value: 3,
+                label: "测试3"
+            }
+        ]
+    },
+
+    {
+        prop: "is_show",
+        placeholder: "请输入",
+        type: "radio",
+        label: "是否显示系列名: ",
+        options: [
+            {
+                label: "是",
+                value: 1
+            },
+            {
+                label: "否",
+                value: 0
+            }
+        ]
+    },
+    {
+        prop: "remark",
+        placeholder: "请输入",
+        type: "textarea",
+        label: "兼容性说明"
+    }
+];
+//兼容性信息(是)
+export const FORM_DATA_LV2: any[] = [
+    {
+        prop: "tag",
+        placeholder: "请输入",
+        type: "selectMultiple",
+        label: "关联标签: "
+    },
+
+    {
+        prop: "is_show",
+        placeholder: "请输入",
+        type: "radio",
+        label: "是否显示系列名: ",
+        options: [
+            {
+                label: "是",
+                value: 1
+            },
+            {
+                label: "否",
+                value: 0
+            }
+        ]
+    },
+
+    //
+    {
+        prop: "className",
+        placeholder: "请输入",
+        type: "input",
+        label: "产品系列名: "
+    },
+
+    {
+        prop: "remark",
+        placeholder: "请输入",
+        type: "textarea",
+        label: "兼容性说明"
+    }
+];
diff --git a/src/views/productManagement/list/constant/index.ts b/src/views/productManagement/list/constant/index.ts
index b327176..57b0b81 100644
--- a/src/views/productManagement/list/constant/index.ts
+++ b/src/views/productManagement/list/constant/index.ts
@@ -2,4 +2,18 @@ import { FORM_DATA, RULE_FORM } from "./search";
 import { COLUMNS } from "./table";
 import { OPERATIONS } from "./operations";
 import { BASIC_INFO_FORM_DATA, BASIC_INFO_RULE_FORM, BASIC_INFO_RULES } from "./edit";
-export { FORM_DATA, RULE_FORM, COLUMNS, OPERATIONS, BASIC_INFO_RULE_FORM, BASIC_INFO_FORM_DATA, BASIC_INFO_RULES };
+import { FORM_DATA_LV2, FORM_DATA_LV1 } from "./form";
+import { RULES_LV1, RULES_LV2 } from "./rules";
+export {
+    FORM_DATA,
+    RULE_FORM,
+    COLUMNS,
+    OPERATIONS,
+    BASIC_INFO_RULE_FORM,
+    BASIC_INFO_FORM_DATA,
+    BASIC_INFO_RULES,
+    FORM_DATA_LV2,
+    FORM_DATA_LV1,
+    RULES_LV1,
+    RULES_LV2
+};
diff --git a/src/views/productManagement/list/constant/ruleForm.ts b/src/views/productManagement/list/constant/ruleForm.ts
new file mode 100644
index 0000000..a0bcdba
--- /dev/null
+++ b/src/views/productManagement/list/constant/ruleForm.ts
@@ -0,0 +1,2 @@
+export const RULE_FORM_LV1: any = {};
+export const RULE_FORM_LV2: any = {};
diff --git a/src/views/productManagement/list/constant/rules.ts b/src/views/productManagement/list/constant/rules.ts
new file mode 100644
index 0000000..f3946a2
--- /dev/null
+++ b/src/views/productManagement/list/constant/rules.ts
@@ -0,0 +1,7 @@
+export const RULES_LV1 = {
+    tag: [{ required: true, message: "所属系列名称不能为空 ! ", trigger: "change" }]
+};
+export const RULES_LV2 = {
+    tag: [{ required: true, message: "所属系列名称不能为空 ! ", trigger: "change" }],
+    className: [{ required: true, message: "产品系列名不能为空 ! ", trigger: "blur" }]
+};
diff --git a/src/views/productManagement/list/edit.vue b/src/views/productManagement/list/edit.vue
index 22d914c..b1d30b3 100644
--- a/src/views/productManagement/list/edit.vue
+++ b/src/views/productManagement/list/edit.vue
@@ -4,10 +4,10 @@
     <div class="table-box">
         <div style="padding-bottom: 16px">
             <el-button @click="handleReset(dataStore, editorRef)"> 重置 </el-button>
-            <el-button type="primary" @click="handleSubmit(infoRef, imgInfoRef, dataStore)"> 提交 </el-button>
+            <el-button type="primary" @click="handleSubmit(infoRef, imgInfoRef, formRef, dataStore)"> 提交 </el-button>
         </div>
         <div class="card table-main">
-            <el-tabs v-model="activeName" class="demo-tabs">
+            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
                 <el-tab-pane label="基本信息" name="basicInfo">
                     <basicInfo ref="infoRef" :data="dataStore.basicInfoRuleForm" :options="dataStore.options" />
                 </el-tab-pane>
@@ -35,6 +35,15 @@
                         </template>
                     </FormTable>
                 </el-tab-pane>
+                <el-tab-pane label="兼容性信息" name="compatible">
+                    <rulesForm
+                        :ruleForm="dataStore.ruleForm"
+                        :formData="dataStore.formData"
+                        :rules="dataStore.rules"
+                        ref="formRef"
+                        @handleRadioGroupEmits="handleRadioGroupEmits"
+                    />
+                </el-tab-pane>
             </el-tabs>
         </div>
     </div>
@@ -43,6 +52,9 @@
 <script setup lang="ts" name="productEditIndex">
 import { ref, reactive } from "vue";
 import Editor from "@/components/Editor/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import { FORM_DATA_LV2, FORM_DATA_LV1, RULES_LV1, RULES_LV2 } from "./constant/index";
+console.log(FORM_DATA_LV2, RULES_LV2);
 import {
     getProductDetailsApi,
     getProductListApi,
@@ -67,6 +79,7 @@ import FormTable from "@/components/FormTable/index.vue";
 const $route = useRoute();
 
 const editorRef = ref<any>(null);
+const formRef = ref<any>(null);
 
 //数据集合
 const dataStore = reactive<any>({
@@ -81,7 +94,10 @@ const dataStore = reactive<any>({
     detail: "", //详情
     basicInfoRuleForm: {}, //基本信息表单数据
     options: [], //产品分类
-    attrList: [] //产品属性列表
+    attrList: [], //产品属性列表
+    ruleForm: {},
+    formData: cloneDeep(FORM_DATA_LV1),
+    rules: cloneDeep(RULES_LV1)
 });
 
 const infoRef = ref<any>(null);
@@ -169,17 +185,19 @@ const handleRelatedAdd = () => {
 };
 //相关信息及下载远程搜索
 const handleRemote = debounce((params: any) => {
-    console.log(params, "============>>>>");
     getProductList(params.query);
 }, 800);
-//产品属性接口
-// const getProductAttrs = async () => {
-//     const result = await getProductAttrsApi();
-//     if (result?.code === 0) {
-//         console.log(result.data);
-//     }
-// };
-// getProductAttrs();
+const handleTabClick = () => {
+    formRef.value.ruleFormRef.clearValidate("tag");
+};
+const handleRadioGroupEmits = (params: any) => {
+    if (params === 1) {
+        dataStore.formData = cloneDeep(FORM_DATA_LV2);
+    } else {
+        dataStore.ruleForm.className = "";
+        dataStore.formData = cloneDeep(FORM_DATA_LV1);
+    }
+};
 </script>
 
 <style scoped></style>
diff --git a/src/views/productManagement/list/utils/edit/submit.ts b/src/views/productManagement/list/utils/edit/submit.ts
index ac685e7..e0367bf 100644
--- a/src/views/productManagement/list/utils/edit/submit.ts
+++ b/src/views/productManagement/list/utils/edit/submit.ts
@@ -5,10 +5,12 @@ const WARN: any = {
     name: "产品名称不能为空 !",
     spu: "型号不能为空 !",
     category_id: "产品分类不能为空 !",
-    sort: "产品排序不能为空 !"
+    sort: "产品排序不能为空 !",
+    tag: "关联标签不能为空 !",
+    className: "产品系列名不能为空 !"
 };
 //警告
-const warnFunction = (data: any) => {
+const warnFunction = (data: any, data1: any) => {
     if (!data.name) {
         useMsg("warning", WARN["name"]);
         return false;
@@ -25,6 +27,14 @@ const warnFunction = (data: any) => {
         useMsg("warning", WARN["sort"]);
         return false;
     }
+    if (!data1.tag) {
+        useMsg("warning", WARN["tag"]);
+        return false;
+    }
+    if (data1.is_show && !data1.className) {
+        useMsg("warning", WARN["className"]);
+        return false;
+    }
     return true;
 };
 
@@ -36,8 +46,8 @@ const getProductEditUp = async (params: any) => {
         // montageImg(imgInfoRef);
     }
 };
-export const handleSubmit = async (infoRef: any, imgInfoRef: any, dataStore: any) => {
-    let is = await warnFunction(infoRef.ruleForm);
+export const handleSubmit = async (infoRef: any, imgInfoRef: any, formRef: any, dataStore: any) => {
+    let is = await warnFunction(infoRef.ruleForm, formRef.ruleForm);
     if (!is) {
         return false;
     }