Browse Source

fix: approver & promoter box 编辑 & drawer 编辑标题 触发问题

lanceJiang 1 year ago
parent
commit
9a4957f2b2

+ 14 - 14
src/components/scWorkflow/nodes/approver.vue

@@ -1,14 +1,14 @@
 <template>
 	<div class="node-wrap">
 		<div class="node-wrap-box">
-			<div class="title" style="background: #ff943e">
+			<div class="title" style="background: var(--el-color-warning)">
 				<el-icon class="icon"><user-filled /></el-icon>
-				<span v-if="!isEditTitle" @click="editTitle"
-					>{{ nodeConfig.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><edit /></el-icon
+				<span v-show="!isEditTitle" class="title_label" @click="editTitle('box_nodeTitle')"
+					>{{ nodeConfig.nodeName }}<el-icon class="edit-icon"><edit /></el-icon
 				></span>
 				<el-input
-					v-if="isEditTitle"
-					ref="nodeTitle"
+					v-show="isEditTitle"
+					ref="box_nodeTitle"
 					v-model="nodeConfig.nodeName"
 					clearable
 					size="small"
@@ -26,10 +26,10 @@
 		<el-drawer v-model="drawer" title="审批人设置" destroy-on-close append-to-body :size="600" class="aDrawer">
 			<template #header>
 				<div class="node-wrap-drawer__title">
-					<label v-if="!isEditTitle" @click="editTitle"
+					<label v-show="!isEditTitle" @click="editTitle('nodeTitle')"
 						>{{ form.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><edit /></el-icon
 					></label>
-					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+					<el-input v-show="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
 				</div>
 			</template>
 			<el-container>
@@ -68,7 +68,7 @@
 							</el-form-item>
 
 							<el-form-item v-if="form.setType === 1" label="选择成员">
-								<el-button type="primary" :icon="Plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
+								<el-button type="primary" icon="plus" round @click="selectHandle(1, form.nodeUserList)">选择人员 2222</el-button>
 								<div class="tags-list">
 									<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable @close="delUser(index)">{{ user.name }}</el-tag>
 								</div>
@@ -79,7 +79,7 @@
 							</el-form-item>
 
 							<el-form-item v-if="form.setType === 3" label="选择角色">
-								<el-button type="primary" :icon="Plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
+								<el-button type="primary" icon="plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
 								<div class="tags-list">
 									<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{
 										role.name
@@ -173,7 +173,7 @@
 
 <script>
 import addNode from './addNode'
-import { Plus } from '@element-plus/icons-vue'
+// import { Plus } from '@element-plus/icons-vue'
 import { mapState } from 'pinia' //引入映射函数
 import useFlowStore from '@/store/modules/flow'
 import {
@@ -211,9 +211,9 @@ export default {
 		}
 	},
 	computed: {
-		Plus() {
+		/*Plus() {
 			return Plus
-		},
+		},*/
 		...mapState(useFlowStore, ['processForm']) //映射函数,取出processForm
 	},
 	watch: {
@@ -242,10 +242,10 @@ export default {
 			this.form.extendConfig = { formConfig: operateTable }
 			this.drawer = true
 		},
-		editTitle() {
+		editTitle(refName) {
 			this.isEditTitle = true
 			this.$nextTick(() => {
-				this.$refs.nodeTitle.focus()
+				this.$refs[refName]?.focus()
 			})
 		},
 		saveTitle() {

+ 11 - 16
src/components/scWorkflow/nodes/promoter.vue

@@ -1,12 +1,14 @@
 <template>
 	<div class="node-wrap">
 		<div class="node-wrap-box start-node">
-			<div class="title" style="background: #576a95">
+			<div class="title" style="background: var(--el-color-info)">
 				<el-icon class="icon"><user-filled /></el-icon>
-				<span v-if="!isEditTitle" @click="editTitle">{{ nodeConfig.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><edit /></el-icon></span>
+				<span v-show="!isEditTitle" class="title_label" @click="editTitle('box_nodeTitle')"
+					>{{ nodeConfig.nodeName }}<el-icon class="edit-icon"><edit /></el-icon
+				></span>
 				<el-input
-					v-if="isEditTitle"
-					ref="nodeTitle"
+					v-show="isEditTitle"
+					ref="box_nodeTitle"
 					v-model="nodeConfig.nodeName"
 					clearable
 					size="small"
@@ -22,17 +24,17 @@
 		<el-drawer v-model="drawer" title="发起人" destroy-on-close append-to-body :size="500" class="aDrawer">
 			<template #header>
 				<div class="node-wrap-drawer__title">
-					<label v-if="!isEditTitle" @click="editTitle"
+					<label v-show="!isEditTitle" @click="editTitle('nodeTitle')"
 						>{{ form.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><edit /></el-icon
 					></label>
-					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+					<el-input v-show="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
 				</div>
 			</template>
 			<el-container>
 				<el-main>
 					<el-form label-position="top">
 						<el-form-item label="谁可以发起此审批">
-							<el-button type="primary" :icon="Plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
+							<el-button type="primary" icon="plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
 							<div class="tags-list">
 								<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{
 									role.name
@@ -53,14 +55,7 @@
 
 <script>
 import addNode from './addNode'
-import { Plus } from '@element-plus/icons-vue'
-
 export default {
-	computed: {
-		Plus() {
-			return Plus
-		}
-	},
 	components: {
 		addNode
 	},
@@ -91,10 +86,10 @@ export default {
 			this.isEditTitle = false
 			this.drawer = true
 		},
-		editTitle() {
+		editTitle(refName) {
 			this.isEditTitle = true
 			this.$nextTick(() => {
-				this.$refs.nodeTitle.focus()
+				this.$refs[refName]?.focus()
 			})
 		},
 		saveTitle() {