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