matrix_components 2.0.316 → 2.0.317

package/dist/ComponentDemo/ExcelDemo.vue

@@ -1,263 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="control-panel">
-      <h3>Excel 预览演示</h3>
-
-      <!-- 文件上传方式 -->
-      <div class="upload-section">
-        <h4>方式一：文件上传</h4>
-        <el-form-item label="弹框模式:">
-          <el-switch v-model="isShowDialog" @change="hideExcelHandler" />
-        </el-form-item>
-        <input
-          type="file"
-          @change="importExcel(($event.target as any)?.files?.[0])"
-          accept=".xls,.xlsx"
-        />
-        <button @click="clearFile" :disabled="!file">清除文件</button>
-      </div>
-
-      <!-- URL方式 -->
-      <div class="url-section">
-        <h4>方式二：URL地址</h4>
-        <input
-          v-model="excelUrl"
-          type="text"
-          placeholder="请输入Excel文件的URL地址"
-          class="url-input"
-        />
-        <button @click="loadFromUrl" :disabled="!excelUrl.trim()">加载URL</button>
-        <button @click="clearUrl" :disabled="!excelUrl">清除URL</button>
-      </div>
-      <button @click="exportExcel" class="export-btn">导出数据</button>
-    </div>
-
-    <!-- Excel组件 -->
-    <div class="excel-container">
-      <NsExcel
-        v-if="counts"
-        class="excel"
-        :file="file"
-        :isShowDialog="isShowDialog"
-        dialogWidth="1200px"
-        dialogHeight="700px"
-        ref="excelRef"
-        exportType="2"
-        @dialogExport="dialogExport"
-      ></NsExcel>
-    </div>
-    <!-- 导出数据展示 -->
-    <div class="data-display">
-      <div class="data-section">
-        <h4>导出数据格式1 (原始格式)</h4>
-        <pre>{{ data1 }}</pre>
-      </div>
-      <div class="data-section">
-        <h4>导出数据格式2 (Excel格式)</h4>
-        <pre>{{ data2 }}</pre>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
-
-const counts = ref(true)
-const isShowDialog = ref(false)
-const file = ref()
-const excelRef = ref()
-const data1 = ref()
-const data2 = ref()
-const excelUrl = ref(
-  'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx',
-)
-
-function hideExcelHandler(val: boolean) {
-  counts.value = false
-  nextTick(() => {
-    counts.value = true
-    isShowDialog.value = val
-  })
-}
-
-function importExcel(f: any) {
-  // 清除URL，使用文件上传
-  excelUrl.value = ''
-  file.value = f
-}
-
-function loadFromUrl() {
-  if (excelUrl.value.trim()) {
-    // 清除文件，使用URL
-    file.value = excelUrl.value.trim()
-  }
-}
-
-function clearFile() {
-  file.value = null
-  data1.value = null
-  data2.value = null
-}
-
-function clearUrl() {
-  excelUrl.value = ''
-  data1.value = null
-  data2.value = null
-}
-
-function dialogExport(data: any) {
-  console.warn(`excel导出数据：${data}`)
-}
-
-function exportExcel() {
-  if (excelRef.value) {
-    data1.value = excelRef.value.exportExcel(1)
-    data2.value = excelRef.value.exportExcel(2)
-  }
-}
-</script>
-<style scoped lang="scss">
-.demo-container {
-  padding: 20px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.control-panel {
-  background: #f5f5f5;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-
-  h3 {
-    margin: 0 0 20px 0;
-    color: #333;
-  }
-
-  h4 {
-    margin: 15px 0 10px 0;
-    color: #666;
-    font-size: 14px;
-  }
-}
-
-.upload-section,
-.url-section,
-.example-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-
-  input[type='file'] {
-    margin-right: 10px;
-  }
-
-  .url-input {
-    width: 300px;
-    padding: 8px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    margin-right: 10px;
-    font-size: 14px;
-
-    &:focus {
-      outline: none;
-      border-color: #409eff;
-    }
-  }
-
-  button {
-    padding: 8px 16px;
-    background: #409eff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-right: 10px;
-    font-size: 14px;
-
-    &:hover:not(:disabled) {
-      background: #337ecc;
-    }
-
-    &:disabled {
-      background: #c0c4cc;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.export-btn {
-  padding: 10px 20px;
-  background: #67c23a;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: bold;
-
-  &:hover {
-    background: #5daf34;
-  }
-}
-
-.excel {
-  width: 100%;
-  height: 500px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 20px;
-}
-
-.data-display {
-  display: flex;
-  gap: 20px;
-  margin-top: 20px;
-
-  .data-section {
-    flex: 1;
-    background: #f9f9f9;
-    border-radius: 8px;
-    padding: 15px;
-
-    h4 {
-      margin: 0 0 10px 0;
-      color: #333;
-      font-size: 14px;
-    }
-
-    pre {
-      background: white;
-      padding: 15px;
-      border-radius: 4px;
-      border: 1px solid #e0e0e0;
-      max-height: 300px;
-      overflow: auto;
-      font-size: 12px;
-      line-height: 1.4;
-      margin: 0;
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-  }
-}
-
-.excel-container {
-  height: 300px;
-}
-
-@media (max-width: 768px) {
-  .data-display {
-    flex-direction: column;
-  }
-
-  .url-input {
-    width: 100% !important;
-    margin-bottom: 10px;
-  }
-}
-</style>

package/dist/ComponentDemo/FormDemo.vue

@@ -1,400 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="control-panel">
-      <h3>动态表单组件演示</h3>
-
-      <!-- 配置文件选择 -->
-      <!-- <div class="config-section">
-        <h4>方式一：选择配置文件</h4>
-        <el-select
-          v-model="selectedConfig"
-          placeholder="请选择表单配置"
-          @change="loadConfig"
-          class="config-select"
-        >
-          <el-option
-            v-for="config in configOptions"
-            :key="config.value"
-            :label="config.label"
-            :value="config.value"
-          />
-        </el-select>
-        <el-button @click="reloadConfig" :disabled="!selectedConfig">重新加载</el-button>
-      </div> -->
-
-      <!-- 文件上传方式 -->
-      <div class="upload-section">
-        <h4>上传配置文件</h4>
-        <input
-          type="file"
-          @change="importConfig(($event.target as any)?.files?.[0])"
-          accept=".js,.json"
-        />
-        <el-button @click="clearFile" :disabled="!uploadedFile">清除文件</el-button>
-      </div>
-
-      <!-- 表单操作 -->
-      <div class="action-section">
-        <h4>表单操作</h4>
-        <el-button type="primary" @click="validateForm" :disabled="!formLoaded">验证表单</el-button>
-        <el-button @click="resetForm" :disabled="!formLoaded">重置表单</el-button>
-        <el-button type="info" @click="toggleFormData" :disabled="!formLoaded">
-          {{ showFormData ? '隐藏' : '显示' }}表单数据
-        </el-button>
-        <el-button type="success" @click="exportFormData" :disabled="!formLoaded">导出数据</el-button>
-      </div>
-    </div>
-
-    <!-- 表单容器 -->
-    <div class="form-container" v-if="formLoaded">
-      <NsForm
-        ref="formRef"
-        v-model="formData"
-        :form-items="formItems"
-        :rules="formRules"
-        :options-data="optionsData"
-        label-width="120px"
-        :gutter="20"
-        :clear-validate-on-init="true"
-        @validate="handleValidate"
-        @submit="handleSubmit"
-        @reset="handleReset"
-      >
-        <!-- 自定义插槽示例 -->
-        <template #customSlot="{ item, formData }">
-          <el-input
-            v-model="formData[item.prop]"
-            placeholder="这是自定义插槽内容"
-            prefix-icon="User"
-          />
-        </template>
-
-        <!-- 表单操作按钮 -->
-        <template #footer="{ validate, resetFields }">
-          <el-form-item>
-            <el-button type="primary" @click="validate">提交表单</el-button>
-            <el-button @click="resetFields">重置表单</el-button>
-          </el-form-item>
-        </template>
-      </NsForm>
-    </div>
-
-    <!-- 空状态 -->
-    <div class="empty-state" v-else>
-      <el-empty description="请选择或上传表单配置文件" />
-    </div>
-
-    <!-- 表单数据显示 -->
-    <el-card v-if="showFormData && formLoaded" class="data-card">
-      <template #header>
-        <div class="card-header">
-          <span>表单数据</span>
-          <el-button type="text" @click="copyFormData">复制数据</el-button>
-        </div>
-      </template>
-      <pre class="form-data-display">{{ JSON.stringify(formData, null, 2) }}</pre>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ElMessage } from 'element-plus'
-import { nextTick, reactive, ref } from 'vue'
-
-// 表单引用
-const formRef = ref()
-
-// 状态管理
-const formLoaded = ref(false)
-const showFormData = ref(false)
-const selectedConfig = ref('')
-const uploadedFile = ref()
-
-// 表单数据
-const formData: any = reactive({})
-const formItems: any = ref([])
-const formRules: any = ref({})
-const optionsData: any = reactive({})
-
-// 加载配置文件
-async function loadConfig() {
-  if (!selectedConfig.value) return
-
-  try {
-    // 动态导入配置文件
-    const configModule = (await import(`@/views/ExampleFormConfig.js`)) as { formConfig: any; default: any }
-    const config = configModule.formConfig || configModule.default
-
-    if (config) {
-      initializeForm(config)
-      ElMessage.success('配置加载成功')
-    } else {
-      ElMessage.error('配置文件格式错误')
-    }
-  } catch (error) {
-    console.error('加载配置失败:', error)
-    ElMessage.error('配置文件加载失败')
-  }
-}
-
-// 导入配置文件
-function importConfig(file: File) {
-  if (!file) return
-
-  uploadedFile.value = file
-  const reader = new FileReader()
-
-  reader.onload = (e) => {
-    try {
-      const content = e.target?.result as string
-      let config
-
-      if (file.name.endsWith('.json')) {
-        config = JSON.parse(content)
-      } else if (file.name.endsWith('.js')) {
-        // 简单的JS文件解析（实际项目中可能需要更复杂的处理）
-        const configMatch = content.match(/export\s+(?:const|default)\s+\w*\s*=\s*({[\s\S]*});?/)
-        if (configMatch) {
-          config = eval(`(${configMatch[1]})`)
-        }
-      }
-
-      if (config) {
-        initializeForm(config)
-        selectedConfig.value = '' // 清除下拉选择
-        ElMessage.success('配置文件导入成功')
-      } else {
-        ElMessage.error('配置文件格式错误')
-      }
-    } catch (error) {
-      console.error('解析配置文件失败:', error)
-      ElMessage.error('配置文件解析失败')
-    }
-  }
-
-  reader.readAsText(file)
-}
-
-// 清除上传的文件
-function clearFile() {
-  uploadedFile.value = null
-  formLoaded.value = false
-  showFormData.value = false
-
-  // 清空表单数据
-  Object.keys(formData).forEach(key => {
-    delete formData[key]
-  })
-  formItems.value = []
-  formRules.value = {}
-  Object.keys(optionsData).forEach(key => {
-    delete optionsData[key]
-  })
-}
-
-// 初始化表单
-function initializeForm(config: any) {
-  // 清空现有数据
-  Object.keys(formData).forEach(key => {
-    delete formData[key]
-  })
-  Object.keys(optionsData).forEach(key => {
-    delete optionsData[key]
-  })
-
-  // 设置新数据
-  if (config.formData) {
-    Object.assign(formData, config.formData)
-  }
-
-  if (config.formItems) {
-    formItems.value = config.formItems
-  }
-
-  if (config.formRules) {
-    formRules.value = config.formRules
-  }
-
-  if (config.optionsData) {
-    Object.assign(optionsData, config.optionsData)
-  }
-
-  formLoaded.value = true
-
-  // 在下一帧清除表单验证状态
-  nextTick(() => {
-    if (formRef.value) {
-      formRef.value.clearValidate()
-    }
-  })
-}
-
-// 验证表单
-async function validateForm() {
-  if (!formRef.value) return
-
-  try {
-    const valid = await formRef.value.validate()
-    if (valid) {
-      ElMessage.success('表单验证通过')
-    }
-  } catch (error) {
-    ElMessage.error('表单验证失败')
-    console.error('表单验证失败:', error)
-  }
-}
-
-// 重置表单
-function resetForm() {
-  if (!formRef.value) return
-  formRef.value.resetFields()
-  ElMessage.info('表单已重置')
-}
-
-// 切换表单数据显示
-function toggleFormData() {
-  showFormData.value = !showFormData.value
-}
-
-// 导出表单数据
-function exportFormData() {
-  const dataStr = JSON.stringify(formData, null, 2)
-  const blob = new Blob([dataStr], { type: 'application/json' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = 'form-data.json'
-  a.click()
-  URL.revokeObjectURL(url)
-  ElMessage.success('数据导出成功')
-}
-
-// 复制表单数据
-async function copyFormData() {
-  try {
-    await navigator.clipboard.writeText(JSON.stringify(formData, null, 2))
-    ElMessage.success('数据已复制到剪贴板')
-  } catch (error) {
-    ElMessage.error('复制失败')
-    console.error('复制失败:', error)
-  }
-}
-
-// 表单事件处理
-function handleValidate(valid: boolean, data: any) {
-  console.log('表单验证结果:', valid, data)
-}
-
-function handleSubmit(data: any) {
-  console.log('表单提交:', data)
-  ElMessage.success('表单提交成功')
-}
-
-function handleReset(data: any) {
-  console.log('表单重置:', data)
-}
-
-// 初始化时加载默认配置
-nextTick(() => {
-  selectedConfig.value = 'ExampleFormConfig'
-  loadConfig()
-})
-</script>
-
-<style scoped lang="scss">
-.demo-container {
-  padding: 20px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.control-panel {
-  background: #f5f5f5;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-
-  h3 {
-    margin: 0 0 20px 0;
-    color: #333;
-  }
-
-  h4 {
-    margin: 15px 0 10px 0;
-    color: #666;
-    font-size: 14px;
-  }
-}
-
-.config-section,
-.upload-section,
-.action-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-
-  .config-select {
-    width: 300px;
-    margin-right: 10px;
-  }
-
-  input[type='file'] {
-    margin-right: 10px;
-  }
-
-  .el-button {
-    margin-right: 10px;
-    margin-bottom: 5px;
-  }
-}
-
-.form-container {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  margin-bottom: 20px;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  background: white;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-}
-
-.data-card {
-  margin-top: 20px;
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .form-data-display {
-    background-color: #f5f7fa;
-    padding: 15px;
-    border-radius: 4px;
-    font-size: 12px;
-    line-height: 1.5;
-    max-height: 400px;
-    overflow-y: auto;
-  }
-}
-
-@media (max-width: 768px) {
-  .config-select {
-    width: 100% !important;
-    margin-bottom: 10px;
-  }
-
-  .el-button {
-    width: 100%;
-    margin-bottom: 10px;
-  }
-}
-</style>