修改首页导航

src/views/system/homeNav/index.vue

@@ -14,6 +14,11 @@
       <el-table v-loading="loading" :data="dataList" border>
         <el-table-column label="导航标题" prop="navigationName" align="center" />
         <el-table-column label="链接地址" prop="url" align="center" show-overflow-tooltip />
+        <el-table-column label="页面类型" prop="title" align="center">
+          <template #default="scope">
+            <dict-tag :options="nav_page_type" :value="scope.row.title" />
+          </template>
+        </el-table-column>
         <el-table-column label="排序" prop="sort" width="100" align="center" />
         <el-table-column label="是否显示" prop="isEnable" width="100" align="center">
           <template #default="scope">
@@ -32,32 +37,30 @@
     </el-card>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="导航标题" prop="navigationName">
-              <el-input v-model="form.navigationName" placeholder="请输入导航标题" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="导航链接" prop="url">
-              <el-input v-model="form.url" placeholder="请输入导航链接" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="排序" prop="sort">
-              <el-input-number v-model="form.sort" :min="0" controls-position="right" style="width: 100%" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="是否启用" prop="isEnable">
-              <el-switch v-model="form.isEnable" active-value="0" inactive-value="1" />
-            </el-form-item>
-          </el-col>
-        </el-row>
+        <el-form-item label="导航标题" prop="navigationName">
+          <el-input v-model="form.navigationName" placeholder="请输入导航标题" />
+        </el-form-item>
+
+        <el-form-item label="导航链接" prop="url">
+          <el-input v-model="form.url" placeholder="请输入导航链接" />
+        </el-form-item>
+
+        <el-form-item label="页面类型" prop="title">
+          <el-select v-model="form.title" placeholder="请选择页面类型">
+            <el-option v-for="dict in nav_page_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" controls-position="right" style="width: 100%" />
+        </el-form-item>
+
+        <el-form-item label="是否启用" prop="isEnable">
+          <el-switch v-model="form.isEnable" active-value="0" inactive-value="1" />
+        </el-form-item>
+
         <el-form-item label="描述" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -78,7 +81,7 @@ import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs }
 import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
+const { nav_page_type } = toRefs<any>(proxy?.useDict('nav_page_type'));
 const dataList = ref([]);
 const loading = ref(true);
 const total = ref(0);
@@ -97,6 +100,7 @@ const data = reactive({
   rules: {
     navigationName: [{ required: true, message: '导航名称不能为空', trigger: 'blur' }],
     url: [{ required: true, message: '链接地址不能为空', trigger: 'blur' }],
+    title: [{ required: true, message: '请选择页面类型', trigger: 'blur' }],
     sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
     isEnable: [{ required: true, message: '请选择是否显示', trigger: 'change' }]
   }

src/views/system/searchNav/index.vue

@@ -14,7 +14,11 @@
       <el-table v-loading="loading" :data="dataList" border>
         <el-table-column label="导航标题" prop="navigationName" align="center" />
         <el-table-column label="链接地址" prop="url" align="center" show-overflow-tooltip />
-        <el-table-column label="页面类型" prop="title" align="center" />
+        <el-table-column label="页面类型" prop="title" align="center">
+          <template #default="scope">
+            <dict-tag :options="nav_page_type" :value="scope.row.title" />
+          </template>
+        </el-table-column>
         <el-table-column label="排序" prop="sort" width="100" align="center" />
         <el-table-column label="是否显示" prop="isEnable" width="100" align="center">
           <template #default="scope">
@@ -43,7 +47,7 @@
         </el-form-item>
         <el-form-item label="页面类型" prop="title">
           <el-select v-model="form.title" placeholder="请选择页面类型">
-            <el-option v-for="item in navList" :key="item.title" :label="item.title" :value="item.title" />
+            <el-option v-for="dict in nav_page_type" :key="dict.value" :label="dict.label" :value="dict.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
@@ -72,6 +76,7 @@ import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs }
 import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { nav_page_type } = toRefs<any>(proxy?.useDict('nav_page_type'));
 
 const dataList = ref([]);
 const loading = ref(true);
@@ -96,17 +101,6 @@ const data = reactive({
     isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
   }
 });
-
-const navList = ref<any>([
-  { title: '首页', url: '/index' },
-  { title: '工业品商城', url: '/indexMro' },
-  { title: '福礼商城', url: '/indexFuli' },
-  { title: '商用工程', url: '/theme?id=2' },
-  { title: '场景采购', url: '/plan/procure' },
-  { title: '解决方案', url: '/plan' },
-  { title: '特价专区', url: '/search/special' }
-]);
-
 const { queryParams, form, rules } = toRefs(data);
 
 const getList = async () => {