桌台点餐

src/views/pos/modules/UserNum.vue

@@ -0,0 +1,114 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <j-form-container :disabled="formDisabled">
+      <a-form-model
+        ref="form"
+        :model="model"
+        :rules="validatorRules"
+        slot="detail"
+      >
+        <a-row>
+          <a-col :span="24">
+            <a-form-model-item
+              label="就餐人数"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="userNum"
+            >
+              <a-input-number
+                v-model="model.userNum"
+                :min="1"
+                :max="10000"
+              ></a-input-number>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </j-form-container>
+  </a-spin>
+</template>
+
+<script>
+import { httpAction, getAction } from "@/api/manage";
+import { validateDuplicateValue } from "@/utils/util";
+
+export default {
+  name: "PosTypeForm",
+  components: {},
+  props: {
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      model: { state: 1, online: 0 },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      confirmLoading: false,
+      validatorRules: {
+        userNum: [{ required: true, message: "请输入就餐人数!" }],
+      },
+      url: {
+        add: "/pos/posTable/add",
+        edit: "/pos/posTable/addOrder",
+        queryById: "/pos/posTable/queryById",
+      },
+    };
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled;
+    },
+  },
+  created() {
+    var _info = JSON.parse(localStorage.getItem("storeInfo"));
+    if (_info) {
+      this.model.hotelId = _info.id;
+    }
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+  },
+  methods: {
+    add() {
+      this.edit(this.modelDefault);
+    },
+    edit(record) {
+      this.model = Object.assign({}, record);
+      this.visible = true;
+    },
+    submitForm() {
+      const that = this;
+      // 触发表单验证
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          that.confirmLoading = true;
+          let httpurl = this.url.edit;
+          let method = "put";
+          httpAction(httpurl, this.model, method)
+            .then((res) => {
+              if (res.success) {
+                that.$message.success(res.message);
+                that.$emit("ok");
+              } else {
+                that.$message.warning(res.message);
+              }
+            })
+            .finally(() => {
+              that.confirmLoading = false;
+            });
+        }
+      });
+    },
+  },
+};
+</script>

