soc_web/src/views/core/edu/task/dialog.info.vue

<template>
    <div class="edu-training-edit">
        <DialogCom title="教育培训详情" :visible.sync="isShow" width="960px">
            <div class="page-body">
                <el-form :model="formData" size="small" ref="form" label-position="right" label-width="120px"
                    label-suffix=":">
                    <el-row>

                        <!-- 培训主题 -->
                        <el-col :span="12">
                            <el-form-item prop="type" label="培训主题">{{
                                formData.title
                            }}</el-form-item>
                        </el-col>

                        <!-- 机构 -->
                        <el-col :span="12">
                            <el-form-item label="培训机构">{{
                                formData.orgName
                            }}</el-form-item>
                        </el-col>
                        <!-- 执行角色 -->
                        <!-- <el-col :span="12">
                            <el-form-item prop="eduJobId" label="执行角色">{{
                                formData.eduJobNames
                            }}</el-form-item>
                        </el-col> -->
                        <!-- 类型 -->
                        <el-col :span="12">
                            <el-form-item label="类型">
                                <template>
                                    <dict-tag :options="dict.type.edu_type" :value="formData.type" />
                                </template>
                            </el-form-item>
                        </el-col>
                        <!-- 主持人 -->
                        <el-col :span="12">
                            <el-form-item prop="hostId" label="主持人">{{
                                formData.hostName
                            }}</el-form-item>
                        </el-col>
                        <!-- 记录人 -->
                        <el-col :span="24">
                            <el-form-item prop="recorderId" label="记录人">{{
                                formData.recorderName
                            }}</el-form-item>
                        </el-col>

                        <!-- 培训开始时间 -->
                        <el-col :span="12">
                            <el-form-item prop="trainingStartDateTime" label="培训开始时间">{{
                                formData.trainingStartDateTime
                            }}</el-form-item>
                        </el-col>
                        <!-- 培训截止时间 -->
                        <el-col :span="12">
                            <el-form-item prop="trainingEndDateTime" label="培训截止时间">{{
                                formData.trainingEndDateTime
                            }}</el-form-item>
                        </el-col>
                        <!-- 开始日期 -->
                        <!-- <el-col :span="12">
                            <el-form-item prop="dateTime" label="开始日期">{{
                                formData.startDate
                            }}</el-form-item>
                        </el-col> -->
                        <!-- 截止日期 -->
                        <!-- <el-col :span="12">
                            <el-form-item prop="dateTime" label="截止日期">{{
                                formData.endDate
                            }}</el-form-item>
                        </el-col> -->
                        <!-- 内容 -->
                        <el-col :span="24">
                            <el-form-item prop="content" label="培训内容">{{
                                formData.content
                            }}</el-form-item>
                        </el-col>
                        <!-- 总结 -->
                        <el-col :span="24">
                            <el-form-item prop="note" label="总结">{{
                                formData.note
                            }}</el-form-item>
                        </el-col>


                        <!-- 参与人数 -->
                        <el-col :span="12">
                            <el-form-item prop="dueCount" label="参与人员">{{
                                formData.taskUserList ? formData.taskUserList.filter((x) => x.type === 1)
                                    .map((v) => v.userName).join(",") : ""
                            }}</el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="dueCount" label="缺席人员">{{
                                formData.taskUserList ? formData.taskUserList.filter((x) => x.type === 2)
                                    .map((v) => v.userName).join(",") : ""
                            }}</el-form-item>
                        </el-col>
                        <!-- 图片 -->
                        <el-col :span="24">
                            <el-form-item prop="imageList" label="培训图片">
                                <ImageListPreview v-model="formData.imageList"></ImageListPreview>
                                <!-- <k-multi-upload :disabled="!!id" v-model="formData.imageList" limit="4" byModule
                                    moduleName="edu-training" v-if="isShow" /> -->
                            </el-form-item>
                        </el-col>
                        <!-- 图片 -->
                        <el-col :span="24">
                            <el-form-item prop="imageList" label="签名图片">
                                <ImageListPreview v-model="formData.signImageList"></ImageListPreview>
                                <!-- <k-multi-upload :disabled="!!id" v-model="formData.imageList" limit="4" byModule
                                    moduleName="edu-training" v-if="isShow" /> -->
                            </el-form-item>
                        </el-col>

                        <!-- 文件 -->
                        <el-col :span="24">
                            <el-form-item prop="fileList" label="文件" :disabled="true">
                                <div v-for="(v, i) in formData.fileList" :key="i">
                                    <a class="downloadLink" @click="onDownload(JSON.parse(v).url, JSON.parse(v).name)">
                                        {{ JSON.parse(v).name }}
                                    </a>
                                </div>

                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="onHide">关闭</el-button>
            </div>
        </DialogCom>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getEduTask } from "@/api/core/edu/eduTask";

export default {
    components: {},
    dicts: ['edu_type', 'edu_task_status'],
    data() {
        const params = this.$route.params;
        return {
            id: params ? params.id : null,
            isShow: false,
            formData: this.reset(),
        };
    },
    props: {},
    watch: {},
    computed: {
        ...mapState(["loginUser"]),
    },
    methods: {
        ...mapMutations([]),
        reset(other = {}) {
            return {
                id: null,
                type: null,
                host: {},
                recorder: {},
                dateTime: null,
                dueCount: null,
                actualCount: null,
                content: null,
                imageList: null,
                signImageList:null,
                org: {},
                ...other,
            };
        },
        async refresh(id, other) {
            if (!id) {
                this.reset(other);
            }
            else {
                getEduTask(id).then(response => {
                    this.formData = response.data;
                    this.formData.signImageList=this.getSingImageList();
                    this.loading = false;
                })
            }
        },
        async show(id, other = {}) {
            this.id = id;
            await this.refresh(id, other);
            this.isShow = true;
        },
        // 事件
        onHide() {
            this.isShow = false;
        },
        onDownload(url, filename) {
            let this_ = this;
            this.getBlob(url, function (blob) {
                this_.saveAs(blob, filename);
            });
        },
        getSingImageList() {
            let res = this.formData.taskUserList ? this.formData.taskUserList.filter((x) => x.type === 1 && x.sign == 1)
                .map((v) => v.signImage).join(",") : null;
            return res;
        },
        getBlob(url, cb) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (xhr.status === 200) {
                    cb(xhr.response);
                }
            };
            xhr.send();
        },
       saveAs(blob, filename) {
             console.log("saveAs",blob,filename)
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, filename);
            } else {
                let link = document.createElement("a");
                let body = document.querySelector("body");

                 link.href = URL.createObjectURL(blob);
                 link.download = filename;

                 // fix Firefox
                 link.style.display = "none";
                 body.appendChild(link);

                 link.click();
                 body.removeChild(link);

                window.URL.revokeObjectURL(link.href);
           }
        },
        // 事件
        //apimark//
    },
    mounted() { },
};
</script>

<!-- <style lang="less">
.edu-training-edit {
}
</style> -->