style: lint格式化文件
This commit is contained in:
@ -1,55 +1,45 @@
|
||||
<template>
|
||||
<div class="overflow-hidden bg-white h-full" :style="{ 'border-right': '1px solid #e5e7eb' }">
|
||||
<BasicTree
|
||||
:title="t('组织列表')"
|
||||
toolbar
|
||||
search
|
||||
:clickRowToExpand="true"
|
||||
:treeData="treeData"
|
||||
:selectedKeys="selectedKeys"
|
||||
expandOnSearch
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template #title="{ name, departmentType }">
|
||||
<a-tag color="processing" v-if="departmentType === 1">公司</a-tag>
|
||||
<a-tag color="warning" v-else-if="departmentType === 0">部门</a-tag>
|
||||
{{ name }}
|
||||
</template>
|
||||
</BasicTree>
|
||||
</div>
|
||||
<div class="overflow-hidden bg-white h-full" :style="{ 'border-right': '1px solid #e5e7eb' }">
|
||||
<BasicTree :title="t('组织列表')" toolbar search :clickRowToExpand="true" :treeData="treeData" :selectedKeys="selectedKeys" expandOnSearch :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect">
|
||||
<template #title="{ name, departmentType }">
|
||||
<a-tag color="processing" v-if="departmentType === 1">公司</a-tag>
|
||||
<a-tag color="warning" v-else-if="departmentType === 0">部门</a-tag>
|
||||
{{ name }}
|
||||
</template>
|
||||
</BasicTree>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import { getDepartmentTree } from '/@/api/system/department';
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import { getDepartmentTree } from '/@/api/system/department';
|
||||
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
export default defineComponent({
|
||||
name: 'DeptTree',
|
||||
components: { BasicTree },
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
export default defineComponent({
|
||||
name: 'DeptTree',
|
||||
components: { BasicTree },
|
||||
|
||||
emits: ['select'],
|
||||
setup(_, { emit }) {
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
emits: ['select'],
|
||||
setup(_, { emit }) {
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getDepartmentTree()) as unknown as TreeItem[];
|
||||
let id = treeData.value[0].id;
|
||||
selectedKeys.value.push(id);
|
||||
emit('select', id);
|
||||
}
|
||||
async function fetch() {
|
||||
treeData.value = (await getDepartmentTree()) as unknown as TreeItem[];
|
||||
let id = treeData.value[0].id;
|
||||
selectedKeys.value.push(id);
|
||||
emit('select', id);
|
||||
}
|
||||
|
||||
function handleSelect(keys: string) {
|
||||
emit('select', keys[0]);
|
||||
}
|
||||
function handleSelect(keys: string) {
|
||||
emit('select', keys[0]);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
return { treeData, handleSelect, selectedKeys, t };
|
||||
},
|
||||
});
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
return { treeData, handleSelect, selectedKeys, t };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,181 +1,157 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:width="800"
|
||||
title="新增组织"
|
||||
:fixedHeight="true"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange" :class="{ 'h-full': ['1', '2'].includes(activeKey) }">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<BasicTable @register="registerTableAll" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已选" force-render>
|
||||
<BasicTable @register="registerTableSelected" />
|
||||
</a-tab-pane>
|
||||
<template #rightExtra>
|
||||
<div class="left-extra">
|
||||
<a-input
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入查询关键字"
|
||||
@keypress.enter="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #ccc" />
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :width="800" title="新增组织" :fixedHeight="true" @ok="handleSubmit">
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange" :class="{ 'h-full': ['1', '2'].includes(activeKey) }">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<BasicTable @register="registerTableAll" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已选" force-render>
|
||||
<BasicTable @register="registerTableSelected" />
|
||||
</a-tab-pane>
|
||||
<template #rightExtra>
|
||||
<div class="left-extra">
|
||||
<a-input v-model:value="searchText" placeholder="请输入查询关键字" @keypress.enter="handleSearch">
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #ccc" />
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="left-text">已选中{{ num }}条</span>
|
||||
</div>
|
||||
<a-button type="primary" danger :icon="h(DeleteOutlined)" @click="handleClear"> 清空 </a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="left-text">已选中{{ num }}条</span>
|
||||
</div>
|
||||
<a-button type="primary" danger :icon="h(DeleteOutlined)" @click="handleClear">
|
||||
清空
|
||||
</a-button>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</BasicModal>
|
||||
</a-tabs>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, h } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import { getDepartmentEnabledTree } from '/@/api/system/department';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('组织名称'),
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('组织编码'),
|
||||
dataIndex: 'code',
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
import { ref, h } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import { getDepartmentEnabledTree } from '/@/api/system/department';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('组织名称'),
|
||||
dataIndex: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: t('组织编码'),
|
||||
dataIndex: 'code',
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
const activeKey = ref('1');
|
||||
const selectedList = ref<any[]>([]);
|
||||
const num = ref(0);
|
||||
const searchText = ref('');
|
||||
const activeKey = ref('1');
|
||||
const selectedList = ref<any[]>([]);
|
||||
const num = ref(0);
|
||||
const searchText = ref('');
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false, fixedHeight: true });
|
||||
setSelectedRowKeys1(data.orgs?.map((x) => x.id) || []);
|
||||
reload();
|
||||
});
|
||||
|
||||
const [
|
||||
registerTableAll,
|
||||
{
|
||||
getSelectRows,
|
||||
setSelectedRowKeys: setSelectedRowKeys1,
|
||||
getSelectRowKeys: getSelectRowKeys1,
|
||||
reload,
|
||||
},
|
||||
] = useTable({
|
||||
api: getDepartmentEnabledTree,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, name: searchText.value };
|
||||
},
|
||||
showIndexColumn: false,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
},
|
||||
},
|
||||
striped: false,
|
||||
});
|
||||
|
||||
const [
|
||||
registerTableSelected,
|
||||
{ setTableData, setSelectedRowKeys: setSelectedRowKeys2, getSelectRowKeys: getSelectRowKeys2 },
|
||||
] = useTable({
|
||||
dataSource: selectedList.value,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
},
|
||||
},
|
||||
striped: false,
|
||||
});
|
||||
|
||||
const handleTabChange = (key) => {
|
||||
if (key === '2') {
|
||||
setSelectedRowKeys2(cloneDeep(getSelectRowKeys1()));
|
||||
selectedList.value = cloneDeep(getSelectRows());
|
||||
selectedList.value.map((x) => {
|
||||
delete x.children;
|
||||
});
|
||||
setTableData(selectedList.value);
|
||||
} else {
|
||||
setSelectedRowKeys1(getSelectRowKeys2());
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
searchText.value;
|
||||
reload();
|
||||
};
|
||||
const handleClear = () => {
|
||||
setSelectedRowKeys1([]);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
getSelectRows().map((x) => {
|
||||
delete x.children;
|
||||
const emits = defineEmits(['success']);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false, fixedHeight: true });
|
||||
setSelectedRowKeys1(data.orgs?.map((x) => x.id) || []);
|
||||
reload();
|
||||
});
|
||||
emits('success', getSelectRows());
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const [registerTableAll, { getSelectRows, setSelectedRowKeys: setSelectedRowKeys1, getSelectRowKeys: getSelectRowKeys1, reload }] = useTable({
|
||||
api: getDepartmentEnabledTree,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, name: searchText.value };
|
||||
},
|
||||
showIndexColumn: false,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
}
|
||||
},
|
||||
striped: false
|
||||
});
|
||||
|
||||
const [registerTableSelected, { setTableData, setSelectedRowKeys: setSelectedRowKeys2, getSelectRowKeys: getSelectRowKeys2 }] = useTable({
|
||||
dataSource: selectedList.value,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
}
|
||||
},
|
||||
striped: false
|
||||
});
|
||||
|
||||
const handleTabChange = (key) => {
|
||||
if (key === '2') {
|
||||
setSelectedRowKeys2(cloneDeep(getSelectRowKeys1()));
|
||||
selectedList.value = cloneDeep(getSelectRows());
|
||||
selectedList.value.map((x) => {
|
||||
delete x.children;
|
||||
});
|
||||
setTableData(selectedList.value);
|
||||
} else {
|
||||
setSelectedRowKeys1(getSelectRowKeys2());
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
searchText.value;
|
||||
reload();
|
||||
};
|
||||
const handleClear = () => {
|
||||
setSelectedRowKeys1([]);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
getSelectRows().map((x) => {
|
||||
delete x.children;
|
||||
});
|
||||
emits('success', getSelectRows());
|
||||
closeModal();
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-tabs-content),
|
||||
:deep(.vben-basic-table .ant-table-wrapper) {
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.vben-basic-table .ant-table) {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 60px;
|
||||
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
color: #5e95ff;
|
||||
}
|
||||
:deep(.ant-tabs-content),
|
||||
:deep(.vben-basic-table .ant-table-wrapper) {
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.vben-basic-table .ant-table) {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 60px;
|
||||
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
color: #5e95ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,195 +1,171 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:width="1000"
|
||||
title="新增岗位"
|
||||
:fixedHeight="true"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="w-2/5 xl:w-1/3">
|
||||
<DeptTree @select="handleSelect" />
|
||||
</div>
|
||||
<div class="w-3/5 xl:w-2/3">
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<BasicTable @register="registerTableAll" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已选" force-render>
|
||||
<BasicTable @register="registerTableSelected" />
|
||||
</a-tab-pane>
|
||||
<template #rightExtra>
|
||||
<div class="left-extra">
|
||||
<a-input
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入查询关键字"
|
||||
@keypress.enter="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #ccc" />
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="left-text">已选中{{ num }}条</span>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :width="1000" title="新增岗位" :fixedHeight="true" @ok="handleSubmit">
|
||||
<div class="flex">
|
||||
<div class="w-2/5 xl:w-1/3">
|
||||
<DeptTree @select="handleSelect" />
|
||||
</div>
|
||||
<a-button type="primary" danger :icon="h(DeleteOutlined)" @click="handleClear">
|
||||
清空
|
||||
</a-button>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
<div class="w-3/5 xl:w-2/3">
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<BasicTable @register="registerTableAll" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已选" force-render>
|
||||
<BasicTable @register="registerTableSelected" />
|
||||
</a-tab-pane>
|
||||
<template #rightExtra>
|
||||
<div class="left-extra">
|
||||
<a-input v-model:value="searchText" placeholder="请输入查询关键字" @keypress.enter="handleSearch">
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #ccc" />
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="left-text">已选中{{ num }}条</span>
|
||||
</div>
|
||||
<a-button type="primary" danger :icon="h(DeleteOutlined)" @click="handleClear"> 清空 </a-button>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, h } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import { getTreePostList } from '/@/api/system/post';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import DeptTree from './DeptTree.vue';
|
||||
import { ref, h } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import { getTreePostList } from '/@/api/system/post';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import DeptTree from './DeptTree.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('岗位名称'),
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('岗位编码'),
|
||||
dataIndex: 'code',
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('岗位名称'),
|
||||
dataIndex: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: t('岗位编码'),
|
||||
dataIndex: 'code',
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
const activeKey = ref('1');
|
||||
const selectedList = ref<any[]>([]);
|
||||
const num = ref(0);
|
||||
const searchText = ref('');
|
||||
const selectDeptId = ref('');
|
||||
const activeKey = ref('1');
|
||||
const selectedList = ref<any[]>([]);
|
||||
const num = ref(0);
|
||||
const searchText = ref('');
|
||||
const selectDeptId = ref('');
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
setSelectedRowKeys1(data.posts?.map((x) => x.id) || []);
|
||||
reload();
|
||||
});
|
||||
|
||||
const [
|
||||
registerTableAll,
|
||||
{
|
||||
getSelectRows,
|
||||
setSelectedRowKeys: setSelectedRowKeys1,
|
||||
getSelectRowKeys: getSelectRowKeys1,
|
||||
reload,
|
||||
},
|
||||
] = useTable({
|
||||
api: getTreePostList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
showIndexColumn: false,
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, deptId: selectDeptId.value, name: searchText.value };
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
},
|
||||
},
|
||||
striped: false,
|
||||
});
|
||||
|
||||
const [
|
||||
registerTableSelected,
|
||||
{ setTableData, setSelectedRowKeys: setSelectedRowKeys2, getSelectRowKeys: getSelectRowKeys2 },
|
||||
] = useTable({
|
||||
dataSource: selectedList.value,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
},
|
||||
},
|
||||
striped: false,
|
||||
});
|
||||
|
||||
const handleTabChange = (key) => {
|
||||
if (key === '2') {
|
||||
setSelectedRowKeys2(cloneDeep(getSelectRowKeys1()));
|
||||
selectedList.value = cloneDeep(getSelectRows());
|
||||
selectedList.value.map((x) => {
|
||||
delete x.children;
|
||||
});
|
||||
setTableData(selectedList.value);
|
||||
} else {
|
||||
setSelectedRowKeys1(getSelectRowKeys2());
|
||||
}
|
||||
};
|
||||
const handleSelect = (deptId = '') => {
|
||||
selectDeptId.value = deptId;
|
||||
reload({ searchInfo: { deptId, name: searchText.value } });
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
searchText.value;
|
||||
reload();
|
||||
};
|
||||
const handleClear = () => {
|
||||
setSelectedRowKeys1([]);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
getSelectRows().map((x) => {
|
||||
delete x.children;
|
||||
const emits = defineEmits(['success']);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
setSelectedRowKeys1(data.posts?.map((x) => x.id) || []);
|
||||
reload();
|
||||
});
|
||||
emits('success', getSelectRows());
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const [registerTableAll, { getSelectRows, setSelectedRowKeys: setSelectedRowKeys1, getSelectRowKeys: getSelectRowKeys1, reload }] = useTable({
|
||||
api: getTreePostList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
showIndexColumn: false,
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, deptId: selectDeptId.value, name: searchText.value };
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
}
|
||||
},
|
||||
striped: false
|
||||
});
|
||||
|
||||
const [registerTableSelected, { setTableData, setSelectedRowKeys: setSelectedRowKeys2, getSelectRowKeys: getSelectRowKeys2 }] = useTable({
|
||||
dataSource: selectedList.value,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
}
|
||||
},
|
||||
striped: false
|
||||
});
|
||||
|
||||
const handleTabChange = (key) => {
|
||||
if (key === '2') {
|
||||
setSelectedRowKeys2(cloneDeep(getSelectRowKeys1()));
|
||||
selectedList.value = cloneDeep(getSelectRows());
|
||||
selectedList.value.map((x) => {
|
||||
delete x.children;
|
||||
});
|
||||
setTableData(selectedList.value);
|
||||
} else {
|
||||
setSelectedRowKeys1(getSelectRowKeys2());
|
||||
}
|
||||
};
|
||||
const handleSelect = (deptId = '') => {
|
||||
selectDeptId.value = deptId;
|
||||
reload({ searchInfo: { deptId, name: searchText.value } });
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
searchText.value;
|
||||
reload();
|
||||
};
|
||||
const handleClear = () => {
|
||||
setSelectedRowKeys1([]);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
getSelectRows().map((x) => {
|
||||
delete x.children;
|
||||
});
|
||||
emits('success', getSelectRows());
|
||||
closeModal();
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.vben-basic-table .ant-table-wrapper) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav) {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 15px;
|
||||
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
color: #5e95ff;
|
||||
}
|
||||
:deep(.vben-basic-table .ant-table-wrapper) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-tabs-nav) {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 15px;
|
||||
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
color: #5e95ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,172 +1,148 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:width="800"
|
||||
title="新增角色"
|
||||
:fixedHeight="true"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<BasicTable @register="registerTableAll" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已选" force-render>
|
||||
<BasicTable @register="registerTableSelected" />
|
||||
</a-tab-pane>
|
||||
<template #rightExtra>
|
||||
<div class="left-extra">
|
||||
<a-input
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入查询关键字"
|
||||
@keypress.enter="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #ccc" />
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :width="800" title="新增角色" :fixedHeight="true" @ok="handleSubmit">
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<BasicTable @register="registerTableAll" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已选" force-render>
|
||||
<BasicTable @register="registerTableSelected" />
|
||||
</a-tab-pane>
|
||||
<template #rightExtra>
|
||||
<div class="left-extra">
|
||||
<a-input v-model:value="searchText" placeholder="请输入查询关键字" @keypress.enter="handleSearch">
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #ccc" />
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="left-text">已选中{{ num }}条</span>
|
||||
</div>
|
||||
<a-button type="primary" danger :icon="h(DeleteOutlined)" @click="handleClear"> 清空 </a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="left-text">已选中{{ num }}条</span>
|
||||
</div>
|
||||
<a-button type="primary" danger :icon="h(DeleteOutlined)" @click="handleClear">
|
||||
清空
|
||||
</a-button>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</BasicModal>
|
||||
</a-tabs>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, h } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import { getRolePageList } from '/@/api/system/role';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('角色名称'),
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('角色编码'),
|
||||
dataIndex: 'code',
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
import { ref, h } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import { getRolePageList } from '/@/api/system/role';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('角色名称'),
|
||||
dataIndex: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: t('角色编码'),
|
||||
dataIndex: 'code',
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
const activeKey = ref('1');
|
||||
const selectedList = ref<any[]>([]);
|
||||
const num = ref(0);
|
||||
const searchText = ref('');
|
||||
const activeKey = ref('1');
|
||||
const selectedList = ref<any[]>([]);
|
||||
const num = ref(0);
|
||||
const searchText = ref('');
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
setSelectedRowKeys1(data.roles?.map((x) => x.id) || []);
|
||||
selectedList.value = cloneDeep(data.roles);
|
||||
setTableData(selectedList.value);
|
||||
reload();
|
||||
});
|
||||
const emits = defineEmits(['success']);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
setSelectedRowKeys1(data.roles?.map((x) => x.id) || []);
|
||||
selectedList.value = cloneDeep(data.roles);
|
||||
setTableData(selectedList.value);
|
||||
reload();
|
||||
});
|
||||
|
||||
const [
|
||||
registerTableAll,
|
||||
{
|
||||
getSelectRows,
|
||||
setSelectedRowKeys: setSelectedRowKeys1,
|
||||
getSelectRowKeys: getSelectRowKeys1,
|
||||
reload,
|
||||
},
|
||||
] = useTable({
|
||||
api: getRolePageList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, name: searchText.value };
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
},
|
||||
},
|
||||
striped: false,
|
||||
});
|
||||
const [registerTableAll, { getSelectRows, setSelectedRowKeys: setSelectedRowKeys1, getSelectRowKeys: getSelectRowKeys1, reload }] = useTable({
|
||||
api: getRolePageList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, name: searchText.value };
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
}
|
||||
},
|
||||
striped: false
|
||||
});
|
||||
|
||||
const [
|
||||
registerTableSelected,
|
||||
{ setTableData, setSelectedRowKeys: setSelectedRowKeys2, getSelectRowKeys: getSelectRowKeys2 },
|
||||
] = useTable({
|
||||
dataSource: selectedList.value,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
},
|
||||
},
|
||||
striped: false,
|
||||
});
|
||||
const [registerTableSelected, { setTableData, setSelectedRowKeys: setSelectedRowKeys2, getSelectRowKeys: getSelectRowKeys2 }] = useTable({
|
||||
dataSource: selectedList.value,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
onChange: (val) => {
|
||||
num.value = val.length;
|
||||
}
|
||||
},
|
||||
striped: false
|
||||
});
|
||||
|
||||
const handleTabChange = (key) => {
|
||||
if (key === '2') {
|
||||
setSelectedRowKeys2(cloneDeep(getSelectRowKeys1()));
|
||||
selectedList.value = cloneDeep(getSelectRows());
|
||||
setTableData(selectedList.value);
|
||||
} else {
|
||||
setSelectedRowKeys1(getSelectRowKeys2());
|
||||
}
|
||||
};
|
||||
const handleTabChange = (key) => {
|
||||
if (key === '2') {
|
||||
setSelectedRowKeys2(cloneDeep(getSelectRowKeys1()));
|
||||
selectedList.value = cloneDeep(getSelectRows());
|
||||
setTableData(selectedList.value);
|
||||
} else {
|
||||
setSelectedRowKeys1(getSelectRowKeys2());
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
searchText.value;
|
||||
reload();
|
||||
};
|
||||
const handleClear = () => {
|
||||
setSelectedRowKeys1([]);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
emits('success', getSelectRows());
|
||||
closeModal();
|
||||
};
|
||||
const handleSearch = () => {
|
||||
searchText.value;
|
||||
reload();
|
||||
};
|
||||
const handleClear = () => {
|
||||
setSelectedRowKeys1([]);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
emits('success', getSelectRows());
|
||||
closeModal();
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.vben-basic-table .ant-table-wrapper) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 60px;
|
||||
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
color: #5e95ff;
|
||||
}
|
||||
:deep(.vben-basic-table .ant-table-wrapper) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 60px;
|
||||
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
color: #5e95ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,288 +1,257 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:width="800"
|
||||
title="新增角色"
|
||||
:fixedHeight="true"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="roleData"
|
||||
:rowSelection="rowSelectionAll"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:scroll="{ y: 400 }"
|
||||
@change="handleTableChange"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已选" force-render>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="selectedList"
|
||||
:rowSelection="rowSelectionSelected"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:scroll="{ y: 400 }"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<template #rightExtra>
|
||||
<div class="left-extra">
|
||||
<a-input
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入查询关键字"
|
||||
@keypress.enter="handleSearch"
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #ccc" />
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :width="800" title="新增角色" :fixedHeight="true" @ok="handleSubmit">
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<a-table :columns="columns" :dataSource="roleData" :rowSelection="rowSelectionAll" :pagination="pagination" :loading="loading" rowKey="id" size="middle" :scroll="{ y: 400 }" @change="handleTableChange" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="已选" force-render>
|
||||
<a-table :columns="columns" :dataSource="selectedList" :rowSelection="rowSelectionSelected" rowKey="id" size="middle" :scroll="{ y: 400 }" />
|
||||
</a-tab-pane>
|
||||
<template #rightExtra>
|
||||
<div class="left-extra">
|
||||
<a-input v-model:value="searchText" placeholder="请输入查询关键字" @keypress.enter="handleSearch" style="width: 200px">
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #ccc" />
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="left-text">已选中{{ selectedRowKeys.length }}条</span>
|
||||
</div>
|
||||
<a-button type="primary" danger :icon="h(DeleteOutlined)" @click="handleClear"> 清空 </a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="left-text">已选中{{ selectedRowKeys.length }}条</span>
|
||||
</div>
|
||||
<a-button type="primary" danger :icon="h(DeleteOutlined)" @click="handleClear">
|
||||
清空
|
||||
</a-button>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</BasicModal>
|
||||
</a-tabs>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, h, computed, nextTick } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { getRolePageList } from '/@/api/system/role';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { ref, h, computed, nextTick } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { getRolePageList } from '/@/api/system/role';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { t } = useI18n();
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: t('角色名称'),
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('角色编码'),
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: t('角色名称'),
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: t('角色编码'),
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
// 响应式数据
|
||||
const activeKey = ref('1');
|
||||
const roleData = ref<any[]>([]);
|
||||
const selectedList = ref<any[]>([]);
|
||||
const selectedRowKeys = ref<string[]>([]);
|
||||
const searchText = ref('');
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(15);
|
||||
// 响应式数据
|
||||
const activeKey = ref('1');
|
||||
const roleData = ref<any[]>([]);
|
||||
const selectedList = ref<any[]>([]);
|
||||
const selectedRowKeys = ref<string[]>([]);
|
||||
const searchText = ref('');
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(15);
|
||||
|
||||
// 使用Map存储所有已选择的角色数据，key为角色id，value为角色对象
|
||||
const selectedMap = ref<Map<string, any>>(new Map());
|
||||
// 使用Map存储所有已选择的角色数据，key为角色id，value为角色对象
|
||||
const selectedMap = ref<Map<string, any>>(new Map());
|
||||
|
||||
// 分页配置
|
||||
const pagination = computed(() => ({
|
||||
total: total.value,
|
||||
current: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
}));
|
||||
// 分页配置
|
||||
const pagination = computed(() => ({
|
||||
total: total.value,
|
||||
current: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`
|
||||
}));
|
||||
|
||||
// 定义事件
|
||||
const emits = defineEmits(['success']);
|
||||
// 定义事件
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
// 模态框注册
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
|
||||
// 初始化选择状态
|
||||
const roles = data.roles || [];
|
||||
selectedMap.value.clear();
|
||||
roles.forEach(role => {
|
||||
selectedMap.value.set(role.id, role);
|
||||
});
|
||||
|
||||
// 更新选择状态
|
||||
updateSelectionState();
|
||||
|
||||
await loadRoleData();
|
||||
});
|
||||
// 模态框注册
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
|
||||
// 获取角色数据
|
||||
const loadRoleData = async (params = {}) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getRolePageList({
|
||||
limit: currentPage.value,
|
||||
size: pageSize.value,
|
||||
name: searchText.value,
|
||||
...params,
|
||||
// 初始化选择状态
|
||||
const roles = data.roles || [];
|
||||
selectedMap.value.clear();
|
||||
roles.forEach((role) => {
|
||||
selectedMap.value.set(role.id, role);
|
||||
});
|
||||
|
||||
// 更新选择状态
|
||||
updateSelectionState();
|
||||
|
||||
await loadRoleData();
|
||||
});
|
||||
roleData.value = res.records || res.list || res;
|
||||
total.value = res.total || res.length || 0;
|
||||
} catch (error) {
|
||||
console.error('获取角色列表失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 表格翻页事件处理
|
||||
const handleTableChange = (pagination: any) => {
|
||||
currentPage.value = pagination.current;
|
||||
pageSize.value = pagination.pageSize;
|
||||
loadRoleData();
|
||||
};
|
||||
// 获取角色数据
|
||||
const loadRoleData = async (params = {}) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getRolePageList({
|
||||
limit: currentPage.value,
|
||||
size: pageSize.value,
|
||||
name: searchText.value,
|
||||
...params
|
||||
});
|
||||
roleData.value = res.records || res.list || res;
|
||||
total.value = res.total || res.length || 0;
|
||||
} catch (error) {
|
||||
console.error('获取角色列表失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 更新选择状态
|
||||
const updateSelectionState = () => {
|
||||
selectedRowKeys.value = Array.from(selectedMap.value.keys());
|
||||
selectedList.value = Array.from(selectedMap.value.values());
|
||||
};
|
||||
// 表格翻页事件处理
|
||||
const handleTableChange = (pagination: any) => {
|
||||
currentPage.value = pagination.current;
|
||||
pageSize.value = pagination.pageSize;
|
||||
loadRoleData();
|
||||
};
|
||||
|
||||
// 全部表格的行选择配置
|
||||
const rowSelectionAll = computed(() => ({
|
||||
type: 'checkbox',
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys: string[], selectedRows: any[]) => {
|
||||
// 处理单个选择/取消选择
|
||||
const currentPageIds = roleData.value.map(item => item.id);
|
||||
|
||||
// 移除当前页所有已选择的项
|
||||
currentPageIds.forEach(id => {
|
||||
selectedMap.value.delete(id);
|
||||
});
|
||||
|
||||
// 添加新选择的项
|
||||
selectedRows.forEach(row => {
|
||||
selectedMap.value.set(row.id, row);
|
||||
});
|
||||
|
||||
updateSelectionState();
|
||||
},
|
||||
onSelect: (record: any, selected: boolean) => {
|
||||
if (selected) {
|
||||
selectedMap.value.set(record.id, record);
|
||||
} else {
|
||||
selectedMap.value.delete(record.id);
|
||||
}
|
||||
updateSelectionState();
|
||||
},
|
||||
onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
|
||||
if (selected) {
|
||||
selectedRows.forEach(row => {
|
||||
selectedMap.value.set(row.id, row);
|
||||
});
|
||||
} else {
|
||||
changeRows.forEach(row => {
|
||||
selectedMap.value.delete(row.id);
|
||||
});
|
||||
}
|
||||
updateSelectionState();
|
||||
},
|
||||
}));
|
||||
// 更新选择状态
|
||||
const updateSelectionState = () => {
|
||||
selectedRowKeys.value = Array.from(selectedMap.value.keys());
|
||||
selectedList.value = Array.from(selectedMap.value.values());
|
||||
};
|
||||
|
||||
// 已选表格的行选择配置
|
||||
const rowSelectionSelected = computed(() => ({
|
||||
type: 'checkbox',
|
||||
selectedRowKeys: selectedList.value.map(item => item.id),
|
||||
onChange: (keys: string[], selectedRows: any[]) => {
|
||||
// 清空所有选择
|
||||
selectedMap.value.clear();
|
||||
|
||||
// 添加新选择的项
|
||||
selectedRows.forEach(row => {
|
||||
selectedMap.value.set(row.id, row);
|
||||
});
|
||||
|
||||
updateSelectionState();
|
||||
},
|
||||
}));
|
||||
// 全部表格的行选择配置
|
||||
const rowSelectionAll = computed(() => ({
|
||||
type: 'checkbox',
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys: string[], selectedRows: any[]) => {
|
||||
// 处理单个选择/取消选择
|
||||
const currentPageIds = roleData.value.map((item) => item.id);
|
||||
|
||||
// 标签页切换
|
||||
const handleTabChange = (key: string) => {
|
||||
activeKey.value = key;
|
||||
// 已选标签页不需要额外操作，selectedList已经是最新的
|
||||
};
|
||||
// 移除当前页所有已选择的项
|
||||
currentPageIds.forEach((id) => {
|
||||
selectedMap.value.delete(id);
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
currentPage.value = 1; // 搜索时重置到第一页
|
||||
loadRoleData({ name: searchText.value });
|
||||
};
|
||||
// 添加新选择的项
|
||||
selectedRows.forEach((row) => {
|
||||
selectedMap.value.set(row.id, row);
|
||||
});
|
||||
|
||||
// 清空选择
|
||||
const handleClear = () => {
|
||||
selectedMap.value.clear();
|
||||
updateSelectionState();
|
||||
};
|
||||
updateSelectionState();
|
||||
},
|
||||
onSelect: (record: any, selected: boolean) => {
|
||||
if (selected) {
|
||||
selectedMap.value.set(record.id, record);
|
||||
} else {
|
||||
selectedMap.value.delete(record.id);
|
||||
}
|
||||
updateSelectionState();
|
||||
},
|
||||
onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
|
||||
if (selected) {
|
||||
selectedRows.forEach((row) => {
|
||||
selectedMap.value.set(row.id, row);
|
||||
});
|
||||
} else {
|
||||
changeRows.forEach((row) => {
|
||||
selectedMap.value.delete(row.id);
|
||||
});
|
||||
}
|
||||
updateSelectionState();
|
||||
}
|
||||
}));
|
||||
|
||||
// 提交
|
||||
const handleSubmit = () => {
|
||||
emits('success', Array.from(selectedMap.value.values()));
|
||||
closeModal();
|
||||
};
|
||||
// 已选表格的行选择配置
|
||||
const rowSelectionSelected = computed(() => ({
|
||||
type: 'checkbox',
|
||||
selectedRowKeys: selectedList.value.map((item) => item.id),
|
||||
onChange: (keys: string[], selectedRows: any[]) => {
|
||||
// 清空所有选择
|
||||
selectedMap.value.clear();
|
||||
|
||||
// 添加新选择的项
|
||||
selectedRows.forEach((row) => {
|
||||
selectedMap.value.set(row.id, row);
|
||||
});
|
||||
|
||||
updateSelectionState();
|
||||
}
|
||||
}));
|
||||
|
||||
// 标签页切换
|
||||
const handleTabChange = (key: string) => {
|
||||
activeKey.value = key;
|
||||
// 已选标签页不需要额外操作，selectedList已经是最新的
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
currentPage.value = 1; // 搜索时重置到第一页
|
||||
loadRoleData({ name: searchText.value });
|
||||
};
|
||||
|
||||
// 清空选择
|
||||
const handleClear = () => {
|
||||
selectedMap.value.clear();
|
||||
updateSelectionState();
|
||||
};
|
||||
|
||||
// 提交
|
||||
const handleSubmit = () => {
|
||||
emits('success', Array.from(selectedMap.value.values()));
|
||||
closeModal();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.left-text {
|
||||
color: #5e95ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 60px;
|
||||
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
color: #5e95ff;
|
||||
.left-text {
|
||||
color: #5e95ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 60px;
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.left-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.left-text {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
color: #5e95ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,345 +1,336 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<div class="dept-v2 w-1/3 xl:w-1/4">
|
||||
<div class="tree-title">
|
||||
组织列表
|
||||
</div>
|
||||
<DeptTreeV2 @changeValue="handleSelect" />
|
||||
</div>
|
||||
<BasicTable @register="registerTable" class="w-2/3 xl:w-3/4">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" v-auth="'user:add'" @click="handleCreate">{{
|
||||
t('新增用户')
|
||||
}}</a-button>
|
||||
<a-button type="default" v-auth="'user:resetPassword'" @click="handleReset">{{
|
||||
t('重置密码')
|
||||
}}</a-button>
|
||||
<a-button type="default" v-auth="'user:syncOrgAndUser'" @click="handleSync">{{
|
||||
t('同步组织人员')
|
||||
}}</a-button>
|
||||
<a-button type="default" v-auth="'user:unlock'" @click="handleLock">
|
||||
{{ lockText }}
|
||||
</a-button>
|
||||
</template>
|
||||
<template #action="{ record, index }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
auth: 'menu:edit',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
auth: 'menu:delete',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: t('是否确认删除'),
|
||||
visible: popVisible(index),
|
||||
onVisibleChange: handleVisibleChange.bind(null, index),
|
||||
confirm: handleDelete.bind(null, record),
|
||||
cancel: handleCancel,
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<AccountModal @register="registerModal" @success="handleSuccess" />
|
||||
</PageWrapper>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<div class="dept-v2 w-1/3 xl:w-1/4">
|
||||
<div class="tree-title"> 组织列表 </div>
|
||||
<DeptTreeV2 @changeValue="handleSelect" />
|
||||
</div>
|
||||
<BasicTable @register="registerTable" class="w-2/3 xl:w-3/4">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" v-auth="'user:add'" @click="handleCreate">{{ t('新增用户') }}</a-button>
|
||||
<a-button type="default" v-auth="'user:resetPassword'" @click="handleReset">{{ t('重置密码') }}</a-button>
|
||||
<a-button type="default" v-auth="'user:syncOrgAndUser'" @click="handleSync">{{ t('同步组织人员') }}</a-button>
|
||||
<a-button type="default" v-auth="'user:unlock'" @click="handleLock">
|
||||
{{ lockText }}
|
||||
</a-button>
|
||||
</template>
|
||||
<template #action="{ record, index }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
auth: 'menu:edit',
|
||||
onClick: handleEdit.bind(null, record)
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
auth: 'menu:delete',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: t('是否确认删除'),
|
||||
visible: popVisible(index),
|
||||
onVisibleChange: handleVisibleChange.bind(null, index),
|
||||
confirm: handleDelete.bind(null, record),
|
||||
cancel: handleCancel
|
||||
}
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<AccountModal @register="registerModal" @success="handleSuccess" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref, computed } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import { getUserPageList, deleteUser, resetUserPassword, userEnabled, syncOrgAndUser } from '/@/api/system/user';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { defineComponent, h, ref, computed } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import { getUserPageList, deleteUser, resetUserPassword, userEnabled, syncOrgAndUser } from '/@/api/system/user';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import AccountModal from './components/UserModal.vue';
|
||||
import DeptTree from './components/DeptTree.vue';
|
||||
import DeptTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue'
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
const { t } = useI18n();
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'isSearchAll',
|
||||
label: t('全局搜索'),
|
||||
component: 'Checkbox',
|
||||
colProps: { style:'width:100px;' },
|
||||
},
|
||||
{
|
||||
field: 'userName',
|
||||
label: t('用户名'),
|
||||
component: 'Input',
|
||||
colProps: { lg: 8, md: 24 },
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: t('姓名'),
|
||||
component: 'Input',
|
||||
colProps: { lg: 8, md: 24 },
|
||||
},
|
||||
{
|
||||
field: 'code',
|
||||
label: t('编号'),
|
||||
component: 'Input',
|
||||
colProps: { lg: 8, md: 24 },
|
||||
},
|
||||
{
|
||||
field: 'mobile',
|
||||
label: t('手机号码'),
|
||||
component: 'Input',
|
||||
colProps: { lg: 8, md: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('用户名'),
|
||||
dataIndex: 'userName',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('姓名'),
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('编号'),
|
||||
dataIndex: 'code',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
width: 80,
|
||||
sorter: true,
|
||||
align: 'left',
|
||||
customRender: ({ record }) => {
|
||||
return record.gender === 1 ? '男' : record.gender === 0 ? '女' : '';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('手机号码'),
|
||||
dataIndex: 'mobile',
|
||||
width: 120,
|
||||
align: 'left',
|
||||
sorter: true,
|
||||
},
|
||||
|
||||
{
|
||||
title: t('邮箱'),
|
||||
dataIndex: 'email',
|
||||
width: 180,
|
||||
sorter: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('登录状态'),
|
||||
dataIndex: 'enabledMark',
|
||||
customRender: ({ record }) => {
|
||||
const enable = record.enabledMark;
|
||||
const color = enable === 1 ? 'green' : 'red';
|
||||
const text = enable === 1 ? '正常' : '锁定';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('备注'),
|
||||
dataIndex: 'remark',
|
||||
sorter: true,
|
||||
align: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserManagement',
|
||||
components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction, DeptTreeV2 },
|
||||
setup() {
|
||||
const { notification } = useMessage();
|
||||
const selectDeptId = ref('');
|
||||
const isVisible = ref<boolean>(false);
|
||||
const deleteIndex = ref();
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerTable, { reload, getSelectRows, setSelectedRowKeys }] = useTable({
|
||||
title: t('用户列表'),
|
||||
api: getUserPageList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16,
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
showResetButton: false,
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import AccountModal from './components/UserModal.vue';
|
||||
import DeptTree from './components/DeptTree.vue';
|
||||
import DeptTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
const { t } = useI18n();
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'isSearchAll',
|
||||
label: t('全局搜索'),
|
||||
component: 'Checkbox',
|
||||
colProps: { style: 'width:100px;' }
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
{
|
||||
field: 'userName',
|
||||
label: t('用户名'),
|
||||
component: 'Input',
|
||||
colProps: { lg: 8, md: 24 }
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
//发送请求默认新增 左边树结构所选机构id
|
||||
return params.isSearchAll?{...params}:{ ...params, departmentId: selectDeptId.value };
|
||||
{
|
||||
field: 'name',
|
||||
label: t('姓名'),
|
||||
component: 'Input',
|
||||
colProps: { lg: 8, md: 24 }
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
{
|
||||
field: 'code',
|
||||
label: t('编号'),
|
||||
component: 'Input',
|
||||
colProps: { lg: 8, md: 24 }
|
||||
},
|
||||
tableSetting: {
|
||||
size: false,
|
||||
setting: false,
|
||||
{
|
||||
field: 'mobile',
|
||||
label: t('手机号码'),
|
||||
component: 'Input',
|
||||
colProps: { lg: 8, md: 24 }
|
||||
}
|
||||
];
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('用户名'),
|
||||
dataIndex: 'userName',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: t('姓名'),
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: t('编号'),
|
||||
dataIndex: 'code',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
width: 80,
|
||||
sorter: true,
|
||||
align: 'left',
|
||||
customRender: ({ record }) => {
|
||||
return record.gender === 1 ? '男' : record.gender === 0 ? '女' : '';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('手机号码'),
|
||||
dataIndex: 'mobile',
|
||||
width: 120,
|
||||
align: 'left',
|
||||
sorter: true
|
||||
},
|
||||
});
|
||||
|
||||
const lockText = computed(() => {
|
||||
return getSelectRows()?.length && !getSelectRows()[0].enabledMark ? '解锁' : '锁定';
|
||||
});
|
||||
|
||||
function popVisible(index) {
|
||||
return isVisible.value && index === deleteIndex.value;
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
|
||||
function handleVisibleChange(index, bool) {
|
||||
if (!bool) {
|
||||
isVisible.value = false;
|
||||
return;
|
||||
{
|
||||
title: t('邮箱'),
|
||||
dataIndex: 'email',
|
||||
width: 180,
|
||||
sorter: true,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: t('登录状态'),
|
||||
dataIndex: 'enabledMark',
|
||||
customRender: ({ record }) => {
|
||||
const enable = record.enabledMark;
|
||||
const color = enable === 1 ? 'green' : 'red';
|
||||
const text = enable === 1 ? '正常' : '锁定';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: t('备注'),
|
||||
dataIndex: 'remark',
|
||||
sorter: true,
|
||||
align: 'left'
|
||||
}
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
notification.warning({
|
||||
message: '在线环境暂不允许该操作，请联系管理员。',
|
||||
});
|
||||
return;
|
||||
}
|
||||
isVisible.value = true;
|
||||
deleteIndex.value = index;
|
||||
}
|
||||
];
|
||||
|
||||
function handleDelete(record: Recordable) {
|
||||
isVisible.value = false;
|
||||
deleteUser([record.id]).then((_) => {
|
||||
reload();
|
||||
notification.success({
|
||||
message: t('删除'),
|
||||
description: t('成功'),
|
||||
}); //提示消息
|
||||
});
|
||||
}
|
||||
function handleCancel() {
|
||||
isVisible.value = false;
|
||||
}
|
||||
function handleSync(){
|
||||
syncOrgAndUser("fromDataCenter");
|
||||
notification.success({
|
||||
message: t('开始同步组织和人员，请稍后刷新页面查看结果'),
|
||||
description: t('成功'),
|
||||
});
|
||||
}
|
||||
function handleReset() {
|
||||
let rows = warning();
|
||||
if (!rows) {
|
||||
return;
|
||||
}
|
||||
resetUserPassword(rows.id).then(() => {
|
||||
notification.success({
|
||||
message: t('重置密码成功'),
|
||||
description: t('成功'),
|
||||
});
|
||||
});
|
||||
}
|
||||
async function handleLock() {
|
||||
let rows = warning();
|
||||
if (!rows) {
|
||||
return;
|
||||
}
|
||||
await userEnabled(rows.id);
|
||||
notification.success({
|
||||
message: getSelectRows()[0].enabledMark ? '锁定成功' : t('解锁成功'),
|
||||
description: t('成功'),
|
||||
});
|
||||
await reload();
|
||||
setSelectedRowKeys([rows.id]);
|
||||
}
|
||||
function warning() {
|
||||
const selectRows = getSelectRows();
|
||||
if (selectRows.length === 0) {
|
||||
notification.warning({
|
||||
message: t('警告'),
|
||||
description: t('必须选中一行！'),
|
||||
}); //提示消息
|
||||
return false;
|
||||
} else {
|
||||
return selectRows[0];
|
||||
}
|
||||
}
|
||||
function handleSuccess() {
|
||||
reload();
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'UserManagement',
|
||||
components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction, DeptTreeV2 },
|
||||
setup() {
|
||||
const { notification } = useMessage();
|
||||
const selectDeptId = ref('');
|
||||
const isVisible = ref<boolean>(false);
|
||||
const deleteIndex = ref();
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerTable, { reload, getSelectRows, setSelectedRowKeys }] = useTable({
|
||||
title: t('用户列表'),
|
||||
api: getUserPageList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
showResetButton: false
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'radio'
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
//发送请求默认新增 左边树结构所选机构id
|
||||
return params.isSearchAll ? { ...params } : { ...params, departmentId: selectDeptId.value };
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
},
|
||||
tableSetting: {
|
||||
size: false,
|
||||
setting: false
|
||||
}
|
||||
});
|
||||
|
||||
function handleSelect(dept, isSelect) {
|
||||
selectDeptId.value = isSelect ? dept.id : ''
|
||||
reload();
|
||||
}
|
||||
const lockText = computed(() => {
|
||||
return getSelectRows()?.length && !getSelectRows()[0].enabledMark ? '解锁' : '锁定';
|
||||
});
|
||||
|
||||
return {
|
||||
registerTable,
|
||||
registerModal,
|
||||
popVisible,
|
||||
handleVisibleChange,
|
||||
handleCreate,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
handleSuccess,
|
||||
handleSelect,
|
||||
handleReset,
|
||||
handleSync,
|
||||
handleLock,
|
||||
lockText,
|
||||
handleCancel,
|
||||
t,
|
||||
};
|
||||
},
|
||||
});
|
||||
function popVisible(index) {
|
||||
return isVisible.value && index === deleteIndex.value;
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
isUpdate: false
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
}
|
||||
|
||||
function handleVisibleChange(index, bool) {
|
||||
if (!bool) {
|
||||
isVisible.value = false;
|
||||
return;
|
||||
}
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
notification.warning({
|
||||
message: '在线环境暂不允许该操作，请联系管理员。'
|
||||
});
|
||||
return;
|
||||
}
|
||||
isVisible.value = true;
|
||||
deleteIndex.value = index;
|
||||
}
|
||||
|
||||
function handleDelete(record: Recordable) {
|
||||
isVisible.value = false;
|
||||
deleteUser([record.id]).then((_) => {
|
||||
reload();
|
||||
notification.success({
|
||||
message: t('删除'),
|
||||
description: t('成功')
|
||||
}); //提示消息
|
||||
});
|
||||
}
|
||||
function handleCancel() {
|
||||
isVisible.value = false;
|
||||
}
|
||||
function handleSync() {
|
||||
syncOrgAndUser('fromDataCenter');
|
||||
notification.success({
|
||||
message: t('开始同步组织和人员，请稍后刷新页面查看结果'),
|
||||
description: t('成功')
|
||||
});
|
||||
}
|
||||
function handleReset() {
|
||||
let rows = warning();
|
||||
if (!rows) {
|
||||
return;
|
||||
}
|
||||
resetUserPassword(rows.id).then(() => {
|
||||
notification.success({
|
||||
message: t('重置密码成功'),
|
||||
description: t('成功')
|
||||
});
|
||||
});
|
||||
}
|
||||
async function handleLock() {
|
||||
let rows = warning();
|
||||
if (!rows) {
|
||||
return;
|
||||
}
|
||||
await userEnabled(rows.id);
|
||||
notification.success({
|
||||
message: getSelectRows()[0].enabledMark ? '锁定成功' : t('解锁成功'),
|
||||
description: t('成功')
|
||||
});
|
||||
await reload();
|
||||
setSelectedRowKeys([rows.id]);
|
||||
}
|
||||
function warning() {
|
||||
const selectRows = getSelectRows();
|
||||
if (selectRows.length === 0) {
|
||||
notification.warning({
|
||||
message: t('警告'),
|
||||
description: t('必须选中一行！')
|
||||
}); //提示消息
|
||||
return false;
|
||||
} else {
|
||||
return selectRows[0];
|
||||
}
|
||||
}
|
||||
function handleSuccess() {
|
||||
reload();
|
||||
}
|
||||
|
||||
function handleSelect(dept, isSelect) {
|
||||
selectDeptId.value = isSelect ? dept.id : '';
|
||||
reload();
|
||||
}
|
||||
|
||||
return {
|
||||
registerTable,
|
||||
registerModal,
|
||||
popVisible,
|
||||
handleVisibleChange,
|
||||
handleCreate,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
handleSuccess,
|
||||
handleSelect,
|
||||
handleReset,
|
||||
handleSync,
|
||||
handleLock,
|
||||
lockText,
|
||||
handleCancel,
|
||||
t
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.dept-v2 {
|
||||
margin-right: 16px;
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
}
|
||||
.tree-title {
|
||||
padding: 8px 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.select-department-tree) {
|
||||
|
||||
}
|
||||
.dept-v2 {
|
||||
margin-right: 16px;
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
}
|
||||
.tree-title {
|
||||
padding: 8px 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.select-department-tree) {
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user