最新提交

cdTMP/src/views/testmanage/projFragment/hooks/crudOption.ts

@@ -0,0 +1,111 @@
+import { useRoute } from "vue-router"
+import { ref } from "vue"
+import { FragApi } from "@/api/system/fragment"
+import { ProductFileEnum } from "@/utils/enums/productTypes"
+import type { IDictData } from "@/utils/types/CommonType"
+import { IFragSearchCondition } from "@/api/system/types/fragmentTypes"
+
+const useCrudOption = () => {
+    // global
+    const route = useRoute()
+    const crudRef = ref()
+    // 产品文档类型写死7种
+    const productFileType: IDictData<ProductFileEnum>[] = Object.keys(ProductFileEnum).map((it, index) => ({
+        label: ProductFileEnum[it],
+        value: index + 1
+    }))
+    // crud-option
+    const crudOptions = ref<object>({
+        api: FragApi.getFragList,
+        add: { show: true, api: FragApi.add },
+        edit: { show: true, api: FragApi.update },
+        delete: { show: true, api: FragApi.delete },
+        // 新增需要项目id
+        parameters: {
+            projectId: route.params.projectId as string
+        },
+        beforeRequest: (params: IFragSearchCondition) => {
+            // 添加项目id参数
+            params.projectId = route.params.projectId as string
+        },
+        afterDelete(response: any) {
+            crudRef.value.tableRef.selectAll(false)
+        },
+        showTools: false,
+        operationColumn: true,
+        operationColumnWidth: 180,
+        operationColumnAlign: "center",
+        bordered: { wrapper: true, cell: true },
+        resizable: false, // 不允许调整列宽
+        rowSelection: { showCheckedAll: true, checkStrictly: true },
+        isDbClickEdit: false,
+        searchColNumber: 2,
+        formOption: {
+            isFull: true,
+            layout: [
+                {
+                    formType: "grid",
+                    cols: [
+                        { span: 12, formList: [{ dataIndex: "name" }] },
+                        { span: 12, formList: [{ dataIndex: "belong_doc" }] }
+                    ]
+                }
+            ]
+        }
+    })
+    const crudColumns = ref<any[]>([
+        {
+            title: "ID",
+            align: "center",
+            width: 50,
+            hide: true,
+            dataIndex: "id",
+            commonRules: [{ required: true, message: "ID必填" }],
+            validateTrigger: "blur"
+        },
+        {
+            title: "片段名称",
+            align: "center",
+            width: 180,
+            dataIndex: "name",
+            search: true,
+            commonRules: [{ required: true, message: "片段名称必填" }],
+            validateTrigger: "blur"
+        },
+        {
+            title: "所属文档",
+            align: "center",
+            width: 100,
+            dataIndex: "belong_doc",
+            formType: "select",
+            search: true,
+            commonRules: [{ required: true, message: "所属文档必选" }],
+            dict: { data: productFileType, translation: true }
+        },
+        {
+            title: "替换片段",
+            width: 100,
+            align: "center",
+            dataIndex: "is_main",
+            addDisplay: false,
+            editDisplay: false
+        },
+        {
+            title: "内容",
+            align: "center",
+            dataIndex: "content",
+            hide: true,
+            formType: "editor",
+            height: 550
+        }
+    ])
+
+    return {
+        crudRef,
+        crudOptions,
+        crudColumns,
+        route
+    }
+}
+
+export default useCrudOption

cdTMP/src/views/testmanage/projFragment/index.vue

@@ -19,40 +19,32 @@
 </template>
 
 <script setup lang="tsx">
-import { computed, ComputedRef, ref } from "vue"
-import { useRoute } from "vue-router"
+import { computed, ComputedRef } from "vue"
 import PageHeader from "@/views/testmanage/components/PageHeader/index.vue"
-import useFetchData from "@/hooks/fetchData"
-// apis
+// apis - import
 import { FragApi } from "@/api/system/fragment"
 import projectApi from "@/api/testmanage/project"
