新增文件夹删除功能

src/api/modules/template.ts

@@ -27,6 +27,14 @@ const template = {
             ...params,
         });
     },
+    delete(id: number, params: any = {}) {
+        return axios.delete(`${base}/deleteFolder`, {
+            data: {
+                id,
+            },
+            ...params,
+        });
+    },
     addFolder(name: string, params: any) {
         return axios.post(`${base}/addFolder`, {
             name,

src/components/TemplateItem.vue

@@ -15,12 +15,12 @@
         class="desc van-multi-ellipsis--l2">
         {{desc}}
     </div>
-    <common-svg name="tianjiabeifen" width="28px" height="28px" class="add" ></common-svg>
+    <common-svg @click.stop.native="showMoreAction" class="more" name="cunzhengliebiao-gengduo"></common-svg>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
 @Component({
   name: 'TemplateItem',
 })
@@ -28,6 +28,10 @@ export default class TemplateItem extends Vue {
   @Prop() private thumb!: string;
   @Prop() private title!: string;
   @Prop() private desc!: string;
+  @Emit('show-more-action')
+  private async showMoreAction() {
+    return true;
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -65,5 +69,9 @@ export default class TemplateItem extends Vue {
       grid-row-start: span 2;
       width:27px;
     }
+    .more{
+      place-self: center;
+      grid-row: 1/ span 2;
+    }
   }
 </style>

src/mixins/Index.ts

@@ -3,7 +3,50 @@ import { State, Action } from 'vuex-class';
 @Component
 export default class Index extends Vue {
     @Action('getSysTemplateList') private getSysTemplateList!: () => void;
+    protected ActionList: any = {
+        rename: {
+            key: 'rename',
+            icon: 'shanchu3',
+            text: '重命名',
+            callback: this.renameFolder,
+        },
+        del: {
+          key: 'del',
+          icon: 'shanchu3',
+          text: '删除',
+          callback: this.delFolder,
+        },
+    };
     protected mounted() {
         this.getSysTemplateList();
     }
+    private renameFolder(folder: any) {
+        const { folder_name } = folder;
+        return true
+    }
+    private delFolder(folder: any) {
+        const { folder_id} = folder;
+        return new Promise(resolve=>{
+            this.$dialog.confirm({
+            message: '您确定要删除该文件夹吗？',
+            beforeClose: (action, done) => {
+                if ( action === 'confirm' ) {
+                    this.$api.template.delete(folder_id).then((res: any) => {
+                            resolve()
+                            this.$toast.success('删除成功');
+                            this.resetList();
+                            done();
+                        }).catch((err: any) => {
+                            done();
+                        });
+                    } else {
+                        done();
+                    }
+                },
+            });
+        }) 
+    }
+    protected resetList() {
+        throw Error('resetList 在列表实现');
+    }
 }

src/views/index/Index-sy.vue

@@ -34,7 +34,7 @@
       </div>
         <empty v-if="!list.length && !loading" name="moban" tip="您还未添加模板"></empty>
         <div>
-          <div class="folder-item" v-for="{id, folder_simg_url, folder_name, detail} of list" :key="id" @click="goTemplList(detail, folder_name)">
+          <div class="folder-item" v-for="{folder_id, folder_simg_url, folder_name, detail} of list" :key="folder_id" @click="goTemplList(detail, folder_name)">
            <van-image
             class="thumb"
             :src="folder_simg_url"
@@ -42,11 +42,25 @@
             ></van-image>
            <div class="title" style="#353535;font-size:18px;font-weight:500;">{{folder_name}}</div>
            <div class="desc" style="color: #AAAAAA;">{{(detail || []).length}}条模版</div>
-           <common-svg name="jinru" class="right-icon"></common-svg>
+           <common-svg @click.stop.native="showMoreAction(folder_name, folder_id)" class="more" name="cunzhengliebiao-gengduo"></common-svg>
           </div>
         </div>
+        <more-action :show.sync="show" :menuList="actionList" @cb="callbackAction"></more-action>
     </div>
-
+    <van-dialog
+      use-slot
+      title="重命名"
+      v-model="isShowRename"
+      show-cancel-button
+      confirm-button-open-type="getUserInfo"
+      bind:close="onClose"
+      bind:getuserinfo="getUserInfo"
+    >
+      <van-field
+        :value="currentFolder.folder_name"
+        auto-focus
+      />
+    </van-dialog>
     <transition name="van-slide-up">
       <add-folder v-if="showAddFolder" @cancel="showAddFolder = false" @next="addFolder"></add-folder>
     </transition>
@@ -71,6 +85,9 @@ export default class IndexSy extends Mixins(IndexMixin) {
   @State('sysTemplateList') private systemList!: [];
   @Action('getProofCount') private getProofCount!: any;
   private list: any[] = [];
+  private currentFolder: object = {};
+  private show: boolean = false;
+  private isShowRename: boolean = false;
   private loading: boolean = true;
   private showAddFolder: boolean = false;
   @Watch('isLogin', { immediate: true })
@@ -83,6 +100,13 @@ export default class IndexSy extends Mixins(IndexMixin) {
       this.loading = false;
     }
   }
+  private async showMoreAction(folder_name: any, folder_id: number) {
+    this.currentFolder = {
+      folder_name,
+      folder_id
+    };
+    this.show = true;
+  }
   private async getUserFolders() {
     const { results = []} = await this.$api.template.folderList({template_type: 1});
     const ids = results.map((folder: any) => folder.id);
@@ -100,6 +124,17 @@ export default class IndexSy extends Mixins(IndexMixin) {
   private goTemplList(templList: [] = [], folderName = '') {
     this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) , folderName} });
   }
+  get actionList() {
+    const { rename, del } = this.ActionList;
+    return [rename, del];
+  }
+  private async callbackAction(cb: any) {
+    this.isShowRename = await cb.call(this, this.currentFolder);
+    this.getUserFolders();
+  }
+  private onClose(): void {
+    
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -170,6 +205,10 @@ export default class IndexSy extends Mixins(IndexMixin) {
         place-self: center;
         grid-row: span 2;
       }
+      .more{
+        place-self: center;
+        grid-row: 1/ span 2;
+      }
     }
   }
 }

src/views/template/List.vue

@@ -6,10 +6,12 @@
       v-for="{id, s_image_url, name, info} of list" 
       :key="id"
       @click.native="goProofDetail(id)"
+      @show-more-action="showMoreAction"
       :thumb="s_image_url"
       :title="name"
       :desc="info"
       ></template-item>
+      <more-action :show.sync="show" :menuList="actionList" @cb="callbackAction"></more-action>
   </div>
  
 </template>
@@ -26,7 +28,7 @@ import { TEMPLATETYPE } from '@/const/enum';
 })
 export default class Index extends Vue {
   private list: any[] = [];
-
+  private show: boolean = false;
   @Prop({
   })
   private templList!: string;
@@ -39,6 +41,9 @@ export default class Index extends Vue {
   private goProofDetail(templateId: string) {
     this.$router.push({ name: 'ProofDetail', query: {templateId} });
   }
+  private showMoreAction(data: any) {
+    this.show = true;
+  }
 }
 </script>
 <style scoped lang="scss">