@a2simcode/ui 0.0.70 → 0.0.72

package/docs/examples/page/log.vue

@@ -1,207 +1,453 @@
-<template> 
-   <div class="j-block j-user-center-log" style="height: 600px;"> 
-     <j-page :noPadding="true" :schema="schema" ref="indexRef" /> 
-   </div> 
- </template> 
- <script lang="ts" setup> 
- import type { TableColumnCompConfig, ColumnSchemaConfig,LayerParamType } from '@a2simcode/ui'; 
- 
- import { ref, h, defineComponent, resolveComponent } from 'vue'; 
- import { iconLoaded, loadIcon } from '@iconify/vue'; 
- 
- const indexRef = ref(); 
- 
- const ExecuteResultLayer = defineComponent({ 
-   name: 'ExecuteResultLayer', 
-   props: { 
-     text: { 
-       type: String, 
-       default: '', 
-     }, 
-   }, 
-   setup(props) { 
-     const JCodeMirror = resolveComponent('j-code-mirror'); 
-     return () => 
-       h( 
-         JCodeMirror, 
-         { 
-           readOnly: true, 
-           value: props.text || '', 
-         } 
-       ); 
-   }, 
- }); 
- 
- const browsers = [ 
-   { name: 'Chrome', icon: 'logos:chrome' }, 
-   { name: 'Firefox', icon: 'logos:firefox' }, 
-   { name: 'Safari', icon: 'logos:safari' }, 
-   { name: 'Edge', icon: 'logos:microsoft-edge' }, 
- ]; 
- 
- interface ColumnType {
-    label: string;
-    id: string;
- }
-
- const columns: ColumnType[] = [ 
-   { label: '浏览器', id: 'j_BrowserTag' }, 
-   { 
-     label: '类型', 
-     id: 'j_CategoryId', 
-   }, 
-   { label: '时间', id: 'j_CreateDate' }, 
-   { label: '时长(ms)', id: 'j_Times' }, 
-   { label: '请求接口', id: 'j_Url' }, 
-   { label: '请求类型', id: 'j_OperateType' }, 
-   { label: 'IP', id: 'j_IPAddress' }, 
-   { label: '结果', id: 'j_Result' }, 
-   { label: '描述', id: 'j_ExecuteResult' }, 
- ]; 
- 
- const columnsConfig: Record<string, TableColumnCompConfig> = { 
-   j_BrowserTag: { 
-     width: 72, 
-     type: 'j-icon', 
-     align: 'center', 
-   }, 
-   j_CategoryId: { 
-     type: 'j-tag', 
-     width: 72, 
-     align: 'center', 
-     dataType: 'options', 
-     options: [ 
-       { label: '登录', value: 1, color: '#e8ffea' }, 
-       { label: '访问', value: 2, color: '#e8f3ff' }, 
-       { label: '操作', value: 3, color: '#e5f9f8' }, 
-       { label: '文件下载', value: 5, color: '#fff7e8' }, 
-       { label: '文件预览', value: 6, color: '#f5f2ff' }, 
-       { label: '接口请求', value: 7, color: '#f0f5ff' }, 
-       { label: '接口限流', value: 8, color: '#fffce8' }, 
-       { label: '接口熔断', value: 9, color: '#fff2e8' }, 
-       { label: '异常', value: 4, color: '#ffece8' }, 
-     ], 
-   }, 
-   j_CreateDate: { 
-     width: 160, 
-     dataType: 'dateTime', 
-   }, 
-   j_Times: { 
-     width: 80, 
-     align: 'center', 
-   }, 
-   j_Url: { 
-     width: 200, 
-     isSearchKeyword: true, 
-   }, 
-   j_OperateType: { 
-     width: 80, 
-     align: 'center', 
-   }, 
- 
-   j_IPAddress: { 
-     width: 120, 
-     isSearchKeyword: true, 
-   }, 
-   j_Result: { 
-     type: 'j-tag', 
-     width: 72, 
-     align: 'center', 
-     dataType: 'options', 
-     fieldFormat: (row: Record<string, any>) => (row.j_Result === 1 ? 1 : 2), 
-     options: [ 
-       { label: '成功', value: 1, color: '#e8ffea' }, 
-       { label: '失败', value: 2, color: '#ffece8' }, 
-     ], 
-   }, 
-   j_ExecuteResult: { 
-     type: 'link', 
-     width: 60, 
-     align: 'center', 
-     fieldFormat: () => '查看', 
-     click: ({ row, openLayer }: { row: any,openLayer: (params: LayerParamType) => void }) => { 
-       openLayer({ 
-         title: '描述', 
-         name: ExecuteResultLayer, 
-         config: { text: row?.j_ExecuteResult || '' }, 
-         width: 1000, 
-         height: 600, 
-         hasBtns: false, 
-       }); 
-     }, 
-   }, 
- }; 
- 
- const myColumns: ColumnSchemaConfig[] = []; 
- columns.forEach((item) => { 
-   const config = columnsConfig[item.id || ''] || {}; 
-   const schemaItem: ColumnSchemaConfig = { 
-     id: item.id || '', 
-     type: config.type || '', 
-     config: { ...config, label: item.label || '' }, 
-   }; 
-   myColumns.push(schemaItem); 
- }); 
- 
- // Mock API
- const api = {
-    getMyPage: async (params: any) => {
-        // Simulate API call
-        await new Promise(resolve => setTimeout(resolve, 300));
-        return {
-            total: 20,
-            rows: Array.from({ length: 10 }).map((_, i) => ({
-                j_Id: i + 1,
-                j_BrowserTag: browsers[i % browsers.length].name,
-                j_CategoryId: (i % 9) + 1,
-                j_CreateDate: new Date().toISOString(),
-                j_Times: Math.floor(Math.random() * 1000),
-                j_Url: `/api/v1/resource/${i}`,
-                j_OperateType: ['GET', 'POST', 'PUT', 'DELETE'][i % 4],
-                j_IPAddress: `192.168.1.${i}`,
-                j_Result: i % 5 === 0 ? 2 : 1,
-                j_ExecuteResult: JSON.stringify({ status: 200, message: 'Success' })
-            }))
-        }
-    }
- }
-
- const schema = [ 
-     { 
-       id: 'mainTable', 
-       type: 'j-table-panel', 
-       config: { 
-         columns: myColumns, 
-         rowKey: 'j_Id', 
-         sort: 'j_CreateDate DESC', 
-         isPage: true, 
-         loadData: async (params: Record<string, any>) => { 
-           let res = await api.getMyPage(params); 
-           if (res && res.rows) { 
-             const iconsToLoad = new Set(); 
-             res.rows.forEach((item: any) => { 
-               const browser = browsers.find( 
-                 (b) => item.j_BrowserTag && item.j_BrowserTag === b.name 
-               ); 
-               if (browser) { 
-                 item.j_BrowserTag = browser.icon; 
-                 iconsToLoad.add(browser.icon); 
-               } 
-             }); 
- 
-             await Promise.all( 
-               [...iconsToLoad].map(async (icon) => { 
-                 if (!iconLoaded(icon as string)) { 
-                   await loadIcon(icon as string); 
-                 } 
-               }) 
-             ); 
-           } 
- 
-           console.log(res, 'res'); 
-           return res; 
-         }, 
-       }, 
-     }, 
-   ];
- </script> 
+<template>
+  <div class="j-block j-user-center-log" style="height: 600px">
+    <j-page :noPadding="true" :schema="schema" />
+  </div>
+</template>
+<script lang="ts" setup>
+import type { TableColumnCompConfig, ColumnSchemaConfig, LayerParamType } from '@a2simcode/ui'
+
+import { ref, h, defineComponent, resolveComponent } from 'vue'
+import { iconLoaded, loadIcon } from '@iconify/vue'
+
+const ExecuteResultLayer = defineComponent({
+  name: 'ExecuteResultLayer',
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const JCodeMirror = resolveComponent('j-code-mirror')
+    return () =>
+      h(JCodeMirror, {
+        readOnly: true,
+        value: props.text || '',
+      })
+  },
+})
+
+const browsers = [
+  { name: 'Chrome', icon: 'logos:chrome' },
+  { name: 'Firefox', icon: 'logos:firefox' },
+  { name: 'Safari', icon: 'logos:safari' },
+  { name: 'Edge', icon: 'logos:microsoft-edge' },
+]
+
+interface ColumnType {
+  label: string
+  id: string
+}
+
+const columns: ColumnType[] = [
+  { label: '浏览器', id: 'j_BrowserTag' },
+  {
+    label: '类型',
+    id: 'j_CategoryId',
+  },
+  { label: '时间', id: 'j_CreateDate' },
+  { label: '时长(ms)', id: 'j_Times' },
+  { label: '请求接口', id: 'j_Url' },
+  { label: '请求类型', id: 'j_OperateType' },
+  { label: 'IP', id: 'j_IPAddress' },
+  { label: '结果', id: 'j_Result' },
+  { label: '描述', id: 'j_ExecuteResult' },
+]
+
+const columnsConfig: Record<string, TableColumnCompConfig> = {
+  j_BrowserTag: {
+    width: 72,
+    type: 'j-icon',
+    align: 'center',
+    dataType: 'options',
+    fieldFormat: (row: Record<string, any>) =>
+      browsers.find((b) => b.name === row.j_BrowserTag)?.icon || '',
+    options: browsers.map((b) => ({ label: b.name, value: b.name })),
+  },
+  j_CategoryId: {
+    type: 'j-tag',
+    width: 100,
+    align: 'center',
+    dataType: 'options',
+    options: [
+      { label: '登录', value: 1, color: '#e8ffea' },
+      { label: '访问', value: 2, color: '#e8f3ff' },
+      { label: '操作', value: 3, color: '#e5f9f8' },
+      { label: '文件下载', value: 5, color: '#fff7e8' },
+      { label: '文件预览', value: 6, color: '#f5f2ff' },
+      { label: '接口请求', value: 7, color: '#f0f5ff' },
+      { label: '接口限流', value: 8, color: '#fffce8' },
+      { label: '接口熔断', value: 9, color: '#fff2e8' },
+      { label: '异常', value: 4, color: '#ffece8' },
+    ],
+  },
+  j_CreateDate: {
+    width: 168,
+    type: 'dateTime',
+  },
+  j_Times: {
+    width: 80,
+    align: 'center',
+    type: 'number',
+  },
+  j_Url: {
+    width: 200,
+    isSearchKeyword: true,
+  },
+  j_OperateType: {
+    width: 96,
+    align: 'center',
+    type: 'j-tag',
+    dataType: 'options',
+    options: [
+      { label: 'GET', value: 'GET', color: '#e8f3ff' },
+      { label: 'POST', value: 'POST', color: '#e8ffea' },
+      { label: 'PUT', value: 'PUT', color: '#fff7e8' },
+      { label: 'DELETE', value: 'DELETE', color: '#ffece8' },
+    ],
+  },
+
+  j_IPAddress: {
+    width: 120,
+    isSearchKeyword: true,
+  },
+  j_Result: {
+    type: 'j-tag',
+    width: 72,
+    align: 'center',
+    dataType: 'options',
+    fieldFormat: (row: Record<string, any>) => (row.j_Result === 1 ? 1 : 2),
+    options: [
+      { label: '成功', value: 1, color: '#e8ffea' },
+      { label: '失败', value: 2, color: '#ffece8' },
+    ],
+  },
+  j_ExecuteResult: {
+    type: 'link',
+    width: 60,
+    align: 'center',
+    frozen: 'right',
+    fieldFormat: () => '查看',
+    click: ({ row, openLayer }: { row: any; openLayer: (params: LayerParamType) => void }) => {
+      openLayer({
+        title: '描述',
+        name: ExecuteResultLayer,
+        config: { text: row?.j_ExecuteResult || '' },
+        width: 1000,
+        height: 600,
+        hasBtns: false,
+      })
+    },
+  },
+}
+
+const myColumns: ColumnSchemaConfig[] = []
+columns.forEach((item) => {
+  const config = columnsConfig[item.id || ''] || {}
+  const schemaItem: ColumnSchemaConfig = {
+    id: item.id || '',
+    type: config.type || '',
+    config: { ...config, label: item.label || '' },
+  }
+  myColumns.push(schemaItem)
+})
+
+// Mock API
+const mockData = Array.from({ length: 100 }).map((_, i) => ({
+  j_Id: i + 1,
+  j_BrowserTag: browsers[i % browsers.length].name,
+  j_CategoryId: (i % 9) + 1,
+  j_CreateDate: new Date(Date.now() - Math.floor(Math.random() * 1000000000)).toISOString(),
+  j_Times: Math.floor(Math.random() * 1000),
+  j_Url: `/api/v1/resource/${i}`,
+  j_OperateType: ['GET', 'POST', 'PUT', 'DELETE'][i % 4],
+  j_IPAddress: `192.168.1.${i}`,
+  j_Result: i % 5 === 0 ? 2 : 1,
+  j_ExecuteResult: JSON.stringify({ status: 200, message: 'Success' }),
+}))
+
+const api = {
+  getMyPage: async (params: any) => {
+    console.log(JSON.stringify(params), 'params')
+    // Simulate API call
+    await new Promise((resolve) => setTimeout(resolve, 300))
+
+    let result = [...mockData]
+
+    // Filter
+    if (params.filter && params.filter.cond && params.filter.cond.length > 0) {
+      const { rel, cond } = params.filter
+      const parseDateVal = (s: string) => {
+        if (!s) return NaN
+        const str = s.includes('T') ? s : s.replace(' ', 'T')
+        const d = new Date(str)
+        return d.getTime()
+      }
+      const dayStart = (d: Date) =>
+        new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0).getTime()
+      const dayEnd = (d: Date) =>
+        new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999).getTime()
+      const monthStart = (y: number, m: number) => new Date(y, m, 1, 0, 0, 0, 0).getTime()
+      const monthEnd = (y: number, m: number) => new Date(y, m + 1, 0, 23, 59, 59, 999).getTime()
+      const quarterRange = (y: number, q: number) => {
+        const startMonth = (q - 1) * 3
+        const start = monthStart(y, startMonth)
+        const end = monthEnd(y, startMonth + 2)
+        return [start, end] as const
+      }
+      const weekStartEnd = (d: Date) => {
+        const dow = (d.getDay() + 6) % 7
+        const startD = new Date(d)
+        startD.setDate(d.getDate() - dow)
+        const endD = new Date(startD)
+        endD.setDate(startD.getDate() + 6)
+        return [dayStart(startD), dayEnd(endD)] as const
+      }
+      const rangeFromFormula = (f: string) => {
+        const now = new Date()
+        if (f === 'today') return [dayStart(now), dayEnd(now)] as const
+        if (f === 'yesterday') {
+          const d = new Date(now)
+          d.setDate(now.getDate() - 1)
+          return [dayStart(d), dayEnd(d)] as const
+        }
+        if (f === 'tomorrow') {
+          const d = new Date(now)
+          d.setDate(now.getDate() + 1)
+          return [dayStart(d), dayEnd(d)] as const
+        }
+        if (f === 'last7days') {
+          const end = dayEnd(now)
+          const d = new Date(now)
+          d.setDate(now.getDate() - 6)
+          const start = dayStart(d)
+          return [start, end] as const
+        }
+        if (f === 'last30days') {
+          const end = dayEnd(now)
+          const d = new Date(now)
+          d.setDate(now.getDate() - 29)
+          const start = dayStart(d)
+          return [start, end] as const
+        }
+        if (f === 'thisWeek') return weekStartEnd(now)
+        if (f === 'lastWeek') {
+          const d = new Date(now)
+          d.setDate(now.getDate() - 7)
+          return weekStartEnd(d)
+        }
+        if (f === 'nextWeek') {
+          const d = new Date(now)
+          d.setDate(now.getDate() + 7)
+          return weekStartEnd(d)
+        }
+        if (f === 'thisMonth') {
+          const y = now.getFullYear()
+          const m = now.getMonth()
+          return [monthStart(y, m), monthEnd(y, m)] as const
+        }
+        if (f === 'lastMonth') {
+          const d = new Date(now)
+          d.setMonth(now.getMonth() - 1)
+          const y = d.getFullYear()
+          const m = d.getMonth()
+          return [monthStart(y, m), monthEnd(y, m)] as const
+        }
+        if (f === 'nextMonth') {
+          const d = new Date(now)
+          d.setMonth(now.getMonth() + 1)
+          const y = d.getFullYear()
+          const m = d.getMonth()
+          return [monthStart(y, m), monthEnd(y, m)] as const
+        }
+        if (f === 'thisQuarter') {
+          const y = now.getFullYear()
+          const q = Math.floor(now.getMonth() / 3) + 1
+          return quarterRange(y, q)
+        }
+        if (f === 'lastQuarter') {
+          let y = now.getFullYear()
+          let q = Math.floor(now.getMonth() / 3)
+          if (q === 0) {
+            q = 4
+            y = y - 1
+          }
+          return quarterRange(y, q)
+        }
+        if (f === 'nextQuarter') {
+          let y = now.getFullYear()
+          let q = Math.floor(now.getMonth() / 3) + 2
+          if (q === 5) {
+            q = 1
+            y = y + 1
+          }
+          return quarterRange(y, q)
+        }
+        if (f === 'thisYear') {
+          const y = now.getFullYear()
+          return [
+            new Date(y, 0, 1).getTime(),
+            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
+          ] as const
+        }
+        if (f === 'lastYear') {
+          const y = now.getFullYear() - 1
+          return [
+            new Date(y, 0, 1).getTime(),
+            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
+          ] as const
+        }
+        if (f === 'nextYear') {
+          const y = now.getFullYear() + 1
+          return [
+            new Date(y, 0, 1).getTime(),
+            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
+          ] as const
+        }
+        return [NaN, NaN] as const
+      }
+      result = result.filter((item) => {
+        const matches = cond.map((c: any) => {
+          const rawVal = item[c.field as keyof typeof item]
+          const val = rawVal == null ? '' : String(rawVal)
+          const target = c.value == null ? '' : String(c.value)
+
+          if (c.type === 'dateTime') {
+            const ts = parseDateVal(val)
+            if (c.method === 'eq') {
+              const t = parseDateVal(target)
+              return ts === t
+            } else if (c.method === 'ne') {
+              const t = parseDateVal(target)
+              return ts !== t
+            } else if (c.method === 'gte') {
+              const t = parseDateVal(target)
+              return ts >= t
+            } else if (c.method === 'lte') {
+              const t = parseDateVal(target)
+              return ts <= t
+            } else if (c.method === 'range') {
+              if (!target) return true
+              const [s, e] = target.split(',')
+              const st = parseDateVal(s)
+              const et = parseDateVal(e)
+              if (isNaN(st) && isNaN(et)) return true
+              if (!isNaN(st) && !isNaN(et)) return ts >= st && ts <= et
+              if (!isNaN(st) && isNaN(et)) return ts >= st
+              if (isNaN(st) && !isNaN(et)) return ts <= et
+              return true
+            } else if (c.method === 'formula') {
+              const [st, et] = rangeFromFormula(target)
+              if (isNaN(st) || isNaN(et)) return true
+              return ts >= st && ts <= et
+            } else if (c.method === 'not_empty') {
+              return val !== '' && val !== 'null' && val !== 'undefined'
+            } else if (c.method === 'empty') {
+              return val === '' || val === 'null' || val === 'undefined'
+            }
+            return false
+          } else {
+            if (
+              c.method === 'gt' ||
+              c.method === 'gte' ||
+              c.method === 'lt' ||
+              c.method === 'lte'
+            ) {
+              const nVal = Number(val)
+              const nTarget = Number(target)
+              if (isNaN(nVal) || isNaN(nTarget)) return false
+              if (c.method === 'gt') return nVal > nTarget
+              if (c.method === 'gte') return nVal >= nTarget
+              if (c.method === 'lt') return nVal < nTarget
+              if (c.method === 'lte') return nVal <= nTarget
+            }
+            if (c.method === 'eq') {
+              return val === target
+            } else if (c.method === 'ne') {
+              return val !== target
+            } else if (c.method === 'like') {
+              return val.includes(target)
+            } else if (c.method === 'unlike') {
+              return !val.includes(target)
+            } else if (c.method === 'in') {
+              const targetList = target.split(',')
+              return targetList.includes(val)
+            } else if (c.method === 'nin') {
+              const targetList = target.split(',')
+              return !targetList.includes(val)
+            } else if (c.method === 'not_empty') {
+              return val !== '' && val !== 'null' && val !== 'undefined'
+            } else if (c.method === 'empty') {
+              return val === '' || val === 'null' || val === 'undefined'
+            }
+          }
+          return false
+        })
+
+        if (rel === 'and') return matches.every((x: boolean) => x)
+        if (rel === 'or') return matches.some((x: boolean) => x)
+        return true
+      })
+    }
+
+    // Sort
+    if (params.pagination && params.pagination.sort) {
+      const [field, order] = params.pagination.sort.split(' ')
+      result.sort((a, b) => {
+        const valA = a[field as keyof typeof a]
+        const valB = b[field as keyof typeof b]
+        if (valA < valB) return order === 'ASC' ? -1 : 1
+        if (valA > valB) return order === 'ASC' ? 1 : -1
+        return 0
+      })
+    }
+
+    // Pagination
+    const page = params.pagination?.page || 1
+    const rows = params.pagination?.rows || 20
+    const start = (page - 1) * rows
+    const end = start + rows
+
+    return {
+      total: result.length,
+      rows: result.slice(start, end),
+    }
+  },
+}
+
+const schema = [
+  {
+    id: 'mainTable',
+    type: 'j-table-panel',
+    config: {
+      columns: myColumns,
+      rowKey: 'j_Id',
+      sort: 'j_CreateDate DESC',
+      isPage: true,
+      loadData: async (params: Record<string, any>) => {
+        let res = await api.getMyPage(params)
+        if (res && res.rows) {
+          const iconsToLoad = new Set()
+          res.rows.forEach((item: any) => {
+            const browser = browsers.find((b) => item.j_BrowserTag && item.j_BrowserTag === b.name)
+            if (browser) {
+              iconsToLoad.add(browser.icon)
+            }
+          })
+
+          await Promise.all(
+            [...iconsToLoad].map(async (icon) => {
+              if (!iconLoaded(icon as string)) {
+                await loadIcon(icon as string)
+              }
+            })
+          )
+        }
+
+        console.log(res, 'res')
+        return res
+      },
+    },
+  },
+]
+</script>