index.vue 60 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868
  1. <template>
  2. <div class="box">
  3. <div class="tree">
  4. <treeList title="产品分类" submitType="1" :data="treeListData" v-model="sourceList.pagination.productClassifyId" @change="treeChange"
  5. @changeTreeList="getTreeList">
  6. </treeList>
  7. </div>
  8. <div class="content">
  9. <byTable :source="sourceList.data" :tableHeight="tableHeight" :pagination="sourceList.pagination" :config="config" :loading="loading"
  10. highlight-current-row :selectConfig="selectConfig" :action-list="[
  11. {
  12. text: '导出Excel',
  13. action: () => exportExcel(),
  14. disabled: false,
  15. },
  16. {
  17. text: '添加',
  18. action: () => openModal('add'),
  19. disabled: false,
  20. },]" @get-list="getList">
  21. <template #name="{ item }">
  22. <div>
  23. <span class="el-click">{{ item.name }}</span>
  24. </div>
  25. </template>
  26. <template #pic="{ item }">
  27. <div v-if="item.fileList.length > 0">
  28. <img :src="item.fileList[0].fileUrl" class="pic" @click="handleClickFile(item.fileList[0])" />
  29. </div>
  30. <div v-else></div>
  31. </template>
  32. <template #size="{ item }">
  33. <div v-if="item['length'] && item.width && item.height">
  34. <span>{{ item['length'] }}</span>*
  35. <span>{{ item.width }}</span>*
  36. <span>{{ item.height }}</span>
  37. </div>
  38. <div v-else></div>
  39. </template>
  40. <template #price="{ item }">
  41. <div v-if="item.price">
  42. <span> {{ moneyFormat(item.price ,2)}}</span>
  43. </div>
  44. <div v-else></div>
  45. </template>
  46. </byTable>
  47. </div>
  48. <el-dialog :title="modalType == 'add' ? '添加产品' : '编辑产品'" v-model="dialogVisible" width="90%" destroy-on-close>
  49. <div class="public_height_dialog">
  50. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom" v-loading="submitLoading">
  51. <template #nameEnglish>
  52. <div style="width: 100%">
  53. <el-input v-model="formData.data.nameEnglish" placeholder="请输入" onkeyup="value=value.replace(/[^\x00-\xff]/g, '')"></el-input>
  54. </div>
  55. </template>
  56. <template #productionFile>
  57. <div style="width: 100%">
  58. <span style="color:#409eff;cursor:pointer" @click="handleClickUpload('prodFilePath',true)"
  59. v-if="!formData.data.prodFilePath">点击上传</span>
  60. <span style="color:#409eff;cursor:pointer" @click="handleClickUpload('prodFilePath',false)" v-else>点击查看</span>
  61. </div>
  62. </template>
  63. <template #productionFileOne>
  64. <div style="width: 100%">
  65. <el-button type="primary" plain @click="handleClickUpload('prodImgPath',true)" v-if="!formData.data.prodImgPath">点击上传</el-button>
  66. <el-button type="primary" plain @click="handleClickUpload('prodImgPath',false)" v-else>点击查看</el-button>
  67. </div>
  68. </template>
  69. <template #rawMaterialIdSlot>
  70. <div style="width:100%;padding-left:25px">
  71. <div>
  72. <el-button type="primary" @click="openDialog(1)" plain>主材</el-button>
  73. <el-button type="primary" @click="openDialog(2)" plain>工艺</el-button>
  74. <el-button type="primary" @click="openDialog(3)" plain>辅材</el-button>
  75. </div>
  76. <el-table :data="formData.data.productBomDetailList" style="width: 100%; margin-top: 16px">
  77. <el-table-column prop="materialName" label="物料名称" width="170" />
  78. <el-table-column prop="materialCode" label="物料编码" width="190" />
  79. <el-table-column label="规格尺寸 (cm)" width="140">
  80. <template #default="{ row, $index }">
  81. <div style="width: 100%" v-if="row.materialLength&&row.materialWidth && row.materialHeight">
  82. {{row.materialLength}}*{{row.materialWidth}}*{{row.materialHeight}}
  83. </div>
  84. </template>
  85. </el-table-column>
  86. <el-table-column prop="materialColor" label="颜色" width="170" />
  87. <!-- <el-table-column label="数量" width="150">
  88. <template #default="{ row, $index }">
  89. <div style="width: 100%">
  90. <el-form-item :prop="'productBomDetailList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true"
  91. class="margin-b-0 wid100">
  92. <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%" :precision="0"
  93. :controls="false" :min="1" />
  94. </el-form-item>
  95. </div>
  96. </template>
  97. </el-table-column> -->
  98. <el-table-column label="标准用量" width="150">
  99. <template #default="{ row, $index }">
  100. <div style="width: 100%">
  101. <el-form-item :prop="'productBomDetailList.' + $index + '.standardDosage'" :rules="rules.standardDosage" :inline-message="true"
  102. class="margin-b-0 wid100">
  103. <el-input-number onmousewheel="return false;" v-model="row.standardDosage" placeholder="请输入" style="width: 100%"
  104. :precision="0" :controls="false" :min="1" />
  105. </el-form-item>
  106. </div>
  107. </template>
  108. </el-table-column>
  109. <el-table-column label="损耗率(%)" width="150">
  110. <template #default="{ row, $index }">
  111. <div style="width: 100%">
  112. <el-form-item :prop="'productBomDetailList.' + $index + '.lossRate'" :rules="rules.lossRate" :inline-message="true"
  113. class="margin-b-0 wid100">
  114. <el-input-number onmousewheel="return false;" v-model="row.lossRate" placeholder="请输入" style="width: 100%" :precision="2"
  115. :controls="false" :min="0" :max="100" />
  116. </el-form-item>
  117. </div>
  118. </template>
  119. </el-table-column>
  120. <el-table-column label="备注" min-width="200">
  121. <template #default="{ row, $index }">
  122. <div style="width: 100%">
  123. <el-form-item :prop="'productBomDetailList.' + $index + '.remark'" :rules="rules.remark" :inline-message="true"
  124. class="margin-b-0 wid100">
  125. <el-input v-model="row.remark" placeholder="请输入"> </el-input>
  126. </el-form-item>
  127. </div>
  128. </template>
  129. </el-table-column>
  130. <el-table-column label="操作" width="60" align="center" fixed="right">
  131. <template #default="{ row, $index }">
  132. <el-button type="primary" link @click="handleRemove($index,1)" v-if="row.type !=3">删除</el-button>
  133. </template>
  134. </el-table-column>
  135. </el-table>
  136. <!-- <el-table :data="formData.data.rawMaterialList" style="width: 100%; margin-top: 16px">
  137. <el-table-column prop="rawMaterialName" label="原材料名称" />
  138. <el-table-column prop="rawMaterialCode" label="原材料编码" />
  139. <el-table-column label="规格尺寸 (cm)">
  140. <template #default="{ row, $index }">
  141. <div style="width: 100%" v-if="row.rawMaterialLength&&row.rawMaterialWidth && row.rawMaterialHeight">
  142. {{row.rawMaterialLength}}*{{row.rawMaterialWidth}}*{{row.rawMaterialHeight}}
  143. </div>
  144. </template>
  145. </el-table-column>
  146. <el-table-column prop="rawMaterialColor" label="颜色" />
  147. </el-table> -->
  148. </div>
  149. </template>
  150. <template #color>
  151. <div style="width: 100%">
  152. <el-form-item label="颜色" class="margin-b-0 wid100">
  153. <el-row style="width: 100%">
  154. <el-col :span="12">
  155. <el-form-item prop="color" label-width="0px" class="margin-b-0 wid100">
  156. <el-input v-model="formData.data.color" placeholder="颜色" />
  157. </el-form-item>
  158. </el-col>
  159. <el-col :span="12">
  160. <el-form-item prop="colorCardCode" label-width="0px" class="margin-b-0 wid100">
  161. <el-input v-model="formData.data.colorCardCode" placeholder="色卡号" />
  162. </el-form-item>
  163. </el-col>
  164. </el-row>
  165. </el-form-item>
  166. </div>
  167. </template>
  168. <template #size>
  169. <div style="width: 100%">
  170. <el-form-item label="尺寸" class="margin-b-0 wid100" required>
  171. <el-row>
  172. <el-col :span="8">
  173. <el-form-item prop="length" label-width="0px" class="margin-b-0 wid100">
  174. <el-input-number v-model="formData.data['length']" placeholder="长 (cm)" style="width: 100%" :precision="2" :controls="false"
  175. :min="0" onmousewheel="return false;" />
  176. </el-form-item>
  177. </el-col>
  178. <el-col :span="8">
  179. <el-form-item prop="width" label-width="0px" class="margin-b-0 wid100">
  180. <el-input-number v-model="formData.data.width" placeholder="宽 (cm)" style="width: 100%" :precision="2" :controls="false"
  181. :min="0" onmousewheel="return false;" />
  182. </el-form-item>
  183. </el-col>
  184. <el-col :span="8">
  185. <el-form-item prop="height" label-width="0px" class="margin-b-0 wid100">
  186. <el-input-number v-model="formData.data.height" placeholder="高 (cm)" style="width: 100%" :precision="2" :controls="false"
  187. :min="0" onmousewheel="return false;" />
  188. </el-form-item>
  189. </el-col>
  190. </el-row>
  191. </el-form-item>
  192. </div>
  193. </template>
  194. <template #materialDetail>
  195. <div style="width: 100%;padding-left:15px">
  196. <el-button type="primary" @click="clickOpenSelectMaterial(1)" plain>选择包材/配件/辅材</el-button>
  197. <el-table :data="formData.data.productBomDetailList" style="width: 100%; margin-top: 16px">
  198. <el-table-column prop="materialName" label="物料名称" />
  199. <el-table-column prop="materialCode" label="物料编码" />
  200. <el-table-column label="规格尺寸 (cm)" width="140">
  201. <template #default="{ row, $index }">
  202. <div style="width: 100%" v-if="row.materialLength&&row.materialWidth && row.materialHeight">
  203. {{row.materialLength}}*{{row.materialWidth}}*{{row.materialHeight}}
  204. </div>
  205. </template>
  206. </el-table-column>
  207. <el-table-column prop="materialColor" label="颜色" width="170" />
  208. <el-table-column label="数量" width="150">
  209. <template #default="{ row, $index }">
  210. <div style="width: 100%">
  211. <el-form-item :prop="'productBomDetailList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true"
  212. class="margin-b-0 wid100">
  213. <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%" :precision="0"
  214. :controls="false" :min="1" />
  215. </el-form-item>
  216. </div>
  217. </template>
  218. </el-table-column>
  219. <el-table-column label="操作" width="60" align="center" fixed="right">
  220. <template #default="{ $index }">
  221. <el-button type="primary" link @click="handleRemove($index,1)">删除</el-button>
  222. </template>
  223. </el-table-column>
  224. </el-table>
  225. </div>
  226. </template>
  227. <template #technology>
  228. <div style="width:100%">
  229. <!-- <div class="small-title">
  230. ① 工艺线路
  231. </div>
  232. <el-row style="width:100%">
  233. <el-col :span="12">
  234. <el-form-item prop="technologyId" label="生产工艺" class="wid100">
  235. <el-select v-model="formData.data.technologyId" placeholder="请选择" style="width:100%">
  236. <el-option v-for="item in technologyData" :key="item.id" :label="item.name" :value="item.id" />
  237. </el-select>
  238. </el-form-item>
  239. </el-col>
  240. </el-row> -->
  241. <div class="small-title">
  242. ① LOGO
  243. </div>
  244. <el-row style="width:100%">
  245. <el-col :span="12">
  246. <el-form-item label="LOGO尺寸" class="wid100">
  247. <el-row style="width:100%">
  248. <el-col :span="12">
  249. <el-form-item prop="logoLength" label-width="0px" class="margin-b-0 wid100">
  250. <el-input-number v-model="formData.data.logoLength" placeholder="长 (cm)" style="width: 100%" :precision="2"
  251. :controls="false" :min="0" onmousewheel="return false;" />
  252. </el-form-item>
  253. </el-col>
  254. <el-col :span="12">
  255. <el-form-item prop="logoWidth" label-width="0px" class="margin-b-0 wid100">
  256. <el-input-number v-model="formData.data.logoWidth" placeholder="宽 (cm)" style="width: 100%" :precision="2" :controls="false"
  257. :min="0" onmousewheel="return false;" />
  258. </el-form-item>
  259. </el-col>
  260. <!-- <el-col :span="8">
  261. <el-form-item prop="logoHeight" label-width="0px" class="margin-b-0 wid100">
  262. <el-input-number v-model="formData.data.logoHeight" placeholder="高 (cm)" style="width: 100%" :precision="2"
  263. :controls="false" :min="0" onmousewheel="return false;" />
  264. </el-form-item>
  265. </el-col> -->
  266. </el-row>
  267. </el-form-item>
  268. </el-col>
  269. <el-col :span="12">
  270. <el-form-item prop="colorCount" label="几色印刷" class="wid100">
  271. <el-input-number v-model="formData.data.colorCount" placeholder="请输入" style="width: 100%" :precision="0" :controls="false"
  272. :min="1" onmousewheel="return false;" />
  273. </el-form-item>
  274. </el-col>
  275. </el-row>
  276. <div class="small-title">
  277. ② 折叠
  278. </div>
  279. <el-row style="width:100%">
  280. <el-col :span="12">
  281. <el-form-item prop="isFold" label="是否折叠" class="wid100">
  282. <el-select v-model="formData.data.isFold" placeholder="请选择" style="width:100%">
  283. <el-option :label="'否'" :value="0" />
  284. <el-option :label="'是'" :value="1" />
  285. </el-select>
  286. </el-form-item>
  287. </el-col>
  288. <el-col :span="12">
  289. <el-form-item prop="foldWay" label="折叠数" class="wid100" v-if="formData.data.isFold==1"
  290. :rules="formData.data.isFold==1?rules.foldWay:''">
  291. <el-select v-model="formData.data.foldWay" placeholder="请选择" style="width:100%">
  292. <el-option v-for="item in foldWayData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
  293. </el-select>
  294. </el-form-item>
  295. </el-col>
  296. </el-row>
  297. <div class="small-title">
  298. ③ 包装要求
  299. </div>
  300. <el-row style="width:100%">
  301. <el-col :span="12">
  302. <el-form-item prop="packAsk" label="包装要求" class="wid100">
  303. <el-select v-model="formData.data.packAsk" placeholder="请选择" style="width:100%" multiple>
  304. <el-option v-for="item in packAskData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
  305. </el-select>
  306. </el-form-item>
  307. </el-col>
  308. </el-row>
  309. <div class="small-title">
  310. ④ 是否定制
  311. </div>
  312. <el-row style="width:100%">
  313. <el-col :span="12">
  314. <el-form-item prop="isCustomized" label="是否定制" class="wid100">
  315. <el-select v-model="formData.data.isCustomized" placeholder="请选择" style="width:100%" @change="handleChangeIsCustomized">
  316. <el-option :label="'否'" :value="0" />
  317. <el-option :label="'是'" :value="1" />
  318. </el-select>
  319. </el-form-item>
  320. </el-col>
  321. </el-row>
  322. <el-row style="width:100%">
  323. <el-form-item prop="technologyId" label="定制内容" class="wid100" v-if="formData.data.isCustomized==1">
  324. <table style="width:100%" border class="table">
  325. <tr>
  326. <td style="width:20%">
  327. </td>
  328. <td style="width:40%">附件</td>
  329. <td style="width:40%">备注</td>
  330. </tr>
  331. <tr v-for="(row,index) in formData.data.productCustomInfoList" :key="index">
  332. <td>
  333. <el-checkbox v-model="row.isCheckBox" label="" /> <span style="position:relative;top:-2px"> {{getLabel(row.type)}}</span>
  334. </td>
  335. <td>
  336. <el-upload :file-list="row.fileList" :action="uploadUrl" :data="uploadData" :limit="5" :list-type="'text'"
  337. :before-upload="(file)=>handleBeforeUploadOne(file,index)" :on-success="()=>handleSuccessOne(index)"
  338. :on-remove="(file)=>handleRemoveFile(file,index)" :on-preview="onPreviewFile"
  339. :on-exceed="()=>msgTip(`上传文件数量不可大于5`, 2)">
  340. <el-button text type="primary">上传附件</el-button>
  341. </el-upload>
  342. </td>
  343. <td>
  344. <el-form-item :prop="'productCustomInfoList.' + index + '.remark'" :rules="row.isCheckBox?rules.remark:''"
  345. class="margin-b-0 wid100">
  346. <el-input v-model="row.remark" placeholder="请输入备注" />
  347. </el-form-item>
  348. </td>
  349. </tr>
  350. </table>
  351. </el-form-item>
  352. </el-row>
  353. </div>
  354. </template>
  355. </byForm>
  356. </div>
  357. <template #footer>
  358. <el-button @click="dialogVisible = false" size="defualt" v-debounce>取 消</el-button>
  359. <el-button type="primary" @click="submitForm()" size="defualt" v-debounce>确 定</el-button>
  360. </template>
  361. </el-dialog>
  362. <el-dialog :title="'BOM 配置'" v-model="bomDialog" width="900" destroy-on-close>
  363. <!-- <div class="public_height_dialog"> -->
  364. <byForm :formConfig="bomFormConfig" :formOption="bomFormOption" v-model="formData.bomData" :rules="bomRules" ref="bomFormDom"
  365. v-loading="submitLoading">
  366. <!-- <template #accessories>
  367. <div style="width: 100%">
  368. <el-button type="primary" @click="openSelectMaterial = true" plain>选择</el-button>
  369. <el-table :data="formData.bomData.productBomDetailList" style="width: 100%; margin-top: 16px" border>
  370. <el-table-column prop="materialName" label="物料名称" min-width="130" />
  371. <el-table-column prop="materialCode" label="物料编码" width="150" />
  372. <el-table-column label="数量" width="150">
  373. <template #default="{ row, $index }">
  374. <div style="width: 100%">
  375. <el-form-item :prop="'productBomDetailList.' + $index + '.quantity'" :rules="bomRules.quantity" :inline-message="true"
  376. class="margin-b-0 wid100">
  377. <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%" :precision="0"
  378. :controls="false" :min="1" />
  379. </el-form-item>
  380. </div>
  381. </template>
  382. </el-table-column>
  383. <el-table-column label="操作" width="60" align="center" fixed="right">
  384. <template #default="{ $index }">
  385. <el-button type="primary" link @click="handleRemove($index,1)">删除</el-button>
  386. </template>
  387. </el-table-column>
  388. </el-table>
  389. </div>
  390. </template>
  391. <template #detail>
  392. <div style="width: 100%">
  393. <el-table :data="formData.bomData.processesList" style="width: 100%; " border>
  394. <el-table-column label="序号" type="index" width="80" />
  395. <el-table-column prop="code" label="工序编码" />
  396. <el-table-column prop="name" label="工序名称" />
  397. </el-table>
  398. </div>
  399. </template> -->
  400. <template #detail>
  401. <div style="width: 100%">
  402. <div style="text-align:center;margin-bottom:10px">
  403. 【{{formData.bomData.name}} {{formData.bomData.code}}】BOM单
  404. </div>
  405. <table border class="table" style="width:100%">
  406. <tbody>
  407. <tr>
  408. <td style="width:90px">原材料</td>
  409. <td style="padding:10px">
  410. <el-select v-model="formData.bomData.rawMaterialId" filterable placeholder="请选择原材料" style="width:100%">
  411. <el-option v-for="item in rawMaterialData" :key="item.value" :label="item.label" :value="item.value" />
  412. </el-select>
  413. </td>
  414. </tr>
  415. <tr>
  416. <td>
  417. 包材/配件/辅材
  418. </td>
  419. <td style="padding:20px 20px 20px">
  420. <div style="text-align:left"><el-button type="primary" @click="clickOpenSelectMaterial(2)" plain>选择</el-button></div>
  421. <el-table :data="formData.bomData.productBomDetailList" style="width: 100%;">
  422. <el-table-column prop="materialName" label="物料名称" min-width="130" />
  423. <el-table-column prop="materialCode" label="物料编码" width="150" />
  424. <el-table-column label="规格尺寸 (cm)" width="140">
  425. <template #default="{ row, $index }">
  426. <div style="width: 100%" v-if="row.materialLength&&row.materialWidth && row.materialHeight">
  427. {{row.materialLength}}*{{row.materialWidth}}*{{row.materialHeight}}
  428. </div>
  429. </template>
  430. </el-table-column>
  431. <el-table-column prop="materialColor" label="颜色" width="150" />
  432. <el-table-column label="数量" width="100">
  433. <template #default="{ row, $index }">
  434. <div style="width: 100%">
  435. <el-form-item :prop="'productBomDetailList.' + $index + '.quantity'" :rules="bomRules.quantity" :inline-message="true"
  436. class="margin-b-0 wid100">
  437. <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%"
  438. :precision="0" :controls="false" :min="1" />
  439. </el-form-item>
  440. </div>
  441. </template>
  442. </el-table-column>
  443. <el-table-column label="操作" width="60" align="center" fixed="right">
  444. <template #default="{ $index }">
  445. <el-button type="primary" link @click="handleRemove($index,2)">删除</el-button>
  446. </template>
  447. </el-table-column>
  448. </el-table>
  449. </td>
  450. </tr>
  451. <tr>
  452. <td>
  453. 生产工序
  454. </td>
  455. <td style="padding:0 20px 20px">
  456. <el-table :data="formData.bomData.processesList" style="width: 100%; ">
  457. <el-table-column label="序号" type="index" width="80" />
  458. <el-table-column prop="code" label="工序编码" />
  459. <el-table-column prop="name" label="工序名称" />
  460. </el-table>
  461. </td>
  462. </tr>
  463. </tbody>
  464. </table>
  465. </div>
  466. </template>
  467. </byForm>
  468. <!-- </div> -->
  469. <template #footer>
  470. <el-button @click="bomDialog = false" size="defualt" v-debounce>取 消</el-button>
  471. <el-button type="primary" @click="submitBomForm()" size="defualt" v-debounce>确 定</el-button>
  472. </template>
  473. </el-dialog>
  474. <el-dialog :title="'物料选择'" v-model="openSelectMaterial" width="90%" destroy-on-close>
  475. <SelectMaterial :isNeRawMaterial="'1'" @selectMaterial="selectMaterial"></SelectMaterial>
  476. <template #footer>
  477. <el-button @click="openSelectMaterial = false" size="defualt" v-debounce>取 消</el-button>
  478. </template>
  479. </el-dialog>
  480. <el-dialog :title="'原材料选择'" v-model="openSelectRawMaterial" width="90%" destroy-on-close>
  481. <SelectMaterial :ancestors="100" @selectMaterial="selectRawMaterial"></SelectMaterial>
  482. <template #footer>
  483. <el-button @click="openSelectRawMaterial = false" size="defualt" v-debounce>取 消</el-button>
  484. </template>
  485. </el-dialog>
  486. <el-dialog :title="'工艺选择'" v-model="openSelectTechnology" width="90%" destroy-on-close>
  487. <SelectTechnology :isSelect="true" @selectTechnology="selectTechnology"></SelectTechnology>
  488. <template #footer>
  489. <el-button @click="openSelectTechnology = false" size="defualt" v-debounce>取 消</el-button>
  490. </template>
  491. </el-dialog>
  492. <el-dialog title="导入产品" v-model="openExcelDialog" width="400">
  493. <div v-loading="excelLoading">
  494. <el-upload :action="actionUrl + '/productInfo/excelImportByEhsd'" :headers="headers" :on-success="handleSuccess" :on-progress="handleProgress"
  495. :show-file-list="false" :on-error="handleError" accept=".xlsx">
  496. <el-button type="primary">点击导入</el-button>
  497. </el-upload>
  498. </div>
  499. <template #footer>
  500. <el-button @click="openExcelDialog = false" size="default" v-debounce>取 消</el-button>
  501. </template>
  502. </el-dialog>
  503. </div>
  504. </template>
  505. <script setup>
  506. import byTable from "@/components/byTable/index";
  507. import byForm from "@/components/byForm/index";
  508. import treeList from "@/components/product/treeList";
  509. import SelectMaterial from "@/components/product/SelectMaterial.vue";
  510. import { getToken } from "@/utils/auth";
  511. import SelectTechnology from "@/views/production/project/technology/index.vue";
  512. const { proxy } = getCurrentInstance();
  513. const actionUrl = import.meta.env.VITE_APP_BASE_API;
  514. const loading = ref(false);
  515. const submitLoading = ref(false);
  516. const treeData = ref([]);
  517. const treeDataOne = ref([]);
  518. const treeListData = ref([]);
  519. const technologyData = ref([]);
  520. const companyData = ref([]);
  521. const currencyData = computed(
  522. () => proxy.useUserStore().allDict["account_currency"]
  523. );
  524. const packAskData = computed(() => proxy.useUserStore().allDict["pack_ask"]);
  525. const foldWayData = computed(() => proxy.useUserStore().allDict["fold_way"]);
  526. const backLinesData = computed(
  527. () => proxy.useUserStore().allDict["back_lines"]
  528. );
  529. const frontLinesData = computed(
  530. () => proxy.useUserStore().allDict["front_lines"]
  531. );
  532. const headers = ref({ Authorization: "Bearer " + getToken() });
  533. const uploadData = ref({});
  534. const tableHeight = ref(0);
  535. const getTableHeight = () => {
  536. tableHeight.value = window.innerHeight - 245;
  537. };
  538. getTableHeight();
  539. window.addEventListener("resize", () => {
  540. getTableHeight();
  541. });
  542. const sourceList = ref({
  543. data: [],
  544. pagination: {
  545. total: 3,
  546. pageNum: 1,
  547. pageSize: 10,
  548. type: "",
  549. productClassifyId: "",
  550. keyword: "",
  551. definition: "1",
  552. companyId: "",
  553. },
  554. });
  555. const dialogVisible = ref(false);
  556. const openExcelDialog = ref(false);
  557. const excelLoading = ref(false);
  558. const modalType = ref("add");
  559. const rules = ref({
  560. companyId: [{ required: true, message: "请选择归属公司", trigger: "change" }],
  561. productClassifyId: [
  562. { required: true, message: "请选择产品分类", trigger: "change" },
  563. ],
  564. name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
  565. customCode: [{ required: true, message: "请输入产品编号", trigger: "blur" }],
  566. length: [{ required: true, message: "请输入长 (cm)", trigger: "blur" }],
  567. width: [{ required: true, message: "请输入宽 (cm)", trigger: "blur" }],
  568. height: [{ required: true, message: "请输入高 (cm)", trigger: "blur" }],
  569. technologyId: [
  570. { required: true, message: "请选择生产工艺", trigger: "change" },
  571. ],
  572. rawMaterialId: [
  573. { required: true, message: "请选择原材料", trigger: "change" },
  574. ],
  575. foldWay: [{ required: true, message: "请选择折叠数", trigger: "change" }],
  576. quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  577. standardDosage: [
  578. { required: true, message: "请输入标准用量", trigger: "blur" },
  579. ],
  580. lossRate: [{ required: true, message: "请输入损耗率", trigger: "blur" }],
  581. // remark: [{ required: true, message: "请输入描述", trigger: "blur" }],
  582. // reverseTexture: [
  583. // { required: true, message: "请选择背面纹路", trigger: "change" },
  584. // ],
  585. // frontalTexture: [
  586. // { required: true, message: "请选择正面纹路", trigger: "change" },
  587. // ],
  588. });
  589. const props = defineProps({
  590. selectStatus: Boolean,
  591. });
  592. const selectConfig = computed(() => [
  593. {
  594. label: "业务公司",
  595. prop: "companyId",
  596. data: companyData.value,
  597. },
  598. ]);
  599. const config = computed(() => {
  600. return [
  601. {
  602. attrs: {
  603. label: "图片",
  604. slot: "pic",
  605. align: "center",
  606. width: 80,
  607. },
  608. },
  609. {
  610. attrs: {
  611. label: "业务公司",
  612. prop: "companyName",
  613. width: 150,
  614. },
  615. },
  616. {
  617. attrs: {
  618. label: "产品分类",
  619. prop: "classifyName",
  620. "min-width": 200,
  621. },
  622. },
  623. {
  624. attrs: {
  625. label: "产品编码",
  626. prop: "customCode",
  627. width: 180,
  628. },
  629. },
  630. {
  631. attrs: {
  632. label: "产品名称",
  633. slot: "name",
  634. "min-width": 200,
  635. },
  636. },
  637. // {
  638. // attrs: {
  639. // label: "产品英文名",
  640. // prop: "nameEnglish",
  641. // "min-width": 120,
  642. // },
  643. // },
  644. // {
  645. // attrs: {
  646. // label: "规格尺寸 (cm)",
  647. // prop: "spec",
  648. // width: 120,
  649. // },
  650. // },
  651. {
  652. attrs: {
  653. label: "规格尺寸 (cm)",
  654. slot: "size",
  655. width: 130,
  656. },
  657. },
  658. {
  659. attrs: {
  660. label: "颜色",
  661. prop: "color",
  662. width: 100,
  663. },
  664. },
  665. {
  666. attrs: {
  667. label: "计量单位",
  668. prop: "unit",
  669. width: 100,
  670. },
  671. },
  672. {
  673. attrs: {
  674. label: "正面纹路",
  675. prop: "frontalTexture",
  676. width: 130,
  677. },
  678. render(val) {
  679. return proxy.dictKeyValue(val, frontLinesData.value);
  680. },
  681. },
  682. {
  683. attrs: {
  684. label: "净重",
  685. prop: "netWeight",
  686. width: 100,
  687. },
  688. render(val) {
  689. if (val) {
  690. return val + " kg";
  691. }
  692. },
  693. },
  694. {
  695. attrs: {
  696. label: "销售价",
  697. prop: "price",
  698. width: 100,
  699. },
  700. render(val) {
  701. return proxy.moneyFormat(val, 2);
  702. },
  703. },
  704. // {
  705. // attrs: {
  706. // label: "海关编码",
  707. // prop: "hsCode",
  708. // width: 100,
  709. // },
  710. // },
  711. {
  712. attrs: {
  713. label: "原材料编码",
  714. prop: "rawMaterialCode",
  715. width: 120,
  716. },
  717. },
  718. {
  719. attrs: {
  720. label: "原材料",
  721. prop: "rawMaterialName",
  722. "min-width": 300,
  723. },
  724. },
  725. {
  726. attrs: {
  727. label: "操作",
  728. width: "160",
  729. align: "center",
  730. fixed: "right",
  731. },
  732. renderHTML(row) {
  733. return [
  734. // {
  735. // attrs: {
  736. // label: "选择",
  737. // type: "primary",
  738. // text: true,
  739. // },
  740. // el: "button",
  741. // click() {
  742. // clickSelect(row);
  743. // },
  744. // }
  745. // {
  746. // attrs: {
  747. // label: "BOM",
  748. // type: "primary",
  749. // text: true,
  750. // },
  751. // el: "button",
  752. // click() {
  753. // bomSetting(row);
  754. // },
  755. // },
  756. {
  757. attrs: {
  758. label: "修改",
  759. type: "primary",
  760. text: true,
  761. },
  762. el: "button",
  763. click() {
  764. getDtl(row);
  765. },
  766. },
  767. {
  768. attrs: {
  769. label: "删除",
  770. type: "danger",
  771. text: true,
  772. },
  773. el: "button",
  774. click() {
  775. proxy
  776. .msgConfirm()
  777. .then((res) => {
  778. proxy
  779. .post("/productInfo/delete", {
  780. id: row.id,
  781. })
  782. .then((res) => {
  783. proxy.msgTip("删除成功", 1);
  784. getList();
  785. });
  786. })
  787. .catch((err) => {});
  788. },
  789. },
  790. ];
  791. },
  792. },
  793. ];
  794. });
  795. const getPriceData = () => {
  796. if (
  797. formData.data["length"] &&
  798. formData.data.width &&
  799. formData.data.technologyId &&
  800. formData.data.rawMaterialId
  801. ) {
  802. proxy
  803. .post("/productInfo/getProductPrice", {
  804. id: formData.data.id || "",
  805. length: formData.data["length"],
  806. width: formData.data.width,
  807. technologyId: formData.data.technologyId,
  808. rawMaterialId: formData.data.rawMaterialId,
  809. })
  810. .then((res) => {
  811. formData.data.price = res.price;
  812. });
  813. }
  814. };
  815. const formData = reactive({
  816. data: {},
  817. bomData: {},
  818. });
  819. const formOption = reactive({
  820. disabled: false,
  821. inline: true,
  822. labelWidth: 100,
  823. itemWidth: 100,
  824. });
  825. const formDom = ref(null);
  826. const formConfig = computed(() => {
  827. return [
  828. {
  829. type: "title1",
  830. title: "基本信息",
  831. },
  832. {
  833. type: "treeSelect",
  834. prop: "companyId",
  835. label: "业务公司",
  836. data: treeDataOne.value,
  837. propsTreeLabel: "deptName",
  838. propsTreeValue: "deptId",
  839. itemWidth: 50,
  840. },
  841. {
  842. type: "treeSelect",
  843. prop: "productClassifyId",
  844. label: "产品分类",
  845. data: treeData.value,
  846. itemWidth: 50,
  847. disabled: false,
  848. },
  849. {
  850. type: "input",
  851. prop: "name",
  852. label: "产品名称",
  853. itemWidth: 50,
  854. disabled: false,
  855. },
  856. {
  857. type: "slot",
  858. slotName: "nameEnglish",
  859. label: "英文名",
  860. itemWidth: 50,
  861. },
  862. {
  863. type: "input",
  864. prop: "customCode",
  865. label: "产品编号",
  866. itemWidth: 50,
  867. disabled: false,
  868. },
  869. {
  870. type: "number",
  871. prop: "price",
  872. label: "销售价",
  873. precision: 2,
  874. min: 0.01,
  875. controls: false,
  876. itemWidth: 50,
  877. disabled: false,
  878. },
  879. {
  880. type: "number",
  881. prop: "factoryPrice",
  882. label: "出⼚单价",
  883. precision: 2,
  884. min: 0.01,
  885. controls: false,
  886. itemWidth: 50,
  887. disabled: false,
  888. },
  889. {
  890. type: "number",
  891. prop: "flatPrice",
  892. label: "平铺价",
  893. precision: 2,
  894. min: 0.01,
  895. controls: false,
  896. itemWidth: 50,
  897. disabled: false,
  898. },
  899. {
  900. type: "select",
  901. prop: "frontalTexture",
  902. label: "正面纹路",
  903. data: frontLinesData.value,
  904. itemWidth: 50,
  905. },
  906. {
  907. type: "select",
  908. prop: "reverseTexture",
  909. label: "背面纹路",
  910. data: backLinesData.value,
  911. itemWidth: 50,
  912. },
  913. {
  914. type: "input",
  915. prop: "unit",
  916. label: "计量单位",
  917. itemWidth: 50,
  918. disabled: false,
  919. },
  920. {
  921. type: "input",
  922. prop: "hsCode",
  923. label: "海关编码",
  924. itemWidth: 50,
  925. disabled: false,
  926. },
  927. {
  928. type: "slot",
  929. slotName: "color",
  930. prop: "",
  931. label: "",
  932. itemWidth: 50,
  933. disabled: false,
  934. },
  935. {
  936. type: "slot",
  937. slotName: "size",
  938. prop: "",
  939. label: "",
  940. itemWidth: 50,
  941. disabled: false,
  942. },
  943. {
  944. type: "number",
  945. prop: "netWeight",
  946. label: "净重(kg)",
  947. precision: 2,
  948. min: 0,
  949. controls: false,
  950. itemWidth: 50,
  951. },
  952. {
  953. type: "input",
  954. itemType: "textarea",
  955. prop: "remark",
  956. label: "描述",
  957. itemWidth: 100,
  958. disabled: false,
  959. },
  960. {
  961. type: "uploadImg",
  962. // listType: "picture-card",
  963. // limit: 1,
  964. // accept: ".gif, .jpeg, .jpg, .png",
  965. prop: "fileList",
  966. imgProp: "imageUrl",
  967. label: "产品缩略图",
  968. itemWidth: 100,
  969. },
  970. {
  971. type: "slot",
  972. slotName: "productionFileOne",
  973. label: "产品原图",
  974. itemWidth: 100,
  975. },
  976. {
  977. type: "upload",
  978. listType: "text",
  979. accept: "",
  980. limit: 1,
  981. prop: "prodFileList",
  982. label: "生产plt文件",
  983. },
  984. // {
  985. // type: "slot",
  986. // slotName: "productionFile",
  987. // label: "生产plt文件",
  988. // itemWidth: 100,
  989. // },
  990. {
  991. type: "title1",
  992. title: "BOM",
  993. },
  994. // {
  995. // type: "select",
  996. // prop: "rawMaterialId",
  997. // label: "原材料",
  998. // itemWidth: 50,
  999. // data: rawMaterialData.value,
  1000. // filterable: true,
  1001. // disabled: false,
  1002. // fn: (val) => {
  1003. // // let current = rawMaterialData.value.find((x) => x.value == val);
  1004. // // if (current) {
  1005. // // formData.data.price = Number(
  1006. // // parseFloat(
  1007. // // current["length"] * current.width * current.price
  1008. // // ).toFixed(2)
  1009. // // );
  1010. // // }
  1011. // // getPriceData();
  1012. // },
  1013. // },
  1014. {
  1015. type: "slot",
  1016. slotName: "rawMaterialIdSlot",
  1017. label: "",
  1018. itemWidth: 100,
  1019. disabled: true,
  1020. },
  1021. // {
  1022. // type: "input",
  1023. // prop: "rawMaterialSize",
  1024. // label: "原材料尺寸",
  1025. // itemWidth: 50,
  1026. // disabled: true,
  1027. // },
  1028. // {
  1029. // type: "input",
  1030. // prop: "rawMaterialColor",
  1031. // label: "原材料颜色",
  1032. // itemWidth: 50,
  1033. // disabled: true,
  1034. // },
  1035. // {
  1036. // type: "selectInput",
  1037. // prop: "price",
  1038. // selectProp: "currency",
  1039. // label: "销售价",
  1040. // itemWidth: 50,
  1041. // disabledSelect: true,
  1042. // data: currencyData.value,
  1043. // disabled: true,
  1044. // },
  1045. // {
  1046. // type: "select",
  1047. // prop: "technologyId",
  1048. // label: "生产工艺",
  1049. // itemWidth: 50,
  1050. // data: technologyData.value,
  1051. // filterable: true,
  1052. // disabled: false,
  1053. // fn: () => {
  1054. // // getPriceData();
  1055. // },
  1056. // },
  1057. // {
  1058. // type: "input",
  1059. // prop: "spec",
  1060. // label: "规格型号",
  1061. // itemWidth: 50,
  1062. // disabled: false,
  1063. // },
  1064. // {
  1065. // type: "select",
  1066. // prop: "innerPackMethod",
  1067. // label: "内包装方式",
  1068. // required: true,
  1069. // itemWidth: 50,
  1070. // multiple: true,
  1071. // data: innerMethon.value,
  1072. // filterable: true,
  1073. // placeholder: "内包装方式",
  1074. // style: {
  1075. // width: "100%",
  1076. // },
  1077. // disabled: false,
  1078. // },
  1079. // {
  1080. // type: "select",
  1081. // prop: "outerPackMethod",
  1082. // label: "外包装方式",
  1083. // required: true,
  1084. // itemWidth: 50,
  1085. // multiple: true,
  1086. // data: outsideMethon.value,
  1087. // filterable: true,
  1088. // placeholder: "外包装方式",
  1089. // style: {
  1090. // width: "100%",
  1091. // },
  1092. // disabled: false,
  1093. // },
  1094. // {
  1095. // type: "input",
  1096. // itemType: "textarea",
  1097. // prop: "remark",
  1098. // label: "备注",
  1099. // itemWidth: 100,
  1100. // },
  1101. // {
  1102. // type: "title1",
  1103. // title: "辅材",
  1104. // },
  1105. // {
  1106. // type: "slot",
  1107. // slotName: "materialDetail",
  1108. // },
  1109. {
  1110. type: "title1",
  1111. title: "附加工艺要求",
  1112. },
  1113. {
  1114. type: "slot",
  1115. slotName: "technology",
  1116. },
  1117. ];
  1118. });
  1119. const getList = (req) => {
  1120. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  1121. loading.value = true;
  1122. proxy.post("/productInfo/page", sourceList.value.pagination).then(
  1123. (res) => {
  1124. sourceList.value.data = res.rows.map((x) => ({
  1125. ...x,
  1126. fileList: [],
  1127. }));
  1128. sourceList.value.pagination.total = res.total;
  1129. setTimeout(() => {
  1130. loading.value = false;
  1131. }, 200);
  1132. let productIdList = res.rows.map((x) => x.id);
  1133. // 请求文件数据并回显
  1134. if (productIdList.length > 0) {
  1135. // proxy.getFile(productIdList, sourceList.value.data, "id");
  1136. proxy
  1137. .post("/fileInfo/getList", { businessIdList: productIdList })
  1138. .then((fileObj) => {
  1139. for (let i = 0; i < sourceList.value.data.length; i++) {
  1140. const ele = sourceList.value.data[i];
  1141. for (const key in fileObj) {
  1142. if (
  1143. ele.id == key &&
  1144. fileObj[ele.id] &&
  1145. fileObj[ele.id].length > 0
  1146. ) {
  1147. ele.fileList = fileObj[ele.id].filter(
  1148. (x) => x.businessType == "0"
  1149. );
  1150. }
  1151. }
  1152. }
  1153. });
  1154. }
  1155. },
  1156. (err) => {
  1157. loading.value = false;
  1158. }
  1159. );
  1160. };
  1161. const getDict = () => {
  1162. proxy
  1163. .get("/tenantDept/list", {
  1164. pageNum: 1,
  1165. pageSize: 9999,
  1166. keyword: "",
  1167. tenantId: proxy.useUserStore().user.tenantId,
  1168. type: 0,
  1169. })
  1170. .then((res) => {
  1171. companyData.value = res.data.map((x) => ({
  1172. ...x,
  1173. label: x.deptName,
  1174. value: x.deptId,
  1175. }));
  1176. treeDataOne.value = proxy.handleTree(res.data, "deptId");
  1177. });
  1178. };
  1179. getDict();
  1180. const treeChange = (e) => {
  1181. if (e.id != undefined) {
  1182. sourceList.value.pagination.productClassifyId = e.id;
  1183. getList({ productClassifyId: e.id });
  1184. }
  1185. };
  1186. const openModal = () => {
  1187. const productCustomInfoListData = [
  1188. {
  1189. type: 1,
  1190. isCheck: 0,
  1191. isCheckBox: false,
  1192. fileList: [],
  1193. remark: "",
  1194. },
  1195. {
  1196. type: 2,
  1197. isCheck: 0,
  1198. isCheckBox: false,
  1199. fileList: [],
  1200. remark: "",
  1201. },
  1202. {
  1203. type: 3,
  1204. isCheck: 0,
  1205. isCheckBox: false,
  1206. fileList: [],
  1207. remark: "",
  1208. },
  1209. ];
  1210. dialogVisible.value = true;
  1211. modalType.value = "add";
  1212. formData.data = {
  1213. definition: "1",
  1214. fileList: [],
  1215. currency: "",
  1216. prodFileList: [],
  1217. isFold: 0,
  1218. isCustomized: 0,
  1219. packAsk: [],
  1220. productBomDetailList: [],
  1221. productCustomInfoList: productCustomInfoListData,
  1222. };
  1223. // if (currencyData.value && currencyData.value.length > 0) {
  1224. // formData.data.currency = currencyData.value[0].dictKey;
  1225. // }
  1226. };
  1227. const openExcel = () => {
  1228. openExcelDialog.value = true;
  1229. };
  1230. const submitForm = () => {
  1231. formDom.value.handleSubmit((valid) => {
  1232. if (!formData.data.fileList.length > 0) {
  1233. return proxy.msgTip("请上传图片", 2);
  1234. }
  1235. if (!formData.data.prodFileList.length > 0) {
  1236. return proxy.msgTip("请上传生产plt文件", 2);
  1237. }
  1238. let checkNum = 0;
  1239. for (let i = 0; i < formData.data.productCustomInfoList.length; i++) {
  1240. const ele = formData.data.productCustomInfoList[i];
  1241. ele.isCheck = ele.isCheckBox ? 1 : 0;
  1242. if (ele.isCheckBox) {
  1243. checkNum += 1;
  1244. }
  1245. if (ele.isCheckBox) {
  1246. if (!(ele.fileList && ele.fileList.length > 0)) {
  1247. return proxy.msgTip(`请上传${getLabel(ele.type)}附件`, 2);
  1248. }
  1249. }
  1250. }
  1251. if (checkNum == 0 && formData.data.isCustomized == 1) {
  1252. return proxy.msgTip(`请至少勾选一个定制内容`, 2);
  1253. }
  1254. if (formData.data.packAsk && formData.data.packAsk.length > 0) {
  1255. formData.data.packAsk = formData.data.packAsk.join(",");
  1256. } else {
  1257. formData.data.packAsk = "";
  1258. }
  1259. submitLoading.value = true;
  1260. proxy.post("/productInfo/" + modalType.value, formData.data).then(
  1261. (res) => {
  1262. proxy.msgTip("操作成功", 1);
  1263. dialogVisible.value = false;
  1264. submitLoading.value = false;
  1265. getList();
  1266. },
  1267. (err) => {
  1268. submitLoading.value = false;
  1269. if (formData.data.packAsk) {
  1270. formData.data.packAsk = formData.data.packAsk.split(",");
  1271. } else {
  1272. formData.data.packAsk = [];
  1273. }
  1274. }
  1275. );
  1276. });
  1277. };
  1278. const getTreeList = () => {
  1279. proxy
  1280. .post("/productClassify/tree", { parentId: "", name: "", definition: "1" })
  1281. .then((message) => {
  1282. treeListData.value = [
  1283. {
  1284. id: "",
  1285. label: "全部",
  1286. parentId: "",
  1287. children: message,
  1288. },
  1289. ];
  1290. treeData.value = message;
  1291. });
  1292. };
  1293. const getTechnologyData = () => {
  1294. proxy.post("/technology/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  1295. technologyData.value = res.rows;
  1296. });
  1297. };
  1298. const getDtl = (row) => {
  1299. modalType.value = "edit";
  1300. proxy.post("/productInfo/detail", { id: row.id }).then((res) => {
  1301. formData.data = res;
  1302. formData.data.rawMaterialIdLabel =
  1303. res.rawMaterialName + "," + res.rawMaterialCode;
  1304. formData.data.rawMaterialSize = `${res.rawMaterialLength}*${res.rawMaterialWidth}*${res.rawMaterialHeight}`;
  1305. formData.data.rawMaterialList = [
  1306. {
  1307. rawMaterialName: res.rawMaterialName,
  1308. rawMaterialCode: res.rawMaterialCode,
  1309. rawMaterialLength: res.rawMaterialLength,
  1310. rawMaterialWidth: res.rawMaterialWidth,
  1311. rawMaterialHeight: res.rawMaterialHeight,
  1312. rawMaterialColor: res.rawMaterialColor,
  1313. },
  1314. ];
  1315. if (
  1316. formData.data.productCustomInfoList &&
  1317. formData.data.productCustomInfoList.length > 0
  1318. ) {
  1319. formData.data.productCustomInfoList.forEach((x) => {
  1320. x.isCheckBox = x.isCheck == 1;
  1321. if (!x.fileList) {
  1322. x.fileList = [];
  1323. } else {
  1324. x.fileList = x.fileList.map((x) => ({
  1325. ...x,
  1326. url: x.fileUrl,
  1327. name: x.fileName,
  1328. }));
  1329. }
  1330. });
  1331. } else {
  1332. formData.data.productCustomInfoList = [
  1333. {
  1334. type: 1,
  1335. isCheck: 0,
  1336. isCheckBox: false,
  1337. fileList: [],
  1338. remark: "",
  1339. },
  1340. {
  1341. type: 2,
  1342. isCheck: 0,
  1343. isCheckBox: false,
  1344. fileList: [],
  1345. remark: "",
  1346. },
  1347. {
  1348. type: 3,
  1349. isCheck: 0,
  1350. isCheckBox: false,
  1351. fileList: [],
  1352. remark: "",
  1353. },
  1354. ];
  1355. }
  1356. if (formData.data.packAsk) {
  1357. formData.data.packAsk = formData.data.packAsk.split(",");
  1358. }
  1359. formData.data.fileList = row.fileList.map((x) => ({
  1360. ...x,
  1361. url: x.fileUrl,
  1362. name: x.fileName,
  1363. }));
  1364. if (formData.data.fileList.length > 0) {
  1365. formData.data.imageUrl = formData.data.fileList[0].fileUrl;
  1366. }
  1367. proxy
  1368. .post("/fileInfo/getList", { businessIdList: [row.id] })
  1369. .then((fileObj) => {
  1370. if (fileObj[row.id] && fileObj[row.id].length > 0) {
  1371. formData.data.prodFileList = fileObj[row.id]
  1372. .filter((x) => x.businessType == "2")
  1373. .map((item) => {
  1374. return {
  1375. ...item,
  1376. name: item.fileName,
  1377. url: item.fileUrl,
  1378. };
  1379. });
  1380. } else {
  1381. formData.data.prodFileList = [];
  1382. }
  1383. });
  1384. dialogVisible.value = true;
  1385. });
  1386. };
  1387. const rawMaterialData = ref([]);
  1388. const getRawMaterialData = () => {
  1389. proxy.post("/productInfo/page", { productClassifyId: 100 }).then((res) => {
  1390. rawMaterialData.value = res.rows.map((x) => ({
  1391. label:
  1392. x.name +
  1393. "," +
  1394. x.customCode +
  1395. "," +
  1396. `${x["length"]}*${x.width}*${x.height}(cm)` +
  1397. "," +
  1398. x.color,
  1399. value: x.id,
  1400. }));
  1401. // rawMaterialData.value = res.rows.map((x) => ({
  1402. // label: x.name + "," + x.customCode,
  1403. // value: x.id,
  1404. // }));
  1405. });
  1406. };
  1407. getRawMaterialData();
  1408. const bomDialog = ref(false);
  1409. const bomFormDom = ref(null);
  1410. const bomFormOption = reactive({
  1411. disabled: false,
  1412. inline: true,
  1413. labelWidth: 100,
  1414. itemWidth: 100,
  1415. });
  1416. const bomFormConfig = computed(() => {
  1417. return [
  1418. // {
  1419. // type: "title1",
  1420. // title: "BOM 信息",
  1421. // },
  1422. // {
  1423. // type: "select",
  1424. // prop: "rawMaterialId",
  1425. // label: "原材料",
  1426. // itemWidth: 100,
  1427. // data: rawMaterialData.value,
  1428. // filterable: true,
  1429. // disabled: false,
  1430. // },
  1431. // {
  1432. // type: "slot",
  1433. // slotName: "accessories",
  1434. // label: "包材辅料",
  1435. // itemWidth: 100,
  1436. // },
  1437. // {
  1438. // type: "title1",
  1439. // title: "生产工序",
  1440. // },
  1441. {
  1442. type: "slot",
  1443. slotName: "detail",
  1444. label: "",
  1445. },
  1446. ];
  1447. });
  1448. const bomRules = ref({
  1449. rawMaterialId: [
  1450. { required: true, message: "请选择原材料", trigger: "change" },
  1451. ],
  1452. quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  1453. });
  1454. const bomSetting = (row) => {
  1455. bomDialog.value = true;
  1456. proxy.post("/productBomInfo/detail", { id: row.id }).then((res) => {
  1457. formData.bomData = {
  1458. name: row.name,
  1459. code: row.customCode,
  1460. id: res.id,
  1461. rawMaterialId: res.rawMaterialId,
  1462. productBomDetailList: [],
  1463. processesList: res.processesList,
  1464. };
  1465. if (res.productBomDetailList && res.productBomDetailList.length > 0) {
  1466. formData.bomData.productBomDetailList = res.productBomDetailList.filter(
  1467. (x) => x.type == 2
  1468. );
  1469. } else {
  1470. formData.bomData.productBomDetailList = [];
  1471. }
  1472. });
  1473. };
  1474. const submitBomForm = () => {
  1475. bomFormDom.value.handleSubmit((valid) => {
  1476. if (!formData.bomData.productBomDetailList.length > 0) {
  1477. return proxy.msgTip("请选择包材辅料", 2);
  1478. }
  1479. formData.bomData.productBomDetailList.push({
  1480. materialId: formData.bomData.rawMaterialId,
  1481. type: 1,
  1482. quantity: 1,
  1483. });
  1484. submitLoading.value = true;
  1485. proxy.post("/productBomInfo/edit", formData.bomData).then(
  1486. (res) => {
  1487. proxy.msgTip("操作成功", 1);
  1488. getList();
  1489. bomDialog.value = false;
  1490. submitLoading.value = false;
  1491. },
  1492. (err) => {
  1493. submitLoading.value = false;
  1494. }
  1495. );
  1496. });
  1497. };
  1498. const openSelectMaterial = ref(false);
  1499. const openType = ref(-1);
  1500. const clickOpenSelectMaterial = (type) => {
  1501. openType.value = type;
  1502. openSelectMaterial.value = true;
  1503. };
  1504. const selectMaterial = (row) => {
  1505. if (openType.value == 1) {
  1506. let flag = formData.data.productBomDetailList.some(
  1507. (x) => x.materialId == row.id
  1508. );
  1509. if (!flag) {
  1510. formData.data.productBomDetailList.push({
  1511. materialId: row.id,
  1512. type: 2,
  1513. materialName: row.name,
  1514. materialCode: row.customCode,
  1515. materialLength: row["length"],
  1516. materialWidth: row.width,
  1517. materialHeight: row.height,
  1518. materialColor: row.color,
  1519. quantity: null,
  1520. standardDosage: 1,
  1521. lossRate: null,
  1522. remark: "",
  1523. });
  1524. proxy.msgTip("选择成功");
  1525. } else {
  1526. proxy.msgTip("该物料已选择", 2);
  1527. }
  1528. } else {
  1529. let flag = formData.bomData.productBomDetailList.some(
  1530. (x) => x.materialId == row.id
  1531. );
  1532. if (!flag) {
  1533. formData.bomData.productBomDetailList.push({
  1534. type: 2,
  1535. materialName: row.name,
  1536. materialCode: row.customCode,
  1537. materialLength: row["length"],
  1538. materialWidth: row.width,
  1539. materialHeight: row.height,
  1540. materialColor: row.color,
  1541. materialId: row.id,
  1542. quantity: null,
  1543. });
  1544. proxy.msgTip("选择成功");
  1545. } else {
  1546. proxy.msgTip("该物料已选择", 2);
  1547. }
  1548. }
  1549. };
  1550. const handleRemove = (index, type) => {
  1551. if (type == 1) {
  1552. formData.data.productBomDetailList.splice(index, 1);
  1553. } else {
  1554. formData.bomData.productBomDetailList.splice(index, 1);
  1555. }
  1556. };
  1557. const handleClickFile = (file) => {
  1558. window.open(file.fileUrl, "_blank");
  1559. };
  1560. const handleProgress = () => {
  1561. excelLoading.value = true;
  1562. };
  1563. const handleError = (err) => {
  1564. proxy.msgTip(`${err},请重试`, 2);
  1565. openExcelDialog.value = false;
  1566. excelLoading.value = false;
  1567. };
  1568. const handleSuccess = (res) => {
  1569. if (res.code != 200) {
  1570. return proxy.msgTip(`${err},请重试`, 2);
  1571. } else {
  1572. proxy.msgTip(`导入成功`, 1);
  1573. openExcelDialog.value = false;
  1574. excelLoading.value = false;
  1575. getList();
  1576. }
  1577. };
  1578. const clickSelect = (item) => {
  1579. proxy.$emit("selectProduct", item);
  1580. };
  1581. const handleClickUpload = async (att, flag) => {
  1582. let res = null;
  1583. let path = "";
  1584. proxy.msgTip("请稍后", 2);
  1585. if (flag) {
  1586. res = await proxy.post("/fileService/createTempFolder");
  1587. if (res && res.path) {
  1588. formData.data[att] = res.path;
  1589. path = res.path;
  1590. }
  1591. } else {
  1592. path = formData.data[att];
  1593. }
  1594. let a = document.createElement("a");
  1595. a.href = "printer://" + `ftp://${import.meta.env.VITE_APP_IP}/` + path + "/";
  1596. a.style.display = "none";
  1597. document.body.appendChild(a);
  1598. a.click();
  1599. document.body.removeChild(a);
  1600. };
  1601. getTechnologyData();
  1602. getTreeList();
  1603. getList();
  1604. const exportExcel = () => {
  1605. proxy.msgTip("正在导出,请稍后", 2);
  1606. proxy
  1607. .postTwo("/productInfo/exportExcel", sourceList.value.pagination)
  1608. .then((res) => {
  1609. proxy.downloadFile(res, "产品数据.xlsx");
  1610. });
  1611. };
  1612. const handleBeforeUploadOne = async (file, index) => {
  1613. const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  1614. file.id = res.id;
  1615. file.fileUrl = res.fileUrl;
  1616. uploadData.value = res.uploadBody;
  1617. formData.data.productCustomInfoList[index].fileData = res;
  1618. return true;
  1619. };
  1620. const handleSuccessOne = (index) => {
  1621. if (
  1622. formData.data.productCustomInfoList[index].fileData &&
  1623. formData.data.productCustomInfoList[index].fileData.fileUrl
  1624. ) {
  1625. let file = formData.data.productCustomInfoList[index].fileData;
  1626. formData.data.productCustomInfoList[index].fileList.push({
  1627. id: file.id,
  1628. fileName: file.fileName,
  1629. name: file.fileName,
  1630. url: file.fileUrl,
  1631. fileUrl: file.fileUrl,
  1632. });
  1633. formData.data.productCustomInfoList[index].fileData = {};
  1634. }
  1635. };
  1636. const handleRemoveFile = (file, index) => {
  1637. let sonIndex = formData.data.productCustomInfoList[index].fileList.findIndex(
  1638. (x) => x.id == file.id || x.id == file.raw.id
  1639. );
  1640. if (sonIndex > -1) {
  1641. formData.data.productCustomInfoList[index].fileList.splice(sonIndex, 1);
  1642. }
  1643. };
  1644. const onPreviewFile = (file) => {
  1645. if (file && file.fileUrl) {
  1646. window.open(file.fileUrl, "_blank");
  1647. } else {
  1648. window.open(file.raw.fileUrl, "_blank");
  1649. }
  1650. };
  1651. let obj = {
  1652. 1: "定制刀模",
  1653. 2: "定制纹路",
  1654. 3: "定制模具",
  1655. };
  1656. const getLabel = (type) => {
  1657. return obj[type];
  1658. };
  1659. const handleChangeIsCustomized = (val) => {
  1660. return;
  1661. if (val == 1) {
  1662. formData.data.productCustomInfoList = [
  1663. {
  1664. type: 1,
  1665. isCheck: 0,
  1666. isCheckBox: false,
  1667. fileList: [],
  1668. remark: "",
  1669. },
  1670. {
  1671. type: 2,
  1672. isCheck: 0,
  1673. isCheckBox: false,
  1674. fileList: [],
  1675. remark: "",
  1676. },
  1677. {
  1678. type: 3,
  1679. isCheck: 0,
  1680. isCheckBox: false,
  1681. fileList: [],
  1682. remark: "",
  1683. },
  1684. ];
  1685. }
  1686. };
  1687. const openSelectRawMaterial = ref(false);
  1688. const selectRawMaterial = (row) => {
  1689. // formData.data.rawMaterialId = row.id;
  1690. // formData.data.rawMaterialIdLabel = row.name + "," + row.customCode;
  1691. // formData.data.rawMaterialSize = `${row["length"]}*${row.width}*${row.height}`;
  1692. // formData.data.rawMaterialColor = row.color;
  1693. // formData.data.rawMaterialList = [
  1694. // {
  1695. // rawMaterialName: row.name,
  1696. // rawMaterialCode: row.customCode,
  1697. // rawMaterialLength: row["length"],
  1698. // rawMaterialWidth: row.width,
  1699. // rawMaterialHeight: row.height,
  1700. // rawMaterialColor: row.color,
  1701. // },
  1702. // ];
  1703. // openSelectRawMaterial.value = false;
  1704. if (dialogOpenType.value == 1) {
  1705. let flag = formData.data.productBomDetailList.some(
  1706. (x) => x.materialId == row.id
  1707. );
  1708. if (!flag) {
  1709. formData.data.productBomDetailList.unshift({
  1710. materialId: row.id,
  1711. type: 1,
  1712. materialName: row.name,
  1713. materialCode: row.customCode,
  1714. materialLength: row["length"],
  1715. materialWidth: row.width,
  1716. materialHeight: row.height,
  1717. materialColor: row.color,
  1718. quantity: null,
  1719. standardDosage: 1,
  1720. lossRate: null,
  1721. remark: "",
  1722. });
  1723. proxy.msgTip("选择成功");
  1724. } else {
  1725. proxy.msgTip("该物料已选择", 2);
  1726. }
  1727. }
  1728. };
  1729. const openSelectTechnology = ref(false);
  1730. const dialogOpenType = ref(-1);
  1731. const openDialog = (type) => {
  1732. dialogOpenType.value = type;
  1733. if (type == 1) {
  1734. openSelectRawMaterial.value = true;
  1735. }
  1736. if (type == 2) {
  1737. openSelectTechnology.value = true;
  1738. }
  1739. if (type == 3) {
  1740. clickOpenSelectMaterial(1);
  1741. }
  1742. };
  1743. const selectTechnology = (row) => {
  1744. if (
  1745. dialogOpenType.value == 2 &&
  1746. row.processRouteList &&
  1747. row.processRouteList.length > 0
  1748. ) {
  1749. formData.data.productBomDetailList =
  1750. formData.data.productBomDetailList.filter((x) => x.type != 3);
  1751. let index = formData.data.productBomDetailList.findIndex(
  1752. (x) => x.type == 2
  1753. );
  1754. let arr = row.processRouteList.map((x) => ({
  1755. type: 3,
  1756. materialId: x.id,
  1757. materialName: x.name,
  1758. quantity: null,
  1759. standardDosage: 1,
  1760. lossRate: null,
  1761. remark: "",
  1762. }));
  1763. if (index >= 0) {
  1764. formData.data.productBomDetailList.splice(index, 0, ...arr);
  1765. } else {
  1766. formData.data.productBomDetailList.splice(
  1767. formData.data.productBomDetailList.length
  1768. ? formData.data.productBomDetailList.length
  1769. : 0,
  1770. 0,
  1771. ...arr
  1772. );
  1773. }
  1774. openSelectTechnology.value = false;
  1775. return proxy.msgTip("选择成功", 1);
  1776. }
  1777. };
  1778. </script>
  1779. <style lang="scss" scoped>
  1780. .box {
  1781. padding: 10px;
  1782. display: flex;
  1783. justify-content: space-between;
  1784. .tree {
  1785. width: 300px;
  1786. }
  1787. .content {
  1788. width: calc(100% - 310px);
  1789. }
  1790. }
  1791. .pic {
  1792. object-fit: contain;
  1793. width: 50px;
  1794. height: 50px;
  1795. cursor: pointer;
  1796. vertical-align: middle;
  1797. }
  1798. .table {
  1799. border-collapse: collapse;
  1800. border-spacing: 0;
  1801. td {
  1802. text-align: center;
  1803. padding: 2px 4px;
  1804. // padding: 5px 10px;
  1805. }
  1806. }
  1807. .small-title {
  1808. padding-left: 15px;
  1809. margin-bottom: 10px;
  1810. color: #3366ff;
  1811. font-size: 14px;
  1812. }
  1813. :deep(.el-checkbox) {
  1814. margin-right: 0px;
  1815. }
  1816. </style>