mts / MTS-UI · Files

<template>
  <a-modal
    :title="'附件上传'"
    :width="800"
    :visible="batchVisible"
    :confirmLoading="confirmLoading"
    @ok="handleBatchOk"
    @cancel="handleBatchCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 85%;overflow-y: hidden">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <p style="color: red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:只允许上传pdf文件</p>
        <pdf-preview ref="pdfPreview"></pdf-preview>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="区域电气图纸">
          <input v-if="areaElectricalDrawingsUrl==''" id="upfile" type="file" accept="application/pdf" class="add_upload_file" @change="fileUpload('1')" />
          <a v-if="areaElectricalDrawingsUrl!=''" @click="pdfPreview('1')">{{this.title}}</a>
          <a-popconfirm v-if="areaElectricalDrawingsUrl!=''"  title="确定删除吗?" @confirm="() => deletePdf('1')">
            <a-button type="primary" @click="query" icon="delete">删除</a-button>
          </a-popconfirm>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="使用说明书">
          <input v-if="usersManualUrl==''" id="upfile2" type="file" accept="application/pdf" class="add_upload_file" @change="fileUpload('2')" />
          <a v-if="usersManualUrl!=''" @click="pdfPreview('2')">{{this.title2}}</a>
          <a-popconfirm v-if="usersManualUrl!=''"  title="确定删除吗?" @confirm="() => deletePdf('2')">
            <a-button type="primary" @click="query" icon="delete">删除</a-button>
          </a-popconfirm>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="维修与保养手册">
          <input v-if="maintenanceManualUrl==''"  id="upfile3" type="file" accept="application/pdf" class="add_upload_file" @change="fileUpload('3')" />
          <a v-if="maintenanceManualUrl!=''" @click="pdfPreview('3')">{{this.title3}}</a>
          <a-popconfirm v-if="maintenanceManualUrl!=''"  title="确定删除吗?" @confirm="() => deletePdf('3')">
            <a-button type="primary" @click="query" icon="delete">删除</a-button>
          </a-popconfirm>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getEleInfoByEle,deleteFile } from '../../../api/api'
import PdfPreview from "./PdfPreview";
import ARow from "ant-design-vue/lib/grid/Row";
export default {
  name: 'ElecticalFileModal',
  components: {
    PdfPreview
  },
  data() {
    return {
      code: '',
      workno:'',
      uuid:'',
      electricalNo:'',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
      batchVisible: false,
      form: this.$form.createForm(this),
      confirmLoading: false,
      statusList:[],
      status:'',
      title:'',
      title2: '',
      title3: '',
      id:'',
      id1:'',
      id2:'',
      id3:'',
      usersManualUrl:'',
      maintenanceManualUrl:'',
      areaElectricalDrawingsUrl:'',
    }
  },
  created() {
    this.loadBaseData();
  },
  methods: {
    pdfPreview(type){
      var url='http://mts.huahengweld.com/jeecg-boot/generic/web/viewer.html?file=';
      if (type=='1'){
        url=url+this.areaElectricalDrawingsUrl
      }else if(type=='2'){
        url=url+this.usersManualUrl
      }else{
        url=url+this.maintenanceManualUrl
      }
      this.$refs.pdfPreview.previewFiles(url)
    },
    handleBatchCancel() {
      this.ids = ''
      this.batchVisible = false
    },
    deletePdf(type){
      if (type=='1'){
        this.id=this.id1
      }else if(type=='2'){
        this.id=this.id2
      }else{
        this.id=this.id3
      }
      let params3 = {
        'id':this.id,
        'type':type
      }
      deleteFile(params3).then(res => {
        if (res.success) {
          if (type=='1'){
            this.areaElectricalDrawingsUrl=''
          }else if(type=='2'){
            this.usersManualUrl=''
          }else{
            this.maintenanceManualUrl=''
          }
          this.$message.success("附件删除成功!")
        }
      })
    },
    fileUpload(type){
      let that = this;
      let file;
      if (type=='1'){
        file = document.getElementById('upfile');
      }
      else if (type=='2'){
        file = document.getElementById('upfile2');
      }else{
        file = document.getElementById('upfile3');
      }

      let fileName = file.value;
      let files = file.files;
      if(fileName == null || fileName==""){
        this.$message.error("请选择文件");
      }else{
        let fileType = fileName.substr(fileName.length-4,fileName.length);
        //if(fileType == ".jpg" || fileType == ".png"){
          if (files[0]) {
            let formData = new window.FormData()
            formData.append('file', files[0])
            formData.append('mod', 5)
            formData.append('opt', 2)
            formData.append('workno', this.workno)
            formData.append('uuid', this.uuid)
            formData.append('code', this.code)
            formData.append('type', type)
            let data = {
              mod: 5,
              opt: 2,
              formData
            };
            this.$message.info("上传中!")
            fetch('http://127.0.0.1:8080/jeecg-boot/sys/upload/mmsEleMinio', {
              method: 'POST',
              body: formData,
              headers: {
                 Auth: 'token',
                'Access-Control-Allow-Origin': '*',
                Authorization: 'Bearer',
              },
            }).then((res) => {
              return res.json()
            }).then((res) => {
              if (res.code == 0) {
                let reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = function (e) {
                  console.log("aaa:"+this.result)
                  that.imgs.push({id: res.message, base64: this.result})
                  console.log(that.imgs)
                }
                this.$message.success("上传成功!")
              } else {
                this.$message.error("上传失败!")
              }
            })

          } else {
            this.$message.error("请选择要上传的图片");
          }
        // }else{
        //   this.$message.error("上传文件类型错误！");
       //  }
      }
    },
    edit (code,workno,uuid,onlyCode) {
      this.code = code
      this.workno = workno
      this.uuid = uuid
      this.form.resetFields();
      this.batchVisible = true;

      let params2 = {
        'workno':this.workno,
        'uuid':this.uuid,
        'code':this.code
      }
      getEleInfoByEle(params2).then(res => {
        if (res.success) {
          if (res.result.areaElectricalDrawings!=''&&res.result.areaElectricalDrawings!=undefined){
            var arr=res.result.areaElectricalDrawings.split(',');
            this.title=arr[0];
            this.areaElectricalDrawingsUrl=arr[1]
            this.id1=arr[2]
          }
          if (res.result.usersManual!=''&&res.result.usersManual!=undefined){
            var arr2=res.result.usersManual.split(',');
            this.title2=arr2[0];
            this.usersManualUrl=arr2[1]
            this.id2=arr2[2]
          }
          if (res.result.maintenanceManual!=''&&res.result.maintenanceManual!=undefined){
            var arr3=res.result.maintenanceManual.split(',');
            this.title3=arr3[0];
            this.maintenanceManualUrl=arr3[1]
            this.id3=arr3[2]
          }
        }
      })
    },
  }
}
</script>

<style scoped>

</style>