目录代码整合
This commit is contained in:
		
							
								
								
									
										259
									
								
								packages/party/AppPartyHistoryClass/AppPartyHistoryClass.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										259
									
								
								packages/party/AppPartyHistoryClass/AppPartyHistoryClass.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,259 @@ | ||||
| <template> | ||||
|   <section class="AppFoundingHundred"> | ||||
|     <ai-list v-if="showList"> | ||||
|       <template #title> | ||||
|         <ai-title title="党员学习" isShowBottomBorder></ai-title> | ||||
|       </template> | ||||
|       <template #content> | ||||
|         <ai-search-bar> | ||||
|           <template slot="left"> | ||||
|             <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd" | ||||
|               >添加</el-button | ||||
|             > | ||||
|           </template> | ||||
|           <template slot="right"> | ||||
|             <el-input | ||||
|               v-model="search.title" | ||||
|               class="search-input" | ||||
|               size="small" | ||||
|               placeholder="请输入课程主题" | ||||
|               clearable | ||||
|               v-throttle=" | ||||
|                 () => { | ||||
|                   (search.current = 1), getList(); | ||||
|                 } | ||||
|               " | ||||
|               @clear="(search.current = 1), (search.title = ''), getList()" | ||||
|               suffix-icon="iconfont iconSearch" | ||||
|             > | ||||
|             </el-input> | ||||
|           </template> | ||||
|         </ai-search-bar> | ||||
|         <ai-table | ||||
|           :tableData="tableData" | ||||
|           :col-configs="colConfigs" | ||||
|           stripe | ||||
|           :total="total" | ||||
|           :current.sync="page.current" | ||||
|           :size.sync="page.size" | ||||
|           style="margin-top: 10px" | ||||
|           @getList="getList" | ||||
|         > | ||||
|           <el-table-column | ||||
|             slot="options" | ||||
|             label="操作" | ||||
|             align="center" | ||||
|             width="230px" | ||||
|             fixed="right" | ||||
|           > | ||||
|             <div slot-scope="{ row }" class="table-options"> | ||||
|               <el-button | ||||
|                 type="text" | ||||
|                 :title="row.status == 0 ? '发布' : '取消发布'" | ||||
|                 @click="handleChange(row)" | ||||
|                 >{{ row.status == 0 ? "发布" : "取消发布" }}</el-button | ||||
|               > | ||||
|               <el-button type="text" title="添加" @click="handleAddSeries(row)" | ||||
|                 >添加剧集</el-button | ||||
|               > | ||||
|               <el-button type="text" title="详情" @click="handleDetail(row)" | ||||
|                 >详情</el-button | ||||
|               > | ||||
|               <el-button type="text" title="编辑" @click="handleEdit(row)" | ||||
|                 >编辑</el-button | ||||
|               > | ||||
|               <el-button type="text" title="删除" @click="handleDelete(row)" | ||||
|                 >删除</el-button | ||||
|               > | ||||
|             </div> | ||||
|           </el-table-column> | ||||
|         </ai-table> | ||||
|       </template> | ||||
|     </ai-list> | ||||
|     <component | ||||
|       :is="comp" | ||||
|       v-else | ||||
|       :row="row" | ||||
|       :instance="instance" | ||||
|       :dict="dict" | ||||
|       :permissions="permissions" | ||||
|       @back="back" | ||||
|       :isEdit="isEdit" | ||||
|     ></component> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import partyClassAdd from "./components/partyClassAdd"; | ||||
| import seriesManage from "./components/seriesManage"; | ||||
| import { mapState } from "vuex"; | ||||
|  | ||||
| export default { | ||||
|   name: "AppPartyHistoryClass", | ||||
|   label: "党员学习", | ||||
|   components: { partyClassAdd, seriesManage }, | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       comp: "", | ||||
|       tableData: [], | ||||
|       total: 0, | ||||
|       row: {}, | ||||
|       showList: true, | ||||
|       search: {}, | ||||
|       topOrgId: "", | ||||
|       partyList: [], | ||||
|       treeData: [], | ||||
|       organizationId: "", | ||||
|       organizationName: "", | ||||
|       isEdit: false, | ||||
|       page: { | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|       }, | ||||
|     }; | ||||
|   }, | ||||
|   computed: { | ||||
|     ...mapState(["user"]), | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         { label: "课程主题", prop: "title" }, | ||||
|         { | ||||
|           label: "更新状态", | ||||
|           render: (h, { row }) => [ | ||||
|             <span> | ||||
|               {" "} | ||||
|               {this.dict.getLabel( | ||||
|                 "classroomUpdateStatus", | ||||
|                 row.updateStatus | ||||
|               )}{" "} | ||||
|             </span>, | ||||
|           ], | ||||
|         }, | ||||
|         { label: "更新时间", prop: "updateDate" }, | ||||
|         { label: "发布时间", prop: "createDate" }, | ||||
|         { | ||||
|           label: "发布状态", | ||||
|           render: (h, { row }) => [ | ||||
|             <span> {this.dict.getLabel("newsCenterStatus", row.status)} </span>, | ||||
|           ], | ||||
|         }, | ||||
|         { label: "发布组织", prop: "organizationName" }, | ||||
|         { slot: "options" }, | ||||
|       ]; | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     handleChange(row) { | ||||
|       this.$confirm(`是否确定要${row.status == 0 ? "发布" : "取消发布"}?`).then( | ||||
|         (_) => { | ||||
|           this.instance | ||||
|             .post("/app/apppartyclassroom/addOrUpdate", { | ||||
|               id: row.id, | ||||
|               status: row.status == 0 ? 1 : 0, | ||||
|             }) | ||||
|             .then((res) => { | ||||
|               if (res.code == 0) { | ||||
|                 this.$message.success( | ||||
|                   `${row.status == 0 ? "发布成功" : "取消发布成功"}` | ||||
|                 ); | ||||
|                 this.getList(); | ||||
|               } | ||||
|             }); | ||||
|         } | ||||
|       ); | ||||
|     }, | ||||
|     handleAddSeries(row) { | ||||
|       this.showList = false; | ||||
|       this.comp = "seriesManage"; | ||||
|       this.row = row; | ||||
|     }, | ||||
|     handleDelete({ id }) { | ||||
|       this.$confirm("确定要删除吗?").then((_) => { | ||||
|         this.instance | ||||
|           .post("/app/apppartyclassroom/delete", null, { | ||||
|             params: { | ||||
|               ids: id, | ||||
|             }, | ||||
|           }) | ||||
|           .then((res) => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success("删除成功"); | ||||
|               this.getList(); | ||||
|             } | ||||
|           }); | ||||
|       }); | ||||
|     }, | ||||
|     handleEdit(row) { | ||||
|       this.showList = false; | ||||
|       this.isEdit = true; | ||||
|       this.comp = "partyClassAdd"; | ||||
|       this.row = row; | ||||
|     }, | ||||
|     handleDetail(row) { | ||||
|       this.showList = false; | ||||
|       this.isEdit = false; | ||||
|       this.comp = "partyClassAdd"; | ||||
|       this.row = row; | ||||
|     }, | ||||
|     changeParty(e) { | ||||
|       if (!e.length) return; | ||||
|       this.organizationName = e[0]?.name; | ||||
|       this.resetSearch(); | ||||
|     }, | ||||
|     resetSearch() { | ||||
|       this.page.current = 1; | ||||
|       this.getList(); | ||||
|     }, | ||||
|     // 点击树节点 | ||||
|     handleNodeClick(data) { | ||||
|       this.partyList = data; | ||||
|     }, | ||||
|     back() { | ||||
|       this.comp = ""; | ||||
|       this.showList = true; | ||||
|       this.isEdit = false; | ||||
|  | ||||
|       this.getList(); | ||||
|     }, | ||||
|     handleAdd() { | ||||
|       this.comp = "partyClassAdd"; | ||||
|       this.showList = false; | ||||
|       this.isEdit = true; | ||||
|       this.row = {}; | ||||
|     }, | ||||
|     getList() { | ||||
|       this.instance | ||||
|         .post("/app/apppartyclassroom/list", null, { | ||||
|           params: { | ||||
|             ...this.page, | ||||
|             ...this.search, | ||||
|           }, | ||||
|         }) | ||||
|         .then((res) => { | ||||
|           if (res?.data) { | ||||
|             this.tableData = res.data.records; | ||||
|             this.total = res.data.total; | ||||
|           } | ||||
|         }); | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.topOrgId = this.user.info?.organizationId; | ||||
|     this.organizationId = this.user.info?.organizationId; | ||||
|     this.organizationName = this.user.info?.organizationName; | ||||
|     this.dict.load("classroomUpdateStatus", "newsCenterStatus"); | ||||
|     this.getList(); | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AppFoundingHundred { | ||||
|   height: 100%; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										256
									
								
								packages/party/AppPartyHistoryClass/components/partyClassAdd.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										256
									
								
								packages/party/AppPartyHistoryClass/components/partyClassAdd.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,256 @@ | ||||
| <template> | ||||
|   <ai-detail> | ||||
|     <ai-title slot="title" :title="detailTitle" isShowBottomBorder isShowBack @onBackClick="$emit('back')"> | ||||
|     </ai-title> | ||||
|     <template #content> | ||||
|       <ai-card title="基本信息"> | ||||
|         <template #content> | ||||
|           <div class="detail-content" v-if="isEdit"> | ||||
|             <el-form class="ai-form" :model="form" label-width="120px" ref="ruleForm" :rules="rules"> | ||||
|               <el-form-item label="课程主题" prop="title"> | ||||
|                 <el-input size="small" v-model="form.title" clearable placeholder="请输入..." maxlength="100" | ||||
|                           show-word-limit/> | ||||
|               </el-form-item> | ||||
|               <el-form-item label="更新状态" prop="updateStatus"> | ||||
|                 <ai-select v-model="form.updateStatus" :selectList="dict.getDict('classroomUpdateStatus')"/> | ||||
|               </el-form-item> | ||||
|               <el-form-item label="发布组织" prop="organizationName"> | ||||
|                 <el-input size="small" v-model="form.organizationName" clearable placeholder="请输入..." maxlength="100" | ||||
|                           show-word-limit/> | ||||
|               </el-form-item> | ||||
|               <el-form-item style="width: 100%;" label="封面" prop="thumbUrl"> | ||||
|                 <ai-uploader | ||||
|                   :instance="instance" | ||||
|                   v-model="form.thumbUrl" | ||||
|                   :limit="1" | ||||
|                   :cropOps="cropOps" | ||||
|                   is-crop> | ||||
|                   <template slot="tips">图片比例:1.6:1</template> | ||||
|                 </ai-uploader> | ||||
|               </el-form-item> | ||||
|               <el-form-item label="课程简介" style="width: 100%;" prop="content"> | ||||
|                 <ai-editor v-model="form.content" :instance="instance" placeholder="请输入课程简介"/> | ||||
|               </el-form-item> | ||||
|             </el-form> | ||||
|           </div> | ||||
|           <!--详情--> | ||||
|           <div class="village_detail" v-else> | ||||
|             <img class="cover" :src="form.thumbUrl[0].url" v-if="form.thumbUrl && form.thumbUrl.length"> | ||||
|             <ai-wrapper label-width="100px" :columnsNumber="2"> | ||||
|               <ai-info-item label="课程主题" isLine>{{form.title}}</ai-info-item> | ||||
|               <ai-info-item label="更新状态">{{dict.getLabel("classroomUpdateStatus",form.updateStatus)}}</ai-info-item> | ||||
|               <ai-info-item label="更新集数">{{form.episodeNum}}</ai-info-item> | ||||
|               <ai-info-item label="最后更新时间">{{form.updateDate}}</ai-info-item> | ||||
|               <ai-info-item label="发布组织">{{form.organizationName}}</ai-info-item> | ||||
|               <ai-info-item label="课程简介" isLine> | ||||
|                 <div v-html="form.content" style="margin-right: 80px"/> | ||||
|               </ai-info-item> | ||||
|             </ai-wrapper> | ||||
|           </div> | ||||
|         </template> | ||||
|       </ai-card> | ||||
|     </template> | ||||
|     <template #footer> | ||||
|       <template v-if="isEdit"> | ||||
|         <el-button size="small" @click="$emit('back')">取消</el-button> | ||||
|         <el-button type="primary" size="small" @click="saveAdd(0)">保存 | ||||
|         </el-button> | ||||
|         <el-button type="primary" size="small" @click="saveAdd(1)">保存并发布 | ||||
|         </el-button> | ||||
|       </template> | ||||
|     </template> | ||||
|   </ai-detail> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|   export default { | ||||
|     name: "partyClassAdd", | ||||
|     props: { | ||||
|       instance: Function, | ||||
|       dict: Object, | ||||
|       permissions: Function, | ||||
|       row: Object, | ||||
|       isEdit: Boolean, | ||||
|       organizationId: String, | ||||
|     }, | ||||
|     computed: { | ||||
|       detailTitle() { | ||||
|         return this.isEdit ? '编辑党员学习' : '党员学习详情' | ||||
|       } | ||||
|     }, | ||||
|     data() { | ||||
|       return { | ||||
|         form: { | ||||
|           organizationId: '', | ||||
|           title: '', | ||||
|           type: '', | ||||
|           content: '', | ||||
|           thumbUrl: [] | ||||
|         }, | ||||
|         rules: { | ||||
|           title: [{required: true, message: "请输入课程主题"}], | ||||
|           organizationName: [{required: true, message: "请输入发布组织"}], | ||||
|           updateStatus: [{required: true, message: "请选择更新状态", trigger: "change"}], | ||||
|           thumbUrl: [{required: true, message: "请上传封面", trigger: "change"}], | ||||
|           content: [{required: true, message: "请输入课程简介"}], | ||||
|         }, | ||||
|         isDetail: true, | ||||
|         count: 0, | ||||
|         cropOps: { | ||||
|           width: "336px", | ||||
|           height: "210px" | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     methods: { | ||||
|       downLoad(url) { | ||||
|         window.open(url); | ||||
|       }, | ||||
|       // 保存 | ||||
|       saveAdd(status) { | ||||
|         if (this.count != 0) { | ||||
|           this.$message.error('文件正在上传中'); | ||||
|           return | ||||
|         } | ||||
|         this.$refs.ruleForm.validate(v => { | ||||
|           if (v) { | ||||
|             this.instance.post('/app/apppartyclassroom/addOrUpdate', { | ||||
|               ...this.form, | ||||
|               status, | ||||
|               style: 1, | ||||
|               thumbUrl: this.form.thumbUrl.length ? JSON.stringify([{ | ||||
|                 url: this.form.thumbUrl[0].url | ||||
|               }]) : '' | ||||
|             }).then((res) => { | ||||
|               if (res && res.code == 0) { | ||||
|                 this.row?.id ? this.$message.success('修改成功') : this.$message.success('添加成功'); | ||||
|                 this.$emit("back"); | ||||
|               } | ||||
|             }) | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|       // 详情 | ||||
|       checkDetaiList(id) { | ||||
|         id && this.instance.post('/app/apppartyclassroom/queryDetailById', null, { | ||||
|           params: {id} | ||||
|         }).then((res) => { | ||||
|           if (res?.data) { | ||||
|             this.form = res.data; | ||||
|             this.form.thumbUrl = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl) : [] | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|     }, | ||||
|     created() { | ||||
|       this.form.organizationId = this.organizationId; | ||||
|       this.dict.load('classroomUpdateStatus') | ||||
|       this.checkDetaiList(this.row?.id); | ||||
|     }, | ||||
|   } | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|   .cover { | ||||
|     display: block; | ||||
|     width: 300px; | ||||
|     height: 140px; | ||||
|     margin: 20px auto; | ||||
|   } | ||||
|  | ||||
|   .add_Party { | ||||
|     height: 100%; | ||||
|     position: relative; | ||||
|  | ||||
|     .detail-content { | ||||
|       padding-bottom: 80px; | ||||
|     } | ||||
|  | ||||
|     .el-form { | ||||
|       width: 760px; | ||||
|       margin: 18px auto 64px; | ||||
|       // overflow-x: auto; | ||||
|       // overflow-y: auto; | ||||
|       padding-right: 3px !important; | ||||
|  | ||||
|       .el-form-item { | ||||
|         margin-bottom: 18px; | ||||
|       } | ||||
|  | ||||
|       .upload-tip { | ||||
|         position: absolute; | ||||
|         text-align: left; | ||||
|         left: 100px; | ||||
|         top: 5px; | ||||
|  | ||||
|         li { | ||||
|           color: #888; | ||||
|           font-size: 12px; | ||||
|           line-height: 14px; | ||||
|         } | ||||
|  | ||||
|         b { | ||||
|           color: red; | ||||
|           font-size: 14px | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .village_detail { | ||||
|       margin-top: 16px; | ||||
|       margin-bottom: 16px; | ||||
|       width: 760px; | ||||
|       overflow-y: auto; | ||||
|       border: 1px solid #eee; | ||||
|       border-radius: 4px; | ||||
|       display: flex; | ||||
|       flex-direction: column; | ||||
|       background: #fff; | ||||
|  | ||||
|       .village_title { | ||||
|         padding: 24px; | ||||
|         border-bottom: 1px solid #eee; | ||||
|  | ||||
|         h3, p { | ||||
|           text-align: center; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .village_file { | ||||
|         display: flex; | ||||
|         border-bottom: 1px solid #eee; | ||||
|         padding: 8px 20px; | ||||
|  | ||||
|         span { | ||||
|           width: 60px; | ||||
|         } | ||||
|  | ||||
|         div { | ||||
|           flex: 1; | ||||
|         } | ||||
|  | ||||
|         .fileSty { | ||||
|           color: #999; | ||||
|           font-size: 14px; | ||||
|           cursor: pointer; | ||||
|           margin-bottom: 4px; | ||||
|         } | ||||
|  | ||||
|         .fileSty:hover { | ||||
|           color: #5088FF; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .village_cont { | ||||
|         flex: 1; | ||||
|         padding: 30px 20px; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     &.isDetail { | ||||
|       ::v-deep .ai-detail__content { | ||||
|         background: #f3f6f9; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| </style> | ||||
							
								
								
									
										386
									
								
								packages/party/AppPartyHistoryClass/components/seriesAdd.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										386
									
								
								packages/party/AppPartyHistoryClass/components/seriesAdd.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,386 @@ | ||||
| <template> | ||||
|   <section class="add_Party" :class="{isDetail:!isEdit}"> | ||||
|     <ai-detail> | ||||
|       <ai-title slot="title" :title="detailTitle" isShowBottomBorder isShowBack @onBackClick="$emit('back')"> | ||||
|       </ai-title> | ||||
|       <template #content> | ||||
|         <ai-card title="基本信息" v-if="isEdit"> | ||||
|           <template #content> | ||||
|             <el-form class="ai-form" :model="form" label-width="120px" ref="ruleForm" :rules="rules"> | ||||
|               <el-form-item style="width: 100%;" label="单集名称" prop="title"> | ||||
|                 <el-input size="small" v-model="form.title" clearable placeholder="请输入..." maxlength="100" | ||||
|                           show-word-limit/> | ||||
|               </el-form-item> | ||||
|               <el-form-item style="width: 100%;" label="单集顺序" prop="num"> | ||||
|                 <el-row type="flex" justify="space-between"> | ||||
|                   <div style="flex: 1;margin-right: 20px;"> | ||||
|                     <el-input size="small" v-model="form.num" clearable placeholder="请输入..." maxlength="100" | ||||
|                               show-word-limit/> | ||||
|                   </div> | ||||
|                   <span>已更新至{{episodeNum}}集</span> | ||||
|                 </el-row> | ||||
|               </el-form-item> | ||||
|               <el-form-item style="width: 100%;" label="视频" prop="videoUrl"> | ||||
|                 <el-upload :show-file-list="false" ref="upload1" | ||||
|                           action :http-request="submitUpload" :accept="accept" :limit="1"> | ||||
|                   <div class="video" v-if="!form.videoUrl.length"> | ||||
|                     <div class="icon"> | ||||
|                       <ai-icon type="svg" icon="iconVideo"/> | ||||
|                       <span>上传视频</span> | ||||
|                     </div> | ||||
|                     <span class="tips">支持mp4格式,单个文件最大100MB</span> | ||||
|                   </div> | ||||
|                 </el-upload> | ||||
|                 <video class="video-com" style="width:100%; height:100%; object-fit: fill;" muted | ||||
|                       :src="form.videoUrl[0].url" controls="controls" v-if="form.videoUrl.length"></video> | ||||
|                 <el-upload :show-file-list="false" ref="upload2" action :http-request="submitUpload" :accept="accept" | ||||
|                           :limit="1" v-if="form.videoUrl.length"> | ||||
|                   <el-button style="margin-top: 10px;">重新选择</el-button> | ||||
|                 </el-upload> | ||||
|               </el-form-item> | ||||
|             </el-form> | ||||
|           </template> | ||||
|         </ai-card> | ||||
|         <!--详情--> | ||||
|         <ai-card title="基本信息" v-else> | ||||
|           <template #content> | ||||
|             <div class="village_title"> | ||||
|               <h3>{{ form.title }}</h3> | ||||
|               <p style="font-size: 14px;color: #999;">{{ form.createDate|timeVal }} {{ form.organizationName }}</p> | ||||
|             </div> | ||||
|             <div class="village_file" v-if="form.files && form.files.length"> | ||||
|               <span>附件</span> | ||||
|               <div> | ||||
|                 <p v-for="(item,i) in form.files" :key="i" class="fileSty" @click="downLoad(item.accessUrl)"> | ||||
|                   {{ item.fileName }}{{ item.postfix }} | ||||
|                 </p> | ||||
|               </div> | ||||
|             </div> | ||||
|             <img class="cover" :src="form.thumbUrl[0].url" v-if="form.thumbUrl && form.thumbUrl.length"> | ||||
|             <div class="village_cont" v-html="form.content"/> | ||||
|           </template> | ||||
|         </ai-card> | ||||
|       </template> | ||||
|       <template #footer> | ||||
|         <template v-if="isEdit"> | ||||
|           <el-button size="small" @click="$emit('back')">取消</el-button> | ||||
|           <el-button type="primary" size="small" @click="saveAdd">保存</el-button> | ||||
|         </template> | ||||
|       </template> | ||||
|     </ai-detail> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|   import mp4box from 'mp4box' | ||||
|   import { mapState } from 'vuex' | ||||
|   export default { | ||||
|     name: "seriesAdd", | ||||
|     props: { | ||||
|       instance: Function, | ||||
|       dict: Object, | ||||
|       permissions: Function, | ||||
|       row: Object, | ||||
|       parentRow: Object, | ||||
|       isEdit: Boolean | ||||
|     }, | ||||
|     computed: { | ||||
|       detailTitle() { | ||||
|         return this.isEdit ? '编辑剧集' : '新增剧集' | ||||
|       }, | ||||
|       ...mapState(['user']) | ||||
|     }, | ||||
|     data() { | ||||
|       return { | ||||
|         form: { | ||||
|           title: '', | ||||
|           num: '', | ||||
|           videoUrl: [], | ||||
|         }, | ||||
|         accept: ".mp4", | ||||
|         rules: { | ||||
|           title: [{required: true, message: "请填写单集名称"}], | ||||
|           num: [{required: true, message: "请填写单集顺序"}], | ||||
|           videoUrl: [{required: true, message: "请选择视频"}], | ||||
|         }, | ||||
|         isDetail: true, | ||||
|         episodeNum: 0, | ||||
|         cropOps: { | ||||
|           width: "336px", | ||||
|           height: "210px" | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     methods: { | ||||
|       downLoad(url) { | ||||
|         window.open(url); | ||||
|       }, | ||||
|       // 保存 | ||||
|       saveAdd() { | ||||
|         this.$refs.ruleForm.validate(v => { | ||||
|           if (v) { | ||||
|             this.instance.post('/app/apppartyclassroomepisode/addOrUpdate', { | ||||
|               ...this.form, | ||||
|               createUser: this.user.info.name, | ||||
|               createUserId: this.user.info.id, | ||||
|               status: 1, | ||||
|               classroomId: this.parentRow?.id, | ||||
|               id: !!this.row.id ? this.row.id : null, | ||||
|               videoUrl: this.form.videoUrl.length ? this.form.videoUrl[0].url : '' | ||||
|             }).then((res) => { | ||||
|               if (res && res.code == 0) { | ||||
|                 this.row?.id ? this.$message.success('修改成功') : this.$message.success('添加成功'); | ||||
|                 this.$emit("back"); | ||||
|               } | ||||
|             }) | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|       submitUpload(file) { | ||||
|         this.$refs['upload1']?.clearFiles(); | ||||
|         this.$refs['upload2']?.clearFiles(); | ||||
|         this.$refs['ruleForm']?.clearValidate('videoFile'); | ||||
|         const fileType = file.file.name.split(".")[1]; | ||||
|         const size = file.file.size / 1024 / 1024 > 100; | ||||
|         let mp4boxfile = mp4box.createFile(); | ||||
|         const reader = new FileReader(); | ||||
|         reader.readAsArrayBuffer(file.file); | ||||
|         reader.onload = (e) => { | ||||
|           const arrayBuffer = e.target.result; | ||||
|           arrayBuffer.fileStart = 0; | ||||
|           mp4boxfile.appendBuffer(arrayBuffer); | ||||
|         }; | ||||
|         mp4boxfile.onReady = (info) => { | ||||
|           let codec = info.mime.match(/codecs="(\S*),/)[1] | ||||
|           if (codec.indexOf('avc') === -1) { | ||||
|             return this.$message.error("视频编码格式不支持") | ||||
|           } | ||||
|  | ||||
|           if (size) { | ||||
|             return this.$message.error("视频大小不能超过100M"); | ||||
|           } | ||||
|  | ||||
|           if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) { | ||||
|             let formData = new FormData() | ||||
|             formData.append('file', file.file); | ||||
|             this.instance.post(`/admin/file/add-unlimited`, formData).then(res => { | ||||
|               if (res && res.data) { | ||||
|                 let videoList = res.data[0].split(";"); | ||||
|     | ||||
|                 this.form.videoUrl = [{ | ||||
|                   id: videoList[1], | ||||
|                   url: videoList[0] | ||||
|                 }] | ||||
|               } | ||||
|             }) | ||||
|           } else { | ||||
|             return this.$message.error("视频格式错误"); | ||||
|           } | ||||
|  | ||||
|         }; | ||||
|       }, | ||||
|       // 详情 | ||||
|       checkDetaiList(id) { | ||||
|         id && this.instance.post('/app/apppartyclassroom/queryLargestNum', null, { | ||||
|           params: {id} | ||||
|         }).then((res) => { | ||||
|           if (res?.data) { | ||||
|             this.episodeNum = res.data; | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|       getDetail() { | ||||
|         this.instance.post('/app/apppartyclassroomepisode/queryDetailById', null, { | ||||
|           params: { | ||||
|             id: this.row?.id | ||||
|           } | ||||
|         }).then((res) => { | ||||
|           if (res?.data) { | ||||
|             this.form.title = res.data.title; | ||||
|             this.form.num = res.data.num; | ||||
|             this.form.videoUrl = res.data.videoUrl ? [{ | ||||
|               url: res.data.videoUrl | ||||
|             }]: []; | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|       handleDelete(ids) { | ||||
|         this.$confirm('确定删除该文章吗').then(() => { | ||||
|           this.instance.post('/app/apppartyhistory/delete', null, { | ||||
|             params: {ids} | ||||
|           }).then(res => { | ||||
|             if (res?.code == 0) { | ||||
|               this.isAdd = false; | ||||
|               this.isDetailEdit = false; | ||||
|               this.$message.success('删除成功'); | ||||
|               if ((this.total - 1) % this.searchObj.size == 0) { | ||||
|                 this.searchObj.current -= 1 | ||||
|               } | ||||
|               this.searchVillageList(); | ||||
|             } | ||||
|           }) | ||||
|         }).catch(() => 0) | ||||
|       }, | ||||
|     }, | ||||
|     created() { | ||||
|       this.checkDetaiList(this.parentRow?.id); | ||||
|       if (this.row?.id) { | ||||
|         this.getDetail(); | ||||
|       } | ||||
|     }, | ||||
|   } | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|   .cover { | ||||
|     display: block; | ||||
|     width: 300px; | ||||
|     height: 140px; | ||||
|     margin: 20px auto; | ||||
|   } | ||||
|  | ||||
|   .add_Party { | ||||
|     height: 100%; | ||||
|     position: relative; | ||||
|     background: #fff; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|  | ||||
|   .video { | ||||
|     width: 640px; | ||||
|     height: 360px; | ||||
|     border-radius: 4px; | ||||
|     border: 1px dashed #D0D4DC; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     align-items: center; | ||||
|     justify-content: center; | ||||
|  | ||||
|     .icon { | ||||
|       display: flex; | ||||
|       flex-direction: column; | ||||
|       align-items: center; | ||||
|       justify-content: center; | ||||
|  | ||||
|       span:nth-child(2) { | ||||
|         display: inline-block; | ||||
|         font-size: 16px; | ||||
|         color: #333333; | ||||
|         line-height: 30px; | ||||
|       } | ||||
|  | ||||
|       .iconfont { | ||||
|         display: inline-block; | ||||
|         font-size: 40px; | ||||
|         color: #2266FF; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .tips { | ||||
|       display: inline-block; | ||||
|       font-size: 12px; | ||||
|       color: #999999; | ||||
|       line-height: 26px; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .video-com { | ||||
|     width: 640px; | ||||
|     height: 360px; | ||||
|     background: rgba(0, 0, 0, 0.5); | ||||
|     border-radius: 2px; | ||||
|     border: 1px solid #D0D4DC; | ||||
|     margin-top: -40px; | ||||
|   } | ||||
|  | ||||
|   ::v-deep .AiIcon { | ||||
|     width: 38px; | ||||
|     height: 38px; | ||||
|   } | ||||
|  | ||||
|   .footer_btn { | ||||
|     width: 106px; | ||||
|   } | ||||
|  | ||||
|     .detail-content { | ||||
|       padding-bottom: 80px; | ||||
|     } | ||||
|  | ||||
|     .el-form { | ||||
|       .upload-tip { | ||||
|         position: absolute; | ||||
|         text-align: left; | ||||
|         left: 100px; | ||||
|         top: 5px; | ||||
|  | ||||
|         li { | ||||
|           color: #888; | ||||
|           font-size: 12px; | ||||
|           line-height: 14px; | ||||
|         } | ||||
|  | ||||
|         b { | ||||
|           color: red; | ||||
|           font-size: 14px | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .village_detail { | ||||
|       margin-top: 16px; | ||||
|       width: 760px; | ||||
|       overflow-y: auto; | ||||
|       border: 1px solid #eee; | ||||
|       border-radius: 4px; | ||||
|       display: flex; | ||||
|       flex-direction: column; | ||||
|       background: #fff; | ||||
|  | ||||
|       .village_title { | ||||
|         padding: 24px; | ||||
|         border-bottom: 1px solid #eee; | ||||
|  | ||||
|         h3, p { | ||||
|           text-align: center; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .village_file { | ||||
|         display: flex; | ||||
|         border-bottom: 1px solid #eee; | ||||
|         padding: 8px 20px; | ||||
|  | ||||
|         span { | ||||
|           width: 60px; | ||||
|         } | ||||
|  | ||||
|         div { | ||||
|           flex: 1; | ||||
|         } | ||||
|  | ||||
|         .fileSty { | ||||
|           color: #999; | ||||
|           font-size: 14px; | ||||
|           cursor: pointer; | ||||
|           margin-bottom: 4px; | ||||
|         } | ||||
|  | ||||
|         .fileSty:hover { | ||||
|           color: #5088FF; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .village_cont { | ||||
|         flex: 1; | ||||
|         padding: 30px 20px; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     &.isDetail { | ||||
|       ::v-deep .ai-detail__content { | ||||
|         background: #f3f6f9; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| </style> | ||||
							
								
								
									
										175
									
								
								packages/party/AppPartyHistoryClass/components/seriesManage.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										175
									
								
								packages/party/AppPartyHistoryClass/components/seriesManage.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,175 @@ | ||||
| <template> | ||||
|   <section class="AppFoundingHundred"> | ||||
|     <ai-list v-if="showList"> | ||||
|       <template #title> | ||||
|         <ai-title title="剧集管理" isShowBottomBorder :isShowBack="true" @onBackClick="$emit('back')"></ai-title> | ||||
|       </template> | ||||
|       <template #content> | ||||
|         <ai-search-bar> | ||||
|           <template slot="left"> | ||||
|             <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button> | ||||
|           </template> | ||||
|           <template #right> | ||||
|             <el-input | ||||
|               v-model="page.title" | ||||
|               class="search-input" | ||||
|               size="small" | ||||
|               @keyup.enter.native="getList()" | ||||
|               placeholder="请输入单集名称" | ||||
|               clearable | ||||
|               @clear="page.current = 1, page.title = '', getList()" | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|             </el-input> | ||||
|           </template> | ||||
|         </ai-search-bar> | ||||
|         <ai-table | ||||
|           :tableData="tableData" | ||||
|           :col-configs="colConfigs" | ||||
|           stripe | ||||
|           :total="total" | ||||
|           :current.sync="page.current" | ||||
|           :size.sync="page.size" | ||||
|           style="margin-top: 10px;" | ||||
|           @getList="getList"> | ||||
|           <el-table-column slot="options" label="操作" align="center" width="200px" fixed="right"> | ||||
|             <div slot-scope="{row}" class="table-options"> | ||||
|               <el-button type="text" title="播放" @click="handlePlay(row)">播放</el-button> | ||||
|               <el-button type="text" title="编辑" @click="handleEdit(row)">编辑</el-button> | ||||
|               <el-button type="text" title="删除" @click="handleDelete(row)">删除</el-button> | ||||
|             </div> | ||||
|           </el-table-column> | ||||
|         </ai-table> | ||||
|       </template> | ||||
|     </ai-list> | ||||
|     <component :is="comp" v-else :row="currentRow" :parentRow="row" :instance="instance" :dict="dict" :permissions="permissions" | ||||
|                @back="back" | ||||
|                :isEdit="isEdit"></component> | ||||
|     <el-dialog | ||||
|       title="播放" | ||||
|       :visible.sync="dialog" | ||||
|       @close="$refs['video'].pause()" | ||||
|       @closed="videoUrl=''" | ||||
|       width="800px"> | ||||
|       <video controls autoplay width="100%" height="100%" ref="video"> | ||||
|         <source :src="videoUrl" type="video/mp4"> | ||||
|         <source :src="videoUrl" type="video/webm"> | ||||
|       </video> | ||||
|       <span slot="footer"> | ||||
|          <el-button @click="dialog=false">关闭</el-button> | ||||
|       </span> | ||||
|     </el-dialog> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|   import seriesAdd from "./seriesAdd"; | ||||
|  | ||||
|   export default { | ||||
|     name: "seriesManage", | ||||
|     components: {seriesAdd}, | ||||
|     props: { | ||||
|       instance: Function, | ||||
|       dict: Object, | ||||
|       permissions: Function, | ||||
|       row: Object, | ||||
|     }, | ||||
|     data() { | ||||
|       return { | ||||
|         comp: "", | ||||
|         tableData: [], | ||||
|         total: 0, | ||||
|         currentRow: {}, | ||||
|         dialog: false, | ||||
|         videoUrl: "", | ||||
|         showList: true, | ||||
|         search: {}, | ||||
|         isEdit: false, | ||||
|         page: { | ||||
|           title: '', | ||||
|           current: 1, | ||||
|           size: 10 | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     computed: { | ||||
|       colConfigs() { | ||||
|         return [ | ||||
|           {label: "单集名称", prop: "title"}, | ||||
|           {label: "单集顺序", align: 'center', prop: "num"}, | ||||
|           {label: "创建人", align: 'center', prop: "createUser"}, | ||||
|           {label: "创建时间", align: 'center', prop: "createDate"}, | ||||
|           {slot: "options"} | ||||
|         ]; | ||||
|       } | ||||
|     }, | ||||
|     methods: { | ||||
|       handleEdit(row) { | ||||
|         this.showList = false; | ||||
|         this.isEdit = true; | ||||
|         this.comp = "seriesAdd"; | ||||
|         this.currentRow = row; | ||||
|       }, | ||||
|       handlePlay(row) { | ||||
|         this.dialog = true; | ||||
|         this.videoUrl = row.videoUrl; | ||||
|         this.$nextTick(_=>{ | ||||
|           const video = this.$refs["video"]; | ||||
|           video.src = row.videoUrl; | ||||
|           video.play(); | ||||
|         }) | ||||
|       }, | ||||
|       handleDelete({id}) { | ||||
|         this.$confirm("是否确定要删除?").then(_ => { | ||||
|           this.instance.post("/app/apppartyclassroomepisode/delete", null, { | ||||
|             params: { | ||||
|               ids: id | ||||
|             } | ||||
|           }).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success("删除成功"); | ||||
|               this.getList(); | ||||
|             } | ||||
|           }) | ||||
|         }) | ||||
|       }, | ||||
|       back() { | ||||
|         this.comp = ""; | ||||
|         this.showList = true; | ||||
|         this.isEdit = false; | ||||
|         this.getList(); | ||||
|         this.currentRow = {}; | ||||
|       }, | ||||
|       handleAdd() { | ||||
|         this.comp = "seriesAdd"; | ||||
|         this.showList = false; | ||||
|         this.isEdit = true; | ||||
|         this.currentRow = {}; | ||||
|       }, | ||||
|       getList() { | ||||
|         this.instance.post("/app/apppartyclassroomepisode/list", null, { | ||||
|           params: { | ||||
|             ...this.page, | ||||
|             classroomId: this.row?.id | ||||
|           } | ||||
|         }).then(res => { | ||||
|           if (res?.data) { | ||||
|             this.tableData = res.data.records; | ||||
|             this.total = res.data.total; | ||||
|           } | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
|     created() { | ||||
|       this.currentRow = {}; | ||||
|       this.getList(); | ||||
|       this.dict.load("newsCenterStatus") | ||||
|     } | ||||
|   } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
|   .AppFoundingHundred { | ||||
|     width: 100%; | ||||
|     height: 100%; | ||||
|   } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user