提交部分代码

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

src/components/TemplateManage/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: #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;
+}
+</style>

src/components/TemplateManage/SearchBar.vue

+<template>
+  <div class="search_bar">
+    <input
+      class="input_search"
+      type="text"
+      :value="value"
+      placeholder="搜索模板"
+      @input="emitInput"
+      @blur="emitSearch"
+      @keyup.enter="$event.target.blur()"
+    />
+    <i class="iconfont iconfangdajing1 icon_search"></i>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+@Component
+export default class SearchBar extends Vue {
+  @Prop() value!: string;
+
+  public emitSearch() {
+    this.$emit("search", this.value);
+  }
+
+  public emitInput(e: any) {
+    this.$emit("input", e.target.value);
+  }
+}
+</script>
+
+<style scoped>
+.search_bar {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  /* padding-right: 40px; */
+}
+
+.input_search {
+  box-sizing: border-box;
+  padding-left: 22px;
+  width: 240px;
+  height: 36px;
+  padding-right: 54px;
+  background: #fff;
+  border-radius: 21px;
+  border: none;
+  font-size: 14px;
+  outline: none;
+  color: var(--base-color);
+}
+
+.input_search::placeholder {
+  color: #bababa;
+}
+
+.icon_search {
+  position: absolute;
+  right: 20px;
+  font-size: 19px;
+  top: 8px;
+  color: #e0e0e0;
+}
+</style>

src/entry/refactoring/views/category/Index.vue

@@ -52,7 +52,7 @@
       :class="{ 'col_right--show': this.$store.state.selectedStatus === 2 }"
     >
       <!-- 模板 -->
-      <!-- <template-manage :currentSubject="[]"></template-manage> -->
+      <template-manage></template-manage>
     </div>
     <div
       class="col_right"
@@ -72,8 +72,7 @@
 import { GO_URLS } from "@/config/URLS";
 import { Component, Vue, Watch } from "vue-property-decorator";
 // 模板管理部分
-// import TemplateManage from "./TemplateManage.vue";
-
+import TemplateManage from "./TemplateManage.vue";
 // 右侧存证部分
 import newProductList from "./newProductList.vue";
 //删除页
@@ -84,7 +83,7 @@ import CommonDialog from "@/components/CommonDialog.vue";
 @Component({
   components: {
     newProductList,
-    // TemplateManage,
+    TemplateManage,
     deleted,
     bootPage,
     CommonDialog,
@@ -139,10 +138,8 @@ export default class Template extends Vue {
 </script>
 <style scoped lang="less">
 .cdg-boot-page {
-  // font-size: 100px;
   /deep/.dialog_content {
     border-radius: 10px !important;
-    // background: red;
   }
 }
 .category {

src/plugins/element.js

@@ -2,7 +2,9 @@ import Vue from 'vue';
 import {
     Message,
     Input,
-    Checkbox
+    Checkbox,
+    Select,
+    Option,
     // Button,
     // Container,
     // Header,
@@ -18,8 +20,6 @@ import {
     // FormItem,
     // Row,
     // Col,
-    // Select,
-    // Option,
     // Switch,
     // InputNumber,
     // Tree,
@@ -34,13 +34,13 @@ import {
 
 Vue.use(Checkbox);
 Vue.use(Input);
+Vue.use(Select);
+Vue.use(Option);
 // Vue.use(Loading);
 // Vue.use(Form);
 // Vue.use(FormItem);
 // Vue.use(Row);
 // Vue.use(Col);
-// Vue.use(Select);
-// Vue.use(Option);
 // Vue.use(Switch);
 // Vue.use(InputNumber);
 // Vue.use(Tree);