ibms/src/components/model/file/replaceModelDialog.vue

 <!-- 替换模型弹窗 -->

<template>
  <!-- 新增楼层 -->
  <div id="replaceModel">
    <el-dialog
      title="替换模型"
      :visible.sync="repliceModelVisible"
      width="650px"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="170px">
        <el-form-item label="模型文件:">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="/modelapi/model-file/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
            :on-change="onChangeUpLoad"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="revit版本:">
          <el-select v-model="form.revitVersion" placeholder="请选择">
            <el-option
              v-for="item in revitVersionList"
              :key="`revit-${item.value}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择模型文件替换原因：">
          <ul>
            <li>
              <el-radio :disabled="isChioce" v-model="form.ReplaceReason" label="0">之前模型画错要修改</el-radio>
            </li>
            <li>
              <el-radio :disabled="isChioce" v-model="form.ReplaceReason" label="1">因工程改造,更新模型文件</el-radio>
            </li>
          </ul>
        </el-form-item>
        <el-form-item>
          <div class="dateTime" v-show="form.ReplaceReason == '1'">
            <p>工程改造竣工时间:</p>
            <el-date-picker v-model="form.finishTime" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: {
    repliceModelVisible: Boolean,
    replaceModelItem: Object
  },
  data() {
    return {
      form: {
        // revitVersion: this.replaceModelItem.RevitVersion?this.replaceModelItem.RevitVersion:"2017", //revit默认版本
        revitVersion: "2017", //revit默认版本
        file: null, //上传文件
        ReplaceReason: "0",
        finishTime: ""
      },
      revitVersionList: [
        {
          value: "2016",
          label: "2016"
        },
        {
          value: "2017",
          label: "2017"
        },
        {
          value: "2018",
          label: "2018"
        }
      ],
      isChioce: true, //是否可以选择替换原因
      fileList: []
    };
  },
  computed: {
    ...mapGetters("layout", ["uploaderList"])
  },
  methods: {
    onSubmit() {
      if (this.form.file == null) {
        this.$message.error("模型文件不能为空！");
      } else if (!this.form.revitVersion) {
        this.$message.error("revit版本不能为空！");
      } else {
        this.$emit("updataModel", {
          file: this.form.file,
          revitVersion: this.form.revitVersion,
          replaceModelItem: this.replaceModelItem
        });
        this.handleClose();
      }
    },
    handleClose() {
      this.$emit("closeReplaceModelDia");
    },
    handleRemove(file, fileList) {
      this.form.file = null;
      this.fileList = []
    },
    handlePreview(file) {
      console.log(file);
    },
    handleChange() {},
    // 获取上传文件
    onChangeUpLoad(file, fileList) {
      if (fileList.length) {
        this.form.file = file;
      }
    }
  },
  watch: {
    repliceModelVisible(val) {
      if (val) {
        this.handleRemove();
      }
    }
  }
};
</script>
<style lang="less">
#addFloorDialog {
  .floorModle {
    display: flex;
    justify-content: left;
  }
  .dialog-footer {
    text-align: right;
  }
}
</style>