@ebiz/designer-components 0.0.60 → 0.0.62

package/src/views/TableSortDemo.vue

@@ -1,144 +1,144 @@
-<template>
-    <div class="container">
-        <h1>表格排序组件演示</h1>
-
-        <div class="demo-section">
-            <h2>基础用法</h2>
-            <div class="demo-item">
-                <EbizTableSort icon="filter-sort" :field-options="fieldOptions" @sort="handleSort"
-                    @reset="handleReset" />
-            </div>
-            <div class="result" v-if="sortResult.length > 0">
-                <h3>排序结果：</h3>
-                <pre>{{ JSON.stringify(sortResult, null, 2) }}</pre>
-            </div>
-        </div>
-
-        <div class="demo-section">
-            <h2>自定义按钮</h2>
-            <div class="demo-item">
-                <EbizTableSort icon="filter" button-text="自定义排序" :field-options="fieldOptions" @sort="handleSort2" />
-            </div>
-            <div class="result" v-if="sortResult2.length > 0">
-                <h3>排序结果：</h3>
-                <pre>{{ JSON.stringify(sortResult2, null, 2) }}</pre>
-            </div>
-        </div>
-
-        <div class="demo-section">
-            <h2>预设排序条件</h2>
-            <div class="demo-item">
-                <EbizTableSort :field-options="fieldOptions" :default-sort="defaultSort" @sort="handleSort3" />
-            </div>
-            <div class="result" v-if="sortResult3.length > 0">
-                <h3>排序结果：</h3>
-                <pre>{{ JSON.stringify(sortResult3, null, 2) }}</pre>
-            </div>
-        </div>
-
-        <div class="demo-section">
-            <h2>多条件排序</h2>
-            <div class="demo-item">
-                <EbizTableSort :field-options="fieldOptions" :max-sort-items="3" @sort="handleSort4" />
-            </div>
-            <div class="result" v-if="sortResult4.length > 0">
-                <h3>排序结果：</h3>
-                <pre>{{ JSON.stringify(sortResult4, null, 2) }}</pre>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizTableSort } from '../index.js';
-
-// 字段选项
-const fieldOptions = [
-    { value: 'name', label: '姓名' },
-    { value: 'age', label: '年龄' },
-    { value: 'address', label: '地址' },
-    { value: 'createTime', label: '创建时间' },
-    { value: 'status', label: '状态' }
-];
-
-// 默认排序条件
-const defaultSort = [
-    { field: 'age', order: 'desc' }
-];
-
-// 排序结果
-const sortResult = ref([]);
-const sortResult2 = ref([]);
-const sortResult3 = ref([]);
-const sortResult4 = ref([]);
-
-// 处理排序
-const handleSort = (sort) => {
-    sortResult.value = sort;
-    console.log('排序条件：', sort);
-};
-
-const handleSort2 = (sort) => {
-    sortResult2.value = sort;
-    console.log('排序条件2：', sort);
-};
-
-const handleSort3 = (sort) => {
-    sortResult3.value = sort;
-    console.log('排序条件3：', sort);
-};
-
-const handleSort4 = (sort) => {
-    sortResult4.value = sort;
-    console.log('排序条件4：', sort);
-};
-
-// 处理重置
-const handleReset = () => {
-    sortResult.value = [];
-    console.log('重置排序');
-};
-</script>
-
-<style lang="less" scoped>
-.container {
-    padding: 20px;
-
-    h1 {
-        margin-bottom: 20px;
-    }
-
-    .demo-section {
-        margin-bottom: 30px;
-        padding: 20px;
-        border: 1px solid #eee;
-        border-radius: 6px;
-
-        h2 {
-            margin-bottom: 16px;
-            font-size: 18px;
-        }
-
-        .demo-item {
-            margin-bottom: 16px;
-        }
-
-        .result {
-            margin-top: 20px;
-            padding: 16px;
-            background-color: #f9f9f9;
-            border-radius: 4px;
-
-            h3 {
-                margin-bottom: 8px;
-                font-size: 16px;
-            }
-
-            pre {
-                font-family: monospace;
-            }
-        }
-    }
-}
+<template>
+    <div class="container">
+        <h1>表格排序组件演示</h1>
+
+        <div class="demo-section">
+            <h2>基础用法</h2>
+            <div class="demo-item">
+                <EbizTableSort icon="filter-sort" :field-options="fieldOptions" @sort="handleSort"
+                    @reset="handleReset" />
+            </div>
+            <div class="result" v-if="sortResult.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>自定义按钮</h2>
+            <div class="demo-item">
+                <EbizTableSort icon="filter" button-text="自定义排序" :field-options="fieldOptions" @sort="handleSort2" />
+            </div>
+            <div class="result" v-if="sortResult2.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult2, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>预设排序条件</h2>
+            <div class="demo-item">
+                <EbizTableSort :field-options="fieldOptions" :default-sort="defaultSort" @sort="handleSort3" />
+            </div>
+            <div class="result" v-if="sortResult3.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult3, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>多条件排序</h2>
+            <div class="demo-item">
+                <EbizTableSort :field-options="fieldOptions" :max-sort-items="3" @sort="handleSort4" />
+            </div>
+            <div class="result" v-if="sortResult4.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult4, null, 2) }}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTableSort } from '../index.js';
+
+// 字段选项
+const fieldOptions = [
+    { value: 'name', label: '姓名' },
+    { value: 'age', label: '年龄' },
+    { value: 'address', label: '地址' },
+    { value: 'createTime', label: '创建时间' },
+    { value: 'status', label: '状态' }
+];
+
+// 默认排序条件
+const defaultSort = [
+    { field: 'age', order: 'desc' }
+];
+
+// 排序结果
+const sortResult = ref([]);
+const sortResult2 = ref([]);
+const sortResult3 = ref([]);
+const sortResult4 = ref([]);
+
+// 处理排序
+const handleSort = (sort) => {
+    sortResult.value = sort;
+    console.log('排序条件：', sort);
+};
+
+const handleSort2 = (sort) => {
+    sortResult2.value = sort;
+    console.log('排序条件2：', sort);
+};
+
+const handleSort3 = (sort) => {
+    sortResult3.value = sort;
+    console.log('排序条件3：', sort);
+};
+
+const handleSort4 = (sort) => {
+    sortResult4.value = sort;
+    console.log('排序条件4：', sort);
+};
+
+// 处理重置
+const handleReset = () => {
+    sortResult.value = [];
+    console.log('重置排序');
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    padding: 20px;
+
+    h1 {
+        margin-bottom: 20px;
+    }
+
+    .demo-section {
+        margin-bottom: 30px;
+        padding: 20px;
+        border: 1px solid #eee;
+        border-radius: 6px;
+
+        h2 {
+            margin-bottom: 16px;
+            font-size: 18px;
+        }
+
+        .demo-item {
+            margin-bottom: 16px;
+        }
+
+        .result {
+            margin-top: 20px;
+            padding: 16px;
+            background-color: #f9f9f9;
+            border-radius: 4px;
+
+            h3 {
+                margin-bottom: 8px;
+                font-size: 16px;
+            }
+
+            pre {
+                font-family: monospace;
+            }
+        }
+    }
+}
 </style>

