tenant-Platform/src/views/representative/salesman.vue

<template>
  <div class="institution">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="'待审核'+'('+countObj?.noAuditCount +')'" name="hold">
        <div class="institution-main">
          <el-form label-position="left" label-width="auto">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="成员信息">
                  <el-input
                    v-model="formAccessibility.firstName"
                    placeholder="输入成员信息查找"
                    :prefix-icon="Search"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="归属机构">
                  <el-select
                    v-model="form.leaderId"
                    placeholder="归属机构"
                    clearable
                  >
                    <el-option
                      v-for="item in memberList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="">
                  <el-button type="primary">查询</el-button>
                  <el-button type="primary" plain @click="reset"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <Table
            :tableData="tableData"
            :columns="columns"
            :showIndex="false"
            :showSelect="true"
            :pageInfo="pageInfo"
            @getList="getList"
            :treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
            @select-all-change="selectAllChange"
            @select-change="selectChange"
          >
            <template v-slot:table-title-btn>
              <div>
                <!-- <el-button type="primary" @click="add(ruleFormRef)">
              <el-icon><Plus /></el-icon>添加机构</el-button
            > -->
                <el-dropdown placement="bottom-start">
                  <el-button>
                    批量操作<el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>审核</el-dropdown-item>
                      <!-- <el-dropdown-item v-on:click="manySetDeptUser()">设置负责人</el-dropdown-item> -->
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
            <template v-slot:operation="scope">
              <el-button
                type="primary"
                link
                @click="toExamine(scope.operationData.row, 'success')"
              >
                审核通过
              </el-button>
              <el-button
                type="primary"
                link
                @click="toExamine(scope.operationData.row, 'error')"
              >
                审核不通过
              </el-button>
              <el-button
                type="primary"
                link
                @click="editor(scope.operationData.row)"
              >
                详情
              </el-button>
            </template>
            <template v-slot:search="scope">
              {{ scope.slotData.label }}
            </template>
          </Table>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="'审核不通过'+'('+countObj?.failAuditCount +')'" name="pass">
        <div class="institution-main">
          <el-form label-position="left" label-width="auto">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="成员信息">
                  <el-input
                    v-model="formAccessibility.firstName"
                    placeholder="输入成员信息查找"
                    :prefix-icon="Search"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="归属机构">
                  <el-select
                    v-model="form.leaderId"
                    placeholder="归属机构"
                    clearable
                  >
                    <el-option
                      v-for="item in memberList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="">
                  <el-button type="primary">查询</el-button>
                  <el-button type="primary" plain @click="reset"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <Table
            :tableData="tableData"
            :columns="columns"
            :showIndex="false"
            :showSelect="true"
            :pageInfo="pageInfo"
            @getList="getList"
            :treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
            @select-all-change="selectAllChange"
            @select-change="selectChange"
          >
            <template v-slot:table-title-btn>
              <div>
                <!-- <el-button type="primary" @click="add(ruleFormRef)">
              <el-icon><Plus /></el-icon>添加机构</el-button
            > -->
                <el-dropdown placement="bottom-start">
                  <el-button>
                    批量操作<el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>审核</el-dropdown-item>
                      <!-- <el-dropdown-item v-on:click="manySetDeptUser()">设置负责人</el-dropdown-item> -->
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
            <template v-slot:operation="scope">
              <el-button
                type="primary"
                link
                @click="editor(scope.operationData.row)"
              >
                详情
              </el-button>
            </template>
            <template v-slot:search="scope">
              {{ scope.slotData.label }}
            </template>
          </Table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog v-model="dialogVisible" title="审核不通过" width="500" draggable>
      <el-input
        type="textarea"
        placeholder="请输入审核不通过原因"
        v-model="textValue"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="confirm()"> 保 存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import type {
  ComponentSize,
  FormInstance,
  FormRules,
  TabsPaneContext,
} from "element-plus";
import { Plus, Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import type Node from "element-plus/es/components/tree/src/model/node";
// import universalTable from "../"
import { ElMessage, ElMessageBox, ElPopconfirm, ElTree } from "element-plus";
import api from "@/api";
import { h } from "vue";
import setDept from "@/components/DialogSetDeptLeader/index.vue";
interface Tree {
  [key: string]: any;
}

const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
const activeName = ref("hold");
const defaultProps = {
  children: "children",
  label: "label",
};

//批量设置负责人

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

const formAccessibility = reactive({
  fullName: "",
  firstName: "",
  lastName: "",
  phone: "",
});
const ruleFormRef = ref<FormInstance>();
let form = reactive({
  name: "", //机构名称
  parentId: "", //上级机构id
  comType: "", //机构类型
  exhibitionScope: "", //展业范围
  address: "", //地址
  leaderId: "", //负责人id
  area: [], //地区
});

interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
  show: boolean;
}

const dialogVisible = ref(false);

// import Select from "@/components/select/selectMain.vue";
// import TestTable from "@/components/Table/index.vue";
//业务员列表
type tableType = {
  id: string;
  name: string;
};
const tableData = ref<tableType[]>([]);
const typeformatter = (row: any, column: any, cellValue: any) => {
  let comType = "";
  comTypeList.value.map((ele) => {
    if (ele.value == row.comType) {
      comType = ele.label;
    }
  });

  return () => h("div", {}, comType);
};
const columns = [
  { prop: "name", label: "姓名" },
  { prop: "mobile", label: "手机号" },
  // { prop: "id", label: "工号" },
  { prop: "deptName", label: "归属机构" },
  {
    prop: "username",
    label: "角色",
  },
  { prop: "createTime", label: "创建时间" },
  { prop: "createBy", label: "创建人" },
];

