feat: 新增编辑模板

src/api/modules/template.ts

@@ -35,12 +35,12 @@ const template = {
             ...params,
         });
     },
-    getFolder(id: string){
+    getFolder(id: string) {
         return axios.get(`${base}/getFolder`, {
             params: {
-                id
-            }
-        })
+                id,
+            },
+        });
     },
     addFolder(name: string, params: any) {
         return axios.post(`${base}/addFolder`, {
@@ -82,15 +82,15 @@ const template = {
     },
     updateCustomize(params: any) {
         return axios.put(`${base}/updateCustomize`, {
-            ...params
+            ...params,
         });
     },
-    getTemplate(id: string){
+    getTemplate(id: string) {
         return axios.get(`${base}/get`, {
             params: {
-                id
-            }
-        })
+                id,
+            },
+        });
     },
 };
 export default template;

src/mixins/template.ts

@@ -12,7 +12,7 @@ export default class Template extends Vue {
       key: 'edit',
       icon: 'zhongmingming2x',
       text: '编辑',
-      // callback: this.editTemplate,
+      callback: this.editTemplate,
     },
     rename: {
       key: 'rename',
@@ -94,9 +94,19 @@ export default class Template extends Vue {
     const { id: templateId, name: templateName } = folder;
     // 退出到首页，让用户选择文件夹，并点击进入。
     Toast('请选择要移入的文件夹，并点击进入该文件夹');
-    this.setMovedTemplateId(Number.parseInt(templateId));
+    this.setMovedTemplateId(Number.parseInt(templateId, 10));
     this.$router.push({
       path: '/',
     });
   }
+
+  private editTemplate(folder: any) {
+    const { id } = folder;
+    this.$router.push({
+      name: 'EditTemplate',
+      query: {
+        id,
+      },
+    });
+  }
 }

src/router/index.ts

