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

<template>
  <div class="edu-training-edit">
    <DialogCom title="培训任务详情" :visible.sync="isShow" width="1200px" >
      <div class="page-body">
        <el-descriptions class="margin-top" :column="2" size="medium" border :label-style="labelStyle" :contentStyle="content_style">
          <el-descriptions-item labelClassName="gx_info_label" label="任务名称" >
            {{
            formData.title
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="培训类型" >
            {{
            formData.typeText
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="任务进度" >
            {{
            formData.statusText
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="任务时间" >
            {{formData.startDate}}-{{formData.endDate}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="受训机构" >
            {{formData.orgName}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="主持人" >
            {{
            formData.hostName
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="登记人" >
            {{
            formData.recorderName
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="培训开始时间" >
            {{
            formData.trainingStartDateTime
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="培训结束时间" >
            {{
            formData.trainingEndDateTime
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="" >
          </el-descriptions-item>
          <el-descriptions-item span="2" labelClassName="gx_info_label" label="培训内容" >
            {{
            formData.content
            }}
          </el-descriptions-item>
          <el-descriptions-item span="2" labelClassName="gx_info_label" label="培训总结" >
            {{
            formData.note
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="参会人员" >
            {{
            formData.taskUserList ? formData.taskUserList.filter((x) => x.type === 1)
            .map((v) => v.userName).join(",") : ""
            }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="缺席人员" >
            {{
            formData.taskUserList ? formData.taskUserList.filter((x) => x.type === 2)
            .map((v) => v.userName).join(",") : ""
            }}
          </el-descriptions-item>
          <el-descriptions-item span="2" labelClassName="gx_info_label" label="培训图片" >
            <ImageListPreview v-model="formData.imageList"></ImageListPreview>
          </el-descriptions-item>
          <el-descriptions-item span="2" labelClassName="gx_info_label" label="参会人员签名" >
            <ImageListPreview v-model="formData.signImageList"></ImageListPreview>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="资料文件" >
            <K-file-upload ref="upload" :isShowUploadBtn="false"
                           :defaultValue="formFileListDefualtValue"
                           v-model="formData.fileList"/>
          </el-descriptions-item>

        </el-descriptions>
      </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";
  import KFileUpload from "@/components/K-FileUpload/index.vue";
  export default {
    components: {KFileUpload},
    dicts: ['edu_type', 'edu_task_status'],
    data() {
      const params = this.$route.params;
      return {
        id: params ? params.id : null,
        isShow: false,
        formData: this.reset(),
        formFileListDefualtValue: [],
        labelStyle: {
          'color': '#000',
          'text-align': 'center',
          'height': '40px',
          'min-width': '200px',
          'word-break': 'keep-all'
        },
        content_style: {
          'text-align': 'left',
          'min-width': '300px',
          'word-break': 'break-all'
        },
      };
    },
    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,
          typeText: null,
          org: {},
          ...other,
        };
      },
      async refresh(id, other) {
        if (!id) {
          this.reset(other);
        } else {
          getEduTask(id).then(response => {
            this.formData = response.data;
            this.formFileListDefualtValue = response.data.fileList;
            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>