Skip to content

C
company_app
提交 fbb744cc 作者: 施汉文
操作

🌈 style: 客服标签添加

上级 272b2066
正在显示 包含 627 行增加 和 510 行删除
src/views/popup/AddTagsDrawer/index.vue
...@@ -64,7 +64,7 @@ export default { ...@@ -64,7 +64,7 @@ export default {
}, },
data() { data() {
return { return {
show: true, show: false,
inputValue: "", inputValue: "",
defaultCheckedIds: [], defaultCheckedIds: [],
list: [], //默认选中 list: [], //默认选中
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
await this.getRoleLabel(); await this.getRoleLabel();
await this.handleChange(); await this.handleChange();
}, },
open() { open(list) {
this.show = true; this.show = true;
}, },
close() { close() {
......
src/views/userInfo/components/gameInfo/ZyouTag.vue
<template> <template>
<div> <div>
<div class="item rowFlex columnCenter spaceBetween zyouTag"> <div class="item spaceBetween zyouTag grid grid-cols-12">
<div class="rowFlex columnCenter"> <div class="rowFlex col-span-3">
<span class="label">掌游标签:</span> <span class="label">掌游标签:</span>
<i <!-- <i
:class="['el-icon-arrow-' + (showZyouTag ? 'down' : 'right'), 'tag-icon']" :class="[
@click="toggleZyouTag" 'el-icon-arrow-' + (showZyouTag ? 'down' : 'right'),
></i> 'tag-icon',
</div> ]"
@click="toggleZyouTag"
></i> -->
</div> </div>
<!-- 掌游标签列表 --> <div class="space-y-[8px] col-span-9 flex flex-col">
<div v-if="showZyouTag" class="zyou-tag-list"> <div
<div v-for="(item, index) in roleLabelList" :key="index" class="tag-group"> v-for="(item, index) in roleLabelList"
<div class="tag-group-header"> :key="index"
<div class="tag-type-name">{{ item.label_type_name }}</div> class="self-start flex group"
<i v-if="item.label_type ==2" class="el-icon-circle-plus" style="color: var(--el-color-primary)" @click="toggleAddTag(index)"></i> >
</div> <div
<!-- 新增标签区域 --> class="px-[6px] rounded-[4px] bg-[#F5F5F5] gap-[4px] flex items-center h-[22px]"
<div v-if="showAddTagIndex === index" class="add-tag-area"> >
<div class="add-tag-content"> <div>{{ tagNmae[item.label_type] }}</div>
<el-cascader <div class="h-[9px] w-[1px] bg-[#D0D1D3]"></div>
v-model="searchValue" <div v-if="item.label.length > 1" class="flex-1 truncate">
:options="searchOptions" {{
collapse-tags `${item.label[0].label_group_name} / ${item.label[0].label_name}`
filterable }}
:props="{
multiple: true,
value: 'label_id',
label: 'label_name',
children: 'children',
emitPath: false,
disabled: 'disabled',
}"
clearable
placeholder="请选择掌游标签"
class="tag-select"
@change="handleCascaderChange"
></el-cascader>
<div class="button-group">
<el-button type="text" size="small" @click="handleSelectChange(searchValue)">确定</el-button>
<el-button type="text" size="small" @click="toggleAddTag(-1)">取消</el-button>
</div>
</div> </div>
</div>
<div class="tag-list"> <div v-else-if="item.label.length > 0" class="flex-1 truncate">
<el-popover {{
v-for="tag in item.label" `${item.label[0].label_group_name} / ${item.label[0].label_name}`
:key="tag.id" }}
</div>
<div v-else class="flex-1 truncate">--</div>
<el-tooltip
effect="dark"
placement="top" placement="top"
width="250px" v-if="item.label.length > 1"
trigger="click"
@show="getTagCreateInfo(tag.id)"
> >
<div style="height: 50px;"> <div
<div v-if="tagInfo.create_user" class="tag-info-item"> slot="content"
<span class="tag-info-label">操作人：</span> class="grid grid-cols-2 gap-[4px] max-w-[200px]"
<span class="tag-info-value">{{ tagInfo.create_user }}</span> >
</div> <div
<div v-if="tagInfo.create_time" class="tag-info-item"> v-for="value in item.label"
<span class="tag-info-label">操作时间：</span> class="px-[6px] w-full rounded-[4px] bg-[rgba(255,255,255,0.2)] flex items-center h-[22px] overflow-hidden"
<span class="tag-info-value">{{ tagInfo.create_time }}</span> >
<span class="truncate">
{{ `${value.label_group_name} / ${value.label_name}` }}
</span>
</div> </div>
</div> </div>
<el-tag slot="reference" class="tag-item"> <el-button type="text" size="small"
<span v-if="tag.label_group_name">{{ tag.label_group_name || '' }} / </span> >+{{ item.label.length }}
<span>{{ tag.label_name || '' }}</span> </el-button>
</el-tag> </el-tooltip>
</el-popover> </div>
<iconpark-icon
name="ziliao-tianjia"
class="group-hover:visible invisible text-primary text-[14px] ml-[6px]"
@click="addTag(item.label)"
></iconpark-icon>
</div>
</div>
</div>
<!-- 掌游标签列表 -->
<!-- 掌游标签列表 -->
<div v-if="showZyouTag" class="zyou-tag-list">
<div
v-for="(item, index) in roleLabelList"
:key="index"
class="tag-group"
>
<div class="tag-group-header">
<div class="tag-type-name">{{ item.label_type_name }}</div>
<i
v-if="item.label_type == 2"
class="el-icon-circle-plus"
style="color: var(--el-color-primary)"
@click="toggleAddTag(index)"
></i>
</div>
<!-- 新增标签区域 -->
<div v-if="showAddTagIndex === index" class="add-tag-area">
<div class="add-tag-content">
<el-cascader
v-model="searchValue"
:options="searchOptions"
collapse-tags
filterable
:props="{
multiple: true,
value: 'label_id',
label: 'label_name',
children: 'children',
emitPath: false,
disabled: 'disabled',
}"
clearable
placeholder="请选择掌游标签"
class="tag-select"
@change="handleCascaderChange"
></el-cascader>
<div class="button-group">
<el-button
type="text"
size="small"
@click="handleSelectChange(searchValue)"
>确定</el-button
>
<el-button type="text" size="small" @click="toggleAddTag(-1)"
>取消</el-button
>
</div>
</div> </div>
</div> </div>
<div class="tag-list">
<el-popover
v-for="tag in item.label"
:key="tag.id"
placement="top"
width="250px"
trigger="click"
@show="getTagCreateInfo(tag.id)"
>
<div style="height: 50px">
<div v-if="tagInfo.create_user" class="tag-info-item">
<span class="tag-info-label">操作人：</span>
<span class="tag-info-value">{{ tagInfo.create_user }}</span>
</div>
<div v-if="tagInfo.create_time" class="tag-info-item">
<span class="tag-info-label">操作时间：</span>
<span class="tag-info-value">{{ tagInfo.create_time }}</span>
</div>
</div>
<el-tag slot="reference" class="tag-item">
<span v-if="tag.label_group_name"
>{{ tag.label_group_name || "" }} /
</span>
<span>{{ tag.label_name || "" }}</span>
</el-tag>
</el-popover>
</div>
</div> </div>
</div> </div>
</template> <AddTagsDrawer ref="addTagsDrawer" :game-user-info="gameUserInfo" />
</div>
<script> </template>
import { editRoleLabel, roleGetRoleLabel, roleLabelSearch, selectSearch, getRoleLabelCreate } from '@/api/game'
import { mapState,mapActions } from 'vuex' <script>
import { debounce } from '@/utils' import {
export default { editRoleLabel,
name: 'ZyouTag', roleGetRoleLabel,
props: { roleLabelSearch,
accountSelect: { selectSearch,
type: [String, Number], getRoleLabelCreate,
default: '' } from "@/api/game";
import { mapState, mapActions } from "vuex";
import { debounce } from "@/utils";
import AddTagsDrawer from "@/views/popup/AddTagsDrawer/index.vue";
export default {
name: "ZyouTag",
components: {
AddTagsDrawer,
},
props: {
accountSelect: {
type: [String, Number],
default: "",
},
gameUserInfo: {
type: Object,
default: () => ({}),
},
},
data() {
return {
tagNmae: {
1: "运营",
2: "客服",
3: "GS",
},
showZyouTag: false, // 控制标签显示隐藏
roleLabelList: [], // 角色标签列表
showAddTagIndex: -1, // 当前显示新增标签的索引
searchValue: "", // 搜索框的值
searchOptions: [], // 搜索选项
labelTypeList: [], // 标签类型列表
loading: false, // 加载状态
tagInfo: {}, // 标签创建信息
};
},
computed: {
...mapState("user", [
"cser_id",
"cser_name",
"corp_id",
"weixin_blongs_id_list",
]),
},
watch: {
accountSelect: {
handler(newVal) {
if (newVal) {
this.getRoleLabelList();
}
}, },
gameUserInfo: { immediate: true,
type: Object, },
default: () => ({}) },
async mounted() {
await this.requestCompanyviewConfig({ corp_id: this.corp_id });
this.getLabelType();
this.getRoleLabelList();
this.searchLabel("");
},
methods: {
...mapActions("user", ["requestCompanyviewConfig"]),
// 获取标签类型
async getLabelType() {
try {
const res = await selectSearch({
type: "label_type",
});
if (res.status_code === 1) {
console.log("getLabelType");
this.labelTypeList = res.data.data || [];
}
} catch (error) {
console.error("获取标签类型失败:", error);
} }
}, },
data() { getRoleLabelList: debounce(function () {
return { this.getRoleLabelListFn();
showZyouTag: false, // 控制标签显示隐藏 }, 500),
roleLabelList: [], // 角色标签列表 // 获取角色标签列表
showAddTagIndex: -1, // 当前显示新增标签的索引 async getRoleLabelListFn() {
searchValue: '', // 搜索框的值 console.log("延迟");
searchOptions: [], // 搜索选项 if (!this.accountSelect) return;
labelTypeList: [], // 标签类型列表 this.loading = true;
loading: false, // 加载状态 try {
tagInfo: {} // 标签创建信息 const weixin_blongs_id = this.weixin_blongs_id_list.map(
(item) => item.value
);
const res = await roleGetRoleLabel({
member_id: this.accountSelect,
weixin_blongs_id: weixin_blongs_id,
});
if (res.status_code === 1 && res.data.data.length > 0) {
const labelData = res.data.data || [];
const groupedLabels = {};
labelData.forEach((item) => {
if (item.label && item.label.length > 0) {
item.label.forEach((label) => {
label.label_type = Number(item.label_type);
});
}
});
// 初始化标签组
this.labelTypeList.forEach((type) => {
groupedLabels[type.value] = {
label_type: type.value,
label_type_name: type.label,
label: [],
};
});
// 分组标签数据
labelData.forEach((item) => {
if (item.label && item.label.length > 0) {
const labelType = item.label[0].label_type;
if (groupedLabels[labelType]) {
groupedLabels[labelType].label = item.label;
}
}
});
// 转换为数组格式
this.roleLabelList = Object.values(groupedLabels);
console.log(this.roleLabelList, "roleLabelList");
} else {
this.roleLabelList = this.labelTypeList.map((item) => {
return {
label_type: item.value,
label_type_name: item.label,
label: [],
};
});
}
} catch (error) {
console.error("获取角色标签列表失败:", error);
} finally {
this.loading = false;
} }
}, },
computed: { addTag(list) {
...mapState('user', ['cser_id','cser_name','corp_id','weixin_blongs_id_list']), this.$refs.addTagsDrawer.open(list);
}, },
watch: { // 搜索标签
accountSelect: { async searchLabel(query) {
handler(newVal) { try {
if (newVal) { const weixin_blongs_id = this.weixin_blongs_id_list.map(
this.getRoleLabelList() (item) => item.value
} );
}, const res = await roleLabelSearch({
immediate: true label_name: query.trim() || "",
weixin_blongs_id: weixin_blongs_id || [],
label_type: 2,
});
if (res.status_code === 1) {
this.searchOptions = res.data.data || [];
// 找出 label_group_id 相同的 然后 把 children 合并
const groupedItems = this.searchOptions.reduce((acc, curr) => {
const key = curr.label_group_id;
if (!acc[key]) {
acc[key] = {
label_name: curr.label_group_name,
label_id: curr.label_group_id,
select_type: Number(curr.select_type),
children: [],
};
}
// 将标签添加到对应标签组的children中
acc[key].children.push({
label_name: curr.label_name,
label_id: curr.id,
disabled: false, // 默认不禁用
});
return acc;
}, {});
// 处理单选标签组，为已选中项以外的选项添加disabled属性
Object.values(groupedItems).forEach((group) => {
if (group.select_type === 1) {
// 如果是单选标签组，需要禁用其他选项
const selectedIds = Array.isArray(this.searchValue)
? this.searchValue
: [];
const hasSelectedInThisGroup = group.children.some((child) =>
selectedIds.includes(child.label_id)
);
if (hasSelectedInThisGroup) {
group.children.forEach((child) => {
// 如果当前选项不在已选中列表中，则禁用
if (!selectedIds.includes(child.label_id)) {
child.disabled = true;
}
});
}
}
});
this.searchOptions = Object.values(groupedItems);
}
} catch (error) {
console.error("搜索标签失败:", error);
} }
}, },
async mounted() {
await this.requestCompanyviewConfig({corp_id:this.corp_id}) // 添加标签
this.getLabelType() async addLabel(selectedLabels) {
this.getRoleLabelList() console.log(selectedLabels, "selectedLabels");
this.searchLabel('') const labelId = selectedLabels.map((label) => label.label_id);
}, if (!this.accountSelect || !labelId) {
methods: { this.$message.error("请选择标签");
...mapActions('user', ['requestCompanyviewConfig']), return;
// 获取标签类型 }
async getLabelType() { if (
try { !this.gameUserInfo ||
const res = await selectSearch({ !this.gameUserInfo.role_info ||
type: 'label_type' !this.gameUserInfo.role_info.role_id
}) ) {
if (res.status_code === 1) { this.$message.error("该账号未创角无法添加标签");
console.log('getLabelType') return;
this.labelTypeList = res.data.data || [] }
} try {
} catch (error) { const res = await editRoleLabel({
console.error('获取标签类型失败:', error) role_id: this.gameUserInfo.role_info.role_id || "",
member_id: this.accountSelect,
label_id: labelId,
user_id: this.cser_id,
user_name: this.cser_name,
role_name: this.gameUserInfo.role_info.role_name || "",
cp_role_id: this.gameUserInfo.role_info.cp_role_id || "",
});
if (res.status_code === 1) {
this.$message.success(res.msg);
this.searchValue = "";
this.showAddTagIndex = -1;
// 暂时隐藏
// this.roleLabelList[1].label.push(...selectedLabels)
// 重置所有标签的禁用状态
this.searchOptions.forEach((group) => {
if (group.children) {
group.children.forEach((child) => {
child.disabled = false;
});
}
});
// 刷新标签列表
setTimeout(() => {
this.getRoleLabelList();
}, 500);
} }
}, } catch (error) {
getRoleLabelList: debounce(function() { console.error("添加标签失败:", error);
this.getRoleLabelListFn() }
}, 500), },
// 获取角色标签列表
async getRoleLabelListFn() { // 切换标签显示
console.log('延迟') toggleZyouTag() {
if (!this.accountSelect) return this.showZyouTag = !this.showZyouTag;
this.loading = true },
try { // 切换新增标签区域显示
const weixin_blongs_id = this.weixin_blongs_id_list.map(item => item.value) toggleAddTag(index) {
const res = await roleGetRoleLabel({ this.showAddTagIndex = this.showAddTagIndex === index ? -1 : index;
member_id: this.accountSelect, if (this.showAddTagIndex === -1) {
weixin_blongs_id: weixin_blongs_id this.searchValue = "";
}) // this.searchOptions = []
if (res.status_code === 1 && res.data.data.length > 0) { }
const labelData = res.data.data || [] },
const groupedLabels = {}
labelData.forEach(item => { // 选择标签
if (item.label && item.label.length > 0) { handleSelectChange(value) {
item.label.forEach(label => { if (value && Array.isArray(value) && value.length > 0) {
label.label_type = Number(item.label_type) // 获取当前标签组的标签
}) const currentGroupLabels = this.roleLabelList.find(
} (item) => Number(item.label_type) === 2
}) ).label;
// 初始化标签组
this.labelTypeList.forEach(type => { // 获取所有选中标签的信息
groupedLabels[type.value] = { const selectedLabels = [];
label_type: type.value,
label_type_name: type.label, // 遍历所有标签组
label: [] this.searchOptions.forEach((group) => {
} // 找出该组中被选中的标签
}) const selectedInGroup = group.children.filter((child) =>
value.includes(child.label_id)
// 分组标签数据 );
labelData.forEach(item => {
if (item.label && item.label.length > 0) { // 如果是单选标签组且选中了多个，只保留第一个
const labelType = item.label[0].label_type if (group.select_type === 1 && selectedInGroup.length > 1) {
if (groupedLabels[labelType]) { this.$message.warning(
groupedLabels[labelType].label = item.label `标签组"${group.label_name}"为单选，只能选择一个标签`
} );
} // 只添加第一个选中的标签
}) selectedLabels.push(selectedInGroup[0]);
// 转换为数组格式
this.roleLabelList = Object.values(groupedLabels)
console.log(this.roleLabelList, 'roleLabelList')
} else { } else {
this.roleLabelList = this.labelTypeList.map(item => { // 多选标签组或单选标签组只选了一个，全部添加
return { selectedLabels.push(...selectedInGroup);
label_type: item.value,
label_type_name: item.label,
label: []
}
})
} }
} catch (error) { });
console.error('获取角色标签列表失败:', error)
} finally { if (!selectedLabels || selectedLabels.length === 0) {
this.loading = false this.$message.warning("请选择有效的标签");
return;
} }
},
// 搜索标签 // 检查selectedLabels中的标签组是否与currentGroupLabels中的标签组重复
async searchLabel(query) { if (currentGroupLabels && currentGroupLabels.length > 0) {
try { const existingGroupIds = currentGroupLabels.map(
const weixin_blongs_id = this.weixin_blongs_id_list.map(item => item.value) (label) => label.label_group_id
const res = await roleLabelSearch({ );
label_name: query.trim() || '',
weixin_blongs_id: weixin_blongs_id || [], const hasConflict = selectedLabels.some((label) =>
label_type: 2 existingGroupIds.includes(label.label_group_id)
}) );
if (res.status_code === 1) {
this.searchOptions = res.data.data || [] if (hasConflict) {
// 找出 label_group_id 相同的 然后 把 children 合并 this.$message.warning("一标签组下只能选择一个标签");
const groupedItems = this.searchOptions.reduce((acc, curr) => { return;
const key = curr.label_group_id
if (!acc[key]) {
acc[key] = {
label_name: curr.label_group_name,
label_id: curr.label_group_id,
select_type: Number(curr.select_type),
children: []
}
}
// 将标签添加到对应标签组的children中
acc[key].children.push({
label_name: curr.label_name,
label_id: curr.id,
disabled: false // 默认不禁用
})
return acc
}, {})
// 处理单选标签组，为已选中项以外的选项添加disabled属性
Object.values(groupedItems).forEach(group => {
if (group.select_type === 1) {
// 如果是单选标签组，需要禁用其他选项
const selectedIds = Array.isArray(this.searchValue) ? this.searchValue : []
const hasSelectedInThisGroup = group.children.some(child =>
selectedIds.includes(child.label_id)
)
if (hasSelectedInThisGroup) {
group.children.forEach(child => {
// 如果当前选项不在已选中列表中，则禁用
if (!selectedIds.includes(child.label_id)) {
child.disabled = true
}
})
}
}
})
this.searchOptions = Object.values(groupedItems)
} }
} catch (error) { this.addLabel(selectedLabels);
console.error('搜索标签失败:', error) } else {
} this.addLabel(selectedLabels);
},
// 添加标签
async addLabel(selectedLabels) {
console.log(selectedLabels, 'selectedLabels')
const labelId = selectedLabels.map(label => label.label_id)
if (!this.accountSelect || !labelId) {
this.$message.error('请选择标签')
return
} }
if (!this.gameUserInfo || !this.gameUserInfo.role_info || !this.gameUserInfo.role_info.role_id) { } else {
this.$message.error('该账号未创角无法添加标签') this.$message.warning("请选择标签");
return }
},
// 处理级联选择器选择变化
handleCascaderChange(value) {
// 每次选择变化时，重新处理searchOptions
// 重置所有选项的disabled状态
this.searchOptions.forEach((group) => {
if (group.children) {
group.children.forEach((child) => {
child.disabled = false;
});
} }
try { });
const res = await editRoleLabel({
role_id: this.gameUserInfo.role_info.role_id || '', if (Array.isArray(value) && value.length > 0) {
member_id: this.accountSelect, // 检查是否有全选操作
label_id: labelId, const prevValue = [...(this.searchValue || [])];
user_id: this.cser_id,
user_name: this.cser_name, // 找出所有单选标签组
role_name: this.gameUserInfo.role_info.role_name || '', const singleSelectGroups = this.searchOptions.filter(
cp_role_id: this.gameUserInfo.role_info.cp_role_id || '' (group) => group.select_type === 1
}) );
if (res.status_code === 1) {
this.$message.success(res.msg) // 检查单选标签组是否有全选操作
this.searchValue = '' for (const group of singleSelectGroups) {
this.showAddTagIndex = -1 // 获取当前组中的所有标签ID
// 暂时隐藏 const groupLabelIds = group.children.map((child) => child.label_id);
// this.roleLabelList[1].label.push(...selectedLabels)
// 重置所有标签的禁用状态 // 检查当前组中选中的标签数量
this.searchOptions.forEach(group => { const selectedInThisGroup = groupLabelIds.filter((id) =>
if (group.children) { value.includes(id)
group.children.forEach(child => { );
child.disabled = false
}) // 如果选中的标签数量大于1，说明可能是全选操作
if (selectedInThisGroup.length > 1) {
// 提示用户只能选择一个标签
this.$message.warning(
`标签组"${group.label_name}"为单选，只能选择一个标签`
);
// 清空该组的选择
const newValue = value.filter((id) => !groupLabelIds.includes(id));
// 更新选择值
this.searchValue = newValue;
return;
}
// 如果该单选标签组有选中的标签，则禁用其他标签
if (selectedInThisGroup.length === 1) {
group.children.forEach((child) => {
if (!value.includes(child.label_id)) {
child.disabled = true;
} }
}) });
// 刷新标签列表
setTimeout(() => {
this.getRoleLabelList()
}, 500)
} }
} catch (error) { // 如果没有选中的标签，则不需要禁用任何标签，已经在前面重置了
console.error('添加标签失败:', error)
}
},
// 切换标签显示
toggleZyouTag() {
this.showZyouTag = !this.showZyouTag
},
// 切换新增标签区域显示
toggleAddTag(index) {
this.showAddTagIndex = this.showAddTagIndex === index ? -1 : index
if (this.showAddTagIndex === -1) {
this.searchValue = ''
// this.searchOptions = []
} }
}, }
// 如果没有选中任何标签，所有标签都应该是可选的，已经在前面重置了123
// 选择标签 },
handleSelectChange(value) { // 获取标签创建信息
if (value && Array.isArray(value) && value.length > 0) { async getTagCreateInfo(id) {
// 获取当前标签组的标签 this.tagInfo = {};
const currentGroupLabels = this.roleLabelList.find(item => Number(item.label_type) === 2).label try {
const res = await getRoleLabelCreate({
// 获取所有选中标签的信息 id: id,
const selectedLabels = [] });
if (res.status_code === 1) {
// 遍历所有标签组 this.tagInfo = res.data.data || {};
this.searchOptions.forEach(group => {
// 找出该组中被选中的标签
const selectedInGroup = group.children.filter(child =>
value.includes(child.label_id)
)
// 如果是单选标签组且选中了多个，只保留第一个
if (group.select_type === 1 && selectedInGroup.length > 1) {
this.$message.warning(`标签组"${group.label_name}"为单选，只能选择一个标签`)
// 只添加第一个选中的标签
selectedLabels.push(selectedInGroup[0])
} else {
// 多选标签组或单选标签组只选了一个，全部添加
selectedLabels.push(...selectedInGroup)
}
})
if (!selectedLabels || selectedLabels.length === 0) {
this.$message.warning('请选择有效的标签')
return
}
// 检查selectedLabels中的标签组是否与currentGroupLabels中的标签组重复
if (currentGroupLabels && currentGroupLabels.length > 0) {
const existingGroupIds = currentGroupLabels.map(label => label.label_group_id)
const hasConflict = selectedLabels.some(label =>
existingGroupIds.includes(label.label_group_id)
)
if (hasConflict) {
this.$message.warning('一标签组下只能选择一个标签')
return
}
this.addLabel(selectedLabels)
} else {
this.addLabel(selectedLabels)
}
} else { } else {
this.$message.warning('请选择标签') this.$message.error(res.msg || "获取标签信息失败");
}
},
// 处理级联选择器选择变化
handleCascaderChange(value) {
// 每次选择变化时，重新处理searchOptions
// 重置所有选项的disabled状态
this.searchOptions.forEach(group => {
if (group.children) {
group.children.forEach(child => {
child.disabled = false
})
}
})
if (Array.isArray(value) && value.length > 0) {
// 检查是否有全选操作
const prevValue = [...this.searchValue || []]
// 找出所有单选标签组
const singleSelectGroups = this.searchOptions.filter(group => group.select_type === 1)
// 检查单选标签组是否有全选操作
for (const group of singleSelectGroups) {
// 获取当前组中的所有标签ID
const groupLabelIds = group.children.map(child => child.label_id)
// 检查当前组中选中的标签数量
const selectedInThisGroup = groupLabelIds.filter(id => value.includes(id))
// 如果选中的标签数量大于1，说明可能是全选操作
if (selectedInThisGroup.length > 1) {
// 提示用户只能选择一个标签
this.$message.warning(`标签组"${group.label_name}"为单选，只能选择一个标签`)
// 清空该组的选择
const newValue = value.filter(id => !groupLabelIds.includes(id))
// 更新选择值
this.searchValue = newValue
return
}
// 如果该单选标签组有选中的标签，则禁用其他标签
if (selectedInThisGroup.length === 1) {
group.children.forEach(child => {
if (!value.includes(child.label_id)) {
child.disabled = true
}
})
}
// 如果没有选中的标签，则不需要禁用任何标签，已经在前面重置了
}
}
// 如果没有选中任何标签，所有标签都应该是可选的，已经在前面重置了123
},
// 获取标签创建信息
async getTagCreateInfo(id) {
this.tagInfo = {}
try {
const res = await getRoleLabelCreate({
id: id
})
if (res.status_code === 1) {
this.tagInfo = res.data.data || {}
} else {
this.$message.error(res.msg || '获取标签信息失败')
}
} catch (error) {
console.error('获取标签创建信息失败:', error)
this.$message.error('获取标签信息失败')
} }
} catch (error) {
console.error("获取标签创建信息失败:", error);
this.$message.error("获取标签信息失败");
} }
} },
},
};
</script>
<style lang="scss" scoped>
.item {
width: 100%;
height: auto;
font-size: 14px;
padding: 16px;
font-weight: 400;
color: #333333;
padding: 10px 0;
transition: all 0.5s;
position: relative;
cursor: pointer;
.label {
font-size: 14px;
color: #999999;
font-weight: 500;
margin-right: 8px;
} }
</script> .tag-icon {
cursor: pointer;
<style lang="scss" scoped>
.item {
width: 100%;
height: auto;
font-size: 14px; font-size: 14px;
padding: 16px;
font-weight: 400;
color: #333333; color: #333333;
padding: 10px 0; margin-right: 8px;
transition: all 0.5s;
position: relative;
cursor: pointer;
.label {
font-size: 14px;
color: #999999;
font-weight: 500;
margin-right: 8px;
}
.tag-icon {
cursor: pointer;
font-size: 14px;
color: #333333;
margin-right: 8px;
}
} }
.zyou-tag-list { }
.tag-group { .zyou-tag-list {
.tag-group {
margin-bottom: 10px;
padding: 10px;
padding-top: 0;
width: 100%;
background: #f7f8fa;
border-radius: 4px;
&:last-child {
margin-bottom: 0;
}
.tag-group-header {
display: flex;
justify-content: space-between;
align-items: center;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
text-align: left;
padding-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; .tag-type-name {
padding-top: 0; font-size: 14px;
width: 100%; color: #323335;
background: #F7F8FA; font-weight: 500;
border-radius: 4px;
&:last-child {
margin-bottom: 0;
} }
.tag-group-header { .el-icon-circle-plus {
display: flex; font-size: 16px;
justify-content: space-between; cursor: pointer;
align-items: center; color: #3491fa !important;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
text-align: left;
padding-top:10px;
margin-bottom: 10px;
.tag-type-name {
font-size: 14px;
color: #323335;
font-weight: 500;
}
.el-icon-circle-plus{
font-size: 16px;
cursor: pointer;
color: #3491FA !important;
}
}
.tag-list {
.el-tag {
font-size: 12px;
color: #323335;
background-color: #fff;
border-radius: 4px;
border: 1px solid #D6D9E0;
margin-bottom: 5px;
}
} }
.add-tag-area { }
margin: 10px 0; .tag-list {
background: #f5f7fa; .el-tag {
font-size: 12px;
color: #323335;
background-color: #fff;
border-radius: 4px; border-radius: 4px;
.add-tag-content { border: 1px solid #d6d9e0;
gap: 12px; margin-bottom: 5px;
.tag-select { }
width: 100%; }
} .add-tag-area {
.button-group { margin: 10px 0;
display: flex; background: #f5f7fa;
justify-content: flex-end; border-radius: 4px;
} .add-tag-content {
gap: 12px;
.tag-select {
width: 100%;
}
.button-group {
display: flex;
justify-content: flex-end;
} }
} }
} }
} }
.tag-icon { }
margin-left: 8px; .tag-icon {
cursor: pointer; margin-left: 8px;
cursor: pointer;
color: #909399;
&:hover {
color: #409eff;
}
}
.tag-info-item {
margin-bottom: 8px;
font-size: 12px;
.tag-info-label {
color: #909399; color: #909399;
&:hover { margin-right: 2px;
color: #409EFF;
}
} }
.tag-info-item {
margin-bottom: 8px; .tag-info-value {
font-size: 12px; color: #333;
font-weight: 500;
.tag-info-label {
color: #909399;
margin-right: 2px;
}
.tag-info-value {
color: #333;
font-weight: 500;
}
} }
</style> }
\ No newline at end of file </style>
src/views/userInfo/components/gameInfo/gameUserInfo.vue
...@@ -300,8 +300,6 @@ ...@@ -300,8 +300,6 @@
</div> </div>
</div> </div>
</div> </div>
<AddTagsDrawer ref="addTagsDrawer" :game-user-info="gameUserInfo" />
</div> </div>
</template> </template>
<script> <script>
...@@ -313,14 +311,13 @@ import moment from "moment"; ...@@ -313,14 +311,13 @@ import moment from "moment";
import ZyouTag from "./ZyouTag.vue"; import ZyouTag from "./ZyouTag.vue";
import { debounce } from "@/utils"; import { debounce } from "@/utils";
import LastLogin from "@/views/components/quickSendGame/sendGame/lastLogin.vue"; import LastLogin from "@/views/components/quickSendGame/sendGame/lastLogin.vue";
import AddTagsDrawer from "@/views/popup/AddTagsDrawer/index.vue";
export default { export default {
name: "gameUserInfo", name: "gameUserInfo",
components: { components: {
ZyouTag, ZyouTag,
MarketingPanel, MarketingPanel,
LastLogin, LastLogin,
AddTagsDrawer,
}, },
props: ["gameUserInfo", "chatUserDetails"], props: ["gameUserInfo", "chatUserDetails"],
data() { data() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论