telligent-list-module v0.3.997

@telexpress/telligent-list-module

@telexpress:registry=http://192.168.90.40:4873/

http://192.168.90.40:4873/-/web/detail/@telexpress/telligent-list-module

list-module 使用方法

1. yarn add @telexpress/telligent-list-module
2. 複製此專案中的styles資料夾內的telligent到專案的css資料夾以及覆蓋quasar.variables.scss或是直接使用quasar-ui中的切版CSS(待解決)
3. 在boot資料夾中寫一個bootfile(範例如下)

BootFile：

import { boot } from 'quasar/wrappers'
import listmodule from '@telexpress/telligent-list-module';

export default boot(async ({ app }) => {
  app.use(listmodule)
})

4. 於quasar.config.js中將對應的bootfile名稱加入boot中及對應的CSS名稱加入CSS中

quasar.config.js：

   boot: ["你的bootfile名稱"],

   css: [
    'app.scss',
    'telligent/te-custom.scss', //通用SCSS
    'telligent/te-form.scss', //通用SCSS
    'telligent/te-borders.scss', //通用SCSS
    'telligent/te-console.scss', //管理後臺用SCSS
   ],

5. 此table的自訂css className為my-sticky-header-column-table

scss寫法：

:deep(.my-sticky-header-column-table) {
 css內容  
}

此專案範例頁使用方法

1. 執行 npm run serve
2. Demo.vue為範例頁

ListModuleTable 列表模組

props

fields格式： 參考 https://quasar.dev/vue-components/table#defining-the-columns

name / label / field 為必須

field格式：
[
  { name: "name", label: "會員姓名", required: true, align: "left", field: "name" },
  // { name: "memberType", align: "left", label: "會籍", field: "memberType", type: "multi", style: "width:150px" },
  { name: "mobile", align: "left", label: "手機門號", field: "mobile", style: "width:100px" },
  { name: "email", align: "left", label: "Email", field: "email" },
  { name: "registrationTime", align: "center", label: "加入時間", field: "registrationTime", sortable: true, style: "width:180px" },
  { name: "toolBar", align: "center", label: "操作", field: "action", style: "width:100px" },
]

對應listData格式：
{ name: "123", mobile: "09123456789", email: "123@gmail.com", registrationTime: "2022/12/6 12:12" }

pagination 格式：

{
    sortBy: 'createTime' // 預設排序欄位
    descending: false // 排序順序
    page: 1, // 當前頁數
    rowsPerPage: 5, // 一頁顯示筆數
    rowsNumber: 0, // 目前搜尋總筆數
}

customColumns格式：

自訂header欄位名稱為 header-cell-[name]

自訂body欄位名稱為body-cell-[name]

name為要自訂欄位之field name

const customcolumns = [
  "body-cell-createTime", // 自定義body欄位createTime
  "body-cell-toolbar", // 自定義body欄位toolbar
  "header-cell-toolbar", //自定義header toolbar
];

pageSelectionOptions 格式：

根據該表格需求變更
const pageSelectOptions = ref([
    { label: "20筆/頁", value: 20 },
    { label: "50筆/頁", value: 50 },
    { label: "100筆/頁", value: 100 },
]);

下拉加載： needPagination設定為false時，表格載入會改為下拉加載模式。 當表格高度小於顯示筆數時會出現滾軸，滾軸滾到底時會觸發@update-data (當沒有滾軸時便不會觸發此event) 並回傳以下資料：

{
    "index": 18, // 總筆數
    "from" : 0, // 開始index
    "to": 18, // 結束index
    "direction": "increase" // 遞增
}

Emit

update-data 回傳資料：

// needPagination 為 true 時 分頁模式
{
    "sortBy": 'createTime' // 如果點選header進行排序會多回傳排序欄位
    "descending": false // 如果點選header進行排序會多回傳排序順序
	"page": 1, // 根據下方頁碼選取變更當前頁數
	"rowsPerPage": 5, // 根據一頁筆數變更數量
	"rowsNumber": 252 // 當前總筆數
}

