@ebiz/designer-components 0.0.18-kzy.7 → 0.0.18-kzy.8

package/src/components/EbizRemoteSelect.vue

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <script setup>
-import { ref, onMounted, toRefs, computed } from 'vue';
+import { ref, onMounted, toRefs, computed, watch } from 'vue';
 import { Select as TSelect } from 'tdesign-vue-next';
 import dataService from '../apiService/simpleDataService';
 
@@ -112,10 +112,17 @@ const props = defineProps({
     popupProps: {
         type: Object,
         default: () => ({})
+    },
+    /**
+     * 字典配置
+     */
+    distConfig: {
+        type: Array,
+        default: () => []
     }
 });
 
-const { modelValue, apiConfig, labelField, valueField, queryParams } = toRefs(props)
+const { modelValue, apiConfig, labelField, valueField, queryParams, distConfig } = toRefs(props)
 
 const emit = defineEmits(['update:modelValue', 'change', 'selectOption', 'focus', 'blur']);
 
@@ -163,11 +170,26 @@ const handleRemoteSearch = async (keyword) => {
             apiType: 'MULTIPLE_DATA_SEARCH'
         });
 
-        options.value = res.data.map(item => ({
-            ...item,
-            label: labelField.value ? item[labelField.value] : (item.label || item.name),
-            value: valueField.value ? item[valueField.value] : (item.value || item.id)
-        }));
+        if (distConfig.value.length > 0 && props.queryParams?.code) {
+            const currentDistConfig = distConfig.value.find(item => item.dist_code === props.queryParams.code)?.content;
+            if (currentDistConfig) {
+                const { value, cn_value, en_value } = currentDistConfig;
+                options.value = res.data.map(item => {
+                    const label = [(value ? item.value : ''), (cn_value ? item.cn_value : ''), (en_value ? item.en_value : '')].filter(Boolean).join('-');
+                    return {
+                        ...item,
+                        label,
+                        value: valueField.value ? item[valueField.value] : (item.value || item.id)
+                    }
+                });
+            }
+        } else {
+            options.value = res.data.map(item => ({
+                ...item,
+                label: labelField.value ? item[labelField.value] : (item.label || item.name),
+                value: valueField.value ? item[valueField.value] : (item.value || item.id)
+            }));
+        }
     } catch (error) {
         console.error('远程搜索失败:', error);
         options.value = [];
@@ -202,6 +224,10 @@ const handleChange = (value, context) => {
     }
 };
 
