@a2simcode/ui 0.0.55 → 0.0.57

package/docs/examples/table/single-selection.vue

@@ -1,64 +1,64 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table
-      ref="tableRef"
-      :columns="columns"
-      :records="records"
-      @selection-changed="onSelectionChanged"
-    />
-  </div>
-  <div style="margin-top: 10px">Selected: {{ selected }}</div>
-  <div style="margin-top: 10px">
-    <el-button @click="getSelectionManual">Get Selection Manually</el-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tableRef = ref()
-const selected = ref<any[]>([])
-
-const onSelectionChanged = (selection: any[]) => {
-  console.log('selection changed', selection)
-  selected.value = selection
-}
-
-const getSelectionManual = () => {
-  if (tableRef.value) {
-    const selection = tableRef.value.getSelection()
-    console.log('manual selection', selection)
-    selected.value = selection
-  }
-}
-
-const columns = ref([
-  {
-    id: 'Order ID',
-    config: {
-      label: 'Order ID',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'Customer ID',
-    config: {
-      label: 'Customer ID',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-])
-
-const records = ref([
-  {
-    'Order ID': 'CA-2016-152156',
-    'Customer ID': 'CG-12520',
-  },
-  {
-    'Order ID': 'CA-2016-138688',
-    'Customer ID': 'DV-13045',
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      ref="tableRef"
+      :columns="columns"
+      :records="records"
+      @selection-changed="onSelectionChanged"
+    />
+  </div>
+  <div style="margin-top: 10px">Selected: {{ selected }}</div>
+  <div style="margin-top: 10px">
+    <el-button @click="getSelectionManual">Get Selection Manually</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableRef = ref()
+const selected = ref<any[]>([])
+
+const onSelectionChanged = (selection: any[]) => {
+  console.log('selection changed', selection)
+  selected.value = selection
+}
+
+const getSelectionManual = () => {
+  if (tableRef.value) {
+    const selection = tableRef.value.getSelection()
+    console.log('manual selection', selection)
+    selected.value = selection
+  }
+}
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+  },
+  {
+    'Order ID': 'CA-2016-138688',
+    'Customer ID': 'DV-13045',
+  },
+])
+</script>

package/docs/examples/table/tag.vue

@@ -0,0 +1,43 @@
+<template>
+  <div style="position: relative; width: 100%; height: 220px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '客户',
+      width: 160,
+      align: 'left',
+    },
+  },
+  {
+    id: 'tags',
+    type: 'j-tag',
+    config: {
+      label: '标签',
+      width: 360,
+      align: 'left',
+      dataType: 'options',
+      options: [
+        { value: 'ax', label: '安盛科技', color: '#fff7e8' },
+        { value: 'jy', label: '锦银集团', color: '#e8f3ff' },
+        { value: 'drs', label: '大都人寿', color: '#e8fffb' },
+        { value: 'auto1', label: '自动白字', color: '#165dff' },
+        { value: 'auto2', label: '自动黑字', color: '#94bfff' },
+      ],
+    },
+  },
+])
+
+const records = ref([
+  { name: '客户A', tags: 'ax,jy' },
+  { name: '客户B', tags: 'drs,auto1' },
+  { name: '客户C', tags: 'ax,jy,drs,auto2' },
+])
+</script>

package/docs/examples/table/tree-column.vue

