@ebiz/designer-components 0.1.2 → 0.1.5

package/src/components/EbizVxeTable.vue

@@ -1,291 +1,291 @@
-<template>
-  <div class="ebiz-vxe-table-container">
-    <vxe-table
-      ref="vxeTableRef"
-      v-bind="tableProp"
-      v-on="tableEvents"
-      :data="tableData"
-    >
-      <template v-for="(col, index) in renderColumns" :key="index">
-        <!-- 处理列分组 -->
-        <template v-if="col.childTableCols && col.childTableCols.length">
-          <vxe-colgroup :title="col.title">
-            <vxe-column
-              v-for="(childCol, childIndex) in col.childTableCols"
-              :key="childIndex"
-              :field="childCol.field"
-              :title="childCol.title"
-              :width="childCol.width"
-              :min-width="childCol.minWidth"
-              :sortable="childCol.sortable"
-              :filters="childCol.filters"
-              :tree-node="childCol.treeNode"
-              :align="childCol.align || 'left'"
-              :show-overflow="childCol.showOverflow !== false"
-            >
-              <!-- 处理自定义渲染 -->
-              <template v-if="childCol.type === 'jsx'" #default="scope">
-                <component :is="childCol.render" :scope="scope" />
-              </template>
-              <template v-else-if="childCol.type === 'slot'" #default="scope">
-                <slot :name="childCol.slotName" :scope="scope"></slot>
-              </template>
-            </vxe-column>
-          </vxe-colgroup>
-        </template>
-        <!-- 普通列 -->
-        <template v-else>
-          <vxe-column
-            :field="col.field"
-            :title="col.title"
-            :width="col.width"
-            :min-width="col.minWidth"
-            :type="getColumnType(col)"
-            :sortable="col.sortable"
-            :filters="col.filters"
-            :tree-node="col.treeNode"
-            :align="col.align || 'left'"
-            :show-overflow="col.showOverflow !== false"
-          >
-            <!-- 处理自定义渲染 -->
-            <template v-if="col.type === 'jsx'" #default="scope">
-              <component :is="col.render" :scope="scope" />
-            </template>
-            <template v-else-if="col.type === 'slot'" #default="scope">
-              <slot :name="col.slotName" :scope="scope"></slot>
-            </template>
-          </vxe-column>
-        </template>
-      </template>
-
-      <!-- 表格空数据模板 -->
-      <template #empty>
-        <div class="vxe-table-empty">
-          <slot name="empty">
-            <span>{{ emptyText }}</span>
-          </slot>
-        </div>
-      </template>
-    </vxe-table>
-
-    <!-- 分页组件 -->
-    <vxe-pager
-      v-if="isPagination"
-      v-bind="pagerConfig"
-      v-on="pagerEvents"
-      :current-page="currentPage"
-      :page-size="pageSize"
-      :total="total"
-      :layouts="pagerLayouts"
-      @page-change="handlePageChange"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, nextTick } from 'vue';
-import VXETable  from 'vxe-table';
-
-// 定义组件的props
-const props = defineProps({
-  // 表格数据
-  tableData: {
-    type: Array,
-    default: () => []
-  },
-  // 表格列配置
-  tableCols: {
-    type: Array,
-    default: () => []
-  },
-  // 表格属性配置
-  tableProp: {
-    type: Object,
-    default: () => ({
-      'auto-resize': true,
-      border: true,
-      'row-id': 'id',
-      'highlight-current-row': true,
-      'show-overflow': true,
-      'tree-config': { children: 'children' }
-    })
-  },
-  // 表格事件配置
-  tableEvents: {
-    type: Object,
-    default: () => ({})
-  },
-  // 分页组件配置
-  pagerConfig: {
-    type: Object,
-    default: () => ({})
-  },
-  // 分页事件
-  pagerEvents: {
-    type: Object,
-    default: () => ({})
-  },
-  // 是否显示分页
-  isPagination: {
-    type: Boolean,
-    default: true
-  },
-  // 当前页码
-  currentPage: {
-    type: Number,
-    default: 1
-  },
-  // 每页条数
-  pageSize: {
-    type: Number,
-    default: 10
-  },
-  // 数据总条数
-  total: {
-    type: Number,
-    default: 0
-  },
-  // 空数据提示文本
-  emptyText: {
-    type: String,
-    default: '暂无数据'
-  }
-});
-
-// 定义emit事件
-const emit = defineEmits([
-  'query',
-  'update:currentPage',
-  'update:pageSize',
-  'page-change',
-  'size-change'
-]);
-
-// 表格实例引用
-const vxeTableRef = ref(null);
-
-// 处理表格列，添加唯一ID
-const renderColumns = computed(() => {
-  return props.tableCols.map(col => {
-    // 创建新的列对象并添加唯一ID
-    const newCol = { ...col, id: 1 };
-    
-    // 处理子列配置
-    if (newCol.childTableCols && newCol.childTableCols.length) {
-      newCol.childTableCols = newCol.childTableCols.map(childCol => {
-        return { ...childCol, id: 1 };
-      });
-    }
-    
-    return newCol;
-  });
-});
-
-// 分页布局配置
-const pagerLayouts = computed(() => {
-  return ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total'];
-});
-
-// 获取列类型
-const getColumnType = (col) => {
-  // vxe-table内置类型：checkbox、radio、expand、seq
-  if (['checkbox', 'radio', 'expand', 'seq'].includes(col.type)) {
-    return col.type;
-  }
-  return null;
-};
-
-// 表格查询方法
-const query = (page = props.currentPage, size = props.pageSize) => {
-  emit('query', page, size);
-};
-
-// 初始化表格
-onMounted(() => {
-  // 如果配置了自动查询，则在组件挂载后自动查询数据
-  if (props.tableProp['enable-auto-query'] !== false) {
-    nextTick(() => {
-      query();
-    });
-  }
-});
-
-// 处理分页变化
-const handlePageChange = ({ currentPage, pageSize }) => {
-  emit('update:currentPage', currentPage);
-  emit('update:pageSize', pageSize);
-  emit('page-change', { currentPage, pageSize });
-  query(currentPage, pageSize);
-};
-
-// 暴露表格实例方法
-const getInstance = () => {
-  return vxeTableRef.value;
-};
-
-// 完成加载，设置表格数据
-const complete = (data, totalCount) => {
-  if (data === false) {
-    // 加载失败
-    VXETable.modal.message({ content: '加载失败', status: 'error' });
-    return;
-  }
-  
-  if (totalCount !== undefined) {
-    // 更新总数
-    emit('update:total', totalCount);
-  }
-};
-
-// 获取选中行
-const getSelectedRows = () => {
-  if (vxeTableRef.value) {
-    return vxeTableRef.value.getCheckboxRecords();
-  }
-  return [];
-};
-
-// 导出表格数据
-const exportData = (options = {}) => {
-  if (vxeTableRef.value) {
-    return vxeTableRef.value.exportData(options);
-  }
-};
-
-// 重新加载表格数据
-const reloadData = (data = null) => {
-  if (vxeTableRef.value) {
-    if (data) {
-      return vxeTableRef.value.loadData(data);
-    } else {
-      return vxeTableRef.value.loadData(props.tableData);
-    }
-  }
-};
-
-// 将内部方法暴露给父组件
-defineExpose({
-  query,
-  complete,
-  getSelectedRows,
-  exportData,
-  getInstance,
-  reloadData
-});
-</script>
-
-<style scoped>
-.ebiz-vxe-table-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.vxe-table-empty {
-  padding: 30px 0;
-  text-align: center;
-  color: #909399;
-  font-size: 14px;
-}
+<template>
+  <div class="ebiz-vxe-table-container">
+    <vxe-table
+      ref="vxeTableRef"
+      v-bind="tableProp"
+      v-on="tableEvents"
+      :data="tableData"
+    >
+      <template v-for="(col, index) in renderColumns" :key="index">
+        <!-- 处理列分组 -->
+        <template v-if="col.childTableCols && col.childTableCols.length">
+          <vxe-colgroup :title="col.title">
+            <vxe-column
+              v-for="(childCol, childIndex) in col.childTableCols"
+              :key="childIndex"
+              :field="childCol.field"
+              :title="childCol.title"
+              :width="childCol.width"
+              :min-width="childCol.minWidth"
+              :sortable="childCol.sortable"
+              :filters="childCol.filters"
+              :tree-node="childCol.treeNode"
+              :align="childCol.align || 'left'"
+              :show-overflow="childCol.showOverflow !== false"
+            >
+              <!-- 处理自定义渲染 -->
+              <template v-if="childCol.type === 'jsx'" #default="scope">
+                <component :is="childCol.render" :scope="scope" />
+              </template>
+              <template v-else-if="childCol.type === 'slot'" #default="scope">
+                <slot :name="childCol.slotName" :scope="scope"></slot>
+              </template>
+            </vxe-column>
+          </vxe-colgroup>
+        </template>
+        <!-- 普通列 -->
+        <template v-else>
+          <vxe-column
+            :field="col.field"
+            :title="col.title"
+            :width="col.width"
+            :min-width="col.minWidth"
+            :type="getColumnType(col)"
+            :sortable="col.sortable"
+            :filters="col.filters"
+            :tree-node="col.treeNode"
+            :align="col.align || 'left'"
+            :show-overflow="col.showOverflow !== false"
+          >
+            <!-- 处理自定义渲染 -->
+            <template v-if="col.type === 'jsx'" #default="scope">
+              <component :is="col.render" :scope="scope" />
+            </template>
+            <template v-else-if="col.type === 'slot'" #default="scope">
+              <slot :name="col.slotName" :scope="scope"></slot>
+            </template>
+          </vxe-column>
+        </template>
+      </template>
+
+      <!-- 表格空数据模板 -->
+      <template #empty>
+        <div class="vxe-table-empty">
+          <slot name="empty">
+            <span>{{ emptyText }}</span>
+          </slot>
+        </div>
+      </template>
+    </vxe-table>
+
+    <!-- 分页组件 -->
+    <vxe-pager
+      v-if="isPagination"
+      v-bind="pagerConfig"
+      v-on="pagerEvents"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :total="total"
+      :layouts="pagerLayouts"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, nextTick } from 'vue';
+import VXETable  from 'vxe-table';
+
+// 定义组件的props
+const props = defineProps({
+  // 表格数据
+  tableData: {
+    type: Array,
+    default: () => []
+  },
+  // 表格列配置
+  tableCols: {
+    type: Array,
+    default: () => []
+  },
+  // 表格属性配置
+  tableProp: {
+    type: Object,
+    default: () => ({
+      'auto-resize': true,
+      border: true,
+      'row-id': 'id',
+      'highlight-current-row': true,
+      'show-overflow': true,
+      'tree-config': { children: 'children' }
+    })
+  },
+  // 表格事件配置
+  tableEvents: {
+    type: Object,
+    default: () => ({})
+  },
+  // 分页组件配置
+  pagerConfig: {
+    type: Object,
+    default: () => ({})
+  },
+  // 分页事件
+  pagerEvents: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否显示分页
+  isPagination: {
+    type: Boolean,
+    default: true
+  },
+  // 当前页码
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  // 每页条数
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  // 数据总条数
+  total: {
+    type: Number,
+    default: 0
+  },
+  // 空数据提示文本
+  emptyText: {
+    type: String,
+    default: '暂无数据'
+  }
+});
+
+// 定义emit事件
+const emit = defineEmits([
+  'query',
+  'update:currentPage',
+  'update:pageSize',
+  'page-change',
+  'size-change'
+]);
+
+// 表格实例引用
+const vxeTableRef = ref(null);
+
+// 处理表格列，添加唯一ID
+const renderColumns = computed(() => {
+  return props.tableCols.map(col => {
+    // 创建新的列对象并添加唯一ID
+    const newCol = { ...col, id: 1 };
+    
+    // 处理子列配置
+    if (newCol.childTableCols && newCol.childTableCols.length) {
+      newCol.childTableCols = newCol.childTableCols.map(childCol => {
+        return { ...childCol, id: 1 };
+      });
+    }
+    
+    return newCol;
+  });
+});
+
+// 分页布局配置
+const pagerLayouts = computed(() => {
+  return ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total'];
+});
+
+// 获取列类型
+const getColumnType = (col) => {
+  // vxe-table内置类型：checkbox、radio、expand、seq
+  if (['checkbox', 'radio', 'expand', 'seq'].includes(col.type)) {
+    return col.type;
+  }
+  return null;
+};
+
+// 表格查询方法
+const query = (page = props.currentPage, size = props.pageSize) => {
+  emit('query', page, size);
+};
+
+// 初始化表格
+onMounted(() => {
+  // 如果配置了自动查询，则在组件挂载后自动查询数据
+  if (props.tableProp['enable-auto-query'] !== false) {
+    nextTick(() => {
+      query();
+    });
+  }
+});
+
+// 处理分页变化
+const handlePageChange = ({ currentPage, pageSize }) => {
+  emit('update:currentPage', currentPage);
+  emit('update:pageSize', pageSize);
+  emit('page-change', { currentPage, pageSize });
+  query(currentPage, pageSize);
+};
+
+// 暴露表格实例方法
+const getInstance = () => {
+  return vxeTableRef.value;
+};
+
+// 完成加载，设置表格数据
+const complete = (data, totalCount) => {
+  if (data === false) {
+    // 加载失败
+    VXETable.modal.message({ content: '加载失败', status: 'error' });
+    return;
+  }
+  
+  if (totalCount !== undefined) {
+    // 更新总数
+    emit('update:total', totalCount);
+  }
+};
+
+// 获取选中行
+const getSelectedRows = () => {
+  if (vxeTableRef.value) {
+    return vxeTableRef.value.getCheckboxRecords();
+  }
+  return [];
+};
+
+// 导出表格数据
+const exportData = (options = {}) => {
+  if (vxeTableRef.value) {
+    return vxeTableRef.value.exportData(options);
+  }
+};
+
+// 重新加载表格数据
+const reloadData = (data = null) => {
+  if (vxeTableRef.value) {
+    if (data) {
+      return vxeTableRef.value.loadData(data);
+    } else {
+      return vxeTableRef.value.loadData(props.tableData);
+    }
+  }
+};
+
+// 将内部方法暴露给父组件
+defineExpose({
+  query,
+  complete,
+  getSelectedRows,
+  exportData,
+  getInstance,
+  reloadData
+});
+</script>
+
+<style scoped>
+.ebiz-vxe-table-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.vxe-table-empty {
+  padding: 30px 0;
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+}
 </style> 

