<template>
|
<div style="position: absolute;top:6%;right:0;z-index:1000;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
|
<el-card style="height: 100%">
|
<el-tabs v-model="activeName" id="tabPane">
|
<el-tab-pane label="文本" name="first">
|
<el-row :gutter="5" align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 38px">文本大小</el-col>
|
<el-col :span=16>
|
<el-slider :min=8 :max=20 :step=1 v-model="globalGridAttr.nodeFontSize" @change="onFontSizeChange"></el-slider>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 40px">字体颜色</el-col>
|
<el-col :span=16>
|
<el-color-picker v-model="globalGridAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">文本内容</el-col>
|
<el-col :span=16 >
|
<!-- <el-input v-model="globalGridAttr.nodeText" style="width: 100%" @change="onTextChange"></el-input>-->
|
<el-select style="width: 100%" :value-key="key" v-model="globalGridAttr.nodeText" @change="onTextChange($event)">
|
<el-option v-for="item in FlowStepList"
|
:key="item.stepMarker"
|
:label="item.stepTitle"
|
:value="item.stepMarker">
|
</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="节点" name="second">
|
<el-row align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 40px">边框颜色</el-col>
|
<el-col :span=16>
|
<el-color-picker v-model="globalGridAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
|
</el-col>
|
</el-row>
|
<el-row align="middle"style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 38px">边框宽度</el-col>
|
<el-col :span=16>
|
<el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
|
</el-col>
|
</el-row>
|
<el-row align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 40px">颜色</el-col>
|
<el-col :span=16>
|
<el-color-picker v-model="globalGridAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6';
|
// const {inject} = require("vue");
|
export default {
|
name: "index",
|
data(){
|
return{
|
data:'',
|
FlowStepList:[],
|
date:'',
|
text:'',
|
content:'',
|
activeName: 'first',
|
// globalGridAttr:{},
|
curCel:Cell,
|
left_p:document.documentElement.clientHeight*0.9,
|
}
|
},
|
props:{
|
id: {
|
type: String,
|
},
|
shape:{
|
type: String
|
},
|
globalGridAttr:{
|
type: Object,
|
},
|
graph:{
|
type: String,
|
},
|
flowId:{
|
type: String,
|
}
|
},
|
watch:{
|
'id'(val,oldVal){
|
this.getFlowStepList()
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
'flowId'(val,oldVal){
|
this.FlowStepList = []
|
this.getFlowStepList()
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
// this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
}
|
},
|
mounted() {
|
this.getFlowStepList()
|
// this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
methods:{
|
async getFlowStepList(){
|
let res= await this.$http.get(`/WfDef/getFlowStepList?flowId=${this.flowId}`)
|
if(res.data){
|
this.FlowStepList =res.data
|
}
|
console.log(this.FlowStepList,'this.FlowStepList')
|
},
|
// 改变边框颜色
|
onStrokeChange(e){
|
// this.curCel = Cell
|
let val = e
|
this.globalGridAttr.nodeStroke = val
|
this.curCel.attr('body/stroke', val)
|
},
|
//改变边框大小
|
onStrokeWidthChange(e){
|
let val =e
|
this.globalGridAttr.nodeStrokeWidth = val
|
this.curCel.attr('body/strokeWidth', val)
|
},
|
//改变背景颜色
|
onFillChange(e){
|
let val = e
|
this.globalGridAttr.nodeFill=val
|
this.curCel.attr('body/fill', val)
|
},
|
// 改变字体大小
|
onFontSizeChange(e){
|
let val =e
|
this.globalGridAttr.nodeFontSize = val
|
this.curCel.attr('text/fontSize', val)
|
this.curCel.attr('title/fontSize', val)
|
},
|
// 改变字体颜色
|
onColorChange(e){
|
let val =e
|
this.globalGridAttr.nodeColor = val
|
this.curCel.attr('text/fill', val)
|
this.curCel.attr('title/fill', val)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// 改变文本
|
onTextChange(e){
|
let selectItemObj= this.FlowStepList.find((item)=>{
|
return item.stepMarker===e
|
})
|
|
this.curCel.setData({
|
stepMarker:e
|
})
|
this.curCel.attr('text/text', selectItemObj.name)
|
this.globalGridAttr.nodeText = e
|
this.curCel = this.nodeOpt(this.id, this.globalGridAttr)
|
|
/* this.text =e
|
if(this.text.indexOf("：")!==-1){
|
let arr = this.text.split("：")
|
let title = arr[1]
|
this.data={
|
stepMarker:obj.stepMarker
|
}
|
this.curCel.setData(this.data)
|
this.curCel.attr('text/text',title)
|
this.globalGridAttr.nodeText = obj.stepMarker //this.text
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
}else {
|
let title = this.text
|
this.data={
|
stepMarker:obj.stepMarker
|
}
|
this.curCel.setData(this.data)
|
this.curCel.attr('text/text',title)
|
this.globalGridAttr.nodeText = obj.stepMarker //this.text
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
}*/
|
},
|
onDateChange(e){
|
this.date =e
|
this.globalGridAttr.nodeDate = this.date
|
this.curCel.attr('title/text', this.date)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
nodeOpt(id, globalGridAttr){
|
this.curCel=null
|
if(id){
|
let cell = this.graph.getCellById(id)
|
console.log(cell,'let cell 123456')
|
if (!cell || !cell.isNode()) {
|
return
|
}
|
this.curCel = cell
|
console.log(this.curCel.getData(),'this.curCel.getData()')
|
|
globalGridAttr.nodeStroke = cell.attr('body/stroke')
|
globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
|
globalGridAttr.nodeFill = cell.attr('body/fill')
|
globalGridAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
|
//globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
|
globalGridAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
|
// globalGridAttr.nodeColor = cell.attr('title/fill')
|
// globalGridAttr.nodeColor = cell.attr('label/text/fill')
|
// globalGridAttr.nodeColor = cell.attr('label/title/fill')
|
// globalGridAttr.nodeColor = cell.attr('label/style/fill')
|
|
//globalGridAttr.nodeUsers = cell.attr('approve/users')
|
//globalGridAttr.nodeDate = cell.attr('title/text')
|
|
globalGridAttr.nodeText = this.curCel.getData().stepMarker
|
console.log(globalGridAttr.nodeText,'globalGridAttr.nodeText globalGridAttr.nodeText')
|
cell.getData()
|
console.log( cell.getData(),' cell.getData() 909')
|
}
|
return this.curCel;
|
}
|
}
|
}
|
</script>
|
|
<style >
|
#tabPane .el-tabs__header.is-top .el-tabs__nav-scroll{
|
width: 100% !important;
|
}
|
|
#tabPane .el-color-picker__trigger{
|
width: 100%;
|
}
|
</style>
|
