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

2025-03-26

Browse Source
This commit is contained in:
yangchunlong
2025-03-26 11:00:21 +08:00
parent 927d7381b8
commit b45f4950d3
468 changed files with 54473 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/productManagement/attributeList/constant/edit.ts Normal file
View File

@@ -0,0 +1,62 @@
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;
}
export const EDIT_FORM_DATA: FormItem[] = [
{
prop: "attr_name",
placeholder: "请输入",
type: "input",
label: "属性: ",
disabled: false
},
{
prop: "propsStr",
placeholder: "请输入",
type: "input",
label: "属性值: ",
disabled: true
},
{
prop: "addAttribute",
placeholder: "请输入",
type: "input",
label: "新增属性值: "
}
];
export const ADD_FORM_DATA: FormItem[] = [
{
prop: "attr_name",
placeholder: "请输入",
type: "input",
label: "属性: "
},
{
prop: "propsStr",
placeholder: "请输入",
type: "input",
label: "属性值: ",
disabled: false
}
];
export const EDIT_RULE_FORM = {
attr_name: "", //属性
propsStr: "", //属性值
addAttribute: "" //新增
};

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

@@ -0,0 +1,5 @@
import { SEARCH_DATA, RULE_FORM } from "./search";
import { COLUMNS } from "./table";
import { RULES } from "./rules";
import { EDIT_FORM_DATA, EDIT_RULE_FORM, ADD_FORM_DATA } from "./edit";
export { SEARCH_DATA, RULE_FORM, COLUMNS, RULES, EDIT_FORM_DATA, EDIT_RULE_FORM, ADD_FORM_DATA };

4
src/views/productManagement/attributeList/constant/rules.ts Normal file
View File

@@ -0,0 +1,4 @@
export const RULES = {
attr_name: [{ required: true, message: "产品属性不能为空 ! ", trigger: "blur" }]
// attributeValue: [{ required: true, message: "产品属性值不能为空 ! ", trigger: "blur" }]
};

30
src/views/productManagement/attributeList/constant/search.ts Normal file
View File

@@ -0,0 +1,30 @@
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 SEARCH_DATA: FormItem[] = [
{
prop: "keywords",
placeholder: "请输入",
type: "input",
label: "属性: "
}
];
export const RULE_FORM = {
page: 1,
size: 50
};

33
src/views/productManagement/attributeList/constant/table.ts Normal file
View File

@@ -0,0 +1,33 @@
import { RenderScope } from "@/components/ProTable/interface";
export const COLUMNS = [
{
align: "center",
fixed: true,
label: "ID",
prop: "id"
},
{
align: "left",
label: "属性",
prop: "attr_name"
},
{
align: "left",
label: "属性值",
prop: "props",
render: (scope: RenderScope<any>): VNode | string | any => {
let arr: any = [];
if (scope.row.props.length) {
scope.row.props.forEach((item: any) => {
arr.push(item.prop_name);
});
return arr.join(",");
} else {
return;
}
}
},
{ prop: "operation", label: "操作", fixed: "right", width: 160 }
];

202
src/views/productManagement/attributeList/index.vue Normal file
View File

