ปรับ UI

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-11-22 18:04:12 +07:00
parent 30d342728b
commit 0612820928
45 changed files with 93 additions and 76 deletions

View file

@ -258,7 +258,7 @@ const getClass = (val: boolean) => {
:class="getClass(status == 'checkRegister' || status == 'payment')"
:readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง/ตำบล '}`]"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
@ -268,7 +268,7 @@ const getClass = (val: boolean) => {
option-label="name"
:options="subdistrictOptions"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
:label="`${'แขวง/ตำบล '}`"
@update:model-value="(value) => selectSubDistrict(value, '1')"
/>
</div>
@ -382,7 +382,7 @@ const getClass = (val: boolean) => {
:class="getClass(status == 'checkRegister' || status == 'payment')"
:readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง/ตำบล '}`]"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
@ -392,7 +392,7 @@ const getClass = (val: boolean) => {
option-label="name"
:options="subdistrictCOptions"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
:label="`${'แขวง/ตำบล '}`"
@update:model-value="(value) => selectSubDistrict(value, '2')"
/>
</div>

View file

@ -1017,7 +1017,7 @@ onMounted(async () => {
:options="provinceOptions"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value) => selectProvince(value)"
@update:model-value="(value:any) => selectProvince(value)"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
@ -1037,7 +1037,7 @@ onMounted(async () => {
:options="districtOptions"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value) => selectDistrict(value)"
@update:model-value="(value:any) => selectDistrict(value)"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
@ -1046,7 +1046,7 @@ onMounted(async () => {
:class="getClass(enable.about)"
:readonly="!enable.about"
:borderless="!enable.about"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง/ตำบล '}`]"
:outlined="enable.about"
dense
lazy-rules
@ -1056,8 +1056,8 @@ onMounted(async () => {
option-label="name"
:options="subdistrictOptions"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
@update:model-value="(value) => selectSubDistrict(value)"
:label="`${'แขวง/ตำบล '}`"
@update:model-value="(value:any) => selectSubDistrict(value)"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
@ -1085,8 +1085,8 @@ onMounted(async () => {
v-model="address.tel"
:borderless="!enable.about"
:rules="[
(val) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val) =>
(val:any) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:any) =>
val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
]"
:label="`${'เบอร์โทร'}`"

View file

@ -16,7 +16,7 @@ const dataLabel = {
registrationAddress: "ที่อยู่ตามทะเบียนบ้าน",
registrationProvince: "จังหวัด",
registrationDistrict: "เขต/อำเภอ",
registrationSubDistrict: "แขวง / ตำบล",
registrationSubDistrict: "แขวง/ตำบล",
registrationZipCode: "รหัสไปรษณีย์",
};
@ -51,8 +51,8 @@ async function selectDistrict(e: string | null, name: string) {
}
/**
* งกนเลอก แขวง / ตำบล
* @param e แขวง / ตำบล เลอก
* งกนเลอก แขวง/ตำบล
* @param e แขวง/ตำบล เลอก
* @param name 1 อยตามทะเบยนบาน 2 อยจจ
*/
function selectSubDistrict(e: string | null, name: string) {
@ -162,7 +162,7 @@ watch(
v-model="formDataAddress.registrationSubDistrictId"
:options="storeLinkCenter.OpsAddress.subdistrictOps"
:label="dataLabel.registrationSubDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง/ตำบล'}`]"
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
@filter="(inputValue:string,
doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'subdistrictOps'

View file

@ -63,6 +63,7 @@ const formInformations = reactive<RequestObject>({
firstName: "",
prefix: "",
rank: null,
prefixMain: "",
});
const formDataAddress = reactive<RequestregistrationAddressObject>({
@ -257,7 +258,7 @@ async function amiRequest() {
formInformations.nationality = data.value.nationalityDesc;
// dateOfBirth format 1989-01-01
formInformations.birthDate = conventDateOfBirth(`${data.value.dateOfBirth}`);
formInformations.birthDate = data.value.dateOfBirth ? conventDateOfBirth(`${data.value.dateOfBirth}`) : null;
age.value = storeLinkCenter.calculateAge(data.value.age);
formInformations.gender = data.value.genderDesc;
@ -327,15 +328,15 @@ async function convertDistrict(val: string) {
const id = storeLinkCenter.OpsAddress.districtOps.find(
(e: DataOption) => e.name === val
)?.id;
// /
// /
await storeLinkCenter.fetchSubDistrict(id ? id : null, "1", false);
return id ? id : null;
}
/**
* งกนแปลงชอแขวง / ตำบล เป ID
* @param val อแขวง / ตำบล
* งกนแปลงชอแขวง/ตำบล เป ID
* @param val อแขวง/ตำบล
*/
async function convertSubdistrict(val: string) {
const result = storeLinkCenter.OpsAddress.subdistrictOps.find(

View file

@ -66,7 +66,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",

View file

@ -47,7 +47,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "fullName",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px; min-width: 200px",

View file

@ -215,6 +215,8 @@ async function getData() {
.get(config.API.profileNewGovernmentById(profileId.value, empType.value))
.then(async (res) => {
const data = await res.data.result;
console.log(data);
formMain.ocId = data.org ?? "-"; //
formMain.positionId = data.position ?? "-"; //
formMain.positionLine = data.positionField ?? "-"; //

View file

@ -39,7 +39,7 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
/**
* props
*/
const isLeave = defineModel<boolean>("isLeave", {
const isLeave = defineModel<boolean>("isLeave", {
required: true,
});
@ -230,7 +230,7 @@ function openDialogAdd() {
/**
* function fetch อมลรายการว
*/
function fetchData(id: string) {
async function fetchData(id: string) {
showLoader();
http
.get(config.API.profileNewDisciplineByProfileId(id, empType.value))
@ -398,7 +398,6 @@ onMounted(() => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
<q-btn-toggle

View file

@ -252,7 +252,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
/**
* งกนดงขอมลทอย
*
* งขอมลทอย อมลจงหว อม เขต / อำเภอ และขอม แขวง / ตำบล
* งขอมลทอย อมลจงหว อม เขต / อำเภอ และขอม แขวง/ตำบล
*/
async function getData() {
showLoader();
@ -337,8 +337,8 @@ async function selectDistrict(e: string | null, name: string) {
}
/**
* งกนเลอก แขวง / ตำบล
* @param e แขวง / ตำบล เลอก
* งกนเลอก แขวง/ตำบล
* @param e แขวง/ตำบล เลอก
* @param name 1 อยตามทะเบยนบาน 2 อยจจ
*/
function selectSubDistrict(e: string | null, name: string) {
@ -743,7 +743,7 @@ onMounted(async () => {
v-model="formData.registrationSubDistrictId"
:options="store.Ops.subdistrictOps"
:label="dataLabel.registrationSubDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง/ตำบล'}`]"
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
@ -864,7 +864,7 @@ onMounted(async () => {
v-model="formData.currentSubDistrictId"
:options="store.Ops.subdistrictCOps"
:label="dataLabel.currentSubDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง/ตำบล'}`]"
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'

View file

@ -1,5 +1,5 @@
interface RequestObject {
birthDate: Date | null;
birthDate: Date | null | string;
bloodGroup: string | null;
citizenId: string;
// email: string | null;

View file

@ -3,6 +3,7 @@ interface DataType {
posLevels: any;
posTypeName: string;
posTypeRank: number;
posTypeShortName?: string;
}
interface DataLevel {

View file

@ -95,6 +95,7 @@ interface PosType {
lastUpdateFullName: string;
posTypeName: string;
posTypeRank: number;
posTypeShortName?: string;
}
export type {

View file

@ -33,16 +33,17 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
]);
function fetchType(data: DataType[]) {
posTypeMain.value = data;
const list: DataOption[] = data.map((e: DataType) => ({
id: e.id,
name: e.posTypeName,
}));
posTypeOps.value = list;
}
function fetchLevel(data: DataLevel[]) {
function fetchLevel(data: DataLevel[], shortName: string = "") {
const list: DataOption[] = data.map((e: DataLevel) => ({
id: e.id,
name: e.posLevelName,
name: `${shortName} ${e.posLevelName} `,
}));
const seen = new Set();
posLevelOps.value = list.filter((item: DataOption) => {

View file

@ -130,7 +130,7 @@ export const useAddressDataStore = defineStore("addess", () => {
}
/**
* /
* /
* @param id /
* @param position ,
*/

View file

@ -243,7 +243,7 @@ export const useDataLinkCenter = defineStore("DataLinkCenter", () => {
}
/**
* /
* /
* @param id /
* @param position ,
*/

View file

@ -349,6 +349,8 @@ async function fetchDataPersonal() {
.get(config.API.registryNewByProfileId(profileId.value, empType.value))
.then(async (res) => {
formDetail.value = res.data.result;
console.log(formDetail.value);
storeRegistry.isLeave = res.data.result.isLeave;
if (res.data.result.leaveReason) {
@ -956,7 +958,7 @@ onMounted(async () => {
{{ empType === "" ? "ระดับ" : "ระดับชั้นงาน" }}
</div>
<div class="col">
{{ formDetail?.posLevel?.posLevelName || "-" }}
{{ `${ empType === "" ? '': formDetail?.posType?.posTypeShortName } ${formDetail?.posLevel?.posLevelName}` || "-" }}
</div>
</div>
</div>

View file

@ -242,7 +242,10 @@ function selectType() {
*/
function selectPosType(item: DataOption) {
const dataType = store.posTypeMain.find((e: DataType) => e.id === item.id);
store.fetchLevel(dataType?.posLevels);
const shortName =
empType.value === "officer" ? "" : dataType?.posTypeShortName;
store.fetchLevel(dataType?.posLevels, shortName);
store.labelOption.posType = item.name;
store.labelOption.posLevel = "ทั้งหมด";
store.formFilter.page = 1;

View file

@ -13,6 +13,9 @@ const route = useRoute();
const store = useRegistryNewDataStore();
const isIDP = ref<boolean | null>(null);
const isEmployee = ref<boolean>(
route.name?.toString() == "registryNewRequestEditEMP" ? true : false
);
onBeforeMount(async () => {
isIDP.value = await (route.name?.toString() == "registryNewRequestEditEMP"
@ -39,6 +42,7 @@ onMounted(() => {
@click="router.go(-1)"
/>
รายการคำรองขอแกไขทะเบยนประว
{{ `(${isEmployee ? "ลูกจ้างประจำ" : "ข้าราชการ กทม.สามัญ"})` }}
</div>
</div>

View file

@ -394,7 +394,7 @@ onMounted(() => {
<q-select
hide-bottom-space
class="inputgreen"
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง/ตำบล '}`]"
outlined
dense
lazy-rules
@ -404,7 +404,7 @@ onMounted(() => {
option-label="name"
:options="Ops.subdistrictOps"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
:label="`${'แขวง/ตำบล '}`"
@update:model-value="(value: string) => selectSubDistrict(value, '1')"
use-input
input-debounce="0"
@ -522,7 +522,7 @@ onMounted(() => {
<q-select
hide-bottom-space
class="inputgreen"
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง/ตำบล '}`]"
outlined
dense
lazy-rules
@ -532,7 +532,7 @@ onMounted(() => {
option-label="name"
:options="Ops.subdistrictCOps"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
:label="`${'แขวง/ตำบล '}`"
@update:model-value="(value: string) => selectSubDistrict(value, '2')"
use-input
input-debounce="0"

View file

@ -586,7 +586,7 @@ onMounted(async () => {
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง/ตำบล '}`]"
:outlined="edit"
dense
lazy-rules
@ -596,7 +596,7 @@ onMounted(async () => {
option-label="name"
:options="Ops.subdistrictOps"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
:label="`${'แขวง/ตำบล '}`"
@update:model-value="(value: string) => selectSubDistrict(value, '1')"
use-input
input-debounce="0"
@ -730,7 +730,7 @@ onMounted(async () => {
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง/ตำบล '}`]"
:outlined="edit"
dense
lazy-rules
@ -740,7 +740,7 @@ onMounted(async () => {
option-label="name"
:options="Ops.subdistrictCOps"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
:label="`${'แขวง/ตำบล '}`"
@update:model-value="(value: string) => selectSubDistrict(value, '2')"
use-input
input-debounce="0"

View file

@ -140,8 +140,8 @@ async function fecthlistprofile(id: string) {
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
title: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
title: "ชื่อ-นามสกุล",
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",

View file

@ -308,7 +308,7 @@ const filterOption = ref<OptionData[]>([
},
{
id: "fullName",
name: "ชื่อ - นามสกุล",
name: "ชื่อ-นามสกุล",
},
]);

View file

@ -98,7 +98,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>

View file

@ -76,7 +76,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
field: "name",
sortable: true,
headerStyle: "font-size: 14px",

View file

@ -128,12 +128,13 @@ const columns = ref<QTableProps["columns"]>([
},
{
name: "salaryDate",
name: "dateAppoint",
align: "left",
label: "วันที่แต่งตั้ง",
sortable: true,
field: "salaryDate",
field: "dateAppoint",
headerStyle: "font-size: 14px",
format: (val) => date2Thai(val),
style: "font-size: 14px",
},
{
@ -191,6 +192,7 @@ const visibleColumns = ref<String[]>([
"createdAt",
"dateRetireLaw",
"statustext",
"dateAppoint",
]);
/**

View file

@ -574,7 +574,7 @@ onMounted(async () => {
</div>
<div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">
- นามสก
-นามสก
</div>
<div class="col text-weight-medium">
{{ formData.fullName }}

View file

@ -549,7 +549,7 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
</div>
<div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">
- นามสก
-นามสก
</div>
<div class="col text-weight-medium">
{{ formData.fullName }}

View file

@ -98,7 +98,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -114,7 +114,7 @@ const columnsRespondent = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -127,7 +127,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "fullname",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",

View file

@ -201,7 +201,7 @@ export const useInvestigateDisStore = defineStore(
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -56,7 +56,7 @@ export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
@ -153,7 +153,7 @@ export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -192,7 +192,7 @@ export const useDisciplineResultStore = defineStore(
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -49,7 +49,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -161,7 +161,7 @@ onMounted(() => {
borderless
readonly
:model-value="formDetail.fullName"
label="ชื่อ - นามสกุล"
label="ชื่อ-นามสกุล"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">

View file

@ -106,7 +106,7 @@ const columnsRespondent = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -105,7 +105,7 @@ const columnsRespondent = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -64,7 +64,7 @@ const baseColumns = ref<QTableProps["columns"]>([
{
name: "fullName",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",

View file

@ -26,7 +26,7 @@ const order = ref<string>(""); //เลขที่คำสั่ง/เลข
/** ตัวแปรข้อมูลข้าราชการ */
const formMain = reactive<FormAddHistory>({
id: "",
name: "", // -
name: "", //-
prefix: "", //
rank: "", //
firstName: "", //
@ -147,7 +147,7 @@ onMounted(async () => {
</div>
<div class="row col-12">
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
- นามสก
-นามสก
</div>
<div class="col-12 col-sm-12 col-md-7">

View file

@ -56,7 +56,7 @@ const govOp = ref<DataOption[]>([
},
{
id: "fullName",
name: "ชื่อ - นามสกุล",
name: "ชื่อ-นามสกุล",
},
]);
@ -82,7 +82,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -29,7 +29,7 @@ const order = ref<string>("");
/** ตัวแปรข้อมูลข้าราชการ */
const formMain = reactive<FormAddHistoryEmployee>({
id: "",
name: "", // -
name: "", //-
prefix: "", //
rank: "", //
firstName: "", //
@ -159,7 +159,7 @@ onMounted(() => {
</div>
<div class="row col-12">
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
- นามสก
-นามสก
</div>
<div class="col-12 col-sm-12 col-md-7">

View file

@ -88,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",

View file

@ -65,7 +65,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",