表格模版

src/template/README.md

@@ -1,2 +1,2 @@
-dialog  弹框标准模版
+dialog 弹框标准模版
-表格模版参照 /views/userList/index.vue
+table 表格模版

src/template/table.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="default-main">
+        <!-- 表头 -->
+        <TableHeader date-picker>
+            <template v-slot:operation>
+                <el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
+            </template>
+        </TableHeader>
+        <!-- 表格 -->
+        <Table ref="tableRef" />
+        <!-- 弹框 -->
+        <PopupEdit ref="popupEdit" />
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide, defineOptions } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import PopupEdit from './dialog.vue'
+
+// 注意名字不要重复，若要保持页面存活，名字需要和路由admin后面的字符保持一致
+defineOptions({
+    name: 'auth/userlist'
+})
+const popupEdit = ref()
+const tableStore = new TableStore({
+    url: '/user-boot/user/list',
+    method: 'POST',
+    column: [
+        { title: '用户名称', field: 'name', minWidth: '130' },
+        { title: '登录名', field: 'loginName', minWidth: '130' },
+        { title: '角色', field: 'roleName', minWidth: '130' },
+        { title: '部门', field: 'deptName', minWidth: '200' },
+        { title: '电话', field: 'phoneShow', minWidth: '100' },
+        { title: '注册时间', field: 'registerTime', minWidth: '130' },
+        { title: '登录时间', field: 'loginTime', minWidth: '130' },
+        { title: '类型', field: 'casualUserName', minWidth: '80' },
+        {
+            title: '状态',
+            field: 'state',
+            width: '100',
+            render: 'tag',
+            custom: {
+                0: 'danger',
+                1: 'success',
+                2: 'warning',
+                3: 'warning',
+                4: 'info',
+                5: 'danger'
+            },
+            replaceValue: {
+                0: '注销',
+                1: '正常',
+                2: '锁定',
+                3: '待审核',
+                4: '休眠',
+                5: '密码过期'
+            }
+        },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1
+                    },
+                    click: row => {}
+                },
+                {
+                    name: 'edit',
+                    title: '修改密码',
+                    type: 'primary',
+                    icon: 'el-icon-Lock',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1
+                    },
+                    click: row => {
+                        ElMessageBox.prompt('二次校验密码确认', '注销用户', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            inputType: 'password'
+                        }).then(({ value }) => {})
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '激活',
+                    type: 'primary',
+                    icon: 'el-icon-Open',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
+                    },
+                    click: row => {}
+                },
+                {
+                    name: 'edit',
+                    title: '注销',
+                    type: 'danger',
+                    icon: 'el-icon-SwitchButton',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1 && row.state !== 3
+                    },
+                    click: row => {}
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.deptName = item.deptName || '/'
+            item.phoneShow = item.phone || '/'
+            item.roleName = item.role.length ? item.role : '/'
+            switch (item.casualUser) {
+                case 0:
+                    item.casualUserName = '临时用户'
+                    break
+                case 1:
+                    item.casualUserName = '长期用户'
+                    break
+                default:
+                    item.casualUserName = '/'
+                    break
+            }
+        })
+    }
+})
+
+provide('tableStore', tableStore)
+tableStore.table.params.searchState = 1
+tableStore.table.params.casualUser = -1
+tableStore.table.params.orderBy = ''
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+
+const addUser = () => {
+    popupEdit.value.open('新增用户')
+}
+</script>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue

@@ -30,7 +30,7 @@ import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
 import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
 import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
 
-const activeName = ref('6')
+const activeName = ref('1')
 const height = mainHeight(84)
 
 </script>

src/views/pms/voltageSags/monitoringPoint/online/eventStudy/index.vue

@@ -1,10 +1,155 @@
 <template>
     <div class='default-main'>
-
+        <TableHeader date-picker>
+            <template v-slot:operation>
+                <el-button :icon='Plus' type='primary' @click='addUser'>添加</el-button>
+            </template>
+        </TableHeader>
+        <Table ref='tableRef' />
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide, defineOptions } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import PopupEdit from './popupEdit.vue'
 
+// 注意名字不要重复，若要保持页面存活，名字需要和路由admin后面的字符保持一致
+defineOptions({
+    name: 'auth/userlist'
+})
+const tableStore = new TableStore({
+    url: '/user-boot/user/list',
+    method: 'POST',
+    column: [
+        { title: '用户名称', field: 'name', minWidth: '130' },
+        { title: '登录名', field: 'loginName', minWidth: '130' },
+        { title: '角色', field: 'roleName', minWidth: '130' },
+        { title: '部门', field: 'deptName', minWidth: '200' },
+        { title: '电话', field: 'phoneShow', minWidth: '100' },
+        { title: '注册时间', field: 'registerTime', minWidth: '130' },
+        { title: '登录时间', field: 'loginTime', minWidth: '130' },
+        { title: '类型', field: 'casualUserName', minWidth: '80' },
+        {
+            title: '状态',
+            field: 'state',
+            width: '100',
+            render: 'tag',
+            custom: {
+                0: 'danger',
+                1: 'success',
+                2: 'warning',
+                3: 'warning',
+                4: 'info',
+                5: 'danger'
+            },
+            replaceValue: {
+                0: '注销',
+                1: '正常',
+                2: '锁定',
+                3: '待审核',
+                4: '休眠',
+                5: '密码过期'
+            }
+        },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1
+                    },
+                    click: row => {
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '修改密码',
+                    type: 'primary',
+                    icon: 'el-icon-Lock',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1
+                    },
+                    click: row => {
+                        ElMessageBox.prompt('二次校验密码确认', '注销用户', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            inputType: 'password'
+                        }).then(({ value }) => {
+
+                        })
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '激活',
+                    type: 'primary',
+                    icon: 'el-icon-Open',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
+                    },
+                    click: row => {
+
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '注销',
+                    type: 'danger',
+                    icon: 'el-icon-SwitchButton',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1 && row.state !== 3
+                    },
+                    click: row => {
+
+                    }
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.deptName = item.deptName || '/'
+            item.phoneShow = item.phone || '/'
+            item.roleName = item.role.length ? item.role : '/'
+            switch (item.casualUser) {
+                case 0:
+                    item.casualUserName = '临时用户'
+                    break
+                case 1:
+                    item.casualUserName = '长期用户'
+                    break
+                default:
+                    item.casualUserName = '/'
+                    break
+            }
+        })
+    }
+})
+
+provide('tableStore', tableStore)
+tableStore.table.params.searchState = 1
+tableStore.table.params.casualUser = -1
+tableStore.table.params.orderBy = ''
+onMounted(() => {
+    tableStore.index()
+})
+
+const addUser = () => {
+}
 </script>
-<style></style>

src/views/pms/voltageSags/monitoringPoint/online/index.vue

@@ -32,7 +32,7 @@ defineOptions({
 })
 const monitoringPoint = useMonitoringPoint()
 const height = mainHeight(82)
-const activeName = ref('2')
+const activeName = ref('3')
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {