diff --git a/src/api/rights/aliPayOrder.js b/src/api/rights/aliPayOrder.js
index 7592488..50c69a5 100644
--- a/src/api/rights/aliPayOrder.js
+++ b/src/api/rights/aliPayOrder.js
@@ -12,6 +12,16 @@ export function listAliPayOrder(data) {
   })
 }
 
+// 支付退款
+export function aliPayRefund(data) {
+  return request({
+    url: `${serviceTitle}${prefix}/aliPayRefund`,
+    method: 'post',
+    data: data
+  })
+}
+
+
 
 
 
diff --git a/src/api/rights/aliPaySigningOrder.js b/src/api/rights/aliPaySigningOrder.js
index 22d6508..49c2d4b 100644
--- a/src/api/rights/aliPaySigningOrder.js
+++ b/src/api/rights/aliPaySigningOrder.js
@@ -12,6 +12,15 @@ export function listAliPaySigningOrder(data) {
   })
 }
 
+// 用户解约
+export function aliPayUnSign(data) {
+  return request({
+    url: `${serviceTitle}${prefix}/aliPayUnSign`,
+    method: 'post',
+    data: data
+  })
+}
+
 
 
 
diff --git a/src/api/rights/refundOrder.js b/src/api/rights/refundOrder.js
new file mode 100644
index 0000000..89ec11e
--- /dev/null
+++ b/src/api/rights/refundOrder.js
@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+//const serviceTitle = 'https://rightsadmin.bnyer.cn/rights'; //生产
+const serviceTitle = 'http://localhost:8085/rights';   //研发
+const prefix = '/refund';
+
+// 查询退款列表
+export function listRefund(data) {
+  return request({
+    url: `${serviceTitle}${prefix}/page`,
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/src/views/rights/aliPayOrder/index.vue b/src/views/rights/aliPayOrder/index.vue
index ac74f29..2891c17 100644
--- a/src/views/rights/aliPayOrder/index.vue
+++ b/src/views/rights/aliPayOrder/index.vue
@@ -3,11 +3,20 @@
     <el-row :gutter="20">
       <!--aliPayOrder数据-->
       <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
-          <el-form-item label="签约号" prop="outTradeNo">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+          <el-form-item label="支付宝交易号" prop="tradeNo">
+            <el-input
+              v-model="queryParams.tradeNo"
+              placeholder="请输入支付宝交易号"
+              clearable
+              style="width: 200px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="商户订单号" prop="outTradeNo">
             <el-input
               v-model="queryParams.outTradeNo"
-              placeholder="请输入签约号"
+              placeholder="请输入商户订单号"
               clearable
               style="width: 200px"
               @keyup.enter.native="handleQuery"
@@ -71,31 +80,49 @@
         <el-table v-loading="loading" :data="aliPayOrderList" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column label="id" align="center" key="id" prop="id" v-if="columns[0].visible" />
-          <el-table-column label="手机号" align="center" key="mobile" prop="mobile" v-if="columns[1].visible" width="150"/>
+          <el-table-column label="链接Id" align="center" key="linkId" prop="linkId" v-if="columns[1].visible" :show-overflow-tooltip="true" width="100"/>
           <el-table-column label="订单创建时间" align="center" key="orderTime" prop="orderTime" v-if="columns[2].visible" width="150">
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.orderTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="支付宝签约号" align="center" key="signCode" prop="signCode" v-if="columns[3].visible" width="180"/>
-          <el-table-column label="支付价格" align="center" key="price" prop="price" v-if="columns[4].visible" width="80"/>
-          <el-table-column label="其他类型签约号" align="center" key="otherOrderId" prop="otherOrderId" v-if="columns[5].visible" width="210"/>
-          <el-table-column label="用户支付宝唯一id" align="center" key="aliUserId" prop="aliUserId" v-if="columns[6].visible" width="150"/>
-          <el-table-column label="退订时间" align="center" key="unsubTime" prop="unsubTime" v-if="columns[7].visible">
+          <el-table-column label="账户名称" align="center" key="aliAccountName" prop="aliAccountName" v-if="columns[3].visible" width="150"/>
+          <el-table-column label="手机号" align="center" key="mobile" prop="mobile" v-if="columns[4].visible" width="150"/>
+          <el-table-column label="支付宝交易号" align="center" key="tradeNo" prop="tradeNo" v-if="columns[5].visible" width="180"/>
+          <el-table-column label="商户订单号" align="center" key="otherOrderId" prop="otherOrderId" v-if="columns[6].visible" width="210"/>
+          <el-table-column label="订单状态" align="center" key="status" prop="status" v-if="columns[7].visible" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              {{scope.row.status == '0' ? "失败" : scope.row.status == '1' ? "成功": scope.row.status == '2' ? "支付成功尚未回调":''}}
+            </template>
+          </el-table-column>
+          <el-table-column label="支付价格" align="center" key="price" prop="price" v-if="columns[8].visible" width="80"/>
+          <el-table-column label="用户支付宝唯一id" align="center" key="aliUserId" prop="aliUserId" v-if="columns[9].visible" width="150"/>
+          <el-table-column label="退订时间" align="center" key="unsubTime" prop="unsubTime" v-if="columns[10].visible">
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.unsubTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="业务类型" align="center" key="businessType" prop="businessType" v-if="columns[8].visible" :show-overflow-tooltip="true" width="100">
+          <el-table-column label="业务类型" align="center" key="businessType" prop="businessType" v-if="columns[11].visible" :show-overflow-tooltip="true" width="100">
             <template slot-scope="scope">
               {{scope.row.status == '1' ? "权益类业务" :''}}
             </template>
           </el-table-column>
-          <el-table-column label="链接Id" align="center" key="linkId" prop="linkId" v-if="columns[9].visible" :show-overflow-tooltip="true" width="100"/>
-          <el-table-column label="链接名字" align="center" key="linkName" prop="linkName" v-if="columns[10].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="订单状态" align="center" key="status" prop="status" v-if="columns[11].visible" :show-overflow-tooltip="true">
+          <el-table-column label="链接名称" align="center" key="linkName" prop="linkName" v-if="columns[12].visible" :show-overflow-tooltip="true" />
+         
+          <el-table-column
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
+          >
             <template slot-scope="scope">
-              {{scope.row.status == '0' ? "失败" : scope.row.status == '1' ? "成功": scope.row.status == '2' ? "支付成功尚未回调":''}}
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleRefund(scope.row)"
+                v-hasPermi="['rights:commonConfig:edit']"
+              >退款</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -112,7 +139,7 @@
 </template>
 
 <script>
-import { listAliPayOrder } from "@/api/rights/aliPayOrder";
+import { listAliPayOrder, aliPayRefund } from "@/api/rights/aliPayOrder";
 import { addRightsDateRange } from "@/utils/ruoyi";
 
 export default {
@@ -149,6 +176,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        tradeNo: undefined,
         outTradeNo: undefined,
         linkId: undefined,
         linkName: undefined,
@@ -159,31 +187,19 @@ export default {
       },
       // 列信息
       columns: [
-        // { key: 0, label: `id`, visible: true },
-        // { key: 1, label: `手机号`, visible: true },
-        // { key: 2, label: `订单创建时间`, visible: true },
-        // { key: 3, label: `支付宝签约号`, visible: true },
-        // { key: 4, label: `支付价格`, visible: true },
-        // { key: 5, label: `其他类型签约号`, visible: true },
-        // { key: 6, label: `用户支付宝唯一id`, visible: true },
-        // { key: 7, label: `退订时间`, visible: true },
-        // { key: 8, label: `业务类型`, visible: true },
-        // { key: 9, label: `链接Id`, visible: true },
-        // { key: 10, label: `链接名称`, visible: true },
-        // { key: 11, label: `订单状态`, visible: true }
-
         { key: 0, label: `id`, visible: true },
         { key: 1, label: `链接Id`, visible: true },
         { key: 2, label: `订单创建时间`, visible: true },
-        { key: 3, label: `手机号`, visible: true },
-        { key: 4, label: `支付宝交易号`, visible: true },
-        { key: 5, label: `商户订单号`, visible: true },
-        { key: 6, label: `订单状态`, visible: true },
-        { key: 7, label: `支付价格`, visible: true },
-        { key: 8, label: `用户支付宝唯一id`, visible: true },
-        { key: 9, label: `退订时间`, visible: true },
-        { key: 10, label: `业务类型`, visible: true },
-        { key: 11, label: `链接名称`, visible: true },
+        { key: 3, label: `账户名称`, visible: true },
+        { key: 4, label: `手机号`, visible: true },
+        { key: 5, label: `支付宝交易号`, visible: true },
+        { key: 6, label: `商户订单号`, visible: true },
+        { key: 7, label: `订单状态`, visible: true },
+        { key: 8, label: `支付价格`, visible: true },
+        { key: 9, label: `用户支付宝唯一id`, visible: true },
+        { key: 10, label: `退订时间`, visible: true },
+        { key: 11, label: `业务类型`, visible: true },
+        { key: 12, label: `链接名称`, visible: true },
       ],
     };
   },
@@ -212,6 +228,24 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+     /** 退款按钮操作 */
+    handleRefund(row) {
+      this.$modal.confirm('确认要退款手机号为"' + row.mobile + '"的用户的金额吗？').then(function() {
+        let data = {
+          aliAccountName: row.aliAccountName,
+          refundAmount: row.price,
+          outTradeNo: row.otherOrderId,
+          mobile: row.mobile
+        }
+        console.log('data',data)
+        return aliPayRefund(data);
+      }).then(() => {
+        this.$modal.msgSuccess("退款成功");
+      }).catch(function() {
+        
+      });
+    },
+
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id);
diff --git a/src/views/rights/aliPaySigningOrder/index.vue b/src/views/rights/aliPaySigningOrder/index.vue
index 746a7f9..b6a0015 100644
--- a/src/views/rights/aliPaySigningOrder/index.vue
+++ b/src/views/rights/aliPaySigningOrder/index.vue
@@ -89,32 +89,51 @@
               <span>{{ parseTime(scope.row.orderTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="支付宝签约号" align="center" key="signCode" prop="signCode" v-if="columns[3].visible" width="180"/>
-          <el-table-column label="支付价格" align="center" key="price" prop="price" v-if="columns[4].visible" width="80"/>
-          <el-table-column label="其他类型签约号" align="center" key="otherOrderId" prop="otherOrderId" v-if="columns[5].visible" width="210"/>
-          <el-table-column label="用户支付宝唯一id" align="center" key="aliUserId" prop="aliUserId" v-if="columns[6].visible" width="150"/>
-          <el-table-column label="退订时间" align="center" key="unsubTime" prop="unsubTime" v-if="columns[7].visible">
+          <el-table-column label="账户名称" align="center" key="aliAccountName" prop="aliAccountName" v-if="columns[3].visible" width="150"/>
+          <el-table-column label="订单号" align="center" key="orderId" prop="orderId" v-if="columns[4].visible" width="210"/>
+          <el-table-column label="支付宝签约号" align="center" key="signCode" prop="signCode" v-if="columns[5].visible" width="180"/>
+          <el-table-column label="支付价格" align="center" key="price" prop="price" v-if="columns[6].visible" width="80"/>
+          <el-table-column label="其他类型签约号" align="center" key="otherOrderId" prop="otherOrderId" v-if="columns[7].visible" width="210"/>
+          <el-table-column label="用户支付宝唯一id" align="center" key="aliUserId" prop="aliUserId" v-if="columns[8].visible" width="150"/>
+          <el-table-column label="退订时间" align="center" key="unsubTime" prop="unsubTime" v-if="columns[9].visible">
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.unsubTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="业务类型" align="center" key="businessType" prop="businessType" v-if="columns[8].visible" :show-overflow-tooltip="true" width="100">
+          <el-table-column label="业务类型" align="center" key="businessType" prop="businessType" v-if="columns[10].visible" :show-overflow-tooltip="true" width="100">
             <template slot-scope="scope">
               {{scope.row.status == '1' ? "权益类业务" :''}}
             </template>
           </el-table-column>
-          <el-table-column label="链接Id" align="center" key="linkId" prop="linkId" v-if="columns[9].visible" :show-overflow-tooltip="true" width="100"/>
-          <el-table-column label="链接名字" align="center" key="linkName" prop="linkName" v-if="columns[10].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="订单状态" align="center" key="status" prop="status" v-if="columns[11].visible" :show-overflow-tooltip="true">
+          <el-table-column label="链接Id" align="center" key="linkId" prop="linkId" v-if="columns[11].visible" :show-overflow-tooltip="true" width="100"/>
+          <el-table-column label="链接名字" align="center" key="linkName" prop="linkName" v-if="columns[12].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="订单状态" align="center" key="status" prop="status" v-if="columns[13].visible" :show-overflow-tooltip="true">
             <template slot-scope="scope">
               {{scope.row.status == '0' ? "失败" : scope.row.status == '1' ? "成功": scope.row.status == '2' ? "支付成功尚未回调":''}}
             </template>
           </el-table-column>
-           <el-table-column label="下次续费时间" align="center" key="nextPayTime" prop="nextPayTime" v-if="columns[12].visible" width="150">
+           <el-table-column label="下次续费时间" align="center" key="nextPayTime" prop="nextPayTime" v-if="columns[14].visible" width="150">
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.nextPayTime) }}</span>
             </template>
           </el-table-column>
+
+          <el-table-column
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleCancel(scope.row)"
+                v-hasPermi="['rights:aliPaySignOrder:edit']"
+              >解约</el-button>
+            </template>
+          </el-table-column>
         </el-table>
 
         <pagination
@@ -129,7 +148,7 @@
 </template>
 
 <script>
-import { listAliPaySigningOrder } from "@/api/rights/aliPaySigningOrder";
+import { listAliPaySigningOrder,aliPayUnSign } from "@/api/rights/aliPaySigningOrder";
 import { addRightsDateRange } from "@/utils/ruoyi";
 
 export default {
@@ -182,16 +201,18 @@ export default {
         { key: 0, label: `id`, visible: true },
         { key: 1, label: `手机号`, visible: true },
         { key: 2, label: `订单创建时间`, visible: true },
-        { key: 3, label: `支付宝签约号`, visible: true },
-        { key: 4, label: `支付价格`, visible: true },
-        { key: 5, label: `其他类型签约号`, visible: true },
-        { key: 6, label: `用户支付宝唯一id`, visible: true },
-        { key: 7, label: `退订时间`, visible: true },
-        { key: 8, label: `业务类型`, visible: true },
-        { key: 9, label: `链接Id`, visible: true },
-        { key: 10, label: `链接名称`, visible: true },
-        { key: 11, label: `订单状态`, visible: true },
-        { key: 12, label: `下次续费时间`, visible: true }
+        { key: 3, label: `账户名称`, visible: true },
+        { key: 4, label: `订单号`, visible: true },
+        { key: 5, label: `支付宝签约号`, visible: true },
+        { key: 6, label: `支付价格`, visible: true },
+        { key: 7, label: `其他类型签约号`, visible: true },
+        { key: 8, label: `用户支付宝唯一id`, visible: true },
+        { key: 9, label: `退订时间`, visible: true },
+        { key: 10, label: `业务类型`, visible: true },
+        { key: 11, label: `链接Id`, visible: true },
+        { key: 12, label: `链接名称`, visible: true },
+        { key: 13, label: `订单状态`, visible: true },
+        { key: 14, label: `下次续费时间`, visible: true }
       ],
     };
   },
