replaceModelDialog.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <!-- 替换模型弹窗 -->
  2. <template>
  3. <!-- 新增楼层 -->
  4. <div id="replaceModel">
  5. <el-dialog
  6. title="替换模型"
  7. :visible.sync="repliceModelVisible"
  8. width="30%"
  9. :before-close="handleClose"
  10. >
  11. <el-form ref="form" :model="form" label-width="100px">
  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-item>
  44. <el-button type="primary" @click="onSubmit">确认</el-button>
  45. <el-button @click="handleClose">取消</el-button>
  46. </el-form-item>
  47. </el-form>
  48. </el-dialog>
  49. </div>
  50. </template>
  51. <script>
  52. export default {
  53. props: {
  54. repliceModelVisible: Boolean,
  55. replaceModelItem: Object
  56. },
  57. data() {
  58. return {
  59. form: {
  60. file: null, //上传文件
  61. ReplaceReason: "0",
  62. finishTime: ""
  63. },
  64. isChioce: true, //是否可以选择替换原因
  65. fileList: []
  66. };
  67. },
  68. methods: {
  69. onSubmit() {
  70. if (this.form.file == null) {
  71. this.$message.error("模型文件不能为空!");
  72. } else {
  73. this.$emit("updataModel", {
  74. Form: this.form,
  75. replaceModelItem: this.replaceModelItem
  76. });
  77. this.handleClose();
  78. }
  79. },
  80. // /上传到服务器/
  81. submitUpload() {
  82. this.$refs.upload.submit();
  83. },
  84. handleClose() {
  85. this.$emit("closeReplaceModelDia");
  86. },
  87. handleRemove(file, fileList) {
  88. this.form.file = null;
  89. this.fileList = []
  90. },
  91. handlePreview(file) {
  92. console.log(file);
  93. },
  94. handleChange() {},
  95. // 获取上传文件
  96. onChangeUpLoad(file, fileList) {
  97. if (fileList.length) {
  98. this.form.file = file;
  99. }
  100. }
  101. },
  102. watch: {
  103. repliceModelVisible(val) {
  104. if (val) {
  105. this.handleRemove();
  106. }
  107. }
  108. }
  109. };
  110. </script>
  111. <style lang="less">
  112. #addFloorDialog {
  113. .floorModle {
  114. display: flex;
  115. justify-content: left;
  116. }
  117. }
  118. </style>