停更模块-报名管理 完成

src/router/modules/stopUpdateRoutes.js

@@ -97,6 +97,15 @@ export default [
 					pathName: '全时到会管理',
 				}
 			},
+			{
+				path: "ficcSignUpList",
+				name: 'ficcSignUpList',
+				component: () => import('@/views/ficc_manage/signUp/signUpList.vue'),
+				hidden: false,
+				meta:{
+					title:'报名管理'
+				}
+			},
       //       {
 			// 	path:'ReportThsSend',
 			// 	component:()=> import('@/views/report_manage/pushSetting.vue'),

src/views/ficc_manage/signUp/components/addSignUpDialog.vue

@@ -0,0 +1,207 @@
+<script setup>
+import { ficcManageInterface } from "@/api/api.js";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref } from 'vue'
+const props = defineProps({
+    // 活动Id
+    ActivityId: {
+      type: [Number, String],
+      required: true,
+    },
+    // 弹窗是否显示
+    isShow: {
+      type: Boolean,
+      required: true,
+    },
+    getSignUpList:{
+        type:Function,
+        default:()=>{}
+    }
+})
+let dynamicItem = ref([{ name: "", isShow: false }]) // 新增列表
+let companyList = ref([]) // 联想用户列表
+// 新增报名窗口关闭
+const emit = defineEmits(["closeDia"]);
+function addDialogClose() {
+    dynamicItem.value = [{ name: "", isShow: false }];
+    companyList=[];
+    emit("closeDia")
+}
+// 获取客户名称
+async function getCompany(Keyword) {
+    if (Keyword.includes(",")) return;
+    if (!Keyword) return (companyList.value = []);
+    try {
+    const res = await ficcManageInterface.activitySignupUserList({ Keyword });
+    if (res.Ret === 200) {
+        companyList.value = res.Data
+        ? res.Data.map((item) => {
+            return {
+                ...item,
+                value: `${item.RealName},${item.Mobile},${item.CompanyName}`,
+            };
+            })
+        : [];
+    }
+    } catch (err) {
+        console.dir(err);
+    }
+}
+async function callbackHandle(data, cb) {
+    if(!data) return
+    await getCompany(data);
+    cb(companyList.value);
+}
+//联想选择后
+function selectCompany(val, index) {
+    companyList.value.forEach((item) => {
+    if (item.value == val.name) {
+        dynamicItem.value.splice(index, 1, {
+            name: val.name,
+            isShow: false,
+            id: item.UserId,
+        });
+    }
+    });
+}
+//失去焦点
+function focusCompany(name) {
+    if (name.length && companyList.value.length == 0) {
+        dynamicItem.value.find((item) => item.name == name).isShow = true;
+    } else {
+        dynamicItem.value.find((item) => item.name == name).isShow = false;
+    }
+}
+// 添加用户
+function addItem() {
+    dynamicItem.value.push({
+        name: "",
+        isShow: false,
+    });
+}
+// 删除用户
+function deleteItem(index) {
+    dynamicItem.value.splice(index, 1);
+}
+// 确定提交报名
+async function confirmPerson() {
+    if (dynamicItem.value.some((item) => item.isShow))
+    return ElMessage.error("姓名有误");
+    // 对数组进行处理(去空去重,取出id)
+    const UserIdList = dynamicItem.value
+    .map((item) => item.id)
+    .filter((item,index,arr) => {
+        return item && arr.indexOf(item, 0) === index;
+    })
+    // 数组为空提示
+    if (!UserIdList.length) return ElMessage.error("请至少选择一个");
+    try {
+    const res = await ficcManageInterface.activitySignupAddUser({
+        ActivityId: props.ActivityId,
+        UserIdList,
+    });
+    if (res.Ret === 200) {
+        ElMessage.success("添加成功");
+        props.getSignUpList()
+        addDialogClose();
+    }
+    } catch (err) {
+        console.dir(err);
+    }
+}
+
+</script>
+<template>
+  <el-dialog
+    :modal-append-to-body="false"
+    :center="true"
+    close-on-press-escape
+    :close-on-click-modal="false"
+    :model-value="isShow"
+    @close="addDialogClose"
+    title="新增线下报名"
+    width="500px"
+    class="add-signup-dialog"
+  >
+    <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
+      <div class="inline-content">
+        <el-autocomplete
+          class="inline-input"
+          v-model.trim="item.name"
+          :fetch-suggestions="callbackHandle"
+          placeholder="请输入姓名"
+          @select="selectCompany(item, index)"
+          @blur="focusCompany(item.name)"
+          :trigger-on-focus="false"
+          clearable
+        ></el-autocomplete>
+        <img
+          @click="deleteItem(index)"
+          src="~@/assets/img/icons/delete-Item.png"
+          :class="index == 0 ? 'defaultyi' : ''"
+          alt=""
+        />
+      </div>
+      <p v-if="item.isShow">
+        系统中无此人，请先将其添加到对应公司的联系人列表下
+      </p>
+    </div>
+    <div @click="addItem" class="add-box">
+      <img :src="$icons.addblue" alt="" />
+      <span>添加</span>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmPerson">确定</el-button>
+      <el-button @click="addDialogClose">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<style lang="scss">
+.add-signup-dialog{
+  .inline {
+    margin-bottom: 20px;
+    .inline-content{
+      padding-right: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .inline-input{
+        width: 392px;
+        .el-input {
+            width: 100%;
+        }
+      }
+      img {
+        width: 14px;
+        height: 14px;
+        cursor: pointer;
+      }
+      .defaultyi {
+        display: none;
+      }
+    }
+    p {
+      padding-top: 5px;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      line-height: 20px;
+      color: #ef5858;
+      opacity: 1;
+    }
+  }
+  .add-box {
+    width: 80px;
+    display: flex;
+    align-items: center;
+    color: #5882ef;
+    cursor: pointer;
+    img {
+      width: 16px;
+      height: 16px;
+      margin-right: 10px;
+    }
+  }
+}
+</style>

