gitadmin/wms-naivevue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

岗位、职级、部门管理

Browse Source
This commit is contained in:
陈红丽 2024-11-14 16:14:13 +08:00
parent ef8dcd3cba
commit c5ff7daad7
19 changed files with 1684 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/icon/picker.vue
View File

@ -1,5 +1,5 @@
<template>
<n-popover :trigger="trigger" v-model:visible="visible">
<n-popover :trigger="trigger" v-model:show="visible">
<template #trigger>
<slot name="iconSelect"></slot>
</template>
@ -66,7 +66,6 @@ export default defineComponent({
}
watch(visible, () => {
searchValue.value = ''
iconArr.value = icons
})

42
src/components/pagination/index.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div class="pagination">
<n-pagination v-bind="props" v-model:page="pager.page"
:prefix="(pagingInfo) =>`共${pagingInfo.itemCount} 条`"
:showQuickJumper="pager.jumper?true:false"
v-model:pageSize="pager.size" :item-count="pager.count" @pageSize="sizeChange"
@update:page="pageChange"></n-pagination>
</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
interface Props {
modelValue?: Record<string, any>,
}
const props = withDefaults(defineProps<Props>(), {
modelValue: () => ({}),
})
const emit = defineEmits<{
(event: 'change'): void
(event: 'update:modelValue', value: any): void
}>()
const pager = computed({
get() {
return props.modelValue
},
set(value) {
console.log(value)
emit('update:modelValue', value)
}
})
const sizeChange = () => {
pager.value.page = 1
emit('change')
}
const pageChange = (e) => {
emit('change')
}
</script>

68
src/views/system/dept/columns.ts Normal file
View File

@ -0,0 +1,68 @@
import { h } from 'vue';
import {NTag } from 'naive-ui';
export const columns = [
{
title: '部门名称',
key: 'name',
width: 200,
},
{
title: '部门类型',
key: 'type',
width: 100,
render(record) {
let typeText = '';
let color = '';
switch (record.type) {
case 1:
typeText = '公司';
color = 'success';
break;
case 2:
typeText = '子公司';
color = 'primary';
break;
case 3:
typeText = '部门';
color = 'warning';
break;
case 4:
typeText = '小组';
color = '';
break;
default:
break;
}
return h(
NTag,
{
type: color,
},
{
default: () => typeText,
},
);
},
},
{
title: '部门排序',
key: 'sort',
width: 100,
},
{
title: '部门备注',
key: 'note',
width: 100,
},
{
title: '创建人',
key: 'createUser',
width: 100,
},
{
title: '创建时间',
key: 'createTime',
width: 180,
}
];

180
src/views/system/dept/edit.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
@on-close="handleClose">
<template #default>
<n-form ref="formRef" :model="formData" label-placement="left" label-width='80px'>
<n-form-item label="部门类型" path="type">
<n-select v-model:value="formData.type" class="flex-1" clearable :options="optionData.deptTypeList"
label-field="name" value-field="id" placeholder="请选择部门类型" />
</n-form-item>
<n-form-item label="父级部门" path="parentId"
:rule="{ type: 'number', required: true, message: '请选择父级部门', trigger: 'change' }">
<n-tree-select class="flex-1" v-model:value="formData.parentId" :options="deptOptions" clearable
default-expand-all label-field="name" key-field="id" placeholder="请选择父级菜单" />
</n-form-item>
<n-form-item label="部门名称" path="name" :rule="{ required: true, message: '请输入部门名称', trigger: 'blur' }">
<n-input v-model:value="formData.name" placeholder="请输入部门名称" clearable />
</n-form-item>
<n-form-item label="部门排序" path="sort" class="flex-1">
<div>
<n-input-number v-model:value="formData.sort" :max="9999" />
<div class="form-tips">数值越小越排前</div>
</div>
</n-form-item>
<n-form-item label="部门备注" path="note">
<n-input type="textarea" class="flex-1" v-model:value="formData.note" placeholder="请输入部门名称" clearable />
</n-form-item>
</n-form>
</template>
</basicModal>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'ant-design-vue';
import { deptAdd, deptUpdate, getDeptList, getDeptDetail } from '@/api/system/dept';
import { onMounted, reactive, ref, shallowRef } from 'vue';
import { buildTree } from '@/utils/auth';
import { useMessage, useDialog } from 'naive-ui';
import { useModal } from '@/components/Modal';
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
deptId: {
type: Number,
required: true,
default: 0,
},
pid: {
type: Number,
default: 0,
},
});
/**
* 定义选项数据
*/
const optionData = reactive({
deptTypeList: [
{
id: 1,
name: '公司',
},
{
id: 2,
name: '子公司',
},
{
id: 3,
name: '部门',
},
{
id: 4,
name: '小组',
},
],
});
/**
* 定义参数变量
*/
const message = useMessage();
const expandedKeys = ref([]);
const emit = defineEmits(['success', 'update:visible']);
const formRef = shallowRef<FormInstance>();
/**
* 定义表单参数
*/
const formData = reactive({
id: '',
//父级id
parentId: 0,
//类型
type: 1,
//名称
name: '',
//排序
sort: 0,
note: '',
});
const [modalRegister, { openModal, setSubLoading }] = useModal({
title: props.deptId ? '编辑部门' : "添加部门",
subBtuText: '确定',
width: 600,
});
/**
* 关闭窗体
*/
const handleClose = () => {
emit('update:visible', false);
};
const deptOptions = ref<any[]>([]);
/**
* 获取部门数据
*/
const getDept = async () => {
const data: any = await getDeptList();
data.map((item) => {
expandedKeys.value.push(item.id);
});
const menu: any = [{ id: 0, name: '顶级', children: [] }];
const lists = buildTree(data);
menu[0].children.push(...lists);
deptOptions.value = menu;
};
/**
* 执行提交表单
*/
const handleSubmit = async () => {
formRef.value.validate().then(async () => {
props.deptId ? await deptUpdate(formData) : await deptAdd(formData);
message.success('操作成功');
setSubLoading(false)
emit('update:visible', false);
emit('success');
}).catch((error) => {
setSubLoading(false);
});
};
/**
* 设置表单数据
*/
const setFormData = (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
formData[key] = data[key];
}
}
};
const getDetail = async () => {
const data = await getDeptDetail(props.deptId);
setFormData(data);
};
/**
* 钩子函数
*/
onMounted(() => {
getDept();
if (props.deptId) {
getDetail();
} else {
formData.parentId = props.pid;
}
});
//导出方法
defineExpose({
openModal
});
</script>

