DOCSEARCHbyAlgolia
Submit Docs

Yudao UI Admin Vue3

repository·master·Indexed 26 days ago

https://github.com/yudaocode/yudao-ui-admin-vue3

A modern admin dashboard for the Yudao rapid development platform, built with Vue 3, Vite 4, Element Plus, and TypeScript. It supports both Spring Boot monolith and Spring Cloud microservice architectures. Key features include a Flowable-based BPM workflow engine, payment system integration, multi-tenant management, and a comprehensive suite of administrative modules for system monitoring, user access control, and developer tools.

Tokens
133.1K
Snippets
473
Records
1.2K
Agent score
86%

What's inside yudao-ui-admin-vue3

  1. Overview of Yudao UI Admin Vue3 System Modules

    master

    The Yudao UI Admin Vue3 platform provides a comprehensive suite of administrative modules categorized into several functional areas:

    System Management

    • User & Security: Login, User Management, Token Management, Application Management, and Role/Menu management.
    • Organization: Tenant Management, Tenant Packages, Department Management, and Post Management.
    • Audit & Logs: Operation Logs, Login Logs, API Access Logs, and Error Logs.
    • Communication & Content: SMS Channel/Template/Log management, Dictionary management, Sensitive Word filtering, Error Code management, and System Announcements.

    Workflow & OA

    • Workflow Engine: Process Model design, Form & Group configuration, and 'My Process' tracking.
    • Task Management: To-do and Done task lists for approvals.
    • OA Features: Leave request management (List, Initiation, and Details).

    Infrastructure & Developer Tools

    • Development: Code Generation tools and automated Documentation (System Interfaces and Database Docs).
    • System Config: File Management, Configuration Management, and Scheduled Task (Cron) management.
    • Monitoring: Java monitoring, Distributed Tracing, and a centralized Log Center.
    • Storage: Integrated management for MySQL and Redis.

    Payment & Data

    • Payment System: Merchant and Application management, Payment Order tracking, and Refund processing.
    • Data Reporting: A Report Designer for data and graphic reports (including print design) and a Big Screen (Dashboard) Designer for visual data previews and editing.

  2. Overview of Built-in System Features

    master

    The system provides a layered set of business functions categorized into three tiers:

    1. Mandatory Common Modules: System Functions and Infrastructure.
    2. Optional Common Modules: Workflow (BPM), Payment System, Data Reporting, and Member Center.
    3. On-demand Business Systems: Mall (E-commerce), OA (Office Automation), ERP (Enterprise Resource Planning), WMS (Warehouse Management), CRM (Customer Relationship Management), CMS (Content Management), MES (Manufacturing Execution), AI Large Model Platform, IoT (Internet of Things), IM (Instant Messaging), Mobile, and Report Data Screens.

  4. Recommended VS Code Extensions for Development

    master

    To optimize your development experience, it is recommended to use VS Code with the following extensions:

    • Vue - Official: Vue and TypeScript support
    • unocss: UnoCSS support for VS Code
    • Iconify IntelliSense: Iconify preview and search
    • i18n Ally: Internationalization intelligence
    • Stylelint: CSS formatting
    • Prettier: Code formatting
    • ESLint: Script linting
    • DotENV: .env file syntax highlighting

  5. Configure Workflow (BPM) using Flowable

    master

    The workflow engine is built on Flowable and provides two types of designers to balance ease of use and complexity:

    • Simple Designer (DingTalk/Feishu style): A drag-and-drop interface for lightweight configuration, allowing users to set up approval processes in approximately 10 minutes.
    • BPMN Designer: A standard BPMN-based designer for complex business scenarios and deep orchestration.

    Key Workflow Capabilities:

    • Approval Logic: Supports Consensus (all must agree), Or-sign (any one can approve), Sequential Approval (A then B then C), and Rejection/Return to previous nodes.
    • Task Management: Supports Transfer (A to B), Delegation (A to B, then back to A), and Adding/Removing approvers (Add-sign/Reduce-sign).
    • Advanced Routing: Includes Conditional Branches (Exclusive), Parallel Branches, Inclusive Branches, and Route Branches.
    • Automation: Trigger nodes (HTTP requests/callbacks, data updates/deletions), Delay nodes, and Parent-Child sub-processes.
    • Control: Supports Timeout Approvals, Automatic Reminders (SMS/Email/Station Message), and Process Termination/Cancellation.

  7. Configure CRM Contract Settings

    master

    The CrmContractConfig component provides a user interface for managing CRM contract configurations, specifically regarding contract reminders.

    Key features:

    • Enable/Disable Reminders: Toggle whether contract notifications are active using notifyEnabled.
    • Reminder Lead Time: If reminders are enabled, specify how many days in advance the notification should trigger using notifyDays.

    Permissions required for saving changes: crm:contract-config:update.

  8. App Root Component Configuration

    master

    The App.vue component serves as the root entry point for the application. It manages global application state such as theme (dark/light mode), layout sizing, and the 'grey mode' (grayscale filter).

    Key behaviors:

    • Theme Initialization: Automatically detects and sets the system theme (dark or light) based on browser settings or cached preference using isDark() and CACHE_KEY.IS_DARK.
    • Grey Mode: When appStore.getGreyMode is true, a CSS class ${prefixCls}-grey-mode is applied to the RouterView, applying a 100% grayscale filter to the application content.
    • Global Configuration: Wraps the application in a ConfigGlobal component to propagate the current UI size (appStore.getCurrentSize).

  9. Manage IoT Alert Configurations

    master

    The IotAlertConfig view provides a management interface for IoT alert configurations. It allows users to search, view, create, update, and delete alert configurations through a paginated table.

    Key Features

    • Search/Filter: Filter by configuration name, status (using DICT_TYPE.COMMON_STATUS), and creation time range.
    • List View: Displays configuration ID, name, description, alert level (DICT_TYPE.IOT_ALERT_LEVEL), status, associated scene rule count, receivers, and receive types (DICT_TYPE.IOT_ALERT_RECEIVE_TYPE).
    • CRUD Operations:
      • Create: Opens a form via openForm('create').
      • Update: Opens a form via openForm('update', id).
      • Delete: Removes a configuration after a confirmation dialog.

    Data Model

    The list is populated using the AlertConfig type and fetched via AlertConfigApi.getAlertConfigPage.

  10. Manage CRM Customer and Lock Limits

    master

    The CrmCustomerLimitConfig view provides a centralized interface for configuring limits related to CRM customers. It is divided into two main tabs:

    1. 拥有客户数限制 (Customer Quantity Limit): Configures the maximum number of customers a user can own.
    2. 锁定客户数限制 (Customer Lock Limit): Configures the maximum number of customers a user can have locked.

    This view utilizes the CustomerLimitConfigList component and requires the LimitConfType enum from the CRM customer limit configuration API.

    <template>
  <el-tabs>
    <el-tab-pane label="拥有客户数限制">
      <CustomerLimitConfigList :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
    </el-tab-pane>
    <el-tab-pane label="锁定客户数限制">
      <CustomerLimitConfigList :confType="LimitConfType.CUSTOMER_LOCK_LIMIT" />
    </el-tab-pane>
  </el-tabs>
