From 916b5745a986ae24f8cd1f880e1ff42ed05f6383 Mon Sep 17 00:00:00 2001
From: zhanghan2021 <zhanghan@kylinos.cn>
Date: Mon, 13 Nov 2023 17:38:43 +0800
Subject: [PATCH] Encapsulate table border vue

---
 .../src/components/UserManager/UserTable.vue  | 300 ++++++++++++++++++
 frontend/src/views/Login/Login.vue            |   4 +-
 2 files changed, 302 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/UserManager/UserTable.vue

diff --git a/frontend/src/components/UserManager/UserTable.vue b/frontend/src/components/UserManager/UserTable.vue
new file mode 100644
index 0000000..5efc4fc
--- /dev/null
+++ b/frontend/src/components/UserManager/UserTable.vue
@@ -0,0 +1,300 @@
+<template>
+    <div class="ky-table">
+        <div class="header">
+            <div class="header_content">
+                <div class="table_search">
+                    <slot name="table_search"></slot>
+                </div>
+                <div class="table_action">
+                    <slot name="table_action"></slot>
+                </div>
+            </div>
+        </div>
+        <div class="content" v-loading="loading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading">
+            <el-table height="100%" :header-cell-style="{ color: 'black', 'background-color': '#f6f8fd' }"
+                :cell-style="{ color: 'black' }" ref="multipleTable" :data="tableData" tooltip-effect="dark"
+                :row-class-name="tableRowClassName" @select="handleSelectionChange" @select-all="handleSelectAll">
+                <el-table-column type="selection" v-if="showSelect" width="55" align="center"
+                    :selectable="checkSelectTable">
+                </el-table-column>
+                <slot name="table"></slot>
+            </el-table>
+        </div>
+        <div class="pagination">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                v-model:current-page="pageSearch.page" :page-sizes="[10, 20, 25, 50, 75, 100]"
+                v-model:page-size="pageSearch.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { reactive, ref, onMounted, watch, nextTick } from 'vue'
+
+interface SelectRow {
+    ids: number[];
+    rows: object[];
+}
+const selectRow = reactive<SelectRow>({
+    ids: [],
+    rows: []
+});
+const multipleTableRef = ref();
+const expands = ref<string[]>([]);
+const checked = ref(false);
+const display = ref(false);
+const displayTip = ref(false);
+const loading = ref(false);
+const tableData = ref([]);
+const total = ref(0);
+const pageSearch = ref({
+    page: 1,
+    size: 10
+});
+
+const props = defineProps({
+    isLoadTable: {
+        type: Boolean,
+        default: function () {
+            return true;
+        }
+    },
+    isSource: {
+        type: Number,
+        default: function () {
+            return 1;
+        }
+    },
+    getData: {
+        type: Function,
+    },
+    getSourceData: {
+        type: Function,
+    },
+    showSelect: {
+        type: Boolean,
+        default: function () {
+            return true;
+        }
+    },
+    searchData: {
+        type: Object,
+        default: function () {
+            return {
+            };
+        }
+    },
+    treeNodes: {
+        type: Array,
+        default: function () {
+            return []
+        }
+    },
+    isRowClick: {
+        type: Boolean,
+        default: function () {
+            return false
+        }
+    }
+})
+
+const loadData = async (pageParams: any) => {
+    tableData.value = [];
+    loading.value = true;
+
+    try {
+        const response = await props.getData({ ...pageParams, ...props.searchData.value });
+        const res = response.data;
+
+        if (res.code === 200) {
+            loading.value = false;
+            total.value = res.total;
+            pageSearch.value.page = res.page;
+            loading.value = false;
+            tableData.value = res.data;
+        } else {
+            loading.value = false;
+        }
+    } catch (error) {
+        console.log('get data error:', error);
+    }
+};
+
+const getSData = async (data: any) => {
+    tableData.value = [];
+
+    try {
+        const response = await props.getSourceData(data);
+        const res = response.data;
+
+        if (res.code === 200) {
+            total.value = res.total;
+            pageSearch.value.page = res.page;
+            loading.value = false;
+            tableData.value = res.data;
+        } else {
+            loading.value = false;
+        }
+    } catch (error) {
+        console.error('get source data error:', error);
+    }
+};
+
+const handleSetTableData = (datas: any) => {
+    loading.value = false;
+    tableData.value = datas;
+};
+
+const handleSearch = () => {
+    checked.value = false;
+    multipleTableRef.value.clearSelection();
+    selectRow.ids = [];
+    selectRow.rows = [];
+    loadData({ ...pageSearch.value, page: 1 });
+};
+
+const changeExpandRow = (row: any) => {
+    multipleTableRef.value.toggleRowExpansion(row);
+};
+
+const expandSelect = (row: any, expandedRows: any) => {
+    expands.value = [];
+    if (expandedRows.length > 0) {
+        row ? expands.value.push(row.name) : '';
+    }
+};
+
+const handleLoadSearch = (data: any) => {
+    tableData.value = data;
+};
+
+const handleSizeChange = (newSize: number) => {
+    pageSearch.value.size = newSize;
+    loadData({ ...pageSearch.value });
+};
+
+const handleCurrentChange = (newPage: number) => {
+    pageSearch.value.page = newPage;
+    loadData(pageSearch.value);
+};
+
+const handleSelectionChange = (selection: any, row: any) => {
+    const index = selectRow.ids.indexOf(row.ID || row.machineuuid);
+
+    if (index < 0) {
+        selectRow.ids.push(row.ID || row.machineuuid || row.id);
+        selectRow.rows.push(row);
+    } else {
+        selectRow.ids.splice(index, 1);
+        selectRow.rows.splice(index, 1);
+    }
+};
+
+const handleSelectAll = (selection: any) => {
+    if (selection.length === 0) {
+        selectRow.ids = [];
+        selectRow.rows = [];
+    } else {
+        selection.forEach((item: any) => {
+            selectRow.ids.push(item.ID);
+            selectRow.rows.push(item);
+        });
+    }
+};
+
+const refresh = () => {
+    checked.value = false;
+    multipleTableRef.value.clearSelection();
+    selectRow.ids = [];
+    selectRow.rows = [];
+    loadData({ ...pageSearch.value });
+};
+
+const tableRowClassName = ({ row, rowIndex }: any) => {
+    // rowIndex备用，隔行显示颜色不同的时候用
+    if (props.isRowClick) {
+        return ['row-expand'];
+    }
+};
+
+const handleClose = () => {
+    display.value = false;
+};
+
+const checkSelectTable = () => {
+    return props.treeNodes.length === 0;
+};
+
+onMounted(() => {
+    loadData({ ...pageSearch.value });
+});
+
+watch(() => props.isSource, (newV, oldV) => {
+    nextTick(() => {
+        if (newV) {
+            getSData({ ...pageSearch.value, page: 1 });
+        }
+    });
+});
+</script>
+
+<style lang = 'scss' scoped>
+.ky-table {
+    height: 96%;
+
+    .header {
+        width: 100%;
+        height: 6%;
+        border-radius: 6px 6px 0 0;
+        background: linear-gradient(to right, rgb(11, 35, 117) 0%, rgb(96, 122, 207) 100%, );
+
+        .header_content {
+            height: 100%;
+            margin: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #fff;
+        }
+    }
+
+    .content {
+        height: 92%;
+        overflow-y: auto;
+    }
+
+    .el-table {
+        .line-color {
+            background-color: #fff;
+        }
+
+        th,
+        td {
+            text-align: center;
+        }
+
+        .el-checkbox__input.is-checked .el-checkbox__inner,
+        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+            background-color: rgb(82, 108, 193);
+            border-color: rgb(82, 108, 193)
+        }
+    }
+
+    .pagination {
+        .el-pagination {
+            text-align: right;
+            /* border: 1px solid #ccc; */
+            border-top: 0px;
+            padding-top: 5px;
+            padding-bottom: 5px;
+            border-top: 0px;
+
+            .el-pagination__sizes,
+            .el-pagination__total {
+                float: left;
+            }
+        }
+    }
+}
+</style>
diff --git a/frontend/src/views/Login/Login.vue b/frontend/src/views/Login/Login.vue
index e4252c0..0590eab 100644
--- a/frontend/src/views/Login/Login.vue
+++ b/frontend/src/views/Login/Login.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="login-page">
         <div class="login-form-bg">
-            <img alt="login background" src="../../assets/login-bg.png" />
+            <img alt="login background" src="@/assets/login-bg.png" />
             <div class="login-form">
                 <div class="login-title">
                     <p>PilotGo运维平台</p>
@@ -32,7 +32,7 @@
 import { ref } from "vue";
 import { ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router'
-import  Cookies from 'js-cookie';
+import Cookies from 'js-cookie';
 import { loginByEmail } from "@/request/user";
 import { RespCodeOK } from "@/request/request";
 import { CookieAuthToken } from "@/global/defines";
-- 
Gitee