storage_table.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590
  1. import { listPageV2 } from '@/api/auxiliaryFittings/supplier'
  2. import { materialCategoryList } from '@/api/auxiliaryMaterialClass'
  3. import { materialNormList } from '@/api/auxiliaryPriceManagement'
  4. import { listPageV2 as peijianList } from '@/api/auxiliaryFittings/attachmentProfile'
  5. import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
  6. import { storageListPageV2 } from '@/api/storage'
  7. import { getCategory } from '@/api/auxiliaryFittings/auxiliarySalesOrder'
  8. import { getGoods } from '@/api/auxiliaryFittings/auxiliarySalesOrder'
  9. export default {
  10. data() {
  11. return {
  12. materialNormList: [],
  13. peijianList: []
  14. }
  15. },
  16. computed: {
  17. // 事件组合
  18. columns() {
  19. return [
  20. ...(() => {
  21. if (this.formData.type == 'M') {
  22. return [
  23. {
  24. columnAttributes: {
  25. label: '大类名称',
  26. prop: 'parentCategoryId'
  27. },
  28. render: (h, { row, column, index }) => {
  29. return row.isEditRow ? (
  30. <div class="redbordererr">
  31. <el-form-item
  32. label=""
  33. lebel-width="0px"
  34. prop={`items.${index}.parentCategoryId`}
  35. rules={required}
  36. >
  37. <el-select
  38. disabled={this.formDialogType == 2}
  39. value={row[column.columnAttributes.prop]}
  40. onInput={val => {
  41. row[column.columnAttributes.prop] = val
  42. }}
  43. onChange={val => {
  44. row['goodsCategoryId'] = ''
  45. row['goodsCategoryName'] = ''
  46. row['goodsId'] = ''
  47. row['goodsName'] = ''
  48. this.materialNormList = []
  49. this.qkrow(row)
  50. if (val) {
  51. row['parentCategoryName'] = this.mainList.find(
  52. item => item.categoryId == val
  53. ).categoryName
  54. } else {
  55. row['parentCategoryName'] = ''
  56. }
  57. this.$nextTick(this.jiaoyan)
  58. }}
  59. placeholder="请选择"
  60. >
  61. {this.mainList.map((item, index_) => (
  62. <el-option key={index_} label={item.categoryName} value={item.categoryId}></el-option>
  63. ))}
  64. </el-select>
  65. </el-form-item>
  66. </div>
  67. ) : (
  68. <div>{row['parentCategoryName']}</div>
  69. )
  70. }
  71. }
  72. ]
  73. }
  74. return []
  75. })(),
  76. ...(() => {
  77. if (this.formData.type == 'M') {
  78. return [
  79. {
  80. columnAttributes: {
  81. label: '小类名称',
  82. prop: 'goodsCategoryId'
  83. },
  84. render: (h, { row, column, index }) => {
  85. return row.isEditRow ? (
  86. <div class="redbordererr">
  87. <el-form-item label="" lebel-width="0px" prop={`items.${index}.goodsCategoryId`} rules={required}>
  88. <el-select
  89. disabled={this.formDialogType == 2}
  90. value={row[column.columnAttributes.prop]}
  91. onInput={val => {
  92. row[column.columnAttributes.prop] = val
  93. }}
  94. placeholder="请选择"
  95. onChange={val => {
  96. row['goodsId'] = ''
  97. row['goodsName'] = ''
  98. this.qkrow(row)
  99. if (val) {
  100. row['goodsCategoryName'] = (
  101. this.mainList.find(item => item.categoryId == row.parentCategoryId)?.items || []
  102. ).find(item => item.categoryId == val).categoryName
  103. materialNormList({
  104. isShowStockQty: true,
  105. websitId: this.formData.websitId,
  106. storageId: this.formData.storageId,
  107. pageNum: 1,
  108. pageSize: -1,
  109. params: [
  110. { param: 'b.category_id', compare: '=', value: val },
  111. { param: 'a.status', compare: '=', value: 'ON' }
  112. ]
  113. }).then(res => {
  114. this.materialNormList = res.data.records
  115. })
  116. } else {
  117. this.materialNormList = []
  118. row['goodsCategoryName'] = ''
  119. }
  120. this.$nextTick(this.jiaoyan)
  121. }}
  122. >
  123. {(this.mainList.find(item => item.categoryId == row.parentCategoryId)?.items || []).map(
  124. (item, index_) => (
  125. <el-option key={index_} label={item.categoryName} value={item.categoryId}></el-option>
  126. )
  127. )}
  128. </el-select>
  129. </el-form-item>
  130. </div>
  131. ) : (
  132. <div>{row['goodsCategoryName']}</div>
  133. )
  134. }
  135. }
  136. ]
  137. }
  138. return []
  139. })(),
  140. ...(() => {
  141. if (this.formData.type == 'M') {
  142. return [
  143. {
  144. columnAttributes: {
  145. label: '辅材',
  146. prop: 'goodsId'
  147. },
  148. render: (h, { row, column, index }) => {
  149. return row.isEditRow ? (
  150. <div class="redbordererr">
  151. <el-form-item label="" lebel-width="0px" prop={`items.${index}.goodsId`} rules={required}>
  152. <el-select
  153. disabled={this.formDialogType == 2}
  154. value={row[column.columnAttributes.prop]}
  155. onInput={val => {
  156. row[column.columnAttributes.prop] = val
  157. }}
  158. placeholder="请选择"
  159. onChange={val => {
  160. if (val) {
  161. var data = this.materialNormList.find(item => item.goodsId == val)
  162. row['goodsName'] = data.goodsName
  163. this.qkrow(row, {
  164. goodsStockUnit: data.goodsStockUnit,
  165. goodsCode: data.goodsCode,
  166. goodsSpecification: data.goodsSpecification,
  167. brand: '',
  168. productCategory: ''
  169. })
  170. } else {
  171. row['goodsName'] = ''
  172. this.qkrow(row)
  173. }
  174. this.$nextTick(this.jiaoyan)
  175. }}
  176. >
  177. {this.materialNormList
  178. .filter(
  179. item =>
  180. !~[
  181. ...this.formData.items.map(val => val.goodsId).filter(val => val != row.goodsId)
  182. ].indexOf(item.goodsId)
  183. )
  184. .map((item, index_) => (
  185. <el-option key={index_} label={item.goodsName} value={item.goodsId}></el-option>
  186. ))}
  187. </el-select>
  188. </el-form-item>
  189. </div>
  190. ) : (
  191. <div>{row['goodsName']}</div>
  192. )
  193. }
  194. }
  195. ]
  196. }
  197. return []
  198. })(),
  199. ...(() => {
  200. if (this.formData.type == 'P') {
  201. return [
  202. {
  203. columnAttributes: {
  204. label: '配件',
  205. prop: 'goodsId'
  206. },
  207. render: (h, { row, column, index }) => {
  208. return row.isEditRow ? (
  209. <div class="redbordererr">
  210. <el-form-item label="" lebel-width="0px" prop={`items.${index}.goodsId`} rules={required}>
  211. <el-select
  212. disabled={this.formDialogType == 2}
  213. value={row[column.columnAttributes.prop]}
  214. onInput={val => {
  215. row[column.columnAttributes.prop] = val
  216. }}
  217. placeholder="请选择"
  218. onChange={val => {
  219. this.materialNormList = []
  220. if (val) {
  221. var data = this.peijianList.find(item => item.goodsId == val)
  222. row['goodsName'] = data.goodsName
  223. this.qkrow(row, {
  224. goodsStockUnit: data.goodsStockUnit,
  225. goodsCode: data.goodsCode,
  226. goodsSpecification: data.goodsSpecification,
  227. brand: data.brandRelaName,
  228. productCategory: data.productRelaName
  229. })
  230. } else {
  231. row['goodsName'] = ''
  232. this.qkrow(row)
  233. }
  234. this.$nextTick(this.jiaoyan)
  235. }}
  236. >
  237. {this.peijianList
  238. .filter(
  239. item =>
  240. !~[
  241. ...this.formData.items.map(val => val.goodsId).filter(val => val != row.goodsId)
  242. ].indexOf(item.goodsId)
  243. )
  244. .map((item, index_) => (
  245. <el-option key={index_} label={item.goodsName} value={item.goodsId}></el-option>
  246. ))}
  247. </el-select>
  248. </el-form-item>
  249. </div>
  250. ) : (
  251. <div>{row['goodsName']}</div>
  252. )
  253. }
  254. }
  255. ]
  256. }
  257. return []
  258. })(),
  259. {
  260. columnAttributes: {
  261. label: '单位',
  262. prop: 'goodsStockUnit'
  263. }
  264. },
  265. {
  266. columnAttributes: {
  267. label: '数量',
  268. prop: 'qty'
  269. },
  270. render: (h, { row, column, index }) => {
  271. return row.isEditRow ? (
  272. <div class="redbordererr">
  273. <el-form-item
  274. label=""
  275. lebel-width="0px"
  276. prop={`items.${index}.${column.columnAttributes.prop}`}
  277. rules={required}
  278. >
  279. <el-input
  280. disabled={this.formDialogType == 2}
  281. type="number"
  282. value={row[column.columnAttributes.prop]}
  283. onInput={val => {
  284. row[column.columnAttributes.prop] = val
  285. }}
  286. placeholder="请选择"
  287. ></el-input>
  288. </el-form-item>
  289. </div>
  290. ) : (
  291. <div>{row[column.columnAttributes.prop]}</div>
  292. )
  293. }
  294. },
  295. ...(() => {
  296. if (this.formData.type == 'M') {
  297. return [
  298. {
  299. columnAttributes: {
  300. label: '商品代码',
  301. prop: 'goodsCode'
  302. }
  303. },
  304. {
  305. columnAttributes: {
  306. label: '规格型号',
  307. prop: 'goodsSpecification'
  308. }
  309. }
  310. ]
  311. }
  312. return []
  313. })(),
  314. ...(() => {
  315. if (this.formData.type == 'P') {
  316. return [
  317. {
  318. columnAttributes: {
  319. label: '配件编码',
  320. prop: 'goodsCode'
  321. }
  322. },
  323. {
  324. columnAttributes: {
  325. label: '适用品牌',
  326. prop: 'brand'
  327. }
  328. },
  329. {
  330. columnAttributes: {
  331. label: '适用产品大类',
  332. prop: 'productCategory'
  333. }
  334. }
  335. ]
  336. }
  337. return []
  338. })(),
  339. ...(() => {
  340. if (!!~[0, 1].indexOf(this.formDialogType)) {
  341. return [
  342. {
  343. columnAttributes: {
  344. label: '操作',
  345. prop: ''
  346. },
  347. render: (h, { row, column, index }) => {
  348. return (
  349. <div class="operation-btns">
  350. <el-button
  351. type="text"
  352. onClick={() => {
  353. this.formData.items.splice(index, 1)
  354. }}
  355. >
  356. 删除
  357. </el-button>
  358. {row.isEditRow ? (
  359. <el-button
  360. type="text"
  361. onClick={() => {
  362. this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
  363. if (valid) {
  364. this.formData.items.splice(index, 1, {
  365. ...this.formData.items[index],
  366. isEditRow: false
  367. })
  368. }
  369. })
  370. }}
  371. >
  372. 确定
  373. </el-button>
  374. ) : null}
  375. {!row.isEditRow ? (
  376. <el-button
  377. type="text"
  378. onClick={() => {
  379. this.formData.items.map((item, index_) => {
  380. if (index_ == index) {
  381. this.formData.items.splice(index, 1, {
  382. ...this.formData.items[index],
  383. isEditRow: true
  384. })
  385. if (this.formData.type == 'M' && row.goodsCategoryId) {
  386. materialNormList({
  387. isShowStockQty: true,
  388. websitId: this.formData.websitId,
  389. pageNum: 1,
  390. pageSize: -1,
  391. params: [
  392. { param: 'b.category_id', compare: '=', value: row.goodsCategoryId },
  393. { param: 'a.status', compare: '=', value: 'ON' }
  394. ]
  395. }).then(res => {
  396. this.materialNormList = res.data.records
  397. })
  398. }
  399. } else {
  400. this.formData.items.splice(index_, 1, {
  401. ...this.formData.items[index_],
  402. isEditRow: false
  403. })
  404. }
  405. })
  406. }}
  407. >
  408. 编辑
  409. </el-button>
  410. ) : null}
  411. </div>
  412. )
  413. }
  414. }
  415. ]
  416. }
  417. return []
  418. })()
  419. ]
  420. },
  421. formItems2() {
  422. return [
  423. {
  424. md: 24,
  425. isShow: true,
  426. name: 'slot-component',
  427. formItemAttributes: {
  428. label: '',
  429. prop: 'items',
  430. 'label-width': '0px',
  431. rules: [...required]
  432. },
  433. render: (h, { props, onInput }) => {
  434. var { value } = props
  435. return (
  436. <div>
  437. {!!~[0, 1].indexOf(this.formDialogType) ? (
  438. <div style="margin-bottom:8px">
  439. <el-button
  440. onClick={() => {
  441. this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
  442. if (valid || (Object.keys(invalidFields).length == 1 && invalidFields.items)) {
  443. this.formData.items.map(item => {
  444. item.isEditRow = false
  445. })
  446. this.formData.items.push({
  447. isEditRow: true,
  448. brand: '',
  449. goodsCategoryId: '',
  450. goodsCategoryName: '',
  451. goodsCode: '',
  452. goodsId: '',
  453. goodsName: '',
  454. goodsSpecification: '',
  455. goodsStockUnit: '',
  456. goodsType: '',
  457. parentCategoryId: '',
  458. parentCategoryName: '',
  459. productCategory: '',
  460. qty: 0,
  461. websitGoodsMoveId: '',
  462. websitId: '',
  463. websitName: ''
  464. })
  465. }
  466. })
  467. }}
  468. >
  469. 添加
  470. </el-button>
  471. </div>
  472. ) : null}
  473. <zj-table
  474. columns={this.columns}
  475. tableData={this.formData.items}
  476. tableAttributes={{
  477. size: 'mini',
  478. border: true
  479. }}
  480. />
  481. </div>
  482. )
  483. }
  484. }
  485. ]
  486. }
  487. },
  488. watch: {
  489. 'formData.websitId'(newVal) {
  490. this.biyaowebsitId(newVal)
  491. this.biyaooutwarehouseList()
  492. },
  493. 'formData.type'(newVal) {
  494. this.biyaooutwarehouseList()
  495. },
  496. 'formData.outStorageId'(newValue) {
  497. this.biyaooutStorageId()
  498. }
  499. },
  500. methods: {
  501. biyaooutwarehouseList() {
  502. if (this.formData.type && this.formData.websitId) {
  503. storageListPageV2({
  504. pageNum: 1,
  505. pageSize: -1,
  506. params: [
  507. { param: 'a.websit_id', compare: '=', value: this.formData.websitId },
  508. { param: 'a.status', compare: '=', value: 'true' },
  509. {
  510. param: 'a.type',
  511. compare: 'like',
  512. value: (() => {
  513. if (this.formData.type == 'M') {
  514. return '辅材'
  515. } else if (this.formData.type == 'P') {
  516. return '配件'
  517. }
  518. return ''
  519. })()
  520. }
  521. ]
  522. }).then(res => {
  523. this.warehouseList = res.data.records
  524. })
  525. } else {
  526. this.warehouseList = []
  527. }
  528. },
  529. biyaooutStorageId() {
  530. if (this.formData.outStorageId && this.formData.websitId) {
  531. getGoods({
  532. websitId: this.formData.websitId,
  533. type: 'P',
  534. saleType: '零售',
  535. storageId: this.formData.outStorageId
  536. }).then(res => {
  537. this.peijianList = res.data
  538. })
  539. } else {
  540. this.peijianList = []
  541. }
  542. },
  543. biyaowebsitId(newVal) {
  544. if (newVal) {
  545. getCategory({ websitId: newVal }).then(res => {
  546. this.mainList = res.data
  547. })
  548. if (this.formData.outStorageId && this.formData.websitId) {
  549. getGoods({
  550. websitId: this.formData.websitId,
  551. type: 'P',
  552. saleType: '零售',
  553. storageId: this.formData.outStorageId
  554. }).then(res => {
  555. this.peijianList = res.data
  556. })
  557. }
  558. } else {
  559. this.warehouseList = []
  560. this.mainList = []
  561. this.peijianList = []
  562. }
  563. },
  564. qkrow(row, data = {}) {
  565. ;['goodsStockUnit', 'goodsCode', 'goodsSpecification', 'brand', 'productCategory'].map(key => {
  566. if (row[key] !== undefined) {
  567. row[key] = data[key] !== undefined ? data[key] : ''
  568. }
  569. })
  570. },
  571. // 添加
  572. addData() {
  573. this.formDialogType = 0
  574. this.openForm()
  575. },
  576. // 关闭弹窗
  577. formCancel() {
  578. this.$refs.formRef.$refs.inlineForm.clearValidate()
  579. this.$data.formData = this.$options.data().formData
  580. this.formDialog = false
  581. },
  582. jiaoyan() {
  583. this.$refs.formRef.validate((valid, invalidFields, errLabels) => {}, false)
  584. },
  585. setNumber(val) {
  586. return Number(val.toFixed(2))
  587. }
  588. }
  589. }