rename.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <el-dialog title="重命名" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="renameDialog">
  3. <div>
  4. <el-input v-model="input" placeholder="请输入名称" size="small"></el-input>
  5. </div>
  6. <span slot="footer" class="dialog-footer">
  7. <el-button @click="dialogVisible = false">取 消</el-button>
  8. <el-button type="primary" @click="confirm">确 定</el-button>
  9. </span>
  10. </el-dialog>
  11. </template>
  12. <script>
  13. import { updateDraftsGraph, updatePubGraph } from "@/api/home";
  14. export default {
  15. props: {
  16. isPub: {
  17. type: Number,
  18. default: 0,
  19. },
  20. },
  21. data() {
  22. return {
  23. dialogVisible: false,
  24. input: "",
  25. data: {},
  26. };
  27. },
  28. methods: {
  29. showDialog(data) {
  30. console.table(data);
  31. this.dialogVisible = true;
  32. this.input = data.name;
  33. this.data = data;
  34. },
  35. // 确认修改
  36. confirm() {
  37. const newName = this.input.trim();
  38. if (!newName) {
  39. return;
  40. }
  41. const pa = {
  42. content: [
  43. {
  44. id: this.data.id,
  45. graphId: this.data.graphId,
  46. name: newName,
  47. },
  48. ],
  49. projection: ["name"],
  50. };
  51. if (this.isPub) {
  52. // 已发布
  53. updatePubGraph(pa).then((res) => {
  54. this.updateCall(res);
  55. });
  56. } else {
  57. // 未发布
  58. updateDraftsGraph(pa).then((res) => {
  59. this.updateCall(res);
  60. });
  61. }
  62. },
  63. // 更新成功回调
  64. updateCall(res) {
  65. if (res.result == "success") {
  66. this.dialogVisible = false;
  67. this.$emit("updateSuc");
  68. this.$message.success("更新成功");
  69. } else {
  70. this.$message(res.message);
  71. }
  72. },
  73. },
  74. };
  75. </script>
  76. <style lang="less">
  77. .renameDialog {
  78. /deep/ .el-dialog__header {
  79. border-bottom: 1px solid #f0f1f2ff;
  80. }
  81. /deep/ .el-dialog__body {
  82. padding: 16px 60px;
  83. }
  84. .el-dialog__footer {
  85. padding: 14px 20px 20px;
  86. .el-button {
  87. padding: 0;
  88. width: 80px;
  89. height: 32px;
  90. text-align: center;
  91. line-height: 1;
  92. }
  93. }
  94. }
  95. </style>