上节课我们利用前端页面，测试了文件上传和删除。当我们上传文件的时候，存储桶中确实保存了我们提交的文件。当我们删除上传控件中的文件，存储桶里面相应的文件也被删除了。看来我们之前写的后端代码都能正常运行，没啥错误。这节课我们要做的是用户点击执行归档按钮，然后发起Ajax请求，让后端项目调用工作流项目，完成归档任务，这样审批员工请假的工作流实例也就结束了。

一、执行归档任务

archive.vue页面中执行归档按钮的代码是下面这样的，按钮的文字并不固定，而且按钮能不能点击也受模型层变量的影响。

<el-button type="primary" @click="archive()" size="medium" :disabled="disableBtn">{{ btn }}</el-button>

执行归档按钮被按下之后，按钮的文字变成“正在归档”，然后按钮被禁止点击，直到归档完毕。

archive: function() {
    let that = this;
    //禁用归档按钮，防止归档中用户重复点击归档按钮
    that.btn = '正在归档';
    that.disableBtn = true;
    if (Object.keys(that.picList).length == 0) {
        that.$message({
            message: '没有上传归档照片',
            type: 'error',
            duration: 1200
        });
        return;
    }
    let files = [];
    for (let key in that.picList) {
        files.push({
            url: key,
            path: that.picList[key]
        });
    }
    let data = {
        taskId: that.taskId,
        files: JSON.stringify(files)
    };
    that.$http(`approval/archiveTask`, 'POST', data, true, function(resp) {
        that.$message({
            message: '操作成功',
            type: 'success',
            duration: 1200
        });
        that.visible = false;
        that.$emit('refreshDataList');
    });
}

二、预览归档文件

在浏览器上面，我们展开审批任务的折叠面板，可以看到这个请假申请的归档文件。当然了，前提是这个请假流程已经执行了归档。否则我们看到的是BPMN进度图。

如果HR提交的归档文件有多个也不用担心，折叠面板中默认只显示第一个归档文件，我们点击图片，在预览界面可以看到归档文件的大图，而且还能切换浏览这个流程所有的归档文件。

很多同学都想知道归档文件怎么显示到折叠面板上的，这个需要我们重构代码。而且我还要添加其他功能，那就是折叠面板只允许展开一个。当我们展开一个折叠面板的时候，其他的折叠面板自动收缩。

<el-table
    ref="approvalTable"
    :data="dataList"
    border="border"
    v-loading="dataListLoading"
    cell-style="padding: 4px 0"
    size="medium"
    style="width: 100%;"
    @expand-change="expand"
    :row-key="getRowKeys"
    :expand-row-keys="expands"
>
    ……
</el-table>

我们给页面表格标签添加两个新属性，这两个属性跟只能展开一个折叠面板有关系。例如我们在模型层中需要定义getRowKeys()函数和expands变量。

data: function() {
    return {
        ……
        expands: [],  //如果数组中保存了某行记录的唯一值，那么这行的折叠面板展开
        getRowKeys(row) {
            return row.taskId;  //返回每一行的唯一值
        }
    };
},

接下来我们要重构expand()函数，具体代码如下：

expand: function(row, expandedRows) {
    let that = this;
    //判断是否展开了折叠面板
    if (expandedRows.length>0) {
        that.expands = [];  //关闭所有的折叠面板
        if (row) {
            that.expands.push(row.taskId); //展开你想展开的折叠面板
            let data = {
                instanceId: row.processId,
                type: row.type,
                status: row.status
            };
            that.$http('approval/searchApprovalContent', 'POST', data, false, function(resp) {
                let content = resp.content;
                that.content = content;
                //如果返回工作流实例存在files，说明工作流实例绑定了归档文件
                if (content.hasOwnProperty('files')) {
                    for (let one of content.files) {
                        that.archiveList.push(one.url);
                    }
                }
            });
            that.bpmnUrl =
                that.$baseUrl +
                'approval/searchApprovalBpmn' +
                '?instanceId=' +
                row.processId +
                '&time=' +
                new Date().getTime();
            that.bpmnList = [that.bpmnUrl];
        }
    } else {
        that.expands = []; // 默认不展开
    }
},

想要把归档文件显示在展开的折叠面板上，我们看看视图层的标签是怎么写的。

<el-table-column prop="remark" header-align="center" align="center" type="expand">
    <template #default="scope">
        <div class="content-container">
            ……
            <el-image
                class="archive"
                v-if="content.hasOwnProperty('files')"
                :src="content.files[0].url"
                :preview-src-list="archiveList"
            ></el-image>
            <el-image class="bpmn" :src="bpmnUrl" :preview-src-list="bpmnList"></el-image>
        </div>
    </template>
</el-table-column>