watchLog.vue 47 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521
  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="sendType">
  5. <el-select v-model="queryParams.sendType" placeholder="选择看课方式" clearable size="small" @change="handleSendTypeChange">
  6. <el-option
  7. v-for="dict in sendTypeOptions"
  8. :key="dict.dictValue"
  9. :label="dict.dictLabel"
  10. :value="dict.dictValue"
  11. />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="项目" prop="project">
  15. <el-select v-model="queryParams.project" placeholder="请选择项目" clearable size="small" >
  16. <el-option
  17. v-for="item in projectOptions"
  18. :key="item.dictValue"
  19. :label="item.dictLabel"
  20. :value="item.dictValue"
  21. />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="企微账号" prop="qwUserId" v-if="queryParams.sendType == 2">
  25. <el-select v-model="queryParams.qwUserId" placeholder="企微账号" clearable size="small"
  26. @change="updateQwuser()">
  27. <el-option
  28. v-for="dict in myQwUserList"
  29. :key="dict.dictValue"
  30. :label="dict.dictLabel + '('+dict.corpName+')'"
  31. :value="dict.dictValue"
  32. />
  33. </el-select>
  34. </el-form-item>
  35. <el-form-item label="客户ID" prop="qwExternalContactId" v-if="queryParams.sendType == 2">
  36. <el-input
  37. v-model="queryParams.qwExternalContactId"
  38. placeholder="请输入客户ID"
  39. clearable
  40. size="small"
  41. @keyup.enter.native="handleQuery"
  42. />
  43. </el-form-item>
  44. <el-form-item label="会员ID" prop="userId" v-if="queryParams.sendType == 1">
  45. <el-input
  46. v-model="queryParams.userId"
  47. placeholder="请输入会员ID"
  48. clearable
  49. size="small"
  50. @keyup.enter.native="handleQuery"
  51. />
  52. </el-form-item>
  53. <el-form-item label="会员昵称" prop="nickName" v-if="queryParams.sendType == 1">
  54. <el-input
  55. v-model="queryParams.nickName"
  56. placeholder="请输入会员昵称"
  57. clearable
  58. size="small"
  59. @keyup.enter.native="handleQuery"
  60. />
  61. </el-form-item>
  62. <el-form-item label="企微客户昵称" prop="nickName" v-if="queryParams.sendType == 2">
  63. <el-input
  64. v-model="queryParams.externalUserName"
  65. placeholder="请输入企微客户昵称"
  66. clearable
  67. size="small"
  68. @keyup.enter.native="handleQuery"
  69. />
  70. </el-form-item>
  71. <el-form-item label="课程" prop="courseId">
  72. <el-select filterable v-model="queryParams.courseId" placeholder="请选择课程" clearable size="small"
  73. @change="courseChange(queryParams.courseId)">
  74. <el-option
  75. v-for="dict in courseLists"
  76. :key="dict.dictValue"
  77. :label="dict.dictLabel"
  78. :value="dict.dictValue"
  79. />
  80. </el-select>
  81. </el-form-item>
  82. <el-form-item label="小节" prop="videoId">
  83. <el-select filterable v-model="queryParams.videoId" placeholder="请选择小节" clearable size="small">
  84. <el-option
  85. v-for="dict in videoList"
  86. :key="dict.dictValue"
  87. :label="dict.dictLabel"
  88. :value="dict.dictValue"
  89. />
  90. </el-select>
  91. </el-form-item>
  92. <!-- sop名称 -->
  93. <el-form-item label="SOP名称" prop="sopId" v-if="queryParams.sendType == 2">
  94. <el-autocomplete
  95. v-model="sopSearchText"
  96. :fetch-suggestions="querySopAsync"
  97. placeholder="请输入SOP名称"
  98. clearable
  99. size="small"
  100. style="width: 200px"
  101. @select="handleSopSelect"
  102. @clear="handleSopClear"
  103. :trigger-on-focus="false"
  104. >
  105. <template slot-scope="{ item }">
  106. <div class="sop-item">
  107. <span class="sop-name">{{ item.name }}</span>
  108. </div>
  109. </template>
  110. </el-autocomplete>
  111. </el-form-item>
  112. <!-- 营期时间 -->
  113. <!-- <el-form-item label="营期时间" prop="scheduleTime">
  114. <el-input
  115. v-model="scheduleTimeText"
  116. placeholder="请选择营期时间"
  117. readonly
  118. @click.native="showScheduleCalendar = true"
  119. />
  120. <calendar
  121. v-model="scheduleTime"
  122. mode="during"
  123. :show.sync="showScheduleCalendar"
  124. @change="handleScheduleTimeChange"
  125. :key="scheduleCalendarKey"
  126. />
  127. </el-form-item> -->
  128. <el-form-item label="营期时间" prop="scheduleTime">
  129. <el-date-picker
  130. v-model="scheduleTimeText"
  131. type="daterange"
  132. range-separator="至"
  133. start-placeholder="开始日期"
  134. end-placeholder="结束日期"
  135. value-format="yyyy-MM-dd"
  136. style="width: 240px"
  137. @change="handleScheduleTimeChange"
  138. />
  139. </el-form-item>
  140. <!-- 创建时间 -->
  141. <!-- <el-form-item label="创建时间" prop="createTime">
  142. <el-input
  143. v-model="createTimeText"
  144. placeholder="请选择创建时间"
  145. readonly
  146. @click.native="showCreateCalendar = true"
  147. />
  148. <calendar
  149. v-model="createTime"
  150. mode="during"
  151. :show.sync="showCreateCalendar"
  152. @change="createChange"
  153. :key="createCalendarKey"
  154. />
  155. </el-form-item> -->
  156. <el-form-item label="创建时间" prop="createTime">
  157. <el-date-picker
  158. v-model="createTimeText"
  159. type="daterange"
  160. range-separator="至"
  161. start-placeholder="开始日期"
  162. end-placeholder="结束日期"
  163. value-format="yyyy-MM-dd"
  164. style="width: 240px"
  165. @change="createChange"
  166. />
  167. </el-form-item>
  168. <!-- 最新更新时间 -->
  169. <!-- <el-form-item label="最新更新时间" prop="updateTime">
  170. <el-input
  171. v-model="updateTimeText"
  172. placeholder="请选择更新时间"
  173. readonly
  174. @click.native="showUpdateCalendar = true"
  175. />
  176. <calendar
  177. v-model="updateTime"
  178. mode="during"
  179. :show.sync="showUpdateCalendar"
  180. @change="updateChange"
  181. :key="updateCalendarKey"
  182. />
  183. </el-form-item> -->
  184. <el-form-item label="最新更新时间" prop="updateTime">
  185. <el-date-picker
  186. v-model="updateTimeText"
  187. type="daterange"
  188. range-separator="至"
  189. start-placeholder="开始日期"
  190. end-placeholder="结束日期"
  191. value-format="yyyy-MM-dd"
  192. style="width: 240px"
  193. @change="updateChange"
  194. />
  195. </el-form-item>
  196. <!-- 进线时间 -->
  197. <!-- <el-form-item label="进线时间" prop="qecCreateTime">
  198. <el-input
  199. v-model="qecCreateTimeText"
  200. placeholder="请选择进线时间"
  201. readonly
  202. @click.native="showQecCalendar = true"
  203. />
  204. <calendar
  205. v-model="qecCreateTime"
  206. mode="during"
  207. :show.sync="showQecCalendar"
  208. @change="qecCreateTimeChange"
  209. :key="qecCalendarKey"
  210. />
  211. </el-form-item> -->
  212. <el-form-item label="进线时间" prop="qecCreateTime">
  213. <el-date-picker
  214. v-model="qecCreateTimeText"
  215. type="daterange"
  216. range-separator="至"
  217. start-placeholder="开始日期"
  218. end-placeholder="结束日期"
  219. value-format="yyyy-MM-dd"
  220. style="width: 240px"
  221. @change="qecCreateTimeChange"
  222. />
  223. </el-form-item>
  224. <el-form-item label="营期课程时间" prop="periodTime">
  225. <el-date-picker
  226. v-model="periodTimeText"
  227. type="datetimerange"
  228. align="right"
  229. unlink-panels
  230. value-format="yyyy-MM-dd HH:mm:ss"
  231. range-separator="至"
  232. start-placeholder="开始日期"
  233. end-placeholder="结束日期"
  234. :picker-options="pickerOptions"
  235. @change="qecPeriodTimeChange"
  236. :default-time="['00:00:00', '23:59:59']">
  237. </el-date-picker>
  238. </el-form-item>
  239. <el-form-item label="是否为会员" prop="isVip">
  240. <el-select
  241. filterable
  242. v-model="queryParams.isVip"
  243. placeholder="请选择是否为会员"
  244. clearable size="small">
  245. <el-option
  246. v-for="dict in isVipList"
  247. :key="dict.dictValue"
  248. :label="dict.dictLabel"
  249. :value="dict.dictValue"
  250. />
  251. </el-select>
  252. </el-form-item>
  253. <el-form-item>
  254. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  255. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  256. </el-form-item>
  257. </el-form>
  258. <el-row :gutter="10" class="mb8">
  259. <el-col :span="1.5">
  260. <el-button
  261. type="warning"
  262. plain
  263. icon="el-icon-download"
  264. size="mini"
  265. :loading="exportLoading"
  266. @click="handleExport"
  267. v-hasPermi="['course:courseWatchLog:myExport']"
  268. >导出
  269. </el-button>
  270. <el-col :span="1.5" v-if="queryParams.sendType == 2">
  271. <el-button
  272. type="primary"
  273. plain
  274. size="mini"
  275. @click="addUserTag"
  276. v-hasPermi="['qw:externalContact:addTag']"
  277. >批量添加标签</el-button>
  278. </el-col>
  279. <el-col :span="1.5" v-if="queryParams.sendType == 2">
  280. <el-button
  281. type="primary"
  282. plain
  283. size="mini"
  284. @click="delUserTag"
  285. v-hasPermi="['qw:externalContact:delTag']"
  286. >批量移除标签</el-button>
  287. </el-col>
  288. </el-col>
  289. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  290. </el-row>
  291. <el-tabs type="card" v-model="activeName" @tab-click="handleClickX">
  292. <el-tab-pane label="全部" name="00"></el-tab-pane>
  293. <el-tab-pane v-for="(item,index) in logTypeOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
  294. </el-tabs>
  295. <!-- <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange">-->
  296. <el-table
  297. border
  298. v-loading="loading"
  299. :data="courseWatchLogList"
  300. @selection-change="handleSelectionChange"
  301. :key="tableKey">
  302. <el-table-column type="selection" width="55" align="center"/>
  303. <el-table-column label="记录编号" align="center" prop="logId"/>
  304. <el-table-column label="客户昵称" align="center" prop="externalUserName" v-if="queryParams.sendType == 2"/>
  305. &lt;!&ndash;
  306. <el-table-column label="会员ID" align="center" prop="userId" v-if="queryParams.sendType == 1"/>
  307. &ndash;&gt;
  308. <!-- <el-table-column label="客户头像" align="center" prop="externalUserAvatar" v-if="queryParams.sendType == 2">-->
  309. <!-- <template slot-scope="scope">-->
  310. <!-- <el-popover-->
  311. <!-- placement="right"-->
  312. <!-- title=""-->
  313. <!-- trigger="hover">-->
  314. <!-- <img slot="reference" :src="scope.row.externalUserAvatar" style="width: 50px;height: 50px">-->
  315. <!-- <img :src="scope.row.externalUserAvatar" style="max-width: 200px;max-height: 200px">-->
  316. <!-- </el-popover>-->
  317. <!-- </template>-->
  318. <!-- </el-table-column>-->
  319. <el-table-column label="头像" align="center">
  320. <template slot-scope="scope">
  321. <img
  322. v-if="queryParams.sendType == 1"
  323. :src="scope.row.fsAvatar"
  324. style="width:50px;height:50px"
  325. />
  326. <img
  327. v-else-if="queryParams.sendType == 2"
  328. :src="scope.row.externalUserAvatar"
  329. style="width:50px;height:50px"
  330. />
  331. </template>
  332. </el-table-column>
  333. <el-table-column label="用户昵称" align="center" v-if="queryParams.sendType == 1">
  334. <template slot-scope="scope">
  335. {{ queryParams.sendType=='1' ? scope.row.fsNickName : scope.row.externalUserName }}
  336. </template>
  337. </el-table-column>
  338. <el-table-column label="头像" align="center" v-if="queryParams.sendType == 1">
  339. <template slot-scope="scope">
  340. <img v-if="queryParams.sendType=='1'" :src="scope.row.fsAvatar" style="width:50px;height:50px" />
  341. <img v-else :src="scope.row.externalUserAvatar" style="width:50px;height:50px" />
  342. </template>
  343. </el-table-column>
  344. <el-table-column label="课程名称" align="center" prop="courseName"/>
  345. <el-table-column label="小节名称" align="center" prop="videoName"/>
  346. <el-table-column label="记录类型" align="center" prop="logType">
  347. <template slot-scope="scope">
  348. <dict-tag :options="logTypeOptions" :value="scope.row.logType"/>
  349. </template>
  350. </el-table-column>
  351. <el-table-column label="播放时长" align="center" prop="duration"/>
  352. <!-- <el-table-column label="所属销售" align="center" prop="companyUserName"/>-->
  353. <!-- <el-table-column label="所属公司" align="center" prop="companyName"/>-->
  354. <!-- <el-table-column label="企微员工名称" align="center" prop="qwUserName"/>-->
  355. <!-- 所属企微列 -->
  356. <el-table-column
  357. label="所属企微"
  358. align="center"
  359. prop="qwUserName"
  360. v-if="queryParams.sendType == 2"
  361. />
  362. <!-- <el-table-column label="所属发送方式" align="center" prop="sendType"/>-->
  363. <el-table-column label="创建时间" align="center" prop="createTime" width="100px"/>
  364. <el-table-column label="更新时间" align="center" prop="updateTime" width="100px" />
  365. <el-table-column label="完课时间" align="center" prop="finishTime" width="100px" />
  366. <el-table-column label="营期时间" align="center" prop="campPeriodTime" />
  367. <el-table-column
  368. fixed="right"
  369. label="操作"
  370. width="100">
  371. <template slot-scope="scope">
  372. <el-button @click="openAnswerLogFun(scope.row)" type="text" size="small">答题记录</el-button>
  373. <el-button @click="openRedLogFun(scope.row)" type="text" size="small">红包记录</el-button>
  374. </template>
  375. </el-table-column>
  376. </el-table>
  377. <pagination
  378. v-show="total>0"
  379. :total="total"
  380. :page.sync="queryParams.pageNum"
  381. :limit.sync="queryParams.pageSize"
  382. @pagination="getList"
  383. />
  384. <el-drawer title="答题记录" :visible.sync="openAnswerLog" size="70%" append-to-body>
  385. <el-table border v-loading="" :data="answerLogsList">
  386. <el-table-column label="会员用户" align="center" prop="userName">
  387. <template slot-scope="scope">
  388. <div style="display: flex;white-space: nowrap">
  389. <div style="margin: auto">
  390. {{ scope.row.userName }}
  391. </div>
  392. <el-popover
  393. placement="right"
  394. title=""
  395. trigger="hover">
  396. <img slot="reference" :src="scope.row.fsAvatar" style="width: 30px;height: 30px">
  397. <img :src="scope.row.fsAvatar" style="max-width: 200px;max-height: 200px">
  398. </el-popover>
  399. </div>
  400. </template>
  401. </el-table-column>
  402. <el-table-column label="课程名称" align="center" prop="courseName"/>
  403. <el-table-column label="小节名称" align="center" prop="videoName"/>
  404. <el-table-column label="是否全部正确" align="center" prop="isRight">
  405. <template slot-scope="scope">
  406. <dict-tag :options="sysCompanyOr" :value="scope.row.isRight"></dict-tag>
  407. </template>
  408. </el-table-column>
  409. <el-table-column label="销售名称" align="center" prop="companyUserName"/>
  410. <el-table-column label="企微员工名称" align="center" prop="qwUserName"/>
  411. <el-table-column label="公司名称" align="center" prop="companyName"/>
  412. <el-table-column label="创建时间" align="center" prop="createTime"/>
  413. </el-table>
  414. <pagination
  415. v-show="answerLogTotal>0"
  416. :total="answerLogTotal"
  417. :page.sync="answerLogQueryParams.pageNum"
  418. :limit.sync="answerLogQueryParams.pageSize"
  419. @pagination="answerLogList"
  420. />
  421. </el-drawer>
  422. <el-drawer title="红包记录" :visible.sync="openRedLog" size="70%" append-to-body>
  423. <el-table border v-loading="" :data="redLogsList">
  424. <el-table-column type="selection" width="55" align="center" />
  425. <el-table-column label="记录编号" align="center" prop="logId" />
  426. <el-table-column label="批次单号" align="center" prop="outBatchNo" />
  427. <el-table-column label="课程名称" align="center" prop="courseId" >
  428. <template slot-scope="scope">
  429. <span prop="status" v-for="(item, index) in courseLists" v-if="scope.row.courseId==item.dictValue">{{item.dictLabel}}</span>
  430. </template>
  431. </el-table-column>
  432. <el-table-column label="小节名称" align="center" prop="title" />
  433. <!-- <el-table-column label="会员id" align="center" prop="userId" />-->
  434. <el-table-column label="会员用户" align="center" prop="fsNickName">
  435. <template slot-scope="scope">
  436. <div style="display: flex;white-space: nowrap">
  437. <div style="margin: auto">
  438. {{scope.row.fsNickName}}
  439. </div>
  440. <el-popover
  441. placement="right"
  442. title=""
  443. trigger="hover">
  444. <img slot="reference" :src="scope.row.fsAvatar" style="width: 30px;height: 30px">
  445. <img :src="scope.row.fsAvatar" style="max-width: 200px;max-height: 200px">
  446. </el-popover>
  447. </div>
  448. </template>
  449. </el-table-column>
  450. <!-- <el-table-column label="会员电话" align="center" prop="phone" />-->
  451. <!-- <el-table-column label="所属销售" align="center" prop="companyUserName" />-->
  452. <!-- <el-table-column label="所属公司" align="center" prop="companyName" />-->
  453. <el-table-column label="转帐金额" align="center" prop="amount" />
  454. <el-table-column label="状态" align="center" prop="status" >
  455. <template slot-scope="scope">
  456. <el-tag>
  457. {{
  458. scope.row.status === 0 ? "发送中" :
  459. scope.row.status === 2 ? "待补发" :
  460. "已完成"
  461. }}
  462. </el-tag>
  463. </template>
  464. </el-table-column>
  465. <el-table-column label="所属企微" align="center" prop="qwUserName" />
  466. <el-table-column label="创建时间" align="center" prop="createTime" />
  467. </el-table>
  468. <pagination
  469. v-show="redLogTotal>0"
  470. :total="redLogTotal"
  471. :page.sync="redLogQueryParams.pageNum"
  472. :limit.sync="redLogQueryParams.pageSize"
  473. @pagination="redLogList"
  474. />
  475. </el-drawer>
  476. <el-dialog title="批量添加标签" :visible.sync="tagOpen" width="800px" append-to-body>
  477. <div>搜索标签:
  478. <el-input v-model="tagChange.tagName" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
  479. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(tagChange.tagName)">搜索</el-button>
  480. <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
  481. </div>
  482. <el-form ref="form" :model="addTagFormByWatch" label-width="80px">
  483. <div v-for="item in tagGroupList" :key="item.id" >
  484. <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
  485. <span class="name-background">{{ item.name }}</span>
  486. </div>
  487. <!-- 添加外层滚动容器 -->
  488. <div class="scroll-wrapper">
  489. <div class="tag-container">
  490. <a
  491. v-for="tagItem in item.tag"
  492. class="tag-box"
  493. @click="tagSelection(tagItem)"
  494. :class="{ 'tag-selected': tagItem.isSelected }"
  495. >
  496. {{ tagItem.name }}
  497. </a>
  498. </div>
  499. </div>
  500. </div>
  501. </el-form>
  502. <pagination
  503. v-show="tagTotal>0"
  504. :total="tagTotal"
  505. :page.sync="queryTagParams.pageNum"
  506. :limit.sync="queryTagParams.pageSize"
  507. @pagination="getPageListTagGroup"
  508. />
  509. <div slot="footer" class="dialog-footer">
  510. <el-button type="primary" @click="addTagSubmitForm()">确 定</el-button>
  511. <el-button @click="addTagCancel">取 消</el-button>
  512. </div>
  513. </el-dialog>
  514. <el-dialog title="批量移除标签" :visible.sync="tagDelOpen" width="800px" append-to-body>
  515. <div>搜索标签:
  516. <el-input v-model="tagChange.tagName" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
  517. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(tagChange.tagName)">搜索</el-button>
  518. <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
  519. </div>
  520. <el-form ref="form" :model="addTagFormByWatch" label-width="80px">
  521. <div v-for="item in tagGroupList" :key="item.id" >
  522. <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
  523. <span class="name-background">{{ item.name }}</span>
  524. </div>
  525. <!-- 添加外层滚动容器 -->
  526. <div class="scroll-wrapper">
  527. <div class="tag-container">
  528. <a
  529. v-for="tagItem in item.tag"
  530. class="tag-box"
  531. @click="tagSelection(tagItem)"
  532. :class="{ 'tag-selected': tagItem.isSelected }"
  533. >
  534. {{ tagItem.name }}
  535. </a>
  536. </div>
  537. </div>
  538. </div>
  539. </el-form>
  540. <pagination
  541. v-show="tagTotal>0"
  542. :total="tagTotal"
  543. :page.sync="queryTagParams.pageNum"
  544. :limit.sync="queryTagParams.pageSize"
  545. @pagination="getPageListTagGroup"
  546. />
  547. <div slot="footer" class="dialog-footer">
  548. <el-button type="primary" @click="tagDelSubmitForm()">确 定</el-button>
  549. <el-button @click="DelTagCancel">取 消</el-button>
  550. </div>
  551. </el-dialog>
  552. <el-dialog
  553. :title="resultTitle"
  554. :visible.sync="resultDialogVisible"
  555. width="50%"
  556. custom-class="feedback-dialog"
  557. >
  558. <pre style="white-space: pre-wrap; font-family: inherit;">{{ resultMessage }}</pre>
  559. <span slot="footer" class="dialog-footer">
  560. <el-button @click="resultDialogVisible = false">关闭</el-button>
  561. </span>
  562. </el-dialog>
  563. </div>
  564. </template>
  565. <script>
  566. import {
  567. addCourseWatchLog,
  568. delCourseWatchLog,
  569. exportCourseWatchLog,
  570. getCourseWatchLog, myExportCourseWatchLog,
  571. myListCourseWatchLog,
  572. updateCourseWatchLog
  573. } from "@/api/course/courseWatchLog";
  574. import {courseList, myListCourseRedPacketLog, videoList} from '@/api/course/courseRedPacketLog'
  575. import {myListLogs} from "@/api/course/courseAnswerlogs";
  576. import {getMyQwUserList} from "@/api/qw/user";
  577. import {searchTags} from "../../../api/qw/tag";
  578. import {addTagByWatch, delTagByWatch} from "../../../api/qw/externalContact";
  579. import {allListTagGroup} from "../../../api/qw/tagGroup";
  580. import Vue from 'vue'
  581. import Calendar from 'vue-mobile-calendar'
  582. import {infoSop} from "@/api/qw/sop";
  583. Vue.use(Calendar)
  584. export default {
  585. name: "CourseWatchLog",
  586. data() {
  587. return {
  588. tableKey: 0,
  589. // 日历 key 控制刷新
  590. scheduleCalendarKey: 0,
  591. createCalendarKey: 0,
  592. updateCalendarKey: 0,
  593. qecCalendarKey: 0,
  594. periodTimeKey: 0,
  595. createTimeText: '',
  596. scheduleTimeText: '', // 新增
  597. updateTimeText: '', // 新增
  598. qecCreateTimeText: '', // 新增
  599. periodTimeText: '', // 营期课程时间
  600. scheduleTime: [], // 改为数组
  601. createTime: [], // 改为数组
  602. updateTime: [], // 改为数组
  603. qecCreateTime: [], // 改为数组
  604. periodTime: [], // 改为数组
  605. // 控制日历显隐
  606. showScheduleCalendar: false,
  607. showCreateCalendar: false,
  608. showUpdateCalendar: false,
  609. showQecCalendar: false,
  610. resultDialogVisible: false,
  611. resultMessage: '',
  612. resultTitle:'',
  613. activeName:"2",
  614. pickerOptions: {
  615. disabledDate(time) {
  616. // 获取13天前的日期(加上今天就是14天)
  617. const sixDaysAgo = new Date();
  618. sixDaysAgo.setDate(sixDaysAgo.getDate() - 13);
  619. sixDaysAgo.setHours(0, 0, 0, 0);
  620. // 获取明天的日期(不包括今天)
  621. const tomorrow = new Date();
  622. tomorrow.setDate(tomorrow.getDate() + 1);
  623. tomorrow.setHours(0, 0, 0, 0);
  624. return time.getTime() < sixDaysAgo.getTime() || time.getTime() >= tomorrow.getTime();
  625. }
  626. },
  627. courseLists: [],
  628. videoList: [],
  629. myQwUserList: [],
  630. logTypeOptions: [],
  631. // 遮罩层
  632. loading: true,
  633. // 导出遮罩层
  634. exportLoading: false,
  635. // 选中数组
  636. ids: [],
  637. // 非单个禁用
  638. single: true,
  639. // 非多个禁用
  640. multiple: true,
  641. // 显示搜索条件
  642. showSearch: true,
  643. sysCompanyOr: [],
  644. // 总条数
  645. total: 0,
  646. // 短链课程看课记录表格数据
  647. courseWatchLogList: [],
  648. openAnswerLog: false,
  649. loadingAnswerLog: true,
  650. answerLogsList: [],
  651. answerLogTotal: 0,
  652. answerLogQueryParams: {
  653. pageNum: 1,
  654. pageSize: 10,
  655. },
  656. projectOptions:[],
  657. sendTypeOptions:[{
  658. dictLabel:'会员',dictValue:'1'
  659. },
  660. {
  661. dictLabel:'企微',dictValue:'2'
  662. }
  663. ],
  664. openRedLog: false,
  665. loadingRedLog: true,
  666. redLogsList: [],
  667. redLogTotal: 0,
  668. redLogQueryParams: {
  669. pageNum: 1,
  670. pageSize: 10,
  671. },
  672. // 弹出层标题
  673. title: "",
  674. // 是否显示弹出层
  675. open: false,
  676. tagOpen:false,
  677. //标签弹窗选择
  678. tagChange:{
  679. open:false,
  680. index:null,
  681. },
  682. addTagFormByWatch:{
  683. logId:[],
  684. tagIds:[]
  685. },
  686. tagGroupList: [],
  687. tagTotal:0,
  688. tagDelOpen:false,
  689. queryTagParams:{
  690. pageNum: 1,
  691. pageSize: 5,
  692. total:0,
  693. name:null,
  694. corpId:null,
  695. },
  696. isVipList: [
  697. { dictLabel: '是', dictValue: 1 },
  698. { dictLabel: '否', dictValue: 0 }
  699. ],
  700. // SOP搜索相关
  701. sopSearchText: '', // SOP搜索框显示的文本
  702. selectedSopId: null, // 选中的SOP ID
  703. // 查询参数
  704. queryParams: {
  705. pageNum: 1,
  706. project: null,
  707. pageSize: 10,
  708. userId: null,
  709. videoId: null,
  710. nickName: null,
  711. logType: 2,
  712. qwExternalContactId: null,
  713. externalUserName:null,
  714. duration: null,
  715. qwUserId: null,
  716. companyUserId: null,
  717. companyId: null,
  718. courseId: null,
  719. sTime: null,
  720. eTime: null,
  721. upSTime:null,
  722. upETime:null,
  723. qecSTime:null,
  724. qecETime:null,
  725. periodSTime:null,
  726. periodETime:null,
  727. scheduleStartTime: null,
  728. scheduleEndTime: null,
  729. sendType:process.env.VUE_APP_COURSE_DEFAULT,
  730. isVip: null,
  731. sopId: null, // sopId
  732. },
  733. // 表单参数
  734. form: {},
  735. // 表单校验
  736. rules: {}
  737. };
  738. },
  739. created() {
  740. courseList().then(response => {
  741. this.courseLists = response.list;
  742. });
  743. this.getList();
  744. this.getDicts("sys_course_watch_log_type").then(response => {
  745. this.logTypeOptions = response.data;
  746. });
  747. this.getDicts("sys_company_or").then(response => {
  748. this.sysCompanyOr = response.data;
  749. });
  750. getMyQwUserList().then(response => {
  751. this.myQwUserList = response.data;
  752. });
  753. this.getDicts("sys_course_project").then(response => {
  754. this.projectOptions = response.data;
  755. });
  756. },
  757. methods: {
  758. handleSendTypeChange() {
  759. // 重置相关参数
  760. this.queryParams.qwUserId = null;
  761. this.queryParams.qwExternalContactId = null;
  762. this.queryParams.userId = null;
  763. this.queryParams.nickName = null;
  764. this.queryParams.externalUserName = null;
  765. this.queryParams.corpId = null;
  766. this.queryParams.project = null;
  767. this.queryParams.courseId = null;
  768. this.queryParams.videoId = null;
  769. // 重置选择
  770. this.ids = [];
  771. this.courseWatchLogList = []; // 清空表格数据
  772. // 重置分页
  773. this.queryParams.pageNum = 1;
  774. // 强制重新渲染表格
  775. this.tableKey += 1;
  776. this.getList();
  777. },
  778. // 重置日历组件
  779. resetCalendars() {
  780. this.scheduleTime = [];
  781. this.createTime = [];
  782. this.updateTime = [];
  783. this.qecCreateTime = [];
  784. this.periodTime = [];
  785. this.scheduleTimeText = '';
  786. this.createTimeText = '';
  787. this.updateTimeText = '';
  788. this.qecCreateTimeText = '';
  789. this.periodTimeText = [];
  790. // 强制刷新日历组件
  791. this.scheduleCalendarKey++;
  792. this.createCalendarKey++;
  793. this.updateCalendarKey++;
  794. this.qecCalendarKey++;
  795. this.periodTimeKey++;
  796. },
  797. formatDateRange(dates) {
  798. if (!dates || dates.length < 2) return '';
  799. return dates.map(date => date.format('YYYY-MM-DD')).join(' ~ ');
  800. },
  801. courseChange(row) {
  802. this.queryParams.videoId = null;
  803. if (row === '') {
  804. this.videoList = [];
  805. return
  806. }
  807. videoList(row).then(response => {
  808. this.videoList = response.list
  809. });
  810. },
  811. updateQwuser() {
  812. for (const user of this.myQwUserList) {
  813. if (user.dictValue == this.queryParams.qwUserId) {
  814. this.queryParams.corpId = user.corpId;
  815. break;
  816. }
  817. }
  818. this.getList();
  819. },
  820. handleClickX(tab) {
  821. this.activeName=tab.name;
  822. if(tab.name=="00"){
  823. this.queryParams.logType=null;
  824. }else{
  825. this.queryParams.logType=tab.name;
  826. }
  827. this.getList()
  828. },
  829. // 营期时间
  830. handleScheduleTimeChange(scheduleTime) {
  831. if (scheduleTime && scheduleTime.length >= 2) {
  832. // this.scheduleTimeText = this.formatDateRange(scheduleTime);
  833. this.queryParams.scheduleStartTime = scheduleTime[0] || null;
  834. this.queryParams.scheduleEndTime = scheduleTime[1] || null;
  835. console.log(this.queryParams.scheduleStartTime)
  836. console.log(this.queryParams.scheduleEndTime)
  837. } else {
  838. this.scheduleTimeText = [];
  839. this.queryParams.scheduleStartTime = null;
  840. this.queryParams.scheduleEndTime = null;
  841. }
  842. },
  843. // 创建时间
  844. createChange(createTime) {
  845. if (createTime && createTime.length >= 2) {
  846. // this.createTimeText = this.formatDateRange(createTime);
  847. this.queryParams.sTime = createTime[0] || null;
  848. this.queryParams.eTime = createTime[1] || null;
  849. } else {
  850. this.createTimeText = [];
  851. this.queryParams.sTime = null;
  852. this.queryParams.eTime = null;
  853. }
  854. },
  855. // 更新时间
  856. updateChange(updateTime) {
  857. if (updateTime && updateTime.length >= 2) {
  858. // this.updateTimeText = this.formatDateRange(updateTime);
  859. this.queryParams.upSTime = updateTime[0] || null;
  860. this.queryParams.upETime = updateTime[1] || null;
  861. } else {
  862. this.updateTimeText = [];
  863. this.queryParams.upSTime = null;
  864. this.queryParams.upETime = null;
  865. }
  866. },
  867. // 进线时间
  868. qecCreateTimeChange(qecCreateTime) {
  869. if (qecCreateTime && qecCreateTime.length >= 2) {
  870. // 检查选择的日期范围是否超过7天(包括起始和结束日期)
  871. const startDate = new Date(qecCreateTime[0]);
  872. const endDate = new Date(qecCreateTime[1]);
  873. // 设置时间为当天开始,避免时间部分影响计算
  874. startDate.setHours(0, 0, 0, 0);
  875. endDate.setHours(0, 0, 0, 0);
  876. const timeDiff = Math.abs(endDate - startDate);
  877. const diffDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
  878. // 如果超过6天的范围(总共7天,包括起始日)
  879. if (diffDays > 6) {
  880. this.$message.error('进线时间选择范围不能超过7天');
  881. // 清空选择
  882. this.qecCreateTime = [];
  883. this.qecCreateTimeText = [];
  884. this.queryParams.qecSTime = null;
  885. this.queryParams.qecETime = null;
  886. this.qecCalendarKey++;
  887. return;
  888. }
  889. this.qecCreateTimeText = this.formatDateRange(qecCreateTime);
  890. this.queryParams.qecSTime = qecCreateTime[0] || null;
  891. this.queryParams.qecETime = qecCreateTime[1] || null;
  892. } else {
  893. this.qecCreateTimeText = [];
  894. this.queryParams.qecSTime = null;
  895. this.queryParams.qecETime = null;
  896. }
  897. },
  898. //营期课程时间
  899. qecPeriodTimeChange(periodTime){
  900. if (periodTime && periodTime.length >= 2) {
  901. // 检查选择的日期范围是否超过7天(包括起始和结束日期)
  902. const startDate = new Date(periodTime[0]);
  903. const endDate = new Date(periodTime[1]);
  904. // 设置时间为当天开始,避免时间部分影响计算
  905. startDate.setHours(0, 0, 0, 0);
  906. endDate.setHours(0, 0, 0, 0);
  907. const timeDiff = Math.abs(endDate - startDate);
  908. const diffDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
  909. // 如果超过6天的范围(总共7天,包括起始日)
  910. if (diffDays > 13) {
  911. this.$message.error('时间选择范围不能超过14天');
  912. // 清空选择
  913. this.periodTime = [];
  914. this.periodTimeText = [];
  915. this.queryParams.periodSTime = null;
  916. this.queryParams.periodETime = null;
  917. this.periodTimeKey++;
  918. return;
  919. }
  920. this.queryParams.periodSTime = this.formatDate(periodTime[0]) || null;
  921. this.queryParams.periodETime = this.formatDate(periodTime[1]) || null;
  922. } else {
  923. this.periodTimeText = '';
  924. this.queryParams.periodSTime = null;
  925. this.queryParams.periodETime = null;
  926. }
  927. },
  928. formatDate(date) {
  929. if (!date) return ''
  930. // 确保 date 是 Date 对象
  931. let dateObj = date
  932. if (typeof date === 'string') {
  933. dateObj = new Date(date)
  934. }
  935. // 如果转换失败,返回空字符串
  936. if (!(dateObj instanceof Date) || isNaN(dateObj.getTime())) {
  937. return ''
  938. }
  939. // 使用更安全的格式化方法
  940. const year = dateObj.getFullYear()
  941. const month = String(dateObj.getMonth() + 1).padStart(2, '0')
  942. const day = String(dateObj.getDate()).padStart(2, '0')
  943. const hours = String(dateObj.getHours()).padStart(2, '0')
  944. const minutes = String(dateObj.getMinutes()).padStart(2, '0')
  945. const seconds = String(dateObj.getSeconds()).padStart(2, '0')
  946. return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  947. },
  948. /** 查询短链课程看课记录列表 */
  949. getList() {
  950. this.loading = true;
  951. let param = JSON.parse(JSON.stringify(this.queryParams));
  952. if (param.logType == "10") {
  953. param.logType = null;
  954. }
  955. myListCourseWatchLog(param).then(response => {
  956. this.courseWatchLogList = response.rows;
  957. this.total = response.total;
  958. this.loading = false;
  959. });
  960. },
  961. // 取消按钮
  962. cancel() {
  963. this.open = false;
  964. this.reset();
  965. },
  966. // 表单重置
  967. reset() {
  968. this.form = {
  969. logId: null,
  970. userId: null,
  971. videoId: null,
  972. logType: null,
  973. createTime: null,
  974. updateTime: null,
  975. qwExternalContactId: null,
  976. externalUserName:null,
  977. duration: null,
  978. qwUserId: null,
  979. companyUserId: null,
  980. companyId: null,
  981. courseId: null,
  982. sTime:null,
  983. eTime:null,
  984. upSTime:null,
  985. upETime:null,
  986. qecSTime:null,
  987. qecETime:null,
  988. scheduleStartTime: null,
  989. scheduleEndTime: null,
  990. };
  991. // 统一重置日历组件
  992. this.resetCalendars();
  993. this.resetForm("form");
  994. },
  995. /** 搜索按钮操作 */
  996. handleQuery() {
  997. this.queryParams.pageNum = 1;
  998. this.getList();
  999. },
  1000. /** 重置按钮操作 */
  1001. resetQuery() {
  1002. this.resetForm("queryForm");
  1003. this.queryParams.sTime = null;
  1004. this.queryParams.eTime = null;
  1005. this.queryParams.project = null;
  1006. this.queryParams.upSTime = null;
  1007. this.queryParams.upETime = null;
  1008. this.queryParams.qecSTime = null;
  1009. this.queryParams.qecETime = null;
  1010. this.queryParams.periodSTime = null;
  1011. this.queryParams.periodDTime = null;
  1012. this.queryParams.scheduleStartTime = null;
  1013. this.queryParams.scheduleEndTime = null;
  1014. this.queryParams.sopId = null; // 重置SOP ID
  1015. // 重置SOP搜索
  1016. this.handleSopClear();
  1017. // 统一重置日历组件
  1018. this.resetCalendars();
  1019. this.handleQuery();
  1020. },
  1021. // 多选框选中数据
  1022. handleSelectionChange(selection) {
  1023. this.ids = selection.map(item => item.logId)
  1024. this.single = selection.length !== 1
  1025. this.multiple = !selection.length
  1026. },
  1027. /** 新增按钮操作 */
  1028. handleAdd() {
  1029. this.reset();
  1030. this.open = true;
  1031. this.title = "添加短链课程看课记录";
  1032. },
  1033. /** 修改按钮操作 */
  1034. handleUpdate(row) {
  1035. this.reset();
  1036. const logId = row.logId || this.ids
  1037. getCourseWatchLog(logId).then(response => {
  1038. this.form = response.data;
  1039. this.open = true;
  1040. this.title = "修改短链课程看课记录";
  1041. });
  1042. },
  1043. /** 提交按钮 */
  1044. submitForm() {
  1045. this.$refs["form"].validate(valid => {
  1046. if (valid) {
  1047. if (this.form.logId != null) {
  1048. updateCourseWatchLog(this.form).then(response => {
  1049. this.msgSuccess("修改成功");
  1050. this.open = false;
  1051. this.getList();
  1052. });
  1053. } else {
  1054. addCourseWatchLog(this.form).then(response => {
  1055. this.msgSuccess("新增成功");
  1056. this.open = false;
  1057. this.getList();
  1058. });
  1059. }
  1060. }
  1061. });
  1062. },
  1063. /** 删除按钮操作 */
  1064. handleDelete(row) {
  1065. const logIds = row.logId || this.ids;
  1066. this.$confirm('是否确认删除短链课程看课记录编号为"' + logIds + '"的数据项?', "警告", {
  1067. confirmButtonText: "确定",
  1068. cancelButtonText: "取消",
  1069. type: "warning"
  1070. }).then(function () {
  1071. return delCourseWatchLog(logIds);
  1072. }).then(() => {
  1073. this.getList();
  1074. this.msgSuccess("删除成功");
  1075. }).catch(() => {
  1076. });
  1077. },
  1078. /** 导出按钮操作 */
  1079. handleExport() {
  1080. const queryParams = this.queryParams;
  1081. this.$confirm('是否确认导出所有短链课程看课记录数据项?', "警告", {
  1082. confirmButtonText: "确定",
  1083. cancelButtonText: "取消",
  1084. type: "warning"
  1085. }).then(() => {
  1086. this.exportLoading = true;
  1087. return myExportCourseWatchLog(queryParams);
  1088. }).then(response => {
  1089. this.download(response.msg);
  1090. this.exportLoading = false;
  1091. }).catch(() => {
  1092. });
  1093. },
  1094. openAnswerLogFun(row) {
  1095. this.openAnswerLog = true;
  1096. this.answerLogQueryParams.watchLogId = row.logId;
  1097. this.answerLogList();
  1098. },
  1099. answerLogList() {
  1100. this.loadingAnswerLog = true;
  1101. myListLogs(this.answerLogQueryParams).then(e => {
  1102. this.answerLogsList = e.rows;
  1103. this.answerLogTotal = e.total;
  1104. this.loadingAnswerLog = false;
  1105. })
  1106. },
  1107. openRedLogFun(row) {
  1108. this.openRedLog = true;
  1109. this.redLogQueryParams.watchLogId = row.logId;
  1110. this.redLogList();
  1111. },
  1112. redLogList() {
  1113. this.loadingRedLog = true;
  1114. console.info("-----watch",this.redLogQueryParams)
  1115. myListCourseRedPacketLog(this.redLogQueryParams).then(e => {
  1116. this.redLogsList = e.rows;
  1117. this.redLogTotal = e.total;
  1118. this.loadingRedLog = false;
  1119. })
  1120. },
  1121. addUserTag(){
  1122. if(this.ids==null||this.ids==""){
  1123. return this.$message('请选择需要添加标签的客户');
  1124. }
  1125. this.getPageListTagGroup();
  1126. setTimeout(() => {
  1127. for (let i = 0; i < this.tagGroupList.length; i++) {
  1128. for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
  1129. this.tagGroupList[i].tag[x].isSelected=false;
  1130. }
  1131. }
  1132. }, 200);
  1133. this.tagOpen = true;
  1134. },
  1135. delUserTag(){
  1136. if(this.ids==null||this.ids==""){
  1137. return this.$message('请选择需要移除标签的客户');
  1138. }
  1139. this.getPageListTagGroup();
  1140. setTimeout(() => {
  1141. for (let i = 0; i < this.tagGroupList.length; i++) {
  1142. for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
  1143. this.tagGroupList[i].tag[x].isSelected=false;
  1144. }
  1145. }
  1146. }, 200);
  1147. this.tagDelOpen = true;
  1148. },
  1149. getPageListTagGroup(){
  1150. this.queryTagParams.corpId=this.queryParams.corpId
  1151. allListTagGroup(this.queryTagParams).then(response => {
  1152. this.tagGroupList = response.rows;
  1153. this.tagTotal = response.total;
  1154. });
  1155. },
  1156. tagSelection(row){
  1157. row.isSelected= !row.isSelected;
  1158. this.$forceUpdate();
  1159. },
  1160. handleSearchTags(name){
  1161. if (!name){
  1162. return this.$message.error("请输入要搜索的标签")
  1163. }
  1164. this.queryTagParams.name=name;
  1165. this.queryTagParams.corpId=this.queryParams.corpId;
  1166. searchTags(this.queryTagParams).then(response => {
  1167. this.tagGroupList = response.rows;
  1168. });
  1169. // searchTags({name:name,corpId:this.queryParams.corpId}).then(response => {
  1170. // this.tagGroupList = response.rows;
  1171. // });
  1172. },
  1173. cancelSearchTags(){
  1174. this.resetSearchQueryTag()
  1175. this.getPageListTagGroup();
  1176. },
  1177. resetSearchQueryTag(){
  1178. this.queryTagParams= {
  1179. pageNum: 1,
  1180. pageSize: 5,
  1181. total:0,
  1182. name:null,
  1183. };
  1184. },
  1185. addTagSubmitForm(){
  1186. for (let i = 0; i < this.tagGroupList.length; i++) {
  1187. for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
  1188. if(this.tagGroupList[i].tag[x].isSelected==true){
  1189. this.addTagFormByWatch.tagIds.push(this.tagGroupList[i].tag[x].tagId)
  1190. }
  1191. }
  1192. }
  1193. if(this.addTagFormByWatch.tagIds==[]||this.addTagFormByWatch.tagIds==null||this.addTagFormByWatch.tagIds==""){
  1194. return this.$message('请选择标签');
  1195. }
  1196. this.addTagFormByWatch.logIds=this.ids;
  1197. let loadingRock = this.$loading({
  1198. lock: true,
  1199. text: '正在执行中请稍后~~请不要刷新页面!!',
  1200. spinner: 'el-icon-loading',
  1201. background: 'rgba(0, 0, 0, 0.7)'
  1202. });
  1203. addTagByWatch(this.addTagFormByWatch).then(response => {
  1204. // this.msgSuccess(response.msg);
  1205. this.resultMessage = response.msg;
  1206. this.resultDialogVisible = true; // 显示弹窗
  1207. this.resultTitle = '批量添加标签结果';
  1208. this.tagOpen = false;
  1209. loadingRock.close();
  1210. this.addTagFormByWatch={
  1211. logIds:[],
  1212. tagIds:[]
  1213. };
  1214. this.getList()
  1215. }).finally(res=>{
  1216. loadingRock.close();
  1217. });
  1218. },
  1219. tagDelSubmitForm(){
  1220. for (let i = 0; i < this.tagGroupList.length; i++) {
  1221. for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
  1222. if(this.tagGroupList[i].tag[x].isSelected==true){
  1223. this.addTagFormByWatch.tagIds.push(this.tagGroupList[i].tag[x].tagId)
  1224. }
  1225. }
  1226. }
  1227. if(this.addTagFormByWatch.tagIds==[]||this.addTagFormByWatch.tagIds==null||this.addTagFormByWatch.tagIds==""){
  1228. return this.$message('请选择标签');
  1229. }
  1230. this.addTagFormByWatch.corpId=this.queryParams.corpId
  1231. this.addTagFormByWatch.logIds=this.ids;
  1232. let loadingRock = this.$loading({
  1233. lock: true,
  1234. text: '正在执行中请稍后~~请不要刷新页面!!',
  1235. spinner: 'el-icon-loading',
  1236. background: 'rgba(0, 0, 0, 0.7)'
  1237. });
  1238. delTagByWatch(this.addTagFormByWatch).then(response => {
  1239. // this.msgSuccess(response.msg);
  1240. this.resultMessage = response.msg;
  1241. this.resultDialogVisible = true; // 显示弹窗
  1242. this.resultTitle = '批量移除标签结果';
  1243. this.tagDelOpen = false;
  1244. loadingRock.close();
  1245. this.addTagFormByWatch={
  1246. userIds:[],
  1247. tagIds:[]
  1248. };
  1249. this.getList()
  1250. }).finally(res=>{
  1251. loadingRock.close();
  1252. });
  1253. },
  1254. addTagCancel() {
  1255. this.tagOpen = false;
  1256. this.addTagFormByWatch={
  1257. logIds:[],
  1258. tagIds:[]
  1259. };
  1260. },
  1261. DelTagCancel() {
  1262. this.tagDelOpen = false;
  1263. this.addTagFormByWatch={
  1264. logIds:[],
  1265. tagIds:[]
  1266. };
  1267. },
  1268. /**
  1269. * 异步查询SOP列表
  1270. * @param {string} queryString - 查询字符串
  1271. * @param {function} callback - 回调函数
  1272. */
  1273. querySopAsync(queryString, callback) {
  1274. if (!queryString) {
  1275. callback([]);
  1276. return;
  1277. }
  1278. infoSop({ name: queryString }).then(response => {
  1279. if (response && response.rows) {
  1280. const suggestions = response.rows.map(item => ({
  1281. value: item.name,
  1282. id: item.id,
  1283. name: item.name
  1284. }));
  1285. callback(suggestions);
  1286. } else {
  1287. callback([]);
  1288. }
  1289. }).catch(error => {
  1290. console.error('通过sop查询失败:', error);
  1291. callback([]);
  1292. });
  1293. },
  1294. /**
  1295. * 选择SOP
  1296. * @param {object} item - 选中的SOP项
  1297. */
  1298. handleSopSelect(item) {
  1299. this.selectedSopId = item.id;
  1300. this.queryParams.sopId = item.id;
  1301. this.sopSearchText = item.name;
  1302. },
  1303. /**
  1304. * 清空SOP选择
  1305. */
  1306. handleSopClear() {
  1307. this.selectedSopId = null;
  1308. this.queryParams.sopId = null;
  1309. this.sopSearchText = '';
  1310. },
  1311. }
  1312. };
  1313. </script>
  1314. <style scoped>
  1315. /* CSS 样式 */
  1316. .tag-container {
  1317. display: flex;
  1318. flex-wrap: wrap; /* 超出宽度时自动换行 */
  1319. gap: 8px; /* 设置标签之间的间距 */
  1320. }
  1321. .name-background {
  1322. display: inline-block;
  1323. background-color: #abece6; /* 背景颜色 */
  1324. padding: 4px 8px; /* 调整内边距,让背景包裹文字 */
  1325. border-radius: 4px; /* 可选:设置圆角 */
  1326. }
  1327. /* CSS 样式 */
  1328. .tag-container {
  1329. display: flex;
  1330. flex-wrap: wrap; /* 超出宽度时自动换行 */
  1331. gap: 8px; /* 设置标签之间的间距 */
  1332. }
  1333. .name-background {
  1334. display: inline-block;
  1335. background-color: #abece6; /* 背景颜色 */
  1336. padding: 4px 8px; /* 调整内边距,让背景包裹文字 */
  1337. border-radius: 4px; /* 可选:设置圆角 */
  1338. }
  1339. .tag-box {
  1340. padding: 8px 12px;
  1341. border: 1px solid #989797;
  1342. border-radius: 4px;
  1343. cursor: pointer;
  1344. display: inline-block;
  1345. }
  1346. .tag-selected {
  1347. background-color: #00bc98;
  1348. color: #fff;
  1349. border-color: #00bc98;
  1350. }
  1351. .el-tag + .el-tag {
  1352. margin-left: 10px;
  1353. }
  1354. .button-new-tag {
  1355. margin-left: 10px;
  1356. height: 32px;
  1357. line-height: 30px;
  1358. padding-top: 0;
  1359. padding-bottom: 0;
  1360. }
  1361. .input-new-tag {
  1362. width: 90px;
  1363. margin-left: 10px;
  1364. vertical-align: bottom;
  1365. }
  1366. /* 新增的滚动容器样式(不影响原有样式) */
  1367. .scroll-wrapper {
  1368. max-height: 130px; /* 大约三行的高度 */
  1369. overflow-y: auto; /* 垂直滚动 */
  1370. padding-right: 5px; /* 为滚动条留出空间 */
  1371. }
  1372. /* 美化滚动条(可选) */
  1373. .scroll-wrapper::-webkit-scrollbar {
  1374. width: 6px;
  1375. }
  1376. .scroll-wrapper::-webkit-scrollbar-thumb {
  1377. background: rgba(0, 0, 0, 0.2);
  1378. border-radius: 3px;
  1379. }
  1380. /* SOP搜索框样式 */
  1381. .sop-item {
  1382. display: flex;
  1383. align-items: center;
  1384. }
  1385. .sop-name {
  1386. font-size: 14px;
  1387. color: #606266;
  1388. }
  1389. </style>