Merge branch 'dev-sws' into dev-yxl
于肖磊
commit
4e859f665d
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<drag :data="drag_list" :space-col="20" :is-show-edit="true" @remove="remove" @on-sort="on_sort" @edit="edit">
|
||||
<template #default="{ row, index }">
|
||||
<upload v-model="row.new_url" :limit="1" size="40" styles="2"></upload>
|
||||
<upload v-model="row.new_cover" :limit="1" size="40" styles="2"></upload>
|
||||
<el-image :src="row.data[imgParams]" fit="contain" class="img">
|
||||
<template #error>
|
||||
<div class="bg-f5 flex-row jc-c align-c radius h w">
|
||||
|
|
@ -60,10 +60,10 @@ const remove = (index: number) => {
|
|||
edit_index.value = -1;
|
||||
}
|
||||
emits('remove', index);
|
||||
}
|
||||
};
|
||||
const on_sort = (item: any) => {
|
||||
emits('onsort', item);
|
||||
}
|
||||
};
|
||||
const edit = (index: number) => {
|
||||
if (edit_index.value === index) {
|
||||
edit_close_processing(index);
|
||||
|
|
@ -72,31 +72,30 @@ const edit = (index: number) => {
|
|||
edit_index.value = index;
|
||||
edit_processing(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const double_click = (index: number) => {
|
||||
edit_index.value = index;
|
||||
edit_processing(index);
|
||||
}
|
||||
// new_tile === title new_tile清空，使用title字段，如果不一致，先办判断new_title !=='', 取new_title否则取title
|
||||
};
|
||||
// 编辑时的数据处理
|
||||
const edit_processing = (index: number) => {
|
||||
const list = drag_list.value[index];
|
||||
if (!isEmpty(list) && isEmpty(list.new_title)) {
|
||||
list.new_title = list.data.title;
|
||||
}
|
||||
}
|
||||
};
|
||||
//编辑关闭前的处理
|
||||
const edit_close_processing = (index: number) => {
|
||||
const list = drag_list.value[index];
|
||||
if (!isEmpty(list) && !isEmpty(list.new_title) && list.new_title === list.data.title) {
|
||||
list.new_title = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<div class="tabs flex-row oh">
|
||||
<template v-for="(item, index) in tabs.content.tabs_list" :key="index">
|
||||
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_style + (index == 0 ? ' active' : '')">
|
||||
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
|
||||
<template v-if="!isEmpty(item.img)">
|
||||
<image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
|
||||
</template>
|
||||
<div class="title" :style="index == 0 ? tabs_style_style.tabs_title_checked : tabs_style_style.tabs_title">{{ item.title }}</div>
|
||||
<div class="title" :style="index == 0 ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</div>
|
||||
<div class="desc">{{ item.desc }}</div>
|
||||
<icon name="checked-1" class="icon"></icon>
|
||||
<div class="bottom_line" :style="tabs_style_style.tabs_check"></div>
|
||||
<div class="bottom_line" :style="tabs_theme_style.tabs_check"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -27,22 +27,22 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
const tabs = ref(props.value);
|
||||
const tabs_style = computed(() => {
|
||||
let tabs_style = '';
|
||||
if (tabs.value.content.tabs_style == '1') {
|
||||
tabs_style = 'tabs-style-2';
|
||||
} else if (tabs.value.content.tabs_style == '2') {
|
||||
tabs_style = 'tabs-style-3';
|
||||
} else if (tabs.value.content.tabs_style == '3') {
|
||||
tabs_style = 'tabs-style-4';
|
||||
} else if (tabs.value.content.tabs_style == '4') {
|
||||
tabs_style = 'tabs-style-5';
|
||||
const tabs_theme = computed(() => {
|
||||
let tabs_theme = '';
|
||||
if (tabs.value.content.tabs_theme == '1') {
|
||||
tabs_theme = 'tabs-style-2';
|
||||
} else if (tabs.value.content.tabs_theme == '2') {
|
||||
tabs_theme = 'tabs-style-3';
|
||||
} else if (tabs.value.content.tabs_theme == '3') {
|
||||
tabs_theme = 'tabs-style-4';
|
||||
} else if (tabs.value.content.tabs_theme == '4') {
|
||||
tabs_theme = 'tabs-style-5';
|
||||
} else {
|
||||
tabs_style = 'tabs-style-1';
|
||||
tabs_theme = 'tabs-style-1';
|
||||
}
|
||||
return tabs_style;
|
||||
return tabs_theme;
|
||||
});
|
||||
const tabs_style_style = computed(() => {
|
||||
const tabs_theme_style = computed(() => {
|
||||
const new_gradient_params = {
|
||||
color_list: tabs.value.style.tabs_checked,
|
||||
direction: tabs.value.style.tabs_direction,
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div class="oh" :style="style_container">
|
||||
<div class="re" :style="style">
|
||||
<div class="flex-warp" :class="article_type_class" :style="article_spacing">
|
||||
<template v-for="(item, index) in article_list" :key="index">
|
||||
<div class="item gap-10 bg-f oh" :class="article_type == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
|
||||
<template v-if="item.new_url.length > 0">
|
||||
<image-empty v-model="item.new_url[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
|
||||
<div class="flex-warp" :class="article_theme_class" :style="article_spacing">
|
||||
<template v-for="(item, index) in data_list" :key="index">
|
||||
<div class="item gap-10 bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
|
||||
<template v-if="item.new_cover.length > 0">
|
||||
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image-empty v-model="item.link.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
|
||||
<image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
|
||||
</template>
|
||||
<div class="flex-col jc-sb flex-1" :style="article_type !== '0' ? content_padding : ''">
|
||||
<div class="title text-line-2" :style="article_name">{{ item.new_title }}</div>
|
||||
<div class="flex-col jc-sb flex-1" :style="article_theme !== '0' ? content_padding : ''">
|
||||
<div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
|
||||
<div class="flex-row jc-sb gap-8 align-e mt-10">
|
||||
<div :style="article_date">{{ is_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
|
||||
<icon v-show="is_show.includes('1')" name="eye" :style="article_page_view">16</icon>
|
||||
<div :style="article_date">{{ field_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
|
||||
<icon v-show="field_show.includes('1')" name="eye" :style="article_page_view">16</icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,24 +40,25 @@ const props = defineProps({
|
|||
const error_img = ref('width:50px;padding:10px;');
|
||||
const style = ref('');
|
||||
const style_container = ref('');
|
||||
interface linkObj {
|
||||
interface dataObj {
|
||||
cover?: string;
|
||||
title?: string;
|
||||
}
|
||||
interface ArticleList {
|
||||
id: number | string;
|
||||
link: linkObj;
|
||||
data: dataObj;
|
||||
new_title: string;
|
||||
new_url: uploadList[];
|
||||
new_cover: uploadList[];
|
||||
}
|
||||
const containerRef = ref<HTMLElement | null>(null);
|
||||
// 数据
|
||||
const article_list = ref<ArticleList[]>([]);
|
||||
const data_list = ref<ArticleList[]>([]);
|
||||
// 风格
|
||||
const article_type = ref('0');
|
||||
const article_theme = ref('0');
|
||||
// 是否显示
|
||||
const is_show = ref(['0', '1']);
|
||||
const field_show = ref(['0', '1']);
|
||||
// 是否显示封面图片
|
||||
const is_img_show = ref(true);
|
||||
const is_cover = ref(true);
|
||||
// 文章
|
||||
const article_name = ref('');
|
||||
// 日期
|
||||
|
|
@ -79,11 +80,11 @@ const article_item_width = ref('104');
|
|||
const article_item_height = ref('104');
|
||||
|
||||
const article_style = ref({});
|
||||
const default_article_list: ArticleList = {
|
||||
const default_data_list: ArticleList = {
|
||||
id: 0,
|
||||
link: {},
|
||||
data: {},
|
||||
new_title: '标题',
|
||||
new_url: [],
|
||||
new_cover: [],
|
||||
};
|
||||
watch(
|
||||
props.value,
|
||||
|
|
@ -91,20 +92,20 @@ watch(
|
|||
const new_content = newVal?.content;
|
||||
const new_style = newVal?.style;
|
||||
// 内容
|
||||
if (new_content.article_check === '0') {
|
||||
if (!isEmpty(new_content.article_list)) {
|
||||
article_list.value = new_content.article_list;
|
||||
article_list.value = cloneDeep(new_content.article_list);
|
||||
if (new_content.data_type === '0') {
|
||||
if (!isEmpty(new_content.data_list)) {
|
||||
data_list.value = new_content.data_list;
|
||||
data_list.value = cloneDeep(new_content.data_list);
|
||||
} else {
|
||||
article_list.value = Array(4).fill(default_article_list);
|
||||
data_list.value = Array(4).fill(default_data_list);
|
||||
}
|
||||
} else {
|
||||
get_auto_article_list(new_content);
|
||||
get_auto_data_list(new_content);
|
||||
}
|
||||
|
||||
article_type.value = new_content.article_style;
|
||||
is_show.value = new_content.is_show;
|
||||
is_img_show.value = new_content.is_img_show;
|
||||
article_theme.value = new_content.theme;
|
||||
field_show.value = new_content.field_show;
|
||||
is_cover.value = new_content.is_cover;
|
||||
// 样式
|
||||
article_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';';
|
||||
article_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';';
|
||||
|
|
@ -119,14 +120,14 @@ watch(
|
|||
article_spacing.value = `gap: ${new_style.article_spacing}px;`;
|
||||
// 文章样式
|
||||
article_style.value = content_radius.value + content_spacing.value;
|
||||
if (article_type.value == '0') {
|
||||
if (article_theme.value == '0') {
|
||||
article_style.value += content_padding.value;
|
||||
}
|
||||
if (article_type.value == '1') {
|
||||
if (article_theme.value == '1') {
|
||||
article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`;
|
||||
article_style.value += article_spacing_children.value;
|
||||
}
|
||||
if (article_type.value == '3') {
|
||||
if (article_theme.value == '3') {
|
||||
article_item_width.value = `${new_style.article_width}px`;
|
||||
article_item_height.value = `${new_style.article_height}px`;
|
||||
}
|
||||
|
|
@ -136,8 +137,8 @@ watch(
|
|||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
const article_type_class = computed(() => {
|
||||
switch (article_type.value) {
|
||||
const article_theme_class = computed(() => {
|
||||
switch (article_theme.value) {
|
||||
case '0':
|
||||
return 'style1 flex-col';
|
||||
case '1':
|
||||
|
|
@ -147,30 +148,30 @@ const article_type_class = computed(() => {
|
|||
case '3':
|
||||
return 'style4 flex-row';
|
||||
}
|
||||
return `style${article_type.value}`;
|
||||
return `style${article_theme.value}`;
|
||||
});
|
||||
const get_auto_article_list = async (new_content: any) => {
|
||||
const { article_category, number, sort, sort_rules } = new_content;
|
||||
const get_auto_data_list = async (new_content: any) => {
|
||||
const { category, number, sort, sort_rules } = new_content;
|
||||
const new_data = {
|
||||
article_keywords: '',
|
||||
article_category_ids: article_category.join(','),
|
||||
article_category_ids: category.join(','),
|
||||
article_order_by_type: sort,
|
||||
article_order_by_rule: sort_rules,
|
||||
article_number: number,
|
||||
};
|
||||
const res = await ArticleAPI.getAutoList(new_data);
|
||||
if (!isEmpty(res.data)) {
|
||||
article_list.value = [];
|
||||
data_list.value = [];
|
||||
res.data.forEach((child: any) => {
|
||||
article_list.value.push({
|
||||
data_list.value.push({
|
||||
id: get_math(),
|
||||
new_title: child.title,
|
||||
new_url: [],
|
||||
link: child,
|
||||
new_title: '',
|
||||
new_cover: [],
|
||||
data: child,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
article_list.value = Array(4).fill(default_article_list);
|
||||
data_list.value = Array(4).fill(default_data_list);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<card-container class="mb-8">
|
||||
<div class="mb-12">展示设置</div>
|
||||
<el-form-item label="选择风格">
|
||||
<el-radio-group v-model="form.article_style">
|
||||
<el-radio v-for="item in base_list.article_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
<el-radio-group v-model="form.theme">
|
||||
<el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
|
|
@ -13,19 +13,19 @@
|
|||
<card-container class="card-container-br">
|
||||
<div class="mb-12">文章设置</div>
|
||||
<el-form-item label="读取方式">
|
||||
<el-radio-group v-model="form.article_check">
|
||||
<el-radio v-for="item in base_list.get_data_method_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
<el-radio-group v-model="form.data_type">
|
||||
<el-radio v-for="item in base_list.data_type_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<template v-if="form.article_check === '0'">
|
||||
<template v-if="form.data_type === '0'">
|
||||
<div class="nav-list">
|
||||
<drag-group :list="form.article_list" img-params="cover" @onsort="article_list_sort" @remove="article_list_remove"></drag-group>
|
||||
<drag-group :list="form.data_list" img-params="cover" @onsort="data_list_sort" @remove="data_list_remove"></drag-group>
|
||||
<el-button class="mtb-20 w" @click="add">+添加</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="文章分类">
|
||||
<el-select v-model="form.article_category" multiple collapse-tags placeholder="请选择文章分类">
|
||||
<el-select v-model="form.category" multiple collapse-tags placeholder="请选择文章分类">
|
||||
<el-option v-for="item in base_list.article_category_list" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -43,15 +43,15 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="封面图片">
|
||||
<el-switch v-model="form.is_img_show" />
|
||||
<el-switch v-model="form.is_cover" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
<card-container>
|
||||
<div class="mb-12">列表设置</div>
|
||||
<el-form-item label="是否显示">
|
||||
<el-checkbox-group v-model="form.is_show">
|
||||
<el-checkbox v-for="item in base_list.list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
|
||||
<el-checkbox-group v-model="form.field_show">
|
||||
<el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
|
|
@ -73,13 +73,13 @@ const props = defineProps({
|
|||
});
|
||||
const form = reactive(props.value);
|
||||
const base_list = reactive({
|
||||
article_style_list: [
|
||||
theme_list: [
|
||||
{ name: '单列展示', value: '0' },
|
||||
{ name: '两列展示（纵向）', value: '1' },
|
||||
{ name: '大图展示', value: '2' },
|
||||
{ name: '左右滑动展示', value: '3' },
|
||||
],
|
||||
get_data_method_list: [
|
||||
data_type_list: [
|
||||
{ name: '选择文章', value: '0' },
|
||||
{ name: '筛选文章', value: '1' },
|
||||
],
|
||||
|
|
@ -93,7 +93,7 @@ const base_list = reactive({
|
|||
{ name: '降序（desc）', value: '0' },
|
||||
{ name: '升序（asc）', value: '1' },
|
||||
],
|
||||
list_show_list: [
|
||||
field_show_list: [
|
||||
{ name: '日期时间', value: '0' },
|
||||
{ name: '浏览量', value: '1' },
|
||||
],
|
||||
|
|
@ -119,11 +119,11 @@ const init = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const article_list_remove = (index: number) => {
|
||||
form.article_list.splice(index, 1);
|
||||
const data_list_remove = (index: number) => {
|
||||
form.data_list.splice(index, 1);
|
||||
};
|
||||
const article_list_sort = (item: any) => {
|
||||
form.article_list = item;
|
||||
const data_list_sort = (item: any) => {
|
||||
form.data_list = item;
|
||||
};
|
||||
const add = () => {
|
||||
url_value_dialog_visible.value = true;
|
||||
|
|
@ -132,11 +132,11 @@ const add = () => {
|
|||
const url_value_dialog_visible = ref(false);
|
||||
const url_value_dialog_call_back = (item: any[]) => {
|
||||
item.forEach((child: any) => {
|
||||
form.article_list.push({
|
||||
form.data_list.push({
|
||||
id: get_math(),
|
||||
new_title: child.title,
|
||||
new_url: [],
|
||||
link: child,
|
||||
new_title: '',
|
||||
new_cover: [],
|
||||
data: child,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,13 +21,16 @@ watch(
|
|||
(newVal, oldValue) => {
|
||||
const new_style = newVal?.style;
|
||||
let new_data = newVal;
|
||||
new_data.content.article_check = new_data.content.tabs_list[0].article_check;
|
||||
new_data.content.article_category = new_data.content.tabs_list[0].article_category;
|
||||
new_data.content.theme = new_data.content.article_theme;
|
||||
new_data.content.data_type = new_data.content.tabs_list[0].data_type;
|
||||
new_data.content.category = new_data.content.tabs_list[0].category;
|
||||
new_data.content.data_list = new_data.content.tabs_list[0].data_list;
|
||||
new_data.content.data_ids = new_data.content.tabs_list[0].data_ids;
|
||||
new_data.content.number = new_data.content.tabs_list[0].number;
|
||||
new_data.content.sort = new_data.content.tabs_list[0].sort;
|
||||
new_data.content.sort_rules = new_data.content.tabs_list[0].sort_rules;
|
||||
new_data.content.is_img_show = new_data.content.tabs_list[0].is_img_show;
|
||||
new_data.content.article_list = new_data.content.tabs_list[0].article_list;
|
||||
new_data.content.field_show = new_data.content.field_show;
|
||||
new_data.content.is_cover = new_data.content.tabs_list[0].is_cover;
|
||||
article_tabs.value = new_data;
|
||||
style_container.value += common_styles_computer(new_style.common_style);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@
|
|||
<card-container class="mb-8">
|
||||
<div class="mb-12">展示设置</div>
|
||||
<el-form-item label="选项卡风格">
|
||||
<el-radio-group v-model="form.tabs_style">
|
||||
<el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
<el-radio-group v-model="form.tabs_theme">
|
||||
<el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选项卡置顶">
|
||||
<el-switch v-model="form.tabs_top_up" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文章风格">
|
||||
<el-radio-group v-model="form.article_style">
|
||||
<el-radio v-for="item in base_list.article_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
<el-radio-group v-model="form.article_theme">
|
||||
<el-radio v-for="item in base_list.article_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
|
|
@ -31,19 +31,19 @@
|
|||
<el-input v-model="row.desc" placeholder="请输入简介" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="读取方式">
|
||||
<el-radio-group v-model="row.article_check">
|
||||
<el-radio v-for="item in base_list.get_data_method_list" :key="item.value + get_math()" :value="item.value">{{ item.name }}</el-radio>
|
||||
<el-radio-group v-model="row.data_type">
|
||||
<el-radio v-for="item in base_list.data_type_list" :key="item.value + get_math()" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<template v-if="row.article_check === '0'">
|
||||
<template v-if="row.data_type === '0'">
|
||||
<div class="nav-list">
|
||||
<drag-group :list="row.article_list" img-params="cover" @onsort="article_list_sort($event, index)" @remove="article_list_remove($event, index)"></drag-group>
|
||||
<drag-group :list="row.data_list" img-params="cover" @onsort="data_list_sort($event, index)" @remove="data_list_remove($event, index)"></drag-group>
|
||||
<el-button class="mtb-20 w" @click="article_add(index)">+添加</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="文章分类">
|
||||
<el-select v-model="row.article_category" multiple collapse-tags placeholder="请选择文章分类">
|
||||
<el-select v-model="row.category" multiple collapse-tags placeholder="请选择文章分类">
|
||||
<el-option v-for="item in base_list.article_category_list" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="封面图片">
|
||||
<el-switch v-model="row.is_img_show" />
|
||||
<el-switch v-model="row.is_cover" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -96,19 +96,19 @@ const props = defineProps({
|
|||
});
|
||||
const form = reactive(props.value);
|
||||
const base_list = reactive({
|
||||
tabs_style_list: [
|
||||
tabs_theme_list: [
|
||||
{ name: '样式一', value: '0' },
|
||||
{ name: '样式二', value: '1' },
|
||||
{ name: '样式三', value: '2' },
|
||||
{ name: '样式四', value: '3' },
|
||||
],
|
||||
article_style_list: [
|
||||
article_theme_list: [
|
||||
{ name: '单列展示', value: '0' },
|
||||
{ name: '两列展示（纵向）', value: '1' },
|
||||
{ name: '大图展示', value: '2' },
|
||||
{ name: '左右滑动展示', value: '3' },
|
||||
],
|
||||
get_data_method_list: [
|
||||
data_type_list: [
|
||||
{ name: '选择文章', value: '0' },
|
||||
{ name: '筛选文章', value: '1' },
|
||||
],
|
||||
|
|
@ -167,23 +167,23 @@ const tabs_add = () => {
|
|||
id: get_math(),
|
||||
title: '',
|
||||
desc: '',
|
||||
article_check: '0',
|
||||
article_type: [],
|
||||
data_type: '0',
|
||||
category: [],
|
||||
number: 4,
|
||||
sort: '0',
|
||||
sort_rules: '0',
|
||||
is_img_show: true,
|
||||
article_list: [],
|
||||
is_cover: true,
|
||||
data_list: [],
|
||||
});
|
||||
// emit('update:value', form);
|
||||
};
|
||||
|
||||
// 指定文章
|
||||
const article_list_remove = (index: number, article_index: number) => {
|
||||
form.tabs_list[article_index].article_list.splice(index, 1);
|
||||
const data_list_remove = (index: number, article_index: number) => {
|
||||
form.tabs_list[article_index].data_list.splice(index, 1);
|
||||
};
|
||||
const article_list_sort = (item: any, index: number) => {
|
||||
form.tabs_list[index].article_list = item;
|
||||
const data_list_sort = (item: any, index: number) => {
|
||||
form.tabs_list[index].data_list = item;
|
||||
};
|
||||
|
||||
const article_index = ref(0);
|
||||
|
|
@ -194,12 +194,11 @@ const article_add = (index: number) => {
|
|||
const url_value_dialog_call_back = (item: any[]) => {
|
||||
// console.log(item);
|
||||
item.forEach((child: any) => {
|
||||
form.tabs_list[article_index.value].article_list.push({
|
||||
form.tabs_list[article_index.value].data_list.push({
|
||||
id: get_math(),
|
||||
src: 'carousel',
|
||||
new_url: [],
|
||||
new_title: child.title,
|
||||
link: child,
|
||||
new_title: '',
|
||||
new_cover: [],
|
||||
data: child,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,10 +32,7 @@ const safe_conten = computed(() => DOMPurify.sanitize(content.value));
|
|||
.rich-text-content {
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
video {
|
||||
* {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<!-- 工具栏 -->
|
||||
<Toolbar id="toolbar-container" :editor="editor_ref" :default-config="toolbar_config" :mode="mode" />
|
||||
<!-- 编辑器 -->
|
||||
<Editor id="editor-container" v-model="form.html" class="editor" :default-config="editor_config" :mode="mode" @on-change="handle_change" @on-created="handle_created" />
|
||||
<Editor id="editor-container" ref="editorRef" v-model="form.html" class="editor" :default-config="editor_config" :mode="mode" @on-change="handle_change" @on-created="handle_created" />
|
||||
</div>
|
||||
<upload v-model:model-value="upload_list" v-model:visible-dialog="visibleDialog" :type="rich_upload_type" is-custom-dialog @update:model-value="upload_list_change"></upload>
|
||||
<upload v-model:model-value="upload_list" v-model:visible-dialog="visibleDialog" :type="rich_upload_type" :limit="1" is-custom-dialog @update:model-value="upload_list_change"></upload>
|
||||
</card-container>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -24,6 +24,7 @@ const props = defineProps({
|
|||
const form = reactive(props.value);
|
||||
|
||||
const mode = ref('default'); // 编辑器模式
|
||||
const editorRef = ref<HTMLElement | null>(null);
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editor_ref = shallowRef();
|
||||
// 插入光标位置
|
||||
|
|
@ -46,19 +47,19 @@ const editor_config = ref({
|
|||
uploadImage: {
|
||||
// 自定义选择图片
|
||||
customBrowseAndUpload(insertFn: InsertFnType) {
|
||||
upload_insert.value = insertFn;
|
||||
rich_upload_type.value = 'img';
|
||||
visibleDialog.value = true;
|
||||
cursor_position.value = editor_ref.value.selection;
|
||||
upload_insert.value = insertFn;
|
||||
},
|
||||
},
|
||||
uploadVideo: {
|
||||
// 自定义上传视频
|
||||
customBrowseAndUpload(insertFn: InsertFnType) {
|
||||
upload_insert.value = insertFn;
|
||||
rich_upload_type.value = 'video';
|
||||
visibleDialog.value = true;
|
||||
cursor_position.value = editor_ref.value.selection;
|
||||
upload_insert.value = insertFn;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -80,23 +81,15 @@ const upload_list_change = (arry: uploadList[]) => {
|
|||
arry.forEach((item: uploadList) => {
|
||||
const url = item.url;
|
||||
const alt = item.title;
|
||||
// if (rich_upload_type.value === 'img') {
|
||||
// new_html += `<img src="${url}" alt="${alt}" />`;
|
||||
// } else if (rich_upload_type.value === 'video') {
|
||||
// new_html += `<video src="${url}" />`;
|
||||
// }
|
||||
// 弹出框结束的时候触发添加事件
|
||||
upload_insert.value(url, alt);
|
||||
if (rich_upload_type.value == 'img') {
|
||||
upload_insert.value(url, alt);
|
||||
} else {
|
||||
upload_insert.value(url);
|
||||
}
|
||||
});
|
||||
// 弹出框结束之后清空数据
|
||||
upload_insert.value = null;
|
||||
// 插入图片或视频
|
||||
// if (editor.isDisabled()) editor.enable();
|
||||
// if (!editor.isFocused()) editor.focus();
|
||||
|
||||
// editor.select(cursor_position.value);
|
||||
// // editor.deleteFragment();
|
||||
// editor.dangerouslyInsertHtml(new_html);
|
||||
}
|
||||
upload_list.value = [];
|
||||
};
|
||||
|
|
@ -113,10 +106,7 @@ onBeforeUnmount(() => {
|
|||
position: relative;
|
||||
height: calc(100vh - 42.5rem) !important;
|
||||
overflow-y: hidden;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
video {
|
||||
* {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,21 +2,23 @@ import defaultCommon from './index';
|
|||
|
||||
interface ArticleList {
|
||||
id: number | string;
|
||||
link: object;
|
||||
data: object;
|
||||
new_title: string;
|
||||
new_url: uploadList[];
|
||||
new_cover: uploadList[];
|
||||
}
|
||||
interface DefaultArticleList {
|
||||
content: {
|
||||
article_style: string;
|
||||
article_check: string;
|
||||
article_category: string[];
|
||||
article_list: ArticleList[];
|
||||
// 风格
|
||||
theme: string;
|
||||
data_type: string;
|
||||
category: string[];
|
||||
data_list: ArticleList[];
|
||||
data_ids: string;
|
||||
number: number;
|
||||
sort: string;
|
||||
sort_rules: string;
|
||||
is_show: string[];
|
||||
is_img_show: boolean;
|
||||
field_show: string[];
|
||||
is_cover: boolean;
|
||||
};
|
||||
style: {
|
||||
name_weight: string;
|
||||
|
|
@ -40,15 +42,16 @@ interface DefaultArticleList {
|
|||
}
|
||||
const defaultArticleList: DefaultArticleList = {
|
||||
content: {
|
||||
article_style: '1',
|
||||
article_check: '0',
|
||||
article_list: [],
|
||||
article_category: [],
|
||||
theme: '1',
|
||||
data_type: '0',
|
||||
category: [],
|
||||
data_list: [],
|
||||
data_ids: '',
|
||||
number: 4,
|
||||
sort: '0',
|
||||
sort_rules: '0',
|
||||
is_show: ['0', '1'],
|
||||
is_img_show: true,
|
||||
field_show: ['0', '1'],
|
||||
is_cover: true,
|
||||
},
|
||||
style: {
|
||||
name_weight: '500',
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
import defaultCommon from './index';
|
||||
interface ArticleList {
|
||||
id: number;
|
||||
link: object;
|
||||
url: string;
|
||||
new_url: uploadList[];
|
||||
id: number | string;
|
||||
data: object;
|
||||
new_title: string;
|
||||
new_cover: uploadList[];
|
||||
}
|
||||
interface articleTabsList {
|
||||
id: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
article_check: string;
|
||||
article_category: string[];
|
||||
data_type: string;
|
||||
category: string[];
|
||||
number: number;
|
||||
sort: string;
|
||||
sort_rules: string;
|
||||
is_img_show: boolean;
|
||||
article_list: ArticleList[];
|
||||
is_cover: boolean;
|
||||
data_list: ArticleList[];
|
||||
}
|
||||
interface DefaultArticleTabs {
|
||||
content: {
|
||||
tabs_style: string;
|
||||
tabs_theme: string;
|
||||
tabs_top_up: boolean;
|
||||
article_style: string;
|
||||
article_theme: string;
|
||||
tabs_list: articleTabsList[];
|
||||
is_show: string[];
|
||||
field_show: string[];
|
||||
};
|
||||
style: {
|
||||
tabs_checked: color_list[];
|
||||
|
|
@ -55,18 +55,18 @@ interface DefaultArticleTabs {
|
|||
}
|
||||
const defaultArticleTabs: DefaultArticleTabs = {
|
||||
content: {
|
||||
tabs_style: '0',
|
||||
tabs_theme: '0',
|
||||
tabs_top_up: true,
|
||||
article_style: '0',
|
||||
article_theme: '0',
|
||||
tabs_list: [
|
||||
{ id: '1', title: '热门推荐', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
|
||||
{ id: '2', title: '测试一', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
|
||||
{ id: '3', title: '测试二', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
|
||||
{ id: '4', title: '测试三', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
|
||||
{ id: '5', title: '测试四', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
|
||||
{ id: '6', title: '测试五', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
|
||||
{ id: '1', title: '热门推荐', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
|
||||
{ id: '2', title: '测试一', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
|
||||
{ id: '3', title: '测试二', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
|
||||
{ id: '4', title: '测试三', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
|
||||
{ id: '5', title: '测试四', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
|
||||
{ id: '6', title: '测试五', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
|
||||
],
|
||||
is_show: ['0', '1'],
|
||||
field_show: ['0', '1'],
|
||||
},
|
||||
style: {
|
||||
tabs_checked: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue