yf-admin-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>
          <el-button type="success" size="small" @click="submit" :disabled="disabled"
            v-if="saveBtn">一键保存
          </el-button>
          <slot name="c_button"></slot>
        </template>
        <template slot="url" slot-scope="{ row }">
          <span style="display: flex;">
            <el-input placeholder="请输入内容" size="small" v-if="row.$cellEdit" v-model="row.url">
              <el-button slot="append" @click="singleLineUpload(row)">附件</el-button>
            </el-input>
            <span v-else>{{ row.url }}</span>
          </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
          :before-upload="beforeUpload">
          <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" :before-upload="beforeUpload">
          <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-->
      <!--&gt;-->
      <!--  <div style="width: 50%;height: 50%;margin: 0 auto">-->
      <!--    <img :src="imgUrl" alt="" style="width: 100%;height: 100%;" />-->
      <!--  </div>-->
      <!--</el-dialog>-->

      <!--  新的查看图片弹窗-->
      <PreviewImage :visible.sync="innerVisible" :currentIndex="0" :previewImgList="[imgUrl]" />
    </basic-container>
    <span v-else-if="true">
      <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">上传
          </el-button>
        </template>
        <template slot="url" slot-scope="{ row }">
          <el-input placeholder="请输入内容" size="small" v-if="row.$cellEdit" v-model="row.url">
            <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 :before-upload="beforeUpload">
          <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" :before-upload="beforeUpload">
          <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-->
      <!--&gt;-->
      <!--  <div style="width: 50%;height: 50%;margin: 0 auto">-->
      <!--    <img :src="imgUrl" alt="" style="width: 100%;height: 100%;" />-->
      <!--  </div>-->
      <!--</el-dialog>-->

      <!--  新的查看图片弹窗-->
      <PreviewImage :visible.sync="innerVisible" :currentIndex="0" :previewImgList="[imgUrl]" />
    </span>
  </div>
</template>

