parent
ecec0c7dd6
commit
26d3172827
18 changed files with 373 additions and 95 deletions
@ -0,0 +1,261 @@ |
||||
<template> |
||||
<div class="block"> |
||||
<div class="flex justify-between items-center mb-5"> |
||||
<search v-model="params.customsPassName" |
||||
@change="getList"></search> |
||||
<div class="filter"> |
||||
<div class="select"> |
||||
<el-select v-model="params.isEnable" |
||||
placeholder="启用状态" |
||||
size="large" |
||||
clearable> |
||||
<el-option v-for="item in enables" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" /> |
||||
</el-select> |
||||
<img src="@/assets/images/7.png" |
||||
alt="" |
||||
class="icon" /> |
||||
</div> |
||||
<el-popconfirm title="您确定删除吗？" |
||||
@confirm.stop="delAll"> |
||||
<template #reference> |
||||
<div class="add-btn mr-2"> |
||||
<el-icon :size="24" |
||||
color="#fff"> |
||||
<Delete /> |
||||
</el-icon> |
||||
删除关卡 |
||||
</div> |
||||
</template> |
||||
</el-popconfirm> |
||||
|
||||
<div class="add-btn" |
||||
@click="toAdd"> |
||||
<img src="@/assets/images/plus.png" |
||||
alt="" |
||||
class="icon" /> |
||||
新增关卡 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="h-[calc(100vh-270px)] overflow-auto" |
||||
id="tableWrap"> |
||||
<el-table ref="tableRef" |
||||
v-loading="loading" |
||||
:data="list" |
||||
@selection-change="handleSelectionChange"> |
||||
<el-table-column label="移动" |
||||
width="100"> |
||||
<template #default="{ row }"> |
||||
<el-dropdown @command="command => move(command,row)"> |
||||
<el-icon class="rotate-90 cursor-pointer" |
||||
:size="16" |
||||
color="#877c7c"> |
||||
<MoreFilled /> |
||||
</el-icon> |
||||
<template #dropdown> |
||||
<el-dropdown-menu> |
||||
<el-dropdown-item command="up">上移</el-dropdown-item> |
||||
<el-dropdown-item command="down">下移</el-dropdown-item> |
||||
<el-dropdown-item command="top">置顶</el-dropdown-item> |
||||
<el-dropdown-item command="bottom">置底</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
|
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column type="selection" |
||||
width="55" /> |
||||
<el-table-column label="序号" |
||||
width="80" |
||||
align="center"> |
||||
<template #default="{ row, $index }"> |
||||
{{ $index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="customsPassName" |
||||
label="关卡名称"> |
||||
<template #default="{ row }"> |
||||
<div class="flex items-center"> |
||||
<el-input v-if="row.editing" |
||||
class="w-[250px]" |
||||
placeholder="请输入关卡名称" |
||||
v-model="row.customsPassName"></el-input> |
||||
<span v-else>{{ row.customsPassName }}</span> |
||||
<el-icon class="ml-2 cursor-pointer" |
||||
:size="16" |
||||
color="#877c7c" |
||||
@click="edit(row)"> |
||||
<Check v-if="row.editing" /> |
||||
<Edit v-else /> |
||||
</el-icon> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="creator" |
||||
label="创建人"></el-table-column> |
||||
<el-table-column prop="createTime" |
||||
label="创建时间" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column label="启用关卡" |
||||
width="140" |
||||
align="center"> |
||||
<template #default="{ row }"> |
||||
<el-switch v-if="row.checkpointId" |
||||
v-model="row.isEnable" |
||||
:active-value="1" |
||||
:inactive-value="0" |
||||
@change="switchEnable(row)" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" |
||||
width="140"> |
||||
<template #default="{ row }"> |
||||
<el-popconfirm v-if="row.checkpointId" |
||||
title="您确定删除吗？" |
||||
@confirm.stop="handleDelete([row.checkpointId])"> |
||||
<template #reference> |
||||
<el-button type="text" |
||||
size="small">删除</el-button> |
||||
</template> |
||||
</el-popconfirm> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="filter flex justify-end mt-3"> |
||||
<div class="add-btn" |
||||
@click="save"> |
||||
保存 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { computed, onMounted, ref, reactive, watch, nextTick } from 'vue'; |
||||
import { ElMessage, ElTable } from 'element-plus'; |
||||
import { Delete, Edit, Check, MoreFilled } from '@element-plus/icons-vue'; |
||||
import { listPass, savePass, updatePass } from '@/api/config'; |
||||
import Search from '@/components/Search.vue'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
import Cookies from 'js-cookie'; |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const projectId = +Cookies.get('sand-projectId'); |
||||
const levelId = +Cookies.get('sand-level'); |
||||
const height = window.innerHeight - 270; |
||||
const tableRef = ref<InstanceType<typeof ElTable>>(); |
||||
const params = reactive({ |
||||
platformId: 3, |
||||
customsPassName: '', |
||||
isEnable: '', |
||||
}); |
||||
const table = ref<any>(); |
||||
const enables = ref<Array<any>>([ |
||||
{ |
||||
id: 0, |
||||
name: '禁用', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '启用', |
||||
}, |
||||
]); |
||||
const list = ref<Array<any>>([]); |
||||
const loading = ref<boolean>(false); |
||||
const multipleSelection = ref<Record<string, any>[]>([]); |
||||
// 列表 |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const { data } = await listPass(params); |
||||
list.value = data; |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
onMounted(() => { |
||||
getList(); |
||||
}); |
||||
|
||||
watch([params, () => route.query], getList); |
||||
|
||||
// 保存 |
||||
const save = () => {}; |
||||
// 移动 |
||||
const move = async (command: string | number | object, row: Record<string, any>) => { |
||||
const type = command === 'up' ? 1 : command === 'down' ? 2 : command === 'top' ? 3 : 4; |
||||
await updatePass({ |
||||
checkpointId: row.checkpointId, |
||||
type, |
||||
}); |
||||
getList(); |
||||
}; |
||||
// 多选 |
||||
const handleSelectionChange = (val: Record<string, any>[]) => { |
||||
multipleSelection.value = val; |
||||
}; |
||||
// 新增 |
||||
const toAdd = () => { |
||||
console.log(22, window.innerHeight); |
||||
list.value.push({ |
||||
customsPassName: '', |
||||
editing: true, |
||||
}); |
||||
nextTick(() => { |
||||
// tableRef.value.scrollTo({ |
||||
// row: list.value.length, |
||||
// }); |
||||
document.querySelector('#tableWrap').scrollTo({ |
||||
top: document.querySelector('#tableWrap')?.scrollHeight + 200, |
||||
behavior: 'smooth', |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
// 编辑 |
||||
const edit = async (row: Record<string, any>) => { |
||||
if (row.editing) { |
||||
const param = { |
||||
checkpointId: row.checkpointId || '', |
||||
customsPassName: row.customsPassName, |
||||
}; |
||||
if (row.checkpointId) { |
||||
await updatePass(param); |
||||
} else { |
||||
await savePass(param); |
||||
} |
||||
getList(); |
||||
} |
||||
|
||||
row.editing = !row.editing; |
||||
}; |
||||
// 禁启用 |
||||
const switchEnable = async (row: Record<string, any>) => { |
||||
if (row.checkpointId) { |
||||
await updatePass([ |
||||
{ |
||||
checkpointId: row.checkpointId, |
||||
isEnable: row.isEnable, |
||||
}, |
||||
]); |
||||
getList(); |
||||
} |
||||
}; |
||||
// 删除 |
||||
const handleDelete = async (id: number[]) => { |
||||
id.map((e) => (e.isDel = 1)); |
||||
await updatePass(id); |
||||
getList(); |
||||
ElMessage.success('删除成功！'); |
||||
}; |
||||
// 批量删除 |
||||
const delAll = async () => { |
||||
handleDelete(multipleSelection.value.map((e) => e.checkpointId)); |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue