visualization-design/src/views/components/common/PropModal.vue

<template>
  <t-dialog
    v-model:visible="props.visible"
    :header="$t('设备属性')"
    :width="470"
    @close="close"
    @confirm="confirm"
  >
  <t-tabs v-model="tabValue" @change="tabChange">
    <t-tab-panel :value="1" :label="$t('数据列表')">
    <div class="input-search mt-8">
      <div class="btn">
        <search-icon class="hover" />
      </div>
      <t-input
        v-model="search"
        @change="onSearch"
        @enter="onSearch"
        :placeholder="$t('搜索属性')"
      />
    </div>
    <div class="props mt-8">
      <t-tree
        v-model:actived="activedProp"
        activable
        hover
        :data="bindTreeData"
        :expand-level="1"
        :filter="bindFilter"
        @click="onClick"
      />
    </div>
    </t-tab-panel>
    <t-tab-panel :value="2" :label="$t('自定义数据')">
      <div class="form-item mt-16">
        <label>{{$t('显示名称')}}</label>
        <t-input
            v-model:value="activeObj.label"
            :placeholder="$t('属性简短描述')"
          />
      </div>
      <div class="form-item mt-16">
      <label>{{$t('属性名')}}</label>
      <t-input
        v-model:value="activeObj.value"
        :placeholder="$t('属性名')"
      />
    </div>
    <div class="form-item mt-16">
      <label>{{$t('类型')}}</label>
      <t-select
        class="w-full"
        :options="typeOptions"
        v-model="activeObj.type"
        :placeholder="$t('字符串')"
      />
    </div>
    </t-tab-panel>
  </t-tabs>
  </t-dialog>
</template>

<script lang="ts" setup>
import { SearchIcon } from 'tdesign-icons-vue-next';
import { ref, toRaw, onMounted, getCurrentInstance } from 'vue';
import { typeOptions } from '@/services/common';
import { MessagePlugin } from 'tdesign-vue-next';

const { proxy } = getCurrentInstance();
const $t = proxy.$t

const props = defineProps<{
  visible: boolean;
}>();
const emit = defineEmits(['update:visible', 'change']);
const activedProp = ref([]);

onMounted(() => {
  getBindTreeData();
});

function close() {
  emit('update:visible', false);
}

const bindTreeData = ref<any>([]);

const getBindTreeData = () => {
  let data: any = [];
  const iotTree = meta2d.store.data.iot?.tree || [];
  if (iotTree.length) {
    iotTree.forEach((item: any) => {
      item.checkable = false;
    });
    data.push({
      label: $t('物联网平台'),
      value: 'iot',
      checkable: false,
      children: iotTree,
    });
  }
  const sqlTree = meta2d.store.data.sqls || [];
  if (sqlTree.length) {
    data.push({
      label: $t('sql数据源'),
      value: 'sql',
      checkable: false,
      children: sqlTree,
    });
  }
  const networks = meta2d.store.data.networks || [];
  if (networks.length) {
    networks.forEach((item: any) => {
      item.checkable = false;
    });
    const mqttNets = meta2d.store.data.networks.filter(
      (item) => item.protocol === 'mqtt'
    );
    const wsNets = meta2d.store.data.networks.filter(
      (item) => item.protocol === 'websocket'
    );
    const httpNets = meta2d.store.data.networks.filter(
      (item) => item.protocol === 'http'
    );
    const SSENets = meta2d.store.data.networks.filter(
      (item) => item.protocol === 'SSE'
    );
    if (mqttNets.length) {
      data.push({
        label: 'MQTT',
        value: 'network',
        checkable: false,
        children: mqttNets,
      });
    }
    if (wsNets.length) {
      data.push({
        label: 'Websocket',
        value: 'network',
        checkable: false,
        children: wsNets,
      });
    }
    if (httpNets.length) {
      data.push({
        label: 'HTTP',
        value: 'network',
        checkable: false,
        children: httpNets,
      });
    }
    if (SSENets.length) {
      data.push({
        label: 'SSE',
        value: 'network',
        checkable: false,
        children: SSENets,
      });
    }
  }
  bindTreeData.value = data;
};

const search = ref('');
const bindFilter = ref<any>(null);
const onSearch = () => {
  bindFilter.value = search.value
    ? (node) => {
        return node.value?.indexOf(search.value) >= 0;
      }
    : null;
};

const selectedIds = ref([]);

let activeObj:any = ref({
  label:'',
  type:'',
  value:''
});

const onClick = (context) => {
  const { node } = context;
  if(!node.isLeaf()){
    return;
  }
  const data = JSON.parse(JSON.stringify(node.data));
  const root = node?.getRoot()?.data;
  if(data._label){
    data._label = root.label+'#'+data._label;
  }else{
    data._label =node?.getParents()?.map((item)=>item.data.label+'#')?.reverse()?.join('') +data.label;
  }
  data._label =  data._label.replace(/#/g, '->')
  activeObj.value = data;
};

const tabValue = ref(1);

const confirm = () => {
  if(!activeObj.value.value){
    if(tabValue.value===1){
      MessagePlugin.info($t("请选择一项设备属性！"));
    }else{
      MessagePlugin.info($t("属性名必填！"));
    }
    return;
  }
  emit('change', activeObj.value);
};

const tabChange = ()=>{

  activeObj.value={
    label:'',
    type:'',
    value:''
  };
}

const doBind = () => {};
</script>

<style lang="postcss" scoped>
.props {
  height: 300px;
  overflow-y: auto;
  padding-bottom: 16px;
}

.input-search {
  width: 100%;
  padding: 4px 0px;

  .btn {
    left: 14px;
  }
}

.t-tab-panel{
  height: 340px;
  overflow-y: hidden;
}
</style>