优化界面

src/views/core/drill/task/dialog.info.vue

@@ -1,144 +1,99 @@
 <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-col :span="24">
-              <el-form-item prop="type" label="任务名称">{{
-                  formData.title
-                }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item prop="type" label="演练类型">{{
-                  formData.categoryText
-                }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item prop="type" label="任务进度">{{
-                  getLabel(dict.type.drill_task_status, formData.status,"未知")
-                }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item 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 label="指挥人">{{
-                  formData.hostName
-                }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="登记人">{{
-                  formData.recorderName
-                }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="演练项目">{{
-                  formData.typeText
-                }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="演练地点">{{
-                  formData.drillSite
-                }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item prop="drillStartTime" label="演练开始时间">
-                {{ formData.drillStartTime }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item prop="drillEndTime" label="演练结束时间">
-                {{ formData.drillEndTime }}
-              </el-form-item>
-            </el-col>
+        <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.categoryText
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item labelClassName="gx_info_label" label="任务进度" >
+            {{
+            getLabel(dict.type.drill_task_status, formData.status,"未知")
+            }}
+          </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.drillStartTime
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item labelClassName="gx_info_label" label="演练结束时间" >
+            {{
+            formData.drillEndTime
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item span="2" labelClassName="gx_info_label" label="预设案由" >
+            {{
+            formData.presetCase
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item span="2" labelClassName="gx_info_label" label="演练情况" >
+            {{
+            formData.drillSituation
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item span="2" labelClassName="gx_info_label" label="点评总结" >
+            {{
+            formData.comment
+            }}
+          </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 labelClassName="gx_info_label" label="演练图片" >
+            <ImageListPreview v-model="formData.imageList"></ImageListPreview>
+          </el-descriptions-item>
+          <el-descriptions-item labelClassName="gx_info_label" label="参演人员签名图片" >
+            <ImageListPreview v-model="formData.signImageList"></ImageListPreview>
+          </el-descriptions-item>
+          <el-descriptions-item span="2" labelClassName="gx_info_label" label="评分" >
+            <el-rate
+              v-model="formData.commentScore"
+              :max="10"
+              :disabled="true"
+              :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+            </el-rate>
+          </el-descriptions-item>
+          <el-descriptions-item span="2" 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="hostId" label="预设案由">{{
-                  formData.presetCase
-                }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="hostId" label="演练情况">{{
-                  formData.drillSituation
-                }}
-              </el-form-item>
-            </el-col>
-
-            <el-col :span="24">
-              <el-form-item prop="comment" label="点评总结">{{
-                  formData.comment
-                }}
-              </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="12">
-              <el-form-item prop="imageList" label="演练图片">
-                <ImageListPreview v-model="formData.imageList"></ImageListPreview>
-              </el-form-item>
-            </el-col>
-            <!-- 图片 -->
-            <el-col :span="12">
-              <el-form-item prop="imageList" label="参演人员签名图片">
-                <ImageListPreview v-model="formData.signImageList"></ImageListPreview>
-              </el-form-item>
-            </el-col>
-
-
-            <el-col :span="24" class="block">
-              <el-form-item prop="commentScore" label="评分">
-                <el-rate
-                  v-model="formData.commentScore"
-                  :max="10"
-                  :disabled="true"
-                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
-                </el-rate>
-              </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-row>
-        </el-form>
+        </el-descriptions>
       </div>
 
       <div slot="footer" class="dialog-footer">
@@ -149,107 +104,119 @@
 </template>
 
 <script>
-import {mapState, mapMutations} from "vuex";
-import {getEduTask} from "@/api/core/edu/eduTask";
-import {getDrillTask} from "@/api/core/drill/drillTask";
-import {initList} from "@/api/core/drill/drillDictionary";
-import KFileUpload from "@/components/K-FileUpload/index.vue";
-import { getLabel } from "@/views/commonOption";
-export default {
-  components: {KFileUpload},
-  dicts: ['drill_task_status', 'core_drill_type'],
-  data() {
-    const params = this.$route.params;
-    return {
-      id: params ? params.id : null,
-      isShow: false,
-      formData: this.reset(),
-      drillTypeOptions: [],
-      formFileListDefualtValue: [],
-      iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
-    };
-  },
-  props: {},
-  watch: {},
-  computed: {
-    ...mapState(["loginUser"]),
-  },
-  methods: {
-    ...mapMutations([]),
-    getLabel,
-    reset(other = {}) {
+  import {mapState, mapMutations} from "vuex";
+  import {getEduTask} from "@/api/core/edu/eduTask";
+  import {getDrillTask} from "@/api/core/drill/drillTask";
+  import {initList} from "@/api/core/drill/drillDictionary";
+  import KFileUpload from "@/components/K-FileUpload/index.vue";
+  import { getLabel } from "@/views/commonOption";
+  export default {
+    components: {KFileUpload},
+    dicts: ['drill_task_status', 'core_drill_type'],
+    data() {
+      const params = this.$route.params;
       return {
-        id: null,
-        type: null,
-        host: null,
-        drillSite: null,
-        drillTime: null,
-        hostName: null,
-        presetCase: null,
-        drillSituation: null,
-        imageList: null,
-        signImageList: null,
-        commentScore: 5,
-
-        org: {},
-        ...other,
+        id: params ? params.id : null,
+        isShow: false,
+        formData: this.reset(),
+        drillTypeOptions: [],
+        formFileListDefualtValue: [],
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'], // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
+        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 {
-        getDrillTask(id).then(response => {
-          this.formData = response.data;
-          this.formFileListDefualtValue=response.data.fileList;
-          this.formData.signImageList = this.getSingImageList();
-          this.loading = false;
+    props: {},
+    watch: {},
+    computed: {
+      ...mapState(["loginUser"]),
+    },
+    methods: {
+      ...mapMutations([]),
+      getLabel,
+      reset(other = {}) {
+        return {
+          id: null,
+          type: null,
+          host: null,
+          drillSite: null,
+          drillTime: null,
+          hostName: null,
+          presetCase: null,
+          drillSituation: null,
+          imageList: null,
+          signImageList: null,
+          commentScore: 5,
+
+          org: {},
+          ...other,
+        };
+      },
+      async refresh(id, other) {
+        if (!id) {
+          this.reset(other);
+        } else {
+          getDrillTask(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;
+        console.log("getSingImage", res)
+        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();
+      },
+      initDrillTypeOptions() {
+        initList().then(response => {
+          this.drillTypeOptions = response;
         })
       }
+      // 事件
+      //apimark//
     },
-    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;
-      console.log("getSingImage", res)
-      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();
+    mounted() {
     },
-    initDrillTypeOptions() {
-      initList().then(response => {
-        this.drillTypeOptions = response;
-      })
-    }
-    // 事件
-    //apimark//
-  },
-  mounted() {
-  },
-};
+  };
 </script>
 
 <!-- <style lang="less">

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

@@ -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> -->