feat: condig user table loading

ittpc/src/views/modules/main.vue

@@ -30,7 +30,7 @@
           </el-menu>
         </el-aside>
         <el-main>
-          <el-card class="box-card">
+          <el-card class="box-card" body-style="padding:5px;height:100%;">
             <transition name="el-fade-in">
               <router-view/>
             </transition>
@@ -122,7 +122,7 @@ export default {
     background-color: #f3f5f7;
     color: #333;
     padding: 10px;
-    .box-card {
+    .el-card {
       height: 99%;
     }
   }

ittpc/src/views/modules/user/user.vue

@@ -1,26 +1,102 @@
 <template>
-    <div>
-    userManage
-    </div>
+  <div class="user-page" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
+          <el-form-item label="用户昵称">
+            <el-input v-model="searchForm.user" placeholder="模糊搜索"></el-input>
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input v-model="searchForm.phone" placeholder="精确搜索"></el-input>
+          </el-form-item>
+          <el-form-item label="管理员">
+            <el-select v-model="searchForm.admin" placeholder="请选择">
+              <el-option label="是" value="1"></el-option>
+              <el-option label="否" value="0"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">查询</el-button>
+            <el-button>重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-table :data="tableData" border stripe style="width: 100%" size="small" height="700">
+          <el-table-column prop="date" label="用户昵称"></el-table-column>
+          <el-table-column prop="name" label="用户手机号"></el-table-column>
+          <el-table-column prop="time" label="创建时间"></el-table-column>
+          <el-table-column prop="times" label="用户建档次数"></el-table-column>
+          <el-table-column prop="count" label="检测次数"></el-table-column>
+          <el-table-column prop="admin" label="是否为管理员"></el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" size="small">取消管理员</el-button>
+              <el-button type="text" size="small">服务记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20 flexend" >
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[100, 200, 300, 400]"
+          :page-size="100"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          size="small"
+          >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'user',
   data() {
-      return {
-
-      };
+    return {
+      loading: false,
+      searchForm: {
+        phone: '',
+        user: '',
+        admin: ''
+      },
+      tableData: [],
+      currentPage: 1
+    };
   },
   mounted() {
 
   },
   methods: {
+    handleSizeChange () {
 
+    },
+    handleCurrentChange () {
+      
+    }
   },
 };
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.user-page {
+  width: 100%;
+  height: 100%;
+  .padding20 {
+    padding: 20px;
+  }
+  .flexend {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>