shuili-vue/src/views/dike/runManage/superVisionInspetion/methodsManage/details.vue

<template>
  <div class="body slider-right">
    <div class="top-title">基础信息管理</div>
    <div class="method-details-page">
      <div class="flex justify-between items-center">
        <el-upload
          v-if="$route.query.mode != 'preview'"
          action="#"
          class="avatar-uploader"
          :http-request="handleUpload"
          :auto-upload="true"
          :before-upload="beforeUpload"
          v-model:file-list="fileList"
          :showFileList="false"
          accept=".PDF"
          :maxLength="1"
        >
          <el-button type="primary">{{
            fileUrl ? "重新上传" : "上传文件"
          }}</el-button>
        </el-upload>
        <div v-else>&nbsp;</div>
        <span v-if="editTitle && $route.query.mode === 'edit'">
          <el-input class="input" v-model="title"></el-input>
          <i
            class="el-icon-check cursor-pointer ml-4 font-16"
            style="color: #409eff"
            @click="editTitle = !editTitle"
          ></i>
        </span>
        <span v-else
          >{{ title }}
          <i
            v-if="$route.query.mode === 'edit'"
            class="el-icon-edit cursor-pointer ml-4 font-16"
            style="color: #409eff"
            @click="editTitle = !editTitle"
          ></i
        ></span>
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
      <div class="pdf-preview">
        <object
          v-if="fileUrl"
          class="pdf-box"
          :data="fileUrl"
          type="application/pdf"
        ></object>
        <div v-else style="color: #333">暂无文件，请上传</div>
      </div>
    </div>
  </div>
</template>
<script>
import { uploadFileData } from "@/api/system/upload";
import { addSupervisionMethods, getSupervisionMethodDetails } from "@/api/dike";

export default {
  data() {
    return {
      fileList: [],
      fileUrl: "", //http://gateway.product.dev.com:30115/data-platform-ui/objs/http://minio:9000/data-platform-protocol-model/20240229/11b754af7aef4dc6bff17d5e0bcd919e.pdf
      editTitle: false,
      title: "标题",
    };
  },
  created() {
    if (this.$route.query.id) {
      this.initData();
    }
  },
  methods: {
    initData() {
      getSupervisionMethodDetails(this.$route.query.id).then((res) => {
        this.title = res.name;
        this.fileUrl = res.superviseCheckWay;
      });
    },
    // 上传前
    beforeUpload(e) {
      console.log("上传前e >>>>>  ", e);
      if (e.type.indexOf("pdf") < 0) {
        this.$message.warning("只允许上传pdf");
        return false;
      }
      return true;
    },
    // 文件上传
    async handleUpload(e) {
      try {
        const { file } = e;
        let formData = new FormData();
        formData.append("file", file);
        const res = await uploadFileData(formData);
        if (res?.url) {
          const res2 = await addSupervisionMethods({
            name: file.name,
            url: res.url,
          });
          if (res2) {
            this.fileUrl = res.url;
            this.$message.success("新增成功");
          }
        } else {
          this.$message.error("新增失败");
        }
      } catch (error) {
        this.$message.error("新增失败");
      }
    },
  },
};
</script>
<style scoped lang="scss">
.body {
  width: 100%;
  min-height: calc(100vh - 56px);
  padding-left: 24px;

  .top-title {
    height: 40px;
    background-color: white;
    display: flex;
    padding-left: 16px;
    align-items: center;
    font-weight: 600;
  }
  .method-details-page {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    height: calc(100% - 56px);
    .pdf-preview {
      height: calc(100% - 50px);
      margin-top: 20px;
      .pdf-box {
        width: 100%;
        height: 100%;
      }
    }
  }
  .input {
    width: 200px;
  }
}
</style>