多项功能改进

cdTMP/package-lock.json

@@ -12,7 +12,7 @@
                 "@arco-design/web-vue": "^2.57.0",
                 "@tanstack/vue-query": "^5.76.0",
                 "@tinymce/tinymce-vue": "^6.1.0",
-                "@vueuse/core": "^13.1.0",
+                "@vueuse/core": "^13.2.0",
                 "axios": "^1.9.0",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
@@ -41,7 +41,7 @@
                 "@tailwindcss/postcss": "^4.1.6",
                 "@tailwindcss/vite": "^4.1.6",
                 "@types/lodash-es": "^4.17.12",
-                "@types/node": "^22.15.17",
+                "@types/node": "^22.15.18",
                 "@types/nprogress": "^0.2.3",
                 "@types/qs": "^6.9.18",
                 "@vitejs/plugin-vue": "^5.2.4",
@@ -1933,9 +1933,9 @@
             }
         },
         "node_modules/@types/node": {
-            "version": "22.15.17",
+            "version": "22.15.18",
-            "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.15.17.tgz",
+            "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.15.18.tgz",
-            "integrity": "sha512-wIX2aSZL5FE+MR0JlvF87BNVrtFWf6AE6rxSE9X7OwnVvoyCQjpzSRJ+M87se/4QCkCiebQAqrJ0y6fwIyi7nw==",
+            "integrity": "sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -2179,14 +2179,14 @@
             "license": "MIT"
         },
         "node_modules/@vueuse/core": {
-            "version": "13.1.0",
+            "version": "13.2.0",
-            "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-13.1.0.tgz",
+            "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-13.2.0.tgz",
-            "integrity": "sha512-PAauvdRXZvTWXtGLg8cPUFjiZEddTqmogdwYpnn60t08AA5a8Q4hZokBnpTOnVNqySlFlTcRYIC8OqreV4hv3Q==",
+            "integrity": "sha512-n5TZoIAxbWAQ3PqdVPDzLgIRQOujFfMlatdI+f7ditSmoEeNpPBvp7h2zamzikCmrhFIePAwdEQB6ENccHr7Rg==",
             "license": "MIT",
             "dependencies": {
                 "@types/web-bluetooth": "^0.0.21",
-                "@vueuse/metadata": "13.1.0",
+                "@vueuse/metadata": "13.2.0",
-                "@vueuse/shared": "13.1.0"
+                "@vueuse/shared": "13.2.0"
             },
             "funding": {
                 "url": "https://github.com/sponsors/antfu"
@@ -2196,18 +2196,18 @@
             }
         },
         "node_modules/@vueuse/metadata": {
-            "version": "13.1.0",
+            "version": "13.2.0",
-            "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-13.1.0.tgz",
+            "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-13.2.0.tgz",
-            "integrity": "sha512-+TDd7/a78jale5YbHX9KHW3cEDav1lz1JptwDvep2zSG8XjCsVE+9mHIzjTOaPbHUAk5XiE4jXLz51/tS+aKQw==",
+            "integrity": "sha512-kPpzuQCU0+D8DZCzK0iPpIcXI+6ufWSgwnjJ6//GNpEn+SHViaCtR+XurzORChSgvpHO9YC8gGM97Y1kB+UabA==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/antfu"
             }
         },
         "node_modules/@vueuse/shared": {
-            "version": "13.1.0",
+            "version": "13.2.0",
-            "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-13.1.0.tgz",
+            "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-13.2.0.tgz",
-            "integrity": "sha512-IVS/qRRjhPTZ6C2/AM3jieqXACGwFZwWTdw5sNTSKk2m/ZpkuuN+ri+WCVUP8TqaKwJYt/KuMwmXspMAw8E6ew==",
+            "integrity": "sha512-vx9ZPDF5HcU9up3Jgt3G62dMUfZEdk6tLyBAHYAG4F4n73vpaA7J5hdncDI/lS9Vm7GA/FPlbOmh9TrDZROTpg==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/antfu"

cdTMP/package.json

@@ -15,7 +15,7 @@
         "@arco-design/web-vue": "^2.57.0",
         "@tanstack/vue-query": "^5.76.0",
         "@tinymce/tinymce-vue": "^6.1.0",
-        "@vueuse/core": "^13.1.0",
+        "@vueuse/core": "^13.2.0",
         "axios": "^1.9.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -44,7 +44,7 @@
         "@tailwindcss/postcss": "^4.1.6",
         "@tailwindcss/vite": "^4.1.6",
         "@types/lodash-es": "^4.17.12",
-        "@types/node": "^22.15.17",
+        "@types/node": "^22.15.18",
         "@types/nprogress": "^0.2.3",
         "@types/qs": "^6.9.18",
         "@vitejs/plugin-vue": "^5.2.4",

cdTMP/src/components/ma-crud/components/form.vue

@@ -1,6 +1,7 @@
 <template>
     <!-- 修改源码：添加mask-closable属性 -->
     <!-- 修改源码：添加on-before-cancel属性 -->
+    <!-- 修改源码：如果为componentName为a-modal则标题吸顶 -->
     <component
         :is="componentName"
         v-model:visible="dataVisible"
@@ -15,7 +16,9 @@
         :fullscreen="options.formOption.isFull || false"
         unmount-on-close
     >
-        <template #title>{{ actionTitle }}</template>
+        <template #title>
+            {{ actionTitle }}
+        </template>
         <a-spin :loading="dataLoading" tip="加载中..." class="w-full">
             <!-- 修改源码parentKey -->
             <ma-form

cdTMP/src/components/ma-form/containerItem/children-form.vue

@@ -30,7 +30,7 @@
             <a-collapse-item
                 v-for="(item, itemIndex) in formModel[props.component.dataIndex]"
                 :key="itemIndex"
-                :header="`${props.component.title} ${itemIndex + 1}项`"
+                :header="`${props.component.title} 第${itemIndex + 1}项 ${item.subName ? item.subName : ''}`"
             >
                 <template #extra>
                     <a-space>
@@ -165,6 +165,15 @@
                 </table>
             </div>
         </div>
+        <!-- 修改源码：切换显示形态 -->
+        <a-popover>
+            <template #title>切换{{ props.component.type === "group" ? "表格" : "聚合" }}显示</template>
+            <div class="sticky-container" @click="swapTableOrGroupDisplay">
+                <div class="sticky-button">
+                    <icon-swap />
+                </div>
+            </div>
+        </a-popover>
     </a-form-item>
 </template>
 
@@ -183,6 +192,24 @@ const formModel = inject("formModel")
 const dictList = inject("dictList")
 const getColumnService = inject("getColumnService")
 const columns = inject("columns")
+
+// ~~~~修改源码-start
+const emit = defineEmits(["swichTableAndGroup"])
+const swapTableOrGroupDisplay = () => {
+    props.component.type = props.component.type === "group" ? "table" : "group"
+    emit("swichTableAndGroup", props.component.type)
+}
+watch(
+    () => props.component.type,
+    (newVal) => {
+        if (newVal === "group") {
+            formList.forEach((item) => (item.hideLabel = false))
+        }
+    },
+    { immediate: true }
+)
+// ~~~~修改源码-end
+
 const rv = async (ev, value = undefined) =>
     await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
 
@@ -299,4 +326,36 @@ onMounted(async () => {
 :deep(.arco-table-cell .arco-form-item) {
     margin-bottom: 0;
 }
+// 切换按钮-以后单独封装一个组件
+.sticky-container {
+    position: fixed;
+    right: 80px;
+    top: 35%;
+    z-index: 10000;
+}
+.sticky-button {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+    border-radius: 50%;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+    transition: all 0.1s;
+    overflow: hidden;
+    position: relative;
+    span {
+        white-space: nowrap;
+        opacity: 0;
+    }
+}
+.sticky-button:hover {
+    transition: all 0.1s;
+    border: 1px solid rgb(64, 128, 255);
+    color: rgb(64, 128, 255);
+}
 </style>

cdTMP/src/components/ma-form/index.vue

@@ -18,6 +18,7 @@
                 :disabled="options?.disabled"
                 :rules="options?.rules"
                 @submit="formSubmit"
+                :key="componentKey"
             >
                 <slot name="formContent">
                     <template v-for="(component, componentIndex) in columns" :key="componentIndex">
@@ -25,6 +26,7 @@
                             :is="getComponentName(component?.formType ?? 'input')"
                             :component="component"
                             :ref="setDialogRef"
+                            @swichTableAndGroup="handleChangeDisplay"
                         >
                             <template v-for="slot in Object.keys($slots)" #[slot]="component">
                                 <slot :name="slot" v-bind="component" />
@@ -98,7 +100,20 @@ const dictList = ref({})
 const cascaderList = ref([])
 const form = ref({})
 
-// custom start
+// ~~~custom start - 新增功能利用key强制更新form表单组件
+const componentKey = ref(0)
+const updateKey = () => {
+    componentKey.value += 1
+    if (componentKey.value > 20000) {
+        componentKey.value = 0
+    }
+}
+const handleChangeDisplay = (type) => {
+    updateKey()
+}
+// ~~~custom end
+
+// ~~~~custom start
 // 2025年5月14日新增功能hover查看上级节点
 import ParentPreview from "@/views/project/ParentPreview/index.vue"
 // 判断是否有
@@ -114,7 +129,7 @@ const formKey = computed(() => {
 const parentKey = computed(() => {
     return props.parentKey || formKey.value || ""
 })
-// custom end
+// ~~~~custom end
 
 const props = defineProps({
     modelValue: { type: Object, default: {} },

cdTMP/src/layout/project-layout.vue

@@ -106,6 +106,12 @@
                                                 top: 8px;
                                                 color: #3370ff;
                                             "
+                                            :style="{
+                                                color:
+                                                    isOpeSetsRoute && nodeData.key === route.query.key
+                                                        ? 'red'
+                                                        : '#3370ff'
+                                            }"
                                             @click="
                                                 () => {
                                                     router.push({
@@ -283,7 +289,7 @@
 </template>
 
 <script setup>
-import { provide, ref } from "vue"
+import { provide, ref, watch } from "vue"
 import NavBar from "@/layout/components/navbar.vue"
 import PageLayout from "@/layout/page-layout.vue"
 import MaFormModal from "@/components/ma-form-modal/index.vue"
@@ -350,6 +356,21 @@ const { expandedKeys, toggleExpanded } = useNodeExpand()
 const { selectedKeys, pointNode, dutSubFormRef, designSubFormRef, testDemandSubFormRef, caseSubFormRef } =
     useNodeClick(expandedKeys)
 
+//~~~~~~小功能：路由中key绑定selectedKeys：好像有点非性能~~~~~~
+const isOpeSetsRoute = ref(false)
+watch(
+    () => route,
+    (newRoute) => {
+        isOpeSetsRoute.value = newRoute.matched.some((it) => it.name === "opeSets")
+        if (isOpeSetsRoute.value) {
+            selectedKeys.value = []
+        } else {
+            selectedKeys.value = [newRoute.query.key]
+        }
+    },
+    { immediate: true, deep: true }
+)
+
 //~~~~~~大功能：动态加载a-tree节点函数~~~~~~
 const { loadMore } = useLoadTreeNode()
 
@@ -478,4 +499,10 @@ const {
 .point {
     color: red;
 }
+// 自定义选中节点样式
+:deep(.arco-tree-node-selected) {
+    .arco-tree-node-title {
+        color: #F53F3F !important;
+    }
+}
 </style>

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

@@ -1,17 +1,14 @@
 <script lang="tsx">
-import { computed, defineComponent, ref, Teleport } from "vue"
+import { defineComponent, Teleport } from "vue"
 import { useRoute } from "vue-router"
 import { Popover } from "@arco-design/web-vue"
-import MaInfo from "@/components/ma-info/index.vue"
 // 请求的API
 import dutApi from "@/api/project/dut"
 import designApi from "@/api/project/designDemand"
 import demandApi from "@/api/project/testDemand"
-// columns导入
+// hooks
-import useDutColumn from "@/views/project/round/hooks/useColumn"
+import useHoverText from "./useHoverText"
-import useDesignColumn from "@/views/project/dut/hooks/useColumns"
+import useKeyToMaInfo from "./useKeyToMaInfo"
-import useDemandColumn from "@/views/project/design-demand/hooks/useColumns"
-import Empty from "@/components/Empty/index.vue"
 
 export default defineComponent({
     name: "ParentPreview",
@@ -19,76 +16,28 @@ export default defineComponent({
         parentKey: { type: String, default: "" } // 在ma-form已经判断所以必然有值，索引上级key
     },
     setup(props) {
+        // 1.获取路由上的-项目id
         const route = useRoute()
         const project_id = route.query.id // 项目id
-        const hoverText = ref("")
+        // 2.获取传入的key信息，给上级节点
-        const buttonLikeRef = ref<HTMLDivElement | null>(null)
-        const onMouseenter = () => {
-            // 进入时候注册事件
-            hoverText.value = "查看上级"
-        }
-        const onMouseleave = () => {
-            hoverText.value = ""
-        }
-        // ma-info变量
-        const dutOriginColumns = useDutColumn(undefined)
-        const dutColumns = computed(() => {
-            // 去掉上传源代码字段
-            const quUploadColumns = dutOriginColumns.value.filter((it) => it.dataIndex !== "upload")
-            // 判断是否为源代码被测件
-            return quUploadColumns
-        })
-        const designColumns = useDesignColumn(undefined)
-        const demandColumns = useDemandColumn(undefined)
-        // 根据parentKey判断是哪个级别节点
         const keyLength = props.parentKey.split("-").length
-        // 储存ma-info的dom
+        // 3.hover变化按钮hook
-        let maInfoDom = <Empty></Empty>
+        const { hoverText, buttonLikeRef, onMouseenter, onMouseleave } = useHoverText()
-        // 处理异步请求的函数
+        // 4.里面处理不同columns，返回的函数可以对ma-info的DOM进行构建
-        const fetchNodeData = async (resPromise: Promise<any>, nodeType: string) => {
+        const { maInfoDom, fetchNodeDataAndSetMaInfo } = useKeyToMaInfo()
-            const res = await resPromise
+        // 5.根据不同长度
-            switch (nodeType) {
-                case "dut":
-                    const dutInfo = res.data
-                    const dutInfoJudge = computed(() => {
-                        if (dutInfo.type === "SO") {
-                            // 计算注释率：注释行/总行数
-                            dutInfo.comment_percent = (dutInfo.comment_lines / dutInfo.total_lines) * 100 + "%"
-                        } else {
-                            // 如果是非源代码被测件行数均填写：“不适用”
-                            dutInfo.comment_lines = "不适用"
-                            dutInfo.comment_percent = "不适用"
-                            dutInfo.effective_lines = "不适用"
-                            dutInfo.total_lines = "不适用"
-                        }
-                        return dutInfo
-                    })
-                    maInfoDom = (
-                        <MaInfo columns={dutColumns.value} data={dutInfoJudge.value} tableLayout="auto"></MaInfo>
-                    )
-                    break
-                case "design":
-                    maInfoDom = <MaInfo columns={designColumns.value} data={res.data} tableLayout="auto"></MaInfo>
-                    break
-                case "demand":
-                    maInfoDom = <MaInfo columns={demandColumns.value} data={res.data} tableLayout="auto"></MaInfo>
-                    break
-                default:
-                    break
-            }
-        }
         switch (keyLength) {
             case 2:
                 // 请求设计需求节点
-                fetchNodeData(dutApi.getDutOne({ project_id, key: props.parentKey }), "dut")
+                fetchNodeDataAndSetMaInfo(dutApi.getDutOne({ project_id, key: props.parentKey }), "dut")
                 break
             case 3:
                 // 请求测试项节点
-                fetchNodeData(designApi.getDesignDemandOne({ project_id, key: props.parentKey }), "design")
+                fetchNodeDataAndSetMaInfo(designApi.getDesignDemandOne({ project_id, key: props.parentKey }), "design")
                 break
             case 4:
                 // 请求用例节点
-                fetchNodeData(demandApi.getTestDemandOne({ project_id, key: props.parentKey }), "demand")
+                fetchNodeDataAndSetMaInfo(demandApi.getTestDemandOne({ project_id, key: props.parentKey }), "demand")
                 break
             default:
                 break
@@ -112,12 +61,13 @@ export default defineComponent({
                             </div>
                         ),
                         content: () => (
+                            // 内容插槽
                             <div
                                 style={{
                                     width: "600px"
                                 }}
                             >
-                                {maInfoDom}
+                                {maInfoDom.value}
                             </div>
                         )
                     }}
@@ -157,6 +107,9 @@ export default defineComponent({
 .button-like:hover {
     width: 120px;
     border-radius: 22px;
+    transition: all 0.1s;
+    border: 1px solid rgb(64, 128, 255);
+    color: rgb(64, 128, 255);
 }
 .click-content {
     min-width: 500px;

cdTMP/src/views/project/ParentPreview/useHoverText.ts

@@ -0,0 +1,13 @@
+import { ref } from "vue"
+
+export default function useHoverText() {
+    const hoverText = ref("")
+    const buttonLikeRef = ref<HTMLDivElement | null>(null)
+    const onMouseenter = () => {
+        hoverText.value = "查看上级"
+    }
+    const onMouseleave = () => {
+        hoverText.value = ""
+    }
+    return { hoverText, buttonLikeRef, onMouseenter, onMouseleave }
+}

cdTMP/src/views/project/ParentPreview/useKeyToMaInfo.tsx

@@ -0,0 +1,52 @@
+import { computed, ref } from "vue"
+import Empty from "@/components/Empty/index.vue"
+import MaInfo from "@/components/ma-info/index.vue"
+import useDutColumn from "@/views/project/round/hooks/useColumn"
+import useDesignColumn from "@/views/project/dut/hooks/useColumns"
+import useDemandColumn from "@/views/project/design-demand/hooks/useColumns"
+
+export default function useKeyToMaInfo() {
+    // 初始状态为空
+    let maInfoDom = ref(<Empty></Empty>)
+    // 3个列信息
+    // ma-info变量
+    const dutOriginColumns = useDutColumn(undefined)
+    const dutColumns = computed(() => {
+        // 去掉上传字段
+        return dutOriginColumns.value.filter((it) => it.dataIndex !== "upload")
+    })
+    const designColumns = useDesignColumn(undefined)
+    const demandColumns = useDemandColumn(undefined)
+    // 函数：传入switch后的Promise以及是什么类型展示信息
+    const fetchNodeDataAndSetMaInfo = async (resPromise: Promise<any>, nodeType: string) => {
+        const res = await resPromise
+        switch (nodeType) {
+            case "dut":
+                const dutInfo = res.data
+                const dutInfoJudge = computed(() => {
+                    if (dutInfo.type === "SO") {
+                        // 计算注释率：注释行/总行数
+                        dutInfo.comment_percent = (dutInfo.comment_lines / dutInfo.total_lines) * 100 + "%"
+                    } else {
+                        // 如果是非源代码被测件行数均填写：“不适用”
+                        dutInfo.comment_lines = "不适用"
+                        dutInfo.comment_percent = "不适用"
+                        dutInfo.effective_lines = "不适用"
+                        dutInfo.total_lines = "不适用"
+                    }
+                    return dutInfo
+                })
+                maInfoDom.value = <MaInfo columns={dutColumns.value} data={dutInfoJudge.value} tableLayout="auto"></MaInfo>
+                break
+            case "design":
+                maInfoDom.value = <MaInfo columns={designColumns.value} data={res.data} tableLayout="auto"></MaInfo>
+                break
+            case "demand":
+                maInfoDom.value = <MaInfo columns={demandColumns.value} data={res.data} tableLayout="auto"></MaInfo>
+                break
+            default:
+                break
+        }
+    }
+    return { maInfoDom, fetchNodeDataAndSetMaInfo }
+}

cdTMP/src/views/project/design-demand/DemandSubForm/index.tsx

@@ -6,7 +6,6 @@ import useOptions from "./useOptions"
 import subFormHooks from "@/views/project/projPublicHooks/subFormHooks"
 import useBeforeCancel from "@/views/project/projPublicHooks/useBeforeCancel"
 import { cloneDeep } from "lodash-es"
-import ParentPreview from "@/views/project/ParentPreview/index.vue"
 
 const DemandSubForm = defineComponent({
     name: "DemandSubFormForm",
@@ -49,7 +48,7 @@ const DemandSubForm = defineComponent({
         // Dom
         return () => (
             // 注意v-model:visible是不能放在对象解构的
-            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel}>
+            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel} width='86%'>
                 {{
                     title: () => <span>[设计需求]-{title.value}</span>,
                     default: () => (

cdTMP/src/views/project/design-demand/hooks/useCrudOpMore.ts

@@ -103,7 +103,7 @@ export default function (crudRef: Ref<InstanceType<typeof MaCrud>>) {
         operationColumn: true,
         operationColumnAlign: "center",
         formOption: {
-            width: 1200,
+            width: "86%",
             layout: [
                 {
                     formType: "grid",

cdTMP/src/views/project/round/hooks/useColumn.ts

@@ -47,6 +47,7 @@ export default function (crudOrFormRef: any) {
             align: "center",
             dataIndex: "type",
             search: true,
+            width: 200,
             formType: "radio",
             addDefaultValue: "SO",
             dict: {

cdTMP/src/views/project/testDemand/CaseSubForm/index.tsx

@@ -52,7 +52,12 @@ const CaseSubForm = defineComponent({
         // Dom
         return () => (
             // 注意v-model:visible是不能放在对象解构的
-            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel}>
+            <a-modal
+                {...modalOptions}
+                v-model:visible={visible.value}
+                on-before-cancel={handleBeforeCancel}
+                width="86%"
+            >
                 {{
                     title: () => <span>[设计需求]-{title.value}</span>,
                     default: () => (

cdTMP/src/views/project/testDemand/hooks/useColumn.tsx

@@ -169,31 +169,35 @@ export default function (crudOrFormRef: any, problemFormRef?: any) {
                 }
             ],
             formType: "children-form",
-            type: "group", // 注意这里可能改样式"group"/"table"
+            type: "table", // 注意这里可能改样式"group"/"table"
             formList: [
                 {
                     title: "操作",
                     dataIndex: "operation",
                     formType: "editor",
-                    height: 180
+                    height: 180,
+                    width: 360
                 },
                 {
                     title: "预期",
                     placeholder: "请输入预期结果",
-                    dataIndex: "expect"
+                    dataIndex: "expect",
+                    formType: "textarea",
+                    width: 160
                 },
                 {
                     title: "结果",
                     dataIndex: "result",
                     formType: "editor",
-                    height: 180
+                    height: 400
                 },
                 {
                     title: "是否通过",
                     dataIndex: "passed",
                     formType: "radio",
                     dict: { name: "passType", props: { label: "title", value: "key" } },
-                    commonRules: [{ required: true, message: "是否通过必填" }]
+                    commonRules: [{ required: true, message: "是否通过必填" }],
+                    width: 128
                 }
             ]
         },

cdTMP/src/views/project/testDemand/hooks/useCrudOpMore.ts

@@ -112,7 +112,7 @@ export default function (crudRef: Ref<InstanceType<typeof MaCrud>>) {
         operationColumnWidth: 180,
         operationColumn: true,
         formOption: {
-            width: 1200,
+            width: "86%",
             layout: [
                 {
                     formType: "grid",