From d1ac67834e4bd2621809a9c778714bf575f80117 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期三, 29 十一月 2023 16:16:15 +0800
Subject: [PATCH] 流程图
---
web/src/views/modules/flowChart/flowChartNode/index.vue | 235 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 235 insertions(+), 0 deletions(-)
diff --git a/web/src/views/modules/flowChart/flowChartNode/index.vue b/web/src/views/modules/flowChart/flowChartNode/index.vue
new file mode 100644
index 0000000..23af11b
--- /dev/null
+++ b/web/src/views/modules/flowChart/flowChartNode/index.vue
@@ -0,0 +1,235 @@
+<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>
--
Gitblit v1.9.1