This commit is contained in:
clay 2022-12-25 22:34:51 +08:00
parent 270a6e31a9
commit f1dd48a554
4 changed files with 1432 additions and 15721 deletions

File diff suppressed because it is too large Load Diff

View File

@ -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

View File

@ -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 {