|
@@ -0,0 +1,291 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ class="create-dialog"
|
|
|
+ title="新建画布"
|
|
|
+ width="600px"
|
|
|
+ :visible.sync="outerVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ custom-class="createDialog"
|
|
|
+ @close="closeModal"
|
|
|
+ >
|
|
|
+ <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="buildFloor">
|
|
|
+ <el-cascader v-model="ruleForm.buildFloor" :options="buildFloorData" @change="handleChangeBuildFloor" size="small"></el-cascader>
|
|
|
+ </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-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>
|
|
|
+ </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 { buildingQuery } from "@/api/datacenter";
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ buttonStr: "",
|
|
|
+ ruleForm: {
|
|
|
+ buildFloor: [],
|
|
|
+ name: "",
|
|
|
+ folder: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ buildFloor: [{ required: true, message: "请选择建筑楼层", trigger: "blur" }],
|
|
|
+ name: [
|
|
|
+ { required: true, message: "请输入名称", trigger: "blur" },
|
|
|
+ { max: 10, message: "最长为10个文字", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ folder: [{ required: true, message: "请选择所属文件夹", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ buildFloorData: [],
|
|
|
+ value: [],
|
|
|
+ outerVisible: false,
|
|
|
+ dynamicTags: [],
|
|
|
+ inputValue: "",
|
|
|
+ inputVisible: false,
|
|
|
+ folderData: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "能源系统",
|
|
|
+ updateName: "能源系统",
|
|
|
+ checked: false,
|
|
|
+ showInput: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "排水系统",
|
|
|
+ updateName: "排水系统",
|
|
|
+ checked: false,
|
|
|
+ showInput: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "消防水系统",
|
|
|
+ updateName: "消防水系统",
|
|
|
+ checked: false,
|
|
|
+ showInput: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "公共照明系统公共照明系统公共照明系统公共照明系统",
|
|
|
+ updateName: "公共照明系统公共照明系统公共照明系统公共照明系统",
|
|
|
+ checked: false,
|
|
|
+ showInput: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: "暖通空调系统",
|
|
|
+ updateName: "暖通空调系统",
|
|
|
+ checked: false,
|
|
|
+ showInput: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getBuildingFloorData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showDialog() {
|
|
|
+ this.outerVisible = true;
|
|
|
+ },
|
|
|
+ handleClose(tag) {
|
|
|
+ this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
|
|
+ },
|
|
|
+ // 获取建筑楼层数据
|
|
|
+ getBuildingFloorData() {
|
|
|
+ const params = {}
|
|
|
+ buildingQuery(params, res => {
|
|
|
+ debugger
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 切换建筑楼层
|
|
|
+ handleChangeBuildFloor(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ 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 = "";
|
|
|
+ },
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.createDraftsGraph();
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.dynamicTags = [];
|
|
|
+ this.buttonStr = "";
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ this.outerVisible = false;
|
|
|
+ },
|
|
|
+ // 创建拓扑图接口
|
|
|
+ createDraftsGraph() {
|
|
|
+ const pa = {
|
|
|
+ content: [
|
|
|
+ {
|
|
|
+ name: this.ruleForm.name,
|
|
|
+ label: this.dynamicTags,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ createGraph(pa).then((res) => {
|
|
|
+ if (res.result == "success") {
|
|
|
+ this.outerVisible = false;
|
|
|
+ this.$message.success("创建成功");
|
|
|
+ this.$router.push({
|
|
|
+ name: "Editer",
|
|
|
+ query: {
|
|
|
+ graphId: res.entityList[0].graphId,
|
|
|
+ id: res.entityList[0].id,
|
|
|
+ categoryName: encodeURI(this.buttonStr),
|
|
|
+ isPub: 0,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message(res.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ closeModal() {
|
|
|
+ this.resetForm("ruleForm");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/ .createDialog {
|
|
|
+ /deep/ .el-dialog__header {
|
|
|
+ border-bottom: 1px solid #f0f1f2ff;
|
|
|
+ }
|
|
|
+ /deep/ .el-dialog__body {
|
|
|
+ padding: 16px 120px;
|
|
|
+ max-height: 500px;
|
|
|
+ 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>
|