feat: 流程定义回显 - 动态表单开发回显 100%

src/components/scWorkflow/index.vue

@@ -436,6 +436,9 @@ export default {
 	width: 100%;
 }
 .add-node-popover-body {
+	ul {
+		padding: 0;
+	}
 }
 .add-node-popover-body li {
 	display: inline-block;
@@ -506,4 +509,33 @@ export default {
 		background: var(--el-bg-color);
 	}
 }
+
+$header_height: 55px;
+// drawer样式
+.aDrawer {
+	.el-drawer__header {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		box-sizing: border-box;
+		width: 100%;
+		height: 48px;
+		padding: 0 16px;
+		margin-bottom: 0px;
+		border-bottom: 1px solid var(--el-border-color-lighter);
+		color: var(--el-overlay-color);
+	}
+	.el-drawer__body {
+		box-sizing: border-box;
+		height: 100%;
+		padding: 12px 16px;
+		overflow: auto;
+		.el-main {
+			padding: 0;
+		}
+		.el-footer {
+			padding: 10px 0 0 0;
+		}
+	}
+}
 </style>

src/components/scWorkflow/nodes/approver.vue

@@ -12,7 +12,7 @@
 			</div>
 		</div>
 		<add-node v-model="nodeConfig.childNode"></add-node>
-		<el-drawer v-model="drawer" title="审批人设置" destroy-on-close append-to-body :size="500">
+		<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"
@@ -22,76 +22,131 @@
 				</div>
 			</template>
 			<el-container>
-				<el-main style="padding: 0 20px 20px 20px">
-					<el-form label-position="top">
-						<el-form-item label="审批人员类型">
-							<el-select v-model="form.setType">
-								<el-option :value="1" label="指定成员"></el-option>
-								<el-option :value="2" label="主管"></el-option>
-								<el-option :value="3" label="角色"></el-option>
-								<el-option :value="4" label="发起人自选"></el-option>
-								<el-option :value="5" label="发起人自己"></el-option>
-								<el-option :value="7" label="连续多级主管"></el-option>
-							</el-select>
+				<el-main>
+					<el-form label-position="top" class="aForm">
+						<el-form-item label="审批类型" style="margin-bottom: 8px">
+							<el-radio-group v-model="form.types">
+								<el-radio label="1">人工审批</el-radio>
+								<el-radio label="2">自动通过</el-radio>
+								<el-radio label="3">自动拒绝</el-radio>
+							</el-radio-group>
 						</el-form-item>
+					</el-form>
 
-						<el-form-item v-if="form.setType == 1" label="选择成员">
-							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</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>
-						</el-form-item>
+					<div class="self-radio-group">
+						<el-radio-group v-model="radio1">
+							<el-radio-button label="1">设置审批人</el-radio-button>
+							<el-radio-button label="2">表单权限</el-radio-button>
+							<el-radio-button label="3">操作权限</el-radio-button>
+						</el-radio-group>
+					</div>
 
-						<el-form-item v-if="form.setType == 2" label="指定主管">
-							发起人的第 <el-input-number v-model="form.examineLevel" :min="1" /> 级主管
-						</el-form-item>
+					<div v-show="form.types === '1'">
+						<!-- 设置审批人 -->
+						<el-form v-show="radio1 == 1" label-position="top" class="aForm">
+							<el-form-item label="">
+								<div class="item-wrap approver" style="width: 100%">
+									<div class="approver-list">
+										<div class="approver-wrapper">
+											<div class="header">
+												<span>审批人员类型</span>
+											</div>
+											<div class="main-content">
+												<el-radio-group v-model="form.setType" class="main-content-radio">
+													<el-radio :label="Number(1)">指定成员</el-radio>
+													<el-radio :label="Number(2)">主管</el-radio>
+													<el-radio :label="Number(3)">角色</el-radio>
+													<el-radio :label="Number(4)">发起人自选</el-radio>
+													<el-radio :label="Number(5)">发起人自己</el-radio>
+													<el-radio :label="Number(6)">连续多级主管</el-radio>
+												</el-radio-group>
+											</div>
+										</div>
+									</div>
+								</div>
+							</el-form-item>
 
-						<el-form-item v-if="form.setType == 3" label="选择角色">
-							<el-button type="primary" icon="el-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
-								}}</el-tag>
-							</div>
-						</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>
+								<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>
+							</el-form-item>
 
-						<el-form-item v-if="form.setType == 4" label="发起人自选">
-							<el-radio-group v-model="form.selectMode">
-								<el-radio :label="1">自选一个人</el-radio>
-								<el-radio :label="2">自选多个人</el-radio>
-							</el-radio-group>
-						</el-form-item>
+							<el-form-item v-if="form.setType == 2" label="指定主管">
+								发起人的第 <el-input-number v-model="form.examineLevel" :min="1" /> 级主管
+							</el-form-item>
 
-						<el-form-item v-if="form.setType == 7" label="连续主管审批终点">
-							<el-radio-group v-model="form.directorMode">
-								<el-radio :label="0">直到最上层主管</el-radio>
-								<el-radio :label="1">自定义审批终点</el-radio>
-							</el-radio-group>
-							<p v-if="form.directorMode == 1">直到发起人的第 <el-input-number v-model="form.directorLevel" :min="1" /> 级主管</p>
-						</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>
+								<div class="tags-list">
+									<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{
+										role.name
+									}}</el-tag>
+								</div>
+							</el-form-item>
 
-						<el-divider></el-divider>
-						<el-form-item label="">
-							<el-checkbox v-model="form.termAuto" label="超时自动审批"></el-checkbox>
-						</el-form-item>
-						<template v-if="form.termAuto">
-							<el-form-item label="审批期限（为 0 则不生效）"> <el-input-number v-model="form.term" :min="0" /> 小时 </el-form-item>
-							<el-form-item label="审批期限超时后执行">
-								<el-radio-group v-model="form.termMode">
-									<el-radio :label="0">自动通过</el-radio>
-									<el-radio :label="1">自动拒绝</el-radio>
+							<el-form-item v-if="form.setType == 4" label="发起人自选">
+								<el-radio-group v-model="form.selectMode">
+									<el-radio :label="1">自选一个人</el-radio>
+									<el-radio :label="2">自选多个人</el-radio>
 								</el-radio-group>
 							</el-form-item>
-						</template>
-						<el-divider></el-divider>
-						<el-form-item label="多人审批时审批方式">
-							<el-radio-group v-model="form.examineMode">
-								<p style="width: 100%"><el-radio :label="1">按顺序依次审批</el-radio></p>
-								<p style="width: 100%"><el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
-								<p style="width: 100%"><el-radio :label="3">或签 (有一人审批通过即可)</el-radio></p>
-							</el-radio-group>
-						</el-form-item>
-					</el-form>
+
+							<el-form-item v-if="form.setType == 7" label="连续主管审批终点">
+								<el-radio-group v-model="form.directorMode">
+									<el-radio :label="0">直到最上层主管</el-radio>
+									<el-radio :label="1">自定义审批终点</el-radio>
+								</el-radio-group>
+								<p v-if="form.directorMode == 1">直到发起人的第 <el-input-number v-model="form.directorLevel" :min="1" /> 级主管</p>
+							</el-form-item>
+							<el-divider></el-divider>
+							<el-form-item label="">
+								<el-checkbox v-model="form.termAuto" label="超时自动审批"></el-checkbox>
+							</el-form-item>
+							<template v-if="form.termAuto">
+								<el-form-item label="审批期限（为 0 则不生效）"> <el-input-number v-model="form.term" :min="0" /> 小时 </el-form-item>
+								<el-form-item label="审批期限超时后执行">
+									<el-radio-group v-model="form.termMode">
+										<el-radio :label="0">自动通过</el-radio>
+										<el-radio :label="1">自动拒绝</el-radio>
+									</el-radio-group>
+								</el-form-item>
+							</template>
+							<el-divider></el-divider>
+							<el-form-item label="多人审批时审批方式">
+								<el-radio-group v-model="form.examineMode">
+									<p style="width: 100%"><el-radio :label="1">按顺序依次审批</el-radio></p>
+									<p style="width: 100%"><el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
+									<p style="width: 100%"><el-radio :label="3">或签 (有一人审批通过即可)</el-radio></p>
+								</el-radio-group>
+							</el-form-item>
+						</el-form>
+
+						<!-- 表单设置 -->
+						<div v-show="radio1 == 2">
+							<el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
+								<el-table-column type="selection" width="250" align="center" />
+								<el-table-column property="name" label="表单字段" align="center" />
+							</el-table>
+						</div>
+
+						<!-- 操作权限 -->
+						<el-form v-show="radio1 == 3" label-position="top" class="aForm">
+							<el-form-item label="" style="margin-bottom: 28px">
+								<div style="display: flex; flex-direction: column">
+									<el-checkbox label="允许转交" />
+									<el-checkbox label="允许加签/减签" />
+									<el-checkbox label="允许回退" />
+								</div>
+							</el-form-item>
+
+							<el-form-item label="提示: ">
+								<div><el-text type="primary">*</el-text>&nbsp;若审批人设置为连续多级上级、连续多级部门负责人时，允许的加签 / 减签不能生效。</div>
+								<div><el-text type="primary">*</el-text>&nbsp;若多人审批方式为依次审批时，允许的加签 / 减签不能生效。</div>
+							</el-form-item>
+						</el-form>
+					</div>
 				</el-main>
 				<el-footer>
 					<el-button type="primary" @click="save">保存</el-button>
@@ -104,6 +159,7 @@
 
 <script>
 import addNode from './addNode'
