@ebiz/designer-components 0.0.30 → 0.0.32

package/src/components/senior/EbizSData/index.vue

@@ -0,0 +1,228 @@
+<template>
+    <div>
+        <div>
+            <EbizTdesignCard :bordered="false">
+                <EbizPageHeader></EbizPageHeader>
+                <EbizDivider></EbizDivider>
+                <!-- 表单区域 -->
+                <ebiz-s-form v-model="formDataValue" ref="formRef" layout="inline" labelAlign="top"
+                    @submit="handleSearch" @reset="handleReset">
+                    <slot name="form"></slot>
+                    <template #buttons>
+                        <t-space>
+                            <EbizTdesignButton theme="primary" type="submit">搜索</EbizTdesignButton>
+                            <EbizTdesignButton theme="default" type="reset">重置</EbizTdesignButton>
+                        </t-space>
+                    </template>
+                </ebiz-s-form>
+            </EbizTdesignCard>
+        </div>
+
+        <EbizTdesignCard :bordered="false" style="margin-top: 16px;">
+            <div>
+                <!-- 表格区域 -->
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div style="display: flex; align-items: center;">
+                        <slot name="left"></slot>
+                        <slot name="search">
+                            <div v-if="defaultSearch" style="margin-left: 10px;">
+                                <t-input v-model="searchValue" placeholder="请输入搜索内容" @change="handleSearch"></t-input>
+                            </div>
+                        </slot>
+                    </div>
+                    <div style="display: flex; align-items: center; justify-content: flex-end;">
+                        <slot name="right"></slot>
+                        <t-space size="10px">
+                            <EbizTdesignButton theme="info" variant="outline" @click="handleSearch">
+                                <t-icon name="refresh" />
+                            </EbizTdesignButton>
+                            <EbizTableSort></EbizTableSort>
+                        </t-space>
+                    </div>
+                </div>
+                <div style="margin-top: 8px;">
+                    <slot :data="data"></slot>
+                </div>
+            </div>
+
+            <div v-if="pageEnable" style="margin-top: 16px;">
+                <!-- 分页区域 -->
+                <t-pagination v-model:current="currentPage" v-model:page-size="pageSize" :total="total"
+                    :page-size-options="pageSizeOptions" @change="onPageChange" />
+            </div>
+        </EbizTdesignCard>
+    </div>
+</template>
+
+<script>
+/**
+ * @displayName 数据组件
+ * @description 数据组件，用于获取和展示数据列表
+ * @category 数据展示
+ * @name EbizSData
+ */
+export default {
+    name: "EbizSData"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, ref, onMounted, computed } from 'vue';
+import { dataService, EbizSFormItem, EbizTableSort, EbizTdesignButton, EbizTdesignCard, EbizPageHeader } from "../../../index"
+import { Button as TButton, Space as TSpace } from 'tdesign-vue-next';
+
+const currentPage = ref(1)
+const pageSize = ref(10)
+const hasMore = ref(true)
+const refreshing = ref(false)
+const total = ref(0)
+const pageSizeOptions = ref([10, 20, 50, 100])
+
+const data = ref([]);
+
+const props = defineProps({
+    showPageHeader: {
+        type: Boolean,
+        default: true
+    },
+    defaultSearch: {
+        type: Boolean,
+        default: false
+    },
+    showDivider: {
+        type: Boolean,
+        default: false
+    },
+    pageEnable: {
+        type: Boolean,
+        default: true
+    },
+    defaultParams: {},
+    // 接口配置
+    apiConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    formData: {
+        type: Object,
+        default: () => ({})
+    },
+    labelKey: {
+        type: String,
+        default: 'name'
+    },
+    // 分页大小
+    size: {
+        type: Number,
+        default: 10
+    },
+    /**
+     * 头部内容
+     */
+    header: {
+        type: String,
+        default: undefined
+    },
+    /**
+     * 底部内容
+     */
+    footer: {
+        type: String,
+        default: undefined
+    },
+    /**
+     * 是否展示分割线
+     */
+    split: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否展示斑马纹
+     */
+    stripe: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否开启虚拟滚动
+     */
+    async: {
+        type: Boolean,
+        default: false
+    },
+    fetchUrl: {
+        type: String,
+        default: undefined
+    }
+});
+
+const defaultFormData = ref({ ...props.formData })
+const searchValue = ref('')
+
+const loadData = async () => {
+
+    let params = {
+        keyword: searchValue.value
+    }
+    if (props.pageEnable) {
+        params = {
+            page: currentPage.value,
+            pagesize: pageSize.value,
+        }
+    }
+    const res = await dataService.fetch({ ...params, ...props.defaultParams, ...props.formData }, props.apiConfig, props.fetchUrl)
+
+    data.value = res.data || []
+    total.value = res.total || 0
+
+    // 判断是否还有更多数据
+    hasMore.value = (res.data || []).length === pageSize.value
+    refreshing.value = false
+}
+
+const emit = defineEmits(['scroll', 'load-more', 'update:formData']);
+
+// 组件挂载时加载数据
+onMounted(() => {
+    currentPage.value = 1
+    pageSize.value = props.size
+    loadData()
+})
+
+// 搜索
+const handleSearch = (context) => {
+    const result = emit('search', context)
+    if (result === false) {
+        return
+    }
+    currentPage.value = 1
+    loadData()
+}
+
+// 重置
+const handleReset = (context) => {
+    const result = emit('reset', context)
+    if (result === false) {
+        return
+    }
+    emit('update:formData', { ...defaultFormData.value })
+    currentPage.value = 1
+    loadData()
+}
+
+
+const onPageChange = () => {
+    loadData()
+}
+
+const formDataValue = computed({
+    get: () => props.formData,
+    set: (value) => {
+        emit('update:formData', value)
+    }
+})
+
+</script>
+
+<style></style>

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

