235 lines
8.1 KiB
Vue
235 lines
8.1 KiB
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>
|