Browse Source

home: feat> 新建拓扑图弹窗样式

haojianlong 4 years ago
parent
commit
5583634699

+ 182 - 0
src/components/homeView/createGraphDialog.vue

@@ -0,0 +1,182 @@
+<template>
+  <el-dialog class="create-dialog" title="新建拓扑图" width="600px" :visible.sync="outerVisible" :close-on-click-modal="false" custom-class="createDialog">
+    <graphTypeDialog ref="graphTypeDialog"></graphTypeDialog>
+    <div class="dialog-bodys">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
+        <el-form-item label="所属类别" prop="region">
+          <el-button @click="getprojectType" class="typeButton">请选择所属类别</el-button>
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入名称" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="标签" prop="resource">
+          <div class="tagContainer">
+            <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
+              {{tag}}
+            </el-tag>
+            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
+              @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" :maxlength="10">
+            </el-input>
+            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="resetForm('ruleForm')">取消</el-button>
+      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import graphTypeDialog from "@/components/homeView/graphTypeDialog"
+export default {
+  components: {
+    graphTypeDialog
+  },
+  data() {
+    return {
+      ruleForm: {
+        name: "",
+        region: "",
+        resource: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入名称", trigger: "blur" },
+          { max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择所属类别", trigger: "change" },
+        ],
+        resource: [
+          { required: false, message: "请选择活动资源", trigger: "change" },
+        ],
+      },
+      value: [],
+      outerVisible: false,
+      dynamicTags: [],
+      inputValue: '',
+      inputVisible: false,
+    }
+  },
+  methods: {
+    showDialog() {
+      this.outerVisible = true;
+    },
+    // 获取所属类别
+    getprojectType() {
+      this.$refs.graphTypeDialog.showDialog()
+    },
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    },
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+    handleInputConfirm() {
+      const inputValue = this.inputValue;
+      if (inputValue) {
+        this.dynamicTags.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = '';
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+/deep/ .createDialog {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #f0f1f2ff;
+  }
+  .dialog-bodys {
+    max-height: 250px;
+  }
+  /deep/ .el-dialog__body {
+    padding: 16px 120px;
+    overflow: auto;
+  }
+  .el-dialog__footer {
+    padding: 0 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+  .el-form-item {
+    margin-bottom: 0;
+    & + .el-form-item {
+      margin-top: 18px;
+    }
+  }
+  .el-form-item__label {
+    line-height: 1;
+  }
+  .el-tag {
+    background: #eff0f1;
+    border-radius: 2px;
+    color: #1f2429ff;
+    margin: 0 8px 8px 0;
+    padding: 5px 6px 5px 8px;
+    font-size: 14px;
+    height: 24px;
+    line-height: 1;
+    border: none;
+    &:hover {
+      border: none;
+    }
+    .el-icon-close {
+      color: #9ca2a9ff;
+      right: 0;
+      &:hover {
+        color: #fff;
+        background-color: #ccc;
+      }
+    }
+  }
+  .input-new-tag {
+    width: 150px;
+    // input{
+    //   height: 24px;
+    // }
+  }
+  .button-new-tag {
+    width: 60px;
+    height: 24px;
+    margin-bottom: 8px;
+    padding: 0;
+    line-height: 1;
+    border-radius: 2px;
+    border: 1px dotted #0091ff;
+    color: #0091ff;
+    &:hover {
+      background: #fff;
+      color: #0091ff;
+      border: 1px dotted #0091ff;
+    }
+  }
+  .typeButton {
+    min-width: 122px;
+    height: 32px;
+    text-align: center;
+    line-height: 32px;
+    border-radius: 4px;
+    padding: 0;
+    border: 1px solid #c3c6cb;
+  }
+  .tagContainer {
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid #c3c6cb;
+    padding: 7px 12px;
+    line-height: 1;
+  }
+}
+</style>

+ 127 - 0
src/components/homeView/graphTypeDialog.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog class="create-dialog-inner" width="840px" title="所属类别" :visible.sync="innerVisible" append-to-body :close-on-click-modal="false"
+    custom-class="graphTypeDialog">
+    <div class="dialog-bodys">
+      <div class="left content">
+        <p>拓扑图所属类别</p>
+        <div class="treeContainer">
+          <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode"></el-tree>
+        </div>
+      </div>
+      <div class="splitLine"></div>
+      <div class="right content">
+        <p>设备分类参考</p>
+        <div class="treeContainer">
+          <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode"></el-tree>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button>取消</el-button>
+      <el-button type="primary">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { queryCategoryGraph } from "@/api/home"
+export default {
+  data() {
+    return {
+      innerVisible: false,
+      treeData: [],
+      defaultProps: {
+        children: 'categoryList',
+        label: 'name'
+      },
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      queryCategoryGraph({ switch: true }).then(res => {
+        this.treeData = res.content;
+      })
+    },
+    showDialog() {
+      this.innerVisible = true
+    },
+    changeNode(data, node) {
+      if (node.isLeaf) {
+        this.$emit('changeNode', data)
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+/deep/ .graphTypeDialog {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #f0f1f2ff;
+  }
+  /deep/ .el-dialog__body {
+    padding: 16px 32px;
+  }
+  .el-dialog__footer {
+    padding: 0 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+  .dialog-bodys {
+    display: flex;
+    overflow: hidden;
+    height: 380px;
+    .splitLine {
+      width: 1px;
+      background-color: #e4e5e7ff;
+      margin: 0 30px;
+    }
+    .content {
+      width: 356px;
+      padding: 16px 0 16px 16px;
+      box-sizing: border-box;
+      .el-tree {
+        /deep/ .el-tree-node {
+          &.is-current {
+            & > .el-tree-node__content {
+              background: #e1f2ffff;
+              color: #0091ffff;
+            }
+          }
+          .el-tree-node__content {
+            height: 38px;
+            line-height: 38px;
+            &:hover {
+              background: #e1f2ffff;
+              color: #0091ffff;
+            }
+          }
+        }
+      }
+      &.right {
+        background: #f7f8f9;
+        .el-tree {
+          background: #f7f8f9;
+        }
+      }
+      .treeContainer {
+        height: 305px;
+        overflow: auto;
+      }
+      & > p {
+        border-left: 4px solid #0091ffff;
+        margin-bottom: 20px;
+        padding-left: 8px;
+        color: #1f2429;
+        line-height: 19px;
+      }
+    }
+  }
+}
+</style>

+ 7 - 87
src/views/home.vue

@@ -54,37 +54,8 @@
       </el-main>
     </el-container>
 
-    <!-- 弹框 -->
-    <el-dialog class="create-dialog" title="新建拓扑图" :visible.sync="outerVisible">
-      <el-dialog class="create-dialog-inner" width="30%" title="所属类别" :visible.sync="innerVisible" append-to-body>
-        <div class="inner-dialog-body">
-          <div class="left">1</div>
-          <div class="right">2</div>
-        </div>
-      </el-dialog>
-      <div class="dialog-bodys">
-        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
-          <el-form-item label="所属类别" prop="region">
-            <el-button @click="getprojectType">请选择所属类别</el-button>
-          </el-form-item>
-          <el-form-item label="活动名称" prop="name">
-            <el-input v-model="ruleForm.name"></el-input>
-          </el-form-item>
-          <el-form-item label="标签" prop="resource">
-            <el-select v-model="value" multiple filterable allow-create default-first-option width="100%" placeholder="请选择文章标签"></el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
-            <el-button @click="resetForm('ruleForm')">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="outerVisible = false">取 消</el-button>
-        <el-button type="primary" @click="innerVisible = true">确定</el-button>
-      </div>
-    </el-dialog>
-
+    <!-- 创建弹框 -->
+    <createGraphDialog ref="createGraphDialog"></createGraphDialog>
     <!-- 重命名 -->
     <rename ref="rename" :isPub="isPub" @updateSuc="updateSuc"></rename>
     <!-- 移动到 -->
@@ -108,6 +79,7 @@ import move from "@/components/homeView/move"
 import deleteDialog from "@/components/homeView/deleteDialog"
 import tagDialog from "@/components/homeView/tagDialog"
 import recycle from "@/components/homeView/recycle"
+import createGraphDialog from "@/components/homeView/createGraphDialog"
 export default {
   name: "home",
   data() {
@@ -132,56 +104,6 @@ export default {
       ], // 排序选项
       queryText: "", // 搜索文字
       isPub: 1, // 发布类型()
-      outerVisible: false,
-      innerVisible: false,
-      ruleForm: {
-        name: "",
-        region: "",
-        date1: "",
-        date2: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        desc: "",
-      },
-      rules: {
-        name: [
-          { required: true, message: "请输入活动名称", trigger: "blur" },
-          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
-        ],
-        region: [
-          { required: true, message: "请选择活动区域", trigger: "change" },
-        ],
-        date1: [
-          {
-            type: "date",
-            required: true,
-            message: "请选择日期",
-            trigger: "change",
-          },
-        ],
-        date2: [
-          {
-            type: "date",
-            required: true,
-            message: "请选择时间",
-            trigger: "change",
-          },
-        ],
-        type: [
-          {
-            type: "array",
-            required: true,
-            message: "请至少选择一个活动性质",
-            trigger: "change",
-          },
-        ],
-        resource: [
-          { required: true, message: "请选择活动资源", trigger: "change" },
-        ],
-        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
-      },
-      value: [],
       cardList: [], // 当前显示的卡片列表
       checkAll: false, // 全选
       selectCard: [], // 当前选中的卡片列表
@@ -194,11 +116,9 @@ export default {
       console.log(data);
     },
     // 创建拓扑图
-    createProject() { },
-    // 获取所属类别
-    getprojectType() {
-      this.innerVisible = true;
-    },
+    createProject() {
+      this.$refs.createGraphDialog.showDialog()
+     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -328,7 +248,7 @@ export default {
       }
     }
   },
-  components: { Select, Button, leftAsideTree, Dropdown, topoImageCard, rename, move, deleteDialog, recycle, tagDialog },
+  components: { Select, Button, leftAsideTree, Dropdown, topoImageCard, rename, move, deleteDialog, recycle, tagDialog, createGraphDialog },
   watch: {
     // 排序方式修改
     selVal(n, o) {