forked from wangjiadong/comp
main
parent
e7d3b674bf
commit
c930d4fd5e
21 changed files with 1197 additions and 32 deletions
@ -0,0 +1,78 @@ |
||||
<template> |
||||
<BasicDrawer title="数据规则/按钮权限配置" :width="365" @close="onClose" @register="registerDrawer"> |
||||
<a-spin :spinning="loading"> |
||||
<a-tabs defaultActiveKey="1"> |
||||
<a-tab-pane tab="数据规则" key="1"> |
||||
<a-checkbox-group v-model:value="dataRuleChecked" v-if="dataRuleList.length > 0"> |
||||
<a-row> |
||||
<a-col :span="24" v-for="(item, index) in dataRuleList" :key="'dr' + index"> |
||||
<a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox> |
||||
</a-col> |
||||
<a-col :span="24"> |
||||
<div style="width: 100%; margin-top: 15px"> |
||||
<a-button type="primary" :loading="loading" :size="'small'" preIcon="ant-design:save-filled" @click="saveDataRuleForRole"> |
||||
<span>点击保存</span> |
||||
</a-button> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
</a-checkbox-group> |
||||
<a-empty v-else description="无配置信息" /> |
||||
</a-tab-pane> |
||||
</a-tabs> |
||||
</a-spin> |
||||
</BasicDrawer> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref, unref } from 'vue'; |
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
||||
|
||||
import { queryDepartDataRule, saveDepartDataRule } from '../depart.api'; |
||||
|
||||
defineEmits(['register']); |
||||
const loading = ref<boolean>(false); |
||||
const departId = ref(''); |
||||
const functionId = ref(''); |
||||
const dataRuleList = ref<Array<any>>([]); |
||||
const dataRuleChecked = ref<Array<any>>([]); |
||||
|
||||
// 注册抽屉组件 |
||||
const [registerDrawer, { closeDrawer }] = useDrawerInner((data) => { |
||||
departId.value = unref(data.departId); |
||||
functionId.value = unref(data.functionId); |
||||
loadData(); |
||||
}); |
||||
|
||||
async function loadData() { |
||||
try { |
||||
loading.value = true; |
||||
const { datarule, drChecked } = await queryDepartDataRule(functionId, departId); |
||||
dataRuleList.value = datarule; |
||||
if (drChecked) { |
||||
dataRuleChecked.value = drChecked.split(','); |
||||
} |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
} |
||||
|
||||
function saveDataRuleForRole() { |
||||
let params = { |
||||
departId: departId.value, |
||||
permissionId: functionId.value, |
||||
dataRuleIds: dataRuleChecked.value.join(','), |
||||
}; |
||||
saveDepartDataRule(params); |
||||
} |
||||
|
||||
function onClose() { |
||||
doReset(); |
||||
} |
||||
|
||||
function doReset() { |
||||
functionId.value = ''; |
||||
dataRuleList.value = []; |
||||
dataRuleChecked.value = []; |
||||
} |
||||
</script> |
||||
@ -0,0 +1,92 @@ |
||||
<template> |
||||
<BasicModal :title="title" :width="800" v-bind="$attrs" @ok="handleOk" @register="registerModal"> |
||||
<BasicForm @register="registerForm" /> |
||||
</BasicModal> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { watch, computed, inject, ref, unref, onMounted } from 'vue'; |
||||
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'; |
||||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
||||
|
||||
import { saveOrUpdateDepart } from '../depart.api'; |
||||
import { useBasicFormSchema, orgCategoryOptions } from '../depart.data'; |
||||
|
||||
const emit = defineEmits(['success', 'register']); |
||||
const props = defineProps({ |
||||
rootTreeData: { type: Array, default: () => [] }, |
||||
}); |
||||
const prefixCls = inject('prefixCls'); |
||||
// 当前是否是更新模式 |
||||
const isUpdate = ref<boolean>(false); |
||||
// 当前的弹窗数据 |
||||
const model = ref<object>({}); |
||||
const title = computed(() => (isUpdate.value ? '编辑' : '新增')); |
||||
|
||||
//注册表单 |
||||
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({ |
||||
schemas: useBasicFormSchema().basicFormSchema, |
||||
showActionButtonGroup: false, |
||||
}); |
||||
|
||||
// 注册弹窗 |
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
||||
await resetFields(); |
||||
isUpdate.value = unref(data?.isUpdate); |
||||
// 当前是否为添加子级 |
||||
let isChild = unref(data?.isChild); |
||||
let categoryOptions = isChild ? orgCategoryOptions.child : orgCategoryOptions.root; |
||||
// 隐藏不需要展示的字段 |
||||
updateSchema([ |
||||
{ |
||||
field: 'parentId', |
||||
show: isChild, |
||||
componentProps: { |
||||
// 如果是添加子部门，就禁用该字段 |
||||
disabled: isChild, |
||||
treeData: props.rootTreeData, |
||||
}, |
||||
}, |
||||
{ |
||||
field: 'orgCode', |
||||
show: false, |
||||
}, |
||||
{ |
||||
field: 'orgCategory', |
||||
componentProps: { options: categoryOptions }, |
||||
}, |
||||
]); |
||||
|
||||
let record = unref(data?.record); |
||||
if (typeof record !== 'object') { |
||||
record = {}; |
||||
} |
||||
// 赋默认值 |
||||
record = Object.assign( |
||||
{ |
||||
departOrder: 0, |
||||
orgCategory: categoryOptions[0].value, |
||||
}, |
||||
record |
||||
); |
||||
model.value = record; |
||||
await setFieldsValue({ ...record }); |
||||
}); |
||||
|
||||
// 提交事件 |
||||
async function handleOk() { |
||||
try { |
||||
setModalProps({ confirmLoading: true }); |
||||
let values = await validate(); |
||||
//提交表单 |
||||
await saveOrUpdateDepart(values, isUpdate.value); |
||||
//关闭弹窗 |
||||
closeModal(); |
||||
//刷新列表 |
||||
emit('success'); |
||||
} finally { |
||||
setModalProps({ confirmLoading: false }); |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,135 @@ |
||||
<template> |
||||
<a-spin :spinning="loading"> |
||||
<BasicForm @register="registerForm" /> |
||||
<!-- <div class="j-box-bottom-button offset-20" style="margin-top: 30px"> |
||||
<div class="j-box-bottom-button-float" :class="[`${prefixCls}`]"> |
||||
<a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button> |
||||
<a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button> |
||||
</div> |
||||
</div>--> |
||||
</a-spin> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { watch, computed, inject, ref, unref, onMounted } from 'vue'; |
||||
import { BasicForm, useForm } from '/@/components/Form/index'; |
||||
import { saveOrUpdateDepart } from '../depart.api'; |
||||
import { useBasicFormSchema, orgCategoryOptions } from '../depart.data'; |
||||
import { Api, queryDepartSync } from '../depart.api'; |
||||
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
|
||||
const { prefixCls } = useDesign('j-depart-form-content'); |
||||
|
||||
const emit = defineEmits(['success']); |
||||
const props = defineProps({ |
||||
data: { type: Object, default: () => ({}) }, |
||||
rootTreeData: { type: Array, default: () => [] }, |
||||
}); |
||||
const loading = ref<boolean>(false); |
||||
// 当前是否是更新模式 |
||||
const isUpdate = ref<boolean>(true); |
||||
// 当前的弹窗数据 |
||||
const model = ref<object>({}); |
||||
|
||||
//注册表单 |
||||
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({ |
||||
schemas: useBasicFormSchema().basicFormSchema, |
||||
showActionButtonGroup: false, |
||||
}); |
||||
|
||||
const categoryOptions = computed(() => { |
||||
if (!!props?.data?.parentId) { |
||||
return orgCategoryOptions.child; |
||||
} else { |
||||
return orgCategoryOptions.root; |
||||
} |
||||
}); |
||||
const setFormValue = async() => { |
||||
const res = await queryDepartSync() |
||||
await setFieldsValue({ ...res }); |
||||
} |
||||
onMounted(() => { |
||||
setFormValue() |
||||
// 禁用字段 |
||||
updateSchema([ |
||||
{ field: 'parentId', componentProps: { disabled: true } }, |
||||
{ field: 'orgCode', componentProps: { disabled: true } }, |
||||
]); |
||||
// // data 变化，重填表单 |
||||
// watch( |
||||
// () => props.data, |
||||
// async () => { |
||||
// let record = unref(props.data); |
||||
// if (typeof record !== 'object') { |
||||
// record = {}; |
||||
// } |
||||
// |
||||
// model.value = record; |
||||
// console.log(record) |
||||
// await resetFields(); |
||||
// await setFieldsValue({ ...record }); |
||||
// }, |
||||
// { deep: true, immediate: true } |
||||
// ); |
||||
// 更新 父部门 选项 |
||||
watch( |
||||
() => props.rootTreeData, |
||||
async () => { |
||||
updateSchema([ |
||||
{ |
||||
field: 'parentId', |
||||
componentProps: { treeData: props.rootTreeData }, |
||||
}, |
||||
]); |
||||
}, |
||||
{ deep: true, immediate: true } |
||||
); |
||||
// 监听并更改 orgCategory options |
||||
watch( |
||||
categoryOptions, |
||||
async () => { |
||||
updateSchema([ |
||||
{ |
||||
field: 'orgCategory', |
||||
componentProps: { options: categoryOptions.value }, |
||||
}, |
||||
]); |
||||
}, |
||||
{ immediate: true } |
||||
); |
||||
}); |
||||
|
||||
// 重置表单 |
||||
async function onReset() { |
||||
await resetFields(); |
||||
await setFieldsValue({ ...model.value }); |
||||
} |
||||
|
||||
// 提交事件 |
||||
async function onSubmit() { |
||||
try { |
||||
loading.value = true; |
||||
let values = await validate(); |
||||
values = Object.assign({}, model.value, values); |
||||
//提交表单 |
||||
await saveOrUpdateDepart(values, isUpdate.value); |
||||
//刷新列表 |
||||
emit('success'); |
||||
Object.assign(model.value, values); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="less"> |
||||
// update-begin-author:liusq date:20230625 for: [issues/563]暗色主题部分失效 |
||||
|
||||
@prefix-cls: ~'@{namespace}-j-depart-form-content'; |
||||
/*begin 兼容暗夜模式*/ |
||||
.@{prefix-cls} { |
||||
background: @component-background; |
||||
border-top: 1px solid @border-color-base; |
||||
} |
||||
/*end 兼容暗夜模式*/ |
||||
// update-end-author:liusq date:20230625 for: [issues/563]暗色主题部分失效 |
||||
</style> |
||||
@ -0,0 +1,332 @@ |
||||
<template> |
||||
<a-card :bordered="false" style="height: 100%"> |
||||
<div class="j-table-operator" style="width: 100%"> |
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddDepart">新增</a-button> |
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddChildDepart()">添加下级</a-button> |
||||
<a-upload name="file" :showUploadList="false" :customRequest="onImportXls"> |
||||
<a-button type="primary" preIcon="ant-design:import-outlined">导入</a-button> |
||||
</a-upload> |
||||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls">导出</a-button> |
||||
<a-button type="primary" preIcon="ant-design:sync-outlined">同步企微?</a-button> |
||||
<a-button type="primary" preIcon="ant-design:sync-outlined">同步钉钉?</a-button> |
||||
<template v-if="checkedKeys.length > 0"> |
||||
<a-dropdown> |
||||
<template #overlay> |
||||
<a-menu> |
||||
<a-menu-item key="1" @click="onDeleteBatch"> |
||||
<icon icon="ant-design:delete-outlined" /> |
||||
<span>删除</span> |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</template> |
||||
<a-button> |
||||
<span>批量操作 </span> |
||||
<icon icon="akar-icons:chevron-down" /> |
||||
</a-button> |
||||
</a-dropdown> |
||||
</template> |
||||
</div> |
||||
<a-alert type="info" show-icon class="alert" style="margin-bottom: 8px"> |
||||
<template #message> |
||||
<template v-if="checkedKeys.length > 0"> |
||||
<span>已选中 {{ checkedKeys.length }} 条记录</span> |
||||
<a-divider type="vertical" /> |
||||
<a @click="checkedKeys = []">清空</a> |
||||
</template> |
||||
<template v-else> |
||||
<span>未选中任何数据</span> |
||||
</template> |
||||
</template> |
||||
</a-alert> |
||||
<a-spin :spinning="loading"> |
||||
<a-input-search placeholder="按部门名称搜索…" style="margin-bottom: 10px" @search="onSearch" /> |
||||
<!--组织机构树--> |
||||
<template v-if="treeData.length > 0"> |
||||
<a-tree |
||||
v-if="!treeReloading" |
||||
checkable |
||||
:clickRowToExpand="false" |
||||
:treeData="treeData" |
||||
:selectedKeys="selectedKeys" |
||||
:checkStrictly="checkStrictly" |
||||
:load-data="loadChildrenTreeData" |
||||
:checkedKeys="checkedKeys" |
||||
v-model:expandedKeys="expandedKeys" |
||||
@check="onCheck" |
||||
@select="onSelect" |
||||
> |
||||
<template #title="{ key: treeKey, title, dataRef }"> |
||||
<a-dropdown :trigger="['contextmenu']"> |
||||
<Popconfirm |
||||
:visible="visibleTreeKey === treeKey" |
||||
title="确定要删除吗？" |
||||
ok-text="确定" |
||||
cancel-text="取消" |
||||
placement="rightTop" |
||||
@confirm="onDelete(dataRef)" |
||||
@visibleChange="onVisibleChange" |
||||
> |
||||
<span>{{ title }}</span> |
||||
</Popconfirm> |
||||
|
||||
<template #overlay> |
||||
<a-menu @click=""> |
||||
<a-menu-item key="1" @click="onAddChildDepart(dataRef)">添加子级</a-menu-item> |
||||
<a-menu-item key="2" @click="visibleTreeKey = treeKey"> |
||||
<span style="color: red">删除</span> |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</template> |
||||
</a-dropdown> |
||||
</template> |
||||
</a-tree> |
||||
</template> |
||||
<a-empty v-else description="暂无数据" /> |
||||
</a-spin> |
||||
<DepartFormModal :rootTreeData="treeData" @register="registerModal" @success="loadRootTreeData" /> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { inject, nextTick, ref, unref, defineExpose } from 'vue'; |
||||
import { useModal } from '/@/components/Modal'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
import { useMethods } from '/@/hooks/system/useMethods'; |
||||
import { Api, deleteBatchDepart, queryDepartTreeSync } from '../depart.api'; |
||||
import { searchByKeywords } from '/@/views/system/departUser/depart.user.api'; |
||||
import DepartFormModal from '/@/views/system/depart/components/DepartFormModal.vue'; |
||||
import { Popconfirm } from 'ant-design-vue'; |
||||
|
||||
const prefixCls = inject('prefixCls'); |
||||
const emit = defineEmits(['select', 'rootTreeData']); |
||||
const { createMessage } = useMessage(); |
||||
const { handleImportXls, handleExportXls } = useMethods(); |
||||
|
||||
const loading = ref<boolean>(false); |
||||
// 部门树列表数据 |
||||
const treeData = ref<any[]>([]); |
||||
// 当前选中的项 |
||||
const checkedKeys = ref<any[]>([]); |
||||
// 当前展开的项 |
||||
const expandedKeys = ref<any[]>([]); |
||||
// 当前选中的项 |
||||
const selectedKeys = ref<any[]>([]); |
||||
// 树组件重新加载 |
||||
const treeReloading = ref<boolean>(false); |
||||
// 树父子是否关联 |
||||
const checkStrictly = ref<boolean>(true); |
||||
// 当前选中的部门 |
||||
const currentDepart = ref<any>(null); |
||||
// 控制确认删除提示框是否显示 |
||||
const visibleTreeKey = ref<any>(null); |
||||
// 搜索关键字 |
||||
const searchKeyword = ref(''); |
||||
|
||||
// 注册 modal |
||||
const [registerModal, { openModal }] = useModal(); |
||||
|
||||
// 加载顶级部门信息 |
||||
async function loadRootTreeData() { |
||||
try { |
||||
loading.value = true; |
||||
treeData.value = []; |
||||
const result = await queryDepartTreeSync(); |
||||
if (Array.isArray(result)) { |
||||
treeData.value = result; |
||||
} |
||||
if (expandedKeys.value.length === 0) { |
||||
autoExpandParentNode(); |
||||
} else { |
||||
if (selectedKeys.value.length === 0) { |
||||
let item = treeData.value[0]; |
||||
if (item) { |
||||
// 默认选中第一个 |
||||
setSelectedKey(item.id, item); |
||||
} |
||||
} else { |
||||
emit('select', currentDepart.value); |
||||
} |
||||
} |
||||
emit('rootTreeData', treeData.value); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
} |
||||
|
||||
loadRootTreeData(); |
||||
|
||||
// 加载子级部门信息 |
||||
async function loadChildrenTreeData(treeNode) { |
||||
try { |
||||
const result = await queryDepartTreeSync({ |
||||
pid: treeNode.dataRef.id, |
||||
}); |
||||
if (result.length == 0) { |
||||
treeNode.dataRef.isLeaf = true; |
||||
} else { |
||||
treeNode.dataRef.children = result; |
||||
if (expandedKeys.value.length > 0) { |
||||
// 判断获取的子级是否有当前展开的项 |
||||
let subKeys: any[] = []; |
||||
for (let key of expandedKeys.value) { |
||||
if (result.findIndex((item) => item.id === key) !== -1) { |
||||
subKeys.push(key); |
||||
} |
||||
} |
||||
if (subKeys.length > 0) { |
||||
expandedKeys.value = [...expandedKeys.value]; |
||||
} |
||||
} |
||||
} |
||||
treeData.value = [...treeData.value]; |
||||
emit('rootTreeData', treeData.value); |
||||
} catch (e) { |
||||
console.error(e); |
||||
} |
||||
return Promise.resolve(); |
||||
} |
||||
|
||||
// 自动展开父节点，只展开一级 |
||||
function autoExpandParentNode() { |
||||
let item = treeData.value[0]; |
||||
if (item) { |
||||
if (!item.isLeaf) { |
||||
expandedKeys.value = [item.key]; |
||||
} |
||||
// 默认选中第一个 |
||||
setSelectedKey(item.id, item); |
||||
reloadTree(); |
||||
} else { |
||||
emit('select', null); |
||||
} |
||||
} |
||||
|
||||
// 重新加载树组件，防止无法默认展开数据 |
||||
async function reloadTree() { |
||||
await nextTick(); |
||||
treeReloading.value = true; |
||||
await nextTick(); |
||||
treeReloading.value = false; |
||||
} |
||||
|
||||
/** |
||||
* 设置当前选中的行 |
||||
*/ |
||||
function setSelectedKey(key: string, data?: object) { |
||||
selectedKeys.value = [key]; |
||||
if (data) { |
||||
currentDepart.value = data; |
||||
emit('select', data); |
||||
} |
||||
} |
||||
|
||||
// 添加一级部门 |
||||
function onAddDepart() { |
||||
openModal(true, { isUpdate: false, isChild: false }); |
||||
} |
||||
|
||||
// 添加子级部门 |
||||
function onAddChildDepart(data = currentDepart.value) { |
||||
if (data == null) { |
||||
createMessage.warning('请先选择一个部门'); |
||||
return; |
||||
} |
||||
const record = { parentId: data.id }; |
||||
openModal(true, { isUpdate: false, isChild: true, record }); |
||||
} |
||||
|
||||
// 搜索事件 |
||||
async function onSearch(value: string) { |
||||
if (value) { |
||||
try { |
||||
loading.value = true; |
||||
treeData.value = []; |
||||
let result = await searchByKeywords({ keyWord: value }); |
||||
if (Array.isArray(result)) { |
||||
treeData.value = result; |
||||
} |
||||
autoExpandParentNode(); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
} else { |
||||
loadRootTreeData(); |
||||
} |
||||
searchKeyword.value = value; |
||||
} |
||||
|
||||
// 树复选框选择事件 |
||||
function onCheck(e) { |
||||
if (Array.isArray(e)) { |
||||
checkedKeys.value = e; |
||||
} else { |
||||
checkedKeys.value = e.checked; |
||||
} |
||||
} |
||||
|
||||
// 树选择事件 |
||||
function onSelect(selKeys, event) { |
||||
console.log('select: ', selKeys, event); |
||||
if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) { |
||||
setSelectedKey(selKeys[0], event.selectedNodes[0]); |
||||
} else { |
||||
// 这样可以防止用户取消选择 |
||||
setSelectedKey(selectedKeys.value[0]); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* 根据 ids 删除部门 |
||||
* @param idListRef array |
||||
* @param confirm 是否显示确认提示框 |
||||
*/ |
||||
async function doDeleteDepart(idListRef, confirm = true) { |
||||
const idList = unref(idListRef); |
||||
if (idList.length > 0) { |
||||
try { |
||||
loading.value = true; |
||||
await deleteBatchDepart({ ids: idList.join(',') }, confirm); |
||||
await loadRootTreeData(); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 删除单个部门 |
||||
async function onDelete(data) { |
||||
if (data) { |
||||
onVisibleChange(false); |
||||
doDeleteDepart([data.id], false); |
||||
} |
||||
} |
||||
|
||||
// 批量删除部门 |
||||
async function onDeleteBatch() { |
||||
try { |
||||
await doDeleteDepart(checkedKeys); |
||||
checkedKeys.value = []; |
||||
} finally { |
||||
} |
||||
} |
||||
|
||||
function onVisibleChange(visible) { |
||||
if (!visible) { |
||||
visibleTreeKey.value = null; |
||||
} |
||||
} |
||||
|
||||
function onImportXls(d) { |
||||
handleImportXls(d, Api.importExcelUrl, () => { |
||||
loadRootTreeData(); |
||||
}); |
||||
} |
||||
|
||||
function onExportXls() { |
||||
handleExportXls('部门信息', Api.exportXlsUrl); |
||||
} |
||||
|
||||
defineExpose({ |
||||
loadRootTreeData, |
||||
}); |
||||
</script> |
||||
@ -0,0 +1,170 @@ |
||||
<template> |
||||
<a-spin :spinning="loading"> |
||||
<template v-if="treeData.length > 0"> |
||||
<BasicTree |
||||
ref="basicTree" |
||||
class="depart-rule-tree" |
||||
checkable |
||||
:treeData="treeData" |
||||
:checkedKeys="checkedKeys" |
||||
:selectedKeys="selectedKeys" |
||||
:expandedKeys="expandedKeys" |
||||
:checkStrictly="checkStrictly" |
||||
style="height: 500px; overflow: auto" |
||||
@check="onCheck" |
||||
@expand="onExpand" |
||||
@select="onSelect" |
||||
> |
||||
<template #title="{ slotTitle, ruleFlag }"> |
||||
<span>{{ slotTitle }}</span> |
||||
<Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red" /> |
||||
</template> |
||||
</BasicTree> |
||||
</template> |
||||
<a-empty v-else description="无可配置部门权限" /> |
||||
|
||||
<div class="j-box-bottom-button offset-20" style="margin-top: 30px"> |
||||
<div class="j-box-bottom-button-float" :class="[`${prefixCls}`]"> |
||||
<a-dropdown :trigger="['click']" placement="top"> |
||||
<template #overlay> |
||||
<a-menu> |
||||
<a-menu-item key="3" @click="toggleCheckALL(true)">全部勾选</a-menu-item> |
||||
<a-menu-item key="4" @click="toggleCheckALL(false)">取消全选</a-menu-item> |
||||
<a-menu-item key="5" @click="toggleExpandAll(true)">展开所有</a-menu-item> |
||||
<a-menu-item key="6" @click="toggleExpandAll(false)">收起所有</a-menu-item> |
||||
</a-menu> |
||||
</template> |
||||
<a-button style="float: left"> |
||||
树操作 |
||||
<Icon icon="ant-design:up-outlined" /> |
||||
</a-button> |
||||
</a-dropdown> |
||||
<a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button> |
||||
</div> |
||||
</div> |
||||
</a-spin> |
||||
<DepartDataRuleDrawer @register="registerDataRuleDrawer" /> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { watch, computed, inject, ref, nextTick } from 'vue'; |
||||
import { useDrawer } from '/@/components/Drawer'; |
||||
import { BasicTree } from '/@/components/Tree/index'; |
||||
import DepartDataRuleDrawer from './DepartDataRuleDrawer.vue'; |
||||
import { queryRoleTreeList, queryDepartPermission, saveDepartPermission } from '../depart.api'; |
||||
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
|
||||
const { prefixCls } = useDesign('j-depart-form-content'); |
||||
const props = defineProps({ |
||||
data: { type: Object, default: () => ({}) }, |
||||
}); |
||||
// 当前选中的部门ID，可能会为空，代表未选择部门 |
||||
const departId = computed(() => props.data?.id); |
||||
|
||||
const basicTree = ref(); |
||||
const loading = ref<boolean>(false); |
||||
const treeData = ref<any[]>([]); |
||||
const expandedKeys = ref<Array<any>>([]); |
||||
const selectedKeys = ref<Array<any>>([]); |
||||
const checkedKeys = ref<Array<any>>([]); |
||||
const lastCheckedKeys = ref<Array<any>>([]); |
||||
const checkStrictly = ref(true); |
||||
|
||||
// 注册数据规则授权弹窗抽屉 |
||||
const [registerDataRuleDrawer, dataRuleDrawer] = useDrawer(); |
||||
|
||||
// onCreated |
||||
loadData(); |
||||
watch(departId, () => loadDepartPermission(), { immediate: true }); |
||||
|
||||
async function loadData() { |
||||
try { |
||||
loading.value = true; |
||||
let { treeList } = await queryRoleTreeList(); |
||||
treeData.value = treeList; |
||||
await nextTick(); |
||||
toggleExpandAll(true); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
} |
||||
|
||||
async function loadDepartPermission() { |
||||
if (departId.value) { |
||||
try { |
||||
loading.value = true; |
||||
let keys = await queryDepartPermission({ departId: departId.value }); |
||||
checkedKeys.value = keys; |
||||
lastCheckedKeys.value = [...keys]; |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
} |
||||
} |
||||
|
||||
async function onSubmit() { |
||||
try { |
||||
loading.value = true; |
||||
await saveDepartPermission({ |
||||
departId: departId.value, |
||||
permissionIds: checkedKeys.value.join(','), |
||||
lastpermissionIds: lastCheckedKeys.value.join(','), |
||||
}); |
||||
await loadData(); |
||||
await loadDepartPermission(); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
} |
||||
|
||||
// tree勾选复选框事件 |
||||
function onCheck(event) { |
||||
if (!Array.isArray(event)) { |
||||
checkedKeys.value = event.checked; |
||||
} else { |
||||
checkedKeys.value = event; |
||||
} |
||||
} |
||||
|
||||
// tree展开事件 |
||||
function onExpand($expandedKeys) { |
||||
expandedKeys.value = $expandedKeys; |
||||
} |
||||
|
||||
// tree选中事件 |
||||
function onSelect($selectedKeys, { selectedNodes }) { |
||||
if (selectedNodes[0]?.ruleFlag) { |
||||
let functionId = $selectedKeys[0]; |
||||
dataRuleDrawer.openDrawer(true, { departId, functionId }); |
||||
} |
||||
selectedKeys.value = []; |
||||
} |
||||
|
||||
// 切换父子关联 |
||||
async function toggleCheckStrictly(flag) { |
||||
checkStrictly.value = flag; |
||||
await nextTick(); |
||||
checkedKeys.value = basicTree.value.getCheckedKeys(); |
||||
} |
||||
|
||||
// 切换展开收起 |
||||
async function toggleExpandAll(flag) { |
||||
basicTree.value.expandAll(flag); |
||||
await nextTick(); |
||||
expandedKeys.value = basicTree.value.getExpandedKeys(); |
||||
} |
||||
|
||||
// 切换全选 |
||||
async function toggleCheckALL(flag) { |
||||
basicTree.value.checkAll(flag); |
||||
await nextTick(); |
||||
checkedKeys.value = basicTree.value.getCheckedKeys(); |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
// 【VUEN-188】解决滚动条不灵敏的问题 |
||||
.depart-rule-tree :deep(.scrollbar__bar) { |
||||
pointer-events: none; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,129 @@ |
||||
import { unref } from 'vue'; |
||||
import { defHttp } from '/@/utils/http/axios'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
||||
const { createConfirm } = useMessage(); |
||||
|
||||
export enum Api { |
||||
queryDepartTreeSync = '/sys/sysDepart/queryDepartTreeSync', |
||||
queryDepartSync = '/sys/sysDepart/queryDepartSync', |
||||
save = '/sys/sysDepart/add', |
||||
edit = '/sys/sysDepart/edit', |
||||
delete = '/sys/sysDepart/delete', |
||||
deleteBatch = '/sys/sysDepart/deleteBatch', |
||||
exportXlsUrl = '/sys/sysDepart/exportXls', |
||||
importExcelUrl = '/sys/sysDepart/importExcel', |
||||
|
||||
roleQueryTreeList = '/sys/role/queryTreeList', |
||||
queryDepartPermission = '/sys/permission/queryDepartPermission', |
||||
saveDepartPermission = '/sys/permission/saveDepartPermission', |
||||
|
||||
dataRule = '/sys/sysDepartPermission/datarule', |
||||
|
||||
getCurrentUserDeparts = '/sys/user/getCurrentUserDeparts', |
||||
selectDepart = '/sys/selectDepart', |
||||
getUpdateDepartInfo = '/sys/user/getUpdateDepartInfo', |
||||
doUpdateDepartInfo = '/sys/user/doUpdateDepartInfo', |
||||
changeDepartChargePerson = '/sys/user/changeDepartChargePerson', |
||||
} |
||||
|
||||
/** |
||||
* 获取部门树列表 |
||||
*/ |
||||
export const queryDepartTreeSync = (params?) => defHttp.get({ url: Api.queryDepartTreeSync, params }); |
||||
|
||||
/** |
||||
* 获取部门树列表 |
||||
*/ |
||||
export const queryDepartSync = (params?) => defHttp.get({ url: Api.queryDepartSync, params }); |
||||
|
||||
|
||||
/** |
||||
* 保存或者更新部门角色 |
||||
*/ |
||||
export const saveOrUpdateDepart = (params, isUpdate) => { |
||||
if (isUpdate) { |
||||
return defHttp.put({ url: Api.edit, params }); |
||||
} else { |
||||
return defHttp.post({ url: Api.save, params }); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 批量删除部门角色 |
||||
*/ |
||||
export const deleteBatchDepart = (params, confirm = false) => { |
||||
return new Promise((resolve, reject) => { |
||||
const doDelete = () => { |
||||
resolve(defHttp.delete({ url: Api.deleteBatch, params }, { joinParamsToUrl: true })); |
||||
}; |
||||
if (confirm) { |
||||
createConfirm({ |
||||
iconType: 'warning', |
||||
title: '删除', |
||||
content: '确定要删除吗？', |
||||
onOk: () => doDelete(), |
||||
onCancel: () => reject(), |
||||
}); |
||||
} else { |
||||
doDelete(); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
/** |
||||
* 获取权限树列表 |
||||
*/ |
||||
export const queryRoleTreeList = (params?) => defHttp.get({ url: Api.roleQueryTreeList, params }); |
||||
/** |
||||
* 查询部门权限 |
||||
*/ |
||||
export const queryDepartPermission = (params?) => defHttp.get({ url: Api.queryDepartPermission, params }); |
||||
/** |
||||
* 保存部门权限 |
||||
*/ |
||||
export const saveDepartPermission = (params) => defHttp.post({ url: Api.saveDepartPermission, params }); |
||||
|
||||
/** |
||||
* 查询部门数据权限列表 |
||||
*/ |
||||
export const queryDepartDataRule = (functionId, departId, params?) => { |
||||
let url = `${Api.dataRule}/${unref(functionId)}/${unref(departId)}`; |
||||
return defHttp.get({ url, params }); |
||||
}; |
||||
/** |
||||
* 保存部门数据权限 |
||||
*/ |
||||
export const saveDepartDataRule = (params) => defHttp.post({ url: Api.dataRule, params }); |
||||
/** |
||||
* 获取登录用户部门信息 |
||||
*/ |
||||
export const getUserDeparts = (params?) => defHttp.get({ url: Api.getCurrentUserDeparts, params }); |
||||
/** |
||||
* 切换选择部门 |
||||
*/ |
||||
export const selectDepart = (params?) => defHttp.put({ url: Api.selectDepart, params }); |
||||
|
||||
/** |
||||
* 编辑部门前获取部门相关信息 |
||||
* @param id |
||||
*/ |
||||
export const getUpdateDepartInfo = (id) => defHttp.get({ url: Api.getUpdateDepartInfo, params: {id} }); |
||||
|
||||
/** |
||||
* 编辑部门 |
||||
* @param params |
||||
*/ |
||||
export const doUpdateDepartInfo = (params) => defHttp.put({ url: Api.doUpdateDepartInfo, params }); |
||||
|
||||
/** |
||||
* 删除部门 |
||||
* @param id |
||||
*/ |
||||
export const deleteDepart = (id) => defHttp.delete({ url: Api.delete, params:{ id } }, { joinParamsToUrl: true }); |
||||
|
||||
/** |
||||
* 设置负责人 取消负责人 |
||||
* @param params |
||||
*/ |
||||
export const changeDepartChargePerson = (params) => defHttp.put({ url: Api.changeDepartChargePerson, params }); |
||||
@ -0,0 +1,83 @@ |
||||
import { FormSchema } from '/@/components/Form'; |
||||
|
||||
// 部门基础表单
|
||||
export function useBasicFormSchema() { |
||||
const basicFormSchema: FormSchema[] = [ |
||||
{ |
||||
field: 'departName', |
||||
label: '部门名称', |
||||
component: 'Input', |
||||
componentProps: { |
||||
placeholder: '部门名称', |
||||
}, |
||||
}, |
||||
{ |
||||
field: 'parentId', |
||||
label: '上级部门', |
||||
component: 'TreeSelect', |
||||
componentProps: { |
||||
treeData: [], |
||||
placeholder: '无', |
||||
dropdownStyle: { maxHeight: '200px', overflow: 'auto' }, |
||||
}, |
||||
}, |
||||
{ |
||||
field: 'orgCode', |
||||
label: '部门编码', |
||||
component: 'Input', |
||||
componentProps: { |
||||
placeholder: '请输入部门编码', |
||||
}, |
||||
}, |
||||
/* { |
||||
field: 'orgCategory', |
||||
label: '部门类型', |
||||
component: 'RadioButtonGroup', |
||||
componentProps: { options: [] }, |
||||
},*/ |
||||
{ |
||||
field: 'mobile', |
||||
label: '电话', |
||||
component: 'Input', |
||||
componentProps: { |
||||
placeholder: '请输入电话', |
||||
}, |
||||
}, |
||||
{ |
||||
field: 'fax', |
||||
label: '传真', |
||||
component: 'Input', |
||||
componentProps: { |
||||
placeholder: '请输入传真', |
||||
}, |
||||
}, |
||||
{ |
||||
field: 'address', |
||||
label: '地址', |
||||
component: 'Input', |
||||
componentProps: { |
||||
placeholder: '请输入地址', |
||||
}, |
||||
}, |
||||
{ |
||||
field: 'memo', |
||||
label: '备注', |
||||
component: 'InputTextArea', |
||||
componentProps: { |
||||
placeholder: '请输入备注', |
||||
}, |
||||
}, |
||||
]; |
||||
return { basicFormSchema }; |
||||
} |
||||
|
||||
// 部门类型选项
|
||||
export const orgCategoryOptions = { |
||||
// 一级部门
|
||||
root: [{ value: '1', label: '公司' }], |
||||
// 子级部门
|
||||
child: [ |
||||
{ value: '2', label: '部门' }, |
||||
{ value: '3', label: '岗位' }, |
||||
], |
||||
}; |
||||
@ -0,0 +1,14 @@ |
||||
//noinspection LessUnresolvedVariable |
||||
@prefix-cls: ~'@{namespace}-depart-manage'; |
||||
|
||||
.@{prefix-cls} { |
||||
// update-begin-author:liusq date:20230625 for: [issues/563]暗色主题部分失效 |
||||
background: @component-background; |
||||
// update-end-author:liusq date:20230625 for: [issues/563]暗色主题部分失效 |
||||
|
||||
&--box { |
||||
.ant-tabs-nav { |
||||
padding: 0 20px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,52 @@ |
||||
<template> |
||||
<a-row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="10"> |
||||
<a-col :xl="12" :lg="24" :md="24" style="margin-bottom: 10px"> |
||||
<div style="height: 100%;" :class="[`${prefixCls}`]"> |
||||
<a-tabs v-show="departData != null" defaultActiveKey="base-info"> |
||||
<a-tab-pane tab="基本信息" key="base-info" forceRender style="position: relative"> |
||||
<div style="padding: 20px"> |
||||
<DepartFormTab :data="departData" :rootTreeData="rootTreeData" @success="onSuccess" /> |
||||
</div> |
||||
</a-tab-pane> |
||||
</a-tabs> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
</template> |
||||
|
||||
<script lang="ts" setup name="system-depart"> |
||||
import { provide, ref } from 'vue'; |
||||
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
import DepartLeftTree from './components/DepartLeftTree.vue'; |
||||
import DepartFormTab from './components/DepartFormTab.vue'; |
||||
import DepartRuleTab from './components/DepartRuleTab.vue'; |
||||
|
||||
const { prefixCls } = useDesign('depart-manage'); |
||||
provide('prefixCls', prefixCls); |
||||
|
||||
// 给子组件定义一个ref变量 |
||||
const leftTree = ref(); |
||||
|
||||
// 当前选中的部门信息 |
||||
const departData = ref({}); |
||||
const rootTreeData = ref<any[]>([]); |
||||
|
||||
// 左侧树选择后触发 |
||||
function onTreeSelect(data) { |
||||
console.log('onTreeSelect: ', data); |
||||
departData.value = data; |
||||
} |
||||
|
||||
// 左侧树rootTreeData触发 |
||||
function onRootTreeData(data) { |
||||
rootTreeData.value = data; |
||||
} |
||||
|
||||
function onSuccess() { |
||||
leftTree.value.loadRootTreeData(); |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
@import './index.less'; |
||||
</style> |
||||
Loading…
Reference in new issue