czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加ipad点餐设置

Browse Source
This commit is contained in:
YeMingfei666
2025-02-22 11:09:02 +08:00
parent 504aa80c9e
commit 5238df86e5
5 changed files with 1237 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/components/GoodsSelect/index.vue Normal file
View File

@@ -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>