内容、布局按钮添加提示

src/api/cms/design/model/index.ts

@@ -14,10 +14,13 @@ export interface Design {
   content?: string;
   // 类型
   type?: string;
+  categoryId?: number;
   // 宽
   width?: string;
   // 高
   height?: string;
+  // 页面样式
+  styles?: string;
   // 附件
   images?: string;
   // 用户ID
@@ -50,5 +53,5 @@ export interface DesignParam extends PageParam {
   name?: number;
   type?: number;
   userId?: number;
-  navigationId?: number;
+  categoryId?: number;
 }

src/views/cms/navigation/components/design-edit.vue

@@ -5,7 +5,7 @@
       :visible="visible"
       :maskClosable="false"
       :maxable="true"
-      :title="isUpdate ? '页面设置' : '页面设置'"
+      :title="isUpdate ? '编辑内容' : '添加内容'"
       :body-style="{ paddingBottom: '28px' }"
       @update:visible="updateVisible"
       @ok="save"
@@ -99,7 +99,7 @@
 import { ref, reactive, watch } from 'vue';
 import { message } from 'ant-design-vue';
 import { uuid} from 'ele-admin-pro';
-import { addDesign, updateDesign } from '@/api/cms/design';
+import { addDesign, pageDesign, updateDesign } from "@/api/cms/design";
 import { Design } from '@/api/cms/design/model';
 import { useThemeStore } from '@/store/modules/theme';
 import { storeToRefs } from 'pinia';
@@ -110,6 +110,7 @@ import TinymceEditor from "@/components/TinymceEditor/index.vue";
 import useFormData from "@/utils/use-form-data";
 import {removeSiteInfoCache} from "@/api/cms/website";
 import {FileRecord} from "@/api/system/file/model";
+import category from "@/views/cms/category/index.vue";
 
 // 是否是修改
 const isUpdate = ref(false);
@@ -153,6 +154,7 @@ const { form, resetFields, assignFields } = useFormData<Design>({
   content: '',
   buyUrl: '',
   type: '',
+  categoryId: undefined,
   styles: '',
   status: 0,
   comments: '',
@@ -337,7 +339,7 @@ const save = () => {
       loading.value = true;
       const formData = {
         ...form,
-        navigationId: props.categoryId,
+        categoryId: props.categoryId,
         content: content.value
       };
       const saveOrUpdate = isUpdate.value ? updateDesign : addDesign;
@@ -362,30 +364,38 @@ watch(
   () => props.visible,
   (visible) => {
     if (visible) {
-      content.value = ''
+      // 查询页面设计元素
+      if(props.categoryId){
+        content.value = '';
         images.value = []
-      if (props.data) {
+        console.log(props.categoryId);
-        assignFields(props.data);
+        pageDesign({categoryId: props.categoryId,limit: 1}).then(res => {
-        if(props.data.content){
+          const design = res?.list[0];
-          content.value = props.data.content
+          if(design){
+            assignFields(design);
+            if(design?.content){
+              content.value = design.content
             }
-        if(props.data.photo){
+            if(design.photo){
               images.value.push({
                 uid: uuid(),
-            url: props.data.photo,
+                url: design.photo,
                 status: 'done'
               })
             }
-        isUpdate.value = !!props.data.pageId;
+            isUpdate.value = true;
           }else {
             isUpdate.value = false;
             content.value = '';
             resetFields();
           }
+        })
+      }
     } else {
       resetFields();
       formRef.value?.clearValidate();
     }
+
   },
   { immediate: true }
 );

src/views/cms/navigation/index.vue

@@ -112,13 +112,18 @@
           </template>
           <template v-else-if="column.key === 'action'">
             <a-space>
+              <a-tooltip :title="`添加自定义组件及样式`">
                 <a class="text-fuchsia-300" @click="openLayout(record)">布局</a>
+              </a-tooltip>
               <a-divider type="vertical" />
               <a-tooltip :title="`配置SEO及页面元素`">
                 <a class="text-gray-400" @click="openDesign(record)">内容</a>
               </a-tooltip>
               <a-divider type="vertical" />
+              <a-tooltip :title="`添加子分类`">
                 <a @click="openEdit(null, record.navigationId)">添加</a>
+              </a-tooltip>
+
               <a-divider type="vertical" />
               <a @click="openEdit(record)">修改</a>
               <a-divider type="vertical" />
@@ -190,7 +195,6 @@
   import { openSpmUrl } from '@/utils/common';
   import { getSiteInfo } from '@/api/layout';
   import { Design } from '@/api/cms/design/model';
-  import { listDesign } from '@/api/cms/design';
   import router from '@/router';
 
   // 表格实例
@@ -355,20 +359,15 @@
   };
 
   const openDesign = (row?: Navigation) => {
+    categoryId.value = row?.navigationId;
     // TODO 通用模型
-    listDesign({
+    if (row?.model == '[custom]') {
-      navigationId: row?.navigationId,
-      limit: 1
-    })
-      .then((res) => {
-        design.value = res[0];
-      })
-      .catch(() => {})
-      .finally(() => {
       showDesignEdit.value = true;
-      });
+      return;
+    }
+
     // TODO 文章列表
-    if (row?.type === 2) {
+    if (row?.model === 'article') {
       router.push({
         path: '/cms/article',
         query: { categoryId: row.navigationId, type: row.type }