164
src/views/system/dept/index.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<div class="menu-index">
<n-card :bordered="false" class="pt-3 mb-3 proCard">
<n-spin :show="loading">
<BasicTable ref="tableRef" :columns="columns" :paginate-single-page="false" :request="loadDataTable"
:row-key="(row) => row.id" :autoScrollX="true" :actionColumn="actionColumn"
v-model:expanded-row-keys="expandKeys">
<template #tableTitle>
<n-space>
<n-button type="primary" @click="handleAdd()" v-perm="['sys:dept:add']">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
新增
</n-button>
<n-button @click="handleExpand"> 展开/折叠 </n-button>
</n-space>
</template>
</BasicTable>
</n-spin>
</n-card>
<editDialog ref="createModalRef" v-if="editVisible" :deptId="deptId" :pid="pid" v-model:visible="editVisible"
@success="loadDataTable" />
</div>
</template>
<script lang="ts" setup name="menus">
import { defineAsyncComponent, nextTick, onMounted, ref, reactive, h } from 'vue';
import { PlusOutlined, EditOutlined, DeleteOutlined, FormOutlined } from '@vicons/antd';
import { BasicTable, TableAction } from '@/components/Table';
import { renderIcon } from '@/utils';
import editDialog from './edit.vue';
import { getDeptList, deptDelete } from '@/api/system/dept';
import { getTreeValues } from '@/utils/helper/treeHelper';
import { useMessage, useDialog } from 'naive-ui';
import { columns } from './columns';
import { buildTree } from '@/utils/auth';
/**
* 定义参数变量
*/
const message = useMessage();
const dialog = useDialog()
const tableRef = ref();
const loading = ref(false);
const editVisible = ref(false);
const expandKeys = ref([]);
const createModalRef = ref();
const deptId = ref(0);
const pid = ref(0);
const actionColumn = reactive({
width: 220,
title: '操作',
align:'center',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '新增',
type: 'info',
icon: renderIcon(PlusOutlined),
auth: ['sys:dept:add'],
onclick: handleAdd.bind(null, record),
},
{
label: '编辑',
type: 'warning',
icon: renderIcon(FormOutlined),
auth: ['sys:dept:update'],
onclick: handleEdit.bind(null, record),
},
{
label: '删除',
type: 'error',
icon: renderIcon(DeleteOutlined),
auth: ['sys:dept:delete'],
onclick: handleDelete.bind(null, record),
},
],
});
},
});
/**
* 获取部门列表
*/
const loadDataTable = async (res) => {
const data = await getDeptList();
data.map((item) => {
item.key = item.id;
});
const result = {
records: buildTree(data),
total: 1
}
return result
};
/**
* 执行添加
*/
const handleAdd = async (record: any) => {
deptId.value = 0;
pid.value = record ? record.parentId : 0;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
};
/**
* 执行编辑
* @param data 参数
*/
const handleEdit = async (data: any) => {
deptId.value = data.id;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
};
/**
* 执行删除
* @param id 菜单ID
*/
const handleDelete = (row: number) => {
dialog.warning({
title: '提示',
content: '确定要删除？',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
loading.value = true;
await deptDelete(row.id);
message.success('删除成功');
loadDataTable()
loading.value = false;
},
})
};
/**
* 执行扩展、收缩
*/
const handleExpand = () => {
loading.value = true;
if (!expandKeys.value.length) {
expandKeys.value = getTreeValues(tableRef.value.getDataSource(), 'id');
loading.value = false;
} else {
expandKeys.value = [];
loading.value = false;
}
};
</script>
<style scoped></style>

