优化修复网站导航的bug

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

@@ -1,7 +1,7 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="740"
+    :width="800"
     :visible="visible"
     :confirm-loading="loading"
     :title="isUpdate ? '修改导航' : '新建导航'"
@@ -41,123 +41,70 @@
               @pressEnter="save"
             />
           </a-form-item>
-          <a-form-item label="选择页面" v-if="form.type == 1">
-            <SelectDesign
-              :placeholder="`请选择页面`"
-              v-model:value="form.pageName"
-              @done="choosePageId"
-            />
-          </a-form-item>
-          <a-form-item label="选择列表" v-if="form.type == 2">
-            <SelectArticleCategory
-              :placeholder="`请选择列表`"
-              v-model:value="form.pageName"
-              @done="chooseArticleCategoryId"
-            />
-          </a-form-item>
-          <a-form-item label="选择文章" v-if="form.type == 3">
-            <SelectArticle
-              :placeholder="`请选择文章`"
-              v-model:value="form.pageName"
-              @done="chooseArticle"
-            />
-          </a-form-item>
-          <a-form-item label="选择表单" v-if="form.type == 4">
-            <SelectForm
-              :placeholder="`请选择表单`"
-              v-model:value="form.pageName"
-              @done="chooseForm"
-            />
-          </a-form-item>
-          <a-form-item label="选择文档" v-if="form.type == 5">
-            <SelectDocsBook
-              :placeholder="`请选择知识文档`"
-              v-model:value="form.title"
-              @done="chooseDocsBook"
-            />
-          </a-form-item>
-          <a-form-item label="选择分类" v-if="form.type == 6">
-            <SelectGoodsCategory
-              :placeholder="`请选择商品分类`"
-              v-model:value="form.title"
-              @done="chooseGoodsCategory"
-            />
-          </a-form-item>
-          <a-form-item label="选择商品详情" v-if="form.type == 7">
-            <SelectDocsBook
-              :placeholder="`请选择商品详情`"
-              v-model:value="form.title"
-              @done="chooseGoods"
-            />
-          </a-form-item>
           <a-form-item
             :label="form.type == 9 ? '链接地址' : '路由地址'"
             name="path"
           >
             <a-input
               allow-clear
-              :placeholder="form.type == 9 ? '请输入链接地址' : '/about.html'"
+              :placeholder="
+                form.type == 9 ? '请输入链接地址' : '/iphone-15-pro'
+              "
               v-model:value="form.path"
               @pressEnter="save"
             />
           </a-form-item>
-          <a-form-item label="组件路径" name="component" v-if="form.type == 0">
+          <a-form-item label="组件路径" name="component">
             <a-input
               allow-clear
-              placeholder="/custom/index"
+              placeholder="/pages/[custom].vue"
               v-model:value="form.component"
               @pressEnter="save"
             />
           </a-form-item>
+          <a-form-item label="描述" name="comments">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="请输入描述"
+              v-model:value="form.comments"
+            />
+          </a-form-item>
         </a-col>
         <a-col
           v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
         >
-          <!--          <a-form-item label="模型" name="type">-->
-          <!--            <a-select-->
-          <!--              ref="select"-->
-          <!--              v-model:value="form.type"-->
-          <!--              style="width: 253px"-->
-          <!--              @change="onType"-->
-          <!--            >-->
-          <!--              <a-select-option :value="0">通用模型</a-select-option>-->
-          <!--              <a-select-option :value="1">单页内容</a-select-option>-->
-          <!--              <a-select-option :value="2">新闻分类</a-select-option>-->
-          <!--              <a-select-option :value="3">新闻详情</a-select-option>-->
-          <!--              <a-select-option :value="4">表单设计</a-select-option>-->
-          <!--              <a-select-option :value="5">知识文档</a-select-option>-->
-          <!--              <a-select-option :value="6">商品分类</a-select-option>-->
-          <!--              <a-select-option :value="7">商品详情</a-select-option>-->
-          <!--              <a-select-option :value="9">外部链接</a-select-option>-->
-          <!--            </a-select>-->
-          <!--          </a-form-item>-->
-          <!--          <a-form-item label="位置" name="position">-->
-          <!--            <a-radio-group v-model:value="form.position">-->
-          <!--              <a-radio :value="0">全部</a-radio>-->
-          <!--              <a-radio :value="1">顶部</a-radio>-->
-          <!--              <a-radio :value="2">底部</a-radio>-->
-          <!--            </a-radio-group>-->
-          <!--          </a-form-item>-->
+          <a-form-item label="模型" name="model">
+            <ChooseDictionary
+              dict-code="NavigationModel"
+              :placeholder="`选择模型`"
+              v-model:value="form.model"
+              @done="chooseModel"
+            />
+          </a-form-item>
           <a-form-item label="位置" name="top">
             <a-radio-group v-model:value="form.position" @change="onPosition">
