tplink摄像头区域信息优化3
This commit is contained in:
parent
4aa71f7d13
commit
67a2417384
|
|
@ -36,8 +36,13 @@ export const syncProject = (params?) => defHttp.get({ url: Api.syncProject, para
|
|||
* 同步区域
|
||||
* @param params
|
||||
*/
|
||||
export const syncRegion = (params?) => defHttp.get({ url: Api.syncRegion, params });
|
||||
export const syncRegionChildren = (params?) => defHttp.get({ url: Api.syncRegionChildren, params });
|
||||
|
||||
/**
|
||||
* 同步子区域
|
||||
* @param params
|
||||
*/
|
||||
export const syncRegion = (params?) => defHttp.get({ url: Api.syncRegion, params });
|
||||
|
||||
/**
|
||||
* 列表接口
|
||||
|
|
|
|||
|
|
@ -94,13 +94,7 @@ export const formSchema: FormSchema[] = [
|
|||
label: '上级名称',
|
||||
field: 'parentName',
|
||||
component: 'Input',
|
||||
dynamicDisabled: ({model})=>{
|
||||
if(model.regionId || model.parentId){
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
dynamicDisabled: true
|
||||
},
|
||||
{
|
||||
label: '机构名称',
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
<a-spin :spinning="syncoading">
|
||||
<div class="j-table-operator" style="width: 100%">
|
||||
<a-button preIcon="ant-design:sync-outlined" @click="loadRootTreeData">刷新</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="addProjectInfo">新增</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreateProject">新增</a-button>
|
||||
<a-button preIcon="ant-design:sync-outlined" @click="syncProjectInfo">同步</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="addRegionInfo">新增下级</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreateRegion">新增下级</a-button>
|
||||
<template v-if="currentRegion !=null">
|
||||
<a-button preIcon="ant-design:sync-outlined" @click="syncRegionInfo">同步下级</a-button>
|
||||
</template>
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<a-input-search placeholder="按名称搜索…" style="margin-bottom: 10px" @search="onSearch" />
|
||||
<!--区域树-->
|
||||
<!--分组树-->
|
||||
<template v-if="treeData.length > 0">
|
||||
<a-tree
|
||||
v-if="!treeReloading"
|
||||
|
|
@ -25,26 +25,55 @@
|
|||
v-model:expandedKeys="expandedKeys"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #title="{ key: treeKey, title, dataRef }">
|
||||
<a-dropdown :trigger="['contextmenu']">
|
||||
<span>{{ title }}</span>
|
||||
<template #overlay>
|
||||
<a-menu @click="">
|
||||
<a-menu-item key="1" @click="onAddChild(dataRef)">添加子级</a-menu-item>
|
||||
<a-menu-item key="2" @click="handleDeleteNode(dataRef)">
|
||||
<span style="color: red">删除</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-tree>
|
||||
</template>
|
||||
<a-empty v-else description="暂无数据" />
|
||||
</a-spin>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
<!-- 表单分组 -->
|
||||
<ProjectInfoDrawer @register="registerProjectDrawer" @success="handleSuccess" />
|
||||
<RegionInfoDrawer @register="registerRegionDrawer" @success="handleSuccess" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, ref } from 'vue';
|
||||
import {createVNode, nextTick, ref} from 'vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useMethods } from '/@/hooks/system/useMethods';
|
||||
const { createMessage } = useMessage();
|
||||
import { queryProjectTreeSync, queryRegionTreeSync, syncProject, syncRegion, syncRegionChildren } from '@/views/iot/tplink/region/RegionInfo.api';
|
||||
import {
|
||||
deleteRegion,
|
||||
queryProjectTreeSync,
|
||||
queryRegionTreeSync,
|
||||
syncProject,
|
||||
syncRegion,
|
||||
syncRegionChildren
|
||||
} from '@/views/iot/tplink/region/RegionInfo.api';
|
||||
import {useDrawer} from "@/components/Drawer";
|
||||
import ProjectInfoDrawer from '@/views/iot/tplink/project/components/ProjectInfoDrawer.vue';
|
||||
import RegionInfoDrawer from './RegionInfoDrawer.vue';
|
||||
import {Modal} from "ant-design-vue";
|
||||
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||
import {deletePrject} from "@/views/iot/tplink/project/ProjectInfo.api";
|
||||
|
||||
const emit = defineEmits(['select', 'rootTreeData']);
|
||||
const syncoading = ref<boolean>(false);
|
||||
const loading = ref<boolean>(false);
|
||||
// 区域树列表数据
|
||||
// 分组树列表数据
|
||||
const treeData = ref<any[]>([]);
|
||||
// 当前选中的项
|
||||
const checkedKeys = ref<any[]>([]);
|
||||
|
|
@ -56,10 +85,13 @@
|
|||
const treeReloading = ref<boolean>(false);
|
||||
// 树父子是否关联
|
||||
const checkStrictly = ref<boolean>(true);
|
||||
// 当前选中的区域
|
||||
// 当前选中的分组
|
||||
const currentRegion = ref<any>(null);
|
||||
//注册drawer
|
||||
const [registerProjectDrawer, { openDrawer : openProjectDrawer }] = useDrawer();
|
||||
const [registerRegionDrawer, { openDrawer : openRegionDrawer }] = useDrawer();
|
||||
|
||||
// 加载顶级区域信息
|
||||
// 加载顶级分组信息
|
||||
async function loadRootTreeData() {
|
||||
try {
|
||||
loading.value = true;
|
||||
|
|
@ -91,7 +123,7 @@
|
|||
loadRootTreeData();
|
||||
|
||||
/**
|
||||
* 加载子级区域信息
|
||||
* 加载子级分组信息
|
||||
*/
|
||||
async function loadChildrenTreeData(treeNode) {
|
||||
try {
|
||||
|
|
@ -186,7 +218,7 @@
|
|||
}
|
||||
|
||||
/**
|
||||
* 同步区域
|
||||
* 同步分组
|
||||
*/
|
||||
async function syncRegionInfo(){
|
||||
let data = currentRegion.value;
|
||||
|
|
@ -208,6 +240,123 @@
|
|||
await loadRootTreeData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleCreateProject() {
|
||||
openProjectDrawer(true, {
|
||||
isUpdate: false,
|
||||
showFooter: true,
|
||||
tenantSaas: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增下级
|
||||
*/
|
||||
function handleCreateRegion() {
|
||||
let data = currentRegion.value;
|
||||
if (data == null) {
|
||||
createMessage.warning('请先选择一个节点');
|
||||
return;
|
||||
}
|
||||
let record = {
|
||||
projectId: data.projectId,
|
||||
projectName: data.projectName,
|
||||
parentId: data.regionId,
|
||||
parentName: data.regionName,
|
||||
};
|
||||
openRegionDrawer(true, {
|
||||
record,
|
||||
isUpdate: false,
|
||||
showFooter: true,
|
||||
tenantSaas: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加子级
|
||||
*/
|
||||
function onAddChild(data = currentRegion.value){
|
||||
if (data == null) {
|
||||
createMessage.warning('请先选择一个节点');
|
||||
return;
|
||||
}
|
||||
console.log(data);
|
||||
let record = {
|
||||
projectId: data.projectId,
|
||||
projectName: data.projectName,
|
||||
parentId: data.regionId,
|
||||
parentName: data.regionName,
|
||||
};
|
||||
console.log(record);
|
||||
openRegionDrawer(true, {
|
||||
record,
|
||||
isUpdate: false,
|
||||
showFooter: true,
|
||||
tenantSaas: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*删除节点
|
||||
*/
|
||||
function handleDeleteNode(data = currentRegion.value){
|
||||
if (data == null) {
|
||||
createMessage.warning('请先选择一个节点');
|
||||
return;
|
||||
}
|
||||
if(data.regionId == null){
|
||||
handleDeleteProject(data);
|
||||
}else{
|
||||
handleDelete(data);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除项目
|
||||
*/
|
||||
function handleDeleteProject(record: Recordable) {
|
||||
Modal.confirm({
|
||||
title: '删除项目',
|
||||
width: '500px',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: createVNode('div', { style: 'color:red;' }, '项目删除后，与之相关信息将失效，确定要删除该项目吗？'),
|
||||
okText: '确定',
|
||||
onOk() {
|
||||
deletePrject(record, handleSuccess);
|
||||
},
|
||||
onCancel() {
|
||||
// console.log('Cancel');
|
||||
},
|
||||
class: 'test',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除分组
|
||||
*/
|
||||
function handleDelete(record: Recordable) {
|
||||
Modal.confirm({
|
||||
title: '删除分组',
|
||||
width: '500px',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: createVNode('div', { style: 'color:red;' }, '分组删除后，该分组下的所有设备将被转移，确定要删除该分组吗？'),
|
||||
okText: '确定',
|
||||
onOk() {
|
||||
deleteRegion(record, handleSuccess);
|
||||
},
|
||||
onCancel() {
|
||||
// console.log('Cancel');
|
||||
},
|
||||
class: 'test',
|
||||
});
|
||||
}
|
||||
|
||||
function handleSuccess(){
|
||||
loadRootTreeData();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
loadRootTreeData,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue