CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求

src/views/mine/personList.vue

@@ -35,9 +35,17 @@
           <div class="item">
             <div class="left opaCol"><span class="star" style="opacity: 0">*</span><span>角色：</span></div>
             <div class="right" :class="{'opaCol':type==2}">
-              <van-field  :input-align="type==2 ? 'right' : 'left'" readonly v-model="item.roleName" placeholder="请输入" />
+              <van-field  :input-align="type==2 ? 'right' : 'left'" readonly v-model="item.roleDisplay" placeholder="请输入" />
             </div>
           </div>
+          <template v-if="item.hasRelationRole">
+            <div class="item" v-for="(row, rIndex) in item.relationRows" :key="'relation-' + rIndex">
+              <div class="left relationLeft" :class="{'opaCol':type!=2}"><span class="star" :style="{opacity: type==2 ? 1 : 0}">*</span><span>{{ item.relationRows.length > 1 ? row.base : '关系' }}：</span></div>
+              <div class="right">
+                <van-field  :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="row.relation" placeholder="请输入关系" />
+              </div>
+            </div>
+          </template>
           <div class="item">
             <div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>电话1：</span></div>
             <div class="right">
@@ -83,6 +91,8 @@
 import {myMixins} from "@/utils/myMixins"
 import {getConfirmPerson,getConfirmStatus,getQrCode,confirmAddWechat,confirm,submitConfirm} from "@/api/authentication";
 import { Dialog } from 'vant';
+// 带关系角色（存储格式：角色名-关系）
+const RELATION_ROLES = ['其他', '法人关系人', '实控人关系人', '合伙人']
 export default {
   name: "personList",
   mixins:[myMixins],
@@ -163,11 +173,26 @@ export default {
       // this.type=2
       let res=await getConfirmPerson({supplierId:this.supplierId})
       if(res.data && res.data.length>0){
-        this.personList=res.data
+        this.personList=res.data.map(item => this.buildRoleDisplay(item))
       }else{
         this.personList=[]
       }
     },
+    // 拆分带关系角色：roleName 按逗号拆项，识别 `角色名-关系`，按第一个 '-' 拆出基础角色与关系
+    buildRoleDisplay(item){
+      const parts = (item.roleName || '').split(',').filter(Boolean).map(raw => {
+        const dashIndex = raw.indexOf('-')
+        if (dashIndex > -1 && RELATION_ROLES.includes(raw.substring(0, dashIndex))) {
+          return { raw, base: raw.substring(0, dashIndex), relation: raw.substring(dashIndex + 1) }
+        }
+        return { raw, base: raw, relation: null }
+      })
+      item.roleParts = parts
+      item.roleDisplay = parts.map(p => p.relation != null ? p.base : p.raw).join(',')
+      item.relationRows = parts.filter(p => p.relation != null)
+      item.hasRelationRole = item.relationRows.length > 0
+      return item
+    },
     async wechatConfirm(){//确认已添加微信按钮
       Dialog.confirm({
         message:'请确认相关人员是否已添加该二维码。',
@@ -238,6 +263,18 @@ export default {
         this.$toast('电话号码格式不正确')
         return
       }
+      // 带关系角色：关系必填校验，并将 roleDisplay + relation 重新拼接为 `角色名-关系` 写回 roleName
+      for (const item of this.personList) {
+        if (item.hasRelationRole) {
+          for (const row of item.relationRows) {
+            if (!row.relation || !String(row.relation).trim()) {
+              this.$toast(`请填写${row.base}关系`)
+              return
+            }
+          }
+          item.roleName = item.roleParts.map(p => p.relation != null ? `${p.base}-${String(p.relation).trim()}` : p.raw).join(',')
+        }
+      }
       await submitConfirm({supplierId:this.supplierId,infos:this.personList})
       this.$toast('操作成功')
       if(this.isWebFunc()){
@@ -407,6 +444,12 @@ export default {
       color: #323643;
       opacity: .65;
     }
+    .item .left.relationLeft{
+      width: auto;
+      min-width: 66px;
+      white-space: nowrap;
+      padding-right: 4px;
+    }
     .star{
       font-weight: bold;
       font-size: 13px;