|
|
|
@ -18,7 +18,7 @@ |
|
|
|
|
alt="" |
|
|
|
|
class="icon" /> |
|
|
|
|
</div> |
|
|
|
|
<el-popconfirm title="您确定删除吗?" |
|
|
|
|
<el-popconfirm :title="delTitle" |
|
|
|
|
@confirm.stop="delAll"> |
|
|
|
|
<template #reference> |
|
|
|
|
<div class="add-btn mr-2"> |
|
|
|
@ -48,23 +48,31 @@ |
|
|
|
|
@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 #default="{ row, $index }"> |
|
|
|
|
<el-popover placement="right" |
|
|
|
|
trigger="hover"> |
|
|
|
|
<template #reference> |
|
|
|
|
<el-icon class="rotate-90 cursor-pointer" |
|
|
|
|
:size="16" |
|
|
|
|
color="#877c7c"> |
|
|
|
|
<MoreFilled /> |
|
|
|
|
</el-icon> |
|
|
|
|
</template> |
|
|
|
|
</el-dropdown> |
|
|
|
|
|
|
|
|
|
<div class="flex items-center mb-2"> |
|
|
|
|
<el-input class="w-[80px]" |
|
|
|
|
v-model.number="row.serial"></el-input> |
|
|
|
|
<el-icon class="ml-2 cursor-pointer" |
|
|
|
|
:size="16" |
|
|
|
|
color="#877c7c" |
|
|
|
|
@click.stop="submitSerial(row, $index, row.serial)"> |
|
|
|
|
<Check /> |
|
|
|
|
</el-icon> |
|
|
|
|
</div> |
|
|
|
|
<p class="my-2 cursor-pointer" |
|
|
|
|
@click="submitSerial(row, $index, 1)">置顶</p> |
|
|
|
|
<p class="cursor-pointer" |
|
|
|
|
@click="submitSerial(row, $index, list.length)">置底</p> |
|
|
|
|
</el-popover> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column type="selection" |
|
|
|
@ -85,13 +93,20 @@ |
|
|
|
|
placeholder="请输入关卡名称" |
|
|
|
|
v-model="row.customsPassName"></el-input> |
|
|
|
|
<span v-else>{{ row.customsPassName }}</span> |
|
|
|
|
<el-icon class="ml-2 cursor-pointer" |
|
|
|
|
<el-icon class="mx-2 cursor-pointer" |
|
|
|
|
:size="16" |
|
|
|
|
color="#877c7c" |
|
|
|
|
@click="edit(row)"> |
|
|
|
|
<Check v-if="row.editing" /> |
|
|
|
|
<Edit v-else /> |
|
|
|
|
</el-icon> |
|
|
|
|
<el-icon v-if="row.editing" |
|
|
|
|
class="cursor-pointer" |
|
|
|
|
:size="16" |
|
|
|
|
color="#877c7c" |
|
|
|
|
@click="cancel(row)"> |
|
|
|
|
<Close /> |
|
|
|
|
</el-icon> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
@ -107,15 +122,14 @@ |
|
|
|
|
<el-switch v-if="row.checkpointId" |
|
|
|
|
v-model="row.isEnable" |
|
|
|
|
:active-value="1" |
|
|
|
|
:inactive-value="0" |
|
|
|
|
@change="switchEnable(row)" /> |
|
|
|
|
:inactive-value="0" /> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" |
|
|
|
|
width="140"> |
|
|
|
|
<template #default="{ row }"> |
|
|
|
|
<el-popconfirm v-if="row.checkpointId" |
|
|
|
|
title="您确定删除吗?" |
|
|
|
|
:title="delTitle" |
|
|
|
|
@confirm.stop="handleDelete([row.checkpointId])"> |
|
|
|
|
<template #reference> |
|
|
|
|
<el-button type="text" |
|
|
|
@ -128,7 +142,8 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="filter flex justify-end mt-3"> |
|
|
|
|
<div class="add-btn" |
|
|
|
|
@click="save"> |
|
|
|
|
@click="save" |
|
|
|
|
v-loading="saveLoading"> |
|
|
|
|
保存 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -138,7 +153,7 @@ |
|
|
|
|
<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 { Delete, Edit, Check, MoreFilled, Close } from '@element-plus/icons-vue'; |
|
|
|
|
import { listPass, savePass, updatePass } from '@/api/config'; |
|
|
|
|
import Search from '@/components/Search.vue'; |
|
|
|
|
import { useRouter, useRoute } from 'vue-router'; |
|
|
|
@ -150,6 +165,7 @@ const projectId = +Cookies.get('sand-projectId'); |
|
|
|
|
const levelId = +Cookies.get('sand-level'); |
|
|
|
|
const height = window.innerHeight - 270; |
|
|
|
|
const tableRef = ref<InstanceType<typeof ElTable>>(); |
|
|
|
|
const delTitle: string = '删除关卡后,这个关卡的数据将被删除,确定删除吗?'; |
|
|
|
|
const params = reactive({ |
|
|
|
|
platformId: 3, |
|
|
|
|
customsPassName: '', |
|
|
|
@ -168,12 +184,16 @@ const enables = ref<Array<any>>([ |
|
|
|
|
]); |
|
|
|
|
const list = ref<Array<any>>([]); |
|
|
|
|
const loading = ref<boolean>(false); |
|
|
|
|
const saveLoading = ref<boolean>(false); |
|
|
|
|
const multipleSelection = ref<Record<string, any>[]>([]); |
|
|
|
|
// 列表 |
|
|
|
|
const getList = async () => { |
|
|
|
|
loading.value = true; |
|
|
|
|
try { |
|
|
|
|
const { data } = await listPass(params); |
|
|
|
|
data.forEach((e, i) => { |
|
|
|
|
e.serial = ''; |
|
|
|
|
}); |
|
|
|
|
list.value = data; |
|
|
|
|
} finally { |
|
|
|
|
loading.value = false; |
|
|
|
@ -186,15 +206,30 @@ onMounted(() => { |
|
|
|
|
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, |
|
|
|
|
const save = async () => { |
|
|
|
|
if (saveLoading.value) return false; |
|
|
|
|
saveLoading.value = true; |
|
|
|
|
const param = list.value.map((e, i) => { |
|
|
|
|
e.serialNumber = i + 1; |
|
|
|
|
return { |
|
|
|
|
checkpointId: e.checkpointId, |
|
|
|
|
customsPassName: e.customsPassName, |
|
|
|
|
isEnable: e.isEnable, |
|
|
|
|
serialNumber: e.serialNumber, |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
await updatePass(param); |
|
|
|
|
getList(); |
|
|
|
|
ElMessage.success('保存成功!'); |
|
|
|
|
saveLoading.value = false; |
|
|
|
|
}; |
|
|
|
|
// 输入序号排序 |
|
|
|
|
const submitSerial = (row: Record<string, any>, oldIndex: number, newIndex: number) => { |
|
|
|
|
if (newIndex) { |
|
|
|
|
const temp = list.value.splice(oldIndex, 1); |
|
|
|
|
row.serialNumber = newIndex; |
|
|
|
|
list.value.splice(newIndex - 1, 0, temp[0]); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
// 多选 |
|
|
|
|
const handleSelectionChange = (val: Record<string, any>[]) => { |
|
|
|
@ -202,15 +237,11 @@ const handleSelectionChange = (val: Record<string, any>[]) => { |
|
|
|
|
}; |
|
|
|
|
// 新增 |
|
|
|
|
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', |
|
|
|
@ -220,37 +251,25 @@ const toAdd = () => { |
|
|
|
|
|
|
|
|
|
// 编辑 |
|
|
|
|
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(); |
|
|
|
|
if (!row.editing) { |
|
|
|
|
row.oldName = row.customsPassName; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
row.editing = !row.editing; |
|
|
|
|
}; |
|
|
|
|
// 禁启用 |
|
|
|
|
const switchEnable = async (row: Record<string, any>) => { |
|
|
|
|
if (row.checkpointId) { |
|
|
|
|
await updatePass([ |
|
|
|
|
{ |
|
|
|
|
checkpointId: row.checkpointId, |
|
|
|
|
isEnable: row.isEnable, |
|
|
|
|
}, |
|
|
|
|
]); |
|
|
|
|
getList(); |
|
|
|
|
} |
|
|
|
|
// 取消 |
|
|
|
|
const cancel = async (row: Record<string, any>) => { |
|
|
|
|
row.customsPassName = row.oldName; |
|
|
|
|
row.editing = !row.editing; |
|
|
|
|
}; |
|
|
|
|
// 删除 |
|
|
|
|
const handleDelete = async (id: number[]) => { |
|
|
|
|
id.map((e) => (e.isDel = 1)); |
|
|
|
|
await updatePass(id); |
|
|
|
|
const param = id.map((e) => { |
|
|
|
|
return { |
|
|
|
|
checkpointId: e, |
|
|
|
|
isDel: 1, |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
await updatePass(param); |
|
|
|
|
getList(); |
|
|
|
|
ElMessage.success('删除成功!'); |
|
|
|
|
}; |
|
|
|
|