Sfoglia il codice sorgente

refactor(attendance): 优化上岗记录页面表单布局和逻辑

- 简化表单元素布局,使用更紧凑的代码风格
- 将用户选择改为多选模式并关联班组选择
- 移除不必要的岗位选择字段
- 添加班组变更时自动加载成员功能
huoyi 1 mese fa
parent
commit
96ca2100bb
1 ha cambiato i file con 81 aggiunte e 140 eliminazioni
  1. 81 140
      src/views/attendance/postRecord/index.vue

+ 81 - 140
src/views/attendance/postRecord/index.vue

@@ -2,71 +2,32 @@
2 2
   <div class="app-container">
3 3
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
4 4
       <el-form-item label="用户名称" prop="userName">
5
-        <el-input
6
-          v-model="queryParams.userName"
7
-          placeholder="请输入用户名称"
8
-          clearable
9
-          @keyup.enter="handleQuery"
10
-        />
5
+        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
11 6
       </el-form-item>
12 7
       <el-form-item label="班组名称" prop="attendanceTeamName">
13
-        <el-input
14
-          v-model="queryParams.attendanceTeamName"
15
-          placeholder="请输入班组名称"
16
-          clearable
17
-          @keyup.enter="handleQuery"
18
-        />
8
+        <el-input v-model="queryParams.attendanceTeamName" placeholder="请输入班组名称" clearable @keyup.enter="handleQuery" />
19 9
       </el-form-item>
20 10
       <el-form-item label="主管名称" prop="attendanceDepartmentName">
21
-        <el-input
22
-          v-model="queryParams.attendanceDepartmentName"
23
-          placeholder="请输入主管名称"
24
-          clearable
25
-          @keyup.enter="handleQuery"
26
-        />
11
+        <el-input v-model="queryParams.attendanceDepartmentName" placeholder="请输入主管名称" clearable
12
+          @keyup.enter="handleQuery" />
27 13
       </el-form-item>
28
-       <el-form-item label="大队名称" prop="attendanceBrigadeName">
29
-        <el-input
30
-          v-model="queryParams.attendanceBrigadeName"
31
-          placeholder="请输入大队名称"
32
-          clearable
33
-          @keyup.enter="handleQuery"
34
-        />
14
+      <el-form-item label="大队名称" prop="attendanceBrigadeName">
15
+        <el-input v-model="queryParams.attendanceBrigadeName" placeholder="请输入大队名称" clearable
16
+          @keyup.enter="handleQuery" />
35 17
       </el-form-item>
36 18
       <el-form-item label="考勤日期" prop="attendanceDate">
37
-        <el-date-picker
38
-          clearable
39
-          v-model="dateRange"
40
-          value-format="YYYY-MM-DD"
41
-          type="daterange"
42
-          range-separator="-"
43
-          start-placeholder="开始日期"
44
-          end-placeholder="结束日期">
19
+        <el-date-picker clearable v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
20
+          start-placeholder="开始日期" end-placeholder="结束日期">
45 21
         </el-date-picker>
46 22
       </el-form-item>
47 23
       <el-form-item label="航站楼名称" prop="terminlName">
48
-        <el-input
49
-          v-model="queryParams.terminlName"
50
-          placeholder="请输入航站楼名称"
51
-          clearable
52
-          @keyup.enter="handleQuery"
53
-        />
24
+        <el-input v-model="queryParams.terminlName" placeholder="请输入航站楼名称" clearable @keyup.enter="handleQuery" />
54 25
       </el-form-item>
55 26
       <el-form-item label="区域名称" prop="regionalName">
56
-        <el-input
57
-          v-model="queryParams.regionalName"
58
-          placeholder="请输入区域名称"
59
-          clearable
60
-          @keyup.enter="handleQuery"
61
-        />
27
+        <el-input v-model="queryParams.regionalName" placeholder="请输入区域名称" clearable @keyup.enter="handleQuery" />
62 28
       </el-form-item>
63 29
       <el-form-item label="通道名称" prop="channelName">
64
-        <el-input
65
-          v-model="queryParams.channelName"
66
-          placeholder="请输入通道名称"
67
-          clearable
68
-          @keyup.enter="handleQuery"
69
-        />
30
+        <el-input v-model="queryParams.channelName" placeholder="请输入通道名称" clearable @keyup.enter="handleQuery" />
70 31
       </el-form-item>
