abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化控制表格列的显示和隐藏组件

Browse Source
This commit is contained in:
DESKTOP-IGCH756\PC 2023-09-27 16:32:06 +08:00
parent 8ed32775cb
commit 667ef266a9
7 changed files with 125 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/demo/demo/index.ts
View File

@ -1,13 +1,14 @@
import request from '@/utils/request'; import request from '@/utils/request';
import { AxiosPromise } from 'axios'; import { AxiosPromise } from 'axios';
import { DemoVO, DemoForm, DemoQuery } from '@/api/demo/demo/types'; import { DemoVO, DemoForm, DemoPageQuery, DemoCountQuery } from '@/api/demo/demo/types';
/** /**
* 查询测试单列表 * 查询测试单列表
* @param query * @param query
* @returns {*} * @returns {*}
*/ */
export const listDemo = (query?: DemoQuery): AxiosPromise<DemoVO[]> => {
export const listDemo = (query?: DemoPageQuery): AxiosPromise<DemoVO[]> => {
return request({ return request({
url: '/demo/demo/list', url: '/demo/demo/list',
method: 'get', method: 'get',
@ -15,6 +16,19 @@ export const listDemo = (query?: DemoQuery): AxiosPromise<DemoVO[]> => {
}); });
}; };
/**
* 查询测试单数量
* @param query
* @returns {*}
*/
export const countDemo = (query?: DemoCountQuery): AxiosPromise<number> => {
return request({
url: '/demo/demo/count',
method: 'get',
params: query
});
};
/** /**
* 查询测试单详细 * 查询测试单详细
* @param id * @param id

39
src/api/demo/demo/types.ts
View File

@ -62,7 +62,7 @@ export interface DemoForm extends BaseEntity {
value?: string; value?: string;
} }
export interface DemoQuery extends PageQuery { export interface DemoPageQuery extends PageQuery {
/** /**
* 部门id * 部门id
*/ */
@ -87,4 +87,41 @@ export interface DemoQuery extends PageQuery {
* 值 * 值
*/ */
value?: string; value?: string;
/**
* 日期范围参数
*/
params?: any;
}
export interface DemoCountQuery {
/**
* 部门id
*/
deptId?: string | number;
/**
* 用户id
*/
userId?: string | number;
/**
* 排序号
*/
orderNum?: number;
/**
* key键
*/
testKey?: string;
/**
* 值
*/
value?: string;
/**
* 日期范围参数
*/
params?: any;
} }

53
src/components/RightToolbar/index.vue
View File

@ -7,13 +7,23 @@
<el-tooltip class="item" effect="dark" content="刷新" placement="top"> <el-tooltip class="item" effect="dark" content="刷新" placement="top">
<el-button circle icon="Refresh" @click="refresh()" /> <el-button circle icon="Refresh" @click="refresh()" />
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns"> <el-tooltip class="item" effect="dark" content="显示/隐藏列" placement="top" v-if="columns">
<el-button circle icon="Menu" @click="showColumn()" /> <el-popover placement="bottom" trigger="click">
<div class="tree-header">显示/隐藏列</div>
<el-tree
ref="columnRef"
:data="columns"
show-checkbox
@check="columnChange"
node-key="key"
:props="{ label: 'label', children: 'children' }"
></el-tree>
<template #reference>
<el-button circle icon="Menu" />
</template>
</el-popover>
</el-tooltip> </el-tooltip>
</el-row> </el-row>
<el-dialog :title="title" v-model="open" append-to-body>
<el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
</el-dialog>
</div> </div>
</template> </template>
@ -29,15 +39,9 @@ const props = defineProps({
gutter: propTypes.number.def(10), gutter: propTypes.number.def(10),
}) })
const columnRef = ref<ElTreeInstance>();
const emits = defineEmits(['update:showSearch', 'queryTable']); const emits = defineEmits(['update:showSearch', 'queryTable']);
// 显隐数据
const value = ref<Array<number>>([]);
// 弹出层标题
const title = ref("显示/隐藏");
// 是否显示弹出层
const open = ref(false);
const style = computed(() => { const style = computed(() => {
const ret: any = {}; const ret: any = {};
if (props.gutter) { if (props.gutter) {
@ -56,23 +60,19 @@ function refresh() {
emits("queryTable"); emits("queryTable");
} }
// 右侧列表元素变化 // 更改数据列的显示和隐藏
function dataChange(data: TransferKey[]) { function columnChange(...args: any[]) {
props.columns?.forEach((item) => { props.columns?.forEach((item) => {
item.visible = !data.includes(item.key); item.visible = args[1].checkedKeys.includes(item.key);
}) })
}
// 打开显隐列dialog
const showColumn = () => {
open.value = true;
} }
// 显隐列初始默认隐藏列 // 显隐列初始默认隐藏列
onMounted(() => { onMounted(() => {
props.columns?.forEach((item) => { props.columns?.forEach((item) => {
if (!item.visible) { if (item.visible) {
value.value.push(item.key); columnRef.value?.setChecked(item.key, true, false);
// value.value.push(item.key);
} }
}) })
}) })
@ -91,4 +91,9 @@ onMounted(() => {
.my-el-transfer { .my-el-transfer {
text-align: center; text-align: center;
} }
.tree-header{
width: 100%;
line-height: 24px;
text-align: center;
}
</style> </style>

1
src/types/global.d.ts vendored
View File

@ -13,6 +13,7 @@ declare global {
key: number; key: number;
label: string; label: string;
visible: boolean; visible: boolean;
children: Array<FieldOption>;
} }
/** /**

66
src/views/demo/demo/index.vue
View File

@ -1,34 +1,32 @@
<template> <template>
<div class="p-2"> <div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div class="mb-[10px]" v-show="showSearch"> <div class="search" v-show="showSearch">
<el-card shadow="hover"> <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px"> <el-form-item label="部门id" prop="deptId">
<el-form-item label="部门id" prop="deptId"> <el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable style="width: 240px" @keyup.enter="handleQuery" />
<el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable style="width: 240px" @keyup.enter="handleQuery" /> </el-form-item>
</el-form-item> <el-form-item label="用户id" prop="userId">
<el-form-item label="用户id" prop="userId"> <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable style="width: 240px" @keyup.enter="handleQuery" />
<el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable style="width: 240px" @keyup.enter="handleQuery" /> </el-form-item>
</el-form-item> <el-form-item label="排序号" prop="orderNum">
<el-form-item label="排序号" prop="orderNum"> <el-input v-model="queryParams.orderNum" placeholder="请输入排序号" clearable style="width: 240px" @keyup.enter="handleQuery" />
<el-input v-model="queryParams.orderNum" placeholder="请输入排序号" clearable style="width: 240px" @keyup.enter="handleQuery" /> </el-form-item>
</el-form-item> <el-form-item label="key键" prop="testKey">
<el-form-item label="key键" prop="testKey"> <el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable style="width: 240px" @keyup.enter="handleQuery" />
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable style="width: 240px" @keyup.enter="handleQuery" /> </el-form-item>
</el-form-item> <el-form-item label="值" prop="value">
<el-form-item label="值" prop="value"> <el-input v-model="queryParams.value" placeholder="请输入值" clearable style="width: 240px" @keyup.enter="handleQuery" />
<el-input v-model="queryParams.value" placeholder="请输入值" clearable style="width: 240px" @keyup.enter="handleQuery" /> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item>
</el-form-item> </el-form>
</el-form>
</el-card>
</div> </div>
</transition> </transition>
<el-card shadow="hover"> <el-card shadow="never">
<template #header> <template #header>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
@ -69,7 +67,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card> </el-card>
<!-- 添加或修改测试单对话框 --> <!-- 添加或修改测试单对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
@ -101,8 +99,8 @@
</template> </template>
<script setup name="Demo" lang="ts"> <script setup name="Demo" lang="ts">
import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo'; import { listDemo, getDemo, delDemo, addDemo, updateDemo } from "@/api/demo/demo";
import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types'; import { DemoVO, DemoPageQuery, DemoForm } from '@/api/demo/demo/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -131,8 +129,8 @@ const initFormData: DemoForm = {
testKey: undefined, testKey: undefined,
value: undefined, value: undefined,
} }
const data = reactive<PageData<DemoForm, DemoQuery>>({ const data = reactive<PageData<DemoForm, DemoPageQuery>>({
form: { ...initFormData }, form: {...initFormData},
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
@ -141,6 +139,8 @@ const data = reactive<PageData<DemoForm, DemoQuery>>({
orderNum: undefined, orderNum: undefined,
testKey: undefined, testKey: undefined,
value: undefined, value: undefined,
params: {
}
}, },
rules: { rules: {
id: [ id: [
@ -183,7 +183,7 @@ const cancel = () => {
/** 表单重置 */ /** 表单重置 */
const reset = () => { const reset = () => {
form.value = { ...initFormData }; form.value = {...initFormData};
demoFormRef.value?.resetFields(); demoFormRef.value?.resetFields();
} }
@ -229,9 +229,9 @@ const submitForm = () => {
if (valid) { if (valid) {
buttonLoading.value = true; buttonLoading.value = true;
if (form.value.id) { if (form.value.id) {
await updateDemo(form.value).finally(() => buttonLoading.value = false); await updateDemo(form.value).finally(() => buttonLoading.value = false);
} else { } else {
await addDemo(form.value).finally(() => buttonLoading.value = false); await addDemo(form.value).finally(() => buttonLoading.value = false);
} }
proxy?.$modal.msgSuccess("修改成功"); proxy?.$modal.msgSuccess("修改成功");
dialog.visible = false; dialog.visible = false;

14
src/views/system/user/index.vue
View File

@ -340,13 +340,13 @@ const upload = reactive<ImportOption>({
}) })
// 列显隐信息 // 列显隐信息
const columns = ref<FieldOption[]>([ const columns = ref<FieldOption[]>([
{ key: 0, label: `用户编号`, visible: false }, { key: 0, label: `用户编号`, visible: false,children: [] },
{ key: 1, label: `用户名称`, visible: true }, { key: 1, label: `用户名称`, visible: true,children: [] },
{ key: 2, label: `用户昵称`, visible: true }, { key: 2, label: `用户昵称`, visible: true,children: [] },
{ key: 3, label: `部门`, visible: true }, { key: 3, label: `部门`, visible: true,children: [] },
{ key: 4, label: `手机号码`, visible: true }, { key: 4, label: `手机号码`, visible: true,children: [] },
{ key: 5, label: `状态`, visible: true }, { key: 5, label: `状态`, visible: true,children: [] },
{ key: 6, label: `创建时间`, visible: true } { key: 6, label: `创建时间`, visible: true,children: [] }
]) ])

2
src/views/tool/gen/index.vue
View File

@ -193,7 +193,7 @@ const handleGenTable = async (row?: TableVO) => {
await genCode(row.tableId); await genCode(row.tableId);
proxy?.$modal.msgSuccess('成功生成到自定义路径：' + row.genPath); proxy?.$modal.msgSuccess('成功生成到自定义路径：' + row.genPath);
} else { } else {
proxy?.$download.zip('/tool/gen/batchGenCode?tableIdStr=' + tbIds, 'ruoyi.zip'); proxy?.$download.zip('/tool/gen/batchGenCode?tableIdStr=' + tbIds, 'codegen-ruoyi.zip');
} }
} }
/** 同步数据库操作 */ /** 同步数据库操作 */