51
src/views/system/level/columns.ts Normal file
View File

@ -0,0 +1,51 @@
import { h } from 'vue';
import { NTag } from 'naive-ui';
export const columns = [
{
type: 'selection',
width: 50,
fixed:"left"
},
{
title: 'ID',
key:'id',
fixed: 'left',
width: 50,
},
{
title: '职级名称',
key:'name',
width: 100,
},
{
title: '职级状态',
width: 100,
render(record) {
return h(
NTag,
{
type: record.status == 1 ? 'success' : 'error',
},
{
default: () => (record.status == 1 ? '正常' : '停用'),
},
);
},
},
{
title: '排序',
key: 'sort',
width: 100,
},
{
title: '创建人',
key: 'createUser',
width: 100,
},
{
title: '创建时间',
key: 'createTime',
width: 180,
}
];

109
src/views/system/level/edit.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
@on-close="handleClose">
<template #default>
<n-form class="ls-form" ref="formRef" :model="formData" label-placement="left" label-width="85px">
<n-form-item label="职级名称" path="name" :rule="{ required: true, message: '请输入职级名称', trigger: 'blur' }">
<n-input v-model:value="formData.name" placeholder="请输入职级名称" clearable />
</n-form-item>
<n-form-item label="职级状态" path="code">
<n-radio-group v-model:value="formData.status" name="status">
<n-radio :value="1">正常</n-radio>
<n-radio :value="2">停用</n-radio>
</n-radio-group>
</n-form-item>
<n-form-item label="排序" path="sort">
<n-input-number v-model:value="formData.sort" />
</n-form-item>
</n-form>
</template>
</basicModal>
</template>
<script lang="ts" setup>
import { getLevelDetail, levelAdd, levelUpdate } from '@/api/system/level';
import { onMounted, reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { useModal } from '@/components/Modal';
const emit = defineEmits(['success', 'update:visible']);
const formRef = ref();
/**
* 定义表单参数
*/
const message = useMessage();
const formData = reactive({
id: '',
name: '',
status: 1,
sort: 0,
});
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
levelId: {
type: Number,
required: true,
default: 0,
},
});
const [modalRegister, { openModal, setSubLoading }] = useModal({
title: props.levelId ? '编辑职级' : "添加职级",
subBtuText: '确定',
width: 600,
});
/**
* 执行提交
*/
const handleSubmit = async () => {
formRef.value.validate().then(async () => {
props.levelId ? await levelUpdate(formData) : await levelAdd(formData);
message.success('操作成功');
emit('update:visible', false);
emit('success');
}).catch((error) => {
setSubLoading(false);
});
};
/**
* 关闭窗体
*/
const handleClose = () => {
emit('update:visible', false);
};
/**
* 设置表单数据
*/
const setFormData = async () => {
const data = await getLevelDetail(props.levelId);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
}
}
};
/**
* 钩子函数
*/
onMounted(() => {
if (props.levelId) {
setFormData();
}
});
//导出方法
defineExpose({
openModal,
});
</script>

217
src/views/system/level/index.vue Normal file
View File

