Parcourir la source

Merge branch 'master' of http://39.106.8.246:3003/web/persagy-plan-editer into master

yunxing il y a 4 ans
Parent
commit
a71ded0dce
1 fichiers modifiés avec 37 ajouts et 16 suppressions
  1. 37 16
      src/components/homeView/createCanvasDialog.vue

+ 37 - 16
src/components/homeView/createCanvasDialog.vue

@@ -44,8 +44,8 @@
                     </div>
                 </el-form-item>
                 <el-form-item label="所属文件夹" prop="folder">
-                    <el-select v-model="ruleForm.folder" multiple filterable allow-create default-first-option size="small">
-                        <el-option v-for="item in folderData" :key="item.id" :label="item.name" :value="item.name"> </el-option>
+                    <el-select v-model="ruleForm.folder" filterable allow-create default-first-option size="small" @change="handleChangeFolder">
+                        <el-option v-for="item in folderData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                     </el-select>
                 </el-form-item>
             </el-form>
@@ -61,15 +61,27 @@ import { buildingQuery } from "@/api/datacenter";
 export default {
     components: {},
     data() {
+        /**
+         * 自定义楼层校验规则
+         */
+        const validateBuildFloor = (rule, value, callback) => {
+            if (value.length !== 2) {
+                callback(new Error('请选择具体的楼层'));
+            } else {
+                callback();
+            }
+        };
         return {
-            buttonStr: "",
             ruleForm: {
                 buildFloor: [],
                 name: "",
                 folder: "",
             },
             rules: {
-                buildFloor: [{ required: true, message: "请选择建筑楼层", trigger: "blur" }],
+                buildFloor: [
+                    { required: true, message: "请选择建筑楼层", trigger: "change" },
+                    { validator: validateBuildFloor, trigger: 'change' }
+                ],
                 name: [
                     { required: true, message: "请输入名称", trigger: "blur" },
                     { max: 10, message: "最长为10个文字", trigger: "blur" },
@@ -130,12 +142,10 @@ export default {
         this.getBuildingFloorData();
     },
     methods: {
+        // 显示创建平面图弹窗
         showDialog() {
             this.outerVisible = true;
         },
-        handleClose(tag) {
-            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-        },
         // 获取建筑楼层数据
         getBuildingFloorData() {
             const params = {
@@ -153,16 +163,14 @@ export default {
                 this.buildFloorData = res.content;
             });
         },
-        // 切换建筑楼层
-        handleChangeBuildFloor(val) {
-            console.log(val);
-        },
+        // 展示标签输入框
         showInput() {
             this.inputVisible = true;
-            this.$nextTick((_) => {
+            this.$nextTick(() => {
                 this.$refs.saveTagInput.$refs.input.focus();
             });
         },
+        // 添加标签
         handleInputConfirm() {
             const inputValue = this.inputValue;
             if (inputValue) {
@@ -171,34 +179,47 @@ export default {
             this.inputVisible = false;
             this.inputValue = "";
         },
+        // 删除标签
+        handleClose(tag) {
+            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+        },
+        // 点击确定按钮(校验创建信息并调用创建平面图接口)
         submitForm(formName) {
             this.$refs[formName].validate((valid) => {
                 if (valid) {
-                    this.createDraftsGraph();
+                    this.createPlan();
                 } else {
                     console.log("error submit!!");
                     return false;
                 }
             });
         },
+        // 重置创建平面图信息
         resetForm(formName) {
             this.dynamicTags = [];
-            this.buttonStr = "";
             this.$refs[formName].resetFields();
             this.outerVisible = false;
         },
-        // 创建拓扑图接口
-        createDraftsGraph() {
+        // 创建平面图接口
+        createPlan() {
             const pa = {
                 content: [
                     {
                         name: this.ruleForm.name,
                         label: this.dynamicTags,
+                        building: this.ruleForm.buildFloor[0],
+                        floor: this.ruleForm.buildFloor[1]
                     },
                 ],
             };
+            if (this.folderData.find(folder =>{return folder.id === this.ruleForm.folder})) {
+                console.log("选中已有文件夹", this.ruleForm.folder);
+            } else {
+                console.log("新建文件夹", this.ruleForm.folder);
+            }
             console.log(pa)
         },
+        // 关闭创建弹窗回调(重置创建信息)
         closeModal() {
             this.resetForm("ruleForm");
         },