zhxg_pc/src/views/routine/leaveApplication/detail.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">请假详情</span>
        <el-button style="float: right" size="mini" type="danger" @click="goBack">关闭</el-button>
        <!-- <el-button style="float: right" size="mini" type="success" v-print="printobj">打印</el-button> -->
      </div>
      <div id="disposal" class="el-container">
        <div class="table-container">
          <h2 style="text-align: center">请假申报</h2>

          <div class="block">
            <!-- 请假表单 -->

            <el-descriptions class="margin-top" title="" :column="2" size="medium" border style="width: 100%">
              <el-descriptions-item>
                <template slot="label"> 学号 </template>
                {{ form.stuNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 姓名 </template>
                {{ form.studentName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 性别 </template>
                {{ form.gender }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 院部 </template>
                {{ form.departmentName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 班级 </template>
                {{ form.className }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 联系电话 </template>
                {{ form.phoneNumber }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 家长姓名 </template>
                {{ form.fatherName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 家长联系电话 </template>
                {{ form.fatherRelation }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 请假事由 </template>
                {{ form.leaveType == '0' ? '病假' : '事假' }}
                {{ form.reason }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 请假起始时间 </template>
                {{ form.startDate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 请假截止时间 </template>
                {{ form.endDate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 请假天数 </template>
                {{ form.leaveDays }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 目的地 </template>
                {{ form.destination }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 目的地详细 </template>
                {{ form.destinationDetails }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 是否离桂 </template>
                {{ form.leavingGx == '0' ? '否' : '是' }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 安全承诺书 </template>
                {{ form.safetyPromise == true ? '已勾选' : '未勾选' }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 请假人签字上传 </template>
                <image-preview :src="form.applicantSignature" :width="100" :height="100" />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 材料附件 </template>
                <image-preview :src="form.attachment" :width="100" :height="100" />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 备注 </template>
                {{ form.remark }}
              </el-descriptions-item>
            </el-descriptions>

          </div>
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)" :color="setColor(item.finishTime)">
                <p style="font-weight: 700">{{ item.taskName }}</p>
                <el-card :body-style="{ padding: '10px' }">
                  <el-descriptions class="margin-top" :column="1" size="small" border>
                    <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-user" />办理人</template>
                      {{ item.assigneeName }}
                      <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-user" />候选办理</template>
                      {{ item.candidate }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label">
                      <template slot="label"><i class="el-icon-date" />接收时间</template>
                      {{ item.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-date" />处理时间</template>
                      {{ item.finishTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.duration" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-time" />耗时</template>
                      {{ item.duration }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.comment" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-tickets" />处理意见</template>
                      {{ item.comment.comment }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
      <!--流程流转记录-->
      <!--表单信息-->
    </el-card>
  </div>
</template>

<script>
import { flowRecord } from '@/api/flowable/finished'
import Parser from '@/components/parser/Parser'
import { getProcessVariables, flowXmlAndNode } from '@/api/flowable/definition'
import flow from '@/views/flowable/task/finished/detail/flow'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getLeaveApplicationByProcInsId, getStuInfoByStuId } from '@/api/routine/leaveApplication'

export default {
  name: 'LeaveDetail',
  components: {
    Parser,
    flow,
  },
  props: {},
  data() {
    return {
      // 模型xml数据
      flowData: {},
      activeName: '1',
      // 用户表格数据
      userList: null,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 查询参数
      queryParams: {
        deptId: undefined,
      },
      // 遮罩层
      loading: true,
      flowRecordList: [], // 流程流转数据
      formConfCopy: {},
      src: null,
      taskForm: {
        multiple: false,
        comment: '', // 意见内容
        procInsId: '', // 流程实例编号
        instanceId: '', // 流程实例编号
        deployId: '', // 流程定义编号
        taskId: '', // 流程任务编号
        procDefId: '', // 流程编号
        vars: '',
        targetKey: '',
      },
      variables: [], // 流程变量数据
      variablesData: {}, // 流程变量数据
      variableOpen: false, // 是否加载流程变量数据
      category: null, // 流程分类
      leaveForm: false, // 请假表单
      disposalForm: false, // 处分表单
      form: {},
      // 学生基础信息
      stuInfo: {},
      //打印
      printobj: {
        id: 'disposal',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },
    }
  },
  created() {
    this.taskForm.deployId = this.$route.query && this.$route.query.deployId
    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId
    this.category = this.$route.query.category
    this.disposalForm = true
    this.getLeaveApplicationByProcInsId(this.taskForm.procInsId)
    // 回显流程记录
    // 流程任务重获取变量表单
    //   if (this.taskForm.taskId){
    //     this.processVariables( this.taskForm.taskId)
    //   }

    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId)
  },
  methods: {
    getLeaveApplicationByProcInsId(procInsId) {
      getLeaveApplicationByProcInsId(procInsId).then((response) => {
        this.form = response.data
        this.form.safetyPromise = this.form.safetyPromise == '0' ? false : true
      })
    },
    getStuInfo(stuNo) {
      getStuInfo(stuNo).then((res) => {
        if (res.code == 200) {
          this.stuInfo = res.data
        }
      })
    },
    getStuInfoByStuId(stuNo) {
      getStuInfoByStuId(stuNo).then((res) => {
        if (res.code == 200) {
          this.stuInfo = res.data
        }
      })
    },
    handleClick(tab, event) {
      if (tab.name === '3') {
        flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then((res) => {
          this.flowData = res.data
        })
      }
    },
    setIcon(val) {
      if (val) {
        return 'el-icon-check'
      } else {
        return 'el-icon-time'
      }
    },
    setColor(val) {
      if (val) {
        return '#2bc418'
      } else {
        return '#b3bdbb'
      }
    },
    /** 流程流转记录 */
    getFlowRecordList(procInsId, deployId) {
      const that = this
      const params = { procInsId: procInsId, deployId: deployId }
      flowRecord(params)
        .then((res) => {
          that.flowRecordList = res.data.flowList
        })
        .catch((res) => {
          this.goBack()
        })
    },
    //   /** 获取流程变量内容 */
    //   processVariables(taskId) {
    //     if (taskId) {
    //       // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
    //       getProcessVariables(taskId).then(res => {
    //         this.variablesData = res.data.variables;
    //         this.variableOpen = true
    //       });
    //     }
    //   },
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      // const obj = { path: 'relieve', query: { t: Date.now() } }
      // this.$tab.closeOpenPage(obj)
      this.$router.back()
      // 关闭窗体 index 当前层索引
      this.$tab.closePage()
    },
  },
}
</script>
<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #e1f3d8;
}

.table-container {
  display: table;
  width: 100%;
}

.table-header,
.table-body {
  display: table-row;
}

.header-cell {
  display: table-cell;
  padding: 8px;
  font-weight: bold;
  text-align: center;
  background-color: #f5f7fa;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}

.form-table {
  margin: 0;
}
</style>