Warehouse_management_lc_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="fType"
        header-align="center"
        align="center"
        label="文件属性">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.fType"
            clearable
            filterable
            :disabled="browseStatus"
            @change="filesTypeChange(scope.row)"
          >
            <el-option
              v-for="(item, index) in filesTypeOptions"
              :value="item.dictValue"
              :label="item.dictLabel"
              :key="index"
            ></el-option>
          </el-select>
        </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="附件"
        :fullscreen="dialogFull"
        :visible.sync="innerVisible"
        append-to-body>
      <template slot="title">
        <span class="el-dialog__title">
          <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
          附件
        </span>
        <div class="size-change" @click="dialogFull? dialogFull=false: dialogFull=true">
          <i class="el-icon-full-screen"></i>
        </div>
      </template>
      <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:'',
      dialogFull: false,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      filesTypeOptions: [],
      repeatData: '', //判断文件属性是否有重复
    };
  },
  created() {
    this.getDicts("file_type").then((response) => {
      this.filesTypeOptions = response.data;
    });
  },
  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("请上传附件");
      }
    },
    // 文件属性上传判断
    filesTypeChange(row) {
      if (row.fType == 1) {
        let repeat = false
        for (let k = 0;k < this.relevantAttachments.length - 1;k++) {
          if (row.fType == this.relevantAttachments[k].fType) repeat = true
        }
        if (repeat) {
          row.fType = null
          this.$message.warning('已存在电子签章')
        }
      }
    },
  },
  watch: {
    relevantAttachments(val) {
      this.relevantAttachments = val;
    },
    createBy(val){
        this.createBy=val
    },
    browseStatus(val){
      this.browseStatus=val
    }
  },
};
</script>

<style scoped lang="scss">
.size-change {
  float: right;
  margin-right: 20px;
  cursor:pointer;
}
.size-change:hover {
  color: #00afff;
}
</style>