Crud表格的批量修改和替换

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>