feat(items): 完善道具管理功能，增加类型选择、图标上传和有效期配置

- 添加主类型和子类型的下拉选择功能
- 实现道具图标上传和预览功能
- 增加有效期配置包括永久、固定天数和指定时间
- 添加是否赠送开关配置
- 优化表格展示包括道具ID、主子类型和有效期信息
- 实现类型联动选择和数据验证
- 添加图片上传状态管理和预览功能

src/api/system/business/items/types.ts

@@ -28,6 +28,7 @@ export interface ItemsVO {
    *
    */
   updatedAt: string;
+  itemUrl: string;
 
   itemsPrizeList?: ItemsPrize[];
 }
@@ -71,6 +72,22 @@ export interface ItemsForm extends BaseEntity {
   itemTypeCode?: string;
 
   itemsPrizeList?: ItemsPrize[];
+
+  giftTypeParentId?: string | number;
+
+  giftTypeChildId?: string | number;
+
+  itemCount?: number;
+
+  effectiveType?: number;
+
+  effectiveDay?: number;
+
+  expireTime?: string;
+
+  isGiveAway?: number;
+
+  itemUrl?: string;
 }
 export interface ItemsPrize {
   ranking: number;

src/api/system/business/type/index.ts

@@ -71,3 +71,13 @@ export const selectGiftTypeParentList = (): AxiosPromise<TypeVO> => {
     method: 'get'
   });
 };
+/**
+ * 查询父级下面的子类
+ * @param id
+ */
+export const selectGiftTypeChildList = (id: string | number): AxiosPromise<TypeVO> => {
+  return request({
+    url: '/business/type/selectGiftTypeChildList/' + id,
+    method: 'get'
+  });
+};

src/views/system/business/items/index.vue

@@ -46,11 +46,21 @@
 
       <el-table v-loading="loading" border :data="itemsList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="" align="center" prop="id" v-if="false" />
+        <el-table-column label="道具ID" align="center" prop="id" v-if="true" />
+        <el-table-column label="主类型" align="center" prop="giftTypeParentName" />
+        <el-table-column label="子类型" align="center" prop="giftTypeChildName" />
         <el-table-column label="道具名称" align="center" prop="name" />
         <el-table-column label="类型值" align="center" prop="itemType" />
         <el-table-column label="积分值" align="center" prop="itemValue" />
         <el-table-column label="道具描述" align="center" prop="itemDesc" />
+        <el-table-column label="有效期" align="center">
+          <template #default="scope">
+            <span v-if="+scope.row.effectiveType === 0">永久</span>
+            <span v-else-if="[1, 3].includes(+scope.row.effectiveType)">{{ scope.row.expireTime }}</span>
+            <span v-else-if="+scope.row.effectiveType === 2">{{ scope.row.effectiveDay }}天</span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
@@ -68,29 +78,102 @@
     <!-- 添加或修改道具对话框 disabled-->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="itemsFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="主类型" prop="giftTypeParentId">
+          <el-select v-model="form.giftTypeParentId" placeholder="请选择" clearable filterable @change="onParentChange">
+            <el-option v-for="item in itemOptionsGiftList" :key="item.id" :label="item.label" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="子类型" prop="giftTypeChildId">
+          <el-select v-model="form.giftTypeChildId" placeholder="请选择" clearable filterable @change="onParentChildChange">
+            <el-option v-for="item in itemOptionsChildList" :key="item.id" :label="item.label" :value="item.id" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="道具名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入道具名称" />
         </el-form-item>
