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