crm_front_v3/src/views/custom_manage/custom/contractStatistics.vue

<script setup>
import { ref, computed, reactive,onMounted,nextTick, watch } from "vue";
import mPage from "@/components/mPage.vue";
import { customInterence } from "@/api/api.js";
import moment from "moment";
import $ from 'jquery'

const isAdmin = computed(() => {
  return localStorage.getItem("Role").indexOf("admin") != -1;
});

const startDate = moment().startOf("year").format("YYYY-MM-DD");
const endDate = moment(new Date()).format("YYYY-MM-DD");

const payTypeArray = [
  { id: 0, type: "" },
  { id: 1, type: "年付" },
  { id: 2, type: "半年付" },
  { id: 3, type: "季付" },
  { id: 4, type: "次付" },
];
const timeTypeData = [
  { label: "开票日期", value: 1 },
  { label: "到款日期", value: 2 },
  { label: "开票日期&到款日期", value: 3 },
];
const dateButtonData = [
  { text: "近1周", tabId: 1, type: "week", diff: 1 },
  { text: "近1月", tabId: 2, type: "month", diff: 1 },
  { text: "近2月", tabId: 3, type: "month", diff: 2 },
  { text: "近3月", tabId: 4, type: "month", diff: 3 },
];

const serviceList = ref([]);
const checkedService = ref([])
function getSimpleServiceList() {
  customInterence.getSimpleServiceList().then((res) => {
    if (res.Ret != 200) return;
    serviceList.value = res.Data || [];
    // 后端最外层的数据没有给 service_template_id 删除tag时会报错，手动加
    serviceList.value.map((item, index) => {
      item.service_template_id = 500 + index;
    });
  });
}
getSimpleServiceList();

const searchParams = reactive({
  CurrentIndex: 1,
  PageSize: 10,
  Keyword: "",
  ServiceType: "",
  StartDate: startDate,
  EndDate: endDate,
  // 1-开票日期 2-到款日期 3-开票日期&到款日期
  TimeType: 1,
  SortType: "",
  SortParam: "",
});
const tableData = ref([]);
const total = ref(0);
const invoiceAmountTotal = ref(0);
const invoiceAmountList = ref([]);
const placementAmountTotal = ref(0);
const placementAmountList = ref([]);
function getList() {
  // console.log(this.searchParams);
  customInterence.getCTContractStatistics(searchParams).then((res) => {
    if (res.Ret != 200) return;
    tableData.value = [];
    let tempData = res.Data.data_list || [];
    total.value = res.Data.Paging.Totals;
    invoiceAmountTotal.value = res.Data.invoice_total;
    invoiceAmountList.value = res.Data.invoice_currency_total || [];
    placementAmountTotal.value = res.Data.payment_total;
    placementAmountList.value = res.Data.payment_currency_total || [];
    tempData.map((item, index) => {
      item.invoice_payment_list.map((it, ind) => {
        tableData.value.push({
          serialNumber:
            searchParams.PageSize * (searchParams.CurrentIndex - 1) + index + 1,
          ...item,
          date: item.start_date + "至" + item.end_date,
          ...it,
        });
      });
    });
  });
}
getList();

function searchList() {
  searchParams.CurrentIndex = 1;
  getList();
}
function changePageNo(pageNo) {
  searchParams.CurrentIndex = pageNo;
  getList();
}
function serviceChange(value) {
  searchParams.ServiceType = value.join(",");
  searchList();
}
function sortChange({ order, prop }) {
  searchParams.SortType =
    order == "descending" ? "desc" : order == "ascending" ? "asc" : "";
  searchParams.SortParam = order ? prop : "";
  searchList();
}

const currentDateTab = ref(0);
const searchDate = ref([startDate,endDate]);
function changeDateType({tabId,type,diff}){
  if(currentDateTab.value==tabId) return
  currentDateTab.value=tabId
  let startOfType='month'
  if(type=='week'){
    startOfType='isoWeek'
  }
  searchDate.value=[moment().startOf(startOfType).subtract((diff-1), type+'s').format('YYYY-MM-DD'),
  moment().format('YYYY-MM-DD')]
}