</template>

  11. Manage MES Clients via MesMdClient component

    master

    The MesMdClient component provides a complete interface for managing MES (Manufacturing Execution System) clients. It includes features for searching, listing, creating, updating, importing, deleting, and exporting client data.

    Key Features

    • Search/Filter: Filter clients by code, name, nickname, englishName, type, and status.
    • Pagination: Uses a Pagination component to navigate through client lists.
    • Import/Export: Supports bulk importing via MdClientImportForm and exporting to Excel files.
    • CRUD Operations: Uses MdClientForm for adding and editing client details.

    Data Fields

    When interacting with the client data, the following fields are relevant:

    • code: Client code
    • name: Client name
    • nickname: Client short name
    • englishName: English name
    • type: Client type (uses DICT_TYPE.MES_CLIENT_TYPE)
    • status: Status (uses DICT_TYPE.COMMON_STATUS)
    • telephone: Client telephone
    • contact1Name: Contact person 1 name
    • contact1Telephone: Contact person 1 telephone
    • createTime: Creation timestamp

  12. Manage OAuth 2.0 Clients

    master

    The SystemOAuth2Client view provides a management interface for OAuth 2.0 (SSO Single Sign-On) clients. Users can search, create, update, delete, and batch delete OAuth 2.0 client configurations.

    Key Features

    • Search: Filter clients by application name (name) and status (status).
    • Pagination: Supports paginated results via pageNo and pageSize.
    • Client Details: View client ID, secret, application name, logo, status, token validity periods, and authorized grant types.
    • Permissions: Actions like creating, updating, and deleting are protected by permission codes (e.g., system:oauth2-client:create).

    Data Fields in List

    • clientId: Client ID
    • secret: Client Secret
    • name: Application Name
    • logo: Application Icon URL
    • status: Status (mapped via DICT_TYPE.COMMON_STATUS)
    • accessTokenValiditySeconds: Access Token validity period
    • refreshTokenValiditySeconds: Refresh Token validity period
    • authorizedGrantTypes: List of authorized grant types
    • createTime: Creation timestamp