用户选择组件增加角色标签显示
这个提交包含在:
@@ -116,6 +116,19 @@
|
||||
.user-option-nick { margin-right: 4px; }
|
||||
.user-option-real { font-weight: 400; color: #7536D0; font-size: 12px; }
|
||||
.user-option-meta { font-size: 12px; color: #909399; margin-top: 2px; }
|
||||
.user-role-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
|
||||
.user-role-tag {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.user-role-tag--promoter { background: #f0e8ff; color: #7536D0; }
|
||||
.user-role-tag--regional_agent { background: #e8f7ef; color: #2e9f6a; }
|
||||
.user-role-tag--empty { background: #f4f4f5; color: #909399; }
|
||||
</style>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||||
@@ -155,6 +168,14 @@
|
||||
<template v-if="item.mobile"> · 手机 {{ item.mobile }}</template>
|
||||
<template v-if="item.nickname && item.nickname !== item.display_name"> · 昵称 {{ item.nickname }}</template>
|
||||
</div>
|
||||
<div class="user-role-tags">
|
||||
<template v-if="item.roles && item.roles.length">
|
||||
<span v-for="(role, rIdx) in item.roles" :key="rIdx" class="user-role-tag" :class="'user-role-tag--' + role.role_type">
|
||||
{{ role.role_label }}<template v-if="role.status_text">[{{ role.status_text }}]</template>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else class="user-role-tag user-role-tag--empty">无进件角色</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-option>
|
||||
@@ -163,8 +184,16 @@
|
||||
<img v-if="selectedUser.avatar" :src="selectedUser.avatar" class="user-selected-avatar" style="border-radius:50%;">
|
||||
<div v-else class="user-selected-avatar">{{ userAvatarText(selectedUser) }}</div>
|
||||
<div>
|
||||
<div class="user-selected-name">{{ selectedUser.option_label }}</div>
|
||||
<div class="user-selected-meta" v-if="selectedUser.real_name">实名:{{ selectedUser.real_name }}</div>
|
||||
<div class="user-selected-name">{{ selectedUser.display_name }} · ID {{ selectedUser.id }}<template v-if="selectedUser.mobile"> · {{ selectedUser.mobile }}</template></div>
|
||||
<div class="user-selected-meta" v-if="selectedUser.real_name && selectedUser.real_name !== selectedUser.display_name">实名:{{ selectedUser.real_name }}</div>
|
||||
<div class="user-role-tags">
|
||||
<template v-if="selectedUser.roles && selectedUser.roles.length">
|
||||
<span v-for="(role, rIdx) in selectedUser.roles" :key="rIdx" class="user-role-tag" :class="'user-role-tag--' + role.role_type">
|
||||
{{ role.role_label }}<template v-if="role.status_text">[{{ role.status_text }}]</template>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else class="user-role-tag user-role-tag--empty">无进件角色</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
在新工单中引用
屏蔽一个用户