soc_web/src/views/core/drill/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
          :contentStyle="content_style"
          :label-style="labelStyle"
        >
          <el-descriptions-item labelClassName="gx_info_label" label="任务名称">
            {{ formData.title }} </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.typeText }} </el-descriptions-item
          ><el-descriptions-item
            labelClassName="gx_info_label"
            label="演练地点"
          >
            {{ formData.drillSite }} </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
            labelClassName="gx_info_label"
            span="2"
            label="预设案由"
          >
             {{ formData.presetCase }}
          </el-descriptions-item>
          <el-descriptions-item
            labelClassName="gx_info_label"
            span="2"
            label="演练情况"
          >
            {{ formData.drillSituation }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- <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 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-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> -->
      </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";
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: [],
      labelStyle: {
        color: "#000",
        "text-align": "center",
        height: "40px",
        "min-width": "150px",
        "word-break": "keep-all",
      },
      content_style: {
        "text-align": "left",
        "min-width": "300px",
        "word-break": "break-all",
      },
      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 = {}) {
      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//
  },
  mounted() {},
};
</script>

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