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="defaultUserType" />
                    <FormSearchGroup :searchList="formSearhList"></FormSearchGroup>
                </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" 
            :pageNum = "pageNum" :pageSize = "pageSize" :totalNum = "totalNum">
            <template #num="{row,currentIndex}">
                {{ (pageNum - 1 ) * pageSize + currentIndex }}
            </template>

            <template #gender="{row}">
                {{row.gender === '0' ? '女' : '男'  }}
            </template>
            <template #status="{row}">
                <TableRowStatus :statusMsg="statusMsg" :useStatus="row.status" />
            </template>

            <template #publicSeaFollowRecord="{row}">
                <el-switch
                    :model-value="Boolean(row.publicSeaFollowRecord)"
                    @change="(val)=>HandleCardSwitchOnOff({id:row.id,onOffVal:val})"
                    style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
                />
            </template>

            <template #historyFollowRecord="{row}">
                <el-switch
                    :model-value="Boolean(row.historyFollowRecord)"
                    @change="(val)=>HandleCardSwitchOnOff({id:row.id,onOffVal:val})"
                    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')">禁用</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?.name}}】 {{ currentEditRow?.account }}
    </Dialog>


</template>


<script setup lang="ts">
import { 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';

/**
 * 1. 表格 有关数据
 */
const pageNum = ref(1)
const pageSize = ref(20)
const totalNum = ref(0)

const userTableData = ref([
    {
        id:'1',
        account:'43434',
        name:'xx1',
        gender:'1',
        phone:'xxx',
        status:0,
        publicSeaFollowRecord:true,
        historyFollowRecord:false,

        customerHoldLimit:40,
        dailyManualReturnLimit:16,
        noFollowAutoReturnDays:10,
    },
    {
        id:'2',
        account:'545',
        name:'xx2',
        gender:'0',
        phone:'xxx',
        status:1,
        publicSeaFollowRecord:false,
        historyFollowRecord:true,

        customerHoldLimit:50,
        dailyManualReturnLimit:20,
        noFollowAutoReturnDays:30,
    },
])

const statusMsg = ref([
    {
        statusFlag:0,
        title:'禁用',
        themeClass: 'not_included_icon',
    },
    {
        statusFlag:1,
        title:'启用',
        themeClass: 'normal_icon',
    },
])
// 默认展示的用户类型
const defaultUserType = ref('onlinePeople')

/**
 * 2. 新增用户弹窗相关数据
 */
const userFormDialogVisible = ref(false)
const userFormDialogSubmiting = ref(false)
const userFormDialogTitle = ref('')
const defaultUserFormData = ref({
    publicSeaFollowRecord:true,
    historyFollowRecord:true,
    customerHoldLimit:100,
    dailyManualReturnLimit:15,
    noFollowAutoReturnDays:15,
})
// 打开新增/修改用户弹窗
const OpenUserFormDialog = (row?:any)=>{
    if(row?.id){
        userFormDialogTitle.value = '修改用户'
        defaultUserFormData.value = {...row}
        console.log('当前赋值的form表单值',defaultUserFormData.value)
    }else{
        userFormDialogTitle.value = '新增用户'
    }
    userFormDialogVisible.value = true
}
// 关闭新增/修改用户弹窗
const CloseUserFormDialog = ()=>{
    userFormDialogVisible.value = false
    defaultUserFormData.value = {
        publicSeaFollowRecord:true,
        historyFollowRecord:true,
        customerHoldLimit:100,
        dailyManualReturnLimit:15,
        noFollowAutoReturnDays:15,
    }
}
// 保存新增/修改用户弹窗
const HandleUserFormDialogConfirm = ()=>{
    CloseUserFormDialog()
}

/**
 * 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
    defaultResetPasswordFormData.value = {}
}
// 保存 重置密码弹窗
const HandleresetPasswordFormDialogConfirm = ()=>{
    CloseResetPasswordFormDialog()
}

/**
 * 4. 禁用/删除 弹窗有关数据
 */
const forbiddenDialogVisible = ref(false)
const forbiddenDialogLoading = ref(false)
const currentEditRow = ref()
const currentOperationType = ref('')
const HandleForbiddenDialogClose = ()=>{
    currentEditRow.value = undefined
    forbiddenDialogVisible.value = false
}
const HandleForbiddenDialogConfirm = ()=>{
    // 区分 禁用和删除
    // currentOperationType.value
    HandleForbiddenDialogClose()
}
// type: delete | forbidden
const OpenForbiddenDialog = (row,type)=>{
    currentOperationType.value = type
    currentEditRow.value = row
    forbiddenDialogVisible.value = true
}

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