<script>
import { getToken } from "@/util/auth";
import { LTfujianDelete, sharedDeletion } from "@/api/user";
import option from "@/views/exportTrade/customerInquiry/config/mainList.json";
import { gainUser } from "@/api/basicData/customerInquiry";
import { updateListRemove, submitList } from "@/api/uploadFile/upload-file";
import { deleteImg } from "../../api/basicData/EquipmentArchives";
import PreviewImage from '@/components/PreviewImage/index.vue'
export default {
  name: "index",
  components: { PreviewImage },
  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
    },
    actionUrl: {
      type: String
    },
    maxNum: {
      type: Number
    },
    linkKey: {
      type: String,
      default: 'link'
    },
    saveBtn: {
      type: Boolean,
      default: false
    },
    pId: {
      type: String,
      default: null
    },
  },
  data() {
    return {
      excelBox: false,
      excelTwo: false,
      innerVisible: false,
      form: {},
      imgUrl: "",
      action: this.actionUrl ? this.actionUrl : "/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
          }
        ]
      },
      originalOptionsTwo: {
        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=picture_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            label: "文件属性",
            prop: "version",
            search: false,
            index: 3,
            width: 140,
            overHidden: true,
            cell: true,
          },
          {
            label: "备注",
            prop: "remarks",
            index: 4,
            cell: true,
            overHidden: true
          }
        ]
      },
      // 基础信息轮胎附件
      originalOptionsTwo_LT: {
        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=picture_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            label: "文件属性",
            prop: "mainImage",
            search: false,
            index: 3,
            width: 140,
            overHidden: true,
            cell: true,
          },
          {
            label: "备注",
            prop: "remarks",
            index: 4,
            cell: true,
            overHidden: true
          }
        ]
      },
      originalOptionsThree: {
        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
          },
          {
            label: "备注",
            prop: "remarks",
            index: 4,
            cell: true,
            overHidden: true
          }
        ]
      },
      originalOptionsThree_HW: {
        dialogDrag: true,
        index: true,
        refreshBtn: false,
        cellBtn: false,
        cancelBtn: false,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        align: "center",
        column: [
          {
            label: "名称",
            prop: "figure",
            index: 1,
            cell: true,
            overHidden: true
          },
          {
            label: "文件名称",
            prop: "fileName",
            index: 1,
            width: 140,
            cell: true,
            overHidden: true
          },
          {
            label: "文件地址",
            prop: "url",
            index: 2,
            overHidden: true
          },
          {
            label: "备注",
            prop: "remarks",
            index: 4,
            cell: true,
            overHidden: true
          }
        ]
      },
      uploadCount: 0
    };
  },
  async created() {
    /**
     * 已定义全局方法，直接使用，getColumnData获取列数据，参数传值(表格名称，引入的本地JSON的数据定义的名称)
     * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
     * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
     */
    console.log(this.enumerationValue)
    if (this.enumerationValue === 160) {
      this.option = await this.getColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsTwo);
    } else if (this.enumerationValue === 107.1) {
      this.option = await this.getColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsTwo);
    } else if (this.enumerationValue > 230 && this.enumerationValue != 338) {
      this.option = await this.getColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsTwo);
    } else if (this.enumerationValue === 35.1) {
      this.option = await this.getColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsThree);
    } else if (this.enumerationValue === 160.1) {
      this.option = await this.getColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsTwo_LT);
    } else if (this.enumerationValue === 338) {
      this.option = await this.getColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsThree_HW);
    } else {
      this.option = await this.getColumnData(this.getColumnName(this.enumerationValue), this.originalOptions);
      this.getWorkDicts("picture_type").then(res => {
        if (this.findObject(this.option.column, "version").dicData) {
          this.findObject(this.option.column, "version").dicData = res.data.data;
        }
      });
    }
    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() {
      if (this.enumerationValue === 160) {
        this.option = this.originalOptionsTwo;
        const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsTwo);
        if (inSave) {
          this.$message.success("重置成功");
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      } else if (this.enumerationValue === 107.1) {
        this.option = this.originalOptionsTwo;
        const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsTwo);
        if (inSave) {
          this.$message.success("重置成功");
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      } else if (this.enumerationValue > 230 && this.enumerationValue != 338) {
        this.option = this.originalOptionsTwo;
        const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsTwo);
        if (inSave) {
          this.$message.success("重置成功");
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      } else if (this.enumerationValue === 35.1) {
        this.option = this.originalOptionsThree;
        const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsThree);
        if (inSave) {
          this.$message.success("重置成功");
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      } else if (this.enumerationValue === 160.1) {
        this.option = this.originalOptionsTwo_LT;
        const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsTwo_LT);
        if (inSave) {
          this.$message.success("重置成功");
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      } else if (this.enumerationValue === 338) {
        this.option = this.originalOptionsThree_HW;
        const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue), this.originalOptionsThree_HW);
        if (inSave) {
          this.$message.success("重置成功");
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      } else {
        this.option = this.originalOptions;
        const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue), this.originalOptions);
        if (inSave) {
          this.$message.success("重置成功");
          this.getWorkDicts("picture_type").then(res => {
            this.findObject(this.option.column, "version").dicData = res.data.data;
          });
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      }
    },
    submit() {
      if (this.data.length == 0) {
        return this.$message.error("请添加数据");
      }
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.7)'
      });
      submitList(this.data).then(res => {
        this.$emit('upDate', res.data.data)
      }).finally(() => {
        loading.close();
      })
    },
    beforeUpload(file) {
      if (file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/bmp") {
        const fileSize = file.size / 1024 / 1024
        if (fileSize > 5) {
          this.$message.error("请上传不能超过5M的图片");
          return false;
        }
      } else {
        const fileSize = file.size / 1024 / 1024
        if (fileSize > 10) {
          this.$message.error("请上传不能超过10M的文件");
          return false;
        }
      }
    },
    //新增上传成功
    onSuccess(response, file, fileList) {
      this.$refs.crud.rowCellAdd({
        pid: this.pId ? this.pId : null,
        fileName: response.data.originalName,
        url: response.data[this.linkKey]
      });
      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[this.linkKey];
      this.data[this.form.$index] = this.form;
      this.excelTwo = false;
    },
    //单行上传
    singleLineUpload(row) {
      this.form = row;
      this.excelTwo = true;
    },
    //开启批量上传
    addDetail() {
      if (this.saveBtn) {
        if (!this.pId) {
          return this.$message.error("请保存主表数据");
        }
      }
      if (this.maxNum > 0 && this.data.length == this.maxNum) {
        return this.$message.error("最多上传" + this.maxNum + "个文件");
      }
      this.excelBox = true;
    },
    //下载附件
    download(scope) {
      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(".")) ===
          ".jpeg" ||
          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(".")) ===
          ".JPEG"
        ) {
          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(() => {
        console.log(row, 657)
        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 if (this.typeUpload == "LT") {
            LTfujianDelete({ ids: row.id }).then(res => {
              if (res.data.success) {
                this.$message.success("操作成功!");
                this.data.splice(index, 1);
              }
            })
          } else if (this.typeUpload == "SBDAFJ") {
            deleteImg({ ids: row.id }).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 lang="scss" scoped>
::v-deep .el-table .cell {

  height: 33px;
}
</style>