|
|
@@ -0,0 +1,208 @@
|
|
|
+<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>
|
|
|
+
|
cxmo