src/views/ficc_manage/signUp/components/signUpDetail.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { ficcManageInterface } from "@/api/api.js";
+import { ref, computed, getCurrentInstance } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import moment from 'moment'
+const props = defineProps({
+    // 活动Id
+    ActivityId: {
+        type: [Number,String],
+        required:true,
+    },
+    // 当前状态
+    state:{
+        type:Number,
+        require:true
+    },
+    // 弹窗是否显示
+    isShow: {
+        type: Boolean,
+        required:true,
+    },
+    getSignUpList:{
+        type:Function,
+        default:()=>{}
+    }
+})
+let exportUser = computed(()=>{
+    return import.meta.env.VITE_APP_API_ROOT + "/yb/activity_register_user/list?IsExport=true&ActivityId=" + props.ActivityId + "&" + localStorage.getItem("auth") || "";
+})
+let detailList = ref([])
+// 获取活动报名详情列表
+async function getSignUpUserList(){
+    try{
+        const {Data} = await ficcManageInterface.activitySignupDetailList({ActivityId:props.ActivityId})
+        detailList.value=Data.List
+    }catch(err){
+        console.dir(err);
+    }
+}
+getSignUpUserList()
+// 详情弹窗关闭
+const emit = defineEmits(["closeDia"]);
+function detailClose(){
+    detailList.value=[]
+    emit('closeDia')
+}
+// 取消报名
+async function signupCancel({ActivityId,UserId}){
+    try{
+        await ElMessageBox.confirm('确定要取消该用户的报名吗?','提示',{
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        })
+        await ficcManageInterface.activitySignupCancelUser({
+            ActivityId,
+            UserId,
+        })
+        ElMessage.success('操作成功')
+        getSignUpUserList()
+        props.getSignUpList()
+    }catch(err){
+        console.log(err);
+        ElMessage.info('取消操作')
+    }
+}
+</script>
+<template>
+  <el-dialog
+      :modal-append-to-body="false"
+      :center="true"
+      close-on-press-escape
+      :close-on-click-modal="false"
+      :model-value="isShow"
+      @close="detailClose"
+      append-to-body
+      title="线下报名详情"
+    >
+      <!-- 内容部分 -->
+      <a class="downloadBtn" :href="exportUser" download>
+          <el-button type="primary">下载名单</el-button>
+        </a>
+      <el-table max-height="260px" :data="detailList" border>
+        <el-table-column align="center" prop="RealName" label="姓名" />
+        <el-table-column align="center" prop="CompanyName" label="公司名称" />
+        <el-table-column align="center" prop="SellerName" label="所属销售" />
+        <el-table-column align="center" label="报名时间">
+            <template #default="scope">
+                {{moment(scope.row.CreateTime).format('YYYY-MM-DD HH:mm:SS')}}
+            </template>
+        </el-table-column>
+        <el-table-column v-if="state===1" align="center" label="操作">
+          <template #default="scope">
+            <el-link :underline="false" type="primary" @click="signupCancel(scope.row)"
+              >取消报名</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 底部按钮 -->
+      <div class="dialog-footer" style="text-align: center;">
+        <el-button type="primary" @click="detailClose">知道了</el-button>
+      </div>
+    </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.downloadBtn{
+    display: inline-block;
+    margin-bottom: 20px;
+}
+.dialog-footer{
+    .el-button{
+        margin: 10px 0;
+    }
+}
+</style>

