决策辅助

src/components/process/SendSubscribe.vue

@@ -239,6 +239,39 @@ const acquireSelectList = () => {
   }
   return data;
 };
+const emit = defineEmits(["auxiliaryChange"]);
+let auxiliaryData = ref([
+  {
+    label: "最近合同",
+    data:[
+      [
+        {
+          label:"合同编号",
+          value:'12312312312456',
+          fn:()=>{
+            console.log(formData.data)
+          },
+          style:{
+            color:'red'
+          },
+          num:1,
+        },
+        {
+          label:"合同编号",
+          value:'123456',
+          fn:()=>{
+            alert('点击事件')
+          }
+        }
+      ],
+
+    ],
+  },
+]);
+const auxiliaryChange = (data) => {
+  emit("auxiliaryChange", data);
+};
+auxiliaryChange(auxiliaryData)
 </script>
 
 <style lang="scss" scoped>

src/views/process/processApproval/auxiliary.vue

@@ -1,93 +1,36 @@
 <template>
 	<div class="auxiliary">
 		<el-collapse>
-			<el-collapse-item title="一致性 Consistency" name="1">
-			</el-collapse-item>
-			<el-collapse-item title="反馈 Feedback" name="2">
+			<el-collapse-item :title="i.label" v-for="(i,index) in data" :key='i.label' :name="index">
 				<ul>
-					<li>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">
-								产品123asdasd1231啊实打实大苏打阿三大熬是的
-							</div>
-						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
-					</li>
-					<li>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">
-								产品123asdasd1231啊实打实大苏打阿三大熬是的
+					<li v-for="(j,jindex) in i.data" :key="jindex">
+						<div class="list-box" v-for="n in j" :key='n.label' :style="n.num ? `width:${100/n.num}%` : ''">
+							<div class="label">{{n.label}}：</div>
+							<div 
+								class="value" 
+								:class="n.fn ? 'color-bl' : ''" 
+								@click="n.fn ? n.fn() : ''"
+								:style="n.style || ''">
+								{{n.value}}
 							</div>
 						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
-					</li>
-					<li>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">
-								产品123asdasd1231啊实打实大苏打阿三大熬是的
-							</div>
-						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
-						<div class="list-box">
-							<div class="label">货币类型：</div>
-							<div class="value">产品</div>
-						</div>
 					</li>
 				</ul>
 			</el-collapse-item>
-			<el-collapse-item title="效率 Efficiency" name="3">
-				<div>简化流程：设计简洁直观的操作流程；</div>
-				<div>
-					清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
-				</div>
-				<div>
-					帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
-				</div>
-			</el-collapse-item>
-			<el-collapse-item title="可控 Controllability" name="4">
-				<div>
-					用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
-				</div>
-				<div>
-					结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
-				</div>
-			</el-collapse-item>
 		</el-collapse>
 	</div>
 </template>
-
+<script setup>
+import { defineProps } from 'vue'
+const { proxy } = getCurrentInstance()
+defineProps({
+	data: {
+		type: Array,
+		default: [],
+	},
+})
+console.log(proxy.data)
+</script>
 <style lang="scss">
 .auxiliary {
 	ul {
@@ -99,6 +42,7 @@
 			background: #f1f1f1;
 			overflow: hidden;
 			margin-bottom: 10px;
+			
 			.list-box {
 				float: left;
 				width: 50%;
@@ -120,6 +64,10 @@
 					color: #333;
 					width: calc(100% - 70px);
 				}
+				.color-bl{
+					color: #0084FF;
+					cursor: pointer;
+				}
 			}
 		}
 	}

src/views/process/processApproval/index.vue

@@ -5,7 +5,8 @@
         <div class="commons-title title">
           {{ route.query.flowName || "流程标题（发起）" }}
         </div>
-        <SendSubscribe ref="makeDom" v-if="flowForm.flowKey == 'subscribe_flow'" :queryData="queryData.data"></SendSubscribe>
+        <div class="line"></div>
+        <SendSubscribe ref="makeDom" @auxiliaryChange='(e) => auxiliaryData = e' v-if="flowForm.flowKey == 'subscribe_flow'" :queryData="queryData.data"></SendSubscribe>
         <SendPurchase ref="makeDom" v-else-if="flowForm.flowKey == 'purchase_flow'" :queryData="queryData.data"></SendPurchase>
         <SendFunds ref="makeDom" v-else-if="flowForm.flowKey == 'account_request_funds_flow'" :queryData="queryData.data"></SendFunds>
         <ReturnGood ref="makeDom" v-else-if="flowForm.flowKey == 'sales_return_flow'" :queryData="queryData.data"></ReturnGood>
