工作流表单+模型代码提交

src/components/ContentWrap/index.ts

@@ -0,0 +1,3 @@
+import ContentWrap from './src/ContentWrap.vue'
+
+export { ContentWrap }

src/components/ContentWrap/src/ContentWrap.vue

@@ -0,0 +1,38 @@
+<script lang='ts' setup>
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+import { QuestionFilled } from '@element-plus/icons-vue'
+
+defineOptions({ name: 'ContentWrap' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('content-wrap')
+
+defineProps({
+    title: propTypes.string.def(''),
+    message: propTypes.string.def('')
+})
+</script>
+
+<template>
+    <ElCard :class="[prefixCls, 'mb-15px']" shadow='never'>
+        <template v-if='title' #header>
+            <div class='flex items-center'>
+                <span class='text-16px font-700'>{{ title }}</span>
+                <ElTooltip v-if='message' effect='dark' placement='right'>
+                    <template #content>
+                        <div class='max-w-200px'>{{ message }}</div>
+                    </template>
+                    <QuestionFilled :size='14' class='ml-5px' />
+                </ElTooltip>
+                <div class='flex flex-grow pl-20px'>
+                    <slot name='header'></slot>
+                </div>
+            </div>
+        </template>
+        <div>
+            <slot></slot>
+        </div>
+    </ElCard>
+</template>