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