feat: 🚀 接口联调

src/api/modules/compatibility.ts

@@ -0,0 +1,46 @@
+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);
+};
+//配件類型
+export const getPartsListApi = (params: any) => {
+    return http.get<any>(`${BASE}/parts/list`, params);
+};
+//產品類型
+export const getTypesListApi = (params: any) => {
+    return http.get<any>(`${BASE}/types/list`, params);
+};

src/components.d.ts

@@ -12,11 +12,6 @@ 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 +33,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"];
@@ -49,8 +43,6 @@ declare module "vue" {
         ElTabPane: typeof import("element-plus/es")["ElTabPane"];
         ElTabs: typeof import("element-plus/es")["ElTabs"];
         ElTag: typeof import("element-plus/es")["ElTag"];
-        ElTooltip: typeof import("element-plus/es")["ElTooltip"];
-        ElTree: typeof import("element-plus/es")["ElTree"];
         ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
         ElUpload: typeof import("element-plus/es")["ElUpload"];
         IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];

src/views/productManagement/compatibility/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;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "type_id",
+        placeholder: "请选择",
+        type: "select",
+        label: "产品类型: ",
+        options: []
+    },
+    {
+        prop: "brand_name",
+        placeholder: "请输入",
+        type: "input",
+        label: "品牌: "
+    },
+    {
+        prop: "model",
+        placeholder: "请输入",
+        type: "input",
+        label: "型号: "
+    },
+
+    {
+        prop: "part_id",
+        placeholder: "请选择",
+        type: "select",
+        label: "配件类型: ",
+        options: []
+    },
+    {
+        prop: "level_name",
+        placeholder: "请输入",
+        type: "input",
+        label: "级别: "
+    },
+    {
+        prop: "spec_name",
+        placeholder: "请输入",
+        type: "input",
+        label: "规格: "
+    },
+    {
+        prop: "series_name",
+        placeholder: "请输入",
+        type: "input",
+        label: "系列: "
+    },
+    {
+        prop: "capacity",
+        placeholder: "请输入",
+        type: "input",
+        label: "容量: "
+    },
+    {
+        prop: "frequency",
+        placeholder: "请输入",
+        type: "input",
+        label: "频率: "
+    },
+    {
+        prop: "compatible_models",
+        placeholder: "请输入(多个以英文逗号分隔)",
+        type: "input",
+        label: "兼容型号: "
+    },
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "排序: "
+    },
+    {
+        prop: "disabled",
+        placeholder: "请输入",
+        type: "radio",
+        label: "是否启用: ",
+        options: [
+            {
+                label: "是",
+                value: 1
+            },
+            {
+                label: "否",
+                value: 0
+            }
+        ]
+    }
+];
+export const EDIT_RULE_FORM = {
+    sort: 1
+};
+// editRuleForm: {},
+//editFormData: [],

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 };

src/views/productManagement/compatibility/constant/rules.ts

@@ -0,0 +1,8 @@
+export const RULES = {
+    type_id: [{ required: true, message: "产品类型不能为空 ! ", trigger: "change" }],
+    brand_name: [{ required: true, message: "品牌不能为空 ! ", trigger: "blur" }],
+    model: [{ required: true, message: "型号不能为空 ! ", trigger: "blur" }],
+    part_id: [{ required: true, message: "配件类型不能为空 ! ", trigger: "change" }],
+    compatible_models: [{ required: true, message: "型号不能为空 ! ", trigger: "blur" }],
+    sort: [{ required: true, message: "视频排序不能为空 ! ", trigger: "blur" }]
+};

src/views/productManagement/compatibility/constant/search.ts

@@ -0,0 +1,61 @@
+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: "compatible_model",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "兼容型号: "
+    },
+    {
+        prop: "model",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "型号: "
+    },
+    {
+        prop: "type_id",
+        placeholder: "请输入",
+        type: "select",
+        // isArray: true,
+        label: "产品类型: ",
+        options: []
+    },
+    {
+        prop: "part_id",
+        placeholder: "请输入",
+        type: "select",
+        // isArray: true,
+        label: "配件类型: ",
+        options: []
+    },
+    {
+        prop: "brand_name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "品牌: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/productManagement/compatibility/constant/table.ts

@@ -0,0 +1,91 @@
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+
+    {
+        align: "left",
+        label: "产品类型",
+        prop: "type_name",
+        fixed: true,
+        width: 200
+    },
+    {
+        align: "left",
+        label: "品牌",
+        prop: "brand_name",
+        width: 200
+    },
+    {
+        align: "left",
+        label: "型号",
+        prop: "model",
+        width: 200
+    },
+    {
+        align: "left",
+        label: "配件类型",
+        prop: "part_name",
+        width: 200
+    },
+    {
+        align: "left",
+        label: "级别",
+        prop: "level_name"
+    },
+    {
+        align: "left",
+        label: "规格",
+        prop: "spec_name",
+        width: 200
+    },
+    {
+        align: "left",
+        label: "系列",
+        prop: "series_name",
+        width: 200
+    },
+    {
+        align: "left",
+        label: "容量",
+        prop: "capacity"
+    },
+    {
+        align: "left",
+        label: "频率",
+        prop: "frequency"
+    },
+    {
+        align: "left",
+        label: "兼容型号",
+        prop: "compatible_models",
+        width: 200
+    },
+    {
+        align: "left",
+        label: "点赞数",
+        prop: "like_count"
+    },
+    {
+        align: "left",
+        label: "排序",
+        prop: "sort"
+    },
+    {
+        align: "left",
+        label: "创建时间",
+        prop: "created_at",
+        width: 200
+    },
+    {
+        align: "left",
+        label: "更新时间",
+        prop: "updated_at",
+        width: 200
+    },
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/productManagement/compatibility/index.vue

@@ -0,0 +1,252 @@
+<!-- 列表 -->
+<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>
+            <el-button type="primary" @click="handleExport"> 导出 </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,
+    getPartsListApi,
+    getTypesListApi
+} 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 getPartsList = async (id: any) => {
+    const result = await getPartsListApi(id);
+    if (result?.code === 0) {
+        let data = [];
+        result?.data?.forEach((item: any) => {
+            data.push({ value: item.id, label: item.name });
+        });
+        dataStore.formData[3].options = data;
+        dataStore.editFormData[3].options = data;
+    }
+};
+getPartsList();
+//產品類型
+const getTypesList = async (id: any) => {
+    const result = await getTypesListApi(id);
+    if (result?.code === 0) {
+        let data = [];
+        result?.data?.forEach((item: any) => {
+            data.push({ value: item.id, label: item.name });
+        });
+        dataStore.formData[2].options = data;
+        dataStore.editFormData[0].options = data;
+    }
+};
+getTypesList();
+
+//抽屉确认
+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>