-
-        <el-form-item label="道具类型" prop="gameType">
-          <el-select aria-required="true" v-model="form.itemTypeCode" placeholder="请选择">
-            <el-option v-for="dict in tools_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+        <!-- 在现有表单项中添加图片上传 -->
+        <el-form-item label="道具图标" prop="itemUrl">
+          <div class="upload-container">
+            <el-upload
+              class="upload-icon"
+              action="#"
+              :on-change="handleIconChange"
+              :on-remove="handleIconRemove"
+              :file-list="iconFileList"
+              :auto-upload="false"
+              accept="image/*"
+              :disabled="dialog.mode === 'view'"
+            >
+              <template #trigger>
+                <el-button type="primary" :disabled="dialog.mode === 'view'">点击选择图标</el-button>
+              </template>
+
+              <!-- 预览图区域 -->
+              <template #default>
+                <div class="preview-area" @click="handlePreviewClick">
+                  <!-- 只有当 iconPreviewUrl 或 itemUrl 存在时才显示 img -->
+                  <img
+                    v-if="iconPreviewUrl || form.itemUrl"
+                    :src="iconPreviewUrl || form.itemUrl"
+                    alt="预览图"
+                    style="max-width: 100px; max-height: 100px; margin-top: 10px; cursor: pointer"
+                  />
+                  <!-- 可选：无图时显示提示文字 -->
+                  <div v-else style="margin-top: 10px; color: #999">暂无图片</div>
+                </div>
+              </template>
+
+              <template #tip>
+                <div class="el-upload__tip">
+                  <span v-if="iconFileList.length > 0">当前已选文件：{{ iconFileList[0].name }}</span>
+                </div>
+              </template>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item label="价值" prop="itemValue">
+          <el-input v-model="form.itemValue" placeholder="请输入价值" />
+        </el-form-item>
+        <el-form-item label="描述" prop="itemDesc">
+          <el-input v-model="form.itemDesc" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="数量" prop="itemValue">
+          <el-input v-model="form.itemCount" placeholder="请输入数量" />
+        </el-form-item>
+        <el-form-item label="有效时间" prop="gameType">
+          <el-select aria-required="true" v-model="form.effectiveType" placeholder="请选择">
+            <el-option v-for="dict in effective_tools_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
-
-        <el-form-item label="类型值" prop="itemType">
-          <el-input v-model="form.itemType" placeholder="请输入类型值" />
+        <el-form-item label="有效天数" prop="itemValue" v-if="form.effectiveType === '2'">
+          <el-input v-model="form.effectiveDay" placeholder="请输入有效天数" />
         </el-form-item>
 
-        <el-form-item label="积分值" prop="itemValue" v-if="form.itemTypeCode !== '2'">
-          <el-input v-model="form.itemValue" placeholder="请输入积分值" />
+        <el-form-item label="过期时间" prop="expireTime" v-if="[1, 3].includes(Number(form.effectiveType))">
+          <el-date-picker
+            v-model="form.expireTime"
+            type="datetime"
+            placeholder="选择过期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
         </el-form-item>
-
-        <el-form-item label="道具描述" prop="itemDesc" v-if="form.itemTypeCode !== '2'">
-          <el-input v-model="form.itemDesc" type="textarea" placeholder="请输入内容" />
+        <el-form-item label="是否赠送" prop="isGiveAway">
+          <el-switch v-model="form.isGiveAway" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" />
         </el-form-item>
 
-        <el-form-item label="道具详情" v-if="form.itemTypeCode !== '1'">
+        <!-- 除了服务包 为 2  其他 为 1
+        <el-form-item label="道具类型" prop="gameType">
+          <el-select aria-required="true" v-model="form.itemTypeCode" placeholder="请选择">
+            <el-option v-for="dict in tools_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>-->
+
+        <!--        <el-form-item label="类型值" prop="itemType">
+          <el-input v-model="form.itemType" placeholder="请输入类型值" />
+        </el-form-item>-->
+        <!-- 是服务包的话加上这个 -->
+        <el-form-item label="道具详情" v-if="form.itemTypeCode === '2'">
           <div v-for="(reward, index) in formPrize.rewards" :key="index" style="display: flex; align-items: center; margin-bottom: 8px">
             <span>第{{ reward.ranking }}个</span>
 
@@ -124,8 +207,10 @@ import { ItemsVO, ItemsQuery, ItemsForm } from '@/api/system/business/items/type
 // ✅ 引入 parseTime
 import { parseTime } from '@/utils/dateUtils';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { tournaments_type, tools_type } = toRefs<any>(proxy?.useDict('tournaments_type', 'tools_type'));
