销售管理-专项路演统计

src/router/modules/sellerRoutes.js

@@ -20,11 +20,14 @@ export default [
 					title: "销售路演统计",
 				},
 			},
-			// {
-			// 	path: "sellerSpecialSeller",
-			// 	name: "专项路演统计",
-			// 	component: () => import('@/views/roadshow_manage/statistics/specialSeller.vue')
-			// },
+			{
+				path: "sellerSpecialSeller",
+				name: "sellerSpecialSeller",
+				component: () => import('@/views/roadshow_manage/statistics/specialSeller.vue'),
+				meta: {
+					title: "专项路演统计",
+				},
+			},
 			{
 				path: 'sellerStatisticNewcustom',
 				component: () => import('@/views/dataReport_manage/statistic/newCustom.vue'),

src/views/roadshow_manage/statistics/specialSeller.vue

@@ -0,0 +1,303 @@
+<script setup>
+import _ from "lodash"
+import { nextTick,ref } from 'vue';
+
+import { roadshowInterence } from "@/api/api.js";
+import actiyityDetailDia from '../compononts/activityDetailDia.vue';
+import {roadshowStatisticsHook} from "./hooks"
+
+const Role=ref(localStorage.getItem("Role") || "")
+const researcherList=ref([]) // 研究员列表
+const defaultSalesProps={
+  multiple: true,
+  children: "ResearcherList",
+  value: "AdminId",
+  emitPath: false,
+} //销售级联配置
+const sales=ref([])
+const salesNameList=ref([]) //
+const cascaderIdx=ref(1)
+
+// 获取研究员列表
+const getResearcherList=async()=>{
+  // 发送请求
+  const res = await roadshowInterence.getResearcherList();
+  if (res.Ret === 200) {
+    // researcherList.value = formatResearcherList(res.Data);
+    const ficcList = formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
+    const raiList = formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
+
+    researcherList.value = [{
+      label:'ficc',
+      ResearcherList:ficcList
+    },{
+      label:'权益',
+      ResearcherList:raiList
+    }]
+  }
+}
+// 对获取到的研究员列表做处理
+const formatResearcherList=(list)=>{
+  list.forEach((group) => {
+    // 对组做处理
+    group.label = group.GroupName;
+    // 如果有列表
+    group.ResearcherList &&
+      group.ResearcherList.forEach((item) => {
+        // 对研究员做处理
+        item.label = item.RealName;
+        item.value = {
+          ResearcherId: item.AdminId,
+          ResearcherName: item.RealName,
+        };
+      });
+  });
+  // 去掉ficc全体选项
+  return list.filter((group) => group.GroupName !== "ficc全体");
+}
+//选择后的研究员的处理
+const changeSales=()=>{
+  let arr = [];
+researcherList.value.forEach((item) => {
+    item.ResearcherList &&
+      item.ResearcherList.forEach((key) => {
+        if (sales.value.includes(key.AdminId)) {
+          arr.push({
+            id: key.AdminId,
+            name: key.label,
+          });
+        }
+      });
+  });
+  salesNameList.value = arr;
+  roadshowChoiceResearcher();
+}
+//删除选择后的研究员
+const removeSalesName=(item, index)=>{
+  salesNameList.value.splice(index, 1);
+  sales.value = sales.value.filter((key) => {
+    if (key != item.id) {
+      return key;
+    }
+  });
+  cascaderIdx.value++;
+  roadshowChoiceResearcher();
+}
+//选择的研究员接口
+const roadshowChoiceResearcher=async()=>{
+  const res = await roadshowInterence.roadshowChoiceResearcher({
+    AdminIds: sales.value.join(","),
+  });
+  if (res.Ret === 200) {
+    getTableData();
+  }
+}
+//获取选择的研究员列表
+const roadshowAdminList=async()=>{
+  const res = await roadshowInterence.roadshowAdminList();
+  if (res.Ret === 200) {
+    let arr = [];
+    res.Data &&
+      res.Data.forEach((item) => {
+        salesNameList.value.push({
+          id: item.AdminId,
+          name: item.RealName,
+        });
+        arr.push(item.AdminId);
+      });
+    sales.value = arr;
+    if (sales.value.length > 0) {
+      getTableData();
+    }
+  }
+}
+const removeTagChange=(val)=>{
+  sales.value = sales.value.filter((key) => {
+    if (key != val) {
+      return key;
+    }
+  });
+  cascaderIdx.value++;
+  changeSales()
+}
+/* 获取表格数据 */
+const getTableData=()=>{
+  dataLoading.value = false;
+  roadshowInterence.roadshowSpecialList().then((res) => {
+
+    const { Data, Ret } = res;
+
+    if (Ret !== 200) return;
+
+    //总合计数据处理
+    totalGroupArr.value = filterTableData(Data.RsReportRecordNumList);
+
+    //处理数据结构
+    let data = _.cloneDeep(Data.List);
+    data.forEach((item) => {
+      let groupDataArr = filterTableData(item.RsReportRecordNumList);
+      item.subGroupArr=groupDataArr
+
+      item.Item &&
+        item.Item.forEach((sub_item) => {
+          let dataArr = filterTableData(sub_item.RsReportRecordNumList, sub_item.AdminId);
+          sub_item.dataArr=dataArr
+        });
+    });
+
+    datalist.value = data;
+    dataLoading.value = true;
+  });
+}
+
+const HOOK = roadshowStatisticsHook({getTableData})
+const {dataLoading,default_tab,totalGroupArr,datalist,tableTheadColumns,
+	dialogForm,isShowDia,diaTitle}=HOOK.datas
+const {filterTableData,openDiaHandle}=HOOK.functions
+
+if (Role.value == "admin" || Role.value == "ficc_admin") {
+  getResearcherList();
+}
+nextTick(() => {
+  roadshowAdminList();
+});
+
+</script>
+
+<template>
+  <div class="statistic-container">
+    <div class="statistic-select">
+      <div v-if="Role == 'admin' || Role == 'ficc_admin'">
+        <el-cascader
+          v-model="sales"
+          placeholder="请选择研究员"
+          style="width: 230px"
+          :options="researcherList"
+          :props="defaultSalesProps"
+          :show-all-levels="false"
+          :key="cascaderIdx"
+          @remove-tag="removeTagChange"
+          collapse-tags
+          clearable
+          filterable
+          @change="changeSales"
+        >
+        </el-cascader>
+      </div>
+      <div class="name-list">
+        <div class="select-ok">已选择研究员：</div>
+        <div class="sales-name">
+          <span class="box-name" :class="Role == 'admin' || Role == 'ficc_admin' ? '' : 'box-right'" v-for="(item, index) in salesNameList" :key="item.id">
+            {{ item.name }}
+            <img v-if="Role == 'admin' || Role == 'ficc_admin'" @click="removeSalesName(item, index)" src="../../../assets/img/icons/remove-select.png" alt="" />
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="table-cont">
+      <div class="table-body-wrapper">
+				<table>
+          <thead>
+            <tr>
+              <td rowspan="2" class="thead-rs">组别</td>
+              <td rowspan="2" class="thead-rs">销售</td>
+              <td :colspan="['周度统计表', '月度统计表'].includes(default_tab) ? 3 : 1" v-for="item in tableTheadColumns" :key="item" class="head-column">
+                {{ item }}
+              </td>
+            </tr>
+            <tr v-if="['月度统计表'].includes(default_tab)">
+              <template v-for="(item, index) in new Array(4)">
+                <td>试用路演</td>
+                <td>正式路演</td>
+                <td>公开会议</td>
+              </template>
+            </tr>
+            <tr v-if="['周度统计表'].includes(default_tab)">
+              <template v-for="(item, index) in new Array(3)">
+                <td>试用路演</td>
+                <td>正式路演</td>
+                <td>公开会议</td>
+              </template>
+            </tr>
+          </thead>
+          <tbody v-for="item in datalist" :key="item.Name">
+            <template v-if="item.Item.length">
+              <tr>
+                <td :rowspan="item.Item.length + 1" class="thead-rs">{{ item.Name }}</td>
+              </tr>
+
+              <tr v-for="rs in item.Item" :key="rs.AdminId">
+                <td class="thead-rs">{{ rs.Name }}</td>
+
+                <td class="data-cell" v-for="(data, data_key) in rs.dataArr" :key="data_key" @click="openDiaHandle(data)">
+                  {{ data.value !== 0 ? data.value : "" }}
+                </td>
+              </tr>
+            </template>
+
+            <tr>
+              <td colspan="2">{{ `${item.Name}合计` }}</td>
+              <td v-for="(group_data, group_data_key) in item.subGroupArr" :key="group_data_key">
+                {{ group_data.value !== 0 ? group_data.value : "" }}
+              </td>
+            </tr>
+          </tbody>
+
+          <tfoot v-show="dataLoading && totalGroupArr.length">
+            <tr>
+              <td colspan="2">ficc总合计</td>
+              <td v-for="(total_data, total_data_key) in totalGroupArr" :key="total_data_key">
+                {{ total_data.value !== 0 ? total_data.value : "" }}
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <actiyityDetailDia v-model:isShow="isShowDia" :title="diaTitle" :form="dialogForm" fromType="special" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+@import "./index.scss";
+.statistic-container {
+  min-height: calc(100vh - 120px);
+  height: auto;
+  .statistic-select {
+    display: flex;
+    margin-bottom: 30px;
+    .name-list {
+      flex: 1;
+      display: flex;
+      margin-left: 19px;
+      .select-ok {
+        flex-shrink: 0;
+        margin-top: 13px;
+      }
+      .box-name {
+        display: inline-block;
+        padding: 3px 5px 2px 17px;
+        border-radius: 4px 4px 4px 4px;
+        background: #e9ebee;
+        color: #666666;
+        font-size: 14px;
+        margin: 10px 10px 10px 0;
+        cursor: pointer;
+        img {
+          width: 15px;
+          height: 15px;
+          vertical-align: text-top;
+        }
+      }
+      .box-right {
+        padding-right: 17px !important;
+      }
+    }
+  }
+}
+</style>