Browse Source

home: feat> 新建拓扑图弹窗

haojianlong 4 năm trước cách đây
mục cha
commit
afd55d7051

+ 5 - 0
src/api/home.ts

@@ -50,4 +50,9 @@ export function updatePubGraph(postParams: any): any {
 // 回收站恢复
 export function recoveryGraph(postParams: any): any {
     return httputils.postJson(`/labsl/graph/recycle/recovery`, postParams)
+}
+
+// 新建拓扑图
+export function createGraph(postParams: any): any {
+    return httputils.postJson(`/labsl/graph/drafts/create`, postParams)
 }

+ 52 - 12
src/components/homeView/createGraphDialog.vue

@@ -1,10 +1,13 @@
 <template>
   <el-dialog class="create-dialog" title="新建拓扑图" width="600px" :visible.sync="outerVisible" :close-on-click-modal="false" custom-class="createDialog">
-    <graphTypeDialog ref="graphTypeDialog"></graphTypeDialog>
+    <graphTypeDialog ref="graphTypeDialog" @selectNode="selectNode"></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 label="所属类别" prop="type">
+          <el-button @click="getprojectType" class="typeButton">
+            <span v-if="buttonStr" style="color:#C3C6CBFF">已选 : </span>
+            {{buttonStr?buttonStr:'请选择所属类别'}}
+          </el-button>
         </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="ruleForm.name" placeholder="请输入名称" size="small"></el-input>
@@ -30,28 +33,26 @@
 </template>
 <script>
 import graphTypeDialog from "@/components/homeView/graphTypeDialog"
+import { createGraph } from "@/api/home"
 export default {
   components: {
     graphTypeDialog
   },
   data() {
     return {
+      buttonStr: '',
       ruleForm: {
         name: "",
-        region: "",
-        resource: "",
+        type: "",
       },
       rules: {
         name: [
           { required: true, message: "请输入名称", trigger: "blur" },
-          { max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
+          { max: 10, message: "最长为10个文字", trigger: "blur" },
         ],
-        region: [
+        type: [
           { required: true, message: "请选择所属类别", trigger: "change" },
-        ],
-        resource: [
-          { required: false, message: "请选择活动资源", trigger: "change" },
-        ],
+        ]
       },
       value: [],
       outerVisible: false,
@@ -85,6 +86,44 @@ export default {
       this.inputVisible = false;
       this.inputValue = '';
     },
+    // 选好所属类别
+    selectNode(node) {
+      console.log(node);
+      this.ruleForm.type = node.data.code;
+      this.buttonStr = node.data.name
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.createDraftsGraph()
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    // 创建拓扑图接口
+    createDraftsGraph() {
+      const pa = {
+        content: [{
+          categoryId: this.ruleForm.type,
+          name: this.ruleForm.name,
+          label: this.dynamicTags
+        }]
+      }
+      createGraph(pa).then(res => {
+        if (res.result == "success") {
+          this.outerVisible = false;
+          this.$message.success('创建成功');
+          this.$emit("createSuc")
+        } else {
+          this.$message(res.message)
+        }
+      })
+    }
   }
 }
 </script>
@@ -94,10 +133,11 @@ export default {
     border-bottom: 1px solid #f0f1f2ff;
   }
   .dialog-bodys {
-    max-height: 250px;
+    // max-height: 250px;
   }
   /deep/ .el-dialog__body {
     padding: 16px 120px;
+    height: 270px;
     overflow: auto;
   }
   .el-dialog__footer {

+ 12 - 4
src/components/homeView/graphTypeDialog.vue

@@ -5,7 +5,7 @@
       <div class="left content">
         <p>拓扑图所属类别</p>
         <div class="treeContainer">
-          <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode"></el-tree>
+          <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode" node-key="name"></el-tree>
         </div>
       </div>
       <div class="splitLine"></div>
@@ -17,8 +17,8 @@
       </div>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button>取消</el-button>
-      <el-button type="primary">确定</el-button>
+      <el-button @click="innerVisible=false">取消</el-button>
+      <el-button type="primary" :disabled="disabled" @click="confirm">确定</el-button>
     </div>
   </el-dialog>
 </template>
@@ -29,10 +29,12 @@ export default {
     return {
       innerVisible: false,
       treeData: [],
+      disabled: true,
       defaultProps: {
         children: 'categoryList',
         label: 'name'
       },
+      selectNode: {}
     }
   },
   mounted() {
@@ -49,8 +51,14 @@ export default {
     },
     changeNode(data, node) {
       if (node.isLeaf) {
-        this.$emit('changeNode', data)
+        this.selectNode = node;
+        this.disabled = false;
       }
+    },
+    // 确认
+    confirm() {
+      this.innerVisible = false;
+      this.$emit('selectNode', this.selectNode)
     }
   }
 }

+ 3 - 2
src/components/homeView/topoImageCard.vue

@@ -1,7 +1,8 @@
 <!--拓扑图缩略图卡片-->
 <template>
   <el-card :class="{'box-card': true, 'active': data.checked}" shadow="hover" :body-style="{ padding: '0px' }">
-    <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+data.pic" class="image">
+    <img class="image"
+      :src="data.pic?`/image-service/common/image_get?systemId=dataPlatform&key=${data.pic}`:require('@/assets/images/leftImgs/EditBaseImage.png')">
     <div class="shadow image" v-if="!isRecycle" @click="toEdit">
       <el-checkbox v-model="data.checked" class="shadowCheck" @change="changeCheck"></el-checkbox>
     </div>
@@ -101,7 +102,7 @@ export default {
       }
     },
     // 进入编辑页面
-    toEdit(){
+    toEdit() {
       console.log(123123);
     }
   },

+ 0 - 13
src/views/home.vue

@@ -119,19 +119,6 @@ export default {
     createProject() {
       this.$refs.createGraphDialog.showDialog()
      },
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          alert("submit!");
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields();
-    },
     // 选项改变
     changeCheck(v) {
       const index = this.selectCard.indexOf(v);