自社内でkintoneを使い始め、システムを刷新することになり色々試行錯誤しながらやっております。
簡単な事もわからず皆様のお力を借りたく投稿しました。
実現したいこと
kintoneに登録した画像ファイルをカスタマイズ一覧にてボタンを押下した際にモーダル画面で表示をしたい。
Veu.jsを使用してカスタマイズ一覧を作成しております。コーディング自体の記載に悩んでおります。
利用したソースコード
■HTML
<!DOCTYPE html>
<html>
<head>
<link href=“https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet”>
<link href=“https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet”>
<link href=“https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui”>
</head>
<body>
<div id=“app”>
<v-app>
<v-content>
<v-container fluid>
<v-card>
<v-card-title>
看板一覧
<v-spacer></v-spacer>
<v-text-field
v-model=“search”
append-icon=“search”
label=“検索”
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers=“headers”
:items=“customers”
:search=“search”
class=“elevation-1”
:pagination.sync=“pagination”
hide-actions
>
<template v-slot:items=“props”>
<td>{{ props.item.record_no.value }}</td>
<td>{{ props.item.zmn_no.value }}</td>
<td>{{ props.item.model_cd.value }}</td>
<td>{{ props.item.model_name.value }}</td>
<td>{{ props.item.zst_name.value }}</td>
<td>{{ props.item.kj_name.value }}</td>
<td><v-btn @click=“imgView(props.item)”
depressed
color=“primary”
>
図面
</v-btn></td>
</template>
</v-data-table>
<div class=“text-xs-center pt-2”>
<v-pagination v-model=“pagination.page” :length=“pages”></v-pagination>
</div>
</v-card>
</v-container>
</v-content>
</v-app>
</div>
<!–スクリプト定義–>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src=“./KANBAN.js”></script>
</body>
</html>
■JSファイル
/*
* vue.js + vuetify.js + Custom view sample program
* Copyright (c) 2019 Cybozu
*
* Licensed under the MIT License
*/
(function() {
Vue.config.devtools = true;
kintone.events.on(‘app.record.index.show’, function(event) {
if (event.viewId !== xxxxxx) { // 作成したカスタマイズビューのIDを指定
return event;
}
const appId = kintone.app.getId();
const query = kintone.app.getQuery();
kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, {‘app’: appId, ‘query’: query}, function(resp) {
const vm = new Vue({
el: ‘#app’,
data() {
return {
headers: [
{text: ‘レコード番号’, align: ‘left’, sortable: true, value: ‘record_no.value’},
{text: ‘図面番号’, value: ‘zmn_no.value’},
{text: ‘モデルコード’, value: ‘model_cd.value’},
{text: ‘モデル名’, value: ‘model_name.value’},
{text: ‘材質名’, value: ‘zst_name.value’},
{text: ‘形状’, value: ‘kj_name.value’},
{text: ‘図面’, value: ‘Zmn_No.value.value’},
],
customers: resp.records,
customer: {},
search: ‘’,
pagination: {rowsPerPage: 50}
};
},
methods: {
imgView: function(item) {
＊ここの処理部分の記載をどの様にすればいいのか
},
},
computed: {
pages() {
if (this.pagination.rowsPerPage === null || this.pagination.totalItems === null) {
return 0;
}
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage);
}
}
});
});
return event;
});
})();
ご教授よろしくお願い致します。