|
|
@@ -1,89 +1,81 @@
|
|
|
<template>
|
|
|
- <div class="flex-column-page-wrap pageWrap">
|
|
|
- <el-card class="box-card">
|
|
|
+ <div class="pageWrap">
|
|
|
+ <el-aside style="background: #fff; margin-right: 10px" width="200px">
|
|
|
<el-container>
|
|
|
- <el-aside width="200px">
|
|
|
- <el-container>
|
|
|
- <el-header>
|
|
|
- <el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
|
|
|
- </el-header>
|
|
|
- <el-main class="nopadding">
|
|
|
- <el-tree
|
|
|
- ref="treeRef"
|
|
|
- class="menu-tree"
|
|
|
- :data="treeData"
|
|
|
- node-key="id"
|
|
|
- :current-node-key="''"
|
|
|
- :highlight-current="true"
|
|
|
- :expand-on-click-node="false"
|
|
|
- :props="defaultProps"
|
|
|
- default-expand-all
|
|
|
- :filter-node-method="filterNode"
|
|
|
- @node-click="roleClick"
|
|
|
- />
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-aside>
|
|
|
- <el-divider direction="vertical" style="height: 100vh" />
|
|
|
-
|
|
|
- <el-container>
|
|
|
- <el-main class="nopadding">
|
|
|
- <!-- 公用搜索组件 -->
|
|
|
- <LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
|
|
|
+ <el-header>
|
|
|
+ <el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
|
|
|
+ </el-header>
|
|
|
+ <el-main class="nopadding">
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ class="menu-tree"
|
|
|
+ :data="treeData"
|
|
|
+ node-key="id"
|
|
|
+ :current-node-key="''"
|
|
|
+ :highlight-current="true"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :props="defaultProps"
|
|
|
+ default-expand-all
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ @node-click="roleClick"
|
|
|
+ />
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-aside>
|
|
|
+ <!-- <el-divider direction="vertical" style="height: 100%" />-->
|
|
|
+ <div class="content-warp flex-column-page-wrap">
|
|
|
+ <!-- 公用搜索组件 -->
|
|
|
+ <LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
|
|
|
|
|
|
- <!-- LeTable 组件使用 -->
|
|
|
- <LeTable
|
|
|
- ref="tableRef"
|
|
|
- v-model:searchParams="tableOpts.searchParams"
|
|
|
- v-bind="tableOpts"
|
|
|
- v-model:curRow="tableOpts.curRow"
|
|
|
- v-model:checked-options="checkedColumns"
|
|
|
- :columns="activeColumns"
|
|
|
- >
|
|
|
- <template #toolLeft>
|
|
|
- <el-button type="primary" @click="addHandler">
|
|
|
- <el-icon class="btn-icon">
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- </el-button>
|
|
|
- <el-button type="danger">
|
|
|
- <el-icon class="btn-icon">
|
|
|
- <Delete />
|
|
|
- </el-icon>
|
|
|
- </el-button>
|
|
|
- <el-button plain> 分配角色 </el-button>
|
|
|
- <el-button plain> 密码重置 </el-button>
|
|
|
- </template>
|
|
|
+ <!-- LeTable 组件使用 -->
|
|
|
+ <LeTable
|
|
|
+ ref="tableRef"
|
|
|
+ v-model:searchParams="tableOpts.searchParams"
|
|
|
+ v-bind="tableOpts"
|
|
|
+ v-model:checked-options="checkedColumns"
|
|
|
+ :columns="activeColumns"
|
|
|
+ >
|
|
|
+ <template #toolLeft>
|
|
|
+ <el-button type="primary" @click="addHandler">
|
|
|
+ <el-icon class="btn-icon">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger">
|
|
|
+ <el-icon class="btn-icon">
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ <el-button plain> 分配角色 </el-button>
|
|
|
+ <el-button plain> 密码重置 </el-button>
|
|
|
+ </template>
|
|
|
|
|
|
- <template #filterAvatarSlot="scope">
|
|
|
- <el-avatar :src="scope.row.avatar" size="small"></el-avatar>
|
|
|
- </template>
|
|
|
+ <template #filterAvatarSlot="scope">
|
|
|
+ <el-avatar :src="scope.row.avatar" size="small"></el-avatar>
|
|
|
+ </template>
|
|
|
|
|
|
- <template #statusSlot="scope">
|
|
|
- <status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
|
|
|
- <status-indicator v-else pulse type="danger"></status-indicator>
|
|
|
- </template>
|
|
|
+ <template #statusSlot="scope">
|
|
|
+ <status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
|
|
|
+ <status-indicator v-else pulse type="danger"></status-indicator>
|
|
|
+ </template>
|
|
|
|
|
|
- <template #actionSlot="">
|
|
|
- <el-tooltip content="编辑" placement="bottom" effect="light">
|
|
|
- <el-icon class="ibt0">
|
|
|
- <Edit />
|
|
|
- </el-icon>
|
|
|
- </el-tooltip>
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
- <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
|
|
|
- <template #reference>
|
|
|
- <el-icon class="ibt0">
|
|
|
- <Delete />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-popconfirm>
|
|
|
- </template>
|
|
|
- </LeTable>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
- </el-card>
|
|
|
+ <template #actionSlot="">
|
|
|
+ <el-tooltip content="编辑" placement="bottom" effect="light">
|
|
|
+ <el-icon class="ibt0">
|
|
|
+ <Edit />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
|
|
|
+ <template #reference>
|
|
|
+ <el-icon class="ibt0">
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </LeTable>
|
|
|
+ </div>
|
|
|
|
|
|
<LeFormConfigDialog
|
|
|
v-if="visible"
|
|
|
@@ -132,12 +124,12 @@ const formOptions = ref({
|
|
|
{
|
|
|
prop: 'custName3',
|
|
|
label: '昵称',
|
|
|
- itemType: 'input',
|
|
|
+ itemType: 'input'
|
|
|
},
|
|
|
{
|
|
|
prop: 'custName4',
|
|
|
label: '姓名',
|
|
|
- itemType: 'input',
|
|
|
+ itemType: 'input'
|
|
|
},
|
|
|
{
|
|
|
prop: 'custName5',
|
|
|
@@ -154,7 +146,7 @@ const formOptions = ref({
|
|
|
t_label: '状态',
|
|
|
itemType: 'switch',
|
|
|
slots: {
|
|
|
- label: 'slot_label_test',
|
|
|
+ label: 'slot_label_test'
|
|
|
},
|
|
|
activeText: '是',
|
|
|
inactiveText: '否',
|
|
|
@@ -213,6 +205,8 @@ const getGroup = async () => {
|
|
|
// 左侧菜单点击
|
|
|
const roleClick = data => {
|
|
|
console.log(data.id, 'data.id')
|
|
|
+ // 修改search参数 watch 变更 自动刷新 列表
|
|
|
+ searchData.value = { ...searchData.value, data: { roleId: data.id ? data.id : null } }
|
|
|
// queryList()
|
|
|
// 刷新右侧的表格
|
|
|
}
|
|
|
@@ -320,10 +314,11 @@ const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
|
|
|
options: {
|
|
|
showIndex: false
|
|
|
},
|
|
|
- searchParams: {
|
|
|
- page: 1,
|
|
|
- size: 10
|
|
|
- },
|
|
|
+ // searchParams: {
|
|
|
+ // // page: 1,
|
|
|
+ // // size: 10,
|
|
|
+ // test: 1
|
|
|
+ // },
|
|
|
// 需要展示的列
|
|
|
columns,
|
|
|
// 控制列配置
|
|
|
@@ -336,9 +331,10 @@ const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
|
|
|
fetchImmediate: false
|
|
|
}
|
|
|
)
|
|
|
-
|
|
|
+// // 列接口请求后 进行赋值
|
|
|
+// checkedColumns.value = columns
|
|
|
// 删除
|
|
|
-const table_del = (row) => {
|
|
|
+const table_del = row => {
|
|
|
// 删除
|
|
|
}
|
|
|
|
|
|
@@ -366,13 +362,24 @@ watch(groupFilterText, val => {
|
|
|
})
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
+.pageWrap {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ //background: #fff;
|
|
|
+}
|
|
|
+.content-warp {
|
|
|
+ flex: 1;
|
|
|
+ //width: calc(100% - 250px);
|
|
|
+ width: calc(100% - 210px);
|
|
|
+}
|
|
|
// 单独自己写的
|
|
|
-:deep(.box-card) {
|
|
|
+/*:deep(.box-card) {
|
|
|
height: 100%;
|
|
|
.el-card__body {
|
|
|
padding: 0;
|
|
|
}
|
|
|
-}
|
|
|
+}*/
|
|
|
|
|
|
// 角色的树结构样式
|
|
|
:deep(.menu-tree) {
|
lanceJiang