feat: 审批流 表单权限动态化 50%

src/components/scWorkflow/nodes/addNode.vue

@@ -53,7 +53,8 @@ export default {
 					termMode: 1, //审批期限超时后执行类型
 					examineMode: 1, //多人审批时审批方式
 					directorMode: 0, //连续主管审批方式
-					childNode: this.modelValue
+					childNode: this.modelValue,
+					typeOfApprover: '1' // 审批类型 1:人工审批 2:自动通过 3:自动拒绝
 				}
 			} else if (type == 2) {
 				node = {

src/components/scWorkflow/nodes/approver.vue

@@ -25,7 +25,7 @@
 				<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-group v-model="form.typeOfApprover">
 								<el-radio label="1">人工审批</el-radio>
 								<el-radio label="2">自动通过</el-radio>
 								<el-radio label="3">自动拒绝</el-radio>
@@ -33,17 +33,17 @@
 						</el-form-item>
 					</el-form>
 
-					<div class="self-radio-group">
+					<div v-show="form.typeOfApprover === '1'" 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-button v-if="false" label="3">操作权限</el-radio-button>
 						</el-radio-group>
 					</div>
 
-					<div v-show="form.types === '1'">
+					<div v-show="form.typeOfApprover === '1'">
 						<!-- 设置审批人 -->
-						<el-form v-show="radio1 == 1" label-position="top" class="aForm">
+						<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">
@@ -124,15 +124,20 @@
 						</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" />
+						<div v-show="radio1 == '2'">
+							<el-table ref="multipleTableRef" :data="form.tableData" style="width: 100%">
+								<el-table-column align="center">
+									<template #header> 全选 </template>
+									<template #default="scope">
+										<el-checkbox />{{scope.row.checked}}
+									</template>
+								</el-table-column>
+								<el-table-column property="title" label="表单字段" align="center" />
 							</el-table>
 						</div>
 
 						<!-- 操作权限 -->
-						<el-form v-show="radio1 == 3" label-position="top" class="aForm">
+						<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="允许转交" />
@@ -160,6 +165,8 @@
 <script>
 import addNode from './addNode'
 import { Plus } from '@element-plus/icons-vue'
+import { mapState } from 'pinia' //引入映射函数
+import useFlowStore from '@/store/modules/flow'
 
 export default {
 	components: {
@@ -175,27 +182,14 @@ export default {
 			drawer: false,
 			isEditTitle: false,
 			form: {},
-			radio1: '设置审批人',
-			tableData: [
-				{
-					name: '单行文本'
-				},
-				{
-					name: '多行文本'
-				},
-				{
-					name: '提示文字'
-				},
-				{
-					name: '时间选择'
-				}
-			]
+			radio1: '1'
 		}
 	},
 	computed: {
 		Plus() {
 			return Plus
-		}
+		},
+		...mapState(useFlowStore, ['processForm']) //映射函数，取出processForm
 	},
 	watch: {
 		modelValue() {
@@ -208,8 +202,11 @@ export default {
 	methods: {
 		show() {
 			this.form = {}
+			const initOperateTable = JSON.parse(this.processForm)
+			// const initOperateTable = _initOperateTable.map(item => (item.checked = false))
+
 			this.form = JSON.parse(JSON.stringify(this.nodeConfig))
-			this.form.types = '1'
+			this.form.tableData = initOperateTable
 			this.drawer = true
 		},
 		editTitle() {
@@ -329,4 +326,10 @@ export default {
 		}
 	}
 }
+
+.tags-list {
+	.el-tag {
+		margin-right: 10px;
+	}
+}
 </style>