字典缓存

src/components/table/fieldRender/index.vue

@@ -40,10 +40,9 @@
     </div>
 
     <!-- customTemplate 自定义模板 -->
-    <div
+    <div v-if="field.render == 'customTemplate'">
-        v-if="field.render == 'customTemplate'"
+        {{ field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : '' }}
-        v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"
+    </div>
-    ></div>
 
     <!-- 自定义组件/函数渲染 -->
     <component
@@ -143,21 +142,22 @@
 
 <script setup lang="ts">
 import { ref, inject } from 'vue'
-import type { TagProps, TableColumnCtx } from 'element-plus'
+import type { TagProps } from 'element-plus'
 import type TableStoreClass from '@/utils/tableStore'
 import { fullUrl, timeFormat } from '@/utils/common'
+import { VxeColumnProps } from 'vxe-table/types/all'
 const TableStore = inject('tableStore') as TableStoreClass
 
 interface Props {
     row: TableRow
     field: TableColumn
-    column: TableColumnCtx<TableRow>
+    column: VxeColumnProps
     index: number
 }
 const props = defineProps<Props>()
 
 // 字段值（单元格值）
-const fieldName = ref(props.field.prop)
+const fieldName = ref(props.field.field)
 const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
 if (fieldName.value && fieldName.value.indexOf('.') > -1) {
     let fieldNameArr = fieldName.value.split('.')

src/components/table/index.vue

@@ -7,6 +7,7 @@
         :border="true"
         v-loading="tableStore.table.loading"
         stripe
+        size="small"
         @checkbox-change="onSelectionChange"
         v-bind="$attrs"
         :column-config="{resizable: true}"
@@ -95,8 +96,8 @@ const pageSizes = computed(() => {
 /*
  * 记录选择的项
  */
-const onSelectionChange = (selection: TableRow[]) => {
+const onSelectionChange = (selection: any) => {
-    tableStore.onTableAction('selection-change', selection)
+    // tableStore.onTableAction('selection-change', selection)
 }
 
 const getRef = () => {

src/stores/constant/cacheKey.ts

@@ -10,3 +10,5 @@ export const STORE_CONFIG = 'storeConfig'
 
 // 后台标签页
 export const STORE_TAB_VIEW_CONFIG = 'storeTabViewConfig'
+// 字典
+export const DICT_DATA = 'dictData'

src/stores/dictData.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import { DICT_DATA } from '@/stores/constant/cacheKey'
+import type { DictData, BasicDictData } from '@/stores/interface/index'
+import { reactive } from 'vue'
+
+export const useDictData = defineStore(
+    'dictData',
+    () => {
+        const state: DictData = reactive({
+            basic: [],
+            // 其他接口获取的字典，比如区域 
+        })
+        const setBasicData = (data: BasicDictData[]) => {
+            state.basic = data
+        }
+        const getBasicData = (code: string) => {
+            return state.basic.filter(item => item.code === code)[0]?.children || []
+        }
+        return {
+            state,
+            setBasicData,
+            getBasicData
+        }
+    },
+    {
+        persist: {
+            key: DICT_DATA
+        }
+    }
+)

src/stores/interface/index.ts

@@ -41,5 +41,18 @@ export interface AdminInfo {
     last_login_time: string
     token: string
     refresh_token: string
-    super:boolean
+    super: boolean
+}
+
+export interface DictData {
+    basic: BasicDictData[]
+}
+
+export interface BasicDictData {
+    name: string
+    id: string
+    code: string
+    value: null
+    sort: number | null
+    children?: BasicDictData[]
 }

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

@@ -20,7 +20,7 @@
 </template>
 <script setup lang="ts">
 import { Plus } from '@element-plus/icons-vue'
-import { ref, onMounted, provide } from 'vue'
+import { ref, onMounted, provide, h } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
@@ -34,13 +34,49 @@ const tableStore = new TableStore({
     method: 'POST',
     column: [
         { title: '序号', type: 'seq', align: 'center', width: 60 },
-        { title: '区域', field: 'userName', align: 'center', width: 120 },
+        { title: '区域', field: 'areaName', align: 'center', width: 120 },
-        { title: '供电公司', field: 'operate', align: 'center', width: 220 },
+        { title: '供电公司', field: 'gdName', align: 'center', width: 120 },
-        { title: '变电站', field: 'describe', align: 'center', showOverflow: true, minWidth: 200 },
+        { title: '变电站', field: 'bdName', align: 'center', showOverflow: true, minWidth: 100 },
-        { title: '终端编号', field: 'type', align: 'center', width: 160 },
+        { title: '终端编号', field: 'devName', align: 'center', width: 160 },
-        { title: '投运时间', field: 'type', align: 'center', width: 100 },
+        { title: '投运时间', field: 'loginTime', align: 'center', width: 200 },
-        { title: '厂家', field: 'ip', align: 'center', width: 160 },
+        { title: '厂家', field: 'manufacturer', align: 'center', width: 160 },
-        { title: '', field: 'level', align: 'center', width: 100 }
+        { title: '型号', field: 'devType', align: 'center', width: 200 },
+        { title: '网络参数', field: 'ip', align: 'center', width: 200 },
+        { title: '端口', field: 'port', align: 'center', width: 100 },
+        { title: '终端状态', field: 'runFlag', align: 'center', width: 100 },
+        { title: '通讯状态', field: 'comFlag', align: 'center', width: 100 },
+        { title: '最新数据', field: 'updateTime', align: 'center', width: 200 },
+        {
+            title: '评价',
+            field: 'onlineEvaluate',
+            align: 'center',
+            width: 100,
+            render: 'customTemplate',
+            customTemplate: row => {
+                return h(
+                    'el-tag',
+                    {
+                        effect: 'dark',
+                        type:
+                            row.onlineEvaluate * 100 > 90
+                                ? 'success'
+                                : row.onlineEvaluate * 100 > 60
+                                ? 'warning'
+                                : 'danger'
+                    },
+                    row.onlineEvaluate * 100 + '%'
+                )
+                // if (row.onlineEvaluate == null) {
+                //     return '-'
+                // } else if (row.onlineEvaluate * 100 > 90) {
+                //     return `<el-tag  effect="dark" type="success"> 优 </el-tag> `
+                // } else if (row.onlineEvaluate * 100 > 60) {
+                //     return `<el-tag  effect="dark" type="warning"> 良 </el-tag> `
+                // } else {
+                //     return `<el-tag  effect="dark" type="danger"> 差 </el-tag> `
+                // }
+            }
+        }
     ]
 })
 tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'

types/table.d.ts

@@ -56,7 +56,7 @@ declare global {
         // 自定义组件/函数渲染
         customRender?: string | Component
         // 使用了 render 属性时,渲染前对字段值的预处理方法，请返回新值
-        renderFormatter?: (row: TableRow, field: TableColumn, value: any, column: VxeColumnProps, index: number) => any
+        renderFormatter?: (row: TableRow, field: TableColumn, value: any, column: any, index: number) => any
         // 自定义渲染模板，方法可返回html内容
         customTemplate?: (
             row: TableRow,