crm_front_v3/src/views/dataReport_manage/jurisdiction.vue

<script setup>
import mPage from "@/components/mPage.vue";
import { dataMainInterface, customInterence } from "@/api/api.js";
import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
import { useRouter } from "vue-router"
import { Search,InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()

const defaultSalesProps = {
    multiple: true,
    label: "RealName",
    children: "ChildrenList",
    value: "AdminId",
} //销售级联配置

const clientOptions = [
    {
        label: "正式",
        value: "1",
    },
    {
        label: "试用",
        value: "2",
    },
    {
        label: "永续",
        value: "3",
    },
]//状态
let sellOptions = ref([]) //销售
let sellName = ref("") //销售
let clientState = ref("") //状态
let pageSize = ref(10)
let page_no = ref(1)
let total = ref(0)
let tableData = ref([])
let keyword = ref("")
let orderNumber = ref("1")
let userTotal = ref("")
let companyTotal = ref("")

let exportExcel = computed(()=>{
    let arr = sellName.value.length ? sellName.value.map((item) => item[item.length-1]) : "";
    let sellUname = arr.length ? arr.join(",") : "";
    let str = `&Keyword=${keyword.value}&CompanyStatus=${clientState.value}&SellerId${sellUname}`;
    return (import.meta.env.VITE_APP_API_ROOT + "/yb/chartCensus/exportChartCompanyAuthCensusList?" + localStorage.getItem("auth") || "") + str;
})

watch(keyword,(newval)=>{
    sellName.value = "";
    clientState.value = "";
    page_no.value = 1;
    getTableList();
})

/* 获取销售 */
function getSale() {
    customInterence.getSale().then((res) => {
    if (res.Ret === 200) {
        sellOptions.value = res.Data.List;
    }
    });
}

//分页
function handleCurrentChange(page) {
    page_no.value = page;
    getTableList();
}
//获取表格数据
async function getTableList() {
    let arr = sellName.value.length ? sellName.value.map((item) => item[item.length-1]) : "";
    const res = await dataMainInterface.getCompanyAuthCensusList({
        PageSize: pageSize.value,
        CurrentIndex: page_no.value,
        SellerId: arr.length ? arr.join(",") : "",
        CompanyStatus: clientState.value,
        Keyword: keyword.value,
    });
    if (res.Ret === 200) {
        tableData.value = res.Data.List;
        total.value = res.Data.Paging.Totals;
        userTotal.value = res.Data.UserTotal;
        companyTotal.value = res.Data.CompanyTotal;
    }
}

//表格的 change 事件
function changeTableDate() {
    page_no.value = 1;
    getTableList();
}
function goDetail(item){
    router.push({
        path:'/customDetail',
        query: {
            id: item.CompanyId,
        }
    })
}
getTableList()
getSale()
</script>
<template>
    <div class="container-jurisdiction">
      <el-card>
        <div class="top-box">
          <div>
            <a :href="exportExcel" download>
              <el-button type="primary">导出EXCEL</el-button>
            </a>
            <el-cascader
              v-model="sellName"
              placeholder="请选择销售"
              style="width: 230px; margin: 0 30px"
              :options="sellOptions"
              :props="defaultSalesProps"
              :show-all-levels="false"
              collapse-tags
              clearable
              filterable
              @change="changeTableDate"
            >
            </el-cascader>
            <el-select style="width: 230px" v-model="clientState" @change="changeTableDate" placeholder="请选择客户状态" clearable>
              <el-option v-for="item in clientOptions" :key="item.label" :label="item.label" :value="item.label"> </el-option>
            </el-select>
          </div>
          <div style="width: 400px">
            <el-input :prefix-icon="Search" v-model="keyword" placeholder="联系人姓名/客户名称" clearable></el-input>
          </div>
        </div>
      </el-card>
  
      <el-card style="margin-top: 30px">
        <div class="main-section">
          <el-card class="base-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>
                开通权限用户数
                <el-tooltip class="item" effect="dark" content="根据筛选条件统计表格内联系人数量" placement="top">
                  <InfoFilled style="width:14px;height:14px;"/>
                </el-tooltip>
              </span>
            </div>
            <div class="card-cont">{{ userTotal }}</div>
          </el-card>
          <el-card class="base-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>
                开通权限客户数
                <el-tooltip class="item" effect="dark" content="根据筛选条件统计表格内客户数量" placement="top">
                  <InfoFilled style="width:14px;height:14px;"/>
                </el-tooltip>
              </span>
            </div>
            <div class="card-cont">{{ companyTotal }}</div>
          </el-card>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="UserName" label="联系人姓名" align="center"></el-table-column>
          <el-table-column prop="CompanyName" label="客户名称" align="center">
            <template #default="scope">
              <span class="editsty" @click="goDetail(scope.row)">{{ scope.row.CompanyName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SellerName" label="所属销售" align="center"></el-table-column>
          <el-table-column prop="CompanyStatus" label="客户状态" align="center"></el-table-column>
          <el-table-column prop="StartTime" label="图库服务期限" align="center">
            <template #default="scope"> {{ scope.row.StartTime }} ~ {{ scope.row.EndTime }} </template>
          </el-table-column>
          <el-table-column prop="RestDay" label="剩余天数" align="center"></el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
          <mPage :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
        </el-col>
      </el-card>
    </div>
  </template>
  <style scoped lang="scss">
  .container-jurisdiction {
    .top-box {
      display: flex;
      justify-content: space-between;
    }
    .main-section {
      margin-bottom: 30px;
      display: flex;
      .base-card {
        width: 240px;
        background: #fff;
        color: #999;
        text-align: center;
        margin-right: 30px;
        cursor: pointer;
        .el-card__header {
          padding: 16px;
        }
        .card-cont {
          font-size: 28px;
          color: #333;
        }
      }
    }
  }
  </style>