优化teleport拖拽

cdTMP/package.json

@@ -22,7 +22,7 @@
         "dayjs": "^1.11.13",
         "file2md5": "^1.3.0",
         "lodash-es": "^4.17.21",
-        "lucide-vue-next": "^0.509.0",
+        "lucide-vue-next": "^0.511.0",
         "mammoth": "^1.9.0",
         "mitt": "^3.0.1",
         "nprogress": "^0.2.0",
@@ -31,34 +31,34 @@
         "postcss-import": "^16.1.0",
         "qs": "^6.14.0",
         "tailwind-merge": "^3.3.0",
-        "tinymce": "^7.8.0",
+        "tinymce": "^7.9.0",
-        "tw-animate-css": "^1.2.9",
+        "tw-animate-css": "^1.3.0",
-        "vue": "^3.5.13",
+        "vue": "^3.5.14",
         "vue-clipboard3": "^2.0.0",
         "vue-color-kit": "^1.0.6",
-        "vue-data-ui": "^2.6.45",
+        "vue-data-ui": "^2.6.51",
         "vue-router": "^4.5.1",
         "vuedraggable": "^2.24.3"
     },
     "devDependencies": {
-        "@tailwindcss/postcss": "^4.1.6",
+        "@tailwindcss/postcss": "^4.1.7",
-        "@tailwindcss/vite": "^4.1.6",
+        "@tailwindcss/vite": "^4.1.7",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.15.18",
         "@types/nprogress": "^0.2.3",
-        "@types/qs": "^6.9.18",
+        "@types/qs": "^6.14.0",
         "@vitejs/plugin-vue": "^5.2.4",
         "@vitejs/plugin-vue-jsx": "^4.1.2",
         "@vue/babel-plugin-jsx": "^1.4.0",
         "browserslist": "^4.24.5",
-        "eslint": "^9.26.0",
+        "eslint": "^9.27.0",
         "eslint-plugin-vue": "^10.1.0",
         "less": "^4.3.0",
         "less-loader": "^12.3.0",
         "postcss": "^8.5.3",
         "prettier": "^3.5.3",
         "rollup-plugin-visualizer": "^5.14.0",
-        "tailwindcss": "^4.1.6",
+        "tailwindcss": "^4.1.7",
         "typescript": "^5.8.3",
         "vite": "^6.3.5",
         "vue-eslint-parser": "^10.1.3"

cdTMP/src/components/ma-crud/components/import.vue

@@ -1,7 +1,3 @@
-<!--
- - @Author XXX
- - @Link XXX
--->
 <template>
     <a-modal v-model:visible="visible" :footer="false" @cancel="close" draggable>
         <template #title>导入</template>

cdTMP/src/components/ma-crud/js/defaultOptions.js

@@ -14,7 +14,7 @@ export default {
     // 请求参数
     requestParams: {},
     // 设置分页组件每页记录数
-    pageSizeOption: [10, 20, 30, 50, 100],
+    pageSizeOption: [10, 20, 30, 50, 1000],
     // 是否开启表格分页
     tablePagination: false,
     // 设置选择列

cdTMP/src/components/ma-editor/index.vue

@@ -32,7 +32,7 @@ import "tinymce/plugins/nonbreaking" // 插入不间断空格
 // import "tinymce/plugins/preview" // 预览
 import "tinymce/plugins/quickbars" // 快速工具栏
 import "tinymce/plugins/save" // 保存
-import "tinymce/plugins/searchreplace" // 查找替换
+// import "tinymce/plugins/searchreplace" // 查找替换
 import "tinymce/plugins/table" // 表格
 // import "tinymce/plugins/visualblocks" //显示元素范围
 import "tinymce/plugins/visualchars" // 显示不可见字符
@@ -49,10 +49,13 @@ const props = defineProps({
         type: String,
         default: () => "tinymce" + new Date().getTime().toString() + "-" + Math.random().toString(16).substring(2, 10)
     },
+    // 插件
     plugins: {
         type: [String, Array],
-        default: "searchreplace visualchars code table nonbreaking lists autosave autoresize"
+        default: "visualchars code table nonbreaking lists autosave autoresize"
+        // 备份："searchreplace visualchars code table nonbreaking lists autosave autoresize"
     },
+    // 工具栏
     toolbar: {
         type: [String, Array],
         // 如果要取消粘贴只粘贴文本，需要用户加格式请加上pastetext
@@ -60,7 +63,7 @@ const props = defineProps({
             "code undo redo aligncenter alignleft indent styleselect formatselect fontselect fontsizeselect removeformat"
 
         // 下面是备份配置：
-        //     default:"code undo redo restoredraft | paste | bold | aligncenter alignleft alignjustify indent | \
+        //     default:"code undo redo restoredraft | paste | bold | aligncenter alignleft alignjustify indent searchreplace | \
         // styleselect formatselect fontselect fontsizeselect | bullist numlist | removeformat"
     }
 })
@@ -157,7 +160,8 @@ const initConfig = reactive({
             : "/tinymce/skins/content/default/content.css",
     // selector: "#textarea1", // 下面自定义样式选中的区域为编辑区
     content_style: "body {line-height:1.5;font-size:14px;} p {margin:2px 0px;}", // 这里可以设置自定义样式
-    // paste_as_text: false, // 粘贴文字只能是纯文本
+    // paste_as_text: false,
+    // 粘贴文字只能是纯文本
     // 1.自定义粘贴过滤器函数，args.content就是粘贴内容
     paste_preprocess: function (plugin, args) {
         let content = args.content

cdTMP/src/components/ma-form/Customs/BulkReplaceModal.vue

@@ -0,0 +1,93 @@
+<script lang="tsx">
+import { defineComponent, ref } from "vue"
+import { Modal, Form, FormItem, Input, Space, Button, Alert, Message } from "@arco-design/web-vue"
+// 导入替换白名单
+import handleSubmit from "./replaceFieldName"
+
+export default defineComponent({
+    name: "BulkPeplaceModal",
+    props: {
+        parentForm: { type: Object, required: true }
+    },
+    setup(props, { expose }) {
+        // ref
+        const formRef = ref()
+        // refs
+        const visible = ref(false)
+        const formData = ref({
+            originText: "",
+            replaceText: ""
+        })
+
+        // inner-functions
+        const submit = (record: { values: any; error: any }) => {
+            handleSubmit(record, props.parentForm, formData)
+        }
+
+        // obj-functions
+        const open = () => {
+            // 如果已经打开则关闭，清空查询
+            formData.value = {
+                originText: "",
+                replaceText: ""
+            }
+            visible.value = visible.value === true ? false : true
+        }
+
+        // expose
+        expose({ open })
+        return () => (
+            <div class="bulk-replace-container">
+                <Modal
+                    draggable
+                    unmount-on-close
+                    title="替换当前页面文本"
+                    width="500px"
+                    v-model:visible={visible.value}
+                    mask={false}
+                    popup-container="#form-main-id"
+                    modal-class="modal-container-custom-shadow"
+                    modalAnimationName="fade"
+                    footer={false}
+                >
+                    <Alert type="warning" class="mb-2">
+                        无法替换时间等非文本字段
+                    </Alert>
+                    <Form model={formData.value} onSubmit={submit} ref={formRef}>
+                        <FormItem
+                            field="originText"
+                            label="被替文本"
+                            validate-trigger={["change", "blur"]}
+                            rules={[
+                                {
+                                    required: true,
+                                    message: "请输入查找和被替换的文本"
+                                }
+                            ]}
+                        >
+                            <Input placeholder="请输入被替换文本" v-model={formData.value.originText}></Input>
+                        </FormItem>
+                        <FormItem field="replaceText" label="被替换为" validate-trigger={["change", "blur"]}>
+                            <Input placeholder="请输入替换的文本" v-model={formData.value.replaceText}></Input>
+                        </FormItem>
+                        <FormItem>
+                            <Space>
+                                <Button type="primary" html-type="submit">
+                                    全部替换
+                                </Button>
+                                <Button onClick={() => formRef.value.resetFields()}>重置</Button>
+                            </Space>
+                        </FormItem>
+                    </Form>
+                </Modal>
+            </div>
+        )
+    }
+})
+</script>
+
+<style lang="less">
+.modal-container-custom-shadow {
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+</style>

cdTMP/src/components/ma-form/Customs/replaceFieldName.ts

@@ -0,0 +1,73 @@
+import { Message } from "@arco-design/web-vue"
+
+// 注意该白名单仅支持替换“字符串”and“数组”，其他不行!
+const replaceField = [
+    "initialization", // 用例：初始化
+    "name", // 各个form的名称
+    "premise", // 用例：前提和约束
+    "summarize", // 用例：综述
+    "testStep", // 用例：步骤，数组包含{operation:"",expect:""}
+    "testDesciption", // 测试项：测试项描述
+    "testContent" // 测试项：子项
+]
+
+const handleSubmit = (record: { values: any; error: any }, parentForm: any, formData: any) => {
+    if (record.error) return
+    // 替换逻辑
+    Object.keys(parentForm).forEach((fieldName) => {
+        if (replaceField.includes(fieldName)) {
+            // 如果存在白名单里面，在判断是文本还是数组
+            const lineData = parentForm[fieldName]
+            if (typeof lineData === "string") {
+                // string则直接替换
+                parentForm[fieldName] = parentForm[fieldName].replaceAll(
+                    formData.value.originText,
+                    formData.value.replaceText
+                )
+            } else if (Array.isArray(lineData)) {
+                parentForm[fieldName].forEach(
+                    (obj: { operation: string; expect: string; result: string; subName: string; subStep: string }) => {
+                        // 用例：数组只能替换对象operation、expect、result
+                        if (obj.operation) {
+                            obj.operation = obj.operation.replaceAll(
+                                formData.value.originText,
+                                formData.value.replaceText
+                            )
+                        }
+                        if (obj.expect) {
+                            obj.expect = obj.expect.replaceAll(formData.value.originText, formData.value.replaceText)
+                        }
+                        if (obj.result) {
+                            obj.result = obj.result.replaceAll(formData.value.originText, formData.value.replaceText)
+                        }
+                        // 测试项：嵌套两层
+                        if (obj.subName) {
+                            obj.subName = obj.subName.replaceAll(formData.value.originText, formData.value.replaceText)
+                            if (obj.subStep && Array.isArray(obj.subStep)) {
+                                obj.subStep.forEach((step) => {
+                                    if (step.operation) {
+                                        step.operation = step.operation.replaceAll(
+                                            formData.value.originText,
+                                            formData.value.replaceText
+                                        )
+                                    }
+                                    if (step.expect) {
+                                        step.expect = step.expect.replaceAll(
+                                            formData.value.originText,
+                                            formData.value.replaceText
+                                        )
+                                    }
+                                })
+                            }
+                        }
+                    }
+                )
+            } else {
+                return
+            }
+        }
+    })
+    Message.success("替换成功")
+}
+
+export default handleSubmit

cdTMP/src/components/ma-form/containerItem/children-form.vue

@@ -166,14 +166,16 @@
             </div>
         </div>
         <!-- 修改源码：切换显示形态 -->
-        <a-popover>
+        <Teleport to="body">
-            <template #title>切换{{ props.component.type === "group" ? "表格" : "聚合" }}显示</template>
+            <a-popover>
-            <div class="sticky-container" @click="swapTableOrGroupDisplay">
+                <template #title>切换{{ props.component.type === "group" ? "表格" : "聚合" }}显示</template>
-                <div class="sticky-button">
+                <div class="sticky-container" @click="swapTableOrGroupDisplay">
-                    <icon-swap />
+                    <div class="sticky-button">
+                        <icon-swap />
+                    </div>
                 </div>
-            </div>
+            </a-popover>
-        </a-popover>
+        </Teleport>
     </a-form-item>
 </template>
 

cdTMP/src/components/ma-form/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full">
+    <div class="w-full" ref="containerRef" id="form-main-id">
         <a-spin :loading="formLoading" :tip="options.loadingText" class="w-full ma-form-spin">
             <div
                 v-if="options.showFormTitle"
@@ -69,12 +69,25 @@
             <template v-if="parentKey">
                 <ParentPreview :parent-key="parentKey"></ParentPreview>
             </template>
+            <!-- ctrl+F的替换功能：仅支持用例、测试项 -->
+            <template v-if="form.testStep || form.testContent">
+                <teleport to="body">
+                    <div class="alert-container">
+                        <a-alert show-icon type="info">
+                            <p>支持</p>
+                            <p>Ctrl+F</p>
+                            <p>替换</p>
+                        </a-alert>
+                    </div>
+                </teleport>
+                <BulkReplaceModal ref="replaceModalRef" :parent-form="form" />
+            </template>
         </a-spin>
     </div>
 </template>
 
 <script setup>
-import { ref, watch, provide, onMounted, nextTick, getCurrentInstance, inject, computed } from "vue"
+import { ref, watch, provide, onMounted, onUnmounted, nextTick, getCurrentInstance, inject, computed } from "vue"
 import { isNil, set, get, cloneDeep } from "lodash-es"
 import defaultOptions from "./js/defaultOptions.js"
 import {
@@ -91,6 +104,8 @@ import ColumnService from "./js/columnService.js"
 
 import { runEvent } from "./js/event.js"
 import { Message } from "@arco-design/web-vue"
+// 修改源码导入：查找和替换组件
+import BulkReplaceModal from "@/components/ma-form/Customs/BulkReplaceModal.vue"
 
 const formLoading = ref(false)
 const maFormRef = ref()
@@ -100,7 +115,23 @@ const dictList = ref({})
 const cascaderList = ref([])
 const form = ref({})
 
-// ~~~custom start - 新增功能利用key强制更新form表单组件
+// ~~~custom start0 - 查找和替换组件
+const replaceModalRef = ref()
+const containerRef = ref()
+const handleKeydown = (e) => {
+    if (e.ctrlKey && e.key === "f") {
+        e.preventDefault()
+        replaceModalRef.value && replaceModalRef.value.open()
+    }
+}
+onMounted(() => {
+    document.addEventListener("keydown", handleKeydown)
+})
+onUnmounted(() => {
+    document.removeEventListener("keydown", handleKeydown)
+})
+
+// ~~~custom start1 - 新增功能利用key强制更新form表单组件
 const componentKey = ref(0)
 const updateKey = () => {
     componentKey.value += 1
@@ -113,7 +144,7 @@ const handleChangeDisplay = (type) => {
 }
 // ~~~custom end
 
-// ~~~~custom start
+// ~~~~custom start2
 // 2025年5月14日新增功能hover查看上级节点
 import ParentPreview from "@/views/project/ParentPreview/index.vue"
 // 判断是否有
@@ -326,8 +357,21 @@ defineExpose({
 </script>
 
 <style lang="less" scoped>
+div:deep(.arco-modal-container) {
+    pointer-events: none;
+}
+:deep(.arco-modal.arco-modal-draggable) {
+    pointer-events: auto;
+}
 .ma-form-title {
     font-size: 18px;
     text-align: center;
 }
+.alert-container {
+    position: fixed;
+    bottom: 50%;
+    user-select: none;
+    width: 113px;
+    z-index: 9999;
+}
 </style>

cdTMP/src/components/ma-icon/index.vue

@@ -1,7 +1,3 @@
-<!--
- - @Author XXX
- - @Link XXX
--->
 <template>
   <div class="w-full">
     <a-input-group class="w-full">

cdTMP/src/components/ma-user/index.vue

@@ -21,7 +21,7 @@
             />
         </a-space>
 
-        <a-modal v-model:visible="visible" width="1000px" draggable :on-before-ok="close" unmountOnClose>
+        <a-modal v-model:visible="visible" width="1000px" draggable :on-before-ok="close" unmount-on-close>
             <template #title>{{ props.text }}</template>
 
             <ma-crud

cdTMP/src/layout/project-layout.vue

@@ -237,7 +237,7 @@
     </a-dropdown>
     <!-- 复制modal组件 -->
     <!-- 关联的modal组件 -->
-    <a-modal v-model:visible="modalVisible" :width="700" draggable :on-before-ok="handleCopyDemand">
+    <a-modal v-model:visible="modalVisible" unmount-on-close :width="700" draggable :on-before-ok="handleCopyDemand">
         <template #title>复制到设计需求</template>
         <div class="pb-3">选择复制到的节点（<span class="point">支持搜索</span>）:</div>
         <a-cascader
@@ -502,7 +502,7 @@ const {
 // 自定义选中节点样式
 :deep(.arco-tree-node-selected) {
     .arco-tree-node-title {
-        color: #F53F3F !important;
+        color: #f53f3f !important;
     }
 }
 </style>

cdTMP/src/style/warp.less

@@ -31,4 +31,12 @@ body {
 // 覆盖card组件，padding原来为16px
 .arco-card-body {
     padding: 8px !important;
+}
+
+// 覆盖modal的头部样式，变为sticky
+.arco-modal-header {
+    position: sticky;
+    top: 0;
+    z-index: 9999;
+    background-color: rgba(255, 255, 255, 0.9);
 }

cdTMP/src/views/dashboard/usercenter/components/editpassword.vue

@@ -46,7 +46,7 @@
         </a-form-item>
     </a-form>
 
-    <a-modal v-model:visible="visible" @ok="resetLogin">
+    <a-modal v-model:visible="visible" @ok="resetLogin" unmount-on-close>
         <template #title>提示</template>
         密码已经修改成功，需要重新登录系统，点击确定跳转登录页面。
     </a-modal>

cdTMP/src/views/dashboard/workplace/components/cpns/st-announced.vue

@@ -9,7 +9,7 @@
                 <a-link @click="viewDetail(record)">{{ record.title }}</a-link>
             </template>
         </a-table>
-        <a-modal v-model:visible="detailVisible" width="80%" draggable :footer="false">
+        <a-modal v-model:visible="detailVisible" width="80%" draggable :footer="false" unmount-on-close>
             <template #title>公告详情</template>
             <a-typography :style="{ marginTop: '-30px' }">
                 <a-typography-title class="text-center">

cdTMP/src/views/datamanage/dictmanage/DataList/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <a-modal v-model:visible="visible" width="80%" draggable :footer="false">
+    <a-modal v-model:visible="visible" width="80%" draggable :footer="false" unmount-on-close>
         <template #title>维护数据字典 →【{{ currentRow.name }}】</template>
         <!-- crud组件 -->
         <div class="lg:w-full w-full lg:mt-0">

cdTMP/src/views/project/case/components/CaseForm/index.vue

@@ -4,6 +4,7 @@
         width="80%"
         draggable
         :okLoading="okLoading"
+        unmount-on-close
         :title="form.name ? form.name : '请填写用例名称'"
         :on-before-ok="handleOkBefore"
     >

cdTMP/src/views/project/case/components/ProblemChoose.vue

@@ -1,5 +1,5 @@
 <template>
-    <a-modal v-model:visible="visible" width="1200px" :footer="false" :mask-closable="false">
+    <a-modal v-model:visible="visible" width="1200px" :footer="false" :mask-closable="false" unmount-on-close>
         <template #title>{{ title }}</template>
         <!-- crud组件 -->
         <div class="lg:w-full w-full">

cdTMP/src/views/project/case/components/ProblemForm.vue

@@ -7,6 +7,7 @@
             cancel-text="关闭"
             width="950px"
             draggable
+            unmount-on-close
         >
             <template #title>{{ props.title }}</template>
             <ma-form v-model="form" :columns="columnsOptions" :options="options" ref="crudForm" />

cdTMP/src/views/project/design-demand/DemandSubForm/index.tsx

@@ -48,9 +48,9 @@ const DemandSubForm = defineComponent({
         // Dom
         return () => (
             // 注意v-model:visible是不能放在对象解构的
-            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel} width='86%'>
+            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel} width='86%' unmount-on-close>
                 {{
-                    title: () => <span>[设计需求]-{title.value}</span>,
+                    title: () => <span>[测试项]-{title.value}</span>,
                     default: () => (
                         <ma-form
                             ref={formRef}

cdTMP/src/views/project/design-demand/hooks/useCrudOpMore.ts

@@ -101,6 +101,7 @@ export default function (crudRef: Ref<InstanceType<typeof MaCrud>>) {
         tablePagination: false,
         operationColumnWidth: 200,
         operationColumn: true,
+        draggable: false,
         operationColumnAlign: "center",
         formOption: {
             width: "86%",

cdTMP/src/views/project/design-demand/index.vue

@@ -26,7 +26,7 @@
             </ma-crud>
         </div>
         <!-- 关联的modal组件 -->
-        <a-modal v-model:visible="visible" width="700px" draggable :on-before-ok="handleRelatedOk">
+        <a-modal v-model:visible="visible" width="700px" draggable unmount-on-close :on-before-ok="handleRelatedOk">
             <template #title>关联测试项</template>
             <div class="pb-3">已存在的关联项:</div>
             <a-typography-paragraph>

cdTMP/src/views/project/dut/DesignSubForm/index.tsx

@@ -40,7 +40,7 @@ const DesignSubForm = defineComponent({
         // Dom
         return () => (
             // 注意v-model:visible是不能放在对象解构的
-            <a-modal {...modalOptions} v-model:visible={visible.value}>
+            <a-modal {...modalOptions} v-model:visible={visible.value} unmount-on-close>
                 {{
                     title: () => <span>[设计需求]-{title.value}</span>,
                     default: () => (

cdTMP/src/views/project/opeSets/components/CaseTable/index.vue

@@ -242,13 +242,13 @@ const searchSubmit = (data: ISearchFormCase) => {
 // 9.批量修改人员
 const replacePersonModalRef = ref<InstanceType<typeof ReplacePerson>>()
 const handlePerpleModal = () => {
-    replacePersonModalRef.value.open()
+    replacePersonModalRef.value!.open()
 }
 
 // 10.批量修改事件
 const replaceExetimeModalRef = ref<InstanceType<typeof ReplacePerson>>()
 const handleExetimeModal = () => {
-    replaceExetimeModalRef.value.open()
+    replaceExetimeModalRef.value!.open()
 }
 </script>
 

cdTMP/src/views/project/round/DutSubForm/index.tsx

@@ -38,7 +38,7 @@ const DutSubForm = defineComponent({
         // Dom
         return () => (
             // 注意v-model:visible是不能放在对象解构的
-            <a-modal {...modalOptions} v-model:visible={visible.value}>
+            <a-modal {...modalOptions} v-model:visible={visible.value} unmount-on-close>
                 {{
                     title: () => <span>[被测件]-{title.value}</span>,
                     default: () => (

cdTMP/src/views/project/testDemand/CaseSubForm/index.tsx

@@ -57,9 +57,10 @@ const CaseSubForm = defineComponent({
                 v-model:visible={visible.value}
                 on-before-cancel={handleBeforeCancel}
                 width="86%"
+                unmount-on-close
             >
                 {{
-                    title: () => <span>[设计需求]-{title.value}</span>,
+                    title: () => <span>[测试用例]-{title.value}</span>,
                     default: () => (
                         <ma-form
                             ref={formRef}

cdTMP/src/views/project/testDemand/hooks/useCrudOpMore.ts

@@ -109,6 +109,7 @@ export default function (crudRef: Ref<InstanceType<typeof MaCrud>>) {
         rowSelection: { showCheckedAll: true },
         searchColNumber: 3,
         tablePagination: false,
+        draggable: false,
         operationColumnWidth: 180,
         operationColumn: true,
         formOption: {

cdTMP/src/views/testmanage/projBoard/cpns/TimeLine.vue

@@ -30,7 +30,7 @@
             </a-timeline>
         </div>
         <!-- a-modal组件，展示生成文档的全部信息 -->
-        <a-modal v-model:visible="visible" hide-cancel :closable="false" width="auto">
+        <a-modal v-model:visible="visible" unmount-on-close hide-cancel :closable="false" width="auto">
             <template #title> 生成文档时间一览表 </template>
             <a-card
                 :style="{ width: '600px' }"

cdTMP/src/views/testmanage/projmanage/cpns/preview.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 描述列表组件 -->
-    <a-modal width="1000px" v-model:visible="visible" :footer="false">
+    <a-modal width="1000px" v-model:visible="visible" :footer="false" unmount-on-close>
         <template #title>项目名称：{{ previewRecord.name }}</template>
         <ma-info
             class="my-custom-class"

cdTMP/src/views/testmanage/projmanage/cpns/progress.vue

@@ -4,6 +4,7 @@
             draggable
             :visible="visible"
             hide-cancel
+            unmount-on-close
             :mask-closable="false"
             :on-before-ok="handleClickConfirmButton"
             :on-before-cancel="handleClickConfirmButton"