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

<template>
  <div>
    <basic-container v-if="!basic">
      <avue-crud
          :data="data"
          ref="crud"
          :option="option"
          :key="key"
          @resetColumn="resetColumn"
          @saveColumn="saveColumn"
      >
        <template slot="menuLeft">
          <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="addDetail"
              :disabled="disabled"
              v-if="display"
          >上传
          </el-button>
          <slot name="c_button"></slot>
        </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)"
          >查看
          </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"
          :close-on-click-modal="false"
          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"
          :close-on-click-modal="false"
          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"
          :close-on-click-modal="false"
          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>
    <span v-else-if="true">
      <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)"
          >查看
          </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"
          :close-on-click-modal="false"
          v-dialog-drag
      >
        <el-upload
            class="upload-demo"
            drag
            style="text-align: center"
            ref="upload"
            :action="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"
          :close-on-click-modal="false"
          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"
          :close-on-click-modal="false"
          append-to-body
      >
        <div style="width: 50%;height: 50%;margin: 0 auto">
          <img :src="imgUrl" alt="" style="width: 100%;height: 100%;" />
        </div>
      </el-dialog>
    </span>
  </div>
</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
    },
    display: {
      type: Boolean
    },
    basic: {
      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: {},
      key:0,
      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);
    this.key++
  },
  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.substring(scope.row.url.lastIndexOf(".")))
      if (scope.row.url) {
        if (
            scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
            ".jpg" ||
            scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
            ".png" ||
            scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
            ".JPG" ||
            scope.row.url.substring(scope.row.url.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>