@ -0,0 +1,217 @@
<template>
<div>
<n-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
<template #statusSlot="{ model, field }">
<n-input v-model:value="model[field]" />
</template>
</BasicForm>
</n-card>
<n-card :bordered="false" class="proCard">
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
<template #tableTitle>
<n-space>
<n-button type="primary" @click="handleAdd" v-perm="['sys:level:add']">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
新建
</n-button>
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length" v-perm="['sys:level:batchDelete']">
<template #icon>
<n-icon>
<DeleteOutlined />
</n-icon>
</template>
删除
</n-button>
<n-button @click="importVisible = true" v-perm="['sys:level:import']">
<template #icon>
<n-icon>
<ToTopOutlined />
</n-icon>
</template>
导入
</n-button>
<n-button @click="handleExport" :loading="exportLoading" :disabled="exportLoading"
v-perm="['sys:level:export']">
<template #icon>
<n-icon>
<DownloadOutlined />
</n-icon>
</template>
导出
</n-button>
</n-space>
</template>
</BasicTable>
</n-card>
<editDialog ref="createModalRef" :levelId="levelId" v-if="editVisible" v-model:visible="editVisible"
@success="reloadTable('noRefresh')" />
<userUpload v-if="importVisible" v-model:visible="importVisible" @success="reloadTable()" />
</div>
</template>
<script lang="ts" setup>
import { h, nextTick, reactive, ref, unref } from 'vue';
import { useMessage, useDialog } from 'naive-ui';
import { TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { getLevelList, levelDelete, levelBatchDelete, levelExport } from '@/api/system/level';
import { columns } from './columns';
import {
PlusOutlined,
DeleteOutlined,
DownloadOutlined,
ToTopOutlined,
FormOutlined
} from '@vicons/antd';
import CreateModal from './CreateModal.vue';
import editDialog from './edit.vue';
import userUpload from './userUpload.vue';
import { basicModal, useModal } from '@/components/Modal';
import { schemas } from './querySchemas';
import { renderIcon } from '@/utils';
const message = useMessage();
const dialog = useDialog()
const basicTableRef = ref();
const createModalRef = ref();
const editVisible = ref(false);
const levelId = ref(0);
const rowKeys = ref([]);
const importVisible = ref(false)
const exportLoading = ref(false);
const showModal = ref(false);
const formParams = reactive({
name: '',
status: '',
});
const actionColumn = reactive({
width: 400,
title: '操作',
align: 'center',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '编辑',
icon: renderIcon(FormOutlined),
type: 'info',
onClick: handleEdit.bind(null, record),
auth: ['sys:level:update'],
},
{
label: '删除',
icon: renderIcon(DeleteOutlined),
type: 'error',
onClick: handleDelete.bind(null, record),
auth: ['sys:level:delete'],
},
],
});
},
});
function addTable() {
showModal.value = true;
}
const loadDataTable = async (res) => {
const result = await getLevelList({ ...formParams, ...res });
return result;
};
function onCheckedRow(keys) {
rowKeys.value = keys;
}
function reloadTable(noRefresh = '') {
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
}
function handleSubmit(values: Recordable) {
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable();
}
function handleReset(values: Recordable) {
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable();
}
const [register, { }] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 80,
schemas,
});
/**
* 执行添加
*/
const handleAdd = async () => {
levelId.value = 0;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
};
/**
* 执行编辑
*/
async function handleEdit(record: Recordable) {
levelId.value = record.id;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
}
/**
* 执行删除
* @param id 参数
*/
async function handleDelete(record) {
dialog.warning({
title: '提示',
content: '确定要删除？',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
record.id ? await levelDelete(record.id) : await levelBatchDelete(rowKeys.value);
message.success('删除成功');
reloadTable();
},
})
}
/**
* 执行导出
*/
const handleExport = async () => {
exportLoading.value = true;
const data = await levelExport();
window.open(data);
exportLoading.value = false;
message.success('导出成功');
};
</script>
<style lang="less" scoped></style>

30
src/views/system/level/querySchemas.ts Normal file
View File

@ -0,0 +1,30 @@
import { FormSchema } from '@/components/Form/index';
export const schemas: FormSchema[] = [
{
field: 'name',
component: 'NInput',
label: '租户名称',
componentProps: {
placeholder: '请输入租户名称',
},
},
{
field: 'status',
component: 'NSelect',
label: '状态',
componentProps: {
placeholder: '请选择状态',
clearable: true,
options: [
{
label: '正常',
value: '0',
},
{
label: '禁用',
value: '1',
},
],
},
},
];