-// types
-import { ProductFileEnum } from "@/utils/enums/productTypes"
-import type { IDictData } from "@/utils/types/CommonType"
+// types - import
 import type { IPageHeaderProps } from "../components/PageHeader/types"
-import type { IFragSearchCondition } from "@/api/system/types/fragmentTypes"
 import { Message } from "@arco-design/web-vue"
-
-const route = useRoute()
-const crudRef = ref()
-// 产品文档类型写死7种
-const productFileType: IDictData<ProductFileEnum>[] = Object.keys(ProductFileEnum).map((it, index) => ({
-    label: ProductFileEnum[it],
-    value: index + 1
-}))
-// hook-获取单个项目信息
+// hooks-import
+import useFetchData from "@/hooks/fetchData"
+import useCrudOption from "./hooks/crudOption"
+// 1.hook-crudOptions
+const { crudRef, crudOptions, crudColumns, route } = useCrudOption()
+// 2.hook-获取单个项目信息
 const fetchData = async () => {
     return projectApi.getProjectById(route.params.projectId)
 }
 const { loadingData, isDataLoading } = useFetchData({}, fetchData)
-// 给头部组件的计算属性
+// 3.给头部组件的计算属性
 const headerData: ComputedRef<IPageHeaderProps> = computed(() => {
     return {
         title: loadingData.value.ident as string,
         name: loadingData.value.name as string
     }
 })
-// 在表格切换is_main属性
+// 4.noQuery - 请求头部数据
 const beforeSwitchChange = (record: any) => {
     return async function (newVal: boolean) {
         await FragApi.update(record.id, {
@@ -63,86 +55,6 @@ const beforeSwitchChange = (record: any) => {
     }
 }
 
-// ma-crud配置
-const crudOptions = ref<object>({
-    api: FragApi.getFragList,
-    edit: { show: true, api: FragApi.update },
-    delete: { show: true, api: FragApi.delete },
-    beforeRequest: (params: IFragSearchCondition) => {
-        // 添加项目id参数
-        params.projectId = route.params.projectId as string
-    },
-    afterDelete(response: any) {
-        crudRef.value.tableRef.selectAll(false)
-    },
-    showTools: false,
-    operationColumn: true,
-    operationColumnWidth: 120,
-    operationColumnAlign: "center",
-    bordered: { wrapper: true, cell: true },
-    resizable: false, // 不允许调整列宽
-    rowSelection: { showCheckedAll: true, checkStrictly: true },
-    isDbClickEdit: false,
-    searchColNumber: 2,
-    formOption: {
-        isFull: true,
-        layout: [
-            {
-                formType: "grid",
-                cols: [
-                    { span: 12, formList: [{ dataIndex: "name" }] },
-                    { span: 12, formList: [{ dataIndex: "belong_doc" }] }
-                ]
-            }
-        ]
-    }
-})
-const crudColumns = ref<any[]>([
-    {
-        title: "ID",
-        align: "center",
-        width: 50,
-        hide: true,
-        dataIndex: "id",
-        commonRules: [{ required: true, message: "ID必填" }],
-        validateTrigger: "blur"
-    },
-    {
-        title: "片段名称",
-        align: "center",
-        width: 120,
-        dataIndex: "name",
-        search: true,
-        commonRules: [{ required: true, message: "片段名称必填" }],
-        validateTrigger: "blur"
-    },
-    {
-        title: "所属文档",
-        align: "center",
-        width: 100,
-        dataIndex: "belong_doc",
-        formType: "select",
-        search: true,
-        commonRules: [{ required: true, message: "所属文档必选" }],
-        dict: { data: productFileType, translation: true }
-    },
-    {
-        title: "替换片段",
-        align: "center",
-        dataIndex: "is_main",
-        addDisplay: false,
-        editDisplay: false
-    },
-    {
-        title: "内容",
-        align: "center",
-        dataIndex: "content",
-        hide: true,
-        formType: "editor",
-        height: 550
-    }
-])
-
 defineOptions({
     name: "projFragment"
 })