钉钉审批详情页面

钉钉审批页面模板
钉钉没有提供审批页面的前端，So自己做了一个哈哈哈

用的iView组件

<div class="info">
   <Avatar class="tuid" size="large" style="background: #3296FA">{{str(process_instance.originatorUserid)}}</Avatar>
            <div class="tuid">
              {{ process_instance.originatorUserid }}
              <span
                style="font-size: 10px;color:green"
                v-if="
                  process_instance.result == 'agree' &&
                    process_instance.status == 'COMPLETED'
                "
                ><br />审批通过</span
              >
              <span
                style="font-size: 9.5px;color:rgb(95, 99, 97)"
                v-if="process_instance.result == 'refuse'"
                ><br />审批拒绝</span
              >
              <span
                style="font-size: 9.5px;color:rgb(95, 99, 97)"
                v-if="process_instance.status == 'TERMINATED'"
                ><br />撤销</span
              >
            </div>
            <Spin size="large" v-if="spinShow" class="lod"></Spin>
            <br />
            <div v-if="process_instance.status != 'TERMINATED'">
              <div class="wr">
                <p
                  class="ag"
                  v-if="
                    process_instance.result == 'agree' &&
                      process_instance.status == 'COMPLETED'
                  "
                >
                  审批通过
                </p>
                <p class="ag" v-if="process_instance.result == 'refuse'">
                  审批拒绝
                </p>
                <p class="agc" v-if="process_instance.status == 'TERMINATED'">
                  撤销
                </p>
              </div>
            </div>
            <div v-else-if="process_instance.status == 'TERMINATED'">
              <div class="cx">
                <p class="agc" v-if="process_instance.status == 'TERMINATED'">
                  撤销
                </p>
              </div>
            </div>

            <Divider style="margin-top: 8%;" />
            审批编号：{{ process_instance.businessId }}
            <br />
            所在部门：{{ process_instance.originatorDeptName }}
            <div v-for="item in form_component_values" :key="item.index">
              {{ item.name }}:<span
                class="n"
                v-if="item.componentType != 'DDAttachment' && item.value !='null'"  
                >{{ item.value }}</span
              >

              <!-- 文件类型 -->
              <div v-if="item.componentType == 'DDAttachment'">
                <div
                  class="file"
                  v-for="itemm in toJson(item.value)"
                  :key="itemm.index"
                  @click="up1(itemm)"
                >
                  <div class="f">
                    <!-- {{itemm.fileId}} -->
                    {{ itemm.fileName }}
                  </div>
                  <div class="f">
                    {{ (itemm.fileSize / 1000).toFixed(2) }}KB
                  </div>
                </div>
              </div>
            </div>
            
            <Divider />
            <div class="task">
              <Timeline>
                <!-- <div v-for="item in process_instance.operation_records" :key="item.userid"> -->

                <TimelineItem
                  color="green"
                  v-for="item in process_instance.operationRecords"
                  :key="item.index"
                >
                  <Avatar style="background: #3296FA" slot="dot">{{
                    str(item.userid)
                  }}</Avatar>
                  <span class="right">{{ item.date }}</span>
                  <!-- <Icon type="ios-trophy" slot="dot"></Icon> -->
                  <p class="uid">{{ item.userid }}</p>
                  
                  <div class="remark">
                    <div v-if="item.operationResult=='REFUSE'">已拒绝</div>
                    <div v-if="item.operationResult=='AGREE'">同意</div>
                    <p v-if="item.operationType == 'START_PROCESS_INSTANCE'">
                      发起申请
                    </p>
                    <p
                      v-if="item.operationType == 'TERMINATE_PROCESS_INSTANCE'"
                    >
                      撤销
                    </p>
                    <p v-if="item.operationType == 'FINISH_PROCESS_INSTANCE'">
                      已结束
                    </p>
                    <p v-if="item.operationType == 'ADD_REMARK'">添加评论</p>
                    <p v-if="item.remark != null">
                      {{
                        item.remark
                          .split("[")
                          .join("@")
                          .split("]")
                          .join("")
                          .replace(/\([^\)]*\)/g, " ") || item.remark
                      }}
                    </p>

                    <!-- 文件类型 -->
                    <div v-if="item.attachments != null">
                      <div
                        class="file"
                        v-for="itemms in item.attachments"
                        :key="itemms.index"
                        @click="up1(itemms)"
                      >
                        <div class="f">
                          <!-- {{itemm.fileId}} -->
                          {{ itemms.fileName }}
                        </div>
                        <div class="f">
                          {{ (itemms.fileSize / 1000).toFixed(2) }}KB
                        </div>
                      </div>
                    </div>
                    <!-- {{ item.attachments }} -->
                  </div>
                </TimelineItem>
                <!-- </div>  -->
              </Timeline>
            </div>
          </div>

process_instance: "",
form_component_values: [],


methods: { 
    str(value) {
      //alert(value)
      if (value != null) {
        return value.substring(value.length - 2, value.length);
      }
      //return value.replace(value.substring(value.length - 2, value.length), '')
    },
    str1(value) {
      //return value.replace(value.substring(value.length - 2, value.length), '')
      return value.replace(value.substring(value.indexOf("("), value.indexOf(")") + 1)," ");
    },
  },

mounted(){
    var _that=this;
    _that.$http.get("/spinfo?spid=fd35c4fe-8902-44a7-8af3-xxx") //审批ID
        .then((response) => {
          console.log(response.data);
          //_that.spinShow = false;
          _that.process_instance = response.data.processInstance;
          _that.form_component_values = _that.process_instance.formComponentValues;
        });
  }

数据可参考钉钉文档根据审批ID获取审批详情
https://ding-doc.dingtalk.com/doc#/serverapi2/xgqkvx