岗位、职级、部门管理
This commit is contained in:
parent
ef8dcd3cba
commit
c5ff7daad7
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-popover :trigger="trigger" v-model:visible="visible">
|
<n-popover :trigger="trigger" v-model:show="visible">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<slot name="iconSelect"></slot>
|
<slot name="iconSelect"></slot>
|
||||||
</template>
|
</template>
|
||||||
@ -66,7 +66,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
watch(visible, () => {
|
watch(visible, () => {
|
||||||
|
|
||||||
searchValue.value = ''
|
searchValue.value = ''
|
||||||
iconArr.value = icons
|
iconArr.value = icons
|
||||||
})
|
})
|
||||||
|
|||||||
42
src/components/pagination/index.vue
Normal file
42
src/components/pagination/index.vue
Normal 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
68
src/views/system/dept/columns.ts
Normal 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
180
src/views/system/dept/edit.vue
Normal 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
164
src/views/system/dept/index.vue
Normal 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
51
src/views/system/level/columns.ts
Normal 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
109
src/views/system/level/edit.vue
Normal 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
217
src/views/system/level/index.vue
Normal 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
30
src/views/system/level/querySchemas.ts
Normal 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
132
src/views/system/level/userUpload.vue
Normal 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
52
src/views/system/position/columns.ts
Normal 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
109
src/views/system/position/edit.vue
Normal 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
180
src/views/system/position/index.vue
Normal 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
30
src/views/system/position/querySchemas.ts
Normal 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',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
@ -1,37 +1,45 @@
|
|||||||
import { h } from 'vue';
|
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',
|
key: 'id',
|
||||||
|
fixed: 'left',
|
||||||
|
width: 50,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '角色名称',
|
title: '角色名称',
|
||||||
key: 'name',
|
key: 'name',
|
||||||
|
width: 150,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '说明',
|
title: '角色编码',
|
||||||
key: 'explain',
|
key: 'code',
|
||||||
|
width: 250,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '是否默认角色',
|
title: '排序',
|
||||||
key: 'isDefault',
|
key: 'sort',
|
||||||
render(row) {
|
width: 100,
|
||||||
return h(
|
},
|
||||||
NTag,
|
{
|
||||||
{
|
title: '备注',
|
||||||
type: row.isDefault ? 'success' : 'error',
|
key: 'note',
|
||||||
},
|
width: 200,
|
||||||
{
|
},
|
||||||
default: () => (row.isDefault ? '是' : '否'),
|
{
|
||||||
},
|
title: '创建人',
|
||||||
);
|
key: 'createUser',
|
||||||
},
|
width: 100,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
key: 'create_date',
|
key: 'createTime',
|
||||||
},
|
width: 180,
|
||||||
|
}
|
||||||
];
|
];
|
||||||
110
src/views/system/role/edit.vue
Normal file
110
src/views/system/role/edit.vue
Normal 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
179
src/views/system/role/index.vue
Normal 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>
|
||||||
@ -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>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
export interface formParamsType {
|
|
||||||
roleId?: number | null;
|
|
||||||
roleName: string;
|
|
||||||
roleCode: string;
|
|
||||||
remark: string;
|
|
||||||
permissions: number[];
|
|
||||||
permissionKeys: number[];
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user