监测点台账信息

src/components/table/column/index.vue

@@ -13,6 +13,7 @@ export default defineComponent({
     },
     setup(props, { slots }) {
         const attr = reactive(props.attr)
+        attr['align'] = attr['align'] ? attr['align'] : 'center'
         attr['column-key'] = attr['column-key'] ? attr['column-key'] : attr.prop || uuid()
         return () => {
             return createVNode(Column, attr, slots.default)

src/components/table/fieldRender/index.vue

@@ -31,7 +31,7 @@
 
     <!-- datetime -->
     <div v-if="field.render == 'datetime'">
-        {{ !fieldValue ? '-' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
+        {{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
     </div>
 
     <!-- color -->

src/components/table/index.vue

@@ -1,62 +1,88 @@
 <template>
     <vxe-table
-        ref="tableRef"
-        class="ba-data-table w100"
-        header-cell-class-name="table-header-cell"
-        :data="tableStore.table.data"
-        :border="true"
-        v-loading="tableStore.table.loading"
+        ref='tableRef'
+        class='ba-data-table w100'
+        header-cell-class-name='table-header-cell'
+        :data='tableStore.table.data'
+        :border='true'
+        v-loading='tableStore.table.loading'
         stripe
-        size="small"
-        @checkbox-change="onSelectionChange"
-        v-bind="$attrs"
-        :column-config="{resizable: true}"
-        :tree-config="{}"
-        :row-config="{isCurrent: true, isHover: true}"
+        size='small'
+        @checkbox-change='onSelectionChange'
+        v-bind='$attrs'
+        :column-config='{resizable: true}'
+        :tree-config='{}'
+        :row-config='{isCurrent: true, isHover: true}'
     >
         <!-- Column 组件内部是 el-table-column -->
-        <Column
-            :attr="item"
-            :key="key + '-column'"
-            v-for="(item, key) in tableStore.table.column"
-            :tree-node='item.treeNode'
-        >
-            <!-- tableStore 预设的列 render 方案 -->
-            <template v-if="item.render" #default="scope">
-                <FieldRender
-                    :field="item"
-                    :row="scope.row"
-                    :column="scope.column"
-                    :index="scope.rowIndex"
-                    :key="
-                        key +
-                        '-' +
-                        scope.rowIndex +
-                        '-' +
-                        item.render +
-                        '-' +
-                        (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
-                    "
-                />
-            </template>
-        </Column>
+        <template v-if='isGroup'>
+            <vxe-table-colgroup
+                v-if='isGroup'
+                v-for='(item, index) in tableStore.table.column'
+                :field='item.field'
+                :title='item.title'
+                :key='index'
+                :min-width='item.width'
+                show-overflow
+                align='center'
+            >
+                <Column
+                    :attr='child'
+                    :key="key + '-column'"
+                    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='child.field+scope.rowIndex'
+                        />
+                    </template>
+                </Column>
+            </vxe-table-colgroup>
+        </template>
+        <template v-else>
+            <Column
+                :attr='item'
+                :key="key + '-column'"
+                v-for='(item, key) in tableStore.table.column'
+                :tree-node='item.treeNode'
+            >
+                <!-- tableStore 预设的列 render 方案 -->
+                <template v-if='item.render' #default='scope'>
+                    <FieldRender
+                        :field='item'
+                        :row='scope.row'
+                        :column='scope.column'
+                        :index='scope.rowIndex'
+                        :key='item.field+scope.rowIndex'
+                    />
+                </template>
+            </Column>
+
+        </template>
+
     </vxe-table>
-    <div v-if="props.pagination" class="table-pagination">
+    <div v-if='props.pagination' class='table-pagination'>
         <el-pagination
-            :currentPage="tableStore.table.params!.pageNum"
-            :page-size="tableStore.table.params!.pageSize"
-            :page-sizes="pageSizes"
+            :currentPage='tableStore.table.params!.pageNum'
+            :page-size='tableStore.table.params!.pageSize'
+            :page-sizes='pageSizes'
             background
             :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
-            :total="tableStore.table.total"
-            @size-change="onTableSizeChange"
-            @current-change="onTableCurrentChange"
+            :total='tableStore.table.total'
+            @size-change='onTableSizeChange'
+            @current-change='onTableCurrentChange'
         ></el-pagination>
     </div>
-    <slot name="footer"></slot>
+    <slot name='footer'></slot>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { ref, nextTick, inject, computed } from 'vue'
 import type { ElTable, TableInstance } from 'element-plus'
 import FieldRender from '@/components/table/fieldRender/index.vue'
@@ -70,9 +96,12 @@ const tableStore = inject('tableStore') as TableStoreClass
 
 interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
     pagination?: boolean
+    isGroup?: boolean
 }
+
 const props = withDefaults(defineProps<Props>(), {
-    pagination: true
+    pagination: true,
+    isGroup: false
 })
 
 const onTableSizeChange = (val: number) => {
@@ -110,16 +139,18 @@ defineExpose({
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .ba-data-table :deep(.el-button + .el-button) {
     margin-left: 6px;
 }
+
 .ba-data-table :deep(.table-header-cell) .cell {
     color: var(--el-text-color-primary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 .table-pagination {
     box-sizing: border-box;
     width: 100%;