shuili-vue/src/views/sluice/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"
          :showFileList="false"
          accept=".PDF"
          :limit="1"
        >
          <el-button type="primary">{{
            detailsData.superviseCheckWay ? "重新上传" : "上传文件"
          }}</el-button>
        </el-upload>
        <div v-else>&nbsp;</div>
        <span v-if="editName && $route.query.mode === 'edit'">
          <el-input
            class="input"
            v-model="detailsData.name"
            :maxlength="50"
          ></el-input>
          <i
            class="el-icon-check cursor-pointer ml-4 font-16"
            style="color: #409eff"
            @click="handleSaveName"
          ></i>
        </span>
        <span v-else
          >{{ detailsData.name }}
          <i
            v-if="$route.query.mode === 'edit'"
            class="el-icon-edit cursor-pointer ml-4 font-16"
            style="color: #409eff"
            @click="editName = !editName"
          ></i
        ></span>
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
      <div class="pdf-preview">
        <object
          v-if="detailsData.superviseCheckWay"
          class="pdf-box"
          :data="detailsData.superviseCheckWay"
          type="application/pdf"
        ></object>
        <div v-else style="color: #333">暂无文件，请上传</div>
      </div>
    </div>
  </div>
</template>
<script>
import { uploadFileData } from "@/api/system/upload";
import { getSuperviseWayDetails, postSuperviseWayData } from "@/api/sluice";

export default {
  data() {
    return {
      detailsData: {
        superviseCheckWay: "",
        status: "",
        name: "",
      },
      editName: false,
    };
  },
  created() {
    if (this.$route.query.id) {
      this.initData();
    }
  },
  methods: {
    initData() {
      getSuperviseWayDetails(this.$route.query.id).then((res) => {
        if (res.data) {
          this.$set(this.detailsData, "name", res.data.name);
          this.$set(
            this.detailsData,
            "superviseCheckWay",
            res.data.superviseCheckWay
          );
          this.$set(this.detailsData, "status", res.data.status);
        }
      });
    },
    handleSaveName() {
      if (!this.detailsData.name) {
        this.$message.warning("请输入名称");
        return;
      }
      postSuperviseWayData({
        id: this.$route.query.id || null,
        name: this.detailsData.name,
        superviseCheckWay: this.detailsData.superviseCheckWay,
        status: this.detailsData.status ? this.detailsData.status : null,
      })
        .then((res) => {
          this.editName = false;
          this.$message.success("修改成功");
        })
        .catch(() => {
          this.$message.error("修改失败");
        });
    },
    // 上传前
    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) {
          let data = {
            id: this.$route.query.id || null,
            name: file.name.split(".")[0],
            superviseCheckWay: res.url,
            status: this.detailsData.status ? this.detailsData.status : null,
          };
          const res2 = await postSuperviseWayData(data);
          if (res2) {
            this.detailsData.superviseCheckWay = res.url;
            this.detailsData.name = file.name.split(".")[0];
            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>