FileDetails.vue 36 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093
  1. <template>
  2. <view>
  3. <view class="filedetails">
  4. <view class="cardBox" @click="selectCustomer"
  5. style="margin-bottom: 0; border-bottom: 4rpx solid #f5f5f5; border-radius: 12rpx 12rpx 0 0;">
  6. <!-- @click="pickerShowfun('KH')" -->
  7. <view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
  8. <view style="display: flex;align-items: center;">
  9. <view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
  10. <u-icon name="account" color="#FD4B09" size="18"></u-icon>
  11. <text style="font-size: 30rpx; margin-left: 10rpx;">客户</text>
  12. </view>
  13. <u--input inputAlign="right" disabled disabledColor="#fff" placeholder="客户" border="none"
  14. v-model="form.corpName">
  15. </u--input>
  16. </view>
  17. </view>
  18. <view class="filedetails_right">
  19. <u-icon name="arrow-right" color="#101010" size="22"></u-icon>
  20. </view>
  21. </view>
  22. <view class="cardBox" style="margin-bottom: 0; border-bottom: 4rpx solid #f5f5f5; border-radius: 0;">
  23. <!-- <view class="filedetails_left">
  24. <view>
  25. <u--input prefixIcon="account"
  26. prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;"
  27. placeholder="联系人" border="none"
  28. v-model="form.contacts">
  29. </u--input>
  30. </view>
  31. </view>
  32. -->
  33. <view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
  34. <view style="display: flex;align-items: center;">
  35. <view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
  36. <u-icon name="account" color="#FD4B09" size="18"></u-icon>
  37. <text style="font-size: 30rpx; margin-left: 10rpx;">联系人</text>
  38. </view>
  39. <u--input inputAlign="right" prefixIconStyle="fontSize:50rpx;"
  40. placeholderStyle="fontSize:34rpx;" placeholder="联系人" border="none" v-model="form.contacts">
  41. </u--input>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="cardBox" style="margin-bottom: 0; border-bottom: 4rpx solid #f5f5f5; border-radius: 0;">
  46. <!-- <view class="filedetails_left">
  47. <view>
  48. <u--input prefixIcon="phone"
  49. prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;"
  50. placeholder="电话" border="none"
  51. v-model="form.contactsTel">
  52. </u--input>
  53. </view>
  54. </view> -->
  55. <view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
  56. <view style="display: flex;align-items: center;">
  57. <view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
  58. <u-icon name="account" color="#FD4B09" size="18"></u-icon>
  59. <text style="font-size: 30rpx; margin-left: 10rpx;">电话</text>
  60. </view>
  61. <u--input inputAlign="right" prefixIconStyle="fontSize:50rpx;"
  62. placeholderStyle="fontSize:34rpx;" placeholder="电话" border="none"
  63. v-model="form.contactsTel">
  64. </u--input>
  65. </view>
  66. </view>
  67. </view>
  68. <view class="cardBox" style="margin-bottom: 0; border-bottom: 4rpx solid #f5f5f5; border-radius: 0;">
  69. <!-- <view class="filedetails_left">
  70. <view>
  71. <u--input prefixIcon="home"
  72. prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;"
  73. placeholder="地址" border="none"
  74. v-model="form.address">
  75. </u--input>
  76. </view>
  77. </view> -->
  78. <view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
  79. <view style="display: flex;align-items: center;">
  80. <view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
  81. <u-icon name="account" color="#FD4B09" size="18"></u-icon>
  82. <text style="font-size: 30rpx; margin-left: 10rpx;">地址</text>
  83. </view>
  84. <u--input inputAlign="right" prefixIconStyle="fontSize:50rpx;"
  85. placeholderStyle="fontSize:34rpx;" placeholder="地址" border="none" v-model="form.address">
  86. </u--input>
  87. </view>
  88. </view>
  89. </view>
  90. <view class="cardBox" @click="calendarShowfun(1,1)"
  91. style="margin-bottom: 0; border-bottom: 4rpx solid #f5f5f5; border-radius: 0;">
  92. <!-- <view class="filedetails_left">
  93. <view>
  94. <u--input prefixIcon="calendar"
  95. prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;"
  96. disabled disabledColor="#fff" placeholder="请选择合同起" border="none"
  97. v-model="form.signingDateStart">
  98. </u--input>
  99. </view>
  100. </view>
  101. <view class="filedetails_right" @click="calendarShowfun(1,1)">
  102. <u-icon name="arrow-right" color="#101010" size="22"></u-icon>
  103. </view> -->
  104. <view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
  105. <view style="display: flex;align-items: center;">
  106. <view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
  107. <u-icon name="calendar" color="#FD4B09" size="18"></u-icon>
  108. <text style="font-size: 30rpx; margin-left: 10rpx;">合同日期起</text>
  109. </view>
  110. <!-- <u--input inputAlign="right" disabled disabledColor="#fff" placeholder="合同日期起" border="none"
  111. v-model="form.signingDateStart">
  112. </u--input> -->
  113. <uni-datetime-picker type="date" placeholder="合同日期起" @change="calendarConfirm" v-model="form.signingDateStart" :border="false"/>
  114. </view>
  115. </view>
  116. <!-- <view class="filedetails_right">
  117. <u-icon name="arrow-right" color="#101010" size="22"></u-icon>
  118. </view> -->
  119. </view>
  120. <view class="cardBox" style="border-bottom: 4rpx solid #f5f5f5; border-radius: 0 0 12rpx 12rpx;">
  121. <!-- <view class="filedetails_left">
  122. <view>
  123. <u--input prefixIcon="calendar"
  124. prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;"
  125. disabled disabledColor="#fff" placeholder="请选择合同止" border="none"
  126. v-model="form.signingDateEnd">
  127. </u--input>
  128. </view>
  129. </view>
  130. <view class="filedetails_right" @click="calendarShowfun(1,2)">
  131. <u-icon name="arrow-right" color="#101010" size="22"></u-icon>
  132. </view> -->
  133. <view class="filedetails_left" style="width: 100%; margin-right: 20rpx;"
  134. @click="calendarShowfun(1,2)">
  135. <view style="display: flex;align-items: center;">
  136. <view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
  137. <u-icon name="calendar" color="#FD4B09" size="18"></u-icon>
  138. <text style="font-size: 30rpx; margin-left: 10rpx;">合同日期止</text>
  139. </view>
  140. <!-- <u--input inputAlign="right" disabled disabledColor="#fff" placeholder="合同日期止" border="none"
  141. v-model="form.signingDateEnd">
  142. </u--input> -->
  143. <uni-datetime-picker type="date" placeholder="合同日期止" @change="calendarConfirm" v-model="form.signingDateEnd" :border="false"/>
  144. </view>
  145. </view>
  146. <!-- <view class="filedetails_right">
  147. <u-icon name="arrow-right" color="#101010" size="22"></u-icon>
  148. </view> -->
  149. </view>
  150. <view class="cardBox">
  151. <u-upload :fileList="form.filesList" @afterRead="afterRead($event,1)" @delete="deletePic($event,1)"
  152. name="1" multiple :maxCount="10"></u-upload>
  153. </view>
  154. <view class="cardBox" style="display: flex;align-items: center;">
  155. <!-- <view class="filedetails_left">
  156. <view>
  157. <u--input prefixIcon="file-text"
  158. prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;"
  159. disabled disabledColor="#fff" :placeholder="`设备列表(${form.corpEquipmentArchivesItemList.length})`" border="none">
  160. </u--input>
  161. </view>
  162. </view>
  163. <view class="filedetails_right" @click="EquipmentAddition">
  164. <u-icon name="list-dot" color="#101010" size="22"></u-icon>
  165. </view> -->
  166. <view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
  167. <view style="display: flex;align-items: center;">
  168. <view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
  169. <u-icon name="list-dot" color="#FD4B09" size="18"></u-icon>
  170. <text
  171. style="font-size: 30rpx; margin-left: 10rpx;">设备列表({{form.corpEquipmentArchivesItemList.length}})</text>
  172. </view>
  173. <!-- <u--input
  174. inputAlign="right"
  175. disabled disabledColor="#fff" :placeholder="`设备列表(${form.corpEquipmentArchivesItemList.length})`" border="none">
  176. </u--input> -->
  177. </view>
  178. </view>
  179. <!-- <view class="filedetails_right" @click="EquipmentAddConfirm = true"> -->
  180. <!-- <u-icon name="file-text" color="#101010" size="22"></u-icon> -->
  181. <!-- <view style="font-size: 30rpx;
  182. width: 150rpx;
  183. height: 44rpx;
  184. background-color: #FD4B09;
  185. border-radius:44rpx;
  186. color: #fff;
  187. padding: 10rpx" @click="pickerShowfun('CP',null)">+添加设备</view> -->
  188. <!-- EquipmentAddConfirm = true -->
  189. <!-- </view> -->
  190. </view>
  191. <view class="cardBox" v-for="(item,index) in form.corpEquipmentArchivesItemList" :key="item.id"
  192. v-if="form.corpEquipmentArchivesItemList.length">
  193. <view class="listbox">
  194. <view class="listbox_title">
  195. <view class="listbox_titleXh">
  196. 设备{{index+1}}
  197. </view>
  198. <view class="listbox_titleDe" @click="DeleteWindow(item,index)">删除</view>
  199. </view>
  200. <view class="inputbox" @click="pickerShowfun('CP',index)">
  201. <!-- <view class="shebetext">设备名称:</view> -->
  202. <u--input prefixIconStyle="fontSize:60rpx;" placeholderStyle="fontSize:30rpx;" disabled
  203. disabledColor="#fff" placeholder="请选择设备名称" border="bottom" v-model="item.cname">
  204. <!-- <template slot="suffix">
  205. <u-icon @click="pickerShowfun('CP',index)" name="arrow-right" color="#101010" size="20"></u-icon>
  206. </template> -->
  207. </u--input>
  208. </view>
  209. <view class="inputbox">
  210. <!-- <view class="shebetext">设备编号:</view> -->
  211. <u--input prefixIconStyle="fontSize:60rpx;" placeholderStyle="fontSize:30rpx;"
  212. disabledColor="#fff" placeholder="请输入设备编号" border="bottom" v-model="item.code">
  213. </u--input>
  214. </view>
  215. <view class="inputbox">
  216. <!-- <view class="shebetext">设备描述:</view> -->
  217. <u--textarea v-model="item.equipmentDescribe" placeholderStyle="fontSize:30rpx;"
  218. placeholder="请输入设备描述">
  219. </u--textarea>
  220. </view>
  221. <view class="inputbox" @click="calendarShowfun(2,1,index)">
  222. <!-- <view class="shebetext">出厂日期:</view> -->
  223. <!-- <u--input prefixIconStyle="fontSize:60rpx;" placeholderStyle="fontSize:30rpx;" disabled
  224. disabledColor="#fff" placeholder="请选择出厂日期" border="bottom" v-model="item.exitDate"> -->
  225. <!-- <template slot="suffix">
  226. <u-icon @click="calendarShowfun(2,1,index)" name="arrow-right" color="#101010" size="20"></u-icon>
  227. </template> -->
  228. <!-- </u--input> -->
  229. <uni-datetime-picker type="date" placeholder="请选择出厂日期" @change="calendarConfirm" v-model="item.exitDate" :border="false"/>
  230. </view>
  231. <view class="inputbox" @click="calendarShowfun(2,2,index)">
  232. <!-- <view class="shebetext">保养日期:</view> -->
  233. <!-- <u--input prefixIconStyle="fontSize:60rpx;" placeholderStyle="fontSize:30rpx;" disabled
  234. disabledColor="#fff" placeholder="请选择保养日期" border="bottom" v-model="item.maintenanceDate"> -->
  235. <!-- <template slot="suffix">
  236. <u-icon @click="calendarShowfun(2,2,index)" name="arrow-right" color="#101010" size="20"></u-icon>
  237. </template> -->
  238. <!-- </u--input> -->
  239. <uni-datetime-picker type="date" placeholder="请选择保养日期" @change="calendarConfirm" v-model="item.maintenanceDate" :border="false"/>
  240. </view>
  241. <!-- <view class="inputbox">
  242. <view class="shebetext">维修次数:</view>
  243. <u--input
  244. prefixIconStyle="fontSize:60rpx;color:#215476"
  245. placeholderStyle="fontSize:30rpx;"
  246. disabled disabledColor="#fff" placeholder="请选择维修次数" border="bottom"
  247. v-model="item.maintenanceSecond">
  248. </u--input>
  249. </view>
  250. <view class="inputbox">
  251. <view class="shebetext">工厂:</view>
  252. <u--input
  253. prefixIconStyle="fontSize:60rpx;color:#215476"
  254. placeholderStyle="fontSize:30rpx;"
  255. disabled disabledColor="#fff" placeholder="请选择工厂" border="bottom"
  256. v-model="item.factoryName">
  257. </u--input>
  258. </view>
  259. <view class="inputbox">
  260. <view class="shebetext">功能分类:</view>
  261. <u--input
  262. prefixIconStyle="fontSize:60rpx;color:#215476"
  263. placeholderStyle="fontSize:30rpx;"
  264. disabled disabledColor="#fff" placeholder="请选择功能分类" border="bottom"
  265. v-model="item.categoryitem">
  266. </u--input>
  267. </view>
  268. <view class="inputbox">
  269. <view class="shebetext">设备分类:</view>
  270. <u--input
  271. prefixIconStyle="fontSize:60rpx;color:#215476"
  272. placeholderStyle="fontSize:30rpx;"
  273. disabled disabledColor="#fff" placeholder="请输入设备分类" border="bottom"
  274. v-model="item.category">
  275. </u--input>
  276. </view>
  277. <view class="inputbox">
  278. <view class="shebetext">规格:</view>
  279. <u--input
  280. prefixIconStyle="fontSize:60rpx;color:#215476"
  281. placeholderStyle="fontSize:30rpx;"
  282. disabled disabledColor="#fff" placeholder="请输入规格" border="bottom"
  283. v-model="item.specs">
  284. </u--input>
  285. </view> -->
  286. <view class="inputbox" style="margin-top: 20rpx;">
  287. <!-- <view class="shebetext">图片:</view> -->
  288. <u-upload :fileList="item.filesList" @afterRead="afterRead($event,2,index)"
  289. @delete="deletePic($event,2,index)" name="1" multiple :maxCount="10"></u-upload>
  290. </view>
  291. <!-- <view class="binahao">设备编号:{{item.code}}</view>
  292. <view class="bottombox">
  293. <view class="bottombox_img">
  294. <image :src="item.url" mode="widthFix"></image>
  295. </view>
  296. <view class="bottombox_text">
  297. <view class="bottombox_textleft">
  298. <view class="bottombox_textTitle">{{item.cname}}</view>
  299. <view>出厂日期:{{item.exitDate?item.exitDate.slice(0,10):''}}</view>
  300. <view>报修日期:{{item.repairReportDate?item.repairReportDate.slice(0,10):''}}</view>
  301. </view>
  302. <view class="bottombox_textRight">
  303. <u-icon name="arrow-right" color="#101010" size="20"></u-icon>
  304. </view>
  305. </view>
  306. </view> -->
  307. </view>
  308. </view>
  309. <view class="cardBox" style="display: flex;align-items: center;">
  310. <!-- <view class="filedetails_left">
  311. <view>
  312. <u--input prefixIcon="file-text"
  313. prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;"
  314. disabled disabledColor="#fff" :placeholder="`设备列表(${form.corpEquipmentArchivesItemList.length})`" border="none">
  315. </u--input>
  316. </view>
  317. </view>
  318. <view class="filedetails_right" @click="EquipmentAddition">
  319. <u-icon name="list-dot" color="#101010" size="22"></u-icon>
  320. </view> -->
  321. <view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
  322. <view style="display: flex;align-items: center;">
  323. <view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
  324. <u-icon name="list-dot" color="#FD4B09" size="18"></u-icon>
  325. <text
  326. style="font-size: 30rpx; margin-left: 10rpx;">设备</text>
  327. </view>
  328. <!-- <u--input
  329. inputAlign="right"
  330. disabled disabledColor="#fff" :placeholder="`设备列表(${form.corpEquipmentArchivesItemList.length})`" border="none">
  331. </u--input> -->
  332. </view>
  333. </view>
  334. <view class="filedetails_right" @click="EquipmentAddConfirm = true">
  335. <!-- <u-icon name="file-text" color="#101010" size="22"></u-icon> -->
  336. <view style="font-size: 30rpx;
  337. width: 150rpx;
  338. background-color: #FD4B09;
  339. border-radius:44rpx;
  340. color: #fff;
  341. padding: 10rpx" @click="pickerShowfun('CP',null)">+添加设备</view>
  342. <!-- EquipmentAddConfirm = true -->
  343. </view>
  344. </view>
  345. </view>
  346. <view style="height: 100rpx;"></view>
  347. <view class="bottomButton">
  348. <view class="savebutton" @click="savefun">保存档案</view>
  349. </view>
  350. <u-picker :show="pickerShow" :columns="pickerColumns" keyName="cname" @confirm="pickerConfirm"
  351. @cancel="pickerCancel"></u-picker>
  352. <!-- 日期 -->
  353. <!-- <u-calendar :show="calendarShow" @confirm="calendarConfirm" @close="calendarClose"></u-calendar> -->
  354. <!-- 提示 -->
  355. <u-toast ref="uToast"></u-toast>
  356. <!-- 添加设备弹框 -->
  357. <!-- <u-modal :show="EquipmentAddConfirm" title="提示" showCancelButton @confirm="EquipmentAddition"
  358. @cancel="EquipmentAddConfirm = false">
  359. <view class="slot-content">
  360. <view class="inputbox" @click="pickerShowfun('CP',index)">
  361. <u--input
  362. prefixIconStyle="fontSize:60rpx;"
  363. placeholderStyle="fontSize:30rpx;"
  364. disabled disabledColor="#fff" placeholder="请选择设备名称" border="bottom"
  365. v-model="machine.cname" >
  366. </u--input>
  367. </view>
  368. <view class="inputbox">
  369. <u--input
  370. prefixIconStyle="fontSize:60rpx;"
  371. placeholderStyle="fontSize:30rpx;"
  372. disabledColor="#fff" placeholder="请输入设备编号" border="bottom"
  373. v-model="machine.code">
  374. </u--input>
  375. </view>
  376. <view class="inputbox">
  377. <u--textarea v-model="machine.equipmentDescribe"
  378. placeholderStyle="fontSize:30rpx;" placeholder="请输入设备描述" >
  379. </u--textarea>
  380. </view>
  381. <view class="inputbox" @click="calendarShowfun(machine.exitDate,2,1,index)">
  382. <u--input
  383. prefixIconStyle="fontSize:60rpx;"
  384. placeholderStyle="fontSize:30rpx;"
  385. disabled disabledColor="#fff" placeholder="请选择出厂日期" border="bottom"
  386. v-model="machine.exitDate">
  387. </u--input>
  388. </view>
  389. <view class="inputbox" @click="calendarShowfun(machine.maintenanceDate,2,2,index)">
  390. <u--input
  391. prefixIconStyle="fontSize:60rpx;"
  392. placeholderStyle="fontSize:30rpx;"
  393. disabled disabledColor="#fff" placeholder="请选择保养日期" border="bottom"
  394. v-model="machine.maintenanceDate">
  395. </u--input>
  396. </view>
  397. <view class="inputbox" style="margin-top: 20rpx;">
  398. <view class="shebetext">图片:</view>
  399. <u-upload
  400. :fileList="machine.filesList"
  401. @afterRead="afterRead($event,2,index)"
  402. @delete="deletePic($event,2,index)"
  403. name="1"
  404. multiple
  405. :maxCount="10"
  406. ></u-upload>
  407. </view>
  408. </view>
  409. </u-modal> -->
  410. <!-- 删除弹框 -->
  411. <u-modal :show="EquipmentDeleteConfirm" title="提示" showCancelButton @confirm="DeleteDevicefun"
  412. @cancel="EquipmentDeleteConfirm = false">
  413. <view class="slot-content">
  414. <rich-text nodes="确定要删除该设备吗?"></rich-text>
  415. </view>
  416. </u-modal>
  417. <!-- <u-datetime-picker :show="calendarShow" @confirm="calendarConfirm" @close="calendarShow = false" v-model="optionDate"
  418. mode="date"></u-datetime-picker> -->
  419. <!-- <u-calendar :show="calendarShow" @confirm="calendarConfirm" @close="calendarClose"></u-calendar> -->
  420. <u-loading-page style="z-index: 999;" bgColor="rgba(0,0,0,.5)" :loading="loading"></u-loading-page>
  421. </view>
  422. </template>
  423. <script>
  424. import {
  425. corpequipmentarchivesDetail,
  426. corpequipmentarchivesSubmit,
  427. goodsdescDescList,
  428. corpequipmentarchivesitemRemove
  429. } from '@/api/device/index.js'
  430. import {
  431. corpsDescList
  432. } from '@/api/views/sale/index.js'
  433. import {
  434. queryDetail
  435. } from '@/api/views/customer/index.js'
  436. import http from '@/http/api.js'
  437. import {
  438. clientId,
  439. clientSecret
  440. } from '@/common/setting'
  441. export default {
  442. data() {
  443. return {
  444. loading:false,
  445. // 弹框
  446. // 设备添加
  447. EquipmentAddConfirm: false,
  448. // 设备删除
  449. EquipmentDeleteConfirm: false,
  450. EquipmentDeleteRow: {},
  451. EquipmentDeleteIndex: -1,
  452. // 传递过来的id
  453. id: null,
  454. // 绑定的数据
  455. form: {
  456. corpEquipmentArchivesItemList: [],
  457. filesList: []
  458. },
  459. // 弹窗的开启和管理
  460. pickerShow: false,
  461. // 弹窗的数据配置 数组嵌套
  462. pickerColumns: [],
  463. // 日期弹窗
  464. calendarShow: false,
  465. // 当前打开弹窗的状态
  466. calendarType: {
  467. type: null,
  468. sort: null,
  469. index: null
  470. },
  471. // 当前打开的弹窗的状态
  472. pickerType: {},
  473. // 设备弹窗
  474. machine: {},
  475. optionDate: 0
  476. }
  477. },
  478. onLoad(e) {
  479. this.id = e.id
  480. if (e.id) {
  481. this.corpequipmentarchivesDetailfun()
  482. }
  483. },
  484. onShow() {
  485. },
  486. methods: {
  487. disabledDate(time) {
  488. return time.getTime() > Date.now() - 8.64e7
  489. },
  490. // 保存新增
  491. savefun() {
  492. if (!this.form.corpName) {
  493. return this.$refs.uToast.show({
  494. type: 'warning',
  495. message: '客户名称不能为空',
  496. })
  497. }
  498. if (!this.form.contacts) {
  499. return this.$refs.uToast.show({
  500. type: 'warning',
  501. message: '联系人不能为空',
  502. })
  503. }
  504. if (!this.form.contactsTel) {
  505. return this.$refs.uToast.show({
  506. type: 'warning',
  507. message: '电话不能为空',
  508. })
  509. }
  510. if (!this.form.address) {
  511. return this.$refs.uToast.show({
  512. type: 'warning',
  513. message: '地址不能为空',
  514. })
  515. }
  516. // if (!this.form.corpEquipmentArchivesItemList.length > 0){
  517. // return this.$refs.uToast.show({
  518. // type: 'warning',
  519. // message: '请添加一条设备',
  520. // })
  521. // }
  522. this.form.corpEquipmentArchivesItemList.map(item => {
  523. if (!item.cname) {
  524. if (!item.equipmentDescribe) {
  525. return this.$refs.uToast.show({
  526. type: 'warning',
  527. message: '请维护设备描述',
  528. })
  529. }
  530. return
  531. }
  532. item.id = item.id ? item.id : null
  533. item.exitDate = item.exitDate ? item.exitDate + ' 00:00:00' : null
  534. item.repairReportDate = item.repairReportDate ? item.repairReportDate + ' 00:00:00' : null
  535. item.maintenanceDate = item.maintenanceDate ? item.maintenanceDate + ' 00:00:00' : null
  536. })
  537. const obj = {
  538. ...this.form,
  539. id: this.form.id ? this.form.id : null,
  540. sysNo: this.form.sysNo ? this.form.sysNo : null,
  541. equipmentNumber: this.form.corpEquipmentArchivesItemList.length,
  542. maintenanceSecond: this.form.maintenanceSecond ? this.form.maintenanceSecond : null,
  543. signingDateStart: this.form.signingDateStart ? this.form.signingDateStart + ' 00:00:00' : null,
  544. signingDateEnd: this.form.signingDateEnd ? this.form.signingDateEnd + ' 00:00:00' : null,
  545. remarks: this.form.remarks ? this.form.remarks : null
  546. }
  547. this.loading = true
  548. this.corpequipmentarchivesSubmitfun(obj)
  549. },
  550. // 保存数据接口
  551. corpequipmentarchivesSubmitfun(obj) {
  552. corpequipmentarchivesSubmit(obj).then(res => {
  553. if (res.code == 200) {
  554. this.$refs.uToast.show({
  555. type: 'success',
  556. message: '操作成功',
  557. })
  558. this.loading = false
  559. this.form = res.data
  560. this.form.corpEquipmentArchivesItemList.map(item=>{
  561. item.exitDate = item.exitDate ? item.exitDate.slice(0,10) : null
  562. item.repairReportDate = item.repairReportDate ? item.repairReportDate.slice(0,10) : null
  563. item.maintenanceDate = item.maintenanceDate ? item.maintenanceDate.slice(0,10) : null
  564. })
  565. } else {
  566. this.$refs.uToast.show({
  567. type: 'error',
  568. message: res.msg,
  569. })
  570. }
  571. })
  572. },
  573. // 跳转选择用户
  574. selectCustomer() {
  575. this.$u.route('/pages/views/salesSlip/selectCustomer', {
  576. corpType: 'KH'
  577. });
  578. },
  579. // 选中用户赋值
  580. otherFun(user) {
  581. console.log(user);
  582. queryDetail({
  583. id: user.id
  584. }).then(res => {
  585. this.$set(this.form, 'address', res.data.corpsAddrList[0].detailedAddress)
  586. this.form.corpId = user.id
  587. this.form.corpName = res.data.cname
  588. this.form.contacts = res.data.attn
  589. this.form.contactsTel = res.data.tel
  590. })
  591. },
  592. // 设备新增
  593. EquipmentAddition() {
  594. this.form.corpEquipmentArchivesItemList.push({
  595. cname: '',
  596. cname: '',
  597. code: '',
  598. brand: '',
  599. specs: '',
  600. category: '',
  601. categoryitem: '',
  602. url: '',
  603. goodsTypeId: '',
  604. exitDate: '',
  605. repairReportDate: '',
  606. brandId: '',
  607. maintenanceDate: '',
  608. factoryId: '',
  609. factoryName: '',
  610. equipmentDescribe: '',
  611. maintenanceSecond: '',
  612. filesList: [],
  613. })
  614. this.EquipmentAddConfirm = false
  615. },
  616. // 弹窗的开启
  617. pickerShowfun(type, index) {
  618. this.pickerColumns = []
  619. if (type == 'KH') {
  620. this.pickerType.type = type
  621. this.pickerType.index = null
  622. corpsDescList({
  623. corpType: 'KH'
  624. }).then(res => {
  625. this.pickerColumns = [res.data]
  626. })
  627. this.pickerShow = true
  628. } else if (type == 'CP') {
  629. if (index == null) {
  630. this.pickerType.type = type
  631. this.pickerType.index = this.form.corpEquipmentArchivesItemList.length
  632. this.form.corpEquipmentArchivesItemList.push({
  633. cname: '',
  634. cname: '',
  635. code: '',
  636. brand: '',
  637. specs: '',
  638. category: '',
  639. categoryitem: '',
  640. url: '',
  641. goodsTypeId: '',
  642. exitDate: '',
  643. repairReportDate: '',
  644. brandId: '',
  645. maintenanceDate: '',
  646. factoryId: '',
  647. factoryName: '',
  648. equipmentDescribe: '',
  649. maintenanceSecond: '',
  650. filesList: [],
  651. })
  652. this.$u.route('/pages/device/FileDetails/selectMachine', {
  653. corpType: 'KH'
  654. });
  655. } else {
  656. this.pickerType.type = type
  657. this.pickerType.index = index
  658. this.$u.route('/pages/device/FileDetails/selectMachine', {
  659. corpType: 'KH'
  660. });
  661. }
  662. }
  663. },
  664. machineOtherFun(form) {
  665. this.form.corpEquipmentArchivesItemList[this.pickerType.index].cname = form.cname
  666. // this.form.corpEquipmentArchivesItemList[this.pickerType.index].code = form.code
  667. this.form.corpEquipmentArchivesItemList[this.pickerType.index].brand = form.brand
  668. this.form.corpEquipmentArchivesItemList[this.pickerType.index].brandId = form.brandId
  669. this.form.corpEquipmentArchivesItemList[this.pickerType.index].specs = form.specs
  670. this.form.corpEquipmentArchivesItemList[this.pickerType.index].remarks = form.remarks
  671. this.form.corpEquipmentArchivesItemList[this.pickerType.index].goodsTypeId = form.goodsTypeId
  672. this.form.corpEquipmentArchivesItemList[this.pickerType.index].goodsTypeName = form.goodsTypeName
  673. this.form.corpEquipmentArchivesItemList[this.pickerType.index].maintenanceSecond = form.maintenanceSecond ?
  674. form.maintenanceSecond : null
  675. this.form.corpEquipmentArchivesItemList[this.pickerType.index].repairReportDate = form.repairReportDate
  676. this.form.corpEquipmentArchivesItemList[this.pickerType.index].factoryId = form.factoryId ? form
  677. .factoryId : null
  678. this.form.corpEquipmentArchivesItemList[this.pickerType.index].factoryName = form.factoryName ? form
  679. .factoryName : null
  680. this.form.corpEquipmentArchivesItemList[this.pickerType.index].categoryitem = form.categoryitem
  681. // this.form.corpEquipmentArchivesItemList[this.pickerType.index].equipmentDescribe = form.cname
  682. this.pickerType.index = null
  683. },
  684. // 弹窗点击确认按钮
  685. pickerConfirm(val) {
  686. if (this.pickerType.type == 'KH') {
  687. this.form.corpId = val.value[0].id
  688. this.form.corpName = val.value[0].cname
  689. queryDetail({
  690. id: val.value[0].id
  691. }).then(res => {
  692. this.$set(this.form, 'address', res.data.corpsAddrList[0].detailedAddress)
  693. this.form.contacts = res.data.attn
  694. this.form.contactsTel = res.data.tel
  695. })
  696. } else if (this.pickerType.type == 'CP') {
  697. this.form.corpEquipmentArchivesItemList[this.pickerType.index].cname = val.value[0].cname
  698. // this.form.corpEquipmentArchivesItemList[this.pickerType.index].code = val.value[0].code
  699. this.form.corpEquipmentArchivesItemList[this.pickerType.index].brand = val.value[0].brand
  700. this.form.corpEquipmentArchivesItemList[this.pickerType.index].brandId = val.value[0].brandId
  701. this.form.corpEquipmentArchivesItemList[this.pickerType.index].specs = val.value[0].specs
  702. this.form.corpEquipmentArchivesItemList[this.pickerType.index].remarks = val.value[0].remarks
  703. this.form.corpEquipmentArchivesItemList[this.pickerType.index].goodsTypeId = val.value[0].goodsTypeId
  704. this.form.corpEquipmentArchivesItemList[this.pickerType.index].goodsTypeName = val.value[0]
  705. .goodsTypeName
  706. this.form.corpEquipmentArchivesItemList[this.pickerType.index].maintenanceSecond = val.value[0]
  707. .maintenanceSecond ? val.value[0].maintenanceSecond : null
  708. this.form.corpEquipmentArchivesItemList[this.pickerType.index].repairReportDate = val.value[0]
  709. .repairReportDate
  710. this.form.corpEquipmentArchivesItemList[this.pickerType.index].factoryId = val.value[0].factoryId ? val
  711. .value[0].factoryId : null
  712. this.form.corpEquipmentArchivesItemList[this.pickerType.index].factoryName = val.value[0].factoryName ?
  713. val.value[0].factoryName : null
  714. this.form.corpEquipmentArchivesItemList[this.pickerType.index].categoryitem = val.value[0].categoryitem
  715. // this.form.corpEquipmentArchivesItemList[this.pickerType.index].equipmentDescribe = val.value[0].cname
  716. } else {}
  717. this.pickerShow = false
  718. },
  719. // 弹窗点击取消按钮
  720. pickerCancel() {
  721. this.pickerShow = false
  722. },
  723. // 日历弹窗的开启
  724. calendarShowfun(type, sort, index) {
  725. // if (date != null && date != "") {
  726. // console.log("赋值");
  727. // console.log(date);
  728. // this.optionDate = Date.parse(date);
  729. // console.log(this.optionDate);
  730. // }
  731. this.calendarType.type = type
  732. this.calendarType.sort = sort
  733. this.calendarType.index = index
  734. this.calendarShow = true
  735. },
  736. // 日历关闭触发
  737. calendarClose() {
  738. this.calendarShow = false
  739. },
  740. // 日历选择完成触发
  741. calendarConfirm(val) {
  742. // var timer = new Date(val.value)
  743. //
  744. // const year = timer.getFullYear()
  745. // const month = timer.getMonth() + 1 // 由于月份从0开始,因此需加1
  746. // const day = timer.getDate()
  747. // const hour = timer.getHours()
  748. // const minute = timer.getMinutes()
  749. // const second = timer.getSeconds()
  750. // var data = `${this.pad(year, 4)}-${this.pad(month)}-${this.pad(day)}`
  751. if (this.calendarType.type == 1) {
  752. if (this.calendarType.sort == 1) {
  753. this.form.signingDateStart = val[0]
  754. } else {
  755. this.form.signingDateEnd = val[0]
  756. }
  757. } else {
  758. if (this.calendarType.sort == 1) {
  759. this.form.corpEquipmentArchivesItemList[this.calendarType.index].exitDate = val[0]
  760. } else {
  761. this.form.corpEquipmentArchivesItemList[this.calendarType.index].maintenanceDate = val[0]
  762. }
  763. }
  764. this.calendarShow = false
  765. },
  766. pad(timeEl, total = 2, str = '0') {
  767. return timeEl.toString().padStart(total, str)
  768. },
  769. // 详情接口
  770. corpequipmentarchivesDetailfun() {
  771. corpequipmentarchivesDetail({
  772. id: this.id
  773. }).then(res => {
  774. this.form = res.data
  775. this.form.corpEquipmentArchivesItemList.map(item=>{
  776. item.maintenanceDate = item.maintenanceDate.slice(0,10)
  777. item.exitDate = item.exitDate.slice(0,10)
  778. })
  779. })
  780. },
  781. // 删除弹窗
  782. DeleteWindow(row, index) {
  783. this.EquipmentDeleteRow = row;
  784. this.EquipmentDeleteIndex = index;
  785. this.EquipmentDeleteConfirm = true;
  786. },
  787. // 删除设备
  788. DeleteDevicefun() {
  789. var row = this.EquipmentDeleteRow
  790. var index = this.EquipmentDeleteIndex
  791. if (row.id) {
  792. this.form.corpEquipmentArchivesItemList.splice(index, 1)
  793. this.corpequipmentarchivesitemRemovefun(row.id)
  794. } else {
  795. this.form.corpEquipmentArchivesItemList.splice(index, 1)
  796. }
  797. this.EquipmentDeleteRow = null;
  798. this.EquipmentDeleteIndex = -1;
  799. this.EquipmentDeleteConfirm = false;
  800. },
  801. // 删除接口
  802. corpequipmentarchivesitemRemovefun(id) {
  803. corpequipmentarchivesitemRemove({
  804. ids: id
  805. }).then(res => {
  806. this.$refs.uToast.show({
  807. type: 'success',
  808. message: '操作成功',
  809. })
  810. })
  811. },
  812. // 新增图片
  813. async afterRead(event, type, index) {
  814. // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
  815. let lists = [].concat(event.file)
  816. console.log(event);
  817. console.log(lists, 394);
  818. if (type == 1) {
  819. let fileListLen = this.form.filesList.length
  820. lists.map((item) => {
  821. this.form.filesList.push({
  822. ...item,
  823. })
  824. })
  825. let sort = this.form.filesList.length
  826. for (let i = 0; i < lists.length; i++) {
  827. const result = await this.uploadFilePromise(lists[i].url)
  828. let item = this.form.filesList[fileListLen]
  829. this.form.filesList.splice(fileListLen, 1, Object.assign(item, {
  830. sort: sort,
  831. fileName: JSON.parse(result).data.originalName,
  832. url: JSON.parse(result).data.link
  833. }))
  834. fileListLen++
  835. }
  836. } else if (type == 2) {
  837. let fileListLen = this.form.corpEquipmentArchivesItemList[index].filesList.length
  838. lists.map((item) => {
  839. this.form.corpEquipmentArchivesItemList[index].filesList.push({
  840. ...item,
  841. })
  842. })
  843. let sort = this.form.corpEquipmentArchivesItemList[index].filesList.length
  844. for (let i = 0; i < lists.length; i++) {
  845. const result = await this.uploadFilePromise(lists[i].url)
  846. let item = this.form.corpEquipmentArchivesItemList[index].filesList[fileListLen]
  847. this.form.corpEquipmentArchivesItemList[index].filesList.splice(fileListLen, 1, Object.assign(
  848. item, {
  849. sort: sort,
  850. fileName: JSON.parse(result).data.originalName,
  851. url: JSON.parse(result).data.link
  852. }))
  853. fileListLen++
  854. }
  855. } else {}
  856. },
  857. // 上传附件接口
  858. uploadFilePromise(url) {
  859. return new Promise((resolve, reject) => {
  860. let a = uni.uploadFile({
  861. url: http.config.baseURL +
  862. '/blade-resource/oss/endpoint/put-file', // 仅为示例,非真实的接口地址
  863. filePath: url,
  864. name: 'file',
  865. formData: {
  866. user: 'test'
  867. },
  868. header: {
  869. // 客户端认证参数
  870. 'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
  871. 'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
  872. },
  873. success: (res) => {
  874. setTimeout(() => {
  875. resolve(res.data)
  876. }, 1000)
  877. }
  878. });
  879. })
  880. },
  881. // 删除图片
  882. deletePic(e, type, index) {
  883. if (type == 1) {
  884. this.form.filesList.splice(e.index, 1)
  885. } else if (type == 2) {
  886. this.form.corpEquipmentArchivesItemList[index].filesList.splice(e.index, 1)
  887. } else {}
  888. }
  889. }
  890. }
  891. </script>
  892. <style lang="scss" scoped>
  893. .filedetails {
  894. padding: 20rpx;
  895. box-sizing: border-box;
  896. .listbox {
  897. width: 100%;
  898. .inputbox {
  899. display: flex;
  900. align-items: center;
  901. .shebetext {
  902. width: 140rpx;
  903. font-size: 32rpx;
  904. color: #215476;
  905. text-align: right;
  906. margin-right: 10rpx;
  907. }
  908. }
  909. .listbox_title {
  910. display: flex;
  911. align-items: center;
  912. justify-content: space-between;
  913. margin-bottom: 20rpx;
  914. .listbox_titleXh {
  915. font-size: 28rpx;
  916. background: #dd451b;
  917. width: 90rpx;
  918. height: 90rpx;
  919. color: #fff;
  920. text-align: center;
  921. line-height: 90rpx;
  922. border-radius: 50%;
  923. }
  924. .listbox_titleDe {
  925. font-size: 30rpx;
  926. border: 2rpx solid #dd451b;
  927. border-radius: 12rpx;
  928. padding: 5rpx 20rpx;
  929. color: #dd451b;
  930. }
  931. }
  932. .binahao {
  933. font-size: 30rpx;
  934. color: #101010;
  935. margin-bottom: 10rpx;
  936. }
  937. .bottombox {
  938. width: 100%;
  939. display: flex;
  940. align-content: center;
  941. .bottombox_img {
  942. // width: 35%;
  943. width: 220rpx;
  944. height: 220rpx;
  945. }
  946. .bottombox_text {
  947. margin-left: 20rpx;
  948. width: 65%;
  949. display: flex;
  950. align-items: center;
  951. justify-content: space-between;
  952. .bottombox_textleft {
  953. font-size: 30rpx;
  954. .bottombox_textTitle {
  955. font-size: 34rpx;
  956. color: #2d4a6a;
  957. font-weight: 500;
  958. margin-bottom: 20rpx;
  959. width: 400rpx;
  960. overflow: hidden;
  961. white-space: nowrap;
  962. text-overflow: ellipsis;
  963. }
  964. }
  965. .bottombox_textRight {}
  966. }
  967. }
  968. }
  969. }
  970. .cardBox {
  971. background: #fff;
  972. border-radius: 12rpx;
  973. width: 100%;
  974. padding: 20rpx 30rpx;
  975. box-sizing: border-box;
  976. display: flex;
  977. align-content: center;
  978. justify-content: space-between;
  979. margin-bottom: 20rpx;
  980. }
  981. .bottomButton {
  982. position: fixed;
  983. bottom: 0;
  984. width: 100%;
  985. padding: 20rpx 30rpx;
  986. background: #fff;
  987. display: flex;
  988. justify-content: center;
  989. align-items: center;
  990. box-sizing: border-box;
  991. z-index: 98;
  992. .savebutton {
  993. border-radius: 30rpx;
  994. // color: #3f7cef;
  995. color: #fff;
  996. font-size: 34rpx;
  997. // border: 2rpx solid #3f7cef;
  998. border: 2rpx solid #FD4B09;
  999. background: #FD4B09;
  1000. padding: 10rpx 40rpx;
  1001. font-weight: 500;
  1002. }
  1003. }
  1004. image {
  1005. width: 100%;
  1006. }
  1007. </style>