|
|
@@ -19,23 +19,23 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
-<!-- <el-form-item label="项目" prop="project">-->
|
|
|
-<!-- <el-select v-model="queryParams.project" placeholder="请选择项目" clearable size="small" >-->
|
|
|
-<!-- <el-option-->
|
|
|
-<!-- v-for="item in projectOptions"-->
|
|
|
-<!-- :key="item.dictValue"-->
|
|
|
-<!-- :label="item.dictLabel"-->
|
|
|
-<!-- :value="item.dictValue"-->
|
|
|
-<!-- />-->
|
|
|
-<!-- </el-select>-->
|
|
|
-<!-- </el-form-item>-->
|
|
|
+ <!-- <el-form-item label="项目" prop="project">-->
|
|
|
+ <!-- <el-select v-model="queryParams.project" placeholder="请选择项目" clearable size="small" >-->
|
|
|
+ <!-- <el-option-->
|
|
|
+ <!-- v-for="item in projectOptions"-->
|
|
|
+ <!-- :key="item.dictValue"-->
|
|
|
+ <!-- :label="item.dictLabel"-->
|
|
|
+ <!-- :value="item.dictValue"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
<el-form-item label="企微账号" prop="qwUserId" v-if="queryParams.sendType == 2">
|
|
|
<el-select v-model="queryParams.qwUserId" placeholder="企微账号" clearable size="small"
|
|
|
@change="updateQwuser()">
|
|
|
<el-option
|
|
|
v-for="dict in myQwUserList"
|
|
|
:key="dict.dictValue"
|
|
|
- :label="dict.dictLabel + '('+dict.corpName+')'"
|
|
|
+ :label="dict.dictLabel + '('+dict.qwUserId+':'+dict.corpName+')'"
|
|
|
:value="dict.dictValue"
|
|
|
/>
|
|
|
</el-select>
|
|
|
@@ -49,24 +49,24 @@
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="会员ID" prop="userId" v-if="queryParams.sendType == 1">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.userId"
|
|
|
- placeholder="请输入会员ID"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="会员昵称" prop="nickName" v-if="queryParams.sendType == 1">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.nickName"
|
|
|
- placeholder="请输入会员昵称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="会员ID" prop="userId" v-if="queryParams.sendType == 1">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.userId"
|
|
|
+ placeholder="请输入会员ID"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会员昵称" prop="nickName" v-if="queryParams.sendType == 1">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.nickName"
|
|
|
+ placeholder="请输入会员昵称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="企微客户昵称" prop="nickName" v-if="queryParams.sendType == 2">
|
|
|
<el-input
|
|
|
v-model="queryParams.externalUserName"
|
|
|
@@ -168,7 +168,7 @@
|
|
|
end-placeholder="结束日期"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
style="width: 240px"
|
|
|
- @change="handleScheduleTimeChange"
|
|
|
+ @change="handleScheduleTimeChange"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<!-- 创建时间 -->
|
|
|
@@ -215,7 +215,7 @@
|
|
|
:key="updateCalendarKey"
|
|
|
/>
|
|
|
</el-form-item> -->
|
|
|
- <el-form-item label="最新更新时间" prop="updateTime">
|
|
|
+ <el-form-item label="最新更新时间" prop="updateTime">
|
|
|
<el-date-picker
|
|
|
v-model="updateTimeText"
|
|
|
type="datetimerange"
|
|
|
@@ -223,7 +223,7 @@
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- @change="updateChange"
|
|
|
+ @change="updateChange"
|
|
|
:default-time="['00:00:00', '23:59:59']"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
@@ -243,7 +243,7 @@
|
|
|
:key="qecCalendarKey"
|
|
|
/>
|
|
|
</el-form-item> -->
|
|
|
- <el-form-item label="进线时间" prop="qecCreateTime">
|
|
|
+ <el-form-item label="进线时间" prop="qecCreateTime">
|
|
|
<el-date-picker
|
|
|
v-model="qecCreateTimeText"
|
|
|
type="daterange"
|
|
|
@@ -272,20 +272,20 @@
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
|
|
|
-<!-- <el-form-item label="是否注册" prop="isVip">-->
|
|
|
-<!-- <el-select-->
|
|
|
-<!-- filterable-->
|
|
|
-<!-- v-model="queryParams.isVip"-->
|
|
|
-<!-- placeholder="请选择是否注册"-->
|
|
|
-<!-- clearable size="small">-->
|
|
|
-<!-- <el-option-->
|
|
|
-<!-- v-for="dict in isVipList"-->
|
|
|
-<!-- :key="dict.dictValue"-->
|
|
|
-<!-- :label="dict.dictLabel"-->
|
|
|
-<!-- :value="dict.dictValue"-->
|
|
|
-<!-- />-->
|
|
|
-<!-- </el-select>-->
|
|
|
-<!-- </el-form-item>-->
|
|
|
+ <!-- <el-form-item label="是否注册" prop="isVip">-->
|
|
|
+ <!-- <el-select-->
|
|
|
+ <!-- filterable-->
|
|
|
+ <!-- v-model="queryParams.isVip"-->
|
|
|
+ <!-- placeholder="请选择是否注册"-->
|
|
|
+ <!-- clearable size="small">-->
|
|
|
+ <!-- <el-option-->
|
|
|
+ <!-- v-for="dict in isVipList"-->
|
|
|
+ <!-- :key="dict.dictValue"-->
|
|
|
+ <!-- :label="dict.dictLabel"-->
|
|
|
+ <!-- :value="dict.dictValue"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
<!-- 记录类型 - 仅在全部选项卡时显示 -->
|
|
|
<el-form-item label="记录类型" prop="logType" v-if="activeName === '00'">
|
|
|
<el-select
|
|
|
@@ -340,19 +340,37 @@
|
|
|
type="primary"
|
|
|
plain
|
|
|
size="mini"
|
|
|
- @click="addUserTag"
|
|
|
- v-hasPermi="['qw:externalContact:addTag']"
|
|
|
+ @click="addUserTag(false)"
|
|
|
+ v-hasPermi="['qw:externalContact:addTagByWatch']"
|
|
|
>批量添加标签</el-button>
|
|
|
</el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ size="mini"
|
|
|
+ @click="addUserTag(true)"
|
|
|
+ v-hasPermi="['qw:externalContact:addTagByWatch']"
|
|
|
+ >批量添加标签(筛选条件)</el-button>
|
|
|
+ </el-col>
|
|
|
<el-col :span="1.5" v-if="queryParams.sendType == 2">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
plain
|
|
|
size="mini"
|
|
|
- @click="delUserTag"
|
|
|
- v-hasPermi="['qw:externalContact:delTag']"
|
|
|
+ @click="delUserTag(false)"
|
|
|
+ v-hasPermi="['qw:externalContact:delTagByWatch']"
|
|
|
>批量移除标签</el-button>
|
|
|
</el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ size="mini"
|
|
|
+ @click="delUserTag(true)"
|
|
|
+ v-hasPermi="['qw:externalContact:delTagByWatch']"
|
|
|
+ >批量移除标签(筛选条件)</el-button>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="1.5" v-if="queryParams.sendType == 2">
|
|
|
<el-button
|
|
|
@@ -383,7 +401,7 @@
|
|
|
<el-tab-pane label="全部" name="00"></el-tab-pane>
|
|
|
<el-tab-pane v-for="(item,index) in logTypeOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
-<!-- <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange">-->
|
|
|
+ <!-- <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange">-->
|
|
|
<el-table
|
|
|
border
|
|
|
v-loading="loading"
|
|
|
@@ -409,17 +427,17 @@
|
|
|
<!–
|
|
|
<el-table-column label="会员ID" align="center" prop="userId" v-if="queryParams.sendType == 1"/>
|
|
|
–>
|
|
|
-<!-- <el-table-column label="客户头像" align="center" prop="externalUserAvatar" v-if="queryParams.sendType == 2">-->
|
|
|
-<!-- <template slot-scope="scope">-->
|
|
|
-<!-- <el-popover-->
|
|
|
-<!-- placement="right"-->
|
|
|
-<!-- title=""-->
|
|
|
-<!-- trigger="hover">-->
|
|
|
-<!-- <img slot="reference" :src="scope.row.externalUserAvatar" style="width: 50px;height: 50px">-->
|
|
|
-<!-- <img :src="scope.row.externalUserAvatar" style="max-width: 200px;max-height: 200px">-->
|
|
|
-<!-- </el-popover>-->
|
|
|
-<!-- </template>-->
|
|
|
-<!-- </el-table-column>-->
|
|
|
+ <!-- <el-table-column label="客户头像" align="center" prop="externalUserAvatar" v-if="queryParams.sendType == 2">-->
|
|
|
+ <!-- <template slot-scope="scope">-->
|
|
|
+ <!-- <el-popover-->
|
|
|
+ <!-- placement="right"-->
|
|
|
+ <!-- title=""-->
|
|
|
+ <!-- trigger="hover">-->
|
|
|
+ <!-- <img slot="reference" :src="scope.row.externalUserAvatar" style="width: 50px;height: 50px">-->
|
|
|
+ <!-- <img :src="scope.row.externalUserAvatar" style="max-width: 200px;max-height: 200px">-->
|
|
|
+ <!-- </el-popover>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- </el-table-column>-->
|
|
|
<el-table-column label="头像" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<img
|
|
|
@@ -445,23 +463,34 @@
|
|
|
<img v-else :src="scope.row.externalUserAvatar" style="width:50px;height:50px" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="营期名称" align="center" prop="periodIdName" v-if="this.queryParams.sendType==1" />
|
|
|
- <el-table-column label="课程名称" align="center" prop="courseName"/>
|
|
|
- <el-table-column label="小节名称" align="center" prop="videoName"/>
|
|
|
- <el-table-column label="记录类型" align="center" prop="logType">
|
|
|
+ <el-table-column label="标签" align="center" prop="tagIdsName" width="200px" v-if="queryParams.sendType == 2">
|
|
|
<template slot-scope="scope">
|
|
|
- <dict-tag :options="logTypeOptions" :value="scope.row.logType"/>
|
|
|
+ <div class="tag-container">
|
|
|
+ <div class="tag-list">
|
|
|
+ <el-tag
|
|
|
+ v-for="name in scope.row.tagIdsName"
|
|
|
+ :key="name"
|
|
|
+ type="success"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ {{ name }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column label="营期名称" align="center" prop="periodIdName" v-if="this.queryParams.sendType==1" />
|
|
|
+ <el-table-column label="课程名称" align="center" prop="courseName"/>
|
|
|
+ <el-table-column label="小节名称" align="center" prop="videoName"/>
|
|
|
<el-table-column label="播放时长" align="center" prop="duration"/>
|
|
|
<el-table-column label="看课类型" align="center">
|
|
|
<template slot-scope="{ row }">
|
|
|
{{ row.watchType === 1 ? 'APP' : row.watchType === 2 ? '小程序' : '-' }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-<!-- <el-table-column label="所属销售" align="center" prop="companyUserName"/>-->
|
|
|
-<!-- <el-table-column label="所属公司" align="center" prop="companyName"/>-->
|
|
|
-<!-- <el-table-column label="企微员工名称" align="center" prop="qwUserName"/>-->
|
|
|
+ <!-- <el-table-column label="所属销售" align="center" prop="companyUserName"/>-->
|
|
|
+ <!-- <el-table-column label="所属公司" align="center" prop="companyName"/>-->
|
|
|
+ <!-- <el-table-column label="企微员工名称" align="center" prop="qwUserName"/>-->
|
|
|
<!-- 所属企微列 -->
|
|
|
<el-table-column
|
|
|
label="所属企微"
|
|
|
@@ -485,6 +514,11 @@
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column label="记录类型" align="center" prop="logType">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <dict-tag :options="logTypeOptions" :value="scope.row.logType"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="会员状态" align="center" prop="externalStatus">
|
|
|
<template slot-scope="scope">
|
|
|
<dict-tag :options="externalStatusOptions" :value="scope.row.externalStatus"/>
|
|
|
@@ -564,7 +598,7 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="小节名称" align="center" prop="title" />
|
|
|
-<!-- <el-table-column label="会员id" align="center" prop="userId" />-->
|
|
|
+ <!-- <el-table-column label="会员id" align="center" prop="userId" />-->
|
|
|
<el-table-column label="会员用户" align="center" prop="fsNickName">
|
|
|
<template slot-scope="scope">
|
|
|
<div style="display: flex;white-space: nowrap">
|
|
|
@@ -581,17 +615,17 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-<!-- <el-table-column label="会员电话" align="center" prop="phone" />-->
|
|
|
-<!-- <el-table-column label="所属销售" align="center" prop="companyUserName" />-->
|
|
|
-<!-- <el-table-column label="所属公司" align="center" prop="companyName" />-->
|
|
|
+ <!-- <el-table-column label="会员电话" align="center" prop="phone" />-->
|
|
|
+ <!-- <el-table-column label="所属销售" align="center" prop="companyUserName" />-->
|
|
|
+ <!-- <el-table-column label="所属公司" align="center" prop="companyName" />-->
|
|
|
<el-table-column label="转账金额" align="center" prop="amount" />
|
|
|
<el-table-column label="状态" align="center" prop="status" >
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag>
|
|
|
{{
|
|
|
scope.row.status === 0 ? "发送中" :
|
|
|
- scope.row.status === 2 ? "待补发" :
|
|
|
- "已完成"
|
|
|
+ scope.row.status === 2 ? "待补发" :
|
|
|
+ "已完成"
|
|
|
}}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
@@ -669,7 +703,7 @@
|
|
|
@click="tagSelection(tagItem)"
|
|
|
:class="{ 'tag-selected': tagItem.isSelected }"
|
|
|
>
|
|
|
- {{ tagItem.name }}
|
|
|
+ {{ tagItem.name }} 【{{tagItem.corpName}}】
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -699,7 +733,7 @@
|
|
|
<el-button @click="resultDialogVisible = false">关闭</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
- <el-dialog title="批量添加客户备注" :visible.sync="notesOpen.open" width="800px" append-to-body>
|
|
|
+ <el-dialog title="批量添加客户备注" :visible.sync="notesOpen.open" width="800px" append-to-body>
|
|
|
<el-card>
|
|
|
<el-row>
|
|
|
<el-col>
|
|
|
@@ -916,11 +950,12 @@ export default {
|
|
|
},
|
|
|
addTagFormByWatch:{
|
|
|
logId:[],
|
|
|
- tagIds:[]
|
|
|
+ tagIds:[],
|
|
|
+ filter: false,
|
|
|
},
|
|
|
tagGroupList: [],
|
|
|
tagTotal:0,
|
|
|
-
|
|
|
+ tagFilter:false,
|
|
|
tagDelOpen:false,
|
|
|
|
|
|
queryTagParams:{
|
|
|
@@ -1004,7 +1039,7 @@ export default {
|
|
|
this.getDicts("sys_qw_external_contact_status").then(response => {
|
|
|
this.externalStatusOptions = response.data;
|
|
|
});
|
|
|
- // 查询营期名称
|
|
|
+ // 查询营期名称
|
|
|
listPeriodLabel().then(response => {
|
|
|
this.scheduleLists = response.rows;
|
|
|
});
|
|
|
@@ -1517,9 +1552,13 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- addUserTag(){
|
|
|
+ addUserTag(tagFilter){
|
|
|
+
|
|
|
+ if (this.queryParams.sendType == 2 && !this.queryParams.qwUserId){
|
|
|
+ return this.$message.warning('请先选择要打标签的 企微账号');
|
|
|
+ }
|
|
|
|
|
|
- if(this.ids==null||this.ids==""){
|
|
|
+ if(!tagFilter && (this.ids==null||this.ids=="")){
|
|
|
return this.$message('请选择需要添加标签的客户');
|
|
|
}
|
|
|
|
|
|
@@ -1536,12 +1575,18 @@ export default {
|
|
|
|
|
|
|
|
|
this.tagOpen = true;
|
|
|
-
|
|
|
+ this.tagFilter = tagFilter;
|
|
|
},
|
|
|
|
|
|
- delUserTag(){
|
|
|
|
|
|
- if(this.ids==null||this.ids==""){
|
|
|
+
|
|
|
+ delUserTag(tagFilter){
|
|
|
+
|
|
|
+ if (this.queryParams.sendType == 2 && !this.queryParams.qwUserId){
|
|
|
+ return this.$message.warning('请先选择要打标签的 企微账号');
|
|
|
+ }
|
|
|
+
|
|
|
+ if(!tagFilter && (this.ids==null||this.ids=="")){
|
|
|
return this.$message('请选择需要移除标签的客户');
|
|
|
}
|
|
|
this.getPageListTagGroup();
|
|
|
@@ -1555,6 +1600,7 @@ export default {
|
|
|
}, 200);
|
|
|
|
|
|
this.tagDelOpen = true;
|
|
|
+ this.tagFilter = tagFilter;
|
|
|
|
|
|
},
|
|
|
|
|
|
@@ -1622,6 +1668,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.addTagFormByWatch.logIds=this.ids;
|
|
|
+ this.addTagFormByWatch.filter = this.tagFilter;
|
|
|
+
|
|
|
+ // 修改这里：正确处理参数对象
|
|
|
+ this.addTagFormByWatch.param = JSON.parse(JSON.stringify(this.queryParams));
|
|
|
|
|
|
|
|
|
let loadingRock = this.$loading({
|
|
|
@@ -1664,8 +1714,11 @@ export default {
|
|
|
if(this.addTagFormByWatch.tagIds==[]||this.addTagFormByWatch.tagIds==null||this.addTagFormByWatch.tagIds==""){
|
|
|
return this.$message('请选择标签');
|
|
|
}
|
|
|
- this.addTagFormByWatch.corpId=this.queryParams.corpId
|
|
|
+
|
|
|
this.addTagFormByWatch.logIds=this.ids;
|
|
|
+ this.addTagFormByWatch.filter = this.tagFilter;
|
|
|
+ // 修改这里：正确处理参数对象
|
|
|
+ this.addTagFormByWatch.param = JSON.parse(JSON.stringify(this.queryParams));
|
|
|
|
|
|
let loadingRock = this.$loading({
|
|
|
lock: true,
|
|
|
@@ -1941,4 +1994,134 @@ export default {
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
+/* CSS 样式 */
|
|
|
+.tag-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap; /* 超出宽度时自动换行 */
|
|
|
+ gap: 8px; /* 设置标签之间的间距 */
|
|
|
+}
|
|
|
+.name-background {
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #abece6; /* 背景颜色 */
|
|
|
+ padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
|
|
|
+ border-radius: 4px; /* 可选：设置圆角 */
|
|
|
+}
|
|
|
+/* CSS 样式 */
|
|
|
+.tag-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap; /* 超出宽度时自动换行 */
|
|
|
+ gap: 8px; /* 设置标签之间的间距 */
|
|
|
+}
|
|
|
+.name-background {
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #abece6; /* 背景颜色 */
|
|
|
+ padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
|
|
|
+ border-radius: 4px; /* 可选：设置圆角 */
|
|
|
+}
|
|
|
+.tag-box {
|
|
|
+ padding: 8px 12px;
|
|
|
+ border: 1px solid #989797;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-selected {
|
|
|
+ background-color: #00bc98;
|
|
|
+ color: #fff;
|
|
|
+ border-color: #00bc98;
|
|
|
+}
|
|
|
+
|
|
|
+.el-tag + .el-tag {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.button-new-tag {
|
|
|
+ margin-left: 10px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-top: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+}
|
|
|
+.input-new-tag {
|
|
|
+ width: 90px;
|
|
|
+ margin-left: 10px;
|
|
|
+ vertical-align: bottom;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.suggestion-box {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.suggestion-item {
|
|
|
+ padding: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.suggestion-item:hover {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+}
|
|
|
+/* 新增的滚动容器样式（不影响原有样式） */
|
|
|
+.scroll-wrapper {
|
|
|
+ max-height: 130px; /* 大约三行的高度 */
|
|
|
+ overflow-y: auto; /* 垂直滚动 */
|
|
|
+ padding-right: 5px; /* 为滚动条留出空间 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 美化滚动条（可选） */
|
|
|
+.scroll-wrapper::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+}
|
|
|
+.scroll-wrapper::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-container {
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 1px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-radius: 1px;
|
|
|
+ background-color: #fafafa;
|
|
|
+}
|
|
|
+.tag-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+.scroll-hint {
|
|
|
+ text-align: center;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 1px 0;
|
|
|
+}
|
|
|
+.container {
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ text-align: center;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.demo-table {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.instructions {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 1px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
</style>
|
