sc

src/views/Basic/User/index.vue

@@ -6,8 +6,8 @@
     </el-col>
     <el-col :span="20" :xs="24">
       <!-- 搜索 -->
-      <el-form :model="queryParams" ref="queryFormRef" inline label-width="68px">
-        <el-form-item label="姓名" prop="nickname">
+      <el-form :model="queryParams" ref="queryFormRef" inline label-width="0">
+        <el-form-item>
           <el-input
             v-model="queryParams.nickname"
             placeholder="请输入姓名"
@@ -16,7 +16,7 @@
             class="!w-240px"
           />
         </el-form-item>
-        <el-form-item label="手机号码" prop="mobile">
+        <el-form-item>
           <el-input
             v-model="queryParams.mobile"
             placeholder="请输入手机号码"
@@ -25,6 +25,12 @@
             class="!w-240px"
           />
         </el-form-item>
+        <el-form-item>
+          <el-radio-group v-model="queryParams.status" @change="handleQuery">
+            <el-radio :label="0"> 在职 </el-radio>
+            <el-radio :label="1"> 离职 </el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item>
           <el-button @click="handleQuery" v-hasPermi="['basic:employee:search']">搜索</el-button>
           <el-button @click="resetQuery" v-hasPermi="['basic:employee:reset']">重置</el-button>
@@ -44,12 +50,14 @@
         <el-table-column label="用户姓名" prop="nickname" />
         <el-table-column label="部门" key="deptName" prop="deptName" />
         <el-table-column label="手机号码" prop="mobile" width="120" />
-        <el-table-column label="状态" key="status">
+        <el-table-column label="状态" key="status" width="180">
           <template #default="scope">
             <el-switch
               v-model="scope.row.status"
               :active-value="0"
               :inactive-value="1"
+              active-text="在职"
+              inactive-text="离职"
               v-hasPermi="['basic:employee:update']"
               @change="handleStatusChange(scope.row)"
             />
@@ -61,7 +69,7 @@
           width="180"
           :formatter="dateFormatter"
         />
-        <el-table-column label="操作" width="260">
+        <el-table-column label="操作" width="200">
           <template #default="scope">
             <el-button
               type="primary"
@@ -114,13 +122,14 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
-  pageSize: 10,
+  pageSize: 20,
   username: undefined,
   nickname: undefined,
   mobile: undefined,
-  deptId: undefined
+  deptId: undefined,
+  status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 
@@ -128,7 +137,7 @@ const queryFormRef = ref() // 搜索的表单
 const getList = async () => {
   loading.value = true
   try {
-    const data = await UserApi.getUserPage(queryParams)
+    const data = await UserApi.getUserPage(queryParams.value)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -138,19 +147,28 @@ const getList = async () => {
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.pageNo = 1
+  queryParams.value.pageNo = 1
   getList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 20,
+    username: undefined,
+    nickname: undefined,
+    mobile: undefined,
+    deptId: undefined,
+    status: undefined
+  }
   handleQuery()
 }
 
 /** 处理部门被点击 */
 const handleDeptNodeClick = async (row) => {
-  queryParams.deptId = row.id
+  queryParams.value.deptId = row.id
   await getList()
 }