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" />
         <el-table-column label="状态" prop="status" :show-overflow-tooltip="true">
            <template #default="scope">
               <el-tag :type="scope.row.status === 3 ? 'success' : 'danger'">
                  {{ scope.row.status === 3 ? '报名中' : '报名结束' }}
               </el-tag>
            </template>
         </el-table-column>
         <el-table-column label="排序" prop="sortOrder">
            <template #default="scope">
               <span style="width:60px">{{ scope.row.sortOrder }}</span>
               <el-button type="primary" link @click="handleEditSort(scope.row)" style="margin-left:20px;" :disabled="scope.row.status !== 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 } 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 => {
      applyList.value = res.data.list;
      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.sortOrder;
   sortDialogVisible.value = true;
}

function setOrderSortFn() {
   const params = {
      id: currentSortItem.value.id,
      order: newSortOrder.value
   }
   setOrderSort(params).then(res => {
      // 更新本地列表中的排序值
      const index = applyList.value.findIndex(item => item.id === currentSortItem.value.id);
      if (index !== -1) {
         applyList.value[index].sortOrder = newSortOrder.value;
      }
      sortDialogVisible.value = false;
      proxy.$modal.msgSuccess('修改成功');
   });
}
</script>