yangchunlong/orico-officialWebsite-ts-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 配件兼容型

Browse Source
This commit is contained in:
yangchunlong
2026-07-07 14:37:27 +08:00
parent 109a8264fc
commit d5512ad8d3
20 changed files with 1061 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components.d.ts vendored
View File

@@ -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"];

18
src/components/rulesForm/index.vue
View File

@@ -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

55
src/views/productManagement/accessoryType/constant/edit.ts Normal file
View File

@@ -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: [],

5
src/views/productManagement/accessoryType/constant/index.ts Normal file
View File

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

5
src/views/productManagement/accessoryType/constant/rules.ts Normal file
View File

@@ -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" }]
};

31
src/views/productManagement/accessoryType/constant/search.ts Normal file
View File

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

39
src/views/productManagement/accessoryType/constant/table.ts Normal file
View File

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

262
src/views/productManagement/accessoryType/index.vue Normal file
View File

@@ -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>

108
src/views/productManagement/compatibility/list/constant/edit.ts Normal file
View File

@@ -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: [],

5
src/views/productManagement/compatibility/list/constant/index.ts Normal file
View File

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

5
src/views/productManagement/compatibility/list/constant/rules.ts Normal file
View File

@@ -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" }]
};

36
src/views/productManagement/compatibility/list/constant/search.ts Normal file
View File

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

75
src/views/productManagement/compatibility/list/constant/table.ts Normal file
View File

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

262
src/views/productManagement/compatibility/list/index.vue Normal file
View File

@@ -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>

87
src/views/productManagement/list/constant/form.ts Normal file
View File

@@ -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: "兼容性说明"
}
];

16
src/views/productManagement/list/constant/index.ts
View File

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

2
src/views/productManagement/list/constant/ruleForm.ts Normal file
View File

@@ -0,0 +1,2 @@
export const RULE_FORM_LV1: any = {};
export const RULE_FORM_LV2: any = {};

7
src/views/productManagement/list/constant/rules.ts Normal file
View File

@@ -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" }]
};

42
src/views/productManagement/list/edit.vue
View File

@@ -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>

18
src/views/productManagement/list/utils/edit/submit.ts
View File

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