新增部分功能开发

src/components/TemplateManage/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: #3f79fe;
+  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;
+}
+</style>
\ No newline at end of file

src/config/URLS.ts

@@ -49,4 +49,6 @@ export class GO_URLS {
     static searchCustomize = prefix_go + '/api/template/searchCustomize'
     static deleteCustomize = prefix_go + '/api/template/deleteCustomize'
     static orderType = prefix_go + '/api/order/get'
+    static deleteFolder = prefix_go + '/api/template/deleteFolder'
+    static updateFolder = prefix_go + '/api/template/updateFolder'
 }

src/entry/sy/views/category/TemplateManage.vue

@@ -58,6 +58,25 @@
           :key="index"
         >
           {{ item.name }}
+          <i
+            @click="editorClassification(item, index)"
+            v-if="checkClassification === index && index !== 0"
+            class="iconfont iconwsmp-bianji"
+          ></i>
+          <ul
+            class="menu"
+            :class="{ menuShow: index === classIndex }"
+            @click="onMenuBlur"
+            @mousedown.stop
+          >
+            <li class="menu-item menu-item__one">重命名</li>
+            <li
+              class="menu-item menu-item__two"
+              @click="deleteTheClassification(item)"
+            >
+              删除分类
+            </li>
+          </ul>
         </li>
         <li class="add-the-classification" @click="addClassification">
           <i class="iconfont iconjiahao"></i>
@@ -90,6 +109,9 @@
             <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>
@@ -116,10 +138,19 @@
         @successCallback="addSuccess"
       />
     </common-dialog>
+    <!-- CopyShow -->
+    <common-dialog v-if="CopyShow" @closePopup="CopyShow = false" showMask>
+      <copy-template
+        :TemplateID="TemplateID"
+        @successCallback="successCallback"
+        @close="CopyShow = false"
+      />
+    </common-dialog>
   </div>
 </template>
 
 <script>
+import CopyTemplate from "@/components/TemplateManage/CopyTemplate.vue";
 import CommonDialog from "@/components/CommonDialog.vue";
 import SearchBar from "@/components/TemplateManage/SearchBar.vue";
 import CategoryAdd from "@/components/TemplateManage/CategoryAdd.vue";
@@ -139,6 +170,9 @@ export default {
       personalClassificationList: [], //个人模板>分类>模板
       AddTemplatePopups: false, //个人模板>分类>添加模板
       ActionIndex: -1,
+      CopyShow: false,
+      TemplateID: -1,
+      classIndex: -1,
     };
   },
   components: {
@@ -146,6 +180,7 @@ export default {
     CategoryAdd,
     CommonDialog,
     AddTemplate,
+    CopyTemplate,
   },
   created() {
     this.listOfSystem();
@@ -155,6 +190,33 @@ export default {
     }
   },
   methods: {
+    // 删除分类
+    async deleteTheClassification(item) {
+      const res = await this.$ajax({
+        url: GO_URLS.deleteFolder,
+        type: "DELETE",
+        params: {
+          id: item.id,
+        },
+      });
+      if (res) {
+        this.$message({
+          type: "success",
+          message: "删除成功!",
+        });
+        this.getFolderList();
+      }
+    },
+    editorClassification(item, index) {
+      this.classIndex = index;
+      document.addEventListener("mousedown", this.onMenuBlur);
+    },
+    // 复制
+    copy(item) {
+      this.CopyShow = true;
+      this.onMenuBlur();
+      this.TemplateID = item.id;
+    },
     // 删除个人模板的请求
     async deleteCustomize(id) {
       const res = await this.$ajax({
@@ -215,6 +277,7 @@ export default {
     // 关闭弹窗
     onMenuBlur() {
       this.ActionIndex = -1;
+      this.classIndex = -1;
       document.removeEventListener("mousedown", this.onMenuBlur);
     },
     // 显示弹窗
@@ -252,6 +315,7 @@ export default {
     // 个人模板>添加分类回调
     successCallback() {
       this.ClassificationPopups = false;
+      this.CopyShow = false;
       this.getFolderList();
     },
     // 添加分类
@@ -374,23 +438,20 @@ header {
 }
 .classification-list {
   list-style: none;
-  overflow: hidden;
+  /* overflow: hidden; */
   margin-top: 22px;
   margin-bottom: 15px;
+  height: 47px;
   .item {
     float: left;
-    width: 80px;
-    height: 30px;
+    position: relative;
     background: #ffffff;
     border-radius: 4px;
     text-align: center;
-    line-height: 30px;
     color: #353535;
     margin-bottom: 10px;
     margin-right: 10px;
-    overflow: hidden; //超出的文本隐藏
-    text-overflow: ellipsis; //溢出用省略号显示
-    white-space: nowrap; //溢出不换行
+    padding: 9px 16px;
     cursor: pointer;
   }
   .item-check {
@@ -428,22 +489,21 @@ header {
   top: 20px;
   left: 20px;
 }
-.template_list-box {
-  overflow: hidden;
-}
+// .template_list-box {
+//   overflow: hidden;
+// }
 .add-the-classification {
-  width: 80px;
-  height: 30px;
-  background: rgba(255, 255, 255, 1);
   border-radius: 4px;
-  line-height: 30px;
   color: #3f79fe;
   float: left;
+  font-size: 14px;
+  cursor: pointer;
+  background: #ffffff;
   text-align: center;
-  font-size: 12px;
+  padding: 9px 16px;
   cursor: pointer;
   i {
-    font-size: 12px;
+    font-size: 14px;
   }
 }
 .template_item {