dk-label-multiple-select.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  1. /*******************************************************************************
  2. * Copyright(c) 2022 dongke All rights reserved. / Confidential
  3. * 类的信息:
  4. * 1.程序名称:
  5. * 编辑履历:
  6. * 作者 日期 版本 修改内容
  7. * 于继渤 2022-5-28 1.00 筛选多选标签
  8. * 作者 日期 版本 修改内容
  9. * 于继渤 2022-5-31 1.01 完善抛出事件
  10. *******************************************************************************/
  11. const app = getApp()
  12. const Constants = require('../../../utils/Constants.js');
  13. const api = require('../../../utils/api.js');
  14. Component({
  15. /**
  16. * 组件的属性列表
  17. */
  18. properties: {
  19. typeName: {
  20. type: String,
  21. default: ''
  22. },
  23. oneSelectFlag: {
  24. type: Boolean,
  25. default: false
  26. },
  27. show: {
  28. type: Boolean,
  29. default: true,
  30. observer: function (newVal) {
  31. let show = this.properties.show
  32. if (show) {
  33. let stowList = this.data.stowList;
  34. let moreList = this.data.moreList;
  35. if (stowList.length == 0 && moreList.length == 0) {
  36. let dataSourceCode = this.data.dataSourceCode
  37. let typeName = this.data.typeName
  38. // 从数据库中取值
  39. if (this.data.loadDataFlag) {
  40. this.getData(dataSourceCode).then(res => {
  41. // 赋值逻辑
  42. let list = res.data
  43. list.forEach(function(item){
  44. if(!item.id){
  45. item.id = item.code
  46. }
  47. })
  48. if (list == null || list.length <= 0) return
  49. list.forEach(item => {
  50. item.infotype = 'default'
  51. })
  52. if (list.length > 4) {
  53. //收起内容(不包含前4个)
  54. stowList = list.slice(5, list.length - 1)
  55. moreList = list.slice(0, 4)
  56. } else {
  57. //更多 前4个
  58. moreList = list
  59. }
  60. this.setData({
  61. stowList: stowList,
  62. moreList: moreList
  63. })
  64. })
  65. }
  66. }
  67. }
  68. }
  69. }
  70. },
  71. options: {
  72. multipleSlots: true, //插槽
  73. },
  74. /**
  75. * 组件的初始数据
  76. */
  77. data: {
  78. stowList: [],
  79. moreList: [],
  80. dataList: [],
  81. dataListTemp: [],
  82. loadDataFlag: true, // 是否从数据库加载数据
  83. },
  84. /**
  85. * 组件生命周期
  86. */
  87. lifetimes: {
  88. attached: function () {
  89. let dataSourceCode = ''
  90. let typeName = this.data.typeName
  91. let name = ''
  92. if (typeName === 'other') {
  93. dataSourceCode = 'other'
  94. name = '其他'
  95. }
  96. if (typeName === 'salesChannel') {
  97. dataSourceCode = 'salesChannel'
  98. name = '销售渠道'
  99. }
  100. if (typeName === 'org') {
  101. dataSourceCode = 'org'
  102. name = '业务部门'
  103. }
  104. //收付款类型
  105. if (typeName === 'rpType') {
  106. dataSourceCode = 'rpType'
  107. name = '收付款类型'
  108. let stowList = [{
  109. name: '收款',
  110. id: '收付款类型-收款',
  111. infotype: 'default'
  112. },
  113. {
  114. name: '付款',
  115. id: '收付款类型-付款',
  116. infotype: 'default'
  117. },
  118. ];
  119. this.setData({
  120. moreList: stowList,
  121. moreFlag: false,
  122. loadDataFlag: false
  123. })
  124. }
  125. //业务员
  126. if (typeName === 'staff') {
  127. dataSourceCode = 'staff'
  128. name = '业务员'
  129. }
  130. //入库类型
  131. if (typeName === 'intoType') {
  132. dataSourceCode = 'intoType'
  133. name = '入库类型'
  134. let stowList = [{
  135. name: '采购入库',
  136. id: '入库类型-采购入库',
  137. infotype: 'default'
  138. },
  139. {
  140. name: '销退入库',
  141. id: '入库类型-销退入库',
  142. infotype: 'default'
  143. },
  144. {
  145. name: '其他入库',
  146. id: '入库类型-其他入库',
  147. infotype: 'default'
  148. },
  149. ];
  150. this.setData({
  151. moreList: stowList,
  152. moreFlag: false,
  153. loadDataFlag: false
  154. })
  155. }
  156. //出库进度
  157. if (typeName === 'outStatus') {
  158. dataSourceCode = 'outStatus'
  159. name = '出库进度'
  160. let stowList = [{
  161. name: '未出库',
  162. id: 0,
  163. infotype: 'default'
  164. },
  165. {
  166. name: '出库中',
  167. id: 1,
  168. infotype: 'default'
  169. },
  170. {
  171. name: '已出库',
  172. id: 2,
  173. infotype: 'default'
  174. },
  175. {
  176. name: '有退货',
  177. id: 3,
  178. infotype: 'default'
  179. }
  180. ];
  181. this.setData({
  182. moreList: stowList,
  183. moreFlag: false,
  184. loadDataFlag: false
  185. })
  186. }
  187. //入库类型
  188. if (typeName === 'receiptType') {
  189. dataSourceCode = 'entryType'
  190. name = '入库类型'
  191. }
  192. //入库原因
  193. if (typeName === 'intoReason') {
  194. dataSourceCode = 'inReason'
  195. name = '入库原因'
  196. let stowList = [{
  197. name: '盘盈入库',
  198. id: '10112024-0314-0000-0000-000010d79635',
  199. infotype: 'default'
  200. },
  201. ];
  202. this.setData({
  203. moreList: stowList,
  204. moreFlag: false,
  205. loadDataFlag: false
  206. })
  207. }
  208. //出库类型
  209. if (typeName === 'outType') {
  210. dataSourceCode = 'outType'
  211. name = '出库类型'
  212. let stowList = [{
  213. name: '销售出库',
  214. id: '出库类型-销售出库',
  215. infotype: 'default'
  216. },
  217. {
  218. name: '采退出库',
  219. id: '出库类型-采退出库',
  220. infotype: 'default'
  221. },
  222. {
  223. name: '其他出库',
  224. id: '出库类型-其他出库',
  225. infotype: 'default'
  226. },
  227. ];
  228. this.setData({
  229. moreList: stowList,
  230. moreFlag: false,
  231. loadDataFlag: false
  232. })
  233. }
  234. //出库原因
  235. if (typeName === 'outReason') {
  236. dataSourceCode = 'outReason'
  237. name = '出库原因'
  238. let stowList = [{
  239. name: '破损出库',
  240. id: '10112024-0312-0000-0000-00000f5759fd',
  241. infotype: 'default'
  242. },
  243. ];
  244. this.setData({
  245. moreList: stowList,
  246. moreFlag: false,
  247. loadDataFlag: false
  248. })
  249. }
  250. //采购入库状态
  251. if (typeName === 'inInventoryStatus') {
  252. dataSourceCode = 'inInventoryStatus'
  253. name = '入库状态'
  254. let stowList = [{
  255. name: '待入库',
  256. id: 0,
  257. infotype: 'default'
  258. },
  259. {
  260. name: '已入库',
  261. id: 1,
  262. infotype: 'default'
  263. }
  264. ];
  265. this.setData({
  266. moreList: stowList,
  267. moreFlag: false,
  268. loadDataFlag: false
  269. })
  270. }
  271. //采购状态
  272. if (typeName === 'purchaseStatus') {
  273. dataSourceCode = 'purchaseStatus'
  274. name = '采购状态'
  275. let stowList = [{
  276. name: '暂存',
  277. id: 0,
  278. infotype: 'default'
  279. },
  280. {
  281. name: '成交',
  282. id: 1,
  283. infotype: 'default'
  284. },
  285. {
  286. name: '出库中',
  287. id: 2,
  288. infotype: 'default'
  289. },
  290. {
  291. name: '待入库',
  292. id: 3,
  293. infotype: 'default'
  294. },
  295. {
  296. name: '已入库',
  297. id: 4,
  298. infotype: 'default'
  299. }
  300. ];
  301. this.setData({
  302. moreList: stowList,
  303. moreFlag: false,
  304. loadDataFlag: false
  305. })
  306. }
  307. //退货状态
  308. if (typeName === 'outInventoryStatus') {
  309. dataSourceCode = 'outInventoryStatus'
  310. name = '退货状态'
  311. let stowList = [{
  312. name: '审批中',
  313. id: 0,
  314. infotype: 'default'
  315. },
  316. {
  317. name: '未出库',
  318. id: 1,
  319. infotype: 'default'
  320. },
  321. {
  322. name: '已出库',
  323. id: 2,
  324. infotype: 'default'
  325. },
  326. {
  327. name: '已退货',
  328. id: 3,
  329. infotype: 'default'
  330. }
  331. ];
  332. this.setData({
  333. moreList: stowList,
  334. moreFlag: false,
  335. loadDataFlag: false
  336. })
  337. }
  338. if (typeName === 'purchaseAccordingStatus') {
  339. dataSourceCode = 'purchaseAccordingStatus'
  340. name = '采购状态'
  341. let stowList = [
  342. {
  343. name: '成交',
  344. id: 0,
  345. infotype: 'info'
  346. },
  347. {
  348. name: '出库中',
  349. id: 1,
  350. infotype: 'default'
  351. }
  352. ];
  353. this.setData({
  354. moreList: stowList,
  355. moreFlag: false,
  356. loadDataFlag: false
  357. })
  358. }
  359. //收款进度
  360. if (typeName === 'receiveStatus') {
  361. dataSourceCode = 'receiveStatus'
  362. name = '收款进度'
  363. let stowList = [{
  364. name: '未收款',
  365. id: 0,
  366. infotype: 'default'
  367. },
  368. {
  369. name: '部分收款',
  370. id: 1,
  371. infotype: 'default'
  372. },
  373. {
  374. name: '收款完成',
  375. id: 2,
  376. infotype: 'default'
  377. }
  378. ];
  379. this.setData({
  380. moreList: stowList,
  381. moreFlag: false,
  382. loadDataFlag: false
  383. })
  384. }
  385. //客户接待
  386. if (typeName === 'followStatus') {
  387. dataSourceCode = 'followStatus'
  388. name = '接待类型'
  389. let stowList = [{
  390. name: '留资接待',
  391. id: 0,
  392. infotype: 'default'
  393. },
  394. {
  395. name: '陌生接待',
  396. id: 1,
  397. infotype: 'default'
  398. }
  399. ]
  400. this.setData({
  401. moreList: stowList,
  402. moreFlag: false,
  403. loadDataFlag: false
  404. })
  405. }
  406. this.setData({
  407. dataSourceCode: dataSourceCode,
  408. name: name
  409. })
  410. },
  411. detached: function () {
  412. // 在组件实例被从页面节点树移除时执行
  413. },
  414. },
  415. /**
  416. * 组件的方法列表
  417. */
  418. methods: {
  419. /**
  420. * @desc : 筛选更多触发事件
  421. * @author : 于继渤
  422. * @date : 2022/5/28 08:50
  423. */
  424. onChangeMore(e) {
  425. if (this.data.stowList.length == 0) {
  426. return
  427. }
  428. this.setData({
  429. moreFlag: !this.data.moreFlag
  430. })
  431. },
  432. /**
  433. * @desc : 点击标签事件
  434. * @author : 于继渤
  435. * @date : 2022/5/28 08:50
  436. */
  437. onClickTag(e) {
  438. let key = e.currentTarget.dataset.key
  439. let typekey = e.currentTarget.dataset.typekey
  440. let index = e.currentTarget.dataset.index
  441. let moreList = this.data.moreList
  442. let stowList = this.data.stowList
  443. if (key === 'more') {
  444. if (moreList[index].infotype === 'default') {
  445. moreList[index].infotype = 'info'
  446. } else if (moreList[index].infotype === 'info') {
  447. moreList[index].infotype = 'default'
  448. }
  449. }
  450. if (key === 'stow') {
  451. if (stowList[index].infotype === 'default') {
  452. stowList[index].infotype = 'info'
  453. } else if (stowList[index].infotype === 'info') {
  454. stowList[index].infotype = 'default'
  455. }
  456. }
  457. this.setData({
  458. moreList: moreList,
  459. stowList: stowList
  460. })
  461. let dataList = this.data.dataList
  462. if (moreList.length > 0) {
  463. moreList.forEach(res1 => {
  464. if (res1.infotype === 'info') {
  465. dataList.push(res1)
  466. }
  467. })
  468. }
  469. if (this.data.oneSelectFlag) {
  470. moreList.forEach(itt => {
  471. if (itt.name == moreList[index].name) {
  472. itt.infotype = 'info'
  473. } else {
  474. itt.infotype = 'default'
  475. }
  476. })
  477. this.setData({
  478. moreList: moreList
  479. })
  480. }
  481. if (stowList.length > 0) {
  482. stowList.forEach(res2 => {
  483. if (res2.infotype === 'info') {
  484. dataList.push(res2)
  485. }
  486. })
  487. }
  488. let dataListTemp = []
  489. dataList.forEach(res3 => {
  490. if (res3.infotype == 'info') {
  491. dataListTemp.push(res3.id)
  492. }
  493. })
  494. dataList = dataList.filter((item, index) => {
  495. return dataList.indexOf(item) === index
  496. })
  497. this.triggerEvent('onClickTag', {
  498. dataList: Array.from(new Set(dataListTemp)),
  499. key: typekey
  500. })
  501. },
  502. /**
  503. * @desc : 重置事件
  504. * @author : 于继渤
  505. * @date : 2022/5/28 08:50
  506. */
  507. clearForm() {
  508. let moreList = this.data.moreList
  509. let stowList = this.data.stowList
  510. if (moreList.length > 0) {
  511. moreList.forEach(res => {
  512. res.infotype = 'default'
  513. })
  514. }
  515. if (stowList.length > 0) {
  516. stowList.forEach(res => {
  517. res.infotype = 'default'
  518. })
  519. }
  520. this.setData({
  521. moreList: moreList,
  522. stowList: stowList,
  523. dataList: []
  524. })
  525. },
  526. /**
  527. * @desc : 筛选数据源获取
  528. * @author : 于继渤
  529. * @date : 2022/5/28 08:50
  530. */
  531. getData(dataSourceCode) {
  532. let param = {
  533. dataSourceCode: dataSourceCode
  534. }
  535. return new Promise((resolve, reject) => {
  536. api.request(Constants.BASIC_COMMON_API + 'get_wx_init_data', 'POST', param).then(res => {
  537. if (res.data.code === 200) {
  538. resolve(res.data)
  539. } else {
  540. reject(res.data)
  541. }
  542. })
  543. })
  544. },
  545. }
  546. })