src/views/pos/modules/UserNumModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <pos-type-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></pos-type-form>
+  </j-modal>
+</template>
+
+<script>
+
+  import PosTypeForm from './UserNum'
+  export default {
+    name: 'PosTypeModal',
+    components: {
+      PosTypeForm
+    },
+    data () {
+      return {
+        title:'',
+        width:800,
+        visible: false,
+        disableSubmit: false
+      }
+    },
+    methods: {
+      add () {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.add();
+        })
+      },
+      edit (record) {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.edit(record);
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        this.$refs.realForm.submitForm();
+      },
+      submitCallback(){
+        this.$emit('ok');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>

src/views/pos/posInfo.vue

@@ -7,7 +7,7 @@
       </a-tab-pane>
       <a-tab-pane key="2">
         <span slot="tab"> 桌台点单 </span>
-        <pos-region></pos-region>
+        <tablediandangallery></tablediandangallery>
       </a-tab-pane>
       <a-tab-pane key="3">
         <span slot="tab"> 订单列表 </span>
@@ -32,20 +32,14 @@
 import diandan from "./diandan.vue";
 import posType from "./posType.vue";
 import goodsOrder from "./goodsOrder.vue";
-// import posTableType from "./components/pos/posTableType.vue";
-// import posSellClearGoods from "./components/pos/posSellClearGoods.vue";
-// import posThali from "./components/pos/posThali.vue";
-// import posMealSection from "./components/pos/posMealSection.vue";
+import tablediandangallery from "./tablediandangallery.vue";
 
 export default {
   components: {
     diandan,
     posType,
     goodsOrder,
-    // posTableType,
-    // posSellClearGoods,
-    // posThali,
-    // posMealSection,
+    tablediandangallery,
   },
   data() {
     return {};

src/views/pos/tablediandan.vue

@@ -0,0 +1,508 @@
+<template>
+  <a-card :bordered="false" class="card-pd" v-if="isShow">
+    <div style="display: flex; height: calc(100vh - 350px)">
+      <a-card style="width: 25%">
+        <a-row :gutter="[16, 16]">
+          <a-col :span="6">
+            <div>台号：{{ tableOrderInfo.name }}</div>
+          </a-col>
+          <a-col :span="6">
+            <div>人数：{{ tableOrderInfo.userNum }}</div>
+          </a-col>
+          <a-col :span="12">
+            <div>开台时间：{{ tableOrderInfo.orderTime }}</div>
+          </a-col>
+        </a-row>
+        <p v-if="selectRoomOrder && selectRoomOrder.id">
+          房间：{{ selectRoomOrder.tableNo }},姓名:{{ selectRoomOrder.id }}
+        </p>
+        <a-table
+          bordered
+          :columns="columns"
+          :data-source="selectGoodsList"
+          :pagination="false"
+          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" v-if="selectGoodsList.length == 0"
+            >清台</a-button
+          >
+
+          <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="selectGoodsList.length > 0"
+            type="danger"
+            @click="handleAdd"
+            >下单</a-button
+          >
+          <a-button
+            v-if="selectRoomOrder && selectRoomOrder.id && !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
+          >
+        </div>
+      </a-card>
+      <a-card style="width: 75%">
+        <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-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-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 {
+      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: {},
+      tableOrderInfo: {},
+      isShow: true,
+    };
+  },
+  provide() {
+    return {
+      treeData: computed(() => this.treeData),
+    };
+  },
+  computed: {
+    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() {},
+  activated() {
+    //重新进入界面可能参数id不一样，需要重新加载数据，使用钩子方式
+    this.tableId = this.$route.params.tableId;
+    this.isShow = true;
+    this.tableId = this.$route.params.tableId;
+    this.dataSource = [{ id: "0" }];
+    getAction("/pos/posTable/queryById", { id: this.tableId }).then((res) => {
+      if (res.success) {
+        this.tableOrderInfo = res.result;
+        if (this.tableOrderInfo.state == 2 || this.tableOrderInfo.state == 3) {
+          this.selectOrderInfo = this.tableOrderInfo.posOrderGoods;
+          getAction("/pos/posOrderGoodsDetail/list", {
+            pageNo: 1,
+            pageSize: 99,
+            orderId: this.tableOrderInfo.posOrderGoods.code,
+          }).then((res2) => {
+            if (res2.success) {
+              res2.result.records.forEach((t) => {
+                t.sellingPrice = t.payMoney;
+                t.name = t.goodsName;
+                t.id = t.goodsId;
+              });
+              this.selectGoodsList = res2.result.records;
+            }
+          });
+        }
+      }
+    });
+    this.loadTree();
+    this.loadGoodsType();
+  },
+  // deactivated() {
+  //   this.isShow = false;
+  // },
+  methods: {
+    loadTree() {
+      var that = this;
+      tree().then((res) => {
+        if (res.success) {
+          this.treeData = res.result;
+        }
+      });
+    },
+    modalFormOk() {
+      this.$router.go(-1);
+    },
+    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.id;
+      model.posType = this.tableOrderInfo.posTypeId;
+      model.posTableId = this.tableOrderInfo.id;
+      model.tableNo = this.tableOrderInfo.name;
+      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);
+            }
+          } 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);
+      console.log("find", find);
+      if (find) {
+        var m = this.dataSource.find((t) => t.id === row.id);
+        if (!find.inventory) {
+          find.inventory = m.inventory;
+        }
+        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>

src/views/pos/tablediandangallery.vue

@@ -0,0 +1,554 @@
+<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>
+
+    <a-tabs v-model="tabPosRegionId" @change="tabRegionChange">
+      <a-tab-pane key="1" tab="全部"></a-tab-pane>
+      <a-tab-pane
+        :key="item.id"
+        :tab="item.name"
+        v-for="item in regionList"
+      ></a-tab-pane>
+    </a-tabs>
+    <div class="w-choose-status">
+      <div
+        :class="sta.check ? 'status-check' : ''"
+        v-for="(sta, index) in statusColorList"
+        :key="index"
+        @click="statusClick(index)"
+      >
+        <span
+          v-if="sta.status != -100"
+          class="square"
+          :style="{ background: sta.color }"
+        ></span>
+        <span class="title">{{ sta.title }}</span>
+      </div>
+    </div>
+    <a-row :gutter="[5, 5]">
+      <a-col
+        v-for="item in dataSource"
+        :key="item.id"
+        :span="2"
+        @click.stop="itemClick(item)"
+      >
+        <div
+          class="room-item check"
+          :style="{
+            background: getStatusColor(item.state),
+            color: item.state == 0 ? '#000' : '#fff',
+          }"
+        >
+          <div class="select-cell"></div>
+          <template v-if="item.state === 1">
+            <div>{{ item.name }}</div>
+            <div style="margin-top: 10px">待下单</div>
+            <div
+              style="
+                margin-top: 10px;
+                display: flex;
+                justify-content: space-between;
+              "
+            >
+              <div>
+                <a-icon type="user" />{{ item.userNum }}/{{ item.num }}人
+              </div>
+              <div><a-icon type="clock-circle" />00:55</div>
+            </div></template
+          >
+          <template v-else-if="item.state === 2">
+            <div>{{ item.name }}</div>
+            <div style="margin-top: 10px">
+              ￥{{ item.posOrderGoods ? item.posOrderGoods.money : 0 }}
+            </div>
+            <div
+              style="
+                margin-top: 10px;
+                display: flex;
+                justify-content: space-between;
+              "
+            >
+              <div>
+                <a-icon type="user" />{{ item.userNum }}/{{ item.num }}人
+              </div>
+              <div><a-icon type="clock-circle" />00:55</div>
+            </div></template
+          >
+          <template v-else>
+            <div>{{ item.name }}</div>
+            <div style="margin-top: 10px"></div>
+            <div style="margin-top: 10px">
+              <a-icon type="user" />{{ item.num }}人
+            </div></template
+          >
+        </div>
+      </a-col>
+    </a-row>
+    <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>
+    <user-num-modal
+      ref="modalUserNmumForm"
+      @ok="modalUserNmumFormOk"
+    ></user-num-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 UserNumModal from "./modules/UserNumModal.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,
+    UserNumModal,
+  },
+  data() {
+    return {
+      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: [],
+      regionList: [],
+      tabPosRegionId: "1",
+      dataSource: [],
+      oldSelectGoodsList: [],
+      selectOrderInfo: {},
+      selectRoomOrder: {},
+      statusColorList: [
+        {
+          title: "全部",
+          color: "#fff",
+          check: true,
+          status: -100,
+        },
+        {
+          title: "空桌",
+          color: "#fff",
+          check: false,
+          status: 0,
+        },
+        {
+          title: "待下单",
+          color: "#00a0e9",
+          check: false,
+          status: 1,
+        },
+        {
+          title: "待结账",
+          color: "rgba(10, 122, 114, 1)",
+          check: false,
+          status: 2,
+        },
+        {
+          title: "已预结",
+          color: "rgba(172, 51, 193, 1)",
+          check: false,
+          status: 3,
+        },
+        {
+          title: "待清台",
+          color: "rgba(128, 128, 128, 1)",
+          check: false,
+          status: 4,
+        },
+      ],
+      state: undefined,
+      selectTable: {},
+    };
+  },
+  provide() {
+    return {
+      treeData: computed(() => this.treeData),
+    };
+  },
+  computed: {
+    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.loadRegion();
+        }
+      }
+    });
+  },
+  methods: {
+    getStatusColor(status) {
+      var find = this.statusColorList.find((t) => t.status == status);
+      return find ? find.color : "#fff";
+    },
+    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.loadRegion();
+    },
+    tabRegionChange(e) {
+      this.loadTables();
+    },
+    statusClick(index) {
+      this.statusColorList.forEach((t) => {
+        if (t.check) {
+          t.check = false;
+        }
+      });
+      this.statusColorList[index].check = true;
+      if (index === 0) {
+        this.state = undefined;
+      } else {
+        this.state = this.statusColorList[index].status;
+      }
+      this.loadTables();
+    },
+    loadRegion() {
+      getAction("/pos/posRegion/list", {
+        posTypeId: this.tabPosTypeId,
+      }).then((res) => {
+        if (res.success) {
+          this.regionList = res.result.records;
+        }
+      });
+      this.loadTables();
+    },
+    loadTables() {
+      var obj = {
+        pageNo: 1,
+        pageSize: 99999,
+        posTypeId: this.tabPosTypeId,
+        state: this.state,
+      };
+      if (this.tabPosRegionId != "1") {
+        obj.posRegionId = this.tabPosRegionId;
+      }
+      getAction("/pos/posTable/tableList", obj).then((res) => {
+        if (res.success) {
+          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.id;
+      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);
+            }
+          } else {
+            this.$message.warning(res.message);
+          }
+        })
+        .finally(() => {});
+    },
+    modalUserNmumFormOk() {
+      this.loadTables();
+      this.$router.push({
+        name: "pos-tablediandan",
+        params: { tableId: this.selectTable.id },
+      });
+    },
+    itemClick(row) {
+      console.log(row);
+      this.selectTable = row;
+      if (row.state === 0) {
+        this.$refs.modalUserNmumForm.edit({ id: row.id, userNum: 1 });
+        this.$refs.modalUserNmumForm.title = "就餐人数";
+        this.$refs.modalUserNmumForm.disableSubmit = false;
+      } else {
+        this.$router.push({
+          name: "pos-tablediandan",
+          params: { tableId: row.id },
+        });
+      }
+    },
+  },
+};
+</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 1px;
+}
+.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;
+}
+.w-choose-status {
+  display: flex;
+  /* justify-content: flex-end; */
+  /* width: 200px; */
+  margin-bottom: 20px;
+}
+
+.w-choose-status > div {
+  /* width: 100%; */
+  /* flex: 1; */
+  display: flex;
+  padding: 0 2%;
+  white-space: nowrap;
+  line-height: 20px;
+  box-sizing: border-box;
+  cursor: pointer;
+  align-items: center;
+}
+
+.w-choose-status > div .square {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: #000 solid 1px;
+}
+
+.w-choose-status > div .title {
+  display: flex;
+  align-items: center;
+  line-height: 16px;
+  padding-left: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+.status-check {
+  border: #000 solid 1px;
+  padding: 8px;
+  /* width: 80px; */
+  height: 29px;
+  justify-content: center;
+  background-color: #ccc;
+  border-radius: 4px;
+}
+</style>