alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

domain

Browse Source
This commit is contained in:
方 柏
2023-11-01 22:56:47 +09:00
parent 9cd4c8a5ab
commit f60f97380f
11 changed files with 490 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
frontend/src/pages/TenantDomain.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<div class="q-pa-md">
<q-table
title="Treats"
:rows="rows"
:columns="columns"
row-key="id"
selection="single"
:filter="filter"
:loading="loading"
v-model:selected="selected"
>
<template v-slot:top>
<q-btn color="primary" :disable="loading" label="新規" @click="addRow" />
<q-btn class="q-ml-sm" color="primary" :disable="loading" label="編集" @click="editRow" />
<q-btn class="q-ml-sm" color="primary" :disable="loading" label="削除" @click="removeRow" />
<q-space />
<q-input borderless dense debounce="300" color="primary" v-model="filter">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</template>
</q-table>
<q-dialog :model-value="show" persistent>
<q-card style="min-width: 400px">
<q-card-section>
<div class="text-h6">Kintone Account</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-form class="q-gutter-md">
<q-input filled v-model="tenantid" label="Tenant" hint="Tenant ID" lazy-rules
:rules="[val => val && val.length > 0 || 'Please type something']" />
<q-input filled v-model="name" label="Your name *" hint="Kintone envirment name" lazy-rules
:rules="[val => val && val.length > 0 || 'Please type something']" />
<q-input filled type="url" v-model="url" label="Kintone url" hint="Kintone domain address" lazy-rules
:rules="[val => val && val.length > 0, isDomain || 'Please type something']" />
<q-input filled v-model="kintoneuser" label="Login user " hint="Kintone user name" lazy-rules
:rules="[val => val && val.length > 0 || 'Please type something']" />
<q-input v-model="kintonepwd" filled :type="isPwd ? 'password' : 'text'" hint="Password with toggle"
label="User password">
<template v-slot:append>
<q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
</template>
</q-input>
</q-form>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn label="Save" type="submit" color="primary" @click="onSubmit"/>
<q-btn label="Cancel" type="cancel" color="primary" flat class="q-ml-sm" @click="closeDg()"/>
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog v-model="confirm" persistent>
<q-card>
<q-card-section class="row items-center">
<q-avatar icon="confirm" color="primary" text-color="white" />
<span class="q-ml-sm">削除してもよろしいですか？</span>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" v-close-popup />
<q-btn flat label="OK" color="primary" v-close-popup @click = "deleteDomain()"/>
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script setup lang="ts">
import { ref,onMounted, reactive} from 'vue';
import { useQuasar } from 'quasar'
import { api } from 'boot/axios';
const columns = [
{ name: 'id'},
{
name: 'tenantid',
required: true,
label: 'Tenant',
align: 'left',
field: row => row.tenantid,
format: val => `${val}`,
sortable: true
},
{ name: 'name', align: 'center', label: 'Name', field: 'name', sortable: true },
{ name: 'url', align: 'left',label: 'URL', field: 'url', sortable: true },
{ name: 'user', label: 'Account', field: 'user' },
{ name: 'password', label: 'Password', field: 'password' }
]
const loading = ref(false)
const filter = ref('')
const rows = reactive([])
const show = ref(false);
const confirm = ref(false);
const selected = ref([])
const tenantid = ref('')
const name = ref('')
const url =ref('')
const isPwd =ref(true)
const kintoneuser =ref('')
const kintonepwd =ref('')
const $q = useQuasar()
let editId = ref(0);
const getDomain = () => {
loading.value = true;
api.get(`http://127.0.0.1:8000/api/domains/testtenant`).then(res => {
rows.length = 0;
res.data.forEach((item) => {
rows.push({ id:item.id,tenantid: item.tenantid,name: item.name, url: item.url, user: item.kintoneuser, password: item.kintonepwd });
}
)
}).finally(()=>{ loading.value = false; });
}
onMounted(() => {
getDomain();
})
// emulate fetching data from server
const addRow = () => {
editId.value
show.value = true;
}
const removeRow = () => {
//loading.value = true
confirm.value = true;
let row = JSON.parse(JSON.stringify(selected.value[0]));
if(selected.value.length === 0)
{
return;
}
editId.value = row.id;
}
const deleteDomain = () => {
api.delete(`http://127.0.0.1:8000/api/domain/`+ editId.value).then(() =>{
getDomain();
})
editId.value = 0;
selected.value=[];
};
const editRow = () => {
if(selected.value.length === 0)
{
return;
}
let row = JSON.parse(JSON.stringify(selected.value[0]));
editId.value = row.id;
tenantid.value = row.tenantid;
name.value = row.name;
url.value = row.url;
kintoneuser.value = row.user;
kintonepwd.value = row.password;
isPwd.value = true;
show.value = true;
};
const closeDg = () => {
show.value = false;
onReset();
}
const onSubmit = () => {
if(editId.value !== 0)
{
api.put(`http://127.0.0.1:8000/api/domain`,{
'id': editId.value,
'tenantid': tenantid.value,
'name': name.value,
'url': url.value,
'kintoneuser': kintoneuser.value,
'kintonepwd': kintonepwd.value
}).then(() =>{
getDomain();
closeDg();
onReset();
})
}
else
{
api.post(`http://127.0.0.1:8000/api/domain`,{
'id': 0,
'tenantid': tenantid.value,
'name': name.value,
'url': url.value,
'kintoneuser': kintoneuser.value,
'kintonepwd': kintonepwd.value
}).then(() =>{
getDomain();
closeDg();
onReset();
})
}
selected.value=[];
}
const onReset = () => {
name.value = '';
url.value = '';
kintoneuser.value = '';
kintonepwd.value ='';
isPwd.value = true;
editId.value = 0;
}
</script>