132
src/views/system/level/userUpload.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<n-modal
v-model:show="props.visible"
preset="dialog"
style="width:450px;"
@close="dialogClose"
positive-text="确定"
negative-text="取消"
@positive-click="dialogSubmit"
@negative-click="dialogClose"
>
<template #header>
{{ dialogTitle }}
</template>
<n-upload
action="/api/level/import"
:headers="uploadHeaders"
name="file"
ref="uploadRef"
:default-upload="false"
@change="handleChange"
@before-upload="beforeUpload"
v-model:file-list="fileList"
:max="1"
v-perm="['sys:level:import']"
>
<n-upload-dragger>
<n-icon size="60" color="#165df">
<CloudUploadOutlined/>
</n-icon>
<div> 点击或将文件拖拽到这里上传</div>
</n-upload-dragger>
</n-upload>
<div style="margin-top: 20px">
<span>只能上传 xls、xlsx 文件</span>
<!-- <n-button quaternary type="info" @click="handleDownload">下载模板</n-button> -->
</div>
</n-modal>
</template>
<script lang="ts" setup>
import { getTemplateByCode } from '@/api/system/user';
import { computed, reactive, ref } from 'vue';
import { CloudUploadOutlined } from '@vicons/antd';
import { useMessage } from 'naive-ui';
import { useUserStore } from '@/store/modules/user';
import type { UploadChangeParam } from 'ant-design-vue';
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
}
});
/**
* 定义参数变量
*/
const uploadHeaders = reactive({
authorization: useUserStore().getToken,
});
const message = useMessage();
const uploadRef = ref();
const fileList = ref([]);
const emit = defineEmits(['success', 'update:visible']);
/**
* 定义弹窗标题
*/
const dialogTitle = computed(() => {
return '导入职级';
});
/**
* 关闭窗体
*/
const dialogClose = () => {
emit('update:visible', false);
};
/**
* 上传文件之前验证
*/
const beforeUpload = (file) => {
const isLt2M = file.size / 1024 / 1024 < 200;
if (!isLt2M) {
message.warning('大小不能超过200MB!');
return false;
}
if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
message.warning('请上传.xlsx .xls');
return false;
}
return true;
};
/**
* 执行上传文件
* @param param0 参数
*/
const handleChange = ({ file }: UploadChangeParam) => {
const status = file.status;
if (status === 'done') {
let data = file.response;
if (data.code != 0) {
message.error(data.msg || '导入失败');
} else {
message.success('导入成功');
emit('update:visible', false);
emit('success');
}
} else if (status === 'error') {
message.error('导入失败');
}
};
/**
* 执行下载文件
*/
const handleDownload = async () => {
const res = await getTemplateByCode('user_import');
window.open(res.filePath);
};
const dialogSubmit = async()=>{
uploadRef.value?.submit()
}
</script>

52
src/views/system/position/columns.ts Normal file
View File

@ -0,0 +1,52 @@
import { h } from 'vue';
import { NTag } from 'naive-ui';
export const columns = [
{
type: 'selection',
width: 50,
fixed:"left"
},
{
title: 'ID',
key: 'id',
fixed: 'left',
width: 50,
},
{
title: '岗位名称',
key: 'name',
width: 100,
},
{
title: '岗位状态',
key: 'status',
width: 100,
render(record) {
return h(
NTag,
{
type: record.status == 1 ? 'success' : 'error',
},
{
default: () => (record.status == 1 ? '正常' : '停用'),
},
);
},
},
{
title: '排序',
key: 'sort',
width: 100,
},
{
title: '创建人',
key: 'createUser',
width: 100,
},
{
title: '创建时间',
key: 'createTime',
width: 180,
}
];

109
src/views/system/position/edit.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
@on-close="handleClose">
<template #default>
<n-form class="ls-form" ref="formRef" :model="formData" label-placement="left" label-width="85px">
<n-form-item label="职级名称" path="name" :rule="{ required: true, message: '请输入职级名称', trigger: 'blur' }">
<n-input v-model:value="formData.name" placeholder="请输入职级名称" clearable />
</n-form-item>
<n-form-item label="职级状态" path="code">
<n-radio-group v-model:value="formData.status" name="status">
<n-radio :value="1">正常</n-radio>
<n-radio :value="2">停用</n-radio>
</n-radio-group>
</n-form-item>
<n-form-item label="排序" path="sort">
<n-input-number v-model:value="formData.sort" />
</n-form-item>
</n-form>
</template>
</basicModal>
</template>
<script lang="ts" setup>
import { getPositionDetail, positionAdd, positionUpdate } from '@/api/system/position';
import { onMounted, reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { useModal } from '@/components/Modal';
const emit = defineEmits(['success', 'update:visible']);
const formRef = ref();
/**
* 定义表单参数
*/
const message = useMessage();
const formData = reactive({
id: '',
name: '',
status: 1,
sort: 0,
});
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
positionId: {
type: Number,
required: true,
default: 0,
},
});
const [modalRegister, { openModal, setSubLoading }] = useModal({
title: props.positionId ? '编辑岗位' : "添加岗位",
subBtuText: '确定',
width: 600,
});
/**
* 执行提交
*/
const handleSubmit = async () => {
formRef.value.validate().then(async () => {
props.positionId ? await positionUpdate(formData) : await positionAdd(formData);
message.success('操作成功');
emit('update:visible', false);
emit('success');
}).catch((error) => {
setSubLoading(false);
});
};
/**
* 关闭窗体
*/
const handleClose = () => {
emit('update:visible', false);
};
/**
* 设置表单数据
*/
const setFormData = async () => {
const data = await getPositionDetail(props.positionId);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
}
}
};
/**
* 钩子函数
*/
onMounted(() => {
if (props.positionId) {
setFormData();
}
});
//导出方法
defineExpose({
openModal,
});
</script>

