解决冲突
于肖磊
commit
ef83947291
|
|
@ -18,6 +18,25 @@ class DiyAPI {
|
|||
data,
|
||||
});
|
||||
}
|
||||
/** diy导入 */
|
||||
static import(data: FormData) {
|
||||
return request({
|
||||
url: `diyapi/diyupload`,
|
||||
method: 'post',
|
||||
data,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
}
|
||||
/** diy导出 */
|
||||
static export(data: diy) {
|
||||
return request({
|
||||
url: `diyapi/diydownload`,
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default DiyAPI;
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
</el-select>
|
||||
<div v-if="!isEmpty(form.data_source_content)" class="flex-row mt-20 gap-20">
|
||||
<div class="re flex align-c">
|
||||
<image-empty v-model="form.data_source_content[form.img_key]" style="width: 10rem; height: 10rem;"></image-empty>
|
||||
<image-empty v-model="form.data_source_content[form.img_key]" style="width: 10rem; height: 10rem"></image-empty>
|
||||
<div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
|
||||
</div>
|
||||
<div class="flex-1 size-14 text-line-3">{{ form.data_source_content.title || form.data_source_content.name }}</div>
|
||||
<div class="flex-1 size-14 text-line-3">{{ form.data_source_content.title || form.data_source_content.name }}</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="mb-20">内容设置</div>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="[ form.data_source ]" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
|
||||
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="[form.data_source]" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -70,12 +70,12 @@ interface data_list {
|
|||
name: string;
|
||||
field: string;
|
||||
type: string;
|
||||
};
|
||||
}
|
||||
interface data_source_content {
|
||||
name: string;
|
||||
data: data_list[];
|
||||
type: string;
|
||||
};
|
||||
}
|
||||
const getCustominit = () => {
|
||||
CustomAPI.getCustominit().then((res) => {
|
||||
const { data_source } = res.data;
|
||||
|
|
@ -84,7 +84,7 @@ const getCustominit = () => {
|
|||
// 数据处理
|
||||
processing_data(form.data_source);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (!data_source_store.is_data_source_api) {
|
||||
|
|
@ -97,13 +97,13 @@ onBeforeMount(() => {
|
|||
}
|
||||
});
|
||||
// 处理显示的图片和传递到下去的数据结构
|
||||
const model_data_source = ref<data_list[]>([])
|
||||
const model_data_source = ref<data_list[]>([]);
|
||||
const processing_data = (key: string) => {
|
||||
const list = options.value.filter(item => item.type == key);
|
||||
const list = options.value.filter((item) => item.type == key);
|
||||
if (list.length > 0) {
|
||||
model_data_source.value = list[0].data;
|
||||
// 从中取出包含图片的内容
|
||||
const field_list = list[0].data.filter(item => item.type == 'images');
|
||||
const field_list = list[0].data.filter((item) => item.type == 'images');
|
||||
// 取出图片的key
|
||||
if (field_list.length > 0) {
|
||||
form.img_key = field_list[0].field;
|
||||
|
|
@ -160,7 +160,7 @@ const changeDataSource = (key: string) => {
|
|||
if (!isEmpty(key)) {
|
||||
url_value_dialog_visible.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 弹出框选择的内容
|
||||
const url_value_dialog_call_back = (item: any[]) => {
|
||||
|
|
@ -175,13 +175,13 @@ const url_value_close = () => {
|
|||
if (isEmpty(form.data_source_content)) {
|
||||
form.data_source = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
// 替换数据
|
||||
const replace_data = () => {
|
||||
if (!isEmpty(form.data_source)) {
|
||||
url_value_dialog_visible.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
//#endregion
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -206,20 +206,20 @@ const replace_data = () => {
|
|||
padding: 0;
|
||||
overflow: hidden;
|
||||
.el-dialog__header {
|
||||
padding: 3rem;
|
||||
padding: 2.3rem 2rem;
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-dialog__headerbtn {
|
||||
font-size: 2.4rem;
|
||||
padding: 3rem;
|
||||
padding: 2rem;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
background: #f5f5f5;
|
||||
height: calc(100% - 16.4rem);
|
||||
height: calc(100% - 15rem);
|
||||
}
|
||||
.el-dialog__footer {
|
||||
padding: 2.4rem 3rem;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<div class="flex-row align-c" :class="'gap-' + base_data.img_space">
|
||||
<div v-for="(item, index) in icon_setting" :key="index" :style="{ width: base_data.img_size + 'px', height: base_data.img_size + 'px' }">
|
||||
<image-empty v-if="item.src.length > 0" v-model="item.src[0]" :error-img-style="'width: ' + Number(base_data.img_size) / 2 + 'px;height:' + Number(base_data.img_size) / 2 + 'px;'"></image-empty>
|
||||
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(base_data.img_size) / 2 + 'px;height:' + Number(base_data.img_size) / 2 + 'px;'"></image-empty>
|
||||
<icon v-else :name="item.icon" :size="base_data.img_size + ''" color="6"></icon>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,14 +46,14 @@ const stats_list = reactive([
|
|||
]);
|
||||
interface icon_params {
|
||||
id: string;
|
||||
src: uploadList[];
|
||||
img: uploadList[];
|
||||
icon: string;
|
||||
link: string;
|
||||
}
|
||||
const user_info = ref<string[]>(['1', '2', '3', '4']);
|
||||
const icon_setting = ref<icon_params[]>([
|
||||
{ id: '1', src: [], icon: '', link: 'a' },
|
||||
{ id: '2', src: [], icon: '', link: 'a' },
|
||||
{ id: '1', img: [], icon: '', link: 'a' },
|
||||
{ id: '2', img: [], icon: '', link: 'a' },
|
||||
]);
|
||||
const base_data = reactive({
|
||||
// 头像大小
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="nav-list">
|
||||
<drag :data="form.icon_setting" :space-col="20" @remove="icon_setting_remove" @on-sort="icon_setting_sort">
|
||||
<template #default="{ row }">
|
||||
<upload v-model="row.src" v-model:icon-value="row.icon" is-icon type="img" :limit="1" :styles="2" :size="30"></upload>
|
||||
<upload v-model="row.img" v-model:icon-value="row.icon" is-icon type="img" :limit="1" :styles="2" :size="30"></upload>
|
||||
<url-value v-model="row.link"></url-value>
|
||||
</template>
|
||||
</drag>
|
||||
|
|
@ -52,7 +52,7 @@ const icon_setting_sort = (item: any) => {
|
|||
const add = () => {
|
||||
form.icon_setting.push({
|
||||
id: get_math(),
|
||||
src: [],
|
||||
img: [],
|
||||
icon: '',
|
||||
link: {},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@ const defaultFooterNav = ref<DefaultFooterNav>({
|
|||
nav_style: '0',
|
||||
nav_type: '0',
|
||||
nav_content: [
|
||||
{ id: '1', name: '首页', img: [{ id: 1, url: new_url + 'home.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '2', name: '分类', img: [{ id: 1, url: new_url + 'category.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '3', name: '购物车', img: [{ id: 1, url: new_url + 'cart.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '4', name: '我的', img: [{ id: 1, url: new_url + 'user.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '1', name: '首页', img: [{ id: 1, url: new_url + 'home.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/home.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '2', name: '分类', img: [{ id: 1, url: new_url + 'category.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/category.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '3', name: '购物车', img: [{ id: 1, url: new_url + 'cart.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/cart.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '4', name: '我的', img: [{ id: 1, url: new_url + 'user.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/user.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
],
|
||||
},
|
||||
style: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import defaultCommon from './index';
|
|||
interface DefaultUserInfo {
|
||||
content: {
|
||||
user_info: string[];
|
||||
icon_setting: { id: string; src: uploadList[]; link: object; icon: string }[];
|
||||
icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
|
||||
};
|
||||
style: {
|
||||
user_avatar_size: string;
|
||||
|
|
@ -29,8 +29,8 @@ const defaultUserInfo: DefaultUserInfo = {
|
|||
content: {
|
||||
user_info: ['1', '2', '3', '4', '5'],
|
||||
icon_setting: [
|
||||
{ id: '1', src: [], icon: 'applet-me-settings-acquiesce', link: {} },
|
||||
{ id: '2', src: [], icon: 'applet-me-message-acquiesce', link: {} },
|
||||
{ id: '1', img: [], icon: 'applet-me-settings-acquiesce', link: {} },
|
||||
{ id: '2', img: [], icon: 'applet-me-message-acquiesce', link: {} },
|
||||
],
|
||||
},
|
||||
style: {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@
|
|||
z-index: 1;
|
||||
.el-button {
|
||||
border-radius: 0.4rem;
|
||||
width: 11.8rem;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,11 @@
|
|||
<div class="acticons">
|
||||
<el-button size="large" class="" @click="page_settings">页面设置</el-button>
|
||||
<el-button size="large" class="" @click="export_click">导出</el-button>
|
||||
<el-button size="large" class="" @click="import_click">导入</el-button>
|
||||
<el-upload ref="uploadRef" class="upload-demo" action="#" :accept="exts_text" :show-file-list="false" :auto-upload="false" :on-change="upload_change">
|
||||
<template #trigger>
|
||||
<el-button size="large">导入</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
<el-button size="large" class="" @click="clear_click">清空</el-button>
|
||||
</div>
|
||||
<!-- 拖拽区 -->
|
||||
|
|
@ -165,6 +169,7 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { background_computer, get_math, gradient_computer, padding_computer, radius_computer } from '@/utils';
|
||||
import type { UploadFile, UploadFiles } from 'element-plus';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
|
||||
import defaultSettings from './index';
|
||||
|
|
@ -245,7 +250,7 @@ watch(
|
|||
);
|
||||
|
||||
// 父组件调用的方法
|
||||
const emits = defineEmits(['rightUpdate']);
|
||||
const emits = defineEmits(['rightUpdate', 'import', 'export']);
|
||||
const activeNames = reactive(['base', 'plugins', 'tool']);
|
||||
interface componentsData {
|
||||
name: string;
|
||||
|
|
@ -535,9 +540,17 @@ const page_settings = () => {
|
|||
emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value);
|
||||
};
|
||||
//导出
|
||||
const export_click = () => {};
|
||||
const export_click = () => {
|
||||
emits('export');
|
||||
};
|
||||
|
||||
//导入
|
||||
const import_click = () => {};
|
||||
const exts_text = ref('.zip');
|
||||
// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
|
||||
const upload_change = async (uploadFile: UploadFile) => {
|
||||
// console.log('文件状态改变时的钩子', uploadFile);
|
||||
emits('import', uploadFile);
|
||||
};
|
||||
// 清空列表
|
||||
const clear_click = () => {
|
||||
app?.appContext.config.globalProperties.$common.message_box('清空后不可恢复，确定继续吗?', 'warning').then(() => {
|
||||
|
|
|
|||
|
|
@ -3,17 +3,18 @@
|
|||
<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>
|
||||
<app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update" @import="import_data_event" @export="export_data_event"></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>
|
||||
<no-data height="100vh" img-width="260px" size="16px" text="编辑数据有误"></no-data>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { UploadFile, UploadFiles } from 'element-plus';
|
||||
import { Navbar, Settings, AppMain } from './components/index';
|
||||
import defaultSettings from './components/main/index';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
|
@ -74,6 +75,35 @@ const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, foo
|
|||
// 生成随机id
|
||||
key.value = Math.random().toString(36).substring(2);
|
||||
};
|
||||
const import_data_event = (uploadFile: UploadFile) => {
|
||||
// 截取document.location.search字符串内id/后面的所有字段
|
||||
const form_data = new FormData();
|
||||
if (get_id()) {
|
||||
form_data.append('id', get_id());
|
||||
}
|
||||
if (uploadFile && uploadFile.raw) {
|
||||
form_data.append('file', uploadFile?.raw);
|
||||
}
|
||||
DiyAPI.import(form_data).then((res: any) => {
|
||||
ElMessage.success(res.msg);
|
||||
history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
|
||||
init();
|
||||
});
|
||||
};
|
||||
const export_data_event = () => {
|
||||
if (get_id()) {
|
||||
ElMessageBox.confirm('导出前需先保存最新数据，是否继续？', '提示')
|
||||
.then(() => {
|
||||
const index = window.location.href.lastIndexOf('?s=');
|
||||
const pro_url = window.location.href.substring(0, index);
|
||||
const new_url = import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API_URL : pro_url;
|
||||
window.open(new_url + '?s=diyapi/diydownload/id/' + get_id() + '.html', '_blank');
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
ElMessage.warning('请先保存,再导出');
|
||||
}
|
||||
};
|
||||
//#region 页面初始化数据 ---------------------start
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
|
|
@ -82,26 +112,16 @@ onMounted(() => {
|
|||
});
|
||||
const is_empty = ref(false);
|
||||
const init = () => {
|
||||
// 截取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);
|
||||
api_count.value += 1;
|
||||
loading_event(api_count.value);
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (get_id()) {
|
||||
DiyAPI.getInit({ id: get_id() }).then((res: any) => {
|
||||
if (res.data) {
|
||||
form.value = form_data_transfor_diy_data(res.data);
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
}
|
||||
api_count.value += 1;
|
||||
loading_event(api_count.value);
|
||||
});
|
||||
} else {
|
||||
api_count.value = 1;
|
||||
loading_event(api_count.value);
|
||||
|
|
@ -160,13 +180,16 @@ const formmat_form_data = (data: diy_data_item, close: boolean = false) => {
|
|||
const new_data = diy_data_transfor_form_data(clone_form);
|
||||
DiyAPI.save(new_data).then((res) => {
|
||||
ElMessage.success('保存成功');
|
||||
if (!close) return;
|
||||
ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
|
||||
.then(() => {
|
||||
// 关闭页面
|
||||
window.close();
|
||||
})
|
||||
.catch(() => {});
|
||||
if (close) {
|
||||
ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
|
||||
.then(() => {
|
||||
// 关闭页面
|
||||
window.close();
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
|
||||
}
|
||||
});
|
||||
};
|
||||
//#endregion 顶部导航回调方法 ---------------------end
|
||||
|
|
@ -214,6 +237,22 @@ const form_data_transfor_diy_data = (clone_form: diyData) => {
|
|||
};
|
||||
}
|
||||
};
|
||||
|
||||
// 截取document.location.search字符串内id/后面的所有字段
|
||||
const get_id = () => {
|
||||
let new_id = '';
|
||||
if (document.location.search.indexOf('id/') !== -1) {
|
||||
new_id = document.location.search.substring(document.location.search.indexOf('id/') + 3);
|
||||
// 去除字符串的.html
|
||||
let html_index = new_id.indexOf('.html');
|
||||
if (html_index !== -1) {
|
||||
new_id = new_id.substring(0, html_index);
|
||||
}
|
||||
return new_id;
|
||||
} else {
|
||||
return new_id;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue