网络设置添加|DNS配置和多IP配置

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.4.16",
+  "version": "1.4.17",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",

src/components/AdvancedIpAddressDialog.vue

@@ -0,0 +1,275 @@
+<template>
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @before-hide="resetData"
+    @keydown="
+      (evt) => {
+        if (evt.keyCode == 27) {
+          show_dialog = false;
+        }
+      }
+    "
+  >
+    <q-card class="overflow-hidden" style="max-width: 45vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("ip address") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn flat round icon="close" color="red" v-close-popup>
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-section
+          class="scroll q-pa-xs q-ma-none"
+          style="width: 45vw; height: 55vh"
+        >
+          <q-list>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("ip address") }}
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="ip_address"
+                  autofocus
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                    (val) =>
+                      isIpAddress(val) || $t('Please input vaild ip address'),
+                    (val) => checkFilterListIp(val),
+                  ]"
+                  lazy-rules
+                />
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("gateway") }}
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="gateway"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                    (val) =>
+                      isIpAddress(val) || $t('Please input vaild ip address'),
+                  ]"
+                  lazy-rules
+                />
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("netmask") }}
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="netmask"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                    (val) =>
+                      isIpAddress(val) || $t('Please input vaild ip address'),
+                  ]"
+                  lazy-rules
+                />
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("dns server") }}1
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="dns1"
+                  :rules="[
+                    (val) =>
+                      isIpAddress(val) ||
+                      val.length == 0 ||
+                      $t('Please input vaild ip address'),
+                  ]"
+                  lazy-rules
+                />
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("dns server") }}2
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="dns2"
+                  :rules="[
+                    (val) =>
+                      isIpAddress(val) ||
+                      val.length == 0 ||
+                      $t('Please input vaild ip address'),
+                  ]"
+                  lazy-rules
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.header_label {
+  width: 20%;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, Ref, reactive } from "vue";
+import { useStore } from "src/store";
+import { useQuasar, copyToClipboard, uid } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+
+export default defineComponent({
+  name: "ComponentSystenSettingAdvancedNetworkDialog",
+  components: {},
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+
+    const status = ref("add");
+
+    const ip_address = ref("192.168.1.1");
+    const gateway = ref("192.168.1.1");
+    const netmask = ref("255.255.255.0");
+    const dns1 = ref("");
+    const dns2 = ref("");
+
+    let _resolove: any = null;
+    let ip_filter_list: any[] = [];
+
+    return {
+      show_dialog,
+      status,
+      ip_address,
+      gateway,
+      netmask,
+      dns1,
+      dns2,
+      loga(a: any) {
+        console.log(a);
+      },
+      async showDialogAsync(
+        _status: string,
+        data: any,
+        _ip_filter_list: any[]
+      ) {
+        if (_resolove) {
+          _resolove();
+          _resolove = null;
+        }
+        return new Promise((resolove) => {
+          _resolove = resolove;
+          status.value = _status;
+          if (data) {
+            ip_address.value = data.ip_address || "192.168.1.1";
+            gateway.value = data.gateway || "192.168.1.1";
+            netmask.value = data.netmask || "255.0.0.0";
+            dns1.value = data.dns1 || "";
+            dns2.value = data.dns2 || "";
+          }
+          ip_filter_list = _ip_filter_list;
+          if (Array.isArray(ip_filter_list) && data && data.ip_address) {
+            ip_filter_list = ip_filter_list.filter(
+              (element) => element != data.ip_address
+            );
+          }
+          show_dialog.value = true;
+        });
+      },
+      resetData() {
+        if (_resolove) {
+          _resolove();
+          _resolove = null;
+        }
+        status.value = "add";
+        ip_address.value = "192.168.1.1";
+        gateway.value = "192.168.1.1";
+        netmask.value = "192.168.1.1";
+        dns1.value = "";
+        dns2.value = "";
+      },
+
+      async onSubmit() {
+        try {
+          if (_resolove) {
+            try {
+              _resolove({
+                ip_address: ip_address.value,
+                gateway: gateway.value,
+                netmask: netmask.value,
+                dns1: dns1.value,
+                dns2: dns2.value,
+              });
+            } catch {
+              _resolove(null);
+            }
+          }
+          show_dialog.value = false;
+        } catch {}
+      },
+      isIpAddress(str: string) {
+        return (
+          str == "localhost" ||
+          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+            str
+          )
+        );
+      },
+      checkFilterListIp(str: string) {
+        if (Array.isArray(ip_filter_list)) {
+          const index = ip_filter_list.findIndex((e) => e == str);
+          if (index != -1) {
+            return (
+              $t.t("ip address") +
+              " " +
+              str +
+              " " +
+              $t.t("already existed") +
+              "!"
+            );
+          }
+        }
+        return true;
+      },
+    };
+  },
+});
+</script>

