|
|
@@ -0,0 +1,132 @@
|
|
|
+<template>
|
|
|
+ <a-card class="account-page-card">
|
|
|
+ <Action :btn_text="'新建用户组'" @searchClick="searchClick" @resetClick="resetClick" @createClick="createClick"
|
|
|
+ @sizeChange="table_size_change" @refreshClick="refreshClick"></Action>
|
|
|
+ <DataTable :data="table_data" :columns="table_columns" row-key="id" :size="table_size" :loading="table_loading"
|
|
|
+ :pagination="pagination_props" @pageChange="handlePageChange">
|
|
|
+ <template #status="{ record }">
|
|
|
+ <a-switch v-model="record.status" />
|
|
|
+ </template>
|
|
|
+ <template #operationSlot="{ record }">
|
|
|
+ <a-popconfirm content="确定重置该账号密码吗?" @ok="handleResetPassword(record)">
|
|
|
+ <a-button type="text">重制密码</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ <a-button type="text" @click="handleEdit(record)">编辑</a-button>
|
|
|
+ <a-button type="text" @click="handleView(record)">查看权限</a-button>
|
|
|
+ <a-button type="text" @click="handleDeptConfig(record)">部门配置</a-button>
|
|
|
+ <a-popconfirm content="确定删除该条数据吗?" type="warning" @ok="handleDelete(record)">
|
|
|
+ <a-button type="text" status="warning">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+ </DataTable>
|
|
|
+ </a-card>
|
|
|
+
|
|
|
+ <EditModal :visible.sync="edit_visible" @save="editModalSave" @cancel="edit_visible = false" :title="'编辑'"
|
|
|
+ :edit_form="edit_form" />
|
|
|
+
|
|
|
+ <ViewPermission :visible.sync="view_permission_visible" @cancel="view_permission_visible = false"
|
|
|
+ :view_form="view_form" :menu_permissions_list="menu_permissions_list"
|
|
|
+ :knowledge_permissions_list="knowledge_permissions_list" :dialog_permissions_list="dialog_permissions_list"
|
|
|
+ :agent_permissions_list="agent_permissions_list" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive } from 'vue';
|
|
|
+import { Modal } from '@arco-design/web-vue';
|
|
|
+import DataTable from '../../../views/permission/DataTable.vue';
|
|
|
+import Action from '../../../views/permission/Action.vue';
|
|
|
+import EditModal from './EditModal.vue';
|
|
|
+import ViewPermission from './ViewPermission.vue';
|
|
|
+
|
|
|
+// 表格相关
|
|
|
+const table_data = ref([
|
|
|
+ { id: 1, name: '李雷', age: 25, status: true },
|
|
|
+ { id: 2, name: '韩梅梅', age: 30, status: false },
|
|
|
+]);
|
|
|
+const table_columns = ref([
|
|
|
+ { title: '用户名', dataIndex: 'name', titleSlotName: 'name' },
|
|
|
+ { title: '角色', dataIndex: 'age', titleSlotName: 'age' },
|
|
|
+ { title: '所属部门', dataIndex: 'dept', titleSlotName: 'dept' },
|
|
|
+ { title: '状态', dataIndex: 'status', slotName: 'status' },
|
|
|
+ { title: '操作', dataIndex: 'operation', slotName: 'operationSlot' },
|
|
|
+]);
|
|
|
+const pagination_props = ref({
|
|
|
+ total: 100,
|
|
|
+ current: 1,
|
|
|
+ pageSize: 15,
|
|
|
+})
|
|
|
+const table_size = ref('medium');
|
|
|
+const table_loading = ref(false);
|
|
|
+
|
|
|
+// 编辑表单相关
|
|
|
+const edit_visible = ref(false);
|
|
|
+const edit_form = reactive({
|
|
|
+ loginName: '',
|
|
|
+ userName: '',
|
|
|
+ phoneNumber: '',
|
|
|
+ email: '',
|
|
|
+ password: '',
|
|
|
+ role: []
|
|
|
+});
|
|
|
+
|
|
|
+// 查看权限相关
|
|
|
+const view_permission_visible = ref(false);
|
|
|
+const menu_permissions_list = ref([])
|
|
|
+const knowledge_permissions_list = ref([])
|
|
|
+const dialog_permissions_list = ref([])
|
|
|
+const agent_permissions_list = ref([])
|
|
|
+
|
|
|
+const searchClick = (value) => {
|
|
|
+ console.log('value', value)
|
|
|
+}
|
|
|
+const resetClick = () => {
|
|
|
+ console.log('重置')
|
|
|
+}
|
|
|
+const createClick = () => {
|
|
|
+ console.log('新建')
|
|
|
+}
|
|
|
+const refreshClick = () => {
|
|
|
+ console.log('刷新')
|
|
|
+}
|
|
|
+
|
|
|
+const handleResetPassword = (record) => {
|
|
|
+ Modal.success({
|
|
|
+ title: '重置密码',
|
|
|
+ content: '该用户密码重置为000000',
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const handleEdit = (record) => {
|
|
|
+ edit_visible.value = true;
|
|
|
+ console.log('record', record)
|
|
|
+ edit_form.loginName = record.loginName;
|
|
|
+ edit_form.userName = record.userName;
|
|
|
+ edit_form.phoneNumber = record.phoneNumber;
|
|
|
+ edit_form.email = record.email;
|
|
|
+ edit_form.password = record.password;
|
|
|
+ edit_form.role = record.role;
|
|
|
+}
|
|
|
+
|
|
|
+const handleView = (record) => {
|
|
|
+ console.log('record', record)
|
|
|
+ view_permission_visible.value = true;
|
|
|
+}
|
|
|
+const editModalSave = () => {
|
|
|
+ edit_visible.value = false;
|
|
|
+ console.log('编辑保存')
|
|
|
+}
|
|
|
+const table_size_change = (size) => {
|
|
|
+ table_size.value = size;
|
|
|
+}
|
|
|
+
|
|
|
+const handlePageChange = (current) => {
|
|
|
+ pagination_props.value.current = current;
|
|
|
+};
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="css" scoped>
|
|
|
+.account-page-card {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+}
|
|
|
+</style>
|