大表功能完成

2025-05-10 19:21:50 +08:00
parent 0a0beb3e91
commit 25b5576274
40 changed files with 3506 additions and 194 deletions
--- a/cdTMP/src/views/project/opeSets/components/CaseTable/DemandForm.vue
+++ b/cdTMP/src/views/project/opeSets/components/CaseTable/DemandForm.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="form-container">
+        <a-modal v-model:visible="visible" width="70%" unmount-on-close ok-text="更新" :on-before-ok="handleBeforeOk">
+            <template #title>测试项-{{ modalTitle }}</template>
+            <ma-form v-model="form" ref="formRef" :columns="columnOptions" :options="options">
+                <template #inputPrepend-ident> XQ_XX </template>
+            </ma-form>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import useOptions from "@/views/project/design-demand/DemandSubForm/useOptions"
+import demandApi from "@/api/project/testDemand"
+import { useRoute } from "vue-router"
+import { Message } from "@arco-design/web-vue"
+
+// route
+const route = useRoute()
+
+// refs
+const formRef = ref(null)
+
+// emits
+const emit = defineEmits(["refresh"])
+
+// columns/options
+const { options, columnOptions } = useOptions(formRef)
+
+// modal-visible
+const visible = ref(false)
+
+// form-data
+const form = ref({})
+
+// 暴露给外部open函数
+const modalTitle = ref("")
+const open = async (rowData: any) => {
+    // 请求数据
+    try {
+        // 设置表单名称
+        modalTitle.value = rowData.title
+        const res = await demandApi.getDemandOneById(rowData.id)
+        // 更新表单
+        form.value = res.data
+        visible.value = true
+    } catch (e) {
+        visible.value = false
+    }
+}
+// 异步确认按钮点击
+const handleBeforeOk = async () => {
+    const isValidated = await (formRef.value as any).validateForm()
+    if (isValidated) {
+        // 失败
+        return false
+    } else {
+        // 成功 **变化**
+        const round = (form.value as any).key.split("-")[0]
+        const dut_key = (form.value as any).key.split("-")[1]
+        const designDemand = (form.value as any).key.split("-")[2]
+        await demandApi.update((form.value as any).id, {
+            project_id: route.query.id,
+            round,
+            designDemand,
+            ...form.value,
+            dut: dut_key
+        })
+        // 刷新table
+        emit("refresh")
+        Message.success("修改成功")
+    }
+}
+// out use
+defineExpose({ open })
+</script>
+
+<style lang="less" scoped></style>
--- a/cdTMP/src/views/project/opeSets/components/CaseTable/ReplaceExetime.vue
+++ b/cdTMP/src/views/project/opeSets/components/CaseTable/ReplaceExetime.vue
@@ -0,0 +1,65 @@
+<template>
+    <!-- 注意该组件强制绑定caseTable页面，不要使用在其他地方了 -->
+    <div class="replace-person-container">
+        <a-modal
+            v-model:visible="visible"
+            width="40%"
+            unmount-on-close
+            ok-text="替换执行时间"
+            cancel-text="关闭"
+            draggable
+            :on-before-ok="submitReplace"
+        >
+            <template #title>替换执行时间</template>
+            <div class="content-container">
+                <a-form ref="exeTime" :model="formData" scroll-to-first-error>
+                    <a-form-item field="designPerson" label="执行时间">
+                        <a-date-picker v-model="exetime" style="width: 200px" />
+                    </a-form-item>
+                </a-form>
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { Message } from "@arco-design/web-vue"
+import caseApi from "@/api/project/case"
+
+const visible = ref(false)
+const formData = ref({})
+const exetime = ref("")
+// props
+const { selectRows } = defineProps<{ selectRows: any }>()
+
+// 2.异步执行替换操作，返回boolean-true则关闭弹窗
+const submitReplace = async () => {
+    // 不再非受控验证，手动验证
+    if (exetime.value === "") {
+        Message.error("请选择时间后，进行替换操作")
+        return false
+    }
+    if (selectRows.length && selectRows.length > 0) {
+        // 判断是否选择了行
+        // 请求后台执行
+        await caseApi.exetimeReplace({
+            selectRows: selectRows,
+            exetime: exetime.value
+        })
+        Message.success("批量替换成功...")
+        return true
+    }
+    Message.error("请在表格中选择行...")
+    return false
+}
+
+// 其他：打开modal
+const open = () => {
+    exetime.value = ""
+    visible.value = true
+}
+defineExpose({ open })
+</script>
+
+<style lang="less" scoped></style>
--- a/cdTMP/src/views/project/opeSets/components/CaseTable/ReplacePerson.vue
+++ b/cdTMP/src/views/project/opeSets/components/CaseTable/ReplacePerson.vue
@@ -0,0 +1,103 @@
+<template>
+    <!-- 注意该组件强制绑定caseTable页面，不要使用在其他地方了 -->
+    <div class="replace-person-container">
+        <a-modal
+            v-model:visible="visible"
+            width="40%"
+            unmount-on-close
+            ok-text="执行替换人员"
+            cancel-text="关闭"
+            draggable
+            :on-before-ok="submitReplace"
+        >
+            <template #title>替换人员</template>
+            <div class="content-container">
+                <a-form ref="formRef" :model="formData" scroll-to-first-error>
+                    <a-form-item field="designPerson" label="设计人员">
+                        <a-select v-model="designPerson">
+                            <a-option v-for="person in persons" :key="person" :value="person">
+                                {{ person }}
+                            </a-option>
+                            <a-option value="不替换">不替换</a-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item field="testPerson" label="执行人员">
+                        <a-select v-model="testPerson">
+                            <a-option v-for="person in persons" :key="person" :value="person">
+                                {{ person }}
+                            </a-option>
+                            <a-option value="不替换">不替换</a-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item field="monitorPerson" label="审核人员">
+                        <a-select v-model="monitorPerson">
+                            <a-option v-for="person in persons" :key="person" :value="person">
+                                {{ person }}
+                            </a-option>
+                            <a-option value="不替换">不替换</a-option>
+                        </a-select>
+                    </a-form-item>
+                </a-form>
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { useRoute } from "vue-router"
+import userApi from "@/api/system/user"
+import { Message } from "@arco-design/web-vue"
+import caseApi from "@/api/project/case"
+
+const route = useRoute()
+const visible = ref(false)
+const formData = ref({})
+const designPerson = ref("不替换")
+const testPerson = ref("不替换")
+const monitorPerson = ref("不替换")
+// props
+const { selectRows } = defineProps<{ selectRows: any }>()
+
+// 1.在created时候直接请求后端项目人员信息
+const persons = ref([])
+async function fetchPersonByProject() {
+    const res = await userApi.getProjectList(route.query.id)
+    persons.value = res.data.map((it: { name: string }) => it.name)
+}
+fetchPersonByProject()
+
+// 2.异步执行替换操作，返回boolean-true则关闭弹窗
+const submitReplace = async () => {
+    // 如果都选择不替换，则不请求
+    if (designPerson.value === "不替换" && testPerson.value === "不替换" && monitorPerson.value === "不替换") {
+        Message.error("至少选择一项替换")
+        return false
+    }
+    if (selectRows.length && selectRows.length > 0) {
+        // 判断是否选择了行
+        // 请求后台执行
+        await caseApi.personReplace({
+            selectRows: selectRows,
+            designPerson: designPerson.value,
+            testPerson: testPerson.value,
+            monitorPerson: monitorPerson.value
+        })
+        Message.success("批量替换成功...")
+        return true
+    }
+    Message.error("请在表格中选择行...")
+    return false
+}
+
+// 其他：打开modal
+const open = () => {
+    designPerson.value = "不替换"
+    testPerson.value = "不替换"
+    monitorPerson.value = "不替换"
+    visible.value = true
+}
+defineExpose({ open })
+</script>
+
+<style lang="less" scoped></style>
--- a/cdTMP/src/views/project/opeSets/components/CaseTable/Trigger.vue
+++ b/cdTMP/src/views/project/opeSets/components/CaseTable/Trigger.vue
@@ -0,0 +1,51 @@
+<template>
+    <!-- 该组件是表格查看上级节点的列（a-table-column） -->
+    <div class="trigger-container">
+        <a-trigger position="left" auto-fit-position update-at-scroll>
+            <a-link @click="(formRef as any).open(demandInfoJudge)">
+                {{ demandInfoJudge.title }}
+                <template #icon>
+                    <icon-edit />
+                </template>
+            </a-link>
+            <template #content>
+                <div class="trigger-content">
+                    <ma-info :columns="columns" :data="demandInfoJudge"></ma-info>
+                </div>
+            </template>
+        </a-trigger>
+        <!-- dutForm组件 -->
+        <DemandForm ref="formRef" v-bind="$attrs" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import MaInfo from "@/components/ma-info/index.vue"
+import DemandForm from "./DemandForm.vue"
+import useColumn from "@/views/project/design-demand/hooks/useColumns"
+
+// refs
+const formRef = ref(null)
+// 0.props-表示不通用代码
+const { demandInfo } = defineProps<{ demandInfo: any }>()
+// 计算属性单独处理
+const demandInfoJudge = computed(() => {
+    return demandInfo
+})
+
+// 1.导入crud的columns属性，然后去掉不需要展示的内容，给ma-info传递信息
+const originColumns = useColumn(undefined)
+const columns = computed(() => {
+    return originColumns.value
+})
+</script>
+
+<style lang="less" scoped>
+.trigger-content {
+    padding: 10px;
+    width: 50vw;
+    background-color: var(--color-bg-popup);
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+}
+</style>
--- a/cdTMP/src/views/project/opeSets/components/CaseTable/form.vue
+++ b/cdTMP/src/views/project/opeSets/components/CaseTable/form.vue
@@ -0,0 +1,81 @@
+<template>
+    <div class="form-container">
+        <a-modal v-model:visible="visible" width="80%" unmount-on-close ok-text="更新" :on-before-ok="handleBeforeOk">
+            <template #title>测试用例-{{ modalTitle }}</template>
+            <ma-form v-model="form" ref="formRef" :columns="columnOptions" :options="options">
+                <template #inputPrepend-ident> YL-XX- </template>
+            </ma-form>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import useOptions from "@/views/project/testDemand/CaseSubForm/useOptions"
+import caseApi from "@/api/project/case"
+import { useRoute } from "vue-router"
+import { Message } from "@arco-design/web-vue"
+
+// route
+const route = useRoute()
+
+// refs
+const formRef = ref(null)
+
+// emits
+const emit = defineEmits(["refresh"])
+
+// columns/options
+const { options, columnOptions } = useOptions(formRef)
+
+// modal-visible
+const visible = ref(false)
+
+// form-data
+const form = ref({})
+
+// 暴露给外部open函数
+const modalTitle = ref("")
+const open = async (rowData: any) => {
+    // 请求数据
+    try {
+        // 设置表单名称
+        modalTitle.value = rowData.title
+        const res = await caseApi.getCaseOneById(rowData.id)
+        // 更新表单
+        form.value = res.data
+        visible.value = true
+    } catch (e) {
+        visible.value = false
+    }
+}
+// 异步确认按钮点击
+const handleBeforeOk = async () => {
+    const isValidated = await (formRef.value as any).validateForm()
+    if (isValidated) {
+        // 失败
+        return false
+    } else {
+        // 成功 **变化**
+        const round = (form.value as any).key.split("-")[0]
+        const dut = (form.value as any).key.split("-")[1]
+        const designDemand = (form.value as any).key.split("-")[2]
+        const testDemand = (form.value as any).key.split("-")[2]
+        await caseApi.update((form.value as any).id, {
+            project_id: route.query.id,
+            ...form.value,
+            round,
+            designDemand,
+            testDemand,
+            dut: dut
+        })
+        // 刷新table
+        emit("refresh")
+        Message.success("修改成功")
+    }
+}
+// out use
+defineExpose({ open })
+</script>
+
+<style lang="less" scoped></style>
--- a/cdTMP/src/views/project/opeSets/components/CaseTable/index.vue
+++ b/cdTMP/src/views/project/opeSets/components/CaseTable/index.vue
@@ -0,0 +1,285 @@
+<template>
+    <div class="case-table-container">
+        <search v-show="searchVisible" @submit="searchSubmit" />
+        <div class="lg:flex justify-between mb-2">
+            <a-space>
+                <a-popconfirm
+                    content="确定要删除数据吗? 这会删除全部下级数据!"
+                    position="bottom"
+                    @ok="deletesMultipleAction"
+                >
+                    <a-button type="primary" status="danger">
+                        批量删除
+                        <template #icon><icon-delete /></template>
+                    </a-button>
+                </a-popconfirm>
+                <a-button type="primary" @click="handleOpenReplaceModal">
+                    批量替换
+                    <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-space>
+            <a-space>
+                <a-space class="lg:mt-0 mt-2">
+                    <slot name="tools"></slot>
+                    <a-tooltip content="刷新表格">
+                        <a-button shape="circle" @click="fetchData()"><icon-refresh /></a-button>
+                    </a-tooltip>
+                    <a-tooltip content="显隐搜索" @click="searchVisible = !searchVisible">
+                        <a-button shape="circle"><icon-search /></a-button>
+                    </a-tooltip>
+                    <a-tooltip content="设置">
+                        <a-button shape="circle" @click="clickSetting"><icon-settings /></a-button>
+                    </a-tooltip>
+                </a-space>
+            </a-space>
+        </div>
+        <a-table
+            id="basic-table-case"
+            v-bind="options"
+            hoverable
+            column-resizable
+            ref="tableRef"
+            :scroll="{ x: '100%' }"
+            :row-selection="{ type: 'checkbox', showCheckedAll: true, onlyCurrent: true }"
+            row-key="id"
+            v-model:selectedKeys="selecteds"
+            :loading="isFetching"
+            :data="tableData"
+            :pagination="{
+                showTotal: true,
+                showPageSize: true,
+                total: total,
+                pageSizeOptions: [10, 20, 50, 1000],
+                hideOnSinglePage: false
+            }"
+            @page-change="pageChange"
+            @page-size-change="pageSizeChange"
+        >
+            <template #columns>
+                <!-- 数据列 -->
+                <template v-for="column in columns" :key="column.dataIndex">
+                    <template v-if="!column.hide">
+                        <!-- 专门为dataIndex===testStep构造的数据列 -->
+                        <a-table-column v-bind="column" v-if="column.dataIndex === 'testStep'">
+                            <template #cell="{ record }">
+                                <div v-for="(step, index) in record[column.dataIndex]" :key="index">
+                                    <span class="text-amber-700">步骤{{ index + 1 }}）</span>
+                                    <div class="operation">
+                                        <span class="text-lime-700">操作：</span>
+                                        <div v-html="step.operation"></div>
+                                    </div>
+                                    <div class="expect">
+                                        <span class="text-teal-700">预期：</span>
+                                        <div>{{ step.expect }}</div>
+                                    </div>
+                                    <div class="expect">
+                                        <span class="text-rose-700">执行结果：</span>
+                                        <div v-html="step.result"></div>
+                                    </div>
+                                    <template v-if="record[column.dataIndex].length !== index + 1">
+                                        <a-divider></a-divider>
+                                    </template>
+                                </div>
+                            </template>
+                        </a-table-column>
+                        <!-- 正常的数据列 -->
+                        <a-table-column v-bind="column" v-else tooltip>
+                            <!-- 如果column有isHyperText属性，则直接渲染html -->
+                            <template #cell="{ record }" v-if="column.isHyperText">
+                                <div v-html="record[column.dataIndex]"></div>
+                            </template>
+                        </a-table-column>
+                    </template>
+                </template>
+                <!-- 上级节点列 -->
+                <a-table-column title="对应测试项" align="center" :width="120" fixed="right">
+                    <template #cell="{ record, column, rowIndex }">
+                        <Trigger :demandInfo="record.test" @refresh="fetchData()" />
+                    </template>
+                </a-table-column>
+                <!-- 操作列 -->
+                <a-table-column title="操作" align="center" :width="100" fixed="right">
+                    <template #cell="{ record }">
+                        <a-scrollbar type="track" style="overflow: auto">
+                            <a-space size="mini">
+                                <a-link @click="(formRef as any).open(record)">
+                                    修改
+                                    <template #icon>
+                                        <icon-edit />
+                                    </template>
+                                </a-link>
+                            </a-space>
+                        </a-scrollbar>
+                    </template>
+                </a-table-column>
+            </template>
+        </a-table>
+        <!-- 测试用例-表单页面 -->
+        <Form ref="formRef" @refresh="fetchData()"></Form>
+        <!-- 表格设置 -->
+        <my-setting ref="settingRef" @onChangeColumnHide="changeColumn"></my-setting>
+        <!-- 批量替换组件 -->
+        <replace-modal
+            ref="replaceModal"
+            :selectRows="selecteds"
+            :api="caseApi.replace"
+            :columns="columns"
+            key="modal-case"
+            popup-key="case"
+            @replaceSuccess="replaceSuccessHandle"
+        />
+        <!-- 批量替换人员组件 -->
+        <replace-person :selectRows="selecteds" ref="replacePersonModalRef" />
+        <!-- 批量替换时间 -->
+        <replace-exetime :selectRows="selecteds" ref="replaceExetimeModalRef" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide } from "vue"
+import caseApi from "@/api/project/case"
+import type { ISearchFormCase } from "@/views/project/opeSets/components/DesignTable/types"
+import useSettings from "@/views/project/opeSets/components/DesignTable/useSettings"
+import MySetting from "@/views/project/opeSets/components/TableCommonComponent/Setting.vue"
+import useFetchData from "@/views/project/opeSets/hooks/useFetchData"
+import Search from "@/views/project/opeSets/components/DesignTable/Search.vue"
+import Form from "./form.vue"
+import Trigger from "./Trigger.vue"
+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"
+
+const columns = ref([
+    {
+        title: "标识",
+        dataIndex: "ident",
+        align: "center",
+        width: 80,
+        hide: false,
+        ellipsis: true,
+        search: true,
+        formType: "input"
+    },
+    {
+        title: "名称",
+        dataIndex: "name",
+        align: "left",
+        width: 120,
+        hide: false,
+        ellipsis: true,
+        search: true,
+        formType: "input"
+    },
+    {
+        title: "用例综述",
+        dataIndex: "summarize",
+        align: "left",
+        width: 150,
+        hide: false,
+        ellipsis: false,
+        search: false, // 不搜索
+        formType: "input", // 搜索输入框形式
+        isHyperText: false,
+        bodyCellClass: "hyperTextCell-table-chen"
+    },
+    {
+        // 这是单独处理的字段，只声明Search组件相关属性
+        title: "测试步骤",
+        dataIndex: "testStep",
+        align: "left",
+        width: 400,
+        hide: false,
+        ellipsis: false,
+        search: false, // 要搜索
+        formType: "input", // 搜索输入框形式
+        bodyCellClass: "hyperTextCell-table-chen"
+    }
+])
+provide("columns", columns)
+
+// 3.query查询和分页相关
+const { tableData, isFetching, fetchData, total, pageChange, pageSizeChange, searchParams } = useFetchData(
+    caseApi.getCaseList,
+    columns
+)
+
+// 4.表单相关
+const formRef = ref<InstanceType<typeof Form> | null>(null)
+
+// 5.表格设置相关
+const { options, clickSetting, changeColumn, settingRef } = useSettings()
+
+// 6.行选择器相关-注意在fetchData时候没有清空（一定注意!!!）
+const selecteds = ref([])
+
+// 7.1.批量删除相关
+const { deletesMultipleAction } = useDelete(caseApi.delete, fetchData, selecteds)
+
+// 7.2.批量替换相关
+const replaceModal = ref<InstanceType<typeof ReplaceModal> | null>(null)
+const handleOpenReplaceModal = () => {
+    replaceModal.value?.open()
+}
+const replaceSuccessHandle = async (count: number) => {
+    Message.success(`批量更新成功，尝试更新行数：${count}`)
+    // 批量更新后刷新表格（疑问？是否要清除行选择？）
+    await fetchData()
+}
+
+// 8.搜索组件相关-注意这里submit其实就是给维护的搜索参数传参
+const searchVisible = ref(true)
+const searchSubmit = (data: ISearchFormCase) => {
+    searchParams.value = { ...data }
+    fetchData(true)
+}
+
+// 9.批量修改人员
+const replacePersonModalRef = ref<InstanceType<typeof ReplacePerson>>()
+const handlePerpleModal = () => {
+    replacePersonModalRef.value.open()
+}
+
+// 10.批量修改事件
+const replaceExetimeModalRef = ref<InstanceType<typeof ReplacePerson>>()
+const handleExetimeModal = () => {
+    replaceExetimeModalRef.value.open()
+}
+</script>
+
+<style scoped lang="less">
+/* 下面让modal的蒙层不交互，让用户可以复制table的文字 */
+:deep(.arco-modal-container) {
+    pointer-events: none;
+}
+:deep(.arco-modal.arco-modal-draggable) {
+    pointer-events: auto;
+}
+
+// search根组件
+.search-container {
+    margin-bottom: 10px;
+}
+</style>
+
+<style lang="less">
+.hyperTextCell-table-chen {
+    .arco-table-td-content {
+        max-height: 15em;
+        overflow-y: auto;
+        line-height: 1.5em;
+        word-break: break-word;
+    }
+}
+.arco-tabs-content-list {
+    height: 120%;
+}
+.arco-table-pagination {
+    margin-bottom: 40px;
+}
+</style>