康来智慧冷链-后端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

182 lines
5.4 KiB

<template>
<PageWrapper dense
contentFullHeight
fixedHeight
contentClass="flex"
>
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect"/>
<BasicTable class="w-3/4 xl:w-4/5" @register="registerTable">
<template #toolbar>
<a-button v-auth="['user_add']"
type="primary"
@click="handleAdd()"
>新增用户</a-button>
<a-button v-auth="['user_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改用户</a-button>
<a-button v-auth="['user_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除用户</a-button>
</template>
<template #action="{ record }">
<TableAction :actions="[
{
icon: 'clarity:lock-line',
tooltip: '修改密码',
onClick: handleUpdatePwd.bind(null, record),
},
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['role_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
auth: ['role_del'],
color: 'error',
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</BasicTable>
<UserModal @register="registerModal" @success="handleSuccess"/>
<PasswordModal @register="registerPasswordModal" @success="handleUpdatePwd"/>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listUser, delUser, updatePwd } from '/@/api/system/user';
import { PageWrapper } from '/@/components/Page';
import DeptTree from './DeptTree.vue';
import { useModal } from '/@/components/Modal';
import UserModal from './UserModal.vue';
import PasswordModal from './PasswordModal.vue';
import { columns, searchFormSchema } from './user.data';
import { useMessage } from '/@/hooks/web/useMessage';
const { createConfirm } = useMessage();
const { createMessage } = useMessage();
export default defineComponent({
name: 'UserManagement',
components: {
BasicTable,
PageWrapper,
DeptTree,
TableAction,
UserModal,
PasswordModal
},
setup() {
const state = reactive({
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 搜索信息
searchInfo: {} as Recordable
});
const [registerModal, { openModal }] = useModal();
const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: '用户列表',
api: listUser,
rowKey: 'id',
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
searchInfo: state.searchInfo,
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' }
}
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rawRows = toRaw(selection?.rows) || [];
state.ids = rawRows.map(item => item.id);
state.single = rawRows.length != 1;
state.multiple = !rawRows.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { id: toRaw(state.ids) };
openModal(true, { _tag: 'edit', record });
}
/** 处理修改用户密码 */
function handleUpdatePwd(record: Recordable) {
record = record || { id: toRaw(state.ids) };
openPasswordModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const ids = record?.id || toRaw(state.ids);
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除用户编号为${ids}用户吗?`,
onOk: async () => {
await delUser(ids);
createMessage.success('删除成功!');
handleSuccess();
}
});
}
/** 处理表单提交成功 */
function handleSuccess() {
reload();
}
/** 处理部门管理点击 */
function handleSelect(departId = '') {
state.searchInfo.departId = departId;
reload();
}
return {
state,
registerTable,
registerModal,
registerPasswordModal,
handleAdd,
handleEdit,
handleDel,
handleSelectionChange,
handleSuccess,
handleSelect,
handleUpdatePwd
};
}
});
</script>