@ebiz/designer-components 0.0.18 → 0.0.19

package/src/components/EbizTableColumn.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, inject, onMounted, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+  // 列唯一标识
+  colKey: {
+    type: String,
+    required: true
+  },
+  // 列标题
+  title: {
+    type: String,
+    default: ''
+  },
+  // 列宽度
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  // 最小列宽
+  minWidth: {
+    type: [String, Number],
+    default: ''
+  },
+  // 水平对齐方式
+  align: {
+    type: String,
+    default: 'left',
+    validator: (val) => ['left', 'center', 'right'].includes(val)
+  },
+  // 固定列位置
+  fixed: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'left', 'right'].includes(val)
+  },
+  // 列类型
+  type: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'multiple', 'single', 'index', 'expand'].includes(val)
+  },
+  // 超出省略
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  // 标题超出省略
+  ellipsisTitle: {
+    type: Boolean,
+    default: false
+  },
+  // 是否支持排序
+  sorter: {
+    type: Boolean,
+    default: false
+  },
+  // 过滤配置
+  filter: {
+    type: Object,
+    default: null
+  },
+  // 自定义类名
+  className: {
+    type: String,
+    default: ''
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 获取父级表格组件实例
+const tableCtx = inject('tableCtx', null);
+const instance = getCurrentInstance();
+
+// 格式化列配置对象
+const columnConfig = computed(() => {
+  return {
+    colKey: props.colKey,
+    title: props.title,
+    width: props.width,
+    minWidth: props.minWidth,
+    align: props.align,
+    fixed: props.fixed || '',
+    type: props.type || '',
+    ellipsis: props.ellipsis,
+    ellipsisTitle: props.ellipsisTitle,
+    sorter: props.sorter,
+    filter: props.filter,
+    className: props.className,
+    disabled: props.disabled,
+    cell: instance.slots.default ? props.colKey : undefined,
+    title: instance.slots.title ? `title-${props.colKey}` : undefined
+  };
+});
+
+// 在组件挂载时将列配置注册到表格组件
+onMounted(() => {
+  if (tableCtx && typeof tableCtx.registerColumn === 'function') {
+    tableCtx.registerColumn(columnConfig.value);
+  } else {
+    console.warn('EbizTableColumn必须在EbizTable内部使用');
+  }
+});
+</script>
+
+<template>
+  <template v-if="$slots.default">
+    <slot></slot>
+  </template>
+  <template v-if="$slots.title">
+    <slot name="title"></slot>
+  </template>
+</template> 

package/src/components/EbizTableSort.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="ebiz-table-sort">
+    <t-popup :visible="sortVisible" trigger="click" placement="bottom-right" :overlay-style="{ width: '450px' }"
+      @visible-change="handleVisibleChange" :destroy-on-close="false">
+      <template #content>
+        <t-card :title="popupTitle" size="small" :bordered="false">
+          <div class="sort-content">
+            <div class="sort-item" v-for="(item, index) in sortItems" :key="index">
+              <div class="sort-item-content" style="display: flex; margin-bottom: 12px;">
+                <t-select v-model="item.type" :placeholder="fieldPlaceholder" :options="fieldOptions" :clearable="false"
+                  :style="{ width: '170px' }" @change="handleSortChange" />
+                <t-select v-model="item.sort" :placeholder="orderPlaceholder" :options="orderOptions" :clearable="false"
+                  :style="{ width: '170px', marginLeft: '8px' }" @change="handleSortChange" />
+                <t-button theme="default" variant="text" shape="circle" @click="removeSortItem(index)"
+                  v-if="sortItems.length > 1" :style="{ marginLeft: '8px', flexShrink: 0 }">
+                  <template #icon>
+                    <t-icon name="close" />
+                  </template>
+                </t-button>
+              </div>
+            </div>
+            <div class="sort-footer">
+              <t-button theme="default" variant="outline" @click="addSortItem"
+                v-if="sortItems.length < maxSortItems">
+                <template #icon>
+                  <t-icon name="add" />
+                </template>
+                {{ addConditionText }}
+              </t-button>
+            </div>
+          </div>
+        </t-card>
+      </template>
+      <t-button block variant="outline" :title="title">
+        <template #icon>
+          <t-icon :name="icon" />
+        </template>
+        <div v-if="buttonText">
+          {{ buttonText }}
+        </div>
+      </t-button>
+    </t-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizTableSort"
+}
+</script>
+
+<script setup>
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import { Button as TButton, Popup as TPopup, Card as TCard, Select as TSelect, Icon as TIcon } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // v-model绑定值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 按钮图标
+  icon: {
+    type: String,
+    default: 'sort'
+  },
+  // 按钮文本
+  buttonText: {
+    type: String,
+    default: ''
+  },
+  // 按钮标题
+  title: {
+    type: String,
+    default: '排序'
+  },
+  // 弹出层标题
+  popupTitle: {
+    type: String,
+    default: '排序'
+  },
+  // 字段选项
+  fieldOptions: {
+    type: Array,
+    default: () => []
+  },
+  // 字段占位符
+  fieldPlaceholder: {
+    type: String,
+    default: '选择字段'
+  },
+  // 排序选项
+  orderOptions: {
+    type: Array,
+    default: () => [
+      { value: 'asc', label: '升序 ↑' },
+      { value: 'desc', label: '降序 ↓' }
+    ]
+  },
+  // 排序占位符
+  orderPlaceholder: {
+    type: String,
+    default: '选择排序'
+  },
+  // 最大排序条件数量
+  maxSortItems: {
+    type: Number,
+    default: 5
+  },
+  // 添加条件文本
+  addConditionText: {
+    type: String,
+    default: '添加排序条件'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'sort', 'visible-change']);
+
+// 排序弹出层显示状态
+const sortVisible = ref(false);
+
+// 排序条件列表
+const sortItems = ref([]);
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  if (newVal && newVal.length > 0) {
+    sortItems.value = JSON.parse(JSON.stringify(newVal));
+  } else {
+    // 默认添加一个空的排序条件
+    sortItems.value = [{ type: '', sort: 'desc' }];
+  }
+}, { immediate: true });
+
+// 添加排序条件
+const addSortItem = () => {
+  if (sortItems.value.length < props.maxSortItems) {
+    sortItems.value.push({ type: '', sort: 'desc' });
+  }
+};
+
+// 移除排序条件
+const removeSortItem = (index) => {
+  sortItems.value.splice(index, 1);
+  handleSortChange();
+};
+
+// 处理排序变更
+const handleSortChange = () => {
+  // 过滤有效的排序条件（字段和排序方向都不为空）
+  const validSortItems = sortItems.value.filter(item => item.type && item.sort);
+  emit('update:modelValue', validSortItems);
+  emit('sort', validSortItems);
+};
+
+// 弹出层可见性变化
+const handleVisibleChange = (visible) => {
+  sortVisible.value = visible;
+  emit('visible-change', visible);
+};
+</script>
+
+<style lang="less" scoped>
+.ebiz-table-sort {
+  display: inline-block;
+  
+  .sort-content {
+    min-width: 400px;
+    width: 100%;
+  }
+
+  .sort-footer {
+    margin-top: 16px;
+  }
+
+  .sort-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

package/src/components/EbizTabs.vue

@@ -1,101 +1,143 @@
 <template>
-  <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
-    <tiny-tab-item activeColor="#5e7ce0" v-for="i in showTabs" :key="i.value" :title="i.label" :name="i.value.toString()">
+  <div class="tdesign-tabs-wrapper">
+    <t-tabs
+      v-model="innerValue"
+      :addable="addable"
+      :disabled="disabled"
+      :placement="placement"
+      :size="size" 
+      :theme="theme"
+      :list="list"
+      :dragSort="dragSort"
+      @add="handleAdd"
+      @change="handleChange"
+      @dragSort="handleDragSort"
+      @remove="handleRemove"
+    >
+      <!-- 添加按钮插槽 -->
+      <template v-if="$slots.action" #action>
+        <slot name="action"></slot>
+      </template>
+      
+      <!-- 直接输出默认插槽内容，这里应该只包含EbizTabPanel -->
       <slot></slot>
-    </tiny-tab-item>
-  </tiny-tabs>
+    </t-tabs>
+  </div>
 </template>
 
-<script setup lang="jsx">
-import { ref,computed,watch} from 'vue'
-import { TinyTabs, TinyTabItem } from '@opentiny/vue'
-import {dataService} from "../index.js";
-const emit = defineEmits(['tabChange'])
-const props = defineProps({
-  // 远程请求的配置
-  apiConfig: {
-    type: Object,
-    default:()=>({
-      apiId: null,
-      apiType: 'MULTIPLE_DATA_SEARCH',
-    }),
-  },
-  // 不使用用远程的tabs
-  tabs:{
-    type:Array,
-    default:()=>[],
-  },
-  // tab名称对应的字段
-  labelKey:{
-    type:String,
-    default:'name'
-  },
-  // tab value对应的字段
-  valueKey:{
-    type:String,
-    default:'id'
-  },
-  // 标签卡样式
-  tabStyle:{
-    type:String,
-    default:''
-  },
-  // 展示值
-  showTab:{
-    type:String,
-    default:''
+<script>
+import { Tabs as TTabs } from 'tdesign-vue-next';
+import { defineComponent, toRefs, computed, watch } from 'vue';
+
+export default defineComponent({
+  name: 'EbizTabs',
+  components: {
+    't-tabs': TTabs,
   },
-  // 绑定值
-  currentTab:{
-    type:String,
-    default:''
+  props: {
+    // v-model绑定值
+    modelValue: {
+      type: [String, Number],
+    },
+    // 默认值
+    defaultValue: {
+      type: [String, Number],
+    },
+    // 选项卡右侧的操作区域
+    action: {
+      type: [Function, String],
+      default: undefined
+    },
+    // 选项卡是否可增加
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用选项卡
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否开启拖拽调整顺序
+    dragSort: {
+      type: Boolean,
+      default: false
+    },
+    // 选项卡列表
+    list: {
+      type: Array,
+    },
+    // 选项卡位置
+    placement: {
+      type: String,
+      default: 'top',
+      validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
+    },
+    // 组件尺寸
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (val) => ['medium', 'large'].includes(val)
+    },
+    // 选项卡风格
+    theme: {
+      type: String,
+      default: 'normal',
+      validator: (val) => ['normal', 'card'].includes(val)
+    }
   },
-})
-// 远程请求的tabs
-const remoteTabs = ref([]);
-// 展示的tabs
-const showTabs = computed(()=>{
-  if(remoteTabs.value.length) return [{label:'全部',value:'0'},...remoteTabs.value];
-  if(props.tabs.length) return props.tabs;
-  return [{label:'全部',value:'0'}];
-})
-
-// 展示的值
-const showTab = computed(()=>{
-  if(props.showTab) return props.showTab;
-  return props.currentTab || '0';
-})
-// methods
-const tabChange= (e)=>{
-  emit('tabChange',e.name === '0'?'':e.name);
-}
-// init
-watch(()=>showTabs.value,()=>{
-  tabChange({name:showTab.value})
-})
-watch(()=>props.apiConfig,(nVal) => {
-  if(!nVal?.apiId) return;
-  dataService.fetch({ }, {apiId:nVal.apiId,apiType:'MULTIPLE_DATA_SEARCH'}).then(res => {
-    remoteTabs.value = (res.data ?? []).map(i=>({
-      label:i[props.labelKey],
-      value:i[props.valueKey],
-    }))
-  })
-},{immediate:true})
+  emits: ['update:modelValue', 'add', 'change', 'dragSort', 'remove'],
+  setup(props, { emit }) {
+    const { modelValue, defaultValue } = toRefs(props);
+    
+    // 内部值计算属性,用于双向绑定
+    const innerValue = computed({
+      get: () => modelValue.value !== undefined ? modelValue.value : defaultValue.value,
+      set: (val) => {
+        emit('update:modelValue', val);
+      }
+    });
+    
+    // 监听modelValue变化
+    watch(modelValue, (newVal) => {
+      if (newVal !== innerValue.value) {
+        innerValue.value = newVal;
+      }
+    });
+    
+    // 添加选项卡事件
+    const handleAdd = (context) => {
+      emit('add', context);
+    };
+    
+    // 选项卡切换事件
+    const handleChange = (value, context) => {
+      emit('change', value, context);
+    };
+    
+    // 拖拽排序事件
+    const handleDragSort = (context) => {
+      emit('dragSort', context);
+    };
+    
+    // 删除选项卡事件
+    const handleRemove = (options) => {
+      emit('remove', options);
+    };
+    
+    return {
+      innerValue,
+      handleAdd,
+      handleChange,
+      handleDragSort,
+      handleRemove
+    };
+  }
+});
 </script>
 
-<style scoped>
-.pc-demo .tiny-tabs__content {
-  line-height: 2;
-}
-</style>
-
-<style scoped lang="less">
-:deep(.tiny-tabs__item.is-active){
-  color:#5e7ce0;
-}
-:deep(.tiny-tabs__active-bar){
-  background:#5e7ce0;
-  height:4px;
+<style lang="less" scoped>
+.tdesign-tabs-wrapper {
+  width: 100%;
 }
 </style>

package/src/components/EbizTimePicker.vue

@@ -0,0 +1,144 @@
+<template>
+  <t-time-picker
+    v-bind="$attrs"
+    :value="modelValue"
+    :allow-input="allowInput"
+    :clearable="clearable"
+    :disabled="disabled"
+    :disable-time="disableTime"
+    :format="format"
+    :input-props="inputProps"
+    :placeholder="placeholder"
+    :popup-props="popupProps"
+    :size="size"
+    :steps="steps"
+    :range="range"
+    :range-separator="rangeSeparator"
+    :tips="tips"
+    @change="handleChange"
+    @blur="$emit('blur', $event)"
+    @focus="$emit('focus', $event)"
+    @close="$emit('close', $event)"
+    @open="$emit('open', $event)"
+    @dayclick="$emit('dayclick', $event)"
+    @pick="$emit('pick', $event)"
+  >
+    <template v-if="$slots.suffixIcon" #suffixIcon>
+      <slot name="suffixIcon"></slot>
+    </template>
+    <template v-if="$slots.panel" #panel="slotProps">
+      <slot name="panel" v-bind="slotProps"></slot>
+    </template>
+    <template v-if="$slots.prepend" #prepend>
+      <slot name="prepend"></slot>
+    </template>
+    <template v-if="$slots.tips" #tips>
+      <slot name="tips"></slot>
+    </template>
+  </t-time-picker>
+</template>
+
+<script setup>
+import { TimePicker as TTimePicker } from 'tdesign-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: [String, Array],
+    default: '',
+  },
+  // 是否允许直接输入时间
+  allowInput: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否允许清除选中值
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否禁用组件
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 禁用时间项
+  disableTime: {
+    type: Function,
+    default: null,
+  },
+  // 时间格式
+  format: {
+    type: String,
+    default: 'HH:mm:ss',
+  },
+  // 透传给输入框的属性
+  inputProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 输入框占位文本
+  placeholder: {
+    type: String,
+    default: '请选择时间',
+  },
+  // 透传给 popup 组件的属性
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator(val) {
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  // 时间间隔步数
+  steps: {
+    type: Array,
+    default: () => [1, 1, 1],
+  },
+  // 是否为时间范围选择
+  range: {
+    type: Boolean,
+    default: false,
+  },
+  // 范围分隔符
+  rangeSeparator: {
+    type: String,
+    default: ' - ',
+  },
+  // 提示文本
+  tips: {
+    type: [String, Function],
+    default: '',
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'change',
+  'blur',
+  'focus',
+  'close',
+  'open',
+  'dayclick',
+  'pick',
+]);
+
+// 处理值变更事件
+const handleChange = (value) => {
+  emit('update:modelValue', value);
+  emit('change', value);
+};
+
+</script>
+
+<style>
+.t-time-picker {
+  width: 100%;
+}
+</style>