clientManageSystem/src/views/userPrivilegeManagement/userManage/index.vue

<template>
    <div class="end_item">
        <div class="page_search">
            <div class="search_content">
                <div class="content_left">
                    <TabSearch tabType="box" :tabList="tabList" 
                        :defaultTabKey="searchParams.defaultUserType" 
                        @tabChange="HandleUserTypeChange"/>
                    <FormSearchGroup :searchList="formSearhList" 
                        @searchChange="HandleBlurSearch" />
                </div>
                <div class="content_right">
                    <el-button class="button_border" @click="OpenUserFormDialog()">新增用户</el-button>
                </div>
            </div>
        </div>

        <div class="page_jg_20" />
        <Table :tableColumns="tableColumns" :tableData="userTableData" 
            :currentPage = "currentPage" :pageSize = "pageSize" :totalNum = "totalNum">
            <template #num="{row,currentIndex}">
                {{ (currentPage - 1 ) * pageSize + currentIndex }}
            </template>

            <template #gender="{row}">
                {{ genderNumToName(row.gender) }}
            </template>
            <template #status="{row}">
                <TableRowStatus :statusMsg="accountStatusMsg" :useStatus="row.status" />
            </template>

            <!-- 公海跟进 -->
            <template #publicFollowStatus="{row}">
                <el-switch
                    :model-value="Boolean(row.publicFollowStatus)"
                    @change="(val)=>HandleCardSwitchOnOff({id:row.id,onOffVal:val,type:'public'})"
                    style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
                />
            </template>

            <!-- 历史跟进 -->
            <template #historyFollowStatus="{row}">
                <el-switch
                    :model-value="Boolean(row.historyFollowStatus)"
                    @change="(val)=>HandleCardSwitchOnOff({id:row.id,onOffVal:val,type:'history'})"
                    style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
                />
            </template>

            <template #operation="{row}">
                <div class="table_row_option">
                    <span class="option_button_editor" @click="OpenUserFormDialog(row)">编辑</span>
                    <span class="option_button_editor" @click="OpenresetPasswordFormDialog(row)">重置密码</span>
                    <span class="option_button_editor" @click="OpenForbiddenDialog(row,'forbidden')">{{row.status === 1 ? '禁用' :  '启用' }}</span>
                    <span class="el_button_delete" @click="OpenForbiddenDialog(row,'delete')">删除</span>
                </div>
            </template>
        </Table>
    </div>

    <!-- 新增/修改用户 弹窗 -->
    <FormDialog  
        class="user_form_dialog"
        width="482px"
        v-if="userFormDialogVisible"
        :formItemList="userFormItemList" 
        :defaultFormData="defaultUserFormData" 
        :title="userFormDialogTitle" 
        :submitLoading="userFormDialogSubmiting" 
        :visible="userFormDialogVisible"
        @close="CloseUserFormDialog"
        @confirm="HandleUserFormDialogConfirm">
    </FormDialog>

    <!-- 重置密码弹窗 -->
    <FormDialog  
        class="reset_password_form_dialog"
         width="500px"
        v-if="resetPasswordFormDialogVisible"
        :formItemList="resetPasswordFormItemList" :defaultFormData="defaultResetPasswordFormData" 
        title="重置密码" 
        :submitLoading="resetPasswordFormDialogSubmiting" 
        :visible="resetPasswordFormDialogVisible"
        @close="CloseResetPasswordFormDialog"
        @confirm="HandleresetPasswordFormDialogConfirm">
    </FormDialog>

    <!-- 禁用/删除 弹窗 -->
    <Dialog 
        :visible="forbiddenDialogVisible" 
        :submitLoading="forbiddenDialogLoading" 
        @close="HandleForbiddenDialogClose"
        @confirm="HandleForbiddenDialogConfirm">
        请确认是否{{currentOperationType == 'delete' ? '删除' : '禁用'}} 【{{currentEditRow?.username}}】 {{ currentEditRow?.account }}
    </Dialog>


</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
import {formSearhList} from './formSearch'
import Table from '@/baseComponents/Table.vue';
import {tableColumns} from './table'
import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
import TabSearch from '@/baseComponents/TabSearch.vue';
import {tabList} from './tabSearch'
import FormDialog from '@/baseComponents/FormDialog.vue';
import {userFormItemList, resetPasswordFormItemList} from './formDialog'
import Dialog from '@/baseComponents/Dialog.vue';


import {
    addUserApi,
    editUserApi,
    deleteUserApi,
    getUserListApi,
    openOrCloseUserAccountApi,
    resetUserPasswordApi,
    openOrCloseUserFollowStatusApi,
} from '@/api/userManage'

import {getPublicParameterConfigApi} from '@/api/parameterConfig'

import {genderNumToName, accountStatusMsg} from '@/components/dict'
import { ElMessage } from 'element-plus';

/**
 * 1. 表格 有关数据
 */
const currentPage = ref(1)
const pageSize = ref(20)
const totalNum = ref(0)
const userTableData = ref([])
const searchParams = ref({
    defaultUserType:1, // 默认展示的用户类型
    queryStr:"",
})

// 筛选不同的用户状态数据
const HandleUserTypeChange = (val)=>{
    searchParams.value.defaultUserType = val
    GetUserList()
}

// 筛选模糊查询数据
const HandleBlurSearch = (params,key)=>{
    searchParams.value = {
        ...searchParams.value,
        ...params,
    }
    GetUserList()
}

// 获取 启用/禁用 用户
const GetUserList = async()=>{
    let params = {
        queryStr: searchParams.value.queryStr,
        "status": searchParams.value.defaultUserType,
        pageNum: currentPage.value,
        pageSize: pageSize.value
    }
    let res = await getUserListApi(params)
    if(res?.code == 200){
        userTableData.value = res.data.records
        totalNum.value = res.data.total
    }
}

/**
 * 2. 新增用户弹窗相关数据
 */
const userFormDialogVisible = ref(false)
const userFormDialogSubmiting = ref(false)
const userFormDialogTitle = ref('')
const defaultUserFormData = ref({
    publicFollowStatus:true,
    historyFollowStatus:true,
    // holdTopCount:100,
    // dayBackTopCount:15,
    // backPublicDayCount:15,
})
// 打开新增/修改用户弹窗
const OpenUserFormDialog = async (row?:any)=>{
    if(row?.id){
        userFormDialogTitle.value = '修改用户'
        defaultUserFormData.value = {
            ...row,
            publicFollowStatus:Boolean(row.publicFollowStatus),
            historyFollowStatus:Boolean(row.historyFollowStatus)
        }
        console.log('当前赋值的form表单值',defaultUserFormData.value)
    }else{
        // 调用公海参数配置
        let res = await getPublicParameterConfigApi()
        if(res?.code == 200){
            const {holdTopCount,dayBackTopCount,backPublicDayCount} = res.data
            defaultUserFormData.value = {
                ...defaultUserFormData.value,
                holdTopCount,
                dayBackTopCount,
                backPublicDayCount,
            }
        }
        userFormDialogTitle.value = '新增用户'
    }
    userFormDialogVisible.value = true
}
// 关闭新增/修改用户弹窗
const CloseUserFormDialog = ()=>{
    userFormDialogVisible.value = false
    userFormDialogSubmiting.value = false
    defaultUserFormData.value = {
        publicFollowStatus:true,
        historyFollowStatus:true,
    }
}
// 保存新增/修改用户弹窗
const HandleUserFormDialogConfirm = async (params)=>{
    userFormDialogSubmiting.value = true

    const { formData,formRef } = params
    let transferParams = {
        ...formData,
        publicFollowStatus:formData.publicFollowStatus ? 1 : 0,
        historyFollowStatus:formData.historyFollowStatus ? 1 : 0,
    }
    let res = undefined
    try{
        if(formData.id){
            // 修改
            res = await editUserApi(formData.id,transferParams)
        }else{
            // 新增
            res = await addUserApi(transferParams)
        }
    }catch{}
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        CloseUserFormDialog()
        GetUserList()
    }else{
        userFormDialogSubmiting.value = false
    }
}

