tenant-Platform/src/views/partnerManagement/partner.vue

<!-- 模板区域 -->
<template>
  <div class="flex overflow-hidden">
    <!-- 右侧 -->
    <PageMain class="vh100 flex-1 overflow-hidden flex flex-col">
      <SearchForm :fields="fields" :formInline="formInline" :onSearch="findpage" :onReset="resetForm">
      </SearchForm>
      <div class="flex-1 overflow-auto">
        <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="250"
          :showSelect="false" :pageInfo="pageInfo" @getList="getList">
          <template v-slot:table-title-btn>
            <el-button type="primary" @click="addPartner">
              添加合伙人
              <template #icon>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </el-button>
          </template>
          <template v-slot:operation="scope">
            <el-button type="primary" link @click="detailPartner(scope.operationData)">详情</el-button>
            <el-dropdown placement="bottom-start" trigger="click">
              <span class="el-dropdown-link">
                更 多
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="editPartner(scope.operationData)">编辑</el-dropdown-item>
                  <el-dropdown-item @click="enablePartner(scope.operationData)">{{ scope.operationData.partStatus ? '禁用'
                    : '启用' }}</el-dropdown-item>
                  <el-dropdown-item @click="queryPartnerRelation(scope.operationData)">关系查询</el-dropdown-item>
                  <el-dropdown-item @click="addNewGrade(scope.operationData)">添加新等级</el-dropdown-item>
                  <el-dropdown-item @click="assignDayJudge(scope.operationData)">添加为业务员</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-slot:search="scope">
            {{ scope.slotData.label }}
          </template>
        </ComplexTable>
      </div>
    </PageMain>
    <el-dialog v-model="addPartnerShow" title="添加合伙人" width="1000">
      <addOperation ref="addOperationRef" @closeDialog="closeAddOperation"></addOperation>
    </el-dialog>
    <el-dialog v-model="addNewGradeShow" title="添加合伙人等级" width="1000">
      <el-checkbox-group v-model="checkList">
        <el-checkbox :disabled="item.grade <= gradeList[gradeList.length - 1]" :label="item.gradeName"
          :value="item.grade" v-for="item in userGradeList" :key="item.grade" />
      </el-checkbox-group>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addNewGradeShow = false">取消</el-button>
          <el-button type="primary" @click="addNewGradeSave">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="PartnerRelationShow" title="关系查询" width="1000">
      <el-table :data="relationQuery" style="width: 100%">
        <el-table-column prop="type" label="级别" width="100" align="center">
          <template #default="scope">
            {{ scope.row.type == 1 ? '一级' : scope.row.type == 2 ? '二级' : scope.row.type == 3 ? '三级' : scope.row.type ==
              4 ? '四级' : scope.row.type == 5 ? '五级' : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="工号" width="180" align="center" />
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="suggestName" label="推荐人" align="center" />
        <el-table-column prop="deptName" label="部门" width="250" align="center" />
        <el-table-column prop="mobile" label="电话" align="center" />
      </el-table>
    </el-dialog>

  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { ref, reactive, onBeforeMount } from 'vue'
import addOperation from './modules/addPartner.vue'
import api from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus';
import router from '@/router';
// 页面加载时获取机构列表
onBeforeMount(() => {
  getInstitutionList();
  getGradeOptions();
  findpage();
});
interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
}
// 机构树相关变量
const addOperationRef = ref();//添加合伙人弹窗实例
const userId = ref('');//用户id
const addPartnerShow = ref(false);//添加合伙人弹窗显示状态
const addNewGradeShow = ref(false);//添加新等级弹窗显示状态
const PartnerRelationShow = ref(false);//关系查询弹窗显示状态
const checkList = ref([]);//选中的等级列表
const userGradeList = ref();//用户等级列表
const gradeList = ref([]);//等级列表
const relationQuery = ref([]);//关系查询数据
const deptTreeData = ref<any[]>([]);//机构树数据
const tableData = ref([]);//表格数据
const formInline = reactive({
  name: '',//姓名
  mobile: "",//手机号
  userId: '',//工号
  grade: '',//合伙人等级
  inviter: "",//邀请人
  deptId: '',//机构id
  typeAttr: '',
})
const pageInfo = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
});

