hotel-saas-tenant-frontend/src/views/pos/diandan.vue

<template>
<a-card :bordered="false" class="card-pd">
    <a-tabs v-model="tabPosTypeId" @change="tabPosTypeChange">
        <a-tab-pane :key="item.id" :tab="item.name" v-for="item in posTypeList"></a-tab-pane>
    </a-tabs>
    <div style="display: flex; height: calc(100vh - 350px);">
        <a-card style="width: 30%">
            <a href="#" @click="remarkModal">
                <a-icon type="edit" />整单备注</a>
            <p v-if="selectRoomOrder && selectRoomOrder.roomName">
                <a-icon type="user" /> 房间：{{ selectRoomOrder.roomName }},姓名:{{ selectRoomOrder.customerName }}
            </p>
            <a-table bordered :columns="columns" :data-source="selectGoodsList" :row-selection="rowSelection" rowKey="id" :scroll="{ y: 560 }">
                <template slot="num" slot-scope="text, record, index">
                    <div>
                        <a-input-number v-model="record.num" :max="record.inventory" @change="(event) => numChange(event, index)" />
                    </div>
                </template>
                <template slot="required" slot-scope="text, record, index">
                    <div>
                        <a-switch v-model="record.required" />
                    </div>
                </template>

                <span slot="action" slot-scope="text, record, index">
                    <a @click="handleDelete(index)">删除</a>
                </span>
            </a-table>
            <p>数量：{{ sum }}</p>
            <div style="display: flex; gap: 5px; flex-flow: wrap">
                <a-button @click="handleClear" :disabled="btnDisabled">清空</a-button>
                <!-- <a-button @click="handleAdd" :disabled="btnDisabled">备注</a-button> -->
                <!-- <a-button :disabled="btnDisabled">退货</a-button> -->
                <a-button v-if="!btnDisabled" @click="handleAdd">挂单</a-button>
                <a-button v-else @click="handlePickingGoodsOrder">取单</a-button>
                <a-button v-if="selectRoomOrder && selectRoomOrder.roomName && !btnDisabled" @click="handleToRoomFeePayment">确定挂房帐</a-button>
                <a-button v-else @click="handleSelectCheckInRoomOrder">挂房帐</a-button>
                <a-button :disabled="btnDisabled" type="danger" @click="handlePayment">结账￥{{ amount.toFixed(2) }}</a-button>
                <a-button :disabled="btnDisabled">退货</a-button>
            </div>
        </a-card>
        <a-card style="width: 75%;position: relative;">
            <a-tabs v-model="tabgoodsTypeId" @change="tabGoodsTypeChange">
                <a-tab-pane key="1" tab="全部"></a-tab-pane>
                <a-tab-pane :key="item.id" :tab="item.name" v-for="item in goodsTypeList"></a-tab-pane>
            </a-tabs>
            <a-row :gutter="[5, 5]">
                <a-col v-for="item in dataSource" :key="item.id" :span="3" @click.stop="itemClick(item)">
                    <div class="room-item check">
                        <div class="select-cell"></div>
                        <template v-if="item.id != '0'">
                            <div>{{ item.name }}</div>
                            <div style="margin-top: 10px; color: red">
                                ￥{{ item.sellingPrice.toFixed(2) }}
                            </div>
                            <div style="margin-top: 10px">库{{ item.inventory }}</div>
                            <div v-if="item.isSellClear" style="display: flex; justify-content: right">
                                <a-tag color="#f50"> 沽清 </a-tag>
                            </div>
                        </template>
                        <template v-else>
                            <div style="font-weight: 800; text-align: center">＋临时菜</div>
                        </template>
                    </div>
                </a-col>
            </a-row>
            <a-row style="margin-top:30px;">
                <a-space>
                  <a-input v-if="!isSaoma" placeholder="输入名称、简拼、条码"></a-input>
                  <a-input v-else placeholder="请扫描条码"></a-input>
                  <a-button v-if="!isSaoma">查询</a-button>
                  <a-button @click="isSaoma=!isSaoma">切换为{{isSaoma?'查询':'扫码'}}模式</a-button>
                </a-space>
            </a-row>
        </a-card>
        
    </div>
    <payment-modal ref="modalPaymentForm" @ok="modalFormOk"></payment-modal>
    <goods-modal ref="modalGoodsForm" @ok="modalFormOk2"></goods-modal>
    <picking-goods-order-modal ref="modalPickingGoodsOrderForm" @ok="modalPickingGoodsOrderFormOk"></picking-goods-order-modal>
    <select-check-in-room-order-modal ref="modalSelectCheckInRoomOrderModal" @ok="modalSelectCheckInRoomOrderFormOk"></select-check-in-room-order-modal>

    <a-modal @cancel="isRemarkModal = false" :visible="isRemarkModal" title="添加备注">
        <a-form-model>
            <a-form-model-item label="备注">
                <a-input v-model="remark" type="textarea" />
            </a-form-model-item>
        </a-form-model>
    </a-modal>

