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

<template>
  <div class="dataset-component">
    <div class="form-item mt-8">
      <label>数据集名称</label>
      <t-input v-model="modelValue.name" placeholder="名称" />
    </div>

    <div class="form-item mt-8">
      <label>数据方式</label>
      <t-radio-group v-model="modelValue.mode">
        <t-radio value="api">HTTP请求</t-radio>
        <t-radio value="">自定义</t-radio>
      </t-radio-group>
    </div>
    <div v-if="modelValue.mode === 'api'" class="form-item mt-8">
      <label>URL地址</label>
      <t-input v-model="modelValue.url" @blur="getDatas" @enter="getDatas" />
    </div>
    <template v-else>
      <div class="form-item mt-8">
        <label>从Excel导入</label>
        <div class="flex middle w-full">
          <t-button
            class="shrink-0"
            style="width: 90px; height: 30px"
            @click="importDataset"
          >
            导入Excel
          </t-button>
          <a href="/data.xlsx" download class="ml-12 mt-4 nowrap">
            下载Excel示例
          </a>
          <span class="flex-grow"></span>
          <a class="ml-12 mt-4 nowrap" @click="showAddData()"> + 添加数据 </a>
        </div>
      </div>
    </template>

    <t-table
      class="mt-16"
      row-key="id"
      :data="modelValue.data"
      :columns="datasetColumns"
      size="small"
    >
      <template #type="{ row }">
        {{ row.type || 'string' }}
      </template>
      <template v-if="!modelValue.mode" #actions="{ row, rowIndex }">
        <t-icon name="edit" class="hover" @click="showAddData(row, rowIndex)" />
        <t-icon
          name="delete"
          class="ml-12 hover"
          @click="modelValue.data.splice(rowIndex, 1)"
        />
      </template>
    </t-table>

    <t-dialog
      v-if="addDataDialog.show"
      :visible="true"
      class="data-dialog"
      :header="addDataDialog.header"
      @close="addDataDialog.show = false"
      @confirm="onOkAddData"
    >
      <div class="form-item mt-16">
        <label>数据点名称</label>
        <t-input v-model="addDataDialog.data.label" placeholder="简短描述" />
      </div>
      <div class="form-item mt-16">
        <label>数据点ID</label>
        <t-input v-model="addDataDialog.data.id" placeholder="数据点ID" />
      </div>
      <div class="form-item mt-16">
        <label>类型</label>
        <t-select
          class="w-full"
          :options="typeOptions"
          v-model="addDataDialog.data.type"
          placeholder="字符串"
          @change="addDataDialog.data.value = null"
        />
      </div>
      <div class="form-item mt-16">
        <label>值范围</label>
        <div class="w-full">
          <t-input v-model="addDataDialog.data.mock" placeholder="值范围" />
          <h6 class="desc mt-8">值范围说明</h6>
          <ul class="desc ml-16">
            <li>
              <label class="inline" style="width: 80px">固定值：</label>
              直接填写，例如：10
            </li>
            <li>
              <label class="inline" style="width: 80px">随机值：</label>
              {值1,值2,...}。例如：{1,2,3,4,5}
            </li>
            <li>
              <label class="inline" style="width: 80px">范围数字：</label>
              最小值-最大值。例如：0-1.0 或 0-100
            </li>
            <li>
              <label class="inline" style="width: 80px">随机字符串：</label>
              [长度]。例如：[8]
            </li>
          </ul>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, ref } from 'vue';
import axios from 'axios';
import { MessagePlugin } from 'tdesign-vue-next';

import { importExcel } from '@/services/excel';
import { typeOptions } from '@/services/common';

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

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

const datasetColumns = ref([
  {
    colKey: 'label',
    title: '数据点名称',
    ellipsis: true,
  },
  {
    colKey: 'id',
    title: '数据点ID',
    ellipsis: true,
  },
  {
    colKey: 'type',
    title: '类型',
    ellipsis: true,
  },
  {
    colKey: 'mock',
    title: '值范围',
    ellipsis: true,
  },
  {
    colKey: 'actions',
    title: '操作',
    width: 100,
  },
]);

const addDataDialog = reactive<any>({});

onBeforeMount(() => {
  if (!modelValue.data) {
    modelValue.data = [];
  }

  getDatas();
});

const getDatas = async () => {
  if (!modelValue.url) {
    return;
  }

  const ret = await axios.get(modelValue.url);
  if (ret) {
    modelValue.data = ret;
  }
};

const importDataset = async () => {
  let columns: any = [
    {
      header: '数据点名称',
      key: 'label',
    },
    {
      header: '数据点ID',
      key: 'id',
    },
    {
      header: '类型',
      key: 'type',
    },
    {
      header: '值范围',
      key: 'mock',
    },
  ];
  const data: any = await importExcel(columns);
  modelValue.data = data;
  emit('update:modelValue', modelValue);
  emit('change', modelValue);
};

const showAddData = (row?: any, index?: number) => {
  if (row) {
    addDataDialog.header = '编辑数据';
    addDataDialog.data = JSON.parse(JSON.stringify(row));
    addDataDialog.index = index;
  } else {
    addDataDialog.header = '添加数据';
    addDataDialog.data = { type: 'string' };
  }

  addDataDialog.show = true;
};

const onOkAddData = () => {
  if (!addDataDialog.data.label) {
    MessagePlugin.error('请填写名称');
    return;
  }
  if (!addDataDialog.data.id) {
    MessagePlugin.error('请填写数据ID');
    return;
  }

  if (addDataDialog.header === '添加数据') {
    modelValue.data.push(addDataDialog.data);
  } else {
    modelValue.data[addDataDialog.index] = addDataDialog.data;
  }

  addDataDialog.show = false;
};
</script>
<style lang="postcss" scoped>
.dataset-component {
  padding-right: 16px;
}
</style>