const typeAttrOptions = ref([

  {
    label: '个代',
    value: '6'
  },
  {
    label: '合伙人',
    value: '3'
  }
])
const statusOptions = ref([
  {
    label: '待入职',
    value: '0'
  },
  {
    label: '入职待审核',
    value: '1'
  },
  {
    label: '审核不通过',
    value: '2'
  },
  {
    label: '已入职',
    value: '3'
  }

])
const parentIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
//表格字段数据
const fields = ref([
  { label: "合伙人", model: "name", type: "input", placeholder: "输入姓名手机号查找" },
  {
    label: "归属机构", model: "deptId", type: "cascader", options: deptTreeData, props: parentIdprops, onChange: (value: any) => {
      formInline.deptId = value[value.length - 1];
    }
  },
  {
    label: "类型", model: "typeAttr", type: "select", placeholder: "请选择类型", options: typeAttrOptions,
  },
  {
    label: "等级", model: "grade", type: "select", placeholder: "选择等级", options: userGradeList, props: {
      label: 'gradeName',
      value: 'grade',
    },
  },
  {
    label: "人员状态", model: "status", type: "select", placeholder: "请选择人员状态", options: statusOptions

  },
  {
    label: "账号状态", model: "isEnable", type: "select", placeholder: "请选择账号状态", options: [
      {
        label: '启用',
        value: '0'
      },
      {
        label: '禁用',
        value: '1'
      },
    ],
  },
  {
    label: "推荐人", model: "referrerName", type: "input", placeholder: "输入姓名手机号"
  },
]);
const columns = [
  { prop: "name", label: "姓名", width: '200' },
  { prop: "mobile", label: "手机号", width: '200' },
  {
    prop: "typeAttr", label: "类型", width: '200',
    formatter: (row: any) => {
      const map: any = {
        '6': '个代',
        '7': '渠道',
        '5': '团队',
        '8': '电销组',
        '3': '合伙人',
      }
      return row.typeAttr?.split(',')
        .map((typeId: any) => map[typeId] || typeId)
        .join(',') || '未知'
    }
  },
  {
    prop: "grade", label: "等级", width: '200',
    formatter: (row: any) => {
      return row.grade
        .split(',')
        .map((gradeId: any) => userGradeList.value.find((item: any) => item.grade == gradeId)?.gradeName || gradeId)
        .join(',') || '未知';
    }
  },
  {
    prop: "deptName", label: "所属机构", width: '200'
  },
  { prop: "premium", label: "累计保费", width: '200' },
  { prop: "kickback", label: "累计佣金", width: '200' },
  { prop: "createTime", label: "创建时间", width: '200' },
  {
    prop: "status", label: "人员状态", width: '200',
    formatter: (row: any) => {
      return statusOptions.value.find((item: any) => item.value == row.status)?.label || row.status;
    }
  },
  {
    prop: "partStatus", label: "账号状态", width: '200',
    formatter: (row: any) => {
      return row.partStatus ? '启用' : '禁用';
    }
  },
  {
    prop: "leaderIdName", label: "管理人", width: '200',
  },
  {
    prop: "referrerName", label: "推荐人", width: '200',
  },
];
// 添加合伙人
const addPartner = () => {
  console.log('添加合伙人');
  addPartnerShow.value = true;
}
// 详情合伙人
const detailPartner = (item: any) => {
  router.push({
    path: '/PartnerManagement/partnerDetail',
    query: {
      userId: item.userId,
    }
  })
}
// 编辑合伙人
const editPartner = (item: any) => {
  console.log('编辑合伙人:', item);
  addPartnerShow.value = true
  nextTick(() => {
    addOperationRef.value.initEditData(item.userId)
  })
}

const enablePartner = (item: any) => {
  console.log('启用合伙人:', item);

  if (item.partStatus) {
    ElMessageBox.confirm(
      '确定要禁用该合伙人账号吗？',
      '禁用',
      {
        confirmButtonText: '确定禁用',
        type: 'warning',
        center: true,
        confirmButtonClass: 'el-button--primary',
      }
    )
      .then(() => {
        api.partnerApi.enableDisable(item.userId, '0').then((res: any) => {
          if (res.code == '200') {
            ElMessage({
              type: 'success',
              message: res.msg,
              plain: true,
            })
            findpage();
          } else {
            ElMessage.error(res.msg || '禁用失败');
          }
        })
      })
      .catch(() => {
      })
  } else {
    api.partnerApi.enableDisable(item.userId, '1').then((res: any) => {
      if (res.code == '200') {
        ElMessage({
          type: 'success',
          message: res.msg,
          plain: true,
        })
        findpage();
      } else {
        ElMessage.error(res.msg || '启用失败');
      }
    })
  }
}

// 关系查询
const queryPartnerRelation = (item: any) => {
  api.partnerApi.relationalQuery(item.userId).then((res: any) => {
    if (res.code == '200') {
      relationQuery.value = res.data;
      PartnerRelationShow.value = true;
    } else {
      ElMessage.error(res.msg || '关系查询失败');
    }
  })
}
// 添加新等级
const addNewGrade = (item: any) => {
  userId.value = item.userId;
  api.partnerApi.queryGrade(item.userId).then((res: any) => {
    if (res.code == '200') {
      gradeList.value = res.data;
      addNewGradeShow.value = true;
    } else {
      ElMessage.error(res.msg);
    }
  })
}
// 添加新等级保存
const addNewGradeSave = () => {
  api.partnerApi.addNewGrade({
    userId: userId.value,
    gradeList: checkList.value
  }).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      checkList.value = []
      addNewGradeShow.value = false;
      findpage();
    }
  })
}
// 添加业务员
const assignDayJudge = (item: any) => {
  console.log('添加业务员:', item.userId);
  api.partnerApi.partnerAddsSalesperson(item.userId).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      findpage();
    } else {
    }
  })
}
//分页事件
function getList(item: PageInfo) {
  pageInfo.value.pageNum = item.pageNum;
  pageInfo.value.pageSize = item.pageSize;
  findpage();

};
const resetForm = () => {
  Object.assign(formInline, {
    name: '',//姓名
    mobile: "",//手机号
    userId: '',//工号
    grade: '',//合伙人等级
    inviter: "",//邀请人
    deptId: '',//机构id
    typeAttr: '',
  })
  findpage();
}
//数据查询
function findpage() {
  let query = { ...formInline }
  api.partnerApi.partnerQueryPage({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...query }).then((res: any) => {
    if (res.code == '200') {
      tableData.value = res.data.records;
      pageInfo.value.pageNum = res.data.current;
      pageInfo.value.pageSize = res.data.size;
      pageInfo.value.total = res.data.total;
    } else {
    }
  });
}

// 获取机构列表
const getInstitutionList = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code === 200) {
      deptTreeData.value = res.data;
    }
  });
};
// 获取人员等级列表
const getGradeOptions = () => {
  api.partnerApi.queryGradeName().then((res: any) => {
    if (res.code === 200) {
      userGradeList.value = res.data;
      console.log(userGradeList.value);
    }
  })
}

const closeAddOperation = (text: string) => {
  if (text == '确定') {
    findpage();
  }
  addPartnerShow.value = false
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

:deep(.el-dropdown-link) {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  margin-left: 15px;
}
</style>