replaceModelDialog.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!-- 替换模型弹窗 -->
  2. <template>
  3. <!-- 新增楼层 -->
  4. <div id="replaceModel">
  5. <el-dialog
  6. title="替换模型"
  7. :visible.sync="repliceModelVisible"
  8. width="650px"
  9. :before-close="handleClose"
  10. >
  11. <el-form ref="form" :model="form" label-width="170px">
  12. <el-form-item label="模型文件:">
  13. <el-upload
  14. class="upload-demo"
  15. ref="upload"
  16. action="https://jsonplaceholder.typicode.com/posts/"
  17. :on-preview="handlePreview"
  18. :on-remove="handleRemove"
  19. :file-list="fileList"
  20. :auto-upload="false"
  21. :on-change="onChangeUpLoad"
  22. :limit="1"
  23. >
  24. <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  25. </el-upload>
  26. </el-form-item>
  27. <el-form-item label="选择模型文件替换原因:">
  28. <ul>
  29. <li>
  30. <el-radio :disabled="isChioce" v-model="form.ReplaceReason" label="0">之前模型画错要修改</el-radio>
  31. </li>
  32. <li>
  33. <el-radio :disabled="isChioce" v-model="form.ReplaceReason" label="1">因工程改造,更新模型文件</el-radio>
  34. </li>
  35. </ul>
  36. </el-form-item>
  37. <el-form-item>
  38. <div class="dateTime" v-show="form.ReplaceReason == '1'">
  39. <p>工程改造竣工时间:</p>
  40. <el-date-picker v-model="form.finishTime" type="date" placeholder="选择日期"></el-date-picker>
  41. </div>
  42. </el-form-item>
  43. </el-form>
  44. <span slot="footer" class="dialog-footer">
  45. <el-button type="primary" @click="onSubmit">确认</el-button>
  46. <el-button @click="handleClose">取消</el-button>
  47. </span>
  48. </el-dialog>
  49. </div>
  50. </template>
  51. <script>
  52. import { mapGetters } from "vuex";
  53. export default {
  54. props: {
  55. repliceModelVisible: Boolean,
  56. replaceModelItem: Object
  57. },
  58. data() {
  59. return {
  60. form: {
  61. file: null, //上传文件
  62. ReplaceReason: "0",
  63. finishTime: ""
  64. },
  65. isChioce: true, //是否可以选择替换原因
  66. fileList: []
  67. };
  68. },
  69. computed: {
  70. ...mapGetters("layout", ["uploaderList"])
  71. },
  72. methods: {
  73. onSubmit() {
  74. if (this.form.file == null) {
  75. this.$message.error("模型文件不能为空!");
  76. } else {
  77. this.$emit("updataModel", {
  78. file: this.form.file,
  79. replaceModelItem: this.replaceModelItem
  80. });
  81. this.handleClose();
  82. }
  83. },
  84. // /上传到服务器/
  85. submitUpload() {
  86. this.$refs.upload.submit();
  87. },
  88. handleClose() {
  89. this.$emit("closeReplaceModelDia");
  90. },
  91. handleRemove(file, fileList) {
  92. this.form.file = null;
  93. this.fileList = []
  94. },
  95. handlePreview(file) {
  96. console.log(file);
  97. },
  98. handleChange() {},
  99. // 获取上传文件
  100. onChangeUpLoad(file, fileList) {
  101. if (fileList.length) {
  102. this.form.file = file;
  103. }
  104. }
  105. },
  106. watch: {
  107. repliceModelVisible(val) {
  108. if (val) {
  109. this.handleRemove();
  110. }
  111. }
  112. }
  113. };
  114. </script>
  115. <style lang="less">
  116. #addFloorDialog {
  117. .floorModle {
  118. display: flex;
  119. justify-content: left;
  120. }
  121. .dialog-footer {
  122. text-align: right;
  123. }
  124. }
  125. </style>