+const { effective_tools_type, tools_type } = toRefs<any>(proxy?.useDict('effective_tools_type', 'tools_type'));
 import { selectItemsSelList } from '@/api/system/business/items';
+import { uploadTournament } from '@/api/system/business/tournaments';
+import { selectGiftTypeChildList, selectGiftTypeParentList, getType } from '@/api/system/business/type';
 const itemsList = ref<ItemsVO[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);
@@ -167,6 +252,8 @@ const data = reactive<PageData<ItemsForm, ItemsQuery>>({
   },
   rules: {
     name: [{ required: true, message: '道具名称不能为空', trigger: 'blur' }],
+    giftTypeParentId: [{ required: true, message: '不能为空', trigger: 'blur' }],
+    /* giftTypeChildId: [{ required: true, message: '不能为空', trigger: 'blur' }],*/
     itemType: [{ required: true, message: '道具类型不能为空', trigger: 'change' }]
   }
 });
@@ -194,6 +281,8 @@ const getList = async () => {
 /** 取消按钮 */
 const cancel = () => {
   reset();
+  iconFileList.value = [];
+  iconPreviewUrl.value = '';
   dialog.visible = false;
 };
 
@@ -226,6 +315,9 @@ const handleSelectionChange = (selection: ItemsVO[]) => {
 const handleAdd = () => {
   reset();
   resetFormPrize();
+  // 新增时清空图片状态
+  iconPreviewUrl.value = '';
+  iconFileList.value = [];
   dialog.visible = true;
   dialog.title = '添加道具';
 };
@@ -254,6 +346,22 @@ const handleUpdate = async (row?: ItemsVO) => {
       }
     ];
   }
+  // 处理图片上传状态 - 保留已有图片
+  if (res.data.itemUrl) {
+    // 如果有现有图片，初始化文件列表
+    iconPreviewUrl.value = res.data.itemUrl;
+    iconFileList.value = [
+      {
+        name: '图片',
+        url: res.data.itemUrl,
+        status: 'success'
+      }
+    ];
+  } else {
+    // 没有现有图片，清空状态
+    iconPreviewUrl.value = '';
+    iconFileList.value = [];
+  }
   dialog.visible = true;
   dialog.title = '修改道具';
 };
@@ -284,9 +392,7 @@ const submitForm = () => {
         }
 
         // 检查是否有数量为0或负数的情况
