web-base-admin/src/views/statistics/umbrellaBloodline.vue

<template>
    <div class="page">
      <topBar
        v-if="topList.length > 0"
        :topList="topList"
        :moren="moren"
      ></topBar>
      <div class="thetopbox">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="4">
              <el-form-item :label="'订单类型'" prop="orderType">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.orderType"
                >
                  <el-option
                    v-for="item in orderTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'奖衔级别'" prop="pkAwardsLevel">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.pkAwardsLevel"
                >
                  <el-option
                    v-for="item in awardsLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'真实奖衔'" prop="pkAwards">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.pkAwards"
                >
                  <el-option
                    v-for="item in awardsList"
                    :key="item.pkId"
                    :label="item.awardsName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'隶属体系'" prop="pkVertex">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.pkVertex"
                >
                  <el-option
                    v-for="item in vertexList"
                    :key="item.pkId"
                    :label="item.vertexName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'隶属团队'" prop="pkTeamCode">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.pkTeamCode"
                >
                  <el-option
                    v-for="item in memberTeamList"
                    :key="item.pkId"
                    :label="item.teamName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
              <el-form-item :label="'国家'" prop="orderType">
                <el-select
                  clearable
                  :placeholder="'请选择'"
                  v-model="queryParams.orderType"
                >
                  <el-option
                    v-for="item in countryList"
                    :key="item.pkId"
                    :label="item.name"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item  :label="'订单日期'" prop="thetimes">
                <el-date-picker
                  v-model="queryParams.thetimes"
                  @change="changeTime"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  :clearable="false"
                  :range-separator="'至'"
                  :start-placeholder="'开始日期'"
                  :end-placeholder="'结束日期'"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="searchbox">
                <el-button
                  class="my_search"
                  @click="
                    () => {
                      getSearch();
                      getCzNum();
                    }
                  "
                >
                  {{ '搜索' }}</el-button
                >
                <el-button class="my_reset" @click="reChongzhi">
                  {{ '重置' }}</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="main">
        <div class="maintop">
          <div class="mainbtn">
            <el-button size="small" class="thebtn1" @click="handleExport">
              {{ '导出' }}</el-button
            >
          </div>
        </div>
        <div class="maintable">
          <el-table
            :data="tableData"
            v-loading="loading"
            height="680px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="colsele" type="selection" width="55">
            </el-table-column>
  
            <el-table-column
              align="center"
              prop="pkCountryIcon"
              :label="'国旗（圆形）'"
            >
              <template scope="scope">
                <img
                  style="width: 44px; height: 44px; border-radius: 50%"
                  :src="scope.row.pkCountryIcon"
                  alt=""
                />
              </template>
            </el-table-column>
  
            <el-table-column
              align="center"
              prop="pkCountryName"
              :label="'国家'"
              min-width="120px"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberCode"
              :label="'会员编号'"
              min-width="120px"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberName"
              :label="'会员姓名'"
              min-width="120px"
            >
            </el-table-column>
  
            <el-table-column
              align="center"
              prop="phone"
              :label="'联系方式'"
              min-width="120px"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="pkAwardsVal"
              :label="'真实奖衔'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="vertexName"
              :label="'隶属体系'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="teamName"
              :label="'隶属团队'"
            >
            </el-table-column>
           
            <el-table-column
              align="center"
              prop="orderAmount"
              min-width="100px"
              :label="'新增金额' + `(${isLocalSymbol()})`"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="orderAchieve"
              min-width="100px"
              :label="'新增业绩' + `(PV)`"
            >
            </el-table-column>
            <!-- <el-table-column
              min-width="120px"
              align="center"
              prop=""
              :label="'订单日期'"
            >
            </el-table-column> -->
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getSearch"
      />
    </div>
  </template>
      
          <script>
  import topBar from "@/components/topBar";
  import * as sta from "@/api/statistics";
  import * as log from "@/api/logistics";
  import { getAwardsListChiose } from "@/api/level";
  import { getcountryAllList } from "@/api/exchangerate";
  import { getvertexValue, getmemberTeamList } from "@/api/financialCase";
  import { isLocals, isLocalSymbol } from "@/utils/numberToCurrency";
  import { mapGetters } from "vuex";
  export default {
    name: "UmbrellaBloodline",
    components: {
      topBar,
    },
    data() {
      return {
        moren: "umbrellaBloodline",
        topList: [
          {
            name: '伞下血缘去重',
            path: "umbrellaBloodline",
          },
        ],
        tableData: [],
        loading:false,
        queryParams: {
          pageNum: 1,
          pageSize: 50,
          thetimes: [],
        },
        total: 0,
        multipleSelection: [],
        awardsList: [],
        memberTeamList: [],
        vertexList: [],
        countryList: [],
        orderTypeList: [],
        awardsLevelList:[]
      };
    },
    created() {
      this.getSearch();
      this.getOthers();
    },
    computed: {
    ...mapGetters(["getUser"]),
  },
    methods: {
      isLocalSymbol,
      isLocals,
      changeTime(val) {
        this.queryParams.startDate = val[0];
        this.queryParams.endDate = val[1];
      },
      getOthers() {
        getAwardsListChiose().then((res) => {
          this.awardsList = res.rows;
        });
        getmemberTeamList().then((res) => {
          this.memberTeamList = res.rows;
        });
        getvertexValue().then((res) => {
          this.vertexList = res.data;
        });
        getcountryAllList().then((res) => {
          this.countryList = res.data;
        });
        // 获取订单类型
        log.getUnderAddOrderType().then((res) => {
          this.orderTypeList = res.data;
        });
        sta.getAwardsLevelList().then(res=>{
            this.awardsLevelList = res.data
        })
      },
      //导出
      handleExport() {
        this.$confirm('是否确认导出所有数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning",
        }).then((_) => {
          this.download(
            "/report/manager/member-awards/export-blood-remove-same",
            { ...this.queryParams },
            `${'伞下血缘去重'}${new Date().getTime()}.xlsx`
          );
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      reChongzhi() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 50,
          thetimes: [],
        };
        this.getSearch();
      },
      getSearch() {
        this.loading = true
        sta.getBloodRemoveSame(this.queryParams).then((res) => {
          this.loading = false
          if (res.code == 200) {
            res.rows.forEach((item) => {
          item.pkCountryName = this.getUser.country.shortName;
          item.pkCountryIcon = this.getUser.country.nationalFlag2;
        });
            this.tableData = res.rows;
            this.total = res.total;
            
          }
        });
      },
      getCzNum() {
        this.queryParams.pageNum = 1;
      },
    },
  };
  </script>
      
      <style lang="scss" scoped>
  ::v-deep .el-image-viewer__close {
    right: 500px;
  }
  ::v-deep .dizhi .el-cascader {
    width: 100%;
  }
  ::v-deep .el-range-editor.el-input__inner {
    width: 100%;
  }
  ::v-deep .el-table thead {
    color: #000000;
  }
  ::v-deep .el-table .warning-row {
    background: #f9f9f9;
  }
  .page {
    padding: 10px 20px;
    background: #f9f9f9;
    font-size: 14px;
    .thetopbox {
      padding: 15px 20px 15px 0;
      background: #ffffff;
      border-radius: 8px;
      .searchbox {
        display: flex;
        align-items: center;
        margin-left: 40px;
      }
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
    .main {
      //margin-top: 20px;
      background: #f9f9f9;
      //border-radius: 8px;
      //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  
      .maintop {
        display: flex;
        // padding: 10px 0;
        justify-content: space-between;
        align-items: center;
        .mainbtn {
          .thebtn1 {
            color: #ffffff;
            background: #ffad41;
            width: 68px;
            height: 32px;
          }
          .thebtn2 {
            color: #ffffff;
            background: #009b58;
            width: 68px;
            height: 32px;
          }
          .thebtn3 {
            color: #ffffff;
            background: #c8161d;
            width: 68px;
            height: 32px;
          }
        }
      }
    }
  }
  </style>