|
|
@@ -1,167 +1,86 @@
|
|
|
<template>
|
|
|
<div class="edu-training-edit">
|
|
|
- <DialogCom title="培训任务详情" :visible.sync="isShow" width="960px">
|
|
|
+ <DialogCom title="培训任务详情" :visible.sync="isShow" width="1200px" >
|
|
|
<div class="page-body">
|
|
|
- <el-form :model="formData" size="small" ref="form" label-position="right" label-width="120px"
|
|
|
- label-suffix=":">
|
|
|
- <el-row>
|
|
|
+ <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-col :span="24">
|
|
|
- <el-form-item prop="type" label="任务名称">{{
|
|
|
- formData.title
|
|
|
- }}
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item prop="typeText" label="培训类型">{{
|
|
|
- formData.typeText
|
|
|
- }}
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item prop="statusText" label="任务进度">{{
|
|
|
- formData.statusText
|
|
|
- }}
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item prop="startDate" label="任务时间">{{
|
|
|
- formData.startDate
|
|
|
- }}-{{ formData.endDate }}
|
|
|
- </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="12">
|
|
|
- <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 label="资料文件" prop="fileList">
|
|
|
- <K-file-upload ref="upload" :isShowUploadBtn="false"
|
|
|
- :defaultValue="formFileListDefualtValue"
|
|
|
- v-model="formData.fileList"/>
|
|
|
- </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>
|
|
|
+ </el-descriptions>
|
|
|
</div>
|
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
@@ -172,119 +91,125 @@
|
|
|
</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: [],
|
|
|
- };
|
|
|
- },
|
|
|
- props: {},
|
|
|
- watch: {},
|
|
|
- computed: {
|
|
|
- ...mapState(["loginUser"]),
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapMutations([]),
|
|
|
- reset(other = {}) {
|
|
|
+ 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: null,
|
|
|
- type: null,
|
|
|
- host: {},
|
|
|
- recorder: {},
|
|
|
- dateTime: null,
|
|
|
- dueCount: null,
|
|
|
- actualCount: null,
|
|
|
- content: null,
|
|
|
- imageList: null,
|
|
|
- signImageList: null,
|
|
|
- typeText: null,
|
|
|
- org: {},
|
|
|
- ...other,
|
|
|
+ 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'
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
- 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;
|
|
|
+ props: {},
|
|
|
+ watch: {},
|
|
|
+ computed: {
|
|
|
+ ...mapState(["loginUser"]),
|
|
|
},
|
|
|
- // 事件
|
|
|
- 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);
|
|
|
+ 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;
|
|
|
+ })
|
|
|
}
|
|
|
- };
|
|
|
- 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");
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ link.href = URL.createObjectURL(blob);
|
|
|
+ link.download = filename;
|
|
|
|
|
|
- // fix Firefox
|
|
|
- link.style.display = "none";
|
|
|
- body.appendChild(link);
|
|
|
+ // fix Firefox
|
|
|
+ link.style.display = "none";
|
|
|
+ body.appendChild(link);
|
|
|
|
|
|
- link.click();
|
|
|
- body.removeChild(link);
|
|
|
+ link.click();
|
|
|
+ body.removeChild(link);
|
|
|
|
|
|
- window.URL.revokeObjectURL(link.href);
|
|
|
- }
|
|
|
+ window.URL.revokeObjectURL(link.href);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 事件
|
|
|
+ //apimark//
|
|
|
},
|
|
|
- // 事件
|
|
|
- //apimark//
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- },
|
|
|
-};
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
-
|
|
|
-<!-- <style lang="less">
|
|
|
-.edu-training-edit {
|
|
|
-}
|
|
|
-</style> -->
|
jingyuanchao