crm_front_v3/src/views/contract_manage/raiAllocationPage.vue

<script setup>
import { ref,reactive,computed } from "vue";
import moment from "moment"; 
import { Search } from '@element-plus/icons-vue'

import { customInterence, contractInterface } from "@/api/api.js";
import AllocationLable from "./components/allocationLable.vue";
import AllocationNumber from "./components/allocationNumber.vue";
import AllocationDetailPage from "./components/allocationDetail.vue";
import mPage from "@/components/mPage.vue";
import RaiHistoryContract from "./components/raiHistoryContract.vue";


/* 筛选条件 */
const filterObj=reactive({
  month: "",
  date: [],
  type: "",
  sale: "",
  area: "",
  status: "",
  contractType: "",
})
const monthLabel=reactive([
  {
    label: "近1个月",
  },
  {
    label: "近2个月",
  },
  {
    label: "近3个月",
  },
])
const searchVal=ref("")
const typeArr=reactive([
  {
    value: "非标",
    label: "非标合同",
  },
  {
    value: "标准",
    label: "标准合同",
  },
])
const typeArrStatus=reactive([
  {
    value: "0",
    label: "未派点",
  },
  {
    value: "1",
    label: "已派点",
  },
])
const salesArr=ref([]) //销售列表
const contractTypeArr=reactive([
  {
    value: "新签合同",
    label: "新签合同",
  },
  {
    value: "续约合同",
    label: "续约合同",
  },
  {
    value: "补充协议",
    label: "补充协议",
  },
]) // 合同类型
const statusArr=ref([]) // 派点状态
const defaultSalesProps=reactive({
  multiple: true,
  label: "RealName",
  children: "ChildrenList",
  value: "AdminId",
}) //销售级联配置

const tableList=ref([])
const allocationVisible=ref(false) // 派点
const allocationForm=ref({}) // 派点
const allocationDetailVisible=ref(false) // 派点详情
const allocationDetailForm=ref({}) // 派点详情
const page_no=ref(1)
const total=ref(0)
const PageSize=ref(10)
const isPreview=ref(false)
const dealList=ref([])

const exportExcel=computed(()=>{
  let baseUrl = import.meta.env.VITE_APP_API_ROOT + "/cygx/allocation/company_contract_list";
  let token = localStorage.getItem("auth") || "";
  let paramStr = "";
  let salesArr = [];
  if (filterObj.sale.length) {
    salesArr = filterObj.sale.map((item) => {
      return item[item.length - 1];
    });
  }
  let obj = {
    IsExport: true,
    FormalType: filterObj.type,
    ContractType: filterObj.contractType,
    PageSize: PageSize.value,
    CurrentIndex: page_no.value,
    Keyword: searchVal.value,
    AdminId: salesArr.join(","),
    IsAllocation: filterObj.status,
    StartDate: filterObj.date ? filterObj.date[0]||"" : "",
    EndDate: filterObj.date ? filterObj.date[1]||"" : "",
  };
  for (let key in obj) {
    paramStr = `${paramStr}&${key}=${obj[key]}`;
  }
  return `${baseUrl}?${token}${paramStr}`;
})

/* 切换月份 */
const toggleMonth=(label)=>{
  filterObj.month = label;
  let days = label == "近1个月" ? 1 : label == "近2个月" ? 2 : label == "近3个月" ? 3 : 0;
  filterDate(days);
}
/* 获取近几个月的日期范围 */
const filterDate=(month)=>{
  if (month) {
    let date_now = moment().format("YYYY-MM-DD");
    let date_after = moment().add(-month, "M").format("YYYY-MM-DD");
    let date = [date_after, date_now];
    filterObj.date = date;
    page_no.value = 1;
    searchVal.value = "";
    getTableData();
  }
}
/* 获取销售 */
const getSale=()=>{
  customInterence.getSale().then((res) => {
    if (res.Ret === 200) {
      salesArr.value = res.Data.List;
    }
  });
}
const getTableData=async()=>{
  let salesArr = [];
  if (filterObj.sale.length) {
    salesArr = filterObj.sale.map((item) => {
      return item[item.length - 1];
    });
  }
  const res = await contractInterface.getAllocationContract({
    FormalType: filterObj.type,
    ContractType: filterObj.contractType,
    PageSize: PageSize.value,
    CurrentIndex: page_no.value,
    Keyword: searchVal.value,
    AdminId: salesArr.join(","),
    IsAllocation: filterObj.status,
    StartDate: filterObj.date ? filterObj.date[0]||"" : "",
    EndDate: filterObj.date ? filterObj.date[1]||"" : "",
  });
  if (res.Ret === 200) {
    tableList.value = res.Data.List;
    total.value = res.Data.Paging.Totals;
  }
}
const changeFilter=()=>{
  page_no.value = 1;
  getTableData();
}
const handleSearch=()=>{
  getTableData();
}
//分页
const handleCurrentChange=(page)=>{
  page_no.value = page;
  getTableData();
}
// 非标准预览
const isPreviewHistoryDetail=(res)=>{
  isPreview.value = true;
  dealList.value = res.Data.List;
}
// 派点
const allocationDetailList=(item)=>{
  allocationForm.value = item;
  allocationVisible.value = true;
}
// 派点详情
const allocationDetail=(item)=>{
  allocationDetailVisible.value = true;
  allocationDetailForm.value = item;
}
/* 选择日期 */
const dateChange=(e)=>{
  page_no.value = 1;
  getTableData();
}

