工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
dengzedong
5 天以前 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7
提交 | 用户 | 时间
820397 1 <template>
3e359e 2   <ContentWrap :body-style="{ padding: '0px' }" class="!mb-0">
820397 3     <!-- 表单设计器 -->
3e359e 4     <div
H 5       class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
6     >
7       <fc-designer class="my-designer" ref="designer" :config="designerConfig">
8         <template #handle>
9           <el-button size="small" type="success" plain @click="handleSave">
10             <Icon class="mr-5px" icon="ep:plus" />
11             保存
12           </el-button>
13         </template>
14       </fc-designer>
15     </div>
820397 16   </ContentWrap>
H 17
18   <!-- 表单保存的弹窗 -->
19   <Dialog v-model="dialogVisible" title="保存表单" width="600">
20     <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
21       <el-form-item label="表单名" prop="name">
22         <el-input v-model="formData.name" placeholder="请输入表单名" />
23       </el-form-item>
24       <el-form-item label="状态" prop="status">
25         <el-radio-group v-model="formData.status">
26           <el-radio
27             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
28             :key="dict.value"
3e359e 29             :value="dict.value"
820397 30           >
H 31             {{ dict.label }}
32           </el-radio>
33         </el-radio-group>
34       </el-form-item>
35       <el-form-item label="备注" prop="remark">
36         <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
37       </el-form-item>
38     </el-form>
39     <template #footer>
40       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
41       <el-button @click="dialogVisible = false">取 消</el-button>
42     </template>
43   </Dialog>
44 </template>
45 <script lang="ts" setup>
46 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
47 import { CommonStatusEnum } from '@/utils/constants'
48 import * as FormApi from '@/api/bpm/form'
49 import FcDesigner from '@form-create/designer'
50 import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
51 import { useTagsViewStore } from '@/store/modules/tagsView'
52 import { useFormCreateDesigner } from '@/components/FormCreate'
53
54 defineOptions({ name: 'BpmFormEditor' })
55
56 const { t } = useI18n() // 国际化
57 const message = useMessage() // 消息
58 const { push, currentRoute } = useRouter() // 路由
59 const { query } = useRoute() // 路由信息
60 const { delView } = useTagsViewStore() // 视图操作
61
3e359e 62 // 表单设计器配置
H 63 const designerConfig = ref({
64   switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
65   autoActive: true, // 是否自动选中拖入的组件
66   useTemplate: false, // 是否生成vue2语法的模板组件
67   formOptions: {
68     form: {
69       labelWidth: '100px' // 设置默认的 label 宽度为 100px
70     }
71   }, // 定义表单配置默认值
72   fieldReadonly: false, // 配置field是否可以编辑
73   hiddenDragMenu: false, // 隐藏拖拽操作按钮
74   hiddenDragBtn: false, // 隐藏拖拽按钮
75   hiddenMenu: [], // 隐藏部分菜单
76   hiddenItem: [], // 隐藏部分组件
77   hiddenItemConfig: {}, // 隐藏组件的部分配置项
78   disabledItemConfig: {}, // 禁用组件的部分配置项
79   showSaveBtn: false, // 是否显示保存按钮
80   showConfig: true, // 是否显示右侧的配置界面
81   showBaseForm: true, // 是否显示组件的基础配置表单
82   showControl: true, // 是否显示组件联动
83   showPropsForm: true, // 是否显示组件的属性配置表单
84   showEventForm: true, // 是否显示组件的事件配置表单
85   showValidateForm: true, // 是否显示组件的验证配置表单
86   showFormConfig: true, // 是否显示表单配置
87   showInputData: true, // 是否显示录入按钮
88   showDevice: true, // 是否显示多端适配选项
89   appendConfigData: [] // 定义渲染规则所需的formData
90 })
820397 91 const designer = ref() // 表单设计器
H 92 useFormCreateDesigner(designer) // 表单设计器增强
93 const dialogVisible = ref(false) // 弹窗是否展示
94 const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
95 const formData = ref({
96   name: '',
97   status: CommonStatusEnum.ENABLE,
98   remark: ''
99 })
100 const formRules = reactive({
101   name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
102   status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
103 })
104 const formRef = ref() // 表单 Ref
105
106 /** 处理保存按钮 */
107 const handleSave = () => {
108   dialogVisible.value = true
109 }
110
111 /** 提交表单 */
112 const submitForm = async () => {
113   // 校验表单
114   if (!formRef) return
115   const valid = await formRef.value.validate()
116   if (!valid) return
117   // 提交请求
118   formLoading.value = true
119   try {
120     const data = formData.value as FormApi.FormVO
121     data.conf = encodeConf(designer) // 表单配置
122     data.fields = encodeFields(designer) // 表单字段
123     if (!data.id) {
124       await FormApi.createForm(data)
125       message.success(t('common.createSuccess'))
126     } else {
127       await FormApi.updateForm(data)
128       message.success(t('common.updateSuccess'))
129     }
130     dialogVisible.value = false
131     close()
132   } finally {
133     formLoading.value = false
134   }
135 }
136 /** 关闭按钮 */
137 const close = () => {
138   delView(unref(currentRoute))
139   push('/bpm/manager/form')
140 }
141
142 /** 初始化 **/
143 onMounted(async () => {
144   // 场景一：新增表单
145   const id = query.id as unknown as number
146   if (!id) {
147     return
148   }
149   // 场景二：修改表单
150   const data = await FormApi.getForm(id)
151   formData.value = data
152   setConfAndFields(designer, data.conf, data.fields)
153 })
154 </script>
3e359e 155
H 156 <style>
157 .my-designer {
158   ._fc-l,
159   ._fc-m,
160   ._fc-r {
161     border-top: none;
162   }
163 }
164 </style>