标签组件添加

src/components/PlaceDialog.vue

+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="50%"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-form">
+        <el-form-item label="标签类型" prop="typeName">
+          <el-input v-model="form.typeName" />
+        </el-form-item>
+        <el-form-item label="备注" prop="bz">
+          <el-input v-model="form.bz" resize="none" type="textarea" />
+        </el-form-item>
+        <el-form-item>
+          <el-button class="pull-right" type="primary" @click="submitForm()">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import SparkMD5 from "spark-md5";
+import { get, postJson, post } from "@/utils/http.js";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      title: '',
+      form: {
+        typeName: '',
+        bz: ''
+      },
+      rules: {
+        typeName: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        bz: [
+          { required: false, message: '请输入描述', trigger: 'blur' }
+        ]
+      },
+      isEdit: false,
+      typePid: '',
+      data: {}
+    }
+  },
+  methods: {
+    /**
+     * @description 打开弹窗
+     * @param { Boolean } isEdit 是否是修改状态 true 修改 / false 新增
+     * @param { String } typePid 父级id,新增时默认选中父级时使用
+     * @param { Object } data 表单数据，编辑时使用
+     */
+    openDialog(isEdit, typePid, data) {
+      // debugger
+      this.isEdit = isEdit
+      this.typePid = typePid
+      this.data = data
+      this.title = isEdit ? '编辑' : '新增'
+      this.initFormData()
+      this.dialogVisible = true
+      if (this.isEdit) {
+        this.$nextTick(() => {
+          this.form = data
+        })
+      }
+    },
+ 
+    // 初始化表单数据
+    initFormData() {
+      this.form = {
+        typeName: '',
+        bz: ''
+      }
+    },
+ 
+    // 提交表单
+    submitForm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          let formData = JSON.parse(JSON.stringify(this.form))
+          let params = new FormData();
+          params.typeId = formData.typeId;
+          params.typeName = formData.typeName;
+          params.bz = formData.bz;
+          params.typePid = formData.typePid;
+          // debugger
+          if (this.isEdit) {
+            post("/xqapi/swbq/updateSwbqlx", params).then((res) => {
+              if (res.code == "200") {
+                this.$emit('editData', formData)
+                this.closeDialog()
+              }else if(res.code == "202") {
+                this.$notify.error({
+                  title: "登录超时!",
+                  message: res.msg,
+                });
+                this.$router.replace({ path: "/Login/swptLogin" });
+              } else {
+                console.log(res.message);
+                this.$notify.error({
+                  title: "系统异常",
+                  message: res.msg,
+                });
+              }
+            });
+            // this.$emit('editData', formData)
+          } else {
+            // 设置新创建节点的父级编号
+            formData.typePid = this.typePid ? this.typePid : ''
+            // 随机生成id(仅为前端模拟使用，正常场景应为后台生成)
+
+            // formData.typeId = Math.random()
+
+            // var spark = new SparkMD5.ArrayBuffer();
+            // var md5 = spark.end();
+            // formData.typeId = md5;
+            // console('随机数：'+Math.random())
+
+            // let params = new FormData();
+
+            post("/xqapi/swbq/addSwbqlx", formData).then((res) => {
+              if (res.code == "200") {
+                formData.typeId = res.data.id;
+                this.$emit('addData', formData)
+                this.closeDialog()
+              }else if(res.code == "202") {
+                this.$notify.error({
+                  title: "登录超时!",
+                  message: res.msg,
+                });
+                this.$router.replace({ path: "/Login/swptLogin" });
+              } else {
+                console.log(res.message);
+                this.$notify.error({
+                  title: "系统异常",
+                  message: res.msg,
+                });
+              }
+            });
+            
+          }
+          // this.closeDialog()
+        }
+      })
+    },
+
+    // 关闭当前弹窗
+    closeDialog() {
+      this.$refs.form.resetFields()
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+<style scoped>
+.pull-right {
+  float: right
+}
+</style>
\ No newline at end of file

src/components/Tree.vue

+<template>
+  <div class="white-body-view">
+    <el-tree
+      accordion
+      id="my-tree"
+      ref="tree"
+      class="tree-view structure-tree"
+      :data="treeData"
+      highlight-current
+      :default-expand-all="treeExpandAll"
+      :props="defaultProps"
+      check-strictly
+      :node-key="treeNodeKey"
+      :auto-expand-parent="false"
+      :expand-on-click-node="false"
+      @current-change="currentNodeChange"
+    >
+      <span slot-scope="{ node, data }" class="custom-tree-node">
+        <span class="tooltip">
+          <span class="add-f-s-14">{{ data.typeName }}</span>
+        </span>
+        <div v-if="node.isCurrent == true" class="operation-view">
+          <i
+            class="small-operation-btn el-icon-plus"
+            @click.stop="handleAdd(data)"
+          />
+          <i
+            class="small-operation-btn el-icon-edit "
+            @click.stop="handleEdit(data)"
+          />
+          <i
+            class="small-operation-btn el-icon-delete"
+            @click.stop="handleDelete(data)"
+          />
+        </div>
+      </span>
+    </el-tree>
+  </div>
+</template>
+ 
+<script>
+export default {
+  props: {
+    // 源数据
+    treeData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+ 
+    // 树节点是否默认展开
+    treeExpandAll: {
+      type: Boolean,
+      default: true
+    },
+ 
+    // 树节点唯一标识
+    treeNodeKey: {
+      type: String,
+      default: ''
+    }
+  },
+ 
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        // label: 'name'
+        label: 'typeName'
+      },
+      selectItem: {}
+    }
+  },
+ 
+  methods: {
+    currentNodeChange(data, node) {
+      this.$emit('currentItem', data)
+    },
+    // 添加新增按钮
+    handleAdd(data) {
+      this.$emit('addItem', data)
+    },
+ 
+    // 点击删除按钮
+    handleDelete(data) {
+      this.$emit('deleteItem', data)
+    },
+ 
+    // 点击编辑按钮
+    handleEdit(data) {
+      this.selectItem = data
+      this.$emit('editItem', JSON.parse(JSON.stringify(data)))
+    },
+ 
+    // ============== 组件内事件 结束=============
+ 
+    // ============== 父组件回调事件 开始=============
+ 
+    // 添加新记录，树形列表回显
+    treeAddItem(data) {
+      // debugger
+      this.$refs.tree.append(data, data.typePid)
+    },
+ 
+    // 删除节点
+    treeDeleteItem(val) {
+      this.$refs.tree.remove(val)
+    },
+ 
+    // 修改记录，树形列表回显
+    treeEditItem(val) {
+      Object.assign(this.selectItem, val)
+      this.selectItem = {}
+    }
+ 
+    // ============== 父组件回调事件 结束=============
+ 
+  }
+}
+</script>
+<style lang="scss">
+.structure-tree {
+  .el-scrollbar .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+  #my-tree .el-tree > .el-tree-node {
+    min-width: 100%;
+    display: inline-block;
+  }
+  .el-tree-node__content {
+    margin-bottom: 10px;
+  }
+  .tooltip {
+    margin-right: 5px;
+    font-size: 13px;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    padding: 4px;
+  }
+  .operation-view {
+    display: inline-block;
+    padding: 0px 5px;
+    margin-left: 5px;
+    color: #777777;
+  }
+  .small-operation-btn{
+    margin:0px 3px;
+  }
+}
+ 
+</style>
\ No newline at end of file