<template>
|
<basic-container>
|
<avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :permission="permissionList"
|
v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen"
|
@search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
|
@size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
|
<template #menu-left>
|
<el-button type="primary" icon="el-icon-plus" @click="addAirspace">新增空域</el-button>
|
</template>
|
|
<template #status="{ row }">
|
<el-tag>{{ row.statusName }}</el-tag>
|
</template>
|
<template #category="{ row }">
|
<el-tag>{{ row.categoryName }}</el-tag>
|
</template>
|
|
<template #menu="{ row }">
|
<el-button type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
|
<el-button type="text" icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
|
</template>
|
</avue-crud>
|
</basic-container>
|
|
<AirspaceMap :title="dialogTitle" :type="dialogType" :curEditRow="curEditRow" v-model:show="airspaceMapShow"
|
@submitClick="searchReset" />
|
</template>
|
|
<script setup>
|
import {
|
searchManagementApi,
|
listOfSpotTypesApi,
|
spotTypesCreateApi,
|
editSpotTypeApi,
|
deleteSpotTypeApi,
|
} from '@/api/patchManagement/index'
|
|
import {
|
airspaceEnteringPage,
|
airspaceEnteringDel
|
} from '@/api/airspace/airspace'
|
|
import { ref, computed, watch } from 'vue'
|
import { enable, disable } from '@/api/resource/oss'
|
import { useStore } from 'vuex'
|
import func from '@/utils/func'
|
import { useRouter } from 'vue-router'
|
import AirspaceMap from '@/views/airspace/components/AirspaceMap.vue'
|
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
|
const store = useStore()
|
const router = useRouter()
|
// ---------------- data ----------------
|
const form = ref({})
|
const query = ref({})
|
const creatorOption = ref([])
|
const loading = ref(true)
|
const page = ref({
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
})
|
|
const option = ref({
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
tip: false,
|
searchShow: true,
|
searchMenuSpan: 16,
|
searchMenuPosition: 'right',
|
border: true,
|
index: true,
|
indexLabel: '序号',
|
indexWidth: 60,
|
selection: false,
|
grid: false,
|
menuWidth: 180,
|
labelWidth: 100,
|
dialogWidth: 880,
|
dialogClickModal: false,
|
height: 'auto',
|
calcHeight: 20,
|
refreshBtn: false,
|
gridBtn: false,
|
searchShowBtn: false,
|
columnBtn: false,
|
align: 'center',
|
column: [
|
{
|
label: '名称',
|
prop: 'name',
|
search: true,
|
searchSpan: 4,
|
searchLabelWidth: 54,
|
rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
},
|
{
|
label: '类型',
|
prop: 'flight_type',
|
type: 'select',
|
dicUrl: `/drone-device-core/airspace/page?current=1&size=10000`,
|
props: {
|
label: 'type_name',
|
value: 'id',
|
},
|
dicFormatter (res) {
|
return res.data.records
|
},
|
search: true,
|
searchSpan: 4,
|
searchLabelWidth: 54,
|
rules: [{ required: true, message: '请输入类型', trigger: 'blur' }],
|
},
|
{
|
label: '高度',
|
prop: 'height',
|
rules: [{ required: true, message: '请输入高度', trigger: 'blur' }],
|
},
|
{
|
label: '面积(㎡)',
|
prop: 'area',
|
rules: [{ required: true, message: '请输入面积', trigger: 'blur' }],
|
},
|
{
|
label: '管控时段',
|
prop: 'time_period',
|
type: 'daterange',
|
format: 'YYYY-MM-DD',
|
valueFormat: 'YYYY-MM-DD',
|
startPlaceholder: '开始日期',
|
endPlaceholder: '结束日期',
|
},
|
{
|
label: '创建人',
|
prop: 'nick_name',
|
rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
|
},
|
{
|
label: '创建时间',
|
prop: 'create_time',
|
rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
|
},
|
],
|
})
|
|
const data = ref([])
|
// 获取搜索数据
|
const getsearchManagementApi = () => {
|
searchManagementApi().then(res => {
|
const creatorOptionuniqueMap = new Map()
|
res.data.data.user_names.forEach(item => {
|
const [key, value] = Object.entries(item)[0]
|
if (!creatorOptionuniqueMap.has(key)) {
|
creatorOptionuniqueMap.set(key, value)
|
}
|
})
|
creatorOption.value = Array.from(creatorOptionuniqueMap).map(([key, value]) => ({
|
label: value,
|
value: value,
|
}))
|
})
|
}
|
|
// ---------------- watch ----------------
|
watch(
|
() => form.value.category,
|
() => {
|
const category = func.toInt(form.value.category)
|
option.value.column.filter(item => {
|
if (item.prop === 'appId') {
|
item.display = category === 4
|
}
|
})
|
}
|
)
|
// ---------------- computed ----------------
|
const permission = computed(() => store.getters.permission)
|
const permissionList = computed(() => ({
|
addBtn: validData(permission.value.oss_add),
|
viewBtn: validData(permission.value.oss_view),
|
delBtn: validData(permission.value.oss_delete),
|
editBtn: validData(permission.value.oss_edit),
|
}))
|
|
const airspaceMapShow = ref(false)
|
const curEditRow = ref({})
|
const dialogTitle = ref('新增空域')
|
const dialogType = ref('add')
|
|
// ---------------- methods ----------------
|
const addAirspace = () => {
|
form.value = {}
|
dialogTitle.value = '新增空域'
|
dialogType.value = 'add'
|
airspaceMapShow.value = true
|
}
|
|
const handleEdit = (row) => {
|
curEditRow.value = row
|
dialogTitle.value = '编辑空域'
|
dialogType.value = 'edit'
|
airspaceMapShow.value = true
|
}
|
|
const rowSave = (row, done, loadingFn) => {
|
const createParams = {
|
patches_type: row.patches_type,
|
}
|
spotTypesCreateApi(createParams).then(
|
() => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
done()
|
},
|
error => {
|
console.log(error)
|
loadingFn()
|
}
|
)
|
}
|
|
const rowUpdate = (row, index, done, loadingFn) => {
|
editSpotTypeApi(row).then(
|
res => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
done()
|
},
|
error => {
|
console.log(error)
|
loadingFn()
|
}
|
)
|
}
|
|
const rowDel = row => {
|
ElMessageBox.confirm('确定将选择数据删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => airspaceEnteringDel(row.id))
|
.then(() => {
|
ElMessage.success('操作成功!')
|
onLoad(page.value)
|
})
|
}
|
|
const searchReset = () => {
|
page.value.currentPage = 1
|
page.value.pageSize = 10
|
onLoad(page.value)
|
}
|
|
const searchChange = (params, done) => {
|
page.value.currentPage = 1
|
onLoad(page.value, params)
|
done()
|
}
|
|
const handleEnable = row => {
|
ElMessageBox.confirm('是否确定启用这条配置?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => enable(row.id))
|
.then(() => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
// crudRef.value.toggleSelection()
|
})
|
}
|
|
const handleDisable = row => {
|
ElMessageBox.confirm('是否确定禁用这条配置?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => disable(row.id))
|
.then(() => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
// crudRef.value.toggleSelection()
|
})
|
}
|
|
const beforeOpen = (done, type) => {
|
// if (['edit', 'view'].includes(type)) {
|
// // getDetail(form.value.id).then(res => {
|
// // form.value = res.data.data
|
// // })
|
// }
|
done()
|
}
|
|
const currentChange = currentPage => {
|
page.value.currentPage = currentPage
|
}
|
|
const sizeChange = pageSize => {
|
page.value.pageSize = pageSize
|
}
|
const refreshChange = () => {
|
onLoad(page.value, query.value)
|
}
|
|
const onLoad = (pageParam, params = {}) => {
|
loading.value = true
|
airspaceEnteringPage({
|
current: pageParam.currentPage,
|
size: pageParam.pageSize,
|
name: params.name || '',
|
flightType: params.flight_type || '',
|
}).then(res => {
|
const resData = res.data.data
|
page.value.total = resData.total
|
data.value = resData.records.map(item => ({
|
...item,
|
time_period: item.time_period.split('~'),
|
}))
|
loading.value = false
|
})
|
}
|
|
// ---------------- utils ----------------
|
function validData (value) {
|
return value !== undefined && value !== null && value !== false
|
}
|
|
onMounted(() => {
|
getsearchManagementApi()
|
})
|
</script>
|
|
<style scoped lang="scss"></style>
|
