修改
This commit is contained in:
辉
parent
013dcf564c
commit
4328c6c66e
@ -24,4 +24,29 @@ export function audit(data) {
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//路径信息
|
||||
export function getRouteAuditinfo(signRecordId) {
|
||||
return request({
|
||||
url: `/manage/signroute/getRouteAuditInfo/${signRecordId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
//路径任务
|
||||
export function getRouteNodeInfo(signRecordId) {
|
||||
return request({
|
||||
url: `/manage/signroute/getRouteNodeInfo/${signRecordId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
//路径审核
|
||||
export function updateRouteCheckStatus(data) {
|
||||
return request({
|
||||
url: `/manage/signRecord/updateRouteCheckStatus`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@ -2,17 +2,26 @@ import request from '@/utils/request'
|
||||
|
||||
//新增
|
||||
export function insertScriptEdgeNode(data) {
|
||||
return request({
|
||||
url: '/manage/script/updateScriptEdgeNode',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
return request({
|
||||
url: '/manage/script/updateScriptEdgeNode',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 话术列表
|
||||
export function selectScriptEdgeNode(id) {
|
||||
return request({
|
||||
url: `/manage/script/selectScriptEdgeNode?id=${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
return request({
|
||||
url: `/manage/script/selectScriptEdgeNode?id=${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
//路径任务话术预览
|
||||
export function getFlowScheme(id) {
|
||||
return request({
|
||||
url: `/manage/signroute/getFlowScheme/${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" v-else>
|
||||
<PathReview></PathReview>
|
||||
<PathReview ref="PathReview"></PathReview>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -109,7 +109,8 @@
|
||||
import {
|
||||
getRouteNodeList,
|
||||
getByPatientId,
|
||||
audit
|
||||
audit,
|
||||
updateRouteCheckStatus
|
||||
} from '@/api/manage/Auditing.js'
|
||||
import { getAge } from "@/utils/age";
|
||||
import portrait from '../components/portrait.vue'
|
||||
@ -126,7 +127,7 @@ export default {
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
activeNames: ['-1', '-2', '-3'],
|
||||
list: {},
|
||||
nodelist: [],
|
||||
// nodelist: [],
|
||||
lookitem: {},
|
||||
};
|
||||
},
|
||||
@ -142,10 +143,10 @@ export default {
|
||||
},
|
||||
// 忽略
|
||||
ignore() {
|
||||
let manageRouteNodeIds = []
|
||||
this.nodelist.map(e => {
|
||||
manageRouteNodeIds = [...manageRouteNodeIds, ...e.nodeList.map(el => el.id)]
|
||||
})
|
||||
// let manageRouteNodeIds = []
|
||||
// this.nodelist.map(e => {
|
||||
// manageRouteNodeIds = [...manageRouteNodeIds, ...e.nodeList.map(el => el.id)]
|
||||
// })
|
||||
this.$prompt('请输入忽略备注信息?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -154,7 +155,7 @@ export default {
|
||||
routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName,
|
||||
routeCheckRemark: value,
|
||||
routeCheckStatus: 'DISAGREE',
|
||||
manageRouteNodeIds: manageRouteNodeIds
|
||||
// manageRouteNodeIds: manageRouteNodeIds
|
||||
}
|
||||
audit(obj).then(res => {
|
||||
this.$notify({
|
||||
@ -176,36 +177,46 @@ export default {
|
||||
//审核
|
||||
auditing() {
|
||||
let manageRouteNodeIds = []
|
||||
this.nodelist.map(e => {
|
||||
manageRouteNodeIds = [...manageRouteNodeIds, ...e.nodeList.map(el => el.id)]
|
||||
})
|
||||
// this.nodelist.map(e => {
|
||||
// manageRouteNodeIds = [...manageRouteNodeIds, ...e.nodeList.map(el => el.id)]
|
||||
// })
|
||||
this.$prompt('请输入审核备注信息?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
}).then(({ value }) => {
|
||||
let obj = {
|
||||
routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName,
|
||||
routeCheckRemark: value,
|
||||
routeCheckStatus: 'AGREE',
|
||||
manageRouteNodeIds: manageRouteNodeIds
|
||||
if (this.activeNametab == 'route') {
|
||||
let obj = {
|
||||
routeCheckRemark: value,
|
||||
routeCheckStatus: 'AGREE',
|
||||
signPatientRecordId: this.$route.query.signRecordId
|
||||
}
|
||||
updateRouteCheckStatus(obj).then(res => {
|
||||
this.$notify({
|
||||
type: 'success',
|
||||
title: '提示',
|
||||
message: '路径审核通过',
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$refs.PathReview.info();
|
||||
}, 1500);
|
||||
})
|
||||
} else {
|
||||
let obj = {
|
||||
routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName,
|
||||
routeCheckRemark: value,
|
||||
routeCheckStatus: 'AGREE',
|
||||
// manageRouteNodeIds: manageRouteNodeIds
|
||||
}
|
||||
audit(obj).then(res => {
|
||||
this.$notify({
|
||||
type: 'success',
|
||||
title: '提示',
|
||||
message: '画像审核通过',
|
||||
duration: 3000
|
||||
});
|
||||
})
|
||||
}
|
||||
console.log(obj)
|
||||
// return
|
||||
audit(obj).then(res => {
|
||||
this.$notify({
|
||||
type: 'success',
|
||||
title: '提示',
|
||||
message: '审核通过,即将返回上一页',
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
|
||||
this.$router.push({
|
||||
path: "/task/manualReview",
|
||||
});
|
||||
})
|
||||
}, 3000);
|
||||
})
|
||||
})
|
||||
},
|
||||
info() {
|
||||
@ -213,9 +224,9 @@ export default {
|
||||
res.data.birthDate ? res.data.age = getAge(res.data.birthDate) : ''
|
||||
this.list = res.data
|
||||
})
|
||||
getRouteNodeList({ patientId: this.$route.query.patientId, taskCreateType: 'MANUAL_CREATE', routeCheckStatus: "UNAUDITED" }).then(res => {
|
||||
this.nodelist = res.data
|
||||
})
|
||||
// getRouteNodeList({ patientId: this.$route.query.patientId, taskCreateType: 'MANUAL_CREATE', routeCheckStatus: "UNAUDITED" }).then(res => {
|
||||
// this.nodelist = res.data
|
||||
// })
|
||||
},
|
||||
cancel() {
|
||||
this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
<el-descriptions title="用药情况" style="margin: 30px 0 0;" />
|
||||
<div class="texts">
|
||||
<div class="text">
|
||||
<el-popover placement="right" width="400" trigger="hover">
|
||||
<el-popover placement="bottom" width="400" trigger="hover">
|
||||
<el-descriptions title="用户信息" :column="2">
|
||||
<el-descriptions-item label="用药频次">每日2次</el-descriptions-item>
|
||||
<el-descriptions-item label="药品用法">1片</el-descriptions-item>
|
||||
@ -106,7 +106,7 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="text">
|
||||
<el-popover placement="right" width="400" trigger="hover">
|
||||
<el-popover placement="bottom" width="400" trigger="hover">
|
||||
<el-descriptions title="用户信息" :column="2">
|
||||
<el-descriptions-item label="用药频次">每日2次</el-descriptions-item>
|
||||
<el-descriptions-item label="药品用法">1片</el-descriptions-item>
|
||||
@ -160,12 +160,12 @@
|
||||
</div>
|
||||
<div v-if="tab == 1">
|
||||
<div class="nodetitle">
|
||||
<div>主路径:</div>
|
||||
<div>病种:</div>
|
||||
<div>主路径:{{ informationlist.routeName }}</div>
|
||||
<div>病种:{{ informationlist.diseaseTypeName }}</div>
|
||||
</div>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item title="主路径" name="1">
|
||||
<el-table :data="RouteList" style="width: 100%">
|
||||
<el-table :data="informationlist.nodeList" style="width: 100%">
|
||||
<el-table-column prop="" label="" width="160">
|
||||
<template slot-scope="scope">
|
||||
<div class="zlj" style="font-weight: bold;">
|
||||
@ -189,7 +189,7 @@
|
||||
</el-collapse>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item title="子路径" name="2">
|
||||
<div v-for="(item) in childRouteList" :key="item.id">
|
||||
<div v-for="item in informationlist.childRouteList" :key="item.id">
|
||||
<div class="zljtitle">
|
||||
{{ item.routeName }}
|
||||
</div>
|
||||
@ -217,68 +217,158 @@
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div v-if="tab == 2" class="tabtwo">
|
||||
<div v-for="item in routelist" :key="item.id" style="margin: 0 auto 30px;">
|
||||
<div class="tabtexts">
|
||||
<div class="tabtitle">
|
||||
{{ item.taskTypeName }}-{{ item.taskPartitionDictName }}
|
||||
</div>
|
||||
<div class="tabtext" style="height: 50px;line-height: 30px;">
|
||||
<div class="lefttext">
|
||||
开始节点:
|
||||
</div>
|
||||
<div class="lefttext" style="width:38%">
|
||||
{{ item.routeNodeNameCN }}
|
||||
{{ item.routeNodeDay }}
|
||||
天
|
||||
</div>
|
||||
<div class="lefttext">
|
||||
执行时间:
|
||||
</div>
|
||||
<div class="lefttext" style="width:38%">
|
||||
{{ item.executeTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtext">
|
||||
<div class="lefttext">
|
||||
推送方式:
|
||||
</div>
|
||||
<div class="righttext">
|
||||
<span v-if="item.messagePushSign == 1">
|
||||
短信
|
||||
</span>
|
||||
<span v-if="item.officialPushSign == 1">
|
||||
公众号
|
||||
</span>
|
||||
<span v-if="item.AppletPushSign == 1">
|
||||
小程序
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtexts">
|
||||
<div class="tabtext" style="align-items: center;" v-if="item.messagePushSign == 1">
|
||||
<div class="lefttext">
|
||||
短信模板
|
||||
</div>
|
||||
<div class="righttextarea">
|
||||
{{ item.messageNodeContent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtext" style="align-items: center;" v-if="item.officialPushSign == 1">
|
||||
<div class="lefttext">
|
||||
公众号模板
|
||||
</div>
|
||||
<div class="righttextarea">
|
||||
{{ item.officialNodeContent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtext" style="align-items: center;" v-if="item.AppletPushSign == 1">
|
||||
<div class="lefttext">
|
||||
小程序模板
|
||||
</div>
|
||||
<div class="righttextarea">
|
||||
{{ item.appletNodeContent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtext" style="align-items: center;" v-if="item.templateType == 'SCRIPT'">
|
||||
<div class="lefttext">
|
||||
话术
|
||||
</div>
|
||||
<div class="righttext">
|
||||
<!-- <Scriptpreview></Scriptpreview> -->
|
||||
<el-button type="primary" size="small" @click="scriptlook(item)">预览</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtext" v-else-if="item.templateType == 'PROPAGANDA'">
|
||||
<div class="lefttext">
|
||||
宣教
|
||||
</div>
|
||||
<div class="righttextarea">
|
||||
<span v-html="item.templateDetail.propagandaContent">
|
||||
</span>
|
||||
<!-- <editor v-model="item.templateDetail" :min-height="192" style="width: 100%" /> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtext" v-else-if="item.templateType == 'QUESTIONNAIRE'">
|
||||
<div class="lefttext">
|
||||
问卷
|
||||
</div>
|
||||
<div class="righttextarea">
|
||||
<questionopennew :lookitemnew="item.templateDetail"></questionopennew>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtext" v-else-if="item.templateType == 'TEXT_REMIND'">
|
||||
<div class="lefttext">
|
||||
文字提醒
|
||||
</div>
|
||||
<div class="righttextarea">
|
||||
{{ item.textRemindContent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabtext" v-else>
|
||||
<div class="lefttext">
|
||||
内容
|
||||
</div>
|
||||
<div class="righttextarea" v-html="item.nodeContent">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="话术预览" :visible.sync="lookshow" width="90%">
|
||||
<Scriptpreview :phoneNodeContent="phoneNodeContent" v-if="lookshow"></Scriptpreview>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="lookshow = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getByPatientId,
|
||||
getRouteAuditinfo,
|
||||
getRouteNodeInfo
|
||||
} from '@/api/manage/Auditing.js'
|
||||
import { getAge } from "@/utils/age";
|
||||
import questionopennew from './questionopennew.vue';
|
||||
import Scriptpreview from './Scriptpreviewopen.vue'
|
||||
export default {
|
||||
name: "PathReview",
|
||||
components: { questionopennew, Scriptpreview },
|
||||
data() {
|
||||
return {
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
list: {},
|
||||
tab: 1,
|
||||
activeNames: ['2'],
|
||||
RouteList: [
|
||||
{
|
||||
"routeNodeName": "AFTER_DISCHARGE",
|
||||
"routeNodeDay": 1,
|
||||
executeTime: '2024-06-24',
|
||||
"executionTime": "08:00",
|
||||
"taskPartitionCodes": "HEALTH_ARCHIVE,TPC202405070001",
|
||||
"taskPartitionDictNames": ["健康档案", "康复宣教"]
|
||||
},
|
||||
{
|
||||
"routeNodeName": "AFTER_DISCHARGE",
|
||||
"routeNodeDay": 2,
|
||||
executeTime: '2024-06-25',
|
||||
"executionTime": "08:00",
|
||||
"taskPartitionCodes": "TPC202403290001",
|
||||
"taskPartitionDictNames": ["随访"]
|
||||
}
|
||||
],
|
||||
childRouteList: [
|
||||
{
|
||||
"id": 59,
|
||||
"routeName": "诊断包含123123",
|
||||
"diseaseTypeId": 63,
|
||||
"diseaseTypeName": "眼部疾病",
|
||||
"nodeList": [
|
||||
{
|
||||
"routeNodeName": "AFTER_DISCHARGE",
|
||||
"routeNodeDay": 3,
|
||||
"executionTime": "09:30",
|
||||
"executeTime": "2024-06-27",
|
||||
"taskPartitionCodes": "SPORT_GUIDE",
|
||||
"taskPartitionDictNames": ["运动指导"]
|
||||
},
|
||||
{
|
||||
"routeNodeName": "AFTER_DISCHARGE",
|
||||
"routeNodeDay": 4,
|
||||
"executionTime": "09:00",
|
||||
"executeTime": "2024-06-28",
|
||||
"taskPartitionCodes": "TPC202404220002",
|
||||
"taskPartitionDictNames": ["换药"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
activeNames: ['1', '2'],
|
||||
informationlist: {
|
||||
routeName: "",
|
||||
diseaseTypeName: '',
|
||||
nodeList: [],
|
||||
childRouteList: []
|
||||
},
|
||||
routelist: [],
|
||||
phoneNodeContent: {
|
||||
scriptInfoId: null,
|
||||
flowScheme: null,
|
||||
nodes: [],
|
||||
edges: [],
|
||||
},
|
||||
lookshow: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -286,20 +376,90 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
info() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '加载中',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(255, 255, 255, 0.7)'
|
||||
});
|
||||
getByPatientId(this.$route.query.patientId).then(res => {
|
||||
res.data.birthDate ? res.data.age = getAge(res.data.birthDate) : ''
|
||||
this.list = res.data
|
||||
})
|
||||
getRouteAuditinfo(this.$route.query.signRecordId).then(res => {
|
||||
res.data.nodeList?.forEach(e => {
|
||||
e.taskPartitionDictNames = e.taskPartitionDictNames.split(',')
|
||||
})
|
||||
res.data.childRouteList?.forEach(e => {
|
||||
e.nodeList.forEach(el => {
|
||||
el.taskPartitionDictNames = el.taskPartitionDictNames.split(',')
|
||||
})
|
||||
})
|
||||
this.informationlist = res.data
|
||||
loading.close();
|
||||
})
|
||||
getRouteNodeInfo(this.$route.query.signRecordId).then(res => {
|
||||
this.routelist = res.data
|
||||
})
|
||||
},
|
||||
scriptlook(item) {
|
||||
this.phoneNodeContent = item.phoneNodeContent
|
||||
this.lookshow = true
|
||||
// this.$router.push({
|
||||
// path: "/Scriptpreviewopen",
|
||||
// query: { id: item.phoneNodeContent }
|
||||
// });
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tabtexts {
|
||||
.tabtitle {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.tabtext {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-bottom: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.lefttext {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.righttext {
|
||||
width: 88%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.righttextarea {
|
||||
min-height: 80px;
|
||||
padding: 10px;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabtwo {
|
||||
background-color: #fff;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.zljtitle {
|
||||
font-size: 14px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: #92A2AB;
|
||||
border-bottom: 1px solid #e6ebf5;
|
||||
}
|
||||
|
||||
.zljcard {
|
||||
|
||||
794
src/views/manage/components/Scriptpreviewopen.vue
Normal file
794
src/views/manage/components/Scriptpreviewopen.vue
Normal file
@ -0,0 +1,794 @@
|
||||
<template>
|
||||
<div id="vue-g6-editor">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<!-- <header>
|
||||
<el-button type="primary" plain @click="handledel">返回</el-button>
|
||||
</header> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 工具栏 -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div id="toolbar">
|
||||
<!-- <font-awesome-icon icon="fa fa-history" />
|
||||
<font-awesome-icon icon="heart" />
|
||||
<font-awesome-icon icon="clock" />
|
||||
<font-awesome-icon icon="clock" style="color: #476151" />
|
||||
<i
|
||||
class="el-icon-edit"
|
||||
data-command="save"
|
||||
title="保存"
|
||||
@click="submitForm"
|
||||
>保存</i
|
||||
> -->
|
||||
<!-- <font-awesome-icon icon="heart" /> -->
|
||||
<!-- <FontAwesomeIcon icon="far fa-copy" /> -->
|
||||
<font-awesome-icon data-command="save" class="command fa fa-floppy-o" icon="command far far fa-copy"
|
||||
title="保存"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-reply-all" title="历史数据"
|
||||
@click="readHistoryData"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" class="fa fa-hdd-o" icon="fas fa-file" title="上传数据"
|
||||
@click="readUploadData"></font-awesome-icon>
|
||||
<font-awesome-icon icon="fas fa-download" style="margin-left: 10px" title="另存为文件"
|
||||
@click="saveAsFile">文件</font-awesome-icon>
|
||||
<!-- <FontAwesomeIcon icon="fas fa-image" /> -->
|
||||
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-image" title="另存为图片"
|
||||
@click="openSaveAsImageDialog"></font-awesome-icon>
|
||||
|
||||
<font-awesome-icon style="margin-left: 10px" data-command="undo" icon="fas fa-undo" class="command fa fa-undo"
|
||||
title="撤销"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" data-command="redo" class="command fa fa-repeat"
|
||||
icon="fas fa-repeat" title="重做"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" data-command="delete" class="command fa fa-trash-o"
|
||||
icon="fas fa-trash-alt" title="删除"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" data-command="zoomOut" class="command fa fa-search-minus"
|
||||
icon="fas fa-search-minus" title="缩小"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" data-command="zoomIn" icon="fas fa-search-plus"
|
||||
class="command fa fa-search-plus" title="放大"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-eraser" data-command="clear"
|
||||
class="command fa fa-eraser" title="清除画布"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-arrow-up" data-command="toFront"
|
||||
class="command fa fa-arrow-up" title="提升层级"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-arrow-down" data-command="toBack"
|
||||
class="command fa fa-arrow-down" title="下降层级"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-check-square" data-command="selectAll"
|
||||
class="command fa fa-check-square-o" title="全选"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="far fa-copy" data-command="copy"
|
||||
class="command fa fa-files-o" title="复制"></font-awesome-icon>
|
||||
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-clone" data-command="paste"
|
||||
class="command fa fa-clipboard" title="粘贴"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-expand" data-command="autoZoom"
|
||||
class="command fa fa-expand" title="实际大小"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-compress" data-command="resetZoom"
|
||||
class="command fa fa-compress" title="适应页面"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-object-group" data-command="addGroup"
|
||||
class="command fa fa-object-group" title="组合"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-object-ungroup" data-command="unGroup"
|
||||
class="command fa fa-object-ungroup" title="取消组合"></font-awesome-icon>
|
||||
<font-awesome-icon style="margin-left: 10px" icon="fas fa-crop" data-command="multiSelect"
|
||||
class="command fa fa fa-crop" title="多选"></font-awesome-icon>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 元素面板 + 画布 + 属性栏 -->
|
||||
<el-row>
|
||||
<!-- 元素面板 -->
|
||||
<el-col :span="2">
|
||||
<!-- <div id="itempannel">
|
||||
|
||||
</div> -->
|
||||
</el-col>
|
||||
<!-- 画布 -->
|
||||
<el-col :span="20">
|
||||
<el-col :span="24">
|
||||
<div id="page"></div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<!-- 属性栏 -->
|
||||
<el-col :span="4">
|
||||
<section class="right-part">
|
||||
<!-- 缩略图 -->
|
||||
<div id="minimap">
|
||||
<div class="title">缩略图</div>
|
||||
</div>
|
||||
</section>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗 -->
|
||||
<article>
|
||||
<!-- 下载图片 -->
|
||||
<section class="save-as-image-dialog">
|
||||
<el-dialog title="下载图片" :visible.sync="saveAsImageDialogVisible" width="360px">
|
||||
<el-form label-width="100px" label-position="top">
|
||||
<el-form-item label="选择图片格式">
|
||||
<el-select v-model="saveAsImageFormat">
|
||||
<el-option label="jpg" value="jpg">
|
||||
<span style="float: left">jpg</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">白色背景</span>
|
||||
</el-option>
|
||||
<el-option label="png" value="png">
|
||||
<span style="float: left">png</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">透明背景</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="saveAsImageDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveAsImage">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</article>
|
||||
<!-- 右键菜单 -->
|
||||
<section>
|
||||
<div id="contextmenu">
|
||||
<div data-status="node-selected" class="menu">
|
||||
<el-button data-command="copy" class="command">复制</el-button>
|
||||
<el-button data-command="paste" class="command">粘贴</el-button>
|
||||
<el-button data-command="delete" class="command">删除</el-button>
|
||||
</div>
|
||||
<div data-status="edge-selected" class="menu">
|
||||
<el-button data-command="delete" class="command">删除</el-button>
|
||||
</div>
|
||||
<div data-status="group-selected" class="menu">
|
||||
<el-button data-command="copy" class="command">复制</el-button>
|
||||
<el-button data-command="paste" class="command">粘贴</el-button>
|
||||
<el-button data-command="unGroup" class="command">取消组合</el-button>
|
||||
<el-button data-command="delete" class="command">删除</el-button>
|
||||
</div>
|
||||
<div data-status="canvas-selected" class="menu">
|
||||
<el-button data-command="undo" class="command">撤销</el-button>
|
||||
<el-button data-command="redo" class="command disable">重做</el-button>
|
||||
</div>
|
||||
<div data-status="multi-selected" class="menu">
|
||||
<el-button data-command="copy" class="command">复制</el-button>
|
||||
<el-button data-command="paste" class="command">粘贴</el-button>
|
||||
<el-button data-command="addGroup" class="command">组合</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import G6Editor from "@antv/g6-editor";
|
||||
import mixin from "@/views/system/mianview/mixin";
|
||||
import { getFlowScheme } from "@/api/system/preview";
|
||||
import { construct } from "netflix-conductor-json-tree/dist/index";
|
||||
import Cookies from 'js-cookie'
|
||||
export default {
|
||||
name: "VueG6Editor",
|
||||
props: ['phoneNodeContent'],
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
scriptInfoId: null,
|
||||
flowScheme: null,
|
||||
nodes: [],
|
||||
edges: [],
|
||||
},
|
||||
// form: {
|
||||
// nodes: [{
|
||||
// color
|
||||
// :
|
||||
// "#FA8C16",
|
||||
// id
|
||||
// :
|
||||
// "655c5165",
|
||||
// index
|
||||
// :
|
||||
// 0,
|
||||
// label
|
||||
// :
|
||||
// "自我介绍确认",
|
||||
// nodetype
|
||||
// :
|
||||
// "startNode",
|
||||
// shape
|
||||
// :
|
||||
// "flow-circle",
|
||||
// size
|
||||
// :
|
||||
// "72*72",
|
||||
// type
|
||||
// :
|
||||
// "node",
|
||||
// x
|
||||
// :
|
||||
// 441.5124969482422,
|
||||
// y
|
||||
// :
|
||||
// 60.79999542236328,
|
||||
// }, {
|
||||
// color
|
||||
// :
|
||||
// "#1890ff",
|
||||
// id
|
||||
// :
|
||||
// "8660695d",
|
||||
// index
|
||||
// :
|
||||
// 1,
|
||||
// label
|
||||
// :
|
||||
// "家属是否能代打",
|
||||
// size
|
||||
// :
|
||||
// "100*50",
|
||||
// type
|
||||
// :
|
||||
// "node",
|
||||
// x
|
||||
// :
|
||||
// 242.5124969482422,
|
||||
// y
|
||||
// :
|
||||
// 183.5999984741211,
|
||||
// },
|
||||
// {
|
||||
// color
|
||||
// :
|
||||
// "#1890ff",
|
||||
// id
|
||||
// :
|
||||
// "59c9ceed",
|
||||
// index
|
||||
// :
|
||||
// 2,
|
||||
// label
|
||||
// :
|
||||
// "常规节点",
|
||||
// size
|
||||
// :
|
||||
// "100*50",
|
||||
// type
|
||||
// :
|
||||
// "node",
|
||||
// x
|
||||
// :
|
||||
// 606.5124969482422,
|
||||
// y
|
||||
// :
|
||||
// 187.5999984741211,
|
||||
// }, {
|
||||
// color
|
||||
// :
|
||||
// "#722ED1",
|
||||
// id
|
||||
// :
|
||||
// "16f4c8ba",
|
||||
// index
|
||||
// :
|
||||
// 5,
|
||||
// label
|
||||
// :
|
||||
// "你好，我这边是#机构#的工作人员",
|
||||
// shape
|
||||
// :
|
||||
// "flow-capsule",
|
||||
// size
|
||||
// :
|
||||
// "200*48",
|
||||
// type
|
||||
// :
|
||||
// "node",
|
||||
// x
|
||||
// :
|
||||
// 433.5124969482422,
|
||||
// y
|
||||
// :
|
||||
// 125.5999984741211,
|
||||
// }, {
|
||||
// color
|
||||
// :
|
||||
// "#722ED1",
|
||||
// id
|
||||
// :
|
||||
// "e4839dcc",
|
||||
// index
|
||||
// :
|
||||
// 6,
|
||||
// label
|
||||
// :
|
||||
// "好的是这样的",
|
||||
// shape
|
||||
// :
|
||||
// "flow-capsule",
|
||||
// size
|
||||
// :
|
||||
// "80*48",
|
||||
// type
|
||||
// :
|
||||
// "node",
|
||||
// x
|
||||
// :
|
||||
// 233.5124969482422,
|
||||
// y
|
||||
// :
|
||||
// 251.5999984741211,
|
||||
// }, {
|
||||
// color
|
||||
// :
|
||||
// "#1890ff",
|
||||
// id
|
||||
// :
|
||||
// "392ca0b8",
|
||||
// index
|
||||
// :
|
||||
// 7,
|
||||
// label
|
||||
// :
|
||||
// "家属不能代打",
|
||||
// size
|
||||
// :
|
||||
// "100*50",
|
||||
// type
|
||||
// :
|
||||
// "node",
|
||||
// x
|
||||
// :
|
||||
// 55.51249694824219,
|
||||
// y
|
||||
// :
|
||||
// 299.5999984741211
|
||||
// }, {
|
||||
// color
|
||||
// :
|
||||
// "#1890ff",
|
||||
// id
|
||||
// :
|
||||
// "6bcab22d",
|
||||
// index
|
||||
// :
|
||||
// 8,
|
||||
// label
|
||||
// :
|
||||
// "家属能代打",
|
||||
// size
|
||||
// :
|
||||
// "100*50",
|
||||
// type
|
||||
// :
|
||||
// "node",
|
||||
// x
|
||||
// :
|
||||
// 384.5124969482422,
|
||||
// y
|
||||
// :
|
||||
// 307.5999984741211
|
||||
// },
|
||||
// {
|
||||
// color
|
||||
// :
|
||||
// "#722ED1",
|
||||
// id
|
||||
// :
|
||||
// "dc5de91f",
|
||||
// index
|
||||
// :
|
||||
// 11,
|
||||
// label
|
||||
// :
|
||||
// "好的 麻烦转告一下",
|
||||
// shape
|
||||
// :
|
||||
// "flow-capsule",
|
||||
// size
|
||||
// :
|
||||
// "200*48",
|
||||
// type
|
||||
// :
|
||||
// "node",
|
||||
// x
|
||||
// :
|
||||
// 55.51249694824219,
|
||||
// y
|
||||
// :
|
||||
// 366.5
|
||||
|
||||
// }],
|
||||
// edges: [{
|
||||
// id: "b04d23c7",
|
||||
// index
|
||||
// :
|
||||
// 3,
|
||||
// label
|
||||
// :
|
||||
// "是本人",
|
||||
// shape
|
||||
// :
|
||||
// "flow-polyline-round",
|
||||
// source
|
||||
// :
|
||||
// "655c5165",
|
||||
// sourceAnchor
|
||||
// :
|
||||
// 1,
|
||||
// target
|
||||
// :
|
||||
// "59c9ceed",
|
||||
// targetAnchor
|
||||
// :
|
||||
// 0,
|
||||
// }, {
|
||||
// id
|
||||
// :
|
||||
// "7894068d",
|
||||
// index
|
||||
// :
|
||||
// 4,
|
||||
// label
|
||||
// :
|
||||
// "是家属",
|
||||
// shape
|
||||
// :
|
||||
// "flow-polyline-round",
|
||||
// source
|
||||
// :
|
||||
// "655c5165",
|
||||
// sourceAnchor
|
||||
// :
|
||||
// 3,
|
||||
// target
|
||||
// :
|
||||
// "8660695d",
|
||||
// targetAnchor
|
||||
// :
|
||||
// 0,
|
||||
// }, {
|
||||
// id
|
||||
// :
|
||||
// "6aa429cc",
|
||||
// index
|
||||
// :
|
||||
// 9,
|
||||
// label
|
||||
// :
|
||||
// "能带大",
|
||||
// shape
|
||||
// :
|
||||
// "flow-polyline-round",
|
||||
// source
|
||||
// :
|
||||
// "8660695d",
|
||||
// sourceAnchor
|
||||
// :
|
||||
// 3,
|
||||
// target
|
||||
// :
|
||||
// "392ca0b8",
|
||||
// targetAnchor
|
||||
// :
|
||||
// 0,
|
||||
// },
|
||||
// {
|
||||
// id
|
||||
// :
|
||||
// "02bfc4d0",
|
||||
// index
|
||||
// :
|
||||
// 10,
|
||||
// label
|
||||
// :
|
||||
// "不能代打",
|
||||
// shape
|
||||
// :
|
||||
// "flow-polyline-round",
|
||||
// source
|
||||
// :
|
||||
// "8660695d",
|
||||
// sourceAnchor
|
||||
// :
|
||||
// 1,
|
||||
// target
|
||||
// :
|
||||
// "6bcab22d",
|
||||
// targetAnchor
|
||||
// :
|
||||
// 0
|
||||
// }
|
||||
// ]
|
||||
|
||||
// },
|
||||
// 节点属性表单
|
||||
nodeAttributeForm: {
|
||||
label: "",
|
||||
width: "",
|
||||
height: ""
|
||||
},
|
||||
// 节点属性表单
|
||||
edgeAttributeForm: {
|
||||
label: ""
|
||||
},
|
||||
// 画布属性栏表单
|
||||
canvasAttributeForm: {
|
||||
grid: true,
|
||||
cell: 20
|
||||
},
|
||||
// SVG节点图片URL地址
|
||||
startNodeSVGUrl: require("@/views/system/mianview/start-node.svg"),
|
||||
endNodeSVGUrl: require("@/views/system/mianview/end-node.svg"),
|
||||
regularNodeSVGUrl: require("@/views/system/mianview/regular-node.svg"),
|
||||
conditionNodeSVGUrl: require("@/views/system/mianview/condition-node.svg"),
|
||||
nNodeSVGUrl: "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
|
||||
modelNodeSVGUrl: "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
|
||||
// 编辑器
|
||||
editor: null,
|
||||
saveAsImageDialogVisible: false,
|
||||
saveAsImageFormat: "jpg"
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log()
|
||||
this.initG6Editor();
|
||||
this.getlist();
|
||||
// this.editor.getCurrentPage().save()
|
||||
this.editor.getCurrentPage().hideGrid();
|
||||
this.editor.getCurrentPage().read(this.form);
|
||||
},
|
||||
methods: {
|
||||
getlist() {
|
||||
// console.log(this.$route.query)
|
||||
// console.log(this.phoneNodeContent)
|
||||
// getFlowScheme(this.$route.query.id).then(res => {
|
||||
// this.form = JSON.parse(this.$route.query.id)
|
||||
this.form = JSON.parse(this.phoneNodeContent)
|
||||
this.editor.getCurrentPage().read(this.form);
|
||||
// })
|
||||
},
|
||||
// 初始化
|
||||
initG6Editor() {
|
||||
const _this = this;
|
||||
const editor = new G6Editor();
|
||||
this.editor = editor;
|
||||
G6Editor.track(false);
|
||||
const Command = G6Editor.Command;
|
||||
// 注册新命令save
|
||||
Command.registerCommand("save", {
|
||||
// 禁止保存命令进入队列
|
||||
queue: false,
|
||||
// 命令是否可用
|
||||
enable: (editor) => {
|
||||
return true;
|
||||
},
|
||||
// 正向命令
|
||||
execute(editor) {
|
||||
let needSaveData = editor.getCurrentPage().save();
|
||||
console.log(needSaveData, 'needSaveData');
|
||||
// JSON.parse(JSON.stringify(needSaveData))
|
||||
const text = JSON.stringify(needSaveData)
|
||||
console.log(JSON.parse(JSON.stringify(text)), 'text');
|
||||
localStorage.setItem("flowData", JSON.stringify(needSaveData));
|
||||
_this.save(needSaveData);
|
||||
},
|
||||
// 反向命令
|
||||
back(editor) {
|
||||
console.log("反向命令");
|
||||
console.log(editor);
|
||||
},
|
||||
// 快捷键：Ctrl + S
|
||||
shortcutCodes: [
|
||||
["metaKey", "s"],
|
||||
["ctrlKey", "s"]
|
||||
]
|
||||
});
|
||||
// 画布
|
||||
const flow = new G6Editor.Flow({
|
||||
graph: {
|
||||
container: "page"
|
||||
},
|
||||
align: {
|
||||
line: {
|
||||
// 对齐线颜色
|
||||
stroke: "#FA8C16",
|
||||
// 对齐线粗细
|
||||
lineWidth: 1
|
||||
},
|
||||
// 开启全方位对齐
|
||||
item: true,
|
||||
// 网格对齐
|
||||
grid: true
|
||||
},
|
||||
grid: {
|
||||
// 网孔尺寸
|
||||
cell: 18
|
||||
},
|
||||
shortcut: {
|
||||
// 开启自定义命令保存的快捷键
|
||||
save: true
|
||||
}
|
||||
});
|
||||
window.flow = flow;
|
||||
|
||||
// 设置边
|
||||
flow.getGraph().edge({
|
||||
shape: "flow-polyline"
|
||||
});
|
||||
|
||||
// 元素面板栏
|
||||
const itempannel = new G6Editor.Itempannel({
|
||||
container: "itempannel"
|
||||
});
|
||||
// 工具栏
|
||||
const toolbar = new G6Editor.Toolbar({
|
||||
container: "toolbar"
|
||||
});
|
||||
// 属性栏
|
||||
// const detailpannel = new G6Editor.Detailpannel({
|
||||
// container: "detailpannel"
|
||||
// });
|
||||
// 缩略图
|
||||
let minimapWidth = getComputedStyle(document.querySelector(".right-part")).width;
|
||||
minimapWidth = Number(minimapWidth.replace(/px$/, ""));
|
||||
const minimap = new G6Editor.Minimap({
|
||||
container: "minimap",
|
||||
width: minimapWidth,
|
||||
height: 200
|
||||
});
|
||||
// 右键菜单
|
||||
const contextmenu = new G6Editor.Contextmenu({
|
||||
container: "contextmenu"
|
||||
});
|
||||
// 挂载以上组件到Editor
|
||||
editor.add(flow);
|
||||
editor.add(itempannel);
|
||||
editor.add(toolbar);
|
||||
// editor.add(detailpannel);
|
||||
editor.add(minimap);
|
||||
editor.add(contextmenu);
|
||||
// 挂载到window，方便调试
|
||||
window.editor = editor;
|
||||
|
||||
// 获取当前画布
|
||||
const currentPage = editor.getCurrentPage();
|
||||
currentPage.on("afterchange", (e) => {
|
||||
if (e.action === "add") {
|
||||
if (e.model.nodetype === "startNode" || e.model.nodetype === "endNode") {
|
||||
let nodes = this.editor.getCurrentPage().getNodes();
|
||||
for (const item of nodes) {
|
||||
if (item.model.nodetype === e.model.nodetype && item.model.id !== e.model.id) {
|
||||
this.editor.getCurrentPage().remove(e.item);
|
||||
this.$message.warning("只能有一个开始节点或结束节点");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// 监听（选择对象后）事件
|
||||
currentPage.on("afteritemselected", (ev) => {
|
||||
console.log("打印所选对象属性", ev.item);
|
||||
console.log("打印所选对象数据模型", ev.item.model);
|
||||
const selectedItemDataModel = ev.item.model;
|
||||
// 如果选择的对象是节点
|
||||
if (ev.item.isNode) {
|
||||
this.nodeAttributeForm.label = selectedItemDataModel.label;
|
||||
this.nodeAttributeForm.width = selectedItemDataModel.size.split("*")[0];
|
||||
this.nodeAttributeForm.height = selectedItemDataModel.size.split("*")[1];
|
||||
this.nodeAttributeForm.color = selectedItemDataModel.color;
|
||||
}
|
||||
// 如果选择的对象是边
|
||||
if (ev.item.isEdge) {
|
||||
ev.item.graph.edge({
|
||||
shape: "flow-polyline-round"
|
||||
});
|
||||
this.edgeAttributeForm.label = selectedItemDataModel.label;
|
||||
this.edgeAttributeForm.shape = selectedItemDataModel.shape;
|
||||
}
|
||||
});
|
||||
// 监听（删除后）事件
|
||||
currentPage.on("afterdelete", (ev) => { });
|
||||
},
|
||||
// 打开保存为图片弹窗
|
||||
openSaveAsImageDialog() {
|
||||
this.saveAsImageDialogVisible = true;
|
||||
},
|
||||
// 开启/关闭网格对齐
|
||||
toggleGridShowStatus(value) {
|
||||
if (value) {
|
||||
this.editor.getCurrentPage().showGrid();
|
||||
} else {
|
||||
this.editor.getCurrentPage().hideGrid();
|
||||
}
|
||||
},
|
||||
// 保存为图片
|
||||
saveAsImage() {
|
||||
let newCanvas;
|
||||
if (this.saveAsImageFormat === "jpg") {
|
||||
let canvas = this.editor.getCurrentPage().saveImage();
|
||||
newCanvas = document.createElement("canvas");
|
||||
newCanvas.width = canvas.width;
|
||||
newCanvas.height = canvas.height;
|
||||
let newContext = newCanvas.getContext("2d");
|
||||
newContext.fillStyle = "#fff";
|
||||
newContext.fillRect(0, 0, newCanvas.width, newCanvas.height);
|
||||
newContext.drawImage(canvas, 0, 0);
|
||||
}
|
||||
if (this.saveAsImageFormat === "png") {
|
||||
newCanvas = this.editor.getCurrentPage().saveImage();
|
||||
}
|
||||
let imageDataURL = newCanvas.toDataURL();
|
||||
let downloadLink = document.createElement("a");
|
||||
downloadLink.download = "图片.jpg";
|
||||
downloadLink.href = imageDataURL;
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
this.saveAsImageDialogVisible = false;
|
||||
},
|
||||
// 保存
|
||||
submitForm() {
|
||||
const _this = this;
|
||||
let needSaveData = editor.getCurrentPage().save();
|
||||
console.log(needSaveData, 'needSaveData');
|
||||
localStorage.setItem("flowData", JSON.stringify(needSaveData));
|
||||
_this.save(needSaveData);
|
||||
_this.$message.success("数据已保存");
|
||||
|
||||
},
|
||||
// 保存为文件
|
||||
saveAsFile() {
|
||||
let sub = this.editor.getCurrentPage().save()
|
||||
console.log(sub, 'sub')
|
||||
let jsonString = JSON.stringify(this.editor.getCurrentPage().save());
|
||||
let blob = new Blob([jsonString]);
|
||||
let blobURL = URL.createObjectURL(blob);
|
||||
let downloadLink = document.createElement("a");
|
||||
downloadLink.download = "数据.json";
|
||||
downloadLink.href = blobURL;
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
URL.revokeObjectURL(blobURL);
|
||||
document.body.removeChild(downloadLink);
|
||||
},
|
||||
// 读取历史数据
|
||||
readHistoryData() {
|
||||
let stringData = localStorage.getItem("flowData");
|
||||
if (stringData === "" || stringData === "{}" || stringData === null) {
|
||||
this.$message.warning("无历史数据");
|
||||
return;
|
||||
}
|
||||
let jsonData = JSON.parse(stringData);
|
||||
this.editor.getCurrentPage().read(jsonData);
|
||||
},
|
||||
// 读取上传数据
|
||||
readUploadData() {
|
||||
let uploadButton = document.createElement("input");
|
||||
uploadButton.setAttribute("type", "file");
|
||||
uploadButton.setAttribute("accept", ".json");
|
||||
uploadButton.addEventListener("change", (e) => {
|
||||
console.dir(uploadButton);
|
||||
let file = uploadButton.files[0];
|
||||
let fileReader = new FileReader();
|
||||
fileReader.onload = (event) => {
|
||||
console.log(event);
|
||||
let text = JSON.parse(event.target.result);
|
||||
console.log(text);
|
||||
this.editor.getCurrentPage().read(text);
|
||||
};
|
||||
fileReader.readAsText(file);
|
||||
});
|
||||
uploadButton.click();
|
||||
},
|
||||
//
|
||||
save(source) {
|
||||
let edges = source.edges;
|
||||
let nodes = source.nodes;
|
||||
console.log(construct);
|
||||
let res = construct(source);
|
||||
console.log(JSON.stringify(res, null, 2));
|
||||
},
|
||||
handledel() {
|
||||
this.$store.dispatch("tagsView/delView", this.$route);
|
||||
this.$router.go(-1)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import url("@/views/system/mianview/index.less");
|
||||
</style>
|
||||
@ -133,12 +133,12 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
::v-deep .el-input .is-disabled .el-input__inner {
|
||||
background: #fff !important;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||||
::v-deep .el-textarea .is-disabled .el-textarea__inner {
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@ -2,60 +2,59 @@
|
||||
<div class="app-container">
|
||||
<!-- 问卷模板 -->
|
||||
<!-- <el-dialog title="问卷预览" :visible.sync="questionopen" width="30%"> -->
|
||||
<div class="words" v-for="(item, index) in questiondata.questionSubjectList" :key="index">
|
||||
{{ index + 1 }}.{{ item.questionName }}
|
||||
<span v-if="item.questionType == 'MULTIPLE_CHOICE'">（单选题）</span>
|
||||
<span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'">（多选题）</span>
|
||||
<span v-if="item.questionType == 'SCORING_QUESTIONS'">（打分题）</span>
|
||||
<span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'">（组合单选题）</span>
|
||||
<span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'">（组合多选题）</span>
|
||||
<span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'">（组合填空题）</span>
|
||||
<span v-if="item.questionType == 'FILL_IN_THE_BLANKS'">（填空题）</span>
|
||||
<span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'">（组合打分题）</span>
|
||||
<span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'">（日期填空题）</span>
|
||||
<span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">（时间填空题）</span>
|
||||
<el-radio-group v-if="item.questionType == 'MULTIPLE_CHOICE' ||
|
||||
<div class="words" v-for="(item, index) in questiondata.questionSubjectList" :key="index">
|
||||
{{ index + 1 }}.{{ item.questionName }}
|
||||
<span v-if="item.questionType == 'MULTIPLE_CHOICE'">（单选题）</span>
|
||||
<span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'">（多选题）</span>
|
||||
<span v-if="item.questionType == 'SCORING_QUESTIONS'">（打分题）</span>
|
||||
<span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'">（组合单选题）</span>
|
||||
<span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'">（组合多选题）</span>
|
||||
<span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'">（组合填空题）</span>
|
||||
<span v-if="item.questionType == 'FILL_IN_THE_BLANKS'">（填空题）</span>
|
||||
<span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'">（组合打分题）</span>
|
||||
<span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'">（日期填空题）</span>
|
||||
<span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">（时间填空题）</span>
|
||||
<el-radio-group v-if="item.questionType == 'MULTIPLE_CHOICE' ||
|
||||
item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
|
||||
item.questionType == 'SCORING_QUESTIONS' ||
|
||||
item.questionType == 'COMBINATION_SCORING_SUBJECT'
|
||||
" v-model="questiondata[index]" class="custom-radio-group" disabled
|
||||
@change="radioGroupChange($event, item)">
|
||||
<el-radio class="custom" v-for="(aitem, aindex) in item.questionSubjectOptionList" :key="aindex"
|
||||
:label="aitem.id" @change="radioChange($event, aitem, index)">{{ aitem.optionName }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 多选、组合多选 -->
|
||||
<el-checkbox-group disabled v-model="checkeddata" @change="radioGroupChange($event, item, 'checkbox')"
|
||||
v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
|
||||
@change="radioGroupChange($event, item)">
|
||||
<el-radio class="custom" v-for="(aitem, aindex) in item.questionSubjectOptionList" :key="aindex"
|
||||
:label="aitem.id" @change="radioChange($event, aitem, index)">{{ aitem.optionName }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 多选、组合多选 -->
|
||||
<el-checkbox-group disabled v-model="checkeddata" @change="radioGroupChange($event, item, 'checkbox')" v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
|
||||
item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
|
||||
">
|
||||
<el-checkbox v-for="(aitem, aindex) in item.questionSubjectOptionList" :key="aindex"
|
||||
:label="aitem.id" @change="radioChangecheck($event, aitem, index, aindex)">{{ aitem.optionName
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<!-- 填空题、组合填空 -->
|
||||
<div v-if="item.questionType == 'FILL_IN_THE_BLANKS' ||
|
||||
<el-checkbox v-for="(aitem, aindex) in item.questionSubjectOptionList" :key="aindex" :label="aitem.id"
|
||||
@change="radioChangecheck($event, aitem, index, aindex)">{{ aitem.optionName
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<!-- 填空题、组合填空 -->
|
||||
<div v-if="item.questionType == 'FILL_IN_THE_BLANKS' ||
|
||||
item.questionType == 'COMBINATION_BLANKS_SUBJECT'
|
||||
" class="tk">
|
||||
<el-input v-model="item.fillBlanksAnswer" disabled placeholder="请输入答案" type="textarea" />
|
||||
<!-- <el-input></el-input> -->
|
||||
</div>
|
||||
<!-- 日期填空题、 -->
|
||||
<div v-if="item.questionType == 'DATE_BLANKS_SUBJECT'" style="margin: 20px 0 10px 30px">
|
||||
<el-date-picker disabled @change="timepicker($event, index)" clearable
|
||||
v-model="item.fillBlanksAnswer" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<!-- 时间填空题 -->
|
||||
<div style="margin: 20px 0 10px 30px" v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">
|
||||
<el-time-select disabled @change="timepickerselect($event, index)" clearable
|
||||
v-model="item.fillBlanksAnswer" :picker-options="{
|
||||
<el-input v-model="item.fillBlanksAnswer" disabled placeholder="请输入答案" type="textarea" />
|
||||
<!-- <el-input></el-input> -->
|
||||
</div>
|
||||
<!-- 日期填空题、 -->
|
||||
<div v-if="item.questionType == 'DATE_BLANKS_SUBJECT'" style="margin: 20px 0 10px 30px">
|
||||
<el-date-picker disabled @change="timepicker($event, index)" clearable v-model="item.fillBlanksAnswer"
|
||||
type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<!-- 时间填空题 -->
|
||||
<div style="margin: 20px 0 10px 30px" v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">
|
||||
<el-time-select disabled @change="timepickerselect($event, index)" clearable
|
||||
v-model="item.fillBlanksAnswer" :picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:30',
|
||||
end: '23:30',
|
||||
}" placeholder="选择时间">
|
||||
</el-time-select>
|
||||
</div>
|
||||
</el-time-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
@ -80,7 +79,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
lookitemnew(newValue, oldValue) {
|
||||
console.log(newValue,'newValue111')
|
||||
console.log(newValue, 'newValue111')
|
||||
if (newValue) {
|
||||
this.questiondata = newValue;
|
||||
}
|
||||
@ -134,16 +133,26 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
.app-container {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
::v-deep .el-input .is-disabled .el-input__inner {
|
||||
background: #fff !important;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||||
::v-deep .el-textarea .is-disabled .el-textarea__inner {
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__input.is-disabled+span.el-radio__label {
|
||||
color: black;
|
||||
background: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tk {
|
||||
::v-deep .el-textarea__inner {
|
||||
margin: 20px 0 10px 10px;
|
||||
|
||||
@ -256,6 +256,7 @@ export default {
|
||||
path: "/task/Auditing",
|
||||
query: {
|
||||
patientId: row.patientId,
|
||||
signRecordId: row.id,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
@ -356,11 +356,9 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.selectAgencyinfo();
|
||||
this.getList();
|
||||
},
|
||||
mounted() {
|
||||
this.getMaxTableHeight()
|
||||
this.screenChange()
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
updateCPage(index, size) {
|
||||
@ -376,6 +374,8 @@ export default {
|
||||
this.signRecordList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
this.getMaxTableHeight()
|
||||
this.screenChange()
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
|
||||
Loading…
Reference in New Issue
Block a user