package/src/views/TableView.vue

@@ -1,69 +1,69 @@
-<template>
-  <div class="table-demo-container">
-    <h2>基础表格</h2>
-    <ebiz-table :data="tableData" :bordered="true" :hover="true">
-      <ebiz-table-column col-key="id" title="ID" width="80" />
-      <ebiz-table-column col-key="name" title="姓名" width="120" />
-      <ebiz-table-column col-key="age" title="年龄" width="80" :sorter="true" align="center" />
-      <ebiz-table-column col-key="address" title="地址" :ellipsis="true" />
-    </ebiz-table>
-
-    <h2>列类型演示</h2>
-    <ebiz-table :data="tableData" :bordered="true" :stripe="true" row-key="id">
-      <ebiz-table-column type="multiple" width="60" />
-      <ebiz-table-column type="index" title="序号" width="80" />
-      <ebiz-table-column col-key="name" title="姓名" width="120" />
-      <ebiz-table-column col-key="age" title="年龄" width="80" />
-      <ebiz-table-column col-key="address" title="地址" :ellipsis="true" />
-    </ebiz-table>
-
-    <h2>插槽用法</h2>
-    <ebiz-table :data="tableData" :bordered="true">
-      <ebiz-table-column col-key="id" title="ID" width="80" />
-      <ebiz-table-column col-key="name" title="姓名" width="120">
-        <template #default="{ row }">
-          <strong style="color: #0052d9">{{ row.name }}</strong>
-        </template>
-      </ebiz-table-column>
-      <ebiz-table-column col-key="age" title="年龄" width="80" />
-      <ebiz-table-column col-key="operation" title="操作" width="160">
-        <template #default="{ row }">
-          <button @click="handleEdit(row)" style="margin-right: 8px">编辑</button>
-          <button @click="handleDelete(row)">删除</button>
-        </template>
-      </ebiz-table-column>
-    </ebiz-table>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizTable, EbizTableColumn } from '../index.js';
-
-const tableData = ref([
-  { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
-  { id: 2, name: '李四', age: 35, address: '上海市浦东新区' },
-  { id: 3, name: '王五', age: 42, address: '广州市天河区' },
-  { id: 4, name: '赵六', age: 31, address: '深圳市南山区科技园' },
-  { id: 5, name: '钱七', age: 27, address: '杭州市西湖区' }
-]);
-
-const handleEdit = (row) => {
-  alert(`编辑: ${row.name}`);
-};
-
-const handleDelete = (row) => {
-  alert(`删除: ${row.name}`);
-};
-</script>
-
-<style scoped>
-.table-demo-container {
-  padding: 20px;
-}
-
-.table-demo-container h2 {
-  margin: 30px 0 15px;
-  font-size: 18px;
-}
+<template>
+  <div class="table-demo-container">
+    <h2>基础表格</h2>
+    <ebiz-table :data="tableData" :bordered="true" :hover="true">
+      <ebiz-table-column col-key="id" title="ID" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120" />
+      <ebiz-table-column col-key="age" title="年龄" width="80" :sorter="true" align="center" />
+      <ebiz-table-column col-key="address" title="地址" :ellipsis="true" />
+    </ebiz-table>
+
+    <h2>列类型演示</h2>
+    <ebiz-table :data="tableData" :bordered="true" :stripe="true" row-key="id">
+      <ebiz-table-column type="multiple" width="60" />
+      <ebiz-table-column type="index" title="序号" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120" />
+      <ebiz-table-column col-key="age" title="年龄" width="80" />
+      <ebiz-table-column col-key="address" title="地址" :ellipsis="true" />
+    </ebiz-table>
+
+    <h2>插槽用法</h2>
+    <ebiz-table :data="tableData" :bordered="true">
+      <ebiz-table-column col-key="id" title="ID" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120">
+        <template #default="{ row }">
+          <strong style="color: #0052d9">{{ row.name }}</strong>
+        </template>
+      </ebiz-table-column>
+      <ebiz-table-column col-key="age" title="年龄" width="80" />
+      <ebiz-table-column col-key="operation" title="操作" width="160">
+        <template #default="{ row }">
+          <button @click="handleEdit(row)" style="margin-right: 8px">编辑</button>
+          <button @click="handleDelete(row)">删除</button>
+        </template>
+      </ebiz-table-column>
+    </ebiz-table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTable, EbizTableColumn } from '../index.js';
+
+const tableData = ref([
+  { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
+  { id: 2, name: '李四', age: 35, address: '上海市浦东新区' },
+  { id: 3, name: '王五', age: 42, address: '广州市天河区' },
+  { id: 4, name: '赵六', age: 31, address: '深圳市南山区科技园' },
+  { id: 5, name: '钱七', age: 27, address: '杭州市西湖区' }
+]);
+
+const handleEdit = (row) => {
+  alert(`编辑: ${row.name}`);
+};
+
+const handleDelete = (row) => {
+  alert(`删除: ${row.name}`);
+};
+</script>
+
+<style scoped>
+.table-demo-container {
+  padding: 20px;
+}
+
+.table-demo-container h2 {
+  margin: 30px 0 15px;
+  font-size: 18px;
+}
 </style>