| 提交 | 用户 | 时间 | ||
| ac315c | 1 | <template> |
| A | 2 | <view class="container"> |
| 2d516c | 3 | <uni-section :title="isEdit ? '修改工时' : '录入工时'" type="line"> |
| ac315c | 4 | <view class="example"> |
| A | 5 | <!-- 基础用法，不包含校验规则 --> |
| 2d516c | 6 | <uni-forms labelWidth="75px" ref="baseForm" :modelValue="baseFormData" :rules="rules"> |
| A | 7 | <uni-forms-item label="项目名称" required name="projectCode"> |
| 8 | <view class="project-select" @click="showProjectSelector"> | |
| 9 | <uni-easyinput | |
| 10 | v-model="selectedProjectText" | |
| 11 | placeholder="请选择项目" | |
| 12 | readonly | |
| 13 | /> | |
| 14 | </view> | |
| 15 | <project-selector | |
| 16 | ref="projectSelector" | |
| 17 | v-model="baseFormData.projectCode" | |
| 18 | @change="handleProjectChange" | |
| 19 | /> | |
| ac315c | 20 | </uni-forms-item> |
| 2d516c | 21 | <uni-forms-item label="项目阶段" required name="projectPhase"> |
| ac315c | 22 | <uni-data-select |
| A | 23 | v-model="baseFormData.projectPhase" |
| 24 | :localdata="phaseSelect" | |
| 25 | @change="change" | |
| 26 | ></uni-data-select> | |
| 27 | </uni-forms-item> | |
| 2d516c | 28 | <uni-forms-item label="工种" required name="workType"> |
| ac315c | 29 | <uni-data-select |
| A | 30 | v-model="baseFormData.workType" |
| 31 | :localdata="typeSelect" | |
| 32 | @change="change" | |
| 33 | ></uni-data-select> | |
| 34 | </uni-forms-item> | |
| 2d516c | 35 | <uni-forms-item label="工时" required name="workTime"> |
| 9ee8fb | 36 | <uni-easyinput @input="validateWorkTime" v-model="baseFormData.workTime" placeholder="请输入工时" /> |
| ac315c | 37 | </uni-forms-item> |
| A | 38 | <uni-forms-item label="工作详情"> |
| 39 | <uni-easyinput type="textarea" v-model="baseFormData.details" placeholder="请编辑工作详情" /> | |
| 40 | </uni-forms-item> | |
| 2d516c | 41 | <button form-type="submit" type="primary" @click="handleSubmit('baseForm')">提交</button> |
| A | 42 | |
| ac315c | 43 | </uni-forms> |
| A | 44 | </view> |
| 45 | </uni-section> | |
| 46 | </view> | |
| 47 | </template> | |
| 48 | <script> | |
| 2d516c | 49 | import { getDicts } from '@/api/dema/dictData.js' |
| A | 50 | import { appAddWorkHourInfo, appUpdateWorkHourInfo } from '@/api/dema/workHourInfo.js' |
| 51 | import ProjectSelector from '@/components/ProjectSelector/index.vue' | |
| ac315c | 52 | export default { |
| 2d516c | 53 | components: { |
| A | 54 | ProjectSelector |
| 55 | }, | |
| ac315c | 56 | data() { |
| A | 57 | return { |
| 58 | // 基础表单数据 | |
| 59 | baseFormData: { | |
| 2d516c | 60 | projectCode: '', |
| A | 61 | projectName: '', |
| 62 | projectPhase: '', | |
| 63 | workType: '', | |
| ac315c | 64 | workTime: '', |
| A | 65 | details: '', |
| 2d516c | 66 | workHourId: '', |
| ac315c | 67 | }, |
| 2d516c | 68 | selectedProjectText: '', |
| ac315c | 69 | typeSelect: [ |
| 2d516c | 70 | // { value: '机械设计', text: "机械设计" }, |
| A | 71 | // { value: '电气设计', text: "电气设计" }, |
| 72 | // { value: '软件', text: "软件" }, | |
| 73 | // { value: '软件', text: "视觉" }, | |
| 74 | // { value: '电气调试', text: "电气调试" }, | |
| 75 | // { value: '电工', text: "电工" }, | |
| 76 | // { value: '钳工', text: "钳工" }, | |
| 77 | // { value: '现场经理', text: "现场经理" }, | |
| ac315c | 78 | ], |
| A | 79 | phaseSelect: [ |
| 2d516c | 80 | // { value: '场内设计', text: "场内设计" }, |
| A | 81 | // { value: '场内装配', text: "场内装配" }, |
| 82 | // { value: '场内调试', text: "场内调试" }, | |
| 83 | // { value: '场外装配', text: "场外装配" }, | |
| 84 | // { value: '场外调试', text: "场外调试" }, | |
| 85 | // { value: '试生产', text: "试生产" }, | |
| 86 | // { value: '陪产', text: "陪产" }, | |
| 87 | // { value: '终验收', text: "终验收" }, | |
| ac315c | 88 | ], |
| A | 89 | codeSelect: [ |
| 2d516c | 90 | { value: '042湖州智芯', text: "042湖州智芯" }, |
| A | 91 | { value: '040春风动力', text: "040春风动力" }, |
| ac315c | 92 | ], |
| 2d516c | 93 | rules: { |
| A | 94 | projectCode: { |
| 95 | rules: [{ | |
| 96 | required: true, | |
| 97 | errorMessage: '请选择项目' | |
| 98 | }] | |
| 99 | }, | |
| 100 | projectPhase: { | |
| 101 | rules: [{ | |
| 102 | required: true, | |
| 103 | errorMessage: '请选择项目阶段' | |
| 104 | }] | |
| 105 | }, | |
| 106 | workType: { | |
| 107 | rules: [{ | |
| 108 | required: true, | |
| 109 | errorMessage: '请选择工种' | |
| 110 | }] | |
| 111 | }, | |
| 112 | workTime: { | |
| 113 | rules: [{ | |
| 114 | required: true, | |
| 115 | errorMessage: '请输入工时' | |
| 116 | }, { | |
| 117 | format: 'number', | |
| 118 | errorMessage: '工时必须是数字' | |
| 119 | }, { | |
| 120 | validateFunction: (rule, value, data, callback) => { | |
| 121 | if (value > 24) { | |
| 122 | callback('工时不能大于24小时'); | |
| 123 | } | |
| 124 | return true; | |
| 125 | } | |
| 126 | }] | |
| 127 | }, | |
| 128 | }, | |
| 129 | isEdit: false, // 是否是编辑模式 | |
| 130 | recordId: '', // 记录ID | |
| ac315c | 131 | } |
| A | 132 | }, |
| 2d516c | 133 | onLoad(options) { |
| A | 134 | // 处理传入的参数 |
| 135 | if (options.isEdit === 'true') { | |
| 136 | this.isEdit = true; | |
| 137 | this.recordId = options.id; | |
| 138 | ||
| 139 | // 获取工种和项目阶段的文本显示 | |
| 140 | // const workTypeText = this.typeSelect.find(item => item.value === Number(options.workType))?.text || ''; | |
| 141 | // const phaseText = this.phaseSelect.find(item => item.value === Number(options.projectPhase))?.text || ''; | |
| 142 | ||
| 143 | // 填充表单数据 | |
| 144 | this.baseFormData = { | |
| 145 | workHourId: options.workHourId, | |
| 146 | projectCode: options.projectCode, | |
| 147 | projectName: options.projectName, | |
| 148 | projectPhase: options.projectPhase, // 确保转换为数字 | |
| 149 | workType: options.workType, // 确保转换为数字 | |
| 150 | workTime: options.workTime, | |
| 151 | details: options.details || '' | |
| 152 | }; | |
| 153 | ||
| 154 | // 设置项目选择器的显示文本 | |
| 155 | this.selectedProjectText = options.projectName; | |
| 156 | ||
| 157 | // 打印调试信息 | |
| 158 | console.log('工种:', workTypeText, '项目阶段:', phaseText); | |
| 159 | console.log('表单数据:', this.baseFormData); | |
| 160 | } | |
| 161 | }, | |
| 162 | created() { | |
| 163 | this.initGetDicts() | |
| 164 | }, | |
| ac315c | 165 | methods: { |
| 2d516c | 166 | initGetDicts(value){ |
| A | 167 | getDicts("work_type").then(response => { |
| 168 | this.typeSelect = response.data.map(item => ({ | |
| 169 | value: item.dictValue, | |
| 170 | text: item.dictValue | |
| 171 | })); | |
| 172 | }); | |
| 173 | getDicts("project_phase").then(response => { | |
| 174 | this.phaseSelect = response.data.map(item => ({ | |
| 175 | value: item.dictValue, | |
| 176 | text: item.dictValue | |
| 177 | })); | |
| 178 | }); | |
| 179 | }, | |
| 180 | validateWorkTime(value) { | |
| 181 | // // 移除非数字字符 | |
| 182 | // this.baseFormData.workTime = value.replace(/[^\d.]/g, ''); | |
| 183 | // // 限制最大值为24 | |
| 184 | // if (Number(this.baseFormData.workTime) > 24) { | |
| 185 | // this.baseFormData.workTime = '24'; | |
| 186 | // } | |
| 187 | // 只允许数字和小数点，且小数点只能出现一次 | |
| 188 | let newValue = value.replace(/[^\d.]/g, ''); | |
| 189 | // 确保只有一个小数点 | |
| 190 | if (newValue.split('.').length > 2) { | |
| 191 | newValue = newValue.replace(/\.+/g, '.'); | |
| 192 | } | |
| 193 | // 限制最大值为24 | |
| 194 | if (Number(newValue) > 24) { | |
| 195 | newValue = '24'; | |
| 196 | } | |
| 197 | // 更新表单数据 | |
| 198 | this.baseFormData.workTime = newValue; | |
| 199 | }, | |
| 200 | change(){ | |
| 201 | }, | |
| ac315c | 202 | handleBack() { |
| A | 203 | uni.navigateBack({ |
| 204 | delta: 1 | |
| 205 | }); | |
| 206 | }, | |
| 207 | handleReset() { | |
| 208 | this.$refs.baseForm.resetFields(); | |
| 209 | }, | |
| 2d516c | 210 | handleSubmit(ref) { |
| A | 211 | this.$refs.baseForm.validate().then(valid => { |
| 212 | if (valid) { | |
| 213 | if(this.baseFormData.workTime > 8 && this.baseFormData.details === ''){ | |
| 214 | this.$modal.msgError("工时超过8小时时，必须填写工作详情"); | |
| 215 | return false | |
| 216 | } | |
| 217 | const submitData = { | |
| 218 | ...this.baseFormData, | |
| 219 | // workTime: Number(this.baseFormData.workTime) // 旧代码 | |
| 220 | workTime: parseFloat(this.baseFormData.workTime) // 修改为 parseFloat 以保留小数 | |
| 221 | }; | |
| 222 | ||
| 223 | // 如果是编辑模式，添加ID | |
| 224 | if (this.isEdit) { | |
| 225 | submitData.id = this.recordId; | |
| 226 | } | |
| 227 | ||
| 228 | // 根据模式选择API | |
| 229 | const api = this.isEdit ? appUpdateWorkHourInfo : appAddWorkHourInfo; | |
| 230 | const successMsg = this.isEdit ? '修改成功' : '新增成功'; | |
| 231 | ||
| 232 | api(submitData).then(response => { | |
| 233 | this.$modal.msgSuccess(successMsg); | |
| 234 | setTimeout(() => { | |
| 235 | if(successMsg === '新增成功'){ | |
| 236 | this.$tab.navigateBack(); | |
| 237 | }else{ | |
| 238 | // 返回上一页并刷新列表 | |
| 239 | const pages = getCurrentPages(); | |
| 240 | const prevPage = pages[pages.length - 2]; | |
| 241 | if (prevPage && prevPage.$vm) { | |
| 242 | // 调用上一页的刷新方法 | |
| 243 | prevPage.$vm.getList(); | |
| 244 | this.$tab.navigateBack(); | |
| 245 | } | |
| 246 | } | |
| 247 | ||
| 248 | }, 700); | |
| 249 | }).catch(error => { | |
| 250 | this.$modal.msgError(this.isEdit ? "修改失败" : "提交失败：" + error.message); | |
| 251 | }); | |
| 252 | } | |
| 253 | }).catch(errors => { | |
| 254 | console.log('表单验证失败:', errors); | |
| 255 | let errorMsg = ''; | |
| 256 | if (Array.isArray(errors)) { | |
| 257 | errorMsg = errors.map(error => error.errorMessage).join('\n'); | |
| 258 | } else { | |
| 259 | errorMsg = '请填写必填项'; | |
| 260 | } | |
| 261 | this.$modal.msgError(errorMsg); | |
| 262 | }); | |
| 263 | ||
| ac315c | 264 | }, |
| 2d516c | 265 | |
| A | 266 | showProjectSelector() { |
| 267 | this.$refs.projectSelector.show() | |
| 268 | }, | |
| 269 | handleProjectChange(project) { | |
| 270 | this.selectedProjectText = project.text | |
| 271 | this.baseFormData.projectCode = project.value | |
| 272 | this.baseFormData.projectName = project.text; | |
| 273 | } | |
| ac315c | 274 | } |
| A | 275 | } |
| 276 | </script> | |
| 277 | ||
| 278 | <style> | |
| 279 | .uni-form-item .title { | |
| 280 | padding: 20rpx 0; | |
| 281 | } | |
| 282 | .example { | |
| 283 | padding: 15px; | |
| 284 | background-color: #fff; | |
| 285 | } | |
| 286 | ||
| 287 | .segmented-control { | |
| 288 | margin-bottom: 15px; | |
| 289 | } | |
| 290 | ||
| 291 | .button-group { | |
| 292 | margin-top: 15px; | |
| 293 | display: flex; | |
| 294 | justify-content: space-around; | |
| 295 | } | |
| 296 | ||
| 297 | .form-item { | |
| 298 | display: flex; | |
| 299 | align-items: center; | |
| 300 | } | |
| 301 | ||
| 302 | .button { | |
| 303 | display: flex; | |
| 304 | align-items: center; | |
| 305 | height: 35px; | |
| 306 | margin-left: 10px; | |
| 307 | } | |
| 2d516c | 308 | .title { |
| A | 309 | font-size: 14px; |
| 310 | font-weight: bold; | |
| 311 | margin: 20px 0 5px 0; | |
| 312 | } | |
| 313 | ||
| 314 | .data-pickerview { | |
| 315 | height: 400px; | |
| 316 | border: 1px #e5e5e5 solid; | |
| 317 | } | |
| 318 | ||
| 319 | .popper__arrow { | |
| 320 | top: -6px; | |
| 321 | left: 50%; | |
| 322 | margin-right: 3px; | |
| 323 | border-top-width: 0; | |
| 324 | border-bottom-color: #EBEEF5; | |
| 325 | } | |
| 326 | .popper__arrow { | |
| 327 | top: -6px; | |
| 328 | left: 50%; | |
| 329 | margin-right: 3px; | |
| 330 | border-top-width: 0; | |
| 331 | border-bottom-color: #EBEEF5; | |
| 332 | } | |
| 333 | .project-select { | |
| 334 | position: relative; | |
| 335 | width: 100%; | |
| 336 | } | |
| 337 | ||
| 338 | .project-select :deep(.uni-easyinput__content) { | |
| 339 | cursor: pointer; | |
| 340 | background-color: #f5f5f5; | |
| 341 | } | |
| ac315c | 342 | </style> |
| 2d516c | 343 | |
