hz_crm_web/src/views/contract_manage/raiAllocationPage.vue

<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>
      <date-picker v-model="filterObj.date" type="date" range value-type="format" placeholder="自定义时间段" clearable :editable="false" :disabled-date="disabledBeforeToday" @change="dateChange" />
      <el-input placeholder="请输入客户名称" v-model.trim="searchVal" style="width: 400px; margin-left: auto" @input="handleSearch" clearable>
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </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">
          <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">
          <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"
        >
        </el-cascader>
        <el-select v-model="filterObj.status" placeholder="派点状态" style="width: 230px; margin-right: 20px" clearable @change="changeFilter">
          <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 :allocationVisible.sync="allocationVisible" :allocationForm.sync="allocationForm" />
    <allocation-detail @allocationDetailList="allocationDetailList" :allocationDetailVisible.sync="allocationDetailVisible" :allocationDetailForm.sync="allocationDetailForm" />
    <rai-history-contract :isPreview.sync="isPreview" :dealList.sync="dealList" />
  </div>
</template>

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

var moment = require("moment");
moment().format();
export default {
  name: "",
  components: { AllocationLable, AllocationNumber, AllocationDetail, mPage, RaiHistoryContract },
  props: {},
  data() {
    return {
      /* 筛选条件 */
      filterObj: {
        month: "",
        date: [],
        type: "",
        sale: "",
        area: "",
        status: "",
        contractType: "",
      },
      monthLabel: [
        {
          label: "近1个月",
        },
        {
          label: "近2个月",
        },
        {
          label: "近3个月",
        },
      ],
      searchVal: "",
      typeArr: [
        {
          value: "非标",
          label: "非标合同",
        },
        {
          value: "标准",
          label: "标准合同",
        },
      ],
      typeArrStatus: [
        {
          value: "0",
          label: "未派点",
        },
        {
          value: "1",
          label: "已派点",
        },
      ],
      salesArr: [], //销售列表
      contractTypeArr: [
        {
          value: "新签合同",
          label: "新签合同",
        },
        {
          value: "续约合同",
          label: "续约合同",
        },
        {
          value: "补充协议",
          label: "补充协议",
        },
      ], // 合同类型
      statusArr: [], // 派点状态
      defaultSalesProps: {
        multiple: true,
        label: "RealName",
        children: "ChildrenList",
        value: "AdminId",
      }, //销售级联配置
      tableList: [],
      allocationVisible: false, // 派点
      allocationForm: {}, // 派点
      allocationDetailVisible: false, // 派点详情
      allocationDetailForm: {}, // 派点详情
      page_no: 1,
      total: 0, //条数
      PageSize: 10, //每页显示几条
      isPreview: false,
      dealList: [],
    };
  },
  computed: {
    exportExcel() {
      let baseUrl = process.env.API_ROOT + "/cygx/allocation/company_contract_list";
      let token = localStorage.getItem("auth") || "";
      let paramStr = "";
      let salesArr = [];
      if (this.filterObj.sale.length) {
        salesArr = this.filterObj.sale.map((item) => {
          return item[item.length - 1];
        });
      }
      let obj = {
        IsExport: true,
        FormalType: this.filterObj.type,
        ContractType: this.filterObj.contractType,
        PageSize: this.PageSize,
        CurrentIndex: this.page_no,
        Keyword: this.searchVal,
        AdminId: salesArr.join(","),
        IsAllocation: this.filterObj.status,
        StartDate: this.filterObj.date[0] ? this.filterObj.date[0] : "",
        EndDate: this.filterObj.date[1] ? this.filterObj.date[1] : "",
      };
      for (let key in obj) {
        paramStr = `${paramStr}&${key}=${obj[key]}`;
      }
      return `${baseUrl}?${token}${paramStr}`;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getSale();
    this.getTableData();
  },
  methods: {
    /* 切换月份 */
    toggleMonth(label) {
      this.filterObj.month = label;
      let days = label == "近1个月" ? 1 : label == "近2个月" ? 2 : label == "近3个月" ? 3 : 0;
      this.filterDate(days);
    },
    /* 获取近几个月的日期范围 */
    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];
        this.start_date = date_now;
        this.end_date = date_after;
        this.filterObj.date = date;
        this.page_no = 1;
        this.searchVal = "";
        this.getTableData();
      }
    },
    /* 获取销售 */
    getSale() {
      customInterence.getSale().then((res) => {
        if (res.Ret === 200) {
          this.salesArr = res.Data.List;
        }
      });
    },
    async getTableData() {
      let salesArr = [];
      if (this.filterObj.sale.length) {
        salesArr = this.filterObj.sale.map((item) => {
          return item[item.length - 1];
        });
      }
      const res = await contractInterface.getAllocationContract({
        FormalType: this.filterObj.type,
        ContractType: this.filterObj.contractType,
        PageSize: this.PageSize,
        CurrentIndex: this.page_no,
        Keyword: this.searchVal,
        AdminId: salesArr.join(","),
        IsAllocation: this.filterObj.status,
        StartDate: this.filterObj.date[0] ? this.filterObj.date[0] : "",
        EndDate: this.filterObj.date[1] ? this.filterObj.date[1] : "",
      });
      if (res.Ret === 200) {
        this.tableList = res.Data.List;
        this.total = res.Data.Paging.Totals;
      }
    },
    changeFilter() {
      this.page_no = 1;
      this.getTableData();
    },
    handleSearch() {
      this.getTableData();
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getTableData();
    },
    // 非标准预览
    isPreviewHistoryDetail(res) {
      this.isPreview = true;
      this.dealList = res.Data.List;
    },
    // 派点
    allocationDetailList(item) {
      this.allocationForm = item;
      this.allocationVisible = true;
    },
    // 派点详情
    allocationDetail(item) {
      this.allocationDetailVisible = true;
      this.allocationDetailForm = item;
    },
    /* 选择日期 */
    dateChange(e) {
      this.page_no = 1;
      this.getTableData();
    },
  },
};
</script>
<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>