changeFolderName.vue 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div id="changeFolderName">
  3. <el-dialog
  4. title="提示"
  5. :visible.sync="changeFolderNameVisible"
  6. width="30%"
  7. :before-close="closeDiaLog"
  8. >
  9. <div>
  10. <el-form
  11. :model="ruleForm"
  12. :rules="rules"
  13. @submit.native.prevent
  14. ref="changeFolderModelName"
  15. label-width="100px"
  16. class="demo-ruleForm"
  17. >
  18. <el-form-item label="文件夹名称" prop="name">
  19. <el-input v-model="ruleForm.name" @keyup.enter.native="changeFolder" focus></el-input>
  20. </el-form-item>
  21. </el-form>
  22. </div>
  23. <span slot="footer" class="dialog-footer">
  24. <el-button @click="closeDiaLog">取 消</el-button>
  25. <el-button type="primary" @click="changeFolder">确 定</el-button>
  26. </span>
  27. </el-dialog>
  28. </div>
  29. </template>
  30. <script>
  31. import request from "@/api/model/file.js";
  32. import { mapGetters } from "vuex";
  33. export default {
  34. computed: {
  35. ...mapGetters("layout", ["projectId", "userId", "secret"])
  36. },
  37. props: {
  38. changeFolderNameVisible: Boolean,
  39. folderName: String,
  40. currentFolderId: String
  41. },
  42. data() {
  43. return {
  44. ruleForm: {
  45. name: ""
  46. },
  47. rules: {
  48. name: [
  49. { required: true, message: "文件夹名称不能为空!", trigger: "blur" }
  50. ]
  51. }
  52. };
  53. },
  54. methods: {
  55. closeDiaLog() {
  56. this.resetForm();
  57. this.$emit("closeChangeFolderVisible");
  58. },
  59. changeFolder() {
  60. this.$refs["changeFolderModelName"].validate(valid => {
  61. if (valid) {
  62. if (this.folderName == this.ruleForm.name) {
  63. this.$message({ message: "文件夹名字不可与原来相同!",type:'error' });
  64. } else {
  65. request.updateModelName(
  66. { Name: this.ruleForm.name, Id: this.currentFolderId },
  67. () => {
  68. this.$message({
  69. message: "模型文件夹创建成功",
  70. type: "success"
  71. });
  72. // 重新获取文件夹列表
  73. this.$emit("finishChangeFolderName");
  74. this.closeDiaLog();
  75. }
  76. );
  77. }
  78. } else {
  79. return false;
  80. }
  81. });
  82. },
  83. resetForm() {
  84. this.$refs["changeFolderModelName"].resetFields();
  85. },
  86. },
  87. watch: {
  88. folderName: function(val, oldVal) {
  89. this.ruleForm.name = val;
  90. }
  91. }
  92. };
  93. </script>
  94. <style scoped >
  95. .dialog-footer {
  96. }
  97. </style>