Prechádzať zdrojové kódy

实现会员充值功能

gqx 2 rokov pred
rodič
commit
4d8d60fc94

+ 2 - 1
src/utils/excloudHotelIdParamPath/MemeberController.js

@@ -1,6 +1,7 @@
 export default {
     name: '会员管理模块',
     excloudUrls: [
-        '/business/busMemberCard/list'
+        '/business/busMemberCard/list',
+        '/business/busMemberBalanceLog/list'
     ]
 }

+ 1 - 1
src/views/markets/marketInfo.vue

@@ -10,7 +10,7 @@
         <p>会员列表</p>
       </div>
 
-      <div class="height-100" @click="toPage()">
+      <div class="height-100" @click="toPage('/tenant/marketinfo/memberrecharge')">
         <img
           src="http://oss.qlan99.com/20200529/4446ad625b404d64ac67494266d2452b.png"
           width="50"

+ 1 - 1
src/views/markets/member.vue

@@ -137,7 +137,7 @@
     >
       <div>
         <a-button @click="handleAdd" type="primary" icon="plus">办卡</a-button>
-        <a-button @click="handleAdd" type="danger" icon="minus"
+        <a-button @click="batchDel" type="danger" icon="minus"
           >批量删除</a-button
         >
         <!-- <a-button

+ 350 - 0
src/views/markets/memberrecharge.vue

