@ebiz/designer-components 0.0.18-kzy.3 → 0.0.18-kzy.5

package/src/components/EbizRemoteSelect.vue

@@ -41,7 +41,9 @@ const props = defineProps({
      */
     queryParams: {
         type: Object,
-        default: () => ({})
+        default: () => ({
+            name: ''
+        })
     },
     /**
      * 是否多选
@@ -62,7 +64,7 @@ const props = defineProps({
      */
     clearable: {
         type: Boolean,
-        default: false
+        default: true
     },
     /**
      * 是否禁用
@@ -141,18 +143,18 @@ const focus = () => {
 
 defineExpose({
     focus,
-    selectRef
+    selectRef,
+    options
 });
 
 // 远程搜索处理函数
 const handleRemoteSearch = async (keyword) => {
     loading.value = true;
-    console.log('handleRemoteSearch', keyword);
     try {
         const params = {
             queryParams: {
                 ...queryParams.value,
-                keyword
+                name: keyword
             }
         };
         const res = await dataService.fetch(params, {

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> 

package/src/components/EbizTree.vue

@@ -0,0 +1,153 @@
+<template>
+  <t-tree
+    ref="treeRef"
+    v-bind="$attrs"
+    :data="data"
+    :value="modelValue"
+    :expanded="expandedModel"
+    :actived="activedModel"
+    :transition="transition"
+    :disable-check="disableCheck"
+    :keys="keys"
+    @change="handleChange"
+    @expand="handleExpand"
+    @active="handleActive"
+    @select="$emit('select', $event)"
+    @drag-start="$emit('drag-start', $event)"
+    @drag-end="$emit('drag-end', $event)"
+    @drag-over="$emit('drag-over', $event)"
+    @drag-leave="$emit('drag-leave', $event)"
+    @drag-drop="$emit('drag-drop', $event)"
+    @click="$emit('click', $event)"
+    @load="$emit('load', $event)"
+  >
+    <template v-if="$slots.default" #default="slotProps">
+      <slot :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty"></slot>
+    </template>
+    <template v-if="$slots.icon" #icon="slotProps">
+      <slot name="icon" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.label" #label="slotProps">
+      <slot name="label" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.line" #line="slotProps">
+      <slot name="line" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.operations" #operations="slotProps">
+      <slot name="operations" :node="slotProps.node"></slot>
+    </template>
+  </t-tree>
+</template>
+
+<script setup>
+import { Tree as TTree } from 'tdesign-vue-next';
+import { computed ,ref} from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 展开节点
+  expanded: {
+    type: Array,
+    default: () => []
+  },
+  // 激活节点
+  actived: {
+    type: Array,
+    default: () => []
+  },
+  // 数据
+  items: {
+    type: Array,
+    default: () => []
+  },
+  // 是否启用过渡动画
+  transition: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义节点禁用状态，返回true表示禁用
+  disableCheck: {
+    type: Function,
+    default: null
+  },
+  // 自定义节点数据中的字段名称
+  keys: {
+    type: Object,
+    default: () => ({
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    })
+  }
+});
+
+const treeRef = ref();
+// 定义组件事件
+const emit = defineEmits([
+  'update:modelValue', 
+  'update:expanded', 
+  'update:actived', 
+  'change', 
+  'expand', 
+  'active', 
+  'select', 
+  'click', 
+  'load',
+  'drag-start',
+  'drag-end',
+  'drag-over',
+  'drag-leave',
+  'drag-drop'
+]);
+
+// 处理items映射到data
+const data = computed(() => props.items);
+
+// 展开事件
+const expandedModel = computed({
+  get: () => props.expanded,
+  set: (val) => emit('update:expanded', val)
+});
+
+// 激活节点
+const activedModel = computed({
+  get: () => props.actived,
+  set: (val) => emit('update:actived', val)
+});
+
+// 值改变事件
+const handleChange = (val, context) => {
+  emit('update:modelValue', val);
+  emit('change', val, context);
+};
+
+// 节点展开事件
+const handleExpand = (val, context) => {
+  emit('update:expanded', val);
+  emit('expand', val, context);
+};
+
+// 节点激活事件
+const handleActive = (val, context) => {
+  emit('update:actived', val);
+  emit('active', val, context);
+};
+
+defineExpose({
+  treeRef
+});
+</script>
+
+<style>
+.t-tree {
+  width: 100%;
+}
+</style>