for_client/src/views/user/index.vue

<template>
    <div class="hc-layout-box">
        <div class="hc-layout-left-box">
            <div class="user-avatar-box">
                <div class="user-avatar" v-loading="avatarLoading">
                    <img :src="userInfo['avatar'] || avatarPng" alt="" crossOrigin="anonymous"/>
                    <div class="user-avatar-upload">
                        <el-upload class="upload-dom" :action="action" :accept="accept" :headers="getTokenHeader()" :data="upData" :show-file-list="false" :on-success="uploadFinish" :on-error="uploadError" :before-upload="beforeUpload">
                            <HcIcon name="camera" fill/>
                        </el-upload>
                    </div>
                </div>
                <div class="user-name truncate">{{ userInfo['real_name'] || '游客' }}</div>
            </div>
            <div class="user-menu-box">
                <el-scrollbar>
                    <HcMenuSimple :datas="menuOptions" :keys="menuKey" @change="handleMenuValue"/>
                </el-scrollbar>
            </div>
        </div>
        <div class="hc-layout-content-box">
            <HcCard scrollbar :title="menuItem.label" :ui="basicHight?'basic-hight':''" v-if="menuKey !== 'log' && menuKey !== 'recycle'">
                <template #extra>
                    <span class="text-link" v-if="menuKey === 'basic' && !basicFormEdit" @click="basicFormEditClick">编辑</span>
                    <span class="text-link" v-if="menuKey === 'project'" @click="setDefaultProjectClick">设置默认项目</span>
                </template>
                <template v-if="menuKey === 'basic'">
                    <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-position="top">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="用户名称">
                                    <el-input v-model="formUserModel.real_name" disabled/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="登录账号">
                                    <el-input v-model="formUserModel.account" placeholder="" disabled/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="身份证号">
                                    <el-input v-model="formUserModel.idNumber" placeholder="" disabled/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="绑定手机" :prop="basicFormEdit?'phone':''">
                                    <el-input v-model="formUserModel.phone" placeholder="请输入绑定手机" :disabled="!basicHight"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属角色">
                                    <el-input v-model="formUserModel.roleName" placeholder="" disabled/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属部门">
                                    <el-input v-model="formUserModel.deptId" placeholder="" disabled/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="CA签字体">
                                    <el-image style="height: 60px" :src="formUserModel?.signatureUrl" :preview-src-list="[formUserModel?.signatureUrl]" :initial-index="0" fit="cover" v-if="formUserModel?.signatureUrl"/>
                                    <span class="text-zinc-400" v-else>无CA签字体</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                <template v-if="menuKey === 'password'">
                    <el-form ref="formUserPassRef" :model="formUserPassModel" :rules="formUserPassRules" size="large" label-position="top" style="max-width: 400px; margin: auto;">
                        <el-form-item label="原始密码" prop="oldPassword">
                            <el-input type="password" v-model="formUserPassModel.oldPassword" placeholder="请输入原始密码" show-password/>
                        </el-form-item>
                        <el-form-item label="新的密码" prop="newPassword">
                            <el-input type="password" v-model="formUserPassModel.newPassword" placeholder="请输入新的密码" show-password/>
                        </el-form-item>
                        <el-form-item label="确认新密码" prop="newPassword1">
                            <el-input type="password" v-model="formUserPassModel.newPassword1" placeholder="请输入确认新密码" show-password/>
                        </el-form-item>
                    </el-form>
                </template>
                <template v-if="menuKey === 'project'">
                    <el-menu :default-active="projectKey" class="hc-project-menu" unique-opened>
                        <el-sub-menu v-for="item in projectContractArr" :index="item.id">
                            <template #title>
                                <HcIcon name="folder-2" class="hc-menu-icon"/>
                                <span>{{ item?.name }}</span>
                            </template>
                            <el-menu-item v-for="items in item?.contractInfoList ?? []" :index="items?.id" @click="projectMenuValue(item,items)">
                                <HcIcon name="star" class="hc-menu-icon" fill v-if="projectKey === items?.id"/>
                                <span>{{ items?.name }}</span>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </template>
            </HcCard>
            <div class="hc-card-foot-box" v-if="basicFormEdit">
                <el-button type="primary" hc-btn :loading="saveUserLoading" @click="saveUserInfoClick">
                    <HcIcon name="save"/>
                    <span>保存</span>
                </el-button>
                <el-button hc-btn @click="cancelUserClick">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
            </div>
            <HcCard :title="menuItem.label" v-if="menuKey === 'log'">
                <template #search>
                    <div class="flex items-center">
                        <div class="w-32">
                            <el-select v-model="searchLogForm.operationModule" placeholder="业务模块" clearable @change="BusinessModuleValue">
                                <el-option v-for="item in operationModuleData" :key="item.value" :label="item?.dictValue" :value="item?.dictKey"/>
                            </el-select>
                        </div>
                        <div class="w-32 ml-2">
                            <el-select v-model="searchLogForm.operationView" placeholder="页面" clearable @change="OperationViewValue">
                                <el-option v-for="item in operationViewData" :key="item.value" :label="item?.dictValue" :value="item?.dictKey"/>
                            </el-select>
                        </div>
                        <div class="w-40 ml-2">
                            <el-select v-model="searchLogForm.operationType" placeholder="操作类型" clearable>
                                <el-option v-for="item in operationTypeData" :key="item.value" :label="item?.dictValue" :value="item?.dictKey"/>
                            </el-select>
                        </div>
                        <div class="w-20 ml-2">
                            <el-select v-model="searchLogForm.operationMedium" placeholder="设备" clearable>
                                <el-option v-for="item in deviceData" :key="item.value" :label="item?.label" :value="item?.value"/>
                            </el-select>
                        </div>
                        <div class="w-64 ml-2">
                            <HcDatePicker :dates="betweenTime" clearable @change="betweenDateUpdate"/>
                        </div>
                        <div class="w-60 ml-2">
                            <el-input v-model="searchLogForm.queryValue" placeholder="请输入名称关键词检索" clearable @keyup="keyUpEvent"/>
                        </div>
                        <div class="ml-2">
                            <el-button type="primary" @click="searchClick">
                                <HcIcon name="search-2"/>
                                <span>搜索</span>
                            </el-button>
                        </div>
                    </div>
                </template>
                <HcTable :column="logTableColumn" :datas="logTableData" :loading="logTableLoading">
                    <template #operationContent="{row}">
                        <div class="text-link text-cut" @click="tableOperationContent(row)">{{row?.operationContent}}</div>
                    </template>
                </HcTable>
                <template #action>
                    <HcPages :pages="searchLogForm" @change="pageLogChange"/>
                </template>
            </HcCard>
            <HcCard v-if="menuKey === 'recycle'" actionSize="lg">
                <template #header>
                    <div class="mr-5">{{menuItem.label}}</div>
                    <HcNewSwitch :datas="userTypeTab" :keys="userTypeKey" @change="userTypeChange"/>
                </template>
                <template #extra>
                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange"/>
                </template>
                <HcTable ref="recycleTableRef" :column="recycleTableColumn" :datas="recycleTableData" :loading="recycleTableLoading" isCheck @selection-change="recycleTableSelectionChange"/>
                <template #action>
                    <div class="foot-recycle">
                        <el-button type="primary" hc-btn :disabled="userTypeKey === '2'" :loading="recycleBtnLoading" @click="recycleBtnClick">
                            <HcIcon name="reply" fill/>
                            <span>恢复</span>
                        </el-button>
                        <HcPages :pages="searchRecycleForm" @change="pageRecycleChange"/>
                    </div>
                </template>
            </HcCard>
        </div>

        <!--日志内容-->
        <el-dialog v-model="operationContentModal" title="日志内容" width="38rem" class="hc-modal-border">
            {{operationContent}}
        </el-dialog>

    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useAppStore} from "~src/store";
