sws
parent
f5b7584e97
commit
c232cd698d
|
|
@ -187,12 +187,21 @@ p {
|
|||
}
|
||||
// 链接弹窗表格用到 ------ end
|
||||
|
||||
|
||||
.el-color-predefine__colors .el-color-predefine__color-selector{
|
||||
.el-color-predefine__colors .el-color-predefine__color-selector {
|
||||
box-shadow: 0 0.2rem 0.8rem rgba(50, 55, 58, 0.1);
|
||||
}
|
||||
.el-color-picker .el-color-picker__trigger .el-color-picker__color {
|
||||
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
|
||||
background-size: 12px 12px;
|
||||
background-position: 0 0, 6px 0, 6px -6px, 0 6px;
|
||||
}
|
||||
background-position:
|
||||
0 0,
|
||||
6px 0,
|
||||
6px -6px,
|
||||
0 6px;
|
||||
}
|
||||
|
||||
// 全屏轮播大小调整
|
||||
.loading-custom {
|
||||
--el-loading-spinner-size: 13rem;
|
||||
--el-loading-fullscreen-spinner-size: 13rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<!-- 左侧模块 -->
|
||||
<div class="siderbar flex-col">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item v-for="(com, i) in components" :key="i" :title="com.title" :name="com.key">
|
||||
<VueDraggable v-model="com.item" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
|
||||
<div v-for="item in com.item" :key="item.key" class="item">
|
||||
<el-collapse-item v-for="(com, i) in components" :key="i" :title="com.name" :name="com.key">
|
||||
<VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
|
||||
<div v-for="item in com.data" :key="item.key" class="item">
|
||||
<div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
|
||||
<div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
|
||||
<img class="img radius-xs" :src="url_computer(item.key)" />
|
||||
|
|
@ -165,8 +165,9 @@ import { background_computer, get_math, gradient_computer, padding_computer, rad
|
|||
import { cloneDeep } from 'lodash';
|
||||
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
|
||||
import defaultSettings from './index';
|
||||
import { footerNavCounterStore } from '@/store';
|
||||
import { footerNavCounterStore, commonStore } from '@/store';
|
||||
const footer_nav_counter_store = footerNavCounterStore();
|
||||
const common_store = commonStore();
|
||||
const app = getCurrentInstance();
|
||||
import { isEmpty } from 'lodash';
|
||||
const props = defineProps({
|
||||
|
|
@ -252,45 +253,50 @@ watch(
|
|||
|
||||
// 父组件调用的方法
|
||||
const emits = defineEmits(['rightUpdate']);
|
||||
const activeNames = reactive(['1', '2', '3']);
|
||||
const components = reactive([
|
||||
{
|
||||
title: '基础组件',
|
||||
key: '1',
|
||||
item: [
|
||||
{ key: 'carousel', name: '轮播图' },
|
||||
{ key: 'search', name: '搜索框' },
|
||||
{ key: 'nav-group', name: '导航组' },
|
||||
{ key: 'notice', name: '公告' },
|
||||
{ key: 'video', name: '视频' },
|
||||
{ key: 'user-info', name: '用户信息' },
|
||||
{ key: 'tabs', name: '选项卡' },
|
||||
{ key: 'article-tabs', name: '文章选项卡' },
|
||||
{ key: 'shop-tabs', name: '商品选项卡' },
|
||||
{ key: 'article-list', name: '文章列表' },
|
||||
{ key: 'shop-list', name: '商品列表' },
|
||||
{ key: 'img-magic', name: '图片魔方' },
|
||||
{ key: 'data-magic', name: '数据魔方' },
|
||||
{ key: 'hot-zone', name: '热区' },
|
||||
{ key: 'custom', name: '自定义' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '营销组件',
|
||||
key: '2',
|
||||
item: [{ key: 'coupon', name: '优惠券' }],
|
||||
},
|
||||
{
|
||||
title: '工具组件',
|
||||
key: '3',
|
||||
item: [
|
||||
{ key: 'float-window', name: '悬浮按钮' },
|
||||
{ key: 'text-title', name: '文本标题' },
|
||||
{ key: 'auxiliary-blank', name: '辅助空白' },
|
||||
{ key: 'row-line', name: '横线' },
|
||||
{ key: 'rich-text', name: '富文本' },
|
||||
],
|
||||
},
|
||||
const activeNames = reactive(['base', 'plugins', 'tool']);
|
||||
interface componentsData {
|
||||
name: string;
|
||||
key: string;
|
||||
data: componentsData[];
|
||||
}
|
||||
const components = ref<componentsData[]>([
|
||||
// {
|
||||
// name: '基础组件',
|
||||
// key: 'base',
|
||||
// data: [
|
||||
// { key: 'carousel', name: '轮播图' },
|
||||
// { key: 'search', name: '搜索框' },
|
||||
// { key: 'nav-group', name: '导航组' },
|
||||
// { key: 'notice', name: '公告' },
|
||||
// { key: 'video', name: '视频' },
|
||||
// { key: 'user-info', name: '用户信息' },
|
||||
// { key: 'tabs', name: '选项卡' },
|
||||
// { key: 'article-tabs', name: '文章选项卡' },
|
||||
// { key: 'shop-tabs', name: '商品选项卡' },
|
||||
// { key: 'article-list', name: '文章列表' },
|
||||
// { key: 'shop-list', name: '商品列表' },
|
||||
// { key: 'img-magic', name: '图片魔方' },
|
||||
// { key: 'data-magic', name: '数据魔方' },
|
||||
// { key: 'hot-zone', name: '热区' },
|
||||
// { key: 'custom', name: '自定义' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: '营销组件',
|
||||
// key: 'plugins',
|
||||
// data: [{ key: 'coupon', name: '优惠券' }],
|
||||
// },
|
||||
// {
|
||||
// name: '工具组件',
|
||||
// key: 'tool',
|
||||
// data: [
|
||||
// { key: 'float-window', name: '悬浮按钮' },
|
||||
// { key: 'text-title', name: '文本标题' },
|
||||
// { key: 'auxiliary-blank', name: '辅助空白' },
|
||||
// { key: 'row-line', name: '横线' },
|
||||
// { key: 'rich-text', name: '富文本' },
|
||||
// ],
|
||||
// },
|
||||
]);
|
||||
const url_computer = (name: string) => {
|
||||
const new_url = ref(new URL(`../../../../assets/images/layout/siderbar/${name}.png`, import.meta.url).href).value;
|
||||
|
|
@ -549,6 +555,15 @@ const scroll = () => {
|
|||
// 在组件挂载时默认执行
|
||||
onMounted(() => {
|
||||
page_settings();
|
||||
nextTick(() => {
|
||||
const interval = setInterval(() => {
|
||||
// 获取分类
|
||||
if (common_store.common.module_list.length > 0) {
|
||||
components.value = common_store.common.module_list;
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
//页面设置
|
||||
const page_settings = () => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="app-wrapper no-copy">
|
||||
<div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
|
||||
<template v-if="!is_empty">
|
||||
<navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
|
||||
<div class="app-wrapper-content flex-row">
|
||||
|
|
@ -64,6 +64,7 @@ const form = ref<diy_data_item>({
|
|||
const diy_data_item = ref({});
|
||||
|
||||
const key = ref('');
|
||||
const api_count = ref(0);
|
||||
|
||||
const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter) => {
|
||||
diy_data_item.value = item;
|
||||
|
|
@ -90,15 +91,20 @@ const init = () => {
|
|||
if (html_index !== -1) {
|
||||
new_data.id = new_data.id.substring(0, html_index);
|
||||
}
|
||||
}
|
||||
if (new_data.id) {
|
||||
DiyAPI.getInit(new_data).then((res: any) => {
|
||||
if (res.data) {
|
||||
form.value = form_data_transfor_diy_data(res.data);
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
}
|
||||
});
|
||||
if (new_data.id) {
|
||||
DiyAPI.getInit(new_data).then((res: any) => {
|
||||
if (res.data) {
|
||||
form.value = form_data_transfor_diy_data(res.data);
|
||||
api_count.value += 1;
|
||||
loading_event(api_count.value);
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
api_count.value = 1;
|
||||
loading_event(api_count.value);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -113,8 +119,19 @@ const common_init = () => {
|
|||
// module_list ---- 模块列表
|
||||
//page_link_list ---- 页面链接
|
||||
common_store.set_common(res.data);
|
||||
api_count.value += 1;
|
||||
loading_event(api_count.value);
|
||||
});
|
||||
};
|
||||
// 加载动画
|
||||
const loading = ref(true);
|
||||
const loading_event = (count: number) => {
|
||||
if (count == 2) {
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
//#endregion 页面初始化数据 ---------------------end
|
||||
|
||||
//#region 顶部导航回调方法 ---------------------start
|
||||
|
|
|
|||
Loading…
Reference in New Issue