feat: 发起审批 功能

src/components/registerGlobComp.ts

@@ -24,6 +24,7 @@ import DragBox from '@/components/FormCreateDesigner/DragBox.vue'
 import Required from '@/components/FormCreateDesigner/Required.vue'
 import TableOptions from '@/components/FormCreateDesigner/TableOptions.vue'
 import FcEditor from '@form-create/component-wangeditor'
+import ScWorkflow from '@/components/scWorkflow'
 import draggable from 'vuedraggable/src/vuedraggable'
 
 // you want register components
@@ -49,6 +50,7 @@ const compList = [
 	Required,
 	TableOptions,
 	FcEditor,
+	ScWorkflow,
 	draggable
 ]
 

src/components/scWorkflow/index.vue

@@ -25,6 +25,7 @@ import nodeWrap from './nodeWrap'
 import useSelect from './select'
 
 export default {
+	name: 'ScWorkflow',
 	components: {
 		nodeWrap,
 		useSelect

src/utils/form.ts

@@ -1,5 +1,5 @@
 import formCreate from '@form-create/element-ui'
-
+// 参考： https://form-create.com/v3/element-ui/
 const viewForm = formCreate
 
 const designerForm = formCreate.factory()

src/views/approve/launch/ItemDrawer.vue

@@ -0,0 +1,110 @@
+<template>
+	<el-drawer class="local-launch_drawer-wrap" title="测试表单" :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)">
+		<!--    <div v-loading="loading" class="local_loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.1)" />-->
+		<FormCreate :option="formOption" :rule="formRule" />
+	</el-drawer>
+</template>
+<script setup lang="ts">
+import model from '@/api/flow/process'
+import viewForm from '@/utils/form'
+import { ref, shallowRef, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+type Props = {
+	modelValue: boolean
+	record: { processId: string; [key: string]: any }
+}
+const props = defineProps<Props>()
+/*const props = withDefaults(defineProps<Props>(), {
+	modelValue: false
+})*/
+const emit = defineEmits<{
+	'update:modelValue': [id: number] // 具名元组语法
+	update: [value: string]
+}>()
+const FormCreate = viewForm.$form()
+const formOption = ref({
+	// resetBtn: { show: true },
+	onSubmit(formData) {
+		// console.error(formData, 'formData')
+		setTimeout(() => {
+			ElMessage.success('模拟 提交成功')
+			formOption.value.submitBtn.loading = false
+		}, 500)
+	},
+	submitBtn: { loading: false }
+	/*formData: {
+		local_workflow: {},
+		test_3: 'eeeee'
+	}*/
+})
+// setTimeout(() => {
+// 	formOption.value.submitBtn.loading = false
+// }, 500)
+/*const formData = ref({
+	local_workflow: {}
+})*/
+/*const workflowItem = computed(() => {
+  return {
+    type:'ScWorkflow',
+    field: 'local_workflow'
+  }
+})*/
+const workflowItem = {
+	type: 'ScWorkflow',
+	field: 'local_workflow'
+}
+const formRule = shallowRef([workflowItem])
+const loading = ref(true)
+model.processDetailApi(props.record.processId).then(res => {
+	console.error(res, '详情 process....', props.record)
+	// modelContent 审批流数据
+	let local_workflow = {}
+	try {
+		local_workflow = JSON.parse(res.modelContent || '{"processConfig":{}}').processConfig
+	} catch (e) {}
+	// formOption.value.formData = { local_workflow, test_3: 'eeeee' }
+	// processForm 动态表单
+	formRule.value = [...JSON.parse(res.processForm || '[]'), { ...workflowItem, value: local_workflow } /*, { type: 'input', field: 'test_3' }*/]
+	// loading.value = false
+	// console.error(formData.value, 'formData.value')
+})
+</script>
+<style lang="scss">
+.local-launch_drawer-wrap {
+	.el-drawer__header {
+		display: flex;
+		padding: 16px 24px;
+		align-items: center;
+		justify-content: space-between;
+		background-color: var(--el-color-info-light-9);
+		text-align: left;
+		/* margin-right: 0; */
+		margin-bottom: 0;
+	}
+	.el-drawer__close-btn {
+		padding: 0;
+		margin-right: -12px;
+	}
+	.el-drawer__body {
+		position: relative;
+		//display: flex;
+		//flex-direction: column;
+	}
+	.local_loading {
+		position: absolute;
+		left: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		z-index: 999;
+		background: rgba(0, 0, 0, 0.05);
+	}
+}
+</style>
+<!--<style scoped lang="scss">
+:deep(.local-launch_drawer-wrap) {
+	background: #f00;
+}
+</style>-->

src/views/approve/launch/index.vue

@@ -6,27 +6,27 @@
 					<el-collapse-item v-for="item in startList" :key="item.categoryId" :title="item.categoryName" :name="item.categoryName">
 						<el-row>
 							<el-col
-								v-for="i_children in item.processList"
-								:key="i_children.processId"
+								v-for="process in item.processList"
+								:key="process.processId"
 								:span="6"
 								style="padding-left: 8px; padding-right: 8px; margin-bottom: 12px; cursor: pointer"
 							>
-								<div class="card-in" @click="testEv">
-									<LeIcon class="flow-icon" :icon-class="`${flowIconPrefix}${i_children.processIcon}`" />
+								<div class="card-in" @click="testEv(process)">
+									<LeIcon class="flow-icon" :icon-class="`${flowIconPrefix}${process.processIcon}`" />
 									<!--									<div class="flow-icon">
-										<img :src="getAssetsFile(i_children.processIcon + '.svg')" />
+										<img :src="getAssetsFile(process.processIcon + '.svg')" />
 									</div>-->
 									<div class="space space-vertical">
 										<div class="space-item">
 											<div class="first-edit">
-												<strong>{{ i_children.processName }}</strong>
+												<strong>{{ process.processName }}</strong>
 											</div>
 										</div>
 										<div class="space-item">
-											<div>{{ i_children.createTime }}</div>
+											<div>{{ process.createTime }}</div>
 										</div>
 										<div class="space-item">
-											<div>{{ i_children.processKey }}</div>
+											<div>{{ process.processKey }}</div>
 										</div>
 									</div>
 								</div>
@@ -36,16 +36,20 @@
 				</el-collapse>
 			</el-card>
 		</div>
+		<ItemDrawer v-if="drawerVisible" v-model="drawerVisible" :record="record" />
 	</div>
 </template>
 
 <script setup name="flow_modal">
 import { ref, onMounted } from 'vue'
+import ItemDrawer from './ItemDrawer.vue'
 const input = ref('')
 const activeNames = ref(['1'])
 import model from '@/api/flow/process'
-import { flowIconPrefix/*, getAssetsFile*/ } from '@/utils/index'
+import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
 const startList = ref([])
+const drawerVisible = ref(false)
+const record = ref({})
 const handleChange = val => {
 	console.log(val)
 }
@@ -57,8 +61,9 @@ const listEv = async () => {
 	activeNames.value = startList.value.map(v => v.categoryName)
 }
 
-const testEv = () => {
-	alert('等待开发')
+const testEv = process => {
+	record.value = process
+	drawerVisible.value = true
 }
 onMounted(() => {
 	listEv()