update

generate-code/cli.js

@@ -9,18 +9,62 @@
 // 1.通过命令交互询问用户问题
 // 2.根据用户回答的结果生成文件
 
+// 在终端 执行 generate-code
+
 const inquirer = require('inquirer');
 const fs = require('fs');
 const path = require('path');
 const ejs = require('ejs');
-const { tmpdir } = require('os');
-const { createPartiallyEmittedExpression } = require('typescript');
 
 // 读取json
 const list = JSON.parse(fs.readFileSync('./generate-code/pc_menu_企业风管.json'));
 // 目标目录
 // const destDir = process.cwd();
-const destDir = path.join(process.cwd(), 'src/pages');
+const destDir = path.join(process.cwd(), 'src');
+
+/*** ===================== 生成弹窗名枚举 ==================== ****/
+const enumPath = path.join(destDir, '/common/constants/modalNameEnum.ts');
+let name = `export enum ModalEnum {
+    notice = 'notice',  // 消息
+    logout = 'logout', // 退出登录
+    commomOrder = 'commom-order', // 下单通用界面
+
+    detail = 'detail', // 详情`;
+
+function getModalEnum(arr, callback) {
+	arr.forEach((el) => {
+		const { code, title, children, type } = el;
+		if (type === 2) {
+			// 按钮类型
+			fs.promises.readFile(enumPath).then((res) => {
+				console.log(code);
+				if (!name.includes(code)) {
+					name += `
+					${code} = '${code}', // ${title}
+					`;
+					callback();
+				}
+				getModalEnum(children, callback);
+			});
+		} else {
+			getModalEnum(children, callback);
+		}
+	});
+}
+
+getModalEnum(list, () => {
+	const temp =
+		name +
+		`
+}`;
+	// fs.unlink(enumPath, (err) => {
+	// 	// !err && console.log('文件删除成功！');
+	// });
+
+	fs.writeFileSync(enumPath, temp, { flag: 'w+' }, (err) => {
+		// !err && console.log('写入文件成功！');
+	});
+});
 
 //检查某个目录是否存在
 function hasFile(url, code) {
@@ -47,58 +91,59 @@ function writeFile(url, code) {
 	}
 	return Promise.resolve(false);
 }
