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>
          <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>
        </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)" />
        <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>
    </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: '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',
    },
  ];
  const data: any = await importExcel(columns);
  modelValue.data = data;
  emit('update:modelValue', modelValue);
  emit('change', modelValue);
};

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

  addDataDialog.show = true;
};

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

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