表格分组递归

src/components/secondSheet/index.vue

@@ -11,6 +11,7 @@
     height: 100%;
     left: 0;
     top: 0;
-    z-index: 2;
+    z-index: 10;
+    background: #fff;
 }
 </style>

src/components/table/column/groupColumn.vue

@@ -0,0 +1,41 @@
+<template>
+    <template v-for="(item, index) in props.column" :key="index + '-column'">
+        <vxe-table-colgroup
+            v-if="item.children"
+            :field="item.field"
+            :title="item.title"
+            :min-width="item.width"
+            show-overflow
+            align="center"
+        >
+            <!-- 递归调用 -->
+            <GroupColumn :column="item.children" />
+        </vxe-table-colgroup>
+        <Column :attr="item" :tree-node="item.treeNode" v-else>
+            <template v-if="item.render" #default="scope">
+                <FieldRender
+                    :field="item"
+                    :row="scope.row"
+                    :column="scope.column"
+                    :index="scope.rowIndex"
+                    :key="
+                        index +
+                        '-' +
+                        item.render +
+                        '-' +
+                        (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
+                    "
+                />
+            </template>
+        </Column>
+    </template>
+</template>
+
+<script setup lang="ts">
+import FieldRender from '@/components/table/fieldRender/index.vue'
+import Column from '@/components/table/column/index.vue'
+
+const props = defineProps<{
+    column: any[]
+}>()
+</script>

src/components/table/index.vue

@@ -11,40 +11,7 @@
         >
             <!-- Column 组件内部是 el-table-column -->
             <template v-if="isGroup">
-                <vxe-table-colgroup
+                <GroupColumn :column="tableStore.table.column" />
-                    v-if="isGroup"
-                    v-for="(item, index) in tableStore.table.column"
-                    :field="item.field"
-                    :title="item.title"
-                    :key="index + '-column'"
-                    :min-width="item.width"
-                    show-overflow
-                    align="center"
-                >
-                    <Column
-                        :attr="child"
-                        :key="key + '-column' + '-' + index"
-                        v-for="(child, key) in item.children"
-                        :tree-node="child.treeNode"
-                    >
-                        <!-- tableStore 预设的列 render 方案 -->
-                        <template v-if="child.render" #default="scope">
-                            <FieldRender
-                                :field="child"
-                                :row="scope.row"
-                                :column="scope.column"
-                                :index="scope.rowIndex"
-                                :key="
-                                    key +
-                                    '-' +
-                                    child.render +
-                                    '-' +
-                                    (child.field ? '-' + child.field + '-' + scope.row[child.field] : '')
-                                "
-                            />
-                        </template>
-                    </Column>
-                </vxe-table-colgroup>
             </template>
             <template v-else>
                 <Column
@@ -96,6 +63,7 @@ import type { ElTable } from 'element-plus'
 import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
 import FieldRender from '@/components/table/fieldRender/index.vue'
 import Column from '@/components/table/column/index.vue'
+import GroupColumn from '@/components/table/column/groupColumn.vue'
 import { useConfig } from '@/stores/config'
 import type TableStoreClass from '@/utils/tableStore'
 
@@ -180,3 +148,4 @@ defineExpose({
     }
 }
 </style>
+@/components/table/column/GroupColumn.vue@/components/table/column/GroupColumn.vue

src/views/hsw/index.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="default-main">
+        <!-- 表头 -->
+        <!-- 表头 -->
+        <TableHeader date-picker>
+            <template v-slot:select>
+                <el-form-item label="关键词:">
+                    <el-input
+                        style="width: 240px"
+                        v-model="tableStore.table.params.searchValue"
+                        clearable
+                        placeholder="仅根据用户名/登录名"
+                    />
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
+                <el-radio-group v-model="radio" class="ml10">
+                    <el-radio-button label="暂降数据" />
+                    <el-radio-button label="电压暂降事件统计" />
+                    <el-radio-button label="耐受曲线信息" />
+                </el-radio-group>
+            </template>
+        </TableHeader>
+        <div style="position: relative">
+            <!-- 表格 -->
+            <Table ref="tableRef" />
+            <Transition name="el-fade-in-linear" mode="out-in">
+                <Sags3D v-if="radio == '电压暂降事件统计'" />
+            </Transition>
+            <Transition name="el-fade-in-linear" mode="out-in">
+                <ToleranceCurve v-if="radio == '耐受曲线信息'" />
+            </Transition>
+        </div>
+        <PopupCalculator ref="popupCalculator" />
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide, defineOptions } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import PopupCalculator from './popupCalculator.vue'
+import Sags3D from './sags3D.vue'
+import ToleranceCurve from './toleranceCurve.vue'
+
+// 注意名字不要重复，若要保持页面存活，名字需要和路由admin后面的字符保持一致
+defineOptions({
+    name: 'hsw/zjsj'
+})
+const radio = ref('暂降数据')
+const popupCalculator = ref()
+const tableStore = new TableStore({
+    // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
+    url: '/user-boot/user/list',
+    method: 'POST',
+    column: [
+        { title: '序号', type: 'seq', width: '80' },
+        { title: '事件编号', field: 'loginName', minWidth: '130' },
+        { title: '供电线路', field: 'roleName', minWidth: '130' },
+        { title: '事件类型', field: 'deptName', minWidth: '200' },
+        { title: '发生时间', field: 'phoneShow', minWidth: '100' },
+        { title: '暂降幅值(p.u.)', field: 'registerTime', minWidth: '130' },
+        { title: '持续时间(ms)', field: 'loginTime', minWidth: '130' },
+        { title: '预计损失(万元)', field: 'casualUserName', minWidth: '80' }
+    ]
+})
+// 注入到子组件
+provide('tableStore', tableStore)
+// 默认参数 参数多的话可以使用Object.assign方法
+tableStore.table.params.searchState = 1
+tableStore.table.params.searchValue = ''
+tableStore.table.params.casualUser = -1
+tableStore.table.params.orderBy = ''
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+
+// 弹框
+const addUser = () => {
+    popupCalculator.value.open('新增用户')
+}
+</script>
+<style></style>