71 32
       <!-- <el-form-item label="岗位名称" prop="positionName">
72 33
         <el-input
@@ -84,35 +45,20 @@
84 45
 
85 46
     <el-row :gutter="10" class="mb8">
86 47
       <el-col :span="1.5">
87
-        <el-button
88
-          type="primary"
89
-          plain
90
-          icon="Plus"
91
-          @click="handleAdd"
92
-          v-hasPermi="['attendance:postRecord:add']"
93
-        >新增</el-button>
48
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
49
+          v-hasPermi="['attendance:postRecord:add']">新增</el-button>
94 50
       </el-col>
95 51
       <el-col :span="1.5">
96
-        <el-button
97
-          type="danger"
98
-          plain
99
-          icon="Delete"
100
-          :disabled="multiple"
101
-          @click="handleDelete"
102
-          v-hasPermi="['attendance:postRecord:remove']"
103
-        >删除</el-button>
52
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
53
+          v-hasPermi="['attendance:postRecord:remove']">删除</el-button>
104 54
       </el-col>
105 55
       <el-col :span="1.5">
106
-        <el-button
107
-          type="warning"
108
-          plain
109
-          icon="Download"
110
-          @click="handleExport"
111
-          v-hasPermi="['attendance:postRecord:export']"
112
-        >导出</el-button>
56
+        <el-button type="warning" plain icon="Download" @click="handleExport"
57
+          v-hasPermi="['attendance:postRecord:export']">导出</el-button>
113 58
       </el-col>
114 59
       <el-col :span="1.5">
115
-        <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['attendance:postRecord:import']">导入</el-button>
60
+        <el-button type="info" plain icon="Upload" @click="handleImport"
61
+          v-hasPermi="['attendance:postRecord:import']">导入</el-button>
116 62
       </el-col>
117 63
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
118 64
     </el-row>
@@ -122,12 +68,12 @@
122 68
       <el-table-column label="用户姓名" align="center" prop="userName" width="80" />
123 69
       <el-table-column label="班组名称" align="center" prop="attendanceTeamName" width="80" />
124 70
       <el-table-column label="主管名称" align="center" prop="attendanceDepartmentName" width="80" />
125
-      <el-table-column label="大队名称" align="center" prop="attendanceBrigadeName" width="80" /> 
71
+      <el-table-column label="大队名称" align="center" prop="attendanceBrigadeName" width="80" />
126 72
       <el-table-column label="考勤日期" align="center" prop="attendanceDate" width="100" />
127 73
       <el-table-column label="上岗时间" align="center" prop="checkInTime" width="155" />
128
-      <el-table-column label="离岗时间" align="center" prop="checkOutTime" width="155" >
74
+      <el-table-column label="离岗时间" align="center" prop="checkOutTime" width="155">
129 75
         <template #default="scope">
130
-          {{ scope.row.checkOutTime=='2000-01-01 00:00:00'?'':scope.row.checkOutTime }}
76
+          {{ scope.row.checkOutTime == '2000-01-01 00:00:00' ? '' : scope.row.checkOutTime }}
131 77
         </template>
132 78
       </el-table-column>
133 79
       <el-table-column label="工作时长(分钟)" align="center" prop="workDuration" width="115" />
@@ -139,71 +85,51 @@
139 85
       <el-table-column label="备注" align="center" prop="remark" />
140 86
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
141 87
         <template #default="scope">
142
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['attendance:postRecord:edit']">修改</el-button>
143
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['attendance:postRecord:remove']">删除</el-button>
88
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
89
+            v-hasPermi="['attendance:postRecord:edit']">修改</el-button>
90
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
91
+            v-hasPermi="['attendance:postRecord:remove']">删除</el-button>
144 92
         </template>
145 93
       </el-table-column>
146 94
     </el-table>
147
-    
148
-    <pagination
149
-      v-show="total>0"
150
-      :total="total"
151
-      v-model:page="queryParams.pageNum"
152
-      v-model:limit="queryParams.pageSize"
153
-      @pagination="getList"
154
-    />
95
+
96
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
97
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
155 98
 
156 99
     <!-- 添加或修改上岗记录对话框 -->
157 100
     <el-dialog :title="title" v-model="open" width="400px" append-to-body>
