douke-saas-admin/src/views/system/apply/index.vue

<template>
   <div class="app-container">
      <!-- <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
          <el-form-item label="角色名称" prop="roleName">
             <el-input
                v-model="queryParams.roleName"
                placeholder="请输入角色名称"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
             />
          </el-form-item>
          <el-form-item label="权限字符" prop="roleKey">
             <el-input
                v-model="queryParams.roleKey"
                placeholder="请输入权限字符"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
             />
          </el-form-item>
          <el-form-item label="状态" prop="status">
             <el-select
                v-model="queryParams.status"
                placeholder="角色状态"
                clearable
                style="width: 240px"
             >
                <el-option
                   v-for="dict in sys_normal_disable"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
                />
             </el-select>
          </el-form-item>
          <el-form-item label="创建时间" style="width: 308px">
             <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
             ></el-date-picker>
          </el-form-item>
          <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
       <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
             <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
                v-hasPermi="['system:role:add']"
             >新增</el-button>
          </el-col>
          <el-col :span="1.5">
             <el-button
                type="success"
                plain
                icon="Edit"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['system:role:edit']"
             >修改</el-button>
          </el-col>
          <el-col :span="1.5">
             <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['system:role:remove']"
             >删除</el-button>
          </el-col>
          <el-col :span="1.5">
             <el-button
                type="warning"
                plain
                icon="Download"
                @click="handleExport"
                v-hasPermi="['system:role:export']"
             >导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
       </el-row> -->

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="applyList" @selection-change="handleSelectionChange">
         <!-- <el-table-column type="selection" width="55" align="center" /> -->
         <el-table-column label="活动ID" prop="activityId" />
         <el-table-column label="活动名称" prop="activityName" :show-overflow-tooltip="true" width="320"/>
         <el-table-column label="状态" prop="actStatus" :show-overflow-tooltip="true">
            <template #default="scope">
               <el-tag :type="scope.row.actStatus === 3 ? 'success' : 'danger'">
                  {{ scope.row.actStatus === 3 ? '报名中' : '报名结束' }}
               </el-tag>
            </template>
         </el-table-column>
         <el-table-column label="排序" prop="sort" width="100"/>
         <el-table-column label="自动提报" align="center" key="enableAutoApply">
            <template #default="scope">
               <el-switch v-model="scope.row.enableAutoApply" @change="handleStatusChange(scope.row)"></el-switch>
               <!-- {{ scope.row.memberStatus   }} -->
            </template>
         </el-table-column>
         <el-table-column label="操作" prop="sortOrder">
            <template #default="scope">
               <el-button type="primary" link @click="handleEditSort(scope.row)" style="margin-left:20px;"
                  :disabled="scope.row.actStatus !== 3">编辑</el-button>
            </template>
         </el-table-column>

      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize" @pagination="handlePaginationChange" />
      <el-dialog title="修改排序" v-model="sortDialogVisible" width="500px" append-to-body>
         <el-form>
            <el-form-item label="排序值">
               <el-input-number v-model="newSortOrder" :min="0" />
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="setOrderSortFn">确 定</el-button>
               <el-button @click="sortDialogVisible = false">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>

</template>

<script setup name="Role">
import { listRole } from "@/api/system/role";
import { getApplyList, setOrderSort, setAutoApply } from "@/api/system/apply";
import { onMounted } from "vue";


const router = useRouter();
const { proxy } = getCurrentInstance();
// const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const applyList = ref([]);

const roleList = ref([]);
const loading = ref(true);

const total = ref(0);
const dateRange = ref([]);
const queryParams = ref({
   pageNum: 1,
   pageSize: 20
});

onMounted(() => {
   getActivityListFn(queryParams.value);
});
//获取团长活动
function getActivityListFn(params) {
   loading.value = true;
   getApplyList(params).then(res => {
      console.log(res);
      applyList.value = res.data.records.map(item => {
         item._isInit = true;
         return item;
      });
      // 数据加载完成后，延迟将_isInit设为false
      setTimeout(() => {
         applyList.value.forEach(item => {
            item._isInit = false;
         });
      }, 0);
      total.value = res.data.total;
      loading.value = false;
   });
}

function handlePaginationChange({ page, limit }) {
   queryParams.value.pageNum = page;
   queryParams.value.pageSize = limit;
   getActivityListFn(queryParams.value);
}
const sortDialogVisible = ref(false);
const currentSortItem = ref(null);
const newSortOrder = ref(0);

function handleEditSort(row) {
   currentSortItem.value = row;
   newSortOrder.value = row.sort;
   sortDialogVisible.value = true;
}
/** 自动提报状态修改  */
function handleStatusChange(row) {
   if (row._isInit) return;
   console.log('用户状态修改', row.id, row.memberStatus)
   const params = {
      activityId: row.activityId,
      enableAutoApply: row.enableAutoApply
   }
   setAutoApply(params).then(res => {
      if (res.code === 0) {
         proxy.$modal.msgSuccess('修改成功');
      } else {
         proxy.$modal.msgError('修改失败，请重试');
      }
   }).catch(error => {
      console.error('请求失败', error);
      proxy.$modal.msgError('设置失败');
      row.enableAutoApply = !row.enableAutoApply
   });
};
function setOrderSortFn() {
   const params = {
      activityId: currentSortItem.value.activityId,
      sort: newSortOrder.value
   }
   setOrderSort(params).then(res => {
      // 更新本地列表中的排序值
      const index = applyList.value.findIndex(item => item.activityId === currentSortItem.value.activityId);
      if (index !== -1) {
         applyList.value[index].sort = newSortOrder.value;
      }
      sortDialogVisible.value = false;
      proxy.$modal.msgSuccess('修改成功');
   });
}
</script>