新建文件夹功能

packages/qjkankan-editor/src/api/index.js

@@ -525,7 +525,7 @@ export function getFolderTree(data, ok, no) {
 }
 
 // 素材库中新增文件夹
-export function newFolder(data, ok, no) {
+export function createFolder(data, ok, no) {
   return http.postJson(`${URL_FILL}/manage/dir/save`, data, ok, no)
 }
 

packages/qjkankan-editor/src/lang/_zh.json

@@ -485,6 +485,7 @@
     "upload_fail": "上传失败",
     "exception": "异常错误",
     "network_error": "网络连接失败，请稍后再试",
+    "submit_error": "提交失败，请稍后再试",
     "file_notfound": "文件不存在",
     "scene_notfound": "场景不存在",
     "params_notfound": "缺少必要参数",

packages/qjkankan-editor/src/views/material/audio/index.vue

@@ -127,8 +127,9 @@
       </div>
     </div>
 
-    <NewFolder
+    <CreateFolder
       v-if="isShowNewFolder"
+      :validate=validateNewFolderName
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />

packages/qjkankan-editor/src/views/material/folderMixinFactory.js

@@ -1,14 +1,15 @@
-import NewFolder from "./popup/NewFolder";
+import CreateFolder from "./popup/CreateFolder";
 import {
+  getMaterialList,
   getFolderTree,
-  newFolder,
+  createFolder as createFolderApi,
 } from "@/api";
 import {i18n} from "@/lang"
 
 export default function(materialType) {
   return {
     components: {
-      NewFolder,
+      CreateFolder,
     },
     data() {
       return {
@@ -20,6 +21,7 @@ export default function(materialType) {
             id: 1,
           },
         ],
+        folderListInPath: [],
       }
     },
     computed: {
@@ -33,23 +35,65 @@ export default function(materialType) {
       }).then((res) => {
         this.folderTree = res.data
       })
+      this.getAllFolderInPath()
     },
     watch: {
       folderPath: {
         handler: function () {
           this.refreshListDebounced()
+          this.getAllFolderInPath()
         },
         deep: true,
       }
     },
     methods: {
+      getAllFolderInPath() {
+        getMaterialList(
+          {
+            dirId: this.currentFolderId,
+            type: materialType,
+          },
+          (res) => {
+            this.folderListInPath = res.data.list.filter((item) => {
+              return item.type === 'dir'
+            })
+          },
+          () => {
+          }
+        )
+      },
+      validateNewFolderName(name) {
+        const isUnique = (this.folderListInPath.findIndex((item) => {
+          return item.name === name
+        }) === -1)
+        if (isUnique) {
+          return {
+            isValid: true,
+            tip: '',
+          }
+        } else {
+          return {
+            isValid: false,
+            tip: '文件夹已存在'
+          }
+        }
+      },
       onSubmitNewFolder(v) {
         this.isShowNewFolder = false
-        newFolder({
-          name: v,
-          parentId: this.currentFolderId,
-          type: materialType,
-        })
+        createFolderApi(
+          {
+            name: v,
+            parentId: this.currentFolderId,
+            type: materialType,
+          },
+          () => {
+            this.$msg.success(this.$i18n.t('gather.success'))
+            this.refreshListDebounced()
+          },
+          () => {
+            this.$msg.error(this.$i18n.t('tips.submit_error'))
+          }
+        )
       },
       onClickPath(idx) {
         this.folderPath = this.folderPath.slice(0, idx + 1)

packages/qjkankan-editor/src/views/material/image/index.vue

@@ -120,8 +120,9 @@
       </div>
     </div>
 
-    <NewFolder
+    <CreateFolder
       v-if="isShowNewFolder"
+      :validate=validateNewFolderName
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />

packages/qjkankan-editor/src/views/material/pano/index.vue

@@ -123,8 +123,9 @@
       </div>
     </div>
 
-    <NewFolder
+    <CreateFolder
       v-if="isShowNewFolder"
+      :validate=validateNewFolderName
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />

packages/qjkankan-editor/src/views/material/popup/NewFolder.vue

@@ -7,19 +7,31 @@
           <i class="iconfont icon_close"></i>
         </span>
       </div>
-      <input
-        class="ui-input"
-        type="text"
-        maxlength="15"
-        :placeholder="$i18n.t(`material.components.new_folder_placeholder`)"
-        @input="emojistr" v-model="key"
-      />
+      <div class="input-wrap">
+        <input
+          class="ui-input"
+          :class="{
+            invalid: !validateRes.isValid,
+          }"
+          type="text"
+          maxlength="15"
+          :placeholder="$i18n.t(`material.components.new_folder_placeholder`)"
+          @input="emojistr" v-model="key"
+        />
+        <div v-if="!validateRes.isValid" class="invalid-tip">
+          {{validateRes.tip}}
+        </div>
+      </div>
       <div class="ui-message-footer">
         <div class="btn">
           <button @click="$emit('close')" class="ui-button ui-button-rect cancel">
             {{$i18n.t(`gather.cancel`)}}
           </button>
-          <button @click="emitname" class="ui-button ui-button-rect submit" :class="{disable:!key}">
+          <button
+            @click="onClickConfirm"
+            class="ui-button ui-button-rect submit"
+            :class="{disable: !key || !validateRes.isValid}"
+          >
             {{$i18n.t(`gather.comfirm`)}}
           </button>
         </div>
@@ -35,9 +47,31 @@ export default {
   components: {
     Popup
   },
+  props: {
+    validate: {
+      type: Function,
+      default: function() {
+        return {
+          isValid: true,
+          tip: '',
+        }
+      },
+    },
+  },
   data() {
     return {
       key: '',
+      validateRes: {
+        isValid: true,
+        tip: '',
+      }
+    }
+  },
+  watch: {
+    key: {
+      handler(v) {
+        this.validateRes = this.validate(v)
+      }
     }
   },
   methods: {
@@ -50,12 +84,12 @@ export default {
         }
       });
     },
-    emitname() {
+    onClickConfirm() {
       if (!this.key.trim()) {
         return this.$alert({ content: "请输入名字" });
       }
       this.$emit('submit', this.key)
-    }
+    },
   }
 }
 </script>
@@ -72,21 +106,33 @@ export default {
       color: #969799;
     }
   }
-
-  .ui-input {
+  > .input-wrap {
     margin: 40px 0;
-    height: 36px;
-    color: #323233;
-    font-size: 14px;
-    border-radius: 4px;
-    border: 1px solid #EBEDF0;
-    &:focus {
-      border: 1px solid @color;
+    position: relative;
+    > input.ui-input {
+      height: 36px;
+      color: #323233;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #EBEDF0;
+      &:focus {
+        border: 1px solid @color;
+      }
+    }
+    > input::placeholder {
+      font-size: 14px;
+      color: #969799 !important;
+    }
+    > input.ui-input.invalid {
+      border: 1px solid red;
+    }
+    > .invalid-tip {
+      position: absolute;
+      top: calc(100% + 0.5em);
+      left: 0.5em;
+      font-size: 14px;
+      color: red;
     }
-  }
-  input::placeholder {
-    font-size: 14px;
-    color: #969799 !important;
   }
   .ui-message-footer {
     width: 100%;

packages/qjkankan-editor/src/views/material/video/index.vue

@@ -126,8 +126,9 @@
       </div>
     </div>
 
-    <NewFolder
+    <CreateFolder
       v-if="isShowNewFolder"
+      :validate=validateNewFolderName
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />