tire-platform-ui/src/components/upload/index.vue

<template>
  <basic-container>
    <avue-crud
      :data="data"
      ref="crud"
      :option="option"
      @resetColumn="resetColumn"
      @saveColumn="saveColumn"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-edit"
          @click="addDetail"
          :disabled="disabled"
          >上传
        </el-button>
      </template>
      <template slot="url" slot-scope="{ row }">
        <el-input
          placeholder="请输入内容"
          size="small"
          v-if="row.$cellEdit"
          v-model="row.url"
          class="input-with-select"
        >
          <el-button slot="append" @click="singleLineUpload(row)"
            >附件</el-button
          >
        </el-input>
        <span v-else>{{ row.url }}</span>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          icon="el-icon-download"
          :size="scope.size"
          :type="scope.type"
          @click="download(scope)"
          :disabled="disabled"
          >下载附件
        </el-button>
        <el-button
          :type="scope.type"
          :size="scope.size"
          icon="el-icon-edit"
          @click.stop="rowCell(scope.row, scope.index)"
          :disabled="disabled"
        >
          {{ scope.row.$cellEdit ? "修改完成" : "修改" }}
        </el-button>
        <el-button
          :type="scope.type"
          :size="scope.size"
          icon="el-icon-delete"
          @click.stop="rowDel(scope.row, scope.index)"
          :disabled="disabled"
          >删除
        </el-button>
      </template>
    </avue-crud>
    <el-dialog
      title="上传附件"
      append-to-body
      :visible.sync="excelBox"
      width="555px"
      v-dialog-drag
    >
      <el-upload
        class="upload-demo"
        drag
        style="text-align: center"
        ref="upload"
        :action="incomingAction ? incomingAction : action"
        :headers="headers"
        :on-success="onSuccess"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          如上传文件过大，请耐心等待上传成功
        </div>
      </el-upload>
    </el-dialog>
    <el-dialog
      title="修改附件"
      append-to-body
      :visible.sync="excelTwo"
      width="555px"
      v-dialog-drag
    >
      <el-upload
        class="upload-demo"
        drag
        style="text-align: center"
        :action="incomingAction ? incomingAction : action"
        :headers="headers"
        :show-file-list="false"
        :on-success="onSuccessTwo"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          如上传文件过大，请耐心等待上传成功
        </div>
      </el-upload>
    </el-dialog>
    <el-dialog
      width="80%"
      title="附件"
      :visible.sync="innerVisible"
      append-to-body
    >
      <div style="width: 50%;height: 50%;margin: 0 auto">
        <img :src="imgUrl" alt="" style="width: 100%;height: 100%;" />
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getToken } from "@/util/auth";
import { sharedDeletion } from "@/api/user";
import option from "@/views/exportTrade/customerInquiry/config/mainList.json";
import { gainUser } from "@/api/basicData/customerInquiry";
import { updateListRemove } from "@/api/uploadFile/upload-file";
export default {
  name: "index",
  props: {
    data: {
      type: Object
    },
    incomingAction: {
      type: String
    },
    deleteUrl: {
      type: String
    },
    enumerationValue: {
      type: Number
    },
    typeUpload: {
      type: String
    },
    disabled: {
      type: Boolean
    }
  },
  data() {
    return {
      excelBox: false,
      excelTwo: false,
      innerVisible: false,
      form: {},
      imgUrl: "",
      action: "/api/blade-resource/oss/endpoint/put-file",
      headers: { "Blade-Auth": "Bearer " + getToken() },
      option: {},
      originalOptions: {
        dialogDrag: true,
        index: true,
        refreshBtn: false,
        cellBtn: false,
        cancelBtn: false,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        align: "center",
        column: [
          {
            label: "文件名称",
            prop: "fileName",
            index: 1,
            width: 140,
            cell: true,
            overHidden: true
          },
          {
            label: "文件地址",
            prop: "url",
            index: 2,
            overHidden: true
          },
          {
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=file_type",
            props: {
              label: "dictValue",
              value: "dictValue"
            },
            label: "文件属性",
            prop: "paymentType",
            search: false,
            index: 3,
            width: 140,
            overHidden: true,
            cell: true
          },
          {
            label: "备注",
            prop: "remarks",
            index: 4,
            cell: true,
            overHidden: true
          }
        ]
      },
      uploadCount: 0
    };
  },
  async created() {
    /**
     * 已定义全局方法，直接使用，getColumnData获取列数据，参数传值(表格名称，引入的本地JSON的数据定义的名称)
     * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
     * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
     */
    this.option = await this.getColumnData(
      this.getColumnName(this.enumerationValue),
      this.originalOptions
    );
  },
  methods: {
    //自定义列保存
    async saveColumn() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(
        this.getColumnName(this.enumerationValue),
        this.option
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn() {
      this.option = this.originalOptions;
      const inSave = await this.delColumnData(
        this.getColumnName(this.enumerationValue),
        this.originalOptions
      );
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //新增上传成功
    onSuccess(response, file, fileList) {
      this.$refs.crud.rowCellAdd({
        fileName: response.data.originalName,
        url: response.data.link
      });
      this.uploadCount++;
      if (this.uploadCount === fileList.length) {
        this.$refs.upload.clearFiles();
        this.excelBox = false;
        this.uploadCount = 0;
      }
    },
    //修改上传成功
    onSuccessTwo(response) {
      this.form.fileName = response.data.originalName;
      this.form.url = response.data.link;
      this.data[this.form.$index] = this.form;
      this.excelTwo = false;
    },
    //单行上传
    singleLineUpload(row) {
      this.form = row;
      this.excelTwo = true;
    },
    //开启批量上传
    addDetail() {
      this.excelBox = true;
    },
    //下载附件
    download(scope) {
      console.log(scope.row.url);
      if (scope.row.url) {
        if (
          scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
            ".jpg" ||
          scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
            ".png" ||
          scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
            ".JPG" ||
          scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
            ".PNG"
        ) {
          this.imgUrl = scope.row.url;
          this.innerVisible = true;
        } else {
          window.open(scope.row.url);
        }
      } else {
        this.$message.error("请上传附件");
      }
    },
    //修改触发
    rowCell(row, index) {
      if (row.$cellEdit == true) {
        this.$set(row, "$cellEdit", false);
      } else {
        this.$set(row, "$cellEdit", true);
      }
      // this.$refs.crud.rowCell(row, index)
    },
    rowDel(row, index) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          if (this.typeUpload == "CK") {
            updateListRemove(row.id, this.deleteUrl).then(res => {
              if (res.data.success) {
                this.$message.success("操作成功!");
                this.data.splice(index, 1);
              }
            });
          } else {
            sharedDeletion(this.deleteUrl, row.id).then(res => {
              if (res.data.success) {
                this.$message.success("操作成功!");
                this.data.splice(index, 1);
              }
            });
          }
        } else {
          this.data.splice(index, 1);
        }
      });
    }
  }
};
</script>

<style scoped></style>