yudao-ui-saas/src/views/oa/universal/detail.vue

<template>
  <div class="widget-wrapper">
    <div class="widget-list">
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <span class="field-required">*</span>
          <div class="field-name">申请人</div>
        </div>
        <div class="field-component">
          <span :title="form.loginName">{{ form.employeeName }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">部门</div>
        </div>
        <div class="field-component">
          <span :title="form.deptName">{{ form.deptName }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">职位</div>
        </div>
        <div class="field-component">
          <span :title="form.position">{{ form.position }}</span>
        </div>
      </div>
    
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <span class="field-required">*</span>
          <div class="field-name">手机号</div>
        </div>
        <div class="field-component">
          <span :title="form.contactNumber">{{ form.employeePhone }}</span>
        </div>
      </div>


      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <span class="field-required">*</span>
          <div class="field-name">事项标题</div>
        </div>
        <div class="field-component">
          <span :title="form.email">{{ form.title }}</span>
        </div>
      </div>


      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">详细描述</div>
        </div>
        <div class="field-component">
          <span :title="form.education">{{ form.description }}</span>
        </div>
      </div>






      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">附件</div>
        </div>
        <div class="field-component" v-for="(item, index) in form.fileList" :key="index">
          <a :href="item.url" target="_blank" :title="item.name" style="color: #5094d5;">{{ item.name }}</a>
          <!-- <span style="color: #5094d5;cursor: pointer;">

          </span> -->
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">备注</div>
        </div>
        <div class="field-component">
          <span :title="form.remarks">{{ form.remarks }}</span>
        </div>
      </div>

      <div class="fx-field x-grid-col-12" v-if="form.auditStatus==2">
        <div class="field-label">
          <span class="field-required">*</span>
          <div class="field-name">审批意见</div>
        </div>

        <el-input type="textarea" v-model="reason" placeholder="请输入审批建议" />
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">流程动态</div>
        </div>
        <el-timeline>
          <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
            :type="getTimelineItemType(item)">
            <p style="font-weight: 700">任务：{{ item.name }}</p>
            <el-card :body-style="{ padding: '10px' }">
              <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
                审批人：{{ item.assigneeUser.nickname }}
                <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
              </label>
              <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
              <label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
              <label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间：</label>
              <label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{
                parseTime(item.endTime)
                }}</label>
              <label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时：</label>
              <label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal">
                {{ getDateStar(item.durationInMillis) }} </label>
              <p v-if="item.reason">
                <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="fx-field x-grid-col-12" v-if="form.auditStatus==2">
        <div style="float: right;">
          <el-button @click="handleAudit(false)">驳回</el-button>
          <el-button type="primary" @click="handleAudit(true)">同意</el-button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getDetail,completeTask } from "@/api/oa/universal"
export default {
  props: {
    id: {
      type: [String, Number],
      default: undefined
    },
  },
  data() {
    return {
      entryId: undefined, // 编号
      reason: '',
      auditRule: {
        reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }],
      },
      tasks: [
        {
          "id": "f514d489-0afd-11ed-a881-427d68986255",
          "name": "领导审批",
          "claimTime": null,
          "createTime": 1658632137000,
          "suspensionState": null,
          "processInstance": {
            "id": "f51374f1-0afd-11ed-a881-427d68986255",
            "name": "OA 请假",
            "startUserId": 1,
            "startUserNickname": "芋道源码",
            "processDefinitionId": "oa_leave:3:f07c1280-0afd-11ed-a881-427d68986255"
          },
          "endTime": null,
          "durationInMillis": null,
          "result": 1,
          "reason": null,
          "definitionKey": "task-01",
          "assigneeUser": {
            "id": 1,
            "nickname": "芋道源码",
            "deptId": 103,
            "deptName": "研发部门"
          },
          "parentTaskId": null,
          "children": null
        }
      ],
      peopleList: ['林动', '萧炎', '叶凡'],
      // 表单参数
      form: {
        loginName: '张三',
        dept: '软件工程院',
      },
    };
  },
  created() {
    // this.entryId = this.id || this.$route.query.id;
    // console.log(this.entryId);
    // this.getDetail();
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        // console.log(val);
        this.entryId = val;
        this.getDetail();
      }
    }
  },
  methods: {
    handleEdit() {
      this.$router.push({ path: '/oa/entry/edit' })
    },
    handleAudit(pass) {
      if (!this.reason) {
        this.$message({
          message: '请填写审批意见',
          type: 'warning',
          customClass: 'myBox'
        });
        return;
      } else {
        const data = {
          id: '12',
          reason: this.reason,
          auditPass:pass
        }
        if (pass) {
          this.$modal.msgSuccess({
              message: '审批通过成功！',
              customClass: 'myBox'
            });
          // completeTask(data).then(response => {
          //   this.$modal.msgSuccess({
          //     message: '审批通过成功！',
          //     customClass: 'myBox'
          //   });
          // });
        } else {
          this.$modal.msgSuccess({
              message: '审批不通过成功！',
              customClass: 'myBox'
            });
          // completeTask(data).then(response => {
          //   this.$modal.msgSuccess({
          //     message: '审批不通过成功！',
          //     customClass: 'myBox'
          //   });
          // });
        }
      }
    },
    getTimelineItemIcon(item) {
      if (item.result === 1) {
        return 'el-icon-time';
      }
      if (item.result === 2) {
        return 'el-icon-check';
      }
      if (item.result === 3) {
        return 'el-icon-close';
      }
      if (item.result === 4) {
        return 'el-icon-remove-outline';
      }
      if (item.result === 5) {
        return 'el-icon-back'
      }
      return '';
    },
    getTimelineItemType(item) {
      if (item.result === 1) {
        return 'primary';
      }
      if (item.result === 2) {
        return 'success';
      }
      if (item.result === 3) {
        return 'danger';
      }
      if (item.result === 4) {
        return 'info';
      }
      if (item.result === 5) {
        return 'warning';
      }
      if (item.result === 6) {
        return 'default'
      }
      return '';
    },
    /** 获得请假信息 */
    getDetail() {
      getDetail(this.entryId).then(response => {
        this.form = response.data;
        this.tasks = response.data.auditRecordList;
      });
    },
  }
};
</script>
<style>
/* .el-timeline-item__wrapper {
  top: -12px !important;
} */
</style>
<style lang="scss" scoped>
.widget-wrapper>.widget-list {
  display: flex;
  flex-wrap: wrap;
}

.x-grid-col-6 {
  width: 50%;
}

.x-grid-col-12 {
  width: 100%;
}

.fx-field {
  line-height: 20px;
  padding: 7px 12px 12px;
  position: relative;
}

.fx-field .field-label {
  word-wrap: break-word;
  color: #141e31;
  display: flex;
  font-weight: 600;
  line-height: 20px;
  padding: 5px 0;
  position: relative;
  word-break: break-word;
}

.fx-field .field-label .field-required {
  color: #eb5050;
  margin-left: -6px;
  position: relative;
}

.fx-field .field-label .field-name {
  overflow: hidden;
}

.field-component {
  word-wrap: break-word;
  background: #f5f6f8;
  border-radius: 2px;
  color: #141e31;
  font-size: 14px;
  line-height: 20px;
  min-height: 32px;
  padding: 6px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

ul {
  padding-left: 0px !important;
}

.el-tag+.el-tag {
  margin-left: 10px;
}
</style>