index.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826
  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="name">
  5. <el-input
  6. v-model="queryParams.name"
  7. placeholder="请输入模板名称"
  8. clearable
  9. size="small"
  10. @keyup.enter.native="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="状态" prop="status">
  14. <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
  15. <el-option
  16. v-for="dict in statusOptions"
  17. :key="dict.dictValue"
  18. :label="dict.dictLabel"
  19. :value="dict.dictValue"
  20. />
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item label="课程" prop="courseId">
  24. <el-input
  25. v-model="queryParams.courseId"
  26. placeholder="请输入课程id"
  27. clearable
  28. size="small"
  29. @keyup.enter.native="handleQuery"
  30. />
  31. </el-form-item>
  32. <el-form-item label="小节" prop="videoId">
  33. <el-input
  34. v-model="queryParams.videoId"
  35. placeholder="请输入小节视频id"
  36. clearable
  37. size="small"
  38. @keyup.enter.native="handleQuery"
  39. />
  40. </el-form-item>
  41. <el-form-item>
  42. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  43. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  44. </el-form-item>
  45. </el-form>
  46. <el-row :gutter="10" class="mb8">
  47. <el-col :span="1.5">
  48. <el-button
  49. type="primary"
  50. plain
  51. icon="el-icon-plus"
  52. size="mini"
  53. @click="handleAdd"
  54. v-hasPermi="['courseFinishTemp:course:add']"
  55. >新增
  56. </el-button>
  57. </el-col>
  58. <el-col :span="1.5">
  59. <el-button
  60. type="success"
  61. plain
  62. icon="el-icon-edit"
  63. size="mini"
  64. :disabled="single"
  65. @click="handleUpdate"
  66. v-hasPermi="['courseFinishTemp:course:edit']"
  67. >修改
  68. </el-button>
  69. </el-col>
  70. <el-col :span="1.5">
  71. <el-button
  72. type="danger"
  73. plain
  74. icon="el-icon-delete"
  75. size="mini"
  76. :disabled="multiple"
  77. @click="handleDelete"
  78. v-hasPermi="['courseFinishTemp:course:remove']"
  79. >删除
  80. </el-button>
  81. </el-col>
  82. <el-col :span="1.5">
  83. <el-button
  84. type="warning"
  85. plain
  86. icon="el-icon-download"
  87. size="mini"
  88. :loading="exportLoading"
  89. @click="handleExport"
  90. v-hasPermi="['courseFinishTemp:course:export']"
  91. >导出
  92. </el-button>
  93. </el-col>
  94. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  95. </el-row>
  96. <el-table border v-loading="loading" :data="courseFinishTempList" @selection-change="handleSelectionChange">
  97. <el-table-column type="selection" width="55" align="center"/>
  98. <el-table-column label="模板ID" align="center" prop="id"/>
  99. <el-table-column label="模板名称" align="center" prop="name"/>
  100. <el-table-column label="状态" align="center" prop="status">
  101. <template slot-scope="scope">
  102. <dict-tag :options="statusOptions" :value="scope.row.status"/>
  103. </template>
  104. </el-table-column>
  105. <el-table-column label="课程名称" align="center" prop="courseName"/>
  106. <el-table-column label="小节名称" align="center" prop="videoName"/>
  107. <el-table-column label="创建时间" align="center" prop="createTime"/>
  108. <el-table-column label="修改时间" align="center" prop="updateTime"/>
  109. <el-table-column label="全选销售" align="center" prop="isAllCompanyUser">
  110. <template slot-scope="scope">
  111. <dict-tag :options="allowSelect" :value="scope.row.isAllCompanyUser"/>
  112. </template>
  113. </el-table-column>
  114. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  115. <template slot-scope="scope">
  116. <el-button
  117. size="mini"
  118. type="text"
  119. icon="el-icon-edit"
  120. @click="handleUpdate(scope.row)"
  121. v-hasPermi="['courseFinishTemp:course:edit']"
  122. >修改
  123. </el-button>
  124. <el-button
  125. size="mini"
  126. type="text"
  127. icon="el-icon-s-promotion"
  128. @click="handleSelectDetails(scope.row)"
  129. v-hasPermi="['courseFinishTemp:course:query']"
  130. >详情
  131. </el-button>
  132. <el-button
  133. size="mini"
  134. type="text"
  135. icon="el-icon-delete"
  136. @click="handleDelete(scope.row)"
  137. v-hasPermi="['courseFinishTemp:course:remove']"
  138. >删除
  139. </el-button>
  140. </template>
  141. </el-table-column>
  142. </el-table>
  143. <pagination
  144. v-show="total>0"
  145. :total="total"
  146. :page.sync="queryParams.pageNum"
  147. :limit.sync="queryParams.pageSize"
  148. @pagination="getList"
  149. />
  150. <!-- 添加或修改完课模板对话框 -->
  151. <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
  152. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  153. <el-form-item label="模板名称" prop="name">
  154. <el-input v-model="form.name" placeholder="请输入模板名称"/>
  155. </el-form-item>
  156. <el-form-item label="状态">
  157. <el-radio-group v-model="form.status">
  158. <el-radio
  159. v-for="dict in statusOptions"
  160. :key="dict.dictValue"
  161. :label="parseInt(dict.dictValue)"
  162. >{{ dict.dictLabel }}
  163. </el-radio>
  164. </el-radio-group>
  165. </el-form-item>
  166. <el-form-item label="选择课程">
  167. <el-select v-model="form.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini"
  168. @change="courseChange()">
  169. <el-option
  170. v-for="dict in courseList"
  171. :key="dict.dictValue"
  172. :label="dict.dictLabel"
  173. :value="parseInt(dict.dictValue)"
  174. />
  175. </el-select>
  176. <el-select v-model="form.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;">
  177. <el-option
  178. v-for="dict in videoList"
  179. :key="dict.dictValue"
  180. :label="dict.dictLabel"
  181. :value="parseInt(dict.dictValue)"
  182. />
  183. </el-select>
  184. </el-form-item>
  185. <el-form-item label="规则" prop="setting">
  186. <div v-for="(item, index) in setting" :key="index"
  187. style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
  188. <el-row>
  189. <el-col :span="22">
  190. <el-form :model="item" label-width="70px">
  191. <el-form-item label="内容类别" style="margin: 2%">
  192. <el-radio-group v-model="item.contentType">
  193. <el-radio :label="item.dictValue" v-for="item in sysQwSopAiContentType">{{ item.dictLabel }}
  194. </el-radio>
  195. </el-radio-group>
  196. </el-form-item>
  197. <el-form-item label="内容" style="margin-bottom: 2%">
  198. <el-input v-if="item.contentType == 1 " v-model="item.value" type="textarea" :rows="3"
  199. placeholder="内容" style="width: 90%;margin-top: 10px;"/>
  200. <ImageUpload v-if="item.contentType == 2 " v-model="item.imgUrl" type="image" :num="1" :width="150"
  201. :height="150"/>
  202. <div v-if="item.contentType == 3 ">
  203. <el-card class="box-card">
  204. <el-form-item label="链接标题:" label-width="100px">
  205. <el-input v-model="item.linkTitle" placeholder="请输入链接标题" style="width: 90%;"/>
  206. </el-form-item>
  207. <el-form-item label="链接描述:" label-width="100px">
  208. <el-input type="textarea" :rows="3" v-model="item.linkDescribe" placeholder="请输入链接描述"
  209. style="width: 90%;margin-top: 1%;"/>
  210. </el-form-item>
  211. <el-form-item label="链接封面:" label-width="100px">
  212. <ImageUpload v-model="item.linkImageUrl" type="image" :num="1" :file-size="2" :width="150"
  213. :height="150" style="margin-top: 1%;"/>
  214. </el-form-item>
  215. <el-form-item label="链接地址:" label-width="100px">
  216. <el-input v-model="item.linkUrl" placeholder="请输入链接地址" style="width: 90%;"/>
  217. </el-form-item>
  218. </el-card>
  219. </div>
  220. <div v-if="item.contentType == 4">
  221. </div>
  222. <div v-if="item.contentType == 5 ">
  223. <el-form-item label="上传文件:" prop="fileUrl" label-width="100px">
  224. <el-upload
  225. v-model="item.fileUrl"
  226. class="avatar-uploader"
  227. :action="uploadUrl"
  228. :show-file-list="false"
  229. :on-success="(res, file) => handleAvatarSuccessFile(res, file, item)"
  230. :before-upload="beforeAvatarUploadFile">
  231. <i class="el-icon-plus avatar-uploader-icon"></i>
  232. </el-upload>
  233. <el-link v-if="item.fileUrl" type="primary" :href="downloadUrl(item.fileUrl)" download>
  234. {{ item.fileUrl }}
  235. </el-link>
  236. </el-form-item>
  237. </div>
  238. <div v-if="item.contentType == 6 ">
  239. <el-form-item label="上传视频:" prop="videoUrl" label-width="100px">
  240. <el-upload
  241. v-model="item.videoUrl"
  242. class="avatar-uploader"
  243. :action="uploadUrl"
  244. :show-file-list="false"
  245. :on-success="(res, file) => handleAvatarSuccessVideo(res, file, item)"
  246. :before-upload="beforeAvatarUploadVideo">
  247. <i class="el-icon-plus avatar-uploader-icon"></i>
  248. </el-upload>
  249. <video v-if="item.videoUrl"
  250. :src="item.videoUrl"
  251. controls style="width: 200px;height: 100px">
  252. </video>
  253. </el-form-item>
  254. </div>
  255. <div v-if="item.contentType == 7 ">
  256. <el-input
  257. v-model="item.value"
  258. type="textarea" :rows="3" maxlength="66" show-word-limit
  259. placeholder="输入要转为语音的内容" style="width: 90%;margin-top: 10px;"
  260. @input="handleInputVideoText(item.value,item)"/>
  261. </div>
  262. <div v-if="item.contentType == 8">
  263. </div>
  264. </el-form-item>
  265. </el-form>
  266. </el-col>
  267. <el-col :span="1" :offset="1">
  268. <i class="el-icon-delete" @click="delSetList(index, 0)" style="margin-top: 20px;"
  269. v-if="setting.length>1 && formType==1"></i>
  270. </el-col>
  271. </el-row>
  272. </div>
  273. <el-link type="primary" class="el-icon-plus" :underline="false" @click='addSetList(0)' v-if="formType==1">
  274. 添加内容
  275. </el-link>
  276. </el-form-item>
  277. <el-form-item label="群聊恭喜规则" prop="setting">
  278. <div v-for="(item, index) in chatSetting" :key="index"
  279. style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
  280. <el-row>
  281. <el-col :span="22">
  282. <el-form :model="item" label-width="70px">
  283. <el-form-item label="内容类别" style="margin: 2%">
  284. <el-radio-group v-model="item.contentType">
  285. <el-radio :label="item.dictValue" v-for="item in sysQwSopAiContentType">{{ item.dictLabel }}
  286. </el-radio>
  287. </el-radio-group>
  288. </el-form-item>
  289. <el-form-item label="内容" style="margin-bottom: 2%">
  290. <el-input v-if="item.contentType == 1 " v-model="item.value" type="textarea" :rows="3"
  291. placeholder="内容" style="width: 90%;margin-top: 10px;"/>
  292. <ImageUpload v-if="item.contentType == 2 " v-model="item.imgUrl" type="image" :num="1" :width="150"
  293. :height="150"/>
  294. <div v-if="item.contentType == 3 ">
  295. <el-card class="box-card">
  296. <el-form-item label="链接标题:" label-width="100px">
  297. <el-input v-model="item.linkTitle" placeholder="请输入链接标题" style="width: 90%;"/>
  298. </el-form-item>
  299. <el-form-item label="链接描述:" label-width="100px">
  300. <el-input type="textarea" :rows="3" v-model="item.linkDescribe" placeholder="请输入链接描述"
  301. style="width: 90%;margin-top: 1%;"/>
  302. </el-form-item>
  303. <el-form-item label="链接封面:" label-width="100px">
  304. <ImageUpload v-model="item.linkImageUrl" type="image" :num="1" :file-size="2" :width="150"
  305. :height="150" style="margin-top: 1%;"/>
  306. </el-form-item>
  307. <el-form-item label="链接地址:" label-width="100px">
  308. <el-input v-model="item.linkUrl" placeholder="请输入链接地址" style="width: 90%;"/>
  309. </el-form-item>
  310. </el-card>
  311. </div>
  312. <div v-if="item.contentType == 4">
  313. </div>
  314. <div v-if="item.contentType == 5 ">
  315. <el-form-item label="上传文件:" prop="fileUrl" label-width="100px">
  316. <el-upload
  317. v-model="item.fileUrl"
  318. class="avatar-uploader"
  319. :action="uploadUrl"
  320. :show-file-list="false"
  321. :on-success="(res, file) => handleAvatarSuccessFile(res, file, item)"
  322. :before-upload="beforeAvatarUploadFile">
  323. <i class="el-icon-plus avatar-uploader-icon"></i>
  324. </el-upload>
  325. <el-link v-if="item.fileUrl" type="primary" :href="downloadUrl(item.fileUrl)" download>
  326. {{ item.fileUrl }}
  327. </el-link>
  328. </el-form-item>
  329. </div>
  330. <div v-if="item.contentType == 6 ">
  331. <el-form-item label="上传视频:" prop="videoUrl" label-width="100px">
  332. <el-upload
  333. v-model="item.videoUrl"
  334. class="avatar-uploader"
  335. :action="uploadUrl"
  336. :show-file-list="false"
  337. :on-success="(res, file) => handleAvatarSuccessVideo(res, file, item)"
  338. :before-upload="beforeAvatarUploadVideo">
  339. <i class="el-icon-plus avatar-uploader-icon"></i>
  340. </el-upload>
  341. <video v-if="item.videoUrl"
  342. :src="item.videoUrl"
  343. controls style="width: 200px;height: 100px">
  344. </video>
  345. </el-form-item>
  346. </div>
  347. <div v-if="item.contentType == 7 ">
  348. <el-input
  349. v-model="item.value"
  350. type="textarea" :rows="3" maxlength="66" show-word-limit
  351. placeholder="输入要转为语音的内容" style="width: 90%;margin-top: 10px;"
  352. @input="handleInputVideoText(item.value,item)"/>
  353. </div>
  354. <div v-if="item.contentType == 8">
  355. </div>
  356. </el-form-item>
  357. </el-form>
  358. </el-col>
  359. <el-col :span="1" :offset="1">
  360. <i class="el-icon-delete" @click="delSetList(index,1)" style="margin-top: 20px;"
  361. v-if="setting.length>1 && formType==1"></i>
  362. </el-col>
  363. </el-row>
  364. </div>
  365. <el-link type="primary" class="el-icon-plus" :underline="false" @click='addSetList(1)' v-if="formType==1">
  366. 添加内容
  367. </el-link>
  368. </el-form-item>
  369. <el-form-item label="全选销售" prop="isAllCompanyUser">
  370. <el-switch
  371. v-model="form.isAllCompanyUser"
  372. active-color="#13ce66"
  373. inactive-color="#ff4949"
  374. :active-value="1"
  375. :inactive-value="2">
  376. </el-switch>
  377. <span v-if="form.isAllCompanyUser == '1'" style="margin-left: 10px;color: #13ce66">是</span>
  378. <span v-else style="margin-left: 10px;color: #ff4949">否</span>
  379. </el-form-item>
  380. <el-form-item label="所属销售" prop="companyUserIds" v-if="form.isAllCompanyUser == '2'">
  381. <el-select v-model="companyUserIds" remote multiple placeholder="请选择" filterable style="width: 100%;">
  382. <el-option
  383. v-for="dict in userList"
  384. :key="dict.userId"
  385. :label="dict.nickName"
  386. :value="dict.userId.toString()">
  387. </el-option>
  388. </el-select>
  389. </el-form-item>
  390. </el-form>
  391. <div slot="footer" class="dialog-footer" v-if="formType==1">
  392. <el-button type="primary" @click="submitForm">确 定</el-button>
  393. <el-button @click="cancel">取 消</el-button>
  394. </div>
  395. </el-dialog>
  396. </div>
  397. </template>
  398. <script>
  399. import {
  400. addCourseFinishTemp,
  401. delCourseFinishTemp,
  402. exportCourseFinishTemp,
  403. getCourseFinishTemp,
  404. listCourseFinishTemp,
  405. updateCourseFinishTemp
  406. } from '@/api/course/courseFinishTemp'
  407. import { getUserList } from '@/api/company/companyUser'
  408. import { courseList, videoList } from '@/api/qw/sop'
  409. import ImageUpload from '@/views/qw/sop/ImageUpload.vue'
  410. export default {
  411. name: "CourseFinishTemp",
  412. components: {ImageUpload},
  413. data() {
  414. return {
  415. //上传语音的遮罩层
  416. voiceLoading: false,
  417. uploadUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS2",
  418. uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/common/uploadOSSByHOOKVoice",
  419. companyUserIds: [],
  420. userList: [],
  421. // 状态字典
  422. statusOptions: [],
  423. allowSelect: [],
  424. parentId: "",
  425. courseList: [],
  426. videoList: [],
  427. // 遮罩层
  428. loading: true,
  429. // 导出遮罩层
  430. exportLoading: false,
  431. // 选中数组
  432. ids: [],
  433. // 非单个禁用
  434. single: true,
  435. // 非多个禁用
  436. multiple: true,
  437. // 显示搜索条件
  438. showSearch: true,
  439. formType: 1,
  440. // 总条数
  441. total: 0,
  442. // 完课模板表格数据
  443. courseFinishTempList: [],
  444. //插件版
  445. sysQwSopAiContentType: [],
  446. sysFsSopWatchStatus: [],
  447. // 弹出层标题
  448. title: "",
  449. // 是否显示弹出层
  450. open: false,
  451. // 查询参数
  452. queryParams: {
  453. pageNum: 1,
  454. pageSize: 10,
  455. name: null,
  456. status: null,
  457. setting: null,
  458. chatSetting: null,
  459. companyId: null,
  460. courseId: null,
  461. videoId: null,
  462. companyUserIds: null,
  463. isDel: null
  464. },
  465. // 模板表格数据
  466. setting: [],
  467. chatSetting: [],
  468. // 表单参数
  469. form: {
  470. setting: null,
  471. chatSetting: null,
  472. videoIdSet: null,
  473. courseIdSet: null,
  474. },
  475. // 表单校验
  476. rules: {}
  477. };
  478. },
  479. created() {
  480. this.queryParams.parentId = this.$route.params && this.$route.params.parentId;
  481. this.parentId = this.queryParams.parentId;
  482. getUserList().then(response => {
  483. this.userList = response.data;
  484. console.log("this.userList", this.userList)
  485. });
  486. this.getDicts("sys_company_status").then(response => {
  487. this.statusOptions = response.data;
  488. });
  489. //复用一下
  490. this.getDicts("sys_qw_allow_select").then(response => {
  491. this.allowSelect = response.data;
  492. });
  493. this.getDicts("sys_fs_sop_watch_status").then(response => {
  494. this.sysFsSopWatchStatus = response.data;
  495. });
  496. this.getDicts("sys_qwSopAi_contentType").then(response => {
  497. this.sysQwSopAiContentType = response.data;
  498. });
  499. courseList().then(response => {
  500. this.courseList = response.list;
  501. });
  502. this.getList();
  503. },
  504. methods: {
  505. courseChange() {
  506. videoList(this.form.courseId).then(response => {
  507. this.videoList = response.list;
  508. });
  509. },
  510. /** 查询完课模板列表 */
  511. getList() {
  512. this.loading = true;
  513. listCourseFinishTemp(this.queryParams).then(response => {
  514. this.courseFinishTempList = response.rows;
  515. this.total = response.total;
  516. this.loading = false;
  517. });
  518. },
  519. // 取消按钮
  520. cancel() {
  521. this.open = false;
  522. this.reset();
  523. },
  524. handleAvatarSuccessFile(res, file, item) {
  525. if (res.code === 200) {
  526. // 使用 $set 确保响应式更新
  527. this.$set(item, 'fileUrl', res.url);
  528. } else {
  529. this.msgError(res.msg);
  530. }
  531. },
  532. beforeAvatarUploadFile(file) {
  533. const isLt1M = file.size / 1024 / 1024 < 10;
  534. if (!isLt1M) {
  535. this.$message.error('上传大小不能超过 10MB!');
  536. }
  537. return isLt1M;
  538. },
  539. //下载文件
  540. downloadUrl(materialUrl) {
  541. // 直接返回文件 URL
  542. return materialUrl;
  543. },
  544. handleInputVideoText(value, content) {
  545. // 允许的字符:中文、英文(大小写)、数字和指定标点符号(,。!?)
  546. const regex = /^[\u4e00-\u9fa5,。!?,!?]+$/;
  547. // 删除不符合条件的字符
  548. const filteredValue = value.split('').filter(char => regex.test(char)).join('');
  549. this.$set(content, 'value', filteredValue);
  550. },
  551. handleAvatarSuccessVideo(res, file, item) {
  552. if (res.code == 200) {
  553. // 使用 $set 确保响应式更新
  554. this.$set(item, 'videoUrl', res.url);
  555. } else {
  556. this.msgError(res.msg);
  557. }
  558. },
  559. beforeAvatarUploadVideo(file) {
  560. const isLt30M = file.size / 1024 / 1024 < 10;
  561. const isMP4 = file.type === 'video/mp4';
  562. if (!isMP4) {
  563. this.$message.error('仅支持上传 MP4 格式的视频文件!');
  564. return false;
  565. }
  566. if (!isLt30M) {
  567. this.$message.error('上传大小不能超过 10MB!');
  568. return false;
  569. }
  570. return true;
  571. },
  572. delSetList(index, type) {
  573. if (type == 0) {
  574. this.setting.splice(index, 1)
  575. } else {
  576. this.chatSetting.splice(index, 1)
  577. }
  578. },
  579. addSetList(type) {
  580. const newSetting = {
  581. contentType: '1',
  582. value: '',
  583. };
  584. // 将新设置项添加到 content.setting 数组中
  585. if (type == 0) {
  586. this.setting.push(newSetting);
  587. } else {
  588. this.chatSetting.push(newSetting);
  589. }
  590. },
  591. // 表单重置
  592. reset() {
  593. this.form = {
  594. id: null,
  595. name: null,
  596. type: 1,
  597. status: 1,
  598. setting: [],
  599. chatSetting: [],
  600. companyId: null,
  601. createBy: null,
  602. createTime: null,
  603. courseId: null,
  604. videoId: null,
  605. companyUserIds: null,
  606. updateTime: null,
  607. isDel: null,
  608. isAllCompanyUser: null,
  609. };
  610. this.companyUserIds = []
  611. this.setting = []
  612. this.chatSetting = []
  613. this.resetForm("form");
  614. },
  615. /** 搜索按钮操作 */
  616. handleQuery() {
  617. this.queryParams.pageNum = 1;
  618. this.getList();
  619. },
  620. /** 重置按钮操作 */
  621. resetQuery() {
  622. this.resetForm("queryForm");
  623. this.handleQuery();
  624. },
  625. // 多选框选中数据
  626. handleSelectionChange(selection) {
  627. this.ids = selection.map(item => item.id)
  628. this.single = selection.length !== 1
  629. this.multiple = !selection.length
  630. },
  631. /** 新增按钮操作 */
  632. handleAdd() {
  633. this.reset();
  634. this.open = true;
  635. this.title = "添加完课模板";
  636. },
  637. /**
  638. * 查看完课模板
  639. */
  640. handleSelectDetails(row) {
  641. this.reset();
  642. const id = row.id || this.ids
  643. getCourseFinishTemp(id).then(response => {
  644. console.log("this.form222 ", response.data)
  645. this.form = response.data;
  646. this.setting = JSON.parse(this.form.setting)
  647. this.chatSetting = JSON.parse(this.form.chatSetting)
  648. if (response.data.companyUserIds != null) {
  649. this.companyUserIds = this.form.companyUserIds.split(",");
  650. }
  651. videoList(this.form.courseId).then(response => {
  652. this.videoList = response.list;
  653. });
  654. this.open = true;
  655. this.title = "查看完课模板";
  656. this.formType = 2;
  657. });
  658. },
  659. /** 修改按钮操作 */
  660. handleUpdate(row) {
  661. this.reset();
  662. const id = row.id || this.ids
  663. getCourseFinishTemp(id).then(response => {
  664. console.log("this.response.data", response.data)
  665. this.form = response.data;
  666. this.setting = JSON.parse(this.form.setting)
  667. this.chatSetting = JSON.parse(this.form.chatSetting)
  668. if (response.data.companyUserIds != null) {
  669. this.companyUserIds = this.form.companyUserIds.split(",");
  670. }
  671. videoList(this.form.courseId).then(response => {
  672. this.videoList = response.list;
  673. });
  674. this.open = true;
  675. this.title = "修改完课模板";
  676. });
  677. },
  678. /** 提交按钮 */
  679. submitForm() {
  680. this.$refs["form"].validate(valid => {
  681. if (valid) {
  682. if (this.form.isAllCompanyUser == null) {
  683. this.form.isAllCompanyUser = 2;
  684. }
  685. this.form.companyUserIds = this.companyUserIds.toString()
  686. this.form.parentId = this.parentId
  687. this.form.setting = JSON.stringify(this.setting)
  688. this.form.chatSetting = JSON.stringify(this.chatSetting)
  689. if (this.setting.length <= 0) {
  690. return this.$message("请添加规则")
  691. }
  692. for (let i = 0; i < this.setting.length; i++) {
  693. if (this.setting[i].contentType == 1 && (this.setting[i].value == null || this.setting[i].value == "")) {
  694. return this.$message.error("内容不能为空")
  695. }
  696. if (this.setting[i].contentType == 2 && (this.setting[i].imgUrl == null || this.setting[i].imgUrl == "")) {
  697. return this.$message.error("图片不能为空")
  698. }
  699. if (this.setting[i].contentType == 3 && (this.setting[i].linkTitle == null || this.setting[i].linkTitle == "")) {
  700. return this.$message.error("链接标题不能为空")
  701. }
  702. if (this.setting[i].contentType == 3 && (this.setting[i].linkDescribe == null || this.setting[i].linkDescribe == "")) {
  703. return this.$message.error("链接描述不能为空")
  704. }
  705. if (this.setting[i].contentType == 3 && (this.setting[i].linkImageUrl == null || this.setting[i].linkImageUrl == "")) {
  706. return this.$message.error("链接图片不能为空")
  707. }
  708. if (this.setting[i].contentType == 3 && this.setting[i].type == 1 && (this.setting[i].linkUrl == null || this.setting[i].linkUrl == "")) {
  709. return this.$message.error("链接地址不能为空")
  710. }
  711. if (this.setting[i].contentType == 5 && (this.setting[i].fileUrl == null || this.setting[i].fileUrl == "")) {
  712. return this.$message.error("文件不能为空")
  713. }
  714. if (this.setting[i].contentType == 6 && (this.setting[i].videoUrl == null || this.setting[i].videoUrl == "")) {
  715. return this.$message.error("视频不能为空")
  716. }
  717. if (this.setting[i].contentType == 7 && (this.setting[i].value == null || this.setting[i].value == "")) {
  718. return this.$message.error("语音不能为空")
  719. }
  720. }
  721. if (this.form.id != null) {
  722. updateCourseFinishTemp(this.form).then(response => {
  723. this.msgSuccess("修改成功");
  724. this.open = false;
  725. this.getList();
  726. this.setting = [];
  727. this.chatSetting = [];
  728. });
  729. } else {
  730. addCourseFinishTemp(this.form).then(response => {
  731. this.msgSuccess("新增成功");
  732. this.open = false;
  733. this.setting = [];
  734. this.chatSetting = [];
  735. this.getList();
  736. });
  737. }
  738. }
  739. });
  740. },
  741. /** 删除按钮操作 */
  742. handleDelete(row) {
  743. const ids = row.id || this.ids;
  744. this.$confirm('是否确认删除完课模板编号为"' + ids + '"的数据项?', "警告", {
  745. confirmButtonText: "确定",
  746. cancelButtonText: "取消",
  747. type: "warning"
  748. }).then(function () {
  749. return delCourseFinishTemp(ids);
  750. }).then(() => {
  751. this.getList();
  752. this.msgSuccess("删除成功");
  753. }).catch(() => {
  754. });
  755. },
  756. /** 导出按钮操作 */
  757. handleExport() {
  758. const queryParams = this.queryParams;
  759. this.$confirm('是否确认导出所有完课模板数据项?', "警告", {
  760. confirmButtonText: "确定",
  761. cancelButtonText: "取消",
  762. type: "warning"
  763. }).then(() => {
  764. this.exportLoading = true;
  765. return exportCourseFinishTemp(queryParams);
  766. }).then(response => {
  767. this.download(response.msg);
  768. this.exportLoading = false;
  769. }).catch(() => {
  770. });
  771. }
  772. }
  773. };
  774. </script>