180
src/views/system/position/index.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<div>
<n-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
<template #statusSlot="{ model, field }">
<n-input v-model:value="model[field]" />
</template>
</BasicForm>
</n-card>
<n-card :bordered="false" class="proCard">
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
<template #tableTitle>
<n-space>
<n-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
新建
</n-button>
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length" v-perm="['sys:position:batchDelete']">
<template #icon>
<n-icon>
<DeleteOutlined />
</n-icon>
</template>
删除
</n-button>
</n-space>
</template>
</BasicTable>
</n-card>
<editDialog ref="createModalRef" :positionId="positionId" v-if="editVisible" v-model:visible="editVisible"
@success="reloadTable('noRefresh')" />
</div>
</template>
<script lang="ts" setup>
import { h, nextTick, reactive, ref, unref } from 'vue';
import { useMessage, useDialog } from 'naive-ui';
import { TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { getPositionList, positionDelete, positionBatchDelete } from '@/api/system/position';
import { columns } from './columns';
import {PlusOutlined,DeleteOutlined,FormOutlined} from '@vicons/antd';
import CreateModal from './CreateModal.vue';
import editDialog from './edit.vue';
import { basicModal, useModal } from '@/components/Modal';
import { schemas } from './querySchemas';
import { renderIcon } from '@/utils';
const message = useMessage();
const dialog = useDialog()
const basicTableRef = ref();
const createModalRef = ref();
const editVisible = ref(false);
const positionId = ref(0);
const rowKeys = ref([]);
const exportLoading = ref(false);
const showModal = ref(false);
const formParams = reactive({
name: '',
status: '',
});
const actionColumn = reactive({
width: 400,
title: '操作',
align:'center',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '编辑',
icon: renderIcon(FormOutlined),
type: 'info',
onClick: handleEdit.bind(null, record),
auth: ['sys:position:update'],
},
{
label: '删除',
icon: renderIcon(DeleteOutlined),
type: 'error',
onClick: handleDelete.bind(null, record),
auth: ['sys:position:delete'],
},
],
});
},
});
function addTable() {
showModal.value = true;
}
const loadDataTable = async (res) => {
const result = await getPositionList({ ...formParams, ...res });
return result;
};
function onCheckedRow(keys) {
rowKeys.value = keys;
}
function reloadTable(noRefresh = '') {
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
}
function handleSubmit(values: Recordable) {
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable();
}
function handleReset(values: Recordable) {
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable();
}
const [register, { }] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 80,
schemas,
});
/**
* 执行添加
*/
const handleAdd = async () => {
positionId.value = 0;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
};
/**
* 执行编辑
*/
async function handleEdit(record: Recordable) {
positionId.value = record.id;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
}
/**
* 执行删除
* @param id 参数
*/
async function handleDelete(record) {
dialog.warning({
title: '提示',
content: '确定要删除？',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
record.id ? await positionDelete(record.id) : await positionBatchDelete(rowKeys.value);
message.success('删除成功');
reloadTable();
},
})
}
</script>
<style lang="less" scoped></style>

30
src/views/system/position/querySchemas.ts Normal file
View File

@ -0,0 +1,30 @@
import { FormSchema } from '@/components/Form/index';
export const schemas: FormSchema[] = [
{
field: 'name',
component: 'NInput',
label: '岗位名称',
componentProps: {
placeholder: '请输入岗位名称',
},
},
{
field: 'status',
component: 'NSelect',
label: '状态',
componentProps: {
placeholder: '请选择状态',
clearable: true,
options: [
{
label: '正常',
value: '1',
},
{
label: '停用',
value: '2',
},
],
},
},
];

52
src/views/system/role/columns.ts
View File

@ -1,37 +1,45 @@
import { h } from 'vue';
import { NTag } from 'naive-ui';
import { BasicColumn } from '@/components/Table';
export const columns: BasicColumn[] = [
export const columns = [
{
title: 'id',
type: 'selection',
width: 50,
fixed:"left"
},
{
title: 'ID',
key: 'id',
fixed: 'left',
width: 50,
},
{
title: '角色名称',
key: 'name',
width: 150,
},
{
title: '说明',
key: 'explain',
title: '角色编码',
key: 'code',
width: 250,
},
{
title: '是否默认角色',
key: 'isDefault',
render(row) {
return h(
NTag,
{
type: row.isDefault ? 'success' : 'error',
},
{
default: () => (row.isDefault ? '是' : '否'),
},
);
},
title: '排序',
key: 'sort',
width: 100,
},
{
title: '备注',
key: 'note',
width: 200,
},
{
title: '创建人',
key: 'createUser',
width: 100,
},
{
title: '创建时间',
key: 'create_date',
},
];
key: 'createTime',
width: 180,
}
];

