明树Git Lab

Skip to content

J
jt_front
Commit e91f1040 authored by yangyajing's avatar yangyajing
Browse files
Options

用户管理、角色管理

parent c1d66a41
Pipeline #104489 passed with stage
    in 13 seconds
    Show whitespace changes
    Inline Side-by-side
    Showing with 104 additions and 166 deletions
    src/components/common/commonTable.vue
    View file @ e91f1040
    ......@@ -15,8 +15,6 @@
    <el-table
    style="width: 100%"
    :data="tableData"
    :height="computedTableHeight"
    :max-height="maxHeight"
    :stripe="stripe"
    border
    :size="size"
    ......@@ -72,6 +70,7 @@
    v-if="index"
    type="index"
    width="60"
    align="center"
    :label="indexLabel"
    :index="indexMethod"
    />
    ......@@ -299,7 +298,7 @@ const props = defineProps({
    // 索引列的标题
    indexLabel: {
    type: String,
    default: "#",
    default: "",
    },
    // 自定义索引的计算方法
    indexMethod: Function,
    ......@@ -393,22 +392,22 @@ const tableData = computed(() => {
    });
    // 自动计算表格高度
    const computedTableHeight = computed(() => {
    if (!props.autoHeight) {
    return props.tableHeight;
    }
    // const computedTableHeight = computed(() => {
    // if (!props.autoHeight) {
    // return props.tableHeight;
    // }
    const headerHeight = 50;
    // const paginationHeight = props.pagination ? 50 : 0;
    const noDataHeight = tableData.value.length ? 0 : 50;
    const baseHeight = headerHeight + noDataHeight;
    // const headerHeight = 50;
    // // const paginationHeight = props.pagination ? 50 : 0;
    // const noDataHeight = tableData.value.length ? 0 : 50;
    // const baseHeight = headerHeight + noDataHeight;
    // 如果数据超过最大行数，固定显示最大行数的高度；如果数据不超过最大行数，按实际行数计算高度
    const actualRows = Math.min(tableData.value.length, props.maxRows);
    const contentHeight = actualRows * props.rowHeight;
    // // 如果数据超过最大行数，固定显示最大行数的高度；如果数据不超过最大行数，按实际行数计算高度
    // const actualRows = Math.min(tableData.value.length, props.maxRows);
    // const contentHeight = actualRows * props.rowHeight;
    return `${baseHeight + contentHeight}px`;
    });
    // return `${baseHeight + contentHeight}px`;
    // });
    // 监听器
    watch(
    ......@@ -545,7 +544,14 @@ const handleNextClick = (val) => {
    }
    .table-container {
    margin-bottom: 16px;
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    .el-table{
    flex: 1;
    height: 0;
    }
    }
    .table-footer {
    ......
    src/style.css
    View file @ e91f1040
    ......@@ -24,8 +24,8 @@ html, body {
    /* 自定义滚动条样式 */
    ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    width: 4px;
    height: 4px;
    }
    ::-webkit-scrollbar-track {
    ......@@ -34,8 +34,8 @@ html, body {
    }
    ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
    background: rgba(37, 139, 248, 0.5);
    border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb:hover {
    ......
    src/styles/manage.less
    View file @ e91f1040
    ......@@ -11,8 +11,30 @@
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .header-left{
    flex: 1;
    width: 0;
    .el-input{
    width: 220px;
    }
    }
    }
    .manage-content{
    flex: 1;
    height: 0;
    .common-table{
    height: 100%;
    display: flex;
    flex-direction: column;
    .table-container{
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    .el-table{
    flex: 1;
    height: 0;
    }
    }
    }
    }
    \ No newline at end of file
    src/views/systemManage/roleManage.vue
    View file @ e91f1040
    <template>
    <div class="user-manage" v-loading="loading">
    <!-- search form moved into table header to align with 新增 button -->
    <div class="table-container">
    <div class="manage-header">
    <div class="header-left">
    <el-form :inline="true" :model="searchForm">
    <el-form-item label="名称查询">
    <el-input v-model="searchForm.name" clearable />
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="handleSearch">查询</el-button>
    </el-form-item>
    </el-form>
    </div>
    <div class="header-right">
    <el-form>
    <el-form-item>
    <el-button type="primary" @click="handleAdd">新增角色</el-button>
    </el-form-item>
    </el-form>
    </div>
    </div>
    <div class="manage-content table-container">
    <common-table
    :autoHeight="true"
    :maxRows="10"
    ......@@ -12,27 +30,16 @@
    :current-page="currentPage"
    :page-size="pageSize"
    title=""
    :index="true"
    :border="true"
    @size-change="handleSizeChange"
    @current-page-change="handleCurrentPageChange"
    >
    <template #header-left>
    <div style="display:flex;align-items:center;gap:12px;">
    <commonForm
    v-model="searchForm"
    :config="searchConfig"
    :items="searchItems"
    @submit="handleSearch"
    @reset="handleReset"
    />
    <el-button type="primary" @click="handleAdd"> 新增 </el-button>
    </div>
    </template>
    <template #operations="{ row, index }">
    <el-button type="text" size="small" @click="handleEdit(row, index)">
    <el-button link type="primary" size="small" @click="handleEdit(row, index)">
    编辑
    </el-button>
    <el-button type="text" size="small" @click="handleDelete(row, index)">
    <el-button link type="danger" size="small" @click="handleDelete(row, index)">
    删除
    </el-button>
    <!-- <el-button type="text" size="small">数据权限 </el-button> -->
    ......@@ -91,52 +98,20 @@
    <script setup>
    import { ref, reactive, onMounted, getCurrentInstance, computed, nextTick } from "vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import { Plus, Edit, Delete } from "@element-plus/icons-vue";
    import commonForm from "@/components/common/commonForm.vue";
    import CommonTable from "@/components/common/commonTable.vue";
    import { da } from "element-plus/es/locales.mjs";
    const { proxy } = getCurrentInstance();
    const loading = ref(false);
    const treeData = ref([]);
    const treeRef = ref(null);
    // 数据转换函数
    // const convertToTreeData = (apiData) => {
    // return apiData.map((item) => ({
    // value: item.id.toString(),
    // label: item.name,
    // children: item.children ? convertToTreeData(item.children) : [],
    // }));
    // };
    // 查询表单数据
    const searchForm = ref({
    name: "",
    mobile: "",
    });
    // 查询表单配置
    const searchConfig = {
    inline: true,
    labelWidth: "80px",
    showButtons: true,
    submitText: "查询",
    resetText: "重置",
    };
    // 查询表单项配置
    const searchItems = [
    {
    type: "input",
    prop: "name",
    label: "",
    placeholder: "请输入角色名称",
    clearable: true,
    span: 8,
    },
    ];
    // 表格数据
    const tableData = ref([]);
    const total = ref(0);
    ......@@ -150,25 +125,25 @@ const tableColumns = [
    label: "角色名称",
    minWidth: 100,
    },
    {
    prop: "key",
    label: "角色标识",
    minWidth: 100,
    },
    {
    prop: "createdAt",
    label: "创建时间",
    minWidth: 160,
    },
    {
    prop: "updatedAt",
    label: "更新时间",
    minWidth: 160,
    },
    // {
    // prop: "key",
    // label: "角色标识",
    // minWidth: 100,
    // },
    // {
    // prop: "createdAt",
    // label: "创建时间",
    // minWidth: 160,
    // },
    // {
    // prop: "updatedAt",
    // label: "更新时间",
    // minWidth: 160,
    // },
    {
    prop: "operations",
    label: "操作",
    width: 310,
    width: 100,
    slot: "operations",
    fixed: "right",
    align: "center",
    ......@@ -211,10 +186,10 @@ const formItems = computed(() => [
    type: "input",
    prop: "key",
    label: "角色标识",
    placeholder: "请输入角色英文标识",
    placeholder: "请输入角色标识",
    span: 24,
    required: true,
    rules: [{ required: true, message: "请输入角色英文标识", trigger: "blur" }],
    rules: [{ required: true, message: "请输入角色标识", trigger: "blur" }],
    },
    {
    type: "slot",
    ......@@ -233,16 +208,6 @@ const handleSearch = (formData) => {
    currentPage.value = 1;
    loadTableData();
    };
    const handleReset = () => {
    searchForm.value = {
    name: "",
    mobile: "",
    };
    currentPage.value = 1;
    loadTableData();
    };
    const handleSizeChange = (size) => {
    pageSize.value = size;
    currentPage.value = 1;
    ......@@ -254,13 +219,7 @@ const handleCurrentPageChange = (page) => {
    loadTableData();
    };
    // 树节点点击
    const handleNodeClick = (data, node, element) => {
    // console.log(data, "data");
    // console.log(node, "node");
    // console.log(element, "element");
    };
    // 新增用户
    // 新增角色
    const handleAdd = () => {
    isEdit.value = false;
    dialogTitle.value = "新增角色";
    ......@@ -310,7 +269,7 @@ const handleEdit = (row, index) => {
    // 删除
    const handleDelete = async (row, index) => {
    try {
    await ElMessageBox.confirm(`确定要删除用户"${row.name}"吗？`, "提示", {
    await ElMessageBox.confirm(`确定要删除角色"${row.name}"吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    ......@@ -447,6 +406,7 @@ onMounted(() => {
    </script>
    <style scoped lang="less">
    @import "@/styles/manage.less";
    .user-manage {
    padding: 20px;
    background: rgba(157, 188, 218, 0.1);
    ......
    src/views/systemManage/userManage.vue
    View file @ e91f1040
    ......@@ -22,13 +22,13 @@
    <div class="manage-content table-container">
    <common-table
    :autoHeight="true"
    :maxRows="10"
    :data="tableData"
    :columns="tableColumns"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    title=""
    :index="true"
    :border="true"
    @size-change="handleSizeChange"
    @current-page-change="handleCurrentPageChange"
    ......@@ -43,10 +43,10 @@
    </template>
    <template #operations="{ row, index }">
    <el-button type="text" size="small" @click="handleEdit(row, index)">
    <el-button link type="primary" size="small" @click="handleEdit(row, index)">
    编辑
    </el-button>
    <el-button type="text" size="small" @click="handleDelete(row, index)">
    <el-button link type="danger" size="small" @click="handleDelete(row, index)">
    删除
    </el-button>
    </template>
    ......@@ -74,52 +74,17 @@
    <script setup>
    import { ref, reactive, onMounted, getCurrentInstance, computed } from "vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import { Plus, Edit, Delete } from "@element-plus/icons-vue";
    import commonForm from "@/components/common/commonForm.vue";
    import CommonTable from "@/components/common/commonTable.vue";
    import { da } from "element-plus/es/locales.mjs";
    const { proxy } = getCurrentInstance();
    const loading = ref(false);
    // 数据转换函数
    // const convertToTreeData = (apiData) => {
    // return apiData.map((item) => ({
    // value: item.id.toString(),
    // label: item.name,
    // children: item.children ? convertToTreeData(item.children) : [],
    // }));
    // };
    // 查询表单数据
    const searchForm = ref({
    name: "",
    mobile: "",
    });
    // 查询表单配置
    const searchConfig = {
    inline: true,
    labelWidth: "80px",
    showButtons: true,
    submitText: "查询",
    resetText: "重置",
    };
    // 查询表单项配置
    const searchItems = [
    {
    type: "input",
    prop: "name",
    label: "",
    placeholder: "请输入关键字查询",
    clearable: true,
    span: 12,
    }
    ];
    // 表格数据
    const tableData = ref([]);
    const total = ref(0);
    ......@@ -157,11 +122,11 @@ const tableColumns = [
    minWidth: 100,
    showOverflowTooltip: true,
    },
    {
    prop: "createdAt",
    label: "创建时间",
    minWidth: 160,
    },
    // {
    // prop: "createdAt",
    // label: "创建时间",
    // minWidth: 160,
    // },
    {
    prop: "enable",
    label: "状态",
    ......@@ -172,7 +137,7 @@ const tableColumns = [
    {
    prop: "operations",
    label: "操作",
    width: 160,
    width: 120,
    slot: "operations",
    fixed: "right",
    align: "center",
    ......@@ -266,7 +231,7 @@ const formItems = computed(() => [
    checkStrictly: true,
    renderAfterExpand: true,
    showCheckbox: false,
    multiple: false,
    multiple: true,
    collapseTags: true,
    maxCollapseTags: 2,
    span: 24,
    ......@@ -331,15 +296,6 @@ const handleSearch = (formData) => {
    loadTableData();
    };
    const handleReset = () => {
    searchForm.value = {
    name: "",
    mobile: "",
    };
    currentPage.value = 1;
    loadTableData();
    };
    const handleSizeChange = (size) => {
    pageSize.value = size;
    currentPage.value = 1;
    ......@@ -355,13 +311,7 @@ const handleCurrentPageChange = (page) => {
    const handleAdd = () => {
    isEdit.value = false;
    dialogTitle.value = "新增用户";
    userForm.value = {
    name: "",
    departs: [],
    positions: [],
    roles: [],
    enable: "0",
    };
    userForm.value = {};
    loadDepartmentData();
    loadPositionsData();
    loadRolesData();
    ......
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment