changeFolderName.vue 2.3 KB

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