goods.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
  1. <template>
  2. <div>
  3. <ul class="flex space-x-2 rtl:space-x-reverse">
  4. <li>
  5. <a href="javascript:;" class="text-primary hover:underline">首页</a>
  6. </li>
  7. <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
  8. <span>商品列表</span>
  9. </li>
  10. </ul>
  11. <div class="panel pb-0 mt-6">
  12. <div class="flex md:items-center md:flex-row col-2 mb-5 gap-5">
  13. <div><button type="button" class="btn btn-primary btn-sm m-1" @click="exportTable('print')">
  14. <icon-printer class="ltr:mr-2 rtl:ml-2" />
  15. PRINT
  16. </button></div>
  17. <div class="ltr:ml-auto rtl:mr-auto">
  18. <input v-model="search" type="text" class="form-input w-auto" placeholder="Search..." />
  19. </div>
  20. </div>
  21. <div class="datatable">
  22. <vue3-datatable :rows="rows" :columns="cols" :totalRows="rows?.length" :hasCheckbox="true"
  23. :sortable="true" sortColumn="name" :search="search" skin="whitespace-nowrap bh-table-hover"
  24. firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180">
  25. <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  26. <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  27. </svg>' lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180">
  28. <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  29. <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  30. </svg>' previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180">
  31. <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  32. </svg>' nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180">
  33. <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  34. </svg>'>
  35. </vue3-datatable>
  36. </div>
  37. </div>
  38. </div>
  39. </template>
  40. <script setup lang="ts">
  41. import { ref } from 'vue';
  42. import Vue3Datatable from '@bhplugin/vue3-datatable';
  43. import { useAppStore } from '@/stores/index';
  44. import { useMeta } from '@/composables/use-meta';
  45. import IconBell from '@/components/icon/icon-bell.vue';
  46. useMeta({ title: 'Checkbox Table' });
  47. const store = useAppStore();
  48. const search = ref('');
  49. const cols =
  50. ref([
  51. { field: 'id', title: 'ID', isUnique: true },
  52. { field: 'firstName', title: 'First Name' },
  53. { field: 'lastName', title: 'Last Name' },
  54. { field: 'email', title: 'Email' },
  55. { field: 'phone', title: 'Phone' },
  56. ]) || [];
  57. const rows = ref(
  58. [
  59. {
  60. id: 1,
  61. firstName: 'Caroline',
  62. lastName: 'Jensen',
  63. email: 'carolinejensen@zidant.com',
  64. dob: '2004-05-28',
  65. address: {
  66. street: '529 Scholes Street',
  67. city: 'Temperanceville',
  68. zipcode: 5235,
  69. geo: {
  70. lat: 23.806115,
  71. lng: 164.677197,
  72. },
  73. },
  74. phone: '+1 (821) 447-3782',
  75. isActive: true,
  76. age: 39,
  77. company: 'POLARAX',
  78. },
  79. {
  80. id: 2,
  81. firstName: 'Celeste',
  82. lastName: 'Grant',
  83. email: 'celestegrant@polarax.com',
  84. dob: '1989-11-19',
  85. address: {
  86. street: '639 Kimball Street',
  87. city: 'Bascom',
  88. zipcode: 8907,
  89. geo: {
  90. lat: 65.954483,
  91. lng: 98.906478,
  92. },
  93. },
  94. phone: '+1 (838) 515-3408',
  95. isActive: false,
  96. age: 32,
  97. company: 'MANGLO',
  98. },
  99. {
  100. id: 3,
  101. firstName: 'Tillman',
  102. lastName: 'Forbes',
  103. email: 'tillmanforbes@manglo.com',
  104. dob: '2016-09-05',
  105. address: {
  106. street: '240 Vandalia Avenue',
  107. city: 'Thynedale',
  108. zipcode: 8994,
  109. geo: {
  110. lat: -34.949388,
  111. lng: -82.958111,
  112. },
  113. },
  114. phone: '+1 (969) 496-2892',
  115. isActive: false,
  116. age: 26,
  117. company: 'APPLIDECK',
  118. },
  119. {
  120. id: 4,
  121. firstName: 'Daisy',
  122. lastName: 'Whitley',
  123. email: 'daisywhitley@applideck.com',
  124. dob: '1987-03-23',
  125. address: {
  126. street: '350 Pleasant Place',
  127. city: 'Idledale',
  128. zipcode: 9369,
  129. geo: {
  130. lat: -54.458809,
  131. lng: -127.476556,
  132. },
  133. },
  134. phone: '+1 (861) 564-2877',
  135. isActive: true,
  136. age: 21,
  137. company: 'VOLAX',
  138. },
  139. {
  140. id: 5,
  141. firstName: 'Weber',
  142. lastName: 'Bowman',
  143. email: 'weberbowman@volax.com',
  144. dob: '1983-02-24',
  145. address: {
  146. street: '154 Conway Street',
  147. city: 'Broadlands',
  148. zipcode: 8131,
  149. geo: {
  150. lat: 54.501351,
  151. lng: -167.47138,
  152. },
  153. },
  154. phone: '+1 (962) 466-3483',
  155. isActive: false,
  156. age: 26,
  157. company: 'ORBAXTER',
  158. },
  159. {
  160. id: 6,
  161. firstName: 'Buckley',
  162. lastName: 'Townsend',
  163. email: 'buckleytownsend@orbaxter.com',
  164. dob: '2011-05-29',
  165. address: {
  166. street: '131 Guernsey Street',
  167. city: 'Vallonia',
  168. zipcode: 6779,
  169. geo: {
  170. lat: -2.681655,
  171. lng: 3.528942,
  172. },
  173. },
  174. phone: '+1 (884) 595-2643',
  175. isActive: true,
  176. age: 40,
  177. company: 'OPPORTECH',
  178. },
  179. {
  180. id: 7,
  181. firstName: 'Latoya',
  182. lastName: 'Bradshaw',
  183. email: 'latoyabradshaw@opportech.com',
  184. dob: '2010-11-23',
  185. address: {
  186. street: '668 Lenox Road',
  187. city: 'Lowgap',
  188. zipcode: 992,
  189. geo: {
  190. lat: 36.026423,
  191. lng: 130.412198,
  192. },
  193. },
  194. phone: '+1 (906) 474-3155',
  195. isActive: true,
  196. age: 24,
  197. company: 'GORGANIC',
  198. },
  199. {
  200. id: 8,
  201. firstName: 'Kate',
  202. lastName: 'Lindsay',
  203. email: 'katelindsay@gorganic.com',
  204. dob: '1987-07-02',
  205. address: {
  206. street: '773 Harrison Avenue',
  207. city: 'Carlton',
  208. zipcode: 5909,
  209. geo: {
  210. lat: 42.464724,
  211. lng: -12.948403,
  212. },
  213. },
  214. phone: '+1 (930) 546-2952',
  215. isActive: true,
  216. age: 24,
  217. company: 'AVIT',
  218. },
  219. {
  220. id: 9,
  221. firstName: 'Marva',
  222. lastName: 'Sandoval',
  223. email: 'marvasandoval@avit.com',
  224. dob: '2010-11-02',
  225. address: {
  226. street: '200 Malta Street',
  227. city: 'Tuskahoma',
  228. zipcode: 1292,
  229. geo: {
  230. lat: -52.206169,
  231. lng: 74.19452,
  232. },
  233. },
  234. phone: '+1 (927) 566-3600',
  235. isActive: false,
  236. age: 28,
  237. company: 'QUILCH',
  238. },
  239. {
  240. id: 10,
  241. firstName: 'Decker',
  242. lastName: 'Russell',
  243. email: 'deckerrussell@quilch.com',
  244. dob: '1994-04-21',
  245. address: {
  246. street: '708 Bath Avenue',
  247. city: 'Coultervillle',
  248. zipcode: 1268,
  249. geo: {
  250. lat: -41.550295,
  251. lng: -146.598075,
  252. },
  253. },
  254. phone: '+1 (846) 535-3283',
  255. isActive: false,
  256. age: 27,
  257. company: 'MEMORA',
  258. },
  259. {
  260. id: 11,
  261. firstName: 'Odom',
  262. lastName: 'Mills',
  263. email: 'odommills@memora.com',
  264. dob: '2010-01-24',
  265. address: {
  266. street: '907 Blake Avenue',
  267. city: 'Churchill',
  268. zipcode: 4400,
  269. geo: {
  270. lat: -56.061694,
  271. lng: -130.238523,
  272. },
  273. },
  274. phone: '+1 (995) 525-3402',
  275. isActive: true,
  276. age: 34,
  277. company: 'ZORROMOP',
  278. },
  279. {
  280. id: 12,
  281. firstName: 'Sellers',
  282. lastName: 'Walters',
  283. email: 'sellerswalters@zorromop.com',
  284. dob: '1975-11-12',
  285. address: {
  286. street: '978 Oakland Place',
  287. city: 'Gloucester',
  288. zipcode: 3802,
  289. geo: {
  290. lat: 11.732587,
  291. lng: 96.118099,
  292. },
  293. },
  294. phone: '+1 (830) 430-3157',
  295. isActive: true,
  296. age: 28,
  297. company: 'ORBOID',
  298. },
  299. {
  300. id: 13,
  301. firstName: 'Wendi',
  302. lastName: 'Powers',
  303. email: 'wendipowers@orboid.com',
  304. dob: '1979-06-02',
  305. address: {
  306. street: '376 Greenpoint Avenue',
  307. city: 'Elliott',
  308. zipcode: 9149,
  309. geo: {
  310. lat: -78.159578,
  311. lng: -9.835103,
  312. },
  313. },
  314. phone: '+1 (863) 457-2088',
  315. isActive: true,
  316. age: 31,
  317. company: 'SNORUS',
  318. },
  319. {
  320. id: 14,
  321. firstName: 'Sophie',
  322. lastName: 'Horn',
  323. email: 'sophiehorn@snorus.com',
  324. dob: '2018-09-20',
  325. address: {
  326. street: '343 Doughty Street',
  327. city: 'Homestead',
  328. zipcode: 330,
  329. geo: {
  330. lat: 65.484087,
  331. lng: 137.413998,
  332. },
  333. },
  334. phone: '+1 (885) 418-3948',
  335. isActive: true,
  336. age: 22,
  337. company: 'XTH',
  338. },
  339. {
  340. id: 15,
  341. firstName: 'Levine',
  342. lastName: 'Rodriquez',
  343. email: 'levinerodriquez@xth.com',
  344. dob: '1973-02-08',
  345. address: {
  346. street: '643 Allen Avenue',
  347. city: 'Weedville',
  348. zipcode: 8931,
  349. geo: {
  350. lat: -63.185586,
  351. lng: 117.327808,
  352. },
  353. },
  354. phone: '+1 (999) 565-3239',
  355. isActive: true,
  356. age: 27,
  357. company: 'COMTRACT',
  358. },
  359. {
  360. id: 16,
  361. firstName: 'Little',
  362. lastName: 'Hatfield',
  363. email: 'littlehatfield@comtract.com',
  364. dob: '2012-01-03',
  365. address: {
  366. street: '194 Anthony Street',
  367. city: 'Williston',
  368. zipcode: 7456,
  369. geo: {
  370. lat: 47.480837,
  371. lng: 6.085909,
  372. },
  373. },
  374. phone: '+1 (812) 488-3011',
  375. isActive: false,
  376. age: 33,
  377. company: 'ZIDANT',
  378. },
  379. {
  380. id: 17,
  381. firstName: 'Larson',
  382. lastName: 'Kelly',
  383. email: 'larsonkelly@zidant.com',
  384. dob: '2010-06-14',
  385. address: {
  386. street: '978 Indiana Place',
  387. city: 'Innsbrook',
  388. zipcode: 639,
  389. geo: {
  390. lat: -71.766732,
  391. lng: 150.854345,
  392. },
  393. },
  394. phone: '+1 (892) 484-2162',
  395. isActive: true,
  396. age: 20,
  397. company: 'SUREPLEX',
  398. },
  399. {
  400. id: 18,
  401. firstName: 'Kendra',
  402. lastName: 'Molina',
  403. email: 'kendramolina@sureplex.com',
  404. dob: '2002-07-19',
  405. address: {
  406. street: '567 Charles Place',
  407. city: 'Kimmell',
  408. zipcode: 1966,
  409. geo: {
  410. lat: 50.765816,
  411. lng: -117.106499,
  412. },
  413. },
  414. phone: '+1 (920) 528-3330',
  415. isActive: false,
  416. age: 31,
  417. company: 'DANJA',
  418. },
  419. {
  420. id: 19,
  421. firstName: 'Ebony',
  422. lastName: 'Livingston',
  423. email: 'ebonylivingston@danja.com',
  424. dob: '1994-10-18',
  425. address: {
  426. street: '284 Cass Place',
  427. city: 'Navarre',
  428. zipcode: 948,
  429. geo: {
  430. lat: 65.271256,
  431. lng: -83.064729,
  432. },
  433. },
  434. phone: '+1 (970) 591-3039',
  435. isActive: false,
  436. age: 33,
  437. company: 'EURON',
  438. },
  439. {
  440. id: 20,
  441. firstName: 'Kaufman',
  442. lastName: 'Rush',
  443. email: 'kaufmanrush@euron.com',
  444. dob: '2011-07-10',
  445. address: {
  446. street: '408 Kingsland Avenue',
  447. city: 'Beaulieu',
  448. zipcode: 7911,
  449. geo: {
  450. lat: 41.513153,
  451. lng: 54.821641,
  452. },
  453. },
  454. phone: '+1 (924) 463-2934',
  455. isActive: false,
  456. age: 39,
  457. company: 'ILLUMITY',
  458. },
  459. {
  460. id: 21,
  461. firstName: 'Frank',
  462. lastName: 'Hays',
  463. email: 'frankhays@illumity.com',
  464. dob: '2005-06-15',
  465. address: {
  466. street: '973 Caton Place',
  467. city: 'Dargan',
  468. zipcode: 4104,
  469. geo: {
  470. lat: 63.314988,
  471. lng: -138.771323,
  472. },
  473. },
  474. phone: '+1 (930) 577-2670',
  475. isActive: false,
  476. age: 31,
  477. company: 'SYBIXTEX',
  478. },
  479. {
  480. id: 22,
  481. firstName: 'Carmella',
  482. lastName: 'Mccarty',
  483. email: 'carmellamccarty@sybixtex.com',
  484. dob: '1980-03-06',
  485. address: {
  486. street: '919 Judge Street',
  487. city: 'Canby',
  488. zipcode: 8283,
  489. geo: {
  490. lat: 9.198597,
  491. lng: -138.809971,
  492. },
  493. },
  494. phone: '+1 (876) 456-3218',
  495. isActive: true,
  496. age: 21,
  497. company: 'ZEDALIS',
  498. },
  499. {
  500. id: 23,
  501. firstName: 'Massey',
  502. lastName: 'Owen',
  503. email: 'masseyowen@zedalis.com',
  504. dob: '2012-03-01',
  505. address: {
  506. street: '108 Seaview Avenue',
  507. city: 'Slovan',
  508. zipcode: 3599,
  509. geo: {
  510. lat: -74.648318,
  511. lng: 99.620699,
  512. },
  513. },
  514. phone: '+1 (917) 567-3786',
  515. isActive: false,
  516. age: 40,
  517. company: 'DYNO',
  518. },
  519. {
  520. id: 24,
  521. firstName: 'Lottie',
  522. lastName: 'Lowery',
  523. email: 'lottielowery@dyno.com',
  524. dob: '1982-10-10',
  525. address: {
  526. street: '557 Meserole Avenue',
  527. city: 'Fowlerville',
  528. zipcode: 4991,
  529. geo: {
  530. lat: 54.811546,
  531. lng: -20.996515,
  532. },
  533. },
  534. phone: '+1 (912) 539-3498',
  535. isActive: true,
  536. age: 36,
  537. company: 'MULTIFLEX',
  538. },
  539. {
  540. id: 25,
  541. firstName: 'Addie',
  542. lastName: 'Luna',
  543. email: 'addieluna@multiflex.com',
  544. dob: '1988-05-01',
  545. address: {
  546. street: '688 Bulwer Place',
  547. city: 'Harmon',
  548. zipcode: 7664,
  549. geo: {
  550. lat: -12.762766,
  551. lng: -39.924497,
  552. },
  553. },
  554. phone: '+1 (962) 537-2981',
  555. isActive: true,
  556. age: 32,
  557. company: 'PHARMACON',
  558. },
  559. ] || []
  560. );
  561. const randomColor = () => {
  562. const color = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
  563. const random = Math.floor(Math.random() * color.length);
  564. return color[random];
  565. };
  566. </script>