支部特色活动 - 附件

ruoyi-ui/src/views/branch/zbfc/activity/index.vue

@@ -117,6 +117,17 @@
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remarks" width="120"/>
+      <el-table-column label="附件" align="center" prop="filesId" width="100" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-folder"
+            @click="openFileDialog(scope.row)"
+          >查看附件
+          </el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -177,6 +188,55 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 附件详情对话框 -->
+    <el-dialog title="附件详情" :visible.sync="file.open" width="60%" append-to-body>
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-upload
+            ref="doc"
+            :headers="doc.headers"
+            :action="doc.url+'?tableName=branchActivity&tableId=' + doc.tableId"
+            :disabled="doc.isUploading"
+            :on-progress="handleFileDocProgress"
+            :on-success="handleFileDocSuccess"
+            :auto-upload="true"
+            :file-list="file.fileList"
+          >
+            <el-button type="primary"><i class="el-icon-upload"></i> 点击上传</el-button>
+          </el-upload>
+        </el-col>
+      </el-row>
+      <el-table :data="file.dataList">
+        <el-table-column label="附件名称" align="center">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-document"
+              @click="handleSee(scope.row.url)">
+              {{ scope.row.name }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="上传人" align="center" prop="creater"/>
+        <el-table-column label="上传时间" align="center" prop="createdate">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createdate, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDeleteFile(scope.row.id)"
+            >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
         <el-upload
@@ -216,12 +276,33 @@ import { treeselect } from "@/api/system/dept";
 import { getToken } from "@/utils/auth";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {delFile, listFile} from "../../../../api/branch/file";
 
 export default {
   name: "Activity",
   components: { Treeselect },
   data() {
     return {
+      file: {
+        id: null,
+        open: false,
+        fileList: [],
+        dataList: [],
+      },
+      doc: {
+        file: "",
+        // 是否显示弹出层（报告附件）
+        open: false,
+        // 弹出层标题（报告附件）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 设置上传的请求头部
+        headers: {Authorization: "Bearer " + getToken()},
+        tableId: 0,
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/branch/file/uploadFile",
+      },
       // 遮罩层
       loading: true,
       // 选中数组
@@ -361,6 +442,42 @@ export default {
     });
   },
   methods: {
+    //附件上传中处理
+    handleFileDocProgress(event, file, fileList) {
+      this.doc.file = file;
+    },
+    //附件上传成功处理
+    handleFileDocSuccess(response, file, fileList) {
+      console.log(response.data, '-----', this.file.id);
+      this.$modal.msgSuccess("上传成功");
+      this.getFileList();
+    },
+    handleSee(url) {
+      window.open(process.env.VUE_APP_BASE_API + url);
+    },
+    openFileDialog(row) {
+      console.log(row)
+      this.file.open = true;
+      this.doc.tableId = row.activityId;
+      this.getFileList();
+    },
+    getFileList() {
+      listFile({tableId: this.doc.tableId, tableName: 'branchActivity'}).then(res => {
+        this.file.dataList = res.data
+      })
+    },
+    handleDeleteFile(id) {
+      this.$confirm('是否确认删除?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return delFile(id);
+      }).then(() => {
+        this.getFileList();
+        this.msgSuccess("删除成功");
+      })
+    },
     /** 查询支部特色活动列表 */
     getList() {
       this.loading = true;