@ebiz/designer-components 0.0.58 → 0.0.60

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

@@ -1,261 +1,263 @@
-<template>
-    <div>
-        <div style="margin-bottom: 16px;">
-            <EbizTdesignCard v-if="showPageHeader || $slots.form" :bordered="false">
-                <EbizPageHeader v-if="showPageHeader"></EbizPageHeader>
-                <EbizDivider v-if="showPageHeader"></EbizDivider>
-
-                <!-- 表单区域 -->
-                <ebiz-s-form v-if="$slots.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">
-            <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="computedData"></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, EbizTableSort, EbizTdesignButton, EbizTdesignCard, EbizPageHeader, EbizSForm } from "../../../index"
-import {  Space as TSpace, Pagination as TPagination, Input as TInput } 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({
-    showDemoData: {
-        type: Boolean,
-        default: true
-    },
-    demoData: {
-        type: Array,
-        default: () => [{
-            id: 1,
-            name: '张三',
-            age: 18,
-            gender: '男',
-            address: '北京市海淀区'
-        },
-            {
-                id: 2,
-                name: '李四',
-                age: 20,
-                gender: '女',
-                address: '北京市朝阳区'
-            }]
-    },
-    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 computedData = computed(() => {
-    const developMode = localStorage.getItem('ebiz-develop-mode')
-    if (developMode === 'designer') {
-        if (props.showDemoData) {
-            return props.demoData
-        }
-        return [];
-    }
-    return data.value
-})
-
-
-const defaultFormData = ref({ ...props.formData })
-const searchValue = ref('')
-
-const loadData = async () => {
-
-    const params = {
-        keyword: searchValue.value
-    }
-    const res = await dataService.fetch({ 
-        page: currentPage.value,
-        pagesize: pageSize.value,
-        queryParams:{
-        ...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>
-
+<template>
+    <div>
+        <div style="margin-bottom: 16px;">
+            <EbizTdesignCard v-if="showPageHeader || $slots.form" :bordered="false">
+                <EbizPageHeader v-if="showPageHeader"></EbizPageHeader>
+                <EbizDivider v-if="showPageHeader"></EbizDivider>
+
+                <!-- 表单区域 -->
+                <ebiz-s-form v-if="$slots.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">
+            <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="computedData"></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, defineExpose } from 'vue';
+import { dataService, EbizTableSort, EbizTdesignButton, EbizTdesignCard, EbizPageHeader, EbizSForm } from "../../../index"
+import {  Space as TSpace, Pagination as TPagination, Input as TInput, Icon as TIcon } 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({
+    showDemoData: {
+        type: Boolean,
+        default: true
+    },
+    demoData: {
+        type: Array,
+        default: () => [{
+            id: 1,
+            name: '张三',
+            age: 18,
+            gender: '男',
+            address: '北京市海淀区'
+        },
+            {
+                id: 2,
+                name: '李四',
+                age: 20,
+                gender: '女',
+                address: '北京市朝阳区'
+            }]
+    },
+    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 computedData = computed(() => {
+    const developMode = localStorage.getItem('ebiz-develop-mode')
+    if (developMode === 'designer') {
+        if (props.showDemoData) {
+            return props.demoData
+        }
+        return [];
+    }
+    return data.value
+})
+
+
+const defaultFormData = ref({ ...props.formData })
+const searchValue = ref('')
+
+const loadData = async () => {
+
+    const params = {
+        keyword: searchValue.value
+    }
+    const res = await dataService.fetch({ 
+        page: currentPage.value,
+        pagesize: pageSize.value,
+        queryParams:{
+        ...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)
+    }
+})
+defineExpose({
+    loadData
+})
+</script>
+
 <style></style>