进门到会详情 完成

src/views/operation_manage/activity/jmAttendDetail.vue

@@ -1,3 +1,125 @@
+<script setup>
+import { ficcManageInterface } from "@/api/api";
+import moment from "moment";
+import mPage from "@/components/mPage.vue";
+import { ref, reactive, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from "vue-router"
+
+
+const route = useRoute()
+const router = useRouter()
+let default_tab = ref(1)
+let eventId = ref(0)
+let dataList = ref([])
+const tabs = [
+    {label: 'FICC联系人',key: 1},
+    {label: '权益联系人',key: 2},
+    {label: '未知联系人',key: 3}
+]
+const tableParams = reactive({
+    page:1,
+    total: 0,
+    pageSize: 10,
+})
+// 获取进门到会详情列表
+async function getDataList(dataType=1) {
+    //1,FICC,2，权益,3,未知
+    const res = await ficcManageInterface.jmAttendDetail({
+        ComeinEventId: Number(eventId.value),
+        DataType: dataType,
+        CurrentIndex: tableParams.page,
+        PageSize: tableParams.pageSize,
+    });
+    if (res.Ret === 200) {
+        tableParams.total = res.Data.Paging.Totals;
+        dataList.value = res.Data.List || [];
+    }
+}
+function handlePageChange(e) {
+    tableParams.page = e;
+    getDataList(default_tab.value);
+}
+watch(default_tab,(newval)=>{
+    console.info(newval);
+    handlePageChange(1)
+})
+
+const exportBase = import.meta.env.VITE_APP_API_ROOT + '/yb/activity/comein/user_list/export'//数据导出接口
+
+//时间格式化
+function formatTimeRange(time) {
+    if (time == "0001-01-01T00:00:00Z") {
+        return "";
+    }
+    return moment(time).format("YYYY.MM.DD HH:mm:ss");
+}
+function formatJoinTime(joinTime) {
+    let r = '';
+    let joinTimeInt = Number(joinTime);
+    if (joinTimeInt < 60) {
+        r = "00'" + joinTime + "''";
+        return r;
+    } else {
+        console.info(joinTimeInt)
+        let m = parseInt(joinTimeInt / 60);
+        let s = joinTimeInt - m * 60
+        if (m <= 0) {
+            r = joinTime + "''"
+        } else {
+            if (m < 10) {
+                if (s < 10) {
+                    r = "0" + m + "'" + "0" + s + "''"
+                } else {
+                    r = "0" + m + "'" + s + "''"
+                }
+            } else {
+                if (s < 10) {
+                    r = m + "'" + "0" + s + "''"
+                } else {
+                    r = m + "'" + s + "''"
+                }
+            }
+        }
+    }
+    return r;
+}
+
+// 对[# ;]转义
+function escapeStr(str) {
+    return str.replace(/#/g, escape('#')).replace(/;/g, escape(';'))
+}
+/* 数据导出 */
+function exportClick() {
+    // 数据导出接口
+    let urlStr = exportBase
+    // token
+    urlStr += `?${localStorage.getItem('auth') || ''}`
+    // 指标名称参数
+    urlStr += `&ComeinEventId=${eventId.value}`
+    let exportUrlStr = escapeStr(urlStr)
+    console.info("exportApi")
+    console.info(exportUrlStr)
+    const link = document.createElement("a")
+    link.href = exportUrlStr
+    link.download = ''
+    link.click()
+}
+
+/* 客户详情页 */
+function goCompanyDetail(item) {
+    router.push({
+        path: '/customDetail',
+        query: {
+            id: item.CompanyId
+        }
+    })
+}
+onMounted(()=>{
+    eventId.value = route.query.eventId;
+    getDataList(default_tab.value)
+})
+
+</script>
 <template>
     <div class="my-calendar">
         <el-card class="my-calendar-list">
@@ -7,7 +129,7 @@
                         @click="default_tab = tab.key">{{ tab.label }}</li>
 
                 </ul>
-                <el-button style="width:6%; float: right; " type="primary" plain size="medium" @click="exportClick">
+                <el-button style="width:6%; float: right; " type="primary" plain @click="exportClick">
                     导出Excel</el-button>
             </div>
             <el-table :data="dataList" v-loading="tableLoading" element-loading-text="数据加载中..."
@@ -17,7 +139,7 @@
                 <el-table-column key="姓名" align="center" prop="Name" label="姓名" min-width="8%">
                 </el-table-column>
                 <el-table-column key="公司名称" align="center" prop="CompanyName" label="公司名称" min-width="20%">
-                    <template slot-scope="scope">
+                    <template #default="scope">
                         <span v-if="default_tab != 3" style="color:#409EFF;cursor:pointer;"
                             @click="goCompanyDetail(scope.row)" class="customName">{{ scope.row.CompanyName }}</span>
                         <span v-else>{{ scope.row.CompanyName }}</span>
@@ -25,7 +147,7 @@
                 </el-table-column>
                 <el-table-column v-if="default_tab != 3" key="客户类型" align="center" prop="ProductId" label="客户类型"
                     min-width="5%">
-                    <template slot-scope="scope">
+                    <template #default="scope">
                         <span class="time" v-if="scope.row.ProductId == 1">FICC</span>
                         <span v-else-if="scope.row.ProductId == 2">权益</span>
                         <span v-else>FICC/权益</span>
@@ -41,34 +163,30 @@
                     min-width="5%">
                 </el-table-column>
                 <el-table-column key="首次入会时间" align="center" prop="FirstWatchTime" label="首次入会时间" min-width="10%">
-                    <template slot-scope="scope">
-                        <span class="time">{{
-                                formatTimeRange(scope.row.FirstWatchTime)
-                        }}</span>
+                    <template #default="scope">
+                        <span class="time">{{formatTimeRange(scope.row.FirstWatchTime)}}</span>
                     </template>
                 </el-table-column>
                 <el-table-column key="最后退出时间" align="center" prop="LastWatchTime" label="最后退出时间" min-width="10%">
-                    <template slot-scope="scope">
-                        <span class="time">{{
-                                formatTimeRange(scope.row.LastWatchTime)
-                        }}</span>
+                    <template #default="scope">
+                        <span class="time">{{formatTimeRange(scope.row.LastWatchTime)}}</span>
                     </template>
                 </el-table-column>
                 <el-table-column key="参与总时长" align="center" prop="JoinTime" label="参与总时长" min-width="10%">
-                    <template slot-scope="scope">
+                    <template #default="scope">
                         {{ formatJoinTime(scope.row.JoinTime) }}
                     </template>
                 </el-table-column>
-                <el-table-column key="参会方式" align="center" prop="JoinType" label="参会方式" min-width="10%">
-                    <template slot-scope="scope">
+                <el-table-column key="参会方式" align="center" prop="JoinType" label="参会方式" min-width="6%">
+                    <template #default="scope">
                         <span v-if="scope.row.JoinType == 1">网络</span>
                         <span v-else>电话</span>
                     </template>
                 </el-table-column>
-                <el-table-column key="参会鉴权" align="center" prop="AuthInfo" label="参会鉴权" min-width="5%">
+                <el-table-column key="参会鉴权" align="center" prop="AuthInfo" label="参会鉴权" min-width="6%">
                 </el-table-column>
-                <el-table-column key="参会状态" align="center" prop="DataType" label="参会状态" min-width="5%">
-                    <template slot-scope="scope">
+                <el-table-column key="参会状态" align="center" prop="DataType" label="参会状态" min-width="6%">
+                    <template #default="scope">
                         <span v-if="scope.row.DataType == 1">直播</span>
                         <span v-else>回放</span>
                     </template>
@@ -76,237 +194,15 @@
                 <div slot="empty" style="padding: 150px 0">暂无数据</div>
             </el-table>
             <el-col :span="24" class="toolbar">
-                <m-page :total="total" :page_no="page" :pageSize="pageSize" @handleCurrentChange="handlePageChange" />
+                <m-page :total="tableParams.total" :page_no="tableParams.page" :pageSize="tableParams.pageSize" @handleCurrentChange="handlePageChange" />
             </el-col>
         </el-card>
     </div>
 </template>
 
-<script>
-import { ficcManageInterface } from "@/api/api";
-import moment from "moment";
-import mPage from "@/components/mPage.vue";
-
-export default {
-    components: {
-        mPage,
-    },
-    watch: {
-        default_tab(newval) {
-            console.info(newval);
-            this.default_tab = newval
-            this.page = 1
-            this.getDataList(newval);
-        }
-    },
-    data() {
-        return {
-            eventId: 0,
-            activeName: 'first',
-            dataList: [],
-            total: 0,
-            pageSize: 10,
-            page: 1,
-            tabs: [
-                {
-                    label: 'FICC联系人',
-                    key: 1
-                },
-                {
-                    label: '权益联系人',
-                    key: 2
-                },
-                {
-                    label: '未知联系人',
-                    key: 3
-                },
-            ],
-            default_tab: 1,
-            exportBase: process.env.API_ROOT + '/yb/activity/comein/user_list/export',//数据导出接口
-        };
-    },
-    created() {
-        this.eventId = this.$route.query.eventId;
-        this.getDataList(this.default_tab);
-    },
-    methods: {
-        handlePageChange(e) {
-            this.page = e;
-            this.getDataList(this.default_tab);
-        },
-        // 获取进门到会详情列表
-        async getDataList(dataType) {
-            if (dataType <= 0) {
-                dataType = 1
-            }
-            //1,FICC,2，权益,3,未知
-            const res = await ficcManageInterface.jmAttendDetail({
-                ComeinEventId: Number(this.eventId),
-                DataType: dataType,
-                CurrentIndex: this.page,
-                PageSize: this.pageSize,
-            });
-            if (res.Ret === 200) {
-                this.total = res.Data.Paging.Totals;
-                this.dataList = res.Data.List || [];
-            }
-        },
-        formatTimeRange(time) {
-            if (time == "0001-01-01T00:00:00Z") {
-                return "";
-            }
-            return moment(time).format("YYYY.MM.DD HH:mm:ss");
-        },
-        /* 客户详情页 */
-        goCompanyDetail(item) {
-            this.$router.push({
-                path: '/customDetail',
-                query: {
-                    id: item.CompanyId
-                }
-            })
-        },
-        formatJoinTime(joinTime) {
-            let r = '';
-            let joinTimeInt = Number(joinTime);
-            if (joinTimeInt < 60) {
-                r = "00'" + joinTime + "''";
-                return r;
-            } else {
-                console.info(joinTimeInt)
-                let m = parseInt(joinTimeInt / 60);
-                let s = joinTimeInt - m * 60
-                if (m <= 0) {
-                    r = joinTime + "''"
-                } else {
-                    if (m < 10) {
-                        if (s < 10) {
-                            r = "0" + m + "'" + "0" + s + "''"
-                        } else {
-                            r = "0" + m + "'" + s + "''"
-                        }
-                    } else {
-                        if (s < 10) {
-                            r = m + "'" + "0" + s + "''"
-                        } else {
-                            r = m + "'" + s + "''"
-                        }
-                    }
-                }
-            }
-            return r;
-        },
-        // 对[# ;]转义
-        escapeStr(str) {
-            return str.replace(/#/g, escape('#')).replace(/;/g, escape(';'))
-        },
-        /* 数据导出 */
-        exportClick() {
-            // 数据导出接口
-            let urlStr = this.exportBase
-            console.info("urlStr")
-            console.info(urlStr);
-            // token
-            urlStr += `?${localStorage.getItem('auth') || ''}`
-            // 指标名称参数
-            urlStr += `&ComeinEventId=${this.eventId}`
-            let exportUrlStr = this.escapeStr(urlStr)
-            console.info("exportApi")
-            console.info(exportUrlStr)
-            const link = document.createElement("a")
-            link.href = exportUrlStr
-            link.download = ''
-            link.click()
-        },
-    }
-};
-</script>
-
 <style lang="scss" scoped>
-.ficc-activity-list-wrap {
-    div {
-        box-sizing: border-box;
-    }
-
-    .top-wrap {
-        background: #ffffff;
-        border: 1px solid #ececec;
-        border-radius: 4px;
-        padding: 20px 30px;
-
-        .el-button {
-            background-color: #ecf5ff;
-            border: 1px solid #b3d8ff;
-            color: #409eff;
-        }
-
-        .el-button--primary {
-            background-color: #409eff;
-            border: none;
-            color: #ffffff;
-        }
-    }
-
-    .content-wrap {
-        margin-top: 20px;
-        min-height: 70vh;
-        background: #ffffff;
-        border: 1px solid #ececec;
-        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-        border-radius: 4px;
-        padding: 30px;
-        padding-bottom: 65px;
-        position: relative;
-
-        .pagination-wrap {
-            position: absolute;
-            bottom: 24px;
-            right: 30px;
-        }
-    }
-
-    .list-wrap {
-        margin-top: 40px;
-
-        .title {
-            color: #409eff;
-            cursor: pointer;
-        }
-
-        .opt-btn {
-            cursor: pointer;
-            color: #409eff;
-            margin: 0 5px;
-        }
-    }
-}
-
-.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>
-
-
-<style lang="scss">
 .my-calendar {
+    box-sizing: border-box;
     .my-calendar-list {
         .tabs-type {
             display: flex;
@@ -342,8 +238,4 @@ export default {
         }
     }
 }
-
-.company-tip-poper {
-    max-width: 400px;
-}
 </style>