b2894lxlx/guofu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化网站导航模块

Browse Source
This commit is contained in:
赵忠林
2024-08-23 22:28:24 +08:00
parent 1d81fa9270
commit 13832d9de0
964 changed files with 90774 additions and 31362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
src/views/cms/navigation/components/navigation-edit.vue
View File

@@ -33,23 +33,13 @@
@update:value="(value?: number) => (form.parentId = value)"
/>
</a-form-item>
<a-form-item label="模型" name="type">
<a-select
ref="select"
v-model:value="form.type"
style="width: 253px"
@change="onType"
>
<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-option :value="0">通用模型</a-select-option>
</a-select>
<a-form-item label="菜单名称" name="title">
<a-input
allow-clear
placeholder="请输入菜单名称"
v-model:value="form.title"
@pressEnter="save"
/>
</a-form-item>
<a-form-item label="选择页面" v-if="form.type == 1">
<SelectDesign
@@ -101,52 +91,55 @@
/>
</a-form-item>
<a-form-item
v-if="form.type == 9 || form.type == 0"
:label="form.type == 9 ? '链接地址' : '路由地址'"
name="path"
:extra="form.path ? `${form.path}` : ''"
>
<a-input
allow-clear
:placeholder="form.type == 9 ? '请输入链接地址' : '/about'"
:placeholder="form.type == 9 ? '请输入链接地址' : '/about.html'"
v-model:value="form.path"
@pressEnter="save"
/>
</a-form-item>
<a-form-item
label="组件路径"
name="component"
v-if="form.type == 0"
:extra="form.component ? `@/views${form.component}` : ''"
>
<a-form-item label="组件路径" name="component" v-if="form.type == 0">
<a-input
allow-clear
placeholder="/about/index"
placeholder="/custom/index"
v-model:value="form.component"
@pressEnter="save"
/>
</a-form-item>
<a-form-item label="菜单图标" name="icon">
<SelectFile
:placeholder="`请选择图片`"
:limit="1"
:data="images"
:width="40"
@done="chooseFile"
@del="onDeleteItem"
/>
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="菜单名称" name="title">
<a-input
allow-clear
placeholder="请输入菜单名称"
v-model:value="form.title"
@pressEnter="save"
/>
<a-form-item label="位置" name="position">
<a-select
ref="select"
v-model:value="form.position"
style="width: 253px"
>
<a-select-option :value="1">顶部</a-select-option>
<a-select-option :value="2">底部</a-select-option>
</a-select>
</a-form-item>
<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="sortNumber">
<a-input-number
@@ -158,16 +151,6 @@
@pressEnter="save"
/>
</a-form-item>
<a-form-item label="位置" name="position">
<a-select
ref="select"
v-model:value="form.position"
style="width: 253px"
>
<a-select-option :value="1">顶部</a-select-option>
<a-select-option :value="2">底部</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="是否展示" name="hide">
<a-switch
checked-children="是"
@@ -176,6 +159,16 @@
@update:checked="updateHideValue"
/>
</a-form-item>
<a-form-item label="菜单图标" name="icon">
<SelectFile
:placeholder="`请选择图片`"
:limit="1"
:data="images"
:width="40"
@done="chooseFile"
@del="onDeleteItem"
/>
</a-form-item>
</a-col>
</a-row>
<div style="margin-bottom: 22px">
@@ -210,22 +203,17 @@
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import { Navigation } from '@/api/cms/navigation/model';
import {
addNavigation,
updateNavigation,
checkExistence
} from '@/api/cms/navigation';
import { addNavigation, updateNavigation } from '@/api/cms/navigation';
import { Design } from '@/api/cms/design/model';
import { removeSiteInfoCache } from '@/api/cms/website';
import { isChinese, isUrl } from 'ele-admin-pro';
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 { GoodsCategory } from '@/api/shop/goodsCategory/model';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FileRecord } from '@/api/system/file/model';
// 是否开启响应式布局
const themeStore = useThemeStore();
@@ -261,7 +249,7 @@
// 表单数据
const { form, resetFields, assignFields } = useFormData<Navigation>({
navigationId: undefined,
type: 1,
type: 0,
title: '',
parentId: 0,
path: '',
@@ -279,14 +267,6 @@
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
type: [
{
required: true,
message: '请选择导航类型',
type: 'number',
trigger: 'blur'
}
],
title: [
{
required: true,
@@ -295,56 +275,66 @@
trigger: 'blur'
}
],
path: [
{
required: true,
type: 'string',
trigger: 'blur',
validator: (_rule: Rule, value: string) => {
return new Promise<void>((resolve, reject) => {
if (!value) {
return reject('请填写路由地址');
}
if (form.type == 9) {
if (!isUrl(value)) {
return reject('请输入正确的网址');
}
resolve();
}
if (form.type == 1) {
if (form.pageId == 0) {
return reject('请选择页面');
}
}
if (value.charAt(0) != '/') {
return reject('请填写路由地址，必须是以"/"开头的英文字母+数字');
}
if (isChinese(value)) {
return reject('不支持中文');
}
// let zg = /^[0-9a-zA-Z]*$/;
// if (!zg.test(value)) {
// return reject('仅支持字母和数字');
// }
checkExistence('path', value, form.navigationId)
.then((msg) => {
return reject(msg);
})
.catch(() => {
resolve();
});
});
}
}
],
sortNumber: [
{
required: true,
message: '请输入排序号',
type: 'number',
trigger: 'blur'
}
],
// component: [
// {
// required: true,
// type: 'string',
// trigger: 'blur',
// validator: (_rule: Rule, value: string) => {
// return new Promise<void>((resolve, reject) => {
// if (!value) {
// return reject('请填写组件路径');
// }
// if (value.charAt(0) != '/') {
// return reject('请填写路由地址，必须是以"/"开头的英文字母+数字');
// }
// if (isChinese(value)) {
// return reject('不支持中文');
// }
// resolve();
// });
// }
// }
// ],
// path: [
// {
// required: true,
// type: 'string',
// trigger: 'blur',
// validator: (_rule: Rule, value: string) => {
// return new Promise<void>((resolve, reject) => {
// if (!value) {
// return reject('请填写路由地址');
// }
// if (form.type == 9) {
// if (!isUrl(value)) {
// return reject('请输入正确的网址');
// }
// resolve();
// }
// if (form.type == 1) {
// if (form.pageId == 0) {
// return reject('请选择页面');
// }
// }
// if (value.charAt(0) != '/') {
// return reject('请填写路由地址，必须是以"/"开头的英文字母+数字');
// }
// if (isChinese(value)) {
// return reject('不支持中文');
// }
// resolve();
// // checkExistence('path', value, form.navigationId)
// // .then((msg) => {
// // return reject(msg);
// // })
// // .catch(() => {
// // resolve();
// // });
// });
// }
// }
// ],
status: [
{
required: true,
@@ -424,8 +414,6 @@
const chooseGoods = (data: Goods) => {
form.goodsId = data.goodsId;
form.title = data.title;
form.pageName = data.title;
form.path = '/goods/detail/' + data.goodsId;
form.component = '/goods/search';
};
@@ -437,13 +425,12 @@
status: 'done'
});
form.icon = data.path;
}
};
const onDeleteItem = (index: number) => {
images.value.splice(index,1)
images.value.splice(index, 1);
form.icon = '';
}
};
/* 保存编辑 */
const save = () => {
@@ -456,6 +443,10 @@
const navigationForm = {
...form
};
if (form.path != '' && form.path?.charAt(0) != '/') {
message.error('路由必须以"/"开头');
return false;
}
const saveOrUpdate = isUpdate.value ? updateNavigation : addNavigation;
saveOrUpdate(navigationForm)
.then((msg) => {