statistics.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="用户" prop="nickName">
  5. <el-select v-model="queryParams.userId" remote placeholder="用户名/手机号" filterable clearable style="width: 100%;"
  6. @keyup.enter.native="handleQuery"
  7. :remote-method="remoteGetFsUserList"
  8. @clear="handleClear"
  9. :loading="queryUserLoading"
  10. >
  11. <el-option
  12. v-for="dict in fsUserList"
  13. :key="`${dict.nickname} - ${dict.phone}`"
  14. :label="`${dict.nickname} - ${dict.phone}`"
  15. :value="dict.userId">
  16. </el-option>
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="公司名" prop="companyId">
  20. <el-select filterable style="width: 220px" v-model="queryParams.companyId" placeholder="请选择公司名" clearable size="small">
  21. <el-option
  22. v-for="item in companys"
  23. :key="item.companyId"
  24. :label="item.companyName"
  25. :value="item.companyId"
  26. />
  27. </el-select>
  28. </el-form-item>
  29. <el-form-item label="销售" prop="nickName">
  30. <el-select v-model="queryParams.companyUserId" remote placeholder="请选择" filterable clearable style="width: 100%;" @keyup.enter.native="handleQuery">
  31. <el-option
  32. v-for="dict in companyUserList"
  33. :key="`${dict.nickName} - ${dict.userName}`"
  34. :label="`${dict.nickName} - ${dict.userName}`"
  35. :value="dict.userId">
  36. </el-option>
  37. </el-select>
  38. </el-form-item>
  39. <el-form-item label="项目" prop="courseId">
  40. <el-select filterable v-model="queryParams.project" placeholder="请选择项目" clearable size="small">
  41. <el-option
  42. v-for="dict in projectLists"
  43. :key="dict.dictValue"
  44. :label="dict.dictLabel"
  45. :value="parseInt(dict.dictValue)"
  46. />
  47. </el-select>
  48. </el-form-item>
  49. <el-form-item label="课程" prop="courseId">
  50. <el-select filterable v-model="queryParams.courseId" placeholder="请选择课程" clearable size="small" @change="courseChange(queryParams.courseId)">
  51. <el-option
  52. v-for="dict in courseLists"
  53. :key="dict.dictValue"
  54. :label="dict.dictLabel"
  55. :value="dict.dictValue"
  56. />
  57. </el-select>
  58. </el-form-item>
  59. <el-form-item label="小节" prop="videoId">
  60. <el-select filterable v-model="queryParams.videoId" placeholder="请选择小节" clearable size="small">
  61. <el-option
  62. v-for="dict in videoList"
  63. :key="dict.dictValue"
  64. :label="dict.dictLabel"
  65. :value="dict.dictValue"
  66. />
  67. </el-select>
  68. </el-form-item>
  69. <el-form-item label="创建时间" prop="createTime">
  70. <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>
  71. </el-form-item>
  72. <el-form-item>
  73. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  74. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  75. </el-form-item>
  76. </el-form>
  77. <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange" show-summary>
  78. <el-table-column type="selection" width="55" align="center" />
  79. <el-table-column label="用户" align="center" prop="userName" />
  80. <el-table-column label="对应销售" align="center" prop="companyUserName" />
  81. <el-table-column label="发课时间" align="center" prop="createTime"/>
  82. <el-table-column label="项目" align="center" prop="projectName" />
  83. <el-table-column label="课程名称" align="center" prop="courseName" />
  84. <el-table-column label="小节名称" align="center" prop="videoName" />
  85. <el-table-column label="待看课" align="center" prop="type3" />
  86. <el-table-column label="看课中" align="center" prop="type1" />
  87. <el-table-column label="已完课" align="center" prop="type2" />
  88. <el-table-column label="看课中断" align="center" prop="type4" />
  89. </el-table>
  90. <pagination
  91. v-show="total>0"
  92. :total="total"
  93. :page.sync="queryParams.pageNum"
  94. :limit.sync="queryParams.pageSize"
  95. @pagination="getList"
  96. />
  97. </div>
  98. </template>
  99. <script>
  100. import { listCourseWatchLog, getCourseWatchLog, delCourseWatchLog, addCourseWatchLog, updateCourseWatchLog, exportCourseWatchLog,statisticsList } from "@/api/course/courseWatchLog";
  101. import { courseList,videoList } from '@/api/course/courseRedPacketLog'
  102. import {getUserList} from "@/api/company/companyUser";
  103. import {getFsUserList} from "@/api/users/user";
  104. import {getCompanyList} from "@/api/company/company";
  105. export default {
  106. name: "CourseWatchLog",
  107. data() {
  108. return {
  109. companys:[],
  110. activeName:"00",
  111. createTime:null,
  112. courseLists:[],
  113. videoList:[],
  114. logTypeOptions:[],
  115. // 遮罩层
  116. loading: false,
  117. // 导出遮罩层
  118. exportLoading: false,
  119. // 选中数组
  120. ids: [],
  121. // 非单个禁用
  122. single: true,
  123. // 非多个禁用
  124. multiple: true,
  125. // 显示搜索条件
  126. showSearch: true,
  127. // 总条数
  128. total: 0,
  129. // 短链课程看课记录表格数据
  130. companyUserList: [],
  131. courseWatchLogList: [],
  132. // 弹出层标题
  133. title: "",
  134. // 是否显示弹出层
  135. open: false,
  136. projectLists: [],
  137. fsUserList: [],
  138. queryUserLoading: false,
  139. // 查询参数
  140. queryParams: {
  141. pageNum: 1,
  142. pageSize: 10,
  143. userId: null,
  144. nickName: null,
  145. videoId: null,
  146. logType: null,
  147. qwExternalContactId: null,
  148. duration: null,
  149. qwUserId: null,
  150. companyUserId: null,
  151. companyId: null,
  152. courseId: null,
  153. sTime:null,
  154. eTime:null,
  155. scheduleStartTime: null,
  156. scheduleEndTime: null,
  157. },
  158. // 表单参数
  159. form: {},
  160. // 表单校验
  161. rules: {
  162. },
  163. scheduleTime: null,
  164. };
  165. },
  166. created() {
  167. getCompanyList().then(response => {
  168. this.companys = response.data;
  169. if(this.companys!=null&&this.companys.length>0){
  170. this.companyId=this.companys[0].companyId;
  171. this.getTreeselect();
  172. }
  173. });
  174. courseList().then(response => {
  175. this.courseLists = response.list;
  176. });
  177. // this.getList();
  178. this.getDicts("sys_course_watch_log_type").then(response => {
  179. this.logTypeOptions = response.data;
  180. });
  181. this.getDicts("sys_course_project").then(response => {
  182. this.projectLists = response.data;
  183. })
  184. getUserList().then(res=>{
  185. if(res.code === 200) {
  186. this.companyUserList = res.data
  187. }
  188. })
  189. },
  190. methods: {
  191. handleClear(){
  192. this.queryUserLoading = false;
  193. this.fsUserList = [];
  194. },
  195. remoteGetFsUserList(query){
  196. if(query){
  197. this.queryUserLoading = true;
  198. const isNumeric = /^\d+$/.test(query);
  199. let payload = {
  200. username: query,
  201. nickname: query
  202. }
  203. if(isNumeric) {
  204. payload = {
  205. userId: query,
  206. username: query,
  207. phone: query
  208. }
  209. }
  210. getFsUserList(payload).then(res=>{
  211. if(res.code === 200) {
  212. this.fsUserList = res.data
  213. }
  214. }).finally(()=>{
  215. this.queryUserLoading = false;
  216. })
  217. }
  218. },
  219. courseChange(row){
  220. this.queryParams.videoId=null;
  221. if(row === ''){
  222. this.videoList=[];
  223. return
  224. }
  225. videoList(row).then(response => {
  226. this.videoList=response.list
  227. });
  228. },
  229. change() {
  230. if (this.createTime != null) {
  231. this.queryParams.sTime = this.createTime[0];
  232. this.queryParams.eTime = this.createTime[1];
  233. } else {
  234. this.queryParams.sTime = null;
  235. this.queryParams.eTime = null;
  236. }
  237. },
  238. handleClickX(tab,event){
  239. this.activeName=tab.name;
  240. if(tab.name=="00"){
  241. this.queryParams.logType=null;
  242. }else{
  243. this.queryParams.logType=tab.name;
  244. }
  245. this.getList()
  246. },
  247. /** 查询短链课程看课记录列表 */
  248. getList() {
  249. this.loading = true;
  250. statisticsList(this.queryParams).then(response => {
  251. this.courseWatchLogList = response.rows;
  252. this.total = response.total;
  253. this.loading = false;
  254. });
  255. },
  256. // 取消按钮
  257. cancel() {
  258. this.open = false;
  259. this.reset();
  260. },
  261. // 表单重置
  262. reset() {
  263. this.form = {
  264. logId: null,
  265. userId: null,
  266. videoId: null,
  267. logType: null,
  268. createTime: null,
  269. updateTime: null,
  270. qwExternalContactId: null,
  271. duration: null,
  272. qwUserId: null,
  273. companyUserId: null,
  274. companyId: null,
  275. courseId: null
  276. };
  277. this.resetForm("form");
  278. },
  279. /** 搜索按钮操作 */
  280. handleQuery() {
  281. if(this.queryParams.companyId == null){
  282. this.$message.error("请选择公司!");
  283. return;
  284. }
  285. this.queryParams.pageNum = 1;
  286. this.getList();
  287. },
  288. /** 重置按钮操作 */
  289. resetQuery() {
  290. this.resetForm("queryForm");
  291. this.createTime = null;
  292. this.scheduleTime = null;
  293. this.queryParams.sTime = null;
  294. this.queryParams.eTime = null;
  295. this.queryParams.scheduleStartTime = null;
  296. this.queryParams.scheduleEndTime = null;
  297. this.handleQuery();
  298. },
  299. // 多选框选中数据
  300. handleSelectionChange(selection) {
  301. this.ids = selection.map(item => item.logId)
  302. this.single = selection.length!==1
  303. this.multiple = !selection.length
  304. },
  305. /** 新增按钮操作 */
  306. handleAdd() {
  307. this.reset();
  308. this.open = true;
  309. this.title = "添加短链课程看课记录";
  310. },
  311. /** 修改按钮操作 */
  312. handleUpdate(row) {
  313. this.reset();
  314. const logId = row.logId || this.ids
  315. getCourseWatchLog(logId).then(response => {
  316. this.form = response.data;
  317. this.open = true;
  318. this.title = "修改短链课程看课记录";
  319. });
  320. },
  321. /** 提交按钮 */
  322. submitForm() {
  323. this.$refs["form"].validate(valid => {
  324. if (valid) {
  325. if (this.form.logId != null) {
  326. updateCourseWatchLog(this.form).then(response => {
  327. this.msgSuccess("修改成功");
  328. this.open = false;
  329. this.getList();
  330. });
  331. } else {
  332. addCourseWatchLog(this.form).then(response => {
  333. this.msgSuccess("新增成功");
  334. this.open = false;
  335. this.getList();
  336. });
  337. }
  338. }
  339. });
  340. },
  341. /** 删除按钮操作 */
  342. handleDelete(row) {
  343. const logIds = row.logId || this.ids;
  344. this.$confirm('是否确认删除短链课程看课记录编号为"' + logIds + '"的数据项?', "警告", {
  345. confirmButtonText: "确定",
  346. cancelButtonText: "取消",
  347. type: "warning"
  348. }).then(function() {
  349. return delCourseWatchLog(logIds);
  350. }).then(() => {
  351. this.getList();
  352. this.msgSuccess("删除成功");
  353. }).catch(() => {});
  354. },
  355. /** 导出按钮操作 */
  356. handleExport() {
  357. const queryParams = this.queryParams;
  358. this.$confirm('是否确认导出所有短链课程看课记录数据项?', "警告", {
  359. confirmButtonText: "确定",
  360. cancelButtonText: "取消",
  361. type: "warning"
  362. }).then(() => {
  363. this.exportLoading = true;
  364. return exportCourseWatchLog(queryParams);
  365. }).then(response => {
  366. this.download(response.msg);
  367. this.exportLoading = false;
  368. }).catch(() => {});
  369. },
  370. handleScheduleTimeChange(val) {
  371. if (val) {
  372. this.queryParams.scheduleStartTime = val[0];
  373. this.queryParams.scheduleEndTime = val[1];
  374. } else {
  375. this.queryParams.scheduleStartTime = null;
  376. this.queryParams.scheduleEndTime = null;
  377. }
  378. },
  379. }
  380. };
  381. </script>