@@ -79,11 +80,12 @@
             </li>
           </ul>
         </el-tab-pane>
-        <el-tab-pane label="决策辅助" name="second" v-if="flowForm.flowKey == 'contract_flow' && flowForm.tenantType !== 'EHSD'">
-          <div style="overflow-y: auto; max-height: calc(100vh - 200px)">
+        <!-- v-if="flowForm.flowKey == 'contract_flow' && flowForm.tenantType !== 'EHSD'" -->
+        <el-tab-pane label="决策辅助" name="second" v-if="auxiliaryData.length > 0">
+          <!-- <div style="overflow-y: auto; max-height: calc(100vh - 200px)">
             <DecisionAids></DecisionAids>
-          </div>
-          <!-- <auxiliary></auxiliary> -->
+          </div> -->
+          <auxiliary :data="auxiliaryData"></auxiliary>
           <!-- <div style="overflow: auto; height: calc(100vh - 200px)">
             <purchaseAuxiliary></purchaseAuxiliary>
           </div> -->
@@ -158,6 +160,7 @@ const activeName = ref("first");
 const handleClick = (tab, event) => {
   // console.log(tab, event);
 };
+let auxiliaryData = ref([]);
 // 意见表单
 const flowForm = reactive({
   flowKey: "",
@@ -522,6 +525,10 @@ onMounted(async () => {
       overflow-y: auto;
       background: #fff;
       padding: 20px 20px 0px 20px;
+      .line{
+        border-bottom: 1px solid #ddd;
+        margin-bottom: 20px;
+      }
     }
     .bottom {
       margin-top: 10px;

src/views/process/processConfig/vueFlow.vue

@@ -632,8 +632,10 @@ const antvInit = (data) => {
 			});
 			return
 		}
+		
 		if (flowDefinitionNodeObj.value[cell.id]) {
 			formData.data = flowDefinitionNodeObj.value[cell.id]
+			formData.data.cell = cell
 		} else {
 			formData.data = {
 				id: cell.id,
@@ -820,7 +822,6 @@ const antvInit = (data) => {
 		graph.fromJSON(
 			data
 		)
-		console.log(graph,123123)
 	}else{
 		graph.addNode({
 			shape: 'start-btn',
@@ -838,32 +839,27 @@ const antvInit = (data) => {
 }
 const getFlowInfo =	(()=>{
 	proxy.post('/flowDefinition/getDetails', {id:submitFormData.id}).then((res) => {
-		res.nodeObject = JSON.parse(res.nodeObject)
-		antvInit(res.nodeObject)
-		// console.log(graph.toJSON().cells)
-		// console.log(JSON.parse(res.lineObject))
-		// setTimeout(() => {
-		// 	for (const key in JSON.parse(res.lineObject)) {
-		// 		if(JSON.parse(res.lineObject)[key].cell) {
-		// 			console.log(JSON.parse(res.lineObject)[key].cell.setData)
-		// 		}
-				
-		// 		// JSON.parse(res.lineObject)[key].cell.setData({
-		// 		// 	title:"12312312"
-		// 		// })
-		// 	}
-		// }, 2000);
-		// for (let i = 0; i < res.flowDefinitionId.length; i++) {
-		// 	const element = res.flowDefinitionId[i];
-		// 	flowDefinitionNodeObj.value[element.id] = element
-		// 	formData.data.cell.setData({
-		// 		title: formData.data.nodeName,
-		// 	});
-		// }
-		
 		
+		if(res.lineObject) {
+			flowDefinitionNodeObj.value = JSON.parse(res.lineObject)
+		}
+		if(res.nodeObject) {
+			antvInit(JSON.parse(res.nodeObject))
+		}else{
+			antvInit()
+		}
+		console.log(flowDefinitionNodeObj.value)
+		for (const key in flowDefinitionNodeObj.value) {
+			//延迟等待dom渲染完成
+			setTimeout(() => {
+				if(flowDefinitionNodeObj.value[key].nodeName != '结束'){
+					let htmlNode = document.querySelector("g[data-cell-id='"+ key +"']")
+					//获取htmlNode节点下的title,修改title的内容
+					htmlNode.getElementsByClassName('title')[0].innerHTML = flowDefinitionNodeObj.value[key].nodeName
+				}
+			}, 100);
+		}
 		dialogVisible.value = false
-		
 	})
 })
 const router = useRouter()