123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- <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" >
- </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: 20, message: "最长为20个字符", 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('创建成功');
- const routeUrl = this.$router.resolve({
- name: 'Editer',
- query: {
- graphId: res.entityList[0].graphId,
- id: res.entityList[0].id,
- categoryName: encodeURI(this.buttonStr),
- isPub: 0
- }
- })
- window.open(routeUrl.href, "_blank");
- } 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 {
-
- }
- /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;
-
-
-
- }
- .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>
|