优化：把网站设置、参数配置、域名管理放到概览页面

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

@@ -10,6 +10,7 @@ export interface Link {
   url?: string;
   linkType?: string;
   appId?: number;
+  categoryId?: number;
   userId?: number;
   comments?: string;
   recommend?: number;
@@ -25,5 +26,6 @@ export interface Link {
 export interface LinkParam extends PageParam {
   id?: number;
   linkType?: string;
+  categoryId?: number;
   name?: string;
 }

src/utils/common.ts

@@ -70,6 +70,7 @@ export function openUrl(url: string, params?: any): void {
  */
 export function openSpmUrl(path: string, d?: any, id = 0): void {
   const domain = getSiteDomain();
+  console.log(domain);
   const spm = ref<string>('');
   const token = ref<string>();
   const url = ref<string>();
@@ -97,8 +98,7 @@ export function openSpmUrl(path: string, d?: any, id = 0): void {
 
   // 跳转页面
   url.value = `${domain}${path}${spm.value}${token.value}`;
-  console.log(url.value);
+  window.open(`https://${url.value}`);
-  window.open(url.value);
 }
 
 /**
@@ -152,6 +152,10 @@ export function navTo(url: string): void {
   window.location.href = url;
 }
 
+export function push(path: string) {
+  router.push(path);
+}
+
 // 手机号脱敏
 export function getMobile(tel: string) {
   const reg = /^(\d{3})\d{4}(\d{4})$/;

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

@@ -34,8 +34,21 @@
           v-model:value="form.url"
         />
       </a-form-item>
+      <a-form-item label="选择栏目" name="categoryId">
+        <a-tree-select
+          allow-clear
+          :tree-data="navigationList"
+          tree-default-expand-all
+          placeholder="请选择栏目"
+          :value="form.categoryId || undefined"
+          :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+          @update:value="(value?: number) => (form.categoryId = value)"
+          @change="onCategoryId"
+        />
+      </a-form-item>
       <a-form-item label="类型" name="linkType">
         <a-select
+          allow-clear
           optionFilterProp="label"
           placeholder="请选择链接类型"
           :options="linkType"
@@ -88,11 +101,11 @@
   import useFormData from '@/utils/use-form-data';
   import { addLink, updateLink } from '@/api/cms/link';
   import type { Link } from '@/api/cms/link/model';
-  import { urlReg } from 'ele-admin-pro';
   import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { uploadFile } from '@/api/system/file';
   import { getDictionaryOptions } from '@/utils/common';
   import { FileRecord } from '@/api/system/file/model';
+  import { Navigation } from '@/api/cms/navigation/model';
 
   // 是否开启响应式布局
   const themeStore = useThemeStore();
@@ -108,6 +121,7 @@
     visible: boolean;
     // 修改回显的数据
     data?: Link | null;
+    navigationList?: Navigation[];
   }>();
 
   //
@@ -128,6 +142,7 @@
     url: '',
     sortNumber: 100,
     linkType: undefined,
+    categoryId: undefined,
     comments: undefined
   });
 
@@ -140,13 +155,6 @@
         trigger: 'blur'
       }
     ],
-    linkType: [
-      {
-        required: true,
-        type: 'string',
-        trigger: 'blur'
-      }
-    ],
     url: [
       {
         required: true,
@@ -203,6 +211,11 @@
     form.icon = '';
   };
 
+  // 选择栏目
+  const onCategoryId = (id: number) => {
+    form.categoryId = id;
+  };
+
   /* 保存编辑 */
   const save = () => {
     if (!formRef.value) {

src/views/cms/link/components/link-search.vue

@@ -8,13 +8,24 @@
         </template>
         <span>添加网址</span>
       </a-button>
-      <DictSelect
+      <a-tree-select
-        dict-code="linkType"
+        allow-clear
-        v-model:value="where.linkType"
+        :tree-data="navigationList"
-        :placeholder="`选择分类`"
+        tree-default-expand-all
         style="width: 200px"
-        @change="search"
+        placeholder="请选择栏目"
+        :value="where.categoryId || undefined"
+        :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+        @update:value="(value?: number) => (where.categoryId = value)"
+        @change="onCategoryId"
       />
+      <!--      <DictSelect-->
+      <!--        dict-code="linkType"-->
+      <!--        v-model:value="where.linkType"-->
+      <!--        :placeholder="`选择分类`"-->
+      <!--        style="width: 200px"-->
+      <!--        @change="search"-->
+      <!--      />-->
       <a-input-search
         allow-clear
         placeholder="搜索关键词"
@@ -23,11 +34,11 @@
         @search="search"
       />
       <a-button @click="reset">重置</a-button>
-      <a-button
+      <!--      <a-button-->
-        v-if="hasRole('superAdmin')"
+      <!--        v-if="hasRole('superAdmin')"-->
-        @click="openUrl(`/website/link/dict`)"
+      <!--        @click="openUrl(`/website/link/dict`)"-->
-        >设置分类</a-button
+      <!--        >设置分类</a-button-->
-      >
+      <!--      >-->
     </a-space>
     <a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
       <a-button
@@ -49,15 +60,13 @@
   import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
   import useSearch from '@/utils/use-search';
   import { watch } from 'vue';
-  import DictSelect from '@/components/DictSelect/index.vue';
   import { LinkParam } from '@/api/cms/link/model';
-  import { openUrl } from '@/utils/common';
-  import { hasRole } from '@/utils/permission';
 
   const props = withDefaults(
     defineProps<{
       // 选中的角色
       selection?: [];
+      navigationList?: Navigator[];
     }>(),
     {}
   );
@@ -88,6 +97,12 @@
     emit('add');
   };
 
+  // 按分类查询
+  const onCategoryId = (id: number) => {
+    where.categoryId = id;
+    emit('search', where);
+  };
+
   // 批量删除
   const removeBatch = () => {
     emit('remove');

src/views/cms/link/index.vue

@@ -12,17 +12,34 @@
         cache-key="proSystemLinkTable"
       >
         <template #toolbar>
-          <LinkSearch @add="openEdit" @search="reload" />
+          <LinkSearch
+            @add="openEdit"
+            :navigationList="navigationList"
+            @search="reload"
+          />
         </template>
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'link'">
+            <span class="cursor-pointer" @click="openSpmUrl(record.url)">{{
+              record.name
+            }}</span>
+          </template>
+          <template v-if="column.key === 'icon'">
             <a-avatar
               shape="square"
-              :width="40"
+              :width="30"
               :src="record.icon"
               style="margin-right: 5px"
             />
-            <a @click="openSpmUrl(record.url)">{{ record.name }}</a>
+          </template>
+          <template v-if="column.key === 'url'">
+            <span class="cursor-pointer" @click="openSpmUrl(record.url)">{{
+              record.url
+            }}</span>
+          </template>
+          <template v-if="column.key === 'status'">
+            <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+            <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
           </template>
           <template v-if="column.key === 'action'">
             <a-space>
@@ -41,7 +58,12 @@
       </ele-pro-table>
     </a-card>
     <!-- 编辑弹窗 -->
-    <link-edit v-model:visible="showEdit" :data="current" @done="reload" />
+    <link-edit
+      v-model:visible="showEdit"
+      :navigationList="navigationList"
+      :data="current"
+      @done="reload"
+    />
   </div>
 </template>
 
@@ -57,10 +79,12 @@
   import { messageLoading } from 'ele-admin-pro/es';
   import LinkEdit from './components/link-edit.vue';
   import { pageLink, removeLink } from '@/api/cms/link';
+  import { toTreeData } from 'ele-admin-pro';
   import type { Link, LinkParam } from '@/api/cms/link/model';
-  import { Menu } from '@/api/system/menu/model';
+  import { openSpmUrl, openUrl } from '@/utils/common';
-  import { openNew, openSpmUrl, openUrl } from '@/utils/common';
   import LinkSearch from './components/link-search.vue';
+  import { listNavigation } from '@/api/cms/navigation';
+  import { Navigation } from '@/api/cms/navigation/model';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -76,10 +100,20 @@
     //   customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
     // },
     {
-      title: '名称',
+      title: '链接名称',
       dataIndex: 'link',
       key: 'link'
     },
+    {
+      title: '链接地址',
+      dataIndex: 'url',
+      key: 'url'
+    },
+    {
+      title: '图标',
+      dataIndex: 'icon',
+      key: 'icon'
+    },
     {
       title: '备注',
       dataIndex: 'comments'
@@ -103,12 +137,12 @@
 
   // 表格选中数据
   const selection = ref<Link[]>([]);
-
   // 当前编辑数据
   const current = ref<Link | null>(null);
-
   // 是否显示编辑弹窗
   const showEdit = ref(false);
+  // 栏目数据
+  const navigationList = ref<Navigation[]>();
 
   // 表格数据源
   const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
@@ -127,6 +161,24 @@
     showEdit.value = true;
   };
 
+  // 加载栏目数据
+  if (!navigationList.value) {
+    listNavigation({}).then((res) => {
+      navigationList.value = toTreeData({
+        data: res?.map((d) => {
+          d.value = d.navigationId;
+          d.label = d.title;
+          if (d.model != 'links') {
+            d.disabled = true;
+          }
+          return d;
+        }),
+        idField: 'navigationId',
+        parentIdField: 'parentId'
+      });
+    });
+  }
+
   /* 自定义行属性 */
   const customRow = (record: Link) => {
     return {
@@ -136,7 +188,7 @@
       },
       // 行双击事件
       onDblclick: () => {
-        openUrl(`${record.url}`);
+        openEdit(record);
       }
     };
   };

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

@@ -14,7 +14,7 @@
     >
     <template #extra>
       <a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
-      <a-button @click="onPreview">预览</a-button>
+      <a-button @click="openSpmUrl(`${form.path}`)">预览</a-button>
     </template>
       <a-form
         ref="formRef"
@@ -166,6 +166,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 { openSpmUrl } from "@/utils/common";
 
 // 是否是修改
 const isUpdate = ref(false);

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

@@ -162,6 +162,7 @@
   import { removeSiteInfoCache } from '@/api/cms/website';
   import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FileRecord } from '@/api/system/file/model';
+  import { uuid } from '@/components/TinymceEditor/util';
 
   // 是否开启响应式布局
   const themeStore = useThemeStore();
@@ -197,9 +198,9 @@
   // 表单数据
   const { form, resetFields, assignFields } = useFormData<Navigation>({
     navigationId: undefined,
-    model: 'custom',
+    model: undefined,
     code: undefined,
-    modelName: '单页模型',
+    modelName: undefined,
     type: 0,
     title: '',
     parentId: 0,
@@ -312,7 +313,6 @@
   });
 
   const chooseModel = (item: any) => {
-    console.log(item);
     form.model = `${item.value}`;
     form.modelName = `${item.label}`;
     if (item.value == 'custom') {
@@ -325,6 +325,11 @@
       form.component = `/pages/${item.value}/index.vue`;
       return;
     }
+    if (!isUpdate.value) {
+      form.path = undefined;
+      form.component = `/pages/${item.value}/index.vue`;
+      return;
+    }
     form.path = `/${item.value}/${form.navigationId}`;
     form.component = `/pages/${item.value}/index.vue`;
   };

src/views/cms/website/components/search.vue

@@ -1,51 +1,51 @@
 <!-- 搜索表单 -->
 <template>
-  <a-space style="flex-wrap: wrap">
+  <a-space style="flex-wrap: wrap" v-if="website">
-    <!--    <a-button type="primary" class="ele-btn-icon" @click="add">-->
+    <a-button class="ele-btn-icon" @click="edit">
-    <!--      <template #icon>-->
+      <span>网站设置</span>
-    <!--        <PlusOutlined />-->
+    </a-button>
-    <!--      </template>-->
+    <a-button
-    <!--      <span>添加</span>-->
+      class="ele-btn-icon"
-    <!--    </a-button>-->
+      @click="push(`/website/field/${website.websiteId}`)"
-    <!--    <a-button class="ele-btn-icon" @click="openUrl(`/mp-pages`)">-->
+    >
-    <!--      <span>页面管理</span>-->
+      <span>参数配置</span>
-    <!--    </a-button>-->
+    </a-button>
-    <!--    <a-button class="ele-btn-icon" @click="openUrl(`/mp-field/0`)">-->
+    <a-button
-    <!--      <span>参数配置</span>-->
+      class="ele-btn-icon"
-    <!--    </a-button>-->
+      @click="push(`/website/domain/${website?.websiteId}`)"
-    <!--    <a-button class="ele-btn-icon" @click="openUrl(`/mp-ad`)">-->
+    >
-    <!--      <span>广告管理</span>-->
+      <span>域名管理</span>
-    <!--    </a-button>-->
+    </a-button>
-    <!--    <a-button class="ele-btn-icon" @click="openUrl(`/mp-group`)">-->
-    <!--      <span>卡片管理</span>-->
-    <!--    </a-button>-->
-    <!--    <a-button class="ele-btn-icon" @click="navigator(`/website/domain`)">-->
-    <!--      <span>域名管理</span>-->
-    <!--    </a-button>-->
   </a-space>
 </template>
 
 <script lang="ts" setup>
-  import { PlusOutlined } from '@ant-design/icons-vue';
   import { watch } from 'vue';
+  import { Website } from '@/api/cms/website/model';
+  import { push } from '@/utils/common';
 
   const props = withDefaults(
     defineProps<{
       // 选中的角色
       selection?: [];
+      website?: Website;
       count?: 0;
     }>(),
     {}
   );
 
   const emit = defineEmits<{
-    (e: 'add'): void;
+    (e: 'add', data: Website): void;
   }>();
 
   const add = () => {
     emit('add');
   };
 
+  const edit = () => {
+    emit('add', props.website);
+  };
+
   watch(
     () => props.selection,
     () => {}

src/views/cms/website/index.vue

@@ -7,6 +7,7 @@
           row-key="websiteId"
           :columns="columns"
           :datasource="datasource"
+          :parse-data="parseData"
           :customRow="customRow"
           :need-page="false"
           tool-class="ele-toolbar-form"
@@ -16,6 +17,7 @@
             <search
               @search="reload"
               :selection="selection"
+              :website="website"
               @add="openEdit"
               @remove="removeBatch"
               @batchMove="openMove"
@@ -26,19 +28,6 @@
               <a-image :src="record.websiteLogo" :width="50" />
             </template>
             <template v-if="column.key === 'domain'">
-              <!--              <a-button-->
-              <!--                type="link"-->
-              <!--                v-if="record.domain"-->
-              <!--                @click="-->
-              <!--                  openSpmUrl(-->
-              <!--                    `https://${record.domain}`,-->
-              <!--                    record,-->
-              <!--                    record.websiteId-->
-              <!--                  )-->
-              <!--                "-->
-              <!--              >-->
-              <!--                {{ record.domain }}-->
-              <!--              </a-button>-->
               <a-button
                 type="link"
                 @click="
@@ -76,9 +65,6 @@
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a @click="openUrl(`/website/domain/${record.websiteId}`)"
-                  >域名管理</a
-                >
                 <a-divider type="vertical" />
                 <a @click="openEdit(record)">编辑</a>
               </a-space>
@@ -112,8 +98,8 @@
     updateWebsite
   } from '@/api/cms/website';
   import type { Website, WebsiteParam } from '@/api/cms/website/model';
-  import { openPreview, openSpmUrl, openUrl } from '@/utils/common';
+  import { openSpmUrl } from '@/utils/common';
-  import { getSiteDomain } from '@/utils/domain';
+  import { PageResult } from '@/api';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -128,7 +114,8 @@
   const showMove = ref(false);
   // 加载状态
   const loading = ref(true);
-  const domain = getSiteDomain();
+  // 当前网站项目
+  const website = ref<Website>();
 
   // 表格数据源
   const datasource: DatasourceFunction = ({
@@ -152,7 +139,7 @@
   // 表格列配置
   const columns = ref<ColumnItem[]>([
     {
-      title: 'ID',
+      title: '租户ID',
       dataIndex: 'tenantId',
       key: 'tenantId',
       width: 80
@@ -201,17 +188,25 @@
       sorter: true,
       ellipsis: true,
       customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 180,
-      fixed: 'right',
-      align: 'center',
-      hideInSetting: true
     }
+    // {
+    //   title: '操作',
+    //   key: 'action',
+    //   width: 180,
+    //   fixed: 'right',
+    //   align: 'center',
+    //   hideInSetting: true
+    // }
   ]);
 
+  // 整理数据
+  const parseData = (data: PageResult<Website>) => {
+    if (data?.count > 0) {
+      website.value = data.list[0];
+    }
+    return data;
+  };
+
   /* 搜索 */
   const reload = (where?: WebsiteParam) => {
     selection.value = [];