鞍钢鲅鱼圈能源管控系统前端代码
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-12-26 cb6cd26221d8bb2c4b1dca44a87332e9fe6f56ab
提交 | 用户 | 时间
cb6cd2 1 <!-- eslint-disable vue/no-mutating-props -->
H 2 <!--
3  * @Date: 2022-09-21 14:41:53
4  * @LastEditors: StavinLi 495727881@qq.com
5  * @LastEditTime: 2023-05-24 15:20:24
6  * @FilePath: /Workflow-Vue3/src/components/nodeWrap.vue
7 -->
8 <template>
9      <div class="node-wrap" v-if="nodeConfig.type < 3">
10       <div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')">
11           <div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
12             <span v-if="nodeConfig.type == 0">{{ nodeConfig.nodeName }}</span>
13             <template v-else>
14               <span class="iconfont">{{nodeConfig.type == 1?'':''}}</span>
15               <input
16                 v-if="isInput"
17                 type="text"
18                 class="ant-input editable-title-input"
19                 @blur="blurEvent()"
20                 @focus="$event.currentTarget.select()"
21                 v-focus
22                 v-model="nodeConfig.nodeName"
23                 :placeholder="defaultText"
24               />
25               <span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span>
26               <i class="anticon anticon-close close" @click="delNode"></i>
27             </template>
28           </div>
29           <div class="content" @click="setPerson">
30             <div class="text">
31                 <span class="placeholder" v-if="!showText">请选择{{defaultText}}</span>
32                 {{showText}}
33             </div>
34             <i class="anticon anticon-right arrow"></i>
35           </div>
36           <div class="error_tip" v-if="isTried && nodeConfig.error">
37             <i class="anticon anticon-exclamation-circle"></i>
38           </div>
39       </div>
40       <addNode v-model:childNodeP="nodeConfig.childNode" />
41     </div>
42     <div class="branch-wrap" v-if="nodeConfig.type == 4">
43     <div class="branch-box-wrap">
44       <div class="branch-box">
45         <button class="add-branch" @click="addTerm">添加条件</button>
46         <div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
47           <div class="condition-node">
48             <div class="condition-node-box">
49               <div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
50                 <div class="sort-left" v-if="index != 0" @click="arrTransfer(index, -1)">&lt;</div>
51                 <div class="title-wrapper">
52                   <input
53                     v-if="isInputList[index]"
54                     type="text"
55                     class="ant-input editable-title-input"
56                     @blur="blurEvent(index)"
57                     @focus="$event.currentTarget.select()"
58                     v-model="item.nodeName"
59                   />
60                   <span v-else class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span>
61                   <span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span>
62                   <i class="anticon anticon-close close" @click="delTerm(index)"></i>
63                 </div>
64                 <div class="sort-right" v-if="index != nodeConfig.conditionNodes.length - 1" @click="arrTransfer(index)">&gt;</div>
65                 <div class="content" @click="setPerson(item.priorityLevel)">{{ conditionStr(nodeConfig, index) }}</div>
66                 <div class="error_tip" v-if="isTried && item.error">
67                     <i class="anticon anticon-exclamation-circle"></i>
68                 </div>
69               </div>
70               <addNode v-model:childNodeP="item.childNode" />
71             </div>
72           </div>
73           <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
74           <template v-if="index == 0">
75             <div class="top-left-cover-line"></div>
76             <div class="bottom-left-cover-line"></div>
77           </template>
78           <template v-if="index == nodeConfig.conditionNodes.length - 1">
79             <div class="top-right-cover-line"></div>
80             <div class="bottom-right-cover-line"></div>
81           </template>
82         </div>
83       </div>
84       <addNode v-model:childNodeP="nodeConfig.childNode" />
85     </div>
86   </div>
87     <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
88 </template>
89 <script  setup>
90 import addNode from './addNode.vue'
91 import { onMounted, ref, watch, getCurrentInstance, computed } from 'vue'
92 import {
93   arrToStr,
94   conditionStr,
95   setApproverStr,
96   copyerStr,
97   bgColors,
98   placeholderList
99 } from './util'
100 import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
101 let _uid = getCurrentInstance().uid
102
103 let props = defineProps({
104   nodeConfig: {
105     type: Object,
106     default: () => ({})
107   },
108   flowPermission: {
109     type: Object,
110     // eslint-disable-next-line vue/require-valid-default-prop
111     default: () => []
112   }
113 })
114
115 let defaultText = computed(() => {
116   return placeholderList[props.nodeConfig.type]
117 })
118 let showText = computed(() => {
119   if (props.nodeConfig.type == 0) return arrToStr(props.flowPermission) || '所有人'
120   if (props.nodeConfig.type == 1) return setApproverStr(props.nodeConfig)
121   return copyerStr(props.nodeConfig)
122 })
123
124 let isInputList = ref([])
125 let isInput = ref(false)
126 const resetConditionNodesErr = () => {
127   for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
128     // eslint-disable-next-line vue/no-mutating-props
129     props.nodeConfig.conditionNodes[i].error =
130       conditionStr(props.nodeConfig, i) == '请设置条件' &&
131       i != props.nodeConfig.conditionNodes.length - 1
132   }
133 }
134 onMounted(() => {
135   if (props.nodeConfig.type == 1) {
136     // eslint-disable-next-line vue/no-mutating-props
137     props.nodeConfig.error = !setApproverStr(props.nodeConfig)
138   } else if (props.nodeConfig.type == 2) {
139     // eslint-disable-next-line vue/no-mutating-props
140     props.nodeConfig.error = !copyerStr(props.nodeConfig)
141   } else if (props.nodeConfig.type == 4) {
142     resetConditionNodesErr()
143   }
144 })
145 let emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
146 let store = useWorkFlowStoreWithOut()
147 let {
148   setPromoter,
149   setApprover,
150   setCopyer,
151   setCondition,
152   setFlowPermission,
153   setApproverConfig,
154   setCopyerConfig,
155   setConditionsConfig
156 } = store
157 let isTried = computed(() => store.isTried)
158 let flowPermission1 = computed(() => store.flowPermission1)
159 let approverConfig1 = computed(() => store.approverConfig1)
160 let copyerConfig1 = computed(() => store.copyerConfig1)
161 let conditionsConfig1 = computed(() => store.conditionsConfig1)
162 watch(flowPermission1, (flow) => {
163   if (flow.flag && flow.id === _uid) {
164     emits('update:flowPermission', flow.value)
165   }
166 })
167 watch(approverConfig1, (approver) => {
168   if (approver.flag && approver.id === _uid) {
169     emits('update:nodeConfig', approver.value)
170   }
171 })
172 watch(copyerConfig1, (copyer) => {
173   if (copyer.flag && copyer.id === _uid) {
174     emits('update:nodeConfig', copyer.value)
175   }
176 })
177 watch(conditionsConfig1, (condition) => {
178   if (condition.flag && condition.id === _uid) {
179     emits('update:nodeConfig', condition.value)
180   }
181 })
182
183 const clickEvent = (index) => {
184   if (index || index === 0) {
185     isInputList.value[index] = true
186   } else {
187     isInput.value = true
188   }
189 }
190 const blurEvent = (index) => {
191   if (index || index === 0) {
192     isInputList.value[index] = false
193     // eslint-disable-next-line vue/no-mutating-props
194     props.nodeConfig.conditionNodes[index].nodeName =
195       props.nodeConfig.conditionNodes[index].nodeName || '条件'
196   } else {
197     isInput.value = false
198     // eslint-disable-next-line vue/no-mutating-props
199     props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
200   }
201 }
202 const delNode = () => {
203   emits('update:nodeConfig', props.nodeConfig.childNode)
204 }
205 const addTerm = () => {
206   let len = props.nodeConfig.conditionNodes.length + 1
207   // eslint-disable-next-line vue/no-mutating-props
208   props.nodeConfig.conditionNodes.push({
209     nodeName: '条件' + len,
210     type: 3,
211     priorityLevel: len,
212     conditionList: [],
213     nodeUserList: [],
214     childNode: null
215   })
216   resetConditionNodesErr()
217   emits('update:nodeConfig', props.nodeConfig)
218 }
219 const delTerm = (index) => {
220   // eslint-disable-next-line vue/no-mutating-props
221   props.nodeConfig.conditionNodes.splice(index, 1)
222   props.nodeConfig.conditionNodes.map((item, index) => {
223     item.priorityLevel = index + 1
224     item.nodeName = `条件${index + 1}`
225   })
226   resetConditionNodesErr()
227   emits('update:nodeConfig', props.nodeConfig)
228   if (props.nodeConfig.conditionNodes.length == 1) {
229     if (props.nodeConfig.childNode) {
230       if (props.nodeConfig.conditionNodes[0].childNode) {
231         reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode)
232       } else {
233         // eslint-disable-next-line vue/no-mutating-props
234         props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
235       }
236     }
237     emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
238   }
239 }
240 const reData = (data, addData) => {
241   if (!data.childNode) {
242     data.childNode = addData
243   } else {
244     reData(data.childNode, addData)
245   }
246 }
247 const setPerson = (priorityLevel) => {
248   var { type } = props.nodeConfig
249   if (type == 0) {
250     setPromoter(true)
251     setFlowPermission({
252       value: props.flowPermission,
253       flag: false,
254       id: _uid
255     })
256   } else if (type == 1) {
257     setApprover(true)
258     setApproverConfig({
259       value: {
260         ...JSON.parse(JSON.stringify(props.nodeConfig)),
261         ...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 }
262       },
263       flag: false,
264       id: _uid
265     })
266   } else if (type == 2) {
267     setCopyer(true)
268     setCopyerConfig({
269       value: JSON.parse(JSON.stringify(props.nodeConfig)),
270       flag: false,
271       id: _uid
272     })
273   } else {
274     setCondition(true)
275     setConditionsConfig({
276       value: JSON.parse(JSON.stringify(props.nodeConfig)),
277       priorityLevel,
278       flag: false,
279       id: _uid
280     })
281   }
282 }
283 const arrTransfer = (index, type = 1) => {
284   //向左-1,向右1
285   // eslint-disable-next-line vue/no-mutating-props
286   props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
287     index + type,
288     1,
289     props.nodeConfig.conditionNodes[index]
290   )[0]
291   props.nodeConfig.conditionNodes.map((item, index) => {
292     item.priorityLevel = index + 1
293   })
294   resetConditionNodesErr()
295   emits('update:nodeConfig', props.nodeConfig)
296 }
297 </script>