zhbsq-vue-web/src/views/REGISTERTASK/index.vue

<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="详细信息" name="详细信息">
        <el-descriptions border>
          <el-descriptions-item label="活动名称">{{ taskList.acname }}</el-descriptions-item>
          <el-descriptions-item label="任务启动时间">
            {{ taskList.beginTime ? taskList.beginTime.substr(0, 10) : '无' }}
          </el-descriptions-item>
          <el-descriptions-item label="业务备注">{{ taskList.fromKeyword }}</el-descriptions-item>
          <el-descriptions-item label="流程名称">{{ taskList.proname }}</el-descriptions-item>
          <el-descriptions-item label="审核状态">
            <el-tag v-if="taskList.status == 1" type="success">同意</el-tag>
            <el-tag v-else-if="taskList.status == 2" type="danger">驳回</el-tag>
            <el-tag v-else-if="taskList.status == 3" type="info">退回</el-tag>
            <el-tag v-else-if="taskList.status == 0">待审核</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="审核意见">{{ taskList.comments ? taskList.comments : '无' }}</el-descriptions-item>
        </el-descriptions>

        <el-form ref="form" :model="taskList" label-width="auto" style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <el-col :span="12">
                <el-form-item label="姓名：">{{ taskList.formobj.nickName }}</el-form-item>
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-form-item label="头像：">
                <el-image
                  :fit="'contain'"
                  style="
                  width: 100px;
                  margin-top: 10px;
                  border-radius: 5px;
                  margin-bottom: -15px;"
                  :z-index="50000"
                  :src="baseUrl + taskList.formobj.userAvatar"
                  @click="showImagePreview(taskList.formobj.userAvatar)"
                ></el-image>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="类型：">
                <span v-if="taskList.formobj.type == 2">专家</span>
                <span v-else>其它</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族：">{{ taskList.formobj.nation }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名：">{{ taskList.formobj.userName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历：">{{ taskList.formobj.education }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="服务方向：">{{ taskList.formobj.servicesAvailable }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作经验：">{{ taskList.formobj.experience }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专业领域：">{{ taskList.formobj.field }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="研究方向：">{{ taskList.formobj.research }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="学位证书：">
                <el-image
                  :fit="'contain'"
                  style="
                  width: 30%;
                  margin-top: 10px;
                  border-radius: 5px;
                  margin-bottom: -15px;"
                  :z-index="50000"
                  :src="baseUrl + taskList.formobj.diploma"
                  @click="showImagePreview(taskList.formobj.diploma)"
                ></el-image>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资格证书：">
                <el-image
                  :fit="'contain'"
                  style="
                width: 20%;
                margin-top: 10px;
                border-radius: 5px;
                margin-bottom: -15px;
              "
                  :z-index="50000"
                  :src="baseUrl + taskList.formobj.credentials"
                  @click="showImagePreview(taskList.formobj.credentials)"
                ></el-image>
               </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-dialog :visible="BigImgVisible" fullscreen append-to-body @close="BigImgVisible = false">
          <img width="100%" :src="taskList.formobj.fileUrl" alt="" />
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="审批记录" name="审批记录">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in taskList.taskHisAction" :timestamp="item.createTime" placement="top" :key="index + 'taskHisAction'">
            <el-card>
              <p>{{ item.execId }} {{ item.acname }} 于 {{ item.createTime }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <!-- 图片预览弹出框 -->
      <el-dialog
        :visible.sync="imagePreviewVisible"
        width="50%"
        title="预览图片"
        :close-on-click-modal="true"
      >
        <img
          :src="previewImageUrl"
          style="width: 100%; height: auto;"
          alt="预览图片"
        />
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      activeName: '详细信息',
      fileList: [],
      BigImgVisible: false,
      imagePreviewVisible: false, // 控制图片预览弹出框的显示与隐藏
      previewImageUrl: '', // 预览图片的URL
    };
  },
  props: ['taskList'],
  created() {
    if (this.taskList.formobj.fileUrl) {
      this.fileList.push({
        url: this.baseURL + this.taskList.formobj.fileUrl,
        name: "xxx",
      });
    }
  },
  watch: {
    taskList(curVal, oldVal) {
      if (curVal) {
        curVal.formobj.content = curVal.formobj.content.replace(new RegExp('/profile/upload/', 'g'), this.baseUrl + '/profile/upload/');
        this.fileList.pop();
        this.fileList.push({ url: this.baseUrl + curVal.formobj.fileUrl, name: "xxx", });
      }
    },
  },
  methods: {
    handlePictureCardPreview(file) {
      this.taskList.formobj.fileUrl = file.url;
      this.BigImgVisible = true;
    },
    showImagePreview(url) {
      this.previewImageUrl = this.baseURL + url;
      this.imagePreviewVisible = true;
    },
  }
};
</script>

<style></style>