eln_web/src/views/business/study/comp/syff/Xz.vue

G<template>
  <div>
    <!-- 新增试验间弹窗 -->
    <el-dialog :title="$t('page.business.study.studyMethod.scff')" :visible.sync="open" width="400px" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('page.business.study.studyMethod.mc')" prop="ffmc">
              <el-input type="text" v-model="form.ffmc" maxlength="20"
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- 方法 -->
          <el-col :span="24">
            <el-form-item :label="$t('page.business.study.studyMethod.ff')" prop="fileUlr">
              <el-upload class="upload-demo" :before-upload="handleBeforeUpload" :on-error="handleUploadError"
                :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="true" :headers="headers"
                :on-remove="handleRemove" :action="uploadFileUrl" accept=".pdf" :limit="1" :file-list="fileList">
                <el-button size="small" type="primary">{{ $t('page.business.study.studyMethod.scwj') }}</el-button>
                <div slot="tip" class="el-upload__tip">{{ $t('page.business.study.studyMethod.wjm') }}</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
              <el-input type="text" :value="form.qmyy" maxlength="50" disabled
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('form.remark')" prop="qmbz">
              <el-input type="textarea" v-model="form.qmbz" :rows="2" maxlength="500"
                :placeholder="$t('form.placeholderInput')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('form.signer')">
              <el-input type="text" v-model="nickName" maxlength="50" disabled
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('form.password')" prop="qmrmm">
              <el-input type="password" v-model="form.qmrmm" maxlength="20"
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">{{ $t('form.confirm') }}</el-button>
        <el-button @click="cancel">{{ $t('form.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { studyMethod_save } from "@/api/business/study/studyMethod"
import { mapGetters } from 'vuex'
import { getToken } from "@/utils/auth"

export default {
  name: "XzSyj",
  components: {},
  data() {
    return {
      open: false,
      form: {
        mc: '',
        fileUrl: '',
        fileName: ''
      },
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
      rules: {
        ffmc: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        fileUrl: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        qmrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
      }
    }
  },
  computed: {
    ...mapGetters([
      'nickName','name'
    ]),
  },
  created() {
  },
  methods: {
    cancel() {
      this.open = false
    },
    reset() {
      this.form = {
        ffmc: null,
        fileUrl: '',
        fileName: '',
        qmrmm: null,
        kssyyl: '',
        qmyy: '上传文件',
        bjbz: ''
      }
      this.fileList = []
      this.resetForm("form")
    },
    show(study) {
      this.reset()
      this.form.studyId = study.id
      this.form.studySubjectId = study.studySubjectId
      this.open = true
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          studyMethod_save(this.form).then(response => {
            this.open = false
            this.$emit('callback')
          })
        }
      })
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      let fileType = ['pdf']
      // 校检文件类型
      if (fileType) {
        const fileName = file.name.split('.')
        const fileExt = fileName[fileName.length - 1]
        const isTypeOk = fileType.indexOf(fileExt) >= 0
        if (!isTypeOk) {
          this.$modal.msgError('文件格式不正确，请上传pdf格式文件!')
          return false
        }
      }
      // 校检文件名是否包含特殊字符
      if (file.name.includes(',')) {
        this.$modal.msgError('文件名不正确，不能包含英文逗号!')
        return false
      }
      this.$modal.loading("正在上传文件，请稍候...")
      this.number++
      return true
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError('上传文件数量不能超过1个!')
    },
    // 上传失败
    handleUploadError(err) {
      this.$modal.msgError("上传文件失败，请重试")
      this.$modal.closeLoading()
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      console.log(res)
      if (res.code === 200) {
        this.form.fileUrl = res.data.url
        this.form.fileName = res.data.name
        this.fileList.push({ name: res.data.name, url: res.data.url })
        this.$modal.closeLoading()
      } else {
        this.number--
        this.$modal.closeLoading()
        this.$modal.msgError(res.msg)
        this.$refs.fileUpload.handleRemove(file)
      }
    },
    handleRemove() {
      this.form.fileUrl = ''
      this.form.fileName = ''
      this.fileList = []
    }
  }
}
</script>