@@ -62,7 +62,7 @@ const routes: RouteConfig[] = [
     name: 'ViewTemplate',
     component: () => import(/* webpackChunkName: "view-template" */ '@/views/viewTemplate/Index.vue'),
     props: ({query}) => ({
-      folderId: Number.parseInt(query.folderId as string),
+      folderId: Number.parseInt(query.folderId as string, 10),
       folderName: query.folderName,
     }),
     meta: { requiresAuth: true },
@@ -127,6 +127,13 @@ const routes: RouteConfig[] = [
     meta: { requiresAuth: true },
   },
   {
+    path: '/editTemplate',
+    name: 'EditTemplate',
+    component: () => import(/* webpackChunkName: "edit-template" */ '@/views/template/EditTemplate.vue'),
+    props: ({query}) => ({ id: Number.parseInt(query.id as string, 10) }),
+    meta: { requiresAuth: true },
+  },
+  {
     path: '/templList',
     name: 'TemplList',
     // route level code-splitting

src/views/template/Add.vue

 <template>
-   <div>
-    <base-info :showBaseInfo.sync="showBaseInfo" @next="baseInfoNext" @cancel="cancelCreateTempl"></base-info>
-    <words-manager :data.sync="words" @show-preview="showPreview= true;" @confirm-words="confirm"></words-manager>
+  <div>
+    <!-- 拿到 模板名称和图片地址信息等信息 -->
+    <base-info
+      :showBaseInfo.sync="showBaseInfo"
+      @next="baseInfoNext"
+      @cancel="cancelCreateTempl"
+    ></base-info>
+    <!-- 对words进行修改。 -->
+    <words-manager
+      :data.sync="words"
+      @show-preview="showPreview = true"
+      @confirm-words="confirm"
+    ></words-manager>
     <transition name="van-slide-up">
-      <preview-template :data="words" v-if="showPreview" @cancel="showPreview = false" @employ="employ"></preview-template>
-    </transition> 
-   </div>
+      <preview-template
+        :data="words"
+        v-if="showPreview"
+        @cancel="showPreview = false"
+        @employ="employ"
+      ></preview-template>
+    </transition>
+  </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
@@ -21,20 +36,21 @@ import WordsManager from './components/WordsManager.vue';
   },
 })
 export default class Add extends Vue {
-
   private showBaseInfo: boolean = true;
+  
+  /* 创建存证所需要的数据 */
   private baseInfo: any = {
     templateName: '',
     folder: {},
     imgUrl: '',
   };
-
-  private showWordsManager: boolean = false;
   private words: any[] = [];
+  
+  private showWordsManager: boolean = false;
 
   private showPreview: boolean = false;
   get templateData() {
-    const {baseInfo , words } = this;
+    const { baseInfo, words } = this;
     const { templateName, folder } = baseInfo;
     return {
       templateName,
@@ -43,7 +59,9 @@ export default class Add extends Vue {
     };
   }
   private baseInfoNext(data: any) {
-    this.baseInfo = {...data};
+    console.log(data);
+    
+    this.baseInfo = { ...data };
   }
   private cancelCreateTempl() {
     this.$router.back();
@@ -52,23 +70,36 @@ export default class Add extends Vue {
     if (this.words.length <= 0) {
       return Promise.reject('请添加字段');
     }
-    return this.$api.template.customize(this.baseInfo.templateName, this.words, this.baseInfo.folder.id, {
-      s_image_url: this.baseInfo.imgUrl,
-    });
+    /* 创建存证 */
+    return this.$api.template.customize(
+      this.baseInfo.templateName,
+      this.words,
+      this.baseInfo.folder.id,
+      {
+        s_image_url: this.baseInfo.imgUrl,
+      }
+    );
   }
   private async confirm() {
     try {
+      /* 创建存证 */
       const res = await this.commitTemplate();
-      this.$dialog.confirm({
-        title: '提示',
-        message: '近保存还是去存证',
-        confirmButtonText: '立即存证',
-        cancelButtonText: '仅保存',
-      }).then(() => {
-        this.$router.push({name: 'ProofDetail', query: {templateId: res.id}});
-      }).catch(() => {
-        this.$router.push({path: '/'});
-      });
+      this.$dialog
+        .confirm({
+          title: '提示',
+          message: '近保存还是去存证',
+          confirmButtonText: '立即存证',
+          cancelButtonText: '仅保存',
+        })
+        .then(() => {
+          this.$router.push({
+            name: 'ProofDetail',
+            query: { templateId: res.id },
+          });
+        })
+        .catch(() => {
+          this.$router.push({ path: '/' });
+        });
     } catch (err) {
       this.$toast(err);
     }

src/views/template/EditTemplate.vue

+<template>
+  <div>
+    <words-manager
+      :data.sync="words"
+      @show-preview="showPreview = true"
+      @confirm-words="confirm"
+    ></words-manager>
+    <transition name="van-slide-up">
+      <preview-template
+        :data="words"
+        v-if="showPreview"
+        @cancel="showPreview = false"
+        @employ="employ"
+      ></preview-template>
+    </transition>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { TEMPLATETYPE, DataType } from '@/const/enum';
+import BaseInfo from './components/BaseInfo.vue';
+import PreviewTemplate from './components/PreviewTemplate.vue';
+import WordsManager from './components/WordsManager.vue';
+@Component({
+  components: {
+    BaseInfo,
+    PreviewTemplate,
+    WordsManager,
+  },
+})
+export default class Add extends Vue {
+  @Prop() private id!: number;
+
+  private showBaseInfo: boolean = true;
+
+  /* 创建存证所需要的数据 */
+  private baseInfo: any = {
+    templateName: '',
+    folder: {},
+    imgUrl: '',
+  };
+  private words: any[] = [];
+
+  private showWordsManager: boolean = false;
+
+  private showPreview: boolean = false;
+  get templateData() {
+    const { baseInfo, words } = this;
+    const { templateName, folder } = baseInfo;
+    return {
+      templateName,
+      words,
+      folder,
+    };
+  }
+
+  public async mounted() {
+    const id = this.id;
+    const ret = await this.$api.template.get(id);
+    const detail = JSON.parse(ret.detail);
+    this.words = detail;
+  }
+
+  private baseInfoNext(data: any) {
+    console.log(data);
+
+    this.baseInfo = { ...data };
+  }
+  private cancelCreateTempl() {
+    this.$router.back();
+  }
+  private commitTemplate() {
+    if (this.words.length <= 0) {
+      return Promise.reject('请添加字段');
+    }
+    /* 更新存证 */
+    return this.$api.template.updateCustomize({
+      id: this.id,
+      detail: JSON.stringify(this.words),
+    });
+  }
+  private async confirm() {
+    try {
+      /* 创建存证 */
+      const res = await this.commitTemplate();
+      this.$dialog
+        .confirm({
+          title: '提示',
+          message: '近保存还是去存证',
+          confirmButtonText: '立即存证',
+          cancelButtonText: '仅保存',
+        })
+        .then(() => {
+          this.$router.push({
+            name: 'ProofDetail',
+            query: { templateId: res.id },
+          });
+        })
+        .catch(() => {
+          this.$router.push({ path: '/' });
+        });
+    } catch (err) {
+      this.$toast(err);
+    }
+  }
+  private async employ() {
+    try {
+      const res = await this.commitTemplate();
+    } catch (err) {
+      this.$toast(err);
+    }
+  }
+}
+</script>

src/views/viewTemplate/components/TemplateList.vue

@@ -51,7 +51,12 @@ export default class Index extends Vue {
   @Prop() loading!: boolean;
 
   handleClickEditTemplate(templateId: number) {
-    console.log('edit', templateId);
+    this.$router.push({
+      name: 'EditTemplate',
+      query: {
+        id: templateId.toString(),
+      },
+    });
   }
   get noData() {
     return this.list.length === 0;