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/ConfigNode/index.vue | 256 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 256 insertions(+), 0 deletions(-)
diff --git a/web/src/views/modules/flowChart/ConfigNode/index.vue b/web/src/views/modules/flowChart/ConfigNode/index.vue
new file mode 100644
index 0000000..ebf59e9
--- /dev/null
+++ b/web/src/views/modules/flowChart/ConfigNode/index.vue
@@ -0,0 +1,256 @@
+<template>
+ <div style="position: absolute;top:6%;right:0;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 v-show="shape!=='custom-text' || shape!=='custom-circle1'" :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 @click.native='showDialog' v-model="globalGridAttr.inspectName" style="width:100%"></el-input>
+ </el-col>
+ </el-row>
+ <el-row :gutter="5" v-show="shape!=='custom-circle1'" 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-col>
+ </el-row>
+ <el-row v-show="shape!=='custom-text'" :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-date-picker v-model="globalGridAttr.nodeDate" type="date" placeholder="閫夋嫨鏃ユ湡" value-format="yyyy-MM-dd"
+ style="width: 100%" @change="onDateChange">
+ </el-date-picker>
+ </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>
+ <el-dialog ref="detailedDialog" title="閫夋嫨椤圭洰" width='85%' :visible.sync="dialogVisible ">
+ <Inspection @func="procResult" ref="inspectionNode" />
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6';
+import Inspection from './project-list-select'
+// const {inject} = require("vue");
+export default {
+ name: "index",
+ data(){
+ return{
+ data:{
+ dataId:'',
+ finishDate: '',
+ inspectName:''
+ },
+ date:'',
+ text:'',
+ dateId:'',
+ content:'',
+ dialogVisible:false,
+ activeName: 'first',
+ // globalGridAttr:{},
+ curCel:Cell,
+ left_p:document.documentElement.clientHeight*0.9,
+ }
+ },
+ components:{
+ Inspection
+ },
+ props:{
+ id: {
+ type: String,
+ },
+ shape:{
+ type: String
+ },
+ refY2:{
+ type: Number
+ },
+ globalGridAttr:{
+ type: Object,
+ },
+ graph:{
+ type: String,
+ },
+ projectId:{
+ type: String,
+ },
+ diagramId:{
+ type: String,
+ }
+ },
+ watch:{
+ 'id'(val,oldVal){
+ this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+ }
+ },
+ mounted() {
+ // this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+ },
+ methods:{
+ showDialog() {
+ let param = {projectId:this.projectId,diagramId:this.diagramId}
+ console.log(param, 'dialog init param')
+ this.dialogVisible = true;
+ this.$nextTick(()=>{
+ this.$refs.inspectionNode.init(param)
+ })
+ },
+ procResult(node) {
+ // console.log(node,'node')
+ this.text =node.nodeName
+ this.dateId = node.nodeId
+ this.globalGridAttr.dataId = this.dateId
+ this.globalGridAttr.inspectName = this.text
+ this.globalGridAttr.nodeText = this.text
+ this.data={
+ dataId:this.dateId,
+ inspectName:this.text
+ }
+ this.curCel.setData(this.data)
+ this.curCel.attr('text/text', this.text)
+ this.curCel.attr('data/dataId', this.dateId)
+ this.curCel.attr('data/inspectName', this.text)
+ this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+ this.dialogVisible = false
+ // console.log(node,'dialog绐楀彛杩斿洖鍊�')
+ },
+ // 鏀瑰彉杈规棰滆壊
+ onStrokeChange(e){
+ 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)
+ // this.curCel.attr('title/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.attr('text/style/color', val)
+ this.curCel.attr('title/style/color', val)
+ this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+ },
+ // 鏀瑰彉鏂囨湰
+ onTextChange(e){
+ this.text =e
+ this.globalGridAttr.nodeText = this.text
+ this.curCel.attr('label/textWrap/text', this.text)
+ this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+
+ },
+ onDateChange(e){
+ this.date =e
+ this.globalGridAttr.nodeDate = this.date
+ this.data={
+ finishDate:this.date,
+ }
+ this.curCel.setData(this.data)
+ if(this.shape=='custom-circle1'){
+ this.curCel.attr('text/text', 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
+ globalGridAttr.nodeStroke = cell.attr('body/stroke')
+ globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
+ globalGridAttr.nodeFill = cell.attr('body/fill')
+ // globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
+ // globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
+ globalGridAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):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('text/fill')
+ // globalGridAttr.nodeColor = cell.attr('title/fill')
+ // globalGridAttr.nodeColor = cell.attr('text/style/color')
+ // globalGridAttr.nodeColor = cell.attr('title/style/color')
+ globalGridAttr.nodeUsers = cell.attr('approve/users')
+ globalGridAttr.nodeText = cell.attr('label/textWrap/text')
+ if(this.shape=='custom-circle1'){
+ globalGridAttr.nodeDate = cell.attr('text/text')
+ }
+ globalGridAttr.nodeDate = cell.attr('title/text')
+ globalGridAttr.dataId = cell.getData().dataId
+ globalGridAttr.inspectName =cell.getData().inspectName
+ // console.log(globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate,'globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate 789')
+ 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