树完成

1

src/views/teachManager/modals/addTeach.vue

@@ -4,12 +4,28 @@
     <el-form :model="form" :inline="true" label-width="120px" class="form">
       <el-row>
         <el-col :span="12">
-          <el-form-item label="教材名称">
+          <el-form-item
+            label="教材名称"
+            prop="name"
+            :rules="[
+              {
+                required: true,
+                message: '请输入教材名称',
+                trigger: 'blur',
+              },
+            ]"
+          >
             <el-input v-model="form.name" style="width: 260px"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="教材分类">
+          <el-form-item label="教材分类" prop="organId"  :rules="[
+              {
+                required: true,
+                message: '请选择适用分部',
+                trigger: 'change',
+              },
+            ]">
             <select-all
               style="width: 260px"
               v-model.trim="form.organId"
@@ -36,7 +52,7 @@
           :rules="[
             {
               required: true,
-              message: '请上教材封面图',
+              message: '请上传教材封面图',
               trigger: 'blur',
             },
           ]"
@@ -72,27 +88,21 @@
           :expand-on-click-node="false"
           draggable
           accordion
-          :allow-drop="allowDrop"
-          :allow-drag="allowDrag"
         >
           >
           <span class="custom-tree-node" slot-scope="{ node, data }">
             <span>{{ node.label }}</span>
             <span>
-              <el-button
-                type="text"
-                size="mini"
-                @click="() => appendItem(data)"
-              >
-                添加
-              </el-button>
-              <el-button
-                type="text"
-                size="mini"
+              <i class="el-icon-edit" @click="() => editItem(data)"></i>
+              <i
+                class="el-icon-remove-outline"
                 @click="() => removeItem(node, data)"
-              >
-                删除
-              </el-button>
+              ></i>
+              <i
+                class="el-icon-circle-plus-outline"
+                v-if="node.level == 1"
+                @click="() => appendItem(data)"
+              ></i>
             </span>
           </span>
         </el-tree>
@@ -112,8 +122,8 @@ export default {
         organId: [],
         name: null,
         data: [],
-        index: 0,
       },
+      index: 0,
     };
   },
   mounted() {
@@ -149,7 +159,7 @@ export default {
       })
         .then(({ value }) => {
           this.index += 1;
-          this.form.data.push({ index: `xxx${this.index}`, label: value });
+          // this.form.data.push({ index: `xxx${this.index}`, label: value });
           const newChild = {
             index: `xxx${this.index}`,
             label: value,
@@ -162,9 +172,28 @@ export default {
         })
         .catch(() => {});
     },
-    removeItem(node, data) {},
+    removeItem(node, data) {
+      const parent = node.parent;
+      const children = parent.data.children || parent.data;
+      const index = children.findIndex((d) => d.id === data.id);
+      children.splice(index, 1);
+    },
+    editItem(data) {
+      this.$prompt("请输入修改的教材曲目名称", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        closeOnClickModal: false,
+        inputPattern: /^.{1,30}$/,
+        inputErrorMessage: "请输入1到15个汉字或字符",
+      })
+        .then(({ value }) => {
+          data.label = value;
+          // this.form.data.push({ index: `xxx${this.index}`, label: value });
+        })
+        .catch(() => {});
+    },
     addCate() {
-      this.$prompt("请输入分类名称", "提示", {
+      this.$prompt("请输入教材曲目名称", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         closeOnClickModal: false,
@@ -179,6 +208,7 @@ export default {
       // this.form.data.push({})
     },
   },
+  computed: {},
 };
 </script>
 <style lang="scss" scoped>
@@ -193,4 +223,11 @@ export default {
 .addCateBtn {
   margin-bottom: 20px;
 }
+.custom-tree-node {
+  font-size: 16px;
+  i {
+    // font-size: 20px;
+    margin-left: 5px;
+  }
+}
 </style>