@@ -1,119 +1,119 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table :columns="columns" :records="records" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'base_info',
-    config: {
-      label: 'Base Info',
-      width: 'auto',
-      align: 'center',
-    },
-    children: [
-      {
-        id: 'name',
-        config: {
-          label: 'Name',
-          width: 'auto',
-          align: 'left',
-        },
-      },
-      {
-        id: 'age',
-        config: {
-          label: 'Age',
-          width: 'auto',
-          align: 'center',
-        },
-      },
-    ],
-  },
-  {
-    id: 'contact_info',
-    config: {
-      label: 'Contact Info',
-      width: 'auto',
-      align: 'center',
-    },
-    children: [
-      {
-        id: 'phone',
-        config: {
-          label: 'Phone',
-          width: 'auto',
-          align: 'left',
-        },
-      },
-      {
-        id: 'email',
-        config: {
-          label: 'Email',
-          width: 'auto',
-          align: 'left',
-        },
-      },
-      {
-        id: 'address',
-        config: {
-          label: 'Address',
-          width: 'auto',
-          align: 'left',
-        },
-        children: [
-          {
-            id: 'province',
-            config: {
-              label: 'Province',
-              width: 'auto',
-              align: 'left',
-            },
-          },
-          {
-            id: 'city',
-            config: {
-              label: 'City',
-              width: 'auto',
-              align: 'left',
-            },
-          },
-          {
-            id: 'street',
-            config: {
-              label: 'Street',
-              width: 'auto',
-              align: 'left',
-            },
-          },
-        ],
-      },
-    ],
-  },
-])
-
-const records = ref([
-  {
-    name: 'John Brown',
-    age: 18,
-    phone: '123456789',
-    email: 'john@example.com',
-    province: 'Sichuan',
-    city: 'Chengdu',
-    street: 'Kehua North Road',
-  },
-  {
-    name: 'Jim Green',
-    age: 24,
-    phone: '987654321',
-    email: 'jim@example.com',
-    province: 'Guangdong',
-    city: 'Shenzhen',
-    street: 'Nanshan Road',
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'base_info',
+    config: {
+      label: 'Base Info',
+      width: 'auto',
+      align: 'center',
+    },
+    children: [
+      {
+        id: 'name',
+        config: {
+          label: 'Name',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'age',
+        config: {
+          label: 'Age',
+          width: 'auto',
+          align: 'center',
+        },
+      },
+    ],
+  },
+  {
+    id: 'contact_info',
+    config: {
+      label: 'Contact Info',
+      width: 'auto',
+      align: 'center',
+    },
+    children: [
+      {
+        id: 'phone',
+        config: {
+          label: 'Phone',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'email',
+        config: {
+          label: 'Email',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'address',
+        config: {
+          label: 'Address',
+          width: 'auto',
+          align: 'left',
+        },
+        children: [
+          {
+            id: 'province',
+            config: {
+              label: 'Province',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+          {
+            id: 'city',
+            config: {
+              label: 'City',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+          {
+            id: 'street',
+            config: {
+              label: 'Street',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+        ],
+      },
+    ],
+  },
+])
+
+const records = ref([
+  {
+    name: 'John Brown',
+    age: 18,
+    phone: '123456789',
+    email: 'john@example.com',
+    province: 'Sichuan',
+    city: 'Chengdu',
+    street: 'Kehua North Road',
+  },
+  {
+    name: 'Jim Green',
+    age: 24,
+    phone: '987654321',
+    email: 'jim@example.com',
+    province: 'Guangdong',
+    city: 'Shenzhen',
+    street: 'Nanshan Road',
+  },
+])
+</script>

package/docs/examples/table/tree-data.vue

@@ -1,141 +1,141 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table :columns="columns" :records="records" is-tree />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'group',
-    config: {
-      label: 'department',
-      width: 200,
-      align: 'left',
-      fieldFormat(rec: any) {
-        return rec['department'] ?? rec['group'] ?? rec['name']
-      },
-    },
-  },
-  {
-    id: 'total_children',
-    config: {
-      label: 'memebers count',
-      width: 150,
-      align: 'center',
-      fieldFormat(rec: any) {
-        if (rec?.['position']) {
-          return `position:  ${rec['position']}`
-        } else return rec?.['total_children']
-      },
-    },
-  },
-  {
-    id: 'monthly_expense',
-    config: {
-      label: 'monthly expense',
-      width: 150,
-      align: 'right',
-      fieldFormat(rec: any) {
-        if (rec?.['salary']) {
-          return `salary:  ${rec['salary']}`
-        } else return rec?.['monthly_expense']
-      },
-    },
-  },
-  {
-    id: 'new_hires_this_month',
-    config: {
-      label: 'new hires this month',
-      width: 150,
-      align: 'center',
-    },
-  },
-  {
-    id: 'resignations_this_month',
-    config: {
-      label: 'resignations this month',
-      width: 150,
-      align: 'center',
-    },
-  },
-  {
-    id: 'complaints_and_suggestions',
-    config: {
-      label: 'recived complaints counts',
-      width: 150,
-      align: 'center',
-    },
-  },
-])
-
-const records = ref([
-  {
-    group: 'Headquarters',
-    total_children: 3,
-    monthly_expense: 60000,
-    new_hires_this_month: 2,
-    resignations_this_month: 0,
-    complaints_and_suggestions: 1,
-    children: [
-      {
-        department: 'HR',
-        position: 'HR Manager',
-        salary: 15000,
-        monthly_expense: 15000,
-        new_hires_this_month: 1,
-        resignations_this_month: 0,
-        complaints_and_suggestions: 0,
-      },
-      {
-        department: 'Finance',
-        position: 'Finance Manager',
-        salary: 18000,
-        monthly_expense: 18000,
-        new_hires_this_month: 0,
-        resignations_this_month: 0,
-        complaints_and_suggestions: 0,
-      },
-      {
-        department: 'IT',
-        position: 'IT Director',
-        salary: 27000,
-        monthly_expense: 27000,
-        new_hires_this_month: 1,
-        resignations_this_month: 0,
-        complaints_and_suggestions: 1,
-      },
-    ],
-  },
-  {
-    group: 'Branch Office',
-    total_children: 2,
-    monthly_expense: 35000,
-    new_hires_this_month: 1,
-    resignations_this_month: 1,
-    complaints_and_suggestions: 2,
-    children: [
-      {
-        department: 'Sales',
-        position: 'Sales Manager',
-        salary: 16000,
-        monthly_expense: 16000,
-        new_hires_this_month: 1,
-        resignations_this_month: 0,
-        complaints_and_suggestions: 1,
-      },
-      {
-        department: 'Support',
-        position: 'Support Lead',
-        salary: 14000,
-        monthly_expense: 19000,
-        new_hires_this_month: 0,
-        resignations_this_month: 1,
-        complaints_and_suggestions: 1,
-      },
-    ],
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" is-tree />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'group',
+    config: {
+      label: 'department',
+      width: 200,
+      align: 'left',
+      fieldFormat(rec: any) {
+        return rec['department'] ?? rec['group'] ?? rec['name']
+      },
+    },
+  },
+  {
+    id: 'total_children',
+    config: {
+      label: 'memebers count',
+      width: 150,
+      align: 'center',
+      fieldFormat(rec: any) {
+        if (rec?.['position']) {
+          return `position:  ${rec['position']}`
+        } else return rec?.['total_children']
+      },
+    },
+  },
+  {
+    id: 'monthly_expense',
+    config: {
+      label: 'monthly expense',
+      width: 150,
+      align: 'right',
+      fieldFormat(rec: any) {
+        if (rec?.['salary']) {
+          return `salary:  ${rec['salary']}`
+        } else return rec?.['monthly_expense']
+      },
+    },
+  },
+  {
+    id: 'new_hires_this_month',
+    config: {
+      label: 'new hires this month',
+      width: 150,
+      align: 'center',
+    },
+  },
+  {
+    id: 'resignations_this_month',
+    config: {
+      label: 'resignations this month',
+      width: 150,
+      align: 'center',
+    },
+  },
+  {
+    id: 'complaints_and_suggestions',
+    config: {
+      label: 'recived complaints counts',
+      width: 150,
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  {
+    group: 'Headquarters',
+    total_children: 3,
+    monthly_expense: 60000,
+    new_hires_this_month: 2,
+    resignations_this_month: 0,
+    complaints_and_suggestions: 1,
+    children: [
+      {
+        department: 'HR',
+        position: 'HR Manager',
+        salary: 15000,
+        monthly_expense: 15000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 0,
+      },
+      {
+        department: 'Finance',
+        position: 'Finance Manager',
+        salary: 18000,
+        monthly_expense: 18000,
+        new_hires_this_month: 0,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 0,
+      },
+      {
+        department: 'IT',
+        position: 'IT Director',
+        salary: 27000,
+        monthly_expense: 27000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 1,
+      },
+    ],
+  },
+  {
+    group: 'Branch Office',
+    total_children: 2,
+    monthly_expense: 35000,
+    new_hires_this_month: 1,
+    resignations_this_month: 1,
+    complaints_and_suggestions: 2,
+    children: [
+      {
+        department: 'Sales',
+        position: 'Sales Manager',
+        salary: 16000,
+        monthly_expense: 16000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 1,
+      },
+      {
+        department: 'Support',
+        position: 'Support Lead',
+        salary: 14000,
+        monthly_expense: 19000,
+        new_hires_this_month: 0,
+        resignations_this_month: 1,
+        complaints_and_suggestions: 1,
+      },
+    ],
+  },
+])
+</script>