调度员表

src/App.vue

@@ -1,13 +1,14 @@
 <template>
   <n-message-provider>
-    <!-- <scroing/> -->
+    <!-- <wgy /> -->
-    <wgy />
+    <ddy/>
   </n-message-provider>
 </template>
 
 <script setup>
 import { NMessageProvider } from 'naive-ui';
 import Wgy from './components/wgy/Wgy.vue';
+import Ddy from './components/ddy/Ddy.vue';
 </script>
 
 <style scoped></style>

src/components/ddy/Ddy.vue

@@ -0,0 +1,135 @@
+<template>
+    <n-space vertical>
+        <n-data-table :columns="table.columns" :data="table.data" :bordered="true" :single-line="false"
+            :min-height="table.minHeight" :max-height="table.maxHeight" :scroll-x="table.scrollX" />
+    </n-space>
+</template>
+
+<script>
+import { h } from 'vue'
+import {
+    NSpace,
+    NGrid,
+    NGridItem,
+    NDataTable,
+    NSelect,
+    NInput,
+    NButton,
+} from 'naive-ui'
+
+export default {
+    name: 'Ddy',
+    components: {
+        NSpace,
+        NGrid,
+        NGridItem,
+        NDataTable,
+        NSelect,
+        NInput,
+        NButton,
+    },
+    data() {
+        let vueSelf = this;
+        return {
+            table: {
+                minHeight: 300,
+                maxHeight: 300,
+                scrollX: 800,
+                columns: [
+                    {
+                        align: 'center',
+                        title: '序号',
+                        key: 'A',
+                        keyName: 'key',
+                        fixed: 'left',
+                        width: 60
+                    },
+                    {
+                        align: 'center',
+                        title: '姓名',
+                        key: 'B',
+                        keyName: 'name',
+                        fixed: 'left',
+                        width: 60
+                    },
+                    {
+                        align: 'center',
+                        title: '签到情况（30分）',
+                        key: 'C',
+                        keyName: 'sign',
+                        width: 60
+                    },
+                    {
+                        align: 'center',
+                        title: '网格案件调度情况',
+                        children: [
+                            {
+                                align: 'center',
+                                title: '基础分',
+                                key: 'D',
+                                keyName: 'baseScore',
+                                width: 60
+                            },
+                            {
+                                align: 'center',
+                                title: '案件调度',
+                                key: 'dispatchCase',
+                                width: 60,
+                                children: [
+                                    {
+                                        align: 'center',
+                                        title: '数量',
+                                        key: 'E',
+                                        keyName: 'dispatchCaseCount',
+                                        width: 60
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '扣分',
+                                        key: 'F',
+                                        keyName: 'dispatchCaseDeductPoints',
+                                        width: 60
+                                    }
+                                ]
+                            },
+                            {
+                                align: 'center',
+                                title: '案件调度过程质量凡属下列情况之一经核准予以扣分',
+                                width: 60,
+                                children: [
+                                    {
+                                        align: 'center',
+                                        title: '应调度却未及时调度',
+                                        key: 'G',
+                                        keyName: 'shouldButNot',
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0)',
+                                                onClick() {
+                                                    vueSelf.onReportDayClick(row, index)
+                                                }
+                                            }, row.G)
+                                        }
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                ],
+                data: []
+            }
+        }
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

src/components/wgy/Wgy.vue

@@ -43,7 +43,7 @@
         </n-space>
         <n-space class="body">
             <n-data-table size="small" :columns="table.columns" :data="table.data" :bordered="true" :single-line="false"
-                :min-height="300" :max-height="300" :scroll-x="2420" />
+                :min-height="table.minHeight" :max-height="table.maxHeight" :scroll-x="table.scrollX" />
         </n-space>
     </n-space>
     <n-modal preset="dialog" style="width: 800px" :show="modal.distance.show" :show-icon="false" :mask-closable="true"
@@ -136,10 +136,9 @@ export default {
                 }
             },
             table: {
-                scrollbar: {
+                minHeight: 300,
-                    trigger: 'hover',
+                maxHeight: 300,
-                    xScrollable: true,
+                scrollX: 2420,
-                },
                 columns: [
                     {
                         align: 'center',