custom.vue 22 KB

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