watch(
  () => searchDate.value,
  (newVal) => {
    if(newVal){
      searchParams.StartDate=newVal[0]
      searchParams.EndDate=newVal[1]
    }else{
      searchParams.StartDate=''
      searchParams.EndDate=''
    }
    searchList()
  }
)


const domList = ref([]);
function disabledCheck(e) {
  if (!domList.value[e]) return true;
  return (
    domList.value[e].offsetWidth <= domList.value[e].parentNode.offsetWidth
  );
}

onMounted(() => {
  nextTick(()=>{
    domList.value=$('.company-name-span')
  })
})

const invoiceIsFold = ref(true); //开票合计是否收起
const placementIsFold = ref(true); //到款合计是否收起
function foldOrUnfold(type) {
  if (tableData.value.length == 0) {
    return;
  }
  // type: 0-开票  1-到款
  if (type) {
    placementIsFold.value = !placementIsFold.value;
  } else {
    invoiceIsFold.value = !invoiceIsFold.value;
  }
}

</script>
<template>
  <div id="customer-statistics-container" class="customer-statistics-container">
    <div class="search-zone">
      <div class="search-box">
        <el-input
          v-model="searchParams.Keyword"
          placeholder="请输入客户名称"
          clearable
          class="search-item"
          @input="searchList"
          prefix-icon="el-icon-search"
          style="width: 240px"
        ></el-input>
        <el-cascader
          :options="serviceList"
          style="width: 240px; margin: 0 0 8px 20px"
          filterable
          v-model="checkedService"
          @change="serviceChange"
          placeholder="请选择套餐信息"
          clearable
          collapse-tags
          :show-all-levels="false"
          :props="{
            multiple: true,
            label: 'title',
            value: 'service_template_id',
            children: 'children',
            emitPath: false,
          }"
          key="serivce"
        >
        </el-cascader>
        <div class="date-box">
          <el-date-picker
            v-model="searchDate"
            type="daterange"
            @change="currentDateTab = 0"
            style="max-width: 240px; margin-right: 20px"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-select
            v-model="searchParams.TimeType"
            placeholder="请选择日期类型"
            @change="searchList"
            style="width: 240px; margin-right: 20px"
            clearable
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in timeTypeData"
              :key="item.value"
            ></el-option>
          </el-select>
          <div class="composition-button-tabs">
            <el-button
              size="large"
              v-for="(item, index) in dateButtonData"
              :key="item.tabId"
              class="date-button"
              :class="[
                index == 0
                  ? 'first-button'
                  : index == dateButtonData.length - 1
                  ? 'last-button'
                  : 'inner-button',
                currentDateTab == item.tabId ? 'selectTab' : '',
              ]"
              @click="changeDateType(item)"
              >{{ item.text }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="amount-show-zone">
      <div class="amount-show-item" style="margin-right: 20px">
        <div
          class="amount-item-head"
          @click="foldOrUnfold(0)"
          :style="{
            cursor: tableData.length > 0 ? 'pointer' : '',
            padding: invoiceIsFold ? '8px 20px 8px 20px' : '20px',
          }"
        >
          <div class="amount-item-head-title">
            已开票合计金额（换算后）：{{ invoiceAmountTotal }}（CNY）
          </div>
          <div class="fold-expand-row" v-show="tableData.length > 0">
            <span class="amount-item-head-icon">
              {{ invoiceIsFold ? "展开" : "收起" }}
            </span>
            <i
              class="el-icon-arrow-down"
              :style="!invoiceIsFold && 'transform: rotate(180deg)'"
              style="color: #409eff"
            ></i>
          </div>
        </div>
        <div
          class="amount-item-body-package"
          :style="{ height: invoiceIsFold ? '0' : '66px' }"
        >
          <div class="amount-item-body">
            <div
              class="amount-item-body-box"
              v-for="item in invoiceAmountList"
              :key="item.code"
            >
              <img
                :src="item.flag_img"
                style="height: 40px; width: 40px; margin-right: 20px"
              />
              <div class="amount-item-body-info">
                <span>{{ item.name }}（{{ item.code }}）</span>
                <span>{{ item.amount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="amount-show-item">
        <div
          class="amount-item-head"
          @click="foldOrUnfold(1)"
          :style="{
            cursor: tableData.length > 0 ? 'pointer' : '',
            padding: placementIsFold ? '8px 20px 8px 20px' : '20px',
          }"
        >
          <div class="amount-item-head-title">
            已到款合计金额（换算后）：{{ placementAmountTotal }}（CNY）
          </div>
          <div class="fold-expand-row" v-show="tableData.length > 0">
            <span class="amount-item-head-icon">
              {{ placementIsFold ? "展开" : "收起" }}
            </span>
            <i
              class="el-icon-arrow-down"
              :style="!placementIsFold && 'transform: rotate(180deg)'"
              style="color: #409eff"
            ></i>
          </div>
        </div>
        <div
          class="amount-item-body-package"
          :style="{ height: placementIsFold ? '0' : '66px' }"
        >
          <div class="amount-item-body">
            <div
              class="amount-item-body-box"
              v-for="item in placementAmountList"
              :key="item.code"
            >
              <img
                :src="item.flag_img"
                style="height: 40px; width: 40px; margin-right: 20px"
              />
              <div class="amount-item-body-info">
                <span>{{ item.name }}（{{ item.code }}）</span>
                <span>{{ item.amount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table-zone">
      <el-table
        :data="tableData"
        border
        ref="tableRef"
        max-height="580"
        @sort-change="sortChange"
      >
        <el-table-column
          label="序号"
          align="center"
          prop="serialNumber"
          width="60"
        >
          <template #default="{ row }">
            {{ row.serialNumber }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" prop="company_name" align="center">
          <template #default="{ row, $index }">
            <el-tooltip
              :content="row.company_name"
              placement="top"
              :disabled="disabledCheck($index)"
            >
              <div class="company-name-column">
                <span class="company-name-span">{{ row.company_name }}</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="是否新客户" prop="contract_type" align="center">
          <template #default="{ row }">
            {{ row.contract_type == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          label="合同有效期"
          prop="date"
          align="center"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            {{ row.date }}
          </template>
        </el-table-column>
        <el-table-column
          label="开票日"
          show-overflow-tooltip
          sortable="custom"
          prop="invoice_time"
          align="center"
        >
          <template #default="{ row }">
            {{ row.invoice_time }}
          </template>
        </el-table-column>
        <el-table-column label="开票金额" prop="invoice_amount" align="center">
          <template #default="{ row }">
            {{ row.invoice_amount }}
          </template>
        </el-table-column>
        <el-table-column
          label="到款日"
          show-overflow-tooltip
          sortable="custom"
          prop="payment_date"
          align="center"
        >
          <template #default="{ row }">
            {{ row.payment_date }}
          </template>
        </el-table-column>
        <el-table-column label="到款金额" prop="payment_amount" align="center">
          <template #default="{ row }">
            {{ row.payment_amount }}
          </template>
        </el-table-column>
        <el-table-column label="付款方式" prop="pay_type" align="center">
          <template #default="{ row }">
            <span>{{
              payTypeArray[row.pay_type] ? payTypeArray[row.pay_type].type : ""
            }}</span>
          </template>
        </el-table-column>
        <template v-if="isAdmin">
          <el-table-column label="销售" prop="seller_name" align="center">
            <template #default="{ row }">
              {{ row.seller_name }}
            </template>
          </el-table-column>
          <el-table-column
            label="销售组别"
            prop="seller_group_name"
            align="center"
          >
            <template #default="{ row }">
              {{ row.seller_group_name }}
            </template>
          </el-table-column>
          <el-table-column label="销售类型" prop="seller_type" align="center">
            <template #default="{ row }">
              {{ row.seller_type == 1 ? "FICC销售" : "权益销售" }}
            </template>
          </el-table-column>
        </template>
        <el-table-column label="套餐信息" prop="services_name" align="center">
          <template #default="{ row }">
            {{ row.services_name }}
          </template>
        </el-table-column>
        <template #empty>
          <div class="table-noData">
            <img src="~@/assets/img/cus_m/nodata.png" />
            <span>暂无数据</span>
          </div>
        </template>
      </el-table>
      <!-- 分页 -->
      <m-page
        :pageSize="searchParams.PageSize"
        :page_no="searchParams.CurrentIndex"
        style="display: flex; justify-content: flex-end; margin-top: 20px"
        :total="total"
        @handleCurrentChange="changePageNo"
      />
    </div>
  </div>
</template>
<style scoped lang="scss">
 .customer-statistics-container{
    min-height: calc(100vh - 110px);
    .search-zone{
      margin-bottom: 20px;
      padding: 20px 30px 12px;
      background-color: white;
      border-radius: 4px;
      .search-box{
        margin-left: -20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .search-item{
          width: 232px;
          margin: 0 0 8px 20px;
        }
        .date-box{
          display: flex;
          align-items: center;
          margin: 0 0 8px 20px;
          .composition-button-tabs{
            white-space: nowrap;
            .date-button{
              height: 40px;
              color: #999999;
              border: 1px solid #DCDFE6;
              margin: 0;
              width: 60px;
              padding: 12px 6px;
            }
            .first-button{
              border-color: #DCDFE6;
              border-style: solid;
              border-width: 1px 0 1px 1px;
              border-radius: 4px 0 0 4px;
            }
            .inner-button{
              border: 1px solid #DCDFE6;
              border-radius: 0;
            }
            .last-button{
              border-color: #DCDFE6;
              border-style: solid;
              border-width: 1px 1px 1px 0;
              border-radius:0 4px 4px 0 ;
            }
            .selectTab{
              color:white;
              background-color: #409EFF;
            }
          }
        }
      }

    }
    .amount-show-zone{
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-bottom: 10px;
      .amount-show-item{
        margin-bottom: 10px;
        background: #FFFFFF;
        // border: 1px solid #DCDFE6;
        // box-shadow: 0px 4px 12px rgba(153, 153, 153, 0.08);
        border-radius: 8px;
        width: 45%;
        box-sizing: border-box;
        .amount-item-head{
          transition: all 0.1s ease;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .amount-item-head-title{
            font-weight: 600;
            font-size: 18px;
            color: #000000;
          }
          .fold-expand-row{
            display: flex;
            align-items: center;
            .amount-item-head-icon{
              font-weight: 400;
              font-size: 14px;
              color: #409EFF;
              margin-right: 4px;
            }
          }

        }
        .amount-item-body-package{
          overflow: hidden;
          transition: height 0.1s ease;
          .amount-item-body{
            padding: 6px 20px 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .amount-item-body-box{
              display: flex;
              align-items: center;
              width: 220px;
              .amount-item-body-info{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                span{
                  font-weight: 400;
                  font-size: 14px;
                  color: #666666;
                  margin-bottom: 2px;
                  &:last-child{
                    font-weight: 700;
                    font-size: 16px;
                    color: #333333;
                  }
                }
              }
            }
          }
        }
      }
    }
    .table-zone{
      padding: 20px 30px 65px;
      background-color: white;
      border-radius: 4px;
      .company-name-column{
        max-width: 100%;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .table-noData{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 18vh 0;
        img{
          height: 110px;
          width: 136px;
        }
        span{
          font-weight: 400;
          font-size: 16px;
          color: #999999;
        }
      }
    }
  }
</style>