createGraphDialog.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <template>
  2. <el-dialog class="create-dialog" title="新建拓扑图" width="600px" :visible.sync="outerVisible" :close-on-click-modal="false" custom-class="createDialog"
  3. @close="closeModal">
  4. <graphTypeDialog ref="graphTypeDialog" @selectNode="selectNode"></graphTypeDialog>
  5. <div class="dialog-bodys">
  6. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
  7. <el-form-item label="所属类别" prop="type">
  8. <el-button @click="getprojectType" class="typeButton">
  9. <span v-if="buttonStr" style="color:#C3C6CBFF">已选 : </span>
  10. {{buttonStr?buttonStr:'请选择所属类别'}}
  11. </el-button>
  12. </el-form-item>
  13. <el-form-item label="名称" prop="name">
  14. <el-input v-model="ruleForm.name" placeholder="请输入名称" size="small"></el-input>
  15. </el-form-item>
  16. <el-form-item label="标签" prop="resource">
  17. <div class="tagContainer">
  18. <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
  19. {{tag}}
  20. </el-tag>
  21. <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
  22. @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" >
  23. </el-input>
  24. <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
  25. </div>
  26. </el-form-item>
  27. </el-form>
  28. </div>
  29. <div slot="footer" class="dialog-footer">
  30. <el-button @click="resetForm('ruleForm')">取消</el-button>
  31. <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
  32. </div>
  33. </el-dialog>
  34. </template>
  35. <script>
  36. import graphTypeDialog from "@/components/homeView/graphTypeDialog"
  37. import { createGraph } from "@/api/home"
  38. export default {
  39. components: {
  40. graphTypeDialog
  41. },
  42. data() {
  43. return {
  44. buttonStr: '',
  45. ruleForm: {
  46. name: "",
  47. type: "",
  48. },
  49. rules: {
  50. name: [
  51. { required: true, message: "请输入名称", trigger: "blur" },
  52. { max: 20, message: "最长为20个字符", trigger: "blur" },
  53. ],
  54. type: [
  55. { required: true, message: "请选择所属类别", trigger: "change" },
  56. ]
  57. },
  58. value: [],
  59. outerVisible: false,
  60. dynamicTags: [],
  61. inputValue: '',
  62. inputVisible: false,
  63. }
  64. },
  65. methods: {
  66. showDialog() {
  67. this.outerVisible = true;
  68. },
  69. // 获取所属类别
  70. getprojectType() {
  71. this.$refs.graphTypeDialog.showDialog()
  72. },
  73. handleClose(tag) {
  74. this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
  75. },
  76. showInput() {
  77. this.inputVisible = true;
  78. this.$nextTick(_ => {
  79. this.$refs.saveTagInput.$refs.input.focus();
  80. });
  81. },
  82. handleInputConfirm() {
  83. const inputValue = this.inputValue;
  84. if (inputValue) {
  85. this.dynamicTags.push(inputValue);
  86. }
  87. this.inputVisible = false;
  88. this.inputValue = '';
  89. },
  90. // 选好所属类别
  91. selectNode(node) {
  92. console.log(node);
  93. this.ruleForm.type = node.data.code;
  94. this.buttonStr = node.data.name
  95. },
  96. submitForm(formName) {
  97. this.$refs[formName].validate((valid) => {
  98. if (valid) {
  99. this.createDraftsGraph()
  100. } else {
  101. console.log("error submit!!");
  102. return false;
  103. }
  104. });
  105. },
  106. resetForm(formName) {
  107. this.dynamicTags = [];
  108. this.buttonStr= '';
  109. this.$refs[formName].resetFields();
  110. this.outerVisible = false
  111. },
  112. // 创建拓扑图接口
  113. createDraftsGraph() {
  114. const pa = {
  115. content: [{
  116. categoryId: this.ruleForm.type,
  117. name: this.ruleForm.name,
  118. label: this.dynamicTags
  119. }]
  120. }
  121. createGraph(pa).then(res => {
  122. if (res.result == "success") {
  123. this.outerVisible = false;
  124. this.$message.success('创建成功');
  125. const routeUrl = this.$router.resolve({
  126. name: 'Editer',
  127. query: {
  128. graphId: res.entityList[0].graphId,
  129. id: res.entityList[0].id,
  130. categoryName: encodeURI(this.buttonStr),
  131. isPub: 0
  132. }
  133. })
  134. window.open(routeUrl.href, "_blank");
  135. } else {
  136. this.$message(res.message)
  137. }
  138. })
  139. },
  140. closeModal() {
  141. this.resetForm('ruleForm');
  142. }
  143. },
  144. }
  145. </script>
  146. <style lang="less" scoped>
  147. /deep/ .createDialog {
  148. /deep/ .el-dialog__header {
  149. border-bottom: 1px solid #f0f1f2ff;
  150. }
  151. .dialog-bodys {
  152. // max-height: 250px;
  153. }
  154. /deep/ .el-dialog__body {
  155. padding: 16px 120px;
  156. height: 270px;
  157. overflow: auto;
  158. }
  159. .el-dialog__footer {
  160. padding: 0 20px 20px;
  161. .el-button {
  162. padding: 0;
  163. width: 80px;
  164. height: 32px;
  165. text-align: center;
  166. line-height: 1;
  167. }
  168. }
  169. .el-form-item {
  170. margin-bottom: 0;
  171. & + .el-form-item {
  172. margin-top: 18px;
  173. }
  174. }
  175. .el-form-item__label {
  176. line-height: 1;
  177. }
  178. .el-tag {
  179. background: #eff0f1;
  180. border-radius: 2px;
  181. color: #1f2429ff;
  182. margin: 0 8px 8px 0;
  183. padding: 5px 6px 5px 8px;
  184. font-size: 14px;
  185. height: 24px;
  186. line-height: 1;
  187. border: none;
  188. &:hover {
  189. border: none;
  190. }
  191. .el-icon-close {
  192. color: #9ca2a9ff;
  193. right: 0;
  194. &:hover {
  195. color: #fff;
  196. background-color: #ccc;
  197. }
  198. }
  199. }
  200. .input-new-tag {
  201. width: 150px;
  202. // input{
  203. // height: 24px;
  204. // }
  205. }
  206. .button-new-tag {
  207. width: 60px;
  208. height: 24px;
  209. margin-bottom: 8px;
  210. padding: 0;
  211. line-height: 1;
  212. border-radius: 2px;
  213. border: 1px dotted #0091ff;
  214. color: #0091ff;
  215. &:hover {
  216. background: #fff;
  217. color: #0091ff;
  218. border: 1px dotted #0091ff;
  219. }
  220. }
  221. .typeButton {
  222. min-width: 122px;
  223. height: 32px;
  224. text-align: center;
  225. line-height: 32px;
  226. border-radius: 4px;
  227. padding: 0;
  228. border: 1px solid #c3c6cb;
  229. }
  230. .tagContainer {
  231. width: 100%;
  232. border-radius: 4px;
  233. border: 1px solid #c3c6cb;
  234. padding: 7px 12px;
  235. line-height: 1;
  236. }
  237. }
  238. </style>