增加ipad点餐设置
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user