代码提示优化

src/components/baInput/components/iconSelector.vue

@@ -169,15 +169,16 @@ const onChangeTab = (name: IconType) => {
         getAwesomeIconfontNames().then((res) => {
             state.fontIconNames = res.map((name) => `fa ${name}`)
         })
-    } else if (name == 'ali') {
-        getIconfontNames().then((res) => {
-            state.fontIconNames = res.map((name) => `iconfont ${name}`)
-        })
-    } else if (name == 'local') {
-        getLocalIconfontNames().then((res) => {
-            state.fontIconNames = res
-        })
     } 
+    // else if (name == 'ali') {
+    //     getIconfontNames().then((res) => {
+    //         state.fontIconNames = res.map((name) => `iconfont ${name}`)
+    //     })
+    // } else if (name == 'local') {
+    //     getLocalIconfontNames().then((res) => {
+    //         state.fontIconNames = res
+    //     })
+    // }
 }
 const onIcon = (icon: string) => {
     state.iconSelectorMouseover = state.popoverVisible = false

src/components/table/defaultAttribute.ts

@@ -1,6 +1,7 @@
-export const defaultAttribute = {
+import { VxeTableProps } from "vxe-table";
+
+export const defaultAttribute:VxeTableProps = {
     align: 'center',
-    class: 'ba-data-table w100',
     headerCellClassName: 'table-header-cell',
     border: true,
     stripe: true,

src/components/table/header/index.vue

@@ -18,8 +18,9 @@
     <div class='table-header ba-scroll-style' v-if='showOperation'>
         <slot name='operation'></slot>
         <!-- 右侧搜索框和工具按钮 -->
-        <div class='table-search' v-if='$slots.select'>
+        <div class='table-search' >
-            <div class='table-search-button-group'>
+        <slot name='right'></slot>
+            <div class='table-search-button-group' v-if='$slots.select'>
                 <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
                     <Icon size='14' name='el-icon-Search' />
                 </el-button>

src/layouts/admin/components/config.vue

@@ -40,7 +40,7 @@
                                     </div>
                                 </el-col>
                             </el-row>
-                            <el-row :gutter="10">
+                            <!-- <el-row :gutter="10">
                                 <el-col :span="12">
                                     <div
                                         @click="setLayoutMode('Streamline')"
@@ -72,11 +72,11 @@
                                         <div class="layout-mode-style-name">双栏</div>
                                     </div>
                                 </el-col>
-                            </el-row>
+                            </el-row> -->
                         </div>
                         <el-divider border-style="dashed">全局</el-divider>
                         <div class="layout-config-global">
-                            <el-form-item label="'后台页面切换动画">
+                            <el-form-item label="后台页面切换动画">
                                 <el-select
                                     @change="onCommitState($event, 'mainAnimation')"
                                     :model-value="configStore.layout.mainAnimation"

src/layouts/admin/components/navBar/classic.vue

@@ -49,18 +49,25 @@ const onMenuCollapse = () => {
             .close-icon {
                 padding: 2px;
                 margin: 2px 0 0 4px;
+                color: v-bind('config.getColorVal("headerBarTabColor")') !important;
             }
             .close-icon:hover {
-                background: var(--ba-color-primary-light);
+                background: v-bind('config.getColorVal("headerBarBackground")');
                 color: var(--el-border-color) !important;
                 border-radius: 50%;
             }
             &.active {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
+                }
             }
             &:hover {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
                 background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
+                }
             }
         }
         .nav-tabs-active-box {

src/layouts/admin/components/navBar/default.vue

@@ -35,17 +35,25 @@ const config = useConfig()
             .close-icon {
                 padding: 2px;
                 margin: 2px 0 0 4px;
+                color: v-bind('config.getColorVal("headerBarTabColor")') !important;
             }
             .close-icon:hover {
-                background: var(--ba-color-primary-light);
+                background: v-bind('config.getColorVal("headerBarBackground")');
                 color: var(--el-border-color) !important;
                 border-radius: 50%;
             }
             &.active {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
+                }
             }
             &:hover {
-                opacity: 1;
+                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
+                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
+                }
             }
         }
         .nav-tabs-active-box {

src/layouts/admin/index.vue

@@ -248,7 +248,7 @@ const init = async () => {
                         icon: 'el-icon-Avatar',
                         menu_type: 'tab',
                         url: '',
-                        component: '/src/views/auth/role.vue',
+                        component: '/src/views/auth/role/index.vue',
                         keepalive: 'auth/role',
                         extend: 'none',
                         children: []

src/stores/dictData.ts

@@ -11,7 +11,7 @@ export const useDictData = defineStore(
             area: []
             // 其他接口获取的字典，比如区域
         })
-        const getBasicData = (code: string, arr: string) => {
+        const getBasicData = (code: string, arr?: string) => {
             let list = []
             list = state.basic.filter(item => item.code === code)[0]?.children || []
             if (arr) {

src/styles/app.scss

@@ -117,9 +117,12 @@ body,
 }
 .ba-operate-dialog .el-dialog__body {
     height: 60vh;
-    padding-top: 0;
+    padding-top: 20px;
     padding-bottom: 52px;
 }
+.ba-operate-dialog .el-dialog__body  .el-scrollbar{
+    padding-right: 60px;
+}
 .ba-operate-dialog .el-dialog__footer {
     padding: 10px var(--el-dialog-padding-primary);
     box-shadow: var(--el-box-shadow);
@@ -127,6 +130,10 @@ body,
     width: 100%;
     bottom: 0;
 }
+.ba-operate-dialog .el-form--inline {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+}
 .ba-operate-form {
     padding-top: 20px;
 }

src/styles/element.scss

@@ -26,6 +26,19 @@
     }
 }
 
+.el-dialog__header {
+    background: var(--el-color-primary);
+    margin-right: 0;
+    .el-dialog__headerbtn {
+        .el-icon {
+            color: var(--el-color-white);
+        }
+    }
+    .el-dialog__title {
+        color: var(--el-color-white);
+    }
+}
+
 .el-table {
     --el-table-border-color: var(--ba-border-color);
 }
@@ -73,3 +86,8 @@
     }
 }
 /* 小屏设备 el-radio-group 样式调整-e */
