添加信号源时可以选择远程文件的功能

src/boot/axios.ts

@@ -13,7 +13,10 @@ declare module "@vue/runtime-core" {
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: "https://api.example.com" });
+const api = axios.create({
+  baseURL: "https://" + window.location.hostname,
+  timeout: 10000,
+});
 api.defaults.headers.common["X-Product-Name"] = "RK_3568";
 
 export default boot(({ app }) => {

src/components/FileManageDialog.vue

@@ -32,16 +32,17 @@
         <div class="q-pa-md q-gutter-sm">
           <q-breadcrumbs separator="/">
             <q-breadcrumbs-el
-              :disable="status == 'uploading'"
+              :disable="uploading"
               icon="home"
+              :label="default_path_label"
               to="#"
-              @click="path = ''"
+              @click="path = default_path"
             />
             <q-breadcrumbs-el
               v-for="(item, index) of paths.slice(1)"
               :key="index"
               :label="item.name"
-              :disable="status == 'uploading'"
+              :disable="uploading"
               to="#"
               @click="path = item.path"
             />
@@ -50,10 +51,34 @@
       </div>
       <q-separator />
       <div class="row">
+        <q-btn-dropdown
+          stretch
+          flat
+          :label="default_path_label"
+          :disable="uploading"
+          class="q-mr-sm"
+        >
+          <q-list>
+            <q-item
+              v-for="(item, index) of disk_options"
+              :key="index"
+              clickable
+              v-close-popup
+              @click="default_path = item.value"
+            >
+              <q-item-section avatar>
+                <q-icon
+                  :name="item.label == $t('local disk') ? 'desktop_mac' : 'usb'"
+                />
+              </q-item-section>
+              <q-item-section> {{ item.label }} </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
         <q-btn
           flat
           icon="arrow_back"
-          :disable="path.trim() == '' || status == 'uploading'"
+          :disable="path.trim() == '' || uploading"
           @click="backToParentPath"
           :label="$t('back')"
         >
@@ -64,9 +89,7 @@
         <q-btn
           flat
           icon="arrow_forward"
-          :disable="
+          :disable="prev_path == '' || path == prev_path || uploading"
-            prev_path == '' || path == prev_path || status == 'uploading'
-          "
           @click="(path = prev_path) && (prev_path = '')"
           :label="$t('forward')"
         >
@@ -78,7 +101,7 @@
           flat
           icon="refresh"
           @click="refresh_file_list"
-          :disable="status == 'uploading'"
+          :disable="uploading"
           :label="$t('refresh')"
         >
           <q-tooltip>
@@ -89,7 +112,7 @@
           flat
           icon="create_new_folder"
           @click="onCreateNewFolder"
-          :disable="loading"
+          :disable="loading || uploading"
           :label="$t('create folder')"
         >
           <q-tooltip>
@@ -98,10 +121,10 @@
         </q-btn>
         <q-btn
           flat
-          v-if="status != 'uploading'"
+          v-if="!uploading"
           icon="upload"
           :label="$t('upload file')"
-          @click="status = 'uploading'"
+          @click="uploading = true"
         >
           <q-tooltip>
             {{ $t("upload file") }}
@@ -110,9 +133,9 @@
         <q-btn
           flat
           icon="block"
-          v-if="status == 'uploading'"
+          v-if="uploading"
           :label="$t('cancel upload file')"
-          @click="status = 'normal'"
+          @click="uploading = false"
         >
           <q-tooltip>
             {{ $t("cancel upload file") }}
@@ -127,7 +150,7 @@
       >
         <q-table
           style="height: 69vh"
-          v-show="status != 'uploading'"
+          v-show="!uploading"
           :rows="files"
           :columns="columns"
           virtual-scroll
@@ -150,8 +173,8 @@
                   style="color: #ffbe4a; font-size: 2.5em"
                 ></q-icon>
                 {{
-                  props.value.length > 23
+                  props.value.length > 60
-                    ? props.value.substr(0, 23) + "..."
+                    ? props.value.substr(0, 60) + "..."
                     : props.value
                 }}
                 <q-tooltip> {{ props.value }} </q-tooltip>
@@ -160,30 +183,46 @@
                 {{ props.value }}
               </div>
               <div v-else>
-                <div v-if="props.row.can_write">
+                <div v-if="status != 'select'">
-                  <a href="#" @click="(evt) => renameFile(props.row)">
+                  <div v-if="props.row.can_write">
-                    {{ $t("rename") }}
+                    <a href="#" @click="(evt) => renameFile(props.row)">
-                    <q-tooltip> {{ $t("click") }}{{ $t("rename") }} </q-tooltip>
+                      {{ $t("rename") }}
-                  </a>
+                      <q-tooltip>
-                  &nbsp;&nbsp;&nbsp;&nbsp;
+                        {{ $t("click") }}{{ $t("rename") }}
-                  <a href="#" @click="(evt) => deleteFile(props.row)">
+                      </q-tooltip>
-                    {{ $t("delete") }}
+                    </a>
-                    <q-tooltip> {{ $t("click") }}{{ $t("delete") }} </q-tooltip>
+                    &nbsp;&nbsp;&nbsp;&nbsp;
+                    <a href="#" @click="(evt) => deleteFile(props.row)">
+                      {{ $t("delete") }}
+                      <q-tooltip>
+                        {{ $t("click") }}{{ $t("delete") }}
+                      </q-tooltip>
+                    </a>
+                  </div>
+                </div>
+                <div v-else-if="!props.row.is_directory">
+                  <a href="#" @click="(evt) => selectFile(props.row)">
+                    {{ $t("select file") }}
+                    <q-tooltip>
+                      {{ $t("click") }}{{ $t("select file") }}
+                    </q-tooltip>
                   </a>
                 </div>
               </div>
             </q-td>
           </template>
         </q-table>
-        <div v-show="status == 'uploading'" class="row q-ma-sm">
+        <div v-show="uploading" class="row q-ma-sm">
           <q-space />
           <q-uploader
+            ref="uploader"
             style="height: 69vh; width: 70%"
             :url="getUrl"
             method="post"
             :headers="generatorFileUploadHeaders"
             :label="$t('select file') + ':'"
             accept="*"
+            @start="onStartUpload"
             @uploaded="onUploaded"
             @failed="onFailed"
           >
@@ -202,12 +241,12 @@
           @click="(evt) => copyStringToClipboard(current_file.name)"
         >
           <q-item-section avatar><q-icon name="file_copy" /></q-item-section>
-          <q-item-section>{{ $t("copy file name") }}</q-item-section>
+          <q-item-section>{{ $t("copy name") }}</q-item-section>
         </q-item>
         <q-item
           clickable
           v-close-popup
-          v-if="current_file && current_file.can_write"
+          v-if="current_file && current_file.can_write && status != 'select'"
           @click="(evt) => renameFile(current_file)"
         >
           <q-item-section avatar><q-icon name="edit" /></q-item-section>
@@ -216,7 +255,7 @@
         <q-item
           clickable
           v-close-popup
-          v-if="current_file && current_file.can_write"
+          v-if="current_file && current_file.can_write && status != 'select'"
           @click="(evt) => deleteFile(current_file)"
         >
           <q-item-section avatar
@@ -224,6 +263,15 @@
           /></q-item-section>
           <q-item-section>{{ $t("delete") }}</q-item-section>
         </q-item>
+        <q-item
+          clickable
+          v-close-popup
+          v-if="status == 'select' && !current_file.is_directory"
+          @click="(evt) => selectFile(current_file)"
+        >
+          <q-item-section avatar><q-icon name="attach_file" /></q-item-section>
+          <q-item-section>{{ $t("select file") }}</q-item-section>
+        </q-item>
       </q-list>
     </q-menu>
   </div>
@@ -296,15 +344,34 @@ export default defineComponent({
 
     let show_dialog = ref(false);
     let loading = ref(false);
+    let uploading = ref(false);
     let files = ref(<FileEntity[]>[]);
     let show_context_menu = ref(false);
     let target_dom: any = ref(document.body.children[0]);
     let current_file = ref(new FileEntity());
-    let path = ref("");
+    let default_path_label = ref($t.t("local disk"));
+    let default_path = ref("media");
+    let path = ref(default_path.value);
     let prev_path = ref("");
     let paths = ref([new _BreadcrumbItem("root", "")]);
     let status = ref("normal");
     let upload_url = ref("");
+    let uploader: any = ref(null);
+    let resolve: any = null;
+    let resolve_value: any = null;
+
+    const disk_options = ref([
+      {
+        label: $t.t("local disk"),
+        value: "media",
+      },
+    ]);
+    for (let i = 1; i < 8; ++i) {
+      disk_options.value.push({
+        label: $t.t("usb") + i.toString(),
+        value: "/usb" + i.toString(),
+      });
+    }
 
     const columns = [
       {
@@ -409,42 +476,107 @@ export default defineComponent({
       refresh_file_list_async();
     };
 
+    const selectFile = async (file: FileEntity) => {
+      resolve_value = {
+        file,
+        path: path.value,
+      };
+      show_dialog.value = false;
+    };
+
     watch(
       () => path.value,
-      (newValue: string) => {
+      (newValue: string, oldValue: string) => {
+        if (!newValue) {
+          path.value = oldValue ?? default_path.value;
+          return;
+        }
         paths.value = [];
-        let parent_item = new _BreadcrumbItem("root", "");
+        let parent_item = null;
         for (let item of newValue.split("/")) {
-          let temp = new _BreadcrumbItem(item, parent_item.path + "/" + item);
+          if (item.trim() == "") {
+            continue;
+          }
+
+          let temp: _BreadcrumbItem = new _BreadcrumbItem(
+            item,
+            (parent_item
+              ? parent_item.path + "/"
+              : newValue.length > 0
+              ? newValue[0] == "/" || "\\"
+                ? "/"
+                : ""
+              : "") + item
+          );
+
           paths.value.push(temp);
           parent_item = temp;
         }
         if (paths.value.length < 1) {
-          paths.value.push(new _BreadcrumbItem("root", ""));
+          paths.value.push(new _BreadcrumbItem("local disk", "media"));
         }
         refresh_file_list();
       }
     );
 
+    watch(
+      () => status.value,
+      (newValue: string) => {
+        switch (newValue) {
+          case "normal":
+          case "select":
+            break;
+          default:
+            console.log("status error!", status.value);
+            status.value = "normal";
+        }
+      }
+    );
+
+    watch(
+      () => default_path.value,
+      (newValue: string) => {
+        let item = disk_options.value.find((item) => item.value == newValue);
+        if (item && item.value && item.label) {
+          default_path_label.value = item.label;
+          path.value = default_path.value;
+        }
+      }
+    );
+
     return {
       show_dialog,
       loading,
+      uploading,
       files,
       columns,
       show_context_menu,
+      default_path,
+      default_path_label,
       path,
       prev_path,
       paths,
       target_dom,
       upload_url,
+      uploader,
+      disk_options,
       current_file,
       refresh_file_list,
       refresh_file_list_async,
       status,
-      showDialog() {
+      showDialog(in_status: string) {
+        status.value = in_status;
         refresh_file_list();
         show_dialog.value = true;
       },
+      showDialogAsync(in_status: string) {
+        return new Promise((_resolve, _reject) => {
+          status.value = in_status;
+          refresh_file_list();
+          show_dialog.value = true;
+          resolve = _resolve;
+        });
+      },
       generatorFileUploadHeaders(files: File[]) {
         if (files.length > 0) {
           return [
@@ -466,6 +598,10 @@ export default defineComponent({
         path.value = "";
         status.value = "normal";
         upload_url.value = "";
+        if (resolve) {
+          resolve(resolve_value);
+        }
+        resolve_value = null;
       },
       async onCreateNewFolder() {
         let url = GlobalData.getInstance().createCurrentRequestUrl();
@@ -513,6 +649,7 @@ export default defineComponent({
           });
         }
       },
+      selectFile,
       async deleteFile(file: FileEntity) {
         let url = GlobalData.getInstance().createCurrentRequestUrl();
         if (url) {
@@ -623,6 +760,8 @@ export default defineComponent({
       onTableItemDBClick(evt: PointerEvent, row: FileEntity, index: number) {
         if (row && row.is_directory) {
           path.value += "/" + row.name;
+        } else if (status.value == "select" && !row.is_directory) {
+          selectFile(row);
         }
       },
       backToParentPath() {
@@ -642,7 +781,12 @@ export default defineComponent({
         }
         return "#";
       },
+      onStartUpload() {
+        loading.value = true;
+      },
       onUploaded() {
+        uploading.value = false;
+        uploader.value.reset();
         refresh_file_list();
 
         $q.notify({
@@ -651,6 +795,7 @@ export default defineComponent({
           position: "top",
           timeout: 1500,
         });
+        loading.value = false;
       },
       onFailed(info: any) {
         console.log(info);
@@ -661,6 +806,7 @@ export default defineComponent({
           timeout: 1500,
         });
         loading.value = false;
+        loading.value = false;
       },
     };
   },

src/components/SignalSourceDialog.vue

@@ -103,7 +103,7 @@
                 >
                   <template v-if="item_data.name" v-slot:append>
                     <q-icon
-                      item_data.name="cancel"
+                      name="cancel"
                       @click.stop="item_data.name = null"
                       class="cursor-pointer"
                     />
@@ -142,13 +142,22 @@
                   :loading="loading"
                   :disable="loading"
                   filled
+                  @dblclick="doSelectFile"
                   v-model="item_data.media_url"
                   :label="media_url_label"
-                  :hint="$t('please input') + media_url_label"
+                  :hint="
+                    $t('please input') +
+                    media_url_label.substr(0, media_url_label.length - 2) +
+                    ',' +
+                    $t('dbclick select file')
+                  "
                   lazy-rules
                   :rules="[
                     (val) =>
-                      (val && val.length > 0) || $t('Please type something'),
+                      (val && val.length > 0) ||
+                      $t('Please type something') +
+                        ',' +
+                        $t('dbclick select file'),
                   ]"
                   @keydown="
                     (evt) => {
@@ -159,7 +168,7 @@
                 >
                   <template v-if="item_data.media_url" v-slot:append>
                     <q-icon
-                      item_data.media_url="cancel"
+                      name="cancel"
                       @click.stop="item_data.media_url = null"
                       class="cursor-pointer"
                     />
@@ -192,7 +201,7 @@
                 >
                   <template v-if="item_data.user_name" v-slot:append>
                     <q-icon
-                      item_data.user_name="cancel"
+                      name="cancel"
                       @click.stop="item_data.user_name = null"
                       class="cursor-pointer"
                     />
@@ -225,7 +234,7 @@
                 >
                   <template v-if="item_data.password" v-slot:append>
                     <q-icon
-                      item_data.password="cancel"
+                      name="cancel"
                       @click.stop="item_data.password = null"
                       class="cursor-pointer"
                     />
@@ -257,6 +266,7 @@
         </q-card-actions>
       </q-form>
     </q-card>
+    <file-manage-dialog ref="file_manage_dialog" />
   </q-dialog>
 </template>
 
@@ -286,8 +296,12 @@ import {
   SignalSourceTreeItemEntity,
 } from "src/entities/SignalSourceEntity";
 
+import FileManageDialog from "src/components/FileManageDialog.vue";
+import FileEntity from "src/entities/FileEntity";
+
 export default defineComponent({
   name: "ComponentSignalSourceDialog",
+  components: { FileManageDialog },
 
   setup() {
     let $store = useStore();
@@ -301,6 +315,7 @@ export default defineComponent({
     item_data.window_type = "EwindowType::Multimedia";
     const selected: any = ref(null);
     let loading = ref(false);
+    let file_manage_dialog: any = ref(null);
 
     let suppored_window_types = new Set<string>([
       "EwindowType::Multimedia",
@@ -413,6 +428,7 @@ export default defineComponent({
       selected,
       loading,
       tree_nodes,
+      file_manage_dialog,
       showDialog(options: any) {
         if (options) {
           type.value = options.type ?? 1;
@@ -455,6 +471,19 @@ export default defineComponent({
         } catch {}
         loading.value = false;
       },
+      async doSelectFile() {
+        const obj = await file_manage_dialog.value.showDialogAsync("select");
+        if (obj) {
+          interface __I {
+            path: string;
+            file: FileEntity;
+          }
+          let { path, file }: __I = obj;
+          if (path && file) {
+            item_data.media_url = path + "/" + file.name;
+          }
+        }
+      },
     };
   },
 });

src/i18n/zh-CN/index.ts

@@ -96,7 +96,7 @@ export default {
   "last edit time": "修改时间",
   "file size": "文件大小",
   "file name": "文件名",
-  "copy file name": "拷贝文件名",
+  "copy name": "拷贝名称",
   "can true": "是",
   "can false": "否",
   "can exec": "可执行",
@@ -114,4 +114,7 @@ export default {
   "delete file": "文件删除",
   "create folder": "新建文件夹",
   "input folder name": "输入文件夹名称",
+  "dbclick select file": "双击选择文件",
+  "local disk": "本地磁盘",
+  usb: "U盘",
 };