controlPc/src/pages/task/agent.vue

<template>
  <div class="back-line-main">
    <div class="back-line-header">
      <div class="back-line-header-title">
        <h2>代理人数据</h2>
        <div>
          <span>时间筛选</span>
          <a-range-picker
            @change="onChangeTime"
            v-model="formState.time"
            valueFormat="YYYY-MM-DD"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
          <a-radio-group
            default-value="0"
            button-style="solid"
            v-model="formState.days"
          >
            <a-radio-button
              value="1"
              @click="
                (formState.time = []),
                  (formState.beginDate = ''),
                  (formState.endDate = '')
              "
            >
              当天
            </a-radio-button>
            <a-radio-button
              value="7"
              @click="
                (formState.time = []),
                  (formState.beginDate = ''),
                  (formState.endDate = '')
              "
            >
              近7天
            </a-radio-button>
            <a-radio-button
              value="30"
              @click="
                (formState.time = []),
                  (formState.beginDate = ''),
                  (formState.endDate = '')
              "
            >
              近30天
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>

      <fromRow
        :formState="formState"
        @getList="getBackLinePersonnel"
        :exportExcel="true"
        @exportList="exportList"
      ></fromRow>
    </div>
    <standard-table
      bordered
      :columns="columns"
      :dataSource="tableList"
      :pagination="pagination"
      @clear="onClear"
      @change="onChange"
      :loading="loading"
      :scroll="{ x: 2200 }"
    >
      <div slot="qutationCount" slot-scope="{ text }">
        {{ text + "条" }}
      </div>
      <div slot="quotationRate" slot-scope="{ text }">
        {{ (text * 100).toFixed(2) + "%" }}
      </div>
      <span slot="title_slot">
        报价率
        <a-tooltip
          placement="topLeft"
          title="报价中 / 报价数"
          arrow-point-at-center
        >
          <a-icon type="question-circle" />
        </a-tooltip>
      </span>
      <span slot="title_slot2">
        承保率
        <a-tooltip
          placement="topLeft"
          title="承保数 / 报价数"
          arrow-point-at-center
        >
          <a-icon type="question-circle" />
        </a-tooltip>
      </span>
      <span slot="title_slot3">
        核保通过率
        <a-tooltip
          placement="topLeft"
          title="(承保数+ 核保数) / 报价数"
          arrow-point-at-center
        >
          <a-icon type="question-circle" />
        </a-tooltip>
      </span>
      <div slot="operation" slot-scope="{ record }">
        <a-button type="link" @click="watchMessage(record)">详情</a-button>
      </div>
    </standard-table>
    <a-drawer
      :width="1300"
      :placement="'right'"
      :visible="visible"
      :headerStyle="headerStyle"
      :closable="false"
    >
      <template slot="title">
        <div class="custom-title" :style="headerStyle">
          <div>
            <a-icon type="close" @click="onClose" />
            渠道详情
          </div>
          <div>
            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
            <a-button type="primary" @click="onClose">确认</a-button>
          </div>
        </div>
        <div>
          <dl>
            <dt>
              <img
                v-show="detailsObj.logo"
                :src="process + detailsObj.logo"
                alt=""
              />
              <img
                v-if="!detailsObj.logo && detailsObj.sex == 'M'"
                src="../../assets/img/man.png"
                alt=""
              />
              <img
                v-if="!detailsObj.logo && detailsObj.sex == 'F'"
                src="../../assets/img/woman.png"
                alt=""
              />
              <img
                v-if="!detailsObj.logo && !detailsObj.sex"
                src="../../assets/img/man.png"
                alt=""
              />
            </dt>
            <dd>
              <p>
                <span> {{ detailsObj.userName }} </span>（{{
                  detailsObj.userId
                }}）
              </p>
              <p>归属机构：{{ detailsObj.deptName }}</p>
            </dd>
          </dl>
        </div>
        <standard-table
          bordered
          :columns="columns1"
          :dataSource="detailList"
          :pagination="pageInfo"
          @change="detailsChange"
          :loading="loading"
          :scroll="{ x: 2200 }"
        >
          <div slot="qutationCount" slot-scope="{ text }">
            {{ text + "条" }}
          </div>
          <div slot="quotationRate" slot-scope="{ text }">
            {{ (text * 100).toFixed(2) + "%" }}
          </div>
          <span slot="title_slot">
            报价率
            <a-tooltip
              placement="topLeft"
              title="报价中 / 报价数"
              arrow-point-at-center
            >
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
          <span slot="title_slot2">
            承保率
            <a-tooltip
              placement="topLeft"
              title="承保数 / 报价数"
              arrow-point-at-center
            >
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
          <span slot="title_slot3">
            核保通过率
            <a-tooltip
              placement="topLeft"
              title="(承保数+ 核保数) / 报价数"
              arrow-point-at-center
            >
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
        </standard-table>
      </template>
    </a-drawer>
  </div>