+
+.vxe-header--row {
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
+}

src/views/auth/menu/index.vue

@@ -64,7 +64,6 @@ const tableStore = new TableStore({
                         title: '确定删除该菜单吗？'
                     },
                     click: (row) => {
-                        popupRef.value.open('编辑菜单', row)
                     }
                 }
             ]

src/views/auth/menu/popupForm.vue

@@ -1,22 +1,67 @@
 <template>
-    <el-dialog
+    <el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
-        class='ba-operate-dialog'
+        <el-scrollbar>
-        v-model='dialogVisible'
+            <el-form :inline="false" :model="form" label-width="120px">
-        :title='title'
+                <el-form-item label="上级菜单">
-    >
+                    <el-cascader
-        <span>This is a message</span>
+                        v-model="form.pid"
+                        :options="tableStore.table.data"
+                        :props="cascaderProps"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+                <el-form-item label="菜单名称">
+                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="图标">
+                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
+                </el-form-item>
+                <el-form-item label="菜单路由">
+                    <el-input v-model="form.path" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="组件路径">
+                    <el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
+                </el-form-item>
+                <el-form-item label="排序">
+                    <el-input-number v-model="form.sort" :min="0" />
+                </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'>
+            <span class="dialog-footer">
-        <el-button @click='dialogVisible = false'>取消</el-button>
+                <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type='primary' @click='submit'>
+                <el-button type="primary" @click="submit">确认</el-button>
-          确认
-        </el-button>
             </span>
         </template>
     </el-dialog>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import IconSelector from '@/components/baInput/components/iconSelector.vue'
+const tableStore = inject('tableStore') as TableStore
+const cascaderProps = {
+    label: 'title',
+    value: 'id'
+}
+// do not use same name with ref
+const form = reactive({
+    code: 'menu',
+    icon: '设备月保_设备日保',
+    id: '88c61dfd02fbdab02e3bf0753d487444',
+    name: '系统配置',
+    path: '/app/setting',
+    pid: 'f517484e241c2fdd7f11a9c3fcaaa109',
+    remark: '系统配置',
+    routeName: null,
+    sort: 0,
+    type: 0
+})
 
 const dialogVisible = ref(false)
 const title = ref('新增菜单')
@@ -29,6 +74,4 @@ const submit = () => {
 }
 
 defineExpose({ open })
-
-
 </script>

src/views/auth/role.vue

@@ -1,3 +0,0 @@
-<template>
-    <div>123</div>
-</template>

src/views/auth/role/index.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:operation>
+                <el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+        <popupForm ref="popupRef"></popupForm>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+
+defineOptions({
+    name: 'auth/role'
+})
+const popupRef = ref()
+const tableStore = new TableStore({
+    url: '/user-boot/role/selectRoleDetail?id=1',
+    method: 'POST',
+    column: [
+        { title: '角色名称', field: 'name', align: 'center' },
+        { title: '角色编码', field: 'code', align: 'center' },
+        { title: '备注', field: 'remark', align: 'center' },
+        { title: '状态', field: 'state', align: 'center' },
+        {
+            title: '操作',
+            align: 'center',
+            width: '130',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('编辑角色', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该角色吗？'
+                    },
+                    click: row => {}
+                }
+            ]
+        }
+    ]
+})
+provide('tableStore', tableStore)
+tableStore.table.params.searchValue = ''
+onMounted(() => {
+    tableStore.index()
+})
+const addMenu = () => {}
+</script>

