@@ -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 = '';
}
-}
+};
\ No newline at end of file
+
diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index c50952ce..497079d4 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -1,17 +1,17 @@
-
+
-
{{ item.title }}
+
{{ item.title }}
{{ item.desc }}
-
+
@@ -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,
diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index 2b82abef..ad7d5c32 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -1,20 +1,20 @@
-
-
-
-
-
+
+
+
+
+
-
+
-
-
{{ item.new_title }}
+
+
{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}
-
{{ is_show.includes('0') ? '2020-06-05 15:20' : '' }}
-
16
+
{{ field_show.includes('0') ? '2020-06-05 15:20' : '' }}
+
16
@@ -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
(null);
// 数据
-const article_list = ref([]);
+const data_list = ref([]);
// 风格
-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);
}
};
diff --git a/src/components/model-article-list/model-article-list-content.vue b/src/components/model-article-list/model-article-list-content.vue
index 8ca59970..77d01ea6 100644
--- a/src/components/model-article-list/model-article-list-content.vue
+++ b/src/components/model-article-list/model-article-list-content.vue
@@ -4,8 +4,8 @@
展示设置
-
- {{ item.name }}
+
+ {{ item.name }}
@@ -13,19 +13,19 @@
文章设置
-
- {{ item.name }}
+
+ {{ item.name }}
-
+
-
+
+添加
-
+
@@ -43,15 +43,15 @@
-
+
列表设置
-
- {{ item.name }}
+
+ {{ item.name }}
@@ -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,
});
});
};
diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index daad17cd..25e30508 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -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);
},
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index 8f3d5ae0..b561fa93 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -4,16 +4,16 @@
展示设置
-
- {{ item.name }}
+
+ {{ item.name }}
-
- {{ item.name }}
+
+ {{ item.name }}
@@ -31,19 +31,19 @@
-
- {{ item.name }}
+
+ {{ item.name }}
-
+
-
+
+添加
-
+
@@ -61,7 +61,7 @@
-
+
@@ -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,
});
});
};
diff --git a/src/layout/components/main/default/article-list.ts b/src/layout/components/main/default/article-list.ts
index 72318fb8..1214f3dd 100644
--- a/src/layout/components/main/default/article-list.ts
+++ b/src/layout/components/main/default/article-list.ts
@@ -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',
diff --git a/src/layout/components/main/default/article-tabs.ts b/src/layout/components/main/default/article-tabs.ts
index 1dde4aa3..762ded78 100644
--- a/src/layout/components/main/default/article-tabs.ts
+++ b/src/layout/components/main/default/article-tabs.ts
@@ -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: [