-              <a-radio-button :value="0">不限</a-radio-button>
-              <a-radio-button :value="1">顶部</a-radio-button>
-              <a-radio-button :value="2">底部</a-radio-button>
+              <a-radio :value="1">顶部</a-radio>
+              <a-radio :value="2">底部</a-radio>
+              <a-radio :value="0">不限</a-radio>
             </a-radio-group>
-            <!--            <a-space>-->
-            <!--              <a-switch-->
-            <!--                checked-children="显示"-->
-            <!--                un-checked-children="隐藏"-->
-            <!--                :checked="form.top === 0"-->
-            <!--                @update:checked="updateTopValue"-->
-            <!--              />-->
-            <!--              <a-switch-->
-            <!--                checked-children="显示"-->
-            <!--                un-checked-children="隐藏"-->
-            <!--                :checked="form.bottom === 0"-->
-            <!--                @update:checked="updateBottomValue"-->
-            <!--              />-->
-            <!--            </a-space>-->
+          </a-form-item>
+          <a-form-item label="权限" name="">
+            <a-radio-group v-model:value="form.permission">
+              <a-radio :value="0">所有人</a-radio>
+              <a-radio :value="1">登录可见</a-radio>
+              <a-radio :value="2">密码可见</a-radio>
+            </a-radio-group>
+          </a-form-item>
+          <a-form-item label="允许评论" name="">
+            <a-space>
+              <a-switch
+                checked-children="是"
+                un-checked-children="否"
+                :checked="form.hide === 0"
+                @update:checked="updateHideValue"
+              />
+            </a-space>
           </a-form-item>
           <a-form-item label="状态" name="hide">
             <a-space>
@@ -191,26 +138,6 @@
           </a-form-item>
         </a-col>
       </a-row>
-      <!--      <div style="margin-bottom: 22px">-->
-      <!--        <a-divider />-->
-      <!--      </div>-->
-      <!--      <a-form-item-->
-      <!--        label="备注"-->
-      <!--        name="comments"-->
-      <!--        :label-col="-->
-      <!--          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }-->
-      <!--        "-->
-      <!--        :wrapper-col="-->
-      <!--          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }-->
-      <!--        "-->
-      <!--      >-->
-      <!--        <a-textarea-->
-      <!--          :rows="4"-->
-      <!--          :maxlength="200"-->
-      <!--          placeholder="请输入备注信息"-->
-      <!--          v-model:value="form.comments"-->
-      <!--        />-->
-      <!--      </a-form-item>-->
     </a-form>
   </ele-modal>
 </template>
@@ -224,16 +151,10 @@
   import useFormData from '@/utils/use-form-data';
   import { Navigation } from '@/api/cms/navigation/model';
   import { addNavigation, updateNavigation } from '@/api/cms/navigation';
-  import { Design } from '@/api/cms/design/model';
   import { removeSiteInfoCache } from '@/api/cms/website';
-  import { ArticleCategory } from '@/api/cms/category/model';
-  import { Article } from '@/api/cms/article/model';
-  import { Form } from '@/api/cms/form/model';
-  import { DocsBook } from '@/api/cms/docs-book/model';
-  import { Goods } from '@/api/shop/goods/model';
-  import { GoodsCategory } from '@/api/shop/goodsCategory/model';
   import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FileRecord } from '@/api/system/file/model';
+  import { uuid } from 'ele-admin-pro';
 
   // 是否开启响应式布局
   const themeStore = useThemeStore();
