Compare commits
2 Commits
9f1729805b
...
906e4c7318
Author | SHA1 | Date |
---|---|---|
|
906e4c7318 | |
|
f6e2a5ad9b |
|
@ -157,7 +157,7 @@
|
||||||
import { getValueType } from '/@/utils';
|
import { getValueType } from '/@/utils';
|
||||||
import { Form } from 'ant-design-vue';
|
import { Form } from 'ant-design-vue';
|
||||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||||
import { getVideoParams,setVideoParams } from "@/views/iot/tplink/camera/camera.api";
|
import { getVideoParams,setVideoParams } from "../camera.api";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: { type: Object, default: () => ({}) },
|
data: { type: Object, default: () => ({}) },
|
||||||
|
|
|
@ -131,7 +131,7 @@
|
||||||
getTamperNotif,
|
getTamperNotif,
|
||||||
setTamperNotif,
|
setTamperNotif,
|
||||||
testAudio
|
testAudio
|
||||||
} from "@/views/iot/tplink/camera/camera.api";
|
} from "../camera.api";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: { type: Object, default: () => ({}) },
|
data: { type: Object, default: () => ({}) },
|
||||||
|
|
|
@ -216,7 +216,7 @@ import {
|
||||||
setImageCommon,
|
setImageCommon,
|
||||||
configRecovery,
|
configRecovery,
|
||||||
getPreviewUrl,
|
getPreviewUrl,
|
||||||
} from "@/views/iot/tplink/camera/camera.api";
|
} from "../camera.api";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: { type: Object, default: () => ({}) },
|
data: { type: Object, default: () => ({}) },
|
||||||
|
@ -350,7 +350,6 @@ import {
|
||||||
"deviceIndex": deviceIndex,
|
"deviceIndex": deviceIndex,
|
||||||
"type": "switch"
|
"type": "switch"
|
||||||
}).then(res=>{
|
}).then(res=>{
|
||||||
// console.log(res);
|
|
||||||
formData.flip_type = res.flip_type; //画面镜像翻转
|
formData.flip_type = res.flip_type; //画面镜像翻转
|
||||||
formData.night_vision_mode = res.night_vision_mode; //照明模式
|
formData.night_vision_mode = res.night_vision_mode; //照明模式
|
||||||
});
|
});
|
||||||
|
|
|
@ -19,13 +19,12 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {defineComponent, ref, computed, unref, useAttrs, createVNode, h} from 'vue';
|
import {defineComponent, ref, computed, unref, useAttrs, createVNode, h} from 'vue';
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||||
import { formSchema } from "@/views/iot/tplink/camera/camera.data";
|
|
||||||
import { update,rebootDevice } from '@/views/iot/tplink/camera/camera.api';
|
|
||||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||||
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
||||||
import { getTenantId } from "/@/utils/auth";
|
|
||||||
import {Modal} from "ant-design-vue";
|
import {Modal} from "ant-design-vue";
|
||||||
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||||
|
import { formSchema } from "../camera.data";
|
||||||
|
import { update,rebootDevice } from '../camera.api';
|
||||||
|
|
||||||
// 声明Emits
|
// 声明Emits
|
||||||
const emit = defineEmits(['success', 'register']);
|
const emit = defineEmits(['success', 'register']);
|
||||||
|
@ -111,7 +110,6 @@ function restartNow(record){
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onCancel() {
|
onCancel() {
|
||||||
// console.log('Cancel');
|
|
||||||
},
|
},
|
||||||
class: 'test',
|
class: 'test',
|
||||||
});
|
});
|
||||||
|
|
|
@ -22,8 +22,8 @@
|
||||||
import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
|
import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
|
||||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||||
import { useListPage } from '/@/hooks/system/useListPage';
|
import { useListPage } from '/@/hooks/system/useListPage';
|
||||||
import { columns, searchFormSchema } from '@/views/iot/tplink/camera/camera.data';
|
import { columns, searchFormSchema } from '../camera.data';
|
||||||
import { list } from '@/views/iot/tplink/camera/camera.api';
|
import { list } from '../camera.api';
|
||||||
import { useUserStore } from '/@/store/modules/user';
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
import { useDrawer } from "@/components/Drawer";
|
import { useDrawer } from "@/components/Drawer";
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
@ -78,10 +78,8 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
|
||||||
watch(
|
watch(
|
||||||
() => props.data,
|
() => props.data,
|
||||||
async () => {
|
async () => {
|
||||||
console.log(props.data);
|
|
||||||
queryParam.projectId = props.data.projectId;
|
queryParam.projectId = props.data.projectId;
|
||||||
queryParam.regionId = props.data.regionId;
|
queryParam.regionId = props.data.regionId;
|
||||||
console.log(queryParam);
|
|
||||||
let record = unref(props.data);
|
let record = unref(props.data);
|
||||||
if (typeof record !== 'object') {
|
if (typeof record !== 'object') {
|
||||||
record = {};
|
record = {};
|
||||||
|
@ -160,7 +158,6 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
|
||||||
* 左侧树选择后触发
|
* 左侧树选择后触发
|
||||||
*/
|
*/
|
||||||
function onTreeSelect(data) {
|
function onTreeSelect(data) {
|
||||||
console.log('onTreeSelect: ', data);
|
|
||||||
// departData.value = data;
|
// departData.value = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -168,7 +165,6 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
|
||||||
* 左侧树rootTreeData触发
|
* 左侧树rootTreeData触发
|
||||||
*/
|
*/
|
||||||
function onRootTreeData(data) {
|
function onRootTreeData(data) {
|
||||||
console.log('onRootTreeData: ', data);
|
|
||||||
// rootTreeData.value = data;
|
// rootTreeData.value = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
import { useMessage } from '/@/hooks/web/useMessage';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||||||
import { useMethods } from '/@/hooks/system/useMethods';
|
import { useMethods } from '/@/hooks/system/useMethods';
|
||||||
const { createMessage } = useMessage();
|
const { createMessage } = useMessage();
|
||||||
import { queryProjectTreeSync, queryRegionTreeSync, syncProject, syncRegion } from '@/views/iot/tplink/camera/camera.api';
|
import { queryProjectTreeSync, queryRegionTreeSync, syncProject, syncRegion } from '../camera.api';
|
||||||
|
|
||||||
const emit = defineEmits(['select', 'rootTreeData']);
|
const emit = defineEmits(['select', 'rootTreeData']);
|
||||||
const syncoading = ref<boolean>(false);
|
const syncoading = ref<boolean>(false);
|
||||||
|
@ -152,7 +152,6 @@
|
||||||
* 设置当前选中的行
|
* 设置当前选中的行
|
||||||
*/
|
*/
|
||||||
function setSelectedKey(key: string, data?: object) {
|
function setSelectedKey(key: string, data?: object) {
|
||||||
console.log('setSelectedKey: ', key);
|
|
||||||
selectedKeys.value = [key];
|
selectedKeys.value = [key];
|
||||||
if (data) {
|
if (data) {
|
||||||
currentRegion.value = data;
|
currentRegion.value = data;
|
||||||
|
@ -164,7 +163,6 @@
|
||||||
* 树选择事件
|
* 树选择事件
|
||||||
*/
|
*/
|
||||||
function onSelect(selKeys, event) {
|
function onSelect(selKeys, event) {
|
||||||
console.log('onSelect: ', selKeys, event);
|
|
||||||
if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
|
if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
|
||||||
setSelectedKey(selKeys[0], event.selectedNodes[0]);
|
setSelectedKey(selKeys[0], event.selectedNodes[0]);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -101,7 +101,7 @@
|
||||||
import {
|
import {
|
||||||
getAlarmInfo, setAlarmInfo,
|
getAlarmInfo, setAlarmInfo,
|
||||||
getAlarmPlan, setAlarmPlan,
|
getAlarmPlan, setAlarmPlan,
|
||||||
} from "@/views/iot/tplink/camera/camera.api";
|
} from "../camera.api";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: { type: Object, default: () => ({}) },
|
data: { type: Object, default: () => ({}) },
|
||||||
|
@ -365,23 +365,6 @@
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
// console.log('星期一', mondayArr.value);
|
|
||||||
// console.log('星期二', tuesdayArr.value);
|
|
||||||
// console.log('星期三', wednesdayArr.value);
|
|
||||||
// console.log('星期四', thursdayArr.value);
|
|
||||||
// console.log('星期五', fridayArr.value);
|
|
||||||
// console.log('星期六', saturdayArr.value);
|
|
||||||
// console.log('星期七', sundayArr.value);
|
|
||||||
|
|
||||||
// console.log('星期一', mondayMergeArr.value);
|
|
||||||
// console.log('星期二', tuesdayMergeArr.value);
|
|
||||||
// console.log('星期三', wednesdayMergeArr.value);
|
|
||||||
// console.log('星期四', thursdayMergeArr.value);
|
|
||||||
// console.log('星期五', fridayMergeArr.value);
|
|
||||||
// console.log('星期六', saturdayMergeArr.value);
|
|
||||||
// console.log('星期七', sundayMergeArr.value);
|
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -540,7 +523,6 @@
|
||||||
* 鼠标按下
|
* 鼠标按下
|
||||||
*/
|
*/
|
||||||
function handleMouseDown(){
|
function handleMouseDown(){
|
||||||
// console.log('鼠标按下', event);
|
|
||||||
planVisible.value = true;
|
planVisible.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -548,7 +530,6 @@
|
||||||
* 鼠标抬起
|
* 鼠标抬起
|
||||||
*/
|
*/
|
||||||
function handleMouseUp(){
|
function handleMouseUp(){
|
||||||
// console.log('鼠标抬起', event);
|
|
||||||
planVisible.value = false;
|
planVisible.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
import { useMessage } from '/@/hooks/web/useMessage';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||||||
import { getValueType } from '/@/utils';
|
import { getValueType } from '/@/utils';
|
||||||
import { Form } from 'ant-design-vue';
|
import { Form } from 'ant-design-vue';
|
||||||
import { getMultitransUrl } from "@/views/iot/tplink/camera/camera.api";
|
import { getMultitransUrl } from "../camera.api";
|
||||||
|
|
||||||
const TumsPlayer = window['tums-player'].default;
|
const TumsPlayer = window['tums-player'].default;
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -148,7 +148,6 @@
|
||||||
* 销毁
|
* 销毁
|
||||||
*/
|
*/
|
||||||
function destroy(){
|
function destroy(){
|
||||||
console.log("destroy");
|
|
||||||
if (player.value){
|
if (player.value){
|
||||||
player.value.destroy().then(() => { }); // 回放销毁时自动调用接口,跨域导致失败
|
player.value.destroy().then(() => { }); // 回放销毁时自动调用接口,跨域导致失败
|
||||||
initContainerMultitrans.value = false
|
initContainerMultitrans.value = false
|
||||||
|
|
|
@ -90,7 +90,7 @@
|
||||||
getOsd,
|
getOsd,
|
||||||
setOsd,
|
setOsd,
|
||||||
getPreviewUrl
|
getPreviewUrl
|
||||||
} from "@/views/iot/tplink/camera/camera.api";
|
} from "../camera.api";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: { type: Object, default: () => ({}) },
|
data: { type: Object, default: () => ({}) },
|
||||||
|
|
|
@ -123,8 +123,8 @@
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import type { TabsProps } from 'ant-design-vue';
|
import type { TabsProps } from 'ant-design-vue';
|
||||||
import { useListPage } from "@/hooks/system/useListPage";
|
import { useListPage } from "@/hooks/system/useListPage";
|
||||||
import { getImageCommon,setImageCommon } from "@/views/iot/tplink/camera/camera.api";
|
import { getImageCommon,setImageCommon } from "../camera.api";
|
||||||
import { recordingColumns,searchRecording } from "@/views/iot/tplink/camera/camera.data";
|
import { recordingColumns,searchRecording } from "../camera.data";
|
||||||
import CameraCommonForm from './CameraCommonForm.vue';//画面公共信息
|
import CameraCommonForm from './CameraCommonForm.vue';//画面公共信息
|
||||||
import CameraOsdForm from './CameraOsdForm.vue';//OSD信息
|
import CameraOsdForm from './CameraOsdForm.vue';//OSD信息
|
||||||
import CameraBitrateForm from './CameraBitrateForm.vue';//码流参数
|
import CameraBitrateForm from './CameraBitrateForm.vue';//码流参数
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
import {
|
import {
|
||||||
getPlaybackUrlList,
|
getPlaybackUrlList,
|
||||||
deletePlaybackChn
|
deletePlaybackChn
|
||||||
} from "@/views/iot/tplink/camera/camera.api";
|
} from "../camera.api";
|
||||||
|
|
||||||
const TumsPlayer = window['tums-player'].default;
|
const TumsPlayer = window['tums-player'].default;
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -110,7 +110,6 @@
|
||||||
"endTime":formData.endTime,
|
"endTime":formData.endTime,
|
||||||
}).then(res=>{
|
}).then(res=>{
|
||||||
confirmLoading.value=false;
|
confirmLoading.value=false;
|
||||||
// console.log(res);
|
|
||||||
const error = res.error;
|
const error = res.error;
|
||||||
if(error==null||error==''){
|
if(error==null||error==''){
|
||||||
formData.sessionId = '';
|
formData.sessionId = '';
|
||||||
|
@ -119,15 +118,6 @@
|
||||||
formData.sessionId += item.sessionId+","
|
formData.sessionId += item.sessionId+","
|
||||||
let startTime = item.startTime*1000;
|
let startTime = item.startTime*1000;
|
||||||
let endTime = item.endTime*1000;
|
let endTime = item.endTime*1000;
|
||||||
// console.log("url:"+item.url);
|
|
||||||
// console.log("socket:"+item.wssUrl);
|
|
||||||
// console.log("queryAddress:"+item.queryAddress);
|
|
||||||
// console.log("videoSessionId:"+item.sessionId);
|
|
||||||
// console.log("videoDevId:"+item.videoDevId);
|
|
||||||
// console.log("storageDevId:"+item.storageDevId);
|
|
||||||
// console.log("startTime:"+startTime);
|
|
||||||
// console.log("endTime:"+endTime);
|
|
||||||
// console.log("scale:"+item.scale);
|
|
||||||
player.value = new TumsPlayer('video-container-playback', {
|
player.value = new TumsPlayer('video-container-playback', {
|
||||||
"autoplay": true,
|
"autoplay": true,
|
||||||
"resolution": "HD",
|
"resolution": "HD",
|
||||||
|
@ -165,13 +155,11 @@
|
||||||
* 销毁
|
* 销毁
|
||||||
*/
|
*/
|
||||||
async function destroy(){
|
async function destroy(){
|
||||||
console.log("destroy");
|
|
||||||
if (player.value){
|
if (player.value){
|
||||||
deletePlaybackChn({
|
deletePlaybackChn({
|
||||||
"deviceIndex":formData.videoDevId,
|
"deviceIndex":formData.videoDevId,
|
||||||
"sessionId":formData.sessionId
|
"sessionId":formData.sessionId
|
||||||
}).then(res=>{
|
}).then(res=>{
|
||||||
console.log(res)
|
|
||||||
});
|
});
|
||||||
// player.value.destroy().then(() => { }); // 回放销毁时自动调用接口,跨域导致失败
|
// player.value.destroy().then(() => { }); // 回放销毁时自动调用接口,跨域导致失败
|
||||||
initContainerPlayback.value = false
|
initContainerPlayback.value = false
|
||||||
|
|
|
@ -77,7 +77,7 @@
|
||||||
getPreviewUrl,
|
getPreviewUrl,
|
||||||
setImageCommon,
|
setImageCommon,
|
||||||
testAudio
|
testAudio
|
||||||
} from "@/views/iot/tplink/camera/camera.api";
|
} from "../camera.api";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
formDisabled: { type: Boolean, default: false },
|
formDisabled: { type: Boolean, default: false },
|
||||||
|
@ -151,10 +151,6 @@
|
||||||
|
|
||||||
createPreview();
|
createPreview();
|
||||||
getSwitch();
|
getSwitch();
|
||||||
|
|
||||||
/* await getIpcCapability({"deviceIndex":formData.deviceIndex}).then(res=>{
|
|
||||||
console.log(res);
|
|
||||||
});*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -286,7 +282,6 @@
|
||||||
izRecording.value = true;
|
izRecording.value = true;
|
||||||
player.value.startRecording({micStream:true}).then((res) => {
|
player.value.startRecording({micStream:true}).then((res) => {
|
||||||
// 设置成功,返回resolve
|
// 设置成功,返回resolve
|
||||||
console.log(res);
|
|
||||||
}).catch((errData) => {
|
}).catch((errData) => {
|
||||||
// 设置失败,包括网络错误以及接口调用报错
|
// 设置失败,包括网络错误以及接口调用报错
|
||||||
// 具体错误见errData.error_code
|
// 具体错误见errData.error_code
|
||||||
|
@ -302,7 +297,6 @@
|
||||||
let fileName = formData.deviceIndex+'-'+(new Date().getTime());
|
let fileName = formData.deviceIndex+'-'+(new Date().getTime());
|
||||||
player.value.stopRecording(fileName, true).then((res) => {
|
player.value.stopRecording(fileName, true).then((res) => {
|
||||||
// 设置成功,返回resolve
|
// 设置成功,返回resolve
|
||||||
console.log(res);
|
|
||||||
}).catch((errData) => {
|
}).catch((errData) => {
|
||||||
// 设置失败,包括网络错误以及接口调用报错
|
// 设置失败,包括网络错误以及接口调用报错
|
||||||
// 具体错误见errData.error_code
|
// 具体错误见errData.error_code
|
||||||
|
@ -317,7 +311,6 @@
|
||||||
getMultitransUrl({
|
getMultitransUrl({
|
||||||
"videoDevId":formData.deviceIndex
|
"videoDevId":formData.deviceIndex
|
||||||
}).then(res=>{
|
}).then(res=>{
|
||||||
console.log(res);
|
|
||||||
player.value.startVoiceIntercom({
|
player.value.startVoiceIntercom({
|
||||||
"url": res.url, // 该url为一次性 需要通过接口实时获取
|
"url": res.url, // 该url为一次性 需要通过接口实时获取
|
||||||
"wssUrl": res.wssUrl,
|
"wssUrl": res.wssUrl,
|
||||||
|
@ -339,7 +332,6 @@
|
||||||
* 销毁
|
* 销毁
|
||||||
*/
|
*/
|
||||||
function destroy(){
|
function destroy(){
|
||||||
console.log("destroy");
|
|
||||||
if (player){
|
if (player){
|
||||||
player.value.destroy().then(() => {
|
player.value.destroy().then(() => {
|
||||||
}); // 销毁
|
}); // 销毁
|
||||||
|
|
|
@ -21,11 +21,11 @@
|
||||||
import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
|
import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
|
||||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||||
import { useListPage } from '/@/hooks/system/useListPage';
|
import { useListPage } from '/@/hooks/system/useListPage';
|
||||||
import { recordingColumns,searchRecording } from '@/views/iot/tplink/camera/camera.data';
|
|
||||||
import { searchVideo } from '@/views/iot/tplink/camera/camera.api';
|
|
||||||
import { useUserStore } from '/@/store/modules/user';
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
import { useDrawer } from "@/components/Drawer";
|
import { useDrawer } from "@/components/Drawer";
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
import { recordingColumns,searchRecording } from '../camera.data';
|
||||||
|
import { searchVideo } from '../camera.api';
|
||||||
import CameraPlaybackModal from './CameraPlaybackModal.vue';//普通回放
|
import CameraPlaybackModal from './CameraPlaybackModal.vue';//普通回放
|
||||||
import CameraMultitransModal from './CameraMultitransModal.vue';//Multitrans模式回放
|
import CameraMultitransModal from './CameraMultitransModal.vue';//Multitrans模式回放
|
||||||
|
|
||||||
|
|
|
@ -101,7 +101,7 @@
|
||||||
import {
|
import {
|
||||||
getAlarmInfo, setAlarmInfo,
|
getAlarmInfo, setAlarmInfo,
|
||||||
getAlarmPlan, setAlarmPlan,
|
getAlarmPlan, setAlarmPlan,
|
||||||
} from "@/views/iot/tplink/camera/camera.api";
|
} from "../camera.api";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: { type: Object, default: () => ({}) },
|
data: { type: Object, default: () => ({}) },
|
||||||
|
@ -365,23 +365,6 @@
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
// console.log('星期一', mondayArr.value);
|
|
||||||
// console.log('星期二', tuesdayArr.value);
|
|
||||||
// console.log('星期三', wednesdayArr.value);
|
|
||||||
// console.log('星期四', thursdayArr.value);
|
|
||||||
// console.log('星期五', fridayArr.value);
|
|
||||||
// console.log('星期六', saturdayArr.value);
|
|
||||||
// console.log('星期七', sundayArr.value);
|
|
||||||
|
|
||||||
// console.log('星期一', mondayMergeArr.value);
|
|
||||||
// console.log('星期二', tuesdayMergeArr.value);
|
|
||||||
// console.log('星期三', wednesdayMergeArr.value);
|
|
||||||
// console.log('星期四', thursdayMergeArr.value);
|
|
||||||
// console.log('星期五', fridayMergeArr.value);
|
|
||||||
// console.log('星期六', saturdayMergeArr.value);
|
|
||||||
// console.log('星期七', sundayMergeArr.value);
|
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -540,7 +523,6 @@
|
||||||
* 鼠标按下
|
* 鼠标按下
|
||||||
*/
|
*/
|
||||||
function handleMouseDown(){
|
function handleMouseDown(){
|
||||||
// console.log('鼠标按下', event);
|
|
||||||
planVisible.value = true;
|
planVisible.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -548,7 +530,6 @@
|
||||||
* 鼠标抬起
|
* 鼠标抬起
|
||||||
*/
|
*/
|
||||||
function handleMouseUp(){
|
function handleMouseUp(){
|
||||||
// console.log('鼠标抬起', event);
|
|
||||||
planVisible.value = false;
|
planVisible.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -65,7 +65,7 @@ import {
|
||||||
import { getValueType } from '/@/utils';
|
import { getValueType } from '/@/utils';
|
||||||
import { Form } from 'ant-design-vue';
|
import { Form } from 'ant-design-vue';
|
||||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||||
import {uploadToServer,stopUploadToServer,getUploadToServerProcess} from "@/views/iot/tplink/camera/camera.api";
|
import {uploadToServer,stopUploadToServer,getUploadToServerProcess} from "../camera.api";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: { type: Object, default: () => ({}) },
|
data: { type: Object, default: () => ({}) },
|
||||||
});
|
});
|
||||||
|
@ -196,7 +196,6 @@ import {
|
||||||
formData.regionId = props.data.regionId;
|
formData.regionId = props.data.regionId;
|
||||||
formData.multitrans = props.data.multitrans;
|
formData.multitrans = props.data.multitrans;
|
||||||
formData.scale = props.data.scale;
|
formData.scale = props.data.scale;
|
||||||
console.log(formData);
|
|
||||||
},
|
},
|
||||||
{ deep: true, immediate: true }
|
{ deep: true, immediate: true }
|
||||||
);
|
);
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import CameraLeftTree from './components/CameraLeftTree.vue'
|
import CameraLeftTree from './components/CameraLeftTree.vue'
|
||||||
import CameraInfoList from "@/views/iot/tplink/camera/components/CameraInfoList.vue";
|
import CameraInfoList from './components/CameraInfoList.vue';
|
||||||
|
|
||||||
// 给子组件定义一个ref变量
|
// 给子组件定义一个ref变量
|
||||||
const leftTree = ref();
|
const leftTree = ref();
|
||||||
|
@ -28,7 +28,6 @@
|
||||||
const rootTreeData = ref<any[]>([]);
|
const rootTreeData = ref<any[]>([]);
|
||||||
// 左侧树选择后触发
|
// 左侧树选择后触发
|
||||||
function onTreeSelect(data) {
|
function onTreeSelect(data) {
|
||||||
console.log('onTreeSelect: ', data);
|
|
||||||
cameraData.value = data;
|
cameraData.value = data;
|
||||||
}
|
}
|
||||||
// 左侧树rootTreeData触发
|
// 左侧树rootTreeData触发
|
||||||
|
|
|
@ -24,7 +24,7 @@ export const sync = (params) => defHttp.get({ url: Api.sync, params });
|
||||||
* 保存或者更新项目
|
* 保存或者更新项目
|
||||||
* @param params
|
* @param params
|
||||||
*/
|
*/
|
||||||
export const saveOrUpdatePrject = (params, isUpdate) => {
|
export const saveOrUpdateProject = (params, isUpdate) => {
|
||||||
let url = isUpdate ? Api.edit : Api.add;
|
let url = isUpdate ? Api.edit : Api.add;
|
||||||
return defHttp.post({ url: url, params });
|
return defHttp.post({ url: url, params });
|
||||||
};
|
};
|
||||||
|
|
|
@ -16,7 +16,7 @@ export const columns: BasicColumn[] = [
|
||||||
{
|
{
|
||||||
title: '机构名称',
|
title: '机构名称',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
dataIndex: 'institutionalId_dictText',
|
dataIndex: 'institutionId_dictText',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
|
@ -56,10 +56,10 @@ export const columns: BasicColumn[] = [
|
||||||
export const searchFormSchema: FormSchema[] = [
|
export const searchFormSchema: FormSchema[] = [
|
||||||
{
|
{
|
||||||
label: '机构',
|
label: '机构',
|
||||||
field: 'institutionalId',
|
field: 'institutionId',
|
||||||
component: 'JDictSelectTag',
|
component: 'JDictSelectTag',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
dictCode: 'sys_depart,depart_name,id,org_category = 1 order by depart_name asc',
|
dictCode: 'nu_admin_institution_area,inst_name,id,org_category = 1 order by inst_name asc',
|
||||||
placeholder: '请选择机构',
|
placeholder: '请选择机构',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -104,10 +104,10 @@ export const formSchema: FormSchema[] = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '机构名称',
|
label: '机构名称',
|
||||||
field: 'institutionalId',
|
field: 'institutionId',
|
||||||
component: 'JDictSelectTag',
|
component: 'JDictSelectTag',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
dictCode: 'sys_depart,depart_name,id,org_category = 1 order by depart_name asc',
|
dictCode: 'nu_admin_institution_area,inst_name,id,org_category = 1 order by inst_name asc',
|
||||||
placeholder: '请选择机构',
|
placeholder: '请选择机构',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -109,7 +109,6 @@
|
||||||
deletePrject(record, reload);
|
deletePrject(record, reload);
|
||||||
},
|
},
|
||||||
onCancel() {
|
onCancel() {
|
||||||
// console.log('Cancel');
|
|
||||||
},
|
},
|
||||||
class: 'test',
|
class: 'test',
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,79 @@
|
||||||
|
<template>
|
||||||
|
<a-spin :spinning="loading">
|
||||||
|
<BasicForm @register="registerForm" />
|
||||||
|
<div class="j-box-bottom-button offset-20" style="margin-top: 30px">
|
||||||
|
<div class="j-box-bottom-button-float">
|
||||||
|
<a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
|
||||||
|
<a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-spin>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { watch, computed, inject, ref, unref, onMounted } from 'vue';
|
||||||
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||||
|
import { saveOrUpdateProject } from '../ProjectInfo.api';
|
||||||
|
import { formSchema } from '../ProjectInfo.data';
|
||||||
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
|
|
||||||
|
const emit = defineEmits(['success']);
|
||||||
|
const props = defineProps({
|
||||||
|
data: { type: Object, default: () => ({}) },
|
||||||
|
rootTreeData: { type: Array, default: () => [] },
|
||||||
|
});
|
||||||
|
const loading = ref<boolean>(false);
|
||||||
|
// 当前是否是更新模式
|
||||||
|
const isUpdate = ref<boolean>(true);
|
||||||
|
// 当前的弹窗数据
|
||||||
|
const model = ref<object>({});
|
||||||
|
|
||||||
|
//注册表单
|
||||||
|
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
|
||||||
|
schemas: formSchema,
|
||||||
|
showActionButtonGroup: false
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// data 变化,重填表单
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
async () => {
|
||||||
|
let record = unref(props.data);
|
||||||
|
if (typeof record !== 'object') {
|
||||||
|
record = {};
|
||||||
|
}
|
||||||
|
model.value = record;
|
||||||
|
await resetFields();
|
||||||
|
await setFieldsValue({ ...record });
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
async function onReset() {
|
||||||
|
await resetFields();
|
||||||
|
await setFieldsValue({ ...model.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交事件
|
||||||
|
async function onSubmit() {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
let values = await validate();
|
||||||
|
values = Object.assign({}, model.value, values);
|
||||||
|
//提交表单
|
||||||
|
await saveOrUpdateProject(values, isUpdate.value);
|
||||||
|
//刷新列表
|
||||||
|
emit('success');
|
||||||
|
Object.assign(model.value, values);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
|
@ -19,7 +19,7 @@ import { formSchema } from "@/views/iot/tplink/project/ProjectInfo.data";
|
||||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||||
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
||||||
import { getTenantId } from "/@/utils/auth";
|
import { getTenantId } from "/@/utils/auth";
|
||||||
import { saveOrUpdatePrject } from "@/views/iot/tplink/project/ProjectInfo.api";
|
import { saveOrUpdateProject } from "@/views/iot/tplink/project/ProjectInfo.api";
|
||||||
|
|
||||||
// 声明Emits
|
// 声明Emits
|
||||||
const emit = defineEmits(['success', 'register']);
|
const emit = defineEmits(['success', 'register']);
|
||||||
|
@ -67,7 +67,7 @@ async function handleSubmit() {
|
||||||
setDrawerProps({ confirmLoading: true });
|
setDrawerProps({ confirmLoading: true });
|
||||||
let params = values;
|
let params = values;
|
||||||
let isUpdateVal = unref(isUpdate);
|
let isUpdateVal = unref(isUpdate);
|
||||||
await saveOrUpdatePrject(params,isUpdateVal);
|
await saveOrUpdateProject(params,isUpdateVal);
|
||||||
//关闭弹窗
|
//关闭弹窗
|
||||||
closeDrawer();
|
closeDrawer();
|
||||||
//刷新列表
|
//刷新列表
|
||||||
|
|
|
@ -1,13 +1,56 @@
|
||||||
import { defHttp } from '/@/utils/http/axios';
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
|
||||||
enum Api {
|
enum Api {
|
||||||
|
queryProjectTreeSync = '/iot/projectInfo/queryRegionTreeSync',
|
||||||
|
queryRegionTreeSync = '/iot/regionInfo/queryRegionTreeSync',
|
||||||
|
syncProject = '/iot/projectInfo/sync',
|
||||||
|
syncRegion = '/iot/regionInfo/sync',
|
||||||
|
syncRegionChildren = '/iot/regionInfo/syncChildren',
|
||||||
list = '/iot/regionInfo/list',
|
list = '/iot/regionInfo/list',
|
||||||
sync = '/iot/regionInfo/sync',
|
sync = '/iot/regionInfo/sync',
|
||||||
add = '/iot/regionInfo/add',
|
add = '/iot/regionInfo/add',
|
||||||
edit = '/iot/regionInfo/edit',
|
edit = '/iot/regionInfo/edit',
|
||||||
delete = '/iot/regionInfo/delete',
|
delete = '/iot/regionInfo/delete',
|
||||||
|
queryChildrenByParentId = '/admin/institutionArea/queryChildrenByParentId',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取项目树列表
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
export const queryProjectTreeSync = (params?) => defHttp.get({ url: Api.queryProjectTreeSync, params });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取分组树列表
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
export const queryRegionTreeSync = (params?) => defHttp.get({ url: Api.queryRegionTreeSync, params });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 同步项目
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
export const syncProject = (params?) => defHttp.get({ url: Api.syncProject, params });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 同步分组
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
export const syncRegionChildren = (params?) => defHttp.get({ url: Api.syncRegionChildren, params });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 同步子分组
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
export const syncRegion = (params?) => defHttp.get({ url: Api.syncRegion, params });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过parentId获取区域列表
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
export const queryArea = (params?) => defHttp.get({ url: Api.queryChildrenByParentId, params });
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 列表接口
|
* 列表接口
|
||||||
* @param params
|
* @param params
|
||||||
|
@ -21,7 +64,7 @@ export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||||
export const sync = (params) => defHttp.get({ url: Api.sync, params });
|
export const sync = (params) => defHttp.get({ url: Api.sync, params });
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 保存或者更新区域
|
* 保存或者更新分组
|
||||||
* @param params
|
* @param params
|
||||||
*/
|
*/
|
||||||
export const saveOrUpdateRegion = (params, isUpdate) => {
|
export const saveOrUpdateRegion = (params, isUpdate) => {
|
||||||
|
@ -30,7 +73,7 @@ export const saveOrUpdateRegion = (params, isUpdate) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 删除区域
|
* 删除分组
|
||||||
*/
|
*/
|
||||||
export const deleteRegion = (params,handleSuccess) => {
|
export const deleteRegion = (params,handleSuccess) => {
|
||||||
return defHttp.post({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
|
return defHttp.post({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
|
||||||
|
|
|
@ -4,17 +4,17 @@ import {FormSchema} from '/@/components/Table';
|
||||||
//列表数据
|
//列表数据
|
||||||
export const columns: BasicColumn[] = [
|
export const columns: BasicColumn[] = [
|
||||||
{
|
{
|
||||||
title: '区域序号',
|
title: '分组序号',
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: 'regionId'
|
dataIndex: 'regionId'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '区域名称',
|
title: '分组名称',
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: 'regionName'
|
dataIndex: 'regionName'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '区域层级',
|
title: '分组层级',
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: 'regionLevel'
|
dataIndex: 'regionLevel'
|
||||||
},
|
},
|
||||||
|
@ -24,7 +24,7 @@ export const columns: BasicColumn[] = [
|
||||||
dataIndex: 'parentName'
|
dataIndex: 'parentName'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '机构名称',
|
title: '项目名称',
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: 'projectName'
|
dataIndex: 'projectName'
|
||||||
},
|
},
|
||||||
|
@ -34,7 +34,7 @@ export const columns: BasicColumn[] = [
|
||||||
dataIndex: 'updateTime'
|
dataIndex: 'updateTime'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '区域次序',
|
title: '分组次序',
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: 'sort'
|
dataIndex: 'sort'
|
||||||
},
|
},
|
||||||
|
@ -42,7 +42,7 @@ export const columns: BasicColumn[] = [
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [
|
export const searchFormSchema: FormSchema[] = [
|
||||||
{
|
{
|
||||||
label: '机构',
|
label: '项目',
|
||||||
field: 'projectId',
|
field: 'projectId',
|
||||||
component: 'JDictSelectTag',
|
component: 'JDictSelectTag',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
|
@ -67,6 +67,12 @@ export const formSchema: FormSchema[] = [
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'institutionId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '',
|
label: '',
|
||||||
field: 'parentId',
|
field: 'parentId',
|
||||||
|
@ -74,18 +80,24 @@ export const formSchema: FormSchema[] = [
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '区域序号',
|
label: '分组序号',
|
||||||
field: 'regionId',
|
field: 'regionId',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
dynamicDisabled: true
|
dynamicDisabled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '区域名称',
|
label: '分组名称',
|
||||||
field: 'regionName',
|
field: 'regionName',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '区域层级',
|
label: '区域名称',
|
||||||
|
field: 'areaId',
|
||||||
|
component: 'Input',
|
||||||
|
slot: 'areaSelect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '分组层级',
|
||||||
field: 'regionLevel',
|
field: 'regionLevel',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
dynamicDisabled: true
|
dynamicDisabled: true
|
||||||
|
@ -94,16 +106,10 @@ export const formSchema: FormSchema[] = [
|
||||||
label: '上级名称',
|
label: '上级名称',
|
||||||
field: 'parentName',
|
field: 'parentName',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
dynamicDisabled: ({model})=>{
|
dynamicDisabled: true
|
||||||
if(model.regionId || model.parentId){
|
|
||||||
return true;
|
|
||||||
}else{
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '机构名称',
|
label: '项目名称',
|
||||||
field: 'projectName',
|
field: 'projectName',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
dynamicDisabled: ({model})=>{
|
dynamicDisabled: ({model})=>{
|
||||||
|
@ -121,14 +127,9 @@ export const formSchema: FormSchema[] = [
|
||||||
dynamicDisabled: true
|
dynamicDisabled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '区域次序',
|
label: '分组次序',
|
||||||
field: 'sort',
|
field: 'sort',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
dynamicDisabled: true
|
dynamicDisabled: true
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// 项目基础表单
|
|
||||||
export const projectFormSchema: FormSchema[] = [
|
|
||||||
|
|
||||||
];
|
|
||||||
|
|
|
@ -1,6 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<a-spin :spinning="loading">
|
<a-spin :spinning="loading">
|
||||||
<BasicForm @register="registerForm" />
|
<BasicForm @register="registerForm">
|
||||||
|
<template #areaSelect ="{model,field}">
|
||||||
|
<a-select v-model:value="model[field]" @change="(value,option) => handleChange(value,option,model)">
|
||||||
|
<a-select-option :value="null">请选择…</a-select-option>
|
||||||
|
<template v-for="item in areaOptions" :key="`${item.id}`">
|
||||||
|
<a-select-option :value="item.id" :label="item.instName">
|
||||||
|
{{item.instName}}
|
||||||
|
</a-select-option>
|
||||||
|
</template>
|
||||||
|
</a-select>
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
<div class="j-box-bottom-button offset-20" style="margin-top: 30px">
|
<div class="j-box-bottom-button offset-20" style="margin-top: 30px">
|
||||||
<div class="j-box-bottom-button-float">
|
<div class="j-box-bottom-button-float">
|
||||||
<a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
|
<a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
|
||||||
|
@ -13,15 +24,22 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { watch, computed, inject, ref, unref, onMounted } from 'vue';
|
import { watch, computed, inject, ref, unref, onMounted } from 'vue';
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||||
import { saveOrUpdateRegion } from '@/views/iot/tplink/region/RegionInfo.api';
|
import {
|
||||||
import { formSchema } from '@/views/iot/tplink/region/RegionInfo.data';
|
queryArea,
|
||||||
|
queryRegionTreeSync,
|
||||||
|
saveOrUpdateRegion
|
||||||
|
} from '../RegionInfo.api';
|
||||||
|
import { formSchema } from '../RegionInfo.data';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||||||
|
import {propTypes} from "@/utils/propTypes";
|
||||||
|
const { createMessage, createSuccessModal } = useMessage();
|
||||||
const emit = defineEmits(['success']);
|
const emit = defineEmits(['success']);
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: { type: Object, default: () => ({}) },
|
data: { type: Object, default: () => ({}) },
|
||||||
rootTreeData: { type: Array, default: () => [] },
|
rootTreeData: { type: Array, default: () => [] },
|
||||||
});
|
});
|
||||||
|
const areaOptions = ref<any[]>([]);
|
||||||
const loading = ref<boolean>(false);
|
const loading = ref<boolean>(false);
|
||||||
// 当前是否是更新模式
|
// 当前是否是更新模式
|
||||||
const isUpdate = ref<boolean>(true);
|
const isUpdate = ref<boolean>(true);
|
||||||
|
@ -34,20 +52,7 @@
|
||||||
showActionButtonGroup: false
|
showActionButtonGroup: false
|
||||||
});
|
});
|
||||||
|
|
||||||
// const categoryOptions = computed(() => {
|
|
||||||
// if (!!props?.data?.parentId) {
|
|
||||||
// return orgCategoryOptions.child;
|
|
||||||
// } else {
|
|
||||||
// return orgCategoryOptions.root;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 禁用字段
|
|
||||||
updateSchema([
|
|
||||||
{ field: 'parentId', componentProps: { disabled: true } },
|
|
||||||
{ field: 'orgCode', componentProps: { disabled: true } },
|
|
||||||
]);
|
|
||||||
// data 变化,重填表单
|
// data 变化,重填表单
|
||||||
watch(
|
watch(
|
||||||
() => props.data,
|
() => props.data,
|
||||||
|
@ -59,6 +64,7 @@
|
||||||
model.value = record;
|
model.value = record;
|
||||||
await resetFields();
|
await resetFields();
|
||||||
await setFieldsValue({ ...record });
|
await setFieldsValue({ ...record });
|
||||||
|
await fetchArea(record.institutionId);
|
||||||
},
|
},
|
||||||
{ deep: true, immediate: true }
|
{ deep: true, immediate: true }
|
||||||
);
|
);
|
||||||
|
@ -85,6 +91,25 @@
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const fetchArea = async (institutionId) => {
|
||||||
|
if (!institutionId){
|
||||||
|
institutionId = '-1';
|
||||||
|
}
|
||||||
|
areaOptions.value = [];
|
||||||
|
const data = await queryArea({ pid : institutionId });
|
||||||
|
Object.assign(areaOptions.value, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleChange(value,option:Option,formData){
|
||||||
|
if(value == null){
|
||||||
|
formData["regionName"] = model.value["regionName"];
|
||||||
|
}else{
|
||||||
|
formData["regionName"] = option.label;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
|
||||||
|
|
|
@ -8,25 +8,33 @@
|
||||||
:showFooter="showFooter"
|
:showFooter="showFooter"
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
>
|
>
|
||||||
<BasicForm @register="registerForm" />
|
<BasicForm @register="registerForm">
|
||||||
|
<template #areaSelect ="{model,field}">
|
||||||
|
<a-select v-model:value="model[field]" @change="(value,option) => handleChange(value,option,model)">
|
||||||
|
<template v-for="item in areaOptions" :key="`${item.id}`">
|
||||||
|
<a-select-option :value="item.id" :label="item.instName">
|
||||||
|
{{item.instName}}
|
||||||
|
</a-select-option>
|
||||||
|
</template>
|
||||||
|
</a-select>
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
</BasicDrawer>
|
</BasicDrawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
|
import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||||
import { formSchema } from "@/views/iot/tplink/region/RegionInfo.data";
|
|
||||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||||
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
||||||
import { getTenantId } from "/@/utils/auth";
|
import { formSchema } from "../RegionInfo.data";
|
||||||
import { saveOrUpdateRegion } from "@/views/iot/tplink/region/RegionInfo.api";
|
import {queryArea, saveOrUpdateRegion} from "../RegionInfo.api";
|
||||||
|
|
||||||
// 声明Emits
|
// 声明Emits
|
||||||
const emit = defineEmits(['success', 'register']);
|
const emit = defineEmits(['success', 'register']);
|
||||||
const attrs = useAttrs();
|
const attrs = useAttrs();
|
||||||
const isUpdate = ref(true);
|
const isUpdate = ref(true);
|
||||||
const rowId = ref('');
|
const rowId = ref('');
|
||||||
const departOptions = ref([]);
|
|
||||||
let isFormDepartUser = false;
|
let isFormDepartUser = false;
|
||||||
//表单配置
|
//表单配置
|
||||||
const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
|
const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
|
||||||
|
@ -35,6 +43,7 @@ const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSc
|
||||||
showActionButtonGroup: false,
|
showActionButtonGroup: false,
|
||||||
});
|
});
|
||||||
const showFooter = ref(true);
|
const showFooter = ref(true);
|
||||||
|
const areaOptions = ref<any[]>([]);
|
||||||
//表单赋值
|
//表单赋值
|
||||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||||
await resetFields();
|
await resetFields();
|
||||||
|
@ -46,6 +55,7 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (
|
||||||
setFieldsValue({
|
setFieldsValue({
|
||||||
...data.record,
|
...data.record,
|
||||||
});
|
});
|
||||||
|
await fetchArea(data.record.institutionId);
|
||||||
}
|
}
|
||||||
// 隐藏底部时禁用整个表单
|
// 隐藏底部时禁用整个表单
|
||||||
setProps({ disabled: !showFooter.value });
|
setProps({ disabled: !showFooter.value });
|
||||||
|
@ -76,6 +86,25 @@ async function handleSubmit() {
|
||||||
setDrawerProps({ confirmLoading: false });
|
setDrawerProps({ confirmLoading: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const fetchArea = async (institutionId) => {
|
||||||
|
if (!institutionId){
|
||||||
|
institutionId = '-1';
|
||||||
|
}
|
||||||
|
areaOptions.value = [];
|
||||||
|
const data = await queryArea({ pid : institutionId });
|
||||||
|
Object.assign(areaOptions.value, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleChange(value,option:Option,formData){
|
||||||
|
if(value == null){
|
||||||
|
formData["regionName"] = "";
|
||||||
|
}else{
|
||||||
|
formData["regionName"] = option.label;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -2,17 +2,17 @@
|
||||||
<a-card :bordered="false" style="height: 100%">
|
<a-card :bordered="false" style="height: 100%">
|
||||||
<a-spin :spinning="syncoading">
|
<a-spin :spinning="syncoading">
|
||||||
<div class="j-table-operator" style="width: 100%">
|
<div class="j-table-operator" style="width: 100%">
|
||||||
<!-- <a-button preIcon="ant-design:sync-outlined" @click="loadRootTreeData">刷新</a-button>-->
|
<a-button preIcon="ant-design:sync-outlined" @click="loadRootTreeData">刷新</a-button>
|
||||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="syncProjectInfo">新增</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 preIcon="ant-design:sync-outlined" @click="syncProjectInfo">同步</a-button>
|
||||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="syncProjectInfo">新增下级</a-button>
|
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreateRegion">新增下级</a-button>
|
||||||
<template v-if="currentRegion !=null">
|
<template v-if="currentRegion !=null">
|
||||||
<a-button preIcon="ant-design:sync-outlined" @click="syncRegionInfo">同步下级</a-button>
|
<a-button preIcon="ant-design:sync-outlined" @click="syncRegionInfo">同步下级</a-button>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<a-spin :spinning="loading">
|
<a-spin :spinning="loading">
|
||||||
<a-input-search placeholder="按名称搜索…" style="margin-bottom: 10px" @search="onSearch" />
|
<!-- <a-input-search placeholder="按名称搜索…" style="margin-bottom: 10px" @search="onSearch" />-->
|
||||||
<!--区域树-->
|
<!--分组树-->
|
||||||
<template v-if="treeData.length > 0">
|
<template v-if="treeData.length > 0">
|
||||||
<a-tree
|
<a-tree
|
||||||
v-if="!treeReloading"
|
v-if="!treeReloading"
|
||||||
|
@ -25,26 +25,55 @@
|
||||||
v-model:expandedKeys="expandedKeys"
|
v-model:expandedKeys="expandedKeys"
|
||||||
@select="onSelect"
|
@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>
|
</a-tree>
|
||||||
</template>
|
</template>
|
||||||
<a-empty v-else description="暂无数据" />
|
<a-empty v-else description="暂无数据" />
|
||||||
</a-spin>
|
</a-spin>
|
||||||
</a-spin>
|
</a-spin>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
<!-- 表单分组 -->
|
||||||
|
<ProjectInfoDrawer @register="registerProjectDrawer" @success="handleSuccess" />
|
||||||
|
<RegionInfoDrawer @register="registerRegionDrawer" @success="handleSuccess" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { nextTick, ref } from 'vue';
|
import {createVNode, nextTick, ref} from 'vue';
|
||||||
import { useModal } from '/@/components/Modal';
|
import { useModal } from '/@/components/Modal';
|
||||||
import { useMessage } from '/@/hooks/web/useMessage';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||||||
import { useMethods } from '/@/hooks/system/useMethods';
|
import { useMethods } from '/@/hooks/system/useMethods';
|
||||||
|
import {
|
||||||
|
deleteRegion,
|
||||||
|
queryProjectTreeSync,
|
||||||
|
queryRegionTreeSync,
|
||||||
|
syncProject,
|
||||||
|
syncRegion,
|
||||||
|
syncRegionChildren
|
||||||
|
} from '../RegionInfo.api';
|
||||||
const { createMessage } = useMessage();
|
const { createMessage } = useMessage();
|
||||||
import { queryProjectTreeSync, queryRegionTreeSync, syncProject, syncRegion } from '@/views/iot/tplink/camera/camera.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 emit = defineEmits(['select', 'rootTreeData']);
|
||||||
const syncoading = ref<boolean>(false);
|
const syncoading = ref<boolean>(false);
|
||||||
const loading = ref<boolean>(false);
|
const loading = ref<boolean>(false);
|
||||||
// 区域树列表数据
|
// 分组树列表数据
|
||||||
const treeData = ref<any[]>([]);
|
const treeData = ref<any[]>([]);
|
||||||
// 当前选中的项
|
// 当前选中的项
|
||||||
const checkedKeys = ref<any[]>([]);
|
const checkedKeys = ref<any[]>([]);
|
||||||
|
@ -56,10 +85,13 @@
|
||||||
const treeReloading = ref<boolean>(false);
|
const treeReloading = ref<boolean>(false);
|
||||||
// 树父子是否关联
|
// 树父子是否关联
|
||||||
const checkStrictly = ref<boolean>(true);
|
const checkStrictly = ref<boolean>(true);
|
||||||
// 当前选中的区域
|
// 当前选中的分组
|
||||||
const currentRegion = ref<any>(null);
|
const currentRegion = ref<any>(null);
|
||||||
|
//注册drawer
|
||||||
|
const [registerProjectDrawer, { openDrawer : openProjectDrawer }] = useDrawer();
|
||||||
|
const [registerRegionDrawer, { openDrawer : openRegionDrawer }] = useDrawer();
|
||||||
|
|
||||||
// 加载顶级区域信息
|
// 加载顶级分组信息
|
||||||
async function loadRootTreeData() {
|
async function loadRootTreeData() {
|
||||||
try {
|
try {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
|
@ -91,7 +123,7 @@
|
||||||
loadRootTreeData();
|
loadRootTreeData();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 加载子级区域信息
|
* 加载子级分组信息
|
||||||
*/
|
*/
|
||||||
async function loadChildrenTreeData(treeNode) {
|
async function loadChildrenTreeData(treeNode) {
|
||||||
try {
|
try {
|
||||||
|
@ -155,7 +187,6 @@
|
||||||
* 设置当前选中的行
|
* 设置当前选中的行
|
||||||
*/
|
*/
|
||||||
function setSelectedKey(key: string, data?: object) {
|
function setSelectedKey(key: string, data?: object) {
|
||||||
console.log('setSelectedKey: ', key);
|
|
||||||
selectedKeys.value = [key];
|
selectedKeys.value = [key];
|
||||||
if (data) {
|
if (data) {
|
||||||
currentRegion.value = data;
|
currentRegion.value = data;
|
||||||
|
@ -167,7 +198,6 @@
|
||||||
* 树选择事件
|
* 树选择事件
|
||||||
*/
|
*/
|
||||||
function onSelect(selKeys, event) {
|
function onSelect(selKeys, event) {
|
||||||
console.log('onSelect: ', selKeys, event);
|
|
||||||
if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
|
if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
|
||||||
setSelectedKey(selKeys[0], event.selectedNodes[0]);
|
setSelectedKey(selKeys[0], event.selectedNodes[0]);
|
||||||
} else {
|
} else {
|
||||||
|
@ -179,14 +209,14 @@
|
||||||
/**
|
/**
|
||||||
* 同步项目
|
* 同步项目
|
||||||
*/
|
*/
|
||||||
// async function syncProjectInfo(){
|
async function syncProjectInfo(){
|
||||||
// syncoading.value = true;
|
syncoading.value = true;
|
||||||
// await syncProject();
|
await syncProject();
|
||||||
// await loadRootTreeData();
|
await loadRootTreeData();
|
||||||
// }
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 同步区域
|
* 同步分组
|
||||||
*/
|
*/
|
||||||
async function syncRegionInfo(){
|
async function syncRegionInfo(){
|
||||||
let data = currentRegion.value;
|
let data = currentRegion.value;
|
||||||
|
@ -198,11 +228,139 @@
|
||||||
projectId: data.projectId,
|
projectId: data.projectId,
|
||||||
regionId: data.regionId
|
regionId: data.regionId
|
||||||
};
|
};
|
||||||
|
if(data.regionId == null){
|
||||||
|
await syncRegion(record);
|
||||||
|
}else{
|
||||||
|
await syncRegionChildren(record);
|
||||||
|
}
|
||||||
syncoading.value = true;
|
syncoading.value = true;
|
||||||
await syncRegion(record);
|
|
||||||
await loadRootTreeData();
|
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,
|
||||||
|
};
|
||||||
|
if(data.regionId != null){
|
||||||
|
record["institutionId"] = data.areaId;
|
||||||
|
}else{
|
||||||
|
record["institutionId"] = data.institutionId;
|
||||||
|
}
|
||||||
|
openRegionDrawer(true, {
|
||||||
|
record,
|
||||||
|
isUpdate: false,
|
||||||
|
showFooter: true,
|
||||||
|
tenantSaas: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加子级
|
||||||
|
*/
|
||||||
|
function onAddChild(data = currentRegion.value){
|
||||||
|
if (data == null) {
|
||||||
|
createMessage.warning('请先选择一个节点');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let record = {
|
||||||
|
projectId: data.projectId,
|
||||||
|
projectName: data.projectName,
|
||||||
|
parentId: data.regionId,
|
||||||
|
parentName: data.regionName,
|
||||||
|
};
|
||||||
|
if(data.regionId != null){
|
||||||
|
record["institutionId"] = data.areaId;
|
||||||
|
}else{
|
||||||
|
record["institutionId"] = data.institutionId;
|
||||||
|
}
|
||||||
|
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() {
|
||||||
|
},
|
||||||
|
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() {
|
||||||
|
},
|
||||||
|
class: 'test',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSuccess(){
|
||||||
|
loadRootTreeData();
|
||||||
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
loadRootTreeData,
|
loadRootTreeData,
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,15 +5,18 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xl="12" :lg="24" :md="24" style="margin-bottom: 10px">
|
<a-col :xl="12" :lg="24" :md="24" style="margin-bottom: 10px">
|
||||||
<div style="height: 100%;" class="form-content">
|
<div style="height: 100%;" class="form-content">
|
||||||
<a-tabs v-show="regionData != null" defaultActiveKey="base-info">
|
<a-tabs v-show="nodeData != null" defaultActiveKey="base-info">
|
||||||
<a-tab-pane tab="基本信息" key="base-info" forceRender style="position: relative">
|
<a-tab-pane tab="基本信息" key="base-info" forceRender style="position: relative">
|
||||||
<div style="padding: 20px">
|
<div style="padding: 20px" v-show="nodeData.regionId != null">
|
||||||
<RegionForm :data="regionData" :rootTreeData="rootTreeData" @success="onSuccess" />
|
<RegionForm :data="nodeData" :rootTreeData="rootTreeData" @success="onSuccess" />
|
||||||
|
</div>
|
||||||
|
<div style="padding: 20px" v-show="nodeData.regionId == null">
|
||||||
|
<ProjectForm :data="nodeData" :rootTreeData="rootTreeData" @success="onSuccess" />
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
<div v-show="regionData == null" style="padding-top: 40px">
|
<div v-show="nodeData == null" style="padding-top: 40px">
|
||||||
<a-empty description="请选择区域" />
|
<a-empty description="请选择分组" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
@ -24,23 +27,27 @@
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import RegionLeftTree from './components/RegionLeftTree.vue'
|
import RegionLeftTree from './components/RegionLeftTree.vue'
|
||||||
import RegionForm from "@/views/iot/tplink/region/components/RegionForm.vue";
|
import RegionForm from './components/RegionForm.vue';
|
||||||
|
import ProjectForm from '@/views/iot/tplink/project/components/ProjectForm.vue';
|
||||||
|
|
||||||
// 给子组件定义一个ref变量
|
// 给子组件定义一个ref变量
|
||||||
const leftTree = ref();
|
const leftTree = ref();
|
||||||
// 当前选中的区域信息
|
// 当前选中的区域信息
|
||||||
const regionData = ref({});
|
const nodeData = ref({});
|
||||||
const rootTreeData = ref<any[]>([]);
|
const rootTreeData = ref<any[]>([]);
|
||||||
// 左侧树选择后触发
|
// 左侧树选择后触发
|
||||||
function onTreeSelect(data) {
|
function onTreeSelect(data) {
|
||||||
console.log('onTreeSelect: ', data);
|
nodeData.value = data;
|
||||||
regionData.value = data;
|
|
||||||
}
|
}
|
||||||
// 左侧树rootTreeData触发
|
// 左侧树rootTreeData触发
|
||||||
function onRootTreeData(data) {
|
function onRootTreeData(data) {
|
||||||
rootTreeData.value = data;
|
rootTreeData.value = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onSuccess() {
|
||||||
|
leftTree.value.loadRootTreeData();
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
Loading…
Reference in New Issue