index.vue 64 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531
  1. <template>
  2. <el-dialog v-model="visible" :title="isView ? '查看' : isCollect ? '领取' : '归还'" width="75%" :close-on-click-modal="false" @close="onCancel">
  3. <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  4. <el-tab-pane label="借用单信息" name="first">
  5. <el-form :model="form" label-width="110px" label-position="top" :rules="rules" ref="formRef">
  6. <el-row :gutter="16">
  7. <el-col :span="8">
  8. <el-form-item label="借用单编号" prop="application_no">
  9. <el-input v-model="form.application_no" placeholder="自动生成" disabled />
  10. </el-form-item>
  11. </el-col>
  12. <el-col :span="8">
  13. <el-form-item label="借用人类型" prop="borrower_type">
  14. <el-select v-model="form.borrower_type" :placeholder="isView?'':'请选择借用人角色'" :disabled="true">
  15. <el-option label="管理员用户" :value=0 />
  16. <el-option label="应用用户" :value=1 />
  17. <el-option label="外部用户" :value=2 />
  18. </el-select>
  19. </el-form-item>
  20. </el-col>
  21. <el-col :span="8" >
  22. <!-- <el-form-item label="借用人" prop="external_borrower_name" v-if="form.borrower_type !== 2">
  23. <el-input v-model="form.borrower_info.name" placeholder="请输入借用人" :disabled="true" />
  24. </el-form-item> -->
  25. <el-form-item label="借用人" prop="admin_borrower" v-if="form.borrower_type == 0">
  26. <el-select v-model="form.admin_borrower" :placeholder="isView?'':'请选择借用人'" :disabled="true" >
  27. <el-option :label="adminList.name" :value="adminList.id" />
  28. </el-select>
  29. </el-form-item>
  30. <el-form-item label="借用人" prop="app_user_borrower" v-if="form.borrower_type == 1">
  31. <el-select v-model="form.app_user_borrower.id" :placeholder="isView?'':'请选择借用人'" :disabled="true" >
  32. <el-option v-for="item in allUserList" :key="item.id" :label="item.name" :value="item.id" />
  33. </el-select>
  34. </el-form-item>
  35. <el-form-item label="借用人" prop="external_borrower_name" v-if="form.borrower_type == 2">
  36. <el-input v-model="form.external_borrower_name" :placeholder="isView?'':'请输入借用人'" :disabled="true" />
  37. </el-form-item>
  38. </el-col>
  39. <el-col :span="8" v-if="form.borrower_type !== 2">
  40. <el-form-item label="学号/工号" prop="user_code" >
  41. <!-- {{ form.borrower_info.user_code }} -->
  42. <el-input v-model="form.app_user_borrower.user_code" :placeholder="isView?'':'请输入学号/工号'" :disabled="true"/>
  43. </el-form-item>
  44. </el-col>
  45. <el-col :span="8">
  46. <el-form-item label="联系电话" v-if="form.borrower_type !== 2">
  47. <el-input v-model="form.app_user_borrower.mobile" :placeholder="isView?'':'请输入联系电话'" :disabled="true" />
  48. </el-form-item>
  49. <el-form-item label="联系电话" v-if="form.borrower_type == 2">
  50. <el-input v-model="form.external_borrower_phone" :placeholder="isView?'':'请输入联系电话'" :disabled="true" />
  51. </el-form-item>
  52. </el-col>
  53. <el-col :span="8">
  54. <el-form-item label="借用部门" prop="borrower_dept">
  55. <el-input v-model="form.borrower_dept" placeholder="请输入借用部门" :disabled="true" />
  56. </el-form-item>
  57. </el-col>
  58. <el-col :span="8">
  59. <el-form-item label="预计归还时间" prop="expected_end_time">
  60. <el-date-picker v-model="form.expected_end_time" type="date"
  61. format="YYYY-MM-DD"
  62. value-format="YYYY-MM-DD"
  63. :disabledDate="disabledDate" placeholder="请选择预计归还时间" style="width: 100%" :disabled="true"/>
  64. </el-form-item>
  65. </el-col>
  66. <el-col :span="4">
  67. <el-form-item label="个人/团队" prop="team_type" >
  68. <el-select v-model="form.team_type" placeholder="请选择" :disabled="true">
  69. <el-option label="个人" :value="0" />
  70. <el-option label="团队" :value="1" />
  71. </el-select>
  72. </el-form-item>
  73. </el-col>
  74. <el-col :span="4" v-show="form.team_type===1">
  75. <el-form-item label="团队人数" prop="team_members_count">
  76. <el-input v-model="form.team_members_count" :placeholder="isView?'':'请输入'" :disabled="true"/>
  77. </el-form-item>
  78. </el-col>
  79. <el-col :span="16" v-show="form.team_type===1">
  80. <el-form-item label="团队其他人员名单" prop="team_members">
  81. <el-input v-model="form.team_members" :placeholder="isView?'':'请输入团队其他人员名单'" :disabled="true"/>
  82. </el-form-item>
  83. </el-col>
  84. <el-col :span="24">
  85. <el-form-item label="借用原因" prop="purpose">
  86. <el-input v-model="form.purpose" type="textarea" :placeholder="isView?'':'请输入借用原因'" :disabled="true" />
  87. </el-form-item>
  88. </el-col>
  89. <el-col :span="4">
  90. <!-- ||form.approver_info.name -->
  91. <el-form-item label="审批人" prop="applicant_remark_type">
  92. <el-select v-model="form.approver_info.name" placeholder="请选择" :disabled="true" >
  93. <el-option label="管理员" value="1"/>
  94. </el-select>
  95. </el-form-item>
  96. </el-col>
  97. <el-col :span="20">
  98. <el-form-item label="备注" prop="applicant_remark">
  99. <el-input v-model="form.applicant_remark" :placeholder="isView?'':'请输入备注'" :disabled="true"/>
  100. </el-form-item>
  101. </el-col>
  102. </el-row>
  103. <div style="margin: 16px 0 8px 0; font-weight: bold"> {{ isView ? '借用列表' : (isCollect ? '借用列表' : '归还列表') }}</div>
  104. <el-table :data="form.items.filter(item => item.device === null)" border style="width: 50%; margin-bottom: 12px">
  105. <el-table-column type="index" label="序号" width="60" />
  106. <el-table-column prop="device_category_name" label="设备分类" />
  107. <el-table-column :label="isView ? '数量' : (isCollect ? '借用数量' : '归还数量')">
  108. <template #default="{ row }">
  109. <el-input v-model="row.quantity" type="number" :min="1" prop="quantity" size="small" :disabled="true" />
  110. </template>
  111. </el-table-column>
  112. <el-table-column label="操作" width="80">
  113. <template #default="{ $index }">
  114. <el-button type="text" style="color: red" @click="removeItem($index)" :disabled="true">移除</el-button>
  115. </template>
  116. </el-table-column>
  117. </el-table>
  118. <el-button type="primary" @click="addItem" v-if="!isView" :disabled="true">选择设备分类</el-button>
  119. <div style="margin: 16px 0 8px 0; font-weight: bold">预借配件信息</div>
  120. <el-input v-model="form.accessories" :placeholder="isView?'':'请输入预借配件信息'" :disabled="true"/>
  121. <div style="margin: 16px 0 8px 0; font-weight: bold" >附件</div>
  122. <!-- <el-upload
  123. action="#"
  124. drag
  125. :list-type="'picture'"
  126. accept=".bmp,.gif,.jpeg,.jpg,.png,‌.webp,.svg"
  127. multiple
  128. :show-file-list="true"
  129. :file-list="attachmentFileList"
  130. :on-success="handleUploadSuccess"
  131. :on-error="handleUploadError"
  132. :disabled="true"
  133. >
  134. <i class="el-icon-upload"></i>
  135. <div class="el-upload__text">将文件拖到此处,或 <em>点击上传</em></div>
  136. </el-upload> -->
  137. <el-upload
  138. :disabled="true"
  139. action="#"
  140. list-type="picture-card"
  141. :on-preview="handlePictureCardPreview"
  142. :on-remove="handleRemoves"
  143. :file-list="attachmentFileList"
  144. >
  145. <el-icon><Plus /></el-icon>
  146. </el-upload>
  147. <div v-if="isView && form.latest_renewal" style="margin-top: 8px;">
  148. <div style="font-weight: bold; margin-bottom: 8px">续借信息</div>
  149. <el-row :gutter="16">
  150. <el-col :span="4">
  151. <el-form-item label="续借天数">
  152. <el-input :model-value="form.latest_renewal?.renewal_days" :disabled="true">
  153. <template #append>天</template>
  154. </el-input>
  155. </el-form-item>
  156. </el-col>
  157. <el-col :span="21">
  158. <el-form-item label="续借理由">
  159. <el-input :model-value="form.latest_renewal?.renewal_reason" type="textarea" :disabled="true" />
  160. </el-form-item>
  161. </el-col>
  162. </el-row>
  163. </div>
  164. </el-form>
  165. <!-- 审批信息流程展示 -->
  166. <!-- <div v-if="isView" style="margin-top: 24px; padding: 0 12px">
  167. <div style="font-weight: bold; margin-bottom: 12px">审批流程进度</div>
  168. <el-steps :active="activeStep" align-center>
  169. <el-step
  170. title="创建申请"
  171. :description="`创建时间:${ timeline.create }`"
  172. icon="CircleCheck"
  173. :status="activeStep >= 1 ? 'finish' : 'wait'"
  174. />
  175. <el-step
  176. title="待审批"
  177. description="待审批人审批"
  178. icon="CircleCheck"
  179. :status="activeStep >= 2 ? 'finish' : 'wait'"
  180. />
  181. <el-step
  182. title="审批通过"
  183. :description="`审批人:${timeline.approver},时间:${timeline.approve}`"
  184. icon="CircleCheck"
  185. :status="activeStep >= 3 ? 'finish' : 'wait'"
  186. />
  187. <el-step
  188. title="流程完成"
  189. description="流程已结束"
  190. icon="CircleCheck"
  191. :status="activeStep >= 4 ? 'finish' : 'wait'"
  192. />
  193. </el-steps>
  194. </div> -->
  195. <div v-if="isView" style="margin-top: 24px; padding: 0 12px">
  196. <div style="font-weight: bold; margin-bottom: 12px">审批流程进度</div>
  197. <el-steps :active="steps.length" align-center>
  198. <el-step
  199. v-for="(step, index) in steps"
  200. :key="index"
  201. :title="step.title"
  202. :description="step.description"
  203. icon="CircleCheck"
  204. :status="step.status"
  205. />
  206. </el-steps>
  207. </div>
  208. </el-tab-pane>
  209. <el-tab-pane v-if="isCollect && !shouldHideDeviceList" label="设备清单" name="second">
  210. <el-form :model="form" label-width="110px">
  211. <el-row :gutter="16">
  212. <el-col :span="24">
  213. <div style="margin: 8px 0">
  214. <el-input v-model="searchText" placeholder="请扫描设备条码添加" style="width: 300px" @keyup.enter="handleScanSearch" />
  215. <el-button type="primary" style="margin-left: 16px" @click="handleAdd">手动借用</el-button>
  216. </div>
  217. <el-table :data="deviceList" border style="width: 100%">
  218. <el-table-column type="index" label="序号" width="60" align="center" />
  219. <el-table-column prop="device_code" label="设备编号" align="center" />
  220. <el-table-column prop="device_type" label="设备分类" align="center" />
  221. <el-table-column prop="device_name" label="设备名称" align="center" />
  222. <el-table-column prop="borrow_count" label="借用数量" align="center" width="150">
  223. <template #default="{ row }">
  224. <el-input-number v-model="row.borrow_count" :disabled="isView" :min="1" :max="row.available_quantity" size="small" />
  225. </template>
  226. </el-table-column>
  227. <el-table-column prop="brand" label="品牌" align="center" />
  228. <el-table-column prop="device_specification" label="规格型号" align="center" />
  229. <!-- <el-table-column prop="warehouse" label="存放仓库" align="center" /> -->
  230. <el-table-column label="操作" width="80" align="center">
  231. <template #default="{ $index }">
  232. <el-button type="text" style="color: red" :disabled="isView" @click="handleRemove($index)">移除</el-button>
  233. </template>
  234. </el-table-column>
  235. </el-table>
  236. </el-col>
  237. </el-row>
  238. <el-row :gutter="16" style="margin-top: 16px">
  239. <el-col :span="24">
  240. <div style="font-weight: bold; margin-bottom: 8px">实借配件信息</div>
  241. <el-input v-if="isCollect" v-model="collectAccessories" :disabled="isView" type="textarea" :placeholder="isView?'':'请输入实借配件信息'" />
  242. <el-input v-else v-model="form.accessories" :disabled="isView" type="textarea" :placeholder="isView?'':'请输入实借配件信息'" />
  243. </el-col>
  244. <el-col :span="24" style="margin-top: 16px">
  245. <div style="font-weight: bold; margin-bottom: 8px">备注</div>
  246. <el-input v-model="remark" type="textarea" :disabled="isView" :placeholder="isView?'':'请输入备注'" />
  247. </el-col>
  248. </el-row>
  249. <el-row :gutter="16" style="margin-top: 16px">
  250. <el-col :span="24">
  251. <div style="font-weight: bold; margin-bottom: 8px">异常记录 <span>{{
  252. abnormalList?.length ?
  253. abnormalList.reduce((sum, item) => sum + (Number(item?.condition) || 0), 0)
  254. : 0
  255. }}</span> 次</div>
  256. <el-table v-if="abnormalList.length > 0" :data="abnormalList" border style="width: 100%">
  257. <!-- <el-table-column type="index" label="序号" width="60" align="center" />
  258. <el-table-column prop="application_no" label="借用单编号" align="center" /> -->
  259. <el-table-column prop="operator_name" label="借用人" align="center" />
  260. <el-table-column prop="user_code" label="学号" align="center" />
  261. <el-table-column prop="emergency_phone" label="借用人电话" align="center" />
  262. <!-- <el-table-column prop="time" label="发生时间" align="center" /> -->
  263. <el-table-column prop="type" label="异常" align="center">
  264. <template #default="{ row }">
  265. {{ row.type }}
  266. </template>
  267. </el-table-column>
  268. <el-table-column prop="condition" label="数量" align="center">
  269. <template #default="{ row }">
  270. {{ row.condition }}
  271. </template>
  272. </el-table-column>
  273. </el-table>
  274. </el-col>
  275. </el-row>
  276. </el-form>
  277. </el-tab-pane>
  278. <el-tab-pane v-else-if="!shouldHideDeviceList" label="设备清单" name="third">
  279. <el-form :model="form" label-width="110px">
  280. <el-row :gutter="16">
  281. <el-col :span="24">
  282. <div style="margin: 8px 0" v-if="!isView" >
  283. <el-input :disabled="isView" v-model="returnSearchText" placeholder="请扫描设备条码添加" style="width: 300px" @keyup.enter="handleReturnScanSearch" />
  284. <el-button type="primary" style="margin-left: 16px" @click="handleAdd" :disabled="isView">手动归还</el-button>
  285. </div>
  286. <el-table :data="returnDeviceList" border style="width: 100%" >
  287. <!-- <el-table-column type="selection" width="55" align="center" />@selection-change="handleSelectionChange" -->
  288. <el-table-column type="index" label="序号" width="60" align="center" />
  289. <el-table-column prop="device_code" label="设备编号" align="center" />
  290. <!-- <el-table-column prop="device_type" label="设备分类" align="center" /> -->
  291. <el-table-column prop="device_name" label="设备名称" align="center" />
  292. <el-table-column prop="borrow_count" label="借用数量" align="center" width="150">
  293. <template #default="{ row }">
  294. <el-input-number v-model="row.borrow_count" :min="1" :max="row.available_quantity" size="small" :disabled="true" />
  295. </template>
  296. </el-table-column>
  297. <el-table-column prop="brand" label="品牌" align="center" />
  298. <el-table-column prop="model" label="规格型号" align="center" />
  299. <!-- <el-table-column prop="warehouse" label="存放仓库" align="center" /> -->
  300. <el-table-column prop="status" label="状态" align="center">
  301. <template #default="{ row }">
  302. {{ row.return_status.label }}
  303. <!-- <el-tag v-if="!isView" :type="row.status === '已归还' ? 'success' : 'warning'">{{ row.status }}</el-tag>
  304. <el-tag v-else-if="['已领取', '已归还'].includes(form.status_label)">{{ form.status_label }}</el-tag> -->
  305. <!-- <span v-else>{{ form.status_label }}</span> -->
  306. </template>
  307. </el-table-column>
  308. <el-table-column prop="status" label="归还时间" align="center">
  309. <template #default="{ row }">
  310. {{ row.return_time ? dayjs(row.return_time).format('YYYY-MM-DD HH:mm:ss') : (row.return_status?.label === '已归还' ? dayjs().format('YYYY-MM-DD HH:mm:ss') : '') }}
  311. </template>
  312. </el-table-column>
  313. <el-table-column label="操作" width="120" align="center">
  314. <template #default="{ $index,row }">
  315. <!-- && (!returnDeviceList[$index]?.condition || returnDeviceList[$index]?.photos?.length==0)&& row.problem_records?.length ==0 -->
  316. <el-button :disabled="isView" type="text" style="color: red;"
  317. v-if="!isView"
  318. @click="handleAbnormal($index)">异常操作</el-button>
  319. <el-button
  320. type="text"
  321. style="color: #409EFF;margin-left:0"
  322. @click="handleViewAbnormal($index)"
  323. v-if="row.problem_records?.length || (returnDeviceList[$index]?.condition || returnDeviceList[$index]?.photos?.length)"
  324. >查看异常</el-button>
  325. <!-- <el-button type="text" v-if="!isView" :disabled="isView" style="color: red" @click="handleReturnRemove($index)">移除</el-button> -->
  326. </template>
  327. </el-table-column>
  328. </el-table>
  329. </el-col>
  330. </el-row>
  331. <el-row :gutter="16" style="margin-top: 16px">
  332. <el-col :span="16">
  333. <div style="font-weight: bold; margin-bottom: 8px">实借配件信息</div>
  334. <el-input v-model="form.accessories" :disabled="isView" :placeholder="isView?'':'请输入实借配件信息'" />
  335. </el-col>
  336. <el-col :span="8">
  337. <div style="font-weight: bold; margin-bottom: 8px">当前状态</div>
  338. <el-input v-model="returnStatus" v-if="!isView" :disabled="true" placeholder="" style="width: 150px" />
  339. <el-input value="已归还" v-else :disabled="true" placeholder="" style="width: 150px" />
  340. <el-button type="primary" v-if="!isView" style="margin-left: 16px" @click="clickReturn"
  341. :disabled="returnStatus=='已归还'||isView">归还</el-button>
  342. </el-col>
  343. <el-col :span="24" style="margin-top: 16px">
  344. <div style="font-weight: bold; margin-bottom: 8px">备注</div>
  345. <el-input v-model="returnRemark" type="textarea" :disabled="isView" :placeholder="isView?'':'请输入备注'" />
  346. </el-col>
  347. </el-row>
  348. <el-row :gutter="16" style="margin-top: 16px">
  349. <el-col :span="24">
  350. <div style="font-weight: bold; margin-bottom: 8px">异常记录 <span>{{
  351. returnAbnormalList?.length ?
  352. returnAbnormalList.reduce((sum, item) => sum + (Number(item?.condition) || 0), 0)
  353. : 0
  354. }}</span> 次</div>
  355. <el-table v-if="returnAbnormalList?.length > 0" :data="returnAbnormalList" border style="width: 100%">
  356. <!-- <el-table-column type="index" label="序号" width="60" align="center" />
  357. <el-table-column prop="application_no" label="借用单编号" align="center" /> -->
  358. <el-table-column prop="operator_name" label="借用人" align="center" />
  359. <el-table-column prop="user_code" label="学号" align="center" />
  360. <el-table-column prop="emergency_phone" label="借用人电话" align="center" />
  361. <!-- <el-table-column prop="time" label="发生时间" align="center" /> -->
  362. <el-table-column prop="type" label="异常" align="center">
  363. <template #default="{ row }">
  364. {{ row.type }}
  365. </template>
  366. </el-table-column>
  367. <el-table-column prop="condition" label="数量" align="center">
  368. <template #default="{ row }">
  369. {{ row.condition }}
  370. </template>
  371. </el-table-column>
  372. </el-table>
  373. </el-col>
  374. </el-row>
  375. </el-form>
  376. </el-tab-pane>
  377. </el-tabs>
  378. <template #footer>
  379. <el-button @click="onCancel">关闭</el-button>
  380. <el-button type="primary" @click="onSubmit" v-if="!isView"> {{ isCollect ? '提交' : '确认' }}</el-button>
  381. </template>
  382. </el-dialog>
  383. <SelectDeviceDialog
  384. v-model:visible="showSelectDeviceDialog"
  385. @confirm="onDeviceSelected"
  386. :device-ids="returnDeviceList.map(item => item.device_no)"
  387. :return-mode="activeName === 'third'"
  388. :device-status-map="deviceStatusMap"
  389. />
  390. <SettlementDialog v-model:visible="showSettlementDialog" :settlement-data="settlementData" :modelValue="borrowForm" />
  391. <AbnormalDialog v-model:visible="showAbnormalDialog" @confirm="onAbnormalConfirm" />
  392. <ViewAbnormalDialog
  393. v-model:visible="showViewAbnormalDialog"
  394. :abnormal-data="currentAbnormalData"
  395. />
  396. <!-- 图片预览对话框 -->
  397. <el-dialog v-model="dialogVisible" title="图片预览" width="auto" center>
  398. <img width="100%" :src="dialogImageUrl" alt="Preview Image" style="max-width: 100%; max-height: 80vh;" />
  399. </el-dialog>
  400. </template>
  401. <script setup lang="ts">
  402. import { ref, watch, defineProps, defineEmits, onMounted, computed, nextTick } from 'vue';
  403. import SelectDeviceDialog from './SelectDeviceDialog/index.vue';
  404. import SettlementDialog from './SettlementDialog.vue';
  405. import AbnormalDialog from './AbnormalDialog/index.vue';
  406. import ViewAbnormalDialog from './ViewAbnormalDialog/index.vue';
  407. import dayjs from 'dayjs';
  408. import { ElMessage } from 'element-plus';
  409. import * as api from '../../api';
  410. import * as deviceApi from '../../../device/api';
  411. import { CollectEquipment, ReturnEquipment } from '../../api';
  412. import type { TabsPaneContext } from 'element-plus';
  413. import { getUserInfo } from '../../../login/api';
  414. import { request } from '/@/utils/service';
  415. // 禁止选择今天之前的日期
  416. const disabledDate = (time: Date) => {
  417. // 获取今天的开始时间(准确到日)
  418. const today = new Date()
  419. today.setHours(0, 0, 0, 0)
  420. // 返回true表示禁用,禁用今天之前的所有日期
  421. return time.getTime() < today.getTime()
  422. }
  423. /* 获取管理员列表 */
  424. const adminList = ref([]);
  425. async function getAdminList() {
  426. const res = await getUserInfo();
  427. adminList.value = res.data;
  428. console.log("adminList.value:::",adminList.value)
  429. }
  430. /* */
  431. /* 获取所有用户 */
  432. const allUserList = ref([]);
  433. async function getAllUserList() {
  434. const res = await api.GetAllUser({page:1,limit:60});
  435. allUserList.value = res.data;
  436. // 设置默认选择第一个用户
  437. if (allUserList.value.length > 0) {
  438. form.value.app_user_borrower = allUserList.value[0].id;
  439. }
  440. console.log("allUserList.value:::",allUserList.value)
  441. }
  442. interface ApiResponse {
  443. code: number;
  444. data?: any;
  445. message?: string;
  446. }
  447. // 定义接口
  448. interface Device {
  449. id: string | number;
  450. category_name: string;
  451. name?: string;
  452. brand?: string;
  453. model?: string;
  454. warehouse: string;
  455. device_specification?: string;
  456. device_name?: string;
  457. }
  458. interface DeviceListItem {
  459. device_no: string | number;
  460. device_type: string;
  461. device_name?: string; // 改为可选
  462. borrow_count: number;
  463. brand: string;
  464. model?: string; // 改为可选
  465. warehouse: string;
  466. status?: string;
  467. condition?: string;
  468. photos?: Array<{
  469. filename: string;
  470. data: string;
  471. }>;
  472. device_specification?: string;
  473. available_quantity?:number;
  474. }
  475. interface FormItem {
  476. device: string | number;
  477. remark: string;
  478. quantity: number;
  479. location: string;
  480. device_name?: string;
  481. device_specification?: string;
  482. condition?: string;
  483. photos?: Array<{
  484. filename: string;
  485. data: string;
  486. }>;
  487. }
  488. interface FormData {
  489. application_no: string;
  490. emergency_contact: string;
  491. emergency_phone: string;
  492. app_user_borrower: number;
  493. team_type: number;
  494. team_members_count: number;
  495. team_members: string;
  496. expected_start_time: string;
  497. expected_end_time: string;
  498. borrower_dept: string;
  499. purpose: string;
  500. applicant_remark_type: string;
  501. applicant_remark: string;
  502. items: FormItem[];
  503. accessory_info: string;
  504. borrow_type: number;
  505. return_location: string;
  506. status_label?: string;
  507. id?: number;
  508. records?: any[];
  509. borrower_info?: {
  510. user_code: string;
  511. };
  512. borrower_damage_count?: number;
  513. accessories?: string;
  514. latest_renewal?: {
  515. renewal_days?: number | string;
  516. renewal_reason?: string;
  517. };
  518. }
  519. interface AbnormalData {
  520. damage_type:number;
  521. condition: string;
  522. photos: Array<{
  523. filename: string;
  524. data: string;
  525. }>;
  526. }
  527. interface AbnormalRecord {
  528. application_no: string;
  529. operator_name: string;
  530. user_code: string;
  531. emergency_phone: string;
  532. type: '损坏' | '逾期';
  533. condition: number;
  534. create_time: string;
  535. }
  536. const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
  537. const props = defineProps<{ visible: boolean; modelValue?: any }>();
  538. const isEdit = computed(() => props.modelValue?.mode === 'edit');
  539. const isView = computed(() => props.modelValue?.mode === 'view');
  540. const isAdd = computed(() => props.modelValue?.mode === 'add');
  541. const isCollect = computed(() => props.modelValue?.mode === 'collect');
  542. const isReturn = computed(() => props.modelValue?.mode === 'return');
  543. // 计算是否应该隐藏设备清单标签页
  544. const shouldHideDeviceList = computed(() => {
  545. if (!isView.value) return false;
  546. // 检查状态
  547. const status = (form.value as any).status;
  548. const statusLabel = (form.value as any).status_label;
  549. // 审批拒绝:隐藏设备清单
  550. const isRejected = status === 3 || (typeof statusLabel === 'string' && statusLabel.includes('拒绝'));
  551. if (isRejected) {
  552. return true;
  553. }
  554. // 强制显示:状态大于 5 或状态标签为"已借出"
  555. if ((typeof status === 'number' && status > 5) || statusLabel === '已借出') {
  556. return false;
  557. }
  558. // 待审批状态:隐藏设备清单
  559. const isPendingApproval = status < 2 || statusLabel === '待审批';
  560. // 其他情况默认显示
  561. return isPendingApproval;
  562. });
  563. // 计算设备状态映射
  564. const deviceStatusMap = computed(() => {
  565. const statusMap: Record<string | number, any> = {};
  566. returnDeviceList.value.forEach(device => {
  567. if (device.device_no && device.return_status) {
  568. statusMap[device.device_no] = device.return_status;
  569. }
  570. });
  571. return statusMap;
  572. });
  573. const emit = defineEmits(['update:visible', 'update:modelValue', 'submit']);
  574. const visible = ref(props.visible);
  575. const formRef = ref();
  576. // 图片预览相关
  577. const dialogImageUrl = ref('');
  578. const dialogVisible = ref(false);
  579. const timeline = ref({
  580. create: '',
  581. approve: '',
  582. approver: ''
  583. });
  584. // const activeStep = ref(1);
  585. const activeName = ref('first');
  586. const returnStatus = ref('未归还'); // 添加独立的状态变量
  587. // 借用列表相关数据
  588. const searchText = ref('');
  589. const deviceList = ref<DeviceListItem[]>([]);
  590. const accessoryInfo = ref('');
  591. const remark = ref('');
  592. // 领取模式下的“实借配件信息”本地输入,不回显历史
  593. const collectAccessories = ref('');
  594. // 归还设备相关数据
  595. const returnSearchText = ref('');
  596. const returnDeviceList = ref<DeviceListItem[]>([]);
  597. const returnAccessoryInfo = ref('');
  598. const returnRemark = ref('');
  599. const selectedDevices = ref<DeviceListItem[]>([]); // 添加选中设备列表
  600. //审批步骤
  601. const steps = ref<any[]>([]);
  602. // 仓库映射(id -> name)
  603. const warehouseMap = ref<Record<string, string>>({});
  604. async function loadWarehouses() {
  605. try {
  606. const res = await request({
  607. url: '/api/system/warehouse/',
  608. method: 'get',
  609. params: { page: 1, limit: 999 }
  610. });
  611. if (res?.code === 2000 && Array.isArray(res.data)) {
  612. warehouseMap.value = Object.fromEntries(
  613. res.data.map((w: any) => [String(w.id), w.name])
  614. );
  615. }
  616. } catch (e) {
  617. /* empty */
  618. }
  619. }
  620. function getWarehouseName(id: any) {
  621. const key = id != null ? String(id) : '';
  622. return warehouseMap.value[key] ?? id;
  623. }
  624. // 添加结算单相关的状态
  625. const showSettlementDialog = ref(false);
  626. const settlementData = ref<any>(null);
  627. const borrowForm = ref<any>(null);
  628. // 添加异常操作相关的状态
  629. const showAbnormalDialog = ref(false);
  630. const currentAbnormalIndex = ref(-1);
  631. // 添加查看异常相关的状态
  632. const showViewAbnormalDialog = ref(false);
  633. const currentAbnormalData = ref<AbnormalData>({
  634. damage_type:0,
  635. condition: '',
  636. photos: []
  637. });
  638. //审批
  639. function buildSteps(data: any) {
  640. steps.value = [
  641. {
  642. title: '创建申请',
  643. description: `创建时间:${data.create_datetime}`,
  644. status: 'finish'
  645. },
  646. {
  647. title: '待审批',
  648. description: `待审批人:${data.approval_records ?
  649. (() => {
  650. console.log('approval_records:', data.approval_records); // 调试信息
  651. const names = data.approval_records
  652. .map((item:any) => {
  653. console.log('item:', item, 'approver_name:', item.approver_name); // 调试信息
  654. // 支持多种字段名
  655. return item.approver_name || item.app_user_approver_name || item.name;
  656. })
  657. .filter(name => name && name.trim()); // 过滤空值和空字符串
  658. console.log('filtered names:', names); // 调试信息
  659. return names.join('、') || '暂无待审批人员';
  660. })()
  661. : '未知'} 审批`,
  662. status: data.status >= 2 ? 'finish' : 'process'
  663. }
  664. ];
  665. const approverinfo = data.approver_info ?? data.admin_approver_info
  666. if (data.status >= 2&&data.status!=3 && data.borrow_type!=1) {
  667. // 将审批记录倒序排列
  668. const reversedApprovalRecords = [...data.approval_records].reverse();
  669. reversedApprovalRecords.forEach((item:any,index:number) => {
  670. if(item.status === 1){
  671. if(index === 0){
  672. steps.value.push({
  673. title: '审批通过',
  674. description: `审批人:${item.app_user_approver_name},时 间:${item.approve_time},领取仓库:${getWarehouseName(data.warehouse)||'暂无仓库'}`,
  675. status: 'finish'
  676. });
  677. }else{
  678. steps.value.push({
  679. title: '审批通过',
  680. description: `审批人:${item.approver_name},时 间:${item.create_datetime}`,/* ,领取仓库:${getWarehouseName(data.warehouse)||'暂无仓库'} */
  681. status: 'finish'
  682. });
  683. }
  684. }
  685. });
  686. } else if (data.status === 3) {
  687. // console.log("data.approver_name:::",data.approver_info.name)
  688. const rejectNames = data.approval_records
  689. .filter((item:any) => item.status === 2)
  690. .map((item:any) => item.approver_name || item.app_user_approver_name || item.name)
  691. .filter((name:any) => name && name.trim());
  692. const rejectReason = data.approval_records
  693. .filter((item:any) => item.status === 2)
  694. .map((item:any) => item.approve_remark)
  695. .filter((reason:any) => reason && reason.trim());
  696. const rejectTime = data.approval_records
  697. .filter((item:any) => item.status === 2)
  698. .map((item:any) => item.approve_time)
  699. .filter((time:any) => time && time.trim());
  700. steps.value.push({
  701. title: '审批拒绝',
  702. description: `审批人:${rejectNames.join('、')},拒绝原因: ${rejectReason.join('、')},时间:${rejectTime.join('、')}`,
  703. status: 'error'
  704. });
  705. }
  706. if (data.status >= 4 ||data.borrow_type==1) {
  707. steps.value.push({
  708. title: '流程完成',
  709. description: '流程已结束',
  710. status: 'finish'
  711. });
  712. }
  713. }
  714. // 处理异常操作
  715. const handleAbnormal = (index: number) => {
  716. currentAbnormalIndex.value = index;
  717. showAbnormalDialog.value = true;
  718. console.log("showAbnormalDialog:::", showAbnormalDialog.value, "currentAbnormalIndex:::", currentAbnormalIndex.value);
  719. };
  720. // 处理异常操作确认
  721. const onAbnormalConfirm = (data: { condition: string; photos: any[] }) => {
  722. console.log("异常操作确认数据:", data);
  723. if (currentAbnormalIndex.value !== -1) {
  724. const device = returnDeviceList.value[currentAbnormalIndex.value];
  725. device.condition = data.condition;
  726. device.photos = data.photos;
  727. device.damage_type = data.damage_type;
  728. ElMessage.success('异常信息已保存');
  729. }
  730. };
  731. // 处理查看异常
  732. const handleViewAbnormal = (index: number) => {
  733. const device = returnDeviceList.value[index];
  734. console.log("device:::",device);
  735. if (device) {
  736. if(device.problem_records?.length){
  737. currentAbnormalData.value = {
  738. damage_type:device.problem_records?.[0].damage_type ||'',
  739. condition: device.problem_records?.[0].device_condition_after ||'',
  740. photos: device.problem_records?.[0].returned_images.map((item:any)=>item.image_url) ||[]
  741. };
  742. }else{
  743. currentAbnormalData.value = {
  744. damage_type: device.damage_type ||'',
  745. condition: device.condition ||'',
  746. photos: device.photos ||[]
  747. };
  748. }
  749. showViewAbnormalDialog.value = true;
  750. }
  751. };
  752. // 处理扫码搜索
  753. const handleScanSearch = async () => {
  754. if (!searchText.value.trim()) return;
  755. try {
  756. const res = await deviceApi.GetList({
  757. page: 1,
  758. limit: 1,
  759. code: searchText.value.trim(),
  760. status: 1
  761. });
  762. if (res.data && res.data.length > 0) {
  763. const device = res.data[0];
  764. if (device.available_quantity <= 0) {
  765. ElMessage.warning('该设备当前无可用数量');
  766. return;
  767. }
  768. // 检查是否已存在
  769. const existingDevice = deviceList.value.find(d => d.device_no === device.id);
  770. if (existingDevice) {
  771. existingDevice.borrow_count++;
  772. ElMessage.success('设备数量已更新');
  773. } else {
  774. // 添加新设备到列表
  775. deviceList.value.push({
  776. device_no: device.id,
  777. device_code: device.device_no,
  778. device_type: device.category_name,
  779. device_name: device.name || '',
  780. borrow_count: 1,
  781. brand: device.brand || '',
  782. device_specification: device.specification,
  783. model: device.model || '',
  784. warehouse: device.warehouse,
  785. available_quantity:device.available_quantity
  786. });
  787. ElMessage.success('设备已添加到列表');
  788. }
  789. } else {
  790. ElMessage.warning('未找到对应的设备');
  791. }
  792. } catch (error) {
  793. ElMessage.error('搜索设备失败');
  794. } finally {
  795. searchText.value = ''; // 清空搜索框
  796. }
  797. };
  798. // 处理归还扫码搜索
  799. const handleReturnScanSearch = async () => {
  800. if (!returnSearchText.value.trim()) return;
  801. try {
  802. const res = await deviceApi.GetList({
  803. page: 1,
  804. limit: 1,
  805. code: returnSearchText.value.trim(),
  806. status: 1
  807. });
  808. if (res.data && res.data.length > 0) {
  809. const device = res.data[0];
  810. // 检查是否已存在
  811. const existingDeviceIndex = returnDeviceList.value.findIndex(d => d.device_no === device.id);
  812. if (existingDeviceIndex !== -1) {
  813. // 如果设备已存在,更新其状态
  814. returnDeviceList.value[existingDeviceIndex].status = '已归还';
  815. ElMessage.success(`设备 ${device.category_name} 状态已更新为已归还`);
  816. } else {
  817. // 添加新设备到列表
  818. returnDeviceList.value.push({
  819. device_no: device.id,
  820. device_code: device.device_no,
  821. device_type: device.category_name,
  822. device_name: device.name || '',
  823. borrow_count: 1,
  824. brand: device.brand || '',
  825. model: device.model || '',
  826. warehouse: device.warehouse,
  827. return_status:device.return_status,
  828. return_time:device.return_times
  829. });
  830. console.log("returnDeviceList.value:::",returnDeviceList.value);
  831. ElMessage.success('设备已添加到列表');
  832. }
  833. } else {
  834. ElMessage.warning('未找到对应的设备');
  835. }
  836. } catch (error) {
  837. ElMessage.error('搜索设备失败');
  838. } finally {
  839. returnSearchText.value = ''; // 清空搜索框
  840. }
  841. };
  842. // 异常记录列表数据
  843. const abnormalList = ref([
  844. /* {
  845. borrowNo: '202409002',
  846. borrower: '张同学',
  847. time: '2024-09-12 10:21:32',
  848. type: '逾期'
  849. },
  850. {
  851. borrowNo: '202505013',
  852. borrower: '张同学',
  853. time: '2025-05-13 15:12:35',
  854. type: '损坏'
  855. } */
  856. ]);
  857. /* 归还设备异常记录 */
  858. const returnAbnormalList = ref([
  859. ]);
  860. // 附件文件列表
  861. const attachmentFileList = ref<any[]>([]);
  862. // 查看异常记录详情
  863. const handleView = (row: any) => {
  864. console.log('查看异常记录:', row);
  865. // 这里可以添加查看详情的逻辑
  866. };
  867. // 借用列表相关方法
  868. const handleAdd = () => {
  869. showSelectDeviceDialog.value = true;
  870. };
  871. const handleRemove = (index: number) => {
  872. deviceList.value.splice(index, 1);
  873. };
  874. const handleReturnRemove = (index: number) => {
  875. returnDeviceList.value.splice(index, 1);
  876. };
  877. // 处理表格多选变化
  878. const handleSelectionChange = (selection: DeviceListItem[]) => {
  879. selectedDevices.value = selection;
  880. };
  881. // 设备选择处理
  882. function onDeviceSelected(devices: Device[]) {
  883. console.log("devices:::",devices,"activeName:::",activeName.value);
  884. if (activeName.value === 'first') {
  885. form.value.items.push(
  886. ...devices.map((d) => ({
  887. device: d.id,
  888. device_code: d.code,
  889. remark: d.category_name,
  890. quantity: 1,
  891. location: d.warehouse,
  892. device_name: d.name,
  893. device_specification: d.device_specification
  894. }))
  895. );
  896. } else if (activeName.value === 'second') {
  897. deviceList.value.push(
  898. ...devices.map(d => ({
  899. device_no: d.id,
  900. device_code: d.code,
  901. device_type: d.category_name,
  902. device_name: d.name || '',
  903. borrow_count: 1,
  904. brand: d.brand || '',
  905. model: d.model,
  906. device_specification: d.specification,
  907. warehouse: d.warehouse,
  908. available_quantity:d.available_quantity
  909. }))
  910. );
  911. }else if(activeName.value === 'third'){
  912. // 在添加前检查每个设备是否已存在
  913. devices.forEach(d => {
  914. const existingDeviceIndex = returnDeviceList.value.findIndex(item => item.device_no === d.id);
  915. if (existingDeviceIndex !== -1) {
  916. // 如果设备已存在,更新其状态
  917. returnDeviceList.value[existingDeviceIndex].return_status.value = 2;
  918. returnDeviceList.value[existingDeviceIndex].return_status.label = '已归还';
  919. returnDeviceList.value[existingDeviceIndex].is_return = true;
  920. returnDeviceList.value[existingDeviceIndex].return_time = dayjs().format('YYYY-MM-DD HH:mm:ss');
  921. returnDeviceList.value[existingDeviceIndex].brand = d.brand || '';
  922. ElMessage.success(`设备 ${d.category_name} 状态已更新为已归还`);
  923. } else {
  924. // 如果设备不存在,添加新记录
  925. /* returnDeviceList.value.push({
  926. device_no: d.id,
  927. device_type: d.category_name,
  928. device_name: d.name || '',
  929. borrow_count: 1,
  930. brand: d.brand || '',
  931. model: d.model || '',
  932. warehouse: d.warehouse,
  933. status: '已归还'
  934. }); */
  935. /* ElMessage.success(`设备 ${d.category_name} 已添加到归还列表`); */
  936. }
  937. });
  938. }
  939. }
  940. // 移除同步相关的 watch
  941. // const handleClick = (tab: TabsPaneContext, event: Event) => {
  942. // if (tab.props.name === 'second') {
  943. // deviceList.value = form.value.items.map(item => ({
  944. // device_no: item.device,
  945. // device_type: item.remark,
  946. // device_name: '',
  947. // borrow_count: item.quantity,
  948. // brand: '',
  949. // model: '',
  950. // warehouse: item.location
  951. // }));
  952. // }
  953. // }
  954. function handleClick(tab: TabsPaneContext) {
  955. console.log('Tab clicked:', tab.props.name);
  956. }
  957. function handleUploadSuccess(response: any, file: any, fileList: any) {
  958. // eslint-disable-next-line no-console
  959. console.log('上传成功:', file.name);
  960. }
  961. function handleUploadError(err: any, file: any, fileList: any) {
  962. // eslint-disable-next-line no-console
  963. console.error('上传失败:', file.name);
  964. }
  965. // 图片预览处理函数
  966. const handlePictureCardPreview = (uploadFile: any) => {
  967. dialogImageUrl.value = uploadFile.url || uploadFile.response?.url || form.value.attachments;
  968. dialogVisible.value = true;
  969. };
  970. // 处理附件删除
  971. const handleRemoves = (file: any, fileList: any) => {
  972. // 由于是禁用状态,这里只是示例,实际不会执行删除
  973. console.log('删除附件:', file.name);
  974. };
  975. const form = ref<FormData>({
  976. borrower_info:{
  977. user_code:'',
  978. mobile:''
  979. },
  980. application_no: '',
  981. emergency_contact: '',
  982. emergency_phone: '',
  983. app_user_borrower: 1,
  984. team_type: 0,
  985. team_members_count: 1,
  986. team_members: '',
  987. expected_start_time:'',
  988. expected_end_time: '',
  989. borrower_dept: '',
  990. purpose: '',
  991. applicant_remark_type: "1",
  992. applicant_remark: '',
  993. items: [],
  994. accessory_info: '',
  995. borrow_type: 2,
  996. return_location:'',
  997. approver_info: {
  998. name: ''
  999. }
  1000. });
  1001. const showSelectDeviceDialog = ref(false);
  1002. const rules = {
  1003. emergency_contact: [
  1004. { required: true, message: '请输入借用人', trigger: 'change' },
  1005. ],
  1006. app_user_borrower: [
  1007. { required: true, message: '请输入学号或工号', trigger: 'change' },
  1008. ],
  1009. emergency_phone: [
  1010. { required: true, message: '请输入联系电话', trigger: 'change' },
  1011. ],
  1012. /* borrower_dept: [
  1013. { required: true, message: '请输入借用部门', trigger: 'change' },
  1014. ], */
  1015. expected_end_time: [
  1016. { required: true, message: '请输选择归还时间', trigger: 'change' },
  1017. ],
  1018. team_type: [
  1019. { required: true, message: '请选择个人或者团队', trigger: 'change' },
  1020. ],
  1021. purpose: [
  1022. { required: true, message: '请输入借用原因', trigger: 'change' },
  1023. ],
  1024. applicant_remark_type: [
  1025. { required: true, message: '请选择审批人', trigger: 'change' },
  1026. ],
  1027. applicant_remark: [
  1028. { required: false, message: '请输入备注', trigger: 'change' },
  1029. ],
  1030. };
  1031. // 自动填充用户信息
  1032. onMounted(() => {
  1033. loadWarehouses()
  1034. getAdminList()
  1035. getAllUserList()
  1036. try {
  1037. const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
  1038. if (userInfo) {
  1039. form.value.emergency_contact = userInfo.username || '';
  1040. form.value.app_user_borrower = Number(userInfo.dept_info?.dept_id )|| 1;
  1041. form.value.emergency_phone = userInfo.mobile || '';
  1042. form.value.borrower_dept = userInfo.dept_info?.dept_name || '';
  1043. }
  1044. } catch (e) {
  1045. /* empty */
  1046. }
  1047. });
  1048. watch(
  1049. () => props.visible,
  1050. (v) => (visible.value = v)
  1051. );
  1052. watch(() => props.modelValue, async (val) => {
  1053. if (val && val.id) {
  1054. try {
  1055. const res = await api.GetApplicationDetail(val.id);
  1056. console.log("res:::::",res)
  1057. if (res.code === 2000 && res.data) {
  1058. const data = res.data;
  1059. Object.assign(form.value, data);
  1060. buildSteps(data);
  1061. // 领取模式下不回显历史配件内容
  1062. if (isCollect.value) {
  1063. collectAccessories.value = '';
  1064. }
  1065. timeline.value.create = data.create_datetime || '';
  1066. timeline.value.approve = data.approve_time || '';
  1067. const approverinfo = data.approver_info ?? data.admin_approver_info
  1068. timeline.value.approver = approverinfo?.name || '审批人'
  1069. // timeline.value.approver = data.admin_approver_info?.name || '审批人';
  1070. // console.log("data:::",form.value);
  1071. // activeStep.value = 1; // 创建
  1072. // if (data.status >= 1) activeStep.value = 2; // 待审批
  1073. // if (data.status >= 2) activeStep.value = 3; // 审批通过
  1074. // if (data.status >= 3) activeStep.value = 4; // 完成
  1075. // 同步 form.items 到 returnDeviceList
  1076. if (form.value.items && form.value.items.length > 0) {
  1077. returnDeviceList.value = form.value.items
  1078. .filter(item => item.device !== null)
  1079. .map(item => ({
  1080. device_no: item.device,
  1081. device_code: item.device_code,
  1082. device_type: item.remark,
  1083. device_name: item.device_name,
  1084. borrow_count: item.quantity,
  1085. brand: item.brand || '',
  1086. model: item.device_specification,
  1087. warehouse: item.location,
  1088. problem_records: item.problem_records,
  1089. /* status: '未归还' */
  1090. return_status:item.return_status,
  1091. return_time:item.return_times
  1092. }));
  1093. }
  1094. // 同步 form.records 到 returnAbnormalList
  1095. if (form.value.records && form.value.records.length > 0) {
  1096. // 添加损坏类型记录
  1097. const damageRecord: AbnormalRecord = {
  1098. application_no: form.value.application_no,
  1099. operator_name: form.value.app_user_borrower?.name||form.value.external_borrower_name||'',
  1100. user_code: form.value.borrower_info?.user_code || form.value.app_user_borrower?.user_code||'',
  1101. emergency_phone: form.value.external_borrower_phone || form.value.app_user_borrower?.mobile||'',
  1102. type: '损坏',
  1103. condition: form.value.borrower_damage_count || 0,
  1104. create_time: dayjs().format('YYYY-MM-DD HH:mm:ss')
  1105. };
  1106. // 添加逾期类型记录
  1107. const overdueRecord: AbnormalRecord = {
  1108. application_no: form.value.application_no,
  1109. operator_name: form.value.app_user_borrower?.name||form.value.external_borrower_name||'',
  1110. user_code: form.value.borrower_info?.user_code || form.value.app_user_borrower?.user_code||'',
  1111. emergency_phone: form.value.external_borrower_phone || form.value.app_user_borrower?.mobile||'',
  1112. type: '逾期',
  1113. condition: form.value.borrower_overdue_count || 0, // 逾期数量设为1
  1114. create_time: dayjs().format('YYYY-MM-DD HH:mm:ss')
  1115. };
  1116. returnAbnormalList.value = [damageRecord, overdueRecord];
  1117. abnormalList.value = [damageRecord, overdueRecord];
  1118. }
  1119. // 处理附件回显
  1120. if (data.attachments) {
  1121. if (typeof data.attachments === 'string') {
  1122. // 如果attachments是字符串URL
  1123. attachmentFileList.value = [{
  1124. name: data.attachments.split('/').pop() || '附件',
  1125. url: data.attachments,
  1126. status: 'success'
  1127. }];
  1128. } else if (Array.isArray(data.attachments)) {
  1129. // 如果attachments是数组
  1130. attachmentFileList.value = data.attachments.map((item: any, index: number) => {
  1131. if (typeof item === 'string') {
  1132. return {
  1133. name: item.split('/').pop() || `附件${index + 1}`,
  1134. url: item,
  1135. status: 'success'
  1136. };
  1137. } else if (typeof item === 'object' && item.url) {
  1138. return {
  1139. name: item.name || item.url.split('/').pop() || `附件${index + 1}`,
  1140. url: item.url,
  1141. status: 'success'
  1142. };
  1143. }
  1144. return null;
  1145. }).filter(Boolean);
  1146. }
  1147. }
  1148. }
  1149. } catch (e) {
  1150. console.log("审判失败:::",e)
  1151. ElMessage.error('获取审批信息失败');
  1152. }
  1153. }else if(val&& isEdit.value){
  1154. try {
  1155. const res = await api.GetApplicationDetail(val.id);
  1156. if (res.code === 2000 && res.data) {
  1157. const data = res.data;
  1158. Object.assign(form.value, data);
  1159. // 同步 form.items 到 returnDeviceList
  1160. if (form.value.items && form.value.items.length > 0) {
  1161. returnDeviceList.value = form.value.items
  1162. .filter(item => item.device !== null)
  1163. .map(item => ({
  1164. device_no: item.device,
  1165. device_type: item.remark,
  1166. device_name: item.device_name,
  1167. borrow_count: item.quantity,
  1168. brand: item.brand || '',
  1169. model: item.device_specification,
  1170. warehouse: item.location,
  1171. problem_records: item.problem_records,
  1172. return_status:item.return_status,
  1173. return_time:item.return_times
  1174. }));
  1175. }
  1176. // 处理附件回显 (编辑模式)
  1177. if (data.attachments) {
  1178. if (typeof data.attachments === 'string') {
  1179. attachmentFileList.value = [{
  1180. name: data.attachments.split('/').pop() || '附件',
  1181. url: data.attachments,
  1182. status: 'success'
  1183. }];
  1184. } else if (Array.isArray(data.attachments)) {
  1185. attachmentFileList.value = data.attachments.map((item: any, index: number) => {
  1186. if (typeof item === 'string') {
  1187. return {
  1188. name: item.split('/').pop() || `附件${index + 1}`,
  1189. url: item,
  1190. status: 'success'
  1191. };
  1192. } else if (typeof item === 'object' && item.url) {
  1193. return {
  1194. name: item.name || item.url.split('/').pop() || `附件${index + 1}`,
  1195. url: item.url,
  1196. status: 'success'
  1197. };
  1198. }
  1199. return null;
  1200. }).filter(Boolean);
  1201. }
  1202. }
  1203. }
  1204. } catch (e) {
  1205. ElMessage.error('获取审批信息失败');
  1206. }
  1207. }
  1208. }, { immediate: true });
  1209. // watch(
  1210. // () => props.modelValue,
  1211. // (v) => {
  1212. // if (v) {
  1213. // // eslint-disable-next-line no-console
  1214. // console.log("val:::::",v);
  1215. // Object.assign(form.value, v);
  1216. // }
  1217. // }, { immediate: true }
  1218. // );
  1219. // 监听借用人选择变化
  1220. watch(() => form.value.app_user_borrower, (newValue) => {
  1221. if (newValue && allUserList.value.length > 0) {
  1222. const selectedUser = allUserList.value.find(user => user.id === newValue);
  1223. if (selectedUser) {
  1224. form.value.user_code = selectedUser.user_code || '';
  1225. form.value.mobile = selectedUser.mobile || '';
  1226. }
  1227. }
  1228. });
  1229. function addItem() {
  1230. showSelectDeviceDialog.value = true;
  1231. }
  1232. function removeItem(index: number) {
  1233. form.value.items.splice(index, 1);
  1234. }
  1235. function onCancel() {
  1236. // 重置标签页到第一个
  1237. activeName.value = 'first';
  1238. // 清理异常记录列表
  1239. returnAbnormalList.value = [];
  1240. abnormalList.value = [];
  1241. // 清理设备列表
  1242. deviceList.value = [];
  1243. returnDeviceList.value = [];
  1244. // 清理搜索框
  1245. searchText.value = '';
  1246. returnSearchText.value = '';
  1247. // 清理备注
  1248. remark.value = '';
  1249. // 清理领取模式配件信息
  1250. collectAccessories.value = '';
  1251. returnRemark.value = '';
  1252. // 重置状态
  1253. returnStatus.value = '未归还';
  1254. // 清理选中的设备
  1255. selectedDevices.value = [];
  1256. // 清理附件文件列表
  1257. attachmentFileList.value = [];
  1258. // 关闭所有对话框
  1259. showSelectDeviceDialog.value = false;
  1260. showSettlementDialog.value = false;
  1261. showAbnormalDialog.value = false;
  1262. showViewAbnormalDialog.value = false;
  1263. // 重置当前异常数据
  1264. currentAbnormalData.value = {
  1265. damage_type: 0,
  1266. condition: '',
  1267. photos: []
  1268. };
  1269. // 发出关闭事件
  1270. emit('update:visible', false);
  1271. }
  1272. // 提交时合并数据
  1273. function onSubmit() {
  1274. if(isCollect.value){
  1275. // 验证是否有设备信息
  1276. const hasDevicesInFirstTab = form.value.items && form.value.items.length > 0;
  1277. const hasDevicesInSecondTab = deviceList.value && deviceList.value.length > 0;
  1278. if (!hasDevicesInFirstTab && !hasDevicesInSecondTab) {
  1279. ElMessage.warning('请添加设备信息后再提交');
  1280. activeName.value = 'second'; // 自动切换到借用列表标签页
  1281. return;
  1282. }
  1283. // 验证设备数量
  1284. const hasInvalidQuantityInFirstTab = form.value.items.some(item => !item.quantity || item.quantity <= 0);
  1285. const hasInvalidQuantityInSecondTab = deviceList.value.some(item => !item.borrow_count || item.borrow_count <= 0);
  1286. if (hasInvalidQuantityInFirstTab || hasInvalidQuantityInSecondTab) {
  1287. ElMessage.warning('请确保所有设备的数量大于0');
  1288. activeName.value = 'second'; // 自动切换到借用列表标签页
  1289. return;
  1290. }
  1291. // 合并两个标签页的设备数据
  1292. const allDevices = [
  1293. ...deviceList.value.map(item => ({
  1294. condition: remark.value,
  1295. quantity: item.borrow_count,
  1296. device_id: Number(item.device_no) || 0
  1297. }))
  1298. ];
  1299. const submitData = {
  1300. id:form.value.id,
  1301. item_id:form.value.id,
  1302. device_assignments: allDevices,
  1303. remark:remark.value,
  1304. accessories: collectAccessories.value,
  1305. };
  1306. CollectEquipment(submitData).then((res: ApiResponse) => {
  1307. if(res.code===2000){
  1308. ElMessage.success("领取成功");
  1309. // 准备结算单数据
  1310. settlementData.value = {
  1311. ...form.value,
  1312. items: deviceList.value.map(item => ({
  1313. ...item,
  1314. device_category_name: item.device_type,
  1315. device_name: item.device_name,
  1316. device_specification: item.device_specification,
  1317. device_storage_location: item.warehouse,
  1318. remark: item.device_type,
  1319. quantity: item.borrow_count,
  1320. device_id: item.device_no,
  1321. device_category: item.device_type,
  1322. device_code: item.device_no,
  1323. borrow_type: form.value.borrow_type,
  1324. borrower_dept: form.value.borrower_dept,
  1325. emergency_contact: form.value.emergency_contact,
  1326. emergency_phone: form.value.emergency_phone,
  1327. team_type: form.value.team_type,
  1328. })),
  1329. accessory_info: accessoryInfo.value,
  1330. remark: remark.value,
  1331. expected_start_time: dayjs().format('YYYY-MM-DD HH:mm:ss')
  1332. };
  1333. // 先触发提交事件进行页面刷新
  1334. emit('submit');
  1335. // 关闭当前对话框
  1336. emit('update:visible', false);
  1337. // 使用 nextTick 确保在 DOM 更新后再显示结算单
  1338. nextTick(() => {
  1339. borrowForm.value = {...settlementData.value,mode: 'settlement' };
  1340. showSettlementDialog.value = true;
  1341. });
  1342. }
  1343. });
  1344. } else {
  1345. // 归还逻辑修改
  1346. // 使用所有设备列表而不是选中的设备
  1347. const allDevices = returnDeviceList.value
  1348. .filter(item => item.is_return === true) // 只选择 return_status 为 2 的设备
  1349. .map(item => ({
  1350. device: item.device_no,
  1351. quantity: item.borrow_count,
  1352. remark: returnRemark.value,
  1353. device_id: Number(item.device_no) || 0,
  1354. // 添加异常相关字段
  1355. condition: item.condition, // 异常说明
  1356. damage_type:item.damage_type,
  1357. photo_urls: item.photos || [], // 异常照片
  1358. }));
  1359. const submitData = {
  1360. id: form.value.id,
  1361. items: allDevices,
  1362. status: returnStatus.value,
  1363. accessories: form.value.accessories,
  1364. };
  1365. ReturnEquipment(submitData).then(async (res: ApiResponse) => {
  1366. if(res.code===2000){
  1367. ElMessage.success("归还成功");
  1368. try {
  1369. if (form.value.id) {
  1370. const detailRes = await api.GetApplicationDetail(form.value.id);
  1371. if (detailRes.code === 2000 && detailRes.data) {
  1372. returnStatus.value = detailRes.data.status_label || returnStatus.value;
  1373. }
  1374. }
  1375. } catch (e) {
  1376. ElMessage.error('获取最新状态失败');
  1377. }
  1378. emit('submit');
  1379. emit('update:visible', false);
  1380. }
  1381. });
  1382. }
  1383. }
  1384. function clickReturn(){
  1385. returnStatus.value = '已归还';
  1386. // 自动选择所有设备
  1387. const tableRef = document.querySelector('.el-table__header-wrapper th.el-table__cell.is-leaf .el-checkbox');
  1388. if (tableRef) {
  1389. (tableRef as HTMLElement).click();
  1390. }
  1391. }
  1392. /* formRef.value.validate((valid: boolean) => {
  1393. if (valid) {
  1394. form.value.items = form.value.items.map(item => ({
  1395. ...item,
  1396. quantity: Number(item.quantity) || 0
  1397. }));
  1398. const firstLocation = form.value.items[0]?.location || '';
  1399. form.value.return_location = firstLocation;
  1400. form.value.expected_start_time = now;
  1401. form.value.expected_end_time = dayjs(form.value.expected_end_time).format('YYYY-MM-DD HH:mm:ss')|| now;
  1402. form.team_members_count=Number(form.team_members_count)||1;
  1403. emit('submit', { ...form.value });
  1404. emit('update:visible', false);
  1405. ElMessage.success("添加成功!");
  1406. }
  1407. }); */
  1408. </script>
  1409. <style>
  1410. .avatar-uploader .el-upload {
  1411. border: 1px dashed #d9d9d9;
  1412. border-radius: 6px;
  1413. cursor: pointer;
  1414. position: relative;
  1415. overflow: hidden;
  1416. }
  1417. .avatar-uploader .el-upload:hover {
  1418. border-color: #409EFF;
  1419. }
  1420. .avatar-uploader-icon {
  1421. font-size: 28px;
  1422. color: #8c939d;
  1423. width: 178px;
  1424. height: 178px;
  1425. line-height: 178px;
  1426. text-align: center;
  1427. }
  1428. .avatar {
  1429. width: 178px;
  1430. height: 178px;
  1431. display: block;
  1432. }
  1433. </style>