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-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>
                  <el-table v-loading="loading" :data="formData.taskDataVoList" @selection-change="handleSelectionChange">
                    <el-table-column label="序号" type="index" 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>
                </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 {
            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="less">
.edu-training-edit {
}
</style> -->