mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-23 07:41:53 +08:00
refactor: template script
This commit is contained in:
xingyu4j
parent
fabca00f7a
commit
d3526e6f63
@ -1,3 +1,106 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-card class="w-1/3 dept" :gutter="12" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>部门列表</span>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:zoom-in"
|
||||
title="新增根节点"
|
||||
v-hasPermi="['system:dept:create']"
|
||||
@click="handleCreate"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="custom-tree-container">
|
||||
<!-- <p>部门列表</p> -->
|
||||
<!-- 操作工具栏 -->
|
||||
<el-input v-model="filterText" placeholder="搜索部门" />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
:data="deptOptions"
|
||||
:props="defaultProps"
|
||||
:highlight-current="true"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<span>{{ node.label }}</span>
|
||||
<span>
|
||||
<XTextButton
|
||||
preIcon="ep:zoom-in"
|
||||
:title="t('action.add')"
|
||||
v-hasPermi="['system:dept:create']"
|
||||
@click="handleCreate(data)"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:edit"
|
||||
:title="t('action.edit')"
|
||||
v-hasPermi="['system:dept:update']"
|
||||
@click="handleUpdate(data)"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:delete"
|
||||
:title="t('action.del')"
|
||||
v-hasPermi="['system:dept:delete']"
|
||||
@click="handleDelete(data)"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="w-2/3 dept" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ formTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="!showForm">
|
||||
<span><p>请从左侧选择部门</p></span>
|
||||
</div>
|
||||
<div v-if="showForm">
|
||||
<!-- 操作工具栏 -->
|
||||
<Form ref="formRef" :schema="modelSchema" :rules="rules">
|
||||
<template #parentId>
|
||||
<el-tree-select
|
||||
node-key="id"
|
||||
v-model="deptParentId"
|
||||
:props="defaultProps"
|
||||
:data="deptOptions"
|
||||
check-strictly
|
||||
/>
|
||||
</template>
|
||||
<template #leaderUserId>
|
||||
<el-select v-model="leaderUserId">
|
||||
<el-option
|
||||
v-for="item in userOption"
|
||||
:key="parseInt(item.id)"
|
||||
:label="item.nickname"
|
||||
:value="parseInt(item.id)"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</Form>
|
||||
<!-- 按钮：保存 -->
|
||||
<XButton
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
v-hasPermi="['system:dept:update']"
|
||||
:loading="loading"
|
||||
@click="submitForm()"
|
||||
/>
|
||||
<!-- 按钮：关闭 -->
|
||||
<XButton :loading="loading" :title="t('dialog.close')" @click="showForm = false" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { ElInput, ElCard, ElTree, ElTreeSelect, ElSelect, ElOption } from 'element-plus'
|
||||
@ -104,109 +207,7 @@ onMounted(async () => {
|
||||
await getUserList()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-card class="w-1/3 dept" :gutter="12" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>部门列表</span>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:zoom-in"
|
||||
title="新增根节点"
|
||||
v-hasPermi="['system:dept:create']"
|
||||
@click="handleCreate"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="custom-tree-container">
|
||||
<!-- <p>部门列表</p> -->
|
||||
<!-- 操作工具栏 -->
|
||||
<el-input v-model="filterText" placeholder="搜索部门" />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
:data="deptOptions"
|
||||
:props="defaultProps"
|
||||
:highlight-current="true"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<span>{{ node.label }}</span>
|
||||
<span>
|
||||
<XTextButton
|
||||
preIcon="ep:zoom-in"
|
||||
:title="t('action.add')"
|
||||
v-hasPermi="['system:dept:create']"
|
||||
@click="handleCreate(data)"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:edit"
|
||||
:title="t('action.edit')"
|
||||
v-hasPermi="['system:dept:update']"
|
||||
@click="handleUpdate(data)"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:delete"
|
||||
:title="t('action.del')"
|
||||
v-hasPermi="['system:dept:delete']"
|
||||
@click="handleDelete(data)"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="w-2/3 dept" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ formTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="!showForm">
|
||||
<span><p>请从左侧选择部门</p></span>
|
||||
</div>
|
||||
<div v-if="showForm">
|
||||
<!-- 操作工具栏 -->
|
||||
<Form ref="formRef" :schema="modelSchema" :rules="rules">
|
||||
<template #parentId>
|
||||
<el-tree-select
|
||||
node-key="id"
|
||||
v-model="deptParentId"
|
||||
:props="defaultProps"
|
||||
:data="deptOptions"
|
||||
check-strictly
|
||||
/>
|
||||
</template>
|
||||
<template #leaderUserId>
|
||||
<el-select v-model="leaderUserId">
|
||||
<el-option
|
||||
v-for="item in userOption"
|
||||
:key="parseInt(item.id)"
|
||||
:label="item.nickname"
|
||||
:value="parseInt(item.id)"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</Form>
|
||||
<!-- 按钮：保存 -->
|
||||
<XButton
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
v-hasPermi="['system:dept:update']"
|
||||
:loading="loading"
|
||||
@click="submitForm()"
|
||||
/>
|
||||
<!-- 按钮：关闭 -->
|
||||
<XButton :loading="loading" :title="t('dialog.close')" @click="showForm = false" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dept {
|
||||
height: 600px;
|
||||
|
||||
@ -1,3 +1,93 @@
|
||||
<template>
|
||||
<!-- 搜索工作区 -->
|
||||
<ContentWrap>
|
||||
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
|
||||
</ContentWrap>
|
||||
<ContentWrap>
|
||||
<!-- 操作工具栏 -->
|
||||
<div class="mb-10px">
|
||||
<el-button type="primary" @click="handleCreate">
|
||||
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<Table
|
||||
:columns="allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="{
|
||||
total: tableObject.total
|
||||
}"
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
@register="register"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
||||
</template>
|
||||
<template #createTime="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<el-button link type="primary" @click="handleUpdate(row)">
|
||||
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button link type="primary" @click="delList(row.id, false)">
|
||||
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap>
|
||||
|
||||
<XModal v-model="dialogVisible" :title="dialogTitle" maxHeight="500px" width="50%">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<Form
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
:schema="allSchemas.formSchema"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<template #menuIds>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
全选/全不选:
|
||||
<el-switch
|
||||
v-model="treeNodeAll"
|
||||
inline-prompt
|
||||
active-text="是"
|
||||
inactive-text="否"
|
||||
@change="handleCheckedTreeNodeAll()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
:props="defaultProps"
|
||||
:data="menuOptions"
|
||||
empty-text="加载中，请稍后"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
</Form>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<!-- 按钮：保存 -->
|
||||
<XButton
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
:loading="loading"
|
||||
@click="submitForm()"
|
||||
/>
|
||||
<!-- 按钮：关闭 -->
|
||||
<XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
|
||||
</template>
|
||||
</XModal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, unref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
@ -107,94 +197,3 @@ onMounted(async () => {
|
||||
})
|
||||
// getList()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 搜索工作区 -->
|
||||
<ContentWrap>
|
||||
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
|
||||
</ContentWrap>
|
||||
<ContentWrap>
|
||||
<!-- 操作工具栏 -->
|
||||
<div class="mb-10px">
|
||||
<el-button type="primary" @click="handleCreate">
|
||||
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<Table
|
||||
:columns="allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="{
|
||||
total: tableObject.total
|
||||
}"
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
@register="register"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
||||
</template>
|
||||
<template #createTime="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<el-button link type="primary" @click="handleUpdate(row)">
|
||||
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button link type="primary" @click="delList(row.id, false)">
|
||||
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap>
|
||||
|
||||
<XModal v-model="dialogVisible" :title="dialogTitle" maxHeight="500px" width="50%">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<Form
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
:schema="allSchemas.formSchema"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<template #menuIds>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
全选/全不选:
|
||||
<el-switch
|
||||
v-model="treeNodeAll"
|
||||
inline-prompt
|
||||
active-text="是"
|
||||
inactive-text="否"
|
||||
@change="handleCheckedTreeNodeAll()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
:props="defaultProps"
|
||||
:data="menuOptions"
|
||||
empty-text="加载中，请稍后"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
</Form>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<!-- 按钮：保存 -->
|
||||
<XButton
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
:loading="loading"
|
||||
@click="submitForm()"
|
||||
/>
|
||||
<!-- 按钮：关闭 -->
|
||||
<XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
|
||||
</template>
|
||||
</XModal>
|
||||
</template>
|
||||
|
||||
@ -1,3 +1,263 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-card class="w-1/5 user" :gutter="12" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>部门列表</span>
|
||||
<el-button link class="button" type="primary" @click="handleDeptEdit">
|
||||
修改部门
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-input v-model="filterText" placeholder="搜索部门" />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:data="deptOptions"
|
||||
:props="defaultProps"
|
||||
:highlight-current="true"
|
||||
:filter-node-method="filterNode"
|
||||
:expand-on-click-node="false"
|
||||
@node-click="handleDeptNodeClick"
|
||||
/>
|
||||
</el-card>
|
||||
<!-- 搜索工作区 -->
|
||||
<el-card class="w-4/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ tableTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<Search
|
||||
:schema="allSchemas.searchSchema"
|
||||
@search="setSearchParams"
|
||||
@reset="setSearchParams"
|
||||
ref="searchForm"
|
||||
/>
|
||||
<!-- 操作工具栏 -->
|
||||
<div class="mb-10px">
|
||||
<el-button type="primary" v-hasPermi="['system:user:create']" @click="handleAdd">
|
||||
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
v-hasPermi="['system:user:import']"
|
||||
@click="importDialogVisible = true"
|
||||
>
|
||||
<Icon icon="ep:upload" class="mr-5px" /> {{ t('action.import') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
v-hasPermi="['system:user:export']"
|
||||
@click="exportList('用户数据.xls')"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<Table
|
||||
:columns="allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="{
|
||||
total: tableObject.total
|
||||
}"
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
@register="register"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
@change="handleStatusChange(row)"
|
||||
/>
|
||||
</template>
|
||||
<template #loginDate="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:user:update']"
|
||||
@click="handleUpdate(row)"
|
||||
>
|
||||
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:user:update']"
|
||||
@click="handleDetail(row)"
|
||||
>
|
||||
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:user:update-password']"
|
||||
@click="handleResetPwd(row)"
|
||||
>
|
||||
<Icon icon="ep:key" class="mr-1px" /> 重置密码
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:permission:assign-user-role']"
|
||||
@click="handleRole(row)"
|
||||
>
|
||||
<Icon icon="ep:key" class="mr-1px" /> 分配角色
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:user:delete']"
|
||||
@click="delList(row.id, false)"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Table>
|
||||
</el-card>
|
||||
</div>
|
||||
<XModal v-model="dialogVisible" :title="dialogTitle">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<Form
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
:rules="rules"
|
||||
:schema="allSchemas.formSchema"
|
||||
ref="formRef"
|
||||
>
|
||||
<template #deptId>
|
||||
<el-tree-select
|
||||
node-key="id"
|
||||
v-model="deptId"
|
||||
:props="defaultProps"
|
||||
:data="deptOptions"
|
||||
check-strictly
|
||||
/>
|
||||
</template>
|
||||
<template #postIds>
|
||||
<el-select v-model="postIds" multiple :placeholder="t('common.selectText')">
|
||||
<el-option
|
||||
v-for="item in postOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</Form>
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions
|
||||
v-if="actionType === 'detail'"
|
||||
:schema="allSchemas.detailSchema"
|
||||
:data="detailRef"
|
||||
>
|
||||
<template #deptId="{ row }">
|
||||
<span>{{ row.dept?.name }}</span>
|
||||
</template>
|
||||
<template #postIds="{ row }">
|
||||
<el-tag v-for="(post, index) in row.postIds" :key="index" index="">
|
||||
<template v-for="postObj in postOptions">
|
||||
{{ post === postObj.id ? postObj.name : '' }}
|
||||
</template>
|
||||
</el-tag>
|
||||
</template>
|
||||
</Descriptions>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<!-- 按钮：保存 -->
|
||||
<XButton
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
:loading="loading"
|
||||
@click="submitForm()"
|
||||
/>
|
||||
<!-- 按钮：关闭 -->
|
||||
<XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
|
||||
</template>
|
||||
</XModal>
|
||||
<!-- 分配用户角色 -->
|
||||
<XModal v-model="roleDialogVisible" title="分配角色">
|
||||
<el-form :model="userRole" label-width="80px">
|
||||
<el-form-item label="用户名称">
|
||||
<el-input v-model="userRole.username" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input v-model="userRole.nickname" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-transfer
|
||||
v-model="userRole.roleIds"
|
||||
:titles="['角色列表', '已选择']"
|
||||
:props="{
|
||||
key: 'id',
|
||||
label: 'name'
|
||||
}"
|
||||
:data="roleOptions"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<el-button type="primary" :loading="loading" @click="submitRole">
|
||||
{{ t('action.save') }}
|
||||
</el-button>
|
||||
<el-button @click="roleDialogVisible = false">{{ t('dialog.close') }}</el-button>
|
||||
</template>
|
||||
</XModal>
|
||||
<!-- 导入 -->
|
||||
<XModal v-model="importDialogVisible" :title="importDialogTitle">
|
||||
<el-form class="drawer-multiColumn-form" label-width="150px">
|
||||
<el-form-item label="模板下载 :">
|
||||
<el-button type="primary" @click="handleImportTemp">
|
||||
<Icon icon="ep:download" />
|
||||
点击下载
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件上传 :">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:action="updateUrl + '?updateSupport=' + updateSupport"
|
||||
:headers="uploadHeaders"
|
||||
:drag="true"
|
||||
:limit="1"
|
||||
:multiple="true"
|
||||
:show-file-list="true"
|
||||
:disabled="uploadDisabled"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="excelUploadError"
|
||||
:auto-upload="false"
|
||||
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
>
|
||||
<Icon icon="ep:upload-filled" />
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否更新已经存在的用户数据:">
|
||||
<el-checkbox v-model="updateSupport" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="submitFileForm">
|
||||
<Icon icon="ep:upload-filled" />
|
||||
{{ t('action.save') }}
|
||||
</el-button>
|
||||
<el-button @click="importDialogVisible = false">{{ t('dialog.close') }}</el-button>
|
||||
</template>
|
||||
</XModal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, unref, watch } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
@ -286,267 +546,6 @@ onMounted(async () => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-card class="w-1/5 user" :gutter="12" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>部门列表</span>
|
||||
<el-button link class="button" type="primary" @click="handleDeptEdit">
|
||||
修改部门
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-input v-model="filterText" placeholder="搜索部门" />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:data="deptOptions"
|
||||
:props="defaultProps"
|
||||
:highlight-current="true"
|
||||
:filter-node-method="filterNode"
|
||||
:expand-on-click-node="false"
|
||||
@node-click="handleDeptNodeClick"
|
||||
/>
|
||||
</el-card>
|
||||
<!-- 搜索工作区 -->
|
||||
<el-card class="w-4/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ tableTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<Search
|
||||
:schema="allSchemas.searchSchema"
|
||||
@search="setSearchParams"
|
||||
@reset="setSearchParams"
|
||||
ref="searchForm"
|
||||
/>
|
||||
<!-- 操作工具栏 -->
|
||||
<div class="mb-10px">
|
||||
<el-button type="primary" v-hasPermi="['system:user:create']" @click="handleAdd">
|
||||
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
v-hasPermi="['system:user:import']"
|
||||
@click="importDialogVisible = true"
|
||||
>
|
||||
<Icon icon="ep:upload" class="mr-5px" /> {{ t('action.import') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
v-hasPermi="['system:user:export']"
|
||||
@click="exportList('用户数据.xls')"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<Table
|
||||
:columns="allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="{
|
||||
total: tableObject.total
|
||||
}"
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
@register="register"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
@change="handleStatusChange(row)"
|
||||
/>
|
||||
</template>
|
||||
<template #loginDate="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:user:update']"
|
||||
@click="handleUpdate(row)"
|
||||
>
|
||||
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:user:update']"
|
||||
@click="handleDetail(row)"
|
||||
>
|
||||
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:user:update-password']"
|
||||
@click="handleResetPwd(row)"
|
||||
>
|
||||
<Icon icon="ep:key" class="mr-1px" /> 重置密码
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:permission:assign-user-role']"
|
||||
@click="handleRole(row)"
|
||||
>
|
||||
<Icon icon="ep:key" class="mr-1px" /> 分配角色
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:user:delete']"
|
||||
@click="delList(row.id, false)"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Table>
|
||||
</el-card>
|
||||
</div>
|
||||
<XModal v-model="dialogVisible" :title="dialogTitle">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<Form
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
:rules="rules"
|
||||
:schema="allSchemas.formSchema"
|
||||
ref="formRef"
|
||||
>
|
||||
<template #deptId>
|
||||
<el-tree-select
|
||||
node-key="id"
|
||||
v-model="deptId"
|
||||
:props="defaultProps"
|
||||
:data="deptOptions"
|
||||
check-strictly
|
||||
/>
|
||||
</template>
|
||||
<template #postIds>
|
||||
<el-select v-model="postIds" multiple :placeholder="t('common.selectText')">
|
||||
<el-option
|
||||
v-for="item in postOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</Form>
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions
|
||||
v-if="actionType === 'detail'"
|
||||
:schema="allSchemas.detailSchema"
|
||||
:data="detailRef"
|
||||
>
|
||||
<template #deptId="{ row }">
|
||||
<span>{{ row.dept?.name }}</span>
|
||||
</template>
|
||||
<template #postIds="{ row }">
|
||||
<el-tag v-for="(post, index) in row.postIds" :key="index" index="">
|
||||
<template v-for="postObj in postOptions">
|
||||
{{ post === postObj.id ? postObj.name : '' }}
|
||||
</template>
|
||||
</el-tag>
|
||||
</template>
|
||||
</Descriptions>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<!-- 按钮：保存 -->
|
||||
<XButton
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
:loading="loading"
|
||||
@click="submitForm()"
|
||||
/>
|
||||
<!-- 按钮：关闭 -->
|
||||
<XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
|
||||
</template>
|
||||
</XModal>
|
||||
<!-- 分配用户角色 -->
|
||||
<XModal v-model="roleDialogVisible" title="分配角色">
|
||||
<el-form :model="userRole" label-width="80px">
|
||||
<el-form-item label="用户名称">
|
||||
<el-input v-model="userRole.username" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input v-model="userRole.nickname" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-transfer
|
||||
v-model="userRole.roleIds"
|
||||
:titles="['角色列表', '已选择']"
|
||||
:props="{
|
||||
key: 'id',
|
||||
label: 'name'
|
||||
}"
|
||||
:data="roleOptions"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<el-button type="primary" :loading="loading" @click="submitRole">
|
||||
{{ t('action.save') }}
|
||||
</el-button>
|
||||
<el-button @click="roleDialogVisible = false">{{ t('dialog.close') }}</el-button>
|
||||
</template>
|
||||
</XModal>
|
||||
<!-- 导入 -->
|
||||
<XModal v-model="importDialogVisible" :title="importDialogTitle">
|
||||
<el-form class="drawer-multiColumn-form" label-width="150px">
|
||||
<el-form-item label="模板下载 :">
|
||||
<el-button type="primary" @click="handleImportTemp">
|
||||
<Icon icon="ep:download" />
|
||||
点击下载
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件上传 :">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:action="updateUrl + '?updateSupport=' + updateSupport"
|
||||
:headers="uploadHeaders"
|
||||
:drag="true"
|
||||
:limit="1"
|
||||
:multiple="true"
|
||||
:show-file-list="true"
|
||||
:disabled="uploadDisabled"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="excelUploadError"
|
||||
:auto-upload="false"
|
||||
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
>
|
||||
<Icon icon="ep:upload-filled" />
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否更新已经存在的用户数据:">
|
||||
<el-checkbox v-model="updateSupport" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="submitFileForm">
|
||||
<Icon icon="ep:upload-filled" />
|
||||
{{ t('action.save') }}
|
||||
</el-button>
|
||||
<el-button @click="importDialogVisible = false">{{ t('dialog.close') }}</el-button>
|
||||
</template>
|
||||
</XModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user {
|
||||
height: 900px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user