|
|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="dialogVisible = true">选择轮播组</el-button>
|
|
|
+ <div v-if="showSelected && selectedGroup" class="selected-group">
|
|
|
+ <el-tag closable @close="removeGroup" style="margin: 2px">
|
|
|
+ {{ selectedGroup.name }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="选择轮播组" v-model="dialogVisible" width="900px" append-to-body>
|
|
|
+ <el-form :inline="true" :model="queryParams" class="mb-2">
|
|
|
+ <el-form-item label="名称">
|
|
|
+ <el-input v-model="queryParams.itemName" placeholder="轮播组名称" clearable style="width: 180px"
|
|
|
+ @keyup.enter="getCarouselList" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="getCarouselList">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table v-loading="dialogLoading" :data="carouselList" @row-click="handleRowClick" highlight-current-row>
|
|
|
+ <el-table-column width="50">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-checkbox v-model="row.selected" @click.stop @change="handleSelectChange(row)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="轮播组名称" min-width="150" />
|
|
|
+ <el-table-column prop="itemCount" label="轮播项数量" width="100" />
|
|
|
+ <el-table-column prop="duration" label="轮播间隔(秒)" width="120" />
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="180" />
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
|
+ v-model:limit="queryParams.pageSize" @pagination="getCarouselList" />
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmSelect">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, watch, defineProps, defineEmits, nextTick } from 'vue';
|
|
|
+import { listItem } from '@/api/smsb/source/item';
|
|
|
+import type { ItemVO, ItemQuery } from '@/api/smsb/source/item_type';
|
|
|
+
|
|
|
+export interface CarouselGroup {
|
|
|
+ id: string | number;
|
|
|
+ name: string;
|
|
|
+ itemCount: number;
|
|
|
+ duration: number;
|
|
|
+ createTime: string;
|
|
|
+ items: any[];
|
|
|
+ selected?: boolean;
|
|
|
+ [key: string]: any; // Allow additional properties
|
|
|
+}
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ modelValue: string;
|
|
|
+ showSelected?: boolean;
|
|
|
+}>();
|
|
|
+
|
|
|
+const emit = defineEmits(['update:modelValue']);
|
|
|
+
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const dialogLoading = ref(false);
|
|
|
+const carouselList = ref<CarouselGroup[]>([]);
|
|
|
+const total = ref(0);
|
|
|
+const currentRow = ref<CarouselGroup | null>(null);
|
|
|
+const selectedGroup = ref<CarouselGroup | null>(null);
|
|
|
+
|
|
|
+// 定义查询参数类型
|
|
|
+interface CarouselQuery extends ItemQuery {
|
|
|
+ pageNum: number;
|
|
|
+ pageSize: number;
|
|
|
+ itemName: string;
|
|
|
+ itemType: number;
|
|
|
+}
|
|
|
+
|
|
|
+const queryParams = ref<CarouselQuery>({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ itemName: '',
|
|
|
+ itemType: 1 // 1表示轮播组类型
|
|
|
+});
|
|
|
+
|
|
|
+// 初始化时，如果有值，反序列化
|
|
|
+watch(
|
|
|
+ () => props.modelValue,
|
|
|
+ (val) => {
|
|
|
+ if (val) {
|
|
|
+ try {
|
|
|
+ // 使用 JSON.parse 的 reviver 函数确保大数 ID 保持为字符串
|
|
|
+ const parsedValue = JSON.parse(val, (key, value) => {
|
|
|
+ // 如果键是 id，确保它作为字符串返回
|
|
|
+ if (key === 'id' && value !== null && value !== undefined) {
|
|
|
+ return String(value);
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 确保 id 是字符串
|
|
|
+ const id = parsedValue.id ? String(parsedValue.id) : '';
|
|
|
+
|
|
|
+ selectedGroup.value = {
|
|
|
+ id: id,
|
|
|
+ name: String(parsedValue.name || ''),
|
|
|
+ itemCount: Number(parsedValue.itemCount) || 0,
|
|
|
+ duration: Number(parsedValue.duration) || 5,
|
|
|
+ createTime: String(parsedValue.createTime || ''),
|
|
|
+ items: Array.isArray(parsedValue.items) ? parsedValue.items : []
|
|
|
+ };
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Error parsing modelValue:', error);
|
|
|
+ selectedGroup.value = null;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ selectedGroup.value = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+);
|
|
|
+
|
|
|
+// 查询轮播组列表
|
|
|
+const getCarouselList = async () => {
|
|
|
+ dialogLoading.value = true;
|
|
|
+ try {
|
|
|
+ // 构建查询参数，确保类型安全
|
|
|
+ const query: ItemQuery = {
|
|
|
+ itemName: queryParams.value.itemName,
|
|
|
+ itemType: 1, // 1表示轮播组类型
|
|
|
+ pageNum: queryParams.value.pageNum,
|
|
|
+ pageSize: queryParams.value.pageSize
|
|
|
+ };
|
|
|
+
|
|
|
+ const res = await listItem(query);
|
|
|
+
|
|
|
+ // 转换数据格式，并标记已选中的项，确保 ID 是字符串
|
|
|
+ carouselList.value = (res.rows || []).map((item: ItemVO) => {
|
|
|
+ // 确保 ID 是字符串，避免大数精度问题
|
|
|
+ const itemId = item.id ? String(item.id) : '';
|
|
|
+ const isSelected = selectedGroup.value?.id === itemId;
|
|
|
+
|
|
|
+ return {
|
|
|
+ id: itemId,
|
|
|
+ name: item.itemName || '',
|
|
|
+ itemName: item.itemName || '', // 保持与API返回的字段名一致
|
|
|
+ itemCount: item.sourceNum || 0,
|
|
|
+ duration: 5, // 默认5秒，可以根据实际需求调整
|
|
|
+ createTime: item.createTime || '',
|
|
|
+ selected: isSelected,
|
|
|
+ items: [] // 不需要在UI中显示，仅用于内部处理
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ // 如果当前有选中的组，确保它在列表中也被选中
|
|
|
+ if (selectedGroup.value?.id) {
|
|
|
+ const selectedItem = carouselList.value.find((item) => item.id === selectedGroup.value?.id);
|
|
|
+ if (selectedItem) {
|
|
|
+ selectedItem.selected = true;
|
|
|
+ currentRow.value = selectedItem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ total.value = res.total || 0;
|
|
|
+ } finally {
|
|
|
+ dialogLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 行点击
|
|
|
+const handleRowClick = (row: CarouselGroup) => {
|
|
|
+ currentRow.value = row;
|
|
|
+};
|
|
|
+
|
|
|
+// 处理选择变化
|
|
|
+const handleSelectChange = (row: CarouselGroup) => {
|
|
|
+ if (row.selected) {
|
|
|
+ // 只允许单选，取消其他项
|
|
|
+ carouselList.value.forEach((item) => {
|
|
|
+ if (item !== row) item.selected = false;
|
|
|
+ });
|
|
|
+ currentRow.value = row;
|
|
|
+ } else {
|
|
|
+ // 当前项取消选中
|
|
|
+ currentRow.value = null;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 选择轮播组
|
|
|
+const selectGroup = (row: CarouselGroup) => {
|
|
|
+ row.selected = true;
|
|
|
+ handleSelectChange(row);
|
|
|
+ confirmSelect();
|
|
|
+};
|
|
|
+
|
|
|
+// 移除已选轮播组
|
|
|
+const removeGroup = () => {
|
|
|
+ selectedGroup.value = null;
|
|
|
+ emit('update:modelValue', '');
|
|
|
+};
|
|
|
+
|
|
|
+// 确认选择
|
|
|
+const confirmSelect = () => {
|
|
|
+ console.log('confirmSelect called, currentRow:', currentRow.value);
|
|
|
+
|
|
|
+ if (!currentRow.value) {
|
|
|
+ // 无选中项，清除选中
|
|
|
+ console.log('No row selected, clearing selection');
|
|
|
+ selectedGroup.value = null;
|
|
|
+ emit('update:modelValue', '');
|
|
|
+ dialogVisible.value = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 保持ID为字符串，避免精度丢失
|
|
|
+ const id = String(currentRow.value.id);
|
|
|
+ console.log('Selected group ID (as string):', id, 'Type:', typeof id);
|
|
|
+
|
|
|
+ if (!id) {
|
|
|
+ console.error('Invalid group ID:', currentRow.value.id);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 只存储 id 和 name 字段，确保id是字符串
|
|
|
+ const selectedData = {
|
|
|
+ id: id, // 已经是字符串
|
|
|
+ name: String(currentRow.value.name || '') // 确保name是字符串
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log('Emitting selected data:', selectedData);
|
|
|
+ selectedGroup.value = selectedData;
|
|
|
+
|
|
|
+ // 更新所有行的选中状态
|
|
|
+ carouselList.value.forEach((item) => {
|
|
|
+ item.selected = String(item.id) === id; // 确保比较时类型一致
|
|
|
+ });
|
|
|
+
|
|
|
+ emit('update:modelValue', JSON.stringify(selectedData));
|
|
|
+ dialogVisible.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+// 弹窗首次打开时自动加载
|
|
|
+watch(dialogVisible, (val) => {
|
|
|
+ if (val) getCarouselList();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.selected-group {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+</style>
|
Shinohara Haruna