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

<template>
  <div class="edu-training-edit">
    <DialogCom title="调阅任务详情" :visible.sync="isShow" width="960px">
      <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.taskName }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="任务进度">
            <dict-tag
              :options="dict.type.retrieval_task_status"
              :value="formData.status"
            />
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="任务时间">
            {{ formData.planStartTime }}-{{ formData.planEndTime }}
          </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.roleName}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="登记人">
           {{ formData.retrievalUserName}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="调阅开始时间">
           {{ formData.startTime}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="调阅结束时间">
           {{ formData.endTime}}
          </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.taskName
              }}</el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="任务进度">
                <template>
                  <dict-tag
                    :options="dict.type.retrieval_task_status"
                    :value="formData.status"
                  />
                </template>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item prop="trainingStartDateTime" label="任务时间"
                >{{ formData.planStartTime }}-{{
                  formData.planEndTime
                }}</el-form-item
              >
            </el-col>

            <el-col :span="12">
              <el-form-item prop="dueCount" label="调阅机构">{{
                formData.orgName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="dueCount" label="调阅人员">{{
                formData.roleName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="dueCount" label="登记人">{{
                formData.retrievalUserName
              }}</el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item prop="trainingEndDateTime" label="调阅开始时间">{{
                formData.startTime
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="trainingEndDateTime" label="调阅结束时间">{{
                formData.endTime
              }}</el-form-item>
            </el-col>
          </el-row> -->
          <div class="extend_mod">


          <el-table
            v-loading="loading"
            :data="formData.taskDataVoList"
            @selection-change="handleSelectionChange"
            border=""
          >
            <el-table-column label="序号" type="index" width="100" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="硬盘录像机"
              align="center"
              prop="hostName"
            />
            <el-table-column
              label="通道名称"
              align="center"
              prop="channelName"
            />
            <el-table-column label="调阅项目" align="center" prop="project">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.core_registration_project"
                  :value="scope.row.project"
                />
              </template>
            </el-table-column>
            <el-table-column label="检查情况" align="center" prop="situation">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.core_check_type"
                  :value="scope.row.situation"
                />
              </template>
            </el-table-column>
            <el-table-column label="说明" align="center" prop="remark" />
          </el-table>
        </div>
        </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 { getTask } from "@/api/core/task";
export default {
  components: {},
  dicts: [
    "core_registration_project",
    "core_check_type",
    "retrieval_task_status",
  ],
  data() {
    const params = this.$route.params;
    return {
      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",
      },
      id: params ? params.id : null,
      isShow: false,
      formData: this.reset(),
    };
  },
  props: {},
  watch: {},
  computed: {
    ...mapState(["loginUser"]),
  },
  methods: {
    ...mapMutations([]),
    reset(other = {}) {
      return {
        id: null,
        taskName: null,
        status: null,
        planStartTime: null,
        planEndTime: null,
        orgName: null,
        roleName: null,
        retrievalUserName: null,
        startTime: null,
        endTime: null,
        taskDataVoList: [],
        ...other,
      };
    },
    async refresh(id, other) {
      if (!id) {
        this.reset(other);
      } else {
        getTask(id).then((response) => {
          this.formData = response.data;
          this.open = true;
          this.title = "调阅详情";
        });
      }
    },
    async show(id, other = {}) {
      this.id = id;
      await this.refresh(id, other);
      this.isShow = true;
    },
    // 事件
    onHide() {
      this.isShow = false;
    },
    // 事件
    //apimark//
  },
  mounted() {},
};
</script>

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