# Customization Development Guide

## Requirement Analysis

- **Requirement Alignment Principle**: For new fields, it is necessary to confirm the core purpose (e.g., adding the "Policy Priority" field to distinguish urgent underwriting tasks), data type (string/number/drop-down selection). This determines whether it is a required field with the business side and avoids the design of redundant fields.s

- **System Compatibility Principle**: Field names must comply with the {offering} UI component naming specification (prefixed with "biz_", e.g., "biz_policy_priority") to avoid duplicate names with existing system fields; at the same time, confirm the back-end interface to which the field data needs to be synchronized (e.g., need to associate the request parameters of the "Policy Creation Interface").

- **User Experience Principle**: Drop-down selection fields (such as "High/Medium/Low" options for "Policy Priority") need to preset default values (e.g., default "Medium") to reduce user operation costs; input fields need to set character length limits (e.g., a maximum of 50 characters for string fields) to avoid data overflow.

## Code Development and Version Management Analysis
 
- **Code Layering Principle**: The code related to new fields must be written in layers according to the {offering} UI architecture——UI rendering code (such as Vue components) is placed in the src/views/application/ directory, and data interaction code (such as interface requests) is placed in the src/api/application/ directory to avoid code mixing.

- **Reusability Principle**: If the new field requires special verification rules (e.g., "Policy Priority" only allows input of "High/Medium/Low"), the verification logic needs to be encapsulated into a public function (such as checkPolicyPriority(value)) and placed in the src/utils/validator/ directory for reuse by other modules.

- **Version Management Principle**: Before development, a customized development branch must be created from the main branch (main), with the naming format "feature/ui-field-field name" (e.g., "feature/ui-field-biz_policy_priority"). When submitting code after development is completed, the field purpose must be specified in the submission information (e.g., "feat: Add policy priority field to distinguish the urgency of underwriting tasks").

## Customization Development 

### Step 1: Development Environment Setup

1. Code Pull and Branch Creation
- Pull the latest main branch code from the {offering} code repository;​
- Use the command git checkout -b feature/ui-field-biz_policy_priority to create a development branch;​
2. Dependency Installation and Environment Startup
- Execute npm install in the project root directory to install the latest dependencies (ensure Node.js version is 14.0+ and npm version is 6.0+);​
- Execute npm run dev to start the local development environment, and access http://localhost:8080 to confirm that the UI project runs normally (can successfully enter the Application Web UI page);​
3. Interface Permission Application
- Apply to the back-end team for the field addition permission of the "Policy Creation Interface" (interface path /api/v1/policy/create), ensuring that the back-end supports the reception and storage of the "biz_policy_priority" field.

### Step 2: Developing the UI Component for the New Field

1. Modify UI Component File
Open the src/views/application/PolicyForm.vue file (policy form UI component), and add new field code under the "Policy Basic Information" module:​
​
```
<el-form-item label="Policy Priority" prop="biz_policy_priority" required>​
  <el-select v-model="form.biz_policy_priority" placeholder="Please select">​
    <el-option label="High" value="high"></el-option>​
    <el-option label="Medium" value="medium"></el-option>​
    <el-option label="Low" value="low"></el-option>​
  </el-select>​
</el-form-item>​
```
2. Configure Field Verification Rules  
Add verification rules to the rules object in the same file to ensure the field is required and the value is valid:​

```
rules: {
  // Other field rules...
  biz_policy_priority: [
    { required: true, message: 'Please select policy priority', trigger: 'change' },
    { type: 'enum', enum: ['high', 'medium', 'low'], message: 'Invalid priority value', trigger: 'change' }
  ]
}
```

3. Set Field Default Value  
Initialize the field default value in the form object to avoid the field being empty when the page loads:​
```
form: {
  // Other fields...
  biz_policy_priority: 'medium' // Default "Medium" priority
}
```

4. Local Preview Verification  
After saving the file, refresh the local development environment page (http://localhost:8080), enter the policy form page, and confirm that the "Policy Priority" field is displayed normally, the default value is "Medium", and the drop-down selection function works normally.


### Step 3: xxx

### Step 4: xxxx