Smart_platform_ui/src/components/uploadTwo/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
          :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>
        <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" :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" 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 :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>
        <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 { LTfujianDelete, 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=facility_img",
            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=facility_img",
            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
          }
        ]
      },
      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
          }
        ]
      },
      uploadCount: 0
    };
  },
  async created() {

    console.log(this.enumerationValue)
    /**
     * 已定义全局方法，直接使用，getColumnData获取列数据，参数传值(表格名称，引入的本地JSON的数据定义的名称)
     * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
     * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
     */
    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.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 {
      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.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 {
        this.option = this.originalOptions;
        const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue), this.originalOptions);
        if (inSave) {
          this.$message.success("重置成功");
          this.getWorkDicts("facility_img").then(res => {
            this.findObject(this.option.column, "version").dicData = res.data.data;
          });
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      }
    },
    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({
        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) {
      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 if (this.typeUpload == "LT") {
            LTfujianDelete({ 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 scoped></style>