信号源组的增删改

src/common/ClientConnection.ts

@@ -302,6 +302,36 @@ export default class ClientConnection {
     }
   }
 
+  public async editSignalSourceGroup(uuid: string, name: string) {
+    try {
+      return await this.doRpc<Protocol.EditSignalSourcesGroupResponseEntity>(
+        new Protocol.EditSignalSourcesGroupRequestEntity(0, uuid, name)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async deleteSignalSourceGroup(uuid: string) {
+    try {
+      return await this.doRpc<Protocol.DeleteSignalSourcesGroupResponseEntity>(
+        new Protocol.DeleteSignalSourcesGroupRequestEntity(0, uuid)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async deleteSignalSource(uuid: string) {
+    try {
+      return await this.doRpc<Protocol.DeleteSignalSourcesGroupResponseEntity>(
+        new Protocol.DeleteSignalSourcesGroupRequestEntity(0, uuid)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   private _destoryed = false;
   public destory() {
     this._destoryed = true;

src/components/GroupDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog v-model="show_dialog" @before-hide="resetData">
-    <q-card class="overflow-hidden" style="overflow-y: scroll">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; width: 45vw">
       <q-card-section class="q-ma-none q-pa-sm">
         <div class="row">
           <div class="col-11 text-h6">
@@ -15,7 +15,14 @@
             }}
           </div>
           <div class="col-1">
-            <q-btn flat round icon="close" color="red" v-close-popup>
+            <q-btn
+              :loading="loading"
+              flat
+              round
+              icon="close"
+              color="red"
+              v-close-popup
+            >
               <q-tooltip>
                 {{ $t("close") }}
               </q-tooltip>
@@ -28,10 +35,10 @@
 
       <q-card-section style="max-height: 50vh; width: 45vw" class="scroll">
         <q-list>
-          <q-item>
+          <q-item v-if="type != 2">
             <q-item-label>{{ $t("parent group") }}:</q-item-label>
           </q-item>
-          <q-item class="q-pa-none q-ma-none">
+          <q-item v-if="type != 2" class="q-pa-none q-ma-none">
             <q-item-section style="padding-right: 10px">
               <q-tree
                 ref="tree"
@@ -42,6 +49,8 @@
                 default-expand-all
                 node-key="uuid"
                 labelKey="name"
+                filter="group filter"
+                :filter-method="treeNodesFilter"
               >
                 <template v-slot:default-header="prop">
                   <q-item
@@ -107,11 +116,18 @@
       <q-separator />
 
       <q-card-actions align="right">
-        <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
+        <q-btn
+          :loading="loading"
+          flat
+          :label="$t('Cancel')"
+          color="primary"
+          v-close-popup
+        />
         <q-btn
           ref="accept"
           flat
           :label="$t('Accept')"
+          :loading="loading"
           color="primary"
           @click="onSubmit"
         />
@@ -129,11 +145,19 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, ref, watch, onUnmounted, computed } from "vue";
+import {
+  defineComponent,
+  ref,
+  watch,
+  reactive,
+  onUnmounted,
+  computed,
+} from "vue";
 import { useStore } from "src/store";
 import GlobalData from "src/common/GlobalData";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
+import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
 
 export default defineComponent({
   name: "ComponentGroupDialog",
@@ -146,13 +170,13 @@ export default defineComponent({
     let show_dialog = ref(false);
     let type = ref(1);
     let name = ref(null);
+    let uuid = ref("");
     const selected: any = ref(null);
     let loading = ref(false);
 
     const tree_nodes = computed({
-      get: () =>
+      get: () => $store.state.signal_source_tree,
-        $store.state.signal_source_tree.filter((item) => item && item.is_group),
+      set: (val) => {},
-      set: (val) => $store.commit("setSignalSourceTree", val),
     });
 
     watch(
@@ -164,31 +188,7 @@ export default defineComponent({
       }
     );
 
-    return {
+    const requestAddSignalSourceGroup = async () => {
-      show_dialog,
-      type,
-      name,
-      selected,
-      loading,
-      tree_nodes,
-      showDialog(options: any) {
-        if (options) {
-          type.value = options.type ?? 1;
-          name.value = options.name ?? null;
-          selected.value = options.parent ?? null;
-        }
-        show_dialog.value = true;
-      },
-      resetData() {
-        loading.value = false;
-        (selected.value = null), (name.value = null);
-        type.value = 1;
-        console.log("reset dialog data");
-      },
-
-      async onSubmit() {
-        loading.value = true;
-        try {
       let response = await GlobalData.getInstance()
         .getCurrentClient()
         ?.addSignalSourceGroup(selected.value, name.value ?? "");
@@ -204,6 +204,60 @@ export default defineComponent({
           timeout: 1000,
         });
       }
+    };
+
+    const requestEditSignalSourceGroup = async () => {
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.editSignalSourceGroup(uuid.value, name.value ?? "");
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("edit group") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1000,
+        });
+      }
+    };
+
+    return {
+      show_dialog,
+      type,
+      name,
+      uuid,
+      selected,
+      loading,
+      tree_nodes,
+      showDialog(options: any) {
+        if (options) {
+          type.value = options.type ?? 1;
+          if (type.value == 2) {
+            name.value = options.data?.name ?? null;
+          }
+          selected.value = options.data?.uuid ?? null;
+          uuid.value = options.data?.uuid ?? null;
+        }
+        show_dialog.value = true;
+      },
+      resetData() {
+        loading.value = false;
+        (selected.value = null), (name.value = null);
+        type.value = 1;
+      },
+      treeNodesFilter(node: any, filter: any) {
+        return node.is_group && !node.item_data?.system_default;
+      },
+
+      async onSubmit() {
+        loading.value = true;
+        try {
+          await (type.value == 2
+            ? requestEditSignalSourceGroup()
+            : requestAddSignalSourceGroup());
           show_dialog.value = false;
         } catch {}
         loading.value = false;

src/entities/WSProtocol.ts

@@ -69,6 +69,14 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcAddSignalSourceGroup";
     }
 
+    public static get kRpcDeleteSignalSourceGroup() {
+      return Commands.PROTOCOL_PREFIX + "RpcDeleteSignalSourceGroup";
+    }
+
+    public static get kRpcEditSignalSourceGroup() {
+      return Commands.PROTOCOL_PREFIX + "RpcEditSignalSourceGroup";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -86,6 +94,8 @@ export namespace Protocol {
       Commands.kCloseWindow,
       Commands.kWindowOtherStateChanged,
       Commands.kRpcAddSignalSourceGroup,
+      Commands.kRpcDeleteSignalSourceGroup,
+      Commands.kRpcEditSignalSourceGroup,
     ]);
 
     public static get AllCommands() {
@@ -316,4 +326,46 @@ export namespace Protocol {
       this.command = Protocol.Commands.kRpcAddSignalSourceGroup;
     }
   }
+
+  export class EditSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
+    uuid = "";
+    name = "";
+
+    constructor(rcp_id?: number, uuid?: string, name?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcEditSignalSourceGroup;
+      this.uuid = uuid ?? "";
+      this.name = name ?? "";
+    }
+  }
+
+  export class EditSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcEditSignalSourceGroup;
+    }
+  }
+
+  export class DeleteSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
+    uuid = "";
+
+    constructor(rcp_id?: number, uuid?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcDeleteSignalSourceGroup;
+      this.uuid = uuid ?? "";
+    }
+  }
+
+  export class DeleteSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcDeleteSignalSourceGroup;
+    }
+  }
 }

src/i18n/zh-CN/index.ts

@@ -4,6 +4,7 @@
 export default {
   title: "MediaPlayerWebAPP",
   failed: "失败",
+  fail: "失败",
   success: "成功",
   Cancel: "取消",
   Accept: "确认",

src/pages/LeftToolBar.vue

@@ -28,7 +28,17 @@
           <q-popup-proxy context-menu>
             <q-popup-proxy context-menu />
             <q-list>
-              <q-item clickable v-close-popup v-ripple>
+              <q-item
+                v-if="
+                  prop.node.name == $t('root') ||
+                  (prop.node.is_group &&
+                    prop.node.item_data &&
+                    !prop.node.item_data.system_default)
+                "
+                clickable
+                v-close-popup
+                v-ripple
+              >
                 <q-item-section avatar><q-icon name="add" /></q-item-section>
                 <q-item-section>{{
                   $t("add signal source item")
@@ -37,13 +47,18 @@
               <q-item
                 clickable
                 v-close-popup
-                v-if="prop.node.is_group"
+                v-if="
+                  prop.node.name == $t('root') ||
+                  (prop.node.is_group &&
+                    prop.node.item_data &&
+                    !prop.node.item_data.system_default)
+                "
                 v-ripple
                 @click="
                   () =>
                     $refs.group_dialog.showDialog({
                       type: 1,
-                      parent: prop.node.uuid,
+                      data: prop.node,
                     })
                 "
               >
@@ -56,7 +71,16 @@
                 clickable
                 v-ripple
                 v-close-popup
-                v-if="prop.node.uuid != '' && prop.node.name != $t('root')"
+                v-if="
+                  prop.node.item_data && !prop.node.item_data.system_default
+                "
+                @click="
+                  () =>
+                    $refs.group_dialog.showDialog({
+                      type: 2,
+                      data: prop.node,
+                    })
+                "
               >
                 <q-item-section avatar><q-icon name="edit" /></q-item-section>
                 <q-item-section>{{ $t("edit") }}</q-item-section>
@@ -66,7 +90,12 @@
                 clickable
                 v-ripple
                 v-close-popup
-                v-if="prop.node.uuid != '' && prop.node.name != $t('root')"
+                v-if="
+                  prop.node.item_data && !prop.node.item_data.system_default
+                "
+                @click="
+                  (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
+                "
               >
                 <q-item-section avatar
                   ><q-icon color="red" name="delete"
@@ -88,6 +117,9 @@ import { useStore } from "src/store";
 import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
 import GroupDialog from "src/components/GroupDialog.vue";
 import { Common } from "src/common/Common";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "PageLeftToolBar",
@@ -96,6 +128,8 @@ export default defineComponent({
 
   setup() {
     const $store = useStore();
+    const $q = useQuasar();
+    const $t = useI18n();
 
     const tree_nodes = computed({
       get: () => $store.state.signal_source_tree,
@@ -117,6 +151,37 @@ export default defineComponent({
       getItemIcon(item_type: string) {
         return Common.getSignalSourceIcon(item_type);
       },
+      async deleteItem(
+        evt: PointerEvent | null,
+        is_group: boolean,
+        uuid: string
+      ) {
+        let success = false;
+        if (is_group) {
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.deleteSignalSourceGroup(uuid);
+          if (response) {
+            success = response.success;
+          }
+        } else {
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.deleteSignalSource(uuid);
+          if (response) {
+            success = response.success;
+          }
+        }
+
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("delete") + (success ? $t.t("success") : $t.t("fail")) + "!",
+          position: "top",
+          timeout: 1000,
+        });
+      },
     };
   },
 });

src/store/index.ts

@@ -183,6 +183,7 @@ export default store(function (/* { ssrContext } */) {
                 item.name,
                 true
               );
+              node_item.item_data = item;
               parent.children.push(node_item);
               buildGroup(node_item, group_array, item_array);
             }