@ -2,7 +2,7 @@
< DiyEditor v-if = "formData && !formLoading" v -model = " currentFormData ! .property "
: title = "templateItems[selectedTemplateItem].name" : libs = "libs" : show - page - config = "selectedTemplateItem !== 0"
: show - tab - bar = "selectedTemplateItem === 0" : show - navigation - bar = "selectedTemplateItem !== 0"
: preview - url = "previewUrl" @ save = "submitForm" @ reset = "handleEditorReset" : showTabBar = "false" >
: preview - url = "previewUrl" @ save = "submitForm" @ reset = "handleEditorReset" : showTabBar = "false" >
< template # toolBarLeft >
<!-- < el-radio-group
v - model = "selectedTemplateItem"
@ -19,154 +19,185 @@
< / DiyEditor >
< / template >
< script setup lang = "ts" >
/ / T O D O @ 疯 狂 ： 要 不 要 建 个 d e c o r a t e 目 录 ， 然 后 挪 进 去 ， 改 成 i n d e x . v u e ， 这 样 可 以 更 明 确 看 到 是 个 独 立 界 面 哈 ， 更 好 找
import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
import * as DiyPageApi from '@/api/mall/promotion/diy/page'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { DiyComponentLibrary , PAGE _LIBS } from '@/components/DiyEditor/util' / / 商 城 的 D I Y 组 件 ， 在 D i y E d i t o r 目 录 下
import { toNumber } from 'lodash-es'
/ / i m p o r t { w a t c h } f r o m ' v u e ' ;
/ / T O D O @ 疯 狂 ： 要 不 要 建 个 d e c o r a t e 目 录 ， 然 后 挪 进 去 ， 改 成 i n d e x . v u e ， 这 样 可 以 更 明 确 看 到 是 个 独 立 界 面 哈 ， 更 好 找
import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
import * as DiyPageApi from '@/api/mall/promotion/diy/page'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { DiyComponentLibrary , PAGE _LIBS } from '@/components/DiyEditor/util' / / 商 城 的 D I Y 组 件 ， 在 D i y E d i t o r 目 录 下
import { toNumber } from 'lodash-es'
/ / i m p o r t { w a t c h } f r o m ' v u e ' ;
/** 装修模板表单 */
defineOptions ( { name : 'DiyTemplateDecorate' } )
/** 初始化 **/
const { currentRoute } = useRouter ( ) / / 路 由
const { delView } = useTagsViewStore ( ) / / 视 图 操 作
const route = useRoute ( ) ;
/ / 左 上 角 工 具 栏 操 作 按 钮
const selectedTemplateItem = ref ( '0' )
/ / c o n s o l e . l o g ( s e l e c t e d T e m p l a t e I t e m . v a l u e , ' s e l e c t e d T e m p l a t e I t e m s e l e c t e d T e m p l a t e I t e m ' )
const templateItems = reactive ( [
{ name : '基础设置' , icon : 'ep:iphone' } ,
{ name : '首页' , icon : 'ep:home-filled' } ,
{ name : '我的' , icon : 'ep:user-filled' }
] )
/** 装修模板表单 */
defineOptions ( { name : 'DiyTemplateDecorate' } )
/** 初始化 **/
const { currentRoute } = useRouter ( ) / / 路 由
const { delView } = useTagsViewStore ( ) / / 视 图 操 作
const route = useRoute ( ) ;
/ / 左 上 角 工 具 栏 操 作 按 钮
const selectedTemplateItem = ref ( '0' )
/ / c o n s o l e . l o g ( s e l e c t e d T e m p l a t e I t e m . v a l u e , ' s e l e c t e d T e m p l a t e I t e m s e l e c t e d T e m p l a t e I t e m ' )
const templateItems = reactive ( [
{ name : '基础设置' , icon : 'ep:iphone' } ,
{ name : '首页' , icon : 'ep:home-filled' } ,
{ name : '我的' , icon : 'ep:user-filled' }
] )
const message = useMessage ( ) / / 消 息 弹 窗
const message = useMessage ( ) / / 消 息 弹 窗
const formLoading = ref ( false ) / / 表 单 的 加 载 中 ： 1 ） 修 改 时 的 数 据 加 载 ； 2 ） 提 交 的 按 钮 禁 用
const formData = ref < DiyTemplateApi .DiyTemplatePropertyVO > ( )
const formRef = ref ( ) / / 表 单 R e f
/ / 当 前 编 辑 的 属 性
const currentFormData = ref < DiyTemplateApi .DiyTemplatePropertyVO | DiyPageApi.DiyPageVO > ( )
/ / 商 城 H 5 预 览 地 址
const previewUrl = ref ( '' )
const formLoading = ref ( false ) / / 表 单 的 加 载 中 ： 1 ） 修 改 时 的 数 据 加 载 ； 2 ） 提 交 的 按 钮 禁 用
const formData = ref < DiyTemplateApi .DiyTemplatePropertyVO > ( )
const formRef = ref ( ) / / 表 单 R e f
/ / 当 前 编 辑 的 属 性
const currentFormData = ref < DiyTemplateApi .DiyTemplatePropertyVO | DiyPageApi.DiyPageVO > ( )
/ / 商 城 H 5 预 览 地 址
const previewUrl = ref ( '' )
/ / 获 取 详 情
const getPageDetail = async ( id : any ) => {
formLoading . value = true
try {
formData . value = await DiyTemplateApi . getDiyTemplateProperty ( id )
currentFormData . value = formData . value
/ / 拼 接 手 机 预 览 链 接
const domain = import . meta . env . VITE _MALL _H5 _DOMAIN
previewUrl . value = ` ${ domain } /#/pages/index/index?templateId= ${ formData . value . id } `
} finally {
formLoading . value = false
/ / 获 取 详 情
const getPageDetail = async ( id : any ) => {
formLoading . value = true
try {
formData . value = await DiyTemplateApi . getDiyTemplateProperty ( id )
currentFormData . value = formData . value
/ / 拼 接 手 机 预 览 链 接
const domain = import . meta . env . VITE _MALL _H5 _DOMAIN
previewUrl . value = ` ${ domain } /#/pages/index/index?templateId= ${ formData . value . id } `
} finally {
formLoading . value = false
}
}
/ / 模 板 组 件 库
const templateLibs = [ ] as DiyComponentLibrary [ ]
/ / 当 前 组 件 库
const libs = ref < DiyComponentLibrary [ ] > ( templateLibs )
const queryParams = reactive ( {
pageNo : 1 ,
pageSize : 10 ,
name : null ,
createTime : [ ]
} )
/ / 修 改 模 板 组 件 库 为 动 态
const getPagelibsActive = async ( ) => {
const data = await DiyPageApi . getDiyComponentList ( queryParams )
console . log ( "diy列表数据" , data )
console . log ( '组件列表数据' , libs . value )
/ / c o n s t n e w D a t a = l i b s . v a l u e ? . m a p ( i t e m = > {
/ / i f ( i t e m . n a m e = = = ' 营 销 组 件 ' ) {
/ / r e t u r n { . . . i t e m , t y p e : ' n e w - p r o m o t i o n ' } ; / / 修 改 t y p e 属 性
/ / }
/ / / / c o n s t c o m p o n e n t s = d a t a . m a p ( i t e m = > f u n c t i o n T o C o m p o n e n t M a p [ i t e m . f u n c t i o n N a m e ] ) ;
/ / r e t u r n i t e m ;
/ / } ) ;
}
/ / 模 板 选 项 切 换
const handleTemplateItemChange = async ( ) => {
/ / 编 辑 模 板
/ / i f ( s e l e c t e d T e m p l a t e I t e m . v a l u e = = = 0 ) {
/ / l i b s . v a l u e = t e m p l a t e L i b s
/ / c u r r e n t F o r m D a t a . v a l u e = f o r m D a t a . v a l u e
/ / r e t u r n
/ / }
/ / 编 辑 页 面
libs . value = PAGE _LIBS
console . log ( formData . value ! . pages , 'PAGE_LIBS' )
/ / c u r r e n t F o r m D a t a . v a l u e = f o r m D a t a . v a l u e ! . p a g e s . f i n d (
/ / / / ( p a g e : D i y P a g e A p i . D i y P a g e V O ) = > p a g e . n a m e = = = t e m p l a t e I t e m s [ s e l e c t e d T e m p l a t e I t e m . v a l u e ] . n a m e
/ / ( p a g e : D i y P a g e A p i . D i y P a g e V O ) = > p a g e . n a m e = = = t e m p l a t e I t e m s [ 1 ] . n a m e
/ / )
currentFormData . value = formData . value ! . pages [ selectedTemplateItem . value ]
/ / c o n s o l e . l o g ( s e l e c t e d T e m p l a t e I t e m . v a l u e , ' s e l e c t e d T e m p l a t e I t e m . v a l u e 1 1 1 1 1 1 1 1 1 1 1 1 1 1 ' )
}
/ / 提 交 表 单
const submitForm = async ( ) => {
/ / 校 验 表 单
if ( ! formRef ) return
/ / 提 交 请 求
formLoading . value = true
try {
if ( selectedTemplateItem . value === '0' ) {
/ / 提 交 模 板 属 性
await DiyTemplateApi . updateDiyTemplateProperty ( unref ( formData ) ! )
} else {
/ / 提 交 页 面 属 性
await DiyPageApi . updateDiyPageProperty ( unref ( currentFormData ) ! )
}
message . success ( '保存成功' )
} finally {
formLoading . value = false
}
}
/ / 模 板 组 件 库
const templateLibs = [ ] as DiyComponentLibrary [ ]
/ / 当 前 组 件 库
const libs = ref < DiyComponentLibrary [ ] > ( templateLibs )
/ / 模 板 选 项 切 换
const handleTemplateItemChange = ( ) => {
/ / 编 辑 模 板
/ / i f ( s e l e c t e d T e m p l a t e I t e m . v a l u e = = = 0 ) {
/ / l i b s . v a l u e = t e m p l a t e L i b s
/ / c u r r e n t F o r m D a t a . v a l u e = f o r m D a t a . v a l u e
/ / r e t u r n
/ / }
/ / 重 置 表 单
const resetForm = ( ) => {
formData . value = {
id : undefined ,
name : '' ,
used : false ,
usedTime : undefined ,
remark : '' ,
previewPicUrls : [ ] ,
property : '' ,
pages : [ ]
} as DiyTemplateApi . DiyTemplatePropertyVO
formRef . value ? . resetFields ( )
}
/ / 编 辑 页 面
libs . value = PAGE _LIBS
console . log ( formData . value ! . pages , 'PAGE_LIBS' )
/ / c u r r e n t F o r m D a t a . v a l u e = f o r m D a t a . v a l u e ! . p a g e s . f i n d (
/ / / / ( p a g e : D i y P a g e A p i . D i y P a g e V O ) = > p a g e . n a m e = = = t e m p l a t e I t e m s [ s e l e c t e d T e m p l a t e I t e m . v a l u e ] . n a m e
/ / ( p a g e : D i y P a g e A p i . D i y P a g e V O ) = > p a g e . n a m e = = = t e m p l a t e I t e m s [ 1 ] . n a m e
/ / )
currentFormData . value = formData . value ! . pages [ selectedTemplateItem . value ]
/ / c o n s o l e . l o g ( s e l e c t e d T e m p l a t e I t e m . v a l u e , ' s e l e c t e d T e m p l a t e I t e m . v a l u e 1 1 1 1 1 1 1 1 1 1 1 1 1 1 ' )
/ / 重 置 时 记 录 当 前 编 辑 的 页 面
const handleEditorReset = ( ) => storePageIndex ( )
/ / # r e g i o n 无 感 刷 新
/ / 记 录 标 识
const DIY _PAGE _INDEX _KEY = 'diy_page_index'
/ / 1 . 记 录
const storePageIndex = ( ) =>
sessionStorage . setItem ( DIY _PAGE _INDEX _KEY , ` ${ selectedTemplateItem . value } ` )
/ / 2 . 恢 复
const recoverPageIndex = ( ) => {
/ / 恢 复 重 置 前 的 页 面 ， 默 认 是 第 一 个 页 面
const pageIndex = toNumber ( sessionStorage . getItem ( DIY _PAGE _INDEX _KEY ) ) || 0
/ / 移 除 标 记
sessionStorage . removeItem ( DIY _PAGE _INDEX _KEY )
/ / 切 换 页 面
if ( pageIndex !== selectedTemplateItem . value ) {
selectedTemplateItem . value = pageIndex
handleTemplateItemChange ( )
}
}
/ / # e n d r e g i o n
/ / 提 交 表 单
const submitForm = async ( ) => {
/ / 校 验 表 单
if ( ! formRef ) return
/ / 提 交 请 求
formLoading . value = true
try {
if ( selectedTemplateItem . value === '0' ) {
/ / 提 交 模 板 属 性
await DiyTemplateApi . updateDiyTemplateProperty ( unref ( formData ) ! )
} else {
/ / 提 交 页 面 属 性
await DiyPageApi . updateDiyPageProperty ( unref ( currentFormData ) ! )
}
message . success ( '保存成功' )
} finally {
formLoading . value = false
}
}
/ / 重 置 表 单
const resetForm = ( ) => {
formData . value = {
id : undefined ,
name : '' ,
used : false ,
usedTime : undefined ,
remark : '' ,
previewPicUrls : [ ] ,
property : '' ,
pages : [ ]
} as DiyTemplateApi . DiyTemplatePropertyVO
formRef . value ? . resetFields ( )
}
onMounted ( async ( ) => {
resetForm ( )
/ / i f ( ! c u r r e n t R o u t e . v a l u e . p a r a m s . i d ) {
/ / m e s s a g e . w a r n i n g ( ' 参 数 错 误 ， 页 面 编 号 不 能 为 空 ！ ' )
/ / d e l V i e w ( u n r e f ( c u r r e n t R o u t e ) )
/ / r e t u r n
/ / }
/ / 查 询 详 情
/ / a w a i t g e t P a g e D e t a i l ( c u r r e n t R o u t e . v a l u e . p a r a m s . i d )
await getPageDetail ( 4 )
/ / 恢 复 重 置 前 的 页 面
recoverPageIndex ( )
currentFormData . value = formData . value ! . pages [ 0 ]
/ / 重 置 时 记 录 当 前 编 辑 的 页 面
const handleEditorReset = ( ) => storePageIndex ( )
getPagelibsActive ( ) ;
/ / # r e g i o n 无 感 刷 新
/ / 记 录 标 识
const DIY _PAGE _INDEX _KEY = 'diy_page_index'
/ / 1 . 记 录
const storePageIndex = ( ) =>
sessionStorage . setItem ( DIY _PAGE _INDEX _KEY , ` ${ selectedTemplateItem . value } ` )
/ / 2 . 恢 复
const recoverPageIndex = ( ) => {
/ / 恢 复 重 置 前 的 页 面 ， 默 认 是 第 一 个 页 面
const pageIndex = toNumber ( sessionStorage . getItem ( DIY _PAGE _INDEX _KEY ) ) || 0
/ / 移 除 标 记
sessionStorage . removeItem ( DIY _PAGE _INDEX _KEY )
/ / 切 换 页 面
if ( pageIndex !== selectedTemplateItem . value ) {
selectedTemplateItem . value = pageIndex
handleTemplateItemChange ( )
}
}
/ / # e n d r e g i o n
} )
onMounted ( async ( ) => {
resetForm ( )
/ / i f ( ! c u r r e n t R o u t e . v a l u e . p a r a m s . i d ) {
/ / m e s s a g e . w a r n i n g ( ' 参 数 错 误 ， 页 面 编 号 不 能 为 空 ！ ' )
/ / d e l V i e w ( u n r e f ( c u r r e n t R o u t e ) )
/ / r e t u r n
/ / }
/ / 查 询 详 情
/ / a w a i t g e t P a g e D e t a i l ( c u r r e n t R o u t e . v a l u e . p a r a m s . i d )
await getPageDetail ( 4 )
/ / 恢 复 重 置 前 的 页 面
recoverPageIndex ( )
currentFormData . value = formData . value ! . pages [ 0 ]
} )
/ / w a t c h ( ( ) = > r o u t e . p a t h , ( n e w P a t h , o l d P a t h ) = > {
/ / c o n s o l e . l o g ( n e w P a t h , ' n e w P a t h n e w P a t h ' ) ;
/ / / / h a n d l e T e m p l a t e I t e m C h a n g e ( )
/ / } , { i m m e d i a t e : t r u e } ) ;
/ / w a t c h ( ( ) = > r o u t e . p a t h , ( n e w P a t h , o l d P a t h ) = > {
/ / c o n s o l e . l o g ( n e w P a t h , ' n e w P a t h n e w P a t h ' ) ;
/ / / / h a n d l e T e m p l a t e I t e m C h a n g e ( )
/ / } , { i m m e d i a t e : t r u e } ) ;
< / script >