src/views/auth/role/popupForm.vue

@@ -0,0 +1,77 @@
+<template>
+    <el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px">
+                <el-form-item label="上级菜单">
+                    <el-cascader
+                        v-model="form.pid"
+                        :options="tableStore.table.data"
+                        :props="cascaderProps"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+                <el-form-item label="菜单名称">
+                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="图标">
+                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
+                </el-form-item>
+                <el-form-item label="菜单路由">
+                    <el-input v-model="form.path" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="组件路径">
+                    <el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
+                </el-form-item>
+                <el-form-item label="排序">
+                    <el-input-number v-model="form.sort" :min="0" />
+                </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 TableStore from '@/utils/tableStore'
+import IconSelector from '@/components/baInput/components/iconSelector.vue'
+const tableStore = inject('tableStore') as TableStore
+const cascaderProps = {
+    label: 'title',
+    value: 'id'
+}
+// do not use same name with ref
+const form = reactive({
+    code: 'menu',
+    icon: '设备月保_设备日保',
+    id: '88c61dfd02fbdab02e3bf0753d487444',
+    name: '系统配置',
+    path: '/app/setting',
+    pid: 'f517484e241c2fdd7f11a9c3fcaaa109',
+    remark: '系统配置',
+    routeName: null,
+    sort: 0,
+    type: 0
+})
+
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+}
+const submit = () => {
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>

src/views/voltage/sags/operationsManagement/statistics.vue

@@ -1,86 +1,86 @@
 <template>
-    <div class='default-main'>
+    <div class="default-main">
-        <TableHeader date-picker :showOperation='false' showSelect>
+        <TableHeader date-picker :showOperation="false" showSelect>
             <template v-slot:select>
-                <el-form-item label='区域'>
+                <el-form-item label="区域">
-                    <Area v-model='tableStore.table.params.deptIndex' />
+                    <Area v-model="tableStore.table.params.deptIndex" />
                 </el-form-item>
             </template>
         </TableHeader>
-        <div style='font-weight: bold; background: #fff;text-indent: 1em'>
+        <div style="font-weight: bold; background: #fff; text-indent: 1em">
-            <span style='color: #000'>
+            <span style="color: #000">
                 (左柱):
-                <span style='color: #0099cc'>
+                <span style="color: #0099cc">
-                    <span class='smallBlock' style='background: #0099cc'></span>
+                    <span class="smallBlock" style="background: #0099cc"></span>
                     投运
                 </span>
-                <span style='color: #996600'>
+                <span style="color: #996600">
-                    <span class='smallBlock' style='background: #996600'></span>
+                    <span class="smallBlock" style="background: #996600"></span>
                     热备用
                 </span>
-                <span style='color: #cc0000'>
+                <span style="color: #cc0000">
-                    <span class='smallBlock' style='background: #cc0000'></span>
+                    <span class="smallBlock" style="background: #cc0000"></span>
                     停运
                 </span>
             </span>
             &nbsp;&nbsp;
-            <span style='color: #000'>
+            <span style="color: #000">
                 (右柱):
-                <span style='color: #2e8b57'>
+                <span style="color: #2e8b57">
-                    <span class='smallBlock' style='background: #2e8b57'></span>
+                    <span class="smallBlock" style="background: #2e8b57"></span>
                     {{ '在线率≥90 %' }}
                 </span>
-                <span style='color: #daa520'>
+                <span style="color: #daa520">
-                    <span class='smallBlock' style='background: #daa520'></span>
+                    <span class="smallBlock" style="background: #daa520"></span>
                     {{ '60 %≤在线率 < 90 %' }}
                 </span>
-                <span style='color: #cc0000'>
+                <span style="color: #cc0000">
-                    <span class='smallBlock' style='background: #cc0000'></span>
+                    <span class="smallBlock" style="background: #cc0000"></span>
                     {{ '在线率 < 60 %' }}
                 </span>
             </span>
         </div>
-        <div class='statistics-main' v-loading='tableStore.table.loading'>
+        <div class="statistics-main" v-loading="tableStore.table.loading">
-            <template v-if='!tableStore.table.loading'>
+            <template v-if="!tableStore.table.loading">
                 <div>
-                    <my-echart :options='areaStatistics' />
+                    <my-echart :options="areaStatistics" />
                 </div>
                 <div>
                     <vxe-table
-                        height='auto'
+                        height="auto"
                         auto-resize
-                        :data='tableStore.table.data.area.areaInfo'
+                        :data="tableStore.table.data.area.areaInfo"
-                        v-bind='defaultAttribute'
+                        v-bind="defaultAttribute"
                     >
-                        <vxe-column field='areaName' title='区域'></vxe-column>
+                        <vxe-column field="areaName" title="区域"></vxe-column>
-                        <vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
+                        <vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
-                        <vxe-column field='normal' title='投运' width='80'></vxe-column>
+                        <vxe-column field="normal" title="投运" width="80"></vxe-column>
-                        <vxe-column field='breaks' title='热备用' width='80'></vxe-column>
+                        <vxe-column field="breaks" title="热备用" width="80"></vxe-column>
-                        <vxe-column field='shutdown' title='停运' width='80'></vxe-column>
+                        <vxe-column field="shutdown" title="停运" width="80"></vxe-column>
-                        <vxe-column field='onlineRate' title='在线率（%）'>
+                        <vxe-column field="onlineRate" title="在线率（%）">
-                            <template v-slot:default='scoped'>
+                            <template v-slot:default="scoped">
                                 {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
                             </template>
                         </vxe-column>
                     </vxe-table>
                 </div>
                 <div>
-                    <my-echart :options='factoryStatistics' />
+                    <my-echart :options="factoryStatistics" />
                 </div>
                 <div>
                     <vxe-table
-                        height='auto'
+                        height="auto"
                         auto-resize
-                        :data='tableStore.table.data.factory.areaInfo'
+                        :data="tableStore.table.data.factory.areaInfo"
-                        v-bind='defaultAttribute'
+                        v-bind="defaultAttribute"
                     >
-                        <vxe-column field='areaName' title='厂家'></vxe-column>
+                        <vxe-column field="areaName" title="厂家"></vxe-column>
-                        <vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
+                        <vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
-                        <vxe-column field='normal' title='投运' width='80'></vxe-column>
+                        <vxe-column field="normal" title="投运" width="80"></vxe-column>
-                        <vxe-column field='breaks' title='热备用' width='80'></vxe-column>
+                        <vxe-column field="breaks" title="热备用" width="80"></vxe-column>
-                        <vxe-column field='shutdown' title='停运' width='80'></vxe-column>
+                        <vxe-column field="shutdown" title="停运" width="80"></vxe-column>
-                        <vxe-column field='onlineRate' title='在线率（%）'>
+                        <vxe-column field="onlineRate" title="在线率（%）">
-                            <template v-slot:default='scoped'>
+                            <template v-slot:default="scoped">
                                 {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
                             </template>
                         </vxe-column>
@@ -90,7 +90,7 @@
         </div>
     </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import TableHeader from '@/components/table/header/index.vue'
 import Area from '@/components/form/area/index.vue'
 import TableStore from '@/utils/tableStore'
@@ -105,11 +105,12 @@ defineOptions({
     name: 'voltage/sags/operationsManagement/statistics'
 })
 const dictData = useDictData()
-const areaStatistics = ref(null)
+const areaStatistics = ref()
-const factoryStatistics = ref(null)
+const factoryStatistics = ref()
 const tableStore = new TableStore({
     url: '/event-boot/area/getTerminalRunningStatistics',
     method: 'POST',
+    column: [],
     loadCallback: () => {
         areaStatistics.value = {
             legend: {
@@ -289,7 +290,7 @@ const tableStore = new TableStore({
                         fontSize: 14
                     },
                     backgroundColor: 'rgba(0,0,0,0.35)',
-                    formatter: function(params) {
+                    formatter: function (params: any) {
                         var tips = ''
                         tips += params[0].name + '</br/>'
                         for (var i = 0; i < params.length; i++) {
@@ -309,7 +310,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.factory.areaInfo.map((item: any) => item.normalRate),
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params: any) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -337,7 +338,7 @@ const tableStore = new TableStore({
                         type: 'bar',
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params: any) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -363,7 +364,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.factory.areaInfo.map((item: any) => item.onlineRate),
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params: any) {
                                     if (params.value >= 90) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -423,7 +424,7 @@ onMounted(() => {
 const layout = mainHeight(104) as any
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .statistics-main {
     box-sizing: border-box;
     height: v-bind('layout.height');

types/table.d.ts

@@ -7,7 +7,7 @@ import { Mutable } from 'element-plus/es/utils'
 declare global {
     interface CnTable {
         ref: typeof Table | null
-        data: TableRow[]
+        data: TableRow[] | any
         // 前端分页数据
         webPagingData: TableRow[][]
         // 表格加载状态