IotMainWorkOrderDetail.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864
  1. <template>
  2. <ContentWrap v-loading="formLoading">
  3. <el-form
  4. ref="formRef"
  5. :model="formData"
  6. :rules="formRules"
  7. v-loading="formLoading"
  8. style="margin-right: 4em; margin-left: 0.5em; margin-top: 1em"
  9. label-width="130px"
  10. >
  11. <div class="base-expandable-content">
  12. <el-row>
  13. <el-col :span="8">
  14. <el-form-item label="工单名称" prop="name">
  15. <el-input type="text" v-model="formData.name" disabled/>
  16. </el-form-item>
  17. </el-col>
  18. <el-col :span="8">
  19. <el-form-item label="工单编号" prop="orderNumber">
  20. <el-input type="text" v-model="formData.orderNumber" disabled/>
  21. </el-form-item>
  22. </el-col>
  23. <el-col :span="8">
  24. <el-form-item label="责任人" prop="responsiblePerson">
  25. <el-select v-model="formData.responsiblePerson" filterable clearable style="width: 100%" disabled>
  26. <el-option
  27. v-for="item in deptUsers"
  28. :key="item.id"
  29. :label="item.nickname"
  30. :value="item.id"
  31. />
  32. </el-select>
  33. </el-form-item>
  34. </el-col>
  35. <el-col :span="8">
  36. <el-form-item label="工单类型" prop="type">
  37. <el-select disabled v-model="formData.type" clearable>
  38. <el-option
  39. v-for="dict in getIntDictOptions(DICT_TYPE.PMS_MAIN_WORK_ORDER_TYPE)"
  40. :key="dict.value"
  41. :label="dict.label"
  42. :value="dict.value"
  43. />
  44. </el-select>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="8">
  48. <el-form-item label="保养结果" prop="result">
  49. <el-select disabled v-model="formData.result" clearable>
  50. <el-option
  51. v-for="dict in getIntDictOptions(DICT_TYPE.PMS_MAIN_WORK_ORDER_RESULT)"
  52. :key="dict.value"
  53. :label="dict.label"
  54. :value="dict.value"
  55. />
  56. </el-select>
  57. </el-form-item>
  58. </el-col>
  59. <el-col :span="8">
  60. <el-form-item label="保养费用(元)" prop="cost">
  61. <el-input type="text" v-model="formData.cost" disabled/>
  62. </el-form-item>
  63. </el-col>
  64. <el-col :span="8">
  65. <el-form-item label="实际保养开始时间" prop="actualStartTime">
  66. <el-date-picker
  67. style="width: 150%"
  68. v-model="formData.actualStartTime"
  69. type="datetime"
  70. value-format="x"
  71. placeholder="实际保养开始时间"
  72. disabled
  73. />
  74. </el-form-item>
  75. </el-col>
  76. <el-col :span="8">
  77. <el-form-item label="实际保养结束时间" prop="actualEndTime">
  78. <el-date-picker
  79. style="width: 150%"
  80. v-model="formData.actualEndTime"
  81. type="datetime"
  82. value-format="x"
  83. placeholder="实际保养结束时间"
  84. disabled
  85. />
  86. </el-form-item>
  87. </el-col>
  88. <el-col :span="8">
  89. <el-form-item label="其他费用(元)" prop="otherCost">
  90. <el-input type="text" v-model="formData.otherCost" disabled/>
  91. </el-form-item>
  92. </el-col>
  93. <el-col :span="24">
  94. <el-form-item label="备注" prop="remark">
  95. <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" disabled/>
  96. </el-form-item>
  97. </el-col>
  98. </el-row>
  99. </div>
  100. </el-form>
  101. </ContentWrap>
  102. <ContentWrap>
  103. <ContentWrap>
  104. <!-- 搜索工作栏 -->
  105. <el-form
  106. class="-mb-15px"
  107. :model="queryParams"
  108. ref="queryFormRef"
  109. :inline="true"
  110. label-width="68px"
  111. >
  112. <!--
  113. <el-form-item>
  114. <el-button @click="openForm" type="warning">
  115. <Icon icon="ep:plus" class="mr-5px" /> 新增设备</el-button>
  116. </el-form-item>
  117. -->
  118. </el-form>
  119. </ContentWrap>
  120. <!-- 列表 -->
  121. <ContentWrap>
  122. <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
  123. <!-- 添加序号列 -->
  124. <el-table-column
  125. type="index"
  126. label="序号"
  127. width="60"
  128. align="center"
  129. />
  130. <el-table-column label="bom节点" align="center" prop="bomNodeId" v-if="false"/>
  131. <el-table-column label="设备编码" align="center" prop="deviceCode" />
  132. <el-table-column label="设备名称" align="center" prop="deviceName" />
  133. <el-table-column label="累计运行时间(H)" align="center" prop="totalRunTime" :formatter="erpPriceTableColumnFormatter"/>
  134. <el-table-column label="累计运行公里数(KM)" align="center" prop="totalMileage" :formatter="erpPriceTableColumnFormatter"/>
  135. <el-table-column label="保养项" align="center" prop="name" />
  136. <el-table-column label="运行里程" key="mileageRule" width="80">
  137. <template #default="scope">
  138. <el-switch
  139. v-model="scope.row.mileageRule"
  140. :active-value="0"
  141. :inactive-value="1"
  142. :disabled="true"
  143. />
  144. </template>
  145. </el-table-column>
  146. <el-table-column label="运行时间" key="runningTimeRule" width="80">
  147. <template #default="scope">
  148. <el-switch
  149. v-model="scope.row.runningTimeRule"
  150. :active-value="0"
  151. :inactive-value="1"
  152. :disabled="true"
  153. />
  154. </template>
  155. </el-table-column>
  156. <el-table-column label="自然日期" key="naturalDateRule" width="80">
  157. <template #default="scope">
  158. <el-switch
  159. v-model="scope.row.naturalDateRule"
  160. :active-value="0"
  161. :inactive-value="1"
  162. :disabled="true"
  163. />
  164. </template>
  165. </el-table-column>
  166. <el-table-column label="已选物料" align="center" width="100">
  167. <template #default="scope">
  168. {{ hasMaterial(scope.row.bomNodeId) ? '是' : '否' }}
  169. </template>
  170. </el-table-column>
  171. <el-table-column label="操作" align="center" min-width="120px">
  172. <template #default="scope">
  173. <div style="display: flex; justify-content: center; align-items: center; width: 100%">
  174. <!-- 新增配置按钮 -->
  175. <div style="margin-left: 12px">
  176. <el-button
  177. link
  178. type="primary"
  179. @click="openConfigDialog(scope.row)"
  180. >
  181. 配置
  182. </el-button>
  183. </div>
  184. <!--
  185. <div style="margin-left: 12px">
  186. <el-button
  187. link
  188. type="primary"
  189. @click="openMaterialForm(scope.row)"
  190. >
  191. 选择物料
  192. </el-button>
  193. </div>
  194. -->
  195. <div style="margin-left: 12px">
  196. <el-button
  197. link
  198. type="primary"
  199. @click="handleView(scope.row.id, scope.row.bomNodeId)"
  200. >
  201. 物料详情
  202. </el-button>
  203. </div>
  204. </div>
  205. </template>
  206. </el-table-column>
  207. </el-table>
  208. </ContentWrap>
  209. <!-- 选择的物料列表 -->
  210. <ContentWrap>
  211. <el-table v-loading="false" :data="materialList" :stripe="true" :show-overflow-tooltip="true" v-if="false">
  212. <el-table-column label="bom节点" align="center" prop="bomNodeId" />
  213. <el-table-column label="物料编码" align="center" prop="materialCode" />
  214. <el-table-column label="物料名称" align="center" prop="materialName" />
  215. <el-table-column label="单位" align="center" prop="unit" />
  216. <el-table-column label="单价(CNY/元)" align="center" prop="unitPrice" :formatter="erpPriceTableColumnFormatter"/>
  217. <el-table-column label="消耗数量" align="center" prop="quantity" />
  218. <el-table-column label="总库存数量" align="center" prop="totalInventoryQuantity" />
  219. </el-table>
  220. </ContentWrap>
  221. </ContentWrap>
  222. <ContentWrap>
  223. <el-form>
  224. <el-form-item style="float: right">
  225. <el-button @click="close">取 消</el-button>
  226. </el-form-item>
  227. </el-form>
  228. </ContentWrap>
  229. <!-- 新增配置对话框 -->
  230. <el-dialog
  231. v-model="configDialog.visible"
  232. :title="`设备 ${configDialog.current?.deviceCode+'-'+configDialog.current?.name} 保养配置`"
  233. width="600px"
  234. >
  235. <el-form :model="configDialog.form" label-width="200px" :rules="configFormRules" ref="configFormRef">
  236. <!-- 里程配置 -->
  237. <el-form-item
  238. v-if="configDialog.current?.mileageRule === 0"
  239. label="上次保养里程数(KM)"
  240. prop="lastRunningKilometers"
  241. >
  242. <el-input-number
  243. v-model="configDialog.form.lastRunningKilometers"
  244. :precision="2"
  245. :min="0"
  246. controls-position="right"
  247. :disabled="true"
  248. />
  249. </el-form-item>
  250. <!-- 推迟公里数 -->
  251. <el-form-item
  252. v-if="configDialog.current?.mileageRule === 0"
  253. label="推迟公里数(KM)"
  254. prop="delayKilometers"
  255. >
  256. <el-input-number
  257. v-model="configDialog.form.delayKilometers"
  258. :precision="2"
  259. :min="0"
  260. controls-position="right"
  261. />
  262. </el-form-item>
  263. <!-- 运行时间配置 -->
  264. <el-form-item
  265. v-if="configDialog.current?.runningTimeRule === 0"
  266. label="上次保养运行时间(H)"
  267. prop="lastRunningTime"
  268. >
  269. <el-input-number
  270. v-model="configDialog.form.lastRunningTime"
  271. :precision="1"
  272. :min="0"
  273. controls-position="right"
  274. :disabled="true"
  275. />
  276. </el-form-item>
  277. <!-- 推迟时长 -->
  278. <el-form-item
  279. v-if="configDialog.current?.runningTimeRule === 0"
  280. label="推迟时长(H)"
  281. prop="delayDuration"
  282. >
  283. <el-input-number
  284. v-model="configDialog.form.delayDuration"
  285. :precision="2"
  286. :min="0"
  287. controls-position="right"
  288. :disabled="true"
  289. />
  290. </el-form-item>
  291. <!-- 自然日期配置 -->
  292. <el-form-item
  293. v-if="configDialog.current?.naturalDateRule === 0"
  294. label="上次保养自然日期(D)"
  295. prop="lastNaturalDate"
  296. >
  297. <el-date-picker
  298. v-model="configDialog.form.lastNaturalDate"
  299. type="date"
  300. placeholder="选择日期"
  301. format="YYYY-MM-DD"
  302. value-format="YYYY-MM-DD"
  303. :disabled="true"
  304. />
  305. </el-form-item>
  306. <!-- 推迟自然日期 -->
  307. <el-form-item
  308. v-if="configDialog.current?.naturalDateRule === 0"
  309. label="推迟自然日期(D)"
  310. prop="delayNaturalDate"
  311. >
  312. <el-input-number
  313. v-model="configDialog.form.delayNaturalDate"
  314. :precision="2"
  315. :min="0"
  316. controls-position="right"
  317. :disabled="true"
  318. />
  319. </el-form-item>
  320. <!-- 保养规则周期值 + 提前量 -->
  321. <el-form-item
  322. v-if="configDialog.current?.mileageRule === 0"
  323. label="运行里程周期(KM)"
  324. prop="nextRunningKilometers"
  325. >
  326. <el-input-number
  327. v-model="configDialog.form.nextRunningKilometers"
  328. :precision="2"
  329. :min="0"
  330. controls-position="right"
  331. :disabled="true"
  332. />
  333. </el-form-item>
  334. <el-form-item
  335. v-if="configDialog.current?.mileageRule === 0"
  336. label="运行里程周期-提前量(KM)"
  337. prop="kiloCycleLead"
  338. >
  339. <el-input-number
  340. v-model="configDialog.form.kiloCycleLead"
  341. :precision="2"
  342. :min="0"
  343. controls-position="right"
  344. :disabled="true"
  345. />
  346. </el-form-item>
  347. <el-form-item
  348. v-if="configDialog.current?.runningTimeRule === 0"
  349. label="运行时间周期(H)"
  350. prop="nextRunningTime"
  351. >
  352. <el-input-number
  353. v-model="configDialog.form.nextRunningTime"
  354. :precision="1"
  355. :min="0"
  356. controls-position="right"
  357. :disabled="true"
  358. />
  359. </el-form-item>
  360. <el-form-item
  361. v-if="configDialog.current?.runningTimeRule === 0"
  362. label="运行时间周期-提前量(H)"
  363. prop="timePeriodLead"
  364. >
  365. <el-input-number
  366. v-model="configDialog.form.timePeriodLead"
  367. :precision="1"
  368. :min="0"
  369. controls-position="right"
  370. :disabled="true"
  371. />
  372. </el-form-item>
  373. <el-form-item
  374. v-if="configDialog.current?.naturalDateRule === 0"
  375. label="自然日周期(D)"
  376. prop="nextNaturalDate"
  377. >
  378. <el-input-number
  379. v-model="configDialog.form.nextNaturalDate"
  380. :min="0"
  381. controls-position="right"
  382. :disabled="true"
  383. />
  384. </el-form-item>
  385. <el-form-item
  386. v-if="configDialog.current?.naturalDateRule === 0"
  387. label="自然日周期-提前量(D)"
  388. prop="naturalDatePeriodLead"
  389. >
  390. <el-input-number
  391. v-model="configDialog.form.naturalDatePeriodLead"
  392. :min="0"
  393. controls-position="right"
  394. :disabled="true"
  395. />
  396. </el-form-item>
  397. </el-form>
  398. <template #footer>
  399. <el-button @click="configDialog.visible = false">取消</el-button>
  400. </template>
  401. </el-dialog>
  402. <!-- 表单弹窗:添加/修改 -->
  403. <WorkOrderMaterial ref="materialFormRef" @choose="selectChoose" />
  404. <!-- 抽屉组件 展示已经选择的物料 并编辑物料消耗 -->
  405. <MaterialListDrawer
  406. :model-value="drawerVisible"
  407. @update:model-value="val => drawerVisible = val"
  408. :node-id="currentBomNodeId"
  409. :materials="materialList.filter(item => item.bomNodeId === currentBomNodeId)"
  410. />
  411. </template>
  412. <script setup lang="ts">
  413. import { IotMaintainApi, IotMaintainVO } from '@/api/pms/maintain'
  414. import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
  415. import * as UserApi from '@/api/system/user'
  416. import { useUserStore } from '@/store/modules/user'
  417. import { ref } from 'vue'
  418. import type { ComponentPublicInstance } from 'vue'
  419. import { IotMaintenanceBomApi, IotMaintenanceBomVO } from '@/api/pms/iotmaintenancebom'
  420. import { IotMainWorkOrderBomApi, IotMainWorkOrderBomVO } from '@/api/pms/iotmainworkorderbom'
  421. import { IotMainWorkOrderBomMaterialApi, IotMainWorkOrderBomMaterialVO } from '@/api/pms/iotmainworkorderbommaterial'
  422. import { IotMaintenancePlanApi, IotMaintenancePlanVO } from '@/api/pms/maintenance'
  423. import { IotMainWorkOrderApi, IotMainWorkOrderVO } from '@/api/pms/iotmainworkorder'
  424. import { useTagsViewStore } from '@/store/modules/tagsView'
  425. import {CACHE_KEY, useCache} from "@/hooks/web/useCache";
  426. import MainPlanDeviceList from "@/views/pms/maintenance/MainPlanDeviceList.vue";
  427. import * as DeptApi from "@/api/system/dept";
  428. import {erpPriceTableColumnFormatter} from "@/utils";
  429. import dayjs from 'dayjs'
  430. import MaterialListDrawer from "@/views/pms/iotmainworkorder/SelectedMaterialDrawer.vue";
  431. import WorkOrderMaterial from "@/views/pms/iotmainworkorder/WorkOrderMaterial.vue";
  432. import {IotMaintainMaterialsApi} from "@/api/pms/maintain/materials";
  433. import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
  434. /** 保养计划 表单 */
  435. defineOptions({ name: 'IotMainWorkOrderDetail' })
  436. const { t } = useI18n() // 国际化
  437. const message = useMessage() // 消息弹窗
  438. const { delView } = useTagsViewStore() // 视图操作
  439. const { currentRoute, push } = useRouter()
  440. const deptUsers = ref<UserApi.UserVO[]>([]) // 用户列表
  441. const dept = ref() // 当前登录人所属部门对象
  442. const configFormRef = ref() // 配置弹出框对象
  443. const bomNodeId = ref() // 最新的bomNodeId
  444. const dialogTitle = ref('') // 弹窗的标题
  445. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  446. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  447. const deviceLabel = ref('') // 表单的类型:create - 新增;update - 修改
  448. const drawerVisible = ref<boolean>(false)
  449. const currentBomNodeId = ref() // 当前选中的bom节点
  450. const showDrawer = ref()
  451. const list = ref<IotMainWorkOrderBomVO[]>([]) // 保养工单bom关联列表的数据
  452. const materialList = ref<IotMainWorkOrderBomMaterialVO[]>([]) // 保养工单bom关联物料列表
  453. const deviceIds = ref<number[]>([]) // 已经选择的设备id数组
  454. const { params, name } = useRoute() // 查询参数
  455. const id = params.id
  456. const formData = ref({
  457. id: undefined,
  458. deptId: undefined,
  459. name: '',
  460. orderNumber: undefined,
  461. responsiblePerson: undefined,
  462. type: undefined,
  463. result: undefined,
  464. remark: undefined,
  465. status: undefined,
  466. })
  467. const formRules = reactive({
  468. name: [{ required: true, message: '工单名称不能为空', trigger: 'blur' }],
  469. responsiblePerson: [{ required: true, message: '责任人不能为空', trigger: 'blur' }],
  470. })
  471. const formRef = ref() // 表单 Ref
  472. interface MaterialFormExpose {
  473. open: (deptId: number, bomNodeId: number) => void
  474. }
  475. const materialFormRef = ref<MaterialFormExpose>();
  476. // 新增配置相关状态
  477. const configDialog = reactive({
  478. visible: false,
  479. current: null as IotMaintenanceBomVO | null,
  480. form: {
  481. lastRunningKilometers: 0,
  482. delayKilometers: 0,
  483. lastRunningTime: 0,
  484. delayDuration: 0,
  485. lastNaturalDate: '',
  486. delayNaturalDate: 0,
  487. // 保养规则 周期
  488. nextRunningKilometers: 0,
  489. nextRunningTime: 0,
  490. nextNaturalDate: 0,
  491. // 提前量
  492. kiloCycleLead: 0,
  493. timePeriodLead: 0,
  494. naturalDatePeriodLead: 0
  495. }
  496. })
  497. // 打开配置对话框
  498. const openConfigDialog = (row: IotMainWorkOrderBomVO) => {
  499. configDialog.current = row
  500. // 处理日期初始化(核心修改)
  501. let initialDate = ''
  502. if (row.lastNaturalDate) {
  503. // 如果已有值:时间戳 -> 日期字符串
  504. initialDate = dayjs(row.lastNaturalDate).format('YYYY-MM-DD')
  505. } else {
  506. // 如果无值:设置默认值避免1970问题
  507. initialDate = ''
  508. }
  509. configDialog.form = {
  510. lastRunningKilometers: row.lastRunningKilometers || 0,
  511. delayKilometers: row.delayKilometers || 0,
  512. lastRunningTime: row.lastRunningTime || 0,
  513. delayDuration: row.delayDuration || 0,
  514. lastNaturalDate: initialDate,
  515. delayNaturalDate: row.delayNaturalDate || 0,
  516. // 保养规则 周期值
  517. nextRunningKilometers: row.nextRunningKilometers || 0,
  518. nextRunningTime: row.nextRunningTime || 0,
  519. nextNaturalDate: row.nextNaturalDate || 0,
  520. // 提前量
  521. kiloCycleLead: row.kiloCycleLead || 0,
  522. timePeriodLead: row.timePeriodLead || 0,
  523. naturalDatePeriodLead: row.naturalDatePeriodLead || 0
  524. }
  525. configDialog.visible = true
  526. }
  527. // const materialFormRef = ref()
  528. const openMaterialForm = (row: any) => {
  529. bomNodeId.value = row.bomNodeId;
  530. console.log('这是一个对象:', row.bomNodeId)
  531. materialFormRef.value.open(formData.value.deptId, bomNodeId.value)
  532. }
  533. const selectChoose = (selectedMaterial) => {
  534. selectedMaterial.bomNodeId = bomNodeId.value
  535. // 关联 bomNodeId
  536. const processedMaterials = selectedMaterial.map(material => ({
  537. ...material,
  538. bomNodeId: bomNodeId.value // 统一关联当前行的 bomNodeId
  539. }));
  540. // 避免重复添加
  541. processedMaterials.forEach(newMaterial => {
  542. // 检查是否已存在相同 bomNodeId + materialCode 的条目
  543. const isExist = materialList.value.some(item =>
  544. item.bomNodeId === bomNodeId.value &&
  545. item.materialCode === newMaterial.materialCode
  546. );
  547. if (!isExist) {
  548. materialList.value.push(newMaterial);
  549. }
  550. });
  551. console.log('选择完成的数据:', JSON.stringify(selectedMaterial))
  552. console.log('添加到本地列表的数据:', materialList.value)
  553. }
  554. /** 查看已经选择的物料 */
  555. const handleView = (nodeId, bomId) => {
  556. currentBomNodeId.value = nodeId
  557. drawerVisible.value = true
  558. // showDrawer.value.openDrawer()
  559. const queryParams = {
  560. pageNo: 1,
  561. pageSize: 100,
  562. workOrderId: formData.value.id,
  563. bomId: nodeId
  564. }
  565. IotMainWorkOrderBomMaterialApi.getIotMainWorkOrderBomMaterialPage(queryParams).then((res) => {
  566. currentBomNodeId.value = bomId
  567. materialList.value = res.list
  568. })
  569. console.log('当前bom节点:', currentBomNodeId.value)
  570. }
  571. const hasMaterial = (bomNodeId: number) => {
  572. return materialList.value.some(item => item.bomNodeId === bomNodeId)
  573. }
  574. // 保存配置
  575. const saveConfig = () => {
  576. (configFormRef.value as any).validate((valid: boolean) => {
  577. if (!valid) return
  578. if (!configDialog.current) return
  579. // 动态校验逻辑
  580. const requiredFields = []
  581. if (configDialog.current.mileageRule === 0) {
  582. requiredFields.push('nextRunningKilometers', 'kiloCycleLead')
  583. }
  584. if (configDialog.current.runningTimeRule === 0) {
  585. requiredFields.push('nextRunningTime', 'timePeriodLead')
  586. }
  587. if (configDialog.current.naturalDateRule === 0) {
  588. requiredFields.push('nextNaturalDate', 'naturalDatePeriodLead')
  589. }
  590. const missingFields = requiredFields.filter(field =>
  591. !configDialog.form[field as keyof typeof configDialog.form]
  592. )
  593. if (missingFields.length > 0) {
  594. message.error('请填写所有必填项')
  595. return
  596. }
  597. // 强制校验逻辑
  598. if (configDialog.current.naturalDateRule === 0) {
  599. if (!configDialog.form.lastNaturalDate) {
  600. message.error('必须选择自然日期')
  601. return
  602. }
  603. // 验证日期有效性
  604. const dateValue = dayjs(configDialog.form.lastNaturalDate)
  605. if (!dateValue.isValid()) {
  606. message.error('日期格式不正确')
  607. return
  608. }
  609. }
  610. // 转换逻辑(关键修改)
  611. const finalDate = configDialog.form.lastNaturalDate
  612. ? dayjs(configDialog.form.lastNaturalDate).valueOf()
  613. : null // 改为null而不是0
  614. // 更新当前行的数据
  615. Object.assign(configDialog.current, {
  616. ...configDialog.form,
  617. lastNaturalDate: finalDate
  618. })
  619. configDialog.visible = false
  620. })
  621. }
  622. const queryParams = reactive({
  623. workOrderId: id
  624. })
  625. const close = () => {
  626. delView(unref(currentRoute))
  627. push({ name: 'IotMainWorkOrder', params:{}})
  628. }
  629. /** 提交表单 */
  630. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  631. const submitForm = async () => {
  632. // 校验表单
  633. await formRef.value.validate()
  634. // 校验表格数据
  635. // const isValid = validateTableData()
  636. // if (!isValid) return
  637. // 提交请求
  638. formLoading.value = true
  639. try {
  640. const data = {
  641. mainWorkOrder: formData.value,
  642. mainWorkOrderBom: list.value,
  643. mainWorkOrderMaterials: materialList.value
  644. }
  645. debugger
  646. await IotMainWorkOrderApi.fillWorkOrder(data)
  647. message.success(t('common.createSuccess'))
  648. close()
  649. /* if (formType.value === 'create') {
  650. await IotMaintenancePlanApi.createIotMaintenancePlan(data)
  651. message.success(t('common.createSuccess'))
  652. close()
  653. } else {
  654. await IotMaintainApi.updateIotMaintain(data)
  655. message.success(t('common.updateSuccess'))
  656. close()
  657. } */
  658. // 发送操作成功的事件
  659. emit('success')
  660. } finally {
  661. formLoading.value = false
  662. }
  663. }
  664. // 新增表单校验规则
  665. const configFormRules = reactive({
  666. nextRunningKilometers: [{
  667. required: true,
  668. message: '里程周期必须填写',
  669. trigger: 'blur'
  670. }],
  671. kiloCycleLead: [{
  672. required: true,
  673. message: '提前量必须填写',
  674. trigger: 'blur'
  675. }],
  676. nextRunningTime: [{
  677. required: true,
  678. message: '时间周期必须填写',
  679. trigger: 'blur'
  680. }],
  681. timePeriodLead: [{
  682. required: true,
  683. message: '提前量必须填写',
  684. trigger: 'blur'
  685. }],
  686. nextNaturalDate: [{
  687. required: true,
  688. message: '自然日周期必须填写',
  689. trigger: 'blur'
  690. }],
  691. naturalDatePeriodLead: [{
  692. required: true,
  693. message: '提前量必须填写',
  694. trigger: 'blur'
  695. }]
  696. })
  697. /** 校验表格数据 */
  698. const validateTableData = (): boolean => {
  699. let isValid = true
  700. const errorMessages: string[] = []
  701. const noRulesErrorMessages: string[] = [] // 未设置任何保养项规则 的错误提示信息
  702. const noRules: string[] = [] // 行记录中设置了保养规则的记录数量
  703. const configErrors: string[] = [] // 保养规则配置弹出框
  704. let shouldBreak = false;
  705. if (list.value.length === 0) {
  706. errorMessages.push('请至少添加一条设备保养明细')
  707. isValid = false
  708. // 直接返回无需后续校验
  709. message.error('请至少添加一条设备保养明细')
  710. return isValid
  711. }
  712. list.value.forEach((row, index) => {
  713. if (shouldBreak) return;
  714. const rowNumber = index + 1 // 用户可见的行号从1开始
  715. const deviceIdentifier = `${row.deviceCode}-${row.name}` // 设备标识
  716. // 校验逻辑
  717. const checkConfig = (ruleName: string, ruleValue: number, configField: keyof typeof row) => {
  718. if (ruleValue === 0) { // 规则开启
  719. if (!row[configField] || row[configField] <= 0) {
  720. configErrors.push(`第 ${rowNumber} 行(${deviceIdentifier}):请点击【配置】维护${ruleName}上次保养值`)
  721. isValid = false
  722. }
  723. }
  724. }
  725. // 里程校验逻辑
  726. if (row.mileageRule === 0) { // 假设 0 表示开启状态
  727. if (!row.nextRunningKilometers || row.nextRunningKilometers <= 0) {
  728. errorMessages.push(`第 ${rowNumber} 行:开启里程规则必须填写有效的里程周期`)
  729. isValid = false
  730. }
  731. // 再校验配置值
  732. checkConfig('里程', row.mileageRule, 'lastRunningKilometers')
  733. } else {
  734. noRules.push(`第 ${rowNumber} 行:未设置里程规则`)
  735. }
  736. // 运行时间校验逻辑
  737. if (row.runningTimeRule === 0) {
  738. if (!row.nextRunningTime || row.nextRunningTime <= 0) {
  739. errorMessages.push(`第 ${rowNumber} 行:开启运行时间规则必须填写有效的时间周期`)
  740. isValid = false
  741. }
  742. checkConfig('运行时间', row.runningTimeRule, 'lastRunningTime')
  743. } else {
  744. noRules.push(`第 ${rowNumber} 行:未设置运行时间规则`)
  745. }
  746. // 自然日期校验逻辑
  747. if (row.naturalDateRule === 0) {
  748. if (!row.nextNaturalDate) {
  749. errorMessages.push(`第 ${rowNumber} 行:开启自然日期规则必须填写有效的自然日期周期`)
  750. isValid = false
  751. }
  752. checkConfig('自然日期', row.naturalDateRule, 'lastNaturalDate')
  753. } else {
  754. noRules.push(`第 ${rowNumber} 行:未设置自然日期规则`)
  755. }
  756. // 如果选中的一行记录未设置任何保养规则 提示 ‘保养项未设置任何保养规则’
  757. if (noRules.length === 3) {
  758. isValid = false
  759. shouldBreak = true; // 设置标志变量为true,退出循环
  760. noRulesErrorMessages.push('保养项至少设置1个保养规则')
  761. }
  762. noRules.length = 0;
  763. })
  764. if (errorMessages.length > 0) {
  765. message.error('设置保养规则后,请维护对应的周期值')
  766. } else if (noRulesErrorMessages.length > 0) {
  767. message.error(noRulesErrorMessages.pop())
  768. } else if (configErrors.length > 0) {
  769. message.error(configErrors.pop())
  770. }
  771. return isValid
  772. }
  773. /** 重置表单 */
  774. const resetForm = () => {
  775. formData.value = {
  776. id: undefined,
  777. deviceId: undefined,
  778. status: undefined,
  779. description: undefined,
  780. pic: undefined,
  781. remark: undefined,
  782. deviceName: undefined,
  783. processInstanceId: undefined,
  784. auditStatus: undefined,
  785. deptId: undefined
  786. }
  787. formRef.value?.resetFields()
  788. }
  789. onMounted(async () => {
  790. materialList.value = []
  791. const deptId = useUserStore().getUser.deptId
  792. // 查询当前登录人所属部门名称
  793. dept.value = await DeptApi.getDept(deptId)
  794. // formData.value.name = dept.value.name + ' - 保养计划'
  795. deptUsers.value = await UserApi.getDeptUsersByDeptId(deptId)
  796. formData.value.deptId = deptId
  797. // if (id){
  798. try{
  799. formType.value = 'update'
  800. // 查询保养工单 主表数据
  801. const workOrder = await IotMainWorkOrderApi.getIotMainWorkOrder(id);
  802. formData.value = workOrder
  803. // 查询保养责任人
  804. const personId = formData.value.responsiblePerson ? Number(formData.value.responsiblePerson) : 0;
  805. UserApi.getUser(personId).then((res) => {
  806. formData.value.responsiblePerson = res.nickname;
  807. })
  808. // 查询保养工单 明细数据
  809. const data = await IotMainWorkOrderBomApi.getWorkOrderBOMs(queryParams);
  810. list.value = []
  811. if (Array.isArray(data)) {
  812. list.value = data.map(item => ({
  813. ...item,
  814. // 这里可以添加必要的字段转换(如果有日期等需要格式化的字段)
  815. lastNaturalDate: item.lastNaturalDate ? dayjs(item.lastNaturalDate).format('YYYY-MM-DD') : null
  816. }))
  817. }
  818. } catch (error) {
  819. console.error('数据加载失败:', error)
  820. message.error('数据加载失败,请重试')
  821. }
  822. })
  823. </script>
  824. <style scoped>
  825. .base-expandable-content {
  826. overflow: hidden; /* 隐藏溢出的内容 */
  827. transition: max-height 0.3s ease; /* 平滑过渡效果 */
  828. }
  829. </style>