|
|
@@ -0,0 +1,278 @@
|
|
|
+<script setup>
|
|
|
+import { ficcManageInterface,customInterence} from "@/api/api";
|
|
|
+import { ref, reactive, computed, watch } from 'vue'
|
|
|
+import { ElMessage, ElMessageBox, ElImageViewer } from 'element-plus'
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+
|
|
|
+
|
|
|
+let popData = reactive({
|
|
|
+ name:"",
|
|
|
+ avatar:"",
|
|
|
+ id:0,
|
|
|
+})
|
|
|
+let formRef = ref(null)
|
|
|
+const rules = reactive({
|
|
|
+ name:[{required: true, message: '请输入主讲人姓名', trigger: 'blur'}],
|
|
|
+ avatar:[{required: true, message: '请上传头像', trigger: 'change'}],
|
|
|
+})
|
|
|
+
|
|
|
+let keyword = ref('')
|
|
|
+let page = ref(1)
|
|
|
+let pageSize = ref(10)
|
|
|
+let total = ref(0)
|
|
|
+let show = ref(false)
|
|
|
+let list = ref([])
|
|
|
+
|
|
|
+watch(show,(newVal)=>{
|
|
|
+ if(!newVal){
|
|
|
+ Object.assign(popData,{
|
|
|
+ name:"",
|
|
|
+ avatar:"",
|
|
|
+ id:0,
|
|
|
+ })
|
|
|
+ formRef.value?.resetFields()
|
|
|
+ }
|
|
|
+})
|
|
|
+//上传封面
|
|
|
+async function handleUploadImg(e){
|
|
|
+ console.log(e);
|
|
|
+ let form = new FormData()
|
|
|
+ form.append("file", e.file)
|
|
|
+ const res=await customInterence.upload(form)
|
|
|
+ if(res.Ret===200){
|
|
|
+ popData.avatar=res.Data.ResourceUrl
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//搜索
|
|
|
+function handleSearch(){
|
|
|
+ page.value=1
|
|
|
+ getSpeakerList()
|
|
|
+}
|
|
|
+
|
|
|
+// 获取主讲人列表
|
|
|
+async function getSpeakerList(){
|
|
|
+ const res=await ficcManageInterface.activitySpeakerList({
|
|
|
+ PageSize:pageSize.value,
|
|
|
+ CurrentIndex:page.value,
|
|
|
+ Keywords:keyword.value
|
|
|
+ })
|
|
|
+ if(res.Ret===200){
|
|
|
+ list.value=res.Data.List||[]
|
|
|
+ total.value=res.Data.Paging.Totals||0
|
|
|
+ }
|
|
|
+}
|
|
|
+getSpeakerList()
|
|
|
+
|
|
|
+function handlePageChange(e){
|
|
|
+ page.value=e
|
|
|
+ getSpeakerList()
|
|
|
+}
|
|
|
+
|
|
|
+function handleSaveSpeaker(){
|
|
|
+ formRef.value?.validate(async (valid)=>{
|
|
|
+ if(valid){
|
|
|
+ const res=await ficcManageInterface.saveSpeaker({
|
|
|
+ SpeakerId:Number(popData.id),
|
|
|
+ SpeakerName:popData.name,
|
|
|
+ SpeakerHeadPic:popData.avatar
|
|
|
+ })
|
|
|
+ if(res.Ret===200){
|
|
|
+ ElMessage.success(`${popData.id?'编辑成功':'创建成功'}`)
|
|
|
+ show.value=false
|
|
|
+ page.value=1
|
|
|
+ keyword.value=''
|
|
|
+ getSpeakerList()
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ ElMessage.warning('请完善表单项')
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function handelEdit(item){
|
|
|
+ popData.name=item.SpeakerName
|
|
|
+ popData.avatar=item.SpeakerHeadPic
|
|
|
+ popData.id=item.SpeakerId
|
|
|
+ show.value=true
|
|
|
+}
|
|
|
+
|
|
|
+async function handleDelSpeaker(item){
|
|
|
+ //删除前校验
|
|
|
+ const checkRes=await ficcManageInterface.delSpeakerCheck({SpeakerId:item.SpeakerId})
|
|
|
+ if(checkRes.Ret===200&&!checkRes.Data.Ok){
|
|
|
+ ElMessageBox.alert(checkRes.Data.Msg,'操作提示',{
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: action => {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ ElMessageBox.confirm(`是否确认删除主讲人${item.SpeakerName}？`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ ficcManageInterface.delSpeaker({
|
|
|
+ SpeakerId:item.SpeakerId
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.Ret===200){
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ page.value=1
|
|
|
+ keyword.value=''
|
|
|
+ getSpeakerList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div class="activity-speaker-page">
|
|
|
+ <div class="top-box">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入主讲人姓名"
|
|
|
+ v-model="keyword"
|
|
|
+ style="max-width: 400px"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ @input="handleSearch"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary" style="float:right" @click="show=true">添加主讲人</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content-box">
|
|
|
+ <el-table
|
|
|
+ :data="list"
|
|
|
+ border
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="SpeakerHeadPic"
|
|
|
+ label="头像"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="scope.row.SpeakerHeadPic"
|
|
|
+ fit="cover"
|
|
|
+ :z-index="100"
|
|
|
+ :preview-teleported="true"
|
|
|
+ :preview-src-list="[scope.row.SpeakerHeadPic]"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="SpeakerName"
|
|
|
+ label="姓名"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="CreateTime"
|
|
|
+ label="添加时间"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column key="操作" align="center" label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <span style="color: #4099ef;display:inline-block;margin-right:10px;cursor: pointer;" @click="handelEdit(scope.row)">编辑</span>
|
|
|
+ <span style="color: #ff4040;display:inline-block;cursor: pointer;" @click="handleDelSpeaker(scope.row)">删除</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-pagination
|
|
|
+ layout="total,prev,pager,next,jumper"
|
|
|
+ background
|
|
|
+ :current-page="page"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="total"
|
|
|
+ style="justify-content:flex-end;margin-top:30px;"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :append-to-body="true"
|
|
|
+ v-model="show"
|
|
|
+ width="600px"
|
|
|
+ :title="popData.id?'编辑主讲人':'添加主讲人'"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div class="add-speaker-dialog">
|
|
|
+ <el-form ref="formRef" :model="popData" label-width="120px" :rules="rules">
|
|
|
+ <el-form-item label="主讲人姓名" prop="name">
|
|
|
+ <el-input v-model="popData.name" placeholder="请输入主讲人姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="头像" prop="avatar">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action=""
|
|
|
+ accept="image/*"
|
|
|
+ :http-request="handleUploadImg"
|
|
|
+ :show-file-list="false"
|
|
|
+ >
|
|
|
+ <img v-if="popData.avatar" :src="popData.avatar" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <p>注：图片格式支持jpg、jpeg、png格式，大小不超过10MB。</p>
|
|
|
+ <div style="margin:20px 0;text-align:center">
|
|
|
+ <el-button type="primary" plain @click="show=false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSaveSpeaker">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .add-speaker-dialog{
|
|
|
+ .avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+ }
|
|
|
+ .avatar-uploader-icon {
|
|
|
+ font-size: 36px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ line-height: 120px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .avatar {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.activity-speaker-page{
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 30px;
|
|
|
+ min-height: 70vh;
|
|
|
+ .content-box{
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-speaker-dialog{
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
cxmo