|
@@ -1,237 +0,0 @@
|
|
-<template>
|
|
|
|
- <el-dialog class="create-dialog" title="新建拓扑图" width="600px" :visible.sync="outerVisible" :close-on-click-modal="false" custom-class="createDialog"
|
|
|
|
- @close="closeModal">
|
|
|
|
- <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="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>
|
|
|
|
- </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"
|
|
|
|
-import { createGraph } from "@/api/home"
|
|
|
|
-export default {
|
|
|
|
- components: {
|
|
|
|
- graphTypeDialog
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- buttonStr: '',
|
|
|
|
- ruleForm: {
|
|
|
|
- name: "",
|
|
|
|
- type: "",
|
|
|
|
- },
|
|
|
|
- rules: {
|
|
|
|
- name: [
|
|
|
|
- { required: true, message: "请输入名称", trigger: "blur" },
|
|
|
|
- { max: 10, message: "最长为10个文字", trigger: "blur" },
|
|
|
|
- ],
|
|
|
|
- type: [
|
|
|
|
- { required: true, 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 = '';
|
|
|
|
- },
|
|
|
|
- // 选好所属类别
|
|
|
|
- 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.dynamicTags = [];
|
|
|
|
- this.buttonStr= '';
|
|
|
|
- this.$refs[formName].resetFields();
|
|
|
|
- this.outerVisible = false
|
|
|
|
- },
|
|
|
|
- // 创建拓扑图接口
|
|
|
|
- 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.$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;
|
|
|
|
- }
|
|
|
|
- .dialog-bodys {
|
|
|
|
- // max-height: 250px;
|
|
|
|
- }
|
|
|
|
- /deep/ .el-dialog__body {
|
|
|
|
- padding: 16px 120px;
|
|
|
|
- height: 270px;
|
|
|
|
- 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>
|
|
|