商品中心模块功能开发对接后台
This commit is contained in:
2090205686@qq.com
parent
e3ced12a92
commit
f70341a24a
@ -6,7 +6,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="icon" href="/src/assets/logo/yunying.png">
|
||||
<title>后台管理系统</title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
|
||||
@ -1,94 +1,157 @@
|
||||
import request from '@/utils/request'
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 获取商品管理列表
|
||||
export function getGoodManageInfo(query) {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/getGoodManage',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
url: "/goods/goodInfoManage/getGoodManage",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
// 获取商品列表页顶部tab中的数据
|
||||
export function getGoodManageCount(query) {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/getGoodManageCount',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
url: "/goods/goodInfoManage/getGoodManageCount",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取商品分类列表
|
||||
export function getGoodType(query) {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/goodType',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
url: "/goods/goodInfoManage/goodType",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 新商品发布
|
||||
// 新增商品
|
||||
export function goodAdd(data) {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/goodSave',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
url: "/goods/goodInfoManage/goodSave",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 编辑商品发布
|
||||
// 编辑商品
|
||||
export function goodEdit(data) {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/goodEdit',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
url: "/goods/goodInfoManage/goodEdit",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 商品删除
|
||||
export function goodDelete(id) {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/deleteGoodInfo/id=' + id,
|
||||
method: 'delete',
|
||||
})
|
||||
url: "/goods/goodInfoManage/deleteGoodInfo?id=" + id,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
|
||||
// 商品上架下架
|
||||
export function goodUpAndDown(data) {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/goodOnSale',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
url: "/goods/goodInfoManage/goodOnSale",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取商品信息（id）
|
||||
export function getGoodInfo(id) {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/getGoodInfo/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
url: "/goods/goodInfoManage/getGoodInfo/" + id,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 获取商品优惠信息配置项
|
||||
export function getActiveInfos() {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/getActiveInfos',
|
||||
method: 'get'
|
||||
})
|
||||
url: "/goods/goodInfoManage/getActiveInfos",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获取商品分类列表
|
||||
export function getGoodCategoryInfo(query) {
|
||||
return request({
|
||||
url: '/goods/business/category/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
url: "/goods/business/category/list",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
// 新增商品分类
|
||||
export function categoryAdd(data) {
|
||||
return request({
|
||||
url: '/goods/business/category/add',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
url: "/goods/business/category/add",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 编辑商品分类
|
||||
export function categoryEdit(data) {
|
||||
return request({
|
||||
url: "/goods/business/category/edit",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 商品分类删除
|
||||
export function categoryRemove(data) {
|
||||
const formData = new FormData();
|
||||
// 将data对象的每个属性添加到FormData
|
||||
Object.keys(data).forEach((key) => {
|
||||
formData.append(key, data[key]);
|
||||
});
|
||||
return request({
|
||||
url: "/goods/business/category/remove",
|
||||
method: "post",
|
||||
data: formData,
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
}
|
||||
// 启用或禁用商品分类
|
||||
export function enableAndDisableCategory(data) {
|
||||
return request({
|
||||
url: "/goods/business/category/add",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取违禁物品列表
|
||||
export function getViolateGoodPage(query) {
|
||||
return request({
|
||||
url: "/goods/violate/getViolateGoodPage",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
// 违禁物品新增
|
||||
export function violateGoodSave(data) {
|
||||
return request({
|
||||
url: "/goods/violate/violateGoodSave",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 违禁物品编辑
|
||||
export function violateGoodEdit(data) {
|
||||
return request({
|
||||
url: "/goods/violate/violateGoodEdit",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 违禁物品删除
|
||||
export function deleteContraband(id) {
|
||||
return request({
|
||||
url: "/goods/violate/deleteViolateGoodInfo?id=" + id,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
|
||||
@ -5,165 +5,86 @@
|
||||
<div ref="searchBarRef" class="search-box">
|
||||
<div class="search-bar">
|
||||
<div class="search-bar-left">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
:label-width="'auto'"
|
||||
>
|
||||
<el-form-item label="物品名称" prop="contrabandName">
|
||||
<el-input
|
||||
v-model="formInline.contrabandName"
|
||||
placeholder="请输入物品名称"
|
||||
clearable
|
||||
/>
|
||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||
<el-form-item label="物品名称" prop="violateGoodName">
|
||||
<el-input v-model="formInline.violateGoodName" placeholder="请输入物品名称" clearable />
|
||||
</el-form-item>
|
||||
<br>
|
||||
<el-form-item
|
||||
label="添加时间"
|
||||
prop="startDate"
|
||||
style="margin-right: 0"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formInline.startDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期"
|
||||
clearable
|
||||
:disabled-date="disableStartDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<span
|
||||
style="width: 30px; text-align: center; display: inline-block"
|
||||
>
|
||||
<el-form-item label="添加时间" prop="startDate" style="margin-right: 0">
|
||||
<el-date-picker v-model="formInline.startDate" type="date" value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期" clearable :disabled-date="disableStartDate" style="width: 160px" />
|
||||
<span style="width: 30px; text-align: center; display: inline-block">
|
||||
-
|
||||
</span>
|
||||
<el-date-picker
|
||||
v-model="formInline.endDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择截止日期"
|
||||
clearable
|
||||
:disabled-date="disableEndDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<el-date-picker v-model="formInline.endDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择截止日期"
|
||||
clearable :disabled-date="disableEndDate" style="width: 160px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-bar-right">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
style="margin: 16px 0 0 0"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
||||
<div class="table-toolbar">
|
||||
<el-button
|
||||
icon="delete"
|
||||
@click="batchDelete"
|
||||
:disabled="btnStatus"
|
||||
style="margin-right: 10px"
|
||||
>批量删除</el-button
|
||||
>
|
||||
<router-link to="/goods/addGoods">
|
||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
||||
>添加分类</el-button
|
||||
>
|
||||
</router-link>
|
||||
<el-button icon="delete" @click="batchDelete" :disabled="btnStatus" style="margin-right: 0px">批量删除</el-button>
|
||||
<el-button type="primary" icon="plus" @click="addItem">添加物品</el-button>
|
||||
</div>
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
:loading="tableLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
:showSort="true"
|
||||
>
|
||||
<tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass" @page-change="handlePaginationChange" :loading="tableLoading"
|
||||
@selection-change="handleSelectionChange" :total="tableTotal" :current-page="formInline.current"
|
||||
:page-size="formInline.size" :showSort="true">
|
||||
<!-- 自定义-状态 -->
|
||||
<template #goodsUrl="slotProps">
|
||||
<div class="table-cell-img-box">
|
||||
<img
|
||||
:src="slotProps.row.goodsUrl"
|
||||
class="table-cell-img"
|
||||
alt=""
|
||||
/>
|
||||
<img :src="slotProps.row.goodsUrl" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-tooltip effect="dark" placement="bottom-end">
|
||||
<template #content>
|
||||
<div class="custom-tooltip-content">
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>
|
||||
<View />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="toUpload(slotProps.row)"
|
||||
>
|
||||
<Upload />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="toDownload(slotProps.row)"
|
||||
>
|
||||
<Download />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleEdit(slotProps.row)"
|
||||
>
|
||||
<Edit />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleDelete(slotProps.row)"
|
||||
>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon>
|
||||
<More />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-button text class="el-button-custom" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||
<el-button text class="el-button-delete" @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加物品 -->
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
|
||||
<el-form :model="dialogForm" :label-width="'110'" :rules="dialogFormRules" ref="dialogRef">
|
||||
<el-form-item label="违禁物品名称" prop="violateGoodName">
|
||||
<el-input v-model="dialogForm.violateGoodName" autocomplete="off" placeholder="请输入违禁物品名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="违禁物品参数" prop="goodParameter">
|
||||
<el-input v-model="dialogForm.goodParameter" autocomplete="off" placeholder="请输入违禁物品参数" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="onSaveCategory">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="cancelDialog">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import Mock from "mockjs";
|
||||
import { getGoodManageInfo } from "@/api/goods/info";
|
||||
import { getViolateGoodPage, violateGoodSave, violateGoodEdit, deleteContraband } from "@/api/goods/info";
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const formInline = reactive({
|
||||
contrabandName: "",
|
||||
violateGoodName: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
current: 1,
|
||||
@ -186,9 +107,7 @@ const disableEndDate = (time) => {
|
||||
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
console.log("submit!");
|
||||
formInline.current = 1;
|
||||
console.log(formInline);
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
@ -208,8 +127,8 @@ let nowClickRow = ref({});
|
||||
const columns = ref([]);
|
||||
const columns1 = ref([
|
||||
{ prop: "id", label: "ID" },
|
||||
{ prop: "contrabandName", label: "违禁物品名称" },
|
||||
{ prop: "contrabandParameter", label: "违禁物品参数" },
|
||||
{ prop: "violateGoodName", label: "违禁物品名称" },
|
||||
{ prop: "goodParameter", label: "违禁物品参数" },
|
||||
{ prop: "createTime", label: "创建时间" },
|
||||
{ prop: "action", label: "操作", slotName: "action" },
|
||||
]);
|
||||
@ -220,8 +139,8 @@ const generateMockData = () => {
|
||||
"list|10": [
|
||||
{
|
||||
"id|+1": 10000,
|
||||
contrabandName: '@pick(["毒品", "炸药", "血腥"])', //分类名称
|
||||
contrabandParameter: '@pick(["手动编辑", "图片上传"])', //状态
|
||||
violateGoodName: '@pick(["毒品", "炸药", "血腥"])', //分类名称
|
||||
goodParameter: '@pick(["手动编辑", "图片上传"])', //状态
|
||||
createTime: "@datetime", //添加时间
|
||||
},
|
||||
],
|
||||
@ -230,18 +149,17 @@ const generateMockData = () => {
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
tableData.value = generateMockData();
|
||||
tableTotal.value = tableData.value.length;
|
||||
// try {
|
||||
// let response = await getGoodManageInfo(formInline);
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// tableData.value = response.data.records;
|
||||
// tableTotal.value = response.data.total;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
// tableData.value = generateMockData();
|
||||
// tableTotal.value = tableData.value.length;
|
||||
try {
|
||||
let response = await getViolateGoodPage(formInline);
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data.records;
|
||||
tableTotal.value = response.data.total;
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
tableLoading.value = false;
|
||||
};
|
||||
|
||||
@ -251,7 +169,6 @@ const getHeaderClass = ({ column }) => {
|
||||
};
|
||||
// 分页变化
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
console.log("分页变化:", page, pageSize);
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
// 这里可以调用API获取新数据
|
||||
@ -262,32 +179,107 @@ const handleSelectionChange = (selection, ids) => {
|
||||
console.log("选中项:", selection, ids);
|
||||
selectedIds.value = ids;
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const seeDetails = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要查看详情的行:", row);
|
||||
};
|
||||
const toUpload = () => {
|
||||
console.log("向上移动:");
|
||||
};
|
||||
const toDownload = () => {
|
||||
console.log("向下移动:");
|
||||
};
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
nowClickRow.value = row;
|
||||
dialogTitle.value = "编辑违禁物品";
|
||||
dialogFormVisible.value = true;
|
||||
console.log("要编辑的行:", row);
|
||||
dialogForm.id = row.id;
|
||||
dialogForm.violateGoodName = row.violateGoodName;
|
||||
dialogForm.goodParameter = row.goodParameter;
|
||||
};
|
||||
// 删除操作
|
||||
const handleDelete = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要删除的行:", row);
|
||||
onDelete(row.id)
|
||||
};
|
||||
// 批量删除
|
||||
const batchDelete = () => {
|
||||
console.log("要删除的行:", selectedIds.value);
|
||||
onDelete(selectedIds.value.join(","))
|
||||
};
|
||||
const onDelete = async (param) => {
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let res = await deleteContraband(param);
|
||||
tableLoading.value = false;
|
||||
if (res.code == 200) {
|
||||
onsubmit();
|
||||
ElMessage.success("删除成功");
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref("添加违禁物品");
|
||||
const dialogForm = reactive({
|
||||
violateGoodName: "",
|
||||
goodParameter: "",
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
violateGoodName: [
|
||||
{ required: true, message: "请输入违禁物品名称", trigger: "blur" },
|
||||
{ min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
|
||||
],
|
||||
goodParameter: [
|
||||
{ required: true, message: "请输入违禁物品参数", trigger: "blur" },
|
||||
{ min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
|
||||
],
|
||||
});
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
label: "name", // 选项标签字段名
|
||||
value: "id", // 选项值字段名
|
||||
children: "children", // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: "hover",
|
||||
});
|
||||
const onSaveCategory = () => {
|
||||
console.log(dialogForm);
|
||||
dialogRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
proxy.$modal.loading("正在保存...")
|
||||
let response;
|
||||
if (dialogTitle.value == "添加违禁物品") {
|
||||
response = await violateGoodSave(dialogForm);
|
||||
} else {
|
||||
response = await violateGoodEdit(dialogForm);
|
||||
}
|
||||
proxy.$modal.closeLoading()
|
||||
if (response.code == 200) {
|
||||
cancelDialog();
|
||||
onSubmit();
|
||||
if (dialogTitle.value == "添加违禁物品") {
|
||||
ElMessage.success("添加成功!");
|
||||
} else {
|
||||
ElMessage.success("编辑成功!");
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
proxy.$modal.closeLoading()
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const addItem = () => {
|
||||
dialogTitle.value = "添加违禁物品";
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const cancelDialog = () => {
|
||||
dialogRef.value.resetFields();
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
|
||||
const titleRef = ref(null);
|
||||
const searchBarRef = ref(null);
|
||||
@ -307,7 +299,6 @@ const calculateTableHeight = () => {
|
||||
// 最终计算
|
||||
tableViewportHeight.value =
|
||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
||||
// console.log(tableViewportHeight.value);
|
||||
};
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
|
||||
@ -5,180 +5,76 @@
|
||||
<div ref="searchBarRef" class="search-box">
|
||||
<div class="search-bar">
|
||||
<div class="search-bar-left">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
:label-width="'auto'"
|
||||
>
|
||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input
|
||||
v-model="formInline.name"
|
||||
placeholder="请输入分类名称"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="formInline.name" placeholder="请输入分类名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="formInline.status"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
/>
|
||||
<el-select v-model="formInline.status" placeholder="请选择" clearable>
|
||||
<el-option v-for="item in statusList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<br />
|
||||
<el-form-item
|
||||
label="添加时间"
|
||||
prop="startDate"
|
||||
style="margin-right: 0"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formInline.startDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期"
|
||||
clearable
|
||||
:disabled-date="disableStartDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<span
|
||||
style="width: 30px; text-align: center; display: inline-block"
|
||||
>
|
||||
<el-form-item label="添加时间" prop="startDate" style="margin-right: 0">
|
||||
<el-date-picker v-model="formInline.startDate" type="date" value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期" clearable :disabled-date="disableStartDate" style="width: 160px" />
|
||||
<span style="width: 30px; text-align: center; display: inline-block">
|
||||
-
|
||||
</span>
|
||||
<el-date-picker
|
||||
v-model="formInline.endDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择截止日期"
|
||||
clearable
|
||||
:disabled-date="disableEndDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<el-date-picker v-model="formInline.endDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择截止日期"
|
||||
clearable :disabled-date="disableEndDate" style="width: 160px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-bar-right">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
style="margin: 16px 0 0 0"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
||||
<div class="table-toolbar">
|
||||
<el-button
|
||||
icon="delete"
|
||||
@click="batchDelete"
|
||||
:disabled="btnStatus"
|
||||
style="margin-right: 0px"
|
||||
>批量删除</el-button
|
||||
>
|
||||
<el-button type="primary" icon="plus" @click="addCategory"
|
||||
>添加分类</el-button
|
||||
>
|
||||
<el-button icon="delete" @click="batchDelete" :disabled="btnStatus" style="margin-right: 0px">批量删除</el-button>
|
||||
<el-button type="primary" icon="plus" @click="addCategory">添加分类</el-button>
|
||||
</div>
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
:loading="tableLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
:showSort="true"
|
||||
:rowkey="'goodId'"
|
||||
>
|
||||
<tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass" @page-change="handlePaginationChange" :loading="tableLoading"
|
||||
@selection-change="handleSelectionChange" :total="tableTotal" :current-page="formInline.current"
|
||||
:page-size="formInline.size" :showSort="true">
|
||||
<!-- 自定义-状态 -->
|
||||
<template #goodsUrl="slotProps">
|
||||
<div class="table-cell-img-box">
|
||||
<img
|
||||
:src="slotProps.row.goodsUrl"
|
||||
class="table-cell-img"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<template #level="slotProps">
|
||||
{{ slotProps.row.level }}级分类
|
||||
</template>
|
||||
|
||||
<!-- 自定义-状态 -->
|
||||
<template #status="slotProps">
|
||||
<span v-if="slotProps.row.status == 1" class="color-green"
|
||||
>已启用</span
|
||||
>
|
||||
<span v-if="slotProps.row.status == 1" class="color-green">已启用</span>
|
||||
<span v-else class="color-gray">未启用</span>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-button
|
||||
text
|
||||
v-if="slotProps.row.status == 2"
|
||||
class="el-button-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>启用</el-button
|
||||
>
|
||||
<el-button
|
||||
text
|
||||
v-if="slotProps.row.status == 1"
|
||||
class="el-button-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>禁用</el-button
|
||||
>
|
||||
<el-button
|
||||
text
|
||||
class="el-button-custom"
|
||||
@click="handleEdit(slotProps.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
text
|
||||
class="el-button-delete"
|
||||
@click="handleDelete(slotProps.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button text v-if="slotProps.row.status == 2" class="el-button-custom"
|
||||
@click="enableAndDisable(slotProps.row, 1)">启用</el-button>
|
||||
<el-button text v-if="slotProps.row.status == 1" class="el-button-custom"
|
||||
@click="enableAndDisable(slotProps.row, 2)">禁用</el-button>
|
||||
<el-button text class="el-button-custom" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||
<el-button text class="el-button-delete" @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加分类 -->
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
|
||||
<el-form
|
||||
:model="dialogForm"
|
||||
:label-width="'80'"
|
||||
:rules="dialogFormRules"
|
||||
ref="dialogRef"
|
||||
>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500" :close-on-click-modal="false">
|
||||
<el-form :model="dialogForm" :label-width="'80'" :rules="dialogFormRules" ref="dialogRef">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入分类名称"/>
|
||||
<el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="父级分类" prop="parentId">
|
||||
<el-cascader
|
||||
v-model="dialogForm.parentId"
|
||||
:options="goodsOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择父级分类"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
<el-cascader v-model="dialogForm.parentId" :options="goodsOptions" :props="cascaderProps"
|
||||
placeholder="请选择父级分类" clearable style="width: 100%" @change="handleCascaderChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否禁用" prop="status" required>
|
||||
<el-radio-group v-model="dialogForm.status" style="margin-top: -3px">
|
||||
@ -190,7 +86,7 @@
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="onSaveCategory">
|
||||
确认添加
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="cancelDialog">取消</el-button>
|
||||
</div>
|
||||
@ -202,9 +98,14 @@
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import Mock from "mockjs";
|
||||
import { getGoodCategoryInfo, getGoodType, categoryAdd } from "@/api/goods/info";
|
||||
import {
|
||||
getGoodCategoryInfo,
|
||||
getGoodType,
|
||||
categoryAdd, categoryEdit,
|
||||
categoryRemove,enableAndDisableCategory
|
||||
} from "@/api/goods/info";
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const formInline = reactive({
|
||||
name: "",
|
||||
@ -235,10 +136,8 @@ const disableEndDate = (time) => {
|
||||
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
console.log("submit!");
|
||||
formInline.current = 1;
|
||||
formInline.status = formInline.status == undefined ? "" : formInline.status;
|
||||
console.log(formInline);
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
@ -257,8 +156,9 @@ let nowClickRow = ref({});
|
||||
// 列配置
|
||||
const columns = ref([]);
|
||||
const columns1 = ref([
|
||||
{ prop: "id", label: "ID" },
|
||||
{ prop: "name", label: "类别" },
|
||||
// { prop: "id", label: "ID" },
|
||||
{ prop: "name", label: "类别名称" },
|
||||
{ prop: "level", label: "分类级别", slotName: "level" },
|
||||
{ prop: "createTime", label: "添加时间" },
|
||||
{ prop: "status", label: "状态", slotName: "status" },
|
||||
{ prop: "action", label: "操作", slotName: "action", width: 150 },
|
||||
@ -296,6 +196,7 @@ const generateMockData = () => {
|
||||
name: '@pick(["种子", "化肥", "农药"])', //分类名称
|
||||
createTime: "@datetime", //添加时间
|
||||
status: "@pick([1, 2])", //状态
|
||||
level: "@pick([1, 2, 3])", //状态
|
||||
},
|
||||
],
|
||||
}).list;
|
||||
@ -307,13 +208,12 @@ const loadData = async () => {
|
||||
// tableTotal.value = tableData.value.length;
|
||||
try {
|
||||
let response = await getGoodCategoryInfo(formInline);
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data.records;
|
||||
tableTotal.value = response.data.total;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
tableLoading.value = false;
|
||||
};
|
||||
@ -324,7 +224,6 @@ const getHeaderClass = ({ column }) => {
|
||||
};
|
||||
// 分页变化
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
console.log("分页变化:", page, pageSize);
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
// 这里可以调用API获取新数据
|
||||
@ -332,28 +231,67 @@ const handlePaginationChange = ({ page, pageSize }) => {
|
||||
};
|
||||
// 多选框变化
|
||||
const handleSelectionChange = (selection, ids) => {
|
||||
console.log("选中项:", selection, ids);
|
||||
selectedIds.value = ids;
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const seeDetails = (row) => {
|
||||
// 启用禁用
|
||||
const enableAndDisable = async (row, num) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要查看详情的行:", row);
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let res = await enableAndDisableCategory({
|
||||
id: row.id,
|
||||
status: num,
|
||||
});
|
||||
tableLoading.value = false;
|
||||
if (res.code == 200) {
|
||||
onSubmit();
|
||||
ElMessage.success(res.message);
|
||||
} else {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
};
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要编辑的行:", row);
|
||||
dialogTitle.value = "编辑分类";
|
||||
dialogFormVisible.value = true;
|
||||
getGoodTypeList();
|
||||
dialogForm.id = row.id;
|
||||
dialogForm.type = row.type;
|
||||
dialogForm.name = row.name;
|
||||
dialogForm.level = row.level;
|
||||
dialogForm.parentId = row.parentId;
|
||||
dialogForm.status = row.status.toString();
|
||||
};
|
||||
// 删除操作
|
||||
const handleDelete = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要删除的行:", row);
|
||||
deleteGoods(row.id);
|
||||
};
|
||||
// 批量删除
|
||||
const batchDelete = () => {
|
||||
console.log("要删除的行:", selectedIds.value);
|
||||
deleteGoods(selectedIds.value.join(","));
|
||||
};
|
||||
const deleteGoods = async (ids) => {
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let res = await categoryRemove({ id: ids });
|
||||
tableLoading.value = false;
|
||||
if (res.code == 200) {
|
||||
onSubmit();
|
||||
ElMessage.success("删除成功");
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
@ -363,7 +301,7 @@ const dialogForm = reactive({
|
||||
type: null, //分类类型归属，类型1->农资交易,2->供应商服务，3->采购商服务,4->土地交易
|
||||
name: "", //分类名字
|
||||
parentId: [], //父级id
|
||||
level: "", //分类层级
|
||||
level: "", //分类层级,parentId的长度
|
||||
sort: "", //排序值
|
||||
status: "1", //分类状态(1-启用 2-禁用)
|
||||
});
|
||||
@ -375,65 +313,83 @@ const dialogFormRules = ref({
|
||||
parentId: [
|
||||
{ required: true, message: "请选择父级分类", trigger: ["blur", "change"] },
|
||||
],
|
||||
status: [{ required: true, message: "请选择分类状态", trigger: "change" }],
|
||||
});
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
label: "name", // 选项标签字段名
|
||||
value: "id", // 选项值字段名
|
||||
children: "children", // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: "hover",
|
||||
emitPath: false, // 只返回当前节点值，不返回路径
|
||||
checkStrictly: true, //可以点击任意层级节点直接选中（不再需要展开到最后一级）
|
||||
expandTrigger: "hover", // 展开触发方式，默认为点击，可选值为 hover
|
||||
selectedNode: {},
|
||||
});
|
||||
const goodsOptions = ref([]);
|
||||
const getGoodTypeList = async () => {
|
||||
try {
|
||||
let response = await getGoodType();
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
goodsOptions.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
};
|
||||
const onSaveCategory = async () => {
|
||||
console.log("保存分类");
|
||||
console.log(dialogForm);
|
||||
await dialogRef.value.validate(async (valid, fields) => {
|
||||
// 递归查找节点对象
|
||||
const findNodeById = (options, id) => {
|
||||
for (const node of options) {
|
||||
if (node.id === id) return node
|
||||
if (node.children) {
|
||||
const found = findNodeById(node.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
const handleCascaderChange = (selectedId) => {
|
||||
const selectedNode = findNodeById(goodsOptions.value, selectedId)
|
||||
dialogForm.selectedNode = selectedNode
|
||||
}
|
||||
const onSaveCategory = () => {
|
||||
dialogRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
console.log("验证通过!");
|
||||
proxy.$modal.loading("正在添加中...")
|
||||
let param = {...dialogForm};
|
||||
param.parentId = dialogForm.parentId.join(",");
|
||||
let response = await categoryAdd(param);
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.loading("正在保存...");
|
||||
let param = { ...dialogForm };
|
||||
param.level = dialogForm.selectedNode.level;
|
||||
let response;
|
||||
if (dialogTitle.value == "编辑分类") {
|
||||
response = await categoryEdit(param);
|
||||
} else {
|
||||
response = await categoryAdd(param);
|
||||
}
|
||||
proxy.$modal.closeLoading();
|
||||
if (response.code == 200) {
|
||||
console.log(response);
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success(response.msg);
|
||||
loadData();
|
||||
cancelDialog();
|
||||
onSubmit();
|
||||
if (dialogTitle.value == "编辑分类") {
|
||||
ElMessage.success("编辑成功!");
|
||||
} else {
|
||||
ElMessage.success("添加成功!");
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.closeLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 添加分类
|
||||
const addCategory = () => {
|
||||
console.log("添加分类");
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const EditCategory = () => {
|
||||
console.log("编辑分类");
|
||||
dialogTitle.value = "编辑分类";
|
||||
dialogTitle.value = "添加分类";
|
||||
getGoodTypeList();
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const cancelDialog = () => {
|
||||
console.log("取消");
|
||||
dialogRef.value.resetFields();
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
@ -455,13 +411,11 @@ const calculateTableHeight = () => {
|
||||
// 最终计算
|
||||
tableViewportHeight.value =
|
||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
||||
// console.log(tableViewportHeight.value);
|
||||
};
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
columns.value = columns1.value;
|
||||
loadData();
|
||||
getGoodTypeList();
|
||||
|
||||
calculateTableHeight();
|
||||
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
<el-radio value="2" size="large">多规格</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div v-if="formInline.specStyle == 1">
|
||||
<div v-if="formInline.specStyle == '1'">
|
||||
<!-- 销售价格 -->
|
||||
<el-form-item label="销售价格" prop="salePrice" required>
|
||||
<el-input-number v-model="formInline.salePrice" :min="1" :precision="2" :controls="false"></el-input-number>
|
||||
@ -108,6 +108,7 @@
|
||||
<el-select v-model="item.unit" style="width: 80px; margin-left: 10px">
|
||||
<el-option label="kg" value="kg" />
|
||||
<el-option label="g" value="g" />
|
||||
<el-option label="ml" value="L" />
|
||||
<el-option label="ml" value="ml" />
|
||||
</el-select>
|
||||
</div>
|
||||
@ -144,9 +145,9 @@
|
||||
<el-form-item label="发货地址" required>
|
||||
<div style="display: flex; gap: 16px;">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<!-- 省市区级联选择器 -->
|
||||
<!-- 区域级联选择器 -->
|
||||
<el-cascader v-model="formInline.selectedAddress" :options="addressOptions" :props="cascaderProps"
|
||||
placeholder="请选择省市区" clearable />
|
||||
placeholder="请选择区域" clearable style="width: 300px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<!-- 详细地址输入框 -->
|
||||
@ -238,7 +239,7 @@ const formInline = reactive({
|
||||
value: '', //内容
|
||||
},
|
||||
],
|
||||
selectedAddress: [], //选中的省市区编码数组
|
||||
selectedAddress: [], //选中的区域编码数组
|
||||
areaAddress: '', //区域地址
|
||||
detailAddress: "", //详细地址
|
||||
sendAddress: "",
|
||||
@ -311,7 +312,7 @@ const rules = reactive({
|
||||
specStyle: [
|
||||
{ required: true, message: '请选择规格样式', trigger: 'change' }
|
||||
],
|
||||
salePrice: formInline.specStyle === '1' ? [
|
||||
salePrice: formInline.specStyle == '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
@ -323,7 +324,7 @@ const rules = reactive({
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
stock: formInline.specStyle === '1' ? [
|
||||
stock: formInline.specStyle == '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
@ -335,7 +336,7 @@ const rules = reactive({
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
netContent: formInline.specStyle === '1' ? [
|
||||
netContent: formInline.specStyle == '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
@ -347,7 +348,7 @@ const rules = reactive({
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
netWeight: formInline.specStyle === '2' ? [
|
||||
netWeight: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 检查是否至少有一个属性
|
||||
@ -365,7 +366,7 @@ const rules = reactive({
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
] : [],
|
||||
],
|
||||
attribute: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
@ -390,7 +391,7 @@ const rules = reactive({
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || value.length !== 3) {
|
||||
callback(new Error('请选择完整的省市区'));
|
||||
callback(new Error('请选择完整的区域'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -404,7 +405,6 @@ const rules = reactive({
|
||||
safeguard: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
console.log(value);
|
||||
if (value.isSelected !== 1) { // 如果值不是 1（未选中）
|
||||
callback(new Error('必须选择保障服务')); // 报错
|
||||
} else {
|
||||
@ -476,42 +476,6 @@ const isDiscountRebate = computed({
|
||||
}
|
||||
})
|
||||
|
||||
// 文件上传前的校验
|
||||
// const beforeUpload = (file) => {
|
||||
// const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
|
||||
// const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
// if (!isImage) {
|
||||
// ElMessage.error('只能上传JPG/PNG/GIF格式的图片!')
|
||||
// return false
|
||||
// }
|
||||
// if (!isLt2M) {
|
||||
// ElMessage.error('图片大小不能超过2MB!')
|
||||
// return false
|
||||
// }
|
||||
// return true
|
||||
// }
|
||||
// 文件变化时触发验证
|
||||
// const handleChange = () => {
|
||||
// console.log('文件变化时触发验证')
|
||||
// nextTick(() => {
|
||||
// console.log(formInline.images)
|
||||
// formRef.value.validateField('images')
|
||||
// })
|
||||
// }
|
||||
// 移除文件时触发验证
|
||||
// const handleRemove = (file) => {
|
||||
// console.log('移除文件时触发验证')
|
||||
// console.log(file)
|
||||
// console.log(formInline.images)
|
||||
// formInline.images = formInline.images.filter(item => item.uid !== file.uid)
|
||||
// formRef.value.validateField('images')
|
||||
// }
|
||||
// 超出限制提示
|
||||
// const handleExceed = () => {
|
||||
// ElMessage.warning('最多只能上传5张图片!')
|
||||
// }
|
||||
|
||||
const categoryList1 = ref([]);
|
||||
const categoryList2 = ref([]);
|
||||
const categoryList3 = ref([]);
|
||||
@ -519,16 +483,14 @@ const categoryList3 = ref([]);
|
||||
const getGoodTypeList = async () => {
|
||||
try {
|
||||
let response = await getGoodType();
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
categoryList1.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
};
|
||||
const changeCategory1 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId1 = id;
|
||||
formInline.categoryId2 = "";
|
||||
categoryList2.value = categoryList1.value.filter((item) => item.id == id)[0].children;
|
||||
@ -544,23 +506,19 @@ const changeCategory1 = (id) => {
|
||||
}
|
||||
};
|
||||
const changeCategory2 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId2 = id;
|
||||
categoryList3.value = categoryList2.value.filter((item) => item.id == id)[0].children;
|
||||
formInline.categoryId3 = "";
|
||||
formInline.categoryId = "";
|
||||
};
|
||||
const changeCategory3 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId3 = id;
|
||||
formInline.categoryId = id;
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
console.log(formInline);
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
console.log('验证通过!', formRef.value)
|
||||
// 整理提交的参数
|
||||
let params = { ...formInline };
|
||||
if (formInline.specStyle == '1') {
|
||||
@ -601,7 +559,6 @@ const onGoodSave = async (params) => {
|
||||
|
||||
const getArea = async () => {
|
||||
const res = await getRegion();
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
addressOptions.value = res.data.list;
|
||||
} else {
|
||||
@ -612,7 +569,6 @@ const activeInfoList = ref([]);
|
||||
// 获取商品优惠信息配置项
|
||||
const getActiveInfo = async () => {
|
||||
const res = await getActiveInfos();
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
activeInfoList.value = res.data;
|
||||
formInline.safeguard.options = [...activeInfoList.value.safeguard.options];
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
<el-radio value="2" size="large">多规格</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div v-if="formInline.specStyle == 1">
|
||||
<div v-if="formInline.specStyle == '1'">
|
||||
<!-- 销售价格 -->
|
||||
<el-form-item label="销售价格" prop="salePrice" required>
|
||||
<el-input-number v-model="formInline.salePrice" :min="1" :precision="2" :controls="false"></el-input-number>
|
||||
@ -108,6 +108,7 @@
|
||||
<el-select v-model="item.unit" style="width: 80px; margin-left: 10px">
|
||||
<el-option label="kg" value="kg" />
|
||||
<el-option label="g" value="g" />
|
||||
<el-option label="ml" value="L" />
|
||||
<el-option label="ml" value="ml" />
|
||||
</el-select>
|
||||
</div>
|
||||
@ -144,9 +145,9 @@
|
||||
<el-form-item label="发货地址" required>
|
||||
<div style="display: flex; gap: 16px;">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<!-- 省市区级联选择器 -->
|
||||
<!-- 区域级联选择器 -->
|
||||
<el-cascader v-model="formInline.selectedAddress" :options="addressOptions" :props="cascaderProps"
|
||||
placeholder="请选择省市区" clearable />
|
||||
placeholder="请选择区域" clearable style="width: 300px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<!-- 详细地址输入框 -->
|
||||
@ -243,7 +244,7 @@ const formInline = reactive({
|
||||
value: '', //内容
|
||||
},
|
||||
],
|
||||
selectedAddress: [], //选中的省市区编码数组
|
||||
selectedAddress: [], //选中的区域编码数组
|
||||
areaAddress: '', //区域地址
|
||||
detailAddress: "", //详细地址
|
||||
sendAddress: "",
|
||||
@ -316,7 +317,7 @@ const rules = reactive({
|
||||
specStyle: [
|
||||
{ required: true, message: '请选择规格样式', trigger: 'change' }
|
||||
],
|
||||
salePrice: formInline.specStyle === '1' ? [
|
||||
salePrice: formInline.specStyle == '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
@ -328,7 +329,7 @@ const rules = reactive({
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
stock: formInline.specStyle === '1' ? [
|
||||
stock: formInline.specStyle == '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
@ -340,7 +341,7 @@ const rules = reactive({
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
netContent: formInline.specStyle === '1' ? [
|
||||
netContent: formInline.specStyle == '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
@ -352,7 +353,7 @@ const rules = reactive({
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
netWeight: formInline.specStyle === '2' ? [
|
||||
netWeight: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 检查是否至少有一个属性
|
||||
@ -370,7 +371,7 @@ const rules = reactive({
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
] : [],
|
||||
],
|
||||
attribute: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
@ -395,7 +396,7 @@ const rules = reactive({
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || value.length !== 3) {
|
||||
callback(new Error('请选择完整的省市区'));
|
||||
callback(new Error('请选择完整的区域'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -430,7 +431,7 @@ const deleteAttr = (index) => {
|
||||
formInline.attribute.splice(index, 1)
|
||||
}
|
||||
|
||||
// 选中的省市区编码数组（如：['云南省', '昆明市', '呈贡区']）
|
||||
// 选中的区域编码数组（如：['云南省', '昆明市', '呈贡区']）
|
||||
const selectedAddress = ref([]);
|
||||
const detailAddress = ref('');
|
||||
// 级联选择器配置
|
||||
@ -441,7 +442,7 @@ const cascaderProps = ref({
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
// 省市区数据（示例）
|
||||
// 区域数据（示例）
|
||||
const addressOptions = ref([]);
|
||||
addressOptions.value = areaList.data;
|
||||
|
||||
@ -467,42 +468,6 @@ const isDiscountRebate = computed({
|
||||
}
|
||||
})
|
||||
|
||||
// 文件上传前的校验
|
||||
// const beforeUpload = (file) => {
|
||||
// const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
|
||||
// const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
// if (!isImage) {
|
||||
// ElMessage.error('只能上传JPG/PNG/GIF格式的图片!')
|
||||
// return false
|
||||
// }
|
||||
// if (!isLt2M) {
|
||||
// ElMessage.error('图片大小不能超过2MB!')
|
||||
// return false
|
||||
// }
|
||||
// return true
|
||||
// }
|
||||
// 文件变化时触发验证
|
||||
// const handleChange = () => {
|
||||
// console.log('文件变化时触发验证')
|
||||
// nextTick(() => {
|
||||
// console.log(formInline.images)
|
||||
// formRef.value.validateField('images')
|
||||
// })
|
||||
// }
|
||||
// 移除文件时触发验证
|
||||
// const handleRemove = (file) => {
|
||||
// console.log('移除文件时触发验证')
|
||||
// console.log(file)
|
||||
// console.log(formInline.images)
|
||||
// formInline.images = formInline.images.filter(item => item.uid !== file.uid)
|
||||
// formRef.value.validateField('images')
|
||||
// }
|
||||
// 超出限制提示
|
||||
// const handleExceed = () => {
|
||||
// ElMessage.warning('最多只能上传5张图片!')
|
||||
// }
|
||||
|
||||
const categoryList1 = ref([]);
|
||||
const categoryList2 = ref([]);
|
||||
const categoryList3 = ref([]);
|
||||
@ -510,16 +475,14 @@ const categoryList3 = ref([]);
|
||||
const getGoodTypeList = async () => {
|
||||
try {
|
||||
let response = await getGoodType();
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
categoryList1.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
};
|
||||
const changeCategory1 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId1 = id;
|
||||
formInline.categoryId2 = "";
|
||||
categoryList2.value = categoryList1.value.filter((item) => item.id == id)[0].children;
|
||||
@ -535,23 +498,19 @@ const changeCategory1 = (id) => {
|
||||
}
|
||||
};
|
||||
const changeCategory2 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId2 = id;
|
||||
categoryList3.value = categoryList2.value.filter((item) => item.id == id)[0].children;
|
||||
formInline.categoryId3 = "";
|
||||
formInline.categoryId = "";
|
||||
};
|
||||
const changeCategory3 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId3 = id;
|
||||
formInline.categoryId = id;
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
console.log(formInline);
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
console.log('验证通过!', formRef.value)
|
||||
// 整理提交的参数
|
||||
let params = { ...formInline };
|
||||
if (formInline.specStyle == '1') {
|
||||
@ -616,7 +575,6 @@ const getGoodsInfo = async (goodId) => {
|
||||
formInline.specStyle = '2';
|
||||
} else {
|
||||
formInline.specStyle = '1';
|
||||
console.log(res.data.netWeight[0]);
|
||||
formInline.salePrice = formData.value.netWeight[0]?.goodPrice ?? 1;
|
||||
formInline.stock = formData.value.netWeight[0]?.goodStock ?? 1;
|
||||
formInline.netContent = formData.value.netWeight[0]?.netContent ?? 1;
|
||||
@ -657,22 +615,18 @@ const getGoodsInfo = async (goodId) => {
|
||||
categoryList3.value = item[0].children;
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(formInline);
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => route.query, (newVal) => {
|
||||
console.log("watch商品id:", newVal.goodId);
|
||||
if (newVal.goodId) {
|
||||
getGoodsInfo(newVal.goodId);
|
||||
}
|
||||
})
|
||||
onMounted(async () => {
|
||||
const { edit, goodId } = route.query;
|
||||
console.log("onMounted商品id:", goodId);
|
||||
getActiveInfo();
|
||||
await getGoodTypeList();
|
||||
getArea();
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
v-model="formInline.goodCategoryId"
|
||||
:options="goodsOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择省市区"
|
||||
placeholder="请选择商品分类"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -207,9 +207,7 @@ const goodsBrandList = ref([
|
||||
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
console.log("submit!");
|
||||
formInline.current = 1;
|
||||
console.log(formInline);
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
@ -223,7 +221,6 @@ let bottomList = reactive([
|
||||
{ title: "已下架", id: "3", value: "" },
|
||||
]);
|
||||
const tabChange = (Event) => {
|
||||
console.log(Event.index);
|
||||
if (Event.index == "0") {
|
||||
// 请求全部
|
||||
formInline.type = "1";
|
||||
@ -317,7 +314,6 @@ const loadData = async () => {
|
||||
// 测试
|
||||
// tableData.value = generateMockData();
|
||||
// tableTotal.value = tableData.value.length;
|
||||
// console.log(tableData.value);
|
||||
|
||||
let prams = { ...formInline };
|
||||
prams.goodCategoryId =
|
||||
@ -325,13 +321,12 @@ const loadData = async () => {
|
||||
|
||||
try {
|
||||
let response = await getGoodManageInfo(prams);
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data.records;
|
||||
tableTotal.value = response.data.total;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
tableLoading.value = false;
|
||||
};
|
||||
@ -342,7 +337,6 @@ const getHeaderClass = ({ column }) => {
|
||||
};
|
||||
// 分页变化
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
console.log("分页变化:", page, pageSize);
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
// 这里可以调用API获取新数据
|
||||
@ -358,13 +352,16 @@ const handleSelectionChange = (selection, ids) => {
|
||||
const seeDetails = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要查看详情的行:", row);
|
||||
// router.push({
|
||||
// path: "/goods/goodsManage/editGoods",
|
||||
// query: { goodId: row.goodId },
|
||||
// meta: { title: '商品详情'}
|
||||
// });
|
||||
};
|
||||
const toUpload = async (row) => {
|
||||
console.log("上架:", row);
|
||||
goodsUpAndDown(row.goodId, 2);
|
||||
};
|
||||
const toDownload = (row) => {
|
||||
console.log("下架:", row);
|
||||
goodsUpAndDown(row.goodId, 3);
|
||||
};
|
||||
const goodsUpAndDown = async (id, isListed) => {
|
||||
@ -381,11 +378,10 @@ const goodsUpAndDown = async (id, isListed) => {
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要编辑的行:", row);
|
||||
// 跳转路由并携带参数，行数据，和query的值edit
|
||||
router.push({
|
||||
path: "/goods/goodsManage/editGoods",
|
||||
query: { goodId: row.goodId },
|
||||
query: { goodId: row.goodId, edit: true },
|
||||
});
|
||||
};
|
||||
// 删除操作
|
||||
@ -394,7 +390,6 @@ const handleDelete = async (row) => {
|
||||
};
|
||||
// 批量删除
|
||||
const batchDelete = async () => {
|
||||
console.log("要删除的行:", selectedIds.value);
|
||||
deleteGoods(selectedIds.value.join(","))
|
||||
};
|
||||
const deleteGoods = async (param) => {
|
||||
@ -425,12 +420,11 @@ const goodsOptions = ref([]);
|
||||
const getGoodTypeList = async () => {
|
||||
try {
|
||||
let response = await getGoodType();
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
goodsOptions.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -443,7 +437,7 @@ const getGoodsManageCount = async () => {
|
||||
bottomList[2].value = `(${response.data?.removedCount ?? ""})`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -465,7 +459,6 @@ const calculateTableHeight = () => {
|
||||
// 最终计算
|
||||
tableViewportHeight.value =
|
||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
||||
// console.log(tableViewportHeight.value);
|
||||
};
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
|
||||
@ -103,7 +103,7 @@ const { proxy } = getCurrentInstance();
|
||||
const showType = ref(2);
|
||||
|
||||
const loginForm = ref({
|
||||
username: "super",
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user