管理中心-素材列表-文件夹重命名功能

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

@@ -529,6 +529,10 @@ export function createFolder(data, ok, no) {
   return http.postJson(`${URL_FILL}/manage/dir/save`, data, ok, no)
 }
 
+// 素材库中文件夹重命名
+export function renameFolder(data, ok, no) {
+  return http.postJson(`${URL_FILL}/manage/dir/save`, data, ok, no)
+}
 
 /**
  * 添加我的作品

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

@@ -602,6 +602,7 @@
     "move_folder": "移动",
     "move_folder_to": "移动到",
     "no_folder_need_create": "暂无文件夹，请先创建文件夹",
+    "rename_folder_placeholder": "请输入",
     "video_size": "Support MP4 files: ≤ 200MB",
     "video_limit": "The file is too large.Support MP4 files: ≤ 200MB",
     "video_fail": "Format error. Support MP4 files: ≤ 200MB",

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

@@ -604,6 +604,7 @@
     "move_folder": "移动",
     "move_folder_to": "移动到",
     "no_folder_need_create": "暂无文件夹，请先创建文件夹",
+    "rename_folder_placeholder": "请输入",
     "video_size": "请上传200MB以内、mp4格式的视频",
     "video_limit": "过大，请上传200MB以内、mp4格式的视频",
     "video_fail": "格式错误，请上传200MB以内、mp4格式的视频",

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

@@ -75,13 +75,16 @@
           <div class="handle" v-if="headerItem.canclick">
             <i
               class="iconfont icon-material_operation_editor hover-tips"
-              @click="(showRename = true), (popupItem = lineData)"
+              @click="onClickRename(lineData)"
             >
               <div>
                 <div class="remark">{{rename}}</div>
               </div>
             </i>
-            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
+            <i
+              class="iconfont icon-material_operation_delete hover-tips-warn"
+              @click="del(lineData)"
+            >
               <div>
                 <div class="remark">{{deltips}}</div>
               </div>
@@ -139,6 +142,13 @@
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />
+    <RenameFolder
+      v-if="isShowRenameFolder"
+      :oldName="popupItem.name"
+      :validate=validateRenameFolderName
+      @close="isShowRenameFolder = false"
+      @submit="onSubmitRenameFolder"
+    />
     <rename
       v-if="showRename"
       :item="popupItem"
@@ -285,6 +295,14 @@ export default {
         }
       );
     },
+    onClickRename(lineData) {
+      this.popupItem = lineData
+      if (lineData.type !== 'dir') {
+        this.showRename = true
+      } else {
+        this.isShowRenameFolder = true
+      }
+    },
     del(item) {
       this.$confirm({
         title: i18n.t("gather.delete_material"),

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

@@ -1,8 +1,11 @@
 import CreateFolder from "./popup/CreateFolder";
+import RenameFolder from "./popup/RenameFolder";
+
 import {
   getMaterialList,
   getFolderTree,
   createFolder as createFolderApi,
+  renameFolder as renameFolderApi,
 } from "@/api";
 import {i18n} from "@/lang"
 
@@ -10,10 +13,12 @@ export default function(materialType) {
   return {
     components: {
       CreateFolder,
+      RenameFolder,
     },
     data() {
       return {
         isShowNewFolder: false,
+        isShowRenameFolder: false,
         folderTree: null,
         folderPath: [
           {
@@ -90,6 +95,55 @@ export default function(materialType) {
           }
         )
       },
+      onSubmitRenameFolder(newName) {
+        this.isShowRenameFolder = false
+        renameFolderApi(
+          {
+            id: this.popupItem.id,
+            name: newName,
+            // parentId: this.currentFolderId,
+            type: materialType,
+          },
+          () => {
+            this.$msg.success(this.$i18n.t('gather.edit_success'))
+            const index = this.list.findIndex((eachItem) => {
+              return eachItem.id === this.popupItem.id
+            })
+            if (index >= 0) {
+              this.list[index].name = newName
+            } else {
+              console.error('在素材列表里没找到要重命名的那一项！');
+            }
+            this.popupItem = null;
+          },
+          () => {
+            this.$msg.error(this.$i18n.t('tips.network_error'))
+            this.popupItem = null;
+          }
+        )
+      },
+      validateRenameFolderName(oldName, newName) {
+        if (oldName === newName) {
+          return {
+            isValid: true,
+            tip: '',
+          }
+        }
+        const isUnique = (this.folderListInPath.findIndex((item) => {
+          return item.name === newName
+        }) === -1)
+        if (isUnique) {
+          return {
+            isValid: true,
+            tip: '',
+          }
+        } else {
+          return {
+            isValid: false,
+            tip: this.$i18n.t('gather.folder_name_already_used')
+          }
+        }
+      },
       onClickMoveFolder() {
         console.log('asdfsf');
         getFolderTree({

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

@@ -76,13 +76,16 @@
           <div v-if="headerItem.canclick" class="handle">
             <i
               class="iconfont icon-material_operation_editor hover-tips"
-              @click="(showRename = true), (popupItem = lineData)"
+              @click="onClickRename(lineData)"
             >
               <div>
                 <div class="remark">{{rename}}</div>
               </div>
             </i>
-            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
+            <i
+              class="iconfont icon-material_operation_delete hover-tips-warn"
+              @click="del(lineData)"
+            >
               <div>
                 <div class="remark">{{deltips}}</div>
               </div>
@@ -133,6 +136,13 @@
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />
+    <RenameFolder
+      v-if="isShowRenameFolder"
+      :oldName="popupItem.name"
+      :validate=validateRenameFolderName
+      @close="isShowRenameFolder = false"
+      @submit="onSubmitRenameFolder"
+    />
     <rename
       v-if="showRename"
       :item="popupItem"
@@ -278,6 +288,14 @@ export default {
         }
       );
     },
+    onClickRename(lineData) {
+      this.popupItem = lineData
+      if (lineData.type !== 'dir') {
+        this.showRename = true
+      } else {
+        this.isShowRenameFolder = true
+      }
+    },
     del(item) {
       this.$confirm({
         title: i18n.t("gather.delete_material"),

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

@@ -60,20 +60,28 @@
         <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
           <!-- 操作型单元格 -->
           <div class="handle" v-if="headerItem.canclick">
-            <i class="iconfont icon-material_operation_image hover-tips"
-              @click="(showCover = true), (popupItem = lineData)">
+            <i
+              v-if="lineData.type !== 'dir'"
+              class="iconfont icon-material_operation_image hover-tips"
+              @click="(showCover = true), (popupItem = lineData)"
+            >
               <div>
                 <div class="remark">{{ edit_cover }}</div>
               </div>
             </i>
 
-            <i class="iconfont icon-material_operation_editor hover-tips"
-              @click="(showRename = true), (popupItem = lineData)">
+            <i
+              class="iconfont icon-material_operation_editor hover-tips"
+              @click="onClickRename(lineData)"
+            >
               <div>
                 <div class="remark">{{ rename }}</div>
               </div>
             </i>
-            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
+            <i
+              class="iconfont icon-material_operation_delete hover-tips-warn"
+              @click="del(lineData)"
+            >
               <div>
                 <div class="remark">{{ deltips }}</div>
               </div>
@@ -142,6 +150,13 @@
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />
+    <RenameFolder
+      v-if="isShowRenameFolder"
+      :oldName="popupItem.name"
+      :validate=validateRenameFolderName
+      @close="isShowRenameFolder = false"
+      @submit="onSubmitRenameFolder"
+    />
     <rename
       v-if="showRename" 
       :item="popupItem"
@@ -406,6 +421,14 @@ export default {
         );
       }
     },
+    onClickRename(lineData) {
+      this.popupItem = lineData
+      if (lineData.type !== 'dir') {
+        this.showRename = true
+      } else {
+        this.isShowRenameFolder = true
+      }
+    },
     del(item) {
       this.$confirm({
         title: i18n.t("gather.delete_material"),

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

@@ -9,6 +9,7 @@
       </div>
       <div class="input-wrap">
         <input
+          ref="input"
           class="ui-input"
           :class="{
             invalid: !validateRes.isValid,
@@ -74,6 +75,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.$refs.input.focus()
+  },
   methods: {
     emojistr() {
       this.key = this.key.replace(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g, function (char) {

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

@@ -0,0 +1,163 @@
+<template>
+  <popup>
+    <div class="ui-message ui-message-confirm" style="width: 400px">
+      <div class="ui-message-header">
+        <span>{{$i18n.t(`gather.rename`)}}</span>
+        <span @click="$emit('close')">
+          <i class="iconfont icon_close"></i>
+        </span>
+      </div>
+      <div class="input-wrap">
+        <input
+          class="ui-input"
+          :class="{
+            invalid: !validateRes.isValid,
+          }"
+          type="text"
+          maxlength="15"
+          ref="input"
+          :placeholder="$i18n.t(`gather.rename_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="onClickConfirm"
+            class="ui-button ui-button-rect submit"
+            :class="{disable: !key || !validateRes.isValid}"
+          >
+            {{$i18n.t(`gather.comfirm`)}}
+          </button>
+        </div>
+      </div>
+    </div>
+  </popup>
+</template>
+
+<script>
+import Popup from "@/components/shared/popup";
+
+export default {
+  components: {
+    Popup
+  },
+  props: {
+    validate: {
+      type: Function,
+      default: function() {
+        return {
+          isValid: true,
+          tip: '',
+        }
+      },
+    },
+    oldName: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      key: this.oldName,
+      validateRes: {
+        isValid: true,
+        tip: '',
+      }
+    }
+  },
+  watch: {
+    key: {
+      handler(v) {
+        this.validateRes = this.validate(this.oldName, v)
+      }
+    }
+  },
+  mounted() {
+    this.$refs.input.focus()
+  },
+  methods: {
+    emojistr() {
+      this.key = this.key.replace(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g, function (char) {
+        if (char.length === 2) {
+          return ""
+        } else {
+          return char;
+        }
+      });
+    },
+    onClickConfirm() {
+      if (!this.key.trim()) {
+        return this.$alert({ content: "请输入名字" });
+      }
+      this.$emit('submit', this.key)
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+
+.ui-message-confirm {
+  width: 400px;
+  height: 230px;
+
+  .ui-message-header {
+    .icon_close {
+      color: #969799;
+    }
+  }
+  > .input-wrap {
+    margin: 40px 0;
+    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;
+    }
+  }
+  .ui-message-footer {
+    width: 100%;
+
+    .btn {
+      display: flex;
+      justify-content: flex-end;
+
+      .ui-button {
+        max-width: 104px
+      }
+    }
+
+  }
+}
+</style>
+
+<style lang="less" scoped>
+@import '../style.less';
+</style>

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

@@ -76,13 +76,16 @@
           <div class="handle" v-if="headerItem.canclick">
             <i
               class="iconfont icon-material_operation_editor hover-tips"
-              @click="(showRename = true), (popupItem = lineData)"
+              @click="onClickRename(lineData)"
             >
               <div>
                 <div class="remark">{{rename}}</div>
               </div>
             </i>
-            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
+            <i
+              class="iconfont icon-material_operation_delete hover-tips-warn"
+              @click="del(lineData)"
+            >
               <div>
                 <div class="remark">{{deltips}}</div>
               </div>
@@ -139,6 +142,13 @@
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />
+    <RenameFolder
+      v-if="isShowRenameFolder"
+      :oldName="popupItem.name"
+      :validate=validateRenameFolderName
+      @close="isShowRenameFolder = false"
+      @submit="onSubmitRenameFolder"
+    />
     <rename
       v-if="showRename"
       :item="popupItem"
@@ -288,6 +298,14 @@ export default {
         }
       );
     },
+    onClickRename(lineData) {
+      this.popupItem = lineData
+      if (lineData.type !== 'dir') {
+        this.showRename = true
+      } else {
+        this.isShowRenameFolder = true
+      }
+    },
     del(item) {
       this.$confirm({
         title: i18n.t("gather.delete_material"),