file_safe_admin/src/pages/fileManagement/edit.vue

<template>
  <el-dialog
    :title="refList.title"
    :visible.sync="dialogVisible"
    width="33%"
    :before-close="handleClose"
     v-loading.fullscreen.lock="fullscreenLoading"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-form-item label="分类名称：" prop="typeId">
        <el-select
          placeholder="请选择"
          v-model="form.typeId"
          @visible-change="visbleChange"
          @change="classifyChange"
        >
          <el-option
            v-for="(item,index) in classifyList"
            :key="index"
            :label="item.name"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文件名称：" prop="name">
        <el-input placeholder="请输入" v-model.trim="form.name"></el-input>
      </el-form-item>
      <el-form-item label="上传文件：" prop="docUrl">
        <div>
          <el-upload
            class="upload-demo"
            action
            :http-request="api_import"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :before-upload="beforeAvatarUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">仅支持pdf文件</div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item required>
        <template slot="label" class="status"
          ><span>状&#8195;&emsp;态</span>：</template
        >
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button
        size="small"
        style="margin-left: 60px"
        type="primary"
        @click="addList('form')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import * as api from '@/api/api'
export default {
  data() {
    return {
      fullscreenLoading:false,
      dialogVisible: false,
      form: {
        docUrl: '',
        id: '',
        linkUrl: '',
        name: '',
        status: 0,
        typeId: ''
      },
      refList: {},
      fileList: [],
      classifyList: [],
      rules:{
        typeId:[{required:true,trigger:'change',message:'请选择分类名称'}],
        name:[{required:true,trigger:'blur',message:'请输入文件名称'}],
        docUrl:[{required:true,trigger:'click',message:'请上传文件'}]
      }
    }
  },
  methods: {
    /**
     * @method 关闭弹框
     * **/
    handleClose() {
      this.dialogVisible = false
      this.$parent.search()
      this.form = {
        docUrl: '',
        id: '',
        linkUrl: '',
        name: '',
        status: 0,
        typeId: '',
        fileSize: ''
      }
      this.fileList = []
      this.$refs['form'].resetFields()
    },
    /**
     * @method 打开文件弹框
     * **/
    openClose(val) {
      if (val) {
        this.refList = val
        if (val.id) {
          this.visbleChange(true)
          this.details()
        }
      }
      this.dialogVisible = true
    },
    /**
     * @method 详情
     * **/
    details() {
      api.GET('/doc/getDetail', { id: this.refList.id }).then(data => {
        if (data.code == 0) {
          this.form = data.data
          this.fileList = [{name:this.form.name,url:this.form.docUrl}]
        }
      })
    },
    /**
     * @method 分类下拉列表
     * **/
    visbleChange(val) {
      if (val) {
        api.POST('/doc/type/dropList').then(data => {
          if (data.code == 0) {
            this.classifyList = data.data
          }
        })
      }
    },
    /**
     * @method 分类选择
     * **/
    classifyChange(val) {
      this.classifyList.find(item => {
        if (item.typeId == val) {
          this.form.linkUrl = item.linkUrl
        }
      })
    },
    /**
     * @method 上传
     * **/
    api_import(file) {
      const files = {
        file: file.file
      }
      api.IMPORT('/api/file/local/upload', files).then(data => {
        if (data.code == 0) {
          data.data.name = data.data.fileName
          this.fileList = [data.data]
          this.form.docUrl = data.data.url
          this.form.fileSize = data.data.size
          this.$message.success('上传成功')
        }
      }).catch(()=>{
        this.fileList = []
      })
    },
    /**
     * @method 文件上传限制
     * **/
    handleExceed(files, fileList) {
      if (fileList.length == 1) {
        this.$message.warning('只能上传单个文件')
      }
    },
    /**
     * @method 上传成功
     * **/
    handleSuccess(file,fileList) {
      console.log(file,fileList)
    },
    /**
     * @method 文件删除
     * **/
    handleRemove(files, fileList) {
      this.fileList = fileList
      this.form.docUrl = ''
      this.form.fileSize = ''
    },
    /**
     * @method 上传限制
     * **/
    beforeAvatarUpload(file) {
      const ispaf = file.type === 'application/pdf'

      if (!ispaf) {
        this.$message.error('上传文件只能是 PDF 格式!')
      }
      return ispaf
    },
    /**
     * @method 提交确定
     * **/
    addList(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true
          let code = {
            docUrl: this.form.docUrl,
            linkUrl: this.form.linkUrl,
            name: this.form.name,
            status: this.form.status,
            typeId: this.form.typeId,
            fileSize: this.form.fileSize
          }
          this.refList.show ? this.addfile(code) : this.editfile(code)
        }
      })
    },
    /**
     * @method 新增文件
     * **/
    addfile(val) {
      api.POST('/doc/addDoc', val).then(data => {
        if (data.code == 0) {
          this.$message.success(data.message)
          this.handleClose()
          this.fullscreenLoading = false
        }
      }).catch(()=>{
        this.fullscreenLoading = false
      })
    },
    /**
     * @method 编辑文件
     * **/
    editfile(val) {
      val.id = this.form.id
      api.PUT('/doc/updateDoc',val).then(data => {
        if (data.code == 0) {
          this.$message.success(data.message)
          this.handleClose()
          this.fullscreenLoading = false
        }
      }).catch(()=>{
        this.fullscreenLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>