src/views/hsw/popupCalculator.vue

@@ -0,0 +1,77 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+                <el-form-item label="角色名称">
+                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="角色编码">
+                    <el-input v-model="form.code" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="角色描述">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
+
+const dialogVisible = ref(false)
+const title = ref('')
+const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
+// 注意不要和表单ref的命名冲突
+const form = reactive<anyObj>({
+    code: '',
+    name: '',
+    remark: '',
+    id: ''
+})
+const rules = {
+    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
+}
+
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        // 表单赋值
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        // 在此处恢复默认表单
+        for (let key in form) {
+            form[key] = ''
+        }
+    }
+}
+const submit = () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            if (form.id) {
+                // await update(form)
+            } else {
+                // await create(form)
+            }
+            ElMessage.success('保存成功')
+            tableStore.index()
+            dialogVisible.value = false
+        }
+    })
+}
+
+defineExpose({ open })
+</script>

src/views/hsw/sags3D.vue

@@ -0,0 +1,54 @@
+<template>
+    <SecondSheet>
+        <div style="height: 100%; overflow: hidden">
+            <Table ref="tableRef" height="auto" isGroup />
+        </div>
+    </SecondSheet>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, provide, defineOptions } from 'vue'
+import SecondSheet from '@/components/secondSheet/index.vue'
+import Table from '@/components/table/index.vue'
+import TableStore from '@/utils/tableStore'
+
+const tableStore = new TableStore({
+    showPage: false,
+    // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
+    url: '/user-boot/user/list',
+    method: 'POST',
+    column: [
+        {
+            title: '电压暂降频次统计表',
+            children: [
+                { title: '暂降福度', field: 'loginName', width: '130' },
+                {
+                    title: '持续时间',
+                    field: 'loginName',
+                    children: [
+                        { title: '0.01-0.02', field: 'loginName' },
+                        { title: '0.02-0.05', field: 'loginName' },
+                        { title: '0.05-0.07', field: 'loginName' },
+                        { title: '0.07-0.10', field: 'loginName' },
+                        { title: '0.10-1.00', field: 'loginName' },
+                    ]
+                }
+            ]
+        }
+    ]
+})
+// 注入到子组件
+provide('tableStore', tableStore)
+
+// 默认参数 参数多的话可以使用Object.assign方法
+tableStore.table.params.pageSize = 9999
+tableStore.table.params.searchState = 1
+tableStore.table.params.searchValue = ''
+tableStore.table.params.casualUser = -1
+tableStore.table.params.orderBy = ''
+
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+</script>

src/views/hsw/toleranceCurve.vue

@@ -0,0 +1,7 @@
+<template>
+    <SecondSheet>12</SecondSheet>
+</template>
+
+<script>
+import SecondSheet from '@/components/secondSheet/index.vue'
+</script>

vite.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
         host: '0.0.0.0',
         proxy: {
             '/api': {
-                target: 'http://192.168.1.125:10215', //数据中心
+                target: 'http://192.168.1.81:10215', //数据中心
                 changeOrigin: true,
                 rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
             },