feat: 新增系统模板的编辑功能

src/mixins/template.ts

@@ -95,12 +95,15 @@ export default class Template extends Vue {
     this.focusedTemplateId = templateId;
   }
 
-  private editTemplate(folder: any) {
-    const { id } = folder;
+  private editTemplate(folder: any , isSystemCategory: boolean) {
+    const { id, folderId } = folder;
+
     this.$router.push({
       name: 'EditTemplate',
       query: {
         id,
+        folderId,
+        sys: JSON.stringify(isSystemCategory),
       },
     });
   }

src/router/index.ts

@@ -148,7 +148,11 @@ const routes: RouteConfig[] = [
     path: '/editTemplate',
     name: 'EditTemplate',
     component: () => import(/* webpackChunkName: "edit-template" */ '@/views/template/EditTemplate.vue'),
-    props: ({query}) => ({ id: Number.parseInt(query.id as string, 10) }),
+    props: ({query}) => ({
+      id: Number.parseInt(query.id as string, 10),
+      folderId: query.folderId !== undefined ? Number.parseInt(query.folderId as string, 10) : undefined,
+      sys: query.sys !== undefined ? JSON.parse(query.sys as string) : false,
+    }),
     meta: { requiresAuth: true },
   },
   {

src/views/template/EditTemplate.vue

 <template>
   <div>
+    <base-info
+      ref="baseInfo"
+      title="编辑模板"
+      :showBaseInfo.sync="showBaseInfo"
+      :defaultFolderId="folderId"
+      @next="baseInfoNext"
+      @cancel="cancelCreateTempl"
+    ></base-info>
     <words-manager
       :data.sync="words"
       @show-preview="showPreview = true"
@@ -30,6 +38,8 @@ import WordsManager from './components/WordsManager.vue';
 })
 export default class Add extends Vue {
   @Prop() private id!: number;
+  @Prop({ required: false }) private folderId!: number | undefined;
+  @Prop() private sys!: boolean;
 
   private showBaseInfo: boolean = true;
 
@@ -59,26 +69,50 @@ export default class Add extends Vue {
     const ret = await this.$api.template.get(id);
     const detail = JSON.parse(ret.detail);
     this.words = detail;
+    this.initBaseInfoCmpData(ret);
   }
 
-  private baseInfoNext(data: any) {
-    console.log(data);
+  private initBaseInfoCmpData(ret: any) {
+    const baseInfoCmp = this.$refs.baseInfo as any;
+    baseInfoCmp.templateName = ret.name;
+    baseInfoCmp.imgUrl = ret.s_image_url;
+  }
 
+  private baseInfoNext(data: any) {
     this.baseInfo = { ...data };
   }
+
   private cancelCreateTempl() {
     this.$router.back();
   }
+
   private commitTemplate() {
     if (this.words.length <= 0) {
       return Promise.reject('请添加字段');
     }
-    /* 更新存证 */
+
+    if (this.sys) {
+      /*编辑系统模板后，需要 新增存证 */
+      return this.$api.template.customize(
+        this.baseInfo.templateName,
+        this.words,
+        this.folderId,
+        {
+          s_image_url: this.baseInfo.imgUrl,
+        }
+      );
+    } else {
+      /* 编辑非系统模板时， 只需更新存证 */
       return this.$api.template.updateCustomize({
         id: this.id,
+        folder_id: this.folderId,
+        name: this.baseInfo.templateName,
         detail: JSON.stringify(this.words),
+        s_image_url: this.baseInfo.imgUrl,
       });
     }
+  }
+
   private async confirm() {
     try {
       /* 创建存证 */
@@ -110,7 +144,6 @@ export default class Add extends Vue {
         name: 'ProofDetail',
         query: { templateId: res.id },
       });
-      
     } catch (err) {
       this.$toast(err);
     }

src/views/template/List.vue

@@ -28,7 +28,6 @@
       :key="id"
       @click.native="goProofDetail(id)"
       @show-more-action="showMoreAction"
-      :isSystemTemplate="isSystemCategory()"
       :id="id"
       :thumb="s_image_url"
       :title="name"
@@ -156,7 +155,7 @@ export default class List extends Mixins(TemplateMixin) {
     const isSystemCategory = this.isSystemCategory();
     const { rename, move, copy, del, edit } = this.ActionList;
     if (isSystemCategory) {
-      return [];
+      return [edit];
     } else {
       return [edit, rename, move, copy, del];
     }
@@ -164,7 +163,7 @@ export default class List extends Mixins(TemplateMixin) {
 
   private async callbackAction(cb: any) {
     // cb是什么东西？
-    this.isShowRename = await cb.call(this, this.currentTem);
+    this.isShowRename = await cb.call(this, this.currentTem, this.isSystemCategory());
     this.getTemplateListToList(+this.id);
   }
 
@@ -173,7 +172,10 @@ export default class List extends Mixins(TemplateMixin) {
   }
 
   private showMoreAction(data: any) {
-    const template = this.getTemplateById(data.id);
+    const template = {
+      ...this.getTemplateById(data.id),
+      folderId: this.id,
+    };
     this.currentTem = template;
     this.show = true;
   }

src/views/template/components/BaseInfo.vue

@@ -14,7 +14,7 @@
           name="shanchu5"
           style="position:absolute;left:17px;"
         ></common-svg>
-        <span>创建模板</span>
+        <span>{{ title !== undefined ? title : '创建模板' }}</span>
       </div>
       <van-field v-model="templateName" placeholder="填写模板名称"></van-field>
       <input
@@ -41,11 +41,9 @@
         <common-svg name="jinru"></common-svg>
       </label>
       <div class="btn-group">
-        <div>
-          所在文件夹:
-          <span class="classify" @click="handleClickFolder">{{
-            folder && folder.name
-          }}</span>
+        <div @click="handleClickFolder">
+          <span>所在文件夹</span>:
+          <span class="classify">{{ folder && folder.name }}</span>
         </div>
         <div @click="next" class="slc-btn-common next">下一步</div>
       </div>
@@ -109,6 +107,7 @@ const Template = namespace('template');
 export default class BaseInfo extends Vue {
   private EFolderListMode = EFolderListMode;
   @Prop({ required: false }) private defaultFolderId!: number | undefined;
+  @Prop({ required: false }) private title!: string;
 
   @PropSync('showBaseInfo', { type: Boolean, required: true })
   private show!: boolean;
@@ -142,23 +141,34 @@ export default class BaseInfo extends Vue {
     if (this.defaultFolderId !== undefined) {
       this.findFolderByIdContinually(this.defaultFolderId);
       this.folderId = this.defaultFolderId;
+    } else {
+      this.findFolderByIdContinually(undefined);
     }
   }
 
   /*
   查找指定id的folder，把folder相关数据保存到data中。
   */
-  private async findFolderByIdContinually(folderId: number) {
+  private async findFolderByIdContinually(folderId: number | undefined) {
     const matchedFolderIndex = this.userFolderList.findIndex((folder: any) => {
+      if (folderId !== undefined) {
         return folder.id === folderId;
+      } else {
+        return folder.name === this.defaultFolderName;
+      }
     });
     if (matchedFolderIndex !== -1) {
       // ok 找到文件了或者请求完所有的数据后没有对应的文件
       this.folder = this.userFolderList[matchedFolderIndex];
       this.defaultFolderIndex = matchedFolderIndex;
+      if (folderId === undefined) {
+        this.$router.replace({
+          query: { ...this.$route.query, folderId: this.folder.id },
+        });
+      }
     } else if (this.isFinished) {
       this.$router.push({ name: '' });
-      throw new Error('文件夹列表中无法找到指定id的文件夹');
+      throw new Error('文件夹列表中无法找到指定的文件夹');
     } else {
       // continue request
       this.setPage(this.page + 1);

src/views/viewTemplate/Index.vue

@@ -15,7 +15,9 @@
       </div>
       <TemplateListContainer
         v-else
+        :isFolderList="isFolderList"
         :templateList="templateList"
+        :folderId="folderId"
         class="template-list"
       />
     </div>

src/views/viewTemplate/components/TemplateList.vue

@@ -49,13 +49,27 @@ export default class Index extends Vue {
   @Prop() list!: any[];
   @Prop() selectedId!: number | null;
   @Prop() loading!: boolean;
+  @Prop() folderId!: number;
+  @Prop() isFolderList!: boolean;
 
   handleClickEditTemplate(templateId: number) {
+    let query: any = {
+      id: templateId.toString(),
+    };
+    if (this.isFolderList) {
+      query = {
+        ...query,
+        folderId: this.folderId.toString(),
+      };
+    }else{
+      query = {
+        ...query,
+        sys: true
+      }
+    }
     this.$router.push({
       name: 'EditTemplate',
-      query: {
-        id: templateId.toString(),
-      },
+      query,
     });
   }
   get noData() {

src/views/viewTemplate/components/TemplateListContainer.vue

 <template>
   <div class="template-list-container">
     <TemplateList
+      :isFolderList="isFolderList"
       :list="templateList"
       :selectedId="selectedId"
+      :folderId="folderId"
       :handleSelectItem="handleClickItem"
     />
     <div class="placeholder-block" v-if="isTemplateSelected"></div>
@@ -34,6 +36,8 @@ import PreviewTemplate from '@/views/template/components/PreviewTemplate.vue';
 })
 export default class Index extends Vue {
   @Prop() templateList!: [];
+  @Prop() folderId!: number;
+  @Prop() isFolderList!: boolean;
   selectedId: null | number = null;
 
   detail: any = null;