158 101
       <el-form ref="postRecordRef" :model="form" :rules="rules" label-width="80px">
159
-        <el-form-item label="用户" prop="userId">
102
+        <el-form-item label="班组" prop="attendanceTeamId" clearable>
103
+          <el-select v-model="form.attendanceTeamId" filterable placeholder="请选择班组" style="width: 288px"
104
+            @change="handleTeamChange">
105
+            <el-option v-for="item in teamOptions" :key="item.value" :label="item.label" :value="item.value" />
106
+          </el-select>
107
+        </el-form-item>
108
+        <el-form-item label="用户" prop="userIdList">
160 109
           <template v-if="disabledUserSelect">
161 110
             <el-input v-model="form.userName" :disabled="disabledUserSelect" />
162 111
           </template>
163 112
           <template v-else>
164
-            <UserSelect ref="userSelect" v-model="form.userId" :disabled="disabledUserSelect" width="288px" />
113
+            <UserSelect ref="userSelect" v-model="form.userIdList" :disabled="disabledUserSelect" width="288px"
114
+              :multiple="true" />
165 115
           </template>
166 116
         </el-form-item>
167 117
         <el-form-item label="上岗时间" prop="checkInTime">
168
-          <el-date-picker clearable
169
-            style="width:288px"
170
-            v-model="form.checkInTime"
171
-            type="datetime"
172
-            format="YYYY-MM-DD HH:mm:ss"
173
-            value-format="YYYY-MM-DD HH:mm:ss"
174
-            placeholder="请选择上岗时间">
118
+          <el-date-picker clearable style="width:288px" v-model="form.checkInTime" type="datetime"
119
+            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择上岗时间">
175 120
           </el-date-picker>
176 121
         </el-form-item>
177 122
         <el-form-item label="离岗时间" prop="checkOutTime">
178
-          <el-date-picker clearable
179
-            style="width:288px"
180
-            v-model="form.checkOutTime"
181
-            type="datetime"
182
-            format="YYYY-MM-DD HH:mm:ss"
183
-            value-format="YYYY-MM-DD HH:mm:ss"
184
-            placeholder="请选择离岗时间">
123
+          <el-date-picker clearable style="width:288px" v-model="form.checkOutTime" type="datetime"
124
+            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择离岗时间">
185 125
           </el-date-picker>
186 126
         </el-form-item>
187
-        <el-form-item label="班组" prop="attendanceTeamId" clearable>
188
-          <el-select v-model="form.attendanceTeamId" filterable placeholder="请选择班组" style="width: 288px">
189
-            <el-option
190
-              v-for="item in teamOptions"
191
-              :key="item.value"
192
-              :label="item.label"
193
-              :value="item.value"
194
-            />
195
-          </el-select>
196
-        </el-form-item>
127
+
197 128
         <el-form-item label="通道" prop="terminlCode" clearable>
198
-          <el-cascader
199
-            v-model="form.positionValue"
200
-            :options="positonOptions"
201
-            @change="handlePositionChange"
202
-            placeholder="请选择航站楼、区域、通道"
203
-            style="width: 288px"
204
-          />
129
+          <el-cascader v-model="form.positionValue" :options="positonOptions" @change="handlePositionChange"
130
+            placeholder="请选择航站楼、区域、通道" style="width: 288px" />
205 131
         </el-form-item>
206
-        <el-form-item label="岗位" prop="positionCode">
132
+        <!-- <el-form-item label="岗位" prop="positionCode">
207 133
           <el-select v-model="form.positionCode" placeholder="请选择岗位" clearable style="width: 288px">
208 134
             <el-option
209 135
               v-for="dict in item_check_method"
@@ -212,7 +138,7 @@
212 138
               :value="dict.value"
213 139
             />
214 140
           </el-select>
215
-        </el-form-item>
141
+        </el-form-item> -->
216 142
         <el-form-item label="备注" prop="remark">
217 143
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
218 144
         </el-form-item>
@@ -225,17 +151,12 @@
225 151
       </template>
226 152
     </el-dialog>
227 153
 
228
-    
154
+
229 155
     <!-- 上岗记录导入对话框 -->
230 156
     <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
