byh24/11/6完成用户列表显示

src/lsjbxm/jituangongneng/yonghuguanli.vue

@@ -32,8 +32,8 @@
                             <div class="grid-content ep-bg-purple">
                                 <span>状态</span>
                                 <el-select v-model="zt" placeholder="用户状态" style="width: 170px">
+                                    <el-option> 0</el-option>
                                     <el-option> 1</el-option>
-                                    <el-option> 2</el-option>
                                 </el-select>
                             </div>
                         </el-col>
@@ -111,7 +111,7 @@
 <!--表格-->
                 <div>
                     <el-table
-                        :data="yonghuxinxi"
+                        :data="yonghulist"
                         style="width: 100%; padding-top: 5px"
                         fit="true"
                         :header-cell-style="{background:'#f8f8f9'}"
@@ -119,15 +119,24 @@
                     >
 
                         <el-table-column type="selection" width="55" align="center"/>
-                        <el-table-column prop="No" label="用户编号" align="center" />
-                        <el-table-column prop="name" label="用户名称" align="center"/>
+                        <el-table-column prop="id" label="用户编号" align="center" />
+                        <el-table-column prop="username" label="用户名称" align="center"/>
                         <el-table-column prop="bumen" label="部门" align="center"/>
-                        <el-table-column prop="state" label="状态" align="center">
-                            <template #default="scope">
-                                <el-switch v-model="scope.row.state"></el-switch>
+                        <el-table-column prop="zhuangtai" label="状态" align="center">
+                            <template v-slot:default="scope">
+                                <el-switch v-model="scope.row.zhuangtai"
+                                           :active-value="1"
+                                           :inactive-value="0">
+                                </el-switch>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column prop="chuangjiantime" label="创建时间" align="center">
+                            <template v-slot:default="scope">
+<!--                                三目判断chuangjiantime，null显示''，非null按照formatDate格式化显示-->
+                                {{scope.row.chuangjiantime == null ?'':formatDate(new Date(scope.row.chuangjiantime))}}
                             </template>
                         </el-table-column>
-                        <el-table-column prop="date" label="创建时间" align="center"/>
                         <el-table-column label="操作" align="center">
                             <template v-slot:default="scope">
                                 <el-button type="text" size="small">修改</el-button>
@@ -168,7 +177,7 @@
 
 
 
-  <!--    弹出框-->
+  <!--    按钮添加用户弹出框-->
     <el-dialog v-model="dialogFormVisible" title="添加用户" width="500">
         <el-form :model="form">
             <el-row :gutter="0">
@@ -229,8 +238,8 @@
 </template>
 
 <script>
-import { reactive, ref } from 'vue'
 import {Refresh, Search} from "@element-plus/icons-vue";
+import http from "@/lsjbxm/lsjbhttp";
 export default {
     name: "yongHuGuanLi",
     computed: {
@@ -251,63 +260,56 @@ export default {
             xaunzejuese:['角色1','角色2','角色3','角色4',],
             guishubumen:['部门1','部门2','部门3','部门4',],
             chuangjianshijian:"",
-            yonghuxinxi:[]
-        }
-    },
-    setup() {
-        // 弹出框
-        const dialogTableVisible = ref(false)
-        const dialogFormVisible = ref(false)
-        const formLabelWidth = '140px'
-
-        const form = reactive({
-            name: '',
-            pass:'',
-            bumen:'',
-            juese:'',
-
-        })
-
-        //树形控件
-        const generateNumberNodes = (start, end) => {
-            return Array.from({ length: end - start + 1 }, (_, i) => ({
-                label: `${(start + i).toString().padStart(6,'0')}`, // 为每个节点设置标签
-                // 这里可以添加其他属性，如果需要的话
-            }));
-        };
-        const data = [
-            {
-                label: '粮食集团',
-                children: [
-                    {
-                        label: '供应商',
-                        children: generateNumberNodes(1,100)
-                    },
-                ],
+            yonghuxinxi:[],
+            //树形控件
+            data:[
+                {
+                    label: '粮食集团',
+                    children: [
+                        {
+                            label: '供应商',
+                            children: this.generateNumberNodes(1,100)
+                        },
+                    ],
+                },
+            ],
+            defaultProps:{
+                children: 'children',
+                label: 'label',
             },
 
-        ]
 
-        const defaultProps = {
-            children: 'children',
-            label: 'label',
-        }
+            form:{},
+            yonghulist:[],
+            state:false,
 
+            dialogTableVisible:false,
+            dialogFormVisible:false,//按钮添加用户弹出框
+            formLabelWidth:'140px',
 
-        return{
-            //弹出框
-            dialogTableVisible,
-            dialogFormVisible,
-            formLabelWidth,
-            form,
-            //树形控件
-            generateNumberNodes,
-            defaultProps,
-            data,
-        }
 
+        }
+    },
+// 是 Vue.js 生命周期钩子之一，主要在组件实例被挂载后立即调用
+    mounted(){
+        this.listyh()
     },
     methods:{
+        //列出用户
+        listyh(){
+            http.lsjbGet("/yonghu/queryYongHu.yonghu", null).then(res=>{
+
+                this.yonghulist = res
+            })
+        },
+        //树形控件
+        generateNumberNodes(start, end) {
+            return Array.from({ length: end - start + 1 }, (_, i) => ({
+                label: `${(start + i).toString().padStart(6, '0')}`, // 为每个节点设置标签
+                // 这里可以添加其他属性，如果需要的话
+            }));
+        },
+
         addYongHuXinXi() {
             let YH={
                 state:this.yhstate,
@@ -347,7 +349,6 @@ export default {
             let hours = date.getHours().toString().padStart(2, '0');
             let minutes = date.getMinutes().toString().padStart(2, '0');
             let seconds = date.getSeconds().toString().padStart(2, '0');
-
             return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
         }