工作台显示所有自定义表单

src/views/flow/flowCraft/index.vue

@@ -1,8 +1,13 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
+<script lang="ts" setup>
+import { ref, computed, onMounted, reactive, toRefs } from 'vue'
 import { asyncComputed } from '@vueuse/core'
-import { staticFlowForm } from '/@/api/flow/flowForm'
+import { staticFlowForm, listFlowForm } from '/@/api/flow/flowForm'
 import { useStore } from '/@/store/index'
+import AddFormData from '/@/views/flow/flowForm/list/component/addFormData.vue'
+import {
+  FlowFormTableColumns,
+  FlowFormTableDataState
+} from '/@/views/flow/flowForm/list/component/model'
 
 const store = useStore()
 
@@ -44,15 +49,7 @@ const summaryCards = asyncComputed(async () => {
 			description: '已处理任务',
 			icon: 'ele-User',
 			color: '#67c23a'
-		},
-		// {
-		// 	title: '抄送我的',
-		// 	number: 8,
-		// 	description: '抄送通知',
-		// 	icon: 'ele-Setting',
-		// 	color: '#909399',
-		// 	bgColor: '#f4f4f5'
-		// }
+		}
 	]
 })
 
@@ -69,130 +66,73 @@ const getSummaryCardBgColor = (index: number) => {
   }
 }
 
-// 作业区域数据
-const operationCards = ref([
-  {
-    title: '设备维护',
-    subtitle: '设备保养维修',
-    icon: 'ele-Tools',
-    color: '#409eff'
-  },
-  {
-    title: '水质检测',
-    subtitle: '水质监测记录',
-    icon: 'ele-WaterCup',
-    color: '#67c23a'
-  },
-  {
-    title: '应急处理',
-    subtitle: '紧急事件处理',
-    icon: 'ele-Warning',
-    color: '#e6a23c'
-  },
-  {
-    title: '巡检作业',
-    subtitle: '日常巡检记录',
-    icon: 'ele-Monitor',
-    color: '#909399'
-  },
-  {
-    title: '清洁作业',
-    subtitle: '设施清洁维护',
-    icon: 'ele-Brush',
-    color: '#f56c6c'
-  },
-  {
-    title: '安全检查',
-    subtitle: '安全隐患排查',
-    icon: 'ele-View',
-    color: '#409eff'
-  }
-])
-
-// 日常报告区域数据
-const reportCards = ref([
-  {
-    title: '日报',
-    subtitle: '日常工作报告',
-    icon: 'ele-Document',
-    color: '#409eff'
-  },
-  {
-    title: '周报',
-    subtitle: '周度工作总结',
-    icon: 'ele-Calendar',
-    color: '#67c23a'
-  },
-  {
-    title: '月报',
-    subtitle: '月度运营报告',
-    icon: 'ele-TrendCharts',
-    color: '#e6a23c'
-  },
-  {
-    title: '异常报告',
-    subtitle: '异常情况上报',
-    icon: 'ele-Warning',
-    color: '#909399'
-  },
-  {
-    title: '运行报告',
-    subtitle: '设备运行状态',
-    icon: 'ele-Monitor',
-    color: '#f56c6c'
-  },
-  {
-    title: '水质报告',
-    subtitle: '水质检测报告',
-    icon: 'ele-WaterCup',
-    color: '#409eff'
-  }
-])
-
-// 物料区域数据
-const materialCards = ref([
-  {
-    title: '物料申请',
-    subtitle: '物料采购申请',
-    icon: 'ele-Plus',
-    color: '#409eff'
-  },
-  {
-    title: '入库登记',
-    subtitle: '物料入库记录',
-    icon: 'ele-Bottom',
-    color: '#67c23a'
-  },
-  {
-    title: '出库申请',
-    subtitle: '物料领用申请',
-    icon: 'ele-Search',
-    color: '#e6a23c'
-  },
-  {
-    title: '库存盘点',
-    subtitle: '定期库存盘点',
-    icon: 'ele-DataAnalysis',
-    color: '#909399'
+// 表单数据相关
+const addFormDataRef = ref()
+const loading = ref(false)
+
+const state = reactive<FlowFormTableDataState>({
+  ids: [],
+  tableData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      pageNum: 1,
+      pageSize: 6,
+      name: undefined,
+      status: 1,
+      isPub: true,
+      createdAt: undefined,
+      dateRange: []
+    },
   },
-  {
-    title: '报废申请',
-    subtitle: '物料报废处理',
-    icon: 'ele-Delete',
-    color: '#f56c6c'
-  },
-  {
-    title: '供应商管理',
-    subtitle: '供应商信息维护',
-    icon: 'ele-Connection',
-    color: '#409eff'
-  }
-])
+});
+
+const { tableData } = toRefs(state)
+
+onMounted(() => {
+  initTableData();
+})
+
+const initTableData = () => {
+  flowFormList();
+}
+
+const flowFormList = () => {
+  loading.value = true
+  listFlowForm(state.tableData.param).then((res: any) => {
+    let list = res.list ?? [];
+    list.map((item: any) => {
+      item.createdBy = item.createdUser?.userNickname
+    })
+    state.tableData.data = list;
+    state.tableData.total = res.total;
+    loading.value = false
+  })
+}
+
+// 处理表单点击事件
+const handleFormClick = (form: FlowFormTableColumns) => {
+  // 设置表单数据，dataId为0表示新增
+  form.dataId = 0
+  addFormDataRef.value.openDialog(form)
+}
+
+// 分页处理
+const handleSizeChange = (val: number) => {
+  state.tableData.param.pageSize = val
+  flowFormList()
+}
+
+const handleCurrentChange = (val: number) => {
+  state.tableData.param.pageNum = val
+  flowFormList()
+}
 
