refactor(user-search): 重构搜索表单为动态配置模式

使用 seekPage 组件替代静态 el-form 布局，通过 seekList 计算属性动态配置搜索字段，简化模板并提升可维护性。

src/views/system/user/components/user-search.vue

@@ -1,146 +1,69 @@
 <!-- 搜索表单 -->
 <template>
-  <el-form
-    label-width="77px"
-    class="ele-form-search"
-    @keyup.enter.native="search"
-    @submit.native.prevent
-    :autoComplete="false"
-  >
-    <el-row :gutter="15">
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="用户账号:">
-          <el-input
-            clearable
-            v-model.trim="where.loginName"
-            placeholder="请输入"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="工号:">
-          <el-input
-            clearable
-            v-model.trim="where.jobNumber"
-            placeholder="请输入"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="姓名:">
-          <el-input
-            clearable
-            v-model.trim="where.name"
-            placeholder="请输入"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="手机号:">
-          <el-input
-            clearable
-            v-model.trim="where.phone"
-            placeholder="请输入"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="角色:">
-          <el-select
-            v-model="where.roleIds"
-            filterable
-            multiple
-            clearable
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in roleList"
-              :value="item.id"
-              :label="item.name"
-              :key="item.id"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="用户名:">
-          <el-input clearable v-model.trim="where.nickname" placeholder="请输入" />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="性别:">
-          <el-select
-            clearable
-            v-model.trim="where.sex"
-            placeholder="请选择"
-            class="ele-fluid"
-          >
-            <el-option label="男" :value="1" />
-            <el-option label="女" :value="2" />
-          </el-select>
-        </el-form-item>
-      </el-col> -->
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <div class="ele-form-actions">
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            class="ele-btn-icon"
-            @click="search"
-          >
-            查询
-          </el-button>
-          <el-button @click="reset">重置</el-button>
-        </div>
-      </el-col>
-    </el-row>
-  </el-form>
+  <seekPage :seekList="seekList" :formLength="5" @search="search"></seekPage>
 </template>
 
 <script>
-import { getRolesListAPI } from '@/api/system/role';
+  import { getRolesListAPI } from '@/api/system/role';
 
-export default {
-  data() {
-    // 默认表单数据
-    const defaultWhere = {
-      loginName: '',
-      roleIds: [],
-      jobNumber:'',
-      name:'',
-      phone:""
-      // nickname: '',
-      // sex: undefined
-    };
-    return {
-      // 表单数据
-      where: { ...defaultWhere },
-      roleList: []
-    };
-  },
-  computed: {
-    // 是否开启响应式布局
-    styleResponsive() {
-      return this.$store.state.theme.styleResponsive;
-    }
-  },
-  created() {
-    this.getRolesList();
-  },
-  methods: {
-    async getRolesList() {
-      this.roleList = await getRolesListAPI();
+  export default {
+    data() {
+      return {
+        roleList: []
+      };
+    },
+    computed: {
+      seekList() {
+        return [
+          {
+            label: '用户账号:',
+            value: 'loginName',
+            type: 'input',
+            placeholder: '请输入'
+          },
+          {
+            label: '工号:',
+            value: 'jobNumber',
+            type: 'input',
+            placeholder: '请输入'
+          },
+          {
+            label: '姓名:',
+            value: 'name',
+            type: 'input',
+            placeholder: '请输入'
+          },
+          {
+            label: '手机号:',
+            value: 'phone',
+            type: 'input',
+            placeholder: '请输入'
+          },
+          {
+            label: '角色:',
+            value: 'roleIds',
+            type: 'select',
+            multiple: true,
+            planList: this.roleList.map((item) => ({
+              label: item.name,
+              value: item.id
+            })),
+            placeholder: '请选择'
+          }
+        ];
+      }
     },
-    /* 搜索 */
-    search() {
-      this.$emit('search', this.where);
+    created() {
+      this.getRolesList();
     },
-    /*  重置 */
-    reset() {
-      this.where = { ...this.defaultWhere };
-      this.search();
+    methods: {
+      async getRolesList() {
+        this.roleList = await getRolesListAPI();
+      },
+      /* 搜索 */
+      search(where) {
+        this.$emit('search', where);
+      }
     }
-  }
-};
+  };
 </script>