getSale();
getTableData();

</script>

<template>
  <div class="container rai-allocation-page">
    <div class="dataReport-top">
      <a :href="exportExcel" download>
        <button class="button-sty act" >导出EXCEL</button>
      </a>
      <button :class="['button-sty', { act: filterObj.month === item.label }]" v-for="item in monthLabel" @click="toggleMonth(item.label)" :key="item.label">
        {{ item.label }}
      </button>
      <el-date-picker v-model="filterObj.date" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large"
      @change="dateChange" start-placeholder="开始" end-placeholder="结束" style="max-width: 280px;"> </el-date-picker>
      <!-- vue-datepicker-next -->
      <!-- <date-picker v-model="filterObj.date" type="date" range value-type="format" placeholder="自定义时间段" clearable :editable="false" @change="dateChange" /> -->
      <el-input placeholder="请输入客户名称" v-model.trim="searchVal" style="width: 400px; margin-left: auto" @input="handleSearch" clearable
      size="large" :prefix-icon="Search" />
    </div>
    <el-card style="margin-top: 20px">
      <div style="margin-bottom: 30px">
        <el-select v-model="filterObj.type" placeholder="转正类型" style="width: 230px; margin-right: 20px" clearable @change="changeFilter"
        size="large">
          <el-option v-for="item in typeArr" :key="item" :label="item.label" :value="item.value"> </el-option>
        </el-select>

        <el-select v-model="filterObj.contractType" placeholder="合同类型" style="width: 230px; margin-right: 20px" clearable @change="changeFilter"
        size="large">
          <el-option v-for="item in contractTypeArr" :key="item" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-cascader
          v-model="filterObj.sale"
          placeholder="请选择销售"
          style="width: 230px; margin-right: 20px"
          :options="salesArr"
          :props="defaultSalesProps"
          :show-all-levels="false"
          collapse-tags
          clearable
          filterable
          @change="changeFilter"
          size="large"
        >
        </el-cascader>
        <el-select v-model="filterObj.status" placeholder="派点状态" style="width: 230px; margin-right: 20px" clearable @change="changeFilter"
        size="large">
          <el-option v-for="item in typeArrStatus" :key="item" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <allocation-lable :tableList="tableList" @isPreviewHistoryDetail="isPreviewHistoryDetail" @allocationDetailList="allocationDetailList" @allocationDetail="allocationDetail" />
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
    <allocation-number v-model:allocationVisible="allocationVisible" v-model:allocationForm="allocationForm" />
    <allocation-detail-page @allocationDetailList="allocationDetailList" v-model:allocationDetailVisible="allocationDetailVisible" 
    v-model:allocationDetailForm="allocationDetailForm" />
    <rai-history-contract v-model:isPreview="isPreview" v-model:dealList="dealList" @emitGetTableData="getTableData"/>
  </div>
</template>

<style scoped lang="scss">
.rai-allocation-page {
  .dataReport-top {
    display: flex;
    align-items: center;
    border: 1px solid #ececec;
    padding: 20px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    .button-sty {
      margin-right: 20px;
      border: none;
      padding: 6px 12px;
      background: #e0eefd;
      color: #2d8cf0;
      cursor: pointer;
      border-radius: 4px;
      &.act {
        background: #409eff;
        color: #fff;
      }
    }
  }
}
</style>