(create)新增项目所属文档片段crud

cdTMP/src/views/testmanage/components/PageHeader/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <a-page-header
+        @back="handleBackClick"
+        :style="{ background: 'var(--color-bg-2)' }"
+        :title="props.data.title"
+        v-if="isBlankObj(props.data)"
+    >
+        <template #subtitle>
+            <a-space>
+                <span>{{ props.data.name }}</span>
+                <span class="text-base ml-3 text-red-950" v-if="!props.data.step">所属文档片段</span>
+                <a-tag color="red" size="small" v-else>{{ props.data.step }}</a-tag>
+            </a-space>
+        </template>
+    </a-page-header>
+</template>
+
+<script setup lang="ts">
+import { PropType } from "vue"
+import { useRouter } from "vue-router"
+import type { IPageHeaderProps } from "./types"
+// 组件属性
+const props = defineProps({
+    data: {
+        type: Object as PropType<IPageHeaderProps>,
+        required: true
+    }
+})
+const isBlankObj = (data: IPageHeaderProps) => {
+    return Object.keys(data).length > 0
+}
+const router = useRouter()
+// 返回上个页面
+const handleBackClick = () => {
+    router.go(-1)
+}
+</script>
+
+<style scoped lang="less">
+:deep(.arco-page-header-main) {
+    align-items: center;
+}
+</style>

cdTMP/src/views/testmanage/components/PageHeader/types.ts

@@ -0,0 +1,5 @@
+export interface IPageHeaderProps {
+    title?: string
+    name?: string
+    step?: string // 可能出现项目状态
+}

cdTMP/src/views/testmanage/projBoard/cpns/Title.vue

@@ -1,25 +1,14 @@
 <template>
     <div class="title-container">
         <div class="ma-content-block rounded-sm flex-col justify-between w-full p-3 bg-color">
-            <a-page-header
-                @back="handleBackClick"
-                :style="{ background: 'var(--color-bg-2)' }"
-                :title="props.pInfo.ident"
-            >
-                <template #subtitle>
-                    <a-space>
-                        <span>{{ props.pInfo.name }}</span>
-                        <a-tag color="red" size="small">{{ props.pInfo.step }}</a-tag>
-                    </a-space>
-                </template>
-            </a-page-header>
+            <page-header :data="headerData"></page-header>
             <div class="title">基本信息</div>
             <div class="item-container">
                 <a-card
                     class="item"
                     v-for="(val, key) in pInfo.title_info"
                     :style="{ width: '360px' }"
-                    :title="key"
+                    :title="key.toString()"
                     :key="key"
                     hoverable
                 >
@@ -35,21 +24,25 @@
     </div>
 </template>
 
-<script setup>
-import { useRoute, useRouter } from "vue-router"
-const router = useRouter()
-
-// 1.头部-点击返回
-const handleBackClick = () => {
-    router.go(-1)
-}
-// 2.定义props
+<script setup lang="ts">
+import { computed, ComputedRef } from "vue"
+import type { IPageHeaderProps } from "../../components/PageHeader/types"
+import PageHeader from "@/views/testmanage/components/PageHeader/index.vue"
+// 定义props
 const props = defineProps({
     pInfo: {
         type: Object,
         required: true
     }
 })
+// 给头部组件的计算属性
+const headerData: ComputedRef<IPageHeaderProps> = computed(() => {
+    return {
+        title: props.pInfo.ident as string,
+        name: props.pInfo.name as string,
+        step: props.pInfo.step
+    }
+})
 </script>
 
 <style lang="less" scoped>

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

@@ -2,51 +2,100 @@
     <div class="proj-fragment-container">
         <div class="ma-content-block lg:flex justify-between p-4">
             <div class="lg:w-full w-full lg:ml-4 mt-5 lg:mt-0" v-loading="isDataLoading">
-                <a-page-header @back="handleBackClick" :style="{ background: 'var(--color-bg-2)' }" :title="loadingData.ident">
-                    <template #subtitle>
-                        <a-space>
-                            <span>{{ loadingData.name }}</span>
-                        </a-space>
-                        <span class="text-base ml-3 text-red-950">所属文档片段</span>
+                <page-header :data="headerData"></page-header>
+                <hr />
+                <ma-crud class="mt-3" :options="crudOptions" :columns="crudColumns" ref="crudRef">
+                    <!-- 切换is_main -->
+                    <template #is_main="{ record }">
+                        <a-switch
+                            v-model:model-value="record.is_main"
+                            :before-change="beforeSwitchChange(record)"
+                        ></a-switch>
                     </template>
-                </a-page-header>
-                <hr/>
-                <ma-crud class="mt-3" :options="crudOptions" :columns="crudColumns" ref="crudRef"> </ma-crud>
+                </ma-crud>
             </div>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { FragApi } from "@/api/system/fragment"
-import { ProductFileEnum } from "@/utils/enums/productTypes"
-import { IDictData } from "@/utils/types/CommonType"
+<script setup lang="tsx">
+import { computed, ComputedRef, ref } from "vue"
+import { useRoute } from "vue-router"
+import PageHeader from "@/views/testmanage/components/PageHeader/index.vue"
 import useFetchData from "@/hooks/fetchData"
+// apis
+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"
+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 router = useRouter()
-const crudRef = ref(null)
+const crudRef = ref()
 // 产品文档类型写死7种
-const productFileType: IDictData<ProductFileEnum>[] = Object.keys(ProductFileEnum).map((it) => ({
+const productFileType: IDictData<ProductFileEnum>[] = Object.keys(ProductFileEnum).map((it, index) => ({
     label: ProductFileEnum[it],
-    value: it as ProductFileEnum
+    value: index + 1
 }))
-// 返回项目管理
-const handleBackClick = () => {
-    router.go(-1)
-}
 // hook-获取单个项目信息
 const fetchData = async () => {
     return projectApi.getProjectById(route.params.projectId)
 }
 const { loadingData, isDataLoading } = useFetchData({}, fetchData)
+// 给头部组件的计算属性
+const headerData: ComputedRef<IPageHeaderProps> = computed(() => {
+    return {
+        title: loadingData.value.ident as string,
+        name: loadingData.value.name as string
+    }
+})
+// 切换is_main
+const beforeSwitchChange = (record: any) => {
+    return async function (newVal: boolean) {
+        await FragApi.update(record.id, {
+            is_main: newVal,
+            projectId: route.params.projectId as string
+        })
+        Message.success("设置成功")
+    }
+}
 
 // ma-crud配置
 const crudOptions = ref<object>({
     api: FragApi.getFragList,
-    showTools: false
+    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.setSelecteds([])
+    },
+    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[]>([
     {
@@ -75,7 +124,22 @@ const crudColumns = ref<any[]>([
         formType: "select",
         search: true,
         commonRules: [{ required: true, message: "所属文档必选" }],
-        dict: { data: productFileType }
+        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
     }
 ])
 

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

@@ -365,6 +365,9 @@ const crudOptions = ref({
     showTools: false,
     operationColumnWidth: 280, // 操作列宽度
     operationColumnAlign: "center", // 操作列对齐方式
+    afterDelete(response) {
+        crudRef.value.setSelecteds([])
+    },
     // 处理弹窗的title
     beforeOpenAdd: function () {
         crudRef.value.crudFormRef.actionTitle = "项目"