|
|
@@ -0,0 +1,441 @@
|
|
|
+<template>
|
|
|
+ <div class="back-line-main">
|
|
|
+ <!-- <div class="team-manage">
|
|
|
+ <h2>团队管理</h2>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4" v-for="(item, index) in teamList" :key="index">
|
|
|
+ <div :class="teamTab == index ? 'on' : ''" @click="teamTab = index">
|
|
|
+ <p>团队级别：{{ item.teamlevel }}</p>
|
|
|
+ <p>团队人数：{{ item.teamnum || 0 }}</p>
|
|
|
+ <p>签单保费：{{ item.sumpremium || 0 }}</p>
|
|
|
+ <p>出单人力：{{ item.usernum || 0 }}</p>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div> -->
|
|
|
+ <div class="back-line-hearder">
|
|
|
+ <div class="title">
|
|
|
+ <h2>成员详情</h2>
|
|
|
+ <div>
|
|
|
+ 月份筛选
|
|
|
+ <a-month-picker placeholder="请选择月份" @change="monthChange" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <a-form layout="inline" :model="formState" @finish="handleFinish">
|
|
|
+ <a-form-item label="姓名" :labelCol="{ span: 5 }" :colon="false">
|
|
|
+ <a-input
|
|
|
+ v-model="formState.name"
|
|
|
+ placeholder="请输入姓名"
|
|
|
+ allowClear
|
|
|
+ ></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="工号" :labelCol="{ span: 5 }" :colon="false">
|
|
|
+ <a-input
|
|
|
+ v-model="formState.userCode"
|
|
|
+ placeholder="请输入工号"
|
|
|
+ allowClear
|
|
|
+ ></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="手机号" :labelCol="{ span: 5 }" :colon="false">
|
|
|
+ <a-input
|
|
|
+ v-model="formState.phoneNumber"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ allowClear
|
|
|
+ ></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <!-- <a-form-item label="筛选时间" :labelCol="{ span: 5 }" :colon="false">
|
|
|
+ <a-input></a-input>
|
|
|
+ </a-form-item> -->
|
|
|
+ <a-form-item
|
|
|
+ label=" "
|
|
|
+ :labelCol="{ span: 5 }"
|
|
|
+ :colon="false"
|
|
|
+ class="form-item-search"
|
|
|
+ >
|
|
|
+ <a-button type="primary" @click="getList()">查询</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ <div class="personnel-message">
|
|
|
+ <div v-for="item in userList" :key="item.deptId">
|
|
|
+ <p>团队成员：{{ item.name }}</p>
|
|
|
+ <p>报价笔数：{{ item.orderNumber || 0 }}</p>
|
|
|
+ <p>
|
|
|
+ <span>核保笔数：{{ item.underwritingCount || 0 }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>出单数：{{ item.qutationInsureCount || 0 }}</span>
|
|
|
+ <span>签单保费：{{ item.totalPremium || 0 }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>已认证：1864613</span>
|
|
|
+ <span>未认证：1864613</span>
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <img :src="process + item.filePath" alt="" />
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ <a-button type="primary" @click="openDrawer(item)">详情</a-button>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">
|
|
|
+ <a-pagination
|
|
|
+ v-model="current"
|
|
|
+ :total="pageInfo.total"
|
|
|
+ show-less-items
|
|
|
+ show-size-changer
|
|
|
+ show-quick-jumper
|
|
|
+ @change="pageChange"
|
|
|
+ :page-size.sync="pageInfo.pageSize"
|
|
|
+ :pageSizeOptions="['12', '24', '36', '48']"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <a-drawer
|
|
|
+ :width="500"
|
|
|
+ :placement="placement"
|
|
|
+ :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>
|
|
|
+ </template>
|
|
|
+ <h3>个人信息</h3>
|
|
|
+ <ul class="list">
|
|
|
+ <li>
|
|
|
+ <span>姓名</span>
|
|
|
+ <span>{{ userData.name }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>会员号</span> <span>{{ userData.userId }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>手机号</span> <span>{{ userData.userPhone }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>注册时间</span> <span>{{ userData.userDate }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>是否达标</span> <span>{{ userData.isCompliance }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>签单保费</span> <span>{{ userData.totalPremium }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>出单人力</span> <span>{{ userData.orderManpower }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>签单保费达标差距</span>
|
|
|
+ <span>{{ userData.premiumCompliance }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>出单人力达标差距</span>
|
|
|
+ <span>{{ userData.orderManpowerCompliance }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </a-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formState: {
|
|
|
+ phoneNumber: "",
|
|
|
+ name: "",
|
|
|
+ userCode: "",
|
|
|
+ },
|
|
|
+ current: 1,
|
|
|
+ teamTab: 0,
|
|
|
+ visible: false,
|
|
|
+ placement: "right",
|
|
|
+ userData: {},
|
|
|
+ headerStyle: {
|
|
|
+ display: "flex",
|
|
|
+ "align-items": "center",
|
|
|
+ "justify-content": "space-between",
|
|
|
+ },
|
|
|
+ process: process.env.VUE_APP_API_BASE_URL,
|
|
|
+ userList: [],
|
|
|
+ pageInfo: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 12,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ teamList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // $route(val) {
|
|
|
+ // // console.log(val);
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleFinish() {
|
|
|
+ //
|
|
|
+ },
|
|
|
+ openDrawer(item) {
|
|
|
+ // item
|
|
|
+ this.visible = true;
|
|
|
+ console.log(item);
|
|
|
+ this.$API.personnel
|
|
|
+ .getTeamUserDetails({
|
|
|
+ userId: item.userId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.userData = { ...res.data.data };
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // console.log(this.visible)
|
|
|
+ },
|
|
|
+ monthChange() {},
|
|
|
+ onClose() {
|
|
|
+ //
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ pageChange(page, pageSize) {
|
|
|
+ // console.log(page, pageSize);
|
|
|
+ this.pageInfo.pageNum = page;
|
|
|
+ this.pageInfo.pageSize = pageSize;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.$API.personnel
|
|
|
+ .getChannelDetails({
|
|
|
+ userId: this.$route.query.userId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.teamList = [...res.data.data.hzList];
|
|
|
+ // this.teamList.unshift({
|
|
|
+ // totalManpower: this.$route.query.totalManpower,
|
|
|
+ // totalPremium: this.$route.query.totalPremium,
|
|
|
+ // orderManpower: this.$route.query.orderManpower,
|
|
|
+ // teamLevel: "汇总",
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$API.personnel
|
|
|
+ .getTeamUserList({
|
|
|
+ userId: this.$route.query.userId,
|
|
|
+ pageNum: this.pageInfo.pageNum,
|
|
|
+ pageSize: this.pageInfo.pageSize,
|
|
|
+ ...this.formState,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.userList = [...res.data.data.records];
|
|
|
+ this.pageInfo.total = res.data.data.total;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+ <style lang='less' scoped>
|
|
|
+.back-line-main {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ .team-manage {
|
|
|
+ width: 100%;
|
|
|
+ height: 232px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ > .ant-row {
|
|
|
+ height: 162px;
|
|
|
+ > div {
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 15px;
|
|
|
+ > div {
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #d7dbe7;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ > div:hover {
|
|
|
+ background: rgba(238, 121, 47, 0.05);
|
|
|
+ // opacity: 0.1;
|
|
|
+ }
|
|
|
+ > div.on {
|
|
|
+ background: rgba(238, 121, 47, 0.05);
|
|
|
+ }
|
|
|
+ > div.on::before {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 6px;
|
|
|
+ left: 0;
|
|
|
+ top: -3px;
|
|
|
+ // margin-top: -15px; /* 调整这个值来改变边框的粗细 */
|
|
|
+ border-top: 6px solid #ee792f; /* 设置边框的粗细和颜色 */
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-line-hearder {
|
|
|
+ flex: 1;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ h1 {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ h2 {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ height: auto;
|
|
|
+ background: #fff;
|
|
|
+ .ant-form {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ > .ant-form-item {
|
|
|
+ flex: 1;
|
|
|
+ // width: 20%;
|
|
|
+ /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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personnel-message {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // justify-content: space-evenly;
|
|
|
+ margin-top: 10px;
|
|
|
+ > div {
|
|
|
+ width: 23%;
|
|
|
+ height: auto;
|
|
|
+ background: #f9faff;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #2a55e5;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 2%;
|
|
|
+ p {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ p:last-child {
|
|
|
+ margin: 0;
|
|
|
+ justify-content: flex-end;
|
|
|
+ // text-align: right;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ right: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // margin-right: 2%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.ant-drawer-title {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+/deep/.custom-title {
|
|
|
+ display: flex;
|
|
|
+ > i {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.ant-drawer-body {
|
|
|
+ h3 {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ background: #fafafa;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56px;
|
|
|
+ }
|
|
|
+ /deep/ .ant-list-item {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .ant-list-split .ant-list-items .ant-list-item:last-child {
|
|
|
+ border-bottom: 1px solid #f0f0f0 !important;
|
|
|
+ }
|
|
|
+ .list-label {
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list {
|
|
|
+ width: 100%;
|
|
|
+ > li {
|
|
|
+ height: 56px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ > span:first-child {
|
|
|
+ display: flex;
|
|
|
+ width: 200px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
刘恒