110
src/views/system/role/edit.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
@on-close="handleClose">
<template #default>
<n-form class="ls-form" ref="formRef" :model="formData" label-placement="left" label-width="85px">
<n-form-item label="角色名称" path="name" :rule="{ required: true, message: '请输入角色名称', trigger: 'blur' }">
<n-input v-model:value="formData.name" placeholder="请输入角色名称" clearable />
</n-form-item>
<n-form-item label="角色编码" path="code" :rule="{ required: true, message: '请输入角色编码', trigger: 'blur' }">
<n-input v-model:value="formData.code" placeholder="请输入角色编码" clearable />
</n-form-item>
<n-form-item label="排序" path="sort">
<n-input-number v-model:value="formData.sort" />
</n-form-item>
<n-form-item label="备注" path="note">
<n-input v-model:value="formData.note" type="textarea" placeholder="请输入备注" clearable />
</n-form-item>
</n-form>
</template>
</basicModal>
</template>
<script lang="ts" setup>
import { getRoleDetail, roleAdd, roleUpdate } from '@/api/system/role';
import { onMounted, reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { useModal } from '@/components/Modal';
const emit = defineEmits(['success', 'update:visible']);
const formRef = ref();
/**
* 定义表单参数
*/
const message = useMessage();
const formData = reactive({
id: '',
name: '',
code: '',
sort: 0,
note: '',
});
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
roleId: {
type: Number,
required: true,
default: 0,
},
});
const [modalRegister, { openModal, setSubLoading }] = useModal({
title: props.roleId ? '编辑角色' : "添加角色",
subBtuText: '确定',
width: 600,
});
/**
* 执行提交
*/
const handleSubmit = async () => {
formRef.value.validate().then(async () => {
props.roleId ? await roleUpdate(formData) : await roleAdd(formData);
message.success('操作成功');
emit('update:visible', false);
emit('success');
}).catch((error) => {
setSubLoading(false);
});
};
/**
* 关闭窗体
*/
const handleClose = () => {
emit('update:visible', false);
};
/**
* 设置表单数据
*/
const setFormData = async () => {
const data = await getRoleDetail(props.roleId);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
}
}
};
/**
* 钩子函数
*/
onMounted(() => {
if (props.roleId) {
setFormData();
}
});
//导出方法
defineExpose({
openModal,
});
</script>

179
src/views/system/role/index.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<div>
<n-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
<template #statusSlot="{ model, field }">
<n-input v-model:value="model[field]" />
</template>
</BasicForm>
</n-card>
<n-card :bordered="false" class="proCard">
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
<template #tableTitle>
<n-space>
<n-button type="primary" @click="handleAdd" v-perm="['sys:role:add']">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
新建
</n-button>
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length" v-perm="['sys:role:batchDelete']">
<template #icon>
<n-icon>
<DeleteOutlined />
</n-icon>
</template>
删除
</n-button>
</n-space>
</template>
</BasicTable>
</n-card>
<editDialog ref="createModalRef" :roleId="roleId" v-if="editVisible" v-model:visible="editVisible"
@success="reloadTable('noRefresh')" />
</div>
</template>
<script lang="ts" setup>
import { h, nextTick, reactive, ref, unref } from 'vue';
import { useMessage, useDialog } from 'naive-ui';
import { TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { getRoleList, roleDelete, roleBatchDelete } from '@/api/system/role';
import { columns } from './columns';
import {PlusOutlined,DeleteOutlined,FormOutlined} from '@vicons/antd';
import CreateModal from './CreateModal.vue';
import editDialog from './edit.vue';
import { basicModal, useModal } from '@/components/Modal';
import { schemas } from './querySchemas';
import { renderIcon } from '@/utils';
const message = useMessage();
const dialog = useDialog()
const basicTableRef = ref();
const createModalRef = ref();
const editVisible = ref(false);
const roleId = ref(0);
const rowKeys = ref([]);
const exportLoading = ref(false);
const showModal = ref(false);
const formParams = reactive({
name: ''
});
const actionColumn = reactive({
width: 200,
title: '操作',
align:'center',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '编辑',
icon: renderIcon(FormOutlined),
type: 'info',
onClick: handleEdit.bind(null, record),
auth: ['sys:role:update'],
},
{
label: '删除',
icon: renderIcon(DeleteOutlined),
type: 'error',
onClick: handleDelete.bind(null, record),
auth: ['sys:role:delete'],
},
],
});
},
});
function addTable() {
showModal.value = true;
}
const loadDataTable = async (res) => {
const result = await getRoleList({ ...formParams, ...res });
return result;
};
function onCheckedRow(keys) {
rowKeys.value = keys;
}
function reloadTable(noRefresh = '') {
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
}
function handleSubmit(values: Recordable) {
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable();
}
function handleReset(values: Recordable) {
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable();
}
const [register, { }] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 80,
schemas,
});
/**
* 执行添加
*/
const handleAdd = async () => {
roleId.value = 0;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
};
/**
* 执行编辑
*/
async function handleEdit(record: Recordable) {
roleId.value = record.id;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
}
/**
* 执行删除
* @param id 参数
*/
async function handleDelete(record) {
dialog.warning({
title: '提示',
content: '确定要删除？',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
record.id ? await roleDelete(record.id) : await roleBatchDelete(rowKeys.value);
message.success('删除成功');
reloadTable();
},
})
}
</script>
<style lang="less" scoped></style>