@@ -0,0 +1,385 @@
+<template>
+    <t-form ref="formRef" :class="['ebiz-s-form', className]" :colon="colon" :data="data" :disabled="disabled"
+        :label-align="labelAlign" :label-width="labelWidth" :layout="layout" :reset-type="resetType"
+        :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules" :scroll-to-first-error="scrollToFirstError"
+        :show-error-message="showErrorMessage" :status-icon="statusIcon" :style="customStyle" @reset="handleReset"
+        @submit="handleSubmit" @validate="handleValidate">
+
+        <slot></slot>
+
+        <ebiz-s-form-item label=" ">
+            <slot name="buttons">
+                <t-space>
+                    <t-button v-if="showCancelButton" :theme="cancelButtonTheme" type="reset">{{
+                        cancelButtonText
+                        }}</t-button>
+                    <t-button v-if="showSubmitButton" theme="primary" :loading="loading" type="submit">{{
+                        submitButtonText }}</t-button>
+                </t-space>
+            </slot>
+        </ebiz-s-form-item>
+    </t-form>
+</template>
+
+<script>
+/**
+ * @displayName PC端表单
+ * @description PC端表单组件，基于TDesign Form封装，支持表单验证、API提交等功能
+ * @category 表单组件
+ * @name EbizSForm
+ */
+export default {
+    name: "EbizSForm"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, ref, reactive, computed } from 'vue';
+import { Form as TForm, Button as TButton, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
+import dataService from "../../../apiService/simpleDataService";
+import EbizSFormItem from './item.vue';
+
+const props = defineProps({
+    /**
+     * 表单数据对象
+     */
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 表单域标签的位置
+     * @options left|right|top
+     */
+    labelAlign: {
+        type: String,
+        default: 'right',
+        validator: (val) => ['left', 'right', 'top'].includes(val)
+    },
+    /**
+     * 表单布局
+     * @options vertical|inline
+     */
+    layout: {
+        type: String,
+        default: 'vertical',
+        validator: (val) => ['vertical', 'inline'].includes(val)
+    },
+    /**
+     * 是否显示必填标记
+     */
+    colon: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否禁用整个表单
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 表单域标签的宽度
+     */
+    labelWidth: {
+        type: [String, Number],
+        default: '100px'
+    },
+    /**
+     * 表单校验规则
+     */
+    rules: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 是否显示校验错误信息
+     */
+    showErrorMessage: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否显示校验图标
+     */
+    statusIcon: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 表单重置时的方式
+     * @options empty|initial
+     */
+    resetType: {
+        type: String,
+        default: 'empty',
+        validator: (val) => ['empty', 'initial'].includes(val)
+    },
+    /**
+     * 重置时是否清空所有非受控字段
+     */
+    resetOnSemiControlled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 表单校验不通过时，是否自动定位到第一个错误字段
+     */
+    scrollToFirstError: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 自定义样式
+     */
+    customStyle: {
+        type: [String, Object],
+        default: ''
+    },
+    /**
+     * 自定义类名
+     */
+    className: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否显示表单按钮（提交和取消）
+     */
+    showButtons: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否显示提交按钮
+     */
+    showSubmitButton: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 提交按钮文字
+     */
+    submitButtonText: {
+        type: String,
+        default: '提交'
+    },
+    /**
+     * 是否显示取消按钮
+     */
+    showCancelButton: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 取消按钮文字
+     */
+    cancelButtonText: {
+        type: String,
+        default: '取消'
+    },
+    /**
+     * 取消按钮主题
+     */
+    cancelButtonTheme: {
+        type: String,
+        default: 'default'
+    },
+    /**
+     * API配置，用于表单提交
+     */
+    apiConfig: {
+        type: Object,
+        default: () => null
+    },
+    /**
+     * 是否在提交成功后重置表单
+     */
+    resetOnSuccess: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 提交成功后的消息提示
+     */
+    successMessage: {
+        type: String,
+        default: '提交成功'
+    },
+    /**
+     * 提交失败后的消息提示
+     */
+    errorMessage: {
+        type: String,
+        default: '提交失败'
+    },
+    /**
+     * 是否显示提交结果消息
+     */
+    showResultMessage: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits([
+    'reset',
+    'submit',
+    'validate',
+    'success',
+    'error',
+    'cancel'
+]);
+
+const formRef = ref(null);
+const loading = ref(false);
+
+/**
+ * 提交表单
+ */
+const handleFormSubmit = async () => {
+    if (!formRef.value) return;
+
+    const validateResult = await formRef.value.validate();
+    if (validateResult !== true) {
+        return;
+    }
+
+    emit('submit', props.data);
+
+    if (props.apiConfig) {
+        await submitFormData();
+    }
+};
+
+/**
+ * 调用API提交表单数据
+ */
+const submitFormData = async () => {
+    try {
+        loading.value = true;
+
+        const { url, method, headers, params } = props.apiConfig;
+        const response = await dataService.request({
+            url,
+            method: method || 'post',
+            data: props.data,
+            params,
+            headers
+        });
+
+        if (props.showResultMessage) {
+            MessagePlugin.success(props.successMessage);
+        }
+
+        emit('success', response);
+
+        if (props.resetOnSuccess && formRef.value) {
+            formRef.value.reset();
+        }
+
+        return response;
+    } catch (error) {
+        if (props.showResultMessage) {
+            MessagePlugin.error(props.errorMessage || error.message || '提交失败');
+        }
+
+        emit('error', error);
+        return null;
+    } finally {
+        loading.value = false;
+    }
+};
+
+/**
+ * 表单重置
+ * @param {Object} context 表单上下文
+ */
+const handleReset = (context) => {
+    console.log('handleReset', context);
+    emit('reset', context);
+};
+
+/**
+ * 表单验证
+ * @param {Object} result 表单验证结果
+ */
+const handleValidate = (result) => {
+    emit('validate', result);
+};
+
+
+/**
+ * 表单提交事件，由内置的HTML表单submit事件触发
+ */
+const handleSubmit = (context) => {
+    console.log('handleSubmit', context);
+
+    // 这里只做转发，实际提交逻辑在handleFormSubmit中
+    emit('submit', context);
+};
+
+// 暴露方法给父组件
+defineExpose({
+    /**
+     * 提交表单方法
+     */
+    submit: handleFormSubmit,
+    /**
+     * 重置表单方法
+     */
+    reset: () => {
+        if (formRef.value) {
+            formRef.value.reset();
+        }
+    },
+    /**
+     * 校验表单方法
+     * @returns {Promise} 校验结果Promise
+     */
+    validate: async () => {
+        if (formRef.value) {
+            return await formRef.value.validate();
+        }
+        return false;
+    },
+    /**
+     * 校验特定字段
+     * @param {Array|String} fields 字段名称或字段名称数组
+     * @returns {Promise} 校验结果Promise
+     */
+    validateFields: async (fields) => {
+        if (formRef.value) {
+            return await formRef.value.validateFields(fields);
+        }
+        return false;
+    },
+    /**
+     * 清除校验结果
+     * @param {Array|String} fields 字段名称或字段名称数组，不传则清除所有
+     */
+    clearValidate: (fields) => {
+        if (formRef.value) {
+            formRef.value.clearValidate(fields);
+        }
+    },
+    /**
+     * 获取表单DOM元素
+     */
+    getFormElement: () => formRef.value
+});
+</script>
+
+<style scoped>
+.ebiz-s-form {
+    width: 100%;
+}
+
+.form-buttons {
+    margin-top: 24px;
+    padding: 8px 0;
+    display: flex;
+    justify-content: center;
+}
+</style>