树形控件 新建弹框静态排版

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
     // add your custom rules here
     //it is base on https://github.com/vuejs/eslint-config-vue
     rules: {
-        "vue/max-attributes-per-line": [2, {
+        "vue/max-attributes-per-line": [warn, {
             "singleline": 10,
             "multiline": {
                 "max": 1,

src/router/index.js

@@ -340,6 +340,7 @@ export const constantRoutes = [{
 
         ]
     },
+
     {
         path: '/systemManage',
         component: Layout,
@@ -358,11 +359,11 @@ export const constantRoutes = [{
                 name: 'rolePermission',
                 component: () =>
                     import ('@/views/systemManage/rolePermission/index'),
-                hidden: true,
-                meta: { title: '角色权限' },
+                meta: { title: '权限管理' }
             },
         ]
     },
+
     //ming end
 
     // 404 page must be placed at the end !!!

src/styles/index.scss

@@ -150,6 +150,9 @@ div:focus {
 
 .el-form-item {
     width: 400px;
+}
+
+.el-dialog__body .el-form-item {
     margin: 0 auto 20px;
 }
 
@@ -182,13 +185,6 @@ div:focus {
     overflow-y: auto;
 }
 
-.basicInfo,
-.powerScore {
-    .el-form-item {
-        margin-left: 0
-    }
-}
-
 .siteManage-main {
     padding: 20px;
     .el-form-item.basic-info-page {
@@ -288,4 +284,16 @@ div:focus {
             margin: 0 20px;
         }
     }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-link.el-link--primary {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
 }

src/views/monthReport/index.vue

@@ -1,20 +1,79 @@
 <template>
   <div class="dashboard-container">
     <div class="dashboard-text">月度报告</div>
+
+    <el-tree default-expand-all :data="data">
+      <span
+        class="custom-tree-node"
+        slot-scope="{ node, data }"
+        style="width: 100%"
+        @mouseenter="mouseenter(data)"
+        @mouseleave="mouseleave(data)"
+      >
+        <span>{{ node.label }}</span>
+        <el-link
+          v-show="data.show"
+          size="mini"
+          style="margin-left: 5px"
+          type="primary"
+          icon="el-icon-plus"
+        ></el-link>
+        <el-link
+          v-show="data.show"
+          size="mini"
+          style="margin-left: 5px"
+          type="primary"
+          icon="el-icon-delete"
+        ></el-link>
+      </span>
+    </el-tree>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'Dashboard',
+  name: "Dashboard",
   computed: {
-    ...mapGetters([
-      'name'
-    ])
-  }
-}
+    ...mapGetters(["name"]),
+  },
+  data() {
+    return {
+      data: [
+        {
+          id: 0,
+          label: "水果",
+          show: false,
+          children: [
+            {
+              id: 1,
+              label: "苹果",
+              show: false,
+            },
+            {
+              id: 2,
+              label: "芒果",
+              show: false,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    mouseenter(data) {
+      alert(1)
+      console.log(data);
+      data.show = true;
+    },
+
+    mouseleave(data) {
+      console.log(data);
+      data.show = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/siteManage/addGroupCom.vue

@@ -0,0 +1,104 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="add-group-com"
+      :visible.sync="showDialog"
+      width="400px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="分组名称：" prop="watchName">
+          <el-input v-model="formInfo.watchName"></el-input>
+        </el-form-item>
+      
+        <div style="text-align: right">
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+<script>
+
+export default {
+  name: "AddGroupCom",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新建分组",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+       checked: true,
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入分组名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存操作
+    submitForm(formName) {
+      const that = this;
+      const params = Object.assign(that.formInfo, {});
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          that.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          that.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+
+</style>

src/views/siteManage/addSiteCom.vue

@@ -0,0 +1,113 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="add-group-com"
+      :visible.sync="showDialog"
+      width="400px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="站点名称：" prop="watchName">
+          <el-input v-model="formInfo.watchName"></el-input>
+        </el-form-item>
+         <el-form-item label="站点编号：" prop="watchName">
+          <el-input v-model="formInfo.watchName"></el-input>
+        </el-form-item>
+         <el-form-item label="选择模板：" prop="region">
+            <el-select v-model="formInfo.region" placeholder="请选择">
+              <el-option label="选择模板1" value="1"></el-option>
+              <el-option label="选择模板2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+      
+        <div style="text-align: right">
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+<script>
+
+export default {
+  name: "AddSiteCom",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新建站点",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+       checked: true,
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存操作
+    submitForm(formName) {
+      const that = this;
+      const params = Object.assign(that.formInfo, {});
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          that.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          that.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+
+</style>

src/views/siteManage/basicInfo/index.vue

@@ -7,13 +7,13 @@
       label-width="100px"
       class="demo-ruleForm"
     >
-      <el-row style="min-width:1100px">
+      <el-row style="min-width: 1100px">
         <el-col :span="8" :gutter="20">
           <div class="grid-content bg-purple">
             <el-form-item label="站点名称" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
-           
+
             <el-form-item label="站点类型" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
@@ -71,7 +71,7 @@
           </div>
         </el-col>
         <el-col :span="8" :gutter="20">
-           <el-form-item label="监察：" prop="region">
+          <el-form-item label="监察：" prop="region">
             <el-select v-model="ruleForm.region" placeholder="请选择">
               <el-option label="监察1" value="1"></el-option>
               <el-option label="监察2" value="2"></el-option>

src/views/siteManage/groupInfoCom.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="siteManage-main">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+          <div class="grid-content bg-purple">
+            <div class="el-form-item blockTitle">
+               分组信息
+             </div>
+            <div></div>
+            <el-form-item label="分组名称" prop="name" label-width="130px">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+          
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >保存</el-button>
+            
+            </el-form-item>
+
+          </div>
+       
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GroupInfoCom",
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+      ruleForm: {
+        name: "分组1",
+       
+      },
+      rules: {
+       
+        name: [
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+</style>

src/views/siteManage/index.vue

@@ -3,8 +3,16 @@
     <!-- 树形组件start -->
     <div class="grid-content treeDom">
       <div style="text-align: center" class="mb-20">
-        <el-button type="primary">添加分组</el-button>
-        <el-button type="primary">添加站点</el-button>
+        <el-button v-if="this.treeLevel == 3" disabled @click="addGroup()"
+          >添加分组</el-button
+        >
+        <el-button type="primary" v-else @click="addGroup()"
+          >添加分组</el-button
+        >
+        <el-button v-if="this.treeLevel == 3" disabled @click="addSite()"
+          >添加站点</el-button
+        >
+        <el-button type="primary" v-else @click="addSite()">添加站点</el-button>
       </div>
       <el-input
         placeholder="输入关键字进行过滤"
@@ -20,23 +28,48 @@
         node-key="id"
         :props="defaultProps"
         :expand-on-click-node="false"
-        :render-content="renderContent"
         default-expand-all
+        @node-click="handleNodeClick"
         :filter-node-method="filterNode"
         ref="tree"
       >
+        <span
+          class="custom-tree-node"
+          slot-scope="{ node, data }"
+          style="width: 100%"
+          @mouseenter="mouseenter(data)"
+          @mouseleave="mouseleave(data)"
+        >
+          <span>{{ node.label }}</span>
+          <el-link
+          class="deleteLink"
+            v-show="data.show"
+            size="mini"
+            type="primary"
+            icon="el-icon-delete"
+            @click="remove(node, data)"
+          ></el-link>
+        </span>
       </el-tree>
     </div>
     <!-- 树形组件end -->
 
     <!-- 站点主题start -->
     <div class="grid-content nestingDom" style="width: calc(100% -300px)">
-      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tabs
+        v-if="this.treeLevel == 3"
+        v-model="activeName"
+        type="card"
+        @tab-click="handleClick"
+      >
         <el-tab-pane label="基本信息" name="first">
           <basic-info class="basicInfo"></basic-info>
         </el-tab-pane>
         <el-tab-pane label="监控设备" name="second">
-          <watch-dog v-on:success="success(res)" :avtiveName="activeName"></watch-dog>
+          <watch-dog
+            v-on:success="success(res)"
+            :avtiveName="activeName"
+          ></watch-dog>
         </el-tab-pane>
         <el-tab-pane label="变量列表" name="third">
           <variable-list></variable-list>
@@ -46,8 +79,34 @@
         </el-tab-pane>
         <el-tab-pane label="电能质量评分配置" name="six">
           <power-Score></power-Score>
-          </el-tab-pane>
+        </el-tab-pane>
       </el-tabs>
+
+      <!-- 分组信息start -->
+      <group-info-com
+        v-if="this.treeLevel == 2 || this.treeLevel == 1"
+      ></group-info-com>
+      <!-- 分组信息end -->
+
+      <!-- 新建分组start -->
+      <add-group-com
+        v-if="showDialog"
+        ref="addGroupCom"
+        :dialog-title="dialogTitle"
+        :item-info="tableItem"
+        @closeDialog="closeDialog"
+      ></add-group-com>
+      <!-- 新建分组end -->
+
+      <!-- 新建站点start -->
+      <add-site-com
+        v-if="showDialog"
+        ref="addSiteCom"
+        :dialog-title="dialogTitle"
+        :item-info="tableItem"
+        @closeDialog="closeDialog"
+      ></add-site-com>
+      <!-- 新建站点end -->
     </div>
     <!-- 站点主题end -->
   </div>
@@ -60,11 +119,27 @@ import variableList from "./variableList";
 import camera from "./camera";
 import PowerScore from "./powerScore";
 
+import groupInfoCom from "./groupInfoCom";
+import addGroupCom from "./addGroupCom";
+import addSiteCom from "./addSiteCom";
+
 export default {
-  components: { basicInfo, WatchDog, variableList,camera,PowerScore},
+  components: {
+    basicInfo,
+    WatchDog,
+    variableList,
+    camera,
+    PowerScore,
+    groupInfoCom,
+    addGroupCom,
+    addSiteCom,
+  },
   data() {
     return {
-      activeName: "six",
+      deleteShow: false,
+      showDialog: false,
+      treeLevel: 0,
+      activeName: "first",
       filterText: "",
       data: [
         {
@@ -75,15 +150,19 @@ export default {
               children: [
                 {
                   label: "站点 1-1",
+                  show: false,
                 },
                 {
                   label: "站点 1-2",
+                  show: false,
                 },
                 {
                   label: "站点 1-3",
+                  show: false,
                 },
                 {
                   label: "站点 1-4",
+                  show: false,
                 },
               ],
             },
@@ -92,15 +171,19 @@ export default {
               children: [
                 {
                   label: "站点 2-1",
+                  show: false,
                 },
                 {
                   label: "站点 2-2",
+                  show: false,
                 },
                 {
                   label: "站点 2-3",
+                  show: false,
                 },
                 {
                   label: "站点 2-4",
+                  show: false,
                 },
               ],
             },
@@ -109,15 +192,19 @@ export default {
               children: [
                 {
                   label: "其他 3-1",
+                  show: false,
                 },
                 {
                   label: "其他 3-2",
+                  show: false,
                 },
                 {
                   label: "其他 3-3",
+                  show: false,
                 },
                 {
                   label: "其他 3-4",
+                  show: false,
                 },
               ],
             },
@@ -133,7 +220,7 @@ export default {
 
   watch: {
     success(res) {
-      alert(1)
+      alert(1);
       // this.dialogCreate = res;
       // this.activeName = res;
     },
@@ -141,7 +228,21 @@ export default {
       this.$refs.tree.filter(val);
     },
   },
+
   methods: {
+    mouseenter(data) {
+      console.log("移入");
+      console.log(data);
+      data.show = true;
+      console.log(data.show);
+    },
+
+    mouseleave(data) {
+      console.log("移出");
+      console.log(data);
+      data.show = false;
+    },
+
     handleClick(tab, event) {
       console.log(tab, event);
     },
@@ -149,9 +250,56 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
+    handleNodeClick(data, obj, node) {
+      this.treeLevel = obj.level;
+      // console.log(this.treeLevel);
+      //  console.log(node);
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
 
-    handleNodeClick(data) {
-      console.log(data);
+    addGroup() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+        resource: "",
+      };
+      this.dialogTitle = "新建分组";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["addGroupCom"].showDialog = true;
+      });
+    },
+    addSite() {
+      this.tableItem = {
+        id: "",
+        region: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+        resource: "",
+      };
+      this.dialogTitle = "新建站点";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["addSiteCom"].showDialog = true;
+      });
     },
     append(data) {
       const newChild = { id: id++, label: "testtest", children: [] };
@@ -169,6 +317,9 @@ export default {
     },
 
     renderContent(h, { node, data, store }) {
+      // console.log(h)
+      console.log(node.level);
+
       return (
         <span class="custom-tree-node">
           <span>{node.label}</span>