You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
472 lines
13 KiB
472 lines
13 KiB
<template>
|
|
<div style="margin-top:10px;overflow: auto;">
|
|
<!-- <el-button type="primary" @click="$refs.flow.addNode('测试节点')">添加节点</el-button>
|
|
<el-button type="primary" @click="handleNext">下一个节点</el-button>
|
|
<br /><br /> -->
|
|
<div class="curvedarrow-upleft curvedarrow"></div>
|
|
<div class="curvedarrow-upright curvedarrow"></div>
|
|
<div class="curvedarrow-bottomleft curvedarrow"></div>
|
|
<div class="curvedarrow-bottomright curvedarrow"></div>
|
|
<avue-flow :height="mapHeight" width="100%" ref="flow" :option="option" v-model="form">
|
|
<template slot-scope="scope" slot="header">
|
|
<!-- <i class="el-icon-delete" @click="$refs.flow.deleteNode(scope.node.id)"></i> -->
|
|
{{scope.node.name}}
|
|
</template>
|
|
<div slot-scope="{node}" style="width:100%">
|
|
<div style="width:100%" v-html='node.content'></div>
|
|
</div>
|
|
</avue-flow>
|
|
<showdialoger :table-name="tableName" :form-info="formDialoger" ref="showdialog">
|
|
</showdialoger>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import {
|
|
show
|
|
} from "@/api/system/baseForm.js"
|
|
import {
|
|
index as getcustomForm,
|
|
show as showcustomForm
|
|
} from "@/api/system/customForm";
|
|
import {
|
|
getSsttIndex
|
|
} from "@/api/sstt"
|
|
import {
|
|
Message
|
|
} from 'element-ui'
|
|
import showdialoger from "@/views/component/showdialog.vue";
|
|
|
|
export default {
|
|
components: {
|
|
showdialoger
|
|
},
|
|
data() {
|
|
return {
|
|
count: 0,
|
|
form: '',
|
|
mapHeight: 0,
|
|
idcard: '',
|
|
tableName: '',
|
|
recordId:"",
|
|
viewRecordId:"",
|
|
allTable:[],
|
|
formDialoger: [],
|
|
imgs:[{
|
|
type:'children',
|
|
sex:'男',
|
|
url:require('@/assets/boy.png')
|
|
},{
|
|
type:'children',
|
|
sex:'女',
|
|
url:require('@/assets/girl.png')
|
|
},{
|
|
type:'adult',
|
|
sex:'男',
|
|
url:require('@/assets/male.png')
|
|
},{
|
|
type:'adult',
|
|
sex:'女',
|
|
url:require('@/assets/female.png')
|
|
},{
|
|
type:'old',
|
|
sex:'男',
|
|
url:require('@/assets/grandfather.png')
|
|
},{
|
|
type:'old',
|
|
sex:'女',
|
|
url:require('@/assets/grandmother.png')
|
|
}],
|
|
urlList: {
|
|
fuels: '/book_cars',
|
|
reforms: '/book_reform',
|
|
medicines: '/book_drug',
|
|
childrens: '/book_children',
|
|
assists: '/book_help',
|
|
communities: '/book_health',
|
|
educations: '/book_education',
|
|
raises: '/book_raise',
|
|
starts_addresses: '/book_address',
|
|
starts_subsidys: '/book_starts',
|
|
doubles: "/book_double",
|
|
disabilities: '/book_number',
|
|
trains: '/book_train',
|
|
insures: '/book_insure',
|
|
cancels: '/book_cancel',
|
|
jobs: '/book_job'
|
|
},
|
|
option: {
|
|
"name": "视图",
|
|
"nodeList": [{
|
|
"id": "all",
|
|
"name": "人员",
|
|
"left": 550,
|
|
"top": 320,
|
|
"content": ''
|
|
},
|
|
{
|
|
"id": "person",
|
|
"name": "个人信息",
|
|
"left": 200,
|
|
"top": 80,
|
|
"content": ''
|
|
},
|
|
{
|
|
"id": "business",
|
|
"name": "业务信息",
|
|
"left": 900,
|
|
"top": 80,
|
|
},
|
|
{
|
|
"id": "view",
|
|
"name": "访视信息",
|
|
"left": 900,
|
|
"top": 480,
|
|
"content": ''
|
|
},
|
|
{
|
|
"id": "raises",
|
|
"name": "居家照护",
|
|
"left": 200,
|
|
"top": 480,
|
|
"content": ''
|
|
}
|
|
],
|
|
"lineList": [
|
|
// {
|
|
// "from": "all",
|
|
// "to": "person"
|
|
// },
|
|
// {
|
|
// "from": "all",
|
|
// "to": "business"
|
|
// },
|
|
// {
|
|
// "from": "all",
|
|
// "to": "view"
|
|
// },
|
|
// {
|
|
// "from": "all",
|
|
// "to": "raises"
|
|
// }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initHeight()
|
|
this.getAllTable()
|
|
// this.form = this.nodeList[this.count].id;
|
|
this.getPerson()
|
|
let that = this
|
|
window.goUrls = function(e,table) {
|
|
that.goUrl(e,table)
|
|
}
|
|
},
|
|
methods: {
|
|
initHeight() {
|
|
let winHeight = document.body.clientHeight
|
|
this.mapHeight = winHeight - 50 - 20
|
|
},
|
|
goUrl(e,table) {
|
|
this.tableName = table
|
|
for(var k of this.allTable){
|
|
if(table==k.table_name){
|
|
this.getFormDetail(e,k.id)
|
|
}
|
|
}
|
|
},
|
|
getPerson() {
|
|
if (this.$route.query?.id) {
|
|
let id = this.$route.query.id
|
|
this.showPersonInfo(id)
|
|
} else {
|
|
Message({
|
|
type: 'warning',
|
|
message: '请先选择人员档案'
|
|
})
|
|
}
|
|
},
|
|
async showPersonInfo(id) {
|
|
const res = await show({
|
|
id: id,
|
|
table_name: 'records'
|
|
})
|
|
|
|
let age = this.getAge(res.idcard)
|
|
let sex = res.sex
|
|
let imgType = age<16?'children':(age>60?'old':'adult')
|
|
let imgUrl=''
|
|
|
|
this.imgs.map(item=>{
|
|
if(sex===item.sex){
|
|
console.log(imgType==item.type,item.url)
|
|
if(imgType==item.type){
|
|
imgUrl = item.url
|
|
}
|
|
|
|
}
|
|
})
|
|
let names = `<div class="persons"><img src='${imgUrl}'><div>${res.name}<div></div>`
|
|
let contents =
|
|
`<div class='workhover' onclick="goUrls(${res.id},'records')"><p>姓名：${res.name}</p><p>性别：${res.sex}</p><p>年龄：${age}</p><p>联系方式：${res.mobile}</p><p>残疾类别：${res.disabilitytype}</p><p>残疾等级：${res?.disabilitylevel}</p><p>现居住地：${res.reside}</p></div>`
|
|
|
|
let views = ''
|
|
let workflows = ''
|
|
this.idcard = res.idcard
|
|
if (res.idcard_viewrecords_idcard_relation.length > 0) {
|
|
for (var k of res.idcard_viewrecords_idcard_relation) {
|
|
if (k.checkstatus == '通过') {
|
|
views += `<div class='workhover' onclick="goUrls(${k.id},'viewrecords')"><p>${k.viewtime?.substring(0,10)}/${k.viewscene}<p></div>`
|
|
}
|
|
}
|
|
}
|
|
if (res.idcard_workflows_idcard_relation.length > 0) {
|
|
for (var k of res.idcard_workflows_idcard_relation) {
|
|
if (k.work_status == '通过') {
|
|
// 辅具适配
|
|
|
|
for (var u in this.urlList) {
|
|
if (k.guanlianbiao == u) {
|
|
// this.tableName = u
|
|
// workflows +=`<div class='workhover' onclick="goUrls('${this.urlList[u]}','${res.idcard}')">`
|
|
workflows += `<div class='workhover' onclick="goUrls(${k.detail.id},'${u}')">`
|
|
}
|
|
}
|
|
|
|
if (k.guanlianbiao == 'assists') {
|
|
workflows += `<p>${k.created_at?.substring(0,10)}/${k.guanlianbiaoming}<p>`
|
|
workflows += `<p>申请年限：${k.detail.shenqingnianxian}<p>`
|
|
workflows += `<p>管理年限：${k.detail.guanlinianxian}<p>`
|
|
workflows += `<p>辅具类别：${k.detail.sub_type}<p>`
|
|
workflows += `<p>可申请补贴金额：${k.detail.apply_money}<p>`
|
|
workflows += `<p>已申请补贴金额：${k.detail.get_money}<p>`
|
|
workflows += `<p>结余金额：${k.detail.surplus_money}<p>`
|
|
} else {
|
|
workflows += `<p>${k.created_at?.substring(0,10)}/${k.guanlianbiaoming}<p>`
|
|
}
|
|
workflows += "</div>"
|
|
}
|
|
}
|
|
}
|
|
|
|
this.option['nodeList'][0]['content'] = names
|
|
this.option['nodeList'][1]['content'] = contents
|
|
this.option['nodeList'][2]['content'] = workflows
|
|
this.option['nodeList'][3]['content'] = views
|
|
this.getSstt()
|
|
},
|
|
getSstt() {
|
|
getSsttIndex({
|
|
idcard: this.idcard,
|
|
start_date: '2020-01-01',
|
|
page: 1
|
|
}).then(res => {
|
|
let raises = ''
|
|
for (var k of res) {
|
|
raises += `<p>${k.start_time?.substring(0,10)}/${k.status_text}<p>`
|
|
}
|
|
this.option['nodeList'][4]['content'] = raises
|
|
})
|
|
},
|
|
// 获取所有业务表
|
|
async getAllTable(){
|
|
const res = await getcustomForm({
|
|
page: 1,
|
|
page_size: 999
|
|
})
|
|
this.allTable = res.data
|
|
},
|
|
// 获取点击的业务表字段
|
|
async getFormDetail(e,tableId) {
|
|
const res = await showcustomForm({
|
|
id: tableId
|
|
});
|
|
// this.title = res.name;
|
|
//字段处理
|
|
let {
|
|
fields,
|
|
relation
|
|
} = res;
|
|
if (
|
|
!fields ||
|
|
!relation ||
|
|
!fields instanceof Array ||
|
|
!relation instanceof Array
|
|
) {
|
|
throw new Error("fields或relation格式错误");
|
|
}
|
|
this.formDialoger = fields.sort(this.handle('sort'));
|
|
this.$refs['showdialog'].setId(e);
|
|
this.$refs['showdialog'].show();
|
|
},
|
|
handle(property) {
|
|
return function(a, b) {
|
|
const val1 = a[property];
|
|
const val2 = b[property];
|
|
return val1 - val2;
|
|
}
|
|
},
|
|
getAge(iden) {
|
|
let val = iden.length;
|
|
let myDate = new Date();
|
|
let month = myDate.getMonth() + 1;
|
|
let day = myDate.getDate();
|
|
let age = 0;
|
|
|
|
if (val === 18) {
|
|
age = myDate.getFullYear() - iden.substring(6, 10) - 1;
|
|
|
|
if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;
|
|
|
|
}
|
|
if (val === 15) {
|
|
age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
|
|
|
|
if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;
|
|
}
|
|
|
|
return age
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.curvedarrow {
|
|
position: relative;
|
|
width: 0;
|
|
border-top: 30px solid transparent;
|
|
border-right: 30px solid #147d38;
|
|
}
|
|
|
|
.curvedarrow:after {
|
|
content: "";
|
|
position: absolute;
|
|
border: 0 solid transparent;
|
|
border-top: 10px solid #147d38;
|
|
border-radius: 100px 0 0 0;
|
|
top: -94px;
|
|
left: -167px;
|
|
width: 182px;
|
|
height: 99px;
|
|
}
|
|
|
|
.curvedarrow-upleft {
|
|
position: relative;
|
|
left: 483px;
|
|
top: 210px;
|
|
-webkit-transform: rotate(180deg) translateX(100%);
|
|
transform: rotate(194deg) translateX(100%);
|
|
}
|
|
|
|
.curvedarrow-upleft:after {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.curvedarrow-upright {
|
|
left: 842px;
|
|
top: 210px;
|
|
transform: rotate(-60deg) translateX(100%);
|
|
}
|
|
|
|
.curvedarrow-upright:after {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.curvedarrow-bottomleft {
|
|
left: 457px;
|
|
top: 447px;
|
|
transform: rotate(95deg) translateX(100%);
|
|
}
|
|
|
|
.curvedarrow-bottomleft:after {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.curvedarrow-bottomright {
|
|
left: 880px;
|
|
top: 350px;
|
|
transform: rotate(10deg) translateX(100%);
|
|
}
|
|
|
|
.curvedarrow-bottomright:after {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/deep/ .workhover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/deep/ .workhover:hover {
|
|
color: #147d38
|
|
}
|
|
|
|
/deep/ .avue-flow {
|
|
margin-top: -120px
|
|
}
|
|
|
|
/deep/ .avue-grid {
|
|
background-image: none;
|
|
}
|
|
|
|
/deep/ .avue-flow__node {
|
|
height: 300px;
|
|
width: 250px;
|
|
}
|
|
|
|
/deep/ .avue-flow__node-drag {
|
|
display: none;
|
|
}
|
|
|
|
/deep/ .avue-flow__node--active {
|
|
border-color: #147d38;
|
|
}
|
|
|
|
/deep/ .avue-flow__node-header {
|
|
flex: none;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
background-color: #147d38
|
|
}
|
|
|
|
/deep/ .avue-flow__node-body {
|
|
height: 250px;
|
|
flex: none;
|
|
overflow: auto;
|
|
text-align: left;
|
|
padding: 15px;
|
|
font-size: 15px;
|
|
align-items: normal;
|
|
}
|
|
|
|
/deep/ .jtk-droppable {
|
|
height: 300px !important;
|
|
width: 250px !important;
|
|
}
|
|
|
|
/deep/ .avue-flow__node-body .persons {
|
|
font-size: 26px;
|
|
text-align: center;
|
|
height: 150px;
|
|
width: 150px;
|
|
background: #ddd;
|
|
border-radius: 100%;
|
|
/* line-height: 150px; */
|
|
margin: 35px auto;
|
|
text-align: center;
|
|
padding-top: 10px;
|
|
}
|
|
/deep/ .avue-flow__node-body .persons img{
|
|
display:inline-block;
|
|
width:50%
|
|
}
|
|
</style>
|