Crud表格的批量修改和替换

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" unmount-on-close>
+    <a-modal v-model:visible="visible" width="1200px" :footer="false" :mask-closable="false">
         <template #title>{{ title }}</template>
         <!-- crud组件 -->
         <div class="lg:w-full w-full">
@@ -37,7 +37,7 @@
 
 <script setup lang="jsx">
 // 本组件位置：1.在右键轮次问题单 2.用例界面关联问题单
-import { ref } from "vue"
+import { nextTick, ref } from "vue"
 import problemApi from "@/api/project/problem"
 import problemSingleApi from "@/api/project/singleProblem"
 import { Message, Notification } from "@arco-design/web-vue"
@@ -102,25 +102,27 @@ const handleRelatedChange = async (record) => {
 }
 
 // 数据定义
-const crudRef = ref()
+const crudRef = ref(null)
 const visible = ref(false)
-const caseModalRef = ref()
+const caseModalRef = ref(null)
 
 // 定义open事件
 const open = (row) => {
-    if (props.hasRelated === "roundProblem") {
-        const columnService = crudRef.value.getColumnService()
-        columnService.get("related").setAttr("hide", true)
-        crudRef.value.requestParams = { round_key: row }
-        crudRef.value.requestData() // 这里要变化，请求的API变化
-        visible.value = true
-    }
-    if (props.hasRelated === "relatedProblem") {
-        crudRef.value.requestData() // 手动请求数据
-        visible.value = true
-        // 打开时赋值caseInfo
-        caseInfo.value = row
-    }
+    nextTick(() => {
+        if (props.hasRelated === "roundProblem") {
+            const columnService = crudRef.value.getColumnService()
+            columnService.get("related").setAttr("hide", true)
+            crudRef.value.requestParams = { round_key: row }
+            crudRef.value.requestData() // 这里要变化，请求的API变化
+            visible.value = true
+        }
+        if (props.hasRelated === "relatedProblem") {
+            crudRef.value.requestData() // 手动请求数据
+            visible.value = true
+            // 打开时赋值caseInfo
+            caseInfo.value = row
+        }
+    })
 }
 // crudOptions设置
 const crudOptions = ref({
@@ -505,6 +507,7 @@ const columns = ref([
 // 暴露自己的open方法
 defineExpose({ open })
 </script>
+
 <style lang="less" scoped>
 .alert {
     max-height: 32px;

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

@@ -6,6 +6,7 @@
                 :options="crudOptions"
                 :columns="crudColumns"
                 ref="crudRef"
+                id="basic-table-demand-normal"
                 @beforeCancel="handleBeforeCancel"
                 :parent-key="route.query.key"
             >
@@ -14,12 +15,18 @@
                 </template>
                 <!-- 表格前置扩展槽:添加关联按钮 -->
                 <template #tableAfterButtons>
-                    <a-button type="outline" status="warning" @click="handleOpenRelationCSX">
-                        <template #icon>
-                            <icon-tags />
-                        </template>
-                        关联测试项
-                    </a-button>
+                    <a-space>
+                        <a-button type="outline" status="warning" @click="handleOpenRelationCSX">
+                            <template #icon>
+                                <icon-tags />
+                            </template>
+                            关联测试项
+                        </a-button>
+                        <a-divider direction="vertical" type="double" />
+                        <a-button type="outline" @click="handleReplaceClick">批量替换</a-button>
+                        <a-divider direction="vertical" type="double" />
+                        <a-button type="outline" @click="handleOpenReplacePriority">批量修改优先级</a-button>
+                    </a-space>
                 </template>
                 <!-- 版本字段的插槽 -->
                 <template #inputPrepend-ident> XQ_XX_ </template>
@@ -44,6 +51,21 @@
                 v-model:model-value="relatedData"
             />
         </a-modal>
+        <ReplaceModel
+            ref="replaceModal"
+            :api="demandApi.replace"
+            :columns="[
+                { dataIndex: 'ident', title: '标识' },
+                { dataIndex: 'name', title: '名称' },
+                { dataIndex: 'testDesciption', title: '测试描述' },
+                { dataIndex: 'testContent', title: '测试子项' }
+            ]"
+            key="modal-demand-normal"
+            popup-key="demand-normal"
+            @replaceSuccess="replaceSuccessHandle"
+        />
+        <!-- 批量修改优先级 -->
+        <ReplacePriority @modifySuccess="crudRef.refresh()" ref="replacePriorityRef" />
     </div>
 </template>
 
@@ -51,14 +73,36 @@
 import { ref } from "vue"
 import commonApi from "@/api/common"
 import { useRoute } from "vue-router"
+import { Message } from "@arco-design/web-vue"
 // hooks
 import useCrudOpMore from "./hooks/useCrudOpMore"
 import useColumn from "./hooks/useColumns"
 import useRalateDemand from "./hooks/useRalateDemand"
+import demandApi from "@/api/project/testDemand"
+import ReplaceModel from "@/views/project/opeSets/components/DesignTable/ReplaceModal.vue"
+import ReplacePriority from "@/views/project/opeSets/components/DemandTable/ReplacePriority.vue"
 // inits
 const route = useRoute()
 // refs
 const crudRef = ref(null)
+
+// 2025年5月新增
+const replaceModal = ref()
+const handleReplaceClick = () => {
+    replaceModal.value?.open(crudRef.value.getSelecteds) // 把获取选中行的函数给传递给替换组件
+}
+const replaceSuccessHandle = async (count) => {
+    Message.success(`批量更新成功，尝试更新行数：${count}`)
+    // 批量更新后刷新表格
+    crudRef.value.refresh()
+}
+
+// 2025-05新增-批量修改优先级
+const replacePriorityRef = ref(null)
+const handleOpenReplacePriority = () => {
+    replacePriorityRef.value?.open(crudRef.value.getSelecteds)
+}
+
 // 根据传参获取key，分别为轮次、设计需求的key
 const { projectId, crudOptions, handleBeforeCancel } = useCrudOpMore(crudRef)
 const crudColumns = useColumn(crudRef)
@@ -97,4 +141,11 @@ defineOptions({
 .ol-reset {
     list-style: auto;
 }
+/* 下面让modal的蒙层不交互，让用户可以复制table的文字 */
+div:deep(.arco-modal-container) {
+    pointer-events: none;
+}
+:deep(.arco-modal.arco-modal-draggable) {
+    pointer-events: auto;
+}
 </style>

cdTMP/src/views/project/dut/index.vue

@@ -2,17 +2,32 @@
     <div class="ma-content-block lg:flex justify-between p-4">
         <div class="lg:w-full w-full lg:ml-4 mt-5 lg:mt-0">
             <!-- CRUD组件 -->
-            <ma-crud :options="crudOptions" :columns="crudColumns" ref="crudRef" :parent-key="route.query.key">
+            <ma-crud
+                id="basic-table-design-normal"
+                :options="crudOptions"
+                :columns="crudColumns"
+                ref="crudRef"
+                :parent-key="route.query.key"
+            >
                 <template #ident="{ record }">
                     {{ showType(record) }}
                 </template>
                 <template #tableAfterButtons>
-                    <a-button status="success" type="outline" @click="handleAddFileInputDemand" v-if="isXQ === 'XQ'">
-                        <template #icon>
-                            <icon-plus />
-                        </template>
-                        上传需求规格说明快捷录入
-                    </a-button>
+                    <a-space>
+                        <a-button
+                            status="success"
+                            type="outline"
+                            @click="handleAddFileInputDemand"
+                            v-if="isXQ === 'XQ'"
+                        >
+                            <template #icon>
+                                <icon-plus />
+                            </template>
+                            上传需求规格说明快捷录入
+                        </a-button>
+                        <a-divider direction="vertical" type="double" />
+                        <a-button type="outline" @click="handleReplaceClick">批量替换</a-button>
+                    </a-space>
                 </template>
                 <!-- 字段的前缀后缀的插槽 -->
                 <!-- 版本字段的插槽 -->
@@ -20,6 +35,20 @@
             </ma-crud>
         </div>
         <file-input-modal ref="fileInputRef" @enterFinish="crudRef.refresh()"></file-input-modal>
+        <!-- 批量替换组件 -->
+        <ReplaceModel
+            ref="replaceModal"
+            :api="designApi.replace"
+            :columns="[
+                { dataIndex: 'ident', title: '标识' },
+                { dataIndex: 'name', title: '名称' },
+                { dataIndex: 'chapter', title: '章节号' },
+                { dataIndex: 'description', title: '需求描述' }
+            ]"
+            key="modal-design-normal"
+            popup-key="design-normal"
+            @replaceSuccess="replaceSuccessHandle"
+        />
     </div>
 </template>
 
@@ -27,13 +56,31 @@
 import { ref } from "vue"
 import useCrudOptions from "@/views/project/dut/hooks/useCrudOptions"
 import useColumns from "./hooks/useColumns"
+import { Message } from "@arco-design/web-vue"
 import { useRoute } from "vue-router"
 import dutApi from "@/api/project/dut"
+import designApi from "@/api/project/designDemand"
 import commonApi from "@/api/common"
 import FileInputModal from "./components/FileInputModal/index.vue"
+import ReplaceModel from "@/views/project/opeSets/components/DesignTable/ReplaceModal.vue"
+
 const route = useRoute()
 const crudRef = ref()
 const projectId = ref(route.query.id)
+
+// 5月28日新增功能：替换
+const replaceModal = ref()
+
+const handleReplaceClick = () => {
+    replaceModal.value?.open(crudRef.value.getSelecteds) // 把获取选中行的函数给传递给替换组件
+}
+
+const replaceSuccessHandle = async (count) => {
+    Message.success(`批量更新成功，尝试更新行数：${count}`)
+    // 批量更新后刷新表格
+    crudRef.value.refresh()
+}
+
 // 5月8日修改设计需求标识就按SJ-FT-设计需求标识来
 const demandTypeDict = ref([])
 ;(function () {
@@ -62,6 +109,7 @@ const showType = (record) => {
 // crud组件
 const crudOptions = useCrudOptions(crudRef)
 const crudColumns = useColumns(crudRef)
+
 // ~~~大功能打开ma-form-modal~~~
 const fileInputRef = ref(null)
 const handleAddFileInputDemand = () => {
@@ -78,4 +126,12 @@ defineOptions({
 })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+/* 下面让modal的蒙层不交互，让用户可以复制table的文字 */
+div:deep(.arco-modal-container) {
+    pointer-events: none;
+}
+:deep(.arco-modal.arco-modal-draggable) {
+    pointer-events: auto;
+}
+</style>

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

@@ -30,8 +30,13 @@ import caseApi from "@/api/project/case"
 const visible = ref(false)
 const formData = ref({})
 const exetime = ref("")
+const getSelectedsFunc = ref<any>(() => [])
+
 // props
-const { selectRows } = defineProps<{ selectRows: any }>()
+const { selectRows } = defineProps<{ selectRows?: any }>()
+
+// emits
+const emit = defineEmits(["modifySuccess"])
 
 // 2.异步执行替换操作，返回boolean-true则关闭弹窗
 const submitReplace = async () => {
@@ -40,13 +45,15 @@ const submitReplace = async () => {
         Message.error("请选择时间后，进行替换操作")
         return false
     }
-    if (selectRows.length && selectRows.length > 0) {
+    const selecteds = selectRows || getSelectedsFunc.value() || []
+    if (selecteds.length && selecteds.length > 0) {
         // 判断是否选择了行
         // 请求后台执行
         await caseApi.exetimeReplace({
-            selectRows: selectRows,
+            selectRows: selecteds,
             exetime: exetime.value
         })
+        emit("modifySuccess")
         Message.success("批量替换成功...")
         return true
     }
@@ -55,7 +62,8 @@ const submitReplace = async () => {
 }
 
 // 其他：打开modal
-const open = () => {
+const open = (getFunc: (() => number[]) | undefined) => {
+    if (getFunc) getSelectedsFunc.value = getFunc
     exetime.value = ""
     visible.value = true
 }

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

@@ -56,9 +56,14 @@ const formData = ref({})
 const designPerson = ref("不替换")
 const testPerson = ref("不替换")
 const monitorPerson = ref("不替换")
+const getSelectedsFunc = ref<any>(() => [])
+
 // props
 const { selectRows } = defineProps<{ selectRows: any }>()
 
+// emits
+const emit = defineEmits(["modifySuccess"])
+
 // 1.在created时候直接请求后端项目人员信息
 const persons = ref([])
 async function fetchPersonByProject() {
@@ -74,15 +79,17 @@ const submitReplace = async () => {
         Message.error("至少选择一项替换")
         return false
     }
-    if (selectRows.length && selectRows.length > 0) {
+    const selecteds = selectRows || getSelectedsFunc.value() || []
+    if (selecteds.length && selecteds.length > 0) {
         // 判断是否选择了行
         // 请求后台执行
         await caseApi.personReplace({
-            selectRows: selectRows,
+            selectRows: selecteds,
             designPerson: designPerson.value,
             testPerson: testPerson.value,
             monitorPerson: monitorPerson.value
         })
+        emit("modifySuccess")
         Message.success("批量替换成功...")
         return true
     }
@@ -91,7 +98,8 @@ const submitReplace = async () => {
 }
 
 // 其他：打开modal
-const open = () => {
+const open = (getFunc: (() => number[]) | undefined) => {
+    if (getFunc) getSelectedsFunc.value = getFunc
     designPerson.value = "不替换"
     testPerson.value = "不替换"
     monitorPerson.value = "不替换"

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

@@ -18,8 +18,8 @@
                     <template #icon><icon-swap /></template>
                 </a-button>
                 <a-divider direction="vertical"></a-divider>
-                <a-button type="primary" @click="handlePerpleModal">批量修改人员</a-button>
-                <a-button type="primary" @click="handleExetimeModal">批量修改时间</a-button>
+                <a-button type="outline" @click="handlePerpleModal">批量修改人员</a-button>
+                <a-button type="outline" @click="handleExetimeModal">批量修改时间</a-button>
             </a-space>
             <a-space>
                 <a-space class="lg:mt-0 mt-2">
@@ -126,7 +126,7 @@
             ref="replaceModal"
             :selectRows="selecteds"
             :api="caseApi.replace"
-            :columns="columns"
+            :columns="columns.filter((it) => it.dataIndex !== 'ident')"
             key="modal-case"
             popup-key="case"
             @replaceSuccess="replaceSuccessHandle"
@@ -152,8 +152,8 @@ import useDelete from "@/views/project/opeSets/components/DesignTable/useDelete"
 import { Message } from "@arco-design/web-vue"
 import ReplaceModal from "@/views/project/opeSets/components/DesignTable/ReplaceModal.vue"
 // case专属组件
-import ReplacePerson from "./ReplacePerson.vue"
-import ReplaceExetime from "./ReplaceExetime.vue"
+import ReplacePerson from "@/views/project/opeSets/components/CaseTable/ReplacePerson.vue"
+import ReplaceExetime from "@/views/project/opeSets/components/CaseTable/ReplaceExetime.vue"
 
 const columns = ref([
     {
@@ -224,7 +224,7 @@ const { deletesMultipleAction } = useDelete(caseApi.delete, fetchData, selecteds
 // 7.2.批量替换相关
 const replaceModal = ref<InstanceType<typeof ReplaceModal> | null>(null)
 const handleOpenReplaceModal = () => {
-    replaceModal.value?.open()
+    replaceModal.value?.open(undefined)
 }
 const replaceSuccessHandle = async (count: number) => {
     Message.success(`批量更新成功，尝试更新行数：${count}`)
@@ -242,13 +242,13 @@ const searchSubmit = (data: ISearchFormCase) => {
 // 9.批量修改人员
 const replacePersonModalRef = ref<InstanceType<typeof ReplacePerson>>()
 const handlePerpleModal = () => {
-    replacePersonModalRef.value!.open()
+    replacePersonModalRef.value!.open(undefined)
 }
 
-// 10.批量修改事件
+// 10.批量修改时间
 const replaceExetimeModalRef = ref<InstanceType<typeof ReplacePerson>>()
 const handleExetimeModal = () => {
-    replaceExetimeModalRef.value!.open()
+    replaceExetimeModalRef.value!.open(undefined)
 }
 </script>
 

cdTMP/src/views/project/opeSets/components/DemandTable/ReplacePriority.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="replace-priority-container">
+        <modalDom />
+    </div>
+</template>
+
+<script setup lang="tsx">
+import { ref } from "vue"
+import { Modal, Form, FormItem, Select, Option, Message } from "@arco-design/web-vue"
+import demandApi from "@/api/project/testDemand"
+// props
+const { selectedRows = undefined } = defineProps<{
+    selectedRows?: number[]
+}>()
+
+// refs
+const visible = ref(false)
+const formData = ref({})
+const priority = ref("")
+const getSelectedsFunc = ref<() => number[]>(() => [])
+
+// emits
+const emit = defineEmits(["modifySuccess"])
+
+// 异步提交修改
+const submitReplace = async () => {
+    // 不再非受控验证，手动验证
+    if (priority.value === "") {
+        Message.error("请选择优先级后进行提交")
+        return false
+    }
+    const selecteds = selectedRows || getSelectedsFunc.value() || []
+    if (selecteds.length && selecteds.length > 0) {
+        // 判断是否选择了行
+        // 请求后台执行
+        await demandApi.priorityReplace({
+            selectRows: selecteds as any,
+            priority: priority.value
+        })
+        emit("modifySuccess")
+        Message.success("批量替换成功...")
+        return true
+    }
+    Message.error("请在表格中选择行...")
+    return false
+}
+
+// 弹窗主DOM
+const modalDom = () => {
+    return (
+        <Modal
+            v-model={[visible.value, "visible"]}
+            width="40%"
+            cancel-text="关闭"
+            ok-text="确认修改"
+            unmount-on-close
+            draggable
+            on-before-ok={submitReplace}
+        >
+            {{
+                title: () => "批量修改优先级",
+                default: () => (
+                    <div class="content-container">
+                        <Form model={formData.value} scroll-to-first-error>
+                            <FormItem field="priority" label="优先级">
+                                <Select placeholder="请选择要修改成为的优先级" v-model={priority.value}>
+                                    <Option value="1">高</Option>
+                                    <Option value="2">中</Option>
+                                    <Option value="3">低</Option>
+                                </Select>
+                            </FormItem>
+                        </Form>
+                    </div>
+                )
+            }}
+        </Modal>
+    )
+}
+
+// open expose
+const open = (getFunc: (() => number[]) | undefined) => {
+    if (getFunc) getSelectedsFunc.value = getFunc
+    visible.value = true
+}
+defineExpose({ open })
+
+// component options
+defineOptions({ name: "ReplacePriority" })
+</script>
+
+<style lang="less" scoped></style>

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

@@ -17,6 +17,8 @@
                     批量替换
                     <template #icon><icon-swap /></template>
                 </a-button>
+                <a-divider direction="vertical"></a-divider>
+                <a-button type="outline" @click="handleOpenReplacePriority">批量修改优先级</a-button>
             </a-space>
             <a-space>
                 <a-space class="lg:mt-0 mt-2">
@@ -136,11 +138,13 @@
             ref="replaceModal"
             :selectRows="selecteds"
             :api="demandApi.replace"
-            :columns="columns"
+            :columns="columns.filter((it) => it.dataIndex !== 'priority' && it.dataIndex !== 'testType')"
             key="modal-demand"
             popup-key="demand"
             @replaceSuccess="replaceSuccessHandle"
         />
+        <!-- 批量修改优先级 -->
+        <ReplacePriority ref="replacePriorityRef" @modifySuccess="fetchData()" :selected-rows="selecteds" />
     </div>
 </template>
 
@@ -157,6 +161,7 @@ import Trigger from "./Trigger.vue"
 import Search from "@/views/project/opeSets/components/DesignTable/Search.vue"
 import useDelete from "@/views/project/opeSets/components/DesignTable/useDelete"
 import ReplaceModal from "@/views/project/opeSets/components/DesignTable/ReplaceModal.vue"
+import ReplacePriority from "@/views/project/opeSets/components/DemandTable/ReplacePriority.vue"
 import { Message } from "@arco-design/web-vue"
 
 // 0.[不同]定义列字段
@@ -262,7 +267,7 @@ const { deletesMultipleAction } = useDelete(demandApi.delete, fetchData, selecte
 // 7.2.批量替换相关
 const replaceModal = ref<InstanceType<typeof ReplaceModal> | null>(null)
 const handleOpenReplaceModal = () => {
-    replaceModal.value?.open()
+    replaceModal.value?.open(undefined)
 }
 const replaceSuccessHandle = async (count: number) => {
     Message.success(`批量更新成功，尝试更新行数：${count}`)
@@ -276,6 +281,12 @@ const searchSubmit = (data: ISearchFormDemand) => {
     searchParams.value = { ...data }
     fetchData(true)
 }
+
+// 9.批量修改优先级-priority
+const replacePriorityRef = ref<InstanceType<typeof ReplacePriority> | null>(null)
+const handleOpenReplacePriority = () => {
+    replacePriorityRef.value?.open(undefined)
+}
 </script>
 
 <style scoped lang="less">

cdTMP/src/views/project/opeSets/components/DesignTable/ReplaceModal.vue

@@ -63,14 +63,21 @@ import { useRoute } from "vue-router"
 // refs
 const visible = ref(false)
 const route = useRoute()
+// 保存获取选择行的函数
+const selectedGetFunc = ref<() => number[] | undefined>(() => [])
 
 // ref
-const formRef = ref<InstanceType<typeof Form>>(null)
+const formRef = ref<InstanceType<typeof Form>>()
 
 // props
 /// 已选择的行数据的id列表
-const { selectRows, columns, api, popupKey } = defineProps<{
-    selectRows: number[]
+const {
+    selectRows = undefined,
+    columns,
+    api,
+    popupKey
+} = defineProps<{
+    selectRows?: number[]
     columns: any[]
     api: Function
     popupKey: string
@@ -94,18 +101,27 @@ const submitReplace = async () => {
     // 验证表单
     const validate = await formRef.value.validate()
     if (!validate) {
+        // 判断使用selectedRows还是selectedOpenIn
+        let selecteds = selectRows || selectedGetFunc.value!() || []
         // 进入这里表示验证通过，手动验证是否选择了行
-        if (selectRows.length < 1) {
+        if (selecteds.length < 1) {
             // 提示用户需要先选择table的行
-            Message.error("请先在表格中选择行进行替换")
+            Message.error("您还未选择行...")
             return false
         }
         // 都验证后提交给后端操作
         try {
+            // 首先该组件两个地方使用，需要处理key的问题
+            const round_key = {
+                key: route.query.key as string
+            }
+            if (round_key.key && round_key.key.split("-").length > 1) {
+                round_key.key = round_key.key.split("-")[0]
+            }
             const res = await api({
                 project_id: route.query.id,
-                round_key: route.query.key,
-                selectRows,
+                round_key: round_key.key,
+                selectRows: selecteds,
                 ...formData.value
             })
             // 批量修改成功放出信号给父组件更新表格
@@ -119,7 +135,11 @@ const submitReplace = async () => {
 }
 
 // expose functions
-const open = () => {
+const open = (selectedIdsGetFunc: (() => number[]) | undefined) => {
+    // 保存获取用户选择行的函数, 可能是undefined
+    if (selectedIdsGetFunc) {
+        selectedGetFunc.value = selectedIdsGetFunc
+    }
     // 每次打开初始化表单数据
     formData.value = {
         ...initialFormData

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

@@ -214,7 +214,7 @@ const { deletesMultipleAction } = useDelete(designApi.delete, fetchData, selecte
 // 7.2.批量替换相关
 const replaceModal = ref<InstanceType<typeof ReplaceModal> | null>(null)
 const handleOpenReplaceModal = () => {
-    replaceModal.value?.open()
+    replaceModal.value?.open(undefined)
 }
 const replaceSuccessHandle = async (count: number) => {
     Message.success(`批量更新成功，尝试更新行数：${count}`)

cdTMP/src/views/project/testDemand/index.vue

@@ -6,15 +6,50 @@
                 :options="crudOptions"
                 :columns="crudColumns"
                 ref="crudRef"
+                id="basic-table-case-normal"
                 @beforeCancel="handleBeforeCancel"
                 :parent-key="route.query.key"
             >
                 <template #ident="{ record }">
                     {{ showType(record) }}
                 </template>
+                <!-- 表格前置扩展槽:添加关联按钮 -->
+                <template #tableAfterButtons>
+                    <a-space>
+                        <a-divider direction="vertical" type="double" />
+                        <a-button type="outline" @click="handleReplaceClick">批量替换</a-button>
+                        <a-divider direction="vertical" type="double" />
+                        <a-button type="outline" @click="handlePerpleModal">批量修改人员</a-button>
+                        <a-button type="outline" @click="handleExetimeModal">批量修改时间</a-button>
+                    </a-space>
+                </template>
             </ma-crud>
         </div>
         <problem-form ref="problemFormRef" :title="title"></problem-form>
+        <ReplaceModel
+            ref="replaceModal"
+            :api="caseApi.replace"
+            :columns="[
+                { dataIndex: 'name', title: '名称' },
+                { dataIndex: 'summarize', title: '用例综述' },
+                { dataIndex: 'testStep', title: '测试步骤' }
+            ]"
+            key="modal-case-normal"
+            popup-key="case-normal"
+            @replaceSuccess="replaceSuccessHandle"
+        />
+        <!-- 批量替换人员组件 -->
+        <replace-person
+            :selectRows="undefined"
+            @modify-success="crudRef.refresh()"
+            ref="replacePersonModalRef"
+        />
+        <!-- 批量替换时间 -->
+        <replace-exetime
+            :selectRows="undefined"
+            @modify-success="crudRef.refresh()"
+            ref="replaceExetimeModalRef"
+        />
     </div>
 </template>
 
@@ -23,11 +58,43 @@ import { ref } from "vue"
 import ProblemForm from "@/views/project/case/components/ProblemForm.vue"
 import useCrudOpMore from "./hooks/useCrudOpMore"
 import useColumn from "./hooks/useColumn"
+import { Message } from "@arco-design/web-vue"
+import caseApi from "@/api/project/case"
 import { useRoute } from "vue-router"
+import ReplaceModel from "@/views/project/opeSets/components/DesignTable/ReplaceModal.vue"
+// 批量修改人员
+import ReplacePerson from "@/views/project/opeSets/components/CaseTable/ReplacePerson.vue"
+// 批量修改时间
+import ReplaceExetime from "@/views/project/opeSets/components/CaseTable/ReplaceExetime.vue"
+
 const route = useRoute()
 const problemFormRef = ref(null)
 const title = ref("问题单表单")
 const crudRef = ref()
+
+// 2025年5月新增
+const replaceModal = ref()
+const handleReplaceClick = () => {
+    replaceModal.value?.open(crudRef.value.getSelecteds) // 把获取选中行的函数给传递给替换组件
+}
+const replaceSuccessHandle = async (count) => {
+    Message.success(`批量更新成功，尝试更新行数：${count}`)
+    // 批量更新后刷新表格
+    crudRef.value.refresh()
+}
+
+// 批量修改人员
+const replacePersonModalRef = ref()
+const handlePerpleModal = () => {
+    replacePersonModalRef.value.open(crudRef.value.getSelecteds)
+}
+
+// 批量修改时间
+const replaceExetimeModalRef = ref()
+const handleExetimeModal = () => {
+    replaceExetimeModalRef.value.open(crudRef.value.getSelecteds)
+}
+
 // 标识重新定义
 const showType = (record) => {
     let key_string = parseInt(record.key.substring(record.key.lastIndexOf("-") + 1)) + 1
@@ -48,4 +115,12 @@ defineOptions({
 })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+/* 下面让modal的蒙层不交互，让用户可以复制table的文字 */
+div:deep(.arco-modal-container) {
+    pointer-events: none;
+}
+:deep(.arco-modal.arco-modal-draggable) {
+    pointer-events: auto;
+}
+</style>

cdTMP/src/views/testmanage/projmanage/hooks/useCrudInit.ts

@@ -37,7 +37,7 @@ const useCrudInit = function () {
                 {
                     formType: "grid",
                     cols: [
-                        { span: 4, formList: [{ dataIndex: "ident" }] },
+                        { span: 8, formList: [{ dataIndex: "ident" }] },
                         { span: 8, formList: [{ dataIndex: "name" }] }
                     ]
                 },