visualization-design/src/views/components/Network.vue

<template>
  <div class="props">
    <div class="form-item mt-8">
      <label>数据源名称</label>
      <t-select-input
        v-if="mode"
        v-model:inputValue="modelValue.name"
        :value="modelValue.name"
        placeholder="数据源"
        allow-input
        clearable
        v-model:popup-visible="popupVisible"
        @focus="popupVisible = true"
        @blur="popupVisible = undefined"
        @input-change="onInput"
      >
        <template #panel>
          <ul style="padding: 4px">
            <li
              class="hover-background"
              style="line-height: 1.5; padding: 8px; border-radius: 2px"
              v-for="item in networkList"
              :key="item.url"
              @click="() => onSelect(item)"
            >
              名称: {{ item.name }}
              <div class="desc">地址: {{ item.url }}</div>
            </li>
            <li
              v-if="!networkList.length"
              style="line-height: 1.5; padding: 8px; border-radius: 2px"
              :key="-1"
            >
              <div class="desc">暂无数据</div>
            </li>
          </ul>
        </template>
      </t-select-input>
      <t-input v-else v-model="modelValue.name" />
    </div>

    <div class="form-item mt-8">
      <label>网络类型</label>
      <t-select
        v-model="modelValue.type"
        placeholder="MQTT"
        @change="typeChange"
      >
        <t-option key="mqtt" value="mqtt" label="MQTT" />
        <t-option key="websocket" value="websocket" label="Websocket" />
        <t-option key="http" value="http" label="HTTP" />
      </t-select>
    </div>
    <div class="form-item mt-8">
      <label>URL地址</label>
      <t-input v-model="modelValue.url" />
    </div>
    <template v-if="modelValue.type === 'websocket'">
      <div class="form-item mt-8">
        <label>Protocol</label>
        <t-input v-model="modelValue.protocols" />
      </div>
    </template>
    <template v-else-if="modelValue.type === 'http'">
      <div class="form-item mt-8">
        <label>请求方式</label>
        <t-select v-model="modelValue.method" @change="httpMethodChange">
          <t-option key="GET" value="GET" label="GET" />
          <t-option key="POST" value="POST" label="POST" />
        </t-select>
      </div>
      <div class="form-item mt-8">
        <label>请求头</label>
        <t-textarea
          v-model="modelValue.httpHeaders"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入"
        />
      </div>
      <div v-if="modelValue.method === 'POST'" class="form-item mt-8">
        <label>请求体</label>
        <t-textarea
          v-model="modelValue.body"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入"
        />
      </div>
    </template>
    <template v-else>
      <div class="form-item mt-8">
        <label>Client Id</label>
        <t-input v-model="modelValue.options.clientId" />
      </div>
      <div class="form-item mt-8">
        <label>自动生成</label>
        <t-switch
          class="ml-8 mt-8"
          v-model="modelValue.options.customClientId"
          size="small"
        />
      </div>
      <div class="form-item mt-8">
        <label>用户名</label>
        <t-input v-model="modelValue.options.username" />
      </div>
      <div class="form-item mt-8">
        <label>密码</label>
        <t-input v-model="modelValue.options.password" />
      </div>
      <div class="form-item mt-8">
        <label>Topics</label>
        <t-input v-model="modelValue.topics" />
      </div>
    </template>
    <div class="form-item mt-8" v-if="mode">
      <label> </label>
      <div>
        <t-button @click="onSave">保存到我的数据源</t-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue';

import { debounce } from '@/services/debouce';

const { modelValue, mode } = defineProps<{
  modelValue: any;
  mode: any;
}>();

const emit = defineEmits(['update:modelValue', 'change']);

const popupVisible = ref<bool>(false);
const networkList = ref<any[]>([]);

onBeforeMount(() => {});

const typeChange = (t: string) => {
  if (t === 'http') {
    Object.assign(modelValue, {
      http: '',
      httpTimeInterval: 1000,
      httpHeaders: '',
      method: 'GET',
      body: '',
    });
  } else if (t === 'websocket') {
    modelValue.protocols = '';
  } else {
    Object.assign(modelValue, {
      options: {
        clientId: '',
        username: '',
        password: '',
        customClientId: false,
      },
    });
  }
};

const httpMethodChange = (method: string) => {
  if (method === 'GET') {
    modelValue.body = undefined;
  }
};

const onSave = () => {
  emit('update:modelValue', modelValue);
  emit('change', modelValue);

  // 保存到我的数据源
  // todo
};

const onInput = (text: string) => {
  debounce(getNetworks, 300);
};

// 请求我的数据源接口
const getNetworks = async () => {
  // const ret: any = await axios.get(`/api/xxx`);
  // if (ret) {
  //   dataDialog.networkList = ret.list
  // }
};

const onSelect = (item: any) => {
  Object.assign(modelValue, item);
  popupVisible = false;
};
</script>
<style lang="postcss" scoped>
.props {
}
</style>