@@ -220,6 +241,22 @@ export default {
       this.dateTimeRangeNext = [];
       this.resetForm("queryForm");
       this.handleQuery();
+    },
+      /** 解约按钮操作 */
+      handleCancel(row) {
+      this.$modal.confirm('确认要解约手机号为"' + row.mobile + '"的用户吗？').then(function() {
+        let data = {
+          orderId: row.orderId,
+          mobile: row.mobile,
+          accountName: row.aliAccountName
+        }
+        console.log('data',data)
+        return aliPayUnSign(data);
+      }).then(() => {
+        this.$modal.msgSuccess("解约成功");
+      }).catch(function() {
+        
+      });
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
diff --git a/src/views/rights/refundOrder/index.vue b/src/views/rights/refundOrder/index.vue
new file mode 100644
index 0000000..5e68cd1
--- /dev/null
+++ b/src/views/rights/refundOrder/index.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--rightsOrder数据-->
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
+          <el-form-item label="手机号" prop="mobile">
+            <el-input
+              v-model="queryParams.mobile"
+              placeholder="请输入手机号"
+              clearable
+              style="width: 200px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="商户订单号" prop="outTradeNo">
+            <el-input
+              v-model="queryParams.outTradeNo"
+              placeholder="商户订单号"
+              clearable
+              style="width: 200px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="链接id" prop="linkId">
+            <el-input
+              v-model="queryParams.linkId"
+              placeholder="链接id"
+              clearable
+              style="width: 200px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="订单状态" prop="status" label-width="80px">
+            <el-select v-model="queryParams.status" placeholder="订单状态" clearable>
+              <el-option
+              v-for="item in status"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="退款订单号" prop="outRequestNo">
+            <el-input
+              v-model="queryParams.outRequestNo"
+              placeholder="请输入退款订单号"
+              clearable
+              style="width: 200px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+      <el-form-item label="下单时间">
+            <el-date-picker
+              v-model="dateTimeRange"
+              style="width: 240px"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+            ></el-date-picker>
+          </el-form-item>
+      
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+        <el-table v-loading="loading" :data="refundOrderList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="id" align="center" key="id" prop="id" v-if="columns[0].visible" />
+          <el-table-column label="手机号" align="center" key="mobile" prop="mobile" v-if="columns[1].visible" width="150"/>
+          <el-table-column label="退款时间" align="center" key="refundTime" prop="refundTime" v-if="columns[2].visible" width="150">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.refundTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="商户订单号" align="center" key="outTradeNo" prop="outTradeNo" v-if="columns[3].visible" width="210"/>
+          <el-table-column label="退款订单号" align="center" key="outRequestNo" prop="outRequestNo" v-if="columns[4].visible" width="100"/>
+          <el-table-column label="退款金额" align="center" key="refundPrice" prop="refundPrice" v-if="columns[5].visible" width="210"/>
+          <el-table-column label="链接id" align="center" key="linkId" prop="linkId" v-if="columns[6].visible" width="150"/>
+          <el-table-column label="状态" align="center" key="status" prop="status" v-if="columns[7].visible" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              {{scope.row.status == '0' ? "失败" : scope.row.status == '1' ? "成功":''}}
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"/>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listRefund } from "@/api/rights/refundOrder";
+import { addRightsDateRange } from "@/utils/ruoyi";
+
+export default {
+  name: "refundOrder",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 退款订单列表数据
+      refundOrderList: null,
+      // 日期时间范围
+      dateTimeRange: [],
+      //订单状态
+      status: [
+        { value:'0',label:'失败'},
+        { value:'1',label:'成功'}
+      ],
+      // 表单参数
+      form: {},
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        outTradeNo: undefined,
+        outRequestNo: undefined,
+        linkId: undefined,
+        mobile: undefined,
+        status: undefined,
+        beginTime: undefined,
+        endTime: undefined
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `id`, visible: true },
+        { key: 1, label: `手机号`, visible: true },
+        { key: 2, label: `退款时间`, visible: true },
+        { key: 3, label: `商户订单号`, visible: true },
+        { key: 4, label: `退款订单号`, visible: true },
+        { key: 5, label: `退款金额`, visible: true },
+        { key: 6, label: `链接id`, visible: true },
+        { key: 7, label: `状态`, visible: true }
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询refundOrder列表 */
+    getList() {
+      this.loading = true;
+      listRefund(this.addRightsDateRange(this.queryParams,this.dateTimeRange)).then(response => {
+          this.refundOrderList = response.records;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateTimeRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+  }
+};
+</script>
\ No newline at end of file