+import { Plus } from '@element-plus/icons-vue'
 
 export default {
 	components: {
@@ -116,9 +172,31 @@ export default {
 	data() {
 		return {
 			nodeConfig: {},
-			drawer: false,
+			drawer: true,
 			isEditTitle: false,
-			form: {}
+			form: {
+				types: '1'
+			},
+			radio1: '设置审批人',
+			tableData: [
+				{
+					name: '单行文本'
+				},
+				{
+					name: '多行文本'
+				},
+				{
+					name: '提示文字'
+				},
+				{
+					name: '时间选择'
+				}
+			]
+		}
+	},
+	computed: {
+		Plus() {
+			return Plus
 		}
 	},
 	watch: {
@@ -133,6 +211,7 @@ export default {
 		show() {
 			this.form = {}
 			this.form = JSON.parse(JSON.stringify(this.nodeConfig))
+			this.form.types = '1'
 			this.drawer = true
 		},
 		editTitle() {
@@ -189,4 +268,67 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="scss">
+// 审批类型
+.self-radio-group {
+	margin-bottom: 8px;
+	.el-radio-group {
+		//padding: 1.5px;
+		width: 100%;
+		line-height: 30px;
+		background-color: var(--el-fill-color-darker);
+		border-radius: var(--el-border-radius-small);
+		.el-radio-button {
+			flex: 1;
+		}
+		.el-radio-button__inner {
+			width: 100%;
+		}
+	}
+}
+
+// 审批人员类型
+.approver-wrapper {
+	border: 1px solid #e4e5e7;
+	border-radius: 6px;
+	overflow: hidden;
+	.header {
+		padding: 0 16px;
+		background: #f5f6f7;
+		height: 36px;
+		line-height: 36px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		span {
+			color: #1f2329;
+			font-weight: 600;
+		}
+	}
+	.main-content-radio {
+		padding: 10px 16px;
+		width: 100%;
+
+		&.el-radio-group {
+			display: flex;
+			flex-wrap: wrap;
+			.el-radio {
+				width: 33.33%;
+				margin-right: 0px;
+			}
+		}
+	}
+}
+
+// 表单表头样式
+.aForm {
+	&.el-form {
+		.el-form-item {
+			.el-form-item__label {
+				color: #1f2329;
+				font-weight: 600;
+			}
+		}
+	}
+}
+</style>

src/components/scWorkflow/nodes/branch.vue

@@ -35,7 +35,7 @@
 			</div>
 			<add-node v-model="nodeConfig.childNode"></add-node>
 		</div>
-		<el-drawer v-model="drawer" title="条件设置" destroy-on-close append-to-body :size="600">
+		<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"
@@ -45,7 +45,7 @@
 				</div>
 			</template>
 			<el-container>
-				<el-main style="padding: 0 20px 20px 20px">
+				<el-main>
 					<el-form label-position="top">
 						<el-form-item label="条件关系">
 							<el-radio-group v-model="form.conditionMode">
@@ -92,7 +92,7 @@
 								</el-table-column>
 							</el-table>
 						</el-form-item>
-						<p><el-button type="primary" icon="el-icon-plus" round @click="addConditionList">增加条件</el-button></p>
+						<p><el-button type="primary" :icon="Plus" round @click="addConditionList">增加条件</el-button></p>
 					</el-form>
 				</el-main>
 				<el-footer>
@@ -106,8 +106,13 @@
 
 <script>
 import addNode from './addNode'
-
+import { Plus } from '@element-plus/icons-vue'
 export default {
+	computed: {
+		Plus() {
+			return Plus
+		}
+	},
 	components: {
 		addNode
 	},

src/components/scWorkflow/nodes/promoter.vue

@@ -10,7 +10,7 @@
 			</div>
 		</div>
 		<add-node v-model="nodeConfig.childNode"></add-node>
-		<el-drawer v-model="drawer" title="发起人" destroy-on-close append-to-body :size="500">
+		<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"
@@ -20,10 +20,10 @@
 				</div>
 			</template>
 			<el-container>
-				<el-main style="padding: 0 20px 20px 20px">
+				<el-main>
 					<el-form label-position="top">
 						<el-form-item label="谁可以发起此审批">
-							<el-button type="primary" icon="el-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
@@ -44,8 +44,14 @@
 
 <script>
 import addNode from './addNode'
+import { Plus } from '@element-plus/icons-vue'
 
 export default {
+	computed: {
+		Plus() {
+			return Plus
+		}
+	},
 	components: {
 		addNode
 	},

src/components/scWorkflow/nodes/send.vue

@@ -12,7 +12,7 @@
 			</div>
 		</div>
 		<add-node v-model="nodeConfig.childNode"></add-node>
-		<el-drawer v-model="drawer" title="抄送人设置" destroy-on-close append-to-body :size="500">
+		<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"
@@ -22,10 +22,10 @@
 				</div>
 			</template>
 			<el-container>
-				<el-main style="padding: 0 20px 20px 20px">
+				<el-main>
 					<el-form label-position="top">
 						<el-form-item label="选择要抄送的人员">
-							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
+							<el-button type="primary" :icon="Plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</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>
@@ -46,8 +46,14 @@
 
 <script>
 import addNode from './addNode'
+import { Plus } from '@element-plus/icons-vue'
 
 export default {
+	computed: {
+		Plus() {
+			return Plus
+		}
+	},
 	components: {
 		addNode
 	},