Merge branch 'dev-sws' into dev-yxl
commit
97b6a65e6d
|
|
@ -0,0 +1,36 @@
|
|||
import { id } from 'element-plus/es/locale';
|
||||
import request from '@/utils/request';
|
||||
|
||||
class DiyAPI {
|
||||
/** diy初始化接口--获取详情 */
|
||||
static getInit(data: diy) {
|
||||
return request({
|
||||
url: `diyapi/diydetail`,
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
/** diy接口--保存 */
|
||||
static save(data: diyData) {
|
||||
return request({
|
||||
url: `diyapi/diysave`,
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default DiyAPI;
|
||||
|
||||
interface diy {
|
||||
/** 主键 */
|
||||
id: string;
|
||||
}
|
||||
export interface diyData {
|
||||
id: string;
|
||||
logo: string;
|
||||
name: string;
|
||||
describe: string;
|
||||
config: string;
|
||||
is_enable: string;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="flex-col align-c jc-c w h bg-f" :style="container_style">
|
||||
<img :style="style" :src="noData_image" />
|
||||
<p class="size-14 cr-c mt-12">暂无数据</p>
|
||||
<p class="cr-c mt-12" :style="text_style">{{ text }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -9,20 +9,29 @@
|
|||
interface Props {
|
||||
imgWidth?: string;
|
||||
height?: string;
|
||||
size?: string;
|
||||
text?: string;
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
imgWidth: '100',
|
||||
height: '200',
|
||||
imgWidth: '100px',
|
||||
height: '200px',
|
||||
size: '14px',
|
||||
text: '暂无数据',
|
||||
});
|
||||
const noData_image = ref(new URL(`../../../assets/images/noData.png`, import.meta.url).href);
|
||||
const style = computed(() => {
|
||||
return {
|
||||
width: props.imgWidth.search('px') > -1 ? props.imgWidth : props.imgWidth + 'px',
|
||||
width: props.imgWidth,
|
||||
};
|
||||
});
|
||||
const container_style = computed(() => {
|
||||
return {
|
||||
height: props.height.search('px') > -1 ? props.height : props.height + 'px',
|
||||
height: props.height,
|
||||
};
|
||||
});
|
||||
const text_style = computed(() => {
|
||||
return {
|
||||
fontSize: props.size,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<no-data height="440"></no-data>
|
||||
<no-data height="440px"></no-data>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div v-if="preview_switch_video && upload_type == 'video'">
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-else>
|
||||
<no-data height="280"></no-data>
|
||||
<no-data height="280px"></no-data>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import UrlValueAPI from '@/api/url-value';
|
||||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
import { urlValueStore } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
// 重置
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import UrlValueAPI from '@/api/url-value';
|
||||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
import { urlValueStore } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
// 重置
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
import { urlValueStore } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
// 重置
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import UrlValueAPI from '@/api/url-value';
|
||||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
import { urlValueStore } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
// 重置
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<no-data height="480"></no-data>
|
||||
<no-data height="480px"></no-data>
|
||||
</template>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
import { urlValueStore } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
// 类型
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="footer-nav flex-row jc-c align-c" :class="showFooter ? 'br-2 br-primary' : ''" @click="footer_nav_event">
|
||||
<div class="footer-nav-content flex-row jc-c align-c w" :style="style_container">
|
||||
<ul class="flex-row jc-sa align-c w">
|
||||
<li v-for="(item, index) in footerData.content.nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_hover = index + 1" @mouseleave="is_hover = 0">
|
||||
<li v-for="(item, index) in footerData?.content?.nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_hover = index + 1" @mouseleave="is_hover = 0">
|
||||
<div v-if="footerData.content.nav_style !== '2'" class="img re">
|
||||
<img class="img-item abs radius-xs animate-linear w" :class="is_hover != index + 1 ? 'active' : ''" :src="item.src[0]?.url" width="22" height="22" />
|
||||
<img class="img-item abs radius-xs animate-linear w" :class="is_hover == index + 1 ? 'active' : ''" :src="item.src_checked[0]?.url" width="22" height="22" />
|
||||
|
|
|
|||
|
|
@ -172,6 +172,7 @@ watch(
|
|||
() => props.diyData,
|
||||
(newValue) => {
|
||||
diy_data.value = newValue;
|
||||
console.log(newValue);
|
||||
}
|
||||
);
|
||||
// 监听
|
||||
|
|
@ -183,9 +184,11 @@ watch(
|
|||
}
|
||||
);
|
||||
watchEffect(() => {
|
||||
const content = props.header.com_data?.content || {};
|
||||
const container_common_styles = gradient_computer(content) + background_computer(content);
|
||||
content_style.value = container_common_styles;
|
||||
if (props.header.com_data?.content) {
|
||||
const content = props.header.com_data?.content;
|
||||
const container_common_styles = gradient_computer(content) + background_computer(content);
|
||||
content_style.value = container_common_styles;
|
||||
}
|
||||
});
|
||||
watch(
|
||||
() => props.footer,
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<upload v-model:visible-dialog="is_custom_dialog" is-custom-dialog :is-check-confirm="false"></upload>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const modelValue = defineModel({ type: Object, default: {} });
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
<template>
|
||||
<div class="app-wrapper no-copy">
|
||||
<navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
|
||||
<div class="app-wrapper-content flex-row">
|
||||
<app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update"></app-main>
|
||||
<settings :key="key" :value="diy_data_item"></settings>
|
||||
</div>
|
||||
<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">
|
||||
<app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update"></app-main>
|
||||
<settings :key="key" :value="diy_data_item"></settings>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<no-data height="100vh" img-width="300" size="40px" text="编辑数据有误"></no-data>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -12,6 +17,7 @@
|
|||
import { Navbar, Settings, AppMain } from './components/index';
|
||||
import defaultSettings from './components/main/index';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import DiyAPI, { diyData } from '@/api/diy';
|
||||
interface headerAndFooter {
|
||||
name: string;
|
||||
show_tabs: boolean;
|
||||
|
|
@ -19,6 +25,7 @@ interface headerAndFooter {
|
|||
com_data: any;
|
||||
}
|
||||
interface diy_data_item {
|
||||
id: string;
|
||||
model: {
|
||||
img: string;
|
||||
name: string;
|
||||
|
|
@ -26,11 +33,13 @@ interface diy_data_item {
|
|||
header: headerAndFooter;
|
||||
footer: headerAndFooter;
|
||||
diy_data: Array<any>;
|
||||
is_enable: string;
|
||||
}
|
||||
const form = ref<diy_data_item>({
|
||||
id: '',
|
||||
model: {
|
||||
img: '',
|
||||
name: 'demo',
|
||||
name: '',
|
||||
},
|
||||
header: {
|
||||
name: '页面设置',
|
||||
|
|
@ -45,6 +54,7 @@ const form = ref<diy_data_item>({
|
|||
com_data: defaultSettings.footer_nav,
|
||||
},
|
||||
diy_data: [],
|
||||
is_enable: '1',
|
||||
});
|
||||
const diy_data_item = ref({});
|
||||
|
||||
|
|
@ -63,12 +73,31 @@ const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, foo
|
|||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
const is_empty = ref(false);
|
||||
const init = () => {
|
||||
// 获取localStorage数据
|
||||
const diy_data = localStorage.getItem('diy_data');
|
||||
if (diy_data) {
|
||||
form.value = JSON.parse(diy_data);
|
||||
// const diy_data = localStorage.getItem('diy_data');
|
||||
// if (diy_data) {
|
||||
// form.value = JSON.parse(diy_data);
|
||||
// }
|
||||
// 截取document.location.search字符串内id/后面的所有字段
|
||||
let new_data = { id: '' };
|
||||
if (document.location.search.indexOf('id/') !== -1) {
|
||||
new_data.id = document.location.search.substring(document.location.search.indexOf('id/') + 3);
|
||||
// 去除字符串的.html
|
||||
let html_index = new_data.id.indexOf('.html');
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
//#endregion 页面初始化数据 ---------------------end
|
||||
|
|
@ -79,11 +108,9 @@ const preview = () => {
|
|||
};
|
||||
const save = () => {
|
||||
formmat_form_data(form.value);
|
||||
ElMessage.success('保存成功');
|
||||
};
|
||||
const save_close = () => {
|
||||
formmat_form_data(form.value);
|
||||
ElMessage.success('保存成功');
|
||||
};
|
||||
const formmat_form_data = (data: diy_data_item) => {
|
||||
const clone_form = cloneDeep(data);
|
||||
|
|
@ -96,9 +123,56 @@ const formmat_form_data = (data: diy_data_item) => {
|
|||
};
|
||||
});
|
||||
// 将数据暂存到localStorage
|
||||
localStorage.setItem('diy_data', JSON.stringify(clone_form));
|
||||
// localStorage.setItem('diy_data', JSON.stringify(clone_form));
|
||||
// 数据改造
|
||||
const new_data = diy_data_transfor_form_data(clone_form);
|
||||
DiyAPI.save(new_data).then((res) => {
|
||||
ElMessage.success('保存成功');
|
||||
});
|
||||
};
|
||||
//#endregion 顶部导航回调方法 ---------------------end
|
||||
// 数据改造
|
||||
const diy_data_transfor_form_data = (clone_form: diy_data_item) => {
|
||||
return {
|
||||
id: clone_form.id,
|
||||
logo: clone_form.model.img,
|
||||
name: clone_form.model.name,
|
||||
describe: '',
|
||||
config: JSON.stringify({
|
||||
header: clone_form.header,
|
||||
footer: clone_form.footer,
|
||||
diy_data: clone_form.diy_data,
|
||||
}),
|
||||
is_enable: clone_form.is_enable,
|
||||
};
|
||||
};
|
||||
const form_data_transfor_diy_data = (clone_form: diyData) => {
|
||||
try {
|
||||
return {
|
||||
id: clone_form.id,
|
||||
model: {
|
||||
img: clone_form.logo,
|
||||
name: clone_form.name,
|
||||
},
|
||||
header: JSON.parse(clone_form.config).header,
|
||||
footer: JSON.parse(clone_form.config).footer,
|
||||
diy_data: JSON.parse(clone_form.config).diy_data,
|
||||
is_enable: clone_form.is_enable,
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
id: clone_form.id,
|
||||
model: {
|
||||
img: clone_form.logo,
|
||||
name: clone_form.name,
|
||||
},
|
||||
header: form.value.header,
|
||||
footer: form.value.footer,
|
||||
diy_data: form.value.diy_data,
|
||||
is_enable: clone_form.is_enable,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue