|
|
@@ -0,0 +1,239 @@
|
|
|
+<template>
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud :data="data" ref="crud" :option="option" @row-save="rowSave">
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="addDetail">上传
|
|
|
+ </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)"
|
|
|
+ > {{ scope.row.$cellEdit ? '修改完成' : '修改' }}
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ :type="scope.type"
|
|
|
+ :size="scope.size"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click.stop="rowDel(scope.row,scope.index)"
|
|
|
+ >删除
|
|
|
+ </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";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+ incomingAction: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ deleteUrl: {
|
|
|
+ type: String
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ excelBox: false,
|
|
|
+ excelTwo: false,
|
|
|
+ innerVisible: false,
|
|
|
+ form: {},
|
|
|
+ imgUrl: '',
|
|
|
+ action: '/api/blade-resource/oss/endpoint/put-file',
|
|
|
+ headers: {"Blade-Auth": 'Bearer ' + getToken()},
|
|
|
+ option: {
|
|
|
+ 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,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //新增上传成功
|
|
|
+ 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) {
|
|
|
+ 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>
|
caojunjie