parent
e0ca17a4b7
commit
ee4759268b
@ -0,0 +1,98 @@ |
|||||||
|
// | ------------------------------------------------------------
|
||||||
|
// | @版本: version 0.1
|
||||||
|
// | @创建人: 【Nie-x7129】
|
||||||
|
// | @E-mail: x71291@outlook.com
|
||||||
|
// | @所在项目: hoto-auth-vue3
|
||||||
|
// | @文件描述: index.js -
|
||||||
|
// | @创建时间: 2024-07-12 10:45
|
||||||
|
// | @更新时间: 2024-07-12 10:45
|
||||||
|
// | @修改记录:
|
||||||
|
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||||
|
// | =
|
||||||
|
// | ------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import HTTP from '@/api/http.js'; |
||||||
|
import { PageData } from '@utils/DefaultData.js'; |
||||||
|
|
||||||
|
export const AuthDept = { |
||||||
|
/** |
||||||
|
* Name: createDept |
||||||
|
* Desc: 新增组织部门 |
||||||
|
* Time: 2024-07-12 10:47:05 - |
||||||
|
* */ |
||||||
|
createDept: async (data) => { |
||||||
|
return HTTP({ |
||||||
|
method: 'post', |
||||||
|
url: '/authDept', |
||||||
|
data, |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* Name: getDept |
||||||
|
* Desc: 获取组织部门的分页或列表 |
||||||
|
* Time: 2024-07-02 22:45:11 - |
||||||
|
* */ |
||||||
|
getDept: async ( |
||||||
|
params = { |
||||||
|
...PageData, |
||||||
|
}, |
||||||
|
) => { |
||||||
|
return HTTP({ |
||||||
|
method: 'get', |
||||||
|
url: '/authDept', |
||||||
|
params, |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* Name: getDeptMore |
||||||
|
* Desc: 获取组织部门详情 |
||||||
|
* Time: 2024-07-02 22:45:11 - |
||||||
|
* */ |
||||||
|
getDeptMore: async (deptId) => { |
||||||
|
return HTTP({ |
||||||
|
method: 'get', |
||||||
|
url: `/authDept/${deptId}`, |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* Name: getDeptTree |
||||||
|
* Desc: 获取组织部门树 |
||||||
|
* Time: 2024-07-02 22:45:11 - |
||||||
|
* */ |
||||||
|
getDeptTree: async (deptId = 0) => { |
||||||
|
return HTTP({ |
||||||
|
method: 'get', |
||||||
|
url: `/authDept/tree/${deptId}`, |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* Name: removeDept |
||||||
|
* Desc: 删除组织部门 |
||||||
|
* Time: 2024-07-02 22:45:06 - |
||||||
|
* */ |
||||||
|
removeDept: async (deptId) => { |
||||||
|
return HTTP({ |
||||||
|
method: 'delete', |
||||||
|
url: `/authDept/${deptId}`, |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* Name: updateDept |
||||||
|
* Desc: 编辑组织部门 |
||||||
|
* Time: 2024-07-02 22:45:03 - |
||||||
|
* */ |
||||||
|
updateDept: async (deptId, data) => { |
||||||
|
return HTTP({ |
||||||
|
method: 'patch', |
||||||
|
url: `/authDept/${deptId}`, |
||||||
|
data, |
||||||
|
}); |
||||||
|
}, |
||||||
|
}; |
@ -0,0 +1,221 @@ |
|||||||
|
// | ------------------------------------------------------------
|
||||||
|
// | @版本: version 0.1
|
||||||
|
// | @创建人: 【Nie-x7129】
|
||||||
|
// | @E-mail: x71291@outlook.com
|
||||||
|
// | @所在项目: hoto-auth-vue3
|
||||||
|
// | @文件描述: DataModal.js -
|
||||||
|
// | @创建时间: 2024-07-12 10:53
|
||||||
|
// | @更新时间: 2024-07-12 10:53
|
||||||
|
// | @修改记录:
|
||||||
|
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||||
|
// | =
|
||||||
|
// | ------------------------------------------------------------
|
||||||
|
|
||||||
|
import { h } from 'vue'; |
||||||
|
// 表单数据
|
||||||
|
export class DeptFormType { |
||||||
|
constructor() { |
||||||
|
return new Object({ |
||||||
|
// 上级部门Id
|
||||||
|
pid: undefined, |
||||||
|
// 部门名称
|
||||||
|
deptName: '', |
||||||
|
// 部门描述
|
||||||
|
deptDesc: '', |
||||||
|
// 部门类型
|
||||||
|
deptType: undefined, |
||||||
|
// 部门负责人 todo 等账户添加
|
||||||
|
deptLeader: undefined, |
||||||
|
// 默认角色 todo 等角色添加
|
||||||
|
defaultRole: undefined, |
||||||
|
// 排序
|
||||||
|
orderNum: 0, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 查询数据
|
||||||
|
export class DeptSearchType { |
||||||
|
constructor() { |
||||||
|
return new Object({ |
||||||
|
// 每页数量
|
||||||
|
pageSize: 10, |
||||||
|
// 页码
|
||||||
|
pageNumber: 1, |
||||||
|
// 是否是列表
|
||||||
|
isList: false, |
||||||
|
// 排序方式
|
||||||
|
isAsc: false, |
||||||
|
// 部门信息
|
||||||
|
deptInfo: undefined, |
||||||
|
// 部门类型
|
||||||
|
deptType: undefined, |
||||||
|
// 状态
|
||||||
|
status: undefined, |
||||||
|
// 根据pid查
|
||||||
|
hierarchy: [], |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 表单规则
|
||||||
|
export class DeptFormRulesType { |
||||||
|
constructor() { |
||||||
|
// todo
|
||||||
|
return new Object({}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Dept表格列数据
|
||||||
|
export class DeptTableColumnType { |
||||||
|
constructor() { |
||||||
|
return new Object({ |
||||||
|
index: { |
||||||
|
title: '序号', |
||||||
|
key: 'index', |
||||||
|
width: 70, // 你可以根据需要设置列宽
|
||||||
|
customRender: ({ text, record, index, column }) => `${index + 1}`, // 使用索引 + 1 来显示序号
|
||||||
|
}, |
||||||
|
deptName: { |
||||||
|
title: '名称', |
||||||
|
dataIndex: 'deptName', |
||||||
|
key: 'deptName', |
||||||
|
link: 'details', |
||||||
|
}, |
||||||
|
deptTypeName: { |
||||||
|
title: '类型', |
||||||
|
dataIndex: 'deptTypeName', |
||||||
|
key: 'deptTypeName', |
||||||
|
}, |
||||||
|
deptLeaderName: { |
||||||
|
title: '负责人', |
||||||
|
dataIndex: 'deptLeaderName', |
||||||
|
key: 'deptLeaderName', |
||||||
|
}, |
||||||
|
defaultRoleName: { |
||||||
|
title: '默认角色', |
||||||
|
dataIndex: 'defaultRoleName', |
||||||
|
key: 'defaultRoleName', |
||||||
|
}, |
||||||
|
grade: { |
||||||
|
title: '级别', |
||||||
|
dataIndex: 'grade', |
||||||
|
key: 'grade', |
||||||
|
}, |
||||||
|
haveChildren: { |
||||||
|
title: '子项', |
||||||
|
dataIndex: 'haveChildren', |
||||||
|
key: 'haveChildren', |
||||||
|
width: '50px', |
||||||
|
}, |
||||||
|
createtime: { |
||||||
|
title: '创建时间', |
||||||
|
dataIndex: 'createtime', |
||||||
|
key: 'createtime', |
||||||
|
width: '140px', |
||||||
|
sorter: true, |
||||||
|
}, |
||||||
|
createName: { |
||||||
|
title: '创建人', |
||||||
|
dataIndex: 'createName', |
||||||
|
key: 'createName', |
||||||
|
}, |
||||||
|
updatetime: { |
||||||
|
title: '更新时间', |
||||||
|
dataIndex: 'updatetime', |
||||||
|
key: 'updatetime', |
||||||
|
maxWidth: '140px', |
||||||
|
minWidth: '140px', |
||||||
|
}, |
||||||
|
updateName: { |
||||||
|
title: '更新人', |
||||||
|
dataIndex: 'updateName', |
||||||
|
key: 'updateName', |
||||||
|
}, |
||||||
|
action: { |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
key: 'action', |
||||||
|
width: 100, |
||||||
|
align: 'center', |
||||||
|
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Dept可选表格列
|
||||||
|
export class DeptTableColumnChooseType { |
||||||
|
constructor() { |
||||||
|
const excludeColumn = ['updateName', 'updatetime', 'createName']; |
||||||
|
const tableColumn = new DeptTableColumnType(); |
||||||
|
return Object.keys(tableColumn).map((i) => ({ |
||||||
|
title: tableColumn[i].title, |
||||||
|
key: tableColumn[i].key, |
||||||
|
status: excludeColumn.includes(i) ? false : true, |
||||||
|
})); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Dept详细信息列表
|
||||||
|
export class DeptDetailsType { |
||||||
|
constructor() { |
||||||
|
return new Array( |
||||||
|
{ |
||||||
|
title: '部门名称', |
||||||
|
key: 'deptName', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '类型', |
||||||
|
key: 'deptTypeName', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '部门等级', |
||||||
|
key: 'grade', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '子部门数量', |
||||||
|
key: 'haveChildren', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '部门人员数量', |
||||||
|
key: 'userCount', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '部门负责人', |
||||||
|
key: 'deptLeaderName', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '部门默认分配角色', |
||||||
|
key: 'defaultRoleName', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '部门描述', |
||||||
|
key: 'deptDesc', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '部门状态', |
||||||
|
key: 'status', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '排序', |
||||||
|
key: 'orderNum', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '创建人', |
||||||
|
key: 'createName', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '创建时间', |
||||||
|
key: 'createtime', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '修改人', |
||||||
|
key: 'updateName', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '修改时间', |
||||||
|
key: 'updatetime', |
||||||
|
}, |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,113 @@ |
|||||||
|
<script setup name="DeptForm"> |
||||||
|
import { h, onMounted, ref, watch } from 'vue'; |
||||||
|
import { useBaseDataStore } from '@/stores/index.js'; |
||||||
|
import { ReloadOutlined, SettingOutlined } from '@ant-design/icons-vue'; |
||||||
|
import { DeptFormRulesType, DeptFormType } from '@/views/Auth/Dept/DataModal.js'; |
||||||
|
const baseDataStore = useBaseDataStore(); |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DeptForm', |
||||||
|
}); |
||||||
|
// 表单参数 |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Object, |
||||||
|
required: true, |
||||||
|
default: () => ({ |
||||||
|
// 表单状态 |
||||||
|
status: false, |
||||||
|
// 表单数据 |
||||||
|
formData: new DeptFormType(), |
||||||
|
// 确认 |
||||||
|
handleAck: (data) => data, |
||||||
|
// 取消 |
||||||
|
handleCancel: (data) => data, |
||||||
|
}), |
||||||
|
}, |
||||||
|
}); |
||||||
|
// ! 表单ref |
||||||
|
const formRef = ref(null); |
||||||
|
// ! 表单规则 |
||||||
|
const rules = new DeptFormRulesType(); |
||||||
|
// ! 确认 |
||||||
|
const handleAck = () => { |
||||||
|
formRef.value |
||||||
|
.validate() |
||||||
|
.then((value) => { |
||||||
|
const data = { ...value }; |
||||||
|
if (Array.isArray(value.pid) && value.pid.length > 0) { |
||||||
|
data.pid = value.pid.slice(-1)[0]; |
||||||
|
} |
||||||
|
if (Array.isArray(value.deptType) && value.deptType.length > 0) { |
||||||
|
data.deptType = value.deptType.slice(-1)[0]; |
||||||
|
} |
||||||
|
props.data.handleAck(data).catch((e) => e); |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
formRef.value.scrollToField(err?.errorFields[0]?.name); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
window.pino.info('@3 DeptForm Mounted!'); |
||||||
|
// ! 检测Dept列表 |
||||||
|
if (baseDataStore.state.deptList.length == 0) { |
||||||
|
baseDataStore.getDeptList(); |
||||||
|
} |
||||||
|
// ! 检测获取部门类型列表 |
||||||
|
if (baseDataStore.state.deptTypeList?.length == 0) { |
||||||
|
baseDataStore.getDeptTypeList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<AntdModalTemplate> |
||||||
|
<AForm ref="formRef" :model="props.data.formData" :rules="rules" name="DictForm" :label-col="{ span: 8 }" layout="vertical"> |
||||||
|
<AFormItem label="上级部门" name="pid"> |
||||||
|
<AFlex gap="small"> |
||||||
|
<ACascader |
||||||
|
flex="1" |
||||||
|
:disabled="props.data.isUpdate" |
||||||
|
allowClear |
||||||
|
showSearch |
||||||
|
v-model:value="props.data.formData.pid" |
||||||
|
:options="baseDataStore.state.deptTree" |
||||||
|
:multiple="false" |
||||||
|
placeholder="请选择上级部门" |
||||||
|
change-on-select |
||||||
|
/> |
||||||
|
<AButton flex="0" :icon="h(ReloadOutlined)" @click="baseDataStore.getDeptList()" shape="circle" /> |
||||||
|
</AFlex> |
||||||
|
</AFormItem> |
||||||
|
|
||||||
|
|
||||||
|
<AFormItem label="部门名称" name="deptName"> |
||||||
|
<AInput style="width: 100%" v-model:value="props.data.formData.deptName" placeholder="请输入部门名称" :maxlength="32" showCount /> |
||||||
|
</AFormItem> |
||||||
|
|
||||||
|
<AFormItem label="部门类型" name="deptType"> |
||||||
|
<AFlex gap="small"> |
||||||
|
<ASelect placeholder="请选择部门类型" v-model:value="props.data.formData.deptType" :options="baseDataStore.state.deptTypeTree" /> |
||||||
|
<AButton flex="0" :icon="h(ReloadOutlined)" @click="baseDataStore.getDeptTypeList()" shape="circle" /> |
||||||
|
</AFlex> |
||||||
|
</AFormItem> |
||||||
|
|
||||||
|
<AFormItem label="部门描述" name="deptDesc"> |
||||||
|
<ATextarea style="width: 100%" v-model:value="props.data.formData.deptDesc" :rows="3" placeholder="请输入部门描述" :maxlength="255" /> |
||||||
|
</AFormItem> |
||||||
|
|
||||||
|
<AFormItem label="排序" name="orderNum"> |
||||||
|
<AInputNumber v-model:value="props.data.formData.orderNum"> |
||||||
|
<template #addonAfter><SettingOutlined /></template> |
||||||
|
</AInputNumber> |
||||||
|
</AFormItem> |
||||||
|
</AForm> |
||||||
|
<template #footer> |
||||||
|
<AButton type="dashed" @click="props.data.handleCancel">取消</AButton> |
||||||
|
<AckCreateAntdButton @click="handleAck" /> |
||||||
|
</template> |
||||||
|
</AntdModalTemplate> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
@ -0,0 +1,259 @@ |
|||||||
|
<script setup name="DeptPage"> |
||||||
|
import { onMounted, reactive, watch } from 'vue'; |
||||||
|
import { useMessage } from 'naive-ui'; |
||||||
|
import { useBaseDataStore } from '@/stores/baseData.js'; |
||||||
|
import { AuthDept } from '@/api/index.js'; |
||||||
|
import { DeptDetailsType, DeptFormType, DeptSearchType, DeptTableColumnChooseType } from './DataModal.js'; |
||||||
|
import DeptForm from './DeptForm.vue'; |
||||||
|
import DeptTable from './DeptTable.vue'; |
||||||
|
import DeptTree from './DeptTree.vue'; |
||||||
|
|
||||||
|
const baseDataStore = useBaseDataStore(); |
||||||
|
const Message = useMessage(); |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DeptPage', |
||||||
|
}); |
||||||
|
// 待查询次数 |
||||||
|
let searchCount = 0; |
||||||
|
|
||||||
|
// ! 表单数据 |
||||||
|
const formData = reactive({ |
||||||
|
// 弹窗名称 |
||||||
|
modelName: '创建部门', |
||||||
|
// 弹窗状态 |
||||||
|
status: false, |
||||||
|
// 编辑状态 |
||||||
|
isUpdate: false, |
||||||
|
// 部门ID |
||||||
|
deptId: undefined, |
||||||
|
formData: new DeptFormType(), |
||||||
|
// 确认 |
||||||
|
handleAck: handleCreateAck, |
||||||
|
// 取消 |
||||||
|
handleCancel: clearFormData, |
||||||
|
}); |
||||||
|
// ! 表格数据 |
||||||
|
const tableData = reactive({ |
||||||
|
dataSource: [], |
||||||
|
pageInfo: new DeptSearchType(), |
||||||
|
total: 0, |
||||||
|
methods: { |
||||||
|
handleTableChange, |
||||||
|
handleRemoveAck, |
||||||
|
handleUpdate, |
||||||
|
handleDetails, |
||||||
|
}, |
||||||
|
handlePageChange, |
||||||
|
columnList: new DeptTableColumnChooseType(), |
||||||
|
}); |
||||||
|
// ! 详细信息 |
||||||
|
const detailsData = reactive({ |
||||||
|
status: false, |
||||||
|
data: {}, |
||||||
|
list:[] |
||||||
|
}); |
||||||
|
// @1确认添加 |
||||||
|
async function handleCreateAck(data) { |
||||||
|
await AuthDept.createDept(data); |
||||||
|
Message.success('添加部门成功!'); |
||||||
|
clearSearchData(); |
||||||
|
clearFormData(); |
||||||
|
getPage(); |
||||||
|
baseDataStore.getDeptList(); |
||||||
|
} |
||||||
|
// @2确认删除 |
||||||
|
async function handleRemoveAck(data) { |
||||||
|
await AuthDept.removeDept(data.deptId); |
||||||
|
Message.success('删除部门成功!'); |
||||||
|
detailsData.status = false; |
||||||
|
if (tableData.dataSource.length == 1 && tableData.pageInfo.pageNumber > 1) { |
||||||
|
tableData.pageInfo.pageNumber--; |
||||||
|
} |
||||||
|
getPage(); |
||||||
|
baseDataStore.getDeptList(); |
||||||
|
} |
||||||
|
// @3更新数据 todo |
||||||
|
async function handleUpdate(data) { |
||||||
|
formData.modelName = '更新部门'; |
||||||
|
formData.status = true; |
||||||
|
formData.isUpdate = true; |
||||||
|
formData.deptId = data.deptId; |
||||||
|
formData.handleAck = handleUpdateAck; |
||||||
|
Object.keys(formData.formData).forEach((key) => { |
||||||
|
formData.formData[key] = data[key]; |
||||||
|
}); |
||||||
|
} |
||||||
|
// @4确认更新数据 todo |
||||||
|
async function handleUpdateAck(data) { |
||||||
|
if (!data.pid) { |
||||||
|
data.pid = 0; |
||||||
|
} |
||||||
|
await AuthDept.updateDept(formData.deptId, data); |
||||||
|
Message.success('更新部门成功!'); |
||||||
|
clearFormData(); |
||||||
|
getPage(); |
||||||
|
baseDataStore.getDeptList(); |
||||||
|
} |
||||||
|
// @5监听筛选 todo |
||||||
|
watch(tableData.pageInfo, () => { |
||||||
|
getPage(); |
||||||
|
}); |
||||||
|
// @6获取表格数据 |
||||||
|
async function getPage() { |
||||||
|
if (searchCount === 0) { |
||||||
|
searchCount++; |
||||||
|
setTimeout(() => { |
||||||
|
searchCount = 0; |
||||||
|
}, 500); |
||||||
|
} else { |
||||||
|
searchCount++; |
||||||
|
return; |
||||||
|
} |
||||||
|
const pageInfo = { ...tableData.pageInfo }; |
||||||
|
pageInfo.hierarchy = pageInfo.hierarchy.length > 0 ? pageInfo.hierarchy[0] : undefined; |
||||||
|
const resd = await AuthDept.getDept(pageInfo); |
||||||
|
tableData.dataSource = resd.rowData; |
||||||
|
tableData.total = Number(resd.total); |
||||||
|
} |
||||||
|
// @7页码变动 |
||||||
|
function handlePageChange(page, pageSize) { |
||||||
|
tableData.pageInfo.pageSize = pageSize; |
||||||
|
tableData.pageInfo.pageNumber = page; |
||||||
|
} |
||||||
|
// @7表格筛选变动 |
||||||
|
function handleTableChange(page, filter, sorter) { |
||||||
|
if (sorter.order == 'ascend') { |
||||||
|
tableData.pageInfo.isAsc = true; |
||||||
|
} else if (sorter.order == 'descend') { |
||||||
|
tableData.pageInfo.isAsc = false; |
||||||
|
} else { |
||||||
|
tableData.pageInfo.isAsc = undefined; |
||||||
|
} |
||||||
|
} |
||||||
|
// @8清除筛选条件 |
||||||
|
function clearSearchData() { |
||||||
|
const newPageInfo = new DeptSearchType(); |
||||||
|
Object.keys(tableData.pageInfo).forEach((key) => { |
||||||
|
tableData.pageInfo[key] = newPageInfo[key]; |
||||||
|
}); |
||||||
|
} |
||||||
|
// @9清除编辑数据 |
||||||
|
function clearFormData() { |
||||||
|
formData.modelName = '创建部门'; |
||||||
|
formData.isUpdate = false; |
||||||
|
formData.status = false; |
||||||
|
formData.deptId = undefined; |
||||||
|
formData.handleAck = handleCreateAck; |
||||||
|
const newFormData = new DeptFormType(); |
||||||
|
Object.keys(formData.formData).forEach((key) => { |
||||||
|
formData.formData[key] = newFormData[key]; |
||||||
|
}); |
||||||
|
} |
||||||
|
// @10 查看详细信息 |
||||||
|
async function handleDetails(data){ |
||||||
|
detailsData.status = true; |
||||||
|
const resd = await AuthDept.getDeptMore(data.deptId); |
||||||
|
detailsData.data = resd; |
||||||
|
detailsData.list = (new DeptDetailsType()).map(item => { |
||||||
|
item.data = resd[item.key]; |
||||||
|
return item; |
||||||
|
}); |
||||||
|
} |
||||||
|
// @11 关闭详情 |
||||||
|
function handleDetailsClose(){ |
||||||
|
detailsData.data = {}; |
||||||
|
detailsData.list = []; |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
window.pino.deb('@1 DeptPage Mounted!'); |
||||||
|
getPage(); |
||||||
|
// ! 检测获取部门类型列表 |
||||||
|
if (baseDataStore.state.menuTypeList?.length == 0) { |
||||||
|
baseDataStore.getMenuTypeList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<WorkContainer> |
||||||
|
<template #header> |
||||||
|
<ASpace> |
||||||
|
<CreateAntdButton name="部门" @click="formData.status = true" /> |
||||||
|
<TableColumChoose v-model:columnList="tableData.columnList" /> |
||||||
|
<AInputSearch v-model:value="tableData.pageInfo.deptInfo" placeholder="部门组织信息" style="width: 200px" @search="getPage" /> |
||||||
|
<ASelect style="width: 150px" placeholder="请选择部门类型" allowClear v-model:value="tableData.pageInfo.deptType" :options="baseDataStore.state.deptTypeList" /> |
||||||
|
</ASpace> |
||||||
|
</template> |
||||||
|
<template #main> |
||||||
|
<div class="deptBody"> |
||||||
|
<div class="tree"><DeptTree v-model:selectedKeys="tableData.pageInfo.hierarchy" /></div> |
||||||
|
<div class="table"><DeptTable :tableData="tableData" /></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template #footer> |
||||||
|
<TablePagination :data="tableData" /> |
||||||
|
</template> |
||||||
|
<template #modal> |
||||||
|
<AModal |
||||||
|
v-model:open="formData.status" |
||||||
|
:title="formData.modelName" |
||||||
|
:centered="true" |
||||||
|
style="height: 600px" |
||||||
|
:maskClosable="false" |
||||||
|
:destroyOnClose="true" |
||||||
|
:onCancel="clearFormData" |
||||||
|
> |
||||||
|
<DeptForm :data="formData" /> |
||||||
|
<template #footer></template> |
||||||
|
</AModal> |
||||||
|
<ADrawer v-model:open="detailsData.status" title="部门详细信息" placement="right" size="large" @close="handleDetailsClose"> |
||||||
|
<template #extra> |
||||||
|
<ASpace> |
||||||
|
<TableRemoveButton :ackDelete="() => tableData.methods.handleRemoveAck(detailsData.data)" /> |
||||||
|
<TableUpdateButton @click="tableData.methods.handleUpdate(detailsData.data)" /> |
||||||
|
</ASpace> |
||||||
|
</template> |
||||||
|
<AList :data-source="detailsData.list"> |
||||||
|
<template #renderItem="{ item }"> |
||||||
|
<AListItem> |
||||||
|
<AListItemMeta :description="item.title"> |
||||||
|
<!-- <template #title>{{item.title}}</template>--> |
||||||
|
</AListItemMeta> |
||||||
|
{{item.data === '' ? '暂无数据' : item.data}} |
||||||
|
</AListItem> |
||||||
|
</template> |
||||||
|
</AList> |
||||||
|
</ADrawer> |
||||||
|
</template> |
||||||
|
</WorkContainer> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.deptBody { |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
& > div.tree { |
||||||
|
position: relative; |
||||||
|
flex-shrink: 0; |
||||||
|
max-height: 100%; |
||||||
|
width: 300px; |
||||||
|
border-right: 1px solid #cdcdcd; |
||||||
|
padding-right: 5px; |
||||||
|
} |
||||||
|
& > div.table { |
||||||
|
position: relative; |
||||||
|
flex: 1; |
||||||
|
max-height: 100%; |
||||||
|
padding-left: 5px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
} |
||||||
|
.detailsContent{ |
||||||
|
font-weight: bold; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,90 @@ |
|||||||
|
<script setup name="DeptTable"> |
||||||
|
import { computed, onMounted, ref, h } from 'vue'; |
||||||
|
import { DeptTableColumnType } from '@/views/Auth/Dept/DataModal.js'; |
||||||
|
import { Button } from 'ant-design-vue'; |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DeptTable', |
||||||
|
}); |
||||||
|
const props = defineProps({ |
||||||
|
tableData: { |
||||||
|
type: Object, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}); |
||||||
|
const isLoading = ref(true); |
||||||
|
// ! 表格列对象 |
||||||
|
const tableColumnObject = new DeptTableColumnType(); |
||||||
|
tableColumnObject.deptName.customRender = ({ text, record, index, column }) => { |
||||||
|
return h( |
||||||
|
Button, |
||||||
|
{ |
||||||
|
type: 'link', |
||||||
|
onClick: () => { |
||||||
|
props.tableData.methods.handleDetails(record); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ default: () => text }, |
||||||
|
); |
||||||
|
}; |
||||||
|
const tableColumns = computed(() => { |
||||||
|
// ! 判断是否存在表格列参数 |
||||||
|
setTableAuto(); |
||||||
|
if (props.tableData.columnList && props.tableData.columnList.length > 0) { |
||||||
|
// ! 过滤选择后的表格列参数 |
||||||
|
const existColumn = props.tableData.columnList.filter((i) => i.status === true); |
||||||
|
if (existColumn.length == 0) { |
||||||
|
// ! 过滤后的列不存在,传默认的列 |
||||||
|
return Object.keys(tableColumnObject).map((column) => tableColumnObject[column]); |
||||||
|
} else { |
||||||
|
// ! 传过滤后的列 |
||||||
|
return existColumn.map((column) => tableColumnObject[column.key]); |
||||||
|
} |
||||||
|
} else { |
||||||
|
// 传默认的列 |
||||||
|
return Object.keys(tableColumnObject).map((column) => tableColumnObject[column]); |
||||||
|
} |
||||||
|
}); |
||||||
|
function setTableAuto() { |
||||||
|
isLoading.value = false; |
||||||
|
setTimeout(() => { |
||||||
|
isLoading.value = true; |
||||||
|
}, 100); |
||||||
|
} |
||||||
|
|
||||||
|
function handleResizeColumn(w, col) { |
||||||
|
col.width = w; |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
window.pino.deb('@2 DeptTable Mounted!'); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<PacmanLoading v-if="!isLoading" loading="1" /> |
||||||
|
<ATable |
||||||
|
v-if="isLoading" |
||||||
|
style="height: 100%" |
||||||
|
:dataSource="props.tableData.dataSource" |
||||||
|
:columns="tableColumns" |
||||||
|
@change="props.tableData.methods.handleTableChange" |
||||||
|
:pagination="false" |
||||||
|
sticky |
||||||
|
tableLayout="auto" |
||||||
|
@resizeColumn="handleResizeColumn" |
||||||
|
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" |
||||||
|
:scroll="{ scrollToFirstRowOnChange: true }" |
||||||
|
> |
||||||
|
<template #bodyCell="{ column, record }"> |
||||||
|
<template v-if="column?.key === 'action'"> |
||||||
|
<ASpace> |
||||||
|
<TableRemoveButton :ackDelete="() => props.tableData.methods.handleRemoveAck(record)" /> |
||||||
|
<TableUpdateButton @click="props.tableData.methods.handleUpdate(record)" /> |
||||||
|
</ASpace> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</ATable> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
@ -0,0 +1,34 @@ |
|||||||
|
<script setup name="DeptTree"> |
||||||
|
defineOptions({ |
||||||
|
name: 'DeptTree', |
||||||
|
}); |
||||||
|
import { useBaseDataStore } from '@/stores/baseData.js'; |
||||||
|
import { onMounted, reactive } from 'vue'; |
||||||
|
const baseDataStore = useBaseDataStore(); |
||||||
|
|
||||||
|
|
||||||
|
// ! 树字段重置 |
||||||
|
const fieldNames = reactive({ |
||||||
|
children:'children', title:'label', key:'id' |
||||||
|
}); |
||||||
|
|
||||||
|
// 当页面加载时 |
||||||
|
onMounted(() => { |
||||||
|
window.pino.info('@4 DeptTree Mounted'); |
||||||
|
// ! 检测获取字典列表 |
||||||
|
if (baseDataStore.state.menuList?.length == 0) { |
||||||
|
baseDataStore.getDeptList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<ATree |
||||||
|
:treeData="baseDataStore.state.deptTree" |
||||||
|
:show-line="true" |
||||||
|
show-icon |
||||||
|
:fieldNames="fieldNames" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
@ -0,0 +1,14 @@ |
|||||||
|
<script setup name="RolePage"> |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'RolePage', |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
Loading…
Reference in new issue