Warehouse_management_ui/src/views/Warehousing/components/upLoad.vue

<template>
  <div>
    <div
      class="dialogTableTitle flex a-center jlr"
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
      "
    >
      <div>
        <el-button
          size="small"
          type="primary"
          :disabled="browseStatus"
          @click.prevent="addRelevt()"
          >新行
        </el-button>
      </div>
    </div>
    <el-table
      :data="relevantAttachments"
      ref="table"
      tooltip-effect="dark"
      stripe
      style="width: 100%"
      height="150"
    >
      <el-table-column label="序号" type="index" width="80"> </el-table-column>
      <el-table-column
        prop="fName"
        header-align="center"
        align="center"
        label="附件名称"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fName"
            :disabled="browseStatus"
            placeholder="附件名称"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="createBy"
        header-align="center"
        align="center"
        label="上传人"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.createBy"
            disabled
            placeholder="上传人"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="上传时间"
      >
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.createTime"
            type="date"
            disabled
            placeholder="上传时间"
            format="yyyy-MM-dd HH:mm"
            value-format="timestamp"
          ></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
        prop="fUrl"
        header-align="center"
        align="center"
        label="上传附件"
      >
        <template slot-scope="scope">
          <div style="display: flex; justify-content: center">
            <el-upload
              class="upload-demo"
              :action="uploadImgUrl"
              :on-success="
                (res, file) => {
                  handleSucces(scope, res, file);
                }
              "
              :headers="headers"
              :disabled="browseStatus"
              :show-file-list="false"
              :limit="1"
            >
              <el-button size="small" type="text" :disabled="browseStatus"
                >点击上传</el-button
              >
            </el-upload>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        width="130PX"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="checkFile(scope,0)"
          >查看</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, relevantAttachments)"
            :disabled="browseStatus"
            size="small"
            type="text"
            >删除
          </el-button>
          <el-button size="small" type="text" @click="checkFile(scope,1)"
          >下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        width="80%"
        title="附件"
        :visible.sync="innerVisible"
        append-to-body>
      <div style="width: 50%;height: 50%;margin: 0 auto">
        <img :src="url" alt="" style="width: 100%;height: 100%;">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  props: {
    relevantAttachments: {
      type: Array,
      default: [],
    },
    createBy: {
      type: String,
      default: null,
    },
    browseStatus:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      innerVisible:false,
      url:'',
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
    };
  },
  methods: {
    // 新增附件上传
    addRelevt() {
      this.relevantAttachments.push({
        fUrl: null,
        fName: null,
        createBy: this.createBy,
        createTime: Date.parse(new Date()),
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //附件上传
    handleSucces(scope, res, file) {
      this.relevantAttachments[scope.$index].fName = res.fileName;
      this.relevantAttachments[scope.$index].fUrl = res.url;
      if (!this.relevantAttachments[scope.$index].fUrl) {
        this.$message.error("上传失败");
      } else {
        this.$message.success("上传成功");
      }
    },
    //附件查看
    checkFile(scope,type) {
      if (this.relevantAttachments[scope.$index].fUrl) {
        if(type === 0){
          if (scope.row.fName.substring(scope.row.fName.lastIndexOf(".")) === '.jpg'||scope.row.fName.substring(scope.row.fName.lastIndexOf(".")) === '.png'||scope.row.fName.substring(scope.row.fName.lastIndexOf(".")) === '.JPG'||scope.row.fName.substring(scope.row.fName.lastIndexOf(".")) === '.PNG'){
            this.innerVisible = true
            this.url = this.relevantAttachments[scope.$index].fUrl
          }else {
            window.open(this.relevantAttachments[scope.$index].fUrl);
          }
        }else if(type === 1){
          window.open(this.relevantAttachments[scope.$index].fUrl);
        }
      } else {
        this.$message.error("请上传附件");
      }
    }
  },
  watch: {
    relevantAttachments(val) {
      console.log(val);
      this.relevantAttachments = val;
    },
    createBy(val){
        this.createBy=val
    },
    browseStatus(val){
      this.browseStatus=val
    }
  },
};
</script>

<style scoped lang="scss">
</style>