const pageInfo = {
  pageNum: 1,
  pageSize: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
  show: true,
};
//分页列表功能
const getList = (item: PageInfo) => {
  pageInfo.pageNum = item.pageNum;
  pageInfo.pageSize = item.pageSize;
  salesmanAuth();
};

const checkTableIdList = ref([]);
//表格选择事件
function selectAllChange(list: any) {
  checkTableIdList.value = list;
}

function selectChange(list: any) {
  checkTableIdList.value = list;
}
//审核
const userInfoId = ref("");
const toExamine = (item: any, type: string) => {
  if (type == "success") {
    ElMessageBox.confirm(`确定审核通过${item.name}账号吗?`, "审核通过", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      center: true,
    })
      .then(() => {
        api.representativeApi
          .salesmanAuthSuccess({
            userInfoId: item.id,
          })
          .then((res: any) => {
            if (res.code == 200) {
              ElMessage.success("操作成功");
              salesmanAuth(); //业务员列表
            } else {
              ElMessage.error(res.msg);
              // salesmanAuth(); //业务员列表
            }
          });
      })
      .catch(() => {
        ElMessage.warning("用户取消操作");
      });
  } else {
    dialogVisible.value = true;
    userInfoId.value = item.id;
    // ElMessageBox.confirm(`<textarea placeholder='请输入审核不通过原因' oninput='handleText()' style="width:300px"></textarea>`, "审核不通过", {
    //   confirmButtonText: "确认",
    //   cancelButtonText: "取消",
    //   dangerouslyUseHTMLString: true ,
    //   type: "warning",
    //   center: true,

    // })
    //   .then(() => {
    //     api.representativeApi.salesmanAuthFailed({}).then((res: any) => {
    //       if (res.code == 200) {
    //         ElMessage.success("操作成功");
    //         salesmanAuth(); //业务员列表
    //       } else {
    //         ElMessage.error(res.msg);
    //         // salesmanAuth(); //业务员列表
    //       }
    //     });
    //   })
    //   .catch(() => {
    //     ElMessage.warning("用户取消操作");
    //   });
  }
};
function cancel() {
  ElMessage.warning("用户取消操作");
  dialogVisible.value = false;
}
const textValue = ref("");
//审核不通过
function confirm() {
  api.representativeApi
    .salesmanAuthFailed({
      userInfoId: userInfoId.value,
      approvalOpinion: textValue.value,
    })
    .then((res: any) => {
      if (res.code == 200) {
        ElMessage.success("操作成功");
        salesmanAuth(); //业务员列表
        dialogVisible.value = false;
      }
    });
}

interface institutionData {
  typeAttr: string;
  deptId: string;
  status: number;
}
const info = ref<institutionData>({
  typeAttr: "1",
  deptId: "",
  status: 4,
});

const router = useRouter();

//详情
const editor = (item: any) => {
  console.log(item);
  router.push({
    path: "/representative/salesman/salesmanMessage",
    query: {
      id: item.userId,
    },
  });
  // pageInfo.pageNum=item.pageNum
  // pageInfo.pageSize=item.pageSize
};

//获取机构类型字典值
type comType = {
  value: string;
  label: string;
};
let comTypeList = ref<comType[]>([]);

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab.props.name);
  if (tab.props.name == "pass") {
    info.value.status = 5;
    salesmanAuth();
  } else {
    info.value.status = 4;
    salesmanAuth();
  }
};

//获取成员员列表
const salesmanAuth = () => {
  api.representativeApi
    .getUserInfoList({
      ...info.value,
      pages: pageInfo.pageNum,
      size: pageInfo.pageSize,
    })
    .then((res) => {
      tableData.value = res.data.records;
      pageInfo.total = res.data.total;
    });
};

//成员列表
const countObj=ref({
  noAuditCount:'',
  failAuditCount:"",
})
const memberList = ref([]);
const getAllMemberList = () => {
  api.userApi.AllMemberList({}).then((res: any) => {
    if (res.code === 200) memberList.value = res.data;
  });
  api.representativeApi.getAuditCount({
    typeAttr:'1'
  }).then((res:any)=>{
    // console.log(res)
    if(res.code===200){
      countObj.value=res.data
    }
  })
  // pageInfo.pageSize=item.pageSize
};

const reset = (item: any) => {
  // ElMessage({})
};

onMounted(() => {
  // 对 asyncRoutes 进行预处理并转换为树形结构
  salesmanAuth(); //业务员列表
  // getAreaList(); //省市区级联数据
  // getSystemList(); //机构类型字典
  // getExhibitionScopeSystemList(); //展业范围字段
  getAllMemberList(); //成员列表
});
</script>
<style lang="scss" scoped>
:deep(.table-title-btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > div {
    display: flex;
  }
}
.institution {
  background: #fff;
  width: 100%;
  // height: 100%;
  // padding: 20px;
  box-sizing: border-box;
  display: flex;
  :deep(.demo-tabs) {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  // .institution-main {
  //   flex: 1;
  //   // width: 80%;
  //   padding: 20px;
  //   box-sizing: border-box;
  // }
}
:deep(.el-dropdown-link) {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  margin-left: 15px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
:deep(.el-message-box__container) {
  width: 100% !important;
  .el-message-box__message {
    width: 100% !important;
  }
}
</style>