@ebiz/designer-components 0.0.30 → 0.0.32

package/src/components/senior/EbizSForm/item.vue

@@ -0,0 +1,478 @@
+<template>
+    <t-form-item :class="['ebiz-s-form-item', className]" :for="forAttr" :help="help" :label="label" :name="name"
+        :style="customStyle" :rules="rules" :label-width="labelWidth" :label-align="labelAlign" :status="status"
+        @validate="handleValidate">
+        <!-- 输入框 -->
+        <template v-if="type === 'input'">
+            <t-input v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
+                :readonly="readonly" :clearable="clearable" :max-length="maxLength" :max-character="maxCharacter"
+                :show-limit-number="showLimitNumber" @change="handleChange" />
+        </template>
+
+        <!-- 数字输入框 -->
+        <template v-else-if="type === 'number'">
+            <t-input-number v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
+                :readonly="readonly" :max="max" :min="min" :step="step" :format="format" @change="handleChange" />
+        </template>
+
+        <!-- 文本域 -->
+        <template v-else-if="type === 'textarea'">
+            <t-textarea v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
+                :readonly="readonly" :autosize="autosize" :maxlength="maxLength" :max-character="maxCharacter"
+                :show-limit-number="showLimitNumber" @change="handleChange" />
+        </template>
+
+        <!-- 选择器 -->
+        <template v-else-if="type === 'select'">
+            <t-select v-model="computedModelValue" :options="options" :placeholder="placeholder || '请选择'"
+                :disabled="disabled" :clearable="clearable" :filterable="filterable" :multiple="multiple"
+                :loading="loading" @change="handleChange" />
+        </template>
+
+        <!-- 日期选择器 -->
+        <template v-else-if="type === 'date'">
+            <t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期'" :disabled="disabled"
+                :clearable="clearable" :format="dateFormat || 'YYYY-MM-DD'" :mode="dateMode || 'date'"
+                @change="handleChange" />
+        </template>
+
+        <!-- 时间选择器 -->
+        <template v-else-if="type === 'time'">
+            <t-time-picker v-model="computedModelValue" :placeholder="placeholder || '请选择时间'" :disabled="disabled"
+                :clearable="clearable" :format="timeFormat || 'HH:mm:ss'" @change="handleChange" />
+        </template>
+
+        <!-- 单选框组 -->
+        <template v-else-if="type === 'radio'">
+            <t-radio-group v-model="computedModelValue" :disabled="disabled" :options="options"
+                @change="handleChange" />
+        </template>
+
+        <!-- 复选框组 -->
+        <template v-else-if="type === 'checkbox'">
+            <t-checkbox-group v-model="computedModelValue" :disabled="disabled" :options="options" :max="max"
+                @change="handleChange" />
+        </template>
+
+        <!-- 开关 -->
+        <template v-else-if="type === 'switch'">
+            <t-switch v-model="computedModelValue" :disabled="disabled" @change="handleChange" />
+        </template>
+
+        <!-- 滑块 -->
+        <template v-else-if="type === 'slider'">
+            <t-slider v-model="computedModelValue" :disabled="disabled" :max="max" :min="min" :step="step"
+                :range="range" :marks="marks" @change="handleChange" />
+        </template>
+
+        <!-- 上传 -->
+        <template v-else-if="type === 'upload'">
+            <t-upload v-model="computedModelValue" :disabled="disabled" :accept="accept" :multiple="multiple" :max="max"
+                :action="action" :headers="headers" :with-credentials="withCredentials" :before-upload="beforeUpload"
+                :format-response="formatResponse" :theme="uploadTheme || 'file'" @change="handleChange" />
+        </template>
+
+        <!-- 级联选择器 -->
+        <template v-else-if="type === 'cascader'">
+            <t-cascader v-model="computedModelValue" :disabled="disabled" :options="options"
+                :placeholder="placeholder || '请选择'" :clearable="clearable" :filterable="filterable" :multiple="multiple"
+                @change="handleChange" />
+        </template>
+
+        <!-- 树形选择器 -->
+        <template v-else-if="type === 'tree-select'">
+            <t-tree-select v-model="computedModelValue" :disabled="disabled" :data="treeData || options"
+                :placeholder="placeholder || '请选择'" :clearable="clearable" :filterable="filterable" :multiple="multiple"
+                @change="handleChange" />
+        </template>
+
+        <!-- 颜色选择器 -->
+        <template v-else-if="type === 'color-picker'">
+            <t-color-picker v-model="computedModelValue" :disabled="disabled" :clearable="clearable"
+                @change="handleChange" />
+        </template>
+
+        <!-- 默认插槽，用于自定义控件 -->
+        <template v-else>
+            <slot>
+                <div class="custom-control">
+                    <slot name="default"></slot>
+                </div>
+            </slot>
+        </template>
+    </t-form-item>
+</template>
+
+<script>
+/**
+ * @displayName PC端表单项
+ * @description PC端表单项组件，基于TDesign FormItem封装，支持多种控件类型
+ * @category 表单组件
+ * @name EbizSFormItem
+ */
+export default {
+    name: "EbizSFormItem"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import {
+    FormItem as TFormItem,
+    Input as TInput,
+    InputNumber as TInputNumber,
+    Textarea as TTextarea,
+    Select as TSelect,
+    DatePicker as TDatePicker,
+    TimePicker as TTimePicker,
+    RadioGroup as TRadioGroup,
+    CheckboxGroup as TCheckboxGroup,
+    Switch as TSwitch,
+    Slider as TSlider,
+    Upload as TUpload,
+    Cascader as TCascader,
+    TreeSelect as TTreeSelect,
+    ColorPicker as TColorPicker
+} from 'tdesign-vue-next';
+
+const props = defineProps({
+    /**
+     * 组件类型
+     * @options input|number|textarea|select|date|time|radio|checkbox|switch|slider|upload|cascader|tree-select|color-picker
+     */
+    type: {
+        type: String,
+        default: undefined,
+        validator: (val) => [
+            'input', 'number', 'textarea', 'select', 'date', 'time', 'radio',
+            'checkbox', 'switch', 'slider', 'upload', 'cascader', 'tree-select',
+            'color-picker'
+        ].includes(val)
+    },
+    /**
+     * 绑定的值
+     */
+    modelValue: {
+        type: [String, Number, Boolean, Array, Object],
+        default: undefined
+    },
+    /**
+     * 表单项标签
+     */
+    label: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 表单项字段名，唯一标识
+     */
+    name: {
+        type: String,
+        default: ''
+    },
+    /**
+     * html元素原生属性for
+     */
+    forAttr: {
+        type: String,
+        default: undefined
+    },
+    /**
+     * 表单项帮助文本
+     */
+    help: {
+        type: [String, Function],
+        default: ''
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否只读
+     */
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 表单项规则
+     */
+    rules: {
+        type: [Array, Object],
+        default: undefined
+    },
+    /**
+     * 自定义样式
+     */
+    customStyle: {
+        type: [String, Object],
+        default: ''
+    },
+    /**
+     * 自定义类名
+     */
+    className: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 表单项标签宽度
+     */
+    labelWidth: {
+        type: [String, Number],
+        default: undefined
+    },
+    /**
+     * 表单项标签对齐方式
+     * @options left|right|top
+     */
+    labelAlign: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['left', 'right', 'top'].includes(val)
+    },
+    /**
+     * 表单项状态
+     * @options default|success|warning|error
+     */
+    status: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    /**
+     * 占位文本
+     */
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否可清空
+     */
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 最大长度
+     */
+    maxLength: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 最大字符数
+     */
+    maxCharacter: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 是否显示字数限制
+     */
+    showLimitNumber: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 选项数据，用于select, radio, checkbox等
+     */
+    options: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     * 树形数据，用于tree-select
+     */
+    treeData: {
+        type: Array,
+        default: undefined
+    },
+    /**
+     * 是否支持过滤
+     */
+    filterable: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否支持多选
+     */
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 加载状态
+     */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 日期格式
+     */
+    dateFormat: {
+        type: String,
+        default: 'YYYY-MM-DD'
+    },
+    /**
+     * 日期选择器模式
+     * @options date|week|month|quarter|year
+     */
+    dateMode: {
+        type: String,
+        default: 'date',
+        validator: (val) => ['date', 'week', 'month', 'quarter', 'year'].includes(val)
+    },
+    /**
+     * 时间格式
+     */
+    timeFormat: {
+        type: String,
+        default: 'HH:mm:ss'
+    },
+    /**
+     * 最大值
+     */
+    max: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 最小值
+     */
+    min: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 步长
+     */
+    step: {
+        type: Number,
+        default: 1
+    },
+    /**
+     * 格式化函数
+     */
+    format: {
+        type: Function,
+        default: undefined
+    },
+    /**
+     * 文本域自适应高度
+     */
+    autosize: {
+        type: [Boolean, Object],
+        default: false
+    },
+    /**
+     * 滑块是否为范围选择
+     */
+    range: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 滑块刻度标记
+     */
+    marks: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 上传接受的文件类型
+     */
+    accept: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 上传接口地址
+     */
+    action: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 上传请求头
+     */
+    headers: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 上传是否携带cookie
+     */
+    withCredentials: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 上传前的钩子函数
+     */
+    beforeUpload: {
+        type: Function,
+        default: undefined
+    },
+    /**
+     * 上传响应格式化函数
+     */
+    formatResponse: {
+        type: Function,
+        default: undefined
+    },
+    /**
+     * 上传组件主题
+     * @options file|image|image-flow
+     */
+    uploadTheme: {
+        type: String,
+        default: 'file',
+        validator: (val) => ['file', 'image', 'image-flow'].includes(val)
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'change',
+    'validate'
+]);
+
+// 计算属性处理v-model双向绑定
+const computedModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
+
+/**
+ * 值变更事件
+ * @param {*} val 新值
+ */
+const handleChange = (val) => {
+    emit('change', val);
+};
+
+/**
+ * 验证事件
+ * @param {Object} validateResult 验证结果
+ */
+const handleValidate = (validateResult) => {
+    emit('validate', validateResult);
+};
+</script>
+
+<style scoped>
+
+.custom-control {
+    width: 100%;
+}
+</style>

package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <div @click="visible = true"
+            style="display: flex; width: 100%; justify-content: flex-end; align-items: center;">
+            <div v-if="pickerValue" style="margin-right: 10px;">
+                {{ pickerValue }}
+            </div>
+            <div v-else style="margin-right: 10px; color: rgba(0, 0, 0, 0.4);">
+                年 月 日
+            </div>
+        </div>
+
+        <!-- <EbizMobileDateTimePicker :visible="visible" is-popup :mode="['date']" :title="properties.title"
+            :start="properties.start" :format="properties.format" @confirm="onConfirm" @cancel="onCancel" /> -->
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+
+
+const visible = ref(false)
+const pickerValue = ref('')
+
+const emit = defineEmits(['update:modelValue', 'onCancel'])
+const props = defineProps({
+    modelValue: {
+        type: Object
+    },
+    properties: {
+        type: Object,
+        default: () => {
+            return {
+                title: '选择日期',
+                start: '1900-01-01',
+                format: 'YYYY-MM-DD'
+            }
+        }
+    }
+})
+
+const onCancel = () => {
+    visible.value = false
+    emit('onCancel')
+}
+const onConfirm = (val) => {
+    console.log(val)
+    pickerValue.value = val
+    visible.value = false
+    emit('update:modelValue', val)
+}
+</script>

package/src/components/senior/EbizSForm/mItems/Picker.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <div @click="visible = true"
+            style="display: flex; width: 100%; justify-content: flex-end; align-items: center;">
+            <div v-if="pickerValue" style="margin-right: 10px;">
+                <template v-for="(item, key) in options" :key="key">
+                    <div v-if="item.value == pickerValue[0]">
+                        {{ item.label }}
+                    </div>
+                </template>
+
+            </div>
+            <div v-else style="margin-right: 10px; color: rgba(0, 0, 0, 0.4);">
+                {{placeholder}}
+            </div>
+        </div>
+
+        <!-- <EbizMobilePicker :visible="visible" is-popup :columns="options" :mode="['date']" :title="properties.title"
+            :start="properties.start" :format="properties.format" @confirm="onConfirm" @cancel="onCancel" /> -->
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+
+
+const visible = ref(false)
+const pickerValue = ref('')
+
+const emit = defineEmits(['update:modelValue', 'onCancel'])
+const props = defineProps({
+    modelValue: {
+        type: Object
+    },
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    options: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }, 
+    properties: {
+        type: Object,
+        default: () => {
+            return {
+                title: '选择',
+            }
+        }
+    }
+})
+
+const onCancel = () => {
+    visible.value = false
+    emit('onCancel')
+}
+const onConfirm = (val) => {
+    pickerValue.value = val
+    visible.value = false
+    emit('update:modelValue', val[0])
+}
+</script>

package/src/index.js

@@ -61,8 +61,6 @@ import EbizTdesignLoading from './components/EbizTdesignLoading.vue';
 import EbizAutoForm from './components/EbizAutoForm.vue';
 import EbizDepartmentSelector from './components/EbizDepartmentSelector.vue';
 import EbizTdesignButtonDialog from './components/EbizTdesignButtonDialog.vue';
-import EbizSForm from './components/EbizSForm.vue';
-import EbizSFormItem from './components/EbizSFormItem.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
@@ -84,6 +82,12 @@ import EbizTimeline from "./components/TdesignTimeline.vue";
 import {TimelineItem as EbizTimelineItem} from 'tdesign-vue-next';
 import { LoadingPlugin as EbizLoading } from 'tdesign-vue-next';
 
+import EbizMap from './components/EbizMap.vue';
+
+import EbizSData from './components/senior/EbizSData/index.vue';
+import EbizSForm from "./components/senior/EbizSForm/index.vue";
+import EbizSFormItem from "./components/senior/EbizSForm/item.vue";
+
 // 导出组件
 export {
   MyComponent,
@@ -197,7 +201,10 @@ export {
   EbizLoading,
   // 弹窗按钮组件
   EbizTdesignButtonDialog,
-  // PC端表单组件
+  EbizMap,
+
+  // PC端高级组件
+  EbizSData,
   EbizSForm,
   EbizSFormItem
 };

package/src/router/index.js

@@ -322,6 +322,18 @@ const routes = [
     name: 'EbizSForm',
     component: () => import('../views/EbizSFormDemo.vue'),
     meta: { title: 'PC端表单组件示例' }
+  },
+  {
+    path: '/ebiz-map',
+    name: 'EbizMap',
+    component: () => import('../views/EbizMap.vue'),
+    meta: { title: '地图经纬度选择器组件示例' }
+  },
+  {
+    path: '/ebiz-s-data',
+    name: 'EbizSData',
+    component: () => import('../views/EbizSDataDemo.vue'),
+    meta: { title: 'Ebiz数据组件示例' }
   }
 ]