@ebiz/designer-components 0.1.89 → 0.1.90

package/src/views/EbizApprovalFormDemo.vue

@@ -1,208 +1,208 @@
-<template>
-  <div class="demo-container">
-    <h2>审批表单组件演示</h2>
-    
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <div class="demo-content">
-        <EbizApprovalForm
-          :loading="loading"
-          :taskId="taskId"
-          :businessKey="businessKey"
-          :processInstanceId="processInstanceId"
-          :taskDefinitionKey="taskDefinitionKey"
-          :approvalDetail="approvalDetail"
-          :utils="utils"
-          @pass="handlePass"
-          @reject="handleReject"
-          @refresh="handleRefresh"
-        />
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>配置说明</h3>
-      <div class="config-info">
-        <p><strong>Props:</strong></p>
-        <ul>
-          <li><code>loading</code>: 控制组件加载状态</li>
-          <li><code>taskId</code>: 当前审批任务的ID</li>
-          <li><code>businessKey</code>: 业务键</li>
-          <li><code>processInstanceId</code>: 流程实例ID</li>
-          <li><code>taskDefinitionKey</code>: 任务定义键</li>
-          <li><code>approvalDetail</code>: 审批详情对象</li>
-          <li><code>utils</code>: 工具对象</li>
-        </ul>
-        
-        <p><strong>Events:</strong></p>
-        <ul>
-          <li><code>@pass</code>: 审批通过事件</li>
-          <li><code>@reject</code>: 审批拒绝事件</li>
-          <li><code>@refresh</code>: 刷新事件</li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>操作日志</h3>
-      <div class="log-container">
-        <div v-for="(log, index) in logs" :key="index" class="log-item">
-          {{ log }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { EbizApprovalForm } from '../index.js'
-
-// 基础数据
-const loading = ref(false)
-const taskId = ref('task_001')
-const businessKey = ref('business_001')
-const processInstanceId = ref('process_001')
-const taskDefinitionKey = ref('approver')
-
-// 审批详情模拟数据
-const approvalDetail = ref({
-  variables: {
-    form: {
-      id: '123',
-      receiver: '456',
-      title: '测试审批申请',
-      content: '这是一个测试审批申请的内容'
-    }
-  },
-  task: {
-    id: 'task_001',
-    name: '审批任务'
-  }
-})
-
-// 工具对象
-const utils = ref({
-  formatDate: (date) => {
-    return new Date(date).toLocaleDateString()
-  },
-  formatUser: (user) => {
-    return user?.name || '未知用户'
-  }
-})
-
-// 操作日志
-const logs = ref([])
-
-// 添加日志
-const addLog = (message) => {
-  const timestamp = new Date().toLocaleTimeString()
-  logs.value.unshift(`[${timestamp}] ${message}`)
-  if (logs.value.length > 10) {
-    logs.value.pop()
-  }
-}
-
-// 事件处理
-const handlePass = (params) => {
-  addLog(`审批通过 - 任务ID: ${params.taskId}, 意见: ${params.comment}`)
-  
-  // 模拟API调用
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-    addLog('审批通过操作完成')
-  }, 1000)
-}
-
-const handleReject = (reason) => {
-  addLog(`审批拒绝 - 原因: ${reason}`)
-  
-  // 模拟API调用
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-    addLog('审批拒绝操作完成')
-  }, 1000)
-}
-
-const handleRefresh = () => {
-  addLog('刷新事件触发')
-  
-  // 模拟刷新操作
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-    addLog('刷新完成')
-  }, 500)
-}
-
-// 初始化日志
-addLog('组件已加载')
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-  border: 1px solid #e7e7e7;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.demo-section h3 {
-  background: #f5f7fa;
-  margin: 0;
-  padding: 15px 20px;
-  border-bottom: 1px solid #e7e7e7;
-}
-
-.demo-content {
-  padding: 20px;
-}
-
-.config-info {
-  padding: 20px;
-  background: #fafbfc;
-}
-
-.config-info ul {
-  margin: 10px 0;
-  padding-left: 20px;
-}
-
-.config-info li {
-  margin: 5px 0;
-}
-
-.config-info code {
-  background: #f1f1f1;
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-family: Monaco, Consolas, 'Lucida Console', monospace;
-}
-
-.log-container {
-  padding: 20px;
-  background: #f8f9fa;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.log-item {
-  padding: 5px 0;
-  border-bottom: 1px solid #e9ecef;
-  font-family: Monaco, Consolas, 'Lucida Console', monospace;
-  font-size: 12px;
-  color: #666;
-}
-
-.log-item:last-child {
-  border-bottom: none;
-}
+<template>
+  <div class="demo-container">
+    <h2>审批表单组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <div class="demo-content">
+        <EbizApprovalForm
+          :loading="loading"
+          :taskId="taskId"
+          :businessKey="businessKey"
+          :processInstanceId="processInstanceId"
+          :taskDefinitionKey="taskDefinitionKey"
+          :approvalDetail="approvalDetail"
+          :utils="utils"
+          @pass="handlePass"
+          @reject="handleReject"
+          @refresh="handleRefresh"
+        />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>配置说明</h3>
+      <div class="config-info">
+        <p><strong>Props:</strong></p>
+        <ul>
+          <li><code>loading</code>: 控制组件加载状态</li>
+          <li><code>taskId</code>: 当前审批任务的ID</li>
+          <li><code>businessKey</code>: 业务键</li>
+          <li><code>processInstanceId</code>: 流程实例ID</li>
+          <li><code>taskDefinitionKey</code>: 任务定义键</li>
+          <li><code>approvalDetail</code>: 审批详情对象</li>
+          <li><code>utils</code>: 工具对象</li>
+        </ul>
+        
+        <p><strong>Events:</strong></p>
+        <ul>
+          <li><code>@pass</code>: 审批通过事件</li>
+          <li><code>@reject</code>: 审批拒绝事件</li>
+          <li><code>@refresh</code>: 刷新事件</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>操作日志</h3>
+      <div class="log-container">
+        <div v-for="(log, index) in logs" :key="index" class="log-item">
+          {{ log }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { EbizApprovalForm } from '../index.js'
+
+// 基础数据
+const loading = ref(false)
+const taskId = ref('task_001')
+const businessKey = ref('business_001')
+const processInstanceId = ref('process_001')
+const taskDefinitionKey = ref('approver')
+
+// 审批详情模拟数据
+const approvalDetail = ref({
+  variables: {
+    form: {
+      id: '123',
+      receiver: '456',
+      title: '测试审批申请',
+      content: '这是一个测试审批申请的内容'
+    }
+  },
+  task: {
+    id: 'task_001',
+    name: '审批任务'
+  }
+})
+
+// 工具对象
+const utils = ref({
+  formatDate: (date) => {
+    return new Date(date).toLocaleDateString()
+  },
+  formatUser: (user) => {
+    return user?.name || '未知用户'
+  }
+})
+
+// 操作日志
+const logs = ref([])
+
+// 添加日志
+const addLog = (message) => {
+  const timestamp = new Date().toLocaleTimeString()
+  logs.value.unshift(`[${timestamp}] ${message}`)
+  if (logs.value.length > 10) {
+    logs.value.pop()
+  }
+}
+
+// 事件处理
+const handlePass = (params) => {
+  addLog(`审批通过 - 任务ID: ${params.taskId}, 意见: ${params.comment}`)
+  
+  // 模拟API调用
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    addLog('审批通过操作完成')
+  }, 1000)
+}
+
+const handleReject = (reason) => {
+  addLog(`审批拒绝 - 原因: ${reason}`)
+  
+  // 模拟API调用
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    addLog('审批拒绝操作完成')
+  }, 1000)
+}
+
+const handleRefresh = () => {
+  addLog('刷新事件触发')
+  
+  // 模拟刷新操作
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    addLog('刷新完成')
+  }, 500)
+}
+
+// 初始化日志
+addLog('组件已加载')
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  border: 1px solid #e7e7e7;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.demo-section h3 {
+  background: #f5f7fa;
+  margin: 0;
+  padding: 15px 20px;
+  border-bottom: 1px solid #e7e7e7;
+}
+
+.demo-content {
+  padding: 20px;
+}
+
+.config-info {
+  padding: 20px;
+  background: #fafbfc;
+}
+
+.config-info ul {
+  margin: 10px 0;
+  padding-left: 20px;
+}
+
+.config-info li {
+  margin: 5px 0;
+}
+
+.config-info code {
+  background: #f1f1f1;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: Monaco, Consolas, 'Lucida Console', monospace;
+}
+
+.log-container {
+  padding: 20px;
+  background: #f8f9fa;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.log-item {
+  padding: 5px 0;
+  border-bottom: 1px solid #e9ecef;
+  font-family: Monaco, Consolas, 'Lucida Console', monospace;
+  font-size: 12px;
+  color: #666;
+}
+
+.log-item:last-child {
+  border-bottom: none;
+}
 </style> 

package/src/views/EbizAutoFormDemo.vue

@@ -1,130 +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;
-    }
-  }
-}
+<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>