yos_web/src/components/attachment_list/index.vue

<template>
  <div>
    <div class="flex-align-center flex-between normal-margin">
      <div v-if="$slots.title">
        <slot name="title"></slot>
      </div>
      <!-- <p v-else>附件列表</p> -->
      <slot v-if="!onlyread" name="upload"></slot>
    </div>
    <el-table
      :header-cell-style="{background:'#EEEEEE',color:'#333'}"
      size="mini"
      border
      :data="attinfos"
      style="width: 100%"
    >
      <el-table-column prop="document" label="文件名称">
        <template slot-scope="scope">
          <el-input
            v-if="actid === scope.row.attachmentid"
            size="mini"
            v-model="scope.row.document"
          ></el-input>
          <span v-else>{{scope.row.document}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createdate" label="上传时间"></el-table-column>
      <el-table-column prop="contentlength" label="文件大小" width="90">
        <template
          slot-scope="scope"
        >{{scope.row.contentlength > 1073741824?(scope.row.contentlength / Math.pow(1024,3)).toFixed(2)+'GB':scope.row.contentlength > 1048576?(scope.row.contentlength / Math.pow(1024,2)).toFixed(2)+'MB':scope.row.contentlength > 1024?(scope.row.contentlength / Math.pow(1024,1)).toFixed(2)+'KB':scope.row.contentlength+'B'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="170">
        <template slot-scope="scope">
          <div v-if="actid === scope.row.attachmentid">
            <el-button
              type="text"
              size="small"
              @click="saveEdit(scope.row)"
              :disabled="status === '已失败' || status === '已结案' || attachmentDisabled"
            >保 存</el-button>
            <el-button
              type="text"
              size="small"
              @click="refresh(actid = 0)"
              :disabled="status === '已失败' || status === '已结案' || attachmentDisabled"
            >取 消</el-button>
          </div>
          <div v-else>
            <el-button
              type="text"
              size="small"
              @click="download(scope.row)"
              :disabled="status === '已失败' || status === '已结案'"
            >下 载</el-button>
            <el-button type="text" size="small" @click="seeClick(scope.row)">预 览</el-button>
            <el-button
              :disabled="onlyread || status === '已失败' || status === '已结案' || attachmentDisabled "
              class="inline-16"
              type="text"
              size="small"
              @click="editAttachment(scope.row)"
            >编 辑</el-button>
            <el-popconfirm title="确定删除当前附件吗？" @confirm="deleteAttachment(scope.row)">
              <el-button
                :disabled="onlyread || status === '已失败' || status === '已结案' || scope.row.usetype === 'undelete' || attachmentDisabled"
                slot="reference"
                size="small"
                type="text"
              >删 除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <SeeFile ref="seeFile" :fileData="seeFile"></SeeFile>
  </div>
</template>

<script>
import SeeFile from "@/components/file-block/components/SeeFile1";
export default {
  props: ["attinfos", "onlyread", "status","attachmentDisabled"],
  data() {
    return {
      actid: null,
      seeFile: "",
      isSeeFileShow: false,
    };
  },
  components: { SeeFile },
  methods: {
    refresh() {
      this.$emit("cancelEdit");
    },
    editAttachment(row) {
      this.actid = row.attachmentid;
    },
    download(row) {
      window.open(row.url);
      this.downloadRecord(row);
    },
    /*保存下载操作记录*/
    async downloadRecord(row) {
      const res = await this.$api.requested({
        id: 10020701,
        content: {
          linksid: row.linksid,
          attachmentid: row.attachmentid,
        },
      });
    },
    async saveEdit(row) {
      let param = {
        classname: "system.attachment.MediaCenter",
        method: "changeAttachment",
        content: {
          files: [
            {
              attachmentid: row.attachmentid,
              document: row.document,
              parentid: row.parentid,
            },
          ],
        },
      };
      const res = await this.$api.requested(param);
      res.code === 1 ? this.$emit("onSuccess") : "";
      res.code === 1 ? (this.actid = "") : "";
    },

    async deleteAttachment(row) {
      const res = await this.$api.requested({
        classname: "system.attachment.Attachment",
        method: "deleteFileLink",
        content: {
          linksids: [row.linksid],
        },
      });
      res.code === 1 ? this.tool.showMessage(res) : "";
      res.code === 1 ? this.$emit("onSuccess") : "";
    },
    seeClick(item) {
      console.log(item);
      if (
        item.postfix == "png" ||
        item.postfix == "PNG" ||
        item.postfix == "jpg" ||
        item.postfix == "JPG" ||
        item.postfix == "bmp" ||
        item.postfix == "BMP" ||
        item.postfix == "gif" ||
        item.postfix == "GIG" ||
        item.postfix == "WEBP" ||
        item.postfix == "webp" ||
        item.postfix == "svg" ||
        item.postfix == "SVG" ||
        item.postfix == "TIFF" ||
        item.postfix == "tiff" ||
        item.postfix == "MP4" ||
        item.postfix == "mp4" ||
        item.postfix == "ogg" ||
        item.postfix == "webm"
      ) {
        this.seeFile = item;
        this.$refs.seeFile.dialogVisible = true;
      } else if (item.postfix == "PDF" || item.postfix == "pdf") {
        window.open(item.url, "_blank");
      } else {
        this.$notify({
          title: "提示",
          message: "该文件暂不支持",
          type: "warning",
        });
      }
    },
  },
};
</script>
<style>
</style>