|
|
@@ -0,0 +1,366 @@
|
|
|
+<template>
|
|
|
+ <div class="pageWrap">
|
|
|
+ <div class="content-warp flex-column-page-wrap">
|
|
|
+ <!-- 公用搜索组件 -->
|
|
|
+ <LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
|
|
|
+
|
|
|
+ <!-- LeTable 组件使用 -->
|
|
|
+ <LeTable
|
|
|
+ ref="tableRef"
|
|
|
+ v-model:searchParams="tableOpts.searchParams"
|
|
|
+ v-bind="tableOpts"
|
|
|
+ v-model:curRow="tableOpts.curRow"
|
|
|
+ v-model:checked-options="checkedColumns"
|
|
|
+ :columns="activeColumns"
|
|
|
+ >
|
|
|
+ <template #toolLeft>
|
|
|
+ <el-button type="primary" @click="addHandler">
|
|
|
+ <el-icon class="btn-icon">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" @click="batch_del">
|
|
|
+ <el-icon class="btn-icon">
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #statusSlot="scope">
|
|
|
+ <status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
|
|
|
+ <status-indicator v-else pulse type="danger"></status-indicator>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #actionSlot="scope">
|
|
|
+ <el-tooltip content="编辑" placement="bottom" effect="light">
|
|
|
+ <el-icon class="ibt0" @click="table_edit(scope.row)">
|
|
|
+ <Edit />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
|
|
|
+ <template #reference>
|
|
|
+ <el-icon class="ibt0">
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </LeTable>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <LeFormConfigDialog
|
|
|
+ v-if="visible"
|
|
|
+ ref="dialogUserRef"
|
|
|
+ v-model="visible"
|
|
|
+ :title="`${isCreate ? '新增' : '编辑'}用户`"
|
|
|
+ width="600px"
|
|
|
+ :form-data="activeData"
|
|
|
+ :form-options="formOptions"
|
|
|
+ @submit="submitHandler"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="tsx" setup>
|
|
|
+import user from '@/api/system/user'
|
|
|
+import { computed, nextTick, ref, watch } from 'vue'
|
|
|
+import { ElMessage, ElTree } from 'element-plus'
|
|
|
+import { useTablePage } from '@/hooks/useTablePage'
|
|
|
+import { Plus, Delete } from '@element-plus/icons-vue'
|
|
|
+import StatusIndicator from '@/components/StatusIndicator'
|
|
|
+
|
|
|
+const visible = ref(false) // 弹窗显示隐藏
|
|
|
+const isCreate = ref(true)
|
|
|
+const activeData = ref({})
|
|
|
+const formsDialog = [
|
|
|
+ {
|
|
|
+ prop: 'username',
|
|
|
+ label: '登录账号',
|
|
|
+ itemType: 'input',
|
|
|
+ placeholder: '用于登录系统',
|
|
|
+ rules: [{ required: true, message: '请输入登录账号', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'password',
|
|
|
+ label: '登录密码',
|
|
|
+ itemType: 'input',
|
|
|
+ rules: [{ required: true, message: '请输入登录密码', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'password2',
|
|
|
+ label: '确认密码',
|
|
|
+ itemType: 'input',
|
|
|
+ rules: [{ required: true, message: '请再次输入密码', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'nickName',
|
|
|
+ label: '昵称',
|
|
|
+ itemType: 'input'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'realName',
|
|
|
+ label: '姓名',
|
|
|
+ itemType: 'input'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sex',
|
|
|
+ label: '性别',
|
|
|
+ itemType: 'radio',
|
|
|
+ options: [
|
|
|
+ { value: '男', label: '男' },
|
|
|
+ { value: '女', label: '女' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'status',
|
|
|
+ label: '状态',
|
|
|
+ itemType: 'switch',
|
|
|
+ activeText: '是',
|
|
|
+ inactiveText: '否'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'roleIds',
|
|
|
+ label: '所属角色',
|
|
|
+ itemType: 'select',
|
|
|
+ multiple: true,
|
|
|
+ collapseTags: true,
|
|
|
+ maxCollapseTags: 1,
|
|
|
+ filterable: true,
|
|
|
+ options: []
|
|
|
+ }
|
|
|
+]
|
|
|
+// 新增的表单 和 编辑的表单
|
|
|
+const formOptions = computed(() => {
|
|
|
+ // 去掉 formsDialog 下标为 1 2 的数据
|
|
|
+ const { 1: password, 2: password2, ...rest } = formsDialog
|
|
|
+ let editFormDialog = []
|
|
|
+ for (let i in rest) {
|
|
|
+ editFormDialog.push(rest[i])
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ forms: isCreate.value ? formsDialog : editFormDialog,
|
|
|
+ labelWidth: 120,
|
|
|
+ span: 30,
|
|
|
+ showResetBtn: true,
|
|
|
+ formConfig: {
|
|
|
+ submitLoading: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+const groupFilterText = ref('')
|
|
|
+const treeRef = ref<InstanceType<typeof ElTree>>()
|
|
|
+
|
|
|
+// 表格搜索条件
|
|
|
+const forms = ref([
|
|
|
+ {
|
|
|
+ prop: 'keyword',
|
|
|
+ label: '角色名称：',
|
|
|
+ itemType: 'input',
|
|
|
+ placeholder: '请输入角色名称'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// table列表数据请求
|
|
|
+const queryList = async () => {
|
|
|
+ const { options, searchParams } = tableOpts
|
|
|
+ options.loading = true
|
|
|
+ console.log('搜索参数： ', JSON.stringify(tableOpts.searchParams))
|
|
|
+ try {
|
|
|
+ const { records: list, total } = await user.userPageApi(searchParams)
|
|
|
+ tableOpts.total = total
|
|
|
+ tableOpts.list = list
|
|
|
+ } catch {
|
|
|
+ console.log('获取列表数据失败')
|
|
|
+ tableOpts.total = 0
|
|
|
+ tableOpts.list = []
|
|
|
+ options.loading = false // 更改加载中的 loading值
|
|
|
+ } finally {
|
|
|
+ options.loading = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// table 参数
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ prop: 'filterAvatar',
|
|
|
+ label: '头像',
|
|
|
+ minWidth: 80,
|
|
|
+ slots: {
|
|
|
+ default: 'filterAvatarSlot'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'username',
|
|
|
+ label: '登录账号',
|
|
|
+ minWidth: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'status',
|
|
|
+ label: '状态',
|
|
|
+ minWidth: 50,
|
|
|
+ slots: {
|
|
|
+ default: 'statusSlot'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'nickName',
|
|
|
+ label: '昵称',
|
|
|
+ minWidth: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'realName',
|
|
|
+ label: '姓名',
|
|
|
+ minWidth: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sex',
|
|
|
+ label: '性别',
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'updateBy',
|
|
|
+ label: '修改人',
|
|
|
+ minWidth: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'updateTime',
|
|
|
+ label: '修改时间',
|
|
|
+ minWidth: 126
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'createBy',
|
|
|
+ label: '创建人',
|
|
|
+ minWidth: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '创建时间',
|
|
|
+ minWidth: 126
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'action',
|
|
|
+ label: '操作',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'right',
|
|
|
+ slots: {
|
|
|
+ default: 'actionSlot'
|
|
|
+ }
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
|
|
|
+ {
|
|
|
+ options: {
|
|
|
+ showIndex: false
|
|
|
+ },
|
|
|
+ // 需要展示的列
|
|
|
+ columns,
|
|
|
+ // 控制列配置
|
|
|
+ columnsConfig: {
|
|
|
+ columns
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ queryList,
|
|
|
+ fetchImmediate: false
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+// 删除
|
|
|
+const deleteItem = async ids => {
|
|
|
+ try {
|
|
|
+ await user.userDeleteApi(ids)
|
|
|
+ updateParams()
|
|
|
+ } catch (e) {
|
|
|
+ console.log('删除失败')
|
|
|
+ ElMessage.error(`删除失败~`)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 单个删除
|
|
|
+const table_del = row => {
|
|
|
+ deleteItem([row.id])
|
|
|
+}
|
|
|
+
|
|
|
+//批量删除
|
|
|
+const batch_del = () => {
|
|
|
+ const ids = curSelectionRows.value.map(item => item.id) // 多选数据
|
|
|
+ deleteItem(ids)
|
|
|
+}
|
|
|
+
|
|
|
+const table_edit = async row => {
|
|
|
+ try {
|
|
|
+ const data = await user.userRoleIdsApi({ id: row.id })
|
|
|
+ isCreate.value = false
|
|
|
+ activeData.value = { ...row, status: row.status ? true : false, roleIds: data }
|
|
|
+ visible.value = true
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error(`获取用户所属角色失败~`)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 弹窗事件
|
|
|
+const submitHandler = async params => {
|
|
|
+ formOptions.value.formConfig.submitLoading = true
|
|
|
+ try {
|
|
|
+ params.status = params.status ? 1 : 0
|
|
|
+ params.id = activeData.value.id ? activeData.value.id : null
|
|
|
+ await user.userAddOrEditSaveApi(params)
|
|
|
+ ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
|
|
|
+ visible.value = false
|
|
|
+ updateParams()
|
|
|
+ formOptions.value.formConfig.submitLoading = false
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ formOptions.value.formConfig.submitLoading = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const addHandler = () => {
|
|
|
+ isCreate.value = true
|
|
|
+ activeData.value = {}
|
|
|
+ visible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+nextTick(() => {
|
|
|
+ queryList()
|
|
|
+})
|
|
|
+
|
|
|
+watch(groupFilterText, val => {
|
|
|
+ treeRef.value!.filter(val)
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.pageWrap {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ //background: #fff;
|
|
|
+}
|
|
|
+.content-warp {
|
|
|
+ flex: 1;
|
|
|
+ //width: calc(100% - 250px);
|
|
|
+ width: calc(100% - 210px);
|
|
|
+}
|
|
|
+// 单独自己写的
|
|
|
+/*:deep(.box-card) {
|
|
|
+ height: 100%;
|
|
|
+ .el-card__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}*/
|
|
|
+
|
|
|
+// 角色的树结构样式
|
|
|
+:deep(.menu-tree) {
|
|
|
+ .el-tree-node__content {
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ .el-tree-node__content .el-tree-node__label .icon {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.nopadding {
|
|
|
+ padding: 0px;
|
|
|
+}
|
|
|
+</style>
|
luoyali