// needPagination 為 false 時 下拉加載模式
{
    "index": 18, // 總筆數
    "from" : 0, // 開始index
    "to": 18, // 結束index
    "direction": "increase" // 遞增
}

Methods

V-Slot

名稱根據前面定義的customColumns來填入，用來自訂特定的header或body欄位樣式及資料

<template v-slot:body-cell-createTime="{ props }">  // 先前定義的createTime自定欄位
	<q-td :props="props">
		{{ props.value }} // props.value可以取得在該row該欄位的資料（在此為該row的createTime）
        {{ props.row }} // props.row可以取得該row的資料（在此為該row的object）
	</q-td>
</template>

無資料時會顯示icon+查無資料(未定案)

使用範例

<ListModuleTable
    :fields="headers"
    :listData="realData"
    :selection="canSelect"
    :pagination="pagination"
    rowkey="account"
    @update-data="updatedata"
    @selected-data="selectData"
    :filter="filter"
    :loading="loading"
    :customColumns="customcolumns"
    :needPagination="needPagination"
    :pageSelectOptions="pageSelectOptions"
    ref="refTable"
>
    <template v-slot:body-cell-createTime="{ props }">
    	<q-td :props="props">
            {{ dateConvert(props.value) }}
        </q-td>
    </template>
    <template v-slot:body-cell-phone="{ props }">
        <q-td :props="props">
            {{ mobileConvert(props.value)}}
        </q-td>
    </template>
    <template v-slot:body-cell-email="{ props }">
        <q-td :props="props">
            {{ mailConvert(props.value)}}
        </q-td>
    </template>
    <template v-slot:body-cell-toolbar="{ props }">
    	<q-td :props="props">
            <div class="flex no-wrap justify-between items-center">
                <div class="flex no-wrap q-gutter-x-sm">
                    <q-btn
                      round
                      unelevated
                      color="grey-2"
                      text-color="grey-8"
                      icon="visibility"
                      size="10px"
                      padding="4px"
                      @click="profile(props.row)"
                    />
                    <q-btn
                      unelevated
                      round
                      size="10px"
                      padding="4px"
                      color="grey-2"
                      text-color="grey-8"
                      icon="edit"
                    />
                </div>
            </div>
        </q-td>
	</template>
</ListModuleTable>

ListModuleTool 列表模組工具列（進階篩選、搜尋關鍵字）

Props

Emit

Methods

V-Slot

1. customButton

在項目數量顯示旁插入工具列按鈕用，目前範例為插入匯出按鈕

<template v-slot:customButton>
    <q-btn color="primary" outline icon="o_file_upload" class="q-btn-sm bg-white" label="匯出" unelevated>
        <q-menu anchor="bottom right" self="top right" style="width:160px;">
            <q-item clickable>
                <q-item-section>匯出.CSV</q-item-section>
            </q-item>
            <q-item clickable>
                <q-item-section>匯出.TXT</q-item-section>
            </q-item>
        </q-menu>
    </q-btn>
</template>

2. advancedFilter

插入進階篩選用，一列選項最多4個，如果超過4個需要換行，如果選項少於4個，空白div也須留著避免跑版，詳細請參考各功能切版

<template v-slot:advancedFilter>
	<div class="col">
		<span>會籍</span>
		<q-select
			dense
			outlined
			label="請選擇"
			v-model="memberType"
			:options="TypeOptions"
			multiple
			use-chips
			emit-value
			map-options
			class="bg-white"
		/>
	</div>
	<div class="col"></div>
	<div class="col"></div>
	<div class="col"></div>
</template>

使用範例

<list-module-tool
	:datacount="numrows"
    :data-select="selectedData.length"
    :filter-count="filterCount"
    :show-filter="false"
    @update-filter-key="updatekey"
    @submit-filter="submit"
    @clear-filter="clear"
>
	<template v-slot:advancedFilter>
		<div class="col">
		<span>會籍</span>
			<q-select
				dense
				outlined
				label="請選擇"
				v-model="memberType"
				:options="TypeOptions"
				multiple
				use-chips
				emit-value
				map-options
				class="bg-white"
			/>
		</div>
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
	</template>
</list-module-tool>