-// 处理卡片点击事件
-const handleCardClick = (type: string, item: any) => {
-  console.log(`${type} - ${item.title}`, item)
-  // 这里可以添加路由跳转或其他业务逻辑
+// 获取表单数据列表（用于刷新）
+const getFormDataList = () => {
+  // 这里可以根据需要实现刷新逻辑
+  console.log('刷新表单数据列表')
 }
 </script>
 
@@ -220,80 +160,49 @@ const handleCardClick = (type: string, item: any) => {
       </el-row>
     </div>
 
-    <!-- 作业区域 -->
+    <!-- 自定义表单区域 -->
     <div class="section-container">
       <div class="section-header">
         <div class="section-bar"></div>
-        <h3 class="section-title">作业</h3>
+        <h3 class="section-title">自定义表单</h3>
       </div>
       <el-row :gutter="20">
-        <el-col :span="8" v-for="card in operationCards" :key="card.title">
+        <el-col :span="8" v-for="form in tableData.data" :key="form.id">
           <el-card
             class="function-card"
             shadow="hover"
-            @click="handleCardClick('operation', card)"
+            @click="handleFormClick(form)"
           >
             <div class="card-content">
-              <el-icon :size="32" :color="card.color">
-                <component :is="card.icon" />
+              <el-icon :size="32" color="#409eff">
+                <ele-Document />
               </el-icon>
-              <div class="card-title">{{ card.title }}</div>
-              <div class="card-subtitle">{{ card.subtitle }}</div>
+              <div class="card-title">{{ form.name }}</div>
+              <div class="card-subtitle">点击发起表单审批</div>
             </div>
           </el-card>
         </el-col>
       </el-row>
-    </div>
 
-    <!-- 日常报告区域 -->
-    <div class="section-container">
-      <div class="section-header">
-        <div class="section-bar"></div>
-        <h3 class="section-title">日常报告</h3>
+      <!-- 分页 -->
+      <div class="pagination-container" v-show="tableData.total > 0">
+        <el-pagination
+          v-model:current-page="tableData.param.pageNum"
+          v-model:page-size="tableData.param.pageSize"
+          :page-sizes="[6]"
+          :total="tableData.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
       </div>
-      <el-row :gutter="20">
-        <el-col :span="8" v-for="card in reportCards" :key="card.title">
-          <el-card
-            class="function-card"
-            shadow="hover"
-            @click="handleCardClick('report', card)"
-          >
-            <div class="card-content">
-              <el-icon :size="32" :color="card.color">
-                <component :is="card.icon" />
-              </el-icon>
-              <div class="card-title">{{ card.title }}</div>
-              <div class="card-subtitle">{{ card.subtitle }}</div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
 
-    <!-- 物料区域 -->
-    <div class="section-container">
-      <div class="section-header">
-        <div class="section-bar"></div>
-        <h3 class="section-title">物料</h3>
-      </div>
-      <el-row :gutter="20">
-        <el-col :span="8" v-for="card in materialCards" :key="card.title">
-          <el-card
-            class="function-card"
-            shadow="hover"
-            @click="handleCardClick('material', card)"
-          >
-            <div class="card-content">
-              <el-icon :size="32" :color="card.color">
-                <component :is="card.icon" />
-              </el-icon>
-              <div class="card-title">{{ card.title }}</div>
-              <div class="card-subtitle">{{ card.subtitle }}</div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
+    <!-- 发起表单审批组件 -->
+    <add-form-data
+      ref="addFormDataRef"
+      @getFormDataList="getFormDataList"
+    />
   </div>
 </template>
 
@@ -400,6 +309,11 @@ const handleCardClick = (type: string, item: any) => {
         }
       }
     }
+
+    .pagination-container {
+      margin-top: 20px;
+      text-align: center;
+    }
   }
 }