This commit is contained in:
parent
270a6e31a9
commit
f1dd48a554
File diff suppressed because it is too large
Load Diff
|
|
@ -16,6 +16,8 @@
|
|||
"less": "^3.12.2",
|
||||
"less-loader": "^7.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"node-sass": "4.14.1",
|
||||
"sass-loader": "8.0.2",
|
||||
"signature_pad": "^3.0.0-beta.4",
|
||||
"trim-canvas": "^0.1.2",
|
||||
"vue": "^2.6.11",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 469 B |
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<el-table :data="tableData"
|
||||
@row-click="clickRow"
|
||||
style="width: 100%">
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="approveName"
|
||||
label="审批类型"
|
||||
|
|
@ -35,37 +35,105 @@
|
|||
title="审批详情"
|
||||
:visible.sync="approveOpen"
|
||||
direction="rtl">
|
||||
<div class="top" style="display:flex;padding: 0 10px 10px 10px;">
|
||||
<div style="display: flex;flex-direction: column;">
|
||||
<el-avatar size="medium" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
|
||||
<div class="top">
|
||||
<div class="top_left">
|
||||
<el-avatar size="large"
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
|
||||
<span>Clay</span>
|
||||
</div>
|
||||
<div >
|
||||
<div>
|
||||
<span>未命名表单1</span>
|
||||
<span>进行中</span>
|
||||
<div class="top_right">
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<div>
|
||||
<span style="margin-right: 15px">签名测试</span>
|
||||
<el-tag size="mini">进行中</el-tag>
|
||||
</div>
|
||||
|
||||
<i class="el-icon-printer"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span>编号:</span>
|
||||
<span>442bbc6a-83a6-11ed-a551-fa28000d2c27</span>
|
||||
<span>18cf4de0-828a-11ed-a551-fa28000d2c27</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color:#f5f6f6; height: 15px;width: 100%"></div>
|
||||
<div class="center_up">
|
||||
<el-form ref="form" :model="form" label-width="80px" label-position="top">
|
||||
<el-form-item label="单选框">
|
||||
<div>选项1</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门选择">
|
||||
<div>xx科技有限公司</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员选择">
|
||||
<div class="top_left" style="">
|
||||
<el-avatar size="medium"
|
||||
src="https://pic.rmb.bdstatic.com/bjh/203726324a891b1946ba223209cb3fee.png"></el-avatar>
|
||||
<span>Clay</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="center_down">
|
||||
<div style="background-color:#f5f6f6; height: 15px;width: 100%"></div>
|
||||
<div class="process">
|
||||
<div class="progress">
|
||||
<div class="progress-item">
|
||||
<div class="item_avatar">
|
||||
<el-avatar size="large"
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
|
||||
<i class="el-icon-success success"></i>
|
||||
</div>
|
||||
<div class="item_right">
|
||||
<div style="display: flex;justify-content: space-between;color: #8c8c8c;margin-top: -6px">
|
||||
<span style="margin-right: 15px; font-size: 14px">提交申请</span>
|
||||
<span> 12-23 14:21 </span>
|
||||
</div>
|
||||
<span style="color: #000;">张三</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<div class="item_avatar">
|
||||
<el-avatar size="large"
|
||||
src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
|
||||
</div>
|
||||
<div class="item_right">
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;color: #8c8c8c;margin-top: -6px">
|
||||
<span style="margin-right: 15px;font-size: 14px">审批人</span>
|
||||
<span>处理中</span>
|
||||
</div>
|
||||
<span style="color: #000;">3人(会签)</span>
|
||||
</div>
|
||||
<div class="avatars">
|
||||
<div class="avatars_item" v-for="(item,index) in avatars" :key="index">
|
||||
<el-avatar size="large"
|
||||
:src="item.src"></el-avatar>
|
||||
<i class="el-icon-time clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatars">
|
||||
<div class="avatars_item" >
|
||||
<el-avatar size="large"
|
||||
src="https://pic.rmb.bdstatic.com/bjh/203726324a891b1946ba223209cb3fee.png"></el-avatar>
|
||||
<span>Clay</span>
|
||||
<span>(添加了评论)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- <el-dialog title="发起审批" width="800px" :visible.sync="approveOpen" :close-on-click-modal="false">-->
|
||||
<!-- <el-dialog title="发起审批" width="800px" :visible.sync="approveOpen" :close-on-click-modal="false">-->
|
||||
|
||||
<!-- </el-dialog>-->
|
||||
<!-- </el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -76,12 +144,25 @@ export default {
|
|||
name: "DisposalTask",
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableData: [{
|
||||
approveName: "approveName"
|
||||
}],
|
||||
approveOpen: false,
|
||||
}
|
||||
avatars:[
|
||||
{
|
||||
src:'https://pic.rmb.bdstatic.com/bjh/203726324a891b1946ba223209cb3fee.png'
|
||||
},
|
||||
{
|
||||
src:'https://dd-static.jd.com/ddimg/jfs/t1/188230/26/28979/10654/633026fdEf64e5e84/fc5c07ab3d5eac19.png'
|
||||
},
|
||||
{
|
||||
src:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
// this.getList();
|
||||
},
|
||||
methods: {
|
||||
getToken() {
|
||||
|
|
@ -95,12 +176,12 @@ export default {
|
|||
uuid: "string"
|
||||
}
|
||||
).then(res => {
|
||||
console.log(res)
|
||||
sessionStorage.setItem("token", res.data.data)
|
||||
this.testPublish()
|
||||
})
|
||||
console.log(res);
|
||||
sessionStorage.setItem("token", res.data.data);
|
||||
this.testPublish();
|
||||
});
|
||||
},
|
||||
clickRow(row){
|
||||
clickRow() {
|
||||
this.approveOpen = true;
|
||||
// axios({
|
||||
// method: "get",
|
||||
|
|
@ -120,31 +201,161 @@ export default {
|
|||
//
|
||||
// console.log(row)
|
||||
},
|
||||
getList(){
|
||||
getList() {
|
||||
let token = sessionStorage.getItem("token");
|
||||
axios({
|
||||
method: "get",
|
||||
url: "http://localhost:8000/workflow/process/task",
|
||||
// data: this.setup.process,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
"authorization": token
|
||||
},
|
||||
}
|
||||
}).then(res => {
|
||||
let data = res.data;
|
||||
|
||||
if (data.code == 401){
|
||||
this.getToken()
|
||||
if (data.code == 401) {
|
||||
this.getToken();
|
||||
}
|
||||
this.tableData = data.data.rows
|
||||
console.log(data)
|
||||
})
|
||||
this.tableData = data.data.rows;
|
||||
console.log(data);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ .rtl {
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
.top_left {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #19191a;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
padding: 0 10px 10px 10px;
|
||||
flex: 1;
|
||||
|
||||
|
||||
.top_right {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top_right div:last-child span {
|
||||
|
||||
font-size: 13px;
|
||||
color: rgb(108, 108, 108);
|
||||
}
|
||||
}
|
||||
|
||||
.center_up {
|
||||
padding: 10px 10px 1px 10px;
|
||||
|
||||
/deep/ .el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-form-item__label {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
/deep/ .el-form-item__content {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.process {
|
||||
padding: 20px 10px 50px 10px;
|
||||
|
||||
.progress:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
color: #e4e4e4;
|
||||
background: #e4e4e4;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 1;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
.item_avatar {
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
|
||||
.success {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
bottom: 3px;
|
||||
color: #35b881;
|
||||
border-radius: 50%;
|
||||
font-size: 15px;
|
||||
background: #fff;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.item_right {
|
||||
width: 100%;
|
||||
margin-left: 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.avatars {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7,60px);
|
||||
padding: 4px 0;
|
||||
.avatars_item{
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
.clock {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 28px;
|
||||
border-radius: 50%;
|
||||
font-size: 15px;
|
||||
color: #f78f5f;
|
||||
background: #fff;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
.no-data {
|
||||
|
|
|
|||
Loading…
Reference in New Issue