233
src/views/system/role/role.vue
View File

@ -1,233 +0,0 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="角色权限管理">
页面数据为 Mock 示例数据，非真实数据。
</n-card>
</div>
<n-card :bordered="false" class="mt-3 proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
@update:checked-row-keys="onCheckedRow"
>
<template #tableTitle>
<n-button type="primary" @click="openCreateDrawer">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
添加角色
</n-button>
</template>
<template #action>
<TableAction />
</template>
</BasicTable>
</n-card>
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" :title="editRoleTitle">
<div class="py-3 menu-list">
<n-tree
block-line
cascade
checkable
:virtual-scroll="true"
:data="treeData"
:expandedKeys="expandedKeys"
:checked-keys="checkedKeys"
style="max-height: 950px; overflow: hidden"
@update:checked-keys="checkedTree"
@update:expanded-keys="onExpandedKeys"
/>
</div>
<template #action>
<n-space>
<n-button type="info" ghost icon-placement="left" @click="packHandle">
全部{{ expandedKeys.length ? '收起' : '展开' }}
</n-button>
<n-button type="info" ghost icon-placement="left" @click="checkedAllHandle">
全部{{ checkedAll ? '取消' : '选择' }}
</n-button>
<n-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>
</n-space>
</template>
</n-modal>
<CreateDrawer
ref="createDrawerRef"
:title="drawerTitle"
:permissionList="treeData"
@change="reloadTable"
/>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, unref, h, onMounted } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
import { getRoleList } from '@/api/system/role';
import { getMenuList } from '@/api/system/menu';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import { getTreeAll } from '@/utils';
import CreateDrawer from './CreateDrawer.vue';
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const showModal = ref(false);
const formBtnLoading = ref(false);
const checkedAll = ref(false);
const editRoleTitle = ref('');
const treeData = ref([]);
const expandedKeys = ref([]);
const checkedKeys = ref(['console', 'step-form']);
const createDrawerRef = ref();
const drawerTitle = ref('添加角色');
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
const actionColumn: BasicColumn = reactive({
width: 250,
title: '操作',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '菜单权限',
onClick: handleMenuAuth.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
auth: ['basic_list'],
},
{
label: '删除',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
],
});
},
});
const loadDataTable = async (res: any) => {
let _params = {
...unref(params),
...res,
};
return await getRoleList(_params);
};
function openCreateDrawer() {
const { openDrawer } = createDrawerRef.value;
openDrawer();
}
function onCheckedRow(rowKeys: any[]) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload();
}
function confirmForm(e: any) {
e.preventDefault();
formBtnLoading.value = true;
formRef.value.validate((errors) => {
if (!errors) {
message.success('新建成功');
setTimeout(() => {
showModal.value = false;
reloadTable();
});
} else {
message.error('请填写完整信息');
}
formBtnLoading.value = false;
});
}
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
drawerTitle.value = '编辑角色';
const { openDrawer } = createDrawerRef.value;
openDrawer(record.roleId);
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
message.info('点击了删除');
}
function handleMenuAuth(record: Recordable) {
editRoleTitle.value = `分配 ${record.name} 的菜单权限`;
checkedKeys.value = record.menu_keys;
showModal.value = true;
}
function checkedTree(keys) {
checkedKeys.value = [checkedKeys.value, ...keys];
}
function onExpandedKeys(keys) {
expandedKeys.value = keys;
}
function packHandle() {
if (expandedKeys.value.length) {
expandedKeys.value = [];
} else {
expandedKeys.value = treeData.value.map((item: any) => item.key) as [];
}
}
function checkedAllHandle() {
if (!checkedAll.value) {
checkedKeys.value = getTreeAll(treeData.value);
checkedAll.value = true;
} else {
checkedKeys.value = [];
checkedAll.value = false;
}
}
onMounted(async () => {
const treeMenuList = await getMenuList();
expandedKeys.value = treeMenuList.list.map((item) => item.key);
treeData.value = treeMenuList.list;
});
</script>
<style lang="less" scoped></style>

8
src/views/system/role/types/index.ts
View File

@ -1,8 +0,0 @@
export interface formParamsType {
roleId?: number | null;
roleName: string;
roleCode: string;
remark: string;
permissions: number[];
permissionKeys: number[];
}