108 lines
3.2 KiB
Vue
108 lines
3.2 KiB
Vue
<template>
|
|
<div class="q-px-md" style=" min-width: 50vw; max-width: 85vw;">
|
|
<div v-if="!isLoaded" class="spinner flex flex-center">
|
|
<q-spinner color="primary" size="3em" />
|
|
</div>
|
|
<q-table flat bordered v-else row-key="id" :selection="type" v-model:selected="selected" :columns="columns"
|
|
:rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ref, onMounted, reactive, watchEffect } from 'vue'
|
|
import { api } from 'boot/axios';
|
|
|
|
|
|
export default {
|
|
name: 'fieldSelect',
|
|
props: {
|
|
name: String,
|
|
type: {
|
|
type: String,
|
|
default: 'single'
|
|
},
|
|
appId: Number,
|
|
not_page: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
selectedFields:{
|
|
type:Array ,
|
|
default:()=>[]
|
|
},
|
|
fieldTypes:{
|
|
type:Array,
|
|
default:()=>[]
|
|
},
|
|
filter: String,
|
|
updateSelectFields: {
|
|
type: Function
|
|
},
|
|
blackListLabel: {
|
|
type:Array,
|
|
default:()=>[]
|
|
}
|
|
},
|
|
setup(props) {
|
|
const isLoaded = ref(false);
|
|
const columns = [
|
|
{ name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.name, sortable: true },
|
|
{ name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
|
|
{ name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
|
|
];
|
|
const pageSetting = ref({
|
|
sortBy: 'name',
|
|
descending: false,
|
|
page: 1,
|
|
rowsPerPage: props.not_page ? 0 : 25
|
|
// rowsNumber: xx if getting data from a server
|
|
});
|
|
const rows = reactive([]);
|
|
const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);
|
|
|
|
onMounted(async () => {
|
|
const url = props.fieldTypes.includes('SPACER')?'api/v1/allfields':'api/v1/appfields';
|
|
const res = await api.get(url, {
|
|
params: {
|
|
app: props.appId
|
|
}
|
|
});
|
|
let fields = Object.values(res.data.properties);
|
|
for (const index in fields) {
|
|
const fld = fields[index]
|
|
if(props.blackListLabel.length > 0){
|
|
if(!props.blackListLabel.find(blackListItem => blackListItem === fld.label)){
|
|
if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
|
|
rows.push({id:index, name: fld.label || fld.code, ...fld });
|
|
}else if(props.fieldTypes.includes("lookup") && ("lookup" in fld)){
|
|
rows.push({id:index, name: fld.label || fld.code, ...fld });
|
|
}
|
|
}
|
|
} else {
|
|
if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
|
|
rows.push({id:index, name: fld.label || fld.code, ...fld });
|
|
}else if(props.fieldTypes.includes("lookup") && ("lookup" in fld)){
|
|
rows.push({id:index, name: fld.label || fld.code, ...fld });
|
|
}
|
|
}
|
|
}
|
|
isLoaded.value = true;
|
|
});
|
|
|
|
watchEffect(()=>{
|
|
if (selected.value && selected.value[0] && props.updateSelectFields) {
|
|
props.updateSelectFields(selected)
|
|
}
|
|
});
|
|
|
|
return {
|
|
columns,
|
|
rows,
|
|
selected,
|
|
isLoaded,
|
|
pageSetting
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|