chenjunyi/cdTestPlant3
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

Crud表格的批量修改和替换

Browse Source
This commit is contained in:
管理员
2025-05-28 18:44:58 +08:00
parent aa0290b345
commit 8b2c34d70b
18 changed files with 628 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
cdTMP/src/views/project/opeSets/components/CaseTable/ReplaceExetime.vue
View File

@@ -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
}

14
cdTMP/src/views/project/opeSets/components/CaseTable/ReplacePerson.vue
View File

@@ -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 = "不替换"

18
cdTMP/src/views/project/opeSets/components/CaseTable/index.vue
View File

@@ -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>

91
cdTMP/src/views/project/opeSets/components/DemandTable/ReplacePriority.vue Normal file
View File

@@ -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>

15
cdTMP/src/views/project/opeSets/components/DemandTable/index.vue
View File

@@ -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">

36
cdTMP/src/views/project/opeSets/components/DesignTable/ReplaceModal.vue
View File

@@ -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

2
cdTMP/src/views/project/opeSets/components/DesignTable/index.vue
View File

@@ -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}`)