add.vue 66 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484
  1. <template>
  2. <div id="addDemandList">
  3. <el-card>
  4. <span>基本信息</span>
  5. <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto">
  6. <el-row :gutter="10">
  7. <el-col :span="1.5">
  8. <el-form-item label="编码">
  9. <el-input
  10. v-model="basicForm.code"
  11. size="mini"
  12. disabled
  13. style="width: 200px"
  14. />
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="1.5">
  18. <el-form-item label="组织" prop="org" :rules="{ required: true, message: '请选择组织', trigger: 'blur' }">
  19. <el-select clearable size="mini" v-model="basicForm.org" :disabled="sonDisable" @focus="chooseOrg('ORG_PARAM', true, '选择组织')" style="width: 200px">
  20. <el-option v-for="item in orgOptions" :key="item.id" :label="item.name" :value="item.id" />
  21. </el-select>
  22. </el-form-item>
  23. </el-col>
  24. <el-col :span="1.5">
  25. <el-form-item label="需求处理方式">
  26. <el-select disabled v-model="basicForm.demandBusinessType" size="mini" style="width: 200px">
  27. <el-option v-for="dict in dict.type.sys_processing_mode" :key="dict.value" :label="dict.label" :value="dict.value">
  28. </el-option>
  29. </el-select>
  30. </el-form-item>
  31. </el-col>
  32. <el-col :span="1.5">
  33. <el-form-item label="单据状态">
  34. <el-select disabled v-model="basicForm.status" size="mini" style="width: 200px">
  35. <el-option v-for="dict in dict.type.sys_status" :key="dict.value" :label="dict.label" :value="dict.value">
  36. </el-option>
  37. </el-select>
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="1.5">
  41. <el-form-item label="需求客户">
  42. <el-select clearable size="mini" v-model="basicForm.customer" :disabled="sonDisable" @clear="cleanCustomer" @focus="chooseOrg('CUSTOMER_PARAM', true, '选择客户')" style="width: 200px">
  43. <el-option v-for="item in customerOptions" :key="item.id" :label="item.name" :value="item.id" />
  44. </el-select>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="1.5">
  48. <el-form-item label="需求客户名称">
  49. <el-input disabled v-model="basicForm.customerName" size="mini" style="width: 200px"></el-input>
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="1.5">
  53. <el-form-item label="客户负责人">
  54. <el-select disabled size="mini" v-model="basicForm.customerPrincipal" style="width: 200px">
  55. <el-option v-for="item in manOptions" :key="item.id" :label="item.name" :value="item.code"/>
  56. </el-select>
  57. </el-form-item>
  58. </el-col>
  59. <el-col :span="1.5">
  60. <el-form-item label="需求人员">
  61. <el-select clearable size="mini" v-model="basicForm.demandPersonal" :disabled="sonDisable" @focus="chooseOrg('CONTACTS_PARAM', true, '需求人员')" style="width: 200px">
  62. <el-option v-for="item in personOptions" :key="item.id" :label="item.name" :value="item.code" />
  63. </el-select>
  64. </el-form-item>
  65. </el-col>
  66. <el-col :span="1.5">
  67. <el-form-item label="需求部门">
  68. <el-select clearable v-model="basicForm.demandDept" size="mini" :disabled="sonDisable" @focus="chooseOrg('DEPT_PARAM', true, '需求部门')" style="width: 200px">
  69. <el-option
  70. v-for="item in deptOptions"
  71. :key="item.id"
  72. :label="item.name"
  73. :value="item.id">
  74. </el-option>
  75. </el-select>
  76. </el-form-item>
  77. </el-col>
  78. <el-col :span="1.5">
  79. <el-form-item label="需求日期" prop="demandDate" :rules="{ required: true, message: '请选择需求日期', trigger: 'blur' }">
  80. <el-date-picker
  81. v-model="basicForm.demandDate"
  82. :disabled="sonDisable"
  83. clearable
  84. type="date"
  85. value-format="yyyy-MM-dd"
  86. @change="changeDemandDate"
  87. size="mini"
  88. style="width: 200px"
  89. >
  90. </el-date-picker>
  91. </el-form-item>
  92. </el-col>
  93. <el-col :span="1.5">
  94. <el-form-item label="单据来源">
  95. <el-select v-model="basicForm.source" disabled size="mini" style="width: 200px">
  96. <el-option v-for="dict in dict.type.sys_bill_source" :key="dict.value" :label="dict.label" :value="dict.value">
  97. </el-option>
  98. </el-select>
  99. </el-form-item>
  100. </el-col>
  101. <el-col :span="1.5">
  102. <el-form-item label="业务类型" prop="billType" :rules="{ required: true, message: '请选择业务类型', trigger: 'blur' }">
  103. <el-select clearable v-model="basicForm.billType" @change="changeBillType" :disabled="sonDisable" size="mini" style="width: 200px">
  104. <el-option v-for=" dict in dict.type.sys_business" :key="dict.value" :label="dict.label" :value="dict.value">
  105. </el-option>
  106. </el-select>
  107. </el-form-item>
  108. </el-col>
  109. <el-col :span="1.5">
  110. <el-form-item label="是否客户指定">
  111. <el-select clearable v-model="basicForm.isSpeical" :disabled="sonDisable" size="mini" style="width: 200px">
  112. <el-option v-for=" item in options" :key="item.value" :label="item.label" :value="item.value">
  113. </el-option>
  114. </el-select>
  115. </el-form-item>
  116. </el-col>
  117. <!-- <el-col :span="1.5">
  118. <el-form-item label="是否处理需求">
  119. <el-input
  120. v-model="basicForm.isProcess"
  121. size="mini"
  122. placeholder=""
  123. clearable
  124. style="width: 200px"
  125. />
  126. </el-form-item>
  127. </el-col> -->
  128. <el-col :span="1.5">
  129. <el-form-item label="备注">
  130. <el-input
  131. v-model.trim="basicForm.remark"
  132. size="mini"
  133. :disabled="sonDisable"
  134. clearable
  135. style="width: 200px"
  136. />
  137. </el-form-item>
  138. </el-col>
  139. </el-row>
  140. <span>明细信息</span>
  141. <div class="btn_grooup">
  142. <el-button type="primary" size="mini" @click="addLine" v-if="!sonDisable">增行</el-button>
  143. <el-button type="primary" size="mini" v-if="!sonDisable" @click="adjustPl">批量调整</el-button>
  144. <el-button type="primary" size="mini" v-if="sonPageStu == 'check' || sonPageStu == 'edit'" @click="showReserved">货权预留单</el-button>
  145. </div>
  146. <el-table
  147. :data="basicForm.puDemandItemList"
  148. fit
  149. max-height="300"
  150. style="font-size: 12px;"
  151. @selection-change="handleSelectionChange"
  152. :cell-class-name="cellClassName"
  153. >
  154. <el-table-column show-overflow-tooltip type="selection"/>
  155. <el-table-column show-overflow-tooltip label="序号" type="index" align="center"/>
  156. <el-table-column show-overflow-tooltip label="行状态" align="center" prop="status" :formatter="hangStatus" width="150px"/>
  157. <el-table-column show-overflow-tooltip label="行号" align="center" prop="rowNo">
  158. <template slot-scope="scope">
  159. {{scope.$index + 1 + '0'}}
  160. </template>
  161. </el-table-column>
  162. <!-- <el-table-column show-overflow-tooltip label="业务部门名称" align="center" width="180px"/> -->
  163. <!-- <el-table-column show-overflow-tooltip label="业务部门" align="center" width="180px"/> -->
  164. <el-table-column show-overflow-tooltip label="需求客户" align="center" prop="demandCustomerName" width="200px"/>
  165. <el-table-column show-overflow-tooltip label="一级品类" align="center" prop="materialClassifyOneName" width="180px">
  166. <template slot-scope="scope">
  167. <el-form-item class="hang">
  168. <el-input readonly size="mini" v-model="scope.row.materialClassifyOneName"/>
  169. </el-form-item>
  170. </template>
  171. </el-table-column>
  172. <el-table-column show-overflow-tooltip label="二级品类" align="center" prop="materialClassifyTwoName" width="180px">
  173. <template slot-scope="scope">
  174. <el-form-item class="hang">
  175. <el-input readonly size="mini" v-model="scope.row.materialClassifyTwoName"/>
  176. </el-form-item>
  177. </template>
  178. </el-table-column>
  179. <el-table-column show-overflow-tooltip label="三级品类" align="center" prop="materialClassifyThreeName" width="180px">
  180. <template slot-scope="scope">
  181. <el-form-item class="hang">
  182. <el-input readonly size="mini" v-model="scope.row.materialClassifyThreeName"/>
  183. </el-form-item>
  184. </template>
  185. </el-table-column>
  186. <el-table-column show-overflow-tooltip label="四级品类" align="center" prop="materialClassifyFourName" width="180px">
  187. <template slot-scope="scope">
  188. <el-form-item class="hang">
  189. <el-input readonly size="mini" v-model="scope.row.materialClassifyFourName"/>
  190. </el-form-item>
  191. </template>
  192. </el-table-column>
  193. <el-table-column show-overflow-tooltip label="采购员名称" align="center" prop="buyerName" width="120px"/>
  194. <el-table-column show-overflow-tooltip label="采购员" align="center" prop="buyer"/>
  195. <el-table-column show-overflow-tooltip label="物料编码" align="center" prop="materialCode" width="230px">
  196. <template slot-scope="scope">
  197. <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'materialCode'" :rules="{ required: true, message: '请选择物料编码', trigger: 'blur' }">
  198. <el-input clearable :disabled="sonDisable" size="mini" v-model="scope.row.materialCode" @paste.native="pasteMe($event, scope, scope.$index)">
  199. <el-button size="mini" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="chooseMaterial(scope.$index)"></el-button>
  200. </el-input>
  201. </el-form-item>
  202. </template>
  203. </el-table-column>
  204. <el-table-column show-overflow-tooltip label="物料名称" align="center" prop="materialName" width="230px" />
  205. <el-table-column show-overflow-tooltip label="规格" align="center" prop="specification" />
  206. <el-table-column show-overflow-tooltip label="型号" align="center" prop="model"/>
  207. <el-table-column show-overflow-tooltip label="单位" align="center" prop="unitName"/>
  208. <el-table-column show-overflow-tooltip label="生产厂家/代理人" align="center" prop="manufacturerName" width="230px"/>
  209. <el-table-column show-overflow-tooltip label="注册人" align="center" prop="registrant" width="150px"/>
  210. <el-table-column show-overflow-tooltip label="采购周期" align="center" prop="puPeriod" width="150px">
  211. <template slot-scope="scope">
  212. <el-form-item class="hang">
  213. <el-input type="number" min="0" clearable :readonly="sonDisable" size="mini" v-model="scope.row.puPeriod"></el-input>
  214. </el-form-item>
  215. </template>
  216. </el-table-column>
  217. <el-table-column show-overflow-tooltip label="有效期" align="center" prop="expiry" width="120px"/>
  218. <el-table-column show-overflow-tooltip label="有效期单位" align="center" prop="expiryUnit" width="120px"/>
  219. <el-table-column show-overflow-tooltip label="最小包装" align="center" prop="minPackage" width="120px"/>
  220. <el-table-column show-overflow-tooltip label="最小订货量" align="center" prop="minOrderQty" width="120px"/>
  221. <el-table-column show-overflow-tooltip label="最小批量" align="center" prop="minBatch" width="120px"/>
  222. <el-table-column show-overflow-tooltip label="安全库存" align="center" prop="safeStock" width="120px">
  223. <template slot-scope="scope">
  224. <el-form-item class="hang">
  225. <el-input clearable :readonly="sonDisable" size="mini" v-model="scope.row.safeStock"/>
  226. </el-form-item>
  227. </template>
  228. </el-table-column>
  229. <el-table-column show-overflow-tooltip label="预留比例" align="center" prop="reservedProportion" width="150px">
  230. <template slot-scope="scope">
  231. <el-form-item class="hang">
  232. <el-select clearable :disabled="sonDisable" size="mini" v-model="scope.row.reservedProportion" @change="getYLSL(scope)" @clear="scope.row.reservedQty = ''">
  233. <el-option v-for=" dict in dict.type.sys_reserve_ratio" :key="dict.value" :label="dict.label" :value="dict.value">
  234. </el-option>
  235. </el-select>
  236. <!-- <el-input v-model="scope.row.reservedProportion"/> -->
  237. </el-form-item>
  238. </template>
  239. </el-table-column>
  240. <el-table-column show-overflow-tooltip label="预留周期" align="center" prop="reservedPeriod" width="150px">
  241. <template slot-scope="scope">
  242. <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'reservedPeriod'" :rules="{ required: scope.row.reservedProportion && scope.row.reservedProportion !== '' , message: '请填写预留周期', trigger: 'blur' }">
  243. <el-input type="number" min="0" clearable :readonly="sonDisable" size="mini" v-model="scope.row.reservedPeriod"></el-input>
  244. </el-form-item>
  245. </template>
  246. </el-table-column>
  247. <el-table-column show-overflow-tooltip label="预留数量" align="center" prop="reservedQty" width="150px">
  248. <template slot-scope="scope">
  249. <el-form-item class="hang">
  250. <el-input type="number" min="0" readonly size="mini" v-model="scope.row.reservedQty"></el-input>
  251. </el-form-item>
  252. </template>
  253. </el-table-column>
  254. <el-table-column show-overflow-tooltip label="月均销量" align="center" prop="averageQtyMonth" width="120px"/>
  255. <el-table-column show-overflow-tooltip label="实际(业务)需求量" align="center" prop="qty" width="120px">
  256. <template slot-scope="scope">
  257. <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'qty'" :rules="{ required: true, message: '请填写实际(业务)需求量', trigger: 'blur' }">
  258. <el-input type="number" min="0" clearable :readonly="sonDisable" size="mini" v-model="scope.row.qty" @input="getYLSL(scope)"/>
  259. </el-form-item>
  260. </template>
  261. </el-table-column>
  262. <el-table-column show-overflow-tooltip label="需求可用周期" align="center" prop="demandPeriod" width="120px"/>
  263. <el-table-column show-overflow-tooltip label="集团预测分类" align="center" prop="forecastClassify" width="120px"/>
  264. <el-table-column show-overflow-tooltip label="近一月需求" align="center" prop="onemonthAvgVolume" width="120px"/>
  265. <el-table-column show-overflow-tooltip label="近三月需求" align="center" prop="threemonthAvgVolume" width="120px"/>
  266. <el-table-column show-overflow-tooltip label="交货日期" align="center" prop="deliveryDate" width="230px">
  267. <template slot-scope="scope">
  268. <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'deliveryDate'" :rules="{ required: true, message: '请填写交货日期', trigger: 'blur' }">
  269. <el-date-picker
  270. v-model="scope.row.deliveryDate"
  271. :readonly="sonDisable"
  272. clearable
  273. type="date"
  274. size="mini"
  275. value-format="yyyy-MM-dd"
  276. :picker-options="pickerOptionsEnd"
  277. placeholder="选择日期">
  278. </el-date-picker>
  279. </el-form-item>
  280. </template>
  281. </el-table-column>
  282. <el-table-column show-overflow-tooltip label="补单标识" align="center" prop="isReplenishment" width="100px">
  283. <template slot-scope="scope">
  284. <el-form-item class="hang">
  285. <el-switch
  286. v-model="scope.row.isReplenishment"
  287. disabled
  288. active-value="Y"
  289. inactive-value="N"
  290. active-color="#13ce66"
  291. inactive-color="#a1a3a9">
  292. </el-switch>
  293. </el-form-item>
  294. </template>
  295. </el-table-column>
  296. <el-table-column show-overflow-tooltip label="批号锁定标识" align="center" prop="isBatchLock" width="100px">
  297. <template slot-scope="scope">
  298. <el-form-item class="hang">
  299. <el-switch
  300. v-model="scope.row.isBatchLock"
  301. :disabled="sonDisable"
  302. active-value="Y"
  303. inactive-value="N"
  304. active-color="#13ce66"
  305. inactive-color="#a1a3a9">
  306. </el-switch>
  307. </el-form-item>
  308. </template>
  309. </el-table-column>
  310. <el-table-column show-overflow-tooltip label="业务备注" align="center" prop="remark" width="150px">
  311. <template slot-scope="scope">
  312. <el-form-item class="hang">
  313. <el-input clearable :readonly="sonDisable" size="mini" v-model="scope.row.remark"/>
  314. </el-form-item>
  315. </template>
  316. </el-table-column>
  317. <el-table-column show-overflow-tooltip label="采购备注" align="center" prop="puRemark" width="150px"/>
  318. <!-- <el-table-column show-overflow-tooltip label="末级供应仓库存量" align="center" prop="lastWarehouseQty" /> -->
  319. <el-table-column show-overflow-tooltip label="调拨占有量" align="center" prop="superiorAllotQty" width="150px"/>
  320. <el-table-column show-overflow-tooltip label="最终净需求量" align="center" prop="resDemandQty" width="150px">
  321. <template slot-scope="scope">
  322. <el-form-item class="hang">
  323. <el-input type="number" min="0" clearable :readonly="sonDisable" size="mini" v-model="scope.row.resDemandQty"/>
  324. </el-form-item>
  325. </template>
  326. </el-table-column>
  327. <el-table-column show-overflow-tooltip label="最终采购执行数量" align="center" prop="executeQty" width="150px">
  328. <template slot-scope="scope">
  329. {{scope.row.executeQty ? scope.row.executeQty : 0 }}
  330. </template>
  331. </el-table-column>
  332. <el-table-column show-overflow-tooltip label="收货仓库" align="center" prop="deliveryWarehouseName" width="200px">
  333. <template slot-scope="scope">
  334. <el-form-item class="hang">
  335. <el-input clearable :disabled="sonDisable" size="mini" v-model="scope.row.deliveryWarehouseName" @clear="clearHang(scope.$index, '选择收货仓库')" @focus="chooseDept(scope.$index, 'WAREHOUSE_PARAM', true, '选择收货仓库')">
  336. <el-button size="mini" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="chooseDept(scope.$index, 'WAREHOUSE_PARAM', true, '选择收货仓库')"></el-button>
  337. </el-input>
  338. </el-form-item>
  339. </template>
  340. </el-table-column>
  341. <el-table-column show-overflow-tooltip label="收货货位" align="center" prop="deliveryAllocationName" width="200px">
  342. <template slot-scope="scope">
  343. <el-form-item class="hang">
  344. <el-input clearable :disabled="sonDisable" size="mini" v-model="scope.row.deliveryAllocationName" @clear="clearHang(scope.$index, '选择收货货位')" @focus="choosehuoWei(scope.$index, 'ALLOCATION_PARAM', true, '选择收货货位', scope.row.deliveryWarehouse)">
  345. <el-button size="mini" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="choosehuoWei(scope.$index, 'ALLOCATION_PARAM', true, '选择收货货位', scope.row.deliveryWarehouse)"></el-button>
  346. </el-input>
  347. </el-form-item>
  348. </template>
  349. </el-table-column>
  350. <!-- <el-table-column show-overflow-tooltip label="收货货位编码" align="center" prop="deliveryAllocation" width="200px"/> -->
  351. <el-table-column show-overflow-tooltip label="末级供应仓库" align="center" prop="lastWarehouseName" width="200px"/>
  352. <el-table-column show-overflow-tooltip label="末级供应货位" align="center" prop="lastAllocationName" width="200px"/>
  353. <el-table-column show-overflow-tooltip label="紧急标识" align="center" prop="isUrgency" width="100px">
  354. <template slot-scope="scope">
  355. <el-form-item class="hang">
  356. <el-switch
  357. v-model="scope.row.isUrgency"
  358. disabled
  359. active-value="Y"
  360. inactive-value="N"
  361. active-color="#13ce66"
  362. inactive-color="#a1a3a9">
  363. </el-switch>
  364. </el-form-item>
  365. </template>
  366. </el-table-column>
  367. <el-table-column show-overflow-tooltip label="默认采购组织" align="center" prop="purOrgName" width="200px"/>yu
  368. <el-table-column show-overflow-tooltip label="默认采购组织编码" align="center" prop="puOrg" width="200px"/>
  369. <!-- <el-table-column show-overflow-tooltip label="末级供应调拨待入量" align="center" prop="lastStockQty" width="150px"/> -->
  370. <!-- <el-table-column show-overflow-tooltip label="上级供应中心现存量" align="center" prop="superiorCenterQty" width="200px"/> -->
  371. <!-- <el-table-column show-overflow-tooltip label="上级库存被调拨占用量" align="center" prop="superiorAllotQty" width="200px"/> -->
  372. <el-table-column show-overflow-tooltip label="可用量" align="center" prop="availableQty"/>
  373. <el-table-column show-overflow-tooltip label="调拨状态" align="center" prop="statusAllot" width="100px">
  374. <template slot-scope="scope">
  375. <el-form-item class="hang">
  376. <el-switch
  377. v-model="scope.row.statusAllot"
  378. :disabled="sonDisable"
  379. active-value="Y"
  380. inactive-value="N"
  381. active-color="#13ce66"
  382. inactive-color="#a1a3a9">
  383. </el-switch>
  384. </el-form-item>
  385. </template>
  386. </el-table-column>
  387. <el-table-column show-overflow-tooltip label="补单供应商" align="center" prop="additionalSupplierName" width="200px">
  388. <template slot-scope="scope">
  389. <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'additionalSupplierName'" :rules="{ required: isBDXQ, message: '请选择补单供应商', trigger: 'blur' }">
  390. <el-input clearable :disabled="sonDisable || BDZT" size="mini" v-model="scope.row.additionalSupplierName" @clear="clearHang(scope.$index, '选择补单供应商')" @focus="chooseDept(scope.$index, 'SUPPLIER_PARAM', true, '选择补单供应商')">
  391. <el-button size="mini" :disabled="sonDisable || BDZT" slot="append" icon="el-icon-more" @click="chooseDept(scope.$index, 'SUPPLIER_PARAM', true, '选择补单供应商')"></el-button>
  392. </el-input>
  393. </el-form-item>
  394. </template>
  395. </el-table-column>
  396. <!-- <el-table-column show-overflow-tooltip label="补单供应商名称" align="center" prop="additionalSupplierName" width="200px">
  397. <template slot-scope="scope">
  398. <el-form-item class="hang">
  399. <el-input readonly size="mini" v-model="scope.row.additionalSupplierName"/>
  400. </el-form-item>
  401. </template>
  402. </el-table-column> -->
  403. <!-- <el-table-column show-overflow-tooltip label="周期单位" align="center" prop="periodUnit" width="150px">
  404. <template slot-scope="scope">
  405. <el-form-item class="hang">
  406. <el-select clearable :disabled="sonDisable" size="mini" v-model="scope.row.periodUnit">
  407. <el-option v-for=" dict in dict.type.sys_period_unit" :key="dict.value" :label="dict.label" :value="dict.value">
  408. </el-option>
  409. </el-select>
  410. </el-form-item>
  411. </template>
  412. </el-table-column> -->
  413. <el-table-column show-overflow-tooltip label="末级供应库存组织" align="center" prop="lastStockOrgName" width="200px"></el-table-column>
  414. <el-table-column show-overflow-tooltip label="中心仓可用量" align="center" prop="centralWarehouseQty" width="200px"/>
  415. <el-table-column show-overflow-tooltip label="调拨单号" align="center" prop="allotCode"></el-table-column>
  416. <el-table-column show-overflow-tooltip label="收货地址" align="center" prop="deliveryAddressName" width="200px">
  417. <template slot-scope="scope">
  418. <el-form-item class="hang">
  419. <el-input clearable :disabled="sonDisable" size="mini" v-model="scope.row.deliveryAddressName" @clear="clearHang(scope.$index, '选择收货地址')" @focus="chooseDept(scope.$index, 'ADDRESS_PARAM', true, '选择收货地址')">
  420. <el-button size="mini" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="chooseDept(scope.$index, 'ADDRESS_PARAM', true, '选择收货地址')"></el-button>
  421. </el-input>
  422. </el-form-item>
  423. </template>
  424. </el-table-column>
  425. <!-- <el-table-column show-overflow-tooltip label="收货地址编码" align="center" prop="deliveryAddress" width="200px"></el-table-column> -->
  426. <el-table-column show-overflow-tooltip label="联系人" align="center" prop="contacts"/>
  427. <el-table-column show-overflow-tooltip label="联系人电话" align="center" prop="contactsPhone" width="200px"/>
  428. <el-table-column show-overflow-tooltip label="详细地址" align="center" prop="address" width="200px"/>
  429. <el-table-column show-overflow-tooltip label="价格类型" align="center" prop="priceType" width="150px">
  430. <template slot-scope="scope">
  431. <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'priceType'" :rules="{ required: true, message: '请选择价格类型', trigger: 'blur' }">
  432. <el-select clearable :disabled="sonDisable" size="mini" v-model="scope.row.priceType">
  433. <el-option v-for=" dict in dict.type.sys_price_type" :key="dict.value" :label="dict.label" :value="dict.value">
  434. </el-option>
  435. </el-select>
  436. <!-- <el-input v-model="scope.row.periodUnit"/> -->
  437. </el-form-item>
  438. </template>
  439. </el-table-column>
  440. <el-table-column
  441. fixed="right"
  442. label="操作"
  443. align="center"
  444. >
  445. <template slot-scope="scope">
  446. <el-button type="text" size="mini" :disabled="sonDisable" @click="delLine(scope.$index, scope.row)">删除</el-button>
  447. </template>
  448. </el-table-column>
  449. </el-table>
  450. </el-form>
  451. </el-card>
  452. <div class="btn_group">
  453. <el-col :span="1.5">
  454. <el-button type="primary" size="mini" plain @click="copy" v-if="sonPageStu == 'check'">复制</el-button>
  455. </el-col>
  456. <el-col :span="1.5">
  457. <el-button type="primary" size="mini" plain @click="save" v-if="sonPageStu == 'add' || sonPageStu == 'edit'">保存</el-button>
  458. </el-col>
  459. <el-col :span="1.5" style="margin: 0 10px;">
  460. <el-button type="primary" size="mini" plain @click="submit" v-if="sonPageStu == 'check' && (row.status == '0' || row.status == '3')">提交</el-button>
  461. </el-col>
  462. <el-col :span="1.5">
  463. <el-button size="mini" plain @click="back">返回</el-button>
  464. </el-col>
  465. <Reserved v-if="dialog.config" :isVisible="dialog.config" :info="row" @updateReserved="updateReserved"/>
  466. <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>
  467. <popDialog ref="materialRefer" @doSubmit="selectMaterial" :single="true" />
  468. </div>
  469. <!-- 批量调整参数 -->
  470. <el-dialog title="批量调整" :visible.sync="adjust.open" @close="closeEvent" width="400px">
  471. <el-row style="margin-bottom: 10px;">
  472. <el-col :span="6">价格类型</el-col>
  473. <el-col :span="14">
  474. <el-select clearable size="mini" v-model="adjust.priceType">
  475. <el-option v-for=" dict in dict.type.sys_price_type" :key="dict.value" :label="dict.label" :value="dict.value">
  476. </el-option>
  477. </el-select>
  478. </el-col>
  479. </el-row>
  480. <el-row style="margin-bottom: 10px;">
  481. <el-col :span="6">采购员</el-col>
  482. <el-col :span="14">
  483. <el-select clearable size="mini" v-model="adjust.purchaseMan" @focus="chooseOrg('CONTACTS_PARAM', true, '采购员')">
  484. <el-option v-for="item in purchaseManOptions" :key="item.id" :label="item.name" :value="item.code" />
  485. </el-select>
  486. </el-col>
  487. </el-row>
  488. <el-row style="margin-bottom: 10px;">
  489. <el-col :span="6">收货仓库</el-col>
  490. <el-col :span="14">
  491. <el-input clearable size="mini" v-model="adjust.warehouseName" @focus="chooseOrg('WAREHOUSE_PARAM', true, '收货仓库')">
  492. <el-button size="mini" slot="append" icon="el-icon-more" @click="chooseOrg('WAREHOUSE_PARAM', true, '收货仓库')"></el-button>
  493. </el-input>
  494. </el-col>
  495. </el-row>
  496. <el-row style="margin-bottom: 10px;">
  497. <el-col :span="6">收货货位</el-col>
  498. <el-col :span="14">
  499. <el-input clearable size="mini" v-model="adjust.allocationName" @focus="adjustHuoWei('ALLOCATION_PARAM', true, '收货货位', adjust.warehouse)">
  500. <el-button size="mini" slot="append" icon="el-icon-more" @click="adjustHuoWei('ALLOCATION_PARAM', true, '收货货位', adjust.warehouse)"></el-button>
  501. </el-input>
  502. </el-col>
  503. </el-row>
  504. <el-row style="margin-bottom: 10px;">
  505. <el-col :span="6">业务备注</el-col>
  506. <el-col :span="14">
  507. <el-input clearable size="mini" v-model="adjust.remark"/>
  508. </el-col>
  509. </el-row>
  510. <el-row style="margin-bottom: 10px;">
  511. <el-col :span="6">收货地址</el-col>
  512. <el-col :span="14">
  513. <el-input clearable size="mini" v-model="adjust.deliveryAddressName" @focus="chooseOrg('ADDRESS_PARAM', true, '收货地址')">
  514. <el-button size="mini" slot="append" icon="el-icon-more" @click="chooseOrg('ADDRESS_PARAM', true, '收货地址')"></el-button>
  515. </el-input>
  516. </el-col>
  517. </el-row>
  518. <el-row style="margin-bottom: 10px;">
  519. <el-col :span="6">收货地址编码</el-col>
  520. <el-col :span="14">
  521. <el-input disabled clearable size="mini" v-model="adjust.deliveryAddress"/>
  522. </el-col>
  523. </el-row>
  524. <el-row style="margin-bottom: 10px;">
  525. <el-col :span="6">联系人</el-col>
  526. <el-col :span="14">
  527. <el-input disabled clearable size="mini" v-model="adjust.contacts"/>
  528. </el-col>
  529. </el-row>
  530. <el-row style="margin-bottom: 10px;">
  531. <el-col :span="6">联系人电话</el-col>
  532. <el-col :span="14">
  533. <el-input disabled clearable size="mini" v-model="adjust.contactsPhone"/>
  534. </el-col>
  535. </el-row>
  536. <el-row style="margin-bottom: 10px;">
  537. <el-col :span="6">详细地址</el-col>
  538. <el-col :span="14">
  539. <el-input disabled clearable size="mini" v-model="adjust.address"/>
  540. </el-col>
  541. </el-row>
  542. <div slot="footer" class="dialog-footer">
  543. <el-button size="mini" type="primary" @click="confirmAdjust">确 认</el-button>
  544. <el-button size="mini" @click="adjust.open = false">取 消</el-button>
  545. </div>
  546. </el-dialog>
  547. </div>
  548. </template>
  549. <script>
  550. import Reserved from './reserved.vue'
  551. import Refers from '@/components/Refers/refers.vue'
  552. import {addDemand,getDemandDetail, getDemandSonDetail, editDemand, submitDemand, queryMan } from '@/api/purchase/purchaseDemand.js'
  553. // 用于回显参照框数据
  554. import {getRefer} from '@/api/purchase/basic.js'
  555. // 明细行选择物料参照
  556. import popDialog from '@/components/PopDialog/index.vue'
  557. export default {
  558. name: 'addDemandList',
  559. props: ['pageStu','row', 'disable'],
  560. dicts: ['sys_processing_mode', 'sys_status', 'sys_bill_source', 'sys_business','sys_reserve_ratio', 'sys_period_unit', 'sys_price_type'],
  561. components: {
  562. Reserved,
  563. Refers,
  564. popDialog
  565. },
  566. model: {
  567. prop: 'isList',
  568. event: 'jugislist'
  569. },
  570. data() {
  571. return {
  572. // 不能直接改变props传来的值
  573. sonPageStu: this.pageStu,
  574. sonDisable: this.disable,
  575. // BDZT是补单供应商是否可以编辑条件
  576. BDZT: true,
  577. dialog: {
  578. config: false
  579. },
  580. basicForm: {
  581. code: '',
  582. org: '',
  583. orgName: '',
  584. demandBusinessType: '1',
  585. status: '0',
  586. customer: '',
  587. customerName: '',
  588. customerCode: '',
  589. customerPrincipal: '',
  590. demandPersonal: '',
  591. demandDept: '',
  592. demandDate: '',
  593. source: '4',
  594. billType: 'ZQBH',
  595. isSpeical: '',
  596. isProcess: '',
  597. isMonthleyCalculate: '',
  598. remark: '',
  599. puDemandItemList: []
  600. },
  601. delDemandItemList: [],
  602. options: [{
  603. value: 'Y', label: '是',
  604. }, {
  605. value: 'N', label: '否'
  606. }],
  607. basicRules: {},
  608. tableList: [],
  609. referCondition: {
  610. type: '',
  611. isPage: true,
  612. title: '',
  613. },
  614. // referCondition: {
  615. // type: '',
  616. // isPage: true,
  617. // title: '',
  618. // },
  619. tableIndex: null,
  620. ids: [],
  621. orgOptions: [],
  622. manOptions: [],
  623. personOptions: [],
  624. deptOptions: [],
  625. customerOptions: [],
  626. pickerOptionsEnd: {
  627. disabledDate: (time) => {
  628. let beginDateVal = this.basicForm.demandDate;
  629. if (beginDateVal) {
  630. return (
  631. time.getTime() <
  632. new Date(beginDateVal).getTime() - 8.64e7
  633. );
  634. }
  635. }
  636. },
  637. isBDXQ: false,
  638. isYl: false,
  639. // 批量调整参数
  640. adjust: {
  641. open: false,
  642. priceType: '',
  643. purchaseMan: '',
  644. purchaseManName: '',
  645. warehouse: '',
  646. warehouseName: '',
  647. allocation: '',
  648. allocationName: '',
  649. remark:'',
  650. deliveryAddress: '',
  651. deliveryAddressName: '',
  652. contacts: '',
  653. contactsPhone: '',
  654. address: ''
  655. },
  656. purchaseManOptions: []
  657. }
  658. },
  659. created() {
  660. if(this.pageStu == 'check') {
  661. console.log('数据', this.row)
  662. this.getDetails(this.row)
  663. } else if(this.pageStu == 'edit') {
  664. this.getDetails(this.row)
  665. }
  666. },
  667. methods: {
  668. // 改变单据日期时清空子表的调拨日期
  669. changeDemandDate() {
  670. this.basicForm.puDemandItemList.forEach(item => {
  671. item.deliveryDate = null
  672. })
  673. },
  674. // 更改业务类型调整明细行内补单或紧急标识
  675. changeBillType() {
  676. if (this.basicForm.billType == 'BDXQ' && this.basicForm.puDemandItemList.length != 0) {
  677. this.isBDXQ = true
  678. this.BDZT = false
  679. this.basicForm.puDemandItemList.forEach(item => {item.isReplenishment = 'Y'})
  680. } else {
  681. this.isBDXQ = false
  682. this.BDZT = true
  683. this.basicForm.puDemandItemList.forEach(item => {
  684. item.isReplenishment = 'N'
  685. item.additionalSupplier = null
  686. item.additionalSupplierName = null
  687. })
  688. }
  689. if (this.basicForm.billType == 'JJXQ' && this.basicForm.puDemandItemList.length != 0) {
  690. this.basicForm.puDemandItemList.forEach(item => {item.isUrgency = 'Y'})
  691. } else {
  692. this.basicForm.puDemandItemList.forEach(item => { item.isUrgency = 'N' })
  693. }
  694. },
  695. hangStatus(row) {
  696. switch (row.status) {
  697. case '0':
  698. return '需补货'
  699. case '1':
  700. return '待计划确认'
  701. case '2':
  702. return '计划已确认'
  703. case '3':
  704. return '计划已审核'
  705. case '4':
  706. return '行关闭'
  707. case '5':
  708. return '总供应可满足'
  709. }
  710. },
  711. // 获取预留数量
  712. getYLSL(scope) {
  713. if (scope.row.reservedProportion) {
  714. scope.row.reservedQty = Math.ceil(scope.row.reservedProportion.replace('%', '') / 100 * scope.row.qty)
  715. }
  716. // 如果选择预留比例,预留周期必填
  717. // if(scope.row.reservedQty && scope.row.reservedQty !== 0) {
  718. // this.isYl = true
  719. // } else {
  720. // this.isYl = false
  721. // }
  722. },
  723. copy() {
  724. this.$modal.msgSuccess("复制成功");
  725. this.sonPageStu = 'add'
  726. this.sonDisable = false
  727. // this.getDetails(this.row)
  728. this.basicForm.id = ''
  729. this.basicForm.code = ''
  730. this.basicForm.createBy = ''
  731. this.basicForm.source = '4'
  732. this.basicForm.puDemandItemList.forEach(item => {
  733. item.status = ''
  734. item.buyerName = ''
  735. item.buyer = ''
  736. item.reservedProportion = ''
  737. item.reservedPeriod = ''
  738. item.reservedQty = ''
  739. item.averageQtyMonth = ''
  740. item.demandPeriod = ''
  741. item.forecastClassify = ''
  742. item.onemonthAvgVolume = ''
  743. item.threemonthAvgVolume = ''
  744. item.superiorAllotQty = ''
  745. item.resDemandQty = ''
  746. item.executeQty = ''
  747. item.deliveryWarehouseName = ''
  748. item.deliveryWarehouse = ''
  749. item.deliveryAllocationName = ''
  750. item.deliveryAllocation = ''
  751. item.lastWarehouseName = ''
  752. item.lastAllocationName = ''
  753. item.availableQty = ''
  754. item.lastStockOrgName = ''
  755. item.centralWarehouseQty = ''
  756. item.allotCode = ''
  757. item.deliveryAddress = ''
  758. item.deliveryAddressName = ''
  759. item.contacts = ''
  760. item.contactsPhone = ''
  761. item.address = ''
  762. })
  763. },
  764. handleData() {
  765. console.log('222')
  766. // 复制新增把id,编码,创建人置为空,子表去掉id
  767. this.basicForm.id = ''
  768. this.basicForm.code = ''
  769. this.basicForm.createBy = ''
  770. this.basicForm.source = '4'
  771. if (this.basicForm.puDemandItemList.length !== 0) {
  772. this.basicForm.puDemandItemList.forEach(item => {
  773. if (item.id) {
  774. delete item.id
  775. }
  776. if (item.demandId) {
  777. delete item.demandId
  778. }
  779. if (item.allotCode) {
  780. delete item.allotCode
  781. }
  782. })
  783. }
  784. },
  785. async save() {
  786. if(this.basicForm.puDemandItemList.length !== 0) {
  787. this.$refs['basic'].validate((valid) => {
  788. if(valid) {
  789. this.$modal.loading("保存中...");
  790. if(this.sonPageStu == 'add') {
  791. this.handleData()
  792. addDemand(this.basicForm).then(res => {
  793. console.log(333)
  794. if (res.code === 200) {
  795. this.$modal.msgSuccess("保存成功");
  796. this.$modal.closeLoading();
  797. this.back()
  798. }
  799. }).catch(err => {
  800. this.$modal.closeLoading();
  801. })
  802. } else if (this.sonPageStu == 'edit') {
  803. let list = []
  804. list.push(...this.basicForm.puDemandItemList, ...this.delDemandItemList)
  805. // 深拷贝一下参数对象
  806. let param = JSON.parse(JSON.stringify(this.basicForm))
  807. console.log('深拷贝对象',param);
  808. param.puDemandItemList = list
  809. // this.basicForm.puDemandItemList.push(...this.delDemandItemList)
  810. editDemand(param).then(res => {
  811. if (res.code === 200) {
  812. this.$modal.msgSuccess("编辑成功");
  813. this.$modal.closeLoading();
  814. this.back()
  815. }
  816. }).catch(err => {
  817. this.$modal.closeLoading();
  818. })
  819. }
  820. }
  821. })
  822. } else {
  823. this.$modal.msgWarning("明细信息不能为空!");
  824. }
  825. },
  826. submit() {
  827. this.$modal.loading("提交中...");
  828. submitDemand(this.basicForm).then(res => {
  829. if (res.code === 200) {
  830. this.$modal.msgSuccess("提交成功");
  831. this.$modal.closeLoading();
  832. this.back()
  833. }
  834. }).catch(err => {
  835. this.$modal.closeLoading();
  836. })
  837. },
  838. // 增行
  839. addLine() {
  840. const newLine = {
  841. contacts: null,
  842. id: null,
  843. demandId: null,
  844. status: null,
  845. businessDept: null,
  846. businessDeptName: null,
  847. materialCategory: null,
  848. buyer: null,
  849. buyerName: null,
  850. mateiralClassifyOne: null,
  851. materialClassifyOneName: null,
  852. materialClassifyTwo: null,
  853. materialClassifyTwoName: null,
  854. materialClassifyThree: null,
  855. materialClassifyThreeName: null,
  856. materialClassifyFour: null,
  857. materialClassifyFourName: null,
  858. materialCode: null,
  859. material: null,
  860. materialName: null,
  861. classifyId: null,
  862. specification: null,
  863. unit: null,
  864. unitName: null,
  865. manufacturerName: null,
  866. registrant: null,
  867. puPeriod: null,
  868. expiryUnit: null,
  869. expiry: null,
  870. minPackage: null,
  871. minOrderQty: null,
  872. minBatch: null,
  873. safeStock: null,
  874. averageQtyMonth: null,
  875. qty: null,
  876. adjustmentPersonal: null,
  877. adjustmentTime: null,
  878. manualRegulation: null,
  879. updateCause: null,
  880. reservedProportion: null,
  881. reservedPeriod: null,
  882. reservedQty: null,
  883. demandPeriod: null,
  884. forecastClassify: null,
  885. onemonthAvgVolume: null,
  886. threemonthAvgVolume: null,
  887. deliveryDate: null,
  888. isUrgency: this.basicForm.billType == 'JJXQ' ? 'Y' : 'N',
  889. isReplenishment: this.basicForm.billType == 'BDXQ'? 'Y': 'N',
  890. isBatchLock: 'N',
  891. remark: null,
  892. puRemark: null,
  893. lastWarehouseQty: null,
  894. resDemandQty: null,
  895. lastWarehouse: null,
  896. lastWarehouseName: null,
  897. deliveryWarehouse: null,
  898. deliveryWarehouseName: null,
  899. lastAllocation: null,
  900. lastAllocationName: null,
  901. deliveryAllocation: null,
  902. deliveryAllocationName: null,
  903. passageOn: null,
  904. puOrg: null,
  905. purOrgName: null,
  906. lastStockQty: null,
  907. superiorCenterQty: null,
  908. superiorAllotQty: null,
  909. availableQty: null,
  910. statusAllot: 'N',
  911. additionalSupplier: null,
  912. additionalSupplierName: null,
  913. periodUnit: null,
  914. demandCustomer: this.basicForm.customer,
  915. demandCustomerName: this.basicForm.customerName,
  916. businessDept: this.basicForm.demandDept,
  917. businessDeptName: null,
  918. lastStockOrg: null,
  919. lastStockOrgName: null,
  920. superiorStockOrg: null,
  921. superiorStockOrgName: null,
  922. allotCode: null,
  923. deliveryAddress: null,
  924. deliveryAddressName: null,
  925. contacts: null,
  926. contactsPhone: null,
  927. address: null,
  928. source: null,
  929. priceType: 'order',
  930. puManagerApprover: null,
  931. puManagerApproverName: null,
  932. processTime: null,
  933. affirmer: null,
  934. tenantId: null,
  935. revision: null,
  936. createBy: null,
  937. createByName: null,
  938. createTime: null,
  939. updateBy: null,
  940. updateByName: null,
  941. updateTime: null,
  942. delFlag: 0,
  943. // 新增字段
  944. model: null,
  945. storageCondition: null,
  946. transportationCondition: null,
  947. }
  948. this.basicForm.puDemandItemList.push(newLine)
  949. // 补单需求状态改变
  950. if (this.basicForm.billType == 'BDXQ') {
  951. this.BDZT = false
  952. } else {
  953. this.BDZT = true
  954. }
  955. },
  956. delLine(index, row) {
  957. console.log('删除行:', index)
  958. console.log('改变行:', row)
  959. // this.basicForm.puDemandItemList = this.basicForm.puDemandItemList.filter(item => {
  960. // return item.id !== row.id
  961. // })
  962. row.delFlag = '2'
  963. // this.basicForm.puDemandItemList.splice(index,1)
  964. let delList = []
  965. delList = this.basicForm.puDemandItemList.filter(item => {
  966. return item.delFlag == '2'
  967. })
  968. this.basicForm.puDemandItemList = this.basicForm.puDemandItemList.filter(item => {
  969. return item.delFlag == '0'
  970. })
  971. this.delDemandItemList.push(...delList)
  972. console.log('删除的数组',this.delDemandItemList)
  973. },
  974. back() {
  975. this.$emit('jugislist', true)
  976. // let queryParams = {
  977. // pageNum: 1,
  978. // pageSize: 10
  979. // }
  980. this.$emit('refresh')
  981. },
  982. // 如果需要回显则调用详情接口
  983. getDetails(row) {
  984. getDemandDetail(row.id).then(res => {
  985. if (res.code === 200) {
  986. // this.basicForm = res.data
  987. let reciveForm = res.data
  988. let params = {...{id: row.id}, ...{pageNum:1, pageSize: 10}}
  989. getDemandSonDetail(params).then(res => {
  990. if (res.code === 200) {
  991. reciveForm.puDemandItemList = res.data
  992. console.log('reciveForm',reciveForm)
  993. this.basicForm = reciveForm
  994. if(this.basicForm.org) { this.reBackRefer('ORG_PARAM', this.basicForm.org) }
  995. if(this.basicForm.customer) { this.reBackRefer('CUSTOMER_PARAM', this.basicForm.customer) }
  996. if(this.basicForm.customerPrincipal) { this.reBackRefer('CONTACTS_PARAM', this.basicForm.customerPrincipal, '客户负责人') }
  997. if(this.basicForm.demandPersonal) { this.reBackRefer('CONTACTS_PARAM', this.basicForm.demandPersonal, '需求人员') }
  998. if(this.basicForm.demandDept) { this.reBackRefer('DEPT_PARAM', this.basicForm.demandDept) }
  999. // 详情时将收货仓库id赋值给stordocId
  1000. // 如果业务类型为补单需求,则明细内补单供应商编码可以编辑
  1001. if(this.basicForm.billType == 'BDXQ') {
  1002. this.BDZT = false
  1003. this.isBDXQ = true
  1004. } else {
  1005. this.BDZT = true
  1006. this.isBDXQ = false
  1007. }
  1008. }
  1009. })
  1010. }
  1011. })
  1012. },
  1013. // 单元格标红
  1014. cellClassName({row, column, rowIndex, columnIndex}) {
  1015. if(this.basicForm.isSpeical == 'N' && column.label == '需求可用周期' && Number(row.demandPeriod) > 1.5 && Number(row.demandPeriod) > Number(row.minOrderQty)) {
  1016. return 'success-row';
  1017. }
  1018. },
  1019. handleSelectionChange(selection) {
  1020. this.ids = selection.map(item =>{
  1021. return item.id
  1022. })
  1023. console.log('选中数组', this.ids)
  1024. },
  1025. // 点击预留单展示
  1026. showReserved() {
  1027. this.dialog.config = true
  1028. },
  1029. // 修改是否让页面显示与隐藏的事件
  1030. updateReserved (val) {
  1031. this.dialog.config = val
  1032. },
  1033. // 回显参照框
  1034. reBackRefer(type, id, title) {
  1035. getRefer({type: type, id: id}).then(res => {
  1036. if(type == 'ORG_PARAM') {
  1037. this.orgOptions = res.rows
  1038. }
  1039. if (type == 'CUSTOMER_PARAM') {
  1040. this.customerOptions = res.rows
  1041. }
  1042. if (type == 'CONTACTS_PARAM' && title == '需求人员') {
  1043. this.personOptions = res.rows
  1044. }
  1045. if (type == 'CONTACTS_PARAM' && title == '客户负责人') {
  1046. this.manOptions = res.rows
  1047. }
  1048. if (type == 'DEPT_PARAM') {
  1049. this.deptOptions = res.rows
  1050. }
  1051. })
  1052. },
  1053. chooseOrg(type, isPage, title) {
  1054. this.referCondition.type = type
  1055. this.referCondition.isPage = isPage
  1056. this.referCondition.title = title
  1057. this.$refs.refer.init(this.referCondition)
  1058. },
  1059. selectionsToInput(selection) {
  1060. if(this.referCondition.type == 'ORG_PARAM' && this.referCondition.title == '选择组织') {
  1061. this.orgOptions = selection
  1062. this.basicForm.org = selection[0].id
  1063. this.basicForm.orgName = selection[0].name
  1064. }
  1065. if(this.referCondition.type == 'CUSTOMER_PARAM' && this.referCondition.title == '选择客户') {
  1066. this.customerOptions = selection
  1067. this.basicForm.customer = selection[0].id
  1068. this.basicForm.customerName = selection[0].name
  1069. this.basicForm.customerCode = selection[0].code
  1070. if(this.basicForm.puDemandItemList.length !== 0) {
  1071. this.basicForm.puDemandItemList.forEach(item => {
  1072. item.demandCustomerName = this.basicForm.customerName
  1073. item.demandCustomer = this.basicForm.customer
  1074. item.status = ''
  1075. item.buyerName = ''
  1076. item.buyer = ''
  1077. item.reservedProportion = ''
  1078. item.reservedPeriod = ''
  1079. item.reservedQty = ''
  1080. item.averageQtyMonth = ''
  1081. item.demandPeriod = ''
  1082. item.forecastClassify = ''
  1083. item.onemonthAvgVolume = ''
  1084. item.threemonthAvgVolume = ''
  1085. item.superiorAllotQty = ''
  1086. item.resDemandQty = ''
  1087. item.executeQty = ''
  1088. item.deliveryWarehouseName = ''
  1089. item.deliveryWarehouse = ''
  1090. item.deliveryAllocationName = ''
  1091. item.deliveryAllocation = ''
  1092. item.lastWarehouseName = ''
  1093. item.lastAllocationName = ''
  1094. item.availableQty = ''
  1095. item.lastStockOrgName = ''
  1096. item.centralWarehouseQty = ''
  1097. item.allotCode = ''
  1098. item.deliveryAddress = ''
  1099. item.deliveryAddressName = ''
  1100. item.contacts = ''
  1101. item.contactsPhone = ''
  1102. item.address = ''
  1103. })
  1104. }
  1105. }
  1106. if(this.referCondition.type == 'CONTACTS_PARAM' && this.referCondition.title == '需求人员') {
  1107. this.personOptions = selection
  1108. this.basicForm.demandPersonal = selection[0].code
  1109. }
  1110. if(this.referCondition.type == 'CONTACTS_PARAM' && this.referCondition.title == '采购员') {
  1111. this.purchaseManOptions = selection
  1112. this.adjust.purchaseMan = selection[0].code
  1113. this.adjust.purchaseManName = selection[0].name
  1114. }
  1115. if(this.referCondition.type == 'WAREHOUSE_PARAM' && this.referCondition.title == '收货仓库') {
  1116. this.adjust.warehouse = selection[0].id
  1117. this.adjust.warehouseName = selection[0].name
  1118. this.adjust.allocation = ''
  1119. this.adjust.allocationName = ''
  1120. }
  1121. if(this.referCondition.type == 'ALLOCATION_PARAM' && this.referCondition.title == '收货货位') {
  1122. this.adjust.allocation = selection[0].id
  1123. this.adjust.allocationName = selection[0].name
  1124. }
  1125. if(this.referCondition.type == 'ADDRESS_PARAM' && this.referCondition.title == '收货地址') {
  1126. this.adjust.deliveryAddressName = selection[0].name
  1127. this.adjust.deliveryAddress = selection[0].code
  1128. this.adjust.contacts = selection[0].contactsName
  1129. this.adjust.contactsPhone = selection[0].contactsPhone
  1130. this.adjust.address = selection[0].address
  1131. }
  1132. if(this.referCondition.type == 'DEPT_PARAM') {
  1133. this.deptOptions = selection
  1134. this.basicForm.demandDept = selection[0].id
  1135. }
  1136. // if(this.referCondition.type == 'DEPT_PARAM') {
  1137. // this.basicForm.puDemandItemList[this.tableIndex].businessDept = selection[0].code
  1138. // this.basicForm.puDemandItemList[this.tableIndex].businessDeptName = selection[0].name
  1139. // }
  1140. if(this.referCondition.title == '选择收货仓库') {
  1141. this.basicForm.puDemandItemList[this.tableIndex].deliveryWarehouse = selection[0].id
  1142. this.basicForm.puDemandItemList[this.tableIndex].deliveryWarehouseName = selection[0].name
  1143. this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocation = null
  1144. this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocationName = null
  1145. }
  1146. if(this.referCondition.title == '选择收货货位') {
  1147. this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocation = selection[0].id
  1148. this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocationName = selection[0].name
  1149. }
  1150. if(this.referCondition.title == '选择补单供应商') {
  1151. this.basicForm.puDemandItemList[this.tableIndex].additionalSupplier = selection[0].id
  1152. this.basicForm.puDemandItemList[this.tableIndex].additionalSupplierName = selection[0].name
  1153. }
  1154. if(this.referCondition.title == '选择收货地址') {
  1155. this.basicForm.puDemandItemList[this.tableIndex].deliveryAddressName = selection[0].name
  1156. this.basicForm.puDemandItemList[this.tableIndex].deliveryAddress = selection[0].code
  1157. this.basicForm.puDemandItemList[this.tableIndex].contacts = selection[0].contactsName
  1158. this.basicForm.puDemandItemList[this.tableIndex].contactsPhone = selection[0].contactsPhone
  1159. this.basicForm.puDemandItemList[this.tableIndex].address = selection[0].address
  1160. }
  1161. },
  1162. // 粘贴来的数据
  1163. pasteMe(e, scope, index) {
  1164. e.preventDefault() //阻止默认粘贴事件
  1165. let source = e.clipboardData.getData("Text");
  1166. console.log('scope', scope.column.property)
  1167. console.log('eee:', source)
  1168. // 首先对源头进行解析
  1169. let rows = source.split("\r\n"); // 拆成一个数组
  1170. // rows.pop()
  1171. console.log('复制的数组',rows);
  1172. console.log('列表的数组',this.basicForm.puDemandItemList)
  1173. rows.forEach(item => {
  1174. console.log('items',item)
  1175. // getRefer({ type: 'MATERIAL_PARAM', code: item }).then(res => {
  1176. // })
  1177. this.basicForm.puDemandItemList.push(this.basicForm.puDemandItemList[scope.$index])
  1178. })
  1179. console.log('列表', this.basicForm.puDemandItemList)
  1180. // this.basicForm.puDemandItemList.forEach(e => {
  1181. // rows.forEach(d => {
  1182. // e.materialCode = d
  1183. // })
  1184. // })
  1185. },
  1186. // 明细行选择物料编码带出数据
  1187. chooseMaterial(index) {
  1188. console.log("🚀 ~ file: add.vue:790 ~ chooseMaterial ~ index:", index)
  1189. this.tableIndex = index
  1190. // 传0只展示同步NC了的物料
  1191. this.$refs.materialRefer.init(0)
  1192. },
  1193. selectMaterial(selection) {
  1194. console.log('选中的物料', selection)
  1195. // 选择新物料时先清空行内其他信息
  1196. this.basicForm.puDemandItemList[this.tableIndex].reservedProportion = null
  1197. this.basicForm.puDemandItemList[this.tableIndex].reservedPeriod = null
  1198. this.basicForm.puDemandItemList[this.tableIndex].reservedQty = null
  1199. this.basicForm.puDemandItemList[this.tableIndex].qty = null
  1200. this.basicForm.puDemandItemList[this.tableIndex].deliveryDate = null
  1201. this.basicForm.puDemandItemList[this.tableIndex].remark = null
  1202. this.basicForm.puDemandItemList[this.tableIndex].resDemandQty = null
  1203. this.basicForm.puDemandItemList[this.tableIndex].deliveryWarehouse = null
  1204. this.basicForm.puDemandItemList[this.tableIndex].deliveryWarehouseName = null
  1205. this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocation = null
  1206. this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocationName = null
  1207. this.basicForm.puDemandItemList[this.tableIndex].additionalSupplier = null
  1208. this.basicForm.puDemandItemList[this.tableIndex].additionalSupplierName = null
  1209. this.basicForm.puDemandItemList[this.tableIndex].periodUnit = null
  1210. this.basicForm.puDemandItemList[this.tableIndex].deliveryAddressName = null
  1211. this.basicForm.puDemandItemList[this.tableIndex].deliveryAddress = null
  1212. this.basicForm.puDemandItemList[this.tableIndex].contacts = null
  1213. this.basicForm.puDemandItemList[this.tableIndex].contactsPhone = null
  1214. this.basicForm.puDemandItemList[this.tableIndex].address = null
  1215. this.basicForm.puDemandItemList[this.tableIndex].priceType = 'order'
  1216. this.basicForm.puDemandItemList[this.tableIndex].lastWarehouseName = null
  1217. this.basicForm.puDemandItemList[this.tableIndex].lastWarehouse = null
  1218. this.basicForm.puDemandItemList[this.tableIndex].lastAllocation = null
  1219. this.basicForm.puDemandItemList[this.tableIndex].lastAllocationName = null
  1220. this.basicForm.puDemandItemList[this.tableIndex].materialClassifyOne = null
  1221. this.basicForm.puDemandItemList[this.tableIndex].materialClassifyTwo = null
  1222. this.basicForm.puDemandItemList[this.tableIndex].materialClassifyThree = null
  1223. this.basicForm.puDemandItemList[this.tableIndex].materialClassifyFour = null
  1224. this.basicForm.puDemandItemList[this.tableIndex].lastStockOrg = null
  1225. this.basicForm.puDemandItemList[this.tableIndex].lastStockOrgName = null
  1226. // 通过选择物料查询采购员
  1227. queryMan(selection[0].id).then(res => {
  1228. if(res.code === 200 && res.rows.length !== 0) {
  1229. this.basicForm.puDemandItemList[this.tableIndex].buyer = res.rows[0].buyer
  1230. this.basicForm.puDemandItemList[this.tableIndex].buyerName = res.rows[0].buyerName
  1231. }
  1232. })
  1233. this.basicForm.puDemandItemList[this.tableIndex].businessDept = selection[0].businessDepartment
  1234. this.basicForm.puDemandItemList[this.tableIndex].businessDeptName = selection[0].businessDepartmentName
  1235. this.basicForm.puDemandItemList[this.tableIndex].materialCode = selection[0].code
  1236. this.basicForm.puDemandItemList[this.tableIndex].material = selection[0].id
  1237. this.basicForm.puDemandItemList[this.tableIndex].materialName = selection[0].name
  1238. this.basicForm.puDemandItemList[this.tableIndex].classifyId = selection[0].classifyId
  1239. this.basicForm.puDemandItemList[this.tableIndex].materialClassifyOneName = selection[0].oneClass
  1240. this.basicForm.puDemandItemList[this.tableIndex].materialClassifyTwoName = selection[0].twoClass
  1241. this.basicForm.puDemandItemList[this.tableIndex].materialClassifyThreeName = selection[0].threeClass
  1242. this.basicForm.puDemandItemList[this.tableIndex].materialClassifyFourName = selection[0].fourClass
  1243. this.basicForm.puDemandItemList[this.tableIndex].specification = selection[0].specification
  1244. this.basicForm.puDemandItemList[this.tableIndex].model = selection[0].model
  1245. this.basicForm.puDemandItemList[this.tableIndex].unit = selection[0].unitId
  1246. this.basicForm.puDemandItemList[this.tableIndex].unitName = selection[0].unitIdName
  1247. this.basicForm.puDemandItemList[this.tableIndex].registrant = selection[0].registrant
  1248. this.basicForm.puDemandItemList[this.tableIndex].manufacturerName = selection[0].manufacturerIdName
  1249. this.basicForm.puDemandItemList[this.tableIndex].puPeriod = selection[0].deliveryPeriod
  1250. this.basicForm.puDemandItemList[this.tableIndex].expiry = selection[0].usefulLife
  1251. this.basicForm.puDemandItemList[this.tableIndex].expiryUnit = selection[0].expiryUnitIdName
  1252. // this.basicForm.puDemandItemList[this.tableIndex].minPackage = selection[0].usefulLife
  1253. this.basicForm.puDemandItemList[this.tableIndex].minPackage = selection[0].minPackQty
  1254. this.basicForm.puDemandItemList[this.tableIndex].minOrderQty = selection[0].minOrderQty
  1255. this.basicForm.puDemandItemList[this.tableIndex].minBatch = selection[0].minBatchQty
  1256. this.basicForm.puDemandItemList[this.tableIndex].safeStock = selection[0].safeStock
  1257. this.basicForm.puDemandItemList[this.tableIndex].purOrgName = selection[0].purchasingOrganizationName
  1258. this.basicForm.puDemandItemList[this.tableIndex].puOrg = selection[0].purchasingOrganization
  1259. // 物料存储条件和运输条件
  1260. this.basicForm.puDemandItemList[this.tableIndex].transportationCondition = selection[0].transportationCondition
  1261. this.basicForm.puDemandItemList[this.tableIndex].storageCondition = selection[0].storageCondition
  1262. // 选中骨科耗材时候的物料,需求客户不必填
  1263. },
  1264. // 明细行选择业务部门参照带出业务部门数据
  1265. chooseDept(index, type, isPage, title) {
  1266. this.tableIndex = index
  1267. this.referCondition.type = type
  1268. this.referCondition.isPage = isPage
  1269. this.referCondition.title = title
  1270. this.$refs.refer.init(this.referCondition)
  1271. },
  1272. // 明细行选择业务部门参照带出业务部门数据
  1273. choosehuoWei(index, type, isPage, title, stordocId) {
  1274. this.tableIndex = index
  1275. this.referCondition.type = type
  1276. this.referCondition.isPage = isPage
  1277. this.referCondition.title = title
  1278. // 选择收货货位前先选择收货仓库
  1279. if(stordocId) {
  1280. this.referCondition.stordocId = stordocId
  1281. this.$refs.refer.init(this.referCondition)
  1282. } else {
  1283. this.$modal.msgWarning("请先选择收货仓库");
  1284. }
  1285. },
  1286. // 明细行清空收货仓库,货位,收货地址档案等
  1287. clearHang(index, title) {
  1288. if (title == '选择收货仓库') {
  1289. this.basicForm.puDemandItemList[index].deliveryWarehouseName = null
  1290. this.basicForm.puDemandItemList[index].deliveryWarehouse = null
  1291. this.basicForm.puDemandItemList[index].deliveryAllocationName = null
  1292. this.basicForm.puDemandItemList[index].deliveryAllocation = null
  1293. }
  1294. if (title == '选择收货货位') {
  1295. this.basicForm.puDemandItemList[index].deliveryAllocationName = null
  1296. this.basicForm.puDemandItemList[index].deliveryAllocation = null
  1297. }
  1298. if (title == '选择收货地址') {
  1299. this.basicForm.puDemandItemList[index].deliveryAddressName = null
  1300. this.basicForm.puDemandItemList[index].deliveryAddress = null
  1301. this.basicForm.puDemandItemList[index].contacts = null
  1302. this.basicForm.puDemandItemList[index].contactsPhone = null
  1303. this.basicForm.puDemandItemList[index].address = null
  1304. }
  1305. if (title == '选择补单供应商') {
  1306. this.basicForm.puDemandItemList[index].additionalSupplierName = null
  1307. this.basicForm.puDemandItemList[index].additionalSupplier = null
  1308. }
  1309. },
  1310. // 清除需求客户将明细行内也清空
  1311. cleanCustomer() {
  1312. this.basicForm.customer = ''
  1313. this.basicForm.customerName = ''
  1314. this.basicForm.customerCode = ''
  1315. if (this.basicForm.puDemandItemList.length !== 0) {
  1316. this.basicForm.puDemandItemList.forEach(item => {
  1317. item.demandCustomerName = ''
  1318. item.demandCustomer = ''
  1319. item.status = ''
  1320. item.buyerName = ''
  1321. item.buyer = ''
  1322. item.reservedProportion = ''
  1323. item.reservedPeriod = ''
  1324. item.reservedQty = ''
  1325. item.averageQtyMonth = ''
  1326. item.demandPeriod = ''
  1327. item.forecastClassify = ''
  1328. item.onemonthAvgVolume = ''
  1329. item.threemonthAvgVolume = ''
  1330. item.superiorAllotQty = ''
  1331. item.resDemandQty = ''
  1332. item.executeQty = ''
  1333. item.deliveryWarehouseName = ''
  1334. item.deliveryWarehouse = ''
  1335. item.deliveryAllocationName = ''
  1336. item.deliveryAllocation = ''
  1337. item.lastWarehouseName = ''
  1338. item.lastAllocationName = ''
  1339. item.availableQty = ''
  1340. item.lastStockOrgName = ''
  1341. item.centralWarehouseQty = ''
  1342. item.allotCode = ''
  1343. item.deliveryAddress = ''
  1344. item.deliveryAddressName = ''
  1345. item.contacts = ''
  1346. item.contactsPhone = ''
  1347. item.address = ''
  1348. })
  1349. }
  1350. },
  1351. // 批量调整
  1352. adjustPl() {
  1353. if(this.ids.length == 0) {
  1354. this.$modal.msgWarning('请至少选择一项数据进行操作!')
  1355. } else {
  1356. this.adjust.open = true
  1357. }
  1358. },
  1359. // 批量调整确认
  1360. confirmAdjust() {
  1361. console.log('data', this.adjust)
  1362. this.basicForm.puDemandItemList.forEach(item => {
  1363. this.ids.some(val => {
  1364. if(val == item.id) {
  1365. if(this.adjust.purchaseMan) {
  1366. item.buyer = this.adjust.purchaseMan
  1367. item.buyerName = this.adjust.purchaseManName
  1368. }
  1369. if(this.adjust.priceType) {
  1370. item.priceType = this.adjust.priceType
  1371. }
  1372. if(this.adjust.warehouseName) {
  1373. item.deliveryWarehouse = this.adjust.warehouse
  1374. item.deliveryWarehouseName = this.adjust.warehouseName
  1375. item.deliveryAllocation = this.adjust.allocation
  1376. item.deliveryAllocationName = this.adjust.allocationName
  1377. }
  1378. // if(this.adjust.allocationName) {
  1379. // item.deliveryAllocation = this.adjust.allocation
  1380. // item.deliveryAllocationName = this.adjust.allocationName
  1381. // }
  1382. if(this.adjust.remark) {
  1383. item.remark = this.adjust.remark
  1384. }
  1385. if(this.adjust.deliveryAddressName) {
  1386. item.deliveryAddressName = this.adjust.deliveryAddressName
  1387. item.deliveryAddress = this.adjust.deliveryAddress
  1388. item.contacts = this.adjust.contacts
  1389. item.contactsPhone = this.adjust.contactsPhone
  1390. item.address = this.adjust.address
  1391. }
  1392. }
  1393. this.adjust.open = false
  1394. })
  1395. })
  1396. },
  1397. // 批量调整选择货位
  1398. adjustHuoWei(type, isPage, title, stordocId) {
  1399. this.referCondition.type = type
  1400. this.referCondition.isPage = isPage
  1401. this.referCondition.title = title
  1402. // 选择收货货位前先选择收货仓库
  1403. if (stordocId) {
  1404. this.referCondition.stordocId = stordocId
  1405. this.$refs.refer.init(this.referCondition)
  1406. } else {
  1407. this.$modal.msgWarning("请先选择收货仓库");
  1408. }
  1409. },
  1410. // 关闭清空批量调整数据
  1411. closeEvent() {
  1412. this.adjust = {
  1413. open: false,
  1414. priceType: '',
  1415. purchaseMan: '',
  1416. purchaseManName: '',
  1417. warehouse: '',
  1418. warehouseName: '',
  1419. allocation: '',
  1420. allocationName: '',
  1421. remark: '',
  1422. deliveryAddress: '',
  1423. deliveryAddressName: '',
  1424. contacts: '',
  1425. contactsPhone: '',
  1426. address: ''
  1427. }
  1428. },
  1429. }
  1430. }
  1431. </script>
  1432. <style lang="scss" scoped>
  1433. .btn_group {
  1434. width: 100%;
  1435. margin: 20px 0;
  1436. display: flex;
  1437. justify-content: center;
  1438. }
  1439. .btn_grooup {
  1440. margin-bottom: 10px;
  1441. display: flex;
  1442. justify-content: flex-end;
  1443. }
  1444. .hang {
  1445. margin: auto;
  1446. }
  1447. .hang ::v-deep .el-form-item__content{
  1448. margin-left: 0px !important;
  1449. }
  1450. .el-table ::v-deep .el-form-item__error{
  1451. padding-top: 0;
  1452. top: 70%
  1453. }
  1454. .el-table ::v-deep .success-row {
  1455. background: #f11616;
  1456. }
  1457. </style>