123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617 |
- <template>
- <div>
- <ul class="flex space-x-2 rtl:space-x-reverse">
- <li>
- <a href="javascript:;" class="text-primary hover:underline">首页</a>
- </li>
- <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
- <span>客户列表</span>
- </li>
- </ul>
- <div class="panel pb-0 mt-6">
- <div class="flex md:items-center md:flex-row flex-col mb-5 gap-5">
-
- <div class="flex items-center gap-5 ltr:ml-auto rtl:mr-auto">
- <div class="dropdown">
- <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="0" class="align-middle">
- <button
- type="button"
- 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"
- >
- <span class="ltr:mr-1 rtl:ml-1">Columns</span>
- <icon-caret-down class="w-5 h-5" />
- </button>
- <template #content>
- <ul class="whitespace-nowrap">
- <template v-for="(col, i) in cols" :key="i">
- <li>
- <div class="flex items-center px-4 py-1">
- <label class="cursor-pointer mb-0">
- <input
- type="checkbox"
- class="form-checkbox"
- :id="`chk-${i}`"
- :value="col.field"
- @change="col.hide = !$event.target.checked"
- :checked="!col.hide"
- />
- <span :for="`chk-${i}`" class="ltr:ml-2 rtl:mr-2">{{ col.title }}</span>
- </label>
- </div>
- </li>
- </template>
- </ul>
- </template>
- </Popper>
- </div>
- <div>
- <input v-model="search" type="text" class="form-input" placeholder="Search..." />
- </div>
- </div>
- </div>
- <div class="datatable">
- <vue3-datatable
- :rows="rows"
- :columns="cols"
- :totalRows="rows?.length"
- :sortable="true"
- :search="search"
- skin="whitespace-nowrap bh-table-hover"
- 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>'
- 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> '
- 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>'
- 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>'
- >
- <template #dob="data">
- {{ formatDate(data.value.dob) }}
- </template>
- <template #isActive="data">
- <span class="capitalize" :class="data.value.isActive ? 'text-success' : 'text-danger'">{{ data.value.isActive }}</span>
- </template>
- </vue3-datatable>
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref } from 'vue';
- import Vue3Datatable from '@bhplugin/vue3-datatable';
- import { useAppStore } from '@/stores/index';
- import { useMeta } from '@/composables/use-meta';
- import IconBell from '@/components/icon/icon-bell.vue';
- import IconCaretDown from '@/components/icon/icon-caret-down.vue';
- useMeta({ title: 'Column Chooser Table' });
- const store = useAppStore();
- const search = ref('');
- const cols =
- ref([
- { field: 'id', title: 'ID', isUnique: true, hide: false },
- { field: 'firstName', title: 'First Name', hide: false },
- { field: 'lastName', title: 'Last Name', hide: false },
- { field: 'email', title: 'Email', hide: false },
- { field: 'phone', title: 'Phone', hide: false },
- { field: 'company', title: 'Company', hide: false },
- { field: 'address.street', title: 'Address', hide: false },
- { field: 'age', title: 'Age', type: 'number', hide: true },
- { field: 'dob', title: 'Birthdate', type: 'date', hide: true },
- { field: 'isActive', title: 'Active', type: 'bool', hide: true },
- ]) || [];
- const rows = ref(
- [
- {
- id: 1,
- firstName: 'Caroline',
- lastName: 'Jensen',
- email: 'carolinejensen@zidant.com',
- dob: '2004-05-28',
- address: {
- street: '529 Scholes Street',
- city: 'Temperanceville',
- zipcode: 5235,
- geo: {
- lat: 23.806115,
- lng: 164.677197,
- },
- },
- phone: '+1 (821) 447-3782',
- isActive: true,
- age: 39,
- company: 'POLARAX',
- },
- {
- id: 2,
- firstName: 'Celeste',
- lastName: 'Grant',
- email: 'celestegrant@polarax.com',
- dob: '1989-11-19',
- address: {
- street: '639 Kimball Street',
- city: 'Bascom',
- zipcode: 8907,
- geo: {
- lat: 65.954483,
- lng: 98.906478,
- },
- },
- phone: '+1 (838) 515-3408',
- isActive: false,
- age: 32,
- company: 'MANGLO',
- },
- {
- id: 3,
- firstName: 'Tillman',
- lastName: 'Forbes',
- email: 'tillmanforbes@manglo.com',
- dob: '2016-09-05',
- address: {
- street: '240 Vandalia Avenue',
- city: 'Thynedale',
- zipcode: 8994,
- geo: {
- lat: -34.949388,
- lng: -82.958111,
- },
- },
- phone: '+1 (969) 496-2892',
- isActive: false,
- age: 26,
- company: 'APPLIDECK',
- },
- {
- id: 4,
- firstName: 'Daisy',
- lastName: 'Whitley',
- email: 'daisywhitley@applideck.com',
- dob: '1987-03-23',
- address: {
- street: '350 Pleasant Place',
- city: 'Idledale',
- zipcode: 9369,
- geo: {
- lat: -54.458809,
- lng: -127.476556,
- },
- },
- phone: '+1 (861) 564-2877',
- isActive: true,
- age: 21,
- company: 'VOLAX',
- },
- {
- id: 5,
- firstName: 'Weber',
- lastName: 'Bowman',
- email: 'weberbowman@volax.com',
- dob: '1983-02-24',
- address: {
- street: '154 Conway Street',
- city: 'Broadlands',
- zipcode: 8131,
- geo: {
- lat: 54.501351,
- lng: -167.47138,
- },
- },
- phone: '+1 (962) 466-3483',
- isActive: false,
- age: 26,
- company: 'ORBAXTER',
- },
- {
- id: 6,
- firstName: 'Buckley',
- lastName: 'Townsend',
- email: 'buckleytownsend@orbaxter.com',
- dob: '2011-05-29',
- address: {
- street: '131 Guernsey Street',
- city: 'Vallonia',
- zipcode: 6779,
- geo: {
- lat: -2.681655,
- lng: 3.528942,
- },
- },
- phone: '+1 (884) 595-2643',
- isActive: true,
- age: 40,
- company: 'OPPORTECH',
- },
- {
- id: 7,
- firstName: 'Latoya',
- lastName: 'Bradshaw',
- email: 'latoyabradshaw@opportech.com',
- dob: '2010-11-23',
- address: {
- street: '668 Lenox Road',
- city: 'Lowgap',
- zipcode: 992,
- geo: {
- lat: 36.026423,
- lng: 130.412198,
- },
- },
- phone: '+1 (906) 474-3155',
- isActive: true,
- age: 24,
- company: 'GORGANIC',
- },
- {
- id: 8,
- firstName: 'Kate',
- lastName: 'Lindsay',
- email: 'katelindsay@gorganic.com',
- dob: '1987-07-02',
- address: {
- street: '773 Harrison Avenue',
- city: 'Carlton',
- zipcode: 5909,
- geo: {
- lat: 42.464724,
- lng: -12.948403,
- },
- },
- phone: '+1 (930) 546-2952',
- isActive: true,
- age: 24,
- company: 'AVIT',
- },
- {
- id: 9,
- firstName: 'Marva',
- lastName: 'Sandoval',
- email: 'marvasandoval@avit.com',
- dob: '2010-11-02',
- address: {
- street: '200 Malta Street',
- city: 'Tuskahoma',
- zipcode: 1292,
- geo: {
- lat: -52.206169,
- lng: 74.19452,
- },
- },
- phone: '+1 (927) 566-3600',
- isActive: false,
- age: 28,
- company: 'QUILCH',
- },
- {
- id: 10,
- firstName: 'Decker',
- lastName: 'Russell',
- email: 'deckerrussell@quilch.com',
- dob: '1994-04-21',
- address: {
- street: '708 Bath Avenue',
- city: 'Coultervillle',
- zipcode: 1268,
- geo: {
- lat: -41.550295,
- lng: -146.598075,
- },
- },
- phone: '+1 (846) 535-3283',
- isActive: false,
- age: 27,
- company: 'MEMORA',
- },
- {
- id: 11,
- firstName: 'Odom',
- lastName: 'Mills',
- email: 'odommills@memora.com',
- dob: '2010-01-24',
- address: {
- street: '907 Blake Avenue',
- city: 'Churchill',
- zipcode: 4400,
- geo: {
- lat: -56.061694,
- lng: -130.238523,
- },
- },
- phone: '+1 (995) 525-3402',
- isActive: true,
- age: 34,
- company: 'ZORROMOP',
- },
- {
- id: 12,
- firstName: 'Sellers',
- lastName: 'Walters',
- email: 'sellerswalters@zorromop.com',
- dob: '1975-11-12',
- address: {
- street: '978 Oakland Place',
- city: 'Gloucester',
- zipcode: 3802,
- geo: {
- lat: 11.732587,
- lng: 96.118099,
- },
- },
- phone: '+1 (830) 430-3157',
- isActive: true,
- age: 28,
- company: 'ORBOID',
- },
- {
- id: 13,
- firstName: 'Wendi',
- lastName: 'Powers',
- email: 'wendipowers@orboid.com',
- dob: '1979-06-02',
- address: {
- street: '376 Greenpoint Avenue',
- city: 'Elliott',
- zipcode: 9149,
- geo: {
- lat: -78.159578,
- lng: -9.835103,
- },
- },
- phone: '+1 (863) 457-2088',
- isActive: true,
- age: 31,
- company: 'SNORUS',
- },
- {
- id: 14,
- firstName: 'Sophie',
- lastName: 'Horn',
- email: 'sophiehorn@snorus.com',
- dob: '2018-09-20',
- address: {
- street: '343 Doughty Street',
- city: 'Homestead',
- zipcode: 330,
- geo: {
- lat: 65.484087,
- lng: 137.413998,
- },
- },
- phone: '+1 (885) 418-3948',
- isActive: true,
- age: 22,
- company: 'XTH',
- },
- {
- id: 15,
- firstName: 'Levine',
- lastName: 'Rodriquez',
- email: 'levinerodriquez@xth.com',
- dob: '1973-02-08',
- address: {
- street: '643 Allen Avenue',
- city: 'Weedville',
- zipcode: 8931,
- geo: {
- lat: -63.185586,
- lng: 117.327808,
- },
- },
- phone: '+1 (999) 565-3239',
- isActive: true,
- age: 27,
- company: 'COMTRACT',
- },
- {
- id: 16,
- firstName: 'Little',
- lastName: 'Hatfield',
- email: 'littlehatfield@comtract.com',
- dob: '2012-01-03',
- address: {
- street: '194 Anthony Street',
- city: 'Williston',
- zipcode: 7456,
- geo: {
- lat: 47.480837,
- lng: 6.085909,
- },
- },
- phone: '+1 (812) 488-3011',
- isActive: false,
- age: 33,
- company: 'ZIDANT',
- },
- {
- id: 17,
- firstName: 'Larson',
- lastName: 'Kelly',
- email: 'larsonkelly@zidant.com',
- dob: '2010-06-14',
- address: {
- street: '978 Indiana Place',
- city: 'Innsbrook',
- zipcode: 639,
- geo: {
- lat: -71.766732,
- lng: 150.854345,
- },
- },
- phone: '+1 (892) 484-2162',
- isActive: true,
- age: 20,
- company: 'SUREPLEX',
- },
- {
- id: 18,
- firstName: 'Kendra',
- lastName: 'Molina',
- email: 'kendramolina@sureplex.com',
- dob: '2002-07-19',
- address: {
- street: '567 Charles Place',
- city: 'Kimmell',
- zipcode: 1966,
- geo: {
- lat: 50.765816,
- lng: -117.106499,
- },
- },
- phone: '+1 (920) 528-3330',
- isActive: false,
- age: 31,
- company: 'DANJA',
- },
- {
- id: 19,
- firstName: 'Ebony',
- lastName: 'Livingston',
- email: 'ebonylivingston@danja.com',
- dob: '1994-10-18',
- address: {
- street: '284 Cass Place',
- city: 'Navarre',
- zipcode: 948,
- geo: {
- lat: 65.271256,
- lng: -83.064729,
- },
- },
- phone: '+1 (970) 591-3039',
- isActive: false,
- age: 33,
- company: 'EURON',
- },
- {
- id: 20,
- firstName: 'Kaufman',
- lastName: 'Rush',
- email: 'kaufmanrush@euron.com',
- dob: '2011-07-10',
- address: {
- street: '408 Kingsland Avenue',
- city: 'Beaulieu',
- zipcode: 7911,
- geo: {
- lat: 41.513153,
- lng: 54.821641,
- },
- },
- phone: '+1 (924) 463-2934',
- isActive: false,
- age: 39,
- company: 'ILLUMITY',
- },
- {
- id: 21,
- firstName: 'Frank',
- lastName: 'Hays',
- email: 'frankhays@illumity.com',
- dob: '2005-06-15',
- address: {
- street: '973 Caton Place',
- city: 'Dargan',
- zipcode: 4104,
- geo: {
- lat: 63.314988,
- lng: -138.771323,
- },
- },
- phone: '+1 (930) 577-2670',
- isActive: false,
- age: 31,
- company: 'SYBIXTEX',
- },
- {
- id: 22,
- firstName: 'Carmella',
- lastName: 'Mccarty',
- email: 'carmellamccarty@sybixtex.com',
- dob: '1980-03-06',
- address: {
- street: '919 Judge Street',
- city: 'Canby',
- zipcode: 8283,
- geo: {
- lat: 9.198597,
- lng: -138.809971,
- },
- },
- phone: '+1 (876) 456-3218',
- isActive: true,
- age: 21,
- company: 'ZEDALIS',
- },
- {
- id: 23,
- firstName: 'Massey',
- lastName: 'Owen',
- email: 'masseyowen@zedalis.com',
- dob: '2012-03-01',
- address: {
- street: '108 Seaview Avenue',
- city: 'Slovan',
- zipcode: 3599,
- geo: {
- lat: -74.648318,
- lng: 99.620699,
- },
- },
- phone: '+1 (917) 567-3786',
- isActive: false,
- age: 40,
- company: 'DYNO',
- },
- {
- id: 24,
- firstName: 'Lottie',
- lastName: 'Lowery',
- email: 'lottielowery@dyno.com',
- dob: '1982-10-10',
- address: {
- street: '557 Meserole Avenue',
- city: 'Fowlerville',
- zipcode: 4991,
- geo: {
- lat: 54.811546,
- lng: -20.996515,
- },
- },
- phone: '+1 (912) 539-3498',
- isActive: true,
- age: 36,
- company: 'MULTIFLEX',
- },
- {
- id: 25,
- firstName: 'Addie',
- lastName: 'Luna',
- email: 'addieluna@multiflex.com',
- dob: '1988-05-01',
- address: {
- street: '688 Bulwer Place',
- city: 'Harmon',
- zipcode: 7664,
- geo: {
- lat: -12.762766,
- lng: -39.924497,
- },
- },
- phone: '+1 (962) 537-2981',
- isActive: true,
- age: 32,
- company: 'PHARMACON',
- },
- ] || []
- );
- const formatDate = (date) => {
- if (date) {
- const dt = new Date(date);
- const month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
- const day = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
- return day + '/' + month + '/' + dt.getFullYear();
- }
- return '';
- };
- </script>
|