上节课我们写好了后端的Java代码，可以调用工作流项目执行归档任务。这节课我们来完成前端的JS代码，咱们把文件上传和删除给做了，下节课再去写执行归档的JS代码。

一、熟悉前端页面

归档任务对应的弹窗页面是archive.vue，我们先来熟悉一下这个页面。

<el-dialog title="执行归档" width="500px" :close-on-click-modal="false" v-model="visible" :show-close="false">
    <el-upload
        ref="upload"
        :action="url"
        list-type="picture-card"
        accept=".jpg,.jpeg,.png"
        with-credentials="true"
        :before-upload="beforeUploadHandle"
        :on-success="successHandle"
        :on-remove="removeHandle"
    >
        <i class="el-icon-plus"></i>
    </el-upload>
    <template #footer>
        <span class="dialog-footer">
            <el-button size="medium" @click="cancel()">取消</el-button>
            <el-button type="primary" @click="archive()" size="medium" :disabled="disableBtn">{{ btn }}</el-button>
        </span>
    </template>
</el-dialog>

页面模型层的代码也不复杂。由于请求既要上传文件，又要上传普通数据，容易产生干扰。所以我把type参数放在URL传递，请求体中只有上传的文件。

data: function() {
    return {
        visible: false,
        url: this.$baseUrl + 'cos/uploadCosFile?type=archive',
        taskId: '',
        picList: {},
        disableBtn: false,
        btn: '确定'
    };
},

一、初始化页面

因为每次归档的时候，用的是同一个弹窗页面，所以弹窗页面的内容需要清理，不能带有上次归档上传的照片。

init: function(taskId) {
    let that = this;
    that.visible = true;
    that.taskId = taskId;
    that.btn = '执行归档';
    that.disableBtn = false;
    that.$nextTick(() => {
        that.$refs['upload'].clearFiles();
    });
},

二、上传文件

在归档弹窗页面中，我给上传控件设置了很多属性。其中:before-upload属性是上传文件之前运行的回调函数。我们要判断用户上传的文件是否符合要求，这里只接受jpg和png格式的图片，而且文件体积不能超过2M（application.yml文件设置的）。

<el-upload
    ref="upload"
    :action="url"
    list-type="picture-card"
    accept=".jpg,.jpeg,.png"
    with-credentials="true"
    :before-upload="beforeUploadHandle"
    :on-success="successHandle"
    :on-remove="removeHandle"
>
    <i class="el-icon-plus"></i>
</el-upload>

beforeUploadHandle: function(file) {
    if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('只支持jpg、png格式的图片！');
        return false;
    }
    return true;
},

至于说上传文件，这个Ajax请求不需要我们写，:action属性规定了上传URL路径。<el-upload>控件会自动向Web方法上传文件。

文件上传成功之后，触发了:on-success属性对应的回调函数，所以我们要声明这个函数。把成功存储在腾讯云的文件的URL路径保存在模型层的变量上面。

successHandle: function(resp, file, fileList) {
    if (resp && resp.code === 200) {
        for (let one of fileList) {
            this.picList[one.response.url] = one.response.path;
        }
    } else {
        this.$message.error('图片上传失败');
    }
},

三、删除上传文件

如果上传文件的时候，用户选错了文件，那么用户可以删除已经上传到云存储里面的文件，然后重新上传文件。当用户删除<el-upload>控件中的某个文件，会触发:on-remove属性对应的回调函数，所以我们要把这个函数给实现了。

removeHandle: function(file, fileList) {
    let that = this;
    let url = file.response.url;
    let path = this.picList[url];
    that.$http('cos/deleteCosFile', 'POST', { pathes: [path] }, true, function(resp) {
        delete that.picList[url];
    });
},

当用户上传了文件，但是最终没有点击“执行归档”按钮，而是点击了“取消”按钮。那么你说云存储上面还有必要保存用户刚上传的文件吗？当然没有必要，所以我们要删除这些文件。

<el-button size="medium" @click="cancel()">取消</el-button>

cancel: function() {
    let that = this;
    if (Object.keys(that.picList).length > 0) {
        let pathes = Object.values(that.picList);
        that.$http('cos/deleteCosFile', 'POST', { pathes: pathes }, true, function(resp) {
            that.picList = {};
        });
    }
    that.visible = false;
    that.$refs['upload'].clearFiles();
},

四、显示弹窗页面

在approval.vue页面中，引用了archive.vue弹窗页面。我们要实现归档按钮点击事件的回调函数。

<el-button
    type="text"
    size="medium"
    v-if="isAuth(['ROOT', 'FILE:ARCHIVE']) && scope.row.filing"
    @click="archive(scope.row.taskId)"
>
    归档
</el-button>

archive: function(taskId) {
    this.archiveVisible = true;
    this.$nextTick(() => {
        this.$refs.archive.init(taskId);
    });
},