feat: 模拟选择表单 交互

src/store/modules/flow.ts

@@ -14,6 +14,7 @@ export const useFlowStore = defineStore({
 			remark: '', // 备注说明
 			createTime: '', // 创建时间
 			useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
+			processFormId: undefined, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
 			// processActorList: [
 			// 	{
 			// 		actorId: 0, // 参与者ID

src/views/flow/create/components/BasicInfo.vue

@@ -179,8 +179,7 @@ defineExpose({
 				</el-form-item>
 				<el-form-item v-if="from === 'business'" prop="processFormId">
 					<SelectProcessForm v-model="flowInfo.processFormId" />
-					<!-- todo 如要做校验 进行改造 -->
-					<el-input class="hidden" v-model="flowInfo.processFormId" />
+					<el-input class="hidden" :model-value="flowInfo.processFormId" />
 				</el-form-item>
 				<el-form-item label="说明" prop="remark">
 					<el-input v-model="flowInfo.remark" type="textarea" clearable></el-input>

src/views/flow/create/components/SelectProcessForm.vue

@@ -1,12 +1,39 @@
 <template>
 	<div>
 		<el-button type="primary" icon="plus" round @click="selectProcessForm">选择流程表单</el-button>
-		<el-tag v-for="(user, index) in [{ name: '测试', id: '1' }]" :key="user.id" closable @close="delProcessForm">{{ user.name }}</el-tag>
+		<el-tag v-if="modelValue" class="ml-2" size="small" closable @close="delProcessForm">{{ selected_label || '-' }}</el-tag>
 		<!-- 查看流程表单 查看 -->
-		<el-dialog v-model="visible" class="le-dialog local-select-process-form-dialog" title="选择流程表单" width="800">
-			<div>dsdddd</div>
+		<el-dialog v-model="visible" class="le-dialog local-select-process-form-dialog" title="选择流程表单" width="272">
+			<!--			<el-scrollbar max-height="400px">
+				<div class="content">
+					<div v-for="(_, i) of Array.from({ length: 40 })" :key="i">
+						我是内容 <br />
+						{{ i }}
+					</div>
+				</div>
+			</el-scrollbar>-->
+			<!--			240+32-->
+			<le-select
+				:model-value="localValue"
+				class="w-[240px]"
+				:height="600"
+				:is-popover="false"
+				:options="optionsRef.list"
+				value-key="id"
+				label-key="name"
+				:loading="optionsRef.loading"
+				@update:model-value="localValue = $event"
+			>
+				<!--				@update:selected_label="update_selected_label"-->
+				<template #default="{ item, index, disabled }">
+					<div class="item">
+						{{ item.name }} <el-tag class="ml-2" size="small">{{ typeOptions_config[item.type] || '-' }}</el-tag>
+					</div>
+				</template>
+			</le-select>
 			<template #footer>
 				<el-button @click="closeDialog">关 闭</el-button>
+				<el-button type="primary" @click="submit">确 定</el-button>
 			</template>
 		</el-dialog>
 	</div>
@@ -14,27 +41,58 @@
 
 <script setup lang="ts">
 import { computed, onMounted, type PropType, reactive, ref, watch } from 'vue'
+import formtemplate from '@/api/flow/formtemplate.ts'
+import { typeOptions_config } from '@/views/flow/form/data.tsx'
 // import { processTaskApprovalInfo } from '@/api/flow/processTask'
 // import { ElMessage } from 'element-plus'
 // import { formatTimestamp } from '@/utils/datetime.ts'
 
 const props = defineProps({
 	modelValue: {
-		type: Boolean,
-		default: false
-	},
+		required: true,
+		type: String
+		// default: ''
+	}
 	// value: {
 	// 	type: String,
 	// 	default: ''
 	// }
 })
+const emits = defineEmits(['update:modelValue' /*, 'update:value'*/])
+const localValue = ref<any>(undefined)
+watch(
+	() => props.modelValue,
+	val => {
+		localValue.value = val
+	}
+)
+const optionsRef = ref({ list: [], loading: false })
+formtemplate.formTemplatePageApi({ page: 1, pageSize: 9999 }).then((res: any) => {
+	optionsRef.value = {
+		loading: false,
+		list: res.records
+	}
+})
+const selected = computed(() => {
+	const modelValue = props.modelValue
+	return optionsRef.value.list.find(v => v.id === modelValue)
+})
+const selected_label = computed(() => {
+	return selected.value?.name
+})
+const update_selected_label = (label: string) => {
+	console.log(label, 'label')
+	selected_label.value = label
+}
 const visible = ref(false)
 const selectProcessForm = () => {
 	console.log('selectProcessForm')
 	visible.value = true
+	localValue.value = props.modelValue
 }
 const delProcessForm = () => {
 	console.log('delProcessForm')
+	emits('update:modelValue', undefined)
 }
 
 const validateForm = ref({
@@ -45,12 +103,15 @@ const EReditorRef = ref()
 const modelContentConfig = ref({})
 const activeData = ref([])
 
-const $myEmit = defineEmits(['update:modelValue'/*, 'update:value'*/])
-
 const queryDetail = () => {}
 onMounted(queryDetail)
 const closeDialog = () => {
-	$myEmit('update:modelValue', false)
+	// emits('update:modelValue', false)
+	visible.value = false
+}
+const submit = () => {
+	emits('update:modelValue', localValue.value)
+	closeDialog()
 }
 
 /*const visible = computed({
@@ -61,19 +122,29 @@ const closeDialog = () => {
 		$myEmit('update:modelValue', val)
 	}
 })*/
-watch(() => props.value, (val) => {
-	console.error(val, 'props.value')
-})
+watch(
+	() => props.value,
+	val => {
+		console.error(val, 'props.value')
+	}
+)
 </script>
 
 <style scoped lang="scss">
-.flow-detail-content {}
+.flow-detail-content {
+}
+.item {
+	display: flex;
+	align-items: center;
+}
 </style>
 <style lang="scss">
 // 全局样式
 .local-select-process-form-dialog {
 	.el-dialog__body {
-		height: calc(100vh - 160px);
+		//height: calc(100vh - 160px);
+		//height: calc(100vh - 200px);
+		//max-height: calc(100vh - 200px);
 		padding: 12px 16px;
 	}
 }