</a-card>
</template>

  
<script>
// import { JeecgListMixin } from "@/mixins/JeecgListMixin";
// import PosRegionModal from "./modules/PosRegionModal";
import {
    filterObj
} from "@/utils/util";
import {
    getAction,
    postAction,
    deleteAction
} from "@/api/manage";
import PaymentModal from "./modules/PaymentModal.vue";
import goodsModal from "./modules/goodStock/goodsModal.vue";
import PickingGoodsOrderModal from "./modules/PickingGoodsOrderModal.vue";
import SelectCheckInRoomOrderModal from "./modules/SelectCheckInRoomOrderModal.vue";
import {
    computed
} from "vue";
import {
    tree
} from "@/api/good";
const columns = [{
        title: "商品名称",
        dataIndex: "name",
    },
    {
        title: "数量",
        dataIndex: "num",
        scopedSlots: {
            customRender: "num"
        },
    },
    {
        title: "售价",
        dataIndex: "sellingPrice",
    },
];
export default {
    name: "memberList",
    components: {
        PaymentModal,
        goodsModal,
        PickingGoodsOrderModal,
        SelectCheckInRoomOrderModal,
    },
    data() {
        return {
            isRemarkModal: false,
            isSaoma: false,
            remark:'',
            columns,
            sellClear: 0,
            queryParam: {},
            // 分页参数
            ipagination: {
                current: 1,
                pageSize: 99999,
                pageSizeOptions: ["10", "20", "30"],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条";
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0,
            },
            url: {
                list: "/pos/posSellClearGoods/list",
                delete: "/pos/posSellClearGoods/delete",
                deleteBatch: "/pos/posSellClearGoods/deleteBatch",
                exportXlsUrl: "/pos/posSellClearGoods/exportXls",
                importExcelUrl: "pos/posSellClearGoods/importExcel",
            },
            dictOptions: {},
            superFieldList: [],
            selectedRowKeys: [],
            isorter: {
                column: "createTime",
                order: "desc",
            },
            treeData: [],
            selectGoods: {},
            posTypeList: [],
            tabPosTypeId: "",
            selectGoodsList: [],
            goodsTypeList: [],
            tabgoodsTypeId: "1",
            dataSource: [],
            oldSelectGoodsList: [],
            selectOrderInfo: {},
            selectRoomOrder: {},
        };
    },
    provide() {
        return {
            treeData: computed(() => this.treeData),
        };
    },
    computed: {
        rowSelection() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name,
                    },
                }),
            };
        },
        sum() {
            return this.selectGoodsList.reduce(function (total, item) {
                return total + item.num;
            }, 0);
        },
        amount() {
            return this.selectGoodsList.reduce(function (total, item) {
                return total + item.sellingPrice * item.num;
            }, 0);
        },
        btnDisabled() {
            var res = this.selectGoodsList && this.selectGoodsList.length > 0;
            return !res;
        },
    },
    created() {
        this.dataSource = [{
            id: "0"
        }];
        getAction("/pos/posType/list", {
            pageNo: 1,
            pageSize: 99
        }).then((res) => {
            if (res.success) {
                this.posTypeList = res.result.records;
                if (this.posTypeList && this.posTypeList.length > 0) {
                    this.tabPosTypeId = this.posTypeList[0].id;
                    this.loadGoodsType();
                }
            }
        });
        this.loadTree();
    },
    methods: {
        remarkModal() {
            this.isRemarkModal = true;
        },

        loadTree() {
            var that = this;
            tree().then((res) => {
                if (res.success) {
                    this.treeData = res.result;
                }
            });
        },
        modalFormOk() {},
        modalFormOk2(e) {
            console.log(e);
            var good = JSON.parse(JSON.stringify(e));
            this.$set(good, "num", 1);
            this.selectGoodsList.push(good);
        },
        modalSelectCheckInRoomOrderFormOk(e) {
            console.log(e);
            this.selectRoomOrder = e;
        },
        modalPickingGoodsOrderFormOk(e) {
            console.log(e);
            if (e && e.orderDetailList && e.orderDetailList.length > 0) {
                this.selectOrderInfo = e.orderInfo;
                e.orderDetailList.forEach((t) => {
                    t.sellingPrice = t.payMoney;
                    t.name = t.goodsName;
                    t.id = t.goodsId;
                });
                this.selectGoodsList = e.orderDetailList;
            }
        },
        numChange(e, index) {
            console.log(e);
            if (e <= 0) {
                this.selectGoodsList.splice(index, 1);
            }
        },
        handleClear() {
            this.selectGoodsList = [];
            // this.selectOrderInfo = {};
        },
        tabPosTypeChange(e) {
            this.loadGoodsType();
        },
        tabGoodsTypeChange(e) {
            this.loadGoods();
        },
        loadGoodsType() {
            getAction("/rooms/cesStockType/getTopTypesByPosType", {
                posType: this.tabPosTypeId,
            }).then((res2) => {
                if (res2.success) {
                    this.goodsTypeList = res2.result;
                    if (this.goodsTypeList && this.goodsTypeList.length > 0) {
                        this.loadGoods();
                    }
                }
            });
        },
        loadGoods() {
            var ids = [];
            if (this.tabgoodsTypeId === "1") {
                this.goodsTypeList.forEach((t) => {
                    ids.push(t.id);
                });
            } else {
                ids.push(this.tabgoodsTypeId);
            }
            this.dataSource = [{
                id: "0"
            }];
            getAction("/pos/posSellClearGoods/list", {
                pageNo: 1,
                pageSize: 99999,
                goodTypes: ids,
            }).then((res) => {
                if (res.success) {
                    this.dataSource = [...this.dataSource, ...res.result.records];
                }
            });
        },
        handleDelete() {
            deleteAction("/pos/posSellClearGoods/delete", {
                    goodsId: this.selectGoods.id,
                })
                .then((res) => {
                    if (res.success) {
                        this.$message.success(res.message);
                        this.loadData();
                        this.sellClear = 0;
                    } else {
                        this.$message.warning(res.message);
                    }
                })
                .finally(() => {});
        },
        handleSelectCheckInRoomOrder() {
            this.$refs.modalSelectCheckInRoomOrderModal.add();
            this.$refs.modalSelectCheckInRoomOrderModal.title = "选择转帐人";
            this.$refs.modalSelectCheckInRoomOrderModal.disableSubmit = false;
        },
        handlePickingGoodsOrder() {
            this.$refs.modalPickingGoodsOrderForm.add();
            this.$refs.modalPickingGoodsOrderForm.title = "取单";
            this.$refs.modalPickingGoodsOrderForm.disableSubmit = false;
        },
        handleAddTempGoods() {
            this.$refs.modalGoodsForm.add();
            this.$refs.modalGoodsForm.title = "新增菜品";
            this.$refs.modalGoodsForm.disableSubmit = false;
        },
        handleToRoomFeePayment() {
            this.handleAdd();
        },
        handlePayment() {
            this.handleAdd((e) => {
                var amount = this.oldSelectGoodsList.reduce(function (total, item) {
                    return total + item.sellingPrice * item.num;
                }, 0);
                this.$refs.modalPaymentForm.edit({
                    billAmount: amount,
                    deposit: 0,
                    roomFee: amount,
                    subjectType: 5,
                    feeType: 2,
                    preferentialType: 1,
                    couponFirstAmount: 0,
                    discount: 9,
                    orderCode: e,
                });
                this.$refs.modalPaymentForm.title = "POS结账";
                this.$refs.modalPaymentForm.disableSubmit = false;
            });
        },
        handleAdd(callback) {
            if (!this.selectGoodsList || this.selectGoodsList.length <= 0) {
                this.$message.warning("请先选择商品");
                return;
            }
            var _info = JSON.parse(localStorage.getItem("storeInfo"));
            var model = {
                goodsId: this.selectGoods.id
            };
            if (_info) {
                model.hotelId = _info.id;
            }
            model.id = this.selectOrderInfo.id;
            model.toRoomFeeOrderId = this.selectRoomOrder.livingOrderId;
            model.posType = this.tabPosTypeId;
            var posOrderGoodsDetailList = [];
            this.selectGoodsList.forEach((t) => {
                posOrderGoodsDetailList.push({
                    goodsId: t.id,
                    num: t.num,
                    money: t.sellingPrice,
                });
            });
            model.posOrderGoodsDetailList = posOrderGoodsDetailList;
            postAction("/pos/posOrderGoods/add", model)
                .then((res) => {
                    if (res.success) {
                        this.$message.success(res.message);
                        this.oldSelectGoodsList = JSON.parse(
                            JSON.stringify(this.selectGoodsList)
                        );
                        this.selectGoodsList = [];
                        this.selectOrderInfo = {};
                        this.selectRoomOrder = {};
                        this.loadGoods();
                        if (callback) {
                            callback(res.result.code);
                        }
                    } else {
                        this.$message.warning(res.message);
                    }
                })
                .finally(() => {});
        },
        itemClick(row) {
            console.log(row);
            if (row.id == "0") {
                this.handleAddTempGoods();
                return;
            }
            if (row.isSellClear) {
                this.$message.warning("选择的商品已沽清");
                return;
            }
            var good = JSON.parse(JSON.stringify(row));
            this.$set(good, "num", 1);
            var find = this.selectGoodsList.find((t) => t.id === row.id);
            if (find) {
                if (find.inventory > find.num) {
                    find.num++;
                }
            } else {
                this.selectGoodsList.push(good);
            }
        },
    },
};
</script>
  
<style scoped>
@import "~@assets/less/common.less";

.room-item {
    height: 110px;
    /* line-height: 200px; */
    font-size: 13px;
    padding: 0px 5px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.check {
    border: #000 solid 3px;
}

.ant-table-wrapper {
    height: calc(100vh - 500px);
}

/deep/ .card-pd .ant-card-body {
    padding: 0 !important;
}

.select-cell {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>