增加ipad点餐设置
This commit is contained in:
parent
504aa80c9e
commit
5238df86e5
|
|
@ -0,0 +1,102 @@
|
||||||
|
import request from "@/utils/request";
|
||||||
|
import { Account_BaseUrl } from "@/api/config";
|
||||||
|
const baseURL = Account_BaseUrl + "/admin/padProd";
|
||||||
|
const API = {
|
||||||
|
getList(data: getListRequest) {
|
||||||
|
return request<any>({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "get",
|
||||||
|
params: data
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
get(params: getRequest) {
|
||||||
|
return request<any>({
|
||||||
|
url: `${baseURL}/detail`,
|
||||||
|
method: "get",
|
||||||
|
params
|
||||||
|
});
|
||||||
|
},
|
||||||
|
edit(data: editRequest) {
|
||||||
|
return request({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "put",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
add(data: addRequest) {
|
||||||
|
return request({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
delete(data: delteRequest) {
|
||||||
|
return request({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "delete",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default API;
|
||||||
|
|
||||||
|
export type delteRequest = number | string | [number | string];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PadDetailAddDTO
|
||||||
|
*/
|
||||||
|
export interface addRequest {
|
||||||
|
/**
|
||||||
|
* 布局id
|
||||||
|
*/
|
||||||
|
padLayoutId: number | null;
|
||||||
|
/**
|
||||||
|
* 商品分类id
|
||||||
|
*/
|
||||||
|
productCategoryId: number | null;
|
||||||
|
/**
|
||||||
|
* 商品id集合
|
||||||
|
*/
|
||||||
|
productIdList: number[] | null;
|
||||||
|
[property: string]: any;
|
||||||
|
}
|
||||||
|
export interface getRequest {
|
||||||
|
/**
|
||||||
|
* tb_pad_product_category Id
|
||||||
|
*/
|
||||||
|
id?: number;
|
||||||
|
[property: string]: any;
|
||||||
|
}
|
||||||
|
export interface getListRequest {
|
||||||
|
page?: string;
|
||||||
|
/**
|
||||||
|
* 分类id
|
||||||
|
*/
|
||||||
|
productCategoryId?: number;
|
||||||
|
size?: string;
|
||||||
|
[property: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PadDetailEditDTO
|
||||||
|
*/
|
||||||
|
export interface editRequest {
|
||||||
|
/**
|
||||||
|
* 列表id
|
||||||
|
*/
|
||||||
|
id: number | null;
|
||||||
|
/**
|
||||||
|
* 布局id
|
||||||
|
*/
|
||||||
|
padLayoutId?: number | null;
|
||||||
|
/**
|
||||||
|
* 商品列表id
|
||||||
|
*/
|
||||||
|
productIdList?: number[] | null;
|
||||||
|
/**
|
||||||
|
* 排序值
|
||||||
|
*/
|
||||||
|
sort: string;
|
||||||
|
[property: string]: any;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,235 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog title="选择商品" top="5vh" v-model="dialogVisible">
|
||||||
|
<el-form :model="searhForm" inline>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="searhForm.name" placeholder="商品名称"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select v-model="searhForm.category" placeholder="商品分类" :disabled="disableCategory">
|
||||||
|
<el-option
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
v-for="item in categoryList"
|
||||||
|
:key="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||||
|
<el-button @click="resetHandle">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="head-container">
|
||||||
|
<el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
|
||||||
|
<el-table-column type="selection" width="55" align="center" v-if="!radio"></el-table-column>
|
||||||
|
<el-table-column label="商品信息">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<div class="shop_info">
|
||||||
|
<el-image :src="scope.row.coverImg" style="width: 30px; height: 30px">
|
||||||
|
<template #error>
|
||||||
|
<div class="img_error">
|
||||||
|
<i class="icon el-icon-document-delete"></i>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-image>
|
||||||
|
<span>{{ scope.row.name }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="规格">
|
||||||
|
<template v-slot="scope">
|
||||||
|
{{ scope.row.typeEnum }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否售罄">
|
||||||
|
<template v-slot="scope">
|
||||||
|
{{ scope.row.isPauseSale == 1 ? "是" : "否" }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否分销">
|
||||||
|
<template v-slot="scope">
|
||||||
|
{{ scope.row.isDistribute == 1 ? "是" : "否" }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="售价">
|
||||||
|
<template v-slot="scope">￥{{ scope.row.lowPrice }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="销量/库存">
|
||||||
|
<template v-slot="scope">
|
||||||
|
{{ scope.row.realSalesNumber }}/{{ scope.row.stockNumber }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="分类名称" prop="categoryName"></el-table-column>
|
||||||
|
<el-table-column label="操作" v-if="radio">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<el-pagination
|
||||||
|
:total="tableData.total"
|
||||||
|
:current-page="tableData.page + 1"
|
||||||
|
:page-size="tableData.size"
|
||||||
|
@current-change="paginationChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
></el-pagination>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer" v-if="!radio">
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="confirmHandle">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import productApi from "@/api/product/index";
|
||||||
|
import paoductCategoryApi from "@/api/product/productclassification";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 是否禁用分类
|
||||||
|
disableCategory: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 是否为单选
|
||||||
|
radio: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogVisible: false,
|
||||||
|
searhForm: {
|
||||||
|
name: "",
|
||||||
|
category: "",
|
||||||
|
},
|
||||||
|
categoryList: [],
|
||||||
|
tableData: {
|
||||||
|
page: 0,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
loading: false,
|
||||||
|
list: [],
|
||||||
|
},
|
||||||
|
goods: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 单选商品
|
||||||
|
selectHandle(row) {
|
||||||
|
this.$emit("success", [{ ...row }]);
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
// 确定选商品
|
||||||
|
confirmHandle() {
|
||||||
|
let res = this.$refs.table.selection;
|
||||||
|
this.$emit("success", res);
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
// 重置查询
|
||||||
|
resetHandle() {
|
||||||
|
this.searhForm.name = "";
|
||||||
|
this.searhForm.category = "";
|
||||||
|
this.tableData.page = 0;
|
||||||
|
this.tableData.size = 10;
|
||||||
|
this.tableData.list = [];
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
// 分页大小改变
|
||||||
|
sizeChange(e) {
|
||||||
|
this.tableData.size = e;
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
// 分页回调
|
||||||
|
paginationChange(e) {
|
||||||
|
this.tableData.page = e - 1;
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
// 商品列表
|
||||||
|
async getTableData() {
|
||||||
|
this.tableData.loading = true;
|
||||||
|
try {
|
||||||
|
const res = await productApi.getPage({
|
||||||
|
page: this.tableData.page,
|
||||||
|
size: this.tableData.size,
|
||||||
|
name: this.searhForm.name,
|
||||||
|
categoryId: this.searhForm.category,
|
||||||
|
});
|
||||||
|
this.tableData.list = res.content;
|
||||||
|
this.tableData.total = res.totalElements;
|
||||||
|
|
||||||
|
if (this.goods.length) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.selection();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
this.tableData.loading = false;
|
||||||
|
}, 500);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 商品分类
|
||||||
|
async tbShopCategoryGet() {
|
||||||
|
try {
|
||||||
|
const res = await paoductCategoryApi.getPage({
|
||||||
|
page: 0,
|
||||||
|
size: 100,
|
||||||
|
});
|
||||||
|
this.categoryList = res.content;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async show(goods, categoryId) {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
if (goods && goods.length) {
|
||||||
|
this.goods = goods;
|
||||||
|
} else {
|
||||||
|
this.goods = [];
|
||||||
|
}
|
||||||
|
this.resetHandle();
|
||||||
|
|
||||||
|
console.log(categoryId);
|
||||||
|
|
||||||
|
if (categoryId) {
|
||||||
|
this.searhForm.category = categoryId;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(this.searhForm);
|
||||||
|
|
||||||
|
await this.tbShopCategoryGet();
|
||||||
|
await this.getTableData();
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
},
|
||||||
|
selection() {
|
||||||
|
this.goods.forEach((row) => {
|
||||||
|
this.tableData.list.forEach((item, index) => {
|
||||||
|
if (row.id == item.id) {
|
||||||
|
this.$refs.table.toggleRowSelection(this.tableData.list[index]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.shop_info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,543 @@
|
||||||
|
<!-- 新增pad选菜页 -->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog
|
||||||
|
:title="`${preview ? '预览' : form.id ? '编辑' : '添加'}平板菜谱`"
|
||||||
|
top="5vh"
|
||||||
|
width="1000px"
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:show-close="preview"
|
||||||
|
>
|
||||||
|
<div class="content" v-loading="pageLoading">
|
||||||
|
<div class="editor_wrap" :class="[`type${typeListActive}`]">
|
||||||
|
<template v-if="typeListActive != 6">
|
||||||
|
<div
|
||||||
|
class="btn_wrap"
|
||||||
|
:class="[`div${index + 1}`]"
|
||||||
|
v-for="(item, index) in form.list"
|
||||||
|
:key="index"
|
||||||
|
@click="showSelectGoods(index)"
|
||||||
|
>
|
||||||
|
<div class="btn" v-if="!item.id">
|
||||||
|
<el-icon size="40" color="#dddfe6"><Plus /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="cover" v-else>
|
||||||
|
<img class="img" :src="item.coverImg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="btn_wrap" v-if="!form.list.length">
|
||||||
|
<div class="btn">
|
||||||
|
<el-button @click="oneClick">一键生成菜单</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="goods_list" v-else>
|
||||||
|
<div
|
||||||
|
class="btn_wrap"
|
||||||
|
:class="[`div${index + 1}`]"
|
||||||
|
v-for="(item, index) in form.list"
|
||||||
|
:key="index"
|
||||||
|
@click="selectGoods(item)"
|
||||||
|
>
|
||||||
|
<div class="info" :class="{ active: item.active }">
|
||||||
|
<span class="t1">{{ item.name }}</span>
|
||||||
|
<span class="t1">￥{{ item.lowPrice }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="tab" v-if="!preview">
|
||||||
|
<el-radio-group v-model="typeListActive" @change="tabChange">
|
||||||
|
<el-radio-button :label="item.id" v-for="item in typeList" :key="item.id">
|
||||||
|
{{ item.name }}
|
||||||
|
</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog_footer" v-if="!preview">
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" :loading="loading" @click="submitHandle">保 存</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
<GoodsSelect ref="refSelGoods"></GoodsSelect>
|
||||||
|
<!-- <shopList ref="shopList" disableCategory radio @success="selectConfirmGoods" /> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { layoutList } from "./layout.js";
|
||||||
|
// import shopList from "@/components/shopList/index.vue";
|
||||||
|
// import { tbProduct } from "@/api/shop.js";
|
||||||
|
// import { layoutlist, productGroup, productCategoryDetail, productGroupPut } from "@/api/pad.js";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
category: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogVisible: false,
|
||||||
|
pageLoading: false,
|
||||||
|
loading: false,
|
||||||
|
activeItem: 0,
|
||||||
|
form: {
|
||||||
|
id: "",
|
||||||
|
list: [],
|
||||||
|
},
|
||||||
|
typeListActive: 1,
|
||||||
|
typeList: [],
|
||||||
|
preview: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.layoutlist();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选中菜品
|
||||||
|
selectGoods(item) {
|
||||||
|
item.active = !item.active;
|
||||||
|
},
|
||||||
|
// 一键生成菜单
|
||||||
|
async oneClick() {
|
||||||
|
try {
|
||||||
|
const res = await tbProduct({
|
||||||
|
categoryId: this.category,
|
||||||
|
page: 0,
|
||||||
|
size: 20,
|
||||||
|
sort: "id",
|
||||||
|
shopId: localStorage.getItem("shopId"),
|
||||||
|
});
|
||||||
|
this.form.list = res.content.map((item, index) => {
|
||||||
|
if (index == 0 || index == 12) {
|
||||||
|
item.active = true;
|
||||||
|
} else {
|
||||||
|
item.active = false;
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 提交
|
||||||
|
async submitHandle() {
|
||||||
|
try {
|
||||||
|
if (this.typeList.find((item) => item.id == this.typeListActive).code == "text-menu") {
|
||||||
|
if (!this.form.list.length) {
|
||||||
|
this.$notify.error({
|
||||||
|
title: "错误",
|
||||||
|
message: "请生成菜单",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let isEmpty = true;
|
||||||
|
this.form.list.map((item) => {
|
||||||
|
if (!item.id) isEmpty = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isEmpty) {
|
||||||
|
this.$notify.error({
|
||||||
|
title: "错误",
|
||||||
|
message: "请添加商品",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true;
|
||||||
|
let res = null;
|
||||||
|
if (this.form.id) {
|
||||||
|
await productGroupPut({
|
||||||
|
id: this.form.id,
|
||||||
|
padLayoutId: this.typeListActive,
|
||||||
|
customName: "",
|
||||||
|
productCategoryId: this.category || this.form.list[0].categoryId,
|
||||||
|
shopId: localStorage.getItem("shopId"),
|
||||||
|
sort: 1,
|
||||||
|
remark: "",
|
||||||
|
productIdList: this.form.list.map((item) => item.id),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
res = await productGroup({
|
||||||
|
padLayoutId: this.typeListActive,
|
||||||
|
customName: "",
|
||||||
|
productCategoryId: this.category,
|
||||||
|
shopId: localStorage.getItem("shopId"),
|
||||||
|
sort: 1,
|
||||||
|
remark: "",
|
||||||
|
productIdList: this.form.list.map((item) => item.id),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.loading = false;
|
||||||
|
if (this.form.id) {
|
||||||
|
this.$notify.success({
|
||||||
|
title: "提示",
|
||||||
|
message: "编辑成功",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$notify.success({
|
||||||
|
title: "提示",
|
||||||
|
message: "添加成功",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.$emit("success");
|
||||||
|
} catch (error) {
|
||||||
|
this.loading = false;
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取
|
||||||
|
async layoutlist() {
|
||||||
|
this.typeList = layoutList;
|
||||||
|
return;
|
||||||
|
try {
|
||||||
|
const res = await layoutlist();
|
||||||
|
this.typeList = res;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 显示选择商品
|
||||||
|
showSelectGoods(index) {
|
||||||
|
this.activeItem = index;
|
||||||
|
this.$refs.refSelGoods.show([], this.category);
|
||||||
|
},
|
||||||
|
// 确认选择商品
|
||||||
|
selectConfirmGoods(res) {
|
||||||
|
// this.form.list = res
|
||||||
|
const flag = this.form.list.filter((item) => item.id == res[0].id);
|
||||||
|
|
||||||
|
if (flag.length) {
|
||||||
|
this.$notify({
|
||||||
|
title: "注意",
|
||||||
|
message: "请勿重复添加",
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$set(this.form.list, this.activeItem, { ...res[0] });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 切换tab
|
||||||
|
tabChange() {
|
||||||
|
this.form.list = [];
|
||||||
|
if (this.typeListActive != 6) {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 初始化
|
||||||
|
init() {
|
||||||
|
let num = this.typeList.find((item) => item.id == this.typeListActive).maximum;
|
||||||
|
for (let i = 0; i < num; i++) {
|
||||||
|
this.form.list.push({});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取详情
|
||||||
|
async productCategoryDetail(id) {
|
||||||
|
try {
|
||||||
|
this.pageLoading = true;
|
||||||
|
const res = await productCategoryDetail(id);
|
||||||
|
this.pageLoading = false;
|
||||||
|
this.typeListActive = res.padLayoutId;
|
||||||
|
this.form.id = res.id;
|
||||||
|
|
||||||
|
this.form.list = [];
|
||||||
|
this.form.list = res.productList;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.form.id = "";
|
||||||
|
this.form.list = [];
|
||||||
|
},
|
||||||
|
// 显示 type=1 编辑 type=2预览
|
||||||
|
async show(id = "", type = 1) {
|
||||||
|
this.reset();
|
||||||
|
this.typeListActive = 1;
|
||||||
|
this.dialogVisible = true;
|
||||||
|
this.tabChange();
|
||||||
|
if (id) {
|
||||||
|
await this.productCategoryDetail(id);
|
||||||
|
}
|
||||||
|
if (type == 2) {
|
||||||
|
this.preview = true;
|
||||||
|
} else {
|
||||||
|
this.preview = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.content {
|
||||||
|
.editor_wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 560px;
|
||||||
|
|
||||||
|
&.type2 {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type3 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-column-gap: 10px;
|
||||||
|
grid-row-gap: 10px;
|
||||||
|
|
||||||
|
.div1 {
|
||||||
|
grid-area: 1 / 1 / 3 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2 {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div3 {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type4 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-column-gap: 10px;
|
||||||
|
grid-row-gap: 10px;
|
||||||
|
|
||||||
|
.div1 {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2 {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div3 {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div4 {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type5 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-column-gap: 10px;
|
||||||
|
grid-row-gap: 10px;
|
||||||
|
|
||||||
|
.div1 {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2 {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div3 {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div4 {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div5 {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div6 {
|
||||||
|
grid-area: 2 / 3 / 3 / 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type6 {
|
||||||
|
.goods_list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(10, 1fr);
|
||||||
|
grid-column-gap: 20px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
|
||||||
|
.div1 {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2 {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div3 {
|
||||||
|
grid-area: 3 / 1 / 4 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div4 {
|
||||||
|
grid-area: 4 / 1 / 5 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div5 {
|
||||||
|
grid-area: 5 / 1 / 6 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div6 {
|
||||||
|
grid-area: 6 / 1 / 7 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div7 {
|
||||||
|
grid-area: 7 / 1 / 8 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div8 {
|
||||||
|
grid-area: 8 / 1 / 9 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div9 {
|
||||||
|
grid-area: 9 / 1 / 10 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div10 {
|
||||||
|
grid-area: 10 / 1 / 11 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div11 {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div12 {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div13 {
|
||||||
|
grid-area: 3 / 2 / 4 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div14 {
|
||||||
|
grid-area: 4 / 2 / 5 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div15 {
|
||||||
|
grid-area: 5 / 2 / 6 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div16 {
|
||||||
|
grid-area: 6 / 2 / 7 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div17 {
|
||||||
|
grid-area: 7 / 2 / 8 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div18 {
|
||||||
|
grid-area: 8 / 2 / 9 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div19 {
|
||||||
|
grid-area: 9 / 2 / 10 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div20 {
|
||||||
|
grid-area: 10 / 2 / 11 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods_list {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn_wrap {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #ececec;
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #bc1414;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: 120px;
|
||||||
|
height: 60px;
|
||||||
|
border: 22px solid #fff;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
opacity: 0.3;
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
right: 10%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #dddfe6;
|
||||||
|
background: #f7f7fa;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 40px;
|
||||||
|
color: #dddfe6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
height: 100%;
|
||||||
|
background: #f7f7fa;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog_footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
export const layoutList = [
|
||||||
|
{
|
||||||
|
code: "single",
|
||||||
|
createTime: "2024-10-22 15:50:05",
|
||||||
|
delFlag: 0,
|
||||||
|
id: 1,
|
||||||
|
maximum: 1,
|
||||||
|
name: "单图",
|
||||||
|
remark: null,
|
||||||
|
sort: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "double",
|
||||||
|
createTime: "2024-10-22 15:50:34",
|
||||||
|
delFlag: 0,
|
||||||
|
id: 2,
|
||||||
|
maximum: 2,
|
||||||
|
name: "双图",
|
||||||
|
remark: null,
|
||||||
|
sort: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "L1-R2",
|
||||||
|
createTime: "2024-10-22 15:51:20",
|
||||||
|
delFlag: 0,
|
||||||
|
id: 3,
|
||||||
|
maximum: 3,
|
||||||
|
name: "左一右二",
|
||||||
|
remark: null,
|
||||||
|
sort: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "4-gird",
|
||||||
|
createTime: "2024-10-22 15:52:22",
|
||||||
|
delFlag: 0,
|
||||||
|
id: 4,
|
||||||
|
maximum: 4,
|
||||||
|
name: "四图",
|
||||||
|
remark: "四宫格",
|
||||||
|
sort: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "6-grid",
|
||||||
|
createTime: "2024-10-22 15:53:21",
|
||||||
|
delFlag: 0,
|
||||||
|
id: 5,
|
||||||
|
maximum: 6,
|
||||||
|
name: "六图",
|
||||||
|
remark: "六宫格",
|
||||||
|
sort: 4,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -1 +1,305 @@
|
||||||
<template></template>
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="left_menu">
|
||||||
|
<div class="search_wrap">
|
||||||
|
<el-input placeholder="名称/代码" v-model="query.name" @change="searchCateory">
|
||||||
|
<template #append>
|
||||||
|
<el-button icon="el-icon-search" @click="searchCateory"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="tree_wrap">
|
||||||
|
<!-- <el-tree :data="treeData" node-key="id" highlight-current :props="{ label: 'name' }" default-expand-all
|
||||||
|
@node-click="treeItemClick"></el-tree> -->
|
||||||
|
<div
|
||||||
|
class="item"
|
||||||
|
:class="{ active: selectCatoryIndex == index }"
|
||||||
|
v-for="(item, index) in treeData"
|
||||||
|
:key="item.id"
|
||||||
|
@click="treeItemClick(item, index)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table_wrap">
|
||||||
|
<div class="header_wrap">
|
||||||
|
<el-button type="primary" @click="addHandle">新建</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="table" id="table_drag">
|
||||||
|
<el-table
|
||||||
|
ref="table"
|
||||||
|
:data="tableData.list"
|
||||||
|
border
|
||||||
|
height="100%"
|
||||||
|
v-loading="tableData.loading"
|
||||||
|
row-key="id"
|
||||||
|
>
|
||||||
|
<el-table-column label="序号" type="index" width="80"></el-table-column>
|
||||||
|
<el-table-column label="ID" prop="id" width="80"></el-table-column>
|
||||||
|
<el-table-column label="菜品名称" prop="productNames"></el-table-column>
|
||||||
|
<el-table-column label="类型" prop="padLayoutName"></el-table-column>
|
||||||
|
<el-table-column label="所属小类" prop="productCategoryName"></el-table-column>
|
||||||
|
<el-table-column label="自定义分类" prop="customName"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="200">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button type="text" v-if="isPcBowser">拖动排序</el-button>
|
||||||
|
<el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
|
||||||
|
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle(scope.row.id)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button type="text">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
<el-button type="text" @click="editorHandle(scope.row, 2)">预览</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="head-container">
|
||||||
|
<el-pagination
|
||||||
|
@size-change="paginationSizeChange"
|
||||||
|
:total="tableData.total"
|
||||||
|
:current-page="tableData.page"
|
||||||
|
:page-size="tableData.size"
|
||||||
|
@current-change="paginationChange"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<AddPadPage ref="AddPadPage" :category="selectCatory.id" @success="addSuccess" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Sortable from "sortablejs";
|
||||||
|
import AddPadPage from "./components/addPadPage.vue";
|
||||||
|
import paoductCategoryApi from "@/api/product/productclassification";
|
||||||
|
import padProdApi from "@/api/account/padProd";
|
||||||
|
import { swapArrayEle } from "@/utils/tools.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AddPadPage,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {
|
||||||
|
name: "",
|
||||||
|
},
|
||||||
|
selectCatoryIndex: 0,
|
||||||
|
selectCatory: "",
|
||||||
|
treeDataOrgin: [],
|
||||||
|
treeData: [],
|
||||||
|
tableData: {
|
||||||
|
loading: false,
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
list: [],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.tbShopCategoryGet();
|
||||||
|
if (this.isPcBowser) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.tableDrag();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 搜索分类
|
||||||
|
searchCateory() {
|
||||||
|
this.treeData = this.treeDataOrgin.filter((item) => {
|
||||||
|
return item.name.includes(this.query.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.treeData.length) {
|
||||||
|
this.selectCatoryIndex = 0;
|
||||||
|
this.selectCatory = this.treeData[this.selectCatoryIndex];
|
||||||
|
this.getTableData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//表格拖拽
|
||||||
|
tableDrag() {
|
||||||
|
const el = document.querySelector("#table_drag .el-table__body-wrapper tbody");
|
||||||
|
new Sortable(el, {
|
||||||
|
animation: 150,
|
||||||
|
onEnd: async (e) => {
|
||||||
|
// console.log('拖拽结束===', e);
|
||||||
|
if (e.oldIndex == e.newIndex) return;
|
||||||
|
|
||||||
|
let arr = swapArrayEle(this.tableData.list, e.oldIndex, e.newIndex);
|
||||||
|
console.log(arr);
|
||||||
|
let data = arr.map((item, index) => {
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
sort: index,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
await productCategorySort(data);
|
||||||
|
this.getTableData();
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
async delTableHandle(id) {
|
||||||
|
try {
|
||||||
|
await padProdApi.delete(id);
|
||||||
|
this.$message.success("已删除");
|
||||||
|
this.getTableData();
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 编辑 预览
|
||||||
|
editorHandle(row, type) {
|
||||||
|
this.$refs.AddPadPage.show(row.id, type);
|
||||||
|
},
|
||||||
|
// 新建成功
|
||||||
|
addSuccess() {
|
||||||
|
this.tableData.page = 1;
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
// 新建
|
||||||
|
addHandle() {
|
||||||
|
if (this.selectCatory.id) {
|
||||||
|
this.$refs.AddPadPage.show();
|
||||||
|
} else {
|
||||||
|
this.$notify.error({
|
||||||
|
title: "错误",
|
||||||
|
message: "请选择分类",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 分类被点击
|
||||||
|
treeItemClick(data, index) {
|
||||||
|
this.selectCatoryIndex = index;
|
||||||
|
this.selectCatory = data;
|
||||||
|
this.tableData.page = 1;
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
// 获取商品分类
|
||||||
|
async tbShopCategoryGet() {
|
||||||
|
this.tableData.loading = true;
|
||||||
|
try {
|
||||||
|
const res = await paoductCategoryApi.getList({
|
||||||
|
page: 0,
|
||||||
|
size: 100,
|
||||||
|
});
|
||||||
|
this.treeDataOrgin = res;
|
||||||
|
this.treeData = res;
|
||||||
|
this.selectCatory = res[this.selectCatoryIndex];
|
||||||
|
this.getTableData();
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 重置查询
|
||||||
|
resetHandle() {
|
||||||
|
this.tableData.page = 1;
|
||||||
|
this.tableData.size = 10;
|
||||||
|
this.tableData.list = [];
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
// 每页条数改变是回调
|
||||||
|
paginationSizeChange(e) {
|
||||||
|
this.tableData.size = e;
|
||||||
|
this.tableData.page = 1;
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
// 分页回调
|
||||||
|
paginationChange(e) {
|
||||||
|
this.tableData.page = e;
|
||||||
|
this.tableData.list = [];
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
// Pad点餐列表
|
||||||
|
async getTableData() {
|
||||||
|
try {
|
||||||
|
this.tableData.loading = true;
|
||||||
|
const res = await padProdApi.getList({
|
||||||
|
page: this.tableData.page,
|
||||||
|
size: this.tableData.size,
|
||||||
|
customName: "",
|
||||||
|
productCategoryId: this.selectCatory.id,
|
||||||
|
padLayoutId: "",
|
||||||
|
id: "",
|
||||||
|
});
|
||||||
|
this.tableData.loading = false;
|
||||||
|
this.tableData.list = res.records;
|
||||||
|
this.tableData.total = res.totalRow;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_menu {
|
||||||
|
width: 164px;
|
||||||
|
height: calc(100vh - 210px);
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
|
||||||
|
.search_wrap {
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree_wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_wrap {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 14px;
|
||||||
|
|
||||||
|
.header_wrap {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
padding-top: 15px;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 310px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-container {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue