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 v-loading="avatarLoading" class="user-avatar">
                    <img :src="userInfo.avatar || avatarPng" alt="">
                    <div class="user-avatar-upload">
                        <el-upload
                            :accept="accept" :action="action" :before-upload="beforeUpload" :data="upData"
                            :headers="getTokenHeader()" :on-error="uploadError" :on-success="uploadFinish"
                            :show-file-list="false" class="upload-dom"
                        >
                            <HcIcon fill name="camera" />
                        </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">
            <HcNewCard
                v-if="menuKey !== 'log' && menuKey !== 'recycle'" :title="menuItem.label" :ui="basicHight ? 'basic-hight' : ''"
                scrollbar
            >
                <template #extra>
                    <span
                        v-if="menuKey === 'basic' && !basicFormEdit" class="text-link"
                        @click="basicFormEditClick"
                    >编辑</span>
                    <span
                        v-if="menuKey === 'project'" class="text-link"
                        @click="setDefaultProjectClick"
                    >设置默认项目</span>
                </template>
                <template v-if="menuKey === 'basic'">
                    <el-form
                        ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="top"
                        size="large"
                    >
                        <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" disabled placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="身份证号">
                                    <el-input v-model="formUserModel.idNumber" disabled placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item :prop="basicFormEdit ? 'phone' : ''" label="绑定手机">
                                    <el-input
                                        v-model="formUserModel.phone" :disabled="!basicHight"
                                        placeholder="请输入绑定手机"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属角色">
                                    <el-input v-model="formUserModel.roleName" disabled placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属部门">
                                    <el-input v-model="formUserModel.deptId" disabled placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="CA签字体">
                                    <el-image
                                        v-if="formUserModel?.signatureUrl" :initial-index="0"
                                        :preview-src-list="[formUserModel?.signatureUrl]" :src="formUserModel?.signatureUrl"
                                        fit="cover" style="height: 60px"
                                    />
                                    <span v-else class="text-zinc-400">无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" label-position="top"
                        size="large" style="max-width: 400px; margin: auto;"
                    >
                        <el-form-item label="原始密码" prop="oldPassword">
                            <el-input
                                v-model="formUserPassModel.oldPassword" placeholder="请输入原始密码"
                                show-password type="password"
                            />
                        </el-form-item>
                        <el-form-item label="新的密码" prop="newPassword">
                            <el-input
                                v-model="formUserPassModel.newPassword" placeholder="请输入新的密码"
                                show-password type="password"
                            />
                        </el-form-item>
                        <el-form-item label="确认新密码" prop="newPassword1">
                            <el-input
                                v-model="formUserPassModel.newPassword1" placeholder="请输入确认新密码"
                                show-password type="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 class="hc-menu-icon" name="folder-2" />
                                <span>{{ item?.name }}</span>
                            </template>
                            <el-menu-item
                                v-for="items in item?.contractInfoList ?? []" :index="items?.id"
                                @click="projectMenuValue(item, items)"
                            >
                                <HcIcon v-if="projectKey === items?.id" class="hc-menu-icon" fill name="star" />
                                <span>{{ items?.name }}</span>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </template>
            </HcNewCard>
            <div v-if="basicFormEdit" class="hc-card-foot-box">
                <el-button :loading="saveUserLoading" hc-btn type="primary" @click="saveUserInfoClick">
                    <HcIcon name="save" />
                    <span>保存</span>
                </el-button>
                <el-button hc-btn @click="cancelUserClick">
                    <HcIcon name="close" />
                    <span>取消</span>
                </el-button>
            </div>
            <HcNewCard v-if="menuKey === 'log'" :title="menuItem.label">
                <template #search>
                    <div class="flex items-center">
                        <div class="w-32">
                            <el-select
                                v-model="searchLogForm.operationModule" clearable placeholder="业务模块"
                                @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" clearable placeholder="页面"
                                @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" clearable placeholder="操作类型">
                                <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" clearable placeholder="设备">
                                <el-option
                                    v-for="item in deviceData" :key="item.value" :label="item?.label"
                                    :value="item?.value"
                                />
                            </el-select>
                        </div>
                        <div class="w-20 ml-2">
                            <el-select v-model="searchLogForm.createUser" clearable placeholder="操作人">
                                <el-option
                                    v-for="item in userListData" :key="item.userId" :label="item?.userName"
                                    :value="item?.userId"
                                />
                            </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" clearable placeholder="请输入名称关键词检索"
                                @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" is-new :index-style="{ width: 60 }">
                    <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>
            </HcNewCard>
            <HcNewCard v-if="menuKey === 'recycle'" action-size="lg">
                <template #header>
                    <div class="mr-5">{{ menuItem.label }}</div>
                    <HcNewSwitch :datas="userTypeTab" :keys="userTypeKey" size="default" @change="userTypeChange" />
                </template>
                <template #extra>
                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" size="default" @change="tabTypeChange" />
                </template>
                <HcTable
                    ref="recycleTableRef" :column="recycleTableColumn" :datas="recycleTableData" :loading="recycleTableLoading"
                    is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                    @selection-change="recycleTableSelectionChange"
                />
                <template #action>
                    <div class="foot-recycle">
                        <el-button
                            :disabled="userTypeKey === '2'" :loading="recycleBtnLoading" hc-btn type="primary"
                            @click="recycleBtnClick"
                        >
                            <HcIcon fill name="reply" />
                            <span>恢复</span>
                        </el-button>
                        <HcPages :pages="searchRecycleForm" @change="pageRecycleChange" />
                    </div>
                </template>
            </HcNewCard>
        </div>

        <!-- 日志内容 -->
        <hc-new-dialog v-model="operationContentModal" title="日志内容" widths="38rem">
            <!-- {{ operationContent }} -->
            <div v-html="saveData" />
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import userApi from '~api/userInfo/index'
import { useRoute, useRouter } from 'vue-router'
import avatarPng from '~src/assets/images/avatar.png'
import { getTokenHeader } from '~src/api/request/header'
import { arrIndex, formValidate, getArrValue, isPhone } from 'js-fast-way'
import { getContractUserList } from '~api/other'
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 = arrIndex(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)
}
//获取用户列表
const userListData = ref([])
const getUserListData = async () => {
    const { data } = await getContractUserList({
        contractId: contractId.value,
    })
    userListData.value = getArrValue(data)
}
//渲染完成
onMounted(() => {
    menuObjItem()
    getPageTypeData(menuKey.value)
    getUserListData()
})

//根据类型，获取相关数据
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 (!isPhone(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 && isPhone(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, createUser:null,
})

//业务模块
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: 'createUserName', name: '操作人', align: 'center', width: '120' },
    { 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 saveData = ref('')
const tableOperationContent = (row) => {
    operationContent.value = row['operationContent'] ?? ''
    saveData.value = row['saveData']
    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>