code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-02-07 01:25:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

403
manager/src/views/goods/goods-manage/brand.vue Normal file
View File

@@ -0,0 +1,403 @@
<style lang="scss">
@import "@/styles/table-common.scss";
</style>
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="品牌名称" prop="name">
<Input
type="text"
v-model="searchForm.name"
placeholder="请输入品牌名称"
clearable
style="width: 200px"
/>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加</Button>
</Row>
<Row>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
sortable="custom"
@on-sort-change="changeSort"
@on-selection-change="changeSelect"
></Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[10, 20, 50]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
</Col>
</Row>
<Modal
:title="modalTitle"
v-model="modalVisible"
:mask-closable="false"
:width="500"
>
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
<FormItem label="品牌名称" prop="name">
<Input v-model="form.name" clearable style="width: 100%"/>
</FormItem>
<FormItem label="品牌图标" prop="logo">
<upload-pic-input
v-model="form.logo"
style="width: 100%"
></upload-pic-input>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="modalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
>提交
</Button
>
</div>
</Modal>
</div>
</template>
<script>
import {getManagerBrandPage, addBrand, disableBrand} from "@/api/goods";
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
export default {
name: "brand",
components: {
uploadPicInput,
},
data() {
return {
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "create_time", // 默认排序字段
order: "desc", // 默认排序方式
},
form: {
// 添加或编辑表单对象初始化数据
name: "",
logo: "",
deleteFlag: "",
},
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
{
title: "品牌名称",
key: "name",
width: 200,
resizable: true,
sortable: false,
},
{
title: "品牌图标",
key: "logo",
align: "left",
render: (h, params) => {
return h("img", {
attrs: {
src: params.row.logo,
alt: "加载图片失败",
},
style: {
cursor: "pointer",
width: "80px",
height: "60px",
margin: "10px 0",
"object-fit": "contain",
},
});
},
},
{
title: "状态",
key: "deleteFlag",
align: "left",
render: (h, params) => {
if (params.row.deleteFlag == 0) {
return h("div", [
h("Badge", {
props: {
status: "success",
text: "启用",
},
}),
]);
} else if (params.row.deleteFlag == 1) {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "禁用",
},
}),
]);
}
},
filters: [
{
label: "启用",
value: 0,
},
{
label: "禁用",
value: 1,
},
],
filterMultiple: false,
filterMethod(value, row) {
if (value == 0) {
return row.deleteFlag == 0;
} else if (value == 1) {
return row.deleteFlag == 1;
}
},
},
{
title: "操作",
key: "action",
width: 180,
align: "center",
fixed: "right",
render: (h, params) => {
let enableOrDisable = "";
if (params.row.deleteFlag == 0) {
enableOrDisable = h(
"Button",
{
props: {
size: "small",
type: "error",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.disable(params.row);
},
},
},
"禁用"
);
} else {
enableOrDisable = h(
"Button",
{
props: {
type: "success",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.enable(params.row);
},
},
},
"启用"
);
}
return h("div", [
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.edit(params.row);
},
},
},
"编辑"
),
enableOrDisable,
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
};
},
methods: {
init() {
this.getDataList();
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
},
getDataList() {
this.loading = true;
// 带多条件搜索参数获取表单数据 请自行修改接口
getManagerBrandPage(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
console.warn(12)
this.data = res.result.records;
this.total = res.result.total;
}
});
},
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据 记得删除
delete this.form.id;
addBrand(this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
} else {
// 编辑
addBrand(this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
}
}
});
},
add() {
this.modalType = 0;
this.modalTitle = "添加";
this.$refs.form.resetFields();
delete this.form.id;
this.modalVisible = true;
},
edit(v) {
this.modalType = 1;
this.modalTitle = "编辑";
this.$refs.form.resetFields();
// 转换null为""
for (let attr in v) {
if (v[attr] === null) {
v[attr] = "";
}
}
let str = JSON.stringify(v);
let data = JSON.parse(str);
this.form = data;
this.modalVisible = true;
},
enable(v) {
this.$Modal.confirm({
title: "确认启用",
content: "您确认要启用品牌 " + v.name + " ?",
loading: true,
onOk: () => {
disableBrand(v.id, {disable: false}).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
disable(v) {
this.$Modal.confirm({
title: "确认禁用",
content: "您确认要禁用品牌 " + v.name + " ?",
loading: true,
onOk: () => {
disableBrand(v.id, {disable: true}).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>

528
manager/src/views/goods/goods-manage/category.vue Normal file
View File

@@ -0,0 +1,528 @@
<template>
<div class="wrapper">
<div class="operation">
<Button @click="addParent" icon="md-add">添加一级分类</Button>
选择分类:
<Select @on-change="changeSortCate" v-model="sortCate" style="width:200px">
<Option v-for="item in sortCateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
<tree-table ref="treeTable" size="default" :loading="loading" :data="tableData" :columns="columns" :border="true" :show-index="false" :is-fold="true" :expand-type="false" primary-key="id">
<template slot="action" slot-scope="scope">
<Dropdown v-show="scope.row.level == 2" transfer="true" trigger="click">
<Button size="small">
绑定
<Icon type="ios-arrow-down"></Icon>
</Button>
<DropdownMenu slot="list">
<DropdownItem @click.native="brandOperation(scope.row)">编辑绑定品牌</DropdownItem>
<DropdownItem @click.native="specOperation(scope.row)">编辑绑定规格</DropdownItem>
<DropdownItem @click.native="parameterOperation(scope.row)">编辑绑定参数</DropdownItem>
</DropdownMenu>
</Dropdown>
&nbsp;
<Dropdown transfer="true" trigger="click">
<Button size="small">
操作
<Icon type="ios-arrow-down"></Icon>
</Button>
<DropdownMenu slot="list">
<DropdownItem @click.native="edit(scope.row)">编辑</DropdownItem>
<DropdownItem v-if="scope.row.deleteFlag == 1" @click.native="enable(scope.row)">启用</DropdownItem>
<DropdownItem v-if="scope.row.deleteFlag == 0" @click.native="disable(scope.row)">禁用</DropdownItem>
<DropdownItem @click.native="remove(scope.row)">删除</DropdownItem>
</DropdownMenu>
</Dropdown>
&nbsp;
<Button v-show="scope.row.level != 2" type="primary" @click="addChildren(scope.row)" size="small" icon="md-add" style="margin-right: 5px">添加子分类
</Button>
</template>
<template slot="commissionRate" slot-scope="scope">
{{ scope.row.commissionRate }}%
</template>
<template slot="deleteFlag" slot-scope="scope">
<div v-if="scope.row.deleteFlag == 0">
<Badge text="正常启用" status="success"></Badge>
</div>
<div v-if="scope.row.deleteFlag == 1">
<Badge text="禁用" status="error"></Badge>
</div>
</template>
</tree-table>
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
<Form ref="form" :model="formAdd" :label-width="100" :rules="formValidate">
<div v-if="showParent">
<FormItem label="上级分类" prop="parentId">
{{ parentTitle }}
<Input v-model="formAdd.parentId" clearable style="width: 100%; display: none" />
</FormItem>
</div>
<FormItem label="层级" prop="level" style="display: none">
<Input v-model="formAdd.level" clearable style="width: 100%" />
</FormItem>
<FormItem label="分类名称" prop="name">
<Input v-model="formAdd.name" clearable style="width: 100%" />
</FormItem>
<FormItem label="分类图标" prop="image">
<upload-pic-input v-model="formAdd.image" style="width: 100%"></upload-pic-input>
</FormItem>
<FormItem label="排序值" prop="sortOrder" style="width: 345px">
<InputNumber v-model="formAdd.sortOrder"></InputNumber>
</FormItem>
<FormItem label="佣金比例(%)" prop="commissionRate" style="width: 345px">
<InputNumber v-model="formAdd.commissionRate"></InputNumber>
</FormItem>
<FormItem label="是否启用" prop="deleteFlag">
<i-switch size="large" v-model="formAdd.deleteFlag" :true-value="0" :false-value="1">
<span slot="open">启用</span>
<span slot="close">禁用</span>
</i-switch>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="modalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="Submit">提交</Button>
</div>
</Modal>
<Modal :title="modalBrandTitle" v-model="modalBrandVisible" :mask-closable="false" :width="500">
<Form ref="brandForm" :model="brandForm" :label-width="100">
<Select v-model="brandForm.categoryBrands" multiple>
<Option v-for="item in brandWay" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
</Form>
<div slot="footer">
<Button type="text" @click="modalBrandVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="saveCategoryBrand">提交</Button>
</div>
</Modal>
<Modal :title="modalSpecTitle" v-model="modalSpecVisible" :mask-closable="false" :width="500">
<Form ref="specForm" :model="specForm" :label-width="100">
<Select v-model="specForm.category_specs" multiple>
<Option v-for="item in specifications" :value="item.id" :key="item.id" :label="item.specName">
</Option>
</Select>
</Form>
<div slot="footer">
<Button type="text" @click="modalSpecVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="saveCategorySpec">提交</Button>
</div>
</Modal>
</div>
</template>
<script>
import {
insertCategory,
updateCategory,
getBrandListData,
delCategory,
getCategoryBrandListData,
saveCategoryBrand,
getSpecificationList,
getCategorySpecListData,
disableCategory,
saveCategorySpec,
getCategoryTree,
} from "@/api/goods";
import TreeTable from "@/views/my-components/tree-table/Table/Table";
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
import * as filters from "@/utils/filters";
export default {
name: "lili-components",
components: {
TreeTable,
uploadPicInput,
},
data() {
return {
categoryList: [],
sortCateList: [], //筛选出分类第一级
sortCate: "", //筛选的数据
currView: "index",
loading: false,
selectCount: 0,
brands: [], //品牌集合
specifications: [], //规格集合
categoryId: "",
category_brands: [], //已经选择的品牌
category_specs: [], //已经选择的规格
expandLevel: 1,
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalBrandVisible: false, //品牌关联编辑显示
modalSpecVisible: false, //品牌关联编辑显示
modalTitle: "", // 添加或编辑标题
showParent: false, // 是否展示上级菜单
parentTitle: "", // 父级菜单名称
modalBrandTitle: "",
modalSpecTitle: "",
formAdd: {
// 添加或编辑表单对象初始化数据
parentId: "",
name: "",
image: "",
sortOrder: "",
deleteFlag: 0,
commissionRate: "",
level: 0,
},
brandForm: {
categoryBrands: [],
},
brandWay: "", //请求绑定品牌的信息
specForm: {},
// 表单验证规则
formValidate: {},
columns: [
{
title: "分类名称",
key: "name",
minWidth: "120px",
},
{
title: "状态",
key: "deleteFlag",
headerAlign: "center",
type: "template",
template: "deleteFlag",
},
{
title: "佣金(%)",
key: "commissionRate",
headerAlign: "center",
type: "template",
template: "commissionRate",
},
{
fixed: "right",
title: "操作",
key: "action",
align: "left",
headerAlign: "center",
type: "template",
template: "action",
},
],
tableData: [],
};
},
methods: {
changeSortCate(val) {
let way = this.categoryList.find((item) => {
return item.name == val;
});
this.tableData = [way];
},
init() {
this.getAllList(0);
this.getBrandList();
this.getSpecList();
},
//获取所有品牌
getBrandList() {
getBrandListData().then((res) => {
this.brandWay = res;
});
},
//获取所有规格
getSpecList() {
getSpecificationList().then((res) => {
if (res.success) {
this.specifications = res;
}
});
},
//弹出品牌关联框
brandOperation(v) {
getCategoryBrandListData(v.id).then((res) => {
this.categoryId = v.id;
this.modalBrandTitle = "品牌关联";
this.brandForm.categoryBrands = res.result.map((item) => item.id);
// this.brandWay = {...res.result}
this.modalBrandVisible = true;
});
},
//弹出规格关联框
specOperation(v) {
getCategorySpecListData(v.id).then((res) => {
this.categoryId = v.id;
this.modalSpecTitle = "规格关联";
this.specForm.category_specs = res.map((item) => item.id);
this.modalSpecVisible = true;
});
},
//保存分类规格绑定
saveCategorySpec() {
saveCategorySpec(this.categoryId, this.specForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.modalSpecVisible = false;
}
});
},
//保存分类品牌绑定
saveCategoryBrand() {
saveCategoryBrand(this.categoryId, this.brandForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.modalBrandVisible = false;
}
});
},
parameterOperation(v) {
this.$router.push({ name: "parameter", query: { id: v.id } });
},
refresh() {
this.loading = true;
let that = this;
setTimeout(function () {
that.loading = false;
}, 1000);
},
addChildren(v) {
this.modalType = 0;
this.modalTitle = "添加子分类";
this.parentTitle = v.name;
this.formAdd.level = eval(v.level + "+1");
this.showParent = true;
// this.$refs.form.resetFields();
delete this.formAdd.id;
this.formAdd.parentId = v.id;
this.modalVisible = true;
},
edit(v) {
this.modalType = 1;
this.modalTitle = "编辑";
this.formAdd.id = v.id;
this.formAdd.name = v.name;
this.formAdd.level = v.level;
this.formAdd.parentId = v.parentId;
this.formAdd.sortOrder = v.sortOrder;
this.formAdd.commissionRate = v.commissionRate;
this.formAdd.deleteFlag = v.deleteFlag;
this.formAdd.image = v.image;
this.showParent = false;
this.modalVisible = true;
},
addParent() {
this.modalType = 0;
this.modalTitle = "添加一级分类";
this.parentTitle = "顶级分类";
this.showParent = true;
this.$refs.form.resetFields();
delete this.formAdd.id;
this.formAdd.parentId = 0;
this.modalVisible = true;
},
Submit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据 记得删除
delete this.formAdd.id;
insertCategory(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("添加成功");
this.getAllList(0);
this.modalVisible = false;
this.$refs.form.resetFields();
}
});
} else {
// 编辑
updateCategory(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("修改成功");
this.getAllList(0);
this.modalVisible = false;
this.$refs.form.resetFields();
}
});
}
}
});
},
remove(v) {
this.$Modal.confirm({
title: "确认删除",
// 记得确认修改此处
content: "您确认要删除 " + v.name + " ?",
loading: true,
onOk: () => {
// 删除
delCategory(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getAllList(0);
}
});
},
});
},
getAllList(parent_id) {
this.loading = true;
getCategoryTree(parent_id).then((res) => {
this.loading = false;
if (res.success) {
// 仅展开指定级数 默认后台已展开所有
let expandLevel = this.expandLevel;
localStorage.setItem("category", JSON.stringify(res.result));
res.result.forEach((e, index, arr) => {
this.sortCateList.push({
label: e.name,
value: e.name,
});
this.sortCate = arr[0].name;
if (expandLevel == 1) {
if (e.level == 0) {
e.expand = false;
}
if (e.children && e.children.length > 0) {
e.children.forEach(function (c) {
if (c.level == 1) {
c.expand = false;
}
if (c.children && c.children.length > 0) {
c.children.forEach(function (b) {
if (b.level == 2) {
b.expand = false;
}
});
}
});
}
} else if (expandLevel == 2) {
if (e.level == 0) {
e.expand = true;
}
if (e.children && e.children.length > 0) {
e.children.forEach(function (c) {
if (c.level == 1) {
c.expand = false;
}
if (c.children && c.children.length > 0) {
c.children.forEach(function (b) {
if (b.level == 2) {
b.expand = false;
}
});
}
});
}
} else if (expandLevel == 3) {
if (e.level == 0) {
e.expand = true;
}
if (e.children && e.children.length > 0) {
e.children.forEach(function (c) {
if (c.level == 1) {
c.expand = true;
}
if (c.children && c.children.length > 0) {
c.children.forEach(function (b) {
if (b.level == 2) {
b.expand = false;
}
});
}
});
}
}
});
this.categoryList = res.result;
this.tableData = [res.result[0]];
}
});
},
enable(v) {
this.$Modal.confirm({
title: "确认启用",
content: "您是否要启用当前分类 " + v.name + " 及其子分类?",
loading: true,
okText: "是",
cancelText: "否",
onOk: () => {
disableCategory(v.id, { enableOperations: 0 }).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getAllList(0);
}
});
},
onCancel: () => {
this.getAllList(0);
},
});
},
disable(v) {
this.$Modal.confirm({
title: "确认禁用",
content: "您是否要禁用当前分类 " + v.name + " 及其子分类?",
loading: true,
okText: "是",
cancelText: "否",
onOk: () => {
disableCategory(v.id, { enableOperations: true }).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getAllList(0);
}
});
},
onCancel: () => {
this.getAllList(0);
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
.wrapper {
width: 100%;
height: 100%;
background: #fff;
padding: 20px;
}
.article {
font-size: 16px;
font-weight: 400;
margin: 12px 0;
}
.href-text {
font-size: 12px;
}
.operation {
margin-bottom: 2vh;
}
.select-count {
font-weight: 600;
color: #40a9ff;
}
</style>

336
manager/src/views/goods/goods-manage/parameter.vue Normal file
View File

@@ -0,0 +1,336 @@
<template>
<div style="width: 100%;">
<Card>
<Button @click="handleAddParamsGroup" type="primary">添加</Button>
</Card>
<div class="row">
<Card v-if="paramsGroup.length==0">
暂无参数绑定信息
</Card>
<div class="paramsGroup" v-else>
<Card style="width: 350px; margin:7px;" v-for="group in paramsGroup" :key="group.groupId" :bordered="false">
<p slot="title">
<Icon type="ios-film-outline"></Icon>&nbsp;{{ group.groupName }}
</p>
<p slot="extra">
<Dropdown slot="extra">
<a href="javascript:void(0)">
操作
<Icon type="ios-arrow-down"></Icon>
</a>
<Dropdown-menu slot="list">
<Dropdown-item @click.native="handleEditParamsGroup(group)">编辑</Dropdown-item>
<Dropdown-item @click.native="handleDeleteParamGroup(group)">删除</Dropdown-item>
</Dropdown-menu>
</Dropdown>
<Icon type="arrow-down-b"></Icon>
</p>
<template v-if="group.params && group.params.length > 0">
<div v-for="param in group.params" :key="param.param_id" class="params">
<span>{{ param.paramName }} 【{{
param.paramType | paramTypeFilter
}}】</span>
<span>
<i-button type="text" @click="handleEditParams(group, param)">编辑</i-button>
<i-button type="text" size="small" style="color: #f56c6c" @click="handleDeleteParam(group, param)">删除</i-button>
</span>
</div>
</template>
<div v-else style="align-content: center">暂无数据...</div>
<div style="text-align: center">
<i-button type="text" @click="handleAddParams(group)">添加</i-button>
</div>
</Card>
</div>
</div>
<div>
<Modal :title="modalTitle" v-model="dialogParamsVisible" :mask-closable="false" :width="500">
<Form ref="paramForm" :model="paramForm" :label-width="100" :rules="formValidate">
<FormItem label="参数名称" prop="paramName">
<Input v-model="paramForm.paramName" style="width: 100%" />
</FormItem>
<FormItem label="参数类型" prop="paramType">
<Select :loading="userLoading" v-model="paramForm.paramType">
<Option :value="1" :key="1">输入项</Option>
<Option :value="2" :key="2">选择项</Option>
</Select>
</FormItem>
<FormItem label="可选值" prop="options">
<i-input v-model="paramForm.options" type="textarea" :rows="3" placeholder="请输入可选值,选择项实用逗号分隔"></i-input>
</FormItem>
<FormItem label="选项" prop="specName3">
<Checkbox :value="Number" v-model="paramForm.required">必填</Checkbox>
<Checkbox v-model="paramForm.isIndex">可索引</Checkbox>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="dialogParamsVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="submitParamForm">提交</Button>
</div>
</Modal>
</div>
<div>
<Modal :title="modalTitle" v-model="dialogParamsGroupVisible" :mask-closable="false" :width="500">
<Form ref="paramGroupForm" :model="paramGroupForm" :label-width="100" :rules="paramGroupValidate">
<FormItem label="参数名称" prop="groupName">
<Input v-model="paramGroupForm.groupName" style="width: 100%" />
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="dialogParamsGroupVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="submitParamGroupForm">提交</Button>
</div>
</Modal>
</div>
</div>
</template>
<script>
import {
getCategoryParamsListData,
insertGoodsParams,
updateGoodsParams,
deleteParams,
insertParamsGroup,
updateParamsGroup,
deleteParamsGroup,
} from "@/api/goods";
export default {
name: "categoryParams",
components: {},
data() {
return {
/** 分类ID */
categoryId: this.$route.query.id,
/** 参数组 */
paramsGroup: [],
/** 添加或编辑标识 */
modalType: 0,
/** 添加或编辑标题 */
modalTitle: "",
modalTitle1: "",
/** 参数添加或编辑弹出框 */
dialogParamsVisible: false,
/** 参数组添加或编辑弹出框 */
dialogParamsGroupVisible: false,
/** 参数ID **/
paramId: "",
//参数表单
paramForm: {},
paramGroupForm: {},
/** 添加、编辑参数 规格 */
formValidate: {
paramName: [
{ required: true, message: "参数名称不能为空", trigger: "blur" },
],
},
/** 参数组*/
paramGroupValidate: {
groupName: [
{ required: true, message: "参数组名称不能为空", trigger: "blur" },
],
},
};
},
filters: {
paramTypeFilter(val) {
return val === 1 ? "输入项" : "选择项";
},
},
methods: {
init() {
this.getDataList();
},
//弹出添加参数框
handleAddParams(group) {
this.paramForm = {
paramName: "",
paramType: 1,
options: "",
required: false,
isIndex: false,
groupId: group.groupId,
categoryId: this.categoryId,
};
this.modalTitle = "添加参数";
this.modalType = 0;
this.dialogParamsVisible = true;
},
//弹出修改参数框
handleEditParams(group, param) {
this.paramForm = {
paramName: param.paramName,
paramType: param.paramType,
options: param.options,
required: param.required,
isIndex: param.isIndex,
groupId: group.groupId,
categoryId: this.categoryId,
id: param.id,
};
this.modalType = 1;
this.modalTitle = "修改参数";
this.dialogParamsVisible = true;
},
//弹出修改参数组框
handleEditParamsGroup(group) {
this.paramGroupForm = {
groupName: group.groupName,
categoryId: this.categoryId,
id: group.groupId,
};
this.modalType = 1;
this.modalTitle = "修改参数组";
this.dialogParamsGroupVisible = true;
},
handleAddParamsGroup() {
(this.paramGroupForm.categoryId = this.categoryId), (this.modalType = 0);
this.modalTitle = "添加参数组";
this.dialogParamsGroupVisible = true;
},
//保存参数组
submitParamGroupForm() {
this.$refs.paramGroupForm.validate((valid) => {
if (valid) {
if (this.modalType === 0) {
insertParamsGroup(this.paramGroupForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("参数组修改成功");
this.getDataList();
this.dialogParamsVisible = false;
}
});
} else {
updateParamsGroup(this.paramGroupForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("参数组修改成功");
this.getDataList();
this.dialogParamsVisible = false;
}
});
}
this.dialogParamsGroupVisible = false;
}
});
},
//保存参数
submitParamForm() {
this.$refs.paramForm.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
this.paramForm.isIndex = Number(this.paramForm.isIndex);
this.paramForm.required = Number(this.paramForm.required);
insertGoodsParams(this.paramForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("参数添加成功");
this.getDataList();
this.dialogParamsVisible = false;
}
});
} else {
this.paramForm.isIndex = Number(this.paramForm.isIndex);
this.paramForm.required = Number(this.paramForm.required);
updateGoodsParams(this.paramForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("参数修改成功");
this.getDataList();
this.dialogParamsVisible = false;
}
});
}
}
});
},
getDataList() {
getCategoryParamsListData(this.categoryId).then((res) => {
if (res.success) {
this.paramsGroup = res.result;
}
});
},
//删除参数方法
handleDeleteParam(group, param) {
this.$Modal.confirm({
title: "确认删除",
// 记得确认修改此处
content: "您确认要删除 " + param.paramName + " ?",
loading: true,
onOk: () => {
// 删除
deleteParams(param.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除参数成功");
this.getDataList();
}
});
},
});
},
//删除参数组方法
handleDeleteParamGroup(group) {
this.$Modal.confirm({
title: "确认删除",
// 记得确认修改此处
content: "您确认要删除 " + group.groupName + " ?",
loading: true,
onOk: () => {
// 删除
deleteParamsGroup(group.groupId).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除参数成功");
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" >
.row {
overflow: hidden;
margin: 20px 0;
}
.params {
align-items: center;
display: flex;
padding: 3px;
background-color: #f5f7fa;
font-size: 14px;
justify-content: space-between;
}
.ivu-card-head {
background-color: #f5f7fa;
}
.ivu-btn {
font-size: 13px;
}
.paramsGroup {
flex-wrap: wrap;
display: flex;
flex-direction: row;
width: 100%;
}
</style>

426
manager/src/views/goods/goods-manage/spec.vue Normal file
View File

@@ -0,0 +1,426 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="规格名称" prop="specName">
<Input
type="text"
v-model="searchForm.specName"
placeholder="请输入规格名称"
clearable
style="width: 200px"
/>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="add" type="primary" >添加</Button>
<Button @click="delAll" >批量删除</Button>
</Row>
<Row class="padding-row">
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
sortable="custom"
@on-sort-change="changeSort"
@on-selection-change="changeSelect"
>
</Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[10, 20, 50]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
</Col>
</Row>
<Modal
:title="modalTitle"
v-model="modalVisible"
:mask-closable="false"
:width="500"
>
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
<FormItem label="规格名称" prop="specName">
<Input v-model="form.specName" maxlength="30" clearable style="width: 100%" />
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="modalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="saveSpec"
>提交</Button
>
</div>
</Modal>
<Modal
:title="modalTitle"
v-model="dialogSpecValuesVisible"
:mask-closable="false"
:width="500"
:styles="{ top: '30px' }"
class="permModal"
>
<Form ref="specForm" :model="specForm" :label-width="100">
<Select
v-model="specForm.specValue"
placeholder="输入后回车添加"
multiple
filterable
allow-create
:popper-append-to-body="false"
popper-class="spec-values-popper"
style="width: 100%; text-align: left; margin-right: 10px"
>
<Option
v-for="item in specValues"
:value="item.specValue"
:key="item.id"
:label="item.specValue"
>
</Option>
</Select>
</Form>
<div slot="footer">
<Button type="text" @click="dialogSpecValuesVisible = false"
>取消</Button
>
<Button
type="primary"
:loading="submitLoading"
@click="submitSpecValuesForm"
>提交</Button
>
</div>
</Modal>
</div>
</template>
<script>
import {
getSpecListData,
insertSpec,
updateSpec,
delSpec,
getSpecValuesListData,
saveSpecValues,
} from "@/api/goods";
export default {
name: "spec",
components: {},
data() {
return {
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
dialogSpecValuesVisible: false, // 添加或编辑规格值
specTitle: "", // 添加或编辑规格值
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "createTime", // 默认排序字段
order: "asc", // 默认排序方式
},
form: {
// 添加或编辑表单对象初始化数据
specName: "",
specValue: "",
},
specForm: {},
/** 编辑规格值 */
specValues: [],
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
type: "selection",
width: 60,
align: "center",
},
{
title: "规格名称",
key: "specName",
width: 200,
},
{
title: "规格值",
key: "specValue",
minWidth: 250,
tooltip: true
},
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 250,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.editSpec(params.row);
},
},
},
"编辑规格值"
),
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.edit(params.row);
},
},
},
"编辑"
),
h(
"Button",
{
props: {
type: "error",
size: "small",
},
on: {
click: () => {
this.remove(params.row);
},
},
},
"删除"
),
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
};
},
methods: {
init() {
this.getDataList();
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
handleReset() {
this.$refs.searchForm.resetFields();
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
// 重新加载数据
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
},
getDataList() {
this.loading = true;
// 带多条件搜索参数获取表单数据 请自行修改接口
getSpecListData(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.loading = false;
},
submitSpecValuesForm() {
saveSpecValues(this.specForm.specId, this.specForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("规格值保存成功");
this.getDataList();
this.modalVisible = false;
this.dialogSpecValuesVisible = false;
}
});
},
saveSpec() {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据
delete this.form.id;
insertSpec(this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
} else {
// 编辑
updateSpec(this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
}
}
});
},
add() {
this.modalType = 0;
this.modalTitle = "添加";
this.$refs.form.resetFields();
delete this.form.id;
this.modalVisible = true;
},
edit(v) {
this.modalType = 1;
this.modalTitle = "编辑";
this.$refs.form.resetFields();
// 转换null为""
for (let attr in v) {
if (v[attr] === null) {
v[attr] = "";
}
}
let str = JSON.stringify(v);
let data = JSON.parse(str);
this.form = data;
this.modalVisible = true;
},
editSpec(v) {
getSpecValuesListData(v.id).then((res) => {
this.modalType = 1;
this.modalTitle = "编辑";
this.specValues = res.result;
this.specForm.specValue = res.result.map(item => item.specValue)
this.specForm.specId = v.id;
this.dialogSpecValuesVisible = true;
});
},
remove(v) {
this.$Modal.confirm({
title: "确认删除",
// 记得确认修改此处
content: "您确认要删除 " + v.specName + " ?",
loading: true,
onOk: () => {
// 删除
delSpec(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
delAll() {
if (this.selectCount <= 0) {
this.$Message.warning("您还未选择要删除的数据");
return;
}
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
loading: true,
onOk: () => {
let ids = "";
this.selectList.forEach(function (e) {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
// 批量删除
delSpec(ids).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除成功");
this.clearSelectAll();
this.searchForm.pageNumber = 1
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss">
@import "@/styles/table-common.scss";
</style>