初始化项目，自 v1.7.1 版本开始

src/views/bpm/form/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <XTable @register="registerTable">
+      <!-- 操作：新增 -->
+      <template #toolbar_buttons>
+        <XButton
+          type="primary"
+          preIcon="ep:zoom-in"
+          :title="t('action.add')"
+          v-hasPermi="['system:post:create']"
+          @click="handleCreate()"
+        />
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：修改 -->
+        <XTextButton
+          preIcon="ep:edit"
+          :title="t('action.edit')"
+          v-hasPermi="['bpm:form:update']"
+          @click="handleUpdate(row.id)"
+        />
+        <!-- 操作：详情 -->
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['bpm:form:query']"
+          @click="handleDetail(row.id)"
+        />
+        <!-- 操作：删除 -->
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.del')"
+          v-hasPermi="['bpm:form:delete']"
+          @click="deleteData(row.id)"
+        />
+      </template>
+    </XTable>
+    <!-- 表单详情的弹窗 -->
+    <XModal v-model="detailOpen" width="800" title="表单详情">
+      <form-create :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" />
+    </XModal>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts" name="BpmForm">
+// 业务相关的 import
+import * as FormApi from '@/api/bpm/form'
+import { allSchemas } from './form.data'
+// 表单详情相关的变量和 import
+import { setConfAndFields2 } from '@/utils/formCreate'
+
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+
+// 列表相关的变量
+const [registerTable, { deleteData }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: FormApi.getFormPageApi,
+  deleteApi: FormApi.deleteFormApi
+})
+
+// 新增操作
+const handleCreate = () => {
+  push({
+    name: 'bpmFormEditor'
+  })
+}
+
+// 修改操作
+const handleUpdate = async (rowId: number) => {
+  await push({
+    name: 'bpmFormEditor',
+    query: {
+      id: rowId
+    }
+  })
+}
+
+// 详情操作
+const detailOpen = ref(false)
+const detailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleDetail = async (rowId: number) => {
+  // 设置表单
+  const data = await FormApi.getFormApi(rowId)
+  setConfAndFields2(detailPreview, data.conf, data.fields)
+  // 弹窗打开
+  detailOpen.value = true
+}
+</script>