-        const invalidQuantity = validRewards.some(
-          (reward) => Number(reward.quantity) <= 0
-        );
+        const invalidQuantity = validRewards.some((reward) => Number(reward.quantity) <= 0);
 
         if (invalidQuantity) {
           ElMessage.error('道具数量必须大于0');
@@ -401,5 +507,164 @@ const resetFormPrize = () => {
 onMounted(() => {
   loadItemOptions();
   getList();
+  loadCategoryOptions();
 });
+
+/** 加载父级选项 */
+const itemOptionsGiftList = ref<{ id: number; label: string }[]>([]);
+const loadCategoryOptions = async () => {
+  try {
+    const res = await selectGiftTypeParentList();
+    if (res.code === 200) {
+      const data = res.data as unknown as { id: number; name: string }[];
+      itemOptionsGiftList.value = data.map((item) => ({
+        id: item.id,
+        label: item.name
+      }));
+    }
+  } catch (error) {
+    console.error('加载父级选项失败:', error);
+  }
+};
+// 在文件顶部导入 nextTick
+const itemOptionsChildList = ref<{ id: number; label: string }[]>([]);
+// 主类型变更时加载子类型
+const onParentChange = async (parentId: number | string | null) => {
+  if (!parentId) {
+    itemOptionsChildList.value = [];
+    return;
+  }
+
+  try {
+    const res = await selectGiftTypeChildList(parentId); // ✅ 传入 parentId
+    if (res.code === 200) {
+      const data = res.data as unknown as { id: number; name: string }[];
+      itemOptionsChildList.value = data.map((item) => ({
+        id: item.id,
+        label: item.name
+      }));
+      // 检查是否为服务包子类型
+      const res2 = await getType(parentId);
+      if (res2.code === 200) {
+        // ✅ data2 是单个对象，不是数组！
+        const data2 = res2.data as unknown as { id: number; name: string; typeCode?: string };
+
+        // ✅ 直接访问 typeCode 字段（注意字段名是 typeCode，不是 type_code）
+        if (data2.typeCode === 'combo_package') {
+          debugger;
+          form.value.itemTypeCode = '2'; // 设置为服务包类型
+          await nextTick();
+        } else {
+          form.value.itemTypeCode = '1'; // 默认设置为普通类型
+          await nextTick();
+        }
+      }
+    }
+    //是否是服务包 如果他的 type_code = combo_package
+  } catch (error) {
+    console.error('加载子类型失败:', error);
+    ElMessage.error('加载子类型失败');
+  }
+};
+const onParentChildChange = async (parentId: number | string | null) => {
+  try {
+    // 检查是否为服务包子类型
+    const res2 = await getType(parentId);
+    if (res2.code === 200) {
+      // ✅ data2 是单个对象，不是数组！
+      const data2 = res2.data as unknown as { id: number; name: string; typeValue?: string };
+      form.value.itemType = data2.typeValue;
+    }
+    //是否是服务包 如果他的 type_code = combo_package
+  } catch (error) {
+    console.error('加载失败:', error);
+    ElMessage.error('加载失败');
+  }
+};
+// 添加图片上传相关响应式变量
+const iconPreviewUrl = ref('');
+const iconFileList = ref([]);
+
+// 图片上传处理函数
+const handleIconChange = async (file) => {
+  const index = iconFileList.value.findIndex((f) => f.uid === file.uid);
+  iconFileList.value = [];
+
+  if (file.raw) {
+    iconPreviewUrl.value = URL.createObjectURL(file.raw);
+  }
+
+  if (index === -1) {
+    // 如果文件不在列表中，则添加进去
+    iconFileList.value.push(file);
+  }
+
+  try {
+    const rawFile = file.raw;
+    // 使用 tournament 的上传接口
+    const res = await uploadTournament(rawFile); // 修改为使用 tournament 上传接口
+    if (res.code === 200) {
+      // 更新文件状态为成功
+      iconFileList.value[index] = {
+        ...file,
+        status: 'success',
+        response: res.data.url
+      };
+      form.value.itemUrl = iconFileList.value[index].response;
+      iconPreviewUrl.value = iconFileList.value[index].response;
+      ElMessage.success('上传成功');
+    } else {
+      throw new Error(res.msg);
+    }
+  } catch (error) {
+    // 更新文件状态为失败
+    iconFileList.value[index] = {
+      ...file,
+      status: 'fail',
+      error: '上传失败'
+    };
+    ElMessage.error('上传失败，请重试');
+  }
+};
+// 删除文件处理函数
+const handleIconRemove = (file, updatedFileList) => {
+  iconFileList.value = updatedFileList;
+  // 清除预览图和临时链接
+  iconPreviewUrl.value = '';
+  form.value.itemUrl = null;
+};
+
+// 点击预览图触发放大
+const handlePreviewClick = () => {
+  const currentSrc = iconPreviewUrl.value || form.value.itemUrl;
+  if (currentSrc) {
+    // 如果需要预览功能，可以打开预览对话框
+    openPreview(currentSrc);
+  }
+};
+
+// 预览弹窗相关
+const dialogVisible = ref(false);
+const previewSrc = ref('');
+
+function openPreview(src: string) {
+  previewSrc.value = src;
+  dialogVisible.value = true;
+}
 </script>
+<style scoped>
+.upload-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.preview-area {
+  cursor: pointer;
+}
+
+.upload-icon .el-upload {
+  width: auto;
+  height: auto;
+}
+</style>