myCourseWatchLog.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
  4. <el-form-item label="企微账号" prop="qwUserId">
  5. <el-select v-model="queryParams.qwUserId" placeholder="企微账号" clearable size="small" @change="updateQwuser()">
  6. <el-option
  7. v-for="dict in myQwUserList"
  8. :key="dict.dictValue"
  9. :label="dict.dictLabel + '('+dict.corpName+')'"
  10. :value="dict.dictValue"
  11. />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="客户ID" prop="qwExternalContactId">
  15. <el-input
  16. v-model="queryParams.qwExternalContactId"
  17. placeholder="请输入会员ID"
  18. clearable
  19. size="small"
  20. @keyup.enter.native="handleQuery"
  21. />
  22. </el-form-item>
  23. <el-form-item label="会员ID" prop="userId">
  24. <el-input
  25. v-model="queryParams.userId"
  26. placeholder="请输入会员ID"
  27. clearable
  28. size="small"
  29. @keyup.enter.native="handleQuery"
  30. />
  31. </el-form-item>
  32. <el-form-item label="会员昵称" prop="nickName">
  33. <el-input
  34. v-model="queryParams.nickName"
  35. placeholder="请输入会员昵称"
  36. clearable
  37. size="small"
  38. @keyup.enter.native="handleQuery"
  39. />
  40. </el-form-item>
  41. <el-form-item label="企微客户昵称" prop="nickName">
  42. <el-input
  43. v-model="queryParams.externalUserName"
  44. placeholder="请输入企微客户昵称"
  45. clearable
  46. size="small"
  47. @keyup.enter.native="handleQuery"
  48. />
  49. </el-form-item>
  50. <el-form-item label="课程" prop="courseId">
  51. <el-select filterable v-model="queryParams.courseId" placeholder="请选择课程" clearable size="small" @change="courseChange(queryParams.courseId)">
  52. <el-option
  53. v-for="dict in courseLists"
  54. :key="dict.dictValue"
  55. :label="dict.dictLabel"
  56. :value="dict.dictValue"
  57. />
  58. </el-select>
  59. </el-form-item>
  60. <el-form-item label="小节" prop="videoId">
  61. <el-select filterable v-model="queryParams.videoId" placeholder="请选择小节" clearable size="small">
  62. <el-option
  63. v-for="dict in videoList"
  64. :key="dict.dictValue"
  65. :label="dict.dictLabel"
  66. :value="dict.dictValue"
  67. />
  68. </el-select>
  69. </el-form-item>
  70. <el-form-item label="创建时间" prop="createTime">
  71. <el-date-picker v-model="createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"></el-date-picker>
  72. </el-form-item>
  73. <el-table-column label="完课时间" align="center" prop="finishTime" />
  74. <el-table-column label="营期时间" align="center" prop="campPeriodTime" />
  75. <el-form-item>
  76. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  77. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  78. </el-form-item>
  79. </el-form>
  80. <el-row :gutter="10" class="mb8">
  81. <el-col :span="1.5">
  82. <el-button
  83. type="warning"
  84. plain
  85. icon="el-icon-download"
  86. size="mini"
  87. :loading="exportLoading"
  88. @click="handleExport"
  89. v-hasPermi="['course:courseWatchLog:myExport']"
  90. >导出</el-button>
  91. </el-col>
  92. <el-col :span="1.5">
  93. <el-button
  94. type="primary"
  95. plain
  96. size="mini"
  97. @click="addUserTag"
  98. v-hasPermi="['qw:externalContact:addTag']"
  99. >批量添加标签</el-button>
  100. </el-col>
  101. <el-col :span="1.5">
  102. <el-button
  103. type="primary"
  104. plain
  105. size="mini"
  106. @click="delUserTag"
  107. v-hasPermi="['qw:externalContact:delTag']"
  108. >批量移除标签</el-button>
  109. </el-col>
  110. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  111. </el-row>
  112. <el-tabs type="card" v-model="queryParams.logType" @tab-click="handleClickX">
  113. <el-tab-pane label="全部" name="10"></el-tab-pane>
  114. <el-tab-pane v-for="(item,index) in logTypeOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
  115. </el-tabs>
  116. <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange">
  117. <el-table-column type="selection" width="55" align="center" />
  118. <el-table-column label="记录编号" align="center" prop="logId" />
  119. <el-table-column label="企微客户" align="center" prop="externalUserName"/>
  120. <el-table-column label="会员ID" align="center" prop="userId" />
  121. <el-table-column label="会员昵称" align="center" prop="fsNickName">
  122. <template slot-scope="scope">
  123. <div style="display: flex;white-space: nowrap">
  124. <div style="margin: auto">
  125. {{scope.row.fsNickName}}
  126. </div>
  127. <el-popover
  128. placement="right"
  129. title=""
  130. trigger="hover">
  131. <img slot="reference" :src="scope.row.fsAvatar" style="width: 30px;height: 30px">
  132. <img :src="scope.row.fsAvatar" style="max-width: 200px;max-height: 200px">
  133. </el-popover>
  134. </div>
  135. </template>
  136. </el-table-column>
  137. <el-table-column label="课程名称" align="center" prop="courseName" />
  138. <el-table-column label="小节名称" align="center" prop="videoName" />
  139. <el-table-column label="记录类型" align="center" prop="logType">
  140. <template slot-scope="scope">
  141. <dict-tag :options="logTypeOptions" :value="scope.row.logType"/>
  142. </template>
  143. </el-table-column>
  144. <el-table-column label="播放时长" align="center" prop="duration" />
  145. <el-table-column label="所属销售" align="center" prop="companyUserName" />
  146. <el-table-column label="所属公司" align="center" prop="companyName" />
  147. <el-table-column label="企微员工名称" align="center" prop="qwUserName" />
  148. <el-table-column label="企微账号" align="center" prop="qwUserName" />
  149. <el-table-column label="所属发送方式" align="center" prop="sendType" />
  150. <el-table-column label="创建时间" align="center" prop="createTime" />
  151. <!-- <el-table-column label="更新时间" align="center" prop="updateTime" />-->
  152. <el-table-column label="完课时间" align="center" prop="lastHeartbeatTime" />
  153. </el-table>
  154. <pagination
  155. v-show="total>0"
  156. :total="total"
  157. :page.sync="queryParams.pageNum"
  158. :limit.sync="queryParams.pageSize"
  159. @pagination="getList"
  160. />
  161. <el-dialog title="批量添加标签" :visible.sync="tagOpen" width="800px" append-to-body>
  162. <div>搜索标签:
  163. <el-input v-model="tagChange.tagName" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
  164. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(tagChange.tagName)">搜索</el-button>
  165. <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
  166. </div>
  167. <el-form ref="form" :model="addTagFormByWatch" label-width="80px">
  168. <div v-for="item in tagGroupList" :key="item.id" >
  169. <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
  170. <span class="name-background">{{ item.name }}</span>
  171. </div>
  172. <!-- 添加外层滚动容器 -->
  173. <div class="scroll-wrapper">
  174. <div class="tag-container">
  175. <a
  176. v-for="tagItem in item.tag"
  177. class="tag-box"
  178. @click="tagSelection(tagItem)"
  179. :class="{ 'tag-selected': tagItem.isSelected }"
  180. >
  181. {{ tagItem.name }}
  182. </a>
  183. </div>
  184. </div>
  185. </div>
  186. </el-form>
  187. <pagination
  188. v-show="tagTotal>0"
  189. :total="tagTotal"
  190. :page.sync="queryTagParams.pageNum"
  191. :limit.sync="queryTagParams.pageSize"
  192. @pagination="getPageListTagGroup"
  193. />
  194. <div slot="footer" class="dialog-footer">
  195. <el-button type="primary" @click="addTagSubmitForm()">确 定</el-button>
  196. <el-button @click="addTagCancel">取 消</el-button>
  197. </div>
  198. </el-dialog>
  199. <el-dialog title="批量移除标签" :visible.sync="tagDelOpen" width="800px" append-to-body>
  200. <div>搜索标签:
  201. <el-input v-model="tagChange.tagName" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
  202. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(tagChange.tagName)">搜索</el-button>
  203. <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
  204. </div>
  205. <el-form ref="form" :model="addTagFormByWatch" label-width="80px">
  206. <div v-for="item in tagGroupList" :key="item.id" >
  207. <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
  208. <span class="name-background">{{ item.name }}</span>
  209. </div>
  210. <!-- 添加外层滚动容器 -->
  211. <div class="scroll-wrapper">
  212. <div class="tag-container">
  213. <a
  214. v-for="tagItem in item.tag"
  215. class="tag-box"
  216. @click="tagSelection(tagItem)"
  217. :class="{ 'tag-selected': tagItem.isSelected }"
  218. >
  219. {{ tagItem.name }}
  220. </a>
  221. </div>
  222. </div>
  223. </div>
  224. </el-form>
  225. <pagination
  226. v-show="tagTotal>0"
  227. :total="tagTotal"
  228. :page.sync="queryTagParams.pageNum"
  229. :limit.sync="queryTagParams.pageSize"
  230. @pagination="getPageListTagGroup"
  231. />
  232. <div slot="footer" class="dialog-footer">
  233. <el-button type="primary" @click="tagDelSubmitForm()">确 定</el-button>
  234. <el-button @click="DelTagCancel">取 消</el-button>
  235. </div>
  236. </el-dialog>
  237. <el-dialog
  238. :title="resultTitle"
  239. :visible.sync="resultDialogVisible"
  240. width="50%"
  241. custom-class="feedback-dialog"
  242. >
  243. <pre style="white-space: pre-wrap; font-family: inherit;">{{ resultMessage }}</pre>
  244. <span slot="footer" class="dialog-footer">
  245. <el-button @click="resultDialogVisible = false">关闭</el-button>
  246. </span>
  247. </el-dialog>
  248. </div>
  249. </template>
  250. <script>
  251. import { myListCourseWatchLog, getCourseWatchLog, delCourseWatchLog, addCourseWatchLog, updateCourseWatchLog, exportCourseWatchLog } from "@/api/course/courseWatchLog";
  252. import { courseList,videoList } from '@/api/course/courseRedPacketLog'
  253. import {getMyQwUserList} from "@/api/qw/user";
  254. import {allListTagGroup} from "../../../api/qw/tagGroup";
  255. import {searchTags} from "../../../api/qw/tag";
  256. import {addTagByWatch, delTagByWatch} from "../../../api/qw/externalContact";
  257. export default {
  258. name: "CourseWatchLog",
  259. data() {
  260. return {
  261. resultDialogVisible: false,
  262. resultMessage: '',
  263. resultTitle:'',
  264. createTime:null,
  265. courseLists:[],
  266. videoList:[],
  267. myQwUserList:[],
  268. logTypeOptions:[],
  269. // 遮罩层
  270. loading: true,
  271. // 导出遮罩层
  272. exportLoading: false,
  273. // 选中数组
  274. ids: [],
  275. // 非单个禁用
  276. single: true,
  277. // 非多个禁用
  278. multiple: true,
  279. // 显示搜索条件
  280. showSearch: true,
  281. // 总条数
  282. total: 0,
  283. // 短链课程看课记录表格数据
  284. courseWatchLogList: [],
  285. // 弹出层标题
  286. title: "",
  287. // 是否显示弹出层
  288. open: false,
  289. tagOpen:false,
  290. //标签弹窗选择
  291. tagChange:{
  292. open:false,
  293. index:null,
  294. },
  295. addTagFormByWatch:{
  296. logId:[],
  297. tagIds:[]
  298. },
  299. tagGroupList: [],
  300. tagTotal:0,
  301. tagDelOpen:false,
  302. queryTagParams:{
  303. pageNum: 1,
  304. pageSize: 5,
  305. total:0,
  306. name:null,
  307. corpId:null,
  308. },
  309. // 查询参数
  310. queryParams: {
  311. pageNum: 1,
  312. pageSize: 10,
  313. userId: null,
  314. videoId: null,
  315. nickName:null,
  316. logType: "10",
  317. qwExternalContactId: null,
  318. externalUserName:null,
  319. duration: null,
  320. qwUserId: null,
  321. companyUserId: null,
  322. companyId: null,
  323. courseId: null,
  324. sTime:null,
  325. eTime:null,
  326. scheduleStartTime: null,
  327. scheduleEndTime: null,
  328. },
  329. // 表单参数
  330. form: {},
  331. // 表单校验
  332. rules: {
  333. }
  334. };
  335. },
  336. created() {
  337. courseList().then(response => {
  338. this.courseLists = response.list;
  339. });
  340. this.getList();
  341. this.getDicts("sys_course_watch_log_type").then(response => {
  342. this.logTypeOptions = response.data;
  343. });
  344. getMyQwUserList().then(response => {
  345. this.myQwUserList = response.data;
  346. });
  347. },
  348. methods: {
  349. courseChange(row){
  350. this.queryParams.videoId=null;
  351. if(row === ''){
  352. this.videoList=[];
  353. return
  354. }
  355. videoList(row).then(response => {
  356. this.videoList=response.list
  357. });
  358. },
  359. updateQwuser(){
  360. for (const user of this.myQwUserList) {
  361. if (user.dictValue == this.queryParams.qwUserId) {
  362. this.queryParams.corpId=user.corpId;
  363. break;
  364. }
  365. }
  366. this.getList();
  367. },
  368. change() {
  369. if (this.createTime != null) {
  370. this.queryParams.sTime = this.createTime[0];
  371. this.queryParams.eTime = this.createTime[1];
  372. } else {
  373. this.queryParams.sTime = null;
  374. this.queryParams.eTime = null;
  375. }
  376. },
  377. handleClickX(tab){
  378. if(tab.name==="10"){
  379. this.queryParams.logType=null;
  380. }else{
  381. this.queryParams.logType=tab.name;
  382. }
  383. this.getList()
  384. },
  385. /** 查询短链课程看课记录列表 */
  386. getList() {
  387. this.loading = true;
  388. myListCourseWatchLog(this.queryParams).then(response => {
  389. this.courseWatchLogList = response.rows;
  390. this.total = response.total;
  391. this.loading = false;
  392. });
  393. },
  394. // 取消按钮
  395. cancel() {
  396. this.open = false;
  397. this.reset();
  398. },
  399. // 表单重置
  400. reset() {
  401. this.form = {
  402. logId: null,
  403. userId: null,
  404. videoId: null,
  405. logType: null,
  406. createTime: null,
  407. updateTime: null,
  408. qwExternalContactId: null,
  409. externalUserName:null,
  410. duration: null,
  411. qwUserId: null,
  412. companyUserId: null,
  413. companyId: null,
  414. courseId: null,
  415. scheduleStartTime: null,
  416. scheduleEndTime: null,
  417. };
  418. this.scheduleTime=null;
  419. this.resetForm("form");
  420. },
  421. /** 搜索按钮操作 */
  422. handleQuery() {
  423. this.queryParams.pageNum = 1;
  424. this.getList();
  425. },
  426. /** 重置按钮操作 */
  427. resetQuery() {
  428. this.resetForm("queryForm");
  429. this.createTime = null;
  430. this.queryParams.sTime = null;
  431. this.queryParams.eTime = null;
  432. this.queryParams.scheduleStartTime = null;
  433. this.queryParams.scheduleEndTime = null;
  434. this.scheduleTime=null;
  435. this.handleQuery();
  436. },
  437. // 多选框选中数据
  438. handleSelectionChange(selection) {
  439. this.ids = selection.map(item => item.logId)
  440. this.single = selection.length!==1
  441. this.multiple = !selection.length
  442. },
  443. /** 新增按钮操作 */
  444. handleAdd() {
  445. this.reset();
  446. this.open = true;
  447. this.title = "添加短链课程看课记录";
  448. },
  449. /** 修改按钮操作 */
  450. handleUpdate(row) {
  451. this.reset();
  452. const logId = row.logId || this.ids
  453. getCourseWatchLog(logId).then(response => {
  454. this.form = response.data;
  455. this.open = true;
  456. this.title = "修改短链课程看课记录";
  457. });
  458. },
  459. /** 提交按钮 */
  460. submitForm() {
  461. this.$refs["form"].validate(valid => {
  462. if (valid) {
  463. if (this.form.logId != null) {
  464. updateCourseWatchLog(this.form).then(response => {
  465. this.msgSuccess("修改成功");
  466. this.open = false;
  467. this.getList();
  468. });
  469. } else {
  470. addCourseWatchLog(this.form).then(response => {
  471. this.msgSuccess("新增成功");
  472. this.open = false;
  473. this.getList();
  474. });
  475. }
  476. }
  477. });
  478. },
  479. /** 删除按钮操作 */
  480. handleDelete(row) {
  481. const logIds = row.logId || this.ids;
  482. this.$confirm('是否确认删除短链课程看课记录编号为"' + logIds + '"的数据项?', "警告", {
  483. confirmButtonText: "确定",
  484. cancelButtonText: "取消",
  485. type: "warning"
  486. }).then(function() {
  487. return delCourseWatchLog(logIds);
  488. }).then(() => {
  489. this.getList();
  490. this.msgSuccess("删除成功");
  491. }).catch(() => {});
  492. },
  493. /** 导出按钮操作 */
  494. handleExport() {
  495. const queryParams = this.queryParams;
  496. this.$confirm('是否确认导出所有短链课程看课记录数据项?', "警告", {
  497. confirmButtonText: "确定",
  498. cancelButtonText: "取消",
  499. type: "warning"
  500. }).then(() => {
  501. this.exportLoading = true;
  502. return exportCourseWatchLog(queryParams);
  503. }).then(response => {
  504. this.download(response.msg);
  505. this.exportLoading = false;
  506. }).catch(() => {});
  507. },
  508. addUserTag(){
  509. if(this.ids==null||this.ids==""){
  510. return this.$message('请选择需要添加标签的客户');
  511. }
  512. this.getPageListTagGroup();
  513. setTimeout(() => {
  514. for (let i = 0; i < this.tagGroupList.length; i++) {
  515. for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
  516. this.tagGroupList[i].tag[x].isSelected=false;
  517. }
  518. }
  519. }, 200);
  520. this.tagOpen = true;
  521. },
  522. delUserTag(){
  523. if(this.ids==null||this.ids==""){
  524. return this.$message('请选择需要移除标签的客户');
  525. }
  526. this.getPageListTagGroup();
  527. setTimeout(() => {
  528. for (let i = 0; i < this.tagGroupList.length; i++) {
  529. for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
  530. this.tagGroupList[i].tag[x].isSelected=false;
  531. }
  532. }
  533. }, 200);
  534. this.tagDelOpen = true;
  535. },
  536. getPageListTagGroup(){
  537. this.queryTagParams.corpId=this.queryParams.corpId
  538. allListTagGroup(this.queryTagParams).then(response => {
  539. this.tagGroupList = response.rows;
  540. this.tagTotal = response.total;
  541. });
  542. },
  543. tagSelection(row){
  544. row.isSelected= !row.isSelected;
  545. this.$forceUpdate();
  546. },
  547. handleSearchTags(name){
  548. if (!name){
  549. return this.$message.error("请输入要搜索的标签")
  550. }
  551. this.queryTagParams.name=name;
  552. this.queryTagParams.corpId=this.queryParams.corpId;
  553. searchTags(this.queryTagParams).then(response => {
  554. this.tagGroupList = response.rows;
  555. });
  556. // searchTags({name:name,corpId:this.queryParams.corpId}).then(response => {
  557. // this.tagGroupList = response.rows;
  558. // });
  559. },
  560. cancelSearchTags(){
  561. this.resetSearchQueryTag()
  562. this.getPageListTagGroup();
  563. },
  564. resetSearchQueryTag(){
  565. this.queryTagParams= {
  566. pageNum: 1,
  567. pageSize: 5,
  568. total:0,
  569. name:null,
  570. };
  571. },
  572. addTagSubmitForm(){
  573. for (let i = 0; i < this.tagGroupList.length; i++) {
  574. for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
  575. if(this.tagGroupList[i].tag[x].isSelected==true){
  576. this.addTagFormByWatch.tagIds.push(this.tagGroupList[i].tag[x].tagId)
  577. }
  578. }
  579. }
  580. if(this.addTagFormByWatch.tagIds==[]||this.addTagFormByWatch.tagIds==null||this.addTagFormByWatch.tagIds==""){
  581. return this.$message('请选择标签');
  582. }
  583. this.addTagFormByWatch.logIds=this.ids;
  584. let loadingRock = this.$loading({
  585. lock: true,
  586. text: '正在执行中请稍后~~请不要刷新页面!!',
  587. spinner: 'el-icon-loading',
  588. background: 'rgba(0, 0, 0, 0.7)'
  589. });
  590. addTagByWatch(this.addTagFormByWatch).then(response => {
  591. // this.msgSuccess(response.msg);
  592. this.resultMessage = response.msg;
  593. this.resultDialogVisible = true; // 显示弹窗
  594. this.resultTitle = '批量添加标签结果';
  595. this.tagOpen = false;
  596. loadingRock.close();
  597. this.addTagFormByWatch={
  598. logIds:[],
  599. tagIds:[]
  600. };
  601. this.getList()
  602. }).finally(res=>{
  603. loadingRock.close();
  604. });
  605. },
  606. tagDelSubmitForm(){
  607. for (let i = 0; i < this.tagGroupList.length; i++) {
  608. for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
  609. if(this.tagGroupList[i].tag[x].isSelected==true){
  610. this.addTagFormByWatch.tagIds.push(this.tagGroupList[i].tag[x].tagId)
  611. }
  612. }
  613. }
  614. if(this.addTagFormByWatch.tagIds==[]||this.addTagFormByWatch.tagIds==null||this.addTagFormByWatch.tagIds==""){
  615. return this.$message('请选择标签');
  616. }
  617. this.addTagFormByWatch.corpId=this.queryParams.corpId
  618. this.addTagFormByWatch.logIds=this.ids;
  619. let loadingRock = this.$loading({
  620. lock: true,
  621. text: '正在执行中请稍后~~请不要刷新页面!!',
  622. spinner: 'el-icon-loading',
  623. background: 'rgba(0, 0, 0, 0.7)'
  624. });
  625. delTagByWatch(this.addTagFormByWatch).then(response => {
  626. // this.msgSuccess(response.msg);
  627. this.resultMessage = response.msg;
  628. this.resultDialogVisible = true; // 显示弹窗
  629. this.resultTitle = '批量移除标签结果';
  630. this.tagDelOpen = false;
  631. loadingRock.close();
  632. this.addTagFormByWatch={
  633. userIds:[],
  634. tagIds:[]
  635. };
  636. this.getList()
  637. }).finally(res=>{
  638. loadingRock.close();
  639. });
  640. },
  641. addTagCancel() {
  642. this.tagOpen = false;
  643. this.addTagFormByWatch={
  644. logIds:[],
  645. tagIds:[]
  646. };
  647. },
  648. DelTagCancel() {
  649. this.tagDelOpen = false;
  650. this.addTagFormByWatch={
  651. logIds:[],
  652. tagIds:[]
  653. };
  654. },
  655. }
  656. };
  657. </script>
  658. <style scoped>
  659. /* CSS 样式 */
  660. .tag-container {
  661. display: flex;
  662. flex-wrap: wrap; /* 超出宽度时自动换行 */
  663. gap: 8px; /* 设置标签之间的间距 */
  664. }
  665. .name-background {
  666. display: inline-block;
  667. background-color: #abece6; /* 背景颜色 */
  668. padding: 4px 8px; /* 调整内边距,让背景包裹文字 */
  669. border-radius: 4px; /* 可选:设置圆角 */
  670. }
  671. /* CSS 样式 */
  672. .tag-container {
  673. display: flex;
  674. flex-wrap: wrap; /* 超出宽度时自动换行 */
  675. gap: 8px; /* 设置标签之间的间距 */
  676. }
  677. .name-background {
  678. display: inline-block;
  679. background-color: #abece6; /* 背景颜色 */
  680. padding: 4px 8px; /* 调整内边距,让背景包裹文字 */
  681. border-radius: 4px; /* 可选:设置圆角 */
  682. }
  683. .tag-box {
  684. padding: 8px 12px;
  685. border: 1px solid #989797;
  686. border-radius: 4px;
  687. cursor: pointer;
  688. display: inline-block;
  689. }
  690. .tag-selected {
  691. background-color: #00bc98;
  692. color: #fff;
  693. border-color: #00bc98;
  694. }
  695. .el-tag + .el-tag {
  696. margin-left: 10px;
  697. }
  698. .button-new-tag {
  699. margin-left: 10px;
  700. height: 32px;
  701. line-height: 30px;
  702. padding-top: 0;
  703. padding-bottom: 0;
  704. }
  705. .input-new-tag {
  706. width: 90px;
  707. margin-left: 10px;
  708. vertical-align: bottom;
  709. }
  710. /* 新增的滚动容器样式(不影响原有样式) */
  711. .scroll-wrapper {
  712. max-height: 130px; /* 大约三行的高度 */
  713. overflow-y: auto; /* 垂直滚动 */
  714. padding-right: 5px; /* 为滚动条留出空间 */
  715. }
  716. /* 美化滚动条(可选) */
  717. .scroll-wrapper::-webkit-scrollbar {
  718. width: 6px;
  719. }
  720. .scroll-wrapper::-webkit-scrollbar-thumb {
  721. background: rgba(0, 0, 0, 0.2);
  722. border-radius: 3px;
  723. }
  724. </style>