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

<template>
  <PageMain class="vh100">
    <el-tabs v-model="activeName" class="h-full" @tab-click="handleClick">
      <el-tab-pane :label="'待审核' + '(' + countObj?.noAuditCount + ')'" name="hold" class="h-full">
        <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-cascader clearable style="width: 100%" v-model="info.deptId" :options="institutionList"
                  :props="tableProps" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select clearable style="width: 100%" v-model="info.status">
                  <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>

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

        <Table height="calc(100% - 56px)" :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>
      </el-tab-pane>
      <el-tab-pane :label="'审核不通过' + '(' + countObj?.failAuditCount + ')'" name="pass" class="h-full">
        <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-cascader clearable style="width: 100%" v-model="info.deptId" :options="institutionList"
                  :props="tableProps" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select clearable style="width: 100%" v-model="info.status">
                  <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>

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

        <Table height="calc(100% - 56px)" :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>
      </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 class="border-[#0083FF] color-[#0083FF]" plain @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="confirm()"> 保 存 </el-button>
        </div>
      </template>
    </el-dialog>
  </PageMain>
</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: "",
});


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 tableProps = ref({
  value: "id",
  label: "name",
  children: "children",
  checkStrictly: true,
});

const columns = [
  { prop: "name", label: "姓名" },
  { prop: "mobile", label: "手机号" },
  // { prop: "id", label: "工号" },
  { prop: "deptName", label: "归属机构" },
  {
    prop: "username",
    label: "角色",
  },
  {
    prop: "status", label: "状态",
    formatter: (row: any) => {
      return () => h("div", {}, row.status == '4' ? "入司审核" : row.status == '7' ? "离职审核" : '');
    }
  },
  { 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: string;
}
const info = ref<institutionData>({
  typeAttr: "2",
  deptId: "",
  status: '0',
});

const router = useRouter();

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

//获取机构类型字典值
type comType = {
  value: string;
  label: string;
};


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 institutionList = ref([]);
const getAllMemberList = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code === 200) institutionList.value = res.data;
  });
  api.representativeApi.getAuditCount({
    typeAttr: '2'
  }).then((res: any) => {
    // console.log(res)
    if (res.code === 200) {
      countObj.value = res.data
    }
  })
  // pageInfo.pageSize=item.pageSize
};

let statusList = ref([
  {
    value: '0',
    label: '全部'
  },
  {
    value: '4',
    label: '入司审核'
  },
  {
    value: '7',
    label: '离职审核'
  },
])

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;
  }
}

: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>