/**
 * 3. 重置密码弹窗相关数据
 */
const resetPasswordFormDialogVisible = ref(false)
const resetPasswordFormDialogSubmiting = ref(false)
const defaultResetPasswordFormData = ref({})
// 打开 重置密码弹窗
const OpenresetPasswordFormDialog = (row?:any)=>{
    defaultResetPasswordFormData.value = {...row}
    resetPasswordFormDialogVisible.value = true
}
// 关闭 重置密码弹窗
const CloseResetPasswordFormDialog = ()=>{
    resetPasswordFormDialogVisible.value = false
    resetPasswordFormDialogSubmiting.value = false
    defaultResetPasswordFormData.value = {}
}
// 保存 重置密码弹窗
const HandleresetPasswordFormDialogConfirm = async (params)=>{
    resetPasswordFormDialogSubmiting.value = true
    const { formData,formRef } = params
    let transferParams = {
        newPassword: formData.newPassword,
        userId: formData.id
    }
    let res = await resetUserPasswordApi(transferParams)
    if(res?.code == 200){
        ElMessage.success(res.msg)
        CloseResetPasswordFormDialog()
        GetUserList()
    }else{
        resetPasswordFormDialogSubmiting.value = false
    }
}

/**
 * 4. 禁用/删除 弹窗有关数据
 */
const forbiddenDialogVisible = ref(false)
const forbiddenDialogLoading = ref(false)
const currentEditRow = ref()
const currentOperationType = ref('')  //  删除：delete | 禁用/启用 forbidden
// 打开弹窗
// type: delete | forbidden
const OpenForbiddenDialog = (row,type)=>{
    currentOperationType.value = type
    currentEditRow.value = row
    forbiddenDialogVisible.value = true
}
// 关闭弹窗
const HandleForbiddenDialogClose = ()=>{
    currentEditRow.value = undefined
    forbiddenDialogVisible.value = false
    forbiddenDialogLoading.value = false
}
// 弹窗确认
const HandleForbiddenDialogConfirm = async ()=>{
    forbiddenDialogLoading.value = true
    let res = undefined
    try{
        if(currentOperationType.value == 'delete'){
            // 删除接口调用
            res = await deleteUserApi(currentEditRow.value.id)
        }else{
            // 禁用接口调用
            res = await openOrCloseUserAccountApi(currentEditRow.value.id)
        }
    }catch{}
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        HandleForbiddenDialogClose()
        GetUserList()
    }else{
        forbiddenDialogLoading.value = false
    }
}

/**
 * 5. 公海跟进 / 历史跟进 操作控制
 */
const HandleCardSwitchOnOff = async (params)=>{
    const { id, onOffVal, type } = params
    let res = undefined
    if(type == 'public'){
       res = await openOrCloseUserFollowStatusApi(id,'publicFollow')
    }else if(type == 'history'){
       res = await openOrCloseUserFollowStatusApi(id,'historyFollow')
    }
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        GetUserList()
    }
}


/**
 * 获取用户信息
 */
onMounted(()=>{
    GetUserList()
})


</script>


<style lang="scss" scoped>

.search_content{
    :deep(.box_tab){
        gap:10px;
        .selected + span{
            border-left: 1px solid  #dcdfe6;
        }
        >span:nth-child(n):not(:last-child):not(.selected){
            border-right: 1px solid  #dcdfe6;
        }
        > span{
            border-radius: 4px !important ;
        }
    }
}

.user_form_dialog{
     :deep(.el-dialog__body){
        min-height: 520px !important;
        max-height: 520px !important;
    }
}

.reset_password_form_dialog{
     :deep(.el-dialog__body){
        min-height: 210px !important;
        max-height: 210px !important;
    }
}


</style>