nursing_unit_vue/src/views/biz/nuBaseInfo/devicesBind/DevicesPriviewForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <div style="width: 236px;float:left;margin-top:14px;">
      <a-menu
          style="width: 236px;margin-top: -11px;border-radius: 8px;"
          mode="inline"
          v-model:selectedKeys="current"
        >
          <a-sub-menu :key="item.nuId" v-for="(item,index) in dataList" @titleClick="handleSblist(item.map,'all','')">
            <template #title >NUID：{{item.nuId}}</template>
            <a-menu-item @click="handleSblist(item.map,'1',itemA.id)" :key="itemA.id" v-for="(itemA,index) in item.map.cameraInfoList" >{{itemA.sn}}[摄像头]</a-menu-item>
            <a-menu-item @click="handleSblist(item.map,'2',itemB.id)" :key="itemB.id" v-for="(itemB,index) in item.map.electricityMeterList" >{{itemB.cid}}[电表]</a-menu-item>
            <a-menu-item @click="handleSblist(item.map,'3',itemC.id)" :key="itemC.id" v-for="(itemC,index) in item.map.humidDeviceList" >{{itemC.sn}}[温湿度计]</a-menu-item>
            <a-menu-item @click="handleSblist(item.map,'4',itemD.id)" :key="itemD.id" v-for="(itemD,index) in item.map.waterMeterList" >{{itemD.cid}}[水表]</a-menu-item>

            <a-menu-item :key="item.id" @click="handleSblist(null,'all','')" v-if="getSblb(item)" >暂无数据</a-menu-item>
          </a-sub-menu>
        </a-menu>
    </div>
    <div style="width: calc(100% - 236px);float:left;margin-top: -10px;">
      <a-row>
            <SxtList :tableData="sbList.cameraInfoList" @ok="hadleSuccess"></SxtList>
            <DbList :tableData="sbList.electricityMeterList" @ok="hadleSuccess"></DbList>
            <SbList :tableData="sbList.waterMeterList" @ok="hadleSuccess"></SbList>
            <WsdjList :tableData="sbList.humidDeviceList" @ok="hadleSuccess"></WsdjList>
        </a-row>
        <a-row v-if="sbList.cameraInfoList.length==0 && sbList.electricityMeterList.length==0 && sbList.waterMeterList.length==0 && sbList.humidDeviceList.length==0">
          <a-col>
            <a-empty></a-empty>
          </a-col>
        </a-row>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { getValueType } from '/@/utils';
import { Form,Modal } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import SxtList from './SxtList.vue'
import DbList from './DbList.vue'
import SbList from './SbList.vue'
import WsdjList from './WsdjList.vue'
import { set } from 'lodash-es';


const formRef = ref();
const useForm = Form.useForm;
const nuInfo = ref<any>({})
const dataList = ref<any>([])
const sbList = ref<any>({cameraInfoList:[], waterMeterList:[], electricityMeterList:[], humidDeviceList:[]})
const { createMessage } = useMessage();
const confirmLoading = ref<boolean>(false);
const rootSubmenuKeys = [];
const openKeys= ref<any>([]);
const selectedKeys= [];

 const current = ref<string[]>([]);
function hadleSuccess(){
  reload();
}

function getSblb(item){
  var listA = item.map.cameraInfoList;
  var listB = item.map.electricityMeterList;
  var listC = item.map.humidDeviceList;
  var listD = item.map.waterMeterList;
  if(!listA && !listB && !listC && !listD){
    return true;
  }else if(listA.length == 0 && listB.length == 0 && listC.length == 0 && listD.length == 0){
    return true;
  }else{
    return false;
  }
}
/**
 * 初始化
 */
function init(record) {
  console.log("🚀 ~ add ~ record:", record)
  nextTick(() => {
    nuInfo.value = record;
    reload();
  });
}

function reload() {
  sbList.value = {}
  defHttp.get({ url: '/iot/devicesIot/priviewList', params: { orgCode: nuInfo.value.orgCode } }).then((res) => {
    console.log("🚀 ~ reload ~ res:", res)
    dataList.value = res;
    if(res.length>0){
      sbList.value = res[0].map;
      openKeys.value.push(res[1].nuId) ;
      console.log("🚀 ~ reload ~ sbList.value:", sbList.value)
    }
  });
}
function handleSblist(dataSource,type,deviceId){
  console.log("🚀 ~ handleSblist ~ type:", type)
  sbList.value = {cameraInfoList:[], waterMeterList:[], electricityMeterList:[], humidDeviceList:[]};
  if(type == 'all'){
    if(dataSource){
      sbList.value = dataSource;
    }
  }else if(type == '1'){
    sbList.value.cameraInfoList = dataSource.cameraInfoList.filter(item=>item.id == deviceId);
  }else if(type == '2'){
    sbList.value.electricityMeterList = dataSource.electricityMeterList.filter(item=>item.id == deviceId);
  }else if(type == '3'){
    sbList.value.humidDeviceList = dataSource.humidDeviceList.filter(item=>item.id == deviceId);
  }else if(type == '4'){
    sbList.value.waterMeterList = dataSource.waterMeterList.filter(item=>item.id == deviceId);
  }

}



defineExpose({
  init,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  padding: 14px;
}
</style>