src/components/ClockSignalSourceDialog.vue

@@ -546,7 +546,7 @@ export default defineComponent({
               );
               _resolove(JSON.stringify(clock_entity.value));
             } catch {
-              _resolove();
+              _resolove(null);
             }
           }
           show_dialog.value = false;

src/components/SystemSettingDialog.vue

@@ -87,7 +87,7 @@
         <q-separator />
         <q-tab-panels v-model="tab" animated>
           <q-tab-panel name="network" class="_panel">
-            <q-card class="fit">
+            <q-card>
               <q-card-section>
                 <q-form ref="network_form" @submit="applyNetwork">
                   <q-list>
@@ -171,6 +171,46 @@
                         />
                       </q-item-section>
                     </q-item>
+                    <q-item v-if="auto_ip != $t('enable')">
+                      <q-item-section avatar class="width_5_1">{{
+                        $t("dns server") + "1:"
+                      }}</q-item-section>
+                      <q-item-section>
+                        <q-input
+                          :loading="loading"
+                          :disable="auto_ip == $t('enable') || loading"
+                          v-model="dns1"
+                          maxlength="15"
+                          :rules="[
+                            (val) =>
+                              isIpAddress(val) ||
+                              val.length == 0 ||
+                              $t('Please input vaild ip address'),
+                          ]"
+                          lazy-rules
+                        />
+                      </q-item-section>
+                    </q-item>
+                    <q-item v-if="auto_ip != $t('enable')">
+                      <q-item-section avatar class="width_5_1">{{
+                        $t("dns server") + "2:"
+                      }}</q-item-section>
+                      <q-item-section>
+                        <q-input
+                          :loading="loading"
+                          :disable="auto_ip == $t('enable') || loading"
+                          v-model="dns2"
+                          maxlength="15"
+                          :rules="[
+                            (val) =>
+                              isIpAddress(val) ||
+                              val.length == 0 ||
+                              $t('Please input vaild ip address'),
+                          ]"
+                          lazy-rules
+                        />
+                      </q-item-section>
+                    </q-item>
                     <q-item>
                       <q-item-section avatar class="width_5_1">{{
                         $t("mac address") + ":"
@@ -194,6 +234,19 @@
                         />
                       </q-item-section>
                     </q-item>
+                    <q-item>
+                      <q-item-section> </q-item-section>
+                      <q-item-section avatar>
+                        <q-btn
+                          @click="
+                            $refs.system_setting_advanced_network_dialog.showDialogAsync()
+                          "
+                          outline
+                          color="primary"
+                          :label="$t('advanced')"
+                        ></q-btn>
+                      </q-item-section>
+                    </q-item>
                   </q-list>
                 </q-form>
               </q-card-section>
@@ -963,6 +1016,9 @@
   </q-dialog>
 
   <timing-task-dialog ref="timing_task_dialog" />
+  <systen-setting-advanced-network-dialog
+    ref="system_setting_advanced_network_dialog"
+  />
 </template>
 
 <style scoped>
@@ -1009,6 +1065,8 @@ import TimingTaskEntity, {
 } from "src/entities/TimingTaskEntity";
 import { EWeekDays } from "src/entities/EWeekDays";
 
+import SystenSettingAdvancedNetworkDialog from "src/components/SystenSettingAdvancedNetworkDialog.vue";
+
 const _time_zones = [
   "UTC-12(Central Pacific)",
   "UTC-11(Central Pacific)",
@@ -1039,7 +1097,7 @@ const _time_zones = [
 
 export default defineComponent({
   name: "ComponentSystemSettingDialog",
-  components: { TimingTaskDialog },
+  components: { TimingTaskDialog, SystenSettingAdvancedNetworkDialog },
 
   setup() {
     let $store = useStore();
@@ -1063,6 +1121,8 @@ export default defineComponent({
     let ip_address = ref("127.0.0.1");
     let gateway = ref("127.0.0.1");
     let netmask = ref("127.0.0.1");
+    let dns1 = ref();
+    let dns2 = ref();
     let mac_address = ref("11:22:33:44:55:66");
 
     let brightness = ref(0);
@@ -1185,10 +1245,12 @@ export default defineComponent({
       if (config) {
         auto_ip.value =
           config.auto_ip_address != "0" ? $t.t("enable") : $t.t("disable");
-        gateway.value = config.gateway;
+        gateway.value = config.gateway || "192.168.1.1";
-        netmask.value = config.subnet_mask;
+        netmask.value = config.subnet_mask || "255.255.0.0";
-        mac_address.value = config.mac_address;
+        mac_address.value = config.mac_address || "5A:30:C2:5A:54:Bf";
-        ip_address.value = $store.state.device_ip_address;
+        ip_address.value = $store.state.device_ip_address || "192.168.1.168";
+        dns1.value = config.dns1 || "";
+        dns2.value = config.dns2 || "";
       }
     };
 
@@ -1313,6 +1375,8 @@ export default defineComponent({
       request.gateway = gateway.value;
       request.net_mask = netmask.value;
       request.mac_address = mac_address.value;
+      request.dns1 = dns1.value;
+      request.dns2 = dns2.value;
 
       let success = false;
       try {
@@ -1557,6 +1621,8 @@ export default defineComponent({
       ip_address,
       gateway,
       netmask,
+      dns1,
+      dns2,
       mac_address,
       brightness,
       contrast,
@@ -1721,10 +1787,12 @@ export default defineComponent({
               .getCurrentClient()
               ?.getSystemNetworkInfo();
             if (info) {
-              gateway.value = info.gateway;
+              gateway.value = info.gateway || "192.168.1.1";
-              netmask.value = info.net_mask;
+              netmask.value = info.net_mask || "255.255.0.0";
-              mac_address.value = info.mac_address;
+              dns1.value = info.dns1 || "";
-              ip_address.value = info.ip_address;
+              dns2.value = info.dns2 || "";
+              mac_address.value = info.mac_address || "5A:30:C2:5A:54:Bf";
+              ip_address.value = info.ip_address || "192.168.1.168";
               flag = true;
             }
           } catch {}

src/components/SystenSettingAdvancedNetworkDialog.vue

@@ -0,0 +1,292 @@
+<template>
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @before-hide="resetData"
+    @keydown="
+      (evt) => {
+        if (evt.keyCode == 27) {
+          show_dialog = false;
+        }
+      }
+    "
+  >
+    <q-card class="overflow-hidden" style="max-width: 60vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("advanced network setting") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn flat round icon="close" color="red" v-close-popup>
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-section
+          class="scroll q-pa-xs q-ma-none"
+          style="width: 60vw; height: 65vh"
+        >
+          <q-card class="fit">
+            <q-card-section class="q-pa-none fit">
+              <q-table
+                class="fit"
+                ref="advance_ip_table"
+                :title="$t('ip address')"
+                :rows="advance_ip_rows"
+                :columns="advance_ip_columns"
+                row-key="uuid"
+                :hide-bottom="true"
+                :selection="'single'"
+                @row-click="
+                  (evt, row, index) => {
+                    if (advance_ip_table_selected.length) {
+                      advance_ip_table_selected =
+                        advance_ip_table_selected[0].uuid == row.uuid
+                          ? []
+                          : [row];
+                    } else {
+                      advance_ip_table_selected = [row];
+                    }
+                  }
+                "
+                v-model:selected="advance_ip_table_selected"
+              >
+                <template v-slot:top="props">
+                  <div class="col-2 q-table__title">{{ $t("ip address") }}</div>
+
+                  <q-space />
+
+                  <q-btn
+                    flat
+                    color="primary"
+                    :label="$t('add row')"
+                    class="col-2"
+                    @click="advance_ip_addRow"
+                  />
+                  <q-btn
+                    :disable="advance_ip_table_selected.length == 0"
+                    flat
+                    color="primary"
+                    :label="$t('edit row')"
+                    class="col-2"
+                    @click="advance_ip_editRow"
+                  />
+                  <q-btn
+                    :disable="advance_ip_table_selected.length == 0"
+                    flat
+                    color="primary"
+                    :label="$t('delete row')"
+                    class="col-2"
+                    @click="
+                      advance_ip_table_selected.length &&
+                        (advance_ip_rows = advance_ip_rows.filter(
+                          (element) =>
+                            element && element != advance_ip_table_selected[0]
+                        )) &&
+                        (advance_ip_table_selected = [])
+                    "
+                  />
+                </template>
+              </q-table>
+            </q-card-section>
+          </q-card>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <advanced-ip-address-dialog ref="advanced_ip_address_dialog" />
+</template>
+
+<style scoped>
+.header_label {
+  width: 15%;
+}
+.header_label_2 {
+  width: 15%;
+  align-items: center;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, Ref, reactive } from "vue";
+import { useStore } from "src/store";
+import { useQuasar, copyToClipboard, uid } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+import AdvancedIpAddressDialog from "src/components/AdvancedIpAddressDialog.vue";
+
+export default defineComponent({
+  name: "ComponentSystenSettingAdvancedNetworkDialog",
+  components: { AdvancedIpAddressDialog },
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    const advanced_ip_address_dialog: Ref<any> = ref(null);
+
+    let show_dialog = ref(false);
+
+    const advance_ip_table_selected: Ref<any> = ref([]);
+
+    const advance_ip_columns = [
+      {
+        name: "ip_address",
+        required: true,
+        label: $t.t("ip address"),
+        align: "left",
+        field: "ip_address",
+      },
+      {
+        name: "netmask",
+        align: "left",
+        label: $t.t("netmask"),
+        field: "netmask",
+      },
+      {
+        name: "gateway",
+        align: "left",
+        label: $t.t("gateway"),
+        field: "gateway",
+      },
+      {
+        name: "dns1",
+        align: "left",
+        field: "dns1",
+        label: $t.t("dns server") + " 1",
+      },
+      {
+        name: "dns2",
+        align: "left",
+        field: "dns2",
+        label: $t.t("dns server") + " 2",
+      },
+    ];
+
+    const advance_ip_rows: Ref<any> = ref([]);
+
+    const isIpAddress = (str: string) => {
+      return (
+        str == "localhost" ||
+        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          str
+        )
+      );
+    };
+
+    let _resolove: any = null;
+
+    return {
+      show_dialog,
+      advanced_ip_address_dialog,
+      advance_ip_columns,
+      advance_ip_rows,
+      advance_ip_table_selected,
+      loga(a: any) {
+        console.log(a);
+      },
+      async showDialogAsync(_data: any) {
+        if (_resolove) {
+          _resolove();
+          _resolove = null;
+        }
+        return new Promise((resolove) => {
+          show_dialog.value = true;
+        });
+      },
+      resetData() {
+        if (_resolove) {
+          _resolove();
+          _resolove = null;
+        }
+        advance_ip_rows.value = [];
+        advance_ip_table_selected.value = [];
+      },
+
+      async onSubmit() {
+        let success = false;
+
+        try {
+          if (_resolove) {
+            try {
+              _resolove({
+                ip_address_list: advance_ip_rows.value,
+              });
+            } catch {
+              _resolove(null);
+            }
+          }
+        } catch {}
+
+        show_dialog.value = false;
+
+        // $q.notify({
+        //   color: success ? "positive" : "negative",
+        //   icon: success ? "done" : "warning",
+        //   message:
+        //     $t.t("set serialport") +
+        //     (success ? $t.t("success") : $t.t("fail")) +
+        //     "!",
+        //   position: "top",
+        //   timeout: 1500,
+        // });
+      },
+      async advance_ip_addRow() {
+        const data: any =
+          await advanced_ip_address_dialog.value.showDialogAsync(
+            "edit",
+            null,
+            advance_ip_rows.value.map((element: any) => element.ip_address)
+          );
+        if (data) {
+          advance_ip_rows.value.push({
+            uuid: uid(),
+            ip_address: data.ip_address,
+            gateway: data.gateway,
+            netmask: data.netmask,
+            dns1: data.dns1,
+            dns2: data.dns2,
+          });
+        }
+      },
+      async advance_ip_editRow() {
+        if (advance_ip_table_selected.value.length) {
+          const data: any =
+            await advanced_ip_address_dialog.value.showDialogAsync(
+              "edit",
+              advance_ip_table_selected.value[0],
+              advance_ip_rows.value.map((element: any) => element.ip_address)
+            );
+          if (data) {
+            advance_ip_table_selected.value[0].ip_address = data.ip_address;
+            advance_ip_table_selected.value[0].gateway = data.gateway;
+            advance_ip_table_selected.value[0].netmask = data.netmask;
+            advance_ip_table_selected.value[0].dns1 = data.dns1;
+            advance_ip_table_selected.value[0].dns2 = data.dns2;
+          }
+        }
+      },
+    };
+  },
+});
+</script>

src/entities/AdvancedNetworkDialogEntity.ts

@@ -0,0 +1,11 @@
+export class AdvancedIpEntity {
+  ip_address = "";
+  net_mask = "";
+  dns1 = "";
+  dns2 = "";
+}
+
+export class AdvancedNetworkDialogEntity {
+  ip_address_list: AdvancedIpEntity[] = [];
+  gateway_list: string[] = [];
+}

src/entities/ApplicationConfigEntity.ts

@@ -4,6 +4,8 @@ export default class ApplicationConfigEntity {
   gateway: string = "";
   mac_address: string = "";
   subnet_mask: string = "";
+  dns1 = "";
+  dns2 = "";
   use_ntp: string = "";
   ntp_server: string = "";
   ntp_sync_delay: string = "";

src/entities/WSProtocol.ts

@@ -1687,6 +1687,8 @@ export namespace Protocol {
     ip_address: string = "192.168.1.68";
     gateway: string = "192.168.1.1";
     net_mask: string = "255.255.255.0";
+    dns1: string = "";
+    dns2: string = "";
     mac_address: string = "04:D9:F5:D3:F4:C5";
 
     constructor(rcp_id?: number) {
@@ -2700,6 +2702,8 @@ export namespace Protocol {
     ip_address = "192.168.1.1";
     gateway = "192.168.1.1";
     net_mask = "192.168.1.1";
+    dns1 = "";
+    dns2 = "";
     mac_address = "AA:BB:CC:DD:EE:FF";
   }
 

src/i18n/zh-CN/index.ts

@@ -586,4 +586,10 @@ export default {
   "time format error": "时间格式错误",
   "input new file name": "输入新文件名",
   "number must be greater than or equal to ": "数字必须大于等于 ",
+  advanced: "高级",
+  "dns server": "DNS服务器",
+  "edit row": "编辑行",
+  "already existed": "已经存在",
+  "please input gateway": "请输入网关",
+  "advanced network setting": "高级网络设置",
 };