tagDialog.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <template>
  2. <el-dialog title="修改标签" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="tagDialog">
  3. <div>
  4. <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
  5. {{ tag }}
  6. </el-tag>
  7. <el-input
  8. class="input-new-tag"
  9. v-if="inputVisible"
  10. v-model="inputValue"
  11. ref="saveTagInput"
  12. size="small"
  13. @keyup.enter.native="handleInputConfirm"
  14. @blur="handleInputConfirm"
  15. >
  16. </el-input>
  17. <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
  18. </div>
  19. <span slot="footer" class="dialog-footer">
  20. <el-button @click="dialogVisible = false">取 消</el-button>
  21. <el-button type="primary" @click="confirm">确 定</el-button>
  22. </span>
  23. </el-dialog>
  24. </template>
  25. <script>
  26. import { pubPlanerUpdate, planerUpdate } from "@/api/labsl";
  27. export default {
  28. props: {
  29. isPub: {
  30. type: Number,
  31. default: 0,
  32. },
  33. },
  34. data() {
  35. return {
  36. dialogVisible: false,
  37. dynamicTags: [],
  38. inputVisible: false,
  39. inputValue: "",
  40. data: {},
  41. };
  42. },
  43. methods: {
  44. showDialog(data) {
  45. this.dialogVisible = true;
  46. this.dynamicTags = JSON.parse(JSON.stringify(data.label || []));
  47. this.data = data;
  48. },
  49. handleClose(tag) {
  50. this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
  51. },
  52. showInput() {
  53. this.inputVisible = true;
  54. this.$nextTick((_) => {
  55. this.$refs.saveTagInput.$refs.input.focus();
  56. });
  57. },
  58. handleInputConfirm() {
  59. const inputValue = this.inputValue;
  60. if (inputValue) {
  61. this.dynamicTags.push(inputValue);
  62. }
  63. this.inputVisible = false;
  64. this.inputValue = "";
  65. },
  66. // 确认修改
  67. async confirm() {
  68. const pa = {
  69. content: [
  70. {
  71. id: this.data.id,
  72. graphId: this.data.graphId,
  73. label: this.dynamicTags,
  74. },
  75. ],
  76. projection: ["label"],
  77. };
  78. // 已发布
  79. if (this.isPub) {
  80. const res = await pubPlanerUpdate(pa);
  81. this.updateCall(res);
  82. } else { //未发布
  83. const res = await planerUpdate(pa);
  84. this.updateCall(res);
  85. }
  86. },
  87. // 更新成功回调
  88. updateCall(res) {
  89. if (res.result == "success") {
  90. this.dialogVisible = false;
  91. this.$emit("updateSuc");
  92. this.$message.success("更新成功");
  93. } else {
  94. this.$message(res.message);
  95. }
  96. },
  97. },
  98. };
  99. </script>
  100. <style lang="less" scoped>
  101. /deep/ .tagDialog {
  102. /deep/ .el-dialog__header {
  103. border-bottom: 1px solid #f0f1f2ff;
  104. }
  105. /deep/ .el-dialog__body {
  106. max-height: 192px;
  107. overflow: auto;
  108. padding: 20px;
  109. }
  110. .el-dialog__footer {
  111. padding: 14px 20px 20px;
  112. .el-button {
  113. padding: 0;
  114. width: 80px;
  115. height: 32px;
  116. text-align: center;
  117. line-height: 1;
  118. }
  119. }
  120. .el-tag {
  121. background: #eff0f1;
  122. border-radius: 2px;
  123. color: #1f2429ff;
  124. margin: 0 10px 10px 0;
  125. padding: 5px 6px 5px 8px;
  126. font-size: 14px;
  127. height: 24px;
  128. line-height: 1;
  129. border: none;
  130. &:hover {
  131. border: none;
  132. }
  133. .el-icon-close {
  134. color: #9ca2a9ff;
  135. right: 0;
  136. &:hover {
  137. color: #fff;
  138. background-color: #ccc;
  139. }
  140. }
  141. }
  142. .button-new-tag {
  143. height: 24px;
  144. line-height: 30px;
  145. margin-bottom: 8px;
  146. padding: 0 8px;
  147. line-height: 1;
  148. border-radius: 2px;
  149. border: 1px dotted #0091ff;
  150. color: #0091ff;
  151. &:hover {
  152. background: #fff;
  153. color: #0091ff;
  154. border: 1px dotted #0091ff;
  155. }
  156. }
  157. .input-new-tag {
  158. width: 90px;
  159. vertical-align: top;
  160. }
  161. }
  162. </style>