You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
10 KiB
320 lines
10 KiB
<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="delTitle" |
|
:disabled="!multipleSelection.length" |
|
@confirm.stop="delAll"> |
|
<template #reference> |
|
<div :class="['add-btn mr-2', {'cursor-not-allowed': !multipleSelection.length}]"> |
|
<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-310px)] overflow-auto" |
|
id="tableWrap"> |
|
<el-table v-loading="loading" |
|
:data="list" |
|
@sort-change="handleSort" |
|
@selection-change="handleSelectionChange"> |
|
<el-table-column label="移动" |
|
width="80"> |
|
<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> |
|
<div class="flex items-center mb-2"> |
|
<el-input class="w-[80px]" |
|
placeholder="请输入" |
|
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" |
|
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" |
|
min-width="200" |
|
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 v-if="!row.editing" |
|
class="mx-2 cursor-pointer" |
|
:size="16" |
|
color="#877c7c" |
|
@click="edit(row)"> |
|
<Edit /> |
|
</el-icon> |
|
<el-icon v-if="row.editing" |
|
class="ml-2 cursor-pointer" |
|
:size="16" |
|
color="#877c7c" |
|
@click="cancel(row)"> |
|
<Close /> |
|
</el-icon> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="creator" |
|
min-width="170" |
|
label="创建人"></el-table-column> |
|
<el-table-column prop="createTime" |
|
label="创建时间" |
|
width="180" |
|
sortable="custom"></el-table-column> |
|
<el-table-column label="启用关卡" |
|
width="140" |
|
align="center"> |
|
<template #default="{ row }"> |
|
<el-popconfirm v-if="row.checkpointId" |
|
:title="row.isEnable ? '禁用关卡后，已关联该关卡的判分点将被禁用，确定禁用吗？' : '启用关卡后，已关联该关卡的判分点将被启用，确定启用吗？'" |
|
@confirm.stop="enableSubmit(row)"> |
|
<template #reference> |
|
<el-switch v-if="row.checkpointId" |
|
v-model="row.isEnable" |
|
:active-value="1" |
|
:inactive-value="0" |
|
@change="enableChange(row)" /> |
|
</template> |
|
</el-popconfirm> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" |
|
width="120"> |
|
<template #default="{ row }"> |
|
<el-popconfirm v-if="row.checkpointId" |
|
:title="delTitle" |
|
@confirm.stop="handleDelete([row])"> |
|
<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', {'not-allow': !hadChange}]" |
|
@click="save" |
|
v-loading="saveLoading"> |
|
保存 |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { computed, onMounted, ref, reactive, watch, nextTick } from 'vue'; |
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
|
import { Delete, Edit, Check, MoreFilled, Close } from '@element-plus/icons-vue'; |
|
import { listPass, savePass, updatePass, delPass, updateIsOpen } 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 hadChange = ref<number>(0); |
|
const delTitle: string = '删除关卡后，已关联该关卡的判分点将被禁用，确定删除吗？'; |
|
const params = reactive({ |
|
createDateSort: '', |
|
platformId: 3, |
|
customsPassName: '', |
|
isEnable: '', |
|
}); |
|
const enables = ref<Array<any>>([ |
|
{ |
|
id: 0, |
|
name: '禁用', |
|
}, |
|
{ |
|
id: 1, |
|
name: '启用', |
|
}, |
|
]); |
|
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; |
|
} |
|
}; |
|
onMounted(() => { |
|
getList(); |
|
}); |
|
|
|
watch([params, () => route.query], getList); |
|
const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => { |
|
params.createDateSort = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : ''; |
|
}; |
|
|
|
// 保存 |
|
const save = async () => { |
|
if (!hadChange.value || saveLoading.value) return false; |
|
saveLoading.value = true; |
|
try { |
|
// 编辑 |
|
const param = list.value |
|
.filter((e) => e.checkpointId) |
|
.map((e, i) => { |
|
e.serialNumber = i + 1; |
|
return { |
|
checkpointId: e.checkpointId, |
|
customsPassName: e.customsPassName, |
|
isEnable: e.isEnable, |
|
serialNumber: e.serialNumber, |
|
}; |
|
}); |
|
await updatePass(param); |
|
// 新增 |
|
const addList = list.value.filter((e) => !e.checkpointId && e.customsPassName); |
|
if (addList.length) await savePass(addList); |
|
getList(); |
|
ElMessage.success('保存成功！'); |
|
saveLoading.value = false; |
|
hadChange.value = 0; |
|
} catch (e) { |
|
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]); |
|
hadChange.value = 1; |
|
} |
|
}; |
|
// 多选 |
|
const handleSelectionChange = (val: Record<string, any>[]) => { |
|
multipleSelection.value = val; |
|
}; |
|
// 新增 |
|
const toAdd = () => { |
|
list.value.push({ |
|
customsPassName: '', |
|
editing: true, |
|
isEnable: 0, |
|
}); |
|
nextTick(() => { |
|
document.querySelector('#tableWrap').scrollTo({ |
|
top: document.querySelector('#tableWrap')?.scrollHeight + 200, |
|
behavior: 'smooth', |
|
}); |
|
}); |
|
hadChange.value = 1; |
|
}; |
|
|
|
// 禁启用回调 |
|
const enableChange = (row: Record<string, any>) => { |
|
row.isEnable = row.isEnable ? 0 : 1; |
|
}; |
|
const enableSubmit = async (row: Record<string, any>) => { |
|
row.isEnable = row.isEnable ? 0 : 1; |
|
await updateIsOpen(row.checkpointId, row.isEnable); |
|
}; |
|
// 编辑 |
|
const edit = async (row: Record<string, any>) => { |
|
if (!row.editing) { |
|
row.oldName = row.customsPassName; |
|
} |
|
row.editing = !row.editing; |
|
hadChange.value = 1; |
|
}; |
|
// 取消 |
|
const cancel = async (row: Record<string, any>) => { |
|
row.customsPassName = row.oldName; |
|
row.editing = !row.editing; |
|
}; |
|
// 删除 |
|
const handleDelete = async (rows: Record<string, any>[]) => { |
|
try { |
|
const param = rows.map((e) => { |
|
return { |
|
checkpointId: e.checkpointId, |
|
isDel: 1, |
|
customsPassName: e.customsPassName, |
|
}; |
|
}); |
|
await delPass(rows.map((e) => e.checkpointId)); |
|
getList(); |
|
ElMessage.success('删除成功！'); |
|
} catch (e) {} |
|
}; |
|
// 批量删除 |
|
const delAll = async () => { |
|
handleDelete(multipleSelection.value); |
|
}; |
|
</script>
|
|
|