231
-      <el-upload ref="uploadRef" 
232
-      :limit="1" accept=".xlsx, .xls" 
233
-      :headers="upload.headers" 
234
-      :action="upload.url + '?updateSupport=' + upload.updateSupport" 
235
-      :disabled="upload.isUploading" 
236
-      :on-progress="handleFileUploadProgress" 
237
-      :on-success="handleFileSuccess" 
238
-      :auto-upload="false" drag>
157
+      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
158
+        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
159
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
239 160
         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
240 161
         <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
241 162
         <template #tip>
@@ -244,7 +165,8 @@
244 165
               <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
245 166
             </div> -->
246 167
             <span>仅允许导入xls、xlsx格式文件。</span>
247
-            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
168
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
169
+              @click="importTemplate">下载模板</el-link>
248 170
           </div>
249 171
         </template>
250 172
       </el-upload>
@@ -260,6 +182,7 @@
260 182
 
261 183
 <script setup name="PostRecord">
262 184
 import { listPostRecord, getPostRecord, delPostRecord, addPostRecord, updatePostRecord, positionList, teamList } from "@/api/attendance/postRecord"
185
+import { listRecord } from "@/api/attendance/record"
263 186
 import UserSelect from "@/components/UserSelect"
264 187
 
265 188
 const { proxy } = getCurrentInstance()
@@ -291,7 +214,7 @@ const data = reactive({
291 214
     pageSize: 10,
292 215
     tenantId: null,
293 216
     revision: null,
294
-    userId: null,
217
+    userIdList: null,
295 218
     channelCode: null,
296 219
     shiftCode: null,
297 220
     checkInTime: null,
@@ -317,15 +240,15 @@ const data = reactive({
317 240
     statusDesc: null
318 241
   },
319 242
   rules: {
320
-    userId: [
243
+    userIdList: [
321 244
       { required: !disabledUserSelect, message: "用户ID不能为空", trigger: "blur" }
322 245
     ],
323 246
     channelCode: [
324 247
       { required: true, message: "通道编码不能为空", trigger: "blur" }
325 248
     ],
326
-    positionCode: [
327
-      { required: true, message: "岗位编码不能为空", trigger: "blur" }
328
-    ],
249
+    // positionCode: [
250
+    //   { required: true, message: "岗位编码不能为空", trigger: "blur" }
251
+    // ],
329 252
     checkInTime: [
330 253
       { required: true, message: "上岗时间不能为空", trigger: "blur" }
331 254
     ],
@@ -403,6 +326,24 @@ const upload = reactive({
403 326
 
404 327
 const { queryParams, form, rules } = toRefs(data)
405 328
 
329
+
330
+const handleTeamChange = async (newTeamId) => {
331
+  
332
+  if (newTeamId) {
333
+    // 当班组ID变化时,获取该班组的成员
334
+    try {
335
+      const response = await listRecord({ attendanceTeamId: newTeamId,pageSize: 1000 })
336
+      // 获取团队成员的用户ID列表
337
+      const teamUserIds = response.rows.map(item => item.userId)
338
+      // 将团队成员的用户ID赋值给form.userId
339
+      form.value.userIdList = teamUserIds
340
+    } catch (error) {
341
+      console.error('获取班组成员失败:', error)
342
+    }
343
+  }
344
+}
345
+
346
+
406 347
 /** 查询上岗记录列表 */
407 348
 function getList() {
408 349
   loading.value = true
@@ -467,7 +408,7 @@ function reset() {
467 408
     createTime: null,
468 409
     updateBy: null,
469 410
     updateTime: null,
470
-    userId: null,
411
+    userIdList: [], // 改为数组默认值
471 412
     channelCode: null,
472 413
     shiftCode: null,
473 414
     checkInTime: null,
@@ -568,12 +509,12 @@ function submitForm() {
568 509
 /** 删除按钮操作 */
569 510
 function handleDelete(row) {
570 511
   const _ids = row.id || ids.value
571
-  proxy.$modal.confirm('是否确认删除数据项?').then(function() {
512
+  proxy.$modal.confirm('是否确认删除数据项?').then(function () {
572 513
     return delPostRecord(_ids)
573 514
   }).then(() => {
574 515
     getList()
575 516
     proxy.$modal.msgSuccess("删除成功")
576
-  }).catch(() => {})
517
+  }).catch(() => { })
577 518
 }
578 519
 
579 520
 /** 导出按钮操作 */