@ebiz/designer-components 0.0.18-kzy.6 → 0.0.18-kzy.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-kzy.6",
+  "version": "0.0.18-kzy.7",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,7 @@
     "@opentiny/vue-icon": "~3.20.0",
     "axios": "^1.8.1",
     "echarts": "^5.6.0",
-    "tdesign-vue-next": "^1.11.5",
+    "tdesign-vue-next": "^1.12.0",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
     "vue": "^3.5.13",

package/src/components/Button.vue

@@ -66,6 +66,10 @@ const props = defineProps({
     onFinish: {//调用接口后置事件
         type: Function,
         default: () => { }
+    },
+    onError: {
+        type: Function,
+        default: () => { }
     }
 })
 
@@ -82,13 +86,21 @@ const apiMap = [
     'MULTIPLE_DATA_LINK_SEARCH'
 ];
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'success', 'error', 'prepare'])
 
-const { text, isNormal, disabled, type, size, apiConfig, data, isUseMethod } = toRefs(props)
+const { text, isNormal, disabled, type, size, variant, apiConfig, data } = toRefs(props)
 
 const tooltipText = ref('请先设置接口配置')
 
-const click = () => {
+// 检查API配置是否有效
+const isValidApiConfig = () => {
+    return apiConfig.value && apiConfig.value.apiId &&
+        typeof apiConfig.value.apiType === 'number' &&
+        apiConfig.value.apiType >= 0 &&
+        apiConfig.value.apiType < apiMap.length;
+}
+
+const click = async () => {
     props.onClick()
     // 如果是普通按钮或API配置无效，不调用接口
     if (isNormal.value || !isValidApiConfig()) {
@@ -97,7 +109,10 @@ const click = () => {
 
     try {
         // 调用前置处理并获取返回值
-        const shouldContinue = props.onPrepare()
+        const shouldContinue = await Promise.resolve(props.onPrepare())
+        emit('prepare', shouldContinue)
+
+        // 只有当返回值明确为false时才中断，undefined或其他值都继续执行
         if (shouldContinue === false) {
             return null
         }

package/src/components/EbizDescriptions.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="ebiz-descriptions">
+    <div v-if="title || $slots.title" class="ebiz-descriptions__header">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <table 
+      class="ebiz-descriptions__body"
+      :class="[
+        `ebiz-descriptions--${size}`,
+        { 'ebiz-descriptions__body--fixed': tableLayout === 'fixed' },
+        { 'ebiz-descriptions__body--border': border }
+      ]"
+      :style="border && tableBorderColor ? {'--td-descriptions-border-color': tableBorderColor} : {}"
+    >
+      <tbody>
+        <template v-if="rows.length > 0">
+          <template v-if="layout === 'horizontal'">
+            <tr v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
+              <template v-for="(item, colIndex) in row" :key="`${rowIndex}-${colIndex}`">
+                <template v-if="itemLayout === 'horizontal'">
+                  <th 
+                    class="ebiz-descriptions__label"
+                    :class="[item.labelClassName]"
+                  >
+                    <slot :name="`${item.slotName}-label`">
+                      {{ item.label }}
+                    </slot>
+                    <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                  </th>
+                  <td 
+                    :colspan="item.span * 2 - 1"
+                    class="ebiz-descriptions__content"
+                    :class="[item.contentClassName]"
+                  >
+                    <slot :name="item.slotName">
+                      {{ item.content }}
+                    </slot>
+                  </td>
+                </template>
+              </template>
+            </tr>
+          </template>
+          <template v-else>
+            <template v-for="(row, rowIndex) in rows" :key="`${rowIndex}`">
+              <template v-if="itemLayout === 'horizontal'">
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`label-${rowIndex}-${colIndex}`">
+                    <th 
+                      class="ebiz-descriptions__label"
+                      :class="[item.labelClassName]"
+                    >
+                      <slot :name="`${item.slotName}-label`">
+                        {{ item.label }}
+                      </slot>
+                      <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                    </th>
+                    <td 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__content"
+                      :class="[item.contentClassName]"
+                    >
+                      <slot :name="item.slotName">
+                        {{ item.content }}
+                      </slot>
+                    </td>
+                  </template>
+                </tr>
+              </template>
+              <template v-else>
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`label-${rowIndex}-${colIndex}`">
+                    <th 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__label"
+                      :class="[item.labelClassName]"
+                    >
+                      <slot :name="`${item.slotName}-label`">
+                        {{ item.label }}
+                      </slot>
+                      <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                    </th>
+                  </template>
+                </tr>
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`content-${rowIndex}-${colIndex}`">
+                    <td 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__content"
+                      :class="[item.contentClassName]"
+                    >
+                      <slot :name="item.slotName">
+                        {{ item.content }}
+                      </slot>
+                    </td>
+                  </template>
+                </tr>
+              </template>
+            </template>
+          </template>
+        </template>
+        <template v-else>
+          <slot></slot>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed, useSlots, ref } from 'vue';
+import { isArray, isNil } from 'lodash-es';
+
+const props = defineProps({
+  border: {
+    type: Boolean,
+    default: false
+  },
+  colon: {
+    type: Boolean,
+    default: false
+  },
+  column: {
+    type: Number,
+    default: 2
+  },
+  layout: {
+    type: String,
+    default: 'horizontal',
+    validator(val) {
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  itemLayout: {
+    type: String,
+    default: 'horizontal',
+    validator(val) {
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator(val) {
+      return ['small', 'medium', 'large'].includes(val);
+    }
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  tableLayout: {
+    type: String,
+    default: 'fixed',
+    validator(val) {
+      return ['auto', 'fixed'].includes(val);
+    }
+  },
+  tableBorderColor: {
+    type: String,
+    default: ''
+  },
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+
+defineEmits([]);
+
+const slots = useSlots();
+const itemsType = ref('slots');
+
+// 计算行数据
+const rows = computed(() => {
+  // 1. 获取要渲染的 items
+  let items = [];
+
+  if (isArray(props.items) && props.items.length > 0) {
+    // 从 props.items 获取数据
+    items = props.items.map(item => ({
+      label: item.label,
+      content: item.content,
+      span: item.span || 1,
+      labelClassName: item.labelClassName || '',
+      contentClassName: item.contentClassName || '',
+      slotName: item.name || `item-${items.length}`
+    }));
+    itemsType.value = 'props';
+  } else {
+    // 从 slots 获取数据
+    const defaultSlot = slots.default?.();
+    if (defaultSlot) {
+      items = defaultSlot
+        .filter(vnode => vnode.type && 
+          (vnode.type.name === 'EbizDescriptionsItem' || 
+           vnode.type.__name === 'EbizDescriptionsItem'))
+        .map((vnode, index) => {
+          const props = vnode.props || {};
+          const span = isNil(props.span) ? 1 : Number(props.span);
+          return {
+            label: props.label || '',
+            content: '',
+            span: span > props.column ? props.column : span,
+            labelClassName: props.labelClassName || '',
+            contentClassName: props.contentClassName || '',
+            slotName: props.name || `item-${index}`,
+            children: vnode.children
+          };
+        });
+      itemsType.value = 'slots';
+    }
+  }
+
+  // 2. 判断布局，如果是垂直布局则直接返回
+  if (props.layout === 'vertical') {
+    return [items];
+  }
+
+  // 3. 水平布局时，计算每一行的item
+  const rows = [];
+  let currentRow = [];
+  let currentRowSpan = 0;
+  const { column } = props;
+
+  items.forEach((item, index) => {
+    const span = item.span || 1;
+    
+    // 如果当前行放不下了，创建新行
+    if (currentRowSpan + span > column) {
+      rows.push(currentRow);
+      currentRow = [];
+      currentRowSpan = 0;
+    }
+    
+    // 添加到当前行
+    currentRow.push({
+      ...item,
+      span: span
+    });
+    
+    currentRowSpan += span;
+    
+    // 处理最后一个元素
+    if (index === items.length - 1) {
+      // 最后一个元素填充剩余空间
+      if (currentRowSpan < column) {
+        currentRow[currentRow.length - 1].span += (column - currentRowSpan);
+      }
+      rows.push(currentRow);
+    }
+  });
+
+  return rows;
+});
+</script>
+
+<style scoped>
+.ebiz-descriptions {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 22px;
+}
+
+.ebiz-descriptions__header {
+  margin-bottom: 16px;
+}
+
+.ebiz-descriptions__header > * {
+  font-size: 16px;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 24px;
+}
+
+.ebiz-descriptions__body {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.ebiz-descriptions__body--fixed {
+  table-layout: fixed;
+}
+
+.ebiz-descriptions__body--border {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-top: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+  border-left: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+}
+
+.ebiz-descriptions__body--border .ebiz-descriptions__label,
+.ebiz-descriptions__body--border .ebiz-descriptions__content {
+  border-right: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+  border-bottom: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+}
+
+.ebiz-descriptions__label {
+  font-weight: normal;
+  color: rgba(0, 0, 0, 0.6);
+  background-color: #fafafa;
+  text-align: left;
+  padding: 12px 24px 12px 12px;
+  vertical-align: top;
+}
+
+.ebiz-descriptions__colon {
+  margin: 0 8px 0 2px;
+}
+
+.ebiz-descriptions__content {
+  padding: 12px;
+  text-align: left;
+  vertical-align: top;
+}
+
+/* 尺寸相关样式 */
+.ebiz-descriptions--small .ebiz-descriptions__label,
+.ebiz-descriptions--small .ebiz-descriptions__content {
+  padding: 8px;
+}
+
+.ebiz-descriptions--medium .ebiz-descriptions__label,
+.ebiz-descriptions--medium .ebiz-descriptions__content {
+  padding: 12px;
+}
+
+.ebiz-descriptions--large .ebiz-descriptions__label,
+.ebiz-descriptions--large .ebiz-descriptions__content {
+  padding: 16px;
+}
+
+/* 不同布局的padding调整 */
+.ebiz-descriptions__body:not(.ebiz-descriptions__body--border) .ebiz-descriptions__label {
+  padding-left: 0;
+}
+
+.ebiz-descriptions__body:not(.ebiz-descriptions__body--border) .ebiz-descriptions__content {
+  padding-right: 0;
+}
+</style> 

package/src/components/EbizDescriptionsItem.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  span: {
+    type: Number,
+    default: 1
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  labelClassName: {
+    type: String,
+    default: ''
+  },
+  contentClassName: {
+    type: String,
+    default: ''
+  },
+  layout: {
+    type: String,
+    default: '',
+    validator(val) {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  }
+});
+</script>
+
+<style scoped>
+.ebiz-descriptions-item {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+</style> 

package/src/components/EbizPopconfirm.vue

@@ -0,0 +1,48 @@
+<template>
+  <t-popconfirm
+    :content="content"
+    @cancel="handleCancel"
+    @confirm="handleConfirm"
+  >
+    <slot></slot>
+  </t-popconfirm>
+</template>
+
+<script>
+export default {
+  name: "EbizPopconfirm"
+}
+</script>
+
+<script setup>
+import { Popconfirm as TPopconfirm } from 'tdesign-vue-next';
+
+// 定义属性
+const props = defineProps({
+  // 确认框内容
+  content: {
+    type: [String, Function],
+    default: ''
+  }
+});
+
+// 定义事件
+const emit = defineEmits([
+  'cancel',
+  'confirm'
+]);
+
+// 取消按钮点击事件
+const handleCancel = ({ e }) => {
+  emit('cancel', { e });
+};
+
+// 确认按钮点击事件
+const handleConfirm = ({ e }) => {
+  emit('confirm', { e });
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式可在此处添加 */
+</style> 

package/src/components/EbizTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <t-table :data="data" :columns="mergedColumns" :row-key="rowKey" :vertical-align="verticalAlign"
+    <t-table ref="tableRef" :data="data" :columns="mergedColumns" :row-key="rowKey" :vertical-align="verticalAlign"
       :horizontal-align="horizontalAlign" :size="size" :bordered="bordered" :stripe="stripe" :hover="hover"
       :height="height" :max-height="maxHeight" :loading="loading" :loading-props="loadingProps" :load-more="loadMore"
       :empty="empty" :table-layout="tableLayout" :cell-empty-content="cellEmptyContent" :pagination="pagination"
@@ -459,6 +459,10 @@ const handleDragSort = (params) => {
 const handleValidate = (context) => {
   emit('validate', context);
 };
+const tableRef = ref();
+defineExpose({
+  tableRef
+})
 </script>
 
 <style lang="less" scoped>