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

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/EbizRemoteSelect.vue

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <script setup>
-import { ref, onMounted, toRefs, computed } from 'vue';
+import { ref, onMounted, toRefs, computed, watch } from 'vue';
 import { Select as TSelect } from 'tdesign-vue-next';
 import dataService from '../apiService/simpleDataService';
 
@@ -112,10 +112,17 @@ const props = defineProps({
     popupProps: {
         type: Object,
         default: () => ({})
+    },
+    /**
+     * 字典配置
+     */
+    distConfig: {
+        type: Array,
+        default: () => []
     }
 });
 
-const { modelValue, apiConfig, labelField, valueField, queryParams } = toRefs(props)
+const { modelValue, apiConfig, labelField, valueField, queryParams, distConfig } = toRefs(props)
 
 const emit = defineEmits(['update:modelValue', 'change', 'selectOption', 'focus', 'blur']);
 
@@ -163,11 +170,26 @@ const handleRemoteSearch = async (keyword) => {
             apiType: 'MULTIPLE_DATA_SEARCH'
         });
 
-        options.value = res.data.map(item => ({
-            ...item,
-            label: labelField.value ? item[labelField.value] : (item.label || item.name),
-            value: valueField.value ? item[valueField.value] : (item.value || item.id)
-        }));
+        if (distConfig.value.length > 0 && props.queryParams?.code) {
+            const currentDistConfig = distConfig.value.find(item => item.dist_code === props.queryParams.code)?.content;
+            if (currentDistConfig) {
+                const { value, cn_value, en_value } = currentDistConfig;
+                options.value = res.data.map(item => {
+                    const label = [(value ? item.value : ''), (cn_value ? item.cn_value : ''), (en_value ? item.en_value : '')].filter(Boolean).join('-');
+                    return {
+                        ...item,
+                        label,
+                        value: valueField.value ? item[valueField.value] : (item.value || item.id)
+                    }
+                });
+            }
+        } else {
+            options.value = res.data.map(item => ({
+                ...item,
+                label: labelField.value ? item[labelField.value] : (item.label || item.name),
+                value: valueField.value ? item[valueField.value] : (item.value || item.id)
+            }));
+        }
     } catch (error) {
         console.error('远程搜索失败:', error);
         options.value = [];
@@ -202,6 +224,10 @@ const handleChange = (value, context) => {
     }
 };
 
+watch(distConfig, () => {
+    handleRemoteSearch('');
+}, { deep: true });
+
 // 组件挂载时，如果有默认值则加载对应的选项
 onMounted(async () => {
     if (apiConfig.value.apiId && apiConfig.value.apiType >= 0) {
@@ -216,11 +242,26 @@ onMounted(async () => {
                 apiType: 'MULTIPLE_DATA_SEARCH'
             });
 
-            options.value = res.data.map(item => ({
-                ...item,
-                label: labelField.value ? item[labelField.value] : (item.label || item.name),
-                value: valueField.value ? item[valueField.value] : (item.value || item.id)
-            }));
+            if (distConfig.value.length > 0 && props.queryParams?.code) {
+                const currentDistConfig = distConfig.value.find(item => item.dist_code === props.queryParams.code)?.content;
+                if (currentDistConfig) {
+                    const { value, cn_value, en_value } = currentDistConfig;
+                    options.value = res.data.map(item => {
+                        const label = [(value ? item.value : ''), (cn_value ? item.cn_value : ''), (en_value ? item.en_value : '')].filter(Boolean).join('-');
+                        return {
+                            ...item,
+                            label,
+                            value: valueField.value ? item[valueField.value] : (item.value || item.id)
+                        }
+                    });
+                }
+            } else {
+                options.value = res.data.map(item => ({
+                    ...item,
+                    label: labelField.value ? item[labelField.value] : (item.label || item.name),
+                    value: valueField.value ? item[valueField.value] : (item.value || item.id)
+                }));
+            }
         } catch (error) {
             console.error('加载默认选项失败:', error);
         } finally {

package/src/components/EbizRichTextEditor.vue

@@ -3,6 +3,8 @@
     <tiny-fluent-editor
       v-model="editorContent"
       :disabled="disabled"
+      :data-type="false"
+      :data-upgrade="false",
       :placeholder="placeholder"
       :height="height"
       :menu-bar="toolbar !== false"

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>

package/src/components/EbizTdesignLoading.vue

@@ -0,0 +1,108 @@
+<template>
+    <t-loading :delay="delay" :duration="duration" :indicator="indicator" :inherit-color="inheritColor" :layout="layout"
+        :loading="loading" :loading-props="loadingProps" :pause="pause" :reverse="reverse" :show-overlay="showOverlay"
+        :size="size" :text="text" :theme="theme">
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 文本内容插槽 -->
+        <template v-if="$slots.text" #text>
+            <slot name="text"></slot>
+        </template>
+
+        <!-- 加载指示器插槽 -->
+        <template v-if="$slots.indicator" #indicator>
+            <slot name="indicator"></slot>
+        </template>
+
+        <!-- 加载内容插槽 -->
+        <template v-if="$slots.content" #content>
+            <slot name="content"></slot>
+        </template>
+    </t-loading>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignLoading"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { Loading as TLoading } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+    delay: {
+        type: Number,
+        default: 0
+    },
+    // 加载动画执行完成一次的时间，单位：毫秒
+    duration: {
+        type: Number,
+        default: 800
+    },
+    // 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+    indicator: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 是否继承父元素颜色
+    inheritColor: {
+        type: Boolean,
+        default: false
+    },
+    // 对齐方式
+    layout: {
+        type: String,
+        default: 'horizontal',
+        validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    // 是否处于加载状态
+    loading: {
+        type: Boolean,
+        default: true
+    },
+    // 透传加载组件全部属性
+    loadingProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否暂停动画
+    pause: {
+        type: Boolean,
+        default: false
+    },
+    // 加载动画是否反向
+    reverse: {
+        type: Boolean,
+        default: false
+    },
+    // 是否需要遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 尺寸，示例：small/medium/large/12px/56px
+    size: {
+        type: String,
+        default: 'medium'
+    },
+    // 加载提示文案
+    text: {
+        type: String,
+        default: ''
+    },
+    // 加载组件类型
+    theme: {
+        type: String,
+        default: 'circular',
+        validator: (val) => ['circular', 'spinner', 'dots', 'bar'].includes(val)
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>