钉钉审批页面模板
钉钉没有提供审批页面的前端,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