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

<template>
  <div class="widget-wrapper">
    <div class="widget-list" v-loading="loading">
      <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">
          <div v-for="(item, index) in form.fileList" :key="index">
            <a :href="item.url" target="_blank" :title="item.name" style="color: #5094d5;">{{ item.name }}</a>
          </div>
        </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>
    <div class="widget-list" v-loading="loading">
      <div class="fx-field x-grid-col-12" v-if="(form.auditStatus==2 || form.auditStatus==1) && name=='todo'">
        <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" >
        <div v-if="name=='todo'">
          <el-button type="primary" @click="handleAudit(true)" v-loading.fullscreen.lock="fullscreenLoading">同意</el-button>
            <el-button @click="handleAudit(false)" v-loading.fullscreen.lock="fullscreenLoading">驳回</el-button>
          </div>
          <div v-if="name=='my'">
            <el-button v-if="form.auditStatus==1" type="warning" @click="handleRevocation()" v-loading.fullscreen.lock="fullscreenLoading">撤回</el-button>
          </div>
      </div>

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

<script>
import { getDetail,agree,disagree,revocation } from "@/api/oa/universal"
import {getDate} from "@/utils/dateUtils";
export default {
  props: {
    id: {
      type: [String, Number],
      default: undefined
    },
    name: {
      type: String,
      default: undefined
    },
  },
  data() {
    return {
      fullscreenLoading:false,
      loading:false,
      reason: '',
      auditRule: {
        reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }],
      },
      tasks: [],
      peopleList: [],
      // 表单参数
      form: {},
    };
  },
  created() {
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        this.getDetail(val);
      }
    }
  },
  methods: {
    getDateStar(ms) {
      return getDate(ms);
    },
    handleRevocation(){
      console.log(this.form.taskId);
      this.$modal.confirm('是否确认撤回?').then(() => {
        this.fullscreenLoading = true;
        revocation({id:this.form.taskId}).then(response => {
          this.fullscreenLoading = false;
          this.$modal.msgSuccess("撤回成功");
          this.$parent.$parent.closeEdit();
        })
      }).catch(() => { });
    },
    handleAudit(pass) {
      if (!this.reason) {
        this.$message({
          message: '请填写审批意见',
          type: 'warning',
          customClass: 'myBox'
        });
        return;
      } else {
        const data = {
          id: this.form.taskId,
          reason: this.reason,
        }
        if (pass) {
          this.fullscreenLoading = true;
          agree(data).then(response => {
            this.fullscreenLoading = false;
            this.$parent.$parent.closeEdit();
            this.$modal.msgSuccess({
              message: '审批通过成功！',
              customClass: 'myBox'
            });
          });
        } else {
          this.fullscreenLoading = true;
          disagree(data).then(response => {
            this.fullscreenLoading = false;
            this.$parent.$parent.closeEdit();
            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(val) {
      this.$parent.$parent.detailLoading = true
      getDetail(val).then(response => {
        this.$parent.$parent.detailLoading = false
        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>