package/src/components/Form.vue

@@ -1,28 +1,28 @@
-<template>
-    <div>
-        <slot></slot>
-        <slot v-if="$slots.content" name="content"></slot>
-    </div>
-</template>
-
-<script setup>
-
-import { ref, defineProps, onMounted } from "vue";
-
-const props = defineProps({
-    apiConfig: {
-        type: Object,
-        default: {
-            apiId: null,
-            apiType: ''
-        }
-    }
-})
-
-onMounted(() => {
-    console.log("FormContainer component has been mounted.");
-    // You can add any initialization logic here
-    // 加载数据
-
-});
-</script>
+<template>
+    <div>
+        <slot></slot>
+        <slot v-if="$slots.content" name="content"></slot>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, defineProps, onMounted } from "vue";
+
+const props = defineProps({
+    apiConfig: {
+        type: Object,
+        default: {
+            apiId: null,
+            apiType: ''
+        }
+    }
+})
+
+onMounted(() => {
+    console.log("FormContainer component has been mounted.");
+    // You can add any initialization logic here
+    // 加载数据
+
+});
+</script>

package/src/components/Home.vue

@@ -1,8 +1,8 @@
-<div class="comp-item" @click="$router.push('/tdesign-button')">
-  <div class="comp-item-name">TDesign 按钮</div>
-  <div class="comp-item-desc">TDesign Button 组件封装</div>
-</div>
-<div class="comp-item" @click="$router.push('/tdesign-icon')">
-  <div class="comp-item-name">TDesign 图标</div>
-  <div class="comp-item-desc">TDesign Icon 组件封装</div>
+<div class="comp-item" @click="$router.push('/tdesign-button')">
+  <div class="comp-item-name">TDesign 按钮</div>
+  <div class="comp-item-desc">TDesign Button 组件封装</div>
+</div>
+<div class="comp-item" @click="$router.push('/tdesign-icon')">
+  <div class="comp-item-name">TDesign 图标</div>
+  <div class="comp-item-desc">TDesign Icon 组件封装</div>
 </div>