addFolder.vue 2.2 KB

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