@@ -0,0 +1,350 @@
+<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="">
+              <a-select
+                mode="multiple"
+                style="width: 180px"
+                placeholder="商家名称"
+                :maxTagCount="1"
+                :maxTagTextLength="50"
+                v-model="queryParam.hotelIds"
+              >
+                <a-select-option
+                  v-for="(item, index) in hotelList"
+                  :key="index"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="">
+              <j-input
+                placeholder="会员名称"
+                v-model="queryParam.name"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="">
+              <j-input
+                placeholder="会员手机号"
+                v-model="queryParam.mobile"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="">
+              <j-input
+                placeholder="会员卡号"
+                v-model="queryParam.cardNo"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="">
+              <a-range-picker
+                format="YYYY-MM-DD"
+                :placeholder="['开始日期', '注结束日期']"
+                @change="onChange"
+                v-model="datetime"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <span
+              style="float: left; overflow: hidden"
+              class="table-page-search-submitButtons"
+            >
+              <a-button type="primary" @click="searchQuery" icon="search"
+                >查询</a-button
+              >
+              <a-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+                >重置</a-button
+              >
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 查询区域-END -->
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <!-- <a-button type="primary" icon="download" @click="handleExportXls('bus_member_balance_log')">导出</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload> -->
+      <!-- 高级查询区域 -->
+      <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+      </a-dropdown> -->
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div> -->
+
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{ x: true }"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
+        class="j-table-force-nowrap"
+        @change="handleTableChange"
+      >
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </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>
+
+    <bus-member-balance-log-modal
+      ref="modalForm"
+      @ok="modalFormOk"
+    ></bus-member-balance-log-modal>
+  </a-card>
+</template>
+
+<script>
+import "@/assets/less/TableExpand.less";
+import { mixinDevice } from "@/utils/mixin";
+import { JeecgListMixin } from "@/mixins/JeecgListMixin";
+import BusMemberBalanceLogModal from "./modules/memberBalance/BusMemberBalanceLogModal";
+import { httpAction } from "@/api/manage";
+export default {
+  name: "BusMemberBalanceLogList",
+  mixins: [JeecgListMixin, mixinDevice],
+  components: {
+    BusMemberBalanceLogModal,
+  },
+  data() {
+    return {
+      description: "bus_member_balance_log管理页面",
+      datetime: [],
+      // 表头
+      columns: [
+        {
+          title: "商家",
+          align: "center",
+          dataIndex: "hotelName",
+        },
+        {
+          title: "姓名",
+          align: "center",
+          dataIndex: "memberName",
+        },
+        {
+          title: "手机号",
+          align: "center",
+          dataIndex: "mobile",
+        },
+        {
+          title: "会员卡号",
+          align: "center",
+          dataIndex: "cardNo",
+        },
+        {
+          title: "流水号",
+          align: "center",
+          dataIndex: "code",
+        },
+        {
+          title: "充值金额",
+          align: "center",
+          dataIndex: "money",
+          customRender: function (text, record) {
+            return record.type === 1 ? "+" + text : "-" + text;
+          },
+        },
+        {
+          title: "赠送金额",
+          align: "center",
+          dataIndex: "giveMoney",
+          customRender: function (text, record) {
+            return text > 0 ? "+" + text : "-";
+          },
+        },
+        {
+          title: "支付金额",
+          align: "center",
+          dataIndex: "payMoney",
+        },
+        {
+          title: "支付方式",
+          align: "center",
+          dataIndex: "paymentMethodName",
+        },
+        {
+          title: "状态",
+          align: "center",
+          dataIndex: "status",
+          customRender: function (text, record) {
+            return text == 1 ? "已支付" : "未支付";
+          },
+        },
+        {
+          title: "备注",
+          align: "center",
+          dataIndex: "remarks",
+        },
+        {
+          title: "推荐员工",
+          align: "center",
+          dataIndex: "staffId",
+        },
+        {
+          title: "操作",
+          dataIndex: "action",
+          align: "center",
+          fixed: "right",
+          width: 147,
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      url: {
+        list: "/business/busMemberBalanceLog/list",
+        delete: "/business/busMemberBalanceLog/delete",
+        deleteBatch: "/business/busMemberBalanceLog/deleteBatch",
+        exportXlsUrl: "/business/busMemberBalanceLog/exportXls",
+        importExcelUrl: "business/busMemberBalanceLog/importExcel",
+      },
+      dictOptions: {},
+      superFieldList: [],
+      hotelList: [],
+    };
+  },
+  created() {
+    // this.getSuperFieldList();
+    httpAction(
+      "/business/busHotel/list",
+      { pageNo: 1, pageSize: 100 },
+      "get"
+    ).then((res) => {
+      if (res.success) {
+        this.hotelList = res.result.records;
+      }
+    });
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
+    },
+  },
+  methods: {
+    searchReset() {
+      this.datetime = [];
+      this.queryParam = {};
+      this.loadData(1);
+    },
+    onChange(e, dateString) {
+      // console.log("Selected Time: ", e);
+      // console.log("Formatted Selected Time: ", dateString);
+      this.queryParam.startTime = dateString[0];
+      this.queryParam.endTime = dateString[1];
+    },
+    initDictConfig() {},
+    getSuperFieldList() {
+      let fieldList = [];
+      fieldList.push({ type: "string", value: "tenantId", text: "关联租户" });
+      fieldList.push({ type: "string", value: "hotelId", text: "关联酒店" });
+      fieldList.push({ type: "string", value: "memberId", text: "会员id" });
+      fieldList.push({ type: "int", value: "type", text: "类型" });
+      fieldList.push({ type: "number", value: "money", text: "充值金额" });
+      fieldList.push({ type: "number", value: "balance", text: "金额余额" });
+      fieldList.push({ type: "number", value: "giveMoney", text: "赠送金额" });
+      fieldList.push({ type: "string", value: "remarks", text: "备注" });
+      fieldList.push({ type: "string", value: "staffId", text: "推荐员工" });
+      fieldList.push({
+        type: "string",
+        value: "paymentMethod",
+        text: "支付方式",
+      });
+      fieldList.push({ type: "number", value: "payMoney", text: "支付金额" });
+      fieldList.push({ type: "string", value: "code", text: "流水号" });
+      this.superFieldList = fieldList;
+    },
+  },
+};
+</script>
+<style scoped>
+@import "~@assets/less/common.less";
+</style>

+ 1 - 1
src/views/markets/modules/couponsCash/BusMarketCouponsCashUsedList.vue

@@ -28,7 +28,7 @@
           <a-col :span="4">
             <a-form-item label="">
               <a-select
-                v-model:value="queryParam.status"
+                v-model="queryParam.status"
                 style="width: 120px"
                 placeholder="请选择状态"
                 :allowClear="true"

+ 316 - 0
src/views/markets/modules/memberBalance/BusMemberBalanceLogForm.vue

@@ -0,0 +1,316 @@
+<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="memberId"
+            >
+              <a-select
+                v-model="model.memberId"
+                style="width: 100%"
+                placeholder="请选择会员"
+                show-search
+                option-filter-prop="children"
+                :filter-option="filterOption"
+              >
+                <a-select-option
+                  v-for="(item, index) in memberList"
+                  :key="index"
+                  :value="item.id"
+                  >{{ item.name }}</a-select-option
+                >
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="类型"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="type"
+            >
+              <a-radio-group v-model="model.type">
+                <a-radio :value="1">充值</a-radio>
+                <a-radio :value="2">扣费</a-radio>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24" v-if="model.type == 1">
+            <a-form-model-item
+              label="充值配置"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+            >
+              <a-select
+                v-model="model.marketRechargeId"
+                style="width: 100%"
+                placeholder="充值配置"
+                @change="marketRechargeChage"
+              >
+                <a-select-option
+                  v-for="(item, index) in marketRechargeList"
+                  :key="index"
+                  :value="item.id"
+                  >{{ item.name }}</a-select-option
+                >
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              :label="model.type == 1 ? '充值金额' : '扣费金额'"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="money"
+            >
+              <a-input-number
+                v-model="model.money"
+                placeholder="请输入充值金额"
+                :min="1"
+                style="width: 100%"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24" v-if="model.type == 1">
+            <a-form-model-item
+              label="赠送金额"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              :min="0"
+              prop="giveMoney"
+            >
+              <a-input-number
+                v-model="model.giveMoney"
+                placeholder="请输入赠送金额"
+                style="width: 100%"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="备注"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="remarks"
+            >
+              <a-textarea
+                v-model="model.remarks"
+                rows="4"
+                placeholder="请输入备注"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24" v-if="model.type == 1">
+            <a-form-model-item
+              label="推荐员工"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="staffId"
+            >
+              <a-select
+                v-model="model.staffId"
+                style="width: 100%"
+                placeholder="推荐员工"
+              >
+                <a-select-option
+                  v-for="(item, index) in staffList"
+                  :key="index"
+                  :value="item.id"
+                  >{{ item.name }}</a-select-option
+                >
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="支付方式"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="paymentMethod"
+            >
+              <a-select
+                v-model="model.paymentMethod"
+                style="width: 100%"
+                placeholder="支付方式"
+              >
+                <a-select-option
+                  v-for="(item, index) in paymentMethodList"
+                  :key="index"
+                  :value="item.id"
+                  >{{ item.name }}</a-select-option
+                >
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="支付金额"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="payMoney"
+            >
+              <a-input-number
+                v-model="model.payMoney"
+                placeholder="请输入支付金额"
+                style="width: 100%"
+                :min="0"
+              />
+            </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: "BusMemberBalanceLogForm",
+  components: {},
+  props: {
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      model: { type: 1 },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      confirmLoading: false,
+      validatorRules: {
+        memberId: [{ required: true, message: "请选择会员!" }],
+        type: [{ required: true, message: "请输入类型!" }],
+        money: [{ required: true, message: "请输入充值金额!" }],
+        balance: [{ required: true, message: "请输入金额余额!" }],
+        giveMoney: [{ required: true, message: "请输入赠送金额!" }],
+        paymentMethod: [{ required: true, message: "请输入支付方式!" }],
+        payMoney: [{ required: true, message: "请输入支付金额!" }],
+        code: [{ required: true, message: "请输入流水号!" }],
+      },
+      url: {
+        add: "/business/busMemberBalanceLog/add",
+        edit: "/business/busMemberBalanceLog/edit",
+        queryById: "/business/busMemberBalanceLog/queryById",
+      },
+      memberList: [],
+      marketRechargeList: [],
+      staffList: [],
+      paymentMethodList: [],
+    };
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled;
+    },
+  },
+  created() {
+    httpAction(
+      "/business/busMemberCard/list",
+      { pageNo: 1, pageSize: 1000 },
+      "get"
+    ).then((res) => {
+      if (res.success) {
+        this.memberList = res.result.records;
+      }
+    });
+    httpAction(
+      "/business/busMarketRecharge/list",
+      { pageNo: 1, pageSize: 1000 },
+      "get"
+    ).then((res) => {
+      if (res.success) {
+        this.marketRechargeList = res.result.records;
+      }
+    });
+    httpAction(
+      "/business/busRoomPayType/queryList",
+      { pageNo: 1, pageSize: 100 },
+      "get"
+    ).then((res) => {
+      if (res.success) {
+        this.paymentMethodList = res.result;
+      }
+    });
+    var _info = JSON.parse(localStorage.getItem("storeInfo"));
+    if (_info) {
+      this.model.hotelId = _info.id;
+    }
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+  },
+  methods: {
+    marketRechargeChage(e) {
+      var item = this.marketRechargeList.find((t) => t.id === e);
+      this.model.money = item.money;
+      this.model.giveMoney = item.returnRoney;
+    },
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text
+          .toLowerCase()
+          .indexOf(input.toLowerCase()) >= 0
+      );
+    },
+    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 = "";
+          let method = "";
+          if (!this.model.id) {
+            httpurl += this.url.add;
+            method = "post";
+          } else {
+            httpurl += this.url.edit;
+            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>

+ 84 - 0
src/views/markets/modules/memberBalance/BusMemberBalanceLogModal.Style#Drawer.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-drawer
+    :title="title"
+    :width="width"
+    placement="right"
+    :closable="false"
+    @close="close"
+    destroyOnClose
+    :visible="visible">
+    <bus-member-balance-log-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></bus-member-balance-log-form>
+    <div class="drawer-footer">
+      <a-button @click="handleCancel" style="margin-bottom: 0;">关闭</a-button>
+      <a-button v-if="!disableSubmit"  @click="handleOk" type="primary" style="margin-bottom: 0;">提交</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+
+  import BusMemberBalanceLogForm from './BusMemberBalanceLogForm'
+
+  export default {
+    name: 'BusMemberBalanceLogModal',
+    components: {
+      BusMemberBalanceLogForm
+    },
+    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;
+      },
+      submitCallback(){
+        this.$emit('ok');
+        this.visible = false;
+      },
+      handleOk () {
+        this.$refs.realForm.submitForm();
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+/** Button按钮间距 */
+  .ant-btn {
+    margin-left: 30px;
+    margin-bottom: 30px;
+    float: right;
+  }
+  .drawer-footer{
+    position: absolute;
+    bottom: -8px;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+</style>

+ 60 - 0
src/views/markets/modules/memberBalance/BusMemberBalanceLogModal.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="关闭">
+    <bus-member-balance-log-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></bus-member-balance-log-form>
+  </j-modal>
+</template>
+
+<script>
+
+  import BusMemberBalanceLogForm from './BusMemberBalanceLogForm'
+  export default {
+    name: 'BusMemberBalanceLogModal',
+    components: {
+      BusMemberBalanceLogForm
+    },
+    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>