@@ -0,0 +1,202 @@
<!-- 属性列表 -->
<template>
<div class="table-box">
<div style="padding-bottom: 16px">
<el-button type="primary" @click="handleAdd"> 添加 </el-button>
</div>
<ProTable
ref="proTableRef"
:formData="dataStore.formData"
:columns="dataStore.columns"
:request-api="getProductAttrListApi"
:init-param="dataStore.initParam"
>
<template #operation="scope">
<el-button size="small" type="primary" @click="handleBtnClick(scope.row)" v-if="scope.row.id !== 1"
>编辑</el-button
>
</template>
</ProTable>
<!-- :show-close="false" -->
<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"
/>
</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="productAttributeListIndex">
import ProTable from "@/components/ProTable/index.vue";
import rulesForm from "@/components/rulesForm/index.vue";
import qs from "qs";
//接口
import {
getProductAttrListApi,
getProductAttrDetailsApi,
getProductAttrUpApi,
getProductAttrAddApi
} from "@/api/modules/productAttributeList";
//深拷贝方法
import { cloneDeep } from "lodash-es";
//表格和搜索條件
import { RULE_FORM, COLUMNS, RULES, SEARCH_DATA, EDIT_FORM_DATA, EDIT_RULE_FORM, ADD_FORM_DATA } from "./constant/index";
import { useMsg } from "@/hooks/useMsg";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref<any>(null);
// 数据源
const dataStore = reactive<any>({
title: "编辑产品属性",
rules: cloneDeep(RULES), //抽屉表单验证
row: {},
editRuleForm: cloneDeep(EDIT_RULE_FORM),
editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
visible: false, //抽屉控制
columns: COLUMNS, //列表配置项
initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
ruleForm: cloneDeep(RULE_FORM), // 搜索參數
formData: SEARCH_DATA //搜索配置项
});
const formRef: any = ref(null);
//设置表单
const handleSetRuleForm = () => {
dataStore.editRuleForm.attributeKey = dataStore.row.productName;
dataStore.editRuleForm.attributeValue = dataStore.row.model;
};
//编辑
const handleBtnClick = (row: any) => {
dataStore.visible = true;
dataStore.title = "编辑产品属性";
dataStore.editFormData = cloneDeep(EDIT_FORM_DATA);
dataStore.row = cloneDeep(row);
dataStore.editFormData[0].disabled = true;
handleSetRuleForm();
getProductAttrDetails(row.id);
};
//更新
const getProductAttrUp = async () => {
let obj = {
prop_name: dataStore.editRuleForm.addAttribute,
prop_value: dataStore.editRuleForm.addAttribute
};
if (obj.prop_name) {
dataStore.editRuleForm.props.push(obj);
}
const result = await getProductAttrUpApi(dataStore.editRuleForm);
if (result?.code === 0) {
useMsg("success", result?.msg);
proTableRef?.value?.getTableList();
dataStore.visible = false;
handleClear();
// getProductAttrDetails(dataStore.editRuleForm.id);
}
};
//添加
const getProductAttrAdd = async () => {
let params = {
attr_name: dataStore.editRuleForm.attr_name,
props: JSON.stringify([
{
prop_name: dataStore.editRuleForm.propsStr,
prop_value: dataStore.editRuleForm.propsStr
}
])
};
const result = await getProductAttrAddApi(qs.stringify(params));
if (result?.code === 0) {
useMsg("success", result?.msg);
proTableRef?.value?.getTableList();
dataStore.visible = false;
handleClear();
}
};
//详情
const getProductAttrDetails = async (id: any) => {
const result = await getProductAttrDetailsApi(id);
if (result?.code === 0) {
dataStore.editRuleForm = cloneDeep(result?.data);
if (dataStore.editRuleForm.props.length) {
let arr: any = [];
dataStore.editRuleForm.props.forEach((item: any) => {
arr.push(item.prop_name);
});
dataStore.editRuleForm.propsStr = arr.length ? arr.join(",") : [];
}
}
};
//清空表单数据
const handleClear = () => {
for (let key in dataStore.editRuleForm) {
dataStore.editRuleForm[key] = "";
}
};
//添加
const handleAdd = () => {
dataStore.visible = true;
dataStore.title = "添加产品属性";
dataStore.editFormData = cloneDeep(ADD_FORM_DATA);
handleClear();
};
//重置验证
const resetFields = () => {
if (!formRef.value!.ruleFormRef) return;
formRef!.value!.ruleFormRef.resetFields();
};
//抽屉关闭前的钩子
const handleBeforeClone = () => {
dataStore.visible = false;
dataStore.editRuleForm.addAttribute = "";
resetFields();
handleClear();
};
//重置按钮
const handleResetClick = () => {
if (dataStore.title === "添加产品属性") {
dataStore.editRuleForm.addAttribute = "";
handleSetRuleForm();
resetFields();
} else {
getProductAttrDetails(dataStore.row.id);
}
};
//确认
const handleConfirmClick = async () => {
if (!formRef.value!.ruleFormRef) return;
formRef!.value!.ruleFormRef!.validate((valid: any) => {
if (valid) {
dataStore.title === "添加产品属性" ? getProductAttrAdd() : getProductAttrUp();
} else {
console.log("error submit!");
return false;
}
});
};
</script>
<style scoped></style>

3
src/views/productManagement/attributeList/utils/edit/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { handleSubmit } from "./submit";
import { handleReset } from "./reset";
export { handleSubmit, handleReset };

7
src/views/productManagement/attributeList/utils/edit/reset.ts Normal file
View File

@@ -0,0 +1,7 @@
import { cloneDeep } from "lodash-es";
import { messageBox } from "@/utils/messageBox";
export const handleReset = (dataStore: any) => {
messageBox("该操作会将数据重置为初始状态", () => {
dataStore.basicInfoRuleForm = cloneDeep(dataStore.resetBasicInfoRuleForm);
});
};

34
src/views/productManagement/attributeList/utils/edit/submit.ts Normal file
View File

@@ -0,0 +1,34 @@
import { useMsg } from "@/hooks/useMsg";
const WARN: any = {
name: "产品名称不能为空 !",
model: "型号不能为空 !",
type: "产品分类不能为空 !",
sort: "产品排序不能为空 !"
};
const warnFunction = (data: any) => {
if (!data.name) {
useMsg("warning", WARN["name"]);
return false;
}
if (!data.model) {
useMsg("warning", WARN["model"]);
return false;
}
if (!data.type) {
useMsg("warning", WARN["type"]);
return false;
}
if (!data.name) {
useMsg("warning", WARN["sort"]);
return false;
}
return true;
};
export const handleSubmit = async (infoRef: any) => {
console.log(infoRef.ruleForm, "============ruleForm===========");
let is = await warnFunction(infoRef.ruleForm);
if (!is) {
return false;
}
};

16
src/views/productManagement/attributeList/utils/messageBox.ts Normal file
View File

@@ -0,0 +1,16 @@
import { ElMessageBox } from "element-plus";
export const messageBox = (message: any, callback: any) => {
ElMessageBox.confirm(message, "警告", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
console.log("132323");
callback && callback();
})
.catch(() => {
console.log("取消323232");
});
};