登陆+合并+添加等级必填（ts的提示错误忽略不影响）

activitylink/src/api/manage/activity.js

@@ -65,11 +65,12 @@ export function showsetDetail(activityId){
   })
 }
 
-// export function showaddDetail(activityId,stock,addTotal){
+// 更新后用的
+// export function showsetDetail(data){
 //   return request({
-//     url: '/admin/funding/addDateVirtual',
+//     url: '/admin/funding/getDate',
 //     method: 'post',
-//     params: { activityId,stock,addTotal }
+//     data
 //   })
 // }
 

activitylink/src/api/manage/gift.js

@@ -1,17 +1,161 @@
 import request from '@/utils/request'
 
-// export function deleteUser(id) {
-//   return request({
-//     url: '/admin/prize/update',
-//     method: 'post',
-//     params: { id }
-//   })
-// }
+//奖品新增
+export function addPrize(data) {
+  return request({
+    url: '/admin/prize/add',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
 
-export function getGiftList(pageNum,pageSize) { 
+// 奖品删除
+export function deletePrize(id) {
   return request({
-    url: '/admin/prize/list',
+    url: '/admin/prize/delete',
     method: 'post',
     params: { pageNum,pageSize }
   })
-}
+}
+//奖品分页查询
+export function getPrizeList(params) {
+  return request({
+    url: '/admin/prize/list',
+    method: 'post',
+    params: params
+  })
+}
+// 根据id查询奖品
+export function getprizebyid(params) {
+  return request({
+    url: '/admin/prize/detail',
+    method: 'post',
+    params: params
+  })
+}
+// 修改奖品
+export function updatePrize(data) {
+  return request({
+    url: '/admin/prize/update',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 查询普通用户
+export function getUserList(data) {
+  return request({
+    url: '/admin/user/list',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 普通用户新增
+export function addUser(data) {
+  return request({
+    url: '/admin/user/add',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 普通用户删除
+export function deleteUser(id) {
+  return request({
+    url: '/admin/user/delete',
+    method: 'post',
+    params: { id },
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 普通用户批量删除
+export function deleteUsers(ids) {
+  return request({
+    url: '/admin/user/delete/batch',
+    method: 'post',
+    params: { ids }
+  })
+}
+// 内定用户查全部
+export function getFixUserList(data) {
+  return request({
+    url: '/admin/user/list/fix',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 内定用户删除
+export function deleteFixUser(id) {
+  return request({
+    url: '/admin/user/delete/fix',
+    method: 'post',
+    params: { id },
+    headers:{
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 内定用户新增
+export function addFixUser(data) {
+  return request({
+    url: '/admin/prize/addFixUser',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 内定用户批量删除
+export function deleteFixUsers(ids) {
+  return request({
+    url: '/admin/user/delete/fix/batch',
+    method: 'post',
+    params: { ids },
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 导入用户
+export const importUsers = (file) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  return request({
+    url: '/admin/user/import',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+};
+// 导入内定用户
+export const importFixUsers = (file,gradeId) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('gradeId',gradeId);
+  return request({
+    url: '/admin/user/import/fix',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+};

activitylink/src/api/manage/level.js

@@ -1,30 +1,60 @@
 
 import request from '@/utils/request'
-
-export function deleteLevel() {
+// 等级查询
+export function getLevelList(params) {
+  return request({
+    url: '/admin/grade/list',
+    method: 'post',
+    params: params
+  })
+}
+// 等级新增
+export function addLevel(data) {
+  return request({
+    url: '/admin/grade/add',
+    method: 'post',
+    data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 删除等级
+export function deleteGrade(id) {
   return request({
     url: '/admin/grade/delete',
     method: 'post',
- 
+    params: { id }
   })
 }
-
-
-export function getLevelList(pageNum,pageSize){
+// 根据id查询等级
+// export function getgradedetails(params) {
+//   return request({
+//     url: '/admin/grade/details',
+//     method: 'post',
+//     params: params
+//   })
+// }
+// 修改等级
+export function updateGrade(data) {
   return request({
-    url: '/admin/grade/list',
+    url: '/admin/grade/update',
     method: 'post',
-    params: {
-      pageNum,
-      pageSize
+    data,
+    headers: {
+      'Content-Type': 'application/json'
     }
   })
 }
-
-export function addLevel(data) {
+// 等级名下拉框，礼品新增那边
+export function getGradeNameList() {
   return request({
-    url: '/admin/grade/add',
+    url: '/admin/grade/allGradeName',
     method: 'post',
-    data
+    headers: {
+      'Content-Type': 'application/json'
+    }
   })
-}
+}
+
+

activitylink/src/views/homePage.vue

@@ -26,27 +26,25 @@ const username = ref("");
 const password = ref("");
 // username.value=='90038794' && password.value=='697522'写死的账号密码
 const loginHandler = async () => {
-  // try {
-  //   const response = await adminlogin({
-  //     username: username.value,
-  //     password: password.value
-  //   })
-    router.push('/zhongchou/mainimg')
-    // 假设后端返回 code == 200 表示成功
-//     if (response.code ) {
-//       const token = response.code
-
-// // ✅ 保存 token 到 localStorage
-//       localStorage.setItem('token', token)
-//       ElMessage.success('登录成功，欢迎您使用本系统')
-//       router.push('/zhongchou/mainimg')
-//     } else {
-//       ElMessage.error(response.message || '登录失败，请检查用户名或密码')
-//     }
-  // } catch (error) {
-  //   ElMessage.error('登录失败，请稍后再试')
-  //   console.error('登录错误:', error)
-  // }
+  try {
+    const response = await adminlogin({
+      username: username.value,
+      password: password.value
+    })
+    // router.push('/zhongchou/mainimg')
+    if (response.code === 200 ) {
+      const token = response.data.token
+      // console.log(token)
+      localStorage.setItem('token', token)
+      ElMessage.success('登录成功，欢迎您使用本系统')
+      router.push('/zhongchou/mainimg')
+    } else {
+      ElMessage.error(response.message || '登录失败，请检查用户名或密码')
+    }
+  } catch (error) {
+    ElMessage.error('登录失败，请稍后再试')
+    console.error('登录错误:', error)
+  }
 }
 </script>
 <style scoped>

activitylink/src/views/zhongchou/activity/index.vue

@@ -77,7 +77,7 @@
           align-center
           @closed="cancel"
         >
-          <el-form ref="addForm" :model="activity" label-width="80px">
+          <el-form ref="addForm" :model="activity" :rules="rules" label-width="80px">
             <el-form-item label="活动名称" prop="activityName">
               <el-input v-model="activity.activityName" placeholder="请输入活动名称" />
             </el-form-item>
@@ -113,7 +113,7 @@
             <el-form-item label="开始时间" prop="startTime">
               <el-date-picker
                 v-model="activity.startTime"
-                type="datetime"
+                type="date"
                 placeholder="请选择开始时间"
                 value-format="YYYY-MM-DD"
                 format="YYYY-MM-DD"
@@ -125,7 +125,7 @@
             <el-form-item label="结束时间" prop="endTime">
               <el-date-picker
                 v-model="activity.endTime"
-                type="datetime"
+                type="date"
                 placeholder="请选择结束时间"
                 value-format="YYYY-MM-DD"
                 format="YYYY-MM-DD"
@@ -204,6 +204,7 @@ const fetchMarketList = async () => {
 // 取消添加
 const cancel = () => {
   centerDialogVisible.value = false;
+  addForm.value.resetFields();
   resetForm();
 };
 
@@ -222,31 +223,49 @@ const addActivityShow = () => {
 };
 
 // 添加活动
+const addForm = ref(); // 定义 addForm ref
+
 const addActivity = async () => {
   try {
+    const valid = await new Promise((resolve, reject) => {
+      addForm.value.validate(valid => {
+        if (valid) {
+          resolve(true);
+        } else {
+          resolve(false);
+        }
+      });
+    });
+
+    if (!valid) {
+      ElMessage.warning('请填写完整表单');
+      return;
+    }
+
+    // 表单验证通过，继续提交逻辑
     const activityData = {
       activityName: activity.value.activityName,
       marketOne: activity.value.marketOne,
       marketTwo: activity.value.marketTwo,
-      status: Number(activity.value.status), // 确保是数字
+      status: Number(activity.value.status),
       startTime: activity.value.startTime,
       endTime: activity.value.endTime
     }
 
-    const response = await addActivityandtime(activityData)
+    const response = await addActivityandtime(activityData);
 
     if (response.code === 200) {
-      ElMessage.success('活动添加成功')
-      centerDialogVisible.value = false
-      fetchActivityList() // 刷新列表
+      ElMessage.success('活动添加成功');
+      centerDialogVisible.value = false;
+      fetchActivityList();
     } else {
-      ElMessage.error(response.message || '活动添加失败')
+      ElMessage.error(response.message || '活动添加失败');
     }
   } catch (error) {
-    console.error('添加活动失败:', error)
-    ElMessage.error('请求失败，请重试')
+    console.error('添加活动失败:', error);
+    ElMessage.error('请求失败，请重试');
   }
-}
+};
 
 // 删除相关
 const deleteConfirmVisible = ref(false)
@@ -292,6 +311,28 @@ const activity = ref({
   endTime: ''
 })
 
+// 验证规则
+const rules = {
+  activityName: [
+    { required: true, message: '请输入活动名称', trigger: 'blur' }
+  ],
+  marketOne: [
+    { required: true, message: '请选择市场一', trigger: 'change' }
+  ],
+  marketTwo: [
+    { required: true, message: '请选择市场二', trigger: 'change' }
+  ],
+  status: [
+    { required: true, message: '请选择活动状态', trigger: 'change' }
+  ],
+  startTime: [
+    { required: true, message: '请选择开始时间', trigger: 'change' }
+  ],
+  endTime: [
+    { required: true, message: '请选择结束时间', trigger: 'change' }
+  ]
+}
+
 // 分页配置
 const currentPage = ref(1);
 const pageSize = ref(10); // 每页显示 10 条
@@ -314,6 +355,7 @@ const handleCurrentChange = (val) => {
 
 // 跳转详情页方法
 const goToDetail = (row) => {
+  activityStone.setselectedactivityId(row.id);
   router.push({ name: 'activityDetail' });
 };
 

activitylink/src/views/zhongchou/activity/set/index.vue

@@ -128,6 +128,45 @@ const fetchData = async () => {
   }
 };
 
+//获取数据更新版
+// const fetchData = async () => {
+//   try {
+//     // ✅ 修改传参方式为对象
+//     const response = await showsetDetail({ activityId: activityStone.selectactivityId });
+//     const data = response.data;
+//     // ✅ 取出两个市场数据
+//     const marketList = data.data;
+//     // ✅ 先清空数据，防止上次数据残留
+//     if (marketList && marketList.length >= 2) {
+//       const marketOneData = marketList[0];
+//       const marketTwoData = marketList[1];
+//       // 市场一赋值
+//       marketOne.value = marketOneData.market;
+//       showOne.value = marketOneData.show;
+//       markerOneTotal.value = marketOneData.markerTotal;
+//       marketOneId.value = marketOneData.marketId;
+//       // 市场二赋值
+//       marketTwo.value = marketTwoData.market;
+//       showTwo.value = marketTwoData.show;
+//       markerTwoTotal.value = marketTwoData.markerTotal;
+//       marketTwoId.value = marketTwoData.marketId;
+//     }
+//     // 初始时间赋值
+//     initialData.value = data.time;
+// 设置市场名称用于显示
+//     marketOneName.value = marketList[0]?.market || '';
+//     marketTwoName.value = marketList[1]?.market || '';
+//   } catch (error) {
+//     console.error('获取数据失败:', error);
+//     ElMessage.error('获取数据失败，请重试');
+//   }
+// };
+
+
+
+
+
+
 // 组件挂载时获取数据
 onMounted(() => {
   fetchData();

activitylink/src/views/zhongchou/gift/importFixedList/index.vue

@@ -1,279 +1,278 @@
 <template>
-    <el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh;">
-      <!-- 头部标题区域 -->
-      <template #header>
-        <div style="display: flex; align-items: center; justify-content: space-between;">
-          <span style="font-size: 18px; font-weight: bold;">导入内定名单--{{ giftStore.fixedGiftName }}</span>
-          
-          <el-button type="primary" @click="goBack">
-            <i class="el-icon-back"></i> 返回
-        </el-button>
-        </div>
-
-      </template>
-  
-      <!-- 搜索和操作区域 -->
-      <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
-            <!-- 左侧搜索区域 -->
-            <div style="display: flex; gap: 10px; align-items: center;">
-                <span style="white-space: nowrap;">姓名：</span>
-                <el-input 
-                v-model="searchData.name" 
-                placeholder="请输入姓名" 
-                style="width: 150px;" 
-                clearable
-                ></el-input>
-                
-                <span style="white-space: nowrap; margin-left: 10px;">精网号：</span>
-                <el-input 
-                v-model="searchData.jingwangId" 
-                placeholder="请输入精网号" 
-                style="width: 180px;" 
-                clearable
-                @input="handleJingwangIdInput"
-                ></el-input>
-                <el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button>
-            </div>
-    
-            <!-- 右侧操作按钮区域 -->
-                <div style="display: flex; gap: 10px;">
-                    <el-button type="primary" @click="addUser">添加用户</el-button>
-                    <el-button type="success" @click="importExcel">导入Excel</el-button>
-                </div>
+  <div style="margin-bottom:30px">
+    <el-button type="primary" @click="goBack" style="margin-right:20px">返回</el-button>
+    <span style="font-size: 1.5em; font-weight: bold;">导入内定用户--{{ prizeName }}</span>
+  </div>
+  <el-card style="min-height: 90vh; max-height: 90vh;">
+    <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
+      <div style="display: flex; gap: 10px; align-items: center;">
+        姓名：<el-input v-model="searchObj.username" placeholder="请输入姓名" style="width: 150px;" clearable></el-input>
+        精网号：<el-input v-model="searchObj.jwcode" placeholder="请输入精网号" style="width: 180px;" clearable
+          @input="trimJwcode"></el-input>
+        <el-button type="primary" @click="getFixUsers" style="margin-left: 10px;">搜索</el-button>
+      </div>
+      <div style="display: flex; gap: 10px;">
+        <el-button type="primary" @click="openAdd">添加用户</el-button>
+        <el-button type="success" @click="handleImportClick">导入Excel</el-button>
+        <input type="file" ref="fileInput" style="display: none" accept=".xlsx,.xls" @change="handleFileChange" />
+      </div>
+    </div>
+    <!-- 用户表格 -->
+    <el-table :data="tableData" style="width: 100%;" :row-style="{ height: '60px' }"
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="200" />
+      <el-table-column type="index" label="ID" width="250">
+        <template #default="scope">
+          {{ pagination.pageSize * (pagination.pageNum - 1) + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="username" label="姓名" width="250" />
+      <el-table-column prop="jwcode" label="精网号" width="300" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button text size="small" type="danger" @click="delUser(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 底部操作区域 -->
+    <div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
+      <el-button type="danger" @click="batchDelete">批量删除</el-button>
+      <!-- 分页 -->
+      <el-pagination class="pagination" v-model:current-page="pagination.pageNum"
+        v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
     </div>
-  
-      <!-- 用户表格 -->
-      <el-table :data="filteredUsers" style="width: 100%;" :row-style="{ height: '60px' }">
-        <el-table-column type="selection" width="200" />
-        <el-table-column prop="id" label="ID" width="250" />
-        <el-table-column prop="name" label="姓名" width="250" />
-        <el-table-column prop="jingwangId" label="精网号" width="300" />
-        <el-table-column label="操作" >
-          <template #default="scope">
-            <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-  
-      <!-- 底部操作区域 -->
-      <div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
-        <el-button type="danger" @click="batchDelete">批量删除</el-button>
-        <div style="display: flex; align-items: center;">
-          <span style="margin-right: 15px;">共{{ total }}条</span>
-          <el-select v-model="pageSize" style="width: 120px; margin-right: 15px;">
-            <el-option label="10条/页" :value="10" />
-            <el-option label="20条/页" :value="20" />
-            <el-option label="50条/页" :value="50" />
-          </el-select>
-          <el-pagination
-            layout="prev, pager, next"
-            :total="total"
-            :page-size="pageSize"
-            v-model:current-page="currentPage"
-          />
-          <el-input 
-            v-model="jumpPage" 
-            style="width: 80px; margin-left: 15px; margin-right: 10px;" 
-            placeholder="页码"
-          />
-          <el-button type="primary" @click="goToPage">前往</el-button>
-        </div>
+  </el-card>
+  <el-dialog v-model="addVisible" title="添加用户" width="500" align-center>
+    <el-form :model="addObj" label-width="80px">
+      <el-form-item label="姓名" prop="username">
+        <el-input v-model="addObj.username" placeholder="请输入用户姓名" />
+      </el-form-item>
+      <el-form-item label="精网号" prop="jwcode">
+        <el-input v-model="addObj.jwcode" placeholder="请输入精网号" @input="trimAddJwcode" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="addVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitAdd">
+          确定
+        </el-button>
       </div>
-    </el-card>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { usegiftFixedListStone } from '@/stone/giftFixedListStone';
+import { getFixUserList, addFixUser, deleteFixUser, deleteFixUsers } from '@/api/manage/gift'
+// 导入
+import { importFixUsers } from '@/api/manage/gift'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
-        <el-dialog
-            v-model="centerDialogVisible"
-            title="添加用户"
-            width="500"
-            align-center
-          >
-          <el-form ref="addForm" :model="winuser" label-width="80px">
-            <el-form-item label="姓名" prop="name">
-              <el-input v-model="winuser.name" placeholder="请输入中奖用户姓名" />
-            </el-form-item>
-            <el-form-item label="精网号" prop="jingwangId">
-              <el-input v-model="winuser.jingwangId" placeholder="请输入中奖用户精网号" @input="handleJingwangIdInput"/>
-            </el-form-item>
-          </el-form>
-          <template #footer>
-              <div class="dialog-footer">
-                <el-button @click="cancel">取消</el-button>
-                <el-button type="primary" @click="addwinUser">
-                  确定
-                </el-button>
-              </div>
-            </template>
-          </el-dialog>
-  </template>
-  
-  <script setup>
-  import { ref, computed } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { usegiftFixedListStone } from '@/stone/giftFixedListStone';
+const giftStore = usegiftFixedListStone();
+const router = useRouter()
+const route = useRoute()
+const prizeName = ref(route.query.prizeName || '未知奖品')
+const gradeId = ref(route.query.gradeId || '')
 
-  const giftStore = usegiftFixedListStone();
-  const router = useRouter()
-  const centerDialogVisible = ref(false)
-  // 用户数据
-  const users = ref([
-    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },
-])
-  
-  // 搜索文本
-  const searchData = ref({
-    name: '',
-    jingwangId: ''
-  })
-  // 分页相关
-  const currentPage = ref(1)
-  const pageSize = ref(10)
-  const jumpPage = ref('')
-  const total = computed(() => users.value.length)
-  
-  // 过滤后的用户数据
-  const filteredUsers = computed(() => {
-    // 实际项目中这里会有搜索过滤逻辑
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    return users.value.slice(start, end)
-  })
-  
-const search = () => {
-    // 搜索逻辑
-    console.log('执行搜索')
+const selectedIds = ref([])
+const addObj = ref({
+  username: '',
+  jwcode: '',
+  gradeId: gradeId.value
+})
+const addVisible = ref(false)
+const tableData = ref([])
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
+})
+const searchObj = ref({
+  username: '',
+  jwcode: '',
+})
+const fileInput = ref(null)
+const handleImportClick = () => {
+  if (!gradeId.value) {
+    ElMessage.error('获取等级信息失败，无法导入')// 后端校验了，也写一个吧
+    return
   }
+  fileInput.value.click()
+}
 
-  const winuser=ref({
-    name: '',
-    jingwangId: '',
-  })
-
-  // 删除用户
-  const deleteUser = (user) => {
-    const index = users.value.findIndex(u => u.id === user.id)
-    if (index !== -1) {
-      users.value.splice(index, 1)
-    }
-  }
-  
-  // 批量删除
-  const batchDelete = () => {
-    // 实际项目中这里会有批量删除逻辑
-    console.log('执行批量删除')
+// 处理选择的文件
+const handleFileChange = async (e) => {
+  const file = e.target.files[0]
+  if (!file) return
+  const fileName = file.name
+  if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
+    ElMessage.error('仅支持Excel文件(.xlsx, .xls)')
+    e.target.value = ''
+    return
   }
-  
-  //添加用户
-  const addUser = () => {
-    // 实际添加用户逻辑
-    centerDialogVisible.value = true
+  try {
+    const res = await importFixUsers(file, gradeId.value)
+    if (res.code === 200) {
+      ElMessage.success(res.data || '导入成功')
+      getFixUsers()
+    } else {
+      ElMessage.error(res.message || '导入失败')
+    }
+  } catch (error) {
+    console.error('导入请求失败:', error)
+    ElMessage.error('网络错误，导入失败请重试')
   }
-
-  //取消添加
-const cancel = () => {
-  centerDialogVisible.value = false
-  winuser.value ={
-  name: '',
-  jingwangId: ''
-}
+  e.target.value = ''
 }
-//添加活动
-const addwinUser = () => {
-  centerDialogVisible.value = false
-  //TODO: 添加活动逻辑
-  winuser.value ={
-  name: '',
-  jingwangId: ''
+// 查全部
+const getFixUsers = async () => {
+  try {
+    const res = await getFixUserList({
+      username: searchObj.value.username,
+      jwcode: searchObj.value.jwcode,
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize,
+      gradeId: gradeId.value
+    })
+
+    if (res.code === 200) {
+      tableData.value = res.data.list
+      pagination.value.total = res.data.total
+    } else {
+      ElMessage.error(res.message || '获取数据失败')
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+    ElMessage.error('请求失败，请重试')
+  }
 }
+
+// 添加弹框
+const openAdd = () => {
+  addObj.value = {
+    username: '',
+    jwcode: '',
+    gradeId: gradeId.value
+  }
+  addVisible.value = true
 }
-  
-  // 导入Excel
-  const importExcel = () => {
-    // 实际导入逻辑
-    console.log('导入Excel')
+// 新增
+const submitAdd = async () => {
+  if (!addObj.value.username || !addObj.value.jwcode) {
+    ElMessage.error('请填写完整信息')
+    return
   }
-  
-  // 跳转到指定页
-  const goToPage = () => {
-    const page = parseInt(jumpPage.value)
-    if (!isNaN(page) && page > 0 && page <= Math.ceil(total.value / pageSize.value)) {
-      currentPage.value = page
+  try {
+    const response = await addFixUser(addObj.value)
+    if (response.code === 200) {
+      ElMessage.success('添加成功')
+      addVisible.value = false
+      getFixUsers()
+    } else {
+      ElMessage.error(response.message || '添加失败')
     }
-    jumpPage.value = ''
+  } catch (error) {
+    console.error('添加失败:', error)
+    ElMessage.error('添加失败，请重试')
   }
+}
 
-  const handleJingwangIdInput = (value) => {
-    searchData.value.jingwangId = value.replace(/\D/g, '')
+// 删单个
+const delUser = (row) => {
+  ElMessageBox.confirm('确定要删除该用户吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const response = await deleteFixUser(row.id)
+      if (response.code === 200) {
+        ElMessage.success('删除成功')
+        getFixUsers()
+      } else {
+        ElMessage.error(response.message || '删除失败')
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error('删除失败，请重试')
     }
+  }).catch(() => {
+    ElMessage.info('已取消删除')
+  })
+}
 
-    // 返回上一页
-    const goBack = () => {
-    router.back()
-    }
-  </script>
-  
-  <style scoped>
-  .el-card {
-    border-radius: 8px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  }
-  
-  .el-table {
-    margin-top: 10px;
-  }
-  
-  .el-pagination {
-    margin: 0;
+// 批量删除
+const batchDelete = async () => {
+  if (selectedIds.value.length === 0) {
+    ElMessage.warning('请先选择需要删除的用户')
+    return
   }
-  </style>
+  ElMessageBox.confirm(`确定要删除选中的${selectedIds.value.length}条数据吗？`,
+    '删除确认',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  ).then(async () => {
+    try {
+      const response = await deleteFixUsers(selectedIds.value.join(','))
+      if (response.code === 200) {
+        ElMessage.success('批量删除成功')
+        getFixUsers()
+        selectedIds.value = []
+      } else {
+        ElMessage.error(response.message || '批量删除失败')
+      }
+    } catch (error) {
+      console.error('批量删除请求失败:', error)
+      ElMessage.error('网络错误，批量删除失败')
+    }
+  }).catch(() => {
+    ElMessage.info('已取消批量删除')
+  })
+}
+const handleSelectionChange = (selection) => {
+  selectedIds.value = selection.map(row => row.id)
+}
+const trimJwcode = (value) => {
+  searchObj.value.jwcode = value.replace(/\D/g, '')
+}
+const trimAddJwcode = (value) => {
+  addObj.value.jwcode = value.replace(/\D/g, '')
+}
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val
+  pagination.value.pageNum = 1
+  getFixUsers()
+}
+const handleCurrentChange = (val) => {
+  pagination.value.pageNum = val
+  getFixUsers()
+}
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+onMounted(() => {
+  getFixUsers()
+})
+</script>
+<style scoped>
+.el-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.el-table {
+  margin-top: 10px;
+}
+
+.el-pagination {
+  margin: 0;
+}
+</style>

activitylink/src/views/zhongchou/gift/importuser/index.vue

@@ -1,275 +1,259 @@
 <template>
-    <el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh;">
-      <!-- 头部标题区域 -->
-      <template #header>
-        <div style="display: flex; align-items: center; justify-content: space-between;">
-          <span style="font-size: 18px; font-weight: bold;">导入抽奖用户</span>
-
-          <el-button type="primary" @click="goBack">
-            <i class="el-icon-back"></i> 返回
-        </el-button>
-        </div>
-      </template>
-  
-      <!-- 搜索和操作区域 -->
-      <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
-            <!-- 左侧搜索区域 -->
-            <div style="display: flex; gap: 10px; align-items: center;">
-                <span style="white-space: nowrap;">姓名：</span>
-                <el-input 
-                v-model="searchData.name" 
-                placeholder="请输入姓名" 
-                style="width: 150px;" 
-                clearable
-                ></el-input>
-                
-                <span style="white-space: nowrap; margin-left: 10px;">精网号：</span>
-                <el-input 
-                v-model="searchData.jingwangId" 
-                placeholder="请输入精网号" 
-                style="width: 180px;" 
-                clearable
-                @input="handleJingwangIdInput"
-                ></el-input>
-                <el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button>
-            </div>
-    
-            <!-- 右侧操作按钮区域 -->
-                <div style="display: flex; gap: 10px;">
-                    <el-button type="primary" @click="addUser">添加用户</el-button>
-                    <el-button type="success" @click="importExcel">导入Excel</el-button>
-                </div>
+  <div style="margin-bottom:30px">
+    <el-button type="primary" @click="goBack" style="margin-right:20px">返回</el-button>
+    <span style="font-size: 1.5em; font-weight: bold;">导入抽奖用户</span>
+  </div>
+  <el-card style="min-height: 90vh; max-height: 90vh;">
+    <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
+      <div style="display: flex; gap: 10px; align-items: center;">
+        姓名：<el-input v-model="searchObj.username" placeholder="请输入姓名" style="width: 150px;" clearable></el-input>
+        精网号：<el-input v-model="searchObj.jwcode" placeholder="请输入精网号" style="width: 180px;" clearable
+          @input="trimJwcode"></el-input>
+        <el-button type="primary" @click="getUsers" style="margin-left: 10px;">搜索</el-button>
+      </div>
+      <div style="display: flex; gap: 10px;">
+        <el-button type="primary" @click="openAdd">添加用户</el-button>
+        <el-button type="success" @click="handleImportClick">导入Excel</el-button>
+        <input type="file" ref="fileInput" style="display: none" accept=".xlsx,.xls" @change="handleFileChange" />
+      </div>
     </div>
-  
-      <!-- 用户表格 -->
-      <el-table :data="filteredUsers" style="width: 100%;" :row-style="{ height: '60px' }">
-        <el-table-column type="selection" width="200" />
-        <el-table-column prop="id" label="ID" width="250" />
-        <el-table-column prop="name" label="姓名" width="250" />
-        <el-table-column prop="jingwangId" label="精网号" width="300" />
-        <el-table-column label="操作" >
-          <template #default="scope">
-            <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-  
-      <!-- 底部操作区域 -->
-      <div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
-        <el-button type="danger" @click="batchDelete">批量删除</el-button>
-        <div style="display: flex; align-items: center;">
-          <span style="margin-right: 15px;">共{{ total }}条</span>
-          <el-select v-model="pageSize" style="width: 120px; margin-right: 15px;">
-            <el-option label="10条/页" :value="10" />
-            <el-option label="20条/页" :value="20" />
-            <el-option label="50条/页" :value="50" />
-          </el-select>
-          <el-pagination
-            layout="prev, pager, next"
-            :total="total"
-            :page-size="pageSize"
-            v-model:current-page="currentPage"
-          />
-          <el-input 
-            v-model="jumpPage" 
-            style="width: 80px; margin-left: 15px; margin-right: 10px;" 
-            placeholder="页码"
-          />
-          <el-button type="primary" @click="goToPage">前往</el-button>
-        </div>
+    <!-- 用户表格 -->
+    <el-table :data="tableData" style="width: 100%;" :row-style="{ height: '60px' }"
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="200" />
+      <el-table-column type="index" label="ID" width="250">
+        <template #default="scope">
+          {{ pagination.pageSize * (pagination.pageNum - 1) + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="username" label="姓名" width="250" />
+      <el-table-column prop="jwcode" label="精网号" width="300" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button text size="small" type="danger" @click="delUser(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 底部操作区域 -->
+    <div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
+      <el-button type="danger" @click="batchDelete">批量删除</el-button>
+      <!-- 分页 -->
+      <el-pagination class="pagination" v-model:current-page="pagination.pageNum"
+        v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </div>
+  </el-card>
+  <el-dialog v-model="addVisible" title="添加用户" width="500" align-center>
+    <el-form :model="addObj" label-width="80px">
+      <el-form-item label="姓名" prop="username">
+        <el-input v-model="addObj.username" placeholder="请输入用户姓名" />
+      </el-form-item>
+      <el-form-item label="精网号" prop="jwcode">
+        <el-input v-model="addObj.jwcode" placeholder="请输入精网号" @input="trimAddJwcode" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="addVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitAdd">确定</el-button>
       </div>
+    </template>
+  </el-dialog>
+</template>
 
-    </el-card>
-
-        <el-dialog
-            v-model="centerDialogVisible"
-            title="添加中奖用户"
-            width="500"
-            align-center
-          >
-          <el-form ref="addForm" :model="winuser" label-width="80px">
-            <el-form-item label="姓名" prop="name">
-              <el-input v-model="winuser.name" placeholder="请输入中奖用户姓名" />
-            </el-form-item>
-            <el-form-item label="精网号" prop="jingwangId">
-              <el-input v-model="winuser.jingwangId" placeholder="请输入中奖用户精网号" @input="handleJingwangIdInput"/>
-            </el-form-item>
-          </el-form>
-          <template #footer>
-              <div class="dialog-footer">
-                <el-button @click="cancel">取消</el-button>
-                <el-button type="primary" @click="addwinUser">
-                  确定
-                </el-button>
-              </div>
-            </template>
-          </el-dialog>
-  </template>
-  
-  <script setup>
-  import { ref, computed } from 'vue'
-  import { useRouter } from 'vue-router'
-
-  const router = useRouter()
-  const centerDialogVisible = ref(false)
-  // 用户数据
-  const users = ref([
-    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },    {
-    id: 1,
-    name: '张家伟',
-    jingwangId: '90047666'
-    },
-])
-  
-  // 搜索文本
-
-  const searchData = ref({
-    name: '',
-    jingwangId: '',
-  })
-  // 分页相关
-  const currentPage = ref(1)
-  const pageSize = ref(10)
-  const jumpPage = ref('')
-  const total = computed(() => users.value.length)
-  
-  // 过滤后的用户数据
-  const filteredUsers = computed(() => {
-    // 实际项目中这里会有搜索过滤逻辑
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    return users.value.slice(start, end)
-  })
-  
-  const winuser=ref({
-    name: '',
-    jingwangId: '',
-  })
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { getUserList, addUser, deleteUser, deleteUsers } from '@/api/manage/gift'
+// 导入的，单拉
+import { importUsers } from '@/api/manage/gift'
+import { ElMessage, ElMessageBox } from 'element-plus'
+const router = useRouter()
+// 批量删除的id们
+const selectedIds = ref([])
+const addObj = ref({
+  username: '',
+  jwcode: ''
+})
+const openAdd = () => {
+  addObj.value = {}
+  addVisible.value = true
+}
+const addVisible = ref(false)
+const tableData = ref([])
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
+})
+const searchObj = ref({
+  username: '',
+  jwcode: '',
+})
+const fileInput = ref(null)
 
-  const search = () => {
-    // 搜索逻辑
-    console.log('执行搜索')
+const handleImportClick = () => {
+  fileInput.value.click()
+}
+const handleFileChange = async (e) => {
+  const file = e.target.files[0] // 只取第一个文件
+  if (!file) return
+  const fileName = file.name
+  if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
+    ElMessage.error('仅支持Excel文件(.xlsx, .xls)')
+    e.target.value = ''
+    return
+  }
+  try {
+    const res = await importUsers(file)
+    if (res.code === 200) {
+      ElMessage.success(res.data || '导入成功')
+      getUsers()
+    } else {
+      ElMessage.error(res.message || '导入失败')
+    }
+  } catch (error) {
+    console.error('导入失败:', error)
+    ElMessage.error('导入失败，请重试')
   }
+  e.target.value = ''
+}
+
+// 查全部
+const getUsers = async () => {
+  try {
+    const res = await getUserList({
+      username: searchObj.value.username,
+      jwcode: searchObj.value.jwcode,
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize
+    })
 
-  // 删除用户
-  const deleteUser = (user) => {
-    const index = users.value.findIndex(u => u.id === user.id)
-    if (index !== -1) {
-      users.value.splice(index, 1)
+    if (res.code === 200) {
+      tableData.value = res.data.list
+      pagination.value.total = res.data.total
+    } else {
+      ElMessage.error(res.message || '获取数据失败')
     }
+  } catch (error) {
+    console.error('请求失败:', error)
+    ElMessage.error('请求失败，请重试')
   }
-  
-  // 批量删除
-  const batchDelete = () => {
-    // 实际项目中这里会有批量删除逻辑
-    console.log('执行批量删除')
+}
+// 新增
+const submitAdd = async () => {
+  if (!addObj.value.username || !addObj.value.jwcode) {
+    ElMessage.error('请填写完整信息')
+    return
   }
-  
-  //添加用户
-  const addUser = () => {
-    // 实际添加用户逻辑
-    centerDialogVisible.value = true
+  try {
+    const response = await addUser(addObj.value)
+    if (response.code === 200) {
+      ElMessage.success('添加成功')
+      addVisible.value = false
+      getUsers()
+    } else {
+      ElMessage.error(response.message || '添加失败')
+    }
+  } catch (error) {
+    console.error('添加失败:', error)
+    ElMessage.error('添加失败，请重试')
   }
+}
 
-  //取消添加
-const cancel = () => {
-  centerDialogVisible.value = false
-  winuser.value ={
-  name: '',
-  jingwangId: ''
+// 删除
+const delUser = (row) => {
+  ElMessageBox.confirm('确定要删除该用户吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const response = await deleteUser(row.id)
+      if (response.code === 200) {
+        ElMessage.success('删除成功')
+        getUsers()
+      } else {
+        ElMessage.error(response.message || '删除失败')
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error('删除失败，请重试')
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除')
+  })
 }
+
+// 批量删除
+const batchDelete = async () => {
+  if (selectedIds.value.length === 0) {
+    ElMessage.warning('请先选择需要删除的用户')
+    return
+  }
+  ElMessageBox.confirm(`确定要删除选中的${selectedIds.value.length}条数据吗？`, '删除确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const response = await deleteUsers(selectedIds.value.join(','))
+      if (response.code === 200) {
+        ElMessage.success('批量删除成功')
+        getUsers()
+        selectedIds.value = []
+      } else {
+        ElMessage.error(response.message || '批量删除失败')
+      }
+    } catch (error) {
+      console.error('批量删除失败:', error)
+      ElMessage.error('网络错误，批量删除失败')
+    }
+  }).catch(() => {
+    ElMessage.info('已取消批量删除')
+  })
+}
+
+// 批量删除变化
+const handleSelectionChange = (selection) => {
+  selectedIds.value = selection.map(row => row.id)
 }
-//添加活动
-const addwinUser = () => {
-  centerDialogVisible.value = false
-  //TODO: 添加活动逻辑
-  winuser.value ={
-  name: '',
-  jingwangId: ''
+const trimJwcode = (value) => {
+  searchObj.value.jwcode = value.replace(/\D/g, '')
 }
+const trimAddJwcode = (value) => {
+  addObj.value.jwcode = value.replace(/\D/g, '')
 }
-  
-  // 导入Excel
-  const importExcel = () => {
-    // 实际导入逻辑
-    console.log('导入Excel')
-  }
-  const goBack = () => {
-    router.back()
-    }
-  // 跳转到指定页
-  const goToPage = () => {
-    const page = parseInt(jumpPage.value)
-    if (!isNaN(page) && page > 0 && page <= Math.ceil(total.value / pageSize.value)) {
-      currentPage.value = page
-    }
-    jumpPage.value = ''
-  }
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val
+  pagination.value.pageNum = 1
+  getUsers()
+}
+const handleCurrentChange = (val) => {
+  pagination.value.pageNum = val
+  getUsers()
+}
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+onMounted(() => {
+  getUsers()
+})
+</script>
 
-  const handleJingwangIdInput = (value) => {
-  searchData.value.jingwangId = value.replace(/\D/g, '')
+<style scoped>
+.el-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
-  </script>
-  
-  <style scoped>
-  .el-card {
-    border-radius: 8px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  }
-  
-  .el-table {
-    margin-top: 10px;
-  }
-  
-  .el-pagination {
-    margin: 0;
-  }
-  </style>
+
+.el-table {
+  margin-top: 10px;
+}
+
+.el-pagination {
+  margin: 0;
+}
+</style>

activitylink/src/views/zhongchou/gift/index.vue

@@ -1,90 +1,111 @@
-<!-- 由于本地图片在js中不会自动解析@，所以需要用方法getImageUrl()获取图片路径，但是如果图片用的绝对路径则不需要 -->
-
 <template>
-  <el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh; display: flex; flex-direction: column;">
+  <h2>礼品管理</h2>
+  <el-card style="display: flex; flex-direction: column;">
     <div class="gift-management-container" style="flex: 1; overflow-y: auto;">
-      <h2>礼品管理</h2>
-      <!-- 添加礼品和导入用户按钮 -->
       <div class="action-buttons">
-        <el-button type="primary" @click="showAddDialog">添加礼品</el-button>
-        <el-button @click="goToimportUsers">导入抽奖用户</el-button>
+        <el-button type="primary" @click="showAdd">添加礼品</el-button>
+        <el-button type="primary" @click="goToimportUsers">导入抽奖用户</el-button>
       </div>
       <div class="table-container" style="flex: 1; overflow-y: auto;">
-        <el-table :data="currentPageData" style="width: 100%" class="gift-table">
-        <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
-        <el-table-column label="图片" width="200" align="center">
-          <template #default="scope">
-            <!-- 使用作用域插槽显示当前行的图片 -->
-            <img 
-              v-if="scope.row.image" 
-              :src="getImageUrl(scope.row.image)" 
-              style="max-width: 100px; max-height: 30px;"
-            >
-            <el-icon v-else :size="20" color="#67C23A">
-              <Check />
-            </el-icon>
-          </template>
-        </el-table-column>
-        <el-table-column prop="name" label="名称" width="300" align="center"></el-table-column>
-        <el-table-column prop="level" label="等级" width="200" align="center"></el-table-column>
-        <el-table-column label="操作" align="center">
-          <template #default="scope">
-            <el-button size="default" @click="goToimportFixedList(scope.row)">导入内定名单</el-button>
-            <el-button size="default" @click="editGift(scope.row)">编辑</el-button>
-            <el-button size="default" type="danger" @click="deleteGift(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+        <el-table :data="tableData" style="width: 100%" class="gift-table" :row-style="{ height: '60px' }">
+          <el-table-column type="index" label="ID" width="100" align="center">
+            <template #default="scope">{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</template>
+          </el-table-column>
+          <el-table-column label="礼品图片" width="200" align="center">
+            <template #default="scope">
+              <img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" style="max-width: 100px; max-height: 30px;">
+              <el-icon v-else :size="20" color="#67C23A">
+                <Check />
+              </el-icon>
+            </template>
+          </el-table-column>
+          <el-table-column prop="prizeName" label="名称" width="300" align="center"></el-table-column>
+          <el-table-column prop="gradeName" label="等级" width="200" align="center"></el-table-column>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button type="primary" text @click="goToimportFixedList(scope.row)">导入内定名单</el-button>
+              <el-button type="warning" text @click="editGift(scope.row)">编辑</el-button>
+              <el-button type="danger" text @click="deleteGift(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
-      <!-- 礼品表格 -->
-
     </div>
-
-    <!-- 分页控件 -->
-
-    <el-pagination
-      class="pagination"
-      v-model:current-page="pagination.pageNum"
-      v-model:page-size="pagination.pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="tableData.length"
-      :page-sizes="[10, 20, 50, 100]"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    >
+    <el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
+      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :page-sizes="[10, 20, 50, 100]"
+      @size-change="handleSizeChange" @current-change="handleCurrentChange">
     </el-pagination>
 
-    <!-- 添加/编辑礼品对话框 -->
-    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="40%">
-      <el-form :model="form" label-width="100px">
-        <el-form-item label="礼品名称">
-          <el-input v-model="form.name" placeholder="请输入礼品名称"></el-input>
+    <!-- 添加 -->
+    <el-dialog v-model="addVisible" :title="dialogTitle" width="40%">
+      <el-form :model="addForm" label-width="100px" ref="formRef">
+        <el-form-item label="礼品名称" :rules="{ required: true, message: '请输入礼品名称', trigger: 'blur' }">
+          <el-input v-model="addForm.prizeName" placeholder="请输入礼品名称"></el-input>
+        </el-form-item>
+        <el-form-item label="礼品等级" :rules="{ required: true, message: '请选择礼品等级', trigger: 'change' }">
+          <el-select v-model="addForm.gradeId" placeholder="请选择礼品等级">
+            <el-option v-for="item in gradeNames" :key="item.id" :label="item.gradeName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="礼品图片" :rules="{ required: true, message: '请上传图片', trigger: 'change' }">
+          <el-upload ref="uploadRef" :action="uploadUrl" list-type="picture-card" :auto-upload="false"
+            :on-change="handleImageChange" :on-success="handleUploadSuccess" :on-error="handleUploadError"
+            :before-upload="beforeUpload" :show-file-list="false">
+            <el-icon>
+              <Plus />
+            </el-icon>
+            <template #tip>
+              <div class="el-upload__tip">
+                只能上传jpg、png格式的图片，且不超过500KB
+              </div>
+            </template>
+          </el-upload>
+          <div v-if="addForm.imageUrl" class="upload-preview">
+            <img :src="addForm.imageUrl" alt="预览图" style="max-width: 200px; margin-top: 10px; border-radius: 4px;">
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="addVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitAdd">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 编辑 -->
+    <el-dialog v-model="editVisible" :title="dialogTitle" width="40%">
+      <el-form :model="editForm" label-width="100px" ref="formRef">
+        <el-form-item label="礼品名称" :rules="{ required: true, message: '请输入礼品名称', trigger: 'blur' }">
+          <el-input v-model="editForm.prizeName" placeholder="请输入礼品名称"></el-input>
         </el-form-item>
-        <el-form-item label="礼品等级">
-          <el-select v-model="form.level" placeholder="请选择礼品等级">
-            <el-option label="特等奖" value="特等奖"></el-option>
-            <el-option label="一等奖" value="一等奖"></el-option>
-            <el-option label="二等奖" value="二等奖"></el-option>
-            <el-option label="三等奖" value="三等奖"></el-option>
-            <el-option label="四等奖" value="四等奖"></el-option>
-            <el-option label="五等奖" value="五等奖"></el-option>
+        <el-form-item label="礼品等级" :rules="{ required: true, message: '请选择礼品等级', trigger: 'change' }">
+          <el-select v-model="editForm.gradeId" placeholder="请选择礼品等级">
+            <el-option v-for="item in gradeNames" :key="item.id" :label="item.gradeName" :value="item.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="礼品图片">
-          <el-upload
-            action="#"
-            list-type="picture-card"
-            :auto-upload="false"
-            :on-change="handleImageChange"
-          >
-            <el-icon><Plus /></el-icon>
+        <el-form-item label="礼品图片" :rules="{ required: true, message: '请上传图片', trigger: 'change' }">
+          <el-upload ref="uploadRef" :action="uploadUrl" list-type="picture-card" :auto-upload="false"
+            :on-change="handleImageChange" :on-success="handleUploadSuccess" :on-error="handleUploadError"
+            :before-upload="beforeUpload" :show-file-list="false">
+            <el-icon>
+              <Plus />
+            </el-icon>
+            <template #tip>
+              <div class="el-upload__tip">
+                只能上传jpg、png格式的图片，且不超过500KB
+              </div>
+            </template>
           </el-upload>
+          <div v-if="editForm.imageUrl" class="upload-preview">
+            <img :src="editForm.imageUrl" alt="预览图" style="max-width: 200px; margin-top: 10px; border-radius: 4px;">
+          </div>
         </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="submitForm">确认</el-button>
+          <el-button @click="editVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitEdit">确认</el-button>
         </span>
       </template>
     </el-dialog>
@@ -92,140 +113,264 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { Check, Plus } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRouter } from 'vue-router';
-import { usegiftFixedListStone } from '@/stone/giftFixedListStone'; 
-const router = useRouter();
-// 添加图片URL处理方法
-const getImageUrl = (path) => {
-  // 处理 @ 别名路径
-  if (path.startsWith('@')) {
-    return path.replace('@', '/src')
-  }
-  return path
-}
+import { usegiftFixedListStone } from '@/stone/giftFixedListStone';
+import { getPrizeList, addPrize, deletePrize, updatePrize } from '@/api/manage/gift';
+import { getGradeNameList } from '@/api/manage/level';
 
+const router = useRouter();
+const gradeNames = ref([])
+const tableData = ref([])
 const giftStore = usegiftFixedListStone();
-
-// 表格数据 - 更新图片路径
-const tableData = ref([
-  { id: 1, image: '@/img/image.png', name: 'zimomo', level: '特等奖' },
-  { id: 2, image: '@/img/image.png', name: '高级耳机', level: '一等奖' },
-  { id: 3, image: '@/img/image.png', name: '智能手表', level: '二等奖' },
-  { id: 4, image: '@/img/image.png', name: '蓝牙音箱', level: '三等奖' },
-  { id: 5, image: '@/img/image.png', name: '充电宝', level: '四等奖' },
-  { id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' },
-  { id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' },
-  { id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' },
-  { id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' },
-  { id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' },
-  { id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' },
-  { id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' },
-  { id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' },
-
-])
-
-// 分页相关
 const pagination = ref({
   pageNum: 1,
   pageSize: 10,
   total: 0
 })
-
-// 计算属性 - 当前页数据
-const currentPageData = computed(() => {
-  const start = (pagination.value.pageNum - 1) * pagination.value.pageSize
-  const end = start + pagination.value.pageSize
-  return tableData.value.slice(start, end)
-})
-
-// 处理每页显示数量变化
-const handleSizeChange = (val) => {
-  pagination.value.pageSize = val
-  pagination.value.pageNum = 1
-}
-
-// 处理当前页变化
-const handleCurrentChange = (val) => {
-  pagination.value.pageNum = val
-}
-
-// 对话框相关
-const dialogVisible = ref(false)
+const addVisible = ref(false)
+const editVisible = ref(false)
 const dialogTitle = ref('添加礼品')
-const form = ref({
-  id: null,
-  name: '',
-  level: '',
-  image: null
+const addForm = ref({
+  prizeName: '',
+  gradeId: '',
+  imageUrl: null
 })
+const editForm = ref({
+  prizeName: '',
+  gradeId: '',
+  imageUrl: null
+})
+const uploadUrl = 'http://39.101.133.168:8828/hljw/api/aws/upload';
+const formRef = ref(null)
+const uploadRef = ref(null)
 
-const showAddDialog = () => {
+const showAdd = () => {
   dialogTitle.value = '添加礼品'
-  form.value = { id: null, name: '', level: '', image: null }
-  dialogVisible.value = true
+  addForm.value = {
+    prizeName: '',
+    gradeId: '',
+    imageUrl: null
+  }
+  addVisible.value = true
 }
 
 const editGift = (row) => {
   dialogTitle.value = '编辑礼品'
-  form.value = { ...row }
-  dialogVisible.value = true
+  editForm.value = {
+    id: row.id,
+    prizeName: row.prizeName,
+    gradeId: row.gradeId,
+    imageUrl: row.imageUrl
+  }
+  editVisible.value = true
 }
 
-const submitForm = () => {
-  if (!form.value.name || !form.value.level) {
-    ElMessage.error('请填写完整信息')
-    return
+// 查全部
+const getPrizes = async () => {
+  try {
+    const res = await getPrizeList({
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize
+    })
+
+    if (res.code === 200) {
+      tableData.value = res.data.list
+      pagination.value.total = res.data.total
+    } else {
+      ElMessage.error(res.message || '获取数据失败')
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+    ElMessage.error('请求失败，请重试')
   }
+}
 
-  if (form.value.id) {
-    // 编辑
-    const index = gifts.value.findIndex(item => item.id === form.value.id)
-    if (index !== -1) {
-      gifts.value[index] = { ...form.value }
+// 等级下拉框
+const getGradeNames = async () => {
+  try {
+    const res = await getGradeNameList()
+    if (res.code === 200) {
+      gradeNames.value = res.data
+    } else {
+      ElMessage.error(res.message || '获取下拉框失败')
     }
-  } else {
-    // 添加
-    const newId = gifts.value.length > 0 ? Math.max(...gifts.value.map(item => item.id)) + 1 : 1
-    gifts.value.push({
-      id: newId,
-      ...form.value
-    })
+  } catch (error) {
+    console.error('获取下拉框失败:', error)
+    ElMessage.error('获取下拉框失败')
   }
-  
-  dialogVisible.value = false
-  ElMessage.success('操作成功')
 }
 
+// 添加
+const submitAdd = async () => {
+  formRef.value.validate((valid) => {
+    if (!valid) return false;
+
+    if (!addForm.value.imageUrl) {
+      ElMessage.error('请上传图片');
+      return;
+    }
+    try {
+      const data = {
+        prizeName: addForm.value.prizeName,
+        gradeId: String(addForm.value.gradeId),
+        imageUrl: addForm.value.imageUrl
+      }
+      console.log('添加参数:', data)
+      addPrize(data).then(response => {
+        if (response.code === 200) {
+          ElMessage.success('添加成功')
+          addVisible.value = false
+          getPrizes()
+        } else {
+          ElMessage.error(response.message || '添加失败')
+        }
+      }).catch(error => {
+        console.error('添加失败:', error)
+        ElMessage.error('添加失败，请重试')
+      })
+    } catch (error) {
+      console.error('添加失败:', error)
+      ElMessage.error('添加失败，请重试')
+    }
+  });
+}
+// 删除
 const deleteGift = (row) => {
-  ElMessageBox.confirm('确定要删除该礼品吗?', '提示', {
+  ElMessageBox.confirm('确定要删除该等级吗?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(() => {
-    // gifts.value = gifts.value.filter(item => item.id !== row.id)
-    ElMessage.success('删除成功')
+  }).then(async () => {
+    try {
+      const id = String(row.id)
+      console.log('删除礼品的id是:', id)
+      const response = await deletePrize(id)
+      if (response.code === 200) {
+        ElMessage.success('删除成功')
+        getPrizes()
+      } else {
+        ElMessage.error(response.message || '删除失败')
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error('删除失败，请重试')
+    }
   }).catch(() => {
-    // 取消操作
     ElMessage.info('已取消删除')
   })
 }
-
+// 编辑
+const submitEdit = async () => {
+  formRef.value.validate((valid) => {
+    if (!valid) return false;
+    if (!editForm.value.imageUrl) {
+      ElMessage.error('请上传图片');
+      return;
+    }
+    try {
+      const data = {
+        id: editForm.value.id,
+        prizeName: editForm.value.prizeName,
+        gradeId: String(editForm.value.gradeId),
+        imageUrl: editForm.value.imageUrl
+      }
+      console.log('添加参数:', data)
+      updatePrize(data).then(response => {
+        if (response.code === 200) {
+          ElMessage.success('编辑成功')
+          editVisible.value = false
+          getPrizes()
+        } else {
+          ElMessage.error(response.message || '编辑失败')
+        }
+      })
+    } catch (error) {
+      console.error('编辑失败:', error)
+      ElMessage.error('编辑失败，请重试')
+    }
+  });
+}
 const goToimportFixedList = (row) => {
   giftStore.setFixedGiftName(row.name);
-  router.push({ name: 'importFixedList' });
+  router.push({
+    name: 'importFixedList',
+    query: {
+      prizeName: row.prizeName,
+      gradeName: row.gradeName,
+      gradeId: row.id // 都传吧
+    }
+  });
 }
 
 const goToimportUsers = () => {
   router.push({ name: 'importUsers' });
 }
 
-
 const handleImageChange = (file) => {
-  form.value.image = file.raw
+  uploadRef.value.submit();
+}
+const handleUploadSuccess = (response, file, fileList) => {
+  if (response.code === 200) {
+    if (addVisible.value) {
+      addForm.value.imageUrl = response.data.url;
+    } else if (editVisible.value) {
+      editForm.value.imageUrl = response.data.url;
+    }
+    ElMessage.success('图片上传成功');
+  } else {
+    if (addVisible.value) {
+      addForm.value.imageUrl = null;
+    } else if (editVisible.value) {
+      editForm.value.imageUrl = null;
+    }
+    ElMessage.error(response.message || '图片上传失败');
+  }
+}
+
+const handleUploadError = (error) => {
+  console.error('上传失败:', error);
+  if (addVisible.value) {
+    addForm.value.imageUrl = null;
+  } else if (editVisible.value) {
+    editForm.value.imageUrl = null;
+  }
+  ElMessage.error('图片上传失败，请重试');
 }
+
+const beforeUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg';
+  const isPNG = file.type === 'image/png';
+  const isLt500K = file.size / 1024 < 500;
+
+  if (!isJPG && !isPNG) {
+    ElMessage.error('上传图片只能是 JPG 或 PNG 格式!');
+    return false;
+  }
+  if (!isLt500K) {
+    ElMessage.error('上传图片大小不能超过 500KB!');
+    return false;
+  }
+  return true;
+}
+
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val
+  pagination.value.pageNum = 1
+  getPrizes()
+}
+
+const handleCurrentChange = (val) => {
+  pagination.value.pageNum = val
+  getPrizes()
+}
+
+onMounted(() => {
+  getPrizes()
+  getGradeNames()
+})
 </script>
 
 <style scoped>
@@ -247,8 +392,9 @@ const handleImageChange = (file) => {
 .action-buttons {
   margin-bottom: 20px;
 }
+
 .table-container {
-  max-height: 600px; /* 或者根据你的页面布局调整 */
+  max-height: 650px;
   overflow-y: auto;
 }
 
@@ -258,4 +404,8 @@ img {
   object-fit: contain;
   border-radius: 4px;
 }
+
+.upload-preview {
+  margin-top: 10px;
+}
 </style>

activitylink/src/views/zhongchou/level/index.vue

@@ -1,242 +1,282 @@
 <template>
-  <el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh; display: flex; flex-direction: column;">
-    <div class="level-management-container" style="flex: 1; overflow-y: auto;">
-      <h2>等级管理</h2>
-      <!-- 添加等级按钮 -->
-      <div class="action-buttons">
-        <el-button type="primary" @click="showAddDialog">添加等级</el-button>
-      </div>
+  <h2>等级管理</h2>
+<el-card style=" display: flex; flex-direction: column;">
+<div class="level-management-container" style="flex: 1; overflow-y: auto;">
+<!-- 添加等级按钮 -->
+<div class="action-buttons">
+  <el-button type="primary" @click="showAddDialog">添加等级</el-button>
+</div>
 
-      <!-- 等级表格 -->
-      <div class="table-container">
-        <el-table :data="tableData" style="width: 100%" :row-style="{ height: '55px' }">
-          <el-table-column type="index" label="ID" width="150" align="center">
-            <template #default="scope">
-              {{ (pagination.pageNum - 1) * pagination.pageSize + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="gradeName" label="等级名称" width="200" align="center" />
-          <el-table-column prop="amount" label="数量" width="250" align="center" />
-          <el-table-column prop="perWin" label="每轮抽取人数" width="300" align="center" />
-          <el-table-column prop="sort" label="排序" width="200" align="center" />
-          <el-table-column fixed="right" label="操作" align="center">
-            <template #default="scope">
-              <div style="display: flex; gap: 10px; justify-content: center;">
-                <el-button size="default" @click="editLevel(scope.row)">编辑</el-button>
-                <!-- <el-button size="default" @click="setmor">设置多个</el-button> -->
-                <el-button size="default" type="danger" @click="deleteLevel(scope.row)">删除</el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
+<!-- 等级表格 -->
+<div class="table-container">
+  <el-table :data="tableData" style="width: 100%" :row-style="{ height: '60px' }">
+    <el-table-column type="index" label="ID" width="120px" fixed="left" >
+      <template #default="scope">
+        {{ pagination.pageSize * (pagination.pageNum - 1) + scope.$index + 1 }}
+      </template>
+      </el-table-column>
+    <el-table-column prop="gradeName" label="等级名称" width="240" align="center" />
+    <el-table-column prop="amount" label="数量" width="250" align="center" />
+    <el-table-column prop="perWin" label="每轮抽取人数" width="300" align="center" />
+    <el-table-column prop="sort" label="排序" width="240" align="center" />
+    <el-table-column prop="operation" fixed="right" width="240" label="操作" align="center">
+      <template #default="scope">
+        <div style="display: flex; gap: 10px; justify-content: center;">
+          <el-button text type="warning" @click="editLevel(scope.row)">编辑</el-button>
+          <el-button text type="danger" @click="deleteLevel(scope.row)">删除</el-button>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</div>
+</div>
 
-    <!-- 分页 -->
-    <el-pagination
-      class="pagination"
-      v-model:current-page="pagination.pageNum"
-      v-model:page-size="pagination.pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="total"
-      :page-sizes="[10, 20, 50, 100]"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
+<!-- 分页 -->
+<el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
+layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :page-sizes="[10, 20, 50, 100]"
+@size-change="handleSizeChange" @current-change="handleCurrentChange" />
 
-    <!-- 添加/编辑等级对话框 -->
-    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="400px" @closed="resetForm">
-      <el-form :model="form" label-width="120px">
-        <el-form-item label="等级名称" align="center">
-          <el-input v-model="form.gradeName" placeholder="请输入等级名称"></el-input>
-        </el-form-item>
-        <el-form-item label="数量" align="center">
-          <el-input-number v-model="form.amount" :precision="0" :min="0" placeholder="请输入数量" style="width: 100%;"></el-input-number>
-        </el-form-item>
-        <el-form-item label="每轮抽取人数" align="center">
-          <el-input-number v-model="form.perWin" :precision="0" :min="0" placeholder="请输入抽取人数" style="width: 100%;"></el-input-number>
-        </el-form-item>
-        <el-form-item label="排序" align="center">
-          <el-input-number v-model="form.sort" :precision="0" :min="0" placeholder="请输入排序等级" style="width: 100%;"></el-input-number>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="submitForm">确认</el-button>
-        </span>
-      </template>
-    </el-dialog>
+<!-- 添加 -->
+<el-dialog v-model="addVisible" :title="dialogTitle" width=400px @closed="resetForm">
+<el-form :model="addForm" label-width="120px">
+  <el-form-item label="等级名称" align="center">
+    <el-input v-model="addForm.gradeName" placeholder="请输入等级名称"></el-input>
+  </el-form-item>
+  <el-form-item label="数量" align="center">
+    <el-input v-model="addForm.amount" :precision="0" :min="0" placeholder="请输入数量"
+      style="width: 100%;"></el-input>
+  </el-form-item>
+  <el-form-item label="每轮抽取人数" align="center">
+    <el-input v-model="addForm.perWin" :precision="0" :min="0" placeholder="请输入抽取人数"
+      style="width: 100%;"></el-input>
+  </el-form-item>
+  <el-form-item label="排序" align="center">
+    <el-input v-model="addForm.sort" :precision="0" :min="0" placeholder="请输入排序等级"
+      style="width: 100%;"></el-input>
+  </el-form-item>
+</el-form>
+<template #footer>
+  <span>
+    <el-button @click="addVisible = false">取消</el-button>
+    <el-button type="primary" @click="submitAdd">确认</el-button>
+  </span>
+</template>
+</el-dialog>
+ <!-- 编辑 -->
+ <el-dialog v-model="editVisible" :title="dialogTitle" width=400px @closed="resetForm">
+<el-form :model="editForm" label-width="120px">
+  <el-form-item label="等级名称" align="center">
+    <el-input v-model="editForm.gradeName" placeholder="请输入等级名称"></el-input>
+  </el-form-item>
+  <el-form-item label="数量" align="center">
+    <el-input v-model="editForm.amount" :precision="0" :min="0" placeholder="请输入数量"
+      style="width: 100%;"></el-input>
+  </el-form-item>
+  <el-form-item label="每轮抽取人数" align="center">
+    <el-input v-model="editForm.perWin" :precision="0" :min="0" placeholder="请输入抽取人数"
+      style="width: 100%;"></el-input>
+  </el-form-item>
+  <el-form-item label="排序" align="center">
+    <el-input v-model="editForm.sort" :precision="0" :min="0" placeholder="请输入排序等级"
+      style="width: 100%;"></el-input>
+  </el-form-item>
+</el-form>
+<template #footer>
+  <span>
+    <el-button @click="editVisible = false">取消</el-button>
+    <el-button type="primary" @click="submitEdit">确认</el-button>
+  </span>
+</template>
+</el-dialog>
 
-  </el-card>
+</el-card>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { getLevelList } from '@/api/manage/level'
-
-// 表格数据
+import { getLevelList, addLevel, deleteGrade, updateGrade } from '@/api/manage/level'
 const tableData = ref([])
-
-// 分页数据
 const pagination = ref({
-  pageNum: 1,
-  pageSize: 10
+pageNum: 1,
+pageSize: 10,
+total:0
 })
-
-// 总条数
-const total = ref(0)
-
-// 获取等级列表
-const fetchLevelList = async () => {
-  try {
-    const response = await getLevelList(
-      pagination.value.pageNum,
-      pagination.value.pageSize
-    )
-    
-    if (response.code === 200) {
-      tableData.value = response.data.list
-      total.value = response.data.total
-    } else {
-      ElMessage.error(response.message || '获取等级列表失败')
-    }
-  } catch (error) {
-    console.error('获取等级列表失败:', error)
-    ElMessage.error('请求失败，请重试')
-  }
-}
-
-// 分页事件处理
-const handleSizeChange = (val) => {
-  pagination.value.pageSize = val
-  pagination.value.pageNum = 1
-  fetchLevelList()
-}
-
-const handleCurrentChange = (val) => {
-  pagination.value.pageNum = val
-  fetchLevelList()
-}
-
-// 对话框相关
-const setmore = ref(false)
-
-const setmor = () => { 
-  setmore.value = true
-}
-
-const dialogVisible = ref(false)
-const dialogTitle = ref('添加等级')
-const form = ref({
-  id: null,
-  gradeName: '',
-  amount: null,
-  perWin: null,
-  sort: null
+const addVisible = ref(false)
+const editVisible = ref(false)
+const dialogTitle = ref('')
+const addForm = ref({
+gradeName: '',
+amount: '',
+perWin: '',
+sort: ''
 })
-
+const editForm = ref({})
 // 显示添加对话框
 const showAddDialog = () => {
-  dialogTitle.value = '添加等级'
-  form.value = {
-    id: null,
-    gradeName: '',
-    amount: null,
-    perWin: null,
-    sort: null
-  }
-  dialogVisible.value = true
+dialogTitle.value = '添加等级'
+addVisible.value = true
 }
 
 // 显示编辑对话框
 const editLevel = (row) => {
-  dialogTitle.value = '编辑等级'
-  form.value = { ...row }
-  dialogVisible.value = true
+dialogTitle.value = '编辑等级'
+editForm.value = {
+id: row.id,
+gradeName: row.gradeName,
+amount: row.amount,
+perWin: row.perWin,
+sort: row.sort
 }
+editVisible.value = true
+}
+// 查全部
+const getLevels = async () => {
+try {
+const res = await getLevelList({
+pageNum: pagination.value.pageNum,
+pageSize: pagination.value.pageSize
+})
 
-// 提交表单
-const submitForm = () => {
-  if (!form.value.gradeName || form.value.amount === null || form.value.sort === null) {
-    ElMessage.error('请填写完整信息')
-    return
-  }
-  
-  if (form.value.id) {
-    // 编辑
-    // 这里应该调用API更新数据
-    const index = tableData.value.findIndex(item => item.id === form.value.id)
-    if (index !== -1) {
-      tableData.value[index] = { ...form.value }
-    }
-  } else {
-    // 添加
-    // 这里应该调用API添加数据
-    const newId = tableData.value.length > 0 ? Math.max(...tableData.value.map(item => item.id)) + 1 : 1
-    tableData.value.push({
-      id: newId,
-      ...form.value
-    })
-  }
-  
-  dialogVisible.value = false
-  ElMessage.success('操作成功')
+if (res.code === 200) {
+tableData.value = res.data.list
+pagination.value.total = res.data.total
+} else {
+ElMessage.error(res.message || '获取数据失败')
 }
+} catch (error) {
+console.error('请求失败:', error)
+ElMessage.error('请求失败，请重试')
+}
+}
+// 添加
+const submitAdd = async () => {
+if (!addForm.value.gradeName || addForm.value.amount === '' || addForm.value.sort === '' || addForm.value.perWin === '') {
+ElMessage.error('请填写完整信息')
+return
+}
+try {
+const data = {
+gradeName: String(addForm.value.gradeName),
+amount: String(addForm.value.amount),
+sort: String(addForm.value.sort),
+perWin: String(addForm.value.perWin)
+}
+console.log('看看添加参数',data)
+const response = await addLevel(data)
+if (response.code === 200) {
+ElMessage.success('添加成功')
+addVisible.value = false
+getLevels()
+} else {
+ElMessage.error(response.message || '添加失败')
+}
+} catch (error) {
+console.error('添加等级失败:', error)
+ElMessage.error('添加失败，请重试')
+}
+}
+// 编辑
+const submitEdit = async () => {
 
+if (!editForm.value.id || !editForm.value.gradeName || !editForm.value.amount || !editForm.value.perWin || !editForm.value.sort) {
+ElMessage.error('请填写完整信息')
+return
+}
+try {
+const editData = {
+id: editForm.value.id, 
+gradeName: editForm.value.gradeName,
+amount: editForm.value.amount,
+perWin: editForm.value.perWin,
+sort: editForm.value.sort
+}
+console.log('看看编辑参数',editData)
+const response = await updateGrade(editData)
+if (response.code === 200) {
+ElMessage.success('修改成功')
+editVisible.value = false 
+getLevels()
+} else {
+ElMessage.error(response.message || '修改失败')
+}
+} catch (error) {
+console.error('编辑等级失败:', error)
+ElMessage.error('修改失败，请重试')
+}
+}
 // 删除等级
 const deleteLevel = (row) => {
-  // 这里应该调用API删除数据
-  ElMessageBox.confirm('确定要删除该等级吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    tableData.value = tableData.value.filter(item => item.id !== row.id)
-    ElMessage.success('删除成功')
-  }).catch(() => {
-    ElMessage.info('已取消删除')
-  })
+ElMessageBox.confirm('确定要删除该等级吗?', '提示', {
+confirmButtonText: '确定',
+cancelButtonText: '取消',
+type: 'warning'
+}).then(async () => {
+try {
+const id = String(row.id)
+console.log('删除等级的id是:', id)
+const response = await deleteGrade(id)
+if (response.code === 200) {
+  ElMessage.success('删除成功')
+  getLevels()
+} else {
+  ElMessage.error(response.message || '删除失败')
+}
+} catch (error) {
+console.error('删除失败:', error)
+ElMessage.error('删除失败，请重试')
+}
+}).catch(() => {
+ElMessage.info('已取消删除')
+})
 }
 
-// 清空表单（关闭对话框时调用）
+//清空表单（关闭对话框时调用）
 const resetForm = () => {
-  form.value = {
-    id: null,
-    gradeName: '',
-    amount: null,
-    perWin: null,
-    sort: null
-  }
+addForm.value = {
+gradeName: '',
+amount: '',
+perWin: '',
+sort: ''
 }
-
-// 组件挂载时获取数据
-fetchLevelList()
+}
+const handleSizeChange = (val) => {
+pagination.value.pageSize = val
+pagination.value.pageNum = 1
+getLevels()
+}
+const handleCurrentChange = (val) => {
+pagination.value.pageNum = val
+getLevels()
+}
+onMounted(() => {
+getLevels()
+})
 </script>
 
 <style scoped>
 .level-management-container {
-  padding: 20px;
-  width: 100%;
-  box-sizing: border-box;
-  min-height: 80vh;
+padding: 20px;
+width: 100%;
+box-sizing: border-box;
+min-height: 80vh;
 }
 
 .pagination {
-  padding: 10px 20px;
-  background-color: #fff;
-  border-top: 1px solid #ebeef5;
-  display: flex;
-  justify-content: flex-start; /* 改为左对齐 */
+padding: 10px 20px;
+background-color: #fff;
+border-top: 1px solid #ebeef5;
+display: flex;
+justify-content: flex-start;
+/* 改为左对齐 */
 }
 
 .action-buttons {
-  margin-bottom: 20px;
+margin-bottom: 20px;
 }
 
 .table-container {
-  max-height: 600px;
-  overflow-y: auto;
+max-height: 650px;
+overflow-y: auto;
 }
 </style>

activitylink/src/views/zhongchou/winning/index.vue

@@ -106,6 +106,16 @@ const fetchWinLevelList = async () => {
   }
 }
 
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val
+  pagination.value.pageNum = 1
+  getPrizes()
+}
+
+const handleCurrentChange = (val) => {
+  pagination.value.pageNum = val
+  getPrizes()
+}
 // 获取中奖列表
 const fetchWinList = async () => {
   try {