新增列表数据显示

master
于肖磊 2026-02-27 17:11:10 +08:00
parent 12df80ee88
commit 53ce11ad83
5 changed files with 211 additions and 23 deletions

View File

@ -4,7 +4,7 @@ class PluginsVideoAPI {
/** 博客自动数据 */
static getAutoList(data: any) {
return api_request({
url: `plugins/index/pluginsname/pluginsVideo/pluginscontrol/diypluginsVideo/pluginsaction/autopluginsVideolist`,
url: `plugins/index/pluginsname/video/pluginscontrol/diyvideo/pluginsaction/autovideolist`,
method: 'post',
data,
});

View File

@ -63,7 +63,7 @@
<el-radio v-for="item in common_store.common.article_order_by_type_list" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
</template>
<template v-else-if="type === 'plugins_video'">
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'video.search_order_by_list')" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'video.search_order_by_list')" :key="item.type" :value="item.type">{{ item.name }}</el-radio>
</template>
<template v-else>
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'blog.order_by_type_list')" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
@ -80,12 +80,12 @@
<template v-else>
<el-form-item label="发布时间">
<el-radio-group v-model="form.order_by_release_time_rule">
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'video.search_release_time_list')" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'video.search_release_time_list')" :key="item.type" :value="item.type">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="视频时长">
<el-radio-group v-model="form.order_by_duration_rule">
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'video.search_duration_list')" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'video.search_duration_list')" :key="item.type" :value="item.type">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</template>
@ -324,6 +324,11 @@
imgParam: 'cover',
titleParam: 'title',
},
plugins_video: {
optionListKey: 'data_type_list',
imgParam: 'cover',
titleParam: 'title',
},
article: {
optionListKey: 'data_type_list',
imgParam: 'cover',
@ -365,12 +370,7 @@
optionListKey: 'brand_data_type_list',
imgParam: 'logo',
titleParam: 'title',
},
plugins_video: {
optionListKey: 'brand_data_type_list',
imgParam: '',
titleParam: 'title',
},
}
};
type config_type = {
optionListKey: string,

View File

@ -1,7 +1,7 @@
<template>
<div :class="props.direction == 'vertical' ? 'flex-col gap-x-18' : 'flex-1 flex-row gap-y-20 jc-e'">
<template v-for="(item, index) in props.filterData" :key="index">
<div v-if="!isEmpty(item.form_name) && !isEmpty(new_dataInterface) && !isEmpty(item.type)" class="filter-style flex-row gap-12 align-c">
<div v-if="!isEmpty(item.form_name) && !isEmpty(new_dataInterface) && !isEmpty(item.type)" :class="['filter-style flex-row gap-12', { 'align-c': item.type !=='radio' }]">
<div v-if="!isEmpty(item.title)" :class="['title', props.direction == 'vertical' ? '' : 'horizontal-title']" :style="`width: ${ Number(props.titleWidth) > 0 ? props.titleWidth + 'px;' : '100%' }`">{{ item.title }}</div>
<div class="w h flex-1 vertical-style">
<div class="flex-row align-c gap-10 w h">

View File

@ -0,0 +1,188 @@
<template>
<!-- 商品分类 -->
<div class="container">
<div class="flex-row jc-e gap-20 mb-20 align-c">
<el-select v-model="category_ids" class="search-w" placeholder="请选择博客分类" filterable clearable @change="handle_search">
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-select v-model="category_ids" class="search-w" placeholder="请选择排序类型" filterable clearable @change="handle_search">
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-select v-model="category_ids" class="search-w" placeholder="请选择发布时间" filterable clearable @change="handle_search">
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-select v-model="category_ids" class="search-w" placeholder="请选择视频时长" filterable clearable @change="handle_search">
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
<template #suffix>
<icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
</template>
</el-input>
</div>
<div class="content">
<el-table v-loading="loading" :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click" @select="handle_select" @select-all="handle_select">
<el-table-column v-if="multiple" type="selection" width="60" />
<el-table-column v-else label="#" width="60" type="">
<template #default="scope">
<el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="80" type="" />
<el-table-column prop="cover" label="博客">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>
</el-table-column>
<template #empty>
<no-data :text="empty_text"></no-data>
</template>
</el-table>
<div class="mt-10 flex-row jc-e">
<el-pagination :current-page="page" background :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import UrlValueAPI from '@/api/url-value';
import { commonStore } from '@/store';
import { get_data_list } from '@/utils';
const common_store = commonStore();
const props = defineProps({
//
reset: {
type: Boolean,
default: () => false,
},
multiple: {
type: Boolean,
default: () => false,
},
//
selectIsUrl: {
type: Boolean,
default: false,
},
});
watch(
() => props.reset,
(val) => {
if (val) {
init();
}
}
);
onMounted(() => {
init();
});
const modelValue = defineModel({ type: Object, default: {} });
const tableData = ref<pageLinkList[]>([]);
const search_value = ref('');
const loading = ref(false);
const init = () => {
template_selection.value = '';
category_ids.value = '';
search_value.value = '';
article_category_list.value = get_data_list(common_store.common.plugins, 'blog.category_list');
get_list(1);
};
const handle_search = () => {
get_list(1);
};
const category_ids = ref('');
interface articleCategory {
id: string;
name: string;
url: string;
}
const article_category_list = ref<articleCategory[]>([]);
const template_selection = ref('');
//#region -----------------------------------------------start
//
const page = ref(1);
//
const page_size = ref(10);
//
const data_total = ref(0);
const empty_text = ref('暂无数据');
//
const get_list = (new_page: number) => {
let new_data = {
page: new_page,
keywords: search_value.value,
category_ids: category_ids.value,
page_size: page_size.value,
};
loading.value = true;
UrlValueAPI.getblogList(new_data).then((res: any) => {
tableData.value = res.data.data_list;
if (res.data.data_list.length === 0) {
empty_text.value = '暂无数据';
}
data_total.value = res.data.data_total;
page.value = res.data.page;
setTimeout(() => {
loading.value = false;
}, 500);
}).catch((err) => {
tableData.value = [];
data_total.value = 0;
page.value = 1;
empty_text.value = err;
loading.value = false;
});
};
//#region -----------------------------------------------end
const row_click = (row: any) => {
if (!props.multiple) {
const new_table_data = JSON.parse(JSON.stringify(tableData.value));
template_selection.value = new_table_data.findIndex((item: pageLinkList) => item.id == row.id).toString();
if (props.selectIsUrl) {
const page = '/pages/plugins/blog/detail/detail?id=' + row.id;
const new_row = {
id: row.id,
name: row.name || row.title || page,
page: page,
};
modelValue.value = [new_row];
} else {
modelValue.value = [row];
}
}
};
const handle_select = (selection: any) => {
if (props.selectIsUrl) {
// selection
const new_selection = selection.map((item: any) => {
const page = '/pages/plugins/blog/detail/detail?id=' + item.id;
return {
id: item.id,
name: item.name || item.title || page,
page: page,
};
});
modelValue.value = new_selection;
} else {
modelValue.value = selection;
}
};
</script>
<style lang="scss" scoped>
.container {
.search-w {
width: 22.5rem;
}
.content {
:deep(.el-table__inner-wrapper:before) {
background-color: transparent;
}
.img {
width: 3.6rem;
}
}
}
</style>

View File

@ -81,7 +81,7 @@
import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer, box_shadow_computer, border_computer } from '@/utils';
import { old_radius, old_padding, old_margin } from "@/utils/common";
import { isEmpty, cloneDeep } from 'lodash';
import pluginsVideoAPI from '@/api/pluginsVideo';
import pluginsVideoAPI from '@/api/plugins-video';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
const modules = [Autoplay];
@ -157,16 +157,16 @@ const new_content = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
//
const get_auto_data_list = async () => {
const { category_ids, number, order_by_type, order_by_rule, is_cover, keywords, is_recommended, is_hot } = new_content.value;
const { category_ids, number, order_by_type, order_by_duration_rule, order_by_release_time_rule, keywords, is_recommended, is_hot } = new_content.value;
const new_data = {
plugins_video_keywords: keywords,
plugins_video_category_ids: category_ids.join(','),
plugins_video_order_by_type: order_by_type,
plugins_video_order_by_rule: order_by_rule,
plugins_video_number: number,
plugins_video_is_cover: is_cover,
plugins_video_is_recommended: is_recommended,
plugins_video_is_hot: is_hot,
video_keywords: keywords,
video_category_ids: category_ids.join(','),
video_order_by: order_by_type,
video_release_time: order_by_release_time_rule,
video_duration: order_by_duration_rule,
video_number: number,
video_is_recommended: is_recommended,
video_is_hot: is_hot,
};
const res = await pluginsVideoAPI.getAutoList(new_data);
new_content.value.data_auto_list = [];
@ -209,8 +209,8 @@ onMounted(() => {
});
// new_content
const data_list_computer = computed(() => {
const { data_type, category_ids, number, order_by_type, order_by_rule, is_cover, data_list, keywords, is_recommended, is_hot } = new_content.value;
return { data_type, category_ids, number, order_by_type, order_by_rule, is_cover, data_list, keywords, is_recommended, is_hot };
const { data_type, category_ids, number, order_by_type, order_by_release_time_rule, order_by_duration_rule, is_cover, data_list, keywords, is_recommended, is_hot } = new_content.value;
return { data_type, category_ids, number, order_by_type, order_by_release_time_rule, order_by_duration_rule, is_cover, data_list, keywords, is_recommended, is_hot };
});
// new_content
watch(