src/views/ficc_manage/signUp/signUpList.vue

@@ -0,0 +1,303 @@
+<script setup>
+import moment from 'moment'
+import { ficcManageInterface } from "@/api/api.js";
+import mPage from '@/components/mPage.vue'
+import signUpDetail from './components/signUpDetail.vue'
+import addSignUpDialog from './components/addSignUpDialog.vue'
+import { ref, reactive, computed, watch } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+
+let list = ref([])
+let params = reactive({
+    PageSize: 9, // 每页条数
+    CurrentIndex: 1,  // 当前页
+    Keyword:'',  // 关键词
+    ActivityState: 1  // 活动状态
+})
+let selectDate = ref([])
+let total = ref(0)  // 总条数
+let isShowDetail = ref(false) // 详情弹窗是否显示
+let isShowAddDialog = ref(false) // 新增弹窗是否显示
+let CurrentActivityId = ref(-1)  // 当前活动id
+let detailInfo = ref({})  // 详情信息
+let showDetail = ref(false)  // 详情弹窗是否显示
+let showDownLoadImg = ref(false)  // 下载海报弹窗是否显示
+let downPoster = ref([])  //需要下载的海报
+let options = ref([
+    {label:'未开始',value:1},
+    {label:'进行中',value:2},
+    {label:'已结束',value:3}
+]) // 活动状态选项
+
+// 获取活动报名列表
+async function getSignUpList() {
+    try {
+    const { Data } = await ficcManageInterface.activitySignupList({
+        ...params,
+        StartDate:selectDate.value?.[0]||'1970-01-01',
+        EndDate:selectDate.value?.[1]||'9999-12-31',
+    });
+    total.value=Data.Paging.Totals
+    list.value = Data.List;
+    } catch (err) {
+        console.dir(err);
+    }
+}
+getSignUpList()
+function formatActivityTimeRange(start,end){
+    const week=moment(start).format('dddd');
+    const day=moment(start).format('YYYY-MM-DD');
+    const startTime=moment(start).format('HH:mm');
+    const endTime=moment(end).format('HH:mm');
+    return `${day} ${startTime}-${endTime} ${week}`
+}
+// 分页
+function handleCurrentChange(page) {
+    params.CurrentIndex = page;
+    getSignUpList()
+}
+// 详情弹窗打开
+async function detailOpen({ActivityId}){
+    CurrentActivityId.value=ActivityId
+    isShowDetail.value=true
+}
+// 新增报名窗口打开
+function addDialogOpen({ActivityId}){
+    CurrentActivityId.value=ActivityId
+    isShowAddDialog.value=true
+}
+// 详情弹窗打开
+async function handleShowDetail({ActivityId}){
+    try{
+    const res= await ficcManageInterface.activityDetail({activityId:ActivityId})
+    if(res.Ret==200){
+        detailInfo.value=res.Data
+        showDetail.value=true
+    }
+    }catch(err){
+    console.log(err);
+    }
+}
+// 下载活动海报
+function handleDownLoadImg(){
+    if(detailInfo.value.Poster.length==1){
+        downPoster.value=detailInfo.value.Poster
+        downloadImg()
+    }else{
+        showDownLoadImg.value=true
+    }
+}
+// 下载海报
+function downloadImg(){
+    downPoster.value.forEach(item=>{
+        let img=new Image()
+        img.setAttribute('crossOrigin', 'anonymous');
+        img.src=item.Url
+        img.onload=()=>{
+            let canvas = document.createElement("canvas");
+            canvas.width = img.width;
+            canvas.height = img.height;
+            let context = canvas.getContext('2d');
+            context.drawImage(img, 0, 0, img.width, img.height);
+            let dataURL = canvas.toDataURL("image/png", 1);
+            const a=document.createElement('a')
+            a.setAttribute("download",item.Name)
+            a.style.display = "none"
+            a.href=dataURL
+            document.body.appendChild(a);
+            a.click()
+        }
+    })
+}
+</script>
+<template>
+  <div class="container-signup">
+    <!-- 头部根据条件查找 -->
+    <el-card class="top-card-box">
+      <div class="top-card">
+        <div class="select-box">
+          <div class="date-box">
+            <el-date-picker v-model="selectDate" type="daterange" range-separator="至" start-placeholder="活动开始日期"
+                end-placeholder="活动结束日期" value-format="YYYY-MM-DD" @change="getSignUpList"
+                style="margin-right: 30px">
+            </el-date-picker>
+          </div>
+          <el-select
+            placeholder="请选择活动状态"
+            v-model="params.ActivityState"
+            @change="getSignUpList"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+        </div>
+        <div class="input-box">
+          <el-input
+            placeholder="请输入活动名称"
+            :prefix-icon="Search"
+            v-model="params.Keyword"
+            @input="getSignUpList"
+            clearable
+          />
+        </div>
+      </div>
+    </el-card>
+    <!-- 内容部分 -->
+    <el-card>
+      <el-table :data="list" border>
+        <el-table-column align="center" label="活动标题" width="420">
+          <template #default="scope">
+            <p class="text-button" @click="handleShowDetail(scope.row)">{{scope.row.ActivityName}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="ActivityTypeName" label="活动类别">
+        </el-table-column>
+        <el-table-column align="center" label="活动时间">
+          <template #default="{row}">
+            {{formatActivityTimeRange(row.StartTime,row.EndTime)}}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="LimitPeopleNum" label="线下人数限制"></el-table-column>
+        <el-table-column align="center" label="线下报名人数">
+          <template #default="scope">
+            <el-link :underline="false" type="primary" @click="detailOpen(scope.row)"
+              >{{scope.row.RegisterPeopleNum}}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="params.ActivityState===1" align="center" label="操作">
+          <template #default="{row}">
+            <el-link :underline="false" type="primary" @click="addDialogOpen(row)"
+              >新增线下报名</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+      <mPage class="page" :total="total" :page_no="params.CurrentIndex" :pageSize="9" @handleCurrentChange="handleCurrentChange" />
+    </el-card>
+    <!-- 弹窗部分 -->
+    <!-- 线下报名详情弹窗 -->
+    <signUpDetail 
+        :ActivityId="CurrentActivityId" 
+        :state="params.ActivityState" 
+        :isShow="isShowDetail" 
+        :getSignUpList="getSignUpList"
+         v-if="isShowDetail"
+         @closeDia="isShowDetail = false"
+         />
+    <!-- 新增线下报名弹窗 -->
+    <addSignUpDialog 
+        :ActivityId="CurrentActivityId" 
+        :isShow="isShowAddDialog" 
+        :getSignUpList="getSignUpList"
+        v-if="isShowAddDialog"
+        @closeDia="isShowAddDialog = false"/>
+    <!-- 详情弹窗 -->
+      <el-dialog 
+        :append-to-body="true" 
+        v-model="showDetail" 
+        width="600px" 
+        center
+      >
+        <template #header>
+            <div>
+                <img src="@/assets/img/ficc_activity/flag.png" alt="" width="16" height="16" style="vertical-align: middle" />
+                <span style="vertical-align: middle">活动详情</span>
+            </div>
+        </template>
+        
+        <div class="ficc-activity-detail-wrap">
+            <table class="table-wrap">
+                <tr><td class="table-item dark-item">{{detailInfo.ActivityTypeName}}</td></tr>
+                <tr><td class="table-item">活动名称：{{detailInfo.ActivityName}}</td></tr>
+                <tr><td class="table-item">活动时间：{{formatActivityTimeRange(detailInfo.StartTime,detailInfo.EndTime)}}</td></tr>
+                <tr><td class="table-item">活动地址：{{detailInfo.City}}{{detailInfo.Address}}</td></tr>
+                <tr><td class="table-item">主讲人：{{detailInfo.Speaker}}</td></tr>
+                <tr><td class="table-item">线下人数限制：{{detailInfo.LimitPeopleNum}}</td></tr>
+                <tr><td class="table-item" v-if="detailInfo.MainlandTel">大陆拨入：{{detailInfo.MainlandTel}}</td></tr>
+                <tr><td class="table-item" v-if="detailInfo.HongKongTel">香港拨入：{{detailInfo.HongKongTel}}</td></tr>
+                <tr><td class="table-item" v-if="detailInfo.TaiwanTel">台湾拨入：{{detailInfo.TaiwanTel}}</td></tr>
+                <tr><td class="table-item" v-if="detailInfo.SingaporeTel">新加坡拨入：{{detailInfo.SingaporeTel}}</td></tr>
+                <tr><td class="table-item" v-if="detailInfo.AmericaTel">美国拨入：{{detailInfo.AmericaTel}}</td></tr>
+                <tr><td class="table-item" v-if="detailInfo.ParticipationCode">拨入密码：{{detailInfo.ParticipationCode}}</td></tr>
+                <tr><td class="table-item" v-if="detailInfo.LinkParticipants">网络参会：{{detailInfo.LinkParticipants}}</td></tr>
+                <tr v-if="detailInfo.ReportLink"><td class="table-item">相关报告：{{detailInfo.ReportName}}</td></tr>
+            </table>
+            <div style="text-align:center;margin:30px 0">
+                <el-button type="primary" style="width:150px" v-if="detailInfo.Poster" @click="handleDownLoadImg">下载活动海报</el-button>
+                <el-button type="primary" @click="showDetail=false" style="width:150px">关闭</el-button>
+            </div>
+        </div>
+      </el-dialog>
+      <!-- 下载海报弹窗 -->
+      <el-dialog  
+        :append-to-body="true" 
+        v-model="showDownLoadImg" 
+        width="400px" 
+        title="下载活动海报"
+        center
+      >
+        <div v-if="detailInfo.Poster">
+            <el-checkbox-group v-model="downPoster">
+                <el-checkbox style="display:block;margin:5px 0" v-for="item in detailInfo.Poster" :key="item.Url" :label="item">{{item.Name}}</el-checkbox>
+            </el-checkbox-group>
+        </div>
+        <div style="text-align:center;margin:30px 0">
+            <el-button type="primary" plain @click="showDownLoadImg=false">取消</el-button>
+            <el-button type="primary" @click="downloadImg">确定</el-button>
+        </div>
+      </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+ .container-signup {
+  .top-card-box {
+    margin-bottom: 20px;
+  }
+  .top-card {
+    display: flex;
+    justify-content: space-between;
+    .select-box{
+      display: flex;
+      .date-box{
+        width: 393px;
+        margin-right: 10px;
+        .mx-datepicker{
+          width: 100% !important;
+        }
+      }
+    }
+    .input-box{
+      width: 520px;
+    }
+  }
+  .page{
+    margin: 20px 0;
+  }
+}
+.text-button{
+  color: #409EFF;
+  cursor: pointer;
+}
+.ficc-activity-detail-wrap{
+        .table-wrap {
+            color: #666;
+            width: 100%;
+            // text-align: center;
+            border-top: 1px solid #dcdfe6;
+            border-left: 1px solid #dcdfe6;
+            .table-item {
+                padding: 14px 30px;
+                border-right: 1px solid #dcdfe6;
+                border-bottom: 1px solid #dcdfe6;
+                position: relative;
+            }
+            .dark-item{
+                background: #F0F2F5;
+                text-align: center;
+            }
+        }
+    }
+</style>