282 lines
7.6 KiB
Vue
282 lines
7.6 KiB
Vue
<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" @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";
|
|
import { ElMessage, ElNotification } from "element-plus";
|
|
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();
|
|
},
|
|
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 });
|
|
ElMessage.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 {
|
|
ElNotification.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: 1,
|
|
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> |