import userApi from "~api/userInfo/index"
import {useRouter, useRoute} from 'vue-router'
import avatarPng from '~src/assets/images/avatar.png';
import {getTokenHeader} from '~src/api/request/header';
import {getIndex,formValidate,getArrValue,isMobile} from "vue-utils-plus"
import md5 from 'js-md5';

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()

//全局变量信息
const userInfo = ref(useAppState.getUserInfo);
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectContractArr = ref(useAppState.getProjectContract);

//路由参数数据
const routerQuery = useRoutes?.query;
let MenuType = routerQuery?.MenuType || 'basic'

//上传组件参数
const action = '/api/blade-resource/oss/endpoint/put-file';
const accept = 'image/png,image/jpg,image/jpeg';
const upData = ref({})
//上传前
const avatarLoading = ref(false)
const beforeUpload = () => {
    avatarLoading.value = true
    return true
}
//上传完成
const uploadFinish = async (res) => {
    const link = res?.data?.link ?? '';
    const user_id = userInfo.value?.user_id ?? '';
    if (link) {
        const { error, code } = await userApi.updateUserInfo({avatar: link, id: user_id})
        if (!error && code === 200) {
            avatarLoading.value = false
            userInfo.value.avatar = link
            window?.$message?.success('更换头像成功')
            useAppState.setUserInfo(userInfo.value)
        } else {
            avatarLoading.value = false
        }
    } else {
        window?.$message?.warning('上传头像异常，请稍后再试')
        avatarLoading.value = false
    }
}
//上传失败
const uploadError = () => {
    avatarLoading.value = false
    window?.$message?.warning('上传头像失败')
}


//左侧菜单
const menuKey = ref(MenuType)
const menuItem = ref({})
const menuOptions = ref([
    {key: 'basic', label: '基础信息', icon: 'user-3'},
    {key: 'password', label: '密码设置', icon: 'lock-unlock'},
    {key: 'project', label: '参建项目', icon: 'folder-2'},
    {key: 'log', label: '操作日志', icon: 'file-mark'},
    {key: 'recycle', label: '回收站', icon: 'delete-bin-5'},
]);
//获取菜单对象数据
const menuObjItem = () => {
    const index = getIndex(menuOptions.value, 'key', menuKey.value)
    menuItem.value = menuOptions.value[index]
}
//菜单被点击
const handleMenuValue = (item) => {
    menuItem.value = item
    menuKey.value = item?.key
    router.push({
        path: useRoutes.path,
        query: {
            MenuType: item?.key
        }
    })
    getPageTypeData(item?.key)
}

//渲染完成
onMounted(() => {
    menuObjItem()
    getPageTypeData(menuKey.value)
})

//根据类型，获取相关数据
const getPageTypeData = (key) => {
    //编辑状态
    if (key === 'password') {
        basicFormEdit.value = true
        basicHight.value = true
    } else {
        basicFormEdit.value = false
        basicHight.value = false
    }
    //请求数据
    if (key === 'basic') {
        queryCurrentUserData()
    } else if (key === 'project') {
        getDefaultProject()
    } else if (key === 'log') {
        queryBusinessModule()
        queryOperationView()
        operationTypeStatus()
        getLogTableData()
    } else if (key === 'recycle') {
        getRecycleTableData()
    }
}

//是否编辑
const basicFormEdit = ref(false)
const basicHight = ref(false)
//基础信息表单
const formUserRef = ref(null)
const formUserModel = ref(userInfo.value)
const formUserRules = {
    phone: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号'))
            } else if (!isMobile(value)) {
                callback(new Error('手机号码格式错误'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
}
//获取用户信息
const queryCurrentUserData = async () => {
    const { error, code, data } = await userApi.queryCurrentUserData()
    if (!error && code === 200) {
        formUserModel.value.deptId = data?.deptId || ''
        formUserModel.value.idNumber = data?.idNumber || ''
        formUserModel.value.roleName = data?.roleName || ''
        formUserModel.value.signatureUrl = data?.signatureUrl || ''
    }
}

//切换编辑模式
const basicFormEditClick = () => {
    basicFormEdit.value = true
    basicHight.value = true
}

//保存数据
const saveUserLoading = ref(false)
const saveUserInfoClick = () => {
    const key = menuKey.value
    if (key === 'basic') {
        saveUserInfoData()
    } else if (key === 'password') {
        saveUpdatePassword()
    }
}

//取消修改
const cancelUserClick = () => {
    const key = menuKey.value
    if (key === 'basic') {
        basicFormEdit.value = false
        basicHight.value = false
    } else {
        console.log('我也不知道这个点了干什么，反正UI图上有，至于有什么作用，不知道。。')
    }
}

//保存用户信息
const saveUserInfoData = async () => {
    const { phone, user_id } = formUserModel.value
    if (phone && isMobile(phone)) {
        saveUserLoading.value = true
        const { error, code } = await userApi.updateUserInfo({
            phone: phone,
            id: user_id
        })
        if (!error && code === 200) {
            saveUserLoading.value = false
            window?.$message?.success('保存成功')
            userInfo.value.phone = phone
            useAppState.setUserInfo(userInfo.value)
        } else {
            saveUserLoading.value = false
        }
    }
}

//密码设置表单
const formUserPassRef = ref(null)
const formUserPassModel = ref({oldPassword: '', newPassword: '', newPassword1: ''})
const formUserPassRules = {
    oldPassword: {
        required: true,
        trigger: "blur",
        message: "请输入原始密码"
    },
    newPassword: {
        required: true,
        validator(rule, value, callback) {
            const pass = formUserPassModel.value.newPassword1;
            if (!value) {
                callback(new Error("请输入新的密码"))
            } else if (pass && value !== pass) {
                callback(new Error("新的密码和确认新密码不一致"))
            }
            callback()
        },
        trigger: "blur"
    },
    newPassword1: {
        required: true,
        validator(rule, value, callback) {
            const pass = formUserPassModel.value.newPassword;
            if (!value) {
                callback(new Error("请输入确认新密码"))
            } else if (pass && value !== pass) {
                callback(new Error("新的密码和确认新密码不一致"))
            }
            callback()
        },
        trigger: "blur"
    }
}

//更新密码
const saveUpdatePassword = async () => {
    const res = await formValidate(formUserPassRef.value)
    if (res) {
        const form = formUserPassModel.value;
        saveUserLoading.value = true
        const { error, code } = await userApi.updatePassword({
            oldPassword: md5(form?.oldPassword),
            newPassword: md5(form?.newPassword),
            newPassword1: md5(form?.newPassword1),
            plaintextPassword: form?.newPassword
        })
        if (!error && code === 200) {
            saveUserLoading.value = false
            window?.$message?.success('密码修改成功')
            formUserPassModel.value = {
                oldPassword: '',
                newPassword: '',
                newPassword1: ''
            }
        } else {
            saveUserLoading.value = false
        }
    }
}

//获取默认项目
const projectKey = ref(null)
const getDefaultProject = async () => {
    const { error, code, data } = await userApi.getDefaultProject()
    if (!error && code === 200) {
        projectKey.value = data['contractId']
    }
}

//项目被选择
const menuProjectId = ref('')
const menuContractId = ref('')
const projectMenuValue = (item,items) => {
    menuProjectId.value = item?.id
    menuContractId.value = items?.id
    projectKey.value = items?.id
}

//设置为默认项目
const setDefaultProjectClick = async () => {
    const pid = menuProjectId.value, cid = menuContractId.value
    if (pid && cid) {
        const { error, code } = await userApi.setDefaultProject({
            projectId: pid,
            contractId: cid
        })
        if (!error && code === 200) {
            window?.$message?.success('设置成功')
        }
    } else {
        window?.$message?.warning('请先在下方选择一个项目合同段')
    }
}

//搜索和分页数据
const searchLogForm = ref({
    operationModule: null, operationView: null, operationType: null, operationMedium: null,
    queryValue: null, startTime: null, endTime: null,
    current: 1, size: 10, total: 0
})

//业务模块
const operationModuleData = ref([])
const queryBusinessModule = async () => {
    const { error, code, data } = await userApi.queryBusinessModule()
    if (!error && code === 200) {
        operationModuleData.value = data
    } else {
        operationModuleData.value = []
    }
}
const BusinessModuleValue = () => {
    searchLogForm.value.operationView = null
    searchLogForm.value.operationType = null
    queryOperationView()
    operationTypeStatus()
}

//页面
const operationViewData = ref([])
const queryOperationView = async () => {
    const { error, code, data } = await userApi.queryOperationView({
        businessModule: searchLogForm.value?.operationModule || ''
    })
    if (!error && code === 200) {
        operationViewData.value = data
    } else {
        operationViewData.value = []
    }
}
const OperationViewValue = () => {
    searchLogForm.value.operationType = null
    operationTypeStatus()
}

//操作类型
const operationTypeData = ref([])
const operationTypeStatus = async () => {
    const { error, code, data } = await userApi.queryOperationTypeList({
        businessModule: searchLogForm.value?.operationModule || '',
        operationView: searchLogForm.value?.operationView || ''
    })
    if (!error && code === 200) {
        operationTypeData.value = data
    } else {
        operationTypeData.value = []
    }
}

//设备
const deviceData = ref([{label: "APP", value: "APP"}, {label: "PC", value: "PC"}])
//表格数据
const logTableColumn = ref([
    {key:'operationModule', name: '业务模块', width: '180'},
    {key:'operationTypeValue', name: '操作类型', width: '220'},
    {key:'operationMedium', name: '设备', align: 'center', width: '80'},
    {key:'operationContent', name: '操作内容'},
    {key:'createTime', name: '操作时间', align: 'center', width: '180'},
])
const logTableData = ref([]);

//日期时间被选择
const betweenTime = ref(null)
const betweenDateUpdate = ({val,arr}) => {
    betweenTime.value = arr
    searchLogForm.value.startTime = val?.start
    searchLogForm.value.endTime = val?.end
}

//回车搜索
const keyUpEvent = (e) => {
    if (e.key === "Enter") {
        searchLogForm.value.current = 1;
        getLogTableData()
    }
}

//搜索
const searchClick = () => {
    searchLogForm.value.current = 1;
    getLogTableData()
}

//分页被点击
const pageLogChange = ({current, size}) => {
    searchLogForm.value.current = current
    searchLogForm.value.size = size
    getLogTableData()
}

//获取数据
const logTableLoading = ref(false)
const getLogTableData = async () => {
    logTableLoading.value = true
    const { error, code, data } = await userApi.getOperationLog({
        projectId: projectId.value,
        contractId: contractId.value,
        ...searchLogForm.value
    })
    logTableLoading.value = false
    if (!error && code === 200) {
        logTableData.value = getArrValue(data['records'])
        searchLogForm.value.total = data.total || 0
    } else {
        logTableData.value = []
        searchLogForm.value.total = 0
    }
}

//查看日志内容
const operationContentModal = ref(false)
const operationContent = ref('')
const tableOperationContent = (row) => {
    operationContent.value = row['operationContent'] ?? ''
    operationContentModal.value = true
}


//个人和全部切换
const userTypeKey = ref('1')
const userTypeTab = ref([{key:'1',  name: '个人'}, {key:'2', name: '全部'}]);
const userTypeChange = (item) => {
    userTypeKey.value = item?.key;
    if (item?.key === '1') {
        searchRecycleForm.value.createUserName = ''
    } else {
        searchRecycleForm.value.createUserName = 'ALL'
    }
    getRecycleTableData()
}

//结构类型tab数据和相关处理
const tabTypeKey = ref('1')
const tabTypeTab = ref([
    {key: '1',  name: '文件资料'},
    {key: '2', name: '工程划分'}
]);
const tabTypeChange = (item) => {
    tabTypeKey.value = item?.key;
    tabTypeKey.value = item?.key;
    searchRecycleForm.value.current = 1
    searchRecycleForm.value.delType = item?.key
    getRecycleTableData()
}

//搜索和分页数据
const searchRecycleForm = ref({
    projectId: projectId.value, contractId: contractId.value, createUserName: '',
    delType: tabTypeKey.value, current: 1, size: 20, total: 0
})

//表格数据
const recycleTableRef = ref(null)
const recycleTableColumn = ref([
    {key:'fileName', name: '删除内容'},
    {key:'position', name: '父节点名称'},
    {key:'createUserName', name: '操作人'},
    {key:'operationTime', name: '删除时间', align: 'center', width: '180'},
])
const recycleTableLoading = ref(false)
const recycleTableData = ref(null);

//分页被点击
const pageRecycleChange = ({current, size}) => {
    searchRecycleForm.value.current = current
    searchRecycleForm.value.size = size
    getRecycleTableData()
}

//获取数据
const getRecycleTableData = async () => {
    const { error, code, data } = await userApi.queryRecycleBinList({
        projectId: projectId.value,
        contractId: contractId.value,
        delType: tabTypeKey.value,
        ...searchRecycleForm.value
    })
    if (!error && code === 200) {
        recycleTableData.value = getArrValue(data['records'])
        searchRecycleForm.value.total = data.total || 0
    } else {
        recycleTableData.value = []
        searchRecycleForm.value.total = 0
    }
}

//多选
const RecycleCheckedKeys = ref([]);
const recycleTableSelectionChange = (val) => {
    RecycleCheckedKeys.value = val
}

//恢复
const recycleBtnLoading = ref(false)
const recycleBtnClick = async () => {
    const rows = RecycleCheckedKeys.value
    if (rows.length > 0) {
        //请求数据
        recycleBtnLoading.value = true
        const { error, code } = await userApi.recycleBinRegain({
            projectId: projectId.value,
            contractId: contractId.value,
            delType: tabTypeKey.value,
            regainIds: rows
        })
        recycleBtnLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success('操作成功')
            searchRecycleForm.value.current = 1
            getRecycleTableData()
        }
    } else {
        window.$message?.warning('请先勾选要恢复的数据')
    }
}
</script>

<style lang="scss" scoped>
@import "../../styles/user/index.scss";
</style>

<style lang="scss">
.user-avatar-upload .upload-dom, .upload-dom .el-upload {
    height: 100%;
    width: 100%;
}
</style>