取餐/转房账

src/views/pos/diandan.vue

@@ -9,6 +9,9 @@
     </a-tabs>
     <div style="display: flex; height: calc(100vh - 350px)">
       <a-card style="width: 25%">
+        <p v-if="selectRoomOrder && selectRoomOrder.id">
+          房间：{{ selectRoomOrder.tableNo }},姓名:{{ selectRoomOrder.id }}
+        </p>
         <a-table
           bordered
           :columns="columns"
@@ -40,10 +43,17 @@
         <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 :disabled="btnDisabled">退货</a-button> -->
           <a-button v-if="!btnDisabled" @click="handleAdd">挂单</a-button>
-          <a-button v-else @click="handleAdd">取单</a-button>
-          <a-button>挂房帐</a-button>
+          <a-button v-else @click="handlePickingGoodsOrder">取单</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
           >
@@ -90,6 +100,14 @@
     </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>
   
@@ -100,6 +118,8 @@ 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 = [
@@ -122,6 +142,8 @@ export default {
   components: {
     PaymentModal,
     goodsModal,
+    PickingGoodsOrderModal,
+    SelectCheckInRoomOrderModal,
   },
   data() {
     return {
@@ -163,6 +185,8 @@ export default {
       tabgoodsTypeId: "1",
       dataSource: [],
       oldSelectGoodsList: [],
+      selectOrderInfo: {},
+      selectRoomOrder: {},
     };
   },
   provide() {
@@ -215,6 +239,22 @@ export default {
       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) {
@@ -223,6 +263,7 @@ export default {
     },
     handleClear() {
       this.selectGoodsList = [];
+      // this.selectOrderInfo = {};
     },
     tabPosTypeChange(e) {
       this.loadGoodsType();
@@ -277,11 +318,24 @@ export default {
         })
         .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) {
@@ -312,6 +366,8 @@ export default {
       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) => {
@@ -330,6 +386,7 @@ export default {
               JSON.stringify(this.selectGoodsList)
             );
             this.selectGoodsList = [];
+            this.selectOrderInfo = {};
             this.loadGoods();
             if (callback) {
               callback(res.result);

src/views/pos/modules/PickingGoodsOrder.vue

@@ -0,0 +1,389 @@
+<template>
+  <a-card :bordered="false">
+    <div style="display: flex; min-height: 500px">
+      <a-card style="width: 50%">
+        <!-- 查询区域 -->
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline" @keyup.enter.native="searchQuery">
+            <a-row :gutter="24">
+              <a-col :span="8">
+                <a-form-item label="">
+                  <j-input
+                    placeholder="取餐号"
+                    v-model="queryParam.tableNo"
+                  ></j-input>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="">
+                  <a-range-picker
+                    format="YYYY-MM-DD"
+                    :placeholder="['开始日期', '结束日期']"
+                    @change="onChange"
+                    v-model="datetime"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <span>
+                  <a-button type="primary" @click="searchQuery" icon="search"
+                    >查询</a-button
+                  >
+                </span>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <!-- 查询区域-END -->
+
+        <!-- table区域-begin -->
+        <div>
+          <a-table
+            ref="table"
+            size="middle"
+            :scroll="{ x: true }"
+            bordered
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource"
+            :pagination="ipagination"
+            :loading="loading"
+            :customRow="rowClick"
+            class="j-table-force-nowrap"
+            @change="handleTableChange"
+          >
+            <template slot="avatar" slot-scope="text">
+              <a-avatar v-if="text" :src="text" />
+              <a-avatar v-else icon="user" />
+            </template>
+            <template slot="imgSlot" slot-scope="text, record">
+              <span v-if="!text" style="font-size: 12px; font-style: italic"
+                >无图片</span
+              >
+              <img
+                v-else
+                :src="getImgView(text)"
+                :preview="record.id"
+                height="25px"
+                alt=""
+                style="max-width: 80px; font-size: 12px; font-style: italic"
+              />
+            </template>
+            <template slot="fileSlot" slot-scope="text">
+              <span v-if="!text" style="font-size: 12px; font-style: italic"
+                >无文件</span
+              >
+              <a-button
+                v-else
+                :ghost="true"
+                type="primary"
+                icon="download"
+                size="small"
+                @click="downloadFile(text)"
+              >
+                下载
+              </a-button>
+            </template>
+
+            <span slot="action" slot-scope="text, record">
+              <a @click="handleEdit(record)">编辑</a>
+
+              <a-divider type="vertical" />
+              <a-dropdown>
+                <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+                <a-menu slot="overlay">
+                  <a-menu-item>
+                    <a @click="handleDetail(record)">详情</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-popconfirm
+                      title="确定删除吗?"
+                      @confirm="() => handleDelete(record.id)"
+                    >
+                      <a>删除</a>
+                    </a-popconfirm>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </span>
+          </a-table>
+        </div>
+      </a-card>
+      <a-card style="width: 50%">
+        <p>订单详情</p>
+        <a-table
+          ref="table"
+          size="middle"
+          :scroll="{ x: true }"
+          bordered
+          rowKey="id"
+          :columns="columns2"
+          :dataSource="orderGoodsDetailList"
+          :loading="loading"
+          class="j-table-force-nowrap"
+        >
+          <template slot="avatar" slot-scope="text">
+            <a-avatar v-if="text" :src="text" />
+            <a-avatar v-else icon="user" />
+          </template>
+          <template slot="imgSlot" slot-scope="text, record">
+            <span v-if="!text" style="font-size: 12px; font-style: italic"
+              >无图片</span
+            >
+            <img
+              v-else
+              :src="getImgView(text)"
+              :preview="record.id"
+              height="25px"
+              alt=""
+              style="max-width: 80px; font-size: 12px; font-style: italic"
+            />
+          </template>
+          <template slot="fileSlot" slot-scope="text">
+            <span v-if="!text" style="font-size: 12px; font-style: italic"
+              >无文件</span
+            >
+            <a-button
+              v-else
+              :ghost="true"
+              type="primary"
+              icon="download"
+              size="small"
+              @click="downloadFile(text)"
+            >
+              下载
+            </a-button>
+          </template>
+
+          <span slot="action" slot-scope="text, record">
+            <a @click="handleEdit(record)">编辑</a>
+
+            <a-divider type="vertical" />
+            <a-dropdown>
+              <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+              <a-menu slot="overlay">
+                <a-menu-item>
+                  <a @click="handleDetail(record)">详情</a>
+                </a-menu-item>
+                <a-menu-item>
+                  <a-popconfirm
+                    title="确定删除吗?"
+                    @confirm="() => handleDelete(record.id)"
+                  >
+                    <a>删除</a>
+                  </a-popconfirm>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </span>
+        </a-table>
+      </a-card>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import "@/assets/less/TableExpand.less";
+import { mixinDevice } from "@/utils/mixin";
+import { JeecgListMixin } from "@/mixins/JeecgListMixin";
+import { httpAction } from "@/api/manage";
+import { getAction } from "../../../api/manage";
+export default {
+  name: "BusMemberCardList",
+  mixins: [JeecgListMixin, mixinDevice],
+  props: {
+    couponsId: {
+      type: String,
+      default: "",
+    },
+    couponsType: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    const hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
+    return {
+      datetime: [],
+      hotelId: "",
+      num: 1,
+      description: "PickingGoodsOrder",
+      // 表头
+      columns: [
+        {
+          title: "单据号",
+          align: "center",
+          dataIndex: "code",
+        },
+        {
+          title: "取餐号",
+          align: "center",
+          dataIndex: "tableNo",
+        },
+        {
+          title: "消费金额",
+          align: "center",
+          dataIndex: "consumeMoney",
+        },
+        {
+          title: "优惠金额",
+          align: "center",
+          dataIndex: "couponMoney",
+        },
+        {
+          title: "实付金额",
+          align: "center",
+          dataIndex: "payMoney",
+        },
+      ],
+      columns2: [
+        {
+          title: "商品名称",
+          align: "center",
+          dataIndex: "goodsName",
+        },
+        {
+          title: "数量",
+          align: "center",
+          dataIndex: "num",
+        },
+        {
+          title: "原价",
+          align: "center",
+          dataIndex: "money",
+          customRender(text, record) {
+            return text.toFixed(2);
+          },
+        },
+        {
+          title: "优惠价",
+          align: "center",
+          dataIndex: "couponMoney",
+          customRender(text, record) {
+            return text.toFixed(2);
+          },
+        },
+        {
+          title: "优惠金额",
+          align: "center",
+          dataIndex: "id",
+          customRender(text, record) {
+            return record.money - record.couponMoney;
+          },
+        },
+        {
+          title: "小计",
+          align: "center",
+          dataIndex: "payMoney",
+          customRender(text, record) {
+            return (text * record.num).toFixed(2);
+          },
+        },
+      ],
+      url: {
+        list: "/pos/posOrderGoods/list?status=0",
+        delete: "/business/busMemberCard/delete",
+        deleteBatch: "/business/busMemberCard/deleteBatch",
+        exportXlsUrl: "/business/busMemberCard/exportXls",
+        importExcelUrl: "business/busMemberCard/importExcel",
+      },
+      dictOptions: {},
+      superFieldList: [],
+      orderGoodsDetailList: [],
+      selectOrderInfo: {},
+    };
+  },
+  created() {},
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
+    },
+  },
+  methods: {
+    submitForm() {
+      if (this.orderGoodsDetailList.length <= 0) {
+        this.$message.warning("请先选择订单");
+        return;
+      }
+      this.$emit("ok", {
+        orderInfo: this.selectOrderInfo,
+        orderDetailList: this.orderGoodsDetailList,
+      });
+    },
+    rowClick(row) {
+      return {
+        on: {
+          click: (e) => {
+            this.selectOrderInfo = row;
+            getAction("/pos/posOrderGoodsDetail/list", {
+              pageNo: 1,
+              pageSize: 99,
+              orderId: row.code,
+            }).then((res) => {
+              if (res.success) {
+                this.orderGoodsDetailList = res.result.records;
+              }
+            });
+          },
+        },
+      };
+    },
+    onChange(e, dateString) {
+      this.queryParam.startTime = dateString[0];
+      this.queryParam.endTime = dateString[1];
+    },
+    handleAdd() {
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.warning("请选择一条记录！");
+        return;
+      }
+      if (this.num <= 0) {
+        this.$message.warning("发放数量不能小于0！");
+        return;
+      }
+      var that = this;
+      that.confirmLoading = true;
+      var url = "/business/busMarketCouponsUsed/gainCouponsUsedToMember";
+      if (this.couponsType === 2) {
+        url = "/business/busMarketCouponsCashUsed/gainCouponsCashUsedToMember";
+      }
+      httpAction(
+        url,
+        {
+          couponsId: this.couponsId,
+          num: this.num,
+          memberIds: this.selectedRowKeys,
+        },
+        "post"
+      )
+        .then((res) => {
+          if (res.success) {
+            that.$message.success(res.message);
+            that.$emit("ok");
+          } else {
+            that.$message.warning(res.message);
+          }
+        })
+        .finally(() => {
+          that.confirmLoading = false;
+        });
+    },
+  },
+};
+</script>
+<style scoped>
+@import "~@assets/less/common.less";
+/deep/ .ant-input-search-button {
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+/deep/ .ant-input-search-button[disabled]:hover {
+  opacity: 0.7;
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+/deep/ .ant-input-search-button[disabled] {
+  opacity: 0.7;
+  color: #ffffff;
+}
+</style>

src/views/pos/modules/PickingGoodsOrderModal.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="关闭">
+    <picking-goods-order ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></picking-goods-order>
+  </j-modal>
+</template>
+
+<script>
+
+  import PickingGoodsOrder from './PickingGoodsOrder'
+  export default {
+    name: 'PickingGoodsOrderModal',
+    components: {
+      PickingGoodsOrder
+    },
+    data () {
+      return {
+        title:'',
+        width:1200,
+        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(e){
+        this.$emit('ok',e);
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>

src/views/pos/modules/SelectCheckInRoomOrder.vue

@@ -0,0 +1,202 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :span="3">
+            <a-form-item label="">
+              <j-input
+                placeholder="入住单号"
+                v-model="queryParam.tableNo"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="">
+              <j-input
+                placeholder="房间号"
+                v-model="queryParam.tableNo"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="">
+              <j-input
+                placeholder="姓名"
+                v-model="queryParam.tableNo"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <span>
+              <a-button type="primary" @click="searchQuery" icon="search"
+                >查询</a-button
+              >
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 查询区域-END -->
+
+    <!-- table区域-begin -->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{ x: true }"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        class="j-table-force-nowrap"
+        @change="handleTableChange"
+      >
+        <template slot="avatar" slot-scope="text">
+          <a-avatar v-if="text" :src="text" />
+          <a-avatar v-else icon="user" />
+        </template>
+        <template slot="imgSlot" slot-scope="text, record">
+          <span v-if="!text" style="font-size: 12px; font-style: italic"
+            >无图片</span
+          >
+          <img
+            v-else
+            :src="getImgView(text)"
+            :preview="record.id"
+            height="25px"
+            alt=""
+            style="max-width: 80px; font-size: 12px; font-style: italic"
+          />
+        </template>
+        <template slot="fileSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px; font-style: italic"
+            >无文件</span
+          >
+          <a-button
+            v-else
+            :ghost="true"
+            type="primary"
+            icon="download"
+            size="small"
+            @click="downloadFile(text)"
+          >
+            下载
+          </a-button>
+        </template>
+
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleSelect(record)">选择</a>
+        </span>
+      </a-table>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import "@/assets/less/TableExpand.less";
+import { mixinDevice } from "@/utils/mixin";
+import { JeecgListMixin } from "@/mixins/JeecgListMixin";
+import { httpAction } from "@/api/manage";
+import { getAction } from "../../../api/manage";
+export default {
+  name: "BusMemberCardList",
+  mixins: [JeecgListMixin, mixinDevice],
+  props: {
+    couponsId: {
+      type: String,
+      default: "",
+    },
+    couponsType: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    const hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
+    return {
+      datetime: [],
+      hotelId: "",
+      num: 1,
+      description: "PickingGoodsOrder",
+      // 表头
+      columns: [
+        {
+          title: "房间",
+          align: "center",
+          dataIndex: "tableNo",
+        },
+        {
+          title: "名字",
+          align: "center",
+          dataIndex: "id",
+        },
+        {
+          title: "单号",
+          align: "center",
+          dataIndex: "code",
+        },
+        {
+          title: "状态",
+          align: "center",
+          dataIndex: "couponMoney",
+        },
+        {
+          title: "金额",
+          align: "center",
+          dataIndex: "payMoney",
+        },
+        {
+          title: "操作",
+          dataIndex: "action",
+          align: "center",
+          fixed: "right",
+          width: 147,
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      url: {
+        list: "/pos/posOrderGoods/list?status=0",
+        delete: "/business/busMemberCard/delete",
+        deleteBatch: "/business/busMemberCard/deleteBatch",
+        exportXlsUrl: "/business/busMemberCard/exportXls",
+        importExcelUrl: "business/busMemberCard/importExcel",
+      },
+      dictOptions: {},
+      superFieldList: [],
+      orderGoodsDetailList: [],
+      selectOrderInfo: {},
+    };
+  },
+  created() {},
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
+    },
+  },
+  methods: {
+    handleSelect(row) {
+      this.$emit("ok",row);
+    },
+  },
+};
+</script>
+<style scoped>
+@import "~@assets/less/common.less";
+/deep/ .ant-input-search-button {
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+/deep/ .ant-input-search-button[disabled]:hover {
+  opacity: 0.7;
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+/deep/ .ant-input-search-button[disabled] {
+  opacity: 0.7;
+  color: #ffffff;
+}
+</style>

src/views/pos/modules/SelectCheckInRoomOrderModal.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="关闭">
+    <picking-goods-order ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></picking-goods-order>
+  </j-modal>
+</template>
+
+<script>
+
+  import PickingGoodsOrder from './SelectCheckInRoomOrder'
+  export default {
+    name: 'PickingGoodsOrderModal',
+    components: {
+      PickingGoodsOrder
+    },
+    data () {
+      return {
+        title:'',
+        width:1200,
+        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(e){
+        this.$emit('ok',e);
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>