gxwebsoft/gxtyzx-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
src/views/cms/navigation/components/design-edit.vue
+385
View File
@@ -0,0 +1,385 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="1000"
:visible="visible"
:maskClosable="false"
:maxable="true"
:title="isUpdate ? '编辑内容' : '添加内容'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 21, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="页面名称" name="name">
<a-input
allow-clear
:maxlength="100"
placeholder="关于我们"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="路由地址" name="path">
<a-input
allow-clear
:maxlength="100"
placeholder="/about"
v-model:value="form.path"
/>
</a-form-item>
<a-form-item label="组件路径" name="component">
<a-input
allow-clear
:maxlength="100"
placeholder="请输入组件路径"
v-model:value="form.component"
/>
</a-form-item>
<a-form-item label="Banner" name="photo">
<SelectFile
:placeholder="`请选择图片`"
:limit="1"
:data="images"
@done="chooseFile"
@del="onDeleteItem"
/>
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="1"-->
<!-- :drag="true"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
</a-form-item>
<a-form-item label="页面内容" name="content">
<!-- 编辑器 -->
<div class="content">
<tinymce-editor
v-model:value="content"
:disabled="disabled"
:init="config"
placeholder="图片直接粘贴自动上传"
@paste="onPaste"
/>
</div>
</a-form-item>
<a-form-item label="排序号" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">开启</a-radio>
<a-radio :value="1">关闭</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
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 { Design } from '@/api/cms/design/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance, Rule } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import {uploadFile, uploadOss} from '@/api/system/file';
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";
// 是否是修改
const isUpdate = ref(false);
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const disabled = ref(false);
// 编辑器内容，双向绑定
const content = ref<any>('');
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Design | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Design>({
pageId: undefined,
name: '',
images: '',
path: '',
component: '/custom/index',
content: '',
type: '',
status: 0,
comments: '',
sortNumber: 100,
navigationId: undefined
});
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
const config = ref({
height: 500,
images_upload_handler: (blobInfo, success, error) => {
const file = blobInfo.blob();
const formData = new FormData();
formData.append('file', file, file.name);
uploadOss(file).then(res => {
success(res.url)
}).catch((msg) => {
error(msg);
})
return false;
},
// 自定义文件上传(这里使用把选择的文件转成 blob 演示)
file_picker_callback: (callback: any, _value: any, meta: any) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
// 设定文件可选类型
if (meta.filetype === 'image') {
input.setAttribute('accept', 'image/*');
} else if (meta.filetype === 'media') {
input.setAttribute('accept', 'video/*,.pdf');
}
input.onchange = () => {
const file = input.files?.[0];
if (!file) {
return;
}
if (meta.filetype === 'media') {
if (file.size / 1024 / 1024 > 200) {
editorRef.value?.alert({ content: '大小不能超过 200MB' });
return;
}
if (!file.type.startsWith('video/')) {
editorRef.value?.alert({ content: '只能选择视频文件' });
return;
}
uploadOss(file).then(res => {
callback(res.downloadUrl);
})
}
};
input.click();
}
});
/* 粘贴图片上传服务器并插入编辑器 */
const onPaste = (e) => {
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
let hasFile = false;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
let file = items[i].getAsFile();
const item: ItemType = {
file,
uid: (file as any).lastModified,
name: file.name
};
uploadFile(<File>item.file)
.then((result) => {
const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
content.value = content.value + addPath
})
.catch((e) => {
message.error(e.message);
});
hasFile = true;
}
}
if (hasFile) {
e.preventDefault();
}
}
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
name: [
{
required: true,
type: 'string',
message: '请填写页面名称',
trigger: 'blur'
}
],
path: [
{
required: true,
type: 'string',
message: '请填写路由地址',
trigger: 'blur'
}
],
component: [
{
required: true,
type: 'string',
message: '请填写组件路径',
trigger: 'blur'
}
]
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (file.type.startsWith('video')) {
if (file.size / 1024 / 1024 > 200) {
message.error('大小不能超过 200MB');
return;
}
}
if (file.type.startsWith('image')) {
if (file.size / 1024 / 1024 > 5) {
message.error('大小不能超过 5MB');
return;
}
}
onUpload(item);
};
// 上传文件
const onUpload = (item: any) => {
const { file } = item;
uploadFile(file)
.then((data) => {
form.photo = data.path;
images.value.push({
uid: data.id,
url:
file.type == 'video/mp4'
? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png'
: data.path,
status: 'done'
});
})
.catch((e) => {
message.error(e.message);
});
};
const chooseFile = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.downloadUrl,
status: 'done'
});
form.photo = data.downloadUrl;
}
const onDeleteItem = (index: number) => {
images.value.splice(index,1)
form.photo = '';
}
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form,
content: content.value
};
const saveOrUpdate = isUpdate.value ? updateDesign : addDesign;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
// 清除缓存
removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId'));
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
content.value = ''
images.value = []
if (props.data) {
assignFields(props.data);
if(props.data.content){
content.value = props.data.content
}
if(props.data.photo){
images.value.push({
uid: uuid(),
url: props.data.photo,
status: 'done'
})
}
isUpdate.value = !!props.data.pageId;
} else {
isUpdate.value = false;
content.value = '';
resetFields();
}
} else {
resetFields();
formRef.value?.clearValidate();
}
},
{ immediate: true }
);
</script>
<style lang="less">
.sdf{
display: none;
}
</style>
src/views/cms/navigation/components/navigation-edit.vue
+119 -128
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) => {
src/views/cms/navigation/index.vue
+35 -5
View File
@@ -110,12 +110,13 @@
<a-space>
<a @click="openEdit(null, record.navigationId)">添加</a>
<a-divider type="vertical" />
<!-- <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>-->
<!-- <a-divider type="vertical" />-->
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a @click="openDesign(record)">内容</a>
<a-divider type="vertical" />
<a-popconfirm
placement="topRight"
:disabled="record.home == 1"
title="确定要删除此菜单吗？"
@confirm="remove(record)"
>
@@ -135,6 +136,12 @@
:position="position"
@done="reload"
/>
<!-- 页面编辑弹窗 -->
<DesignEdit
v-model:visible="showDesignEdit"
:data="design"
@done="reload"
/>
</div>
</template>
@@ -156,6 +163,7 @@
} from 'ele-admin-pro/es';
import type { EleProTable } from 'ele-admin-pro/es';
import NavigationEdit from './components/navigation-edit.vue';
import DesignEdit from './components/design-edit.vue';
import {
listNavigation,
removeNavigation,
@@ -164,6 +172,8 @@
import type { Navigation, NavigationParam } from '@/api/cms/navigation/model';
import { openPreview } from '@/utils/common';
import { getSiteInfo } from '@/api/layout';
import { getDesign } from '@/api/cms/design';
import { Design } from '@/api/cms/design/model';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -190,6 +200,7 @@
{
title: '组件路径',
dataIndex: 'component',
hideInTable: true,
key: 'component'
},
{
@@ -240,8 +251,12 @@
// 当前编辑数据
const current = ref<Navigation | null>(null);
// 当前选中页面
const design = ref<Design>();
// 是否显示编辑弹窗
const showEdit = ref(false);
// 编辑内容
const showDesignEdit = ref(false);
// 上级分类id
const parentId = ref<number>();
// 分类数据
@@ -306,11 +321,26 @@
showEdit.value = true;
};
const openDesign = (row?: Navigation) => {
// 设置默认值
design.value = {
navigationId: row?.navigationId,
name: row?.title,
path: `/page-${row?.navigationId}.html`,
component: `/pages/custom/index`
};
getDesign(Number(row?.pageId))
.then((res) => {
design.value = res;
})
.catch(() => {})
.finally(() => {
showDesignEdit.value = true;
});
};
/* 删除单个 */
const remove = (row: Navigation) => {
if (row.home == 1) {
return;
}
if (row.children?.length) {
message.error('请先删除子节点');
return;