fix bug: datasource

src/styles/app.css

@@ -355,6 +355,10 @@ a.hover:hover {
   margin-top: 24px;
 }
 
+.ml-24 {
+  margin-left: 24px;
+}
+
 .px-4 {
   padding-left: 4px;
   padding-right: 4px;

src/views/components/Network.vue

@@ -15,18 +15,33 @@
         @focus="popupVisible = true"
         @blur="popupVisible = undefined"
         @input-change="onInput"
+        @clear="
+          modelValue.id = undefined;
+          modelValue._id = undefined;
+        "
       >
         <template #panel>
           <ul style="padding: 4px">
             <li
-              class="hover-background"
+              class="hover-background item"
               style="line-height: 1.5; padding: 8px; border-radius: 2px"
-              v-for="item in networkList"
+              v-for="(item, i) in networkList"
               :key="item.url"
               @click="() => onSelect(item)"
             >
               名称: {{ item.name }}
               <div class="desc">地址: {{ item.url }}</div>
+
+              <span class="del" @click.stop="onDelNetWork(item, i)">
+                <t-icon name="delete" />
+              </span>
+            </li>
+            <li
+              v-if="networkList.length >= 10"
+              style="line-height: 1.5; padding: 8px; border-radius: 2px"
+              :key="-1"
+            >
+              <div class="desc">...</div>
             </li>
             <li
               v-if="!networkList.length"
@@ -122,6 +137,7 @@
 import { onBeforeMount, ref } from 'vue';
 import axios from 'axios';
 import { debounce } from '@/services/debouce';
+import { MessagePlugin } from 'tdesign-vue-next';
 
 const { modelValue, mode } = defineProps<{
   modelValue: any;
@@ -134,6 +150,7 @@ const popupVisible = ref<boolean>(false);
 const networkList = ref<any[]>([]);
 
 onBeforeMount(() => {
+  modelValue.id = modelValue.id || modelValue._id;
   if (mode) {
     getNetworks();
   }
@@ -171,14 +188,17 @@ const onSave = async () => {
   emit('update:modelValue', modelValue);
   emit('change', modelValue);
 
-  const id = modelValue._id || modelValue.id;
+  let ret: any;
 
   // 保存到我的数据源
-  if (id) {
-    modelValue._id = id;
-    await axios.post(`/api/data/datasources/update`, modelValue);
+  if (modelValue.id) {
+    ret = await axios.post(`/api/data/datasources/update`, modelValue);
   } else {
-    await axios.post(`/api/data/datasources/add`, modelValue);
+    ret = await axios.post(`/api/data/datasources/add`, modelValue);
+  }
+
+  if (ret) {
+    MessagePlugin.success('保存成功！');
   }
 };
 
@@ -199,7 +219,12 @@ const getNetworks = async () => {
       name: modelValue.name,
     };
   }
-  const ret: any = await axios.post(`/api/data/datasources/list`, body);
+  const ret: any = await axios.post(`/api/data/datasources/list`, body, {
+    params: {
+      current: 1,
+      pageSize: 10,
+    },
+  });
   if (ret?.list) {
     for (const item of ret.list) {
       item.id = item.id || item._id;
@@ -212,6 +237,15 @@ const onSelect = (item: any) => {
   Object.assign(modelValue, item);
   popupVisible.value = false;
 };
+
+const onDelNetWork = async (item: any, i: number) => {
+  const ret: any = await axios.post(`/api/data/datasources/delete`, {
+    id: item._id || item.id,
+  });
+  if (ret) {
+    networkList.value.splice(i, 1);
+  }
+};
 </script>
 <style lang="postcss" scoped>
 .network-component {

src/views/components/View.vue

@@ -374,12 +374,7 @@
                 </template>
                 <template #actions="{ row, rowIndex }">
                   <a @click="editNetwork(row)"> 编辑 </a>
-                  <t-popconfirm
-                    content="确认删除吗"
-                    @confirm="deleteNetwork(rowIndex)"
-                  >
-                    <a class="ml-12"> 删除 </a>
-                  </t-popconfirm>
+                  <a class="ml-12" @click="deleteNetwork(rowIndex)"> 删除 </a>
                 </template>
                 <template #empty>
                   <div class="center">
@@ -394,7 +389,10 @@
             <div v-else>
               <div class="mt-8">
                 <a
-                  @click="dataDialog.editNetwork = false"
+                  @click="
+                    dataDialog.network = dataDialog.networkBak;
+                    dataDialog.editNetwork = false;
+                  "
                   class="flex middle"
                   style="width: 44px"
                 >
@@ -416,12 +414,12 @@
                 <div class="flex w-full">
                   <t-select
                     class="flex-grow"
-                    v-model="dataDialog.dataset.id"
+                    v-model="dataDialog.datasetId"
                     filterable
                     placeholder="选择数据集"
                     :on-search="onInputDatasets"
                     :popup-props="{ overlayClassName: 'select-options' }"
-                    @change="onSelDataset"
+                    @change="onSelDataset()"
                   >
                     <t-option
                       v-for="(item, i) in dataDialog.datasetList"
@@ -471,13 +469,13 @@
                 </template>
               </t-table>
             </template>
-
             <div v-else>
               <div class="mt-8">
                 <a
                   @click="
-                    onSelDataset();
-                    dataDialog.editDataset = false;
+                    dataDialog.dataset = dataDialog.datasetBak;
+                    dataDialog.datasetId = dataDialog.dataset.id;
+                    dataDialog.editDataset = 0;
                   "
                   class="flex middle"
                   style="width: 44px"
@@ -502,28 +500,33 @@
           <t-checkbox v-model="dataDialog.save">
             同时保存到我的数据订阅
           </t-checkbox>
-          <t-button class="ml-16" @click="onOkNetwork">确定</t-button>
+          <t-button @click="onOkNetwork">确定</t-button>
         </div>
         <div v-else-if="dataDialog.tab === 2" class="flex middle">
-          <template v-if="dataDialog.editDataset">
+          <template v-if="dataDialog.editDataset === 1">
             <div class="flex-grow"></div>
             <t-checkbox v-model="dataDialog.save">
               同时保存为我的数据集
             </t-checkbox>
-            <t-button class="ml-16" @click="onOkDataset">确定</t-button>
+            <t-button @click="onOkDataset()">保存</t-button>
+          </template>
+          <template v-else-if="dataDialog.editDataset === 2">
+            <div class="flex-grow"></div>
+            <t-button @click="onOkDataset(true)"> 另外为新数据集 </t-button>
+            <t-button @click="onOkDataset()">保存</t-button>
           </template>
           <template v-else>
-            <a v-if="dataDialog.dataset.id" @click="dataDialog.editDataset = 2">
+            <a v-if="dataDialog.dataset.id" @click="editDataset">
               编辑当前数据集
             </a>
             <div class="flex-grow"></div>
 
-            <t-button class="ml-16" @click="onOkDatasources">完成</t-button>
+            <t-button @click="dataDialog.show = false"> 完成 </t-button>
           </template>
         </div>
         <div v-else class="flex middle">
           <div class="flex-grow"></div>
-          <t-button class="ml-16" @click="onOkDatasources"> 完成 </t-button>
+          <t-button @click="dataDialog.show = false"> 完成 </t-button>
         </div>
       </template>
     </t-dialog>
@@ -1174,11 +1177,12 @@ const networkColumns = ref([
   { colKey: 'actions', title: '操作', width: 100 },
 ]);
 
-const onShowDataDialog = () => {
+const onShowDataDialog = async () => {
   dataDialog.input = '';
   dataDialog.networks = meta2d.store.data.networks || [];
   // @ts-ignore
   dataDialog.dataset = meta2d.store.data.dataset || {};
+  dataDialog.datasetId = dataDialog.dataset.id;
   // @ts-ignore
   dataDialog.enableMock = meta2d.store.data.enableMock;
   dataDialog.networkList = [];
@@ -1187,7 +1191,8 @@ const onShowDataDialog = () => {
   dataDialog.save = true;
   dataDialog.show = true;
   getNetworks();
-  getDatasets();
+  await getDatasets();
+  onSelDataset(true);
 };
 
 const onChangeMock = () => {
@@ -1196,7 +1201,16 @@ const onChangeMock = () => {
 };
 
 const onSelectNetWork = (item: any) => {
-  dataDialog.networks.push(item);
+  const network: any = dataDialog.networks.find(
+    (elem: any) => item.id === elem.id
+  );
+  if (!network) {
+    dataDialog.networks.push(item);
+    meta2d.store.data.networks = dataDialog.networks;
+    meta2d.connectNetwork();
+    setDot(true);
+  }
+
   dataDialog.popupVisible = false;
 };
 
@@ -1233,7 +1247,10 @@ const getNetworks = async () => {
       },
     }
   );
-  if (ret) {
+  if (ret?.list) {
+    for (const item of ret.list) {
+      item.id = item.id || item._id;
+    }
     dataDialog.networkList = ret.list;
   }
 };
@@ -1260,17 +1277,17 @@ const getDatasets = async (name?: string) => {
     },
   });
   if (ret?.list) {
+    let found = false;
     for (const item of ret.list) {
       item.id = item.id || item._id;
-    }
-    if (dataDialog.dataset?.id) {
-      const found = ret.list.findIndex(
-        (item: any) => item.id === dataDialog.dataset.id
-      );
-      if (found < 0) {
-        ret.list.push(dataDialog.dataset);
+      if (dataDialog.dataset?.id === item.id) {
+        found = true;
       }
     }
+    if (dataDialog.dataset?.id && !found) {
+      ret.list.push(dataDialog.dataset);
+    }
+
     dataDialog.datasetList = ret.list;
   }
 };
@@ -1292,13 +1309,16 @@ const addNetwork = () => {
 };
 
 const editNetwork = (data: any) => {
-  dataDialog.network = data;
+  dataDialog.networkBak = data;
+  dataDialog.network = JSON.parse(JSON.stringify(data));
   dataDialog.editNetwork = 2;
 };
 
 const deleteNetwork = (index: number) => {
   dataDialog.networks.splice(index, 1);
-  meta2d.connectSocket();
+  meta2d.store.data.networks = dataDialog.networks;
+  meta2d.connectNetwork();
+  setDot(true);
 };
 
 const onOkNetwork = async () => {
@@ -1311,8 +1331,8 @@ const onOkNetwork = async () => {
       if (!ret) {
         return;
       }
-      dataDialog.network._id = ret._id || ret.id;
-      dataDialog.network.id = dataDialog.network._id;
+      ret.id = ret.id || ret._id;
+      dataDialog.network._id = dataDialog.network.id = ret.id;
     }
     dataDialog.networks.push(dataDialog.network);
     dataDialog.networkList.push(dataDialog.network);
@@ -1328,7 +1348,12 @@ const onOkNetwork = async () => {
     }
   }
 
+  meta2d.store.data.networks = dataDialog.networks;
+  meta2d.connectNetwork();
+  setDot(true);
+
   dataDialog.editNetwork = false;
+  delete dataDialog.networkBak;
 };
 
 const datasetColumns = ref([
@@ -1360,61 +1385,66 @@ const addDataset = () => {
   dataDialog.editDataset = 1;
 };
 
-const onOkDataset = async () => {
+const editDataset = () => {
+  dataDialog.datasetBak = dataDialog.dataset;
+  dataDialog.dataset = JSON.parse(JSON.stringify(dataDialog.dataset));
+  dataDialog.editDataset = 2;
+};
+
+const onOkDataset = async (saveas = false) => {
   if (!dataDialog.dataset.name) {
     MessagePlugin.error('名称不能为空');
     return;
   }
 
+  const dataset = JSON.parse(JSON.stringify(dataDialog.dataset));
+
   // 保存到我的数据源
-  if (dataDialog.editDataset === 1) {
-    if (dataDialog.save) {
-      const ret: any = await axios.post(
-        `/api/data/datasources/add`,
-        dataDialog.dataset
-      );
-      if (!ret) {
-        return;
-      }
-      dataDialog.dataset._id = ret._id || ret.id;
-      dataDialog.dataset.id = dataDialog.dataset._id;
+  if (saveas || dataDialog.editDataset === 1) {
+    delete dataset.id;
+    delete dataset._id;
+    const ret: any = await axios.post(`/api/data/datasources/add`, dataset);
+    if (!ret) {
+      return;
     }
+    ret.id = ret.id || ret._id;
+    dataDialog.datasetId = ret.id;
+    dataDialog.dataset._id = dataDialog.dataset.id = ret.id;
     dataDialog.datasetList.push(dataDialog.dataset);
-  } else if (dataDialog.editDataset === 2) {
-    if (dataDialog.save) {
-      const ret: any = await axios.post(
-        `/api/data/datasources/update`,
-        dataDialog.dataset
-      );
-      if (!ret) {
-        return;
-      }
+  } else {
+    const ret: any = await axios.post(`/api/data/datasources/update`, dataset);
+    if (!ret) {
+      return;
     }
   }
 
+  delete dataset.data;
+  // @ts-ignore
+  meta2d.store.data.dataset = dataset;
+
+  setDot(true);
+
   dataDialog.editDataset = false;
+  delete dataDialog.datesetBak;
 };
 
 const onDelDataset = async (item: any, i: number) => {
   const ret: any = await axios.post(`/api/data/datasources/delete`, {
-    id: item._id || item.id,
+    id: item.id,
   });
   if (ret) {
     dataDialog.datasetList.splice(i, 1);
   }
 };
 
-const onSelDataset = async () => {
-  if (dataDialog.dataset.id) {
-    const dataset: any = dataDialog.datasetList.find(
-      (item: any) =>
-        item._id === dataDialog.dataset.id || item.id === dataDialog.dataset.id
-    );
-
-    if (!dataset.id) {
-      dataset.id = dataset._id;
-    } else if (!dataset._id) {
-      dataset._id = dataset.id;
+const onSelDataset = async (init = false) => {
+  if (dataDialog.datasetId) {
+    const dataset = dataDialog.datasetList.find((item: any) => {
+      return item.id === dataDialog.datasetId;
+    });
+
+    if (!dataset) {
+      return;
     }
 
     if (dataset.url) {
@@ -1422,22 +1452,26 @@ const onSelDataset = async () => {
       if (ret) {
         dataset.data = ret;
       }
+    } else {
+      const ret = await axios.post(`/api/data/datasources/get`, {
+        id: dataset.id,
+      });
+      if (ret?.data) {
+        dataset.data = ret.data;
+      }
     }
 
-    dataDialog.dataset = JSON.parse(JSON.stringify(dataset));
-  }
-};
+    dataDialog.dataset = dataset;
 
-const onOkDatasources = () => {
-  meta2d.store.data.networks = dataDialog.networks;
-  if (dataDialog.dateset) {
-    delete dataDialog.dataset.data;
+    if (!init) {
+      const d = JSON.parse(JSON.stringify(dataset));
+      delete d.data;
+      // @ts-ignore
+      meta2d.store.data.dataset = d;
+
+      setDot(true);
+    }
   }
-  // @ts-ignore
-  meta2d.store.data.dataset = dataDialog.dataset;
-  setDot(true);
-  meta2d.connectNetwork();
-  dataDialog.show = false;
 };
 
 const share = async () => {