+watch(distConfig, () => {
+    handleRemoteSearch('');
+}, { deep: true });
+
 // 组件挂载时，如果有默认值则加载对应的选项
 onMounted(async () => {
     if (apiConfig.value.apiId && apiConfig.value.apiType >= 0) {
@@ -216,11 +242,26 @@ onMounted(async () => {
                 apiType: 'MULTIPLE_DATA_SEARCH'
             });
 
-            options.value = res.data.map(item => ({
-                ...item,
-                label: labelField.value ? item[labelField.value] : (item.label || item.name),
-                value: valueField.value ? item[valueField.value] : (item.value || item.id)
-            }));
+            if (distConfig.value.length > 0 && props.queryParams?.code) {
+                const currentDistConfig = distConfig.value.find(item => item.dist_code === props.queryParams.code)?.content;
+                if (currentDistConfig) {
+                    const { value, cn_value, en_value } = currentDistConfig;
+                    options.value = res.data.map(item => {
+                        const label = [(value ? item.value : ''), (cn_value ? item.cn_value : ''), (en_value ? item.en_value : '')].filter(Boolean).join('-');
+                        return {
+                            ...item,
+                            label,
+                            value: valueField.value ? item[valueField.value] : (item.value || item.id)
+                        }
+                    });
+                }
+            } else {
+                options.value = res.data.map(item => ({
+                    ...item,
+                    label: labelField.value ? item[labelField.value] : (item.label || item.name),
+                    value: valueField.value ? item[valueField.value] : (item.value || item.id)
+                }));
+            }
         } catch (error) {
             console.error('加载默认选项失败:', error);
         } finally {

package/src/components/EbizRichTextEditor.vue

@@ -3,6 +3,8 @@
     <tiny-fluent-editor
       v-model="editorContent"
       :disabled="disabled"
+      :data-type="false"
+      :data-upgrade="false",
       :placeholder="placeholder"
       :height="height"
       :menu-bar="toolbar !== false"

package/src/components/EbizTdesignLoading.vue

@@ -0,0 +1,108 @@
+<template>
+    <t-loading :delay="delay" :duration="duration" :indicator="indicator" :inherit-color="inheritColor" :layout="layout"
+        :loading="loading" :loading-props="loadingProps" :pause="pause" :reverse="reverse" :show-overlay="showOverlay"
+        :size="size" :text="text" :theme="theme">
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 文本内容插槽 -->
+        <template v-if="$slots.text" #text>
+            <slot name="text"></slot>
+        </template>
+
+        <!-- 加载指示器插槽 -->
+        <template v-if="$slots.indicator" #indicator>
+            <slot name="indicator"></slot>
+        </template>
+
+        <!-- 加载内容插槽 -->
+        <template v-if="$slots.content" #content>
+            <slot name="content"></slot>
+        </template>
+    </t-loading>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignLoading"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { Loading as TLoading } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+    delay: {
+        type: Number,
+        default: 0
+    },
+    // 加载动画执行完成一次的时间，单位：毫秒
+    duration: {
+        type: Number,
+        default: 800
+    },
+    // 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+    indicator: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 是否继承父元素颜色
+    inheritColor: {
+        type: Boolean,
+        default: false
+    },
+    // 对齐方式
+    layout: {
+        type: String,
+        default: 'horizontal',
+        validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    // 是否处于加载状态
+    loading: {
+        type: Boolean,
+        default: true
+    },
+    // 透传加载组件全部属性
+    loadingProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否暂停动画
+    pause: {
+        type: Boolean,
+        default: false
+    },
+    // 加载动画是否反向
+    reverse: {
+        type: Boolean,
+        default: false
+    },
+    // 是否需要遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 尺寸，示例：small/medium/large/12px/56px
+    size: {
+        type: String,
+        default: 'medium'
+    },
+    // 加载提示文案
+    text: {
+        type: String,
+        default: ''
+    },
+    // 加载组件类型
+    theme: {
+        type: String,
+        default: 'circular',
+        validator: (val) => ['circular', 'spinner', 'dots', 'bar'].includes(val)
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>

package/src/components/EbizTreeMergeTable.vue

@@ -161,7 +161,7 @@
             <div class="org-selected-container">
               <div v-if="tempGlobalSelectedOrgs.length === 0" class="no-selected-tip">请从左侧选择组织</div>
               <div v-else class="selected-orgs-tags">
-                <t-tag v-for="org in tempGlobalSelectedOrgs" :key="org.id" closable @close="removeGlobalOrg(org.id)"
+                <t-tag v-for="org in tempGlobalSelectedOrgs" :key="org.id" closable @close="removeGlobalSelectedOrg(org.id)"
                   theme="primary" variant="light" class="org-tag">
                   {{ org.name }}
                 </t-tag>
@@ -310,7 +310,8 @@ import {
   Input as TInput,
   Tree as TTree,
   Tag as TTag,
-  Icon as TIcon
+  Icon as TIcon,
+  Message
 } from 'tdesign-vue-next'
 
 const apis = {
@@ -372,10 +373,12 @@ function getRoleConfig() {
         if (matchedFunction) {
           // 设置功能勾选状态为true
           matchedFunction.checked = true;
-
+          
           // 保存数据权限配置（如果有）
           if (item.dataScope) {
             row.dataPermission = item.dataScope;
+            // 标记为自定义配置
+            row.hasCustomConfig = true;
             // 如果是自定义数据权限，则设置已选组织
             if (item.dataScope === 6 && item.deptIds && item.deptIds.length > 0) {
               row.selectedOrgs = item.deptIds.map(id => {
@@ -387,7 +390,7 @@ function getRoleConfig() {
               });
             }
           }
-
+          
           // 更新父级勾选状态（模块、子模块）
           updateParentCheckStatus(row);
         }
@@ -761,16 +764,17 @@ const handleOrgNodeExpand = (value) => {
 // 打开数据权限配置弹窗
 const openPermissionDialog = (row) => {
   currentRow.value = row
-  // 只做展示，不写入行权限
-  if (row.dataPermission) {
-    selectedPermission.value = row.dataPermission
+  // 检查是否已有自定义配置
+  if (row.hasCustomConfig) {
+    // 已有自定义配置，使用自身配置
+    selectedPermission.value = row.dataPermission || 1
     if (row.dataPermission === 6 && row.selectedOrgs) {
       selectedOrgs.value = [...row.selectedOrgs]
     } else {
       selectedOrgs.value = []
     }
   } else {
-    // 没有配置则展示全局，但不写入行
+    // 没有自定义配置，继承全局配置
     selectedPermission.value = globalPermission.value
     if (globalPermission.value === 6) {
       selectedOrgs.value = [...globalSelectedOrgs.value]
@@ -818,15 +822,19 @@ const handleGlobalOrgNodeSelect = (node, checked) => {
     }
   } else {
     // 从已选中中移除
-    removeGlobalOrg(node.id)
+    removeGlobalSelectedOrg(node.id)
   }
 }
 
 // 移除选中的全局组织（对话框中使用）
 const removeGlobalSelectedOrg = (id) => {
-  const index = tempGlobalSelectedOrgs.value.findIndex((org) => org.id === id)
+  console.log('移除临时全局组织', id);
+  const index = tempGlobalSelectedOrgs.value.findIndex((org) => org.id === id);
   if (index !== -1) {
-    tempGlobalSelectedOrgs.value.splice(index, 1)
+    tempGlobalSelectedOrgs.value.splice(index, 1);
+    console.log('移除成功，剩余组织数量:', tempGlobalSelectedOrgs.value.length);
+  } else {
+    console.log('未找到对应组织');
   }
 }
 
@@ -864,7 +872,7 @@ const handleGlobalOrgConfirm = () => {
   // 保存选择结果
   globalSelectedOrgs.value = [...tempGlobalSelectedOrgs.value]
 
-  // 应用到所有选择了自定义数据的行
+  // 应用到未配置自定义数据权限的行
   applyGlobalOrgsToCustomRows()
 
   globalOrgDialogVisible.value = false
@@ -875,11 +883,21 @@ const handleGlobalOrgCancel = () => {
   globalOrgDialogVisible.value = false
 }
 
-// 将全局组织应用到所有自定义数据权限的行
+// 将全局组织应用到未配置自定义数据权限的行
 const applyGlobalOrgsToCustomRows = () => {
+  // 遍历每一行数据
   data.value.forEach((row) => {
-    if (row.dataPermission === 6) {
-      row.selectedOrgs = [...globalSelectedOrgs.value]
+    // 只对没有自定义配置的行应用全局设置
+    if (!row.hasCustomConfig) {
+      // 应用全局权限设置
+      row.dataPermission = globalPermission.value
+      
+      // 如果全局设置是自定义数据权限，则应用全局选择的组织
+      if (globalPermission.value === 6) {
+        row.selectedOrgs = [...globalSelectedOrgs.value]
+      } else {
+        row.selectedOrgs = []
+      }
     }
   })
 }
@@ -887,6 +905,8 @@ const applyGlobalOrgsToCustomRows = () => {
 // 确认权限配置（修改处理全局配置的情况）
 const handlePermissionConfirm = () => {
   if (currentRow.value) {
+    // 标记该行已有自定义配置
+    currentRow.value.hasCustomConfig = true;
     currentRow.value.dataPermission = selectedPermission.value
     if (selectedPermission.value === 6) {
       currentRow.value.selectedOrgs = [...selectedOrgs.value]
@@ -899,6 +919,7 @@ const handlePermissionConfirm = () => {
 
 // 取消权限配置（修改处理全局配置的情况）
 const handlePermissionCancel = () => {
+  // 只关闭弹窗，不做其他操作
   permissionDialogVisible.value = false
 }
 

package/src/components/Form.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
-        <slot name="content"></slot>
+        <slot></slot>
+        <slot v-if="$slots.content" name="content"></slot>
     </div>
 </template>
 

package/src/index.js

@@ -60,6 +60,8 @@ import EbizTimePicker from './components/EbizTimePicker.vue';
 import EbizGridEditorSelect from './components/EbizGridEditorSelect.vue';
 import EbizPopconfirm from './components/EbizPopconfirm.vue';
 import EbizTreeMergeTable from './components/EbizTreeMergeTable.vue';
+import EbizTdesignLoading from './components/EbizTdesignLoading.vue';
+import EbizAutoForm from './components/EbizAutoForm.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
@@ -185,8 +187,11 @@ export {
   EbizPopconfirm,
   // 树形合并表格组件
   EbizTreeMergeTable,
+  // 自动表单组件
+  EbizAutoForm,
   // 新增 EbizDescriptions 和 EbizDescriptionsItem
   EbizDescriptions,
   EbizDescriptionsItem,
-  TDescriptionsItem
+  TDescriptionsItem,
+  EbizTdesignLoading
 };

package/src/views/EbizAutoFormDemo.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="demo-container">
+    <h1>EbizAutoForm 自动表单组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>基本使用</h2>
+      <ebiz-auto-form
+        :api-config="apiConfig"
+        :initial-data="initialData"
+        @submit="handleSubmit"
+        @reset="handleReset"
+      />
+    </div>
+    
+    <div class="demo-section">
+      <h2>表单提交结果</h2>
+      <pre v-if="submittedData">{{ JSON.stringify(submittedData, null, 2) }}</pre>
+      <p v-else>尚未提交表单</p>
+    </div>
+    
+    <div class="demo-section">
+      <h2>自定义配置</h2>
+      <ebiz-auto-form
+        :api-config="customApiConfig"
+        :initial-data="customInitialData"
+        label-width="150px"
+        label-align="left"
+        :show-reset-button="false"
+        submit-button-text="保存信息"
+        @submit="handleCustomSubmit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizAutoFormDemo"
+}
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizAutoForm } from '../index.js';
+
+// 基本配置示例
+const apiConfig = ref({
+  apiId: 'getUserForm',
+  apiType: 'DETAILS_DATA',
+  key: 'user'
+});
+
+// 初始数据
+const initialData = ref({
+  name: '张三',
+  email: 'zhangsan@example.com',
+  gender: 'male'
+});
+
+// 自定义配置示例
+const customApiConfig = ref({
+  apiId: 'getProductForm',
+  apiType: 'DETAILS_DATA',
+  key: 'product'
+});
+
+// 自定义初始数据
+const customInitialData = ref({
+  productName: '智能手机',
+  price: 2999,
+  status: true
+});
+
+// 提交结果
+const submittedData = ref(null);
+
+// 处理提交
+const handleSubmit = (data) => {
+  console.log('表单提交数据:', data);
+  submittedData.value = data;
+  alert('表单提交成功！');
+};
+
+// 处理重置
+const handleReset = () => {
+  console.log('表单已重置');
+  submittedData.value = null;
+};
+
+// 处理自定义表单提交
+const handleCustomSubmit = (data) => {
+  console.log('自定义表单提交数据:', data);
+  alert('自定义表单提交成功！');
+};
+</script>
+
+<style lang="less" scoped>
+.demo-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 24px;
+    font-size: 24px;
+    color: #0052d9;
+  }
+  
+  .demo-section {
+    margin-bottom: 40px;
+    padding: 20px;
+    border: 1px solid #e7e7e7;
+    border-radius: 6px;
+    
+    h2 {
+      margin-bottom: 16px;
+      font-size: 18px;
+      color: #333;
+    }
+    
+    pre {
+      padding: 12px;
+      background-color: #f5f7fa;
+      border-radius: 4px;
+      font-family: monospace;
+      overflow: auto;
+    }
+  }
+}
+</style> 

package/src/views/Home.vue

@@ -78,7 +78,8 @@ export default {
       { path: '/time-picker', title: 'Ebiz时间选择器组件示例' },
       { path: '/tdesign-descriptions', title: 'Ebiz描述列表组件示例' },
       { path: '/popconfirm', title: 'Ebiz气泡确认框组件示例' },
-      { path: '/tree-merge-table-demo', title: '树形合并表格组件示例' }
+      { path: '/tree-merge-table-demo', title: '树形合并表格组件示例' },
+      { path: '/auto-form-demo', title: 'Ebiz自动表单组件示例' }
     ]
 
     return {