@@ -269,15 +190,22 @@
   // 表单数据
   const { form, resetFields, assignFields } = useFormData<Navigation>({
     navigationId: undefined,
+    model: '[custom]',
+    code: undefined,
+    modelName: '',
     type: 0,
     title: '',
     parentId: 0,
-    path: '',
-    component: '',
+    parentName: undefined,
+    parentPath: undefined,
+    path: undefined,
+    component: undefined,
     sortNumber: 100,
     hide: 0,
+    permission: 0,
+    password: uuid(),
     position: 1,
-    top: 1,
+    top: 0,
     bottom: 1,
     status: 0,
     pageId: 0,
@@ -297,6 +225,14 @@
         trigger: 'blur'
       }
     ],
+    model: [
+      {
+        required: true,
+        message: '请选择模型',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
     // component: [
     //   {
     //     required: true,
@@ -367,77 +303,10 @@
     ]
   });
 
-  const onType = (index: number) => {
-    if (index == 0) {
-      form.path = '/';
-      form.component = '';
-    }
-    if (index == 1) {
-      form.path = '';
-      form.component = '';
-    }
-    if (index == 2) {
-      form.path = '';
-      form.component = '';
-    }
-    if (index == 9) {
-      form.path = undefined;
-      form.component = '';
-    }
-  };
-
-  const choosePageId = (data: Design) => {
-    form.pageId = data.pageId;
-    form.pageName = data.name;
-    form.title = data.name;
-    form.path = data.path;
-    form.component = data.component;
-  };
-
-  const chooseArticleCategoryId = (data: ArticleCategory) => {
-    form.articleCategoryId = data.categoryId;
-    form.pageName = data.title;
-    form.title = data.title;
-    form.path = '/article/' + data.categoryId;
-    form.component = '/article/index';
-  };
-
-  const chooseArticle = (data: Article) => {
-    form.articleId = data.articleId;
-    form.title = data.title;
-    form.pageName = data.title;
-    form.path = '/a/' + data.articleId;
-    form.component = '/article/detail';
-  };
-
-  const chooseForm = (data: Form) => {
-    form.formId = data.formId;
-    form.title = data.name;
-    form.pageName = data.name;
-    form.path = '/form/' + data.formId;
-    form.component = '/form/detail';
-  };
-
-  const chooseDocsBook = (data: DocsBook) => {
-    form.bookCode = data.code;
-    form.title = data.name;
-    form.pageName = data.name;
-    form.path = '/docs/' + data.code;
-    form.component = '/docs/index';
-  };
-
-  const chooseGoodsCategory = (data: GoodsCategory) => {
-    form.goodsCategoryId = data.categoryId;
-    form.title = data.title;
-    form.pageName = data.title;
-    form.path = '/goods/search?categoryId=' + data.categoryId;
-    form.component = '/goods/search';
-  };
-
-  const chooseGoods = (data: Goods) => {
-    form.goodsId = data.goodsId;
-    form.path = '/goods/detail/' + data.goodsId;
-    form.component = '/goods/search';
+  const chooseModel = (item: Navigation) => {
+    form.model = `${item.value}`;
+    form.modelName = `${item.label}`;
+    form.component = `/pages/${item.value}`;
   };
 
   const chooseFile = (data: FileRecord) => {
@@ -480,10 +349,6 @@
         const navigationForm = {
           ...form
         };
-        // if (form.path != '' && form.path?.charAt(0) != '/') {
-        //   message.error('路由必须以"/"开头');
-        //   return false;
-        // }
         const saveOrUpdate = isUpdate.value ? updateNavigation : addNavigation;
         saveOrUpdate(navigationForm)
           .then((msg) => {
@@ -509,14 +374,6 @@
     form.hide = value ? 0 : 1;
   };
 
-  const updateTopValue = (value: boolean) => {
-    form.top = value ? 0 : 1;
-  };
-
-  const updateBottomValue = (value: boolean) => {
-    form.bottom = value ? 0 : 1;
-  };
-
   watch(
     () => props.visible,
     (visible) => {
@@ -525,8 +382,7 @@
         if (props.data) {
           assignFields({
             ...props.data,
-            parentId:
-              props.data.parentId === 0 ? undefined : props.data.parentId,
+            parentId: props.data.parentId ? props.data.parentId : 0,
             tempPath: props.data.path
           });
           if (props.data.type == 2) {
@@ -534,7 +390,6 @@
           }
           isUpdate.value = true;
         } else {
-          form.parentId = props.parentId;
           isUpdate.value = false;
         }
       } else {