soc_web/src/views/core/drill/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 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-col :span="12">
              <el-form-item prop="hostId" label="指挥人">{{
                  formData.hostName
                }}
              </el-form-item>
            </el-col>
            <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="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 prop="comment" label="评语">{{
                  formData.comment
                }}
              </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";
import {getDrillTask} from "@/api/core/drill/drillTask";
import {initList} from "@/api/core/drill/drillDictionary";

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(),
      drillTypeOptions: [],
      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([]),
    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.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//
  },
  mounted() {
  },
};
</script>

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