提交部分代码

src/entry/gs/components/addTemplate/addTemplate.vue

+<template>
+  <div class="category-add">
+    <h2 class="dialog_add-title">添加模板</h2>
+    <dialog-input
+      class="dialog_add-form dialog_add-input_name"
+      v-model.trim="name"
+      :errorShowing="isErrorShowing"
+      placeholder="请输入模板名称"
+    />
+    <el-select v-model="value" placeholder="请选择">
+      <el-option v-for="item in MyCategories" :key="item.value" :label="item.name" :value="item.id"></el-option>
+    </el-select>
+    <button class="dialog_add-btn_confirm" @click="checkForm">确定</button>
+    <button class="dialog_add-btn_cancel" @click="closeDialog">取消</button>
+  </div>
+</template>
+
+<script>
+import DialogInput from "@/components/DialogInput.vue";
+import { GO_URLS } from "@/config/URLS";
+export default {
+  data() {
+    return {
+      name: "",
+      isErrorShowing: false, // 错误提示
+      isInActive: false,
+      MyCategories: [],
+      value: ""
+    };
+  },
+  components: { DialogInput },
+  created() {
+    this.getFolderList();
+  },
+  methods: {
+    async checkForm() {
+      if (this.isInActive) return;
+      this.isInActive = true;
+      this.isErrorShowing = true;
+      // 追加非空验证
+      if (this.name === "") {
+        this.$message("模板名称不可为空");
+        this.isInActive = false;
+        return null;
+      }
+      if (this.value === "") {
+        // this.$message("请选择分类");
+        // this.isInActive = false;
+        this.value = this.MyCategories[0].id;
+        // return null;
+      }
+      const data = await this.$ajax({
+        type: "post",
+        url: GO_URLS.customize,
+        params: {
+          detail: "",
+          folder_id: this.value,
+          name: this.name,
+          info: this.name
+        }
+      });
+      if (data) {
+        this.$emit("successCallback", this.value);
+      }
+      this.isInActive = false;
+    },
+    closeDialog() {
+      this.$emit("close");
+    },
+    // 获取我的模板列表
+    async getFolderList() {
+      const res = await this.$ajax({
+        type: "post",
+        url: GO_URLS.folderList,
+        params: {
+          page: 1,
+          page_size: 100,
+          template_type: 1
+        }
+      });
+      if (res) {
+        this.MyCategories = res.data.results;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.category-add {
+  width: 589px;
+  height: 350px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
+}
+
+.dialog_add-title {
+  margin: 0;
+  color: #000;
+  font-size: 22px;
+  line-height: 30px;
+  padding-left: 44px;
+  padding-top: 45px;
+}
+
+.dialog_add-input_name {
+  margin-left: 50px;
+  margin-top: 39px;
+  margin-bottom: 18px;
+}
+
+.dialog_add-btn_confirm {
+  float: right;
+  width: 120px;
+  height: 40px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  background: #0cc399;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  margin-right: 39px;
+}
+
+.dialog_add-btn_cancel {
+  float: right;
+  margin-right: 18px; /* 28 - 10 */
+  border: none;
+  width: 48px; /* 28 + 增大20 */
+  height: 40px;
+  outline: none;
+  background: #fff;
+  color: #5c6476;
+  font-size: 14px;
+  cursor: pointer;
+}
+.el-select {
+  width: 500px;
+  margin-left: 50px;
+  margin-bottom: 40px;
+}
+/deep/.el-input__inner {
+  height: 44px;
+  padding: 0 26px;
+  &:focus {
+    border-color: #0cc399 !important;
+    outline: 0;
+  }
+}
+</style>
\ No newline at end of file

src/entry/gs/components/categoryAdd/categoryAdd.vue

+<template>
+  <div class="category-add">
+    <h2 class="dialog_add-title">添加分类</h2>
+    <dialog-input
+      class="dialog_add-form dialog_add-input_name"
+      v-model.trim="name"
+      :errorShowing="isErrorShowing"
+      placeholder="请输入分类名称"
+    />
+    <button class="dialog_add-btn_confirm" @click="checkForm">确定</button>
+    <button class="dialog_add-btn_cancel" @click="closeDialog">取消</button>
+  </div>
+</template>
+
+<script>
+import DialogInput from "@/components/DialogInput.vue";
+import { GO_URLS } from "@/config/URLS";
+export default {
+  data() {
+    return {
+      name: "",
+      isErrorShowing: false, // 错误提示
+      isInActive: false,
+    };
+  },
+  components: {
+    DialogInput,
+  },
+  created() {
+    this.name = "";
+  },
+  methods: {
+    //   //   关闭弹窗
+    async closeDialog() {
+      this.$emit("close", {});
+    },
+    //   添加按钮
+    async checkForm() {
+      if (this.isInActive) return;
+      this.isInActive = true;
+      this.isErrorShowing = true;
+      // 追加非空验证
+      if (this.name.length === 0) {
+        this.$message("分类名称不可为空");
+        this.isInActive = false;
+        return null;
+      }
+      const data = await this.$ajax({
+        type: "post",
+        url: GO_URLS.addFolder,
+        params: {
+          name: this.name,
+          info: this.name,
+        },
+      });
+      if (data) {
+        this.$emit("successCallback");
+      }
+      this.isInActive = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.category-add {
+  padding: 34px 50px 0 50px;
+  height: 221px; /* 325px - 34px */
+  width: 500px; /* 600px - 100px */
+}
+
+.dialog_add-title {
+  margin: 0;
+  color: #000;
+  font-size: 22px;
+  line-height: 30px;
+}
+
+.dialog_add-select_subject {
+  margin-top: 29px;
+}
+
+.dialog_add-input_name {
+  margin: 20px 0 34px 0;
+}
+
+.dialog_add-btn_confirm {
+  float: right;
+  width: 120px;
+  height: 40px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  background: #0CC399;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+.dialog_add-btn_cancel {
+  float: right;
+  margin-right: 18px; /* 28 - 10 */
+  border: none;
+  width: 48px; /* 28 + 增大20 */
+  height: 40px;
+  outline: none;
+  background: #fff;
+  color: #5c6476;
+  font-size: 14px;
+  cursor: pointer;
+}
+</style>

src/entry/gs/components/copyTemplate/copyTemplate.vue

+<template>
+  <div class="category-add">
+    <h2 class="dialog_add-title">创建副本</h2>
+    <dialog-input
+      class="dialog_add-form dialog_add-input_name"
+      v-model="name"
+      :errorShowing="isErrorShowing"
+      placeholder="请输入新的模板名称"
+    />
+    <el-select v-model="value" placeholder="请选择">
+      <el-option v-for="item in MyCategories" :key="item.value" :label="item.name" :value="item.id"></el-option>
+    </el-select>
+    <button class="dialog_add-btn_confirm" @click="checkForm">确定</button>
+    <button class="dialog_add-btn_cancel" @click="closeDialog">取消</button>
+  </div>
+</template>
+
+<script>
+import { GO_URLS } from "@/config/URLS";
+import DialogInput from "@/components/DialogInput.vue";
+export default {
+  components: {
+    DialogInput
+  },
+  props: ["TemplateID"],
+  data() {
+    return {
+      isErrorShowing: false,
+      isInActive: false,
+      name: "",
+      MyCategories: [],
+      value: "",
+      detail: ""
+    };
+  },
+  mounted() {
+    this.getFolderList();
+    this.gettemplate(this.TemplateID);
+  },
+  methods: {
+    // 获取模板
+    async gettemplate(id) {
+      const res = await this.$ajax({
+        type: "get",
+        url: GO_URLS.getSystemTemplate,
+        params: {
+          id: id
+        }
+      });
+      if (res) {
+        this.detail = res.data.detail;
+      }
+    },
+    // 获取我的模板列表
+    async getFolderList() {
+      const res = await this.$ajax({
+        type: "post",
+        url: GO_URLS.folderList,
+        params: {
+          page: 1,
+          page_size: 100,
+          template_type: 1
+        }
+      });
+      if (res) {
+        this.MyCategories = res.data.results;
+      }
+    },
+    async checkForm() {
+      if (this.isInActive) return;
+      this.isInActive = true;
+      this.isErrorShowing = true;
+      // 追加非空验证
+      if (this.name === "") {
+        this.$message("模板名称不可为空");
+        this.isInActive = false;
+        return null;
+      }
+      if (this.value === "") {
+        this.value = this.MyCategories[0].id;
+      }
+
+      const data = await this.$ajax({
+        type: "post",
+        url: GO_URLS.customize,
+        params: {
+          detail: this.detail,
+          folder_id: this.value,
+          name: this.name,
+          info: this.name
+        }
+      });
+      if (data) {
+        this.$emit("successCallback", this.value);
+      }
+      this.isInActive = false;
+    },
+    closeDialog() {
+      this.$emit("close");
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.category-add {
+  padding: 34px 50px 0 50px;
+  height: 305px; /* 325px - 34px */
+  width: 500px; /* 600px - 100px */
+}
+
+.dialog_add-title {
+  margin: 0;
+  color: #000;
+  font-size: 22px;
+  line-height: 30px;
+}
+
+.dialog_add-select_subject {
+  margin-top: 29px;
+}
+
+.dialog_add-input_name {
+  margin: 42px 0 34px 0;
+}
+
+.dialog_add-btn_confirm {
+  float: right;
+  width: 120px;
+  height: 40px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  background: #0cc399;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+.dialog_add-btn_cancel {
+  float: right;
+  margin-right: 18px; /* 28 - 10 */
+  border: none;
+  width: 48px; /* 28 + 增大20 */
+  height: 40px;
+  outline: none;
+  background: #fff;
+  color: #5c6476;
+  font-size: 14px;
+  cursor: pointer;
+}
+.el-select {
+  width: 500px;
+  margin-bottom: 40px;
+}
+/deep/.el-input__inner {
+  height: 44px;
+  padding: 0 26px;
+  &:focus {
+    border-color: #0cc399 !important;
+    outline: 0;
+  }
+}
+</style>
\ No newline at end of file

src/entry/gs/components/rename/rename.vue

+<template>
+  <div class="category-add">
+    <h2 class="dialog_add-title">重命名</h2>
+    <dialog-input
+      class="dialog_add-form dialog_add-input_name"
+      v-model="name"
+      :errorShowing="isErrorShowing"
+      placeholder="请输入新的分类名称"
+    />
+    <button class="dialog_add-btn_confirm" @click="checkForm">确定</button>
+    <button class="dialog_add-btn_cancel" @click="closeDialog">取消</button>
+  </div>
+</template>
+
+<script>
+import DialogInput from "@/components/DialogInput.vue";
+import { GO_URLS } from "@/config/URLS";
+export default {
+  components: {
+    DialogInput
+  },
+  data() {
+    return {
+      isErrorShowing: false,
+      isInActive: false,
+      name: ""
+    };
+  },
+  props: ["oldName", "oldID"],
+  created() {
+    this.name = this.oldName;
+  },
+  methods: {
+    //  关闭弹窗
+    async closeDialog() {
+      this.$emit("close", {});
+    },
+    // 确认按钮
+    async checkForm() {
+      if (this.isInActive) return;
+      this.isInActive = true;
+      this.isErrorShowing = true;
+      // 追加非空验证
+      if (this.name.trim().length === 0) {
+        this.$message.error("分类名称不可为空");
+        this.isInActive = false;
+        return null;
+      }
+      const res = await this.$ajax({
+        type: "PUT",
+        url: GO_URLS.updateFolder,
+        params: {
+          name: this.name,
+          id: this.oldID
+        }
+      });
+      if (res) {
+        this.$message({
+          message: "重命名成功",
+          type: "success"
+        });
+        this.closeDialog();
+        this.$emit("update");
+      }
+      this.isInActive = false;
+    }
+  }
+};
+</script>
+<style scoped lang="less">
+.category-add {
+  padding: 34px 50px 0 50px;
+  height: 245px; /* 325px - 34px */
+  width: 500px; /* 600px - 100px */
+}
+
+.dialog_add-title {
+  margin: 0;
+  color: #000;
+  font-size: 22px;
+  line-height: 30px;
+}
+
+.dialog_add-select_subject {
+  margin-top: 29px;
+}
+
+.dialog_add-input_name {
+  margin: 42px 0 34px 0;
+}
+
+.dialog_add-btn_confirm {
+  float: right;
+  width: 120px;
+  height: 40px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  background: #0cc399;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+.dialog_add-btn_cancel {
+  float: right;
+  margin-right: 18px; /* 28 - 10 */
+  border: none;
+  width: 48px; /* 28 + 增大20 */
+  height: 40px;
+  outline: none;
+  background: #fff;
+  color: #5c6476;
+  font-size: 14px;
+  cursor: pointer;
+}
+</style>
+

src/entry/gs/components/templateManage/templateManage.vue

@@ -7,22 +7,15 @@
           'header-label_l1--check': TemplateType === 0,
         }"
         @click="SwitchTemplate(1)"
-        >系统模板</span
-      >
+      >系统模板</span>
       <span
         :class="{
           'header-label_l1': true,
           'header-label_l1--check': TemplateType === 1,
         }"
         @click="SwitchTemplate(0)"
-        >我的模板</span
-      >
-      <search-bar
-        v-if="TemplateType === 1"
-        v-model="key"
-        @search="search"
-        class="header-search"
-      ></search-bar>
+      >我的模板</span>
+      <search-bar v-if="TemplateType === 1" v-model="key" @search="search" class="header-search"></search-bar>
     </header>
 
     <div v-if="TemplateType === 0">
@@ -32,9 +25,7 @@
           v-for="(item, index) in classificationList"
           @click="switchClassification(item, index)"
           :key="index"
-        >
-          {{ item.folder_name }}
-        </li>
+        >{{ item.folder_name }}</li>
       </ul>
       <div class="default-list">
         <div
@@ -69,15 +60,8 @@
             @click="onMenuBlur"
             @mousedown.stop
           >
-            <li class="menu-item menu-item__one" @click="Rename(item)">
-              重命名
-            </li>
-            <li
-              class="menu-item menu-item__two"
-              @click.stop="deleteTheClassification(item)"
-            >
-              删除分类
-            </li>
+            <li class="menu-item menu-item__one" @click="Rename(item)">重命名</li>
+            <li class="menu-item menu-item__two" @click.stop="deleteTheClassification(item)">删除分类</li>
           </ul>
         </li>
         <li class="add-the-classification" @click="addClassification">
@@ -97,10 +81,7 @@
           :key="index"
           @click="EnterPersonalTemplate(item)"
         >
-          <i
-            class="iconfont icongengduocaozuo icon_menu"
-            @click.stop="showMenu(index)"
-          ></i>
+          <i class="iconfont icongengduocaozuo icon_menu" @click.stop="showMenu(index)"></i>
           <h2 class="title">{{ item.name }}</h2>
           <ul
             class="menu"
@@ -108,37 +89,19 @@
             @click="onMenuBlur"
             @mousedown.stop
           >
-            <li class="menu-item menu-item__one" @click.stop="dle(item, index)">
-              删除
-            </li>
-            <li class="menu-item menu-item__two" @click.stop="copy(item)">
-              创建副本
-            </li>
+            <li class="menu-item menu-item__one" @click.stop="dle(item, index)">删除</li>
+            <li class="menu-item menu-item__two" @click.stop="copy(item)">创建副本</li>
           </ul>
         </div>
       </div>
     </div>
     <!-- 添加分类 -->
-    <common-dialog
-      v-if="ClassificationPopups"
-      @closePopup="ClassificationPopups = false"
-      showMask
-    >
-      <category-add
-        @close="ClassificationPopups = false"
-        @successCallback="successCallback"
-      ></category-add>
+    <common-dialog v-if="ClassificationPopups" @closePopup="ClassificationPopups = false" showMask>
+      <category-add @close="ClassificationPopups = false" @successCallback="successCallback"></category-add>
     </common-dialog>
     <!-- 添加模板 -->
-    <common-dialog
-      v-if="AddTemplatePopups"
-      @closePopup="AddTemplatePopups = false"
-      showMask
-    >
-      <add-template
-        @close="AddTemplatePopups = false"
-        @successCallback="addSuccess"
-      />
+    <common-dialog v-if="AddTemplatePopups" @closePopup="AddTemplatePopups = false" showMask>
+      <add-template @close="AddTemplatePopups = false" @successCallback="addSuccess" />
     </common-dialog>
     <!-- CopyShow -->
     <common-dialog v-if="CopyShow" @closePopup="CopyShow = false" showMask>
@@ -160,12 +123,12 @@
 </template>
 
 <script>
-import CopyTemplate from "@/components/TemplateManage/CopyTemplate.vue";
+import copyTemplate from "../../components/copyTemplate/copyTemplate.vue";
 import CommonDialog from "@/components/CommonDialog.vue";
-import rename from "@/components/TemplateManage/rename.vue";
+import rename from "../../components/rename/rename.vue";
 import SearchBar from "@/components/TemplateManage/SearchBar.vue";
-import CategoryAdd from "@/components/TemplateManage/CategoryAdd.vue";
-import AddTemplate from "@/components/TemplateManage/AddTemplate.vue";
+import categoryAdd from "../../components/categoryAdd/categoryAdd.vue";
+import addTemplate from "../../components/addTemplate/addTemplate.vue";
 import { GO_URLS } from "@/config/URLS";
 export default {
   data() {
@@ -185,16 +148,16 @@ export default {
       classIndex: -1,
       renameShow: false,
       itemName: "",
-      itemID: -1,
+      itemID: -1
     };
   },
   components: {
     SearchBar,
-    CategoryAdd,
+    categoryAdd,
     CommonDialog,
-    AddTemplate,
-    CopyTemplate,
-    rename,
+    addTemplate,
+    copyTemplate,
+    rename
   },
   computed: {
     //个人模板or系统模板>选中效果
@@ -203,7 +166,7 @@ export default {
     },
     TemplateDate() {
       return this.$store.getters.get_templateData;
-    },
+    }
   },
   created() {
     if (this.TemplateType === 0) {
@@ -234,13 +197,13 @@ export default {
         url: GO_URLS.deleteFolder,
         type: "DELETE",
         params: {
-          id: item.id,
-        },
+          id: item.id
+        }
       });
       if (res) {
         this.$message({
           type: "success",
-          message: "删除成功!",
+          message: "删除成功!"
         });
         this.getFolderList();
       }
@@ -261,14 +224,14 @@ export default {
         type: "delete",
         url: GO_URLS.deleteCustomize,
         params: {
-          id: id,
-        },
+          id: id
+        }
       });
       if (res) {
         this.checkClassification = 0;
         this.$message({
           type: "success",
-          message: "删除成功!",
+          message: "删除成功!"
         });
         this.onMenuBlur();
       }
@@ -278,7 +241,7 @@ export default {
       this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning",
+        type: "warning"
       })
         .then(() => {
           this.deleteCustomize(item.id);
@@ -287,7 +250,7 @@ export default {
         .catch(() => {
           this.$message({
             type: "info",
-            message: "已取消删除",
+            message: "已取消删除"
           });
         });
     },
@@ -295,14 +258,14 @@ export default {
     EnterPersonalTemplate(item) {
       this.$router.push({
         path: "/editTemplate",
-        query: { personalTemplate: item.id },
+        query: { personalTemplate: item.id }
       });
     },
     // 进入系统模板
     EnterSystemTemplate(item) {
       this.$router.push({
         path: "/editTemplate",
-        query: { systemTemplateId: item.id },
+        query: { systemTemplateId: item.id }
       });
     },
     addSuccess(val) {
@@ -330,8 +293,8 @@ export default {
         type: "post",
         url: GO_URLS.personalList,
         params: {
-          id: [id],
-        },
+          id: [id]
+        }
       });
       if (res) {
         if (res.data.results[0].detail) {
@@ -370,8 +333,8 @@ export default {
         params: {
           page: 1,
           page_size: 100,
-          template_type: 1,
-        },
+          template_type: 1
+        }
       });
       if (res) {
         this.MyCategories = res.data.results;
@@ -423,7 +386,7 @@ export default {
     async listOfSystem() {
       const res = await this.$ajax({
         url: GO_URLS.systemList,
-        type: "post",
+        type: "post"
       });
       if (res) {
         this.classificationList = res.data.results;
@@ -446,8 +409,8 @@ export default {
         url: GO_URLS.searchCustomize,
         type: "post",
         params: {
-          key: this.key,
-        },
+          key: this.key
+        }
       });
       if (res) {
         if (res.data.results) {
@@ -456,8 +419,8 @@ export default {
           this.personalClassificationList = [];
         }
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -478,7 +441,7 @@ header {
   padding-right: 34px;
 }
 .header-label_l1--check {
-  color: #0CC399;
+  color: #0cc399;
 }
 .header-search {
   float: right;
@@ -502,7 +465,7 @@ header {
     cursor: pointer;
   }
   .item-check {
-    background: #0CC399;
+    background: #0cc399;
     color: white;
   }
 }
@@ -538,7 +501,7 @@ header {
 }
 .add-the-classification {
   border-radius: 4px;
-  color: #0CC399;
+  color: #0cc399;
   display: inline-block;
   font-size: 14px;
   cursor: pointer;
@@ -565,7 +528,7 @@ header {
   border: 1px solid white;
   cursor: pointer;
   &:hover {
-    border: 1px solid #5779f4;
+    border: 1px solid #0cc399;
     .icon_menu {
       display: block;
     }
@@ -612,7 +575,7 @@ header {
     margin-top: 31px;
   }
   &:hover {
-    border: 1px solid #5779f4;
+    border: 1px solid #0cc399;
   }
 }
 .menu {