</template>
    
<script>
import StandardTable from "@/components/table/StandardTable";
import mixin from "../../minins/mixin";
const columns = [
  {
    title: "二级机构",
    dataIndex: "provinceName",
  },
  {
    title: "三级机构",
    dataIndex: "cityName",
  },
  {
    title: "四级机构",
    dataIndex: "districtName",
  },
  {
    title: "五级机构",
    dataIndex: "storeDeptName",
  },

  {
    title: "归属机构",
    dataIndex: "deptName",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "管理人",
    dataIndex: "leaderName",
  },
  {
    title: "业务员姓名",
    dataIndex: "userName",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "业务员工号",
    dataIndex: "userId",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "报价中",
    dataIndex: "qutationCount",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "待审核",
    dataIndex: "auditOrder",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "已核保待缴费",
    dataIndex: "underwritingCount",
    scopedSlots: { customRender: "qutationCount" },

    // sorter: true,
    needTotal: true,
  },
  {
    title: "已承保",
    dataIndex: "qutationInsureCount",
    needTotal: true,
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "核保退回",
    dataIndex: "underwritingReturn",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    // title: "报价率",
    dataIndex: "quotationRate",
    scopedSlots: { title: "title_slot", customRender: "quotationRate" },
  },
  {
    // title: "承保率",
    dataIndex: "closeRate",
    scopedSlots: { title: "title_slot2", customRender: "quotationRate" },
  },
  {
    // title: "核保通过率",
    dataIndex: "contributionRate",
    scopedSlots: { title: "title_slot3", customRender: "quotationRate" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    fixed: "right",
    width: 100,
    scopedSlots: { customRender: "operation" },
  },
];
const columns1 = [
  {
    title: "保险公司",
    dataIndex: "inscompany",
  },

  {
    title: "报价中(PC)",
    dataIndex: "pcOrderSource",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "报价中(APP)",
    dataIndex: "appOrderSource",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "待审核",
    dataIndex: "auditOrder",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "已核保待缴费",
    dataIndex: "underwritingCount",
    scopedSlots: { customRender: "qutationCount" },

    // sorter: true,
    needTotal: true,
  },
  {
    title: "已承保",
    dataIndex: "qutationInsureCount",
    needTotal: true,
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "核保退回",
    dataIndex: "underwritingReturn",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    // title: "报价率",
    dataIndex: "quotationRate",
    scopedSlots: { title: "title_slot", customRender: "quotationRate" },
  },
  {
    // title: "承保率",
    dataIndex: "closeRate",
    scopedSlots: { title: "title_slot2", customRender: "quotationRate" },
  },
  {
    dataIndex: "contributionRate",
    scopedSlots: { title: "title_slot3", customRender: "quotationRate" },
  },
];
import fromRow from "@/components/form/FormRow";
import moment from "moment";
export default {
  components: {
    StandardTable,
    fromRow,
  },
  mixins: [mixin],
  data() {
    return {
      formState: {
        whole: undefined,
        cityId: undefined,
        countyId: undefined,
        houseId: undefined,
        provinceId: undefined,
        days: undefined,
        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
        endDate: moment().format("YYYY-MM-DD"),
        beginDate: moment().format("YYYY-MM-DD"),
      },
      backLinePersonnel: {},
      columns: columns,
      columns1: columns1,
      companyList: [],
      tableList: [],
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      loading: false,
      wholeList: [],
      provinceList: [],
      cityList: [],
      areaList: [],
      storeList: [],
      process: process.env.VUE_APP_API_BASE_URL,
      visible: false,
      headerStyle: {
        display: "flex",
        "align-items": "center",
        "justify-content": "space-between",
      },
      pageInfo: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      detailsObj: {},
      detailList: [],
    };
  },
  watch: {
    "formState.days"() {
      this.getBackLinePersonnel();
    },
  },
  mounted() {
    this.getBackLinePersonnel();
    // setTimeout(() => {

    // }, 1000);
  },
  methods: {
    watchMessage(item) {
      //
      this.detailsObj = { ...item };
      this.visible = true;
      this.getDetailsList(item);
    },
    getDetailsList(item) {
      this.detailList = [];
      this.$API.task
        .getChannelAgentDetails({
          pageNum: this.pageInfo.current,
          pageSize: this.pageInfo.defaultPageSize,
          userId: item.userId,
          beginDate: this.formState.beginDate,
          endDate: this.formState.endDate,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.detailList = res.data.data.records;
            this.pageInfo = {
              current: res.data.data.current,
              defaultPageSize: res.data.data.size,
              total: res.data.data.total,
            };
          }
        });
    },
    onClose() {
      //
      this.visible = false;
    },
    exportList() {
      delete this.formState.time;
      this.$API.task
        .exportAgentlList({
          ...this.formState,
        })
        .then((res) => {
          if (res.data.code == 200) {
            let url = this.process + res.data.data; // 3.创建一个临时的url指向blob对象
            let a = document.createElement("a");
            a.href = url;
            a.download = "导出文件.xlsx";
            a.click();
            window.URL.revokeObjectURL(url);
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    onChangeTime(val) {
      // console.log(val);
      this.formState.beginDate = val[0];
      this.formState.endDate = val[1];
      this.formState.days = undefined;
      this.getBackLinePersonnel();
    },
    handleFinish() {
      //
    },
    // wholeHandleChange() {
    //   this.getProvinceList(this.formState.whole);
    // },
    // provinceHandleChange() {
    //   this.getCityList(this.formState.provinceId);
    // },
    // cityHandleChange() {
    //   this.getAreaList(this.formState.cityId);
    // },
    // countyHandleChange() {
    //   this.getStoreList(this.formState.countyId);
    // },

    getBackLinePersonnel() {
      this.loading = true;
      this.$API.task
        .getAgentList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          ...this.formState,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;
            this.tableList = res.data.data.records;
            this.pagination = {
              current: res.data.data.current,
              defaultPageSize: res.data.data.size,
              total: res.data.data.total,
            };
          }
        });
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },

    onChange(pagination) {
      // this.$message.info('表格状态改变了')

      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getBackLinePersonnel();
    },
    detailsChange(pageInfo) {
      this.pageInfo = {
        current: pageInfo.current,
        defaultPageSize: pageInfo.pageSize,
        total: pageInfo.total,
      };
      this.getDetailsList(this.detailsObj);
    },
  },
};
</script>
    <style lang='less' scoped>
.back-line-main {
  display: flex;
  flex-direction: column;
  .back-line-header {
    padding: 15px;
    box-sizing: border-box;
    .back-line-header-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;
      box-sizing: border-box;
      h2 {
        margin: 0;
      }
      > div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      span {
        display: block;
        margin-right: 15px;
      }
      /deep/.ant-calendar-picker {
        width: 300px;
      }
    }
  }
  > div {
    // height: 152px;
    background: #fff;
    .ant-form {
      display: flex;
      > .ant-form-item {
        flex: 1;
        /deep/.ant-form-item-control-wrapper {
          width: 100%;
        }
      }
    }
    .form-item-search {
      // display: flex;
      // justify-content: flex-end;
      /deep/ .ant-form-item-control {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
/deep/.ant-drawer-title {
  width: 100%;
}
/deep/.custom-title {
  display: flex;
  > i {
    cursor: pointer;
  }
}

dl {
  width: 346px;
  height: 78px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #f87f2c;
  display: flex;
  margin-left: 15px;
  span {
    color: #f87f2c;
  }
  dt {
    width: 64px;
    height: 100%;
    background: #fff9f7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px 0 0 4px;
    img {
      width: 40px;
      height: 40px;
    }
  }
  dd {
    padding: 8px 0;
    box-sizing: border-box;
    margin-left: 10px;
    p {
      margin: 0;
    }
    p:first-child {
      color: #aaa;
    }
    display: flex;
    flex-direction: column;
    // align-items: ;
    justify-content: space-between;
  }
}
</style>