-list.forEach((el) => {
-	const { code, children } = el;
-	writeFile(destDir, code).then(() => {
-		if (children) {
-			children.forEach((item) => {
-				writeFile(path.join(destDir, `/${code}`), item.code).then(() => {
-					if (item.children) {
-						item.children.forEach((e) => {
-							const path1 = `/${code}/${item.code}`;
-							writeFile(path.join(destDir, path1), e.code).then(() => {
-								const path2 = `${path1}/${e.code}`;
-								// index.vue
-								if (!hasFile(path.join(destDir, path2), 'index.vue')) {
-									const template = `
-
-									`;
-									fs.writeFileSync(path.join(destDir, `${path2}/index.vue`), template);
-								}
-								// components
-								writeFile(path.join(destDir, `${path2}`), 'components').then(() => {
-									if (e.children) {
-										const path3 = `${path2}/components`;
-										e.children.forEach((ele) => {
-											writeFile(path.join(destDir, path3), ele.code).then((res) => {
-												if (res) {
-													if (
-														!hasFile(
-															path.join(destDir, `${path3}/${ele.code}`),
-															'index.vue'
-														)
-													) {
-														const template = `
-														`;
-														fs.writeFileSync(
-															path.join(destDir, `${path3}${ele.code}/index.vue`),
-															template
-														).then(res => {
-															if (res) {
-
-															}
-														}
-													}
-												}
-											});
-										});
-									}
-								});
-							});
-						});
-					}
-				});
-			});
-		}
-	});
-});
+
+// list.forEach((el) => {
+// 	const { code, children } = el;
+// 	writeFile(destDir, code).then(() => {
+// 		if (children) {
+// 			children.forEach((item) => {
+// 				writeFile(path.join(destDir, `/${code}`), item.code).then(() => {
+// 					if (item.children) {
+// 						item.children.forEach((e) => {
+// 							const path1 = `/${code}/${item.code}`;
+// 							writeFile(path.join(destDir, path1), e.code).then(() => {
+// 								const path2 = `${path1}/${e.code}`;
+// 								// index.vue
+// 								if (!hasFile(path.join(destDir, path2), 'index.vue')) {
+// 									const template = `
+
+// 									`;
+// 									fs.writeFileSync(path.join(destDir, `${path2}/index.vue`), template);
+// 								}
+// 								// components
+// 								writeFile(path.join(destDir, `${path2}`), 'components').then(() => {
+// 									if (e.children) {
+// 										const path3 = `${path2}/components`;
+// 										e.children.forEach((ele) => {
+// 											writeFile(path.join(destDir, path3), ele.code).then((res) => {
+// 												if (res) {
+// 													if (
+// 														!hasFile(
+// 															path.join(destDir, `${path3}/${ele.code}`),
+// 															'index.vue'
+// 														)
+// 													) {
+// 														const template = `
+// 														`;
+// 														fs.writeFileSync(
+// 															path.join(destDir, `${path3}${ele.code}/index.vue`),
+// 															template
+// 														).then(res => {
+// 															if (res) {
+
+// 															}
+// 														}
+// 													}
+// 												}
+// 											});
+// 										});
+// 									}
+// 								});
+// 							});
+// 						});
+// 					}
+// 				});
+// 			});
+// 		}
+// 	});
+// });

public/config/app.config.json

@@ -1,3 +1,3 @@
 {
-    "apiUrl": "http://192.168.31.171:8080/cfg?key=test_171"
+    "apiUrl": "http://218.17.158.45:21001/cfg?key=test_176"
 }

src/common/components/btnList/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="btn-list">
+    <a-button :class="item.className"
+              v-for="item in btnList"
+              :key="item.lable"
+              @click.stop="onClick(item)">
+      {{item.lable}}
+    </a-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { BtnList } from './interface';
+
+export default defineComponent({
+    props: {
+        btnList: {
+            // 按钮列表数据
+            default: [],
+            type: Array as PropType<BtnList[]>,
+        },
+        record: {
+            default: {},
+            type: Object,
+        },
+    },
+    setup(props, context) {
+        function onClick(item: BtnList) {
+            context.emit('click', item, props.record);
+        }
+        return { onClick };
+    },
+});
+</script>
+
+<style lang="less">
+.btn-list {
+    display: inline-flex;
+}
+</style>

src/common/components/btnList/interface.ts

@@ -0,0 +1,6 @@
+export type BtnClassName = 'btnDeafault' | 'btnPrimary' | 'btnDanger' | 'operBtn'
+export interface BtnList {
+    lable: string;  // 按钮名字
+    code: string;   //
+    className: BtnClassName    // 按钮 class 名字
+}

src/common/components/contextMenu/contextMenu.vue

@@ -1,6 +1,6 @@
 <template>
+
   <ul class="context-menu"
-      v-show="contextMenu.show"
       :style="{ top: y, left: x }">
     <li v-for="(item, index) in contextMenu.menuList"
         :key="index"
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType, onUnmounted, computed } from 'vue';
+import { defineComponent, PropType, computed } from 'vue';
 import { ContextMenu } from './interface';
 
 export default defineComponent({
@@ -20,16 +20,13 @@ export default defineComponent({
         contextMenu: {
             default: {
                 position: { clientX: 0, clientY: 0 },
-                show: false,
                 menuList: [],
-                selectedData: null,
             },
             type: Object as PropType<ContextMenu>,
         },
     },
     components: {},
     setup(props, context) {
-        onUnmounted(() => {});
         function choose(fn: Function) {
             context.emit('update', false);
             fn && fn(props.contextMenu.selectedData);

src/common/components/contextMenu/interface.ts

@@ -1,3 +1,4 @@
+
 export interface MenuItem {
     lable: string;
     callback: Function;
@@ -14,3 +15,8 @@ export interface ContextMenu {
     menuList: MenuItem[];
     selectedData: any;  // 选中表格的数据
 }
+
+export interface ContextMenuTemp {
+    position: Position; // 右键菜单位置
+    show: boolean;
+}

src/common/components/contextMenu/setup.ts

@@ -0,0 +1,23 @@
+import { ContextMenuTemp } from "@/common/components/contextMenu/interface";
+import { ref } from "vue";
+
+// 处理右键打开与关闭逻辑
+export function handleContextMenu() {
+    // 右键数据
+    const contextMenu = ref<ContextMenuTemp>({
+        position: { clientX: 0, clientY: 0 },
+        show: false,
+    })
+    // 打开右键
+    function openContext(value: ContextMenuTemp) {
+        contextMenu.value = value
+    }
+    // 关闭右键
+    function closeContext() {
+        contextMenu.value = {
+            position: { clientX: 0, clientY: 0 },
+            show: false,
+        }
+    }
+    return { contextMenu, openContext, closeContext }
+}

src/common/components/contextMenu/temp.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="context-menu-container"
+       v-if="contextMenu.show"
+       @click="close">
+    <ul class="context-menu"
+        :style="styleParam">
+      <li v-for="(item, index) in list"
+          :key="index"
+          @click.stop="choose(item)">
+        {{item.lable}}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed, watch, watchEffect, ref, reactive } from 'vue';
+import { ContextMenuTemp } from './interface';
+import { BtnList } from '../btnList/interface';
+
+export default defineComponent({
+    name: 'context-menu',
+    props: {
+        contextMenu: {
+            default: {
+                position: { clientX: 0, clientY: 0 },
+                show: false,
+            },
+            type: Object as PropType<ContextMenuTemp>,
+        },
+        list: {
+            default: [],
+            type: Array as PropType<BtnList[]>,
+        },
+    },
+    setup(props, context) {
+        function choose(item: BtnList) {
+            console.log(item);
+            context.emit('update', item);
+            // fn && fn(props.contextMenu.selectedData);
+        }
+        function close() {
+            context.emit('cancel');
+        }
+        const styleParam = reactive<{ left: string; top: string }>({ left: '0px', top: '0px' });
+        watchEffect(() => {
+            if (props.contextMenu.show) {
+                styleParam.left = `${props.contextMenu.position.clientX}px`;
+                styleParam.top = `${props.contextMenu.position.clientY}px`;
+                console.log(styleParam);
+            }
+        });
+        return { choose, styleParam, close };
+    },
+});
+</script>
+
+<style lang="less">
+.context-menu-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+}
+.context-menu {
+    min-width: 100px;
+    user-select: none;
+    position: fixed;
+    background-color: #282e34;
+    z-index: 999;
+    border-radius: 2px;
+    border: 1px solid #2e3539;
+    padding-left: 0;
+    list-style: none;
+    margin-bottom: 0;
+    cursor: pointer;
+    li {
+        padding: 6px;
+        color: #88a0ae;
+        font-size: 16px;
+        border-bottom: 1px solid #2e3539;
+        text-align: center;
+        &:hover {
+            color: #e5e5e5;
+            background-color: #343e48;
+        }
+    }
+}
+</style>;

src/common/constants/modalNameEnum.ts

@@ -4,108 +4,236 @@ export enum ModalEnum {
     commomOrder = 'commom-order', // 下单通用界面
 
     detail = 'detail', // 详情
-
-    custom_info_btn_add = 'custom_info_btn_add', // 客户资料 添加
-    custom_info_btn_modify = 'custom_info_btn_modify',// 客户资料 修改
-    custom_info_btn_disable = 'custom_info_btn_disable',// 客户资料 停用
-    custom_info_btn_recover = 'custom_info_btn_recover',// 客户资料 恢复
-    custom_info_btn_delete = 'custom_info_btn_delete',// 客户资料 删除
-    custom_info_btn_cancel = 'custom_info_btn_cancel',// 客户资料 撤销
-    custom_info_btn_check = 'custom_info_btn_check',// 客户资料 审核
-
-    goods_info_spot_normal_add = 'goods_info_spot_normal_add', // 现货品种 新增
-    goods_info_spot_normal_modify = 'goods_info_spot_normal_modify', // 现货品种 修改
-    goods_info_spot_normal_disable = 'goods_info_spot_normal_disable', // 现货品种 停用
-    goods_info_spot_disable_recover = 'goods_info_spot_disable_recover', // 现货品种 恢复
-
-    goods_info_hedge_normal_modify = 'goods_info_hedge_normal_modify', // 套保品种  修改
-
-    spot_contract_btn_add = 'spot_contract_btn_add', // 现货合同 添加
-    spot_contract_btn_resubmit = 'spot_contract_btn_resubmit', // 现货合同 重新提交
-    spot_contract_btn_modify = 'spot_contract_btn_modify', // 现货合同 修改
-    spot_contract_btn_delete = 'spot_contract_btn_delete', // 现货合同 删除
-    spot_contract_btn_finish = 'spot_contract_btn_finish', // 现货合同 正常完结
-    spot_contract_btn_check = 'spot_contract_btn_check', // 现货合同 审核
-    spot_contract_btn_cancel = 'spot_contract_btn_cancel', // 现货合同 撤销
-
-    account_info_business_btn_add = 'account_info_business_btn_add', // 业务账户 新增
-    account_info_business_btn_modify = 'account_info_business_btn_modify', // 业务账户 修改
-    account_info_business_btn_reset = 'account_info_business_btn_reset', // 业务账户 重置密码
-    account_info_business_btn_locked = 'account_info_business_btn_locked', // 业务账户 锁定
-    account_info_business_btn_cancel = 'account_info_business_btn_cancel', // 业务账户 注销
-    account_info_business_btn_unlocked = 'account_info_business_btn_unlocked', // 业务账户 解锁
-
-    account_info_trade_btn_add = 'account_info_trade_btn_add',// 交易员 新增
-    account_info_trade_child_btn_add = 'account_info_trade_child_btn_add',// 交易账户 新增
-    account_info_trade_btn_modify = 'account_info_trade_btn_modify',// 交易账户 修改
-    account_info_trade_btn_child_modify = 'account_info_trade_btn_child_modify',// 交易子账户 修改
-    account_info_trade_btn_child_locked = 'account_info_trade_btn_child_locked',// 交易账户 锁定
-    account_info_trade_btn_child_unlocked = 'account_info_trade_btn_child_unlocked',// 交易账户 解锁
-    account_info_trade_btn_child_reset = 'account_info_trade_btn_child_reset',// 交易账户 重置密码
-    account_info_trade_btn_child_logout = 'account_info_trade_btn_child_logout',// 业务账户 注销
-
-    account_info_manager_btn_add = 'account_info_manager_btn_add', // 管理账户 新增
-    account_info_manager_btn_child_add = 'account_info_manager_btn_child_add', // 管理子账户 新增
-    account_info_manager_btn_modify = 'account_info_manager_btn_modify', // 管理账户 修改
-    account_info_manager_btn_setting = 'account_info_manager_btn_setting', // 管理账户 权限设置
-    account_info_manager_btn_setting_modify = 'account_info_manager_btn_setting_modify', // 管理账户 权限修改
-    account_info_manager_btn_setting_delete = 'account_info_manager_btn_setting_delete', // 管理账户 权限删除
-    account_info_manager_btn_setting_detail = 'account_info_manager_btn_setting_detail', // 管理账户 权限详情
-
-    account_info_manager_btn_permission_add = 'account_info_manager_btn_permission_add', // 管理账户 新增
-    account_info_manager_btn_reset = 'account_info_manager_btn_reset', // 管理账户 重置密码
-    account_info_manager_btn_locked = 'account_info_manager_btn_locked', // 管理账户 锁定
-    account_info_manager_btn_unlocked = 'account_info_manager_btn_unlocked', // 管理账户 解锁
-    account_info_manager_btn_logout = 'account_info_manager_btn_logout', // 管理账户 注销
-
-    account_info_futures_btn_add = 'account_info_futures_btn_add', // 期货账户   新增
-    account_info_futures_btn_child_add = 'account_info_futures_btn_child_add', // 期货子账户 新增
-    account_info_futures_btn_modify = 'account_info_futures_btn_modify', // 期货账户 修改
-    account_info_futures_btn_child_modify = 'account_info_futures_btn_child_modify', // 期货子账户 修改
-    account_info_futures_btn_credit = 'account_info_futures_btn_credit', // 期货账户 授权
-    account_info_futures_btn_child_cancel = 'account_info_futures_btn_child_cancel', // 期货账户 注销
-    account_info_futures_btn_child_credit = 'account_info_futures_btn_child_credit', // 期货账户 授信
-
-    warehouse_info_btn_add = 'warehouse_info_btn_add', // 仓库信息 新增
-    warehouse_info_btn_modify = 'warehouse_info_btn_modify', // 现货合同 修改
-    warehouse_info_btn_disable = 'warehouse_info_btn_disable', // 现货合同 停用
-    warehouse_info_btn_recover = 'warehouse_info_btn_recover', // 现货合同 恢复
-
-    purchase_pending_someprice = 'purchase_pending_someprice', // 采购 点价登记
-    purchase_pending_settlement = 'purchase_pending_settlement', // 采购 交收登记
-    purchase_pending_funds = 'purchase_pending_funds', // 采购 款项登记
-    purchase_pending_invoice = 'purchase_pending_invoice', // 采购 发票登记
-    purchase_pending_storage = 'purchase_pending_storage', // 采购 入库登记
-
-    sell_pending_someprice = 'sell_pending_someprice', // 销售 点价登记
-    sell_pending_settlement = 'sell_pending_settlement', // 销售 交收登记
-    sell_pending_funds = 'sell_pending_funds', // 销售 款项登记
-    sell_pending_invoice = 'sell_pending_invoice', // 销售 发票登记
-    sell_pending_storage = 'sell_pending_storage', // 销售 出库登记
-
-    plan_uncommitted_recommit = 'plan_uncommitted_recommit', // 计划 重新提交
-    plan_uncommitted_modify = 'plan_uncommitted_modify', // 计划 修改
-    plan_uncommitted_delete = 'plan_uncommitted_delete', // 计划 删除
-    plan_audit_audit = 'plan_audit_audit', // 计划 审核
-    plan_audit_cancel = 'plan_audit_cancel', // 计划 撤销
-    plan_btn_add = 'plan_btn_add', // 计划 新增
-
-    business_review_someprice_audit = 'business_review_someprice_audit', // 点价 审核
-    business_review_someprice_cancel = 'business_review_someprice_cancel', // 点价 撤销
-
-    business_review_settlement_audit = 'business_review_settlement_audit', // 交收 审核
-    business_review_settlement_cancel = 'business_review_settlement_cancel', // 交收 撤销
-
-    finance_review_funds_audit = 'finance_review_funds_audit', // 款项 审核
-    finance_review_funds_cancel = 'finance_review_funds_cancel', // 款项 撤销
-
-    finance_review_invoice_audit = 'finance_review_invoice_audit', // 发票 审核
-    finance_review_invoice_cancel = 'finance_review_invoice_cancel', // 发票 撤销
-
-    inventory_review_checkin_audit = 'inventory_review_checkin_audit', // 入库 审核
-    inventory_review_checkin_cancel = 'inventory_review_checkin_cancel', // 入库 撤销
-    inventory_review_checkout_audit = 'inventory_review_checkout_audit', // 出库 审核
-    inventory_review_checkout_cancel = 'inventory_review_checkout_cancel', // 出库 撤销
-
-    inventory_current_add = 'inventory_current_add', // 库存查询 新增
+					open = 'open', // 开仓
+					
+					custom_info_btn_delete = 'custom_info_btn_delete', // 删除
+					
+					custom_info_btn_check = 'custom_info_btn_check', // 审核
+					
+					goods_info_spot_normal_modify = 'goods_info_spot_normal_modify', // 修改
+					
+					custom_info_btn_modify = 'custom_info_btn_modify', // 修改
+					
+					goods_info_hedge_normal_modify = 'goods_info_hedge_normal_modify', // 修改
+					
+					warehouse_info_btn_disable = 'warehouse_info_btn_disable', // 停用
+					
+					warehouse_info_btn_add = 'warehouse_info_btn_add', // 新增
+					
+					spot_contract_btn_finish = 'spot_contract_btn_finish', // 正常完结
+					
+					custom_info_btn_cancel = 'custom_info_btn_cancel', // 撤销
+					
+					goods_info_spot_normal_add = 'goods_info_spot_normal_add', // 新增
+					
+					spot_contract_btn_add = 'spot_contract_btn_add', // 新增
+					
+					account_info_manager_btn_setting = 'account_info_manager_btn_setting', // 权限设置
+					
+					purchase_pending_funds = 'purchase_pending_funds', // 款项登记
+					
+					purchase_pending_settlement = 'purchase_pending_settlement', // 交收登记
+					
+					account_info_futures_btn_add = 'account_info_futures_btn_add', // 新增
+					
+					plan_uncommitted_delete = 'plan_uncommitted_delete', // 删除
+					
+					business_review_someprice_audit = 'business_review_someprice_audit', // 审核
+					
+					custom_info_btn_disable = 'custom_info_btn_disable', // 停用
+					
+					custom_info_btn_add = 'custom_info_btn_add', // 新增
+					
+					spot_contract_btn_modify = 'spot_contract_btn_modify', // 重新提交
+					
+					spot_contract_btn_check = 'spot_contract_btn_check', // 审核
+					
+					purchase_pending_storage = 'purchase_pending_storage', // 入库登记
+					
+					plan_audit_audit = 'plan_audit_audit', // 审核
+					
+					spot_contract_btn_delete = 'spot_contract_btn_delete', // 删除
+					
+					purchase_pending_someprice = 'purchase_pending_someprice', // 点价登记
+					
+					purchase_pending_invoice = 'purchase_pending_invoice', // 发票登记
+					
+					sell_pending_someprice = 'sell_pending_someprice', // 点价登记
+					
+					plan_btn_add = 'plan_btn_add', // 新增
+					
+					platinum_custom_info_add = 'platinum_custom_info_add', // 新增
+					
+					finance_review_invoice_cancel = 'finance_review_invoice_cancel', // 撤销
+					
+					platinum_pick_goods_management_add = 'platinum_pick_goods_management_add', // 新增
+					
+					platinum_withdrawal_review_refuse = 'platinum_withdrawal_review_refuse', // 审核拒绝
+					
+					inventory_review_checkin_cancel = 'inventory_review_checkin_cancel', // 撤销
+					
+					business_review_settlement_audit = 'business_review_settlement_audit', // 审核
+					
+					account_info_trade_btn_add = 'account_info_trade_btn_add', // 新增
+					
+					sell_pending_invoice = 'sell_pending_invoice', // 发票登记
+					
+					platinum_pick_query_confirm_pickup = 'platinum_pick_query_confirm_pickup', // 确认取货
+					
+					platinum_recharge_review_confirm_payment = 'platinum_recharge_review_confirm_payment', // 确认收款
+					
+					platinum_pick_query_upload_logistics = 'platinum_pick_query_upload_logistics', // 上传物流
+					
+					warehouse_info_btn_recover = 'warehouse_info_btn_recover', // 恢复
+					
+					close = 'close', // 平仓
+					
+					business_review_settlement_cancel = 'business_review_settlement_cancel', // 撤销
+					
+					platinum_agents_and_stores_logout = 'platinum_agents_and_stores_logout', // 注销
+					
+					platinum_contract_commodity_suspension_add = 'platinum_contract_commodity_suspension_add', // 新增
+					
+					platinum_agents_and_stores_add = 'platinum_agents_and_stores_add', // 新增
+					
+					platinum_capital_flow = 'platinum_capital_flow', // 资金流水
+					
+					account_info_manager_btn_add = 'account_info_manager_btn_add', // 新增权限模板
+					
+					platinum_promotion_report = 'platinum_promotion_report', // 推广报表
+					
+					account_info_business_btn_add = 'account_info_business_btn_add', // 新增
+					
+					platinum_financing_information_detail = 'platinum_financing_information_detail', // 融资明细
+					
+					platinum_agents_and_stores_modify = 'platinum_agents_and_stores_modify', // 修改
+					
+					platinum_broker_management = 'platinum_broker_management', // 经纪人管理
+					
+					spot_contract_btn_cancel = 'spot_contract_btn_cancel', // 撤销
+					
+					sell_pending_funds = 'sell_pending_funds', // 款项登记
+					
+					platinum_spot_and_price_modify = 'platinum_spot_and_price_modify', // 修改
+					
+					warehouse_info_btn_modify = 'warehouse_info_btn_modify', // 修改
+					
+					goods_info_spot_normal_disable = 'goods_info_spot_normal_disable', // 停用
+					
+					platinum_withdrawal_review_confirm_withdrawal = 'platinum_withdrawal_review_confirm_withdrawal', // 确认提现
+					
+					plan_uncommitted_modify = 'plan_uncommitted_modify', // 修改
+					
+					custom_info_btn_recover = 'custom_info_btn_recover', // 恢复
+					
+					finance_review_funds_cancel = 'finance_review_funds_cancel', // 撤销
+					
+					plan_audit_cancel = 'plan_audit_cancel', // 撤销
+					
+					business_review_someprice_cancel = 'business_review_someprice_cancel', // 撤销
+					
+					platinum_contract_goods_add = 'platinum_contract_goods_add', // 新增
+					
+					inventory_review_checkout_cancel = 'inventory_review_checkout_cancel', // 撤销
+					
+					platinum_pick_query_receipt = 'platinum_pick_query_receipt', // 确认收货
+					
+					inventory_current_add = 'inventory_current_add', // 新增
+					
+					sell_pending_settlement = 'sell_pending_settlement', // 交收登记
+					
+					finance_review_funds_audit = 'finance_review_funds_audit', // 审核
+					
+					sell_pending_storage = 'sell_pending_storage', // 出库登记
+					
+					finance_review_invoice_audit = 'finance_review_invoice_audit', // 审核
+					
+					platinum_agreement_add = 'platinum_agreement_add', // 新增
+					
+					platinum_pick_query_complete_stocking = 'platinum_pick_query_complete_stocking', // 完成备货
+					
+					inventory_review_checkout_audit = 'inventory_review_checkout_audit', // 审核
+					
+					inventory_review_checkin_audit = 'inventory_review_checkin_audit', // 审核
+					
+					platinum_recharge_review_refuse = 'platinum_recharge_review_refuse', // 审核拒绝
+					
+					account_info_futures_btn_child_add = 'account_info_futures_btn_child_add', // 新增
+					
+					account_info_futures_btn_modify = 'account_info_futures_btn_modify', // 修改
+					
+					platinum_custom_info_normal_modify = 'platinum_custom_info_normal_modify', // 修改
+					
+					platinum_custom_info_normal_stop = 'platinum_custom_info_normal_stop', // 停用
+					
+					platinum_pick_goods_management_modify = 'platinum_pick_goods_management_modify', // 修改
+					
+					platinum_pick_goods_management_logout = 'platinum_pick_goods_management_logout', // 注销
+					
+					platinum_contract_goods_modify = 'platinum_contract_goods_modify', // 修改
+					
+					platinum_contract_goods_logout = 'platinum_contract_goods_logout', // 注销
+					
+					inventory_current_detail_storesave = 'inventory_current_detail_storesave', // 库存明细
+					
+					inventory_current_detail_storehouse = 'inventory_current_detail_storehouse', // 仓库明细
+					
+					account_info_trade_child_btn_add = 'account_info_trade_child_btn_add', // 新增
+					
+					account_info_trade_btn_modify = 'account_info_trade_btn_modify', // 修改
+					
+					platinum_agreement_modify = 'platinum_agreement_modify', // 修改
+					
+					platinum_agreement_stop = 'platinum_agreement_stop', // 停用
+					
+					platinum_agreement_resume = 'platinum_agreement_resume', // 恢复
+					
+					platinum_agreement_delete = 'platinum_agreement_delete', // 注销
+					
+					platinum_customer_info_unsubmit_check = 'platinum_customer_info_unsubmit_check', // 审核
+					
+					platinum_contract_commodity_suspension_modify = 'platinum_contract_commodity_suspension_modify', // 修改
+					
+					account_info_manager_btn_child_add = 'account_info_manager_btn_child_add', // 新增
+					
+					account_info_business_btn_modify = 'account_info_business_btn_modify', // 修改
+					
+					account_info_business_btn_reset = 'account_info_business_btn_reset', // 重置密码
+					
+					account_info_business_btn_locked = 'account_info_business_btn_locked', // 锁定
+					
+					account_info_business_btn_unlocked = 'account_info_business_btn_unlocked', // 解锁
+					
+					account_info_business_btn_cancel = 'account_info_business_btn_cancel', // 注销
+					
+					platinum_customer_info_stop_resume = 'platinum_customer_info_stop_resume', // 恢复
+					
+					platinum_customer_info_stop_delete = 'platinum_customer_info_stop_delete', // 删除
+					
+					account_info_trade_btn_child_modify = 'account_info_trade_btn_child_modify', // 修改
+					
+					account_info_trade_btn_child_reset = 'account_info_trade_btn_child_reset', // 重置密码
+					
+					account_info_trade_btn_child_locked = 'account_info_trade_btn_child_locked', // 锁定
+					
+					account_info_trade_btn_child_unlocked = 'account_info_trade_btn_child_unlocked', // 解锁
+					
+					account_info_trade_btn_child_logout = 'account_info_trade_btn_child_logout', // 注销
+					
+					account_info_manager_btn_modify = 'account_info_manager_btn_modify', // 修改
+					
+					account_info_manager_btn_reset = 'account_info_manager_btn_reset', // 重置密码
+					
+					account_info_manager_btn_locked = 'account_info_manager_btn_locked', // 锁定
+					
+					account_info_manager_btn_unlocked = 'account_info_manager_btn_unlocked', // 解锁
+					
+					account_info_manager_btn_logout = 'account_info_manager_btn_logout', // 注销
+					
+					account_info_futures_btn_child_credit = 'account_info_futures_btn_child_credit', // 授信
+					
+					account_info_futures_btn_child_modify = 'account_info_futures_btn_child_modify', // 修改
+					
+					account_info_futures_btn_child_cancel = 'account_info_futures_btn_child_cancel', // 注销
+					
 }

src/common/setup/asyncComponent/index.ts

@@ -0,0 +1,28 @@
+import { BtnList as btnType } from '@/common/components/btnList/interface';
+import { Ref, ref } from "vue";
+
+// 控制异步组件的关闭功能
+export function handleModalComponent<T>(callback: Function, selectedRow: Ref<T>) {
+    const componentId = ref<string>('');
+    /**
+     * 关闭组件
+     * @param isRefresh 是否刷更新数据
+     */
+    function cancelComponent(isRefresh: boolean) {
+        componentId.value = '';
+        if (isRefresh) {
+            callback()
+        }
+    }
+    /**
+     * 打开组件
+     * @param item
+     * @param record
+     */
+    function openComponent(item: btnType, record: T) {
+        // 更新点击的数据，处理例如，修改之后，再次打开页面是之前的数据的问题
+        record && (selectedRow.value = record);
+        componentId.value = item.code;
+    }
+    return { componentId, cancelComponent, openComponent }
+}

src/common/setup/modal/modal.ts

@@ -5,7 +5,7 @@ import { inject, provide, ref, SetupContext, watchEffect } from 'vue';
  * 控制关闭弹窗
  * @param modelName 相对应的弹窗组件名
  * @param context 上次ui上下文，用于关闭弹窗时候需要刷新数据
- * @returns 
+ * @returns
  */
 export function closeModal(modelName: keyof ModalName, context?: SetupContext) {
     // 控制弹窗 flag
@@ -52,3 +52,16 @@ export function openModal(modelName: keyof ModalName, data?: any) {
 
 
 export type { ModalName };
+
+export function _closeModal(context: SetupContext) {
+    const visible = ref<boolean>(true);
+    /**
+     * 关闭弹窗
+     * @param isRefresh 是否需要刷新页面: tur => 刷新；false => 不刷新
+     */
+    function cancel(isRefresh = false) {
+        visible.value = false;
+        context.emit('cancel', isRefresh)
+    }
+    return { visible, cancel }
+}

src/common/setup/table/button.ts

@@ -1,3 +1,4 @@
+import { BtnList as btnType } from '@/common/components/btnList/interface';
 import { ModalName } from '@/common/constants/modalName';
 import { OperationTabMenu } from '@/services/go/commonService/interface';
 import { sessionStorageUtil } from "@/utils/storage";
@@ -7,8 +8,8 @@ import { BtnClassName, BtnList, ButtonListKey } from './interface';
 
 /**
  * 获取class 名
- * @param val 
- * @returns 
+ * @param val
+ * @returns
  */
 function getClassName(val: string): BtnClassName {
     let result: BtnClassName = 'btnDeafault'
@@ -49,7 +50,7 @@ export function handleBtnList(list: OperationTabMenu | undefined, menuType: keyo
             if (type === 2 && isshow) { // 按钮类型
                 const { openAction } = openModal(code as keyof ModalName);
                 const item = { lable: title, callback: openAction, className: getClassName(code) }
-                if (commonName.includes(title)) { // 
+                if (commonName.includes(title)) { //
                     commonBtn.value.push(item)
                 } else {
                     forDataBtn.value.push(item)
@@ -67,6 +68,44 @@ export function handleBtnList(list: OperationTabMenu | undefined, menuType: keyo
     return { commonBtn, forDataBtn }
 }
 
+export function _handleBtnList_(list: OperationTabMenu | undefined, hasDetail: boolean,) {
+    const result = ref<btnType[][]>([])
+    const temp: [number, OperationTabMenu[] | undefined] = [0, list?.children]
+    while (temp[1] && temp[1].length) {
+        temp[1].forEach((e) => {
+            const { code, type, title, isshow } = e;
+            const index = temp[0]
+            if (!Array.isArray(result.value[index])) {
+                result.value[index] = []
+            }
+            if (type === 2 && isshow) { // 按钮类型 并且显示
+                const item = { lable: title, code, className: getClassName(code) }
+                result.value[index].push(item)
+            }
+        })
+        const children = temp[1][0].children
+        if (children && children.length) {
+            temp[0] = temp[0] + 1
+            temp[1] = children
+        } else {
+            temp[1] = []
+        }
+    }
+    // 详情
+    if (hasDetail) {
+        const { openAction } = openModal('detail')
+        const item = { lable: '详情', code: 'detail', className: getClassName('') }
+        const len = result.value.length;
+        if (len) {
+            result.value[len - 1].push(item)
+        } else {
+            result.value = [[], [item]]
+        }
+    }
+
+
+    return result
+}
 export function _handleBtnList(list: OperationTabMenu | undefined, hasDetail: boolean,) {
     const result = ref<BtnList[][]>([])
     const temp: [number, OperationTabMenu[] | undefined] = [0, list?.children]
@@ -109,9 +148,9 @@ export function _handleBtnList(list: OperationTabMenu | undefined, hasDetail: bo
 
 /**
  * 获取表格操作按钮列表
- * @param menuType 
+ * @param menuType
  * @param hasDetail 操作按钮是否需要详情按钮（详情按钮服务 不配置）
- * @returns 
+ * @returns
  */
 export function getBtnList(menuType: keyof ButtonListKey, hasDetail: boolean, commonName: string[] = ['新增']) {
     const data = getThirdMenuData()
@@ -123,4 +162,10 @@ export function _getBtnList(menuType: keyof ButtonListKey, hasDetail: boolean):
     const data = getThirdMenuData()
     const list = data.find((e) => e.code === menuType);
     return _handleBtnList(list, hasDetail)
+}
+
+export function getBtnList_(menuType: keyof ButtonListKey, hasDetail: boolean) {
+    const data = getThirdMenuData()
+    const list = data.find((e) => e.code === menuType);
+    return _handleBtnList_(list, hasDetail)
 }

src/common/setup/table/event.ts

@@ -1,3 +1,4 @@
+import { ContextMenuTemp } from "@/common/components/contextMenu/interface";
 import { ref } from "vue";
 import { TableEventCB } from './interface';
 
@@ -11,6 +12,11 @@ export function getTableEvent<T>(param: TableEventCB) {
     const expandedRowKeys = ref<string[]>([]);
     // 表格选中的数据
     const selectedRow = ref({})
+    // 右键数据
+    const contextMenu = ref<ContextMenuTemp>({
+        position: { clientX: 0, clientY: 0 },
+        show: false,
+    })
     function Rowclick(record: T, index: number) {
         return {
             onClick: () => {  // 表格点击
@@ -27,7 +33,12 @@ export function getTableEvent<T>(param: TableEventCB) {
             // onDblclick: () => { // 双击
             //     console.log('onDblclick');
             // },
-            onContextmenu: () => {  // 表格右键
+            onContextmenu: (event: MouseEvent) => {  // 表格右键
+                const { clientX, clientY } = event;
+                contextMenu.value = {
+                    position: { clientX, clientY },
+                    show: true,
+                }
                 selectedRow.value = record
                 param.contextmenuCB && param.contextmenuCB(record)
             },
@@ -37,5 +48,10 @@ export function getTableEvent<T>(param: TableEventCB) {
     function btnClick(record: T) {
         selectedRow.value = record
     }
-    return { expandedRowKeys, selectedRow, Rowclick, btnClick }
+    // 关闭右键
+    function closeContext() {
+        contextMenu.value.show = false
+    }
+
+    return { expandedRowKeys, selectedRow, Rowclick, btnClick, contextMenu, closeContext }
 }

src/views/information/spot-contract/components/infoDetail/index.vue

@@ -8,13 +8,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue';
+import { defineComponent, PropType, ref, watchEffect } from 'vue';
 import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
 import { formatValue } from '@/common/methods';
 import { ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
 import Detail from '../common-detail/index.vue';
 import { Des, handleDesList } from '@/common/components/commonDes';
-import { watchEffect } from '@vue/runtime-dom';
 import { handlerManagerList } from '@/common/setup/user';
 
 export default defineComponent({

src/views/platinum/platinum_agreement/compoments/detail/index.vue

@@ -58,7 +58,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref, watchEffect } from 'vue';
-import { closeModal } from '@/common/setup/modal/index';
 import { Des, handleDesList } from '@/common/components/commonDes';
 import { QhjAgreementChangeLog, QhjAgreementConfig } from '@/services/go/ermcp/qhj/interface';
 import { formatValue } from '@/common/methods';
@@ -66,6 +65,7 @@ import { getAgreementTypeName } from '@/common/constants/enumsName';
 import { handleArgreementType } from '../../setup';
 import { queryTableList } from '@/common/setup/table';
 import { queryAgreementChangeLog } from '@/services/go/ermcp/qhj';
+import { _closeModal } from '@/common/setup/modal/modal';
 
 const columns = [
     {
@@ -96,7 +96,7 @@ export default defineComponent({
         },
     },
     setup(props, context) {
-        const { visible, cancel } = closeModal('detail');
+        const { visible, cancel } = _closeModal(context);
         const { desList, getDesList } = handleDesList();
         const { getRateEnumName } = handleArgreementType();
         const { loading, tableList, queryTable } = queryTableList<QhjAgreementChangeLog>();

src/views/platinum/platinum_agreement/compoments/modify/index.vue

@@ -61,21 +61,23 @@
 
 <script lang="ts">
 import { closeModal } from '@/common/setup/modal/index';
-import { defineComponent, PropType, ref, watchEffect } from 'vue';
+import { defineComponent, PropType, ref, SetupContext, watchEffect } from 'vue';
 import { handleForm, initFormState } from '../add/setup';
 import { FormState } from '../add/interface';
 import { mergeTwoObj } from '@/utils/objHandle';
 import { validateAction } from '@/common/setup/form';
 import { QhjAgreementConfig } from '@/services/go/ermcp/qhj/interface';
 import { handleArgreementType } from '../../setup';
-import {QHJAgreementConfigOperateReq} from "@/services/proto/manager/interface";
-import {getUserId} from "@/services/bus/account";
-import {requestResultLoadingAndInfo} from "@/common/methods/request/resultInfo";
-import {agreementConfigOperate} from "@/services/proto/manager";
-import {getAgreementTypeName} from "@/common/constants/enumsName";
+import { QHJAgreementConfigOperateReq } from '@/services/proto/manager/interface';
+import { getUserId } from '@/services/bus/account';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { agreementConfigOperate } from '@/services/proto/manager';
+import { getAgreementTypeName } from '@/common/constants/enumsName';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { ModalEnum } from '@/common/constants/modalNameEnum';
 
 export default defineComponent({
-    name: 'modify-custom',
+    name: ModalEnum.platinum_agreement_modify,
     components: {},
     props: {
         selectedRow: {
@@ -83,19 +85,16 @@ export default defineComponent({
             type: Object as PropType<QhjAgreementConfig>,
         },
     },
-    setup(props: { selectedRow: QhjAgreementConfig }, context: { emit: (arg0: string) => void }) {
-        const { visible, cancel } = closeModal('platinum_agreement_modify');
+    setup(props: { selectedRow: QhjAgreementConfig }, context: SetupContext) {
+        const { visible, cancel } = _closeModal(context);
 
         const loading = ref<boolean>(false);
 
         const { formRef, formState, rules } = handleForm();
         // 协议类型
         const { getRate } = handleArgreementType(formState);
-        watchEffect(() => {
-            if (visible.value) {
-                mergeTwoObj(formState, props.selectedRow);
-            }
-        });
+        mergeTwoObj(formState, props.selectedRow);
+
         function submit() {
             validateAction<FormState>(formRef, formState).then((param) => {
                 const reqParam: QHJAgreementConfigOperateReq = {

src/views/platinum/platinum_agreement/list/tab/index.vue

@@ -4,61 +4,95 @@
     <Filter @search="updateColumn">
       <BtnList :btnList="firstBtn" />
     </Filter>
-    <contextMenu :contextMenuList="secondBtn">
-      <a-table :columns="columns"
-               class="srcollYTable"
-               :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
-               :pagination="false"
-               :loading="loading"
-               :expandedRowKeys="expandedRowKeys"
-               :customRow="Rowclick"
-               rowKey="key"
-               :data-source="tableList">
-        <!-- 额外的展开行 -->
-        <template #expandedRowRender="{  }">
-          <BtnList :btnList="secondBtn"
-                   @click="btnClick" />
-        </template>
-        <!-- 协议类型-->
-        <template #agreementtype="{ record }">
-          <span>{{ getAgreementTypeName(record.agreementtype) }}</span>
-        </template>
-        <template #agreementfrequency="{ record }">
-          <span>{{ getRateEnumName(record.agreementfrequency) }}</span>
-        </template>
-      </a-table>
+    <a-table :columns="columns"
+             class="srcollYTable"
+             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
+             :pagination="false"
+             :loading="loading"
+             :expandedRowKeys="expandedRowKeys"
+             :customRow="Rowclick"
+             rowKey="key"
+             :data-source="tableList">
+      <!-- 额外的展开行 -->
+      <template #expandedRowRender="{ record }">
+        <BtnList :btnList="secondBtn"
+                 :record="record"
+                 @click="openComponent" />
+      </template>
+      <!-- 协议类型-->
+      <template #agreementtype="{ record }">
+        <span>{{ getAgreementTypeName(record.agreementtype) }}</span>
+      </template>
+      <template #agreementfrequency="{ record }">
+        <span>{{ getRateEnumName(record.agreementfrequency) }}</span>
+      </template>
+    </a-table>
+    <!-- 右键 -->
+    <contextMenu :contextMenu="contextMenu"
+                 @update="openComponent"
+                 @cancel="contextMenu.show = false"
+                 :list="secondBtn">
     </contextMenu>
-    <ControlModal :selectedRow="selectedRow"
-                  @refresh="getData" />
+    <component :is="componentId"
+               :selectedRow="selectedRow"
+               @cancel="cancelComponent"></component>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, initData, getTableColumns, getTableEvent, queryTableList, contextMenu, BtnList, _getBtnList } from '@/common/export/table';
+import { defineComponent, initData, getTableColumns, getTableEvent, queryTableList, _getBtnList } from '@/common/export/table';
 import { queryAgreementConfig } from '@/services/go/ermcp/qhj';
 import { QhjAgreementConfig } from '@/services/go/ermcp/qhj/interface';
 import Filter from '../../compoments/filter/index.vue';
-import ControlModal from '../../compoments/controlModal/index.vue';
 import { getAgreementTypeName } from '@/common/constants/enumsName';
+import BtnList from '@/common/components/btnList/index.vue';
 import { handleArgreementType } from '../../setup';
+import { getBtnList_ } from '@/common/setup/table/button';
+import { BtnList as btnType } from '@/common/components/btnList/interface';
+import { handleModalComponent } from '@/common/setup/asyncComponent';
+import contextMenu from '@/common/components/contextMenu/temp.vue';
+
+import { defineAsyncComponent } from 'vue';
+import { ModalEnum } from '@/common/constants/modalNameEnum';
+import { handleContextMenu } from '@/common/components/contextMenu/setup';
+
+const Detail = defineAsyncComponent(() => import('../../compoments/detail/index.vue'));
+const Modify = defineAsyncComponent(() => import('../../compoments/modify/index.vue'));
+const Add = defineAsyncComponent(() => import('../../compoments/add/index.vue'));
+const Delete = defineAsyncComponent(() => import('../../compoments/delete/index.vue'));
+const Resume = defineAsyncComponent(() => import('../../compoments/resume/index.vue'));
+const Stop = defineAsyncComponent(() => import('../../compoments/stop/index.vue'));
 
 export default defineComponent({
     name: 'platinum_agreement_tab',
-    components: { Filter, contextMenu, BtnList, ControlModal },
+    components: {
+        Filter,
+        contextMenu,
+        BtnList,
+        [ModalEnum.detail]: Detail,
+        [ModalEnum.platinum_agreement_modify]: Modify,
+        [ModalEnum.platinum_agreement_add]: Add,
+        [ModalEnum.platinum_agreement_delete]: Delete,
+        [ModalEnum.platinum_agreement_resume]: Resume,
+        [ModalEnum.platinum_agreement_stop]: Stop,
+    },
     setup() {
+        const { contextMenu, openContext, closeContext } = handleContextMenu();
         // 表头数据
         const { columns, registerColumn, updateColumn } = getTableColumns();
         // 表格事件
-        const { expandedRowKeys, selectedRow, Rowclick, btnClick } = getTableEvent<QhjAgreementConfig>({});
+        const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<QhjAgreementConfig>({ contextmenuCB: openContext });
         // 表格操作按钮列表
-        const [firstBtn, secondBtn] = _getBtnList('platinum_agreement_tab', true).value;
+        const [firstBtn, secondBtn] = getBtnList_('platinum_agreement_tab', true).value;
         // 表格列表数据
         const { loading, tableList, queryTable } = queryTableList<QhjAgreementConfig>();
-        const { getRateEnumName } = handleArgreementType();
         function getData() {
             // 获取列表数据
             queryTable(queryAgreementConfig);
         }
+        // 控制异步组件
+        const { componentId, cancelComponent, openComponent } = handleModalComponent(getData, selectedRow);
+        const { getRateEnumName } = handleArgreementType();
 
         initData(() => {
             // 获取列表数据
@@ -69,6 +103,10 @@ export default defineComponent({
 
         return {
             getData,
+            openComponent,
+            cancelComponent,
+            contextMenu,
+            componentId,
             columns,
             secondBtn,
             expandedRowKeys,
@@ -80,7 +118,6 @@ export default defineComponent({
             loading,
             tableList,
             queryTable,
-            btnClick,
             getAgreementTypeName,
         };
     },

src/views/platinum/platinum_customer_info/compoments/modify/index.vue

@@ -312,7 +312,7 @@ import { getUploadImg } from '@/common/setup/upload';
 import { CustomerInfoOperateReq } from '@/services/proto/accountinfo/interface';
 import { initData } from '@/common/methods';
 import { QhjCustomer } from '@/services/go/ermcp/qhj/interface';
-import {toBase64String} from "@/utils/storage/base64";
+import { toBase64String } from '@/utils/storage/base64';
 
 export default defineComponent({
     name: 'modify-custom',
@@ -406,9 +406,8 @@ export default defineComponent({
                     legalpersonname: param.legalpersonname, // 法人姓名(企业)
                     taxpayernum: param.taxpayernum, // 纳税人识别号
                     email: param.email, // email
-                    userstate: 2
+                    userstate: 2,
                 };
-                debugger;
                 requestResultLoadingAndInfo(addCustomerInfoOperate, reqParam, loading, OperateType === 1 ? ['保存草稿成功', '保存草稿失败:'] : ['修改客户资料成功', '修改客户资料失败:']).then(() => {
                     cancel();
                     context.emit('refresh');