refactor(user/index.vue): 用户界面样式优化和修复resetFields重置表单无效问题

src/views/system/user/index.vue

@@ -2,10 +2,12 @@
   <div class="app-container">
     <el-row :gutter="20">
       <!-- 部门数据 -->
+
       <el-col
           :span="4"
           :xs="24"
       >
+        <el-card class="box-card">
           <el-input
               v-model="deptName"
               placeholder="部门名称"
@@ -24,6 +26,7 @@
               @node-click="handleDeptNodeClick"
           >
           </el-tree>
+        </el-card>
       </el-col>
 
       <!-- 用户数据 -->
@@ -31,6 +34,7 @@
           :span="20"
           :xs="24"
       >
+        <el-card class="box-card">
           <el-form
               ref="queryFormRef"
               :model="queryParams"
@@ -66,7 +70,7 @@
               </el-button>
             </el-form-item>
 
-          <el-form-item>
+            <el-form-item  prop="keywords">
               <el-input
                   v-model="queryParams.keywords"
                   placeholder="用户名/昵称/手机号"
@@ -74,10 +78,11 @@
                   size="small"
                   style="width: 200px"
                   @keyup.enter="handleQuery"
+
               />
             </el-form-item>
 
-          <el-form-item>
+            <el-form-item prop="status">
               <el-select
                   v-model="queryParams.status"
                   placeholder="用户状态"
@@ -221,6 +226,7 @@
               v-model:limit="queryParams.limit"
               @pagination="handleQuery"
           />
+        </el-card>
       </el-col>
     </el-row>
 
@@ -519,7 +525,7 @@ function filterDeptNode(value: string, data: any) {
 }
 
 /**
- *  部门点击事件
+ * 部门树点击
  **/
 function handleDeptNodeClick(data: { [key: string]: any }) {
   state.queryParams.deptId = data.id
@@ -720,4 +726,5 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+
 </style>