优化teleport拖拽

2025-05-17 18:04:53 +08:00
parent 09fe532bb6
commit aa0290b345
30 changed files with 518 additions and 981 deletions
--- a/cdTMP/src/components/ma-crud/components/import.vue
+++ b/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>
--- a/cdTMP/src/components/ma-crud/js/defaultOptions.js
+++ b/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,
    // 设置选择列
--- a/cdTMP/src/components/ma-editor/index.vue
+++ b/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
--- a/cdTMP/src/components/ma-form/Customs/BulkReplaceModal.vue
+++ b/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>
--- a/cdTMP/src/components/ma-form/Customs/replaceFieldName.ts
+++ b/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
--- a/cdTMP/src/components/ma-form/containerItem/children-form.vue
+++ b/cdTMP/src/components/ma-form/containerItem/children-form.vue
@@ -166,14 +166,16 @@
            </div>
        </div>
        <!-- 修改源码：切换显示形态 -->
-        <a-popover>
-            <template #title>切换{{ props.component.type === "group" ? "表格" : "聚合" }}显示</template>
-            <div class="sticky-container" @click="swapTableOrGroupDisplay">
-                <div class="sticky-button">
-                    <icon-swap />
+        <Teleport to="body">
+            <a-popover>
+                <template #title>切换{{ props.component.type === "group" ? "表格" : "聚合" }}显示</template>
+                <div class="sticky-container" @click="swapTableOrGroupDisplay">
+                    <div class="sticky-button">
+                        <icon-swap />
+                    </div>
                </div>
-            </div>
-        </a-popover>
+            </a-popover>
+        </Teleport>
    </a-form-item>
 </template>

--- a/cdTMP/src/components/ma-form/index.vue
+++ b/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>
--- a/cdTMP/src/components/ma-icon/index.vue
+++ b/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">
--- a/cdTMP/src/components/ma-user/index.vue
+++ b/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