update 负载配置左侧页面
This commit is contained in:
117
src/views/system/configuration/components/checkedDataDialog.vue
Normal file
117
src/views/system/configuration/components/checkedDataDialog.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="dialogVisible"
|
||||
diaTitle="已选数据列表"
|
||||
:width="'50%'"
|
||||
:height="'80%'"
|
||||
:confirm-closable="false"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<div class="compare-content">
|
||||
<BaseTable
|
||||
v-if="dialogVisible"
|
||||
ref="compareTableRef"
|
||||
showIndex
|
||||
showCheckbox
|
||||
fullHeight
|
||||
table-name="WORKLOAD_CONFIG_TABLE"
|
||||
:hide-pagination="true"
|
||||
:action-list="actionList"
|
||||
@load="tableLoadFun"
|
||||
@checkbox-change="checkboxChangeFun"
|
||||
@checkbox-all="checkboxAllChangeFun"
|
||||
>
|
||||
<template #leftOptions>
|
||||
<el-button :disabled="!selectedRows.length" @click="deleteMultiple">批量删除</el-button>
|
||||
</template>
|
||||
</BaseTable>
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, watch } from 'vue';
|
||||
import BaseTable from '@/components/common/table/baseTable.vue';
|
||||
import Dialog from '@/components/common/dialog/index.vue';
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean;
|
||||
checkedData: any[];
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: boolean): void;
|
||||
(e: 'data-change', value: any[]): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const compareTableRef = ref();
|
||||
const selectedRows = ref<any[]>([]);
|
||||
|
||||
const actionList = ref([
|
||||
{
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
click: (row: any) => {
|
||||
deleteSingle(row);
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
dialogVisible.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
watch(dialogVisible, (val) => {
|
||||
emit('update:modelValue', val);
|
||||
});
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const tableLoadFun = () => {
|
||||
compareTableRef.value?.setDataFun(props.checkedData);
|
||||
selectedRows.value = [];
|
||||
};
|
||||
|
||||
const deleteSingle = (data: any) => {
|
||||
const newData = props.checkedData.filter((item: any) => item.userId !== data.userId);
|
||||
emit('data-change', newData);
|
||||
refreshTable();
|
||||
};
|
||||
|
||||
const deleteMultiple = () => {
|
||||
const newData = props.checkedData.filter((item: any) => {
|
||||
return !selectedRows.value.some((selected: any) => selected.userId === item.userId);
|
||||
});
|
||||
emit('data-change', newData);
|
||||
refreshTable();
|
||||
};
|
||||
|
||||
const checkboxChangeFun = () => {
|
||||
selectedRows.value = compareTableRef.value?.tableRef?.getCheckboxRecords();
|
||||
};
|
||||
|
||||
const checkboxAllChangeFun = () => {
|
||||
selectedRows.value = compareTableRef.value?.tableRef?.getCheckboxRecords();
|
||||
};
|
||||
|
||||
const refreshTable = () => {
|
||||
nextTick(() => {
|
||||
compareTableRef.value?.setDataFun(props.checkedData);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.compare-content {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
196
src/views/system/configuration/components/workloadPermission.vue
Normal file
196
src/views/system/configuration/components/workloadPermission.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="workload-permission">
|
||||
<DragSplit leftContentWidth="50%" :showToggleBtn="false">
|
||||
<template #left>
|
||||
<div class="left">
|
||||
<div class="table-head">
|
||||
<div class="title">
|
||||
<el-icon class="icon"><Avatar /></el-icon>
|
||||
<span class="tip">负责人</span>
|
||||
<span class="divider">|</span>
|
||||
<span class="text">已选</span>
|
||||
<span class="user-num" @click="showLeftCheckedData">{{
|
||||
leftCheckedData.length
|
||||
}}</span>
|
||||
<span class="text">位</span>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<el-form label-width="auto" @submit.prevent class="demo-form-inline">
|
||||
<el-form-item label="部门：">
|
||||
<el-select
|
||||
v-model="leftParams.department"
|
||||
placeholder="请选择要过滤的部门"
|
||||
class="department-select"
|
||||
>
|
||||
<el-option label="部门1" value="1" />
|
||||
<el-option label="部门2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<BaseTable
|
||||
ref="leftTableRef"
|
||||
showCheckbox
|
||||
tableName="WORKLOAD_CONFIG_TABLE"
|
||||
fullHeight
|
||||
:params="leftParams"
|
||||
:showSetting="false"
|
||||
:api="userListUserApi"
|
||||
:rowConfig="{
|
||||
keyField: 'userId',
|
||||
}"
|
||||
@checkbox-change="leftChangeFun"
|
||||
@checkbox-all="leftAllChangeFun"
|
||||
@tableDataLoad="leftTableDataLoad"
|
||||
>
|
||||
</BaseTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #right> 34 </template>
|
||||
</DragSplit>
|
||||
<checkedDataDialog
|
||||
v-model="checkTableDataVisible"
|
||||
:checked-data="leftCheckedData"
|
||||
@data-change="handleDataChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue';
|
||||
import DragSplit from '@/components/common/dragSplit/index.vue';
|
||||
import BaseTable from '@/components/common/table/baseTable.vue';
|
||||
import { userListUserApi } from '@/api/system/user';
|
||||
import checkedDataDialog from './checkedDataDialog.vue';
|
||||
|
||||
// #region 左侧表格
|
||||
const leftTableRef = ref();
|
||||
const leftParams = ref({
|
||||
department: '',
|
||||
});
|
||||
const leftCheckedData = ref<any>([]);
|
||||
// 更新选中数据
|
||||
const leftChangeFun = (data: any) => {
|
||||
if (data.checked) {
|
||||
leftCheckedData.value.push(data.row);
|
||||
} else {
|
||||
leftCheckedData.value = leftCheckedData.value.filter(
|
||||
(item: any) => item.userId !== data.row.userId
|
||||
);
|
||||
}
|
||||
};
|
||||
// 更新全选
|
||||
const leftAllChangeFun = (data: any) => {
|
||||
if (data.checked) {
|
||||
leftCheckedData.value = [...leftCheckedData.value, ...leftTableRef.value.tableData];
|
||||
// 根据id去重
|
||||
leftCheckedData.value = leftCheckedData.value.filter(
|
||||
(item: any, index: number, arr: any) =>
|
||||
arr.findIndex((i: any) => i.userId === item.userId) === index
|
||||
);
|
||||
} else {
|
||||
leftCheckedData.value = leftCheckedData.value.filter((item: any) => {
|
||||
return !leftTableRef.value.tableData.some((i: any) => i.userId === item.userId);
|
||||
});
|
||||
}
|
||||
};
|
||||
const leftTableDataLoad = () => {
|
||||
nextTick(() => {
|
||||
const selectedKeys = leftCheckedData.value.map((item: any) => item.userId);
|
||||
leftTableRef.value.tableRef.setCheckboxRowKey(selectedKeys, true); // 设置为选中
|
||||
});
|
||||
};
|
||||
|
||||
const checkTableDataVisible = ref(false);
|
||||
const checkTableData = ref<any>([]);
|
||||
const showLeftCheckedData = () => {
|
||||
checkTableDataVisible.value = true;
|
||||
checkTableData.value = leftCheckedData.value;
|
||||
};
|
||||
|
||||
const handleDataChange = (newData: any[]) => {
|
||||
leftCheckedData.value = newData;
|
||||
// 同步更新左侧表格的选中状态
|
||||
nextTick(() => {
|
||||
leftTableRef.value?.tableRef?.clearCheckboxRow();
|
||||
leftTableDataLoad();
|
||||
});
|
||||
};
|
||||
|
||||
// # endregion
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workload-permission {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-head {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: 20px;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
color: var(--el-color-primary);
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
margin-right: 8px;
|
||||
}
|
||||
.divider {
|
||||
color: var(--el-border-color);
|
||||
margin: 0 8px;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.user-num {
|
||||
color: var(--el-color-primary);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin: 0 4px;
|
||||
padding: 0px 6px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
background: var(--el-color-primary-light-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.department-select {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user