桌台预约

src/views/pos/modules/ReserveModal.vue

@@ -0,0 +1,258 @@
+<<template>
+  <j-modal
+      :title="title"
+      :width="width"
+      :visible="visible"
+      switchFullscreen
+      @ok="handleOk"
+      :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+      @cancel="handleCancel"
+      cancelText="关闭">
+    <a-card style="margin: 20px">
+      <a-row>
+        <a-col :span="16">
+          <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" />{{ hours(item.orderTime) }}
+                    </div>
+                  </div></template
+                >
+                <template v-else-if="item.state === 2 || item.state === 4">
+                  <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" />{{ hours(item.orderTime) }}
+                    </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>
+        </a-col>
+        <a-col :span="8">
+          <a-form-model >
+            <a-form-model-item label="用餐时间"  :labelCol="labelCol" :wrapperCol="wrapperCol" >
+              <a-input></a-input>
+            </a-form-model-item>
+            <a-form-model-item label="预定桌数"  :labelCol="labelCol" :wrapperCol="wrapperCol" >
+              <a-input></a-input>
+            </a-form-model-item>
+            <a-form-model-item label="每桌人数"  :labelCol="labelCol" :wrapperCol="wrapperCol" >
+              <a-input></a-input>
+            </a-form-model-item>
+            <a-form-model-item label="预定人"  :labelCol="labelCol" :wrapperCol="wrapperCol" >
+              <a-input></a-input>
+            </a-form-model-item>
+            <a-form-model-item label="联系电话"  :labelCol="labelCol" :wrapperCol="wrapperCol" >
+              <a-input></a-input>
+            </a-form-model-item>
+          </a-form-model>
+
+        </a-col>
+      </a-row>
+    </a-card>
+  </j-modal>
+
+</template>
+
+<script>
+
+import PosTypeForm from './PosTypeForm'
+import { getAction } from '@api/manage'
+export default {
+  name: 'ReserveModal',
+  components: {
+    PosTypeForm
+  },
+  data () {
+    return {
+      title:'',
+      width: 1500,
+      visible: false,
+      disableSubmit: false,
+      dataSource: [],
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 },
+      },
+    }
+  },
+  methods: {
+    edit (record) {
+      this.visible = true
+      this.loadTables()
+    },
+    handleOk () {
+      this.visible = false
+    },
+    submitCallback() {
+      this.$emit('ok')
+      this.visible = false
+    },
+    handleCancel () {
+      this.close()
+    },
+    hours(start) {
+      var beginDate = new Date(start);
+      var endDate = new Date();
+      let hours = parseInt((endDate - beginDate) / (1000 * 60 * 60));
+      let leave1 =
+          (endDate.getTime() - beginDate.getTime()) % (24 * 3600 * 1000);
+      let leave2 = leave1 % (3600 * 1000);
+      let minutes = Math.floor(leave2 / (60 * 1000));
+      // return minutes == 0 ? hours : hours + 1;
+      return hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0");
+    },
+    loadTables() {
+      debugger
+      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) => {
+        debugger
+        if (res.success) {
+          this.dataSource = res.result.records;
+        }
+      })
+    },
+    itemClick() {
+    },
+  }
+}
+</script>
+<style>
+.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>