系统组件文档

本系统使用了多种 Vue 组件来实现不同的功能模块。

---

1. 基础框架组件

• Element-UI: 本系统主要的 UI 组件库，提供了丰富的基础 UI 组件如表单、按钮、布局等。

  • 官网地址: Element-UI (opens new window)
  • 使用示例:

    <template>
      <el-button type="primary">按钮</el-button>
    </template>
    

  • 重要 API:
    • el-button: 提供不同类型的按钮，支持 type 属性来设置按钮的样式如 primary、success 等。

• Vue-Element-Admin: 基于 Vue 和 Element-UI 的后台前端解决方案，为系统提供了基础框架结构和常用功能。

  • 官网地址: Vue-Element-Admin (opens new window)

---

2. 树形选择组件

• Vue-Treeselect: 用于实现树形结构的选择功能，支持多选、搜索、异步加载等功能。
  • 官网地址: Vue-Treeselect (opens new window)
  • 使用示例:

    <template>
      <treeselect :multiple="true" :options="options"></treeselect>
    </template>
    
    <script>
    export default {
      data() {
        return {
          options: [
            {
              id: 'a',
              label: 'A',
              children: [{ id: 'aa', label: 'AA' }]
            }
          ]
        };
      }
    };
    </script>
    

  • 重要 API:
    • options: 配置树结构数据的数组。
    • multiple: 是否支持多选，true 为多选，false 为单选。

---

3. 富文本编辑器

• Quill: 强大的富文本编辑器，用于实现复杂的文本编辑功能。
  • 官网地址: Quill (opens new window)
  • 使用示例:

    <template>
      <quill-editor v-model="content"></quill-editor>
    </template>
    
    <script>
    export default {
      data() {
        return {
          content: '<p>这里是富文本内容</p>'
        };
      }
    };
    </script>
    

  • 重要 API:
    • v-model: 双向绑定编辑器内容。
    • modules: 编辑器模块配置，如工具栏 toolbar。

---

4. 表格分页组件

• Pagination: 自定义分页组件，适用于表格数据的分页展示。
  • 使用示例:

    <template>
      <pagination :total="total" :page-size="10" @current-change="handlePageChange"></pagination>
    </template>
    
    <script>
    export default {
      data() {
        return {
          total: 100
        };
      },
      methods: {
        handlePageChange(page) {
          console.log('当前页:', page);
        }
      }
    };
    </script>
    

  • 重要 API:
    • total: 数据总条数。
    • page-size: 每页显示的数据条数。
    • @current-change: 页码改变时触发的事件。

---

5. 富文本组件

• Editor: 结合 Quill 的富文本组件，用于提供富文本编辑功能。
  • 使用示例: 同 Quill 使用示例。

---

6. 工具栏右侧组件

• Right-Toolbar: 工具栏右侧操作组件，一般用于表格操作，如刷新、导出等功能。
  • 使用示例:

    <template>
      <right-toolbar @handleRefresh="refresh"></right-toolbar>
    </template>
    
    <script>
    export default {
      methods: {
        refresh() {
          console.log('刷新数据');
        }
      }
    };
    </script>
    

  • 重要 API:
    • @handleRefresh: 触发刷新操作的事件。

---

7. 图片上传组件

• Image-Upload: 图片上传组件，支持多张图片上传和预览。
  • 使用示例:

    <template>
      <image-upload :action="uploadUrl" :limit="5"></image-upload>
    </template>
    
    <script>
    export default {
      data() {
        return {
          uploadUrl: '/api/upload'
        };
      }
    };
    </script>
    

  • 重要 API:
    • action: 上传接口地址。
    • limit: 上传图片数量限制。

---

8. 图片预览组件

• Image-Preview: 用于图片预览的组件，支持多图轮播查看。
  • 使用示例:

    <template>
      <image-preview :images="imageList"></image-preview>
    </template>
    
    <script>
    export default {
      data() {
        return {
          imageList: ['/path/to/image1.jpg', '/path/to/image2.jpg']
        };
      }
    };
    </script>
    

  • 重要 API:
    • images: 图片地址数组。

---

9. 文件上传组件

• File-Upload: 文件上传组件，支持多文件上传和格式限制。
  • 使用示例:

    <template>
      <file-upload :action="uploadUrl" :accept="'.pdf,.docx'"></file-upload>
    </template>
    
    <script>
    export default {
      data() {
        return {
          uploadUrl: '/api/upload/file'
        };
      }
    };
    </script>
    

  • 重要 API:
    • action: 上传接口地址。
    • accept: 接受的文件类型。

---

10. 表单设计组件

• Form-Generator: 表单设计器，用于动态生成表单布局和内容。
  • 使用示例:

    <template>
      <form-generator :form-data="formData"></form-generator>
    </template>
    
    <script>
    export default {
      data() {
        return {
          formData: {} // 表单数据结构
        };
      }
    };
    </script>
    

  • 重要 API:
    • form-data: 表单结构数据，用于动态生成表单。

---

11. 数据字典组件

• Vue-Data-Dict: 数据字典组件，用于统一管理和使用数据字典。
  • 使用示例:

    <template>
      <dict-select :dictType="'sys_user_sex'" v-model="sex"></dict-select>
    </template>
    
    <script>
    export default {
      data() {
        return {
          sex: ''
        };
      }
    };
    </script>
    

  • 重要 API:
    • dictType: 字典类型标识，用于加载对应的字典数据。

---

12. 任务表达式组件

• Vue-Crontab: 用于配置和展示任务调度表达式的组件。
  • 使用示例:

    <template>
      <vue-crontab v-model="cronExpression"></vue-crontab>
    </template>
    
    <script>
    export default {
      data() {
        return {
          cronExpression: ''
        };
      }
    };
    </script>
    

  • 重要 API:
    • v-model: 双向绑定调度表达式。