start up
This commit is contained in:
13
vue-project/my-kintone-plugin/.eslintrc.js
Normal file
13
vue-project/my-kintone-plugin/.eslintrc.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
module.exports = {
|
||||||
|
extends: [
|
||||||
|
'@cybozu/eslint-config/globals/kintone.js',
|
||||||
|
'@cybozu/eslint-config/lib/base.js',
|
||||||
|
'@cybozu/eslint-config/lib/kintone.js',
|
||||||
|
'@cybozu/eslint-config/lib/prettier.js',
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'prettier/prettier': ['error', { singleQuote: true }],
|
||||||
|
'space-before-function-paren': 0,
|
||||||
|
'object-curly-spacing': 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
7
vue-project/my-kintone-plugin/.prettierrc
Normal file
7
vue-project/my-kintone-plugin/.prettierrc
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"singleQuote": true,
|
||||||
|
"semi": true,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"printWidth": 120,
|
||||||
|
"bracketSpacing": true
|
||||||
|
}
|
||||||
@@ -1,5 +1,15 @@
|
|||||||
# Vue 3 + Vite
|
# My-kintone-plugin
|
||||||
|
|
||||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
1. 命令：
|
||||||
|
- `npm run build` 会将代码按照 kintone plugin 格式打包到 `dist`，并生成 `plugin.zip`
|
||||||
|
- `npm run upload` 会将 `plugin.zip` 上传到 kintone
|
||||||
|
|
||||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
2. 使用 Vue3.0 开发：
|
||||||
|
- 配置页面在 `components/Config.vue` 中开发
|
||||||
|
- Desktop 页面在 `js/desktop.ts` 中开发
|
||||||
|
|
||||||
|
3. 关于组件：
|
||||||
|
- 使用了 https://ui-component.kintone.dev/ 组件库，但是它没有支持 Vue，所以需要作为 Web Component 来使用
|
||||||
|
- 又由于 Web Component 的格式是类似 `<kuc-button-1-18-0>`，为了开发方便能写成 `<kuc-button>`，手动进行了全局替换（见 `vite.config.js`）
|
||||||
|
- 同时也定死了 kintone-ui-component 版本号，更新版本号需要修改 `vite.config.js` 的插件
|
||||||
|
- 目前尚未实现 `<template>` 中组件的 ts 提示
|
||||||
2
vue-project/my-kintone-plugin/env.d.ts
vendored
Normal file
2
vue-project/my-kintone-plugin/env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
/// <reference types="kintone" />
|
||||||
@@ -1,19 +1,4 @@
|
|||||||
<!-- <!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Vite + Vue</title>
|
|
||||||
</head>
|
|
||||||
<body> -->
|
|
||||||
<section class="settings">
|
<section class="settings">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
|
||||||
</section>
|
</section>
|
||||||
<!-- </body>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</html> -->
|
|
||||||
<!-- <section class="settings">
|
|
||||||
<script type="module" src="/src/main.js"></script>
|
|
||||||
<div id="app"></div>
|
|
||||||
</section> -->
|
|
||||||
8107
vue-project/my-kintone-plugin/package-lock.json
generated
8107
vue-project/my-kintone-plugin/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,24 +1,34 @@
|
|||||||
{
|
{
|
||||||
"name": "my-kintone-plugin",
|
"name": "data-fetch-plugin",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build ",
|
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"pkg":"kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip dist/src"
|
"build": "vite build && npm run pkg",
|
||||||
|
"vite:build": "vite build",
|
||||||
|
"build-upload": "npm run build && npm run upload",
|
||||||
|
"pkg": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip dist/src",
|
||||||
|
"upload": "kintone-plugin-uploader --base-url https://mfu07rkgnb7c.cybozu.com --username MXZ --password maxz1205 dist/plugin.zip "
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@kintone/rest-api-client": "^5.7.0",
|
||||||
|
"kintone-ui-component": "1.18.0",
|
||||||
"rollup-plugin-css-only": "^4.5.2",
|
"rollup-plugin-css-only": "^4.5.2",
|
||||||
"vue": "^3.5.13"
|
"vue": "^3.5.13"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
|
||||||
"rollup-plugin-copy": "^3.5.0",
|
|
||||||
"@cybozu/eslint-config": "^23.0.0",
|
"@cybozu/eslint-config": "^23.0.0",
|
||||||
|
"@kintone/dts-gen": "^8.1.1",
|
||||||
"@kintone/plugin-packer": "^8.1.3",
|
"@kintone/plugin-packer": "^8.1.3",
|
||||||
|
"@kintone/plugin-uploader": "^9.1.2",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
"eslint": "^8.57.0",
|
"eslint": "^8.57.0",
|
||||||
"vite": "^6.0.1"
|
"rollup-plugin-copy": "^3.5.0",
|
||||||
|
"typescript": "^5.7.3",
|
||||||
|
"vite": "^6.0.1",
|
||||||
|
"vue-tsc": "^2.1.10"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,10 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import Config from './components/Config.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Config msg="Vite + Vue" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 496 B |
@@ -1,38 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <section class="settings"> -->
|
|
||||||
<h2 class="settings-heading">Settings for data fetch pluging</h2>
|
<h2 class="settings-heading">Settings for data fetch pluging</h2>
|
||||||
<p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
|
<p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
|
||||||
<form class="js-submit-settings">
|
<form class="js-submit-settings">
|
||||||
<p class="kintoneplugin-row">
|
<p class="kintoneplugin-row">
|
||||||
<label for="message">
|
<label for="message">
|
||||||
Message:
|
Message:
|
||||||
<input type="text" class="js-text-message kintoneplugin-input-text">
|
<input v-model="data.message" type="text" class="js-text-message kintoneplugin-input-text" />
|
||||||
</label>
|
</label>
|
||||||
</p>
|
</p>
|
||||||
<p class="kintoneplugin-row">
|
<p class="kintoneplugin-row">
|
||||||
<button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">Cancel</button>
|
<kuc-button text="Cancel" type="normal" @click="cancel" />
|
||||||
<button class="kintoneplugin-button-dialog-ok">Save</button>
|
<kuc-button text="Save" type="submit" @click="save" />
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
<!-- </section> -->
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { onMounted, reactive } from 'vue';
|
||||||
import '../css/51-modern-default.css';
|
|
||||||
import '../css/config.css';
|
|
||||||
|
|
||||||
defineProps({
|
const props = defineProps<{ pluginId: string }>();
|
||||||
msg: String,
|
const data: {
|
||||||
|
message: string;
|
||||||
|
} = reactive({
|
||||||
|
message: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const count = ref(0)
|
onMounted(async () => {
|
||||||
</script>
|
const savedData = kintone.plugin.app.getConfig(props.pluginId);
|
||||||
|
data.message = JSON.parse(savedData.message);
|
||||||
|
});
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
kintone.plugin.app.setConfig(
|
||||||
|
{ message: JSON.stringify(data.message) },
|
||||||
|
// () => {
|
||||||
|
// alert("The plug-in settings have been saved. Please update the app!");
|
||||||
|
// window.location.href = "../../flow?app=" + kintone.app.getId();
|
||||||
|
// }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancel() {
|
||||||
|
window.location.href = `../../${kintone.app.getId()}/plugin/`;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.settings-heading {
|
.settings-heading {
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kintoneplugin-input-text {
|
.kintoneplugin-input-text {
|
||||||
width: 20em;
|
width: 20em;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +0,0 @@
|
|||||||
.settings-heading {
|
|
||||||
padding: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kintoneplugin-input-text {
|
|
||||||
width: 20em;
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
(function (PLUGIN_ID) {
|
|
||||||
const formEl = document.querySelector('.js-submit-settings');
|
|
||||||
const cancelButtonEl = document.querySelector('.js-cancel-button');
|
|
||||||
const messageEl = document.querySelector('.js-text-message');
|
|
||||||
if (!(formEl && cancelButtonEl && messageEl)) {
|
|
||||||
throw new Error('Required elements do not exist.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const config = kintone.plugin.app.getConfig(PLUGIN_ID);
|
|
||||||
if (config.message) {
|
|
||||||
messageEl.value = config.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
formEl.addEventListener('submit', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
kintone.plugin.app.setConfig({ message: messageEl.value }, () => {
|
|
||||||
alert('The plug-in settings have been saved. Please update the app!');
|
|
||||||
window.location.href = '../../flow?app=' + kintone.app.getId();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
cancelButtonEl.addEventListener('click', () => {
|
|
||||||
window.location.href = '../../' + kintone.app.getId() + '/plugin/';
|
|
||||||
});
|
|
||||||
})(kintone.$PLUGIN_ID);
|
|
||||||
@@ -1,5 +1,3 @@
|
|||||||
import '../css/desktop.css'
|
|
||||||
import '../css/51-modern-default.css';
|
|
||||||
(function (PLUGIN_ID) {
|
(function (PLUGIN_ID) {
|
||||||
kintone.events.on('app.record.index.show', () => {
|
kintone.events.on('app.record.index.show', () => {
|
||||||
const spaceEl = kintone.app.getHeaderSpaceElement();
|
const spaceEl = kintone.app.getHeaderSpaceElement();
|
||||||
209
vue-project/my-kintone-plugin/src/js/kintone-config-helper.js
Normal file
209
vue-project/my-kintone-plugin/src/js/kintone-config-helper.js
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||||
|
(factory((global.KintoneConfigHelper = {})));
|
||||||
|
}(this, (function (exports) { 'use strict';
|
||||||
|
|
||||||
|
var ALL_FIELD_TYPES = [
|
||||||
|
"SINGLE_LINE_TEXT",
|
||||||
|
"MULTI_LINE_TEXT",
|
||||||
|
"RICH_TEXT",
|
||||||
|
"NUMBER",
|
||||||
|
"CALC",
|
||||||
|
"RADIO_BUTTON",
|
||||||
|
"CHECK_BOX",
|
||||||
|
"MULTI_SELECT",
|
||||||
|
"DROP_DOWN",
|
||||||
|
"DATE",
|
||||||
|
"TIME",
|
||||||
|
"DATETIME",
|
||||||
|
"FILE",
|
||||||
|
"LINK",
|
||||||
|
"USER_SELECT",
|
||||||
|
"ORGANIZATION_SELECT",
|
||||||
|
"GROUP_SELECT",
|
||||||
|
"REFERENCE_TABLE",
|
||||||
|
"SPACER",
|
||||||
|
"GROUP",
|
||||||
|
"SUBTABLE",
|
||||||
|
"RECORD_NUMBER",
|
||||||
|
"CREATOR",
|
||||||
|
"CREATED_TIME",
|
||||||
|
"MODIFIER",
|
||||||
|
"UPDATED_TIME"
|
||||||
|
];
|
||||||
|
function createKintoneClient(kintone) {
|
||||||
|
function fetchFormInfoByFields() {
|
||||||
|
var url = kintone.api.url("/k/v1/preview/app/form/fields", true);
|
||||||
|
var body = {
|
||||||
|
app: kintone.app.getId()
|
||||||
|
};
|
||||||
|
return kintone.api(url, "GET", body).then(function (resp) {
|
||||||
|
return resp.properties;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function fetchFormInfoByLayout() {
|
||||||
|
var url = kintone.api.url("/k/v1/preview/app/form/layout", true);
|
||||||
|
var body = {
|
||||||
|
app: kintone.app.getId()
|
||||||
|
};
|
||||||
|
return kintone.api(url, "GET", body).then(function (resp) {
|
||||||
|
return resp.layout;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
fetchFormInfoByFields: fetchFormInfoByFields,
|
||||||
|
fetchFormInfoByLayout: fetchFormInfoByLayout
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||||
|
this file except in compliance with the License. You may obtain a copy of the
|
||||||
|
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||||
|
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||||
|
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||||
|
|
||||||
|
See the Apache Version 2.0 License for specific language governing permissions
|
||||||
|
and limitations under the License.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
var __assign = function() {
|
||||||
|
__assign = Object.assign || function __assign(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
|
||||||
|
function __rest(s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
return t;
|
||||||
|
}
|
||||||
|
|
||||||
|
var NOT_EXIST_MESSAGE = "Either the specified field type does not exist, or this method cannot respond the specified field type.";
|
||||||
|
var NOT_MATCH_MESSAGE = "Specify either characters or an array of characters for the getAllFields parameter.";
|
||||||
|
|
||||||
|
function createGetFields(kintoneClient, Promise_) {
|
||||||
|
var Promise = Promise_;
|
||||||
|
var fetchFormInfoByFields = kintoneClient.fetchFormInfoByFields, fetchFormInfoByLayout = kintoneClient.fetchFormInfoByLayout;
|
||||||
|
function removeUnnecessaryProperties(field) {
|
||||||
|
var _ = field.size, rest = __rest(field, ["size"]);
|
||||||
|
return rest;
|
||||||
|
}
|
||||||
|
function getFieldInfo(layoutFields) {
|
||||||
|
return layoutFields
|
||||||
|
.filter(function (layout) { return layout.type !== "LABEL" && layout.type !== "HR"; })
|
||||||
|
.map(function (field) { return removeUnnecessaryProperties(field); });
|
||||||
|
}
|
||||||
|
function modifiedLayoutResp(layoutList) {
|
||||||
|
return layoutList.reduce(function (acc, layout) {
|
||||||
|
switch (layout.type) {
|
||||||
|
case "ROW":
|
||||||
|
return acc.concat(getFieldInfo(layout.fields));
|
||||||
|
case "GROUP":
|
||||||
|
return acc.concat([
|
||||||
|
{ type: layout.type, code: layout.code }
|
||||||
|
], layout.layout
|
||||||
|
.map(function (childLayout) { return getFieldInfo(childLayout.fields); })
|
||||||
|
.reduce(function (acc, cur) { return acc.concat(cur); }, []));
|
||||||
|
case "SUBTABLE":
|
||||||
|
var layoutFieldsIncludeSubtableCode = layout.fields.map(function (layoutField) { return (__assign({}, layoutField, { subtableCode: layout.code })); });
|
||||||
|
return acc.concat([
|
||||||
|
{ type: layout.type, code: layout.code }
|
||||||
|
], getFieldInfo(layoutFieldsIncludeSubtableCode));
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
function getLabeledFields(fieldsResp) {
|
||||||
|
return Object.keys(fieldsResp).reduce(function (acc, key) {
|
||||||
|
var _a;
|
||||||
|
var field = fieldsResp[key];
|
||||||
|
if (field.type === "SUBTABLE") {
|
||||||
|
return __assign({}, acc, getLabeledFields(field.fields));
|
||||||
|
}
|
||||||
|
return field.label ? __assign({}, acc, (_a = {}, _a[field.code] = field.label, _a)) : acc;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
function addLabel(layoutFieldList, fieldsResp) {
|
||||||
|
var labeledFields = getLabeledFields(fieldsResp);
|
||||||
|
return layoutFieldList.map(function (layoutField) {
|
||||||
|
return labeledFields[layoutField.code]
|
||||||
|
? __assign({}, layoutField, { label: labeledFields[layoutField.code] }) : layoutField;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function getLookupFieldKeys(fieldsResp) {
|
||||||
|
return Object.keys(fieldsResp).filter(function (key) { return typeof fieldsResp[key].lookup !== "undefined"; });
|
||||||
|
}
|
||||||
|
function filterLookupField(layoutFieldList, fieldsResp) {
|
||||||
|
var lookupFieldKeys = getLookupFieldKeys(fieldsResp);
|
||||||
|
if (lookupFieldKeys.length === 0)
|
||||||
|
;
|
||||||
|
return layoutFieldList.filter(function (layoutField) {
|
||||||
|
return !lookupFieldKeys.some(function (key) { return fieldsResp[key].code === layoutField.code; });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function flattenFieldsForSubtable(fieldsResp) {
|
||||||
|
return Object.keys(fieldsResp).reduce(function (fields, key) {
|
||||||
|
var _a, _b;
|
||||||
|
if (fieldsResp[key].type === "SUBTABLE") {
|
||||||
|
return __assign({}, fields, (_a = {}, _a[key] = fieldsResp[key], _a), fieldsResp[key].fields);
|
||||||
|
}
|
||||||
|
return __assign({}, fields, (_b = {}, _b[key] = fieldsResp[key], _b));
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
function fetchAllFields(selectFieldTypes) {
|
||||||
|
return Promise.all([fetchFormInfoByFields(), fetchFormInfoByLayout()]).then(function (_a) {
|
||||||
|
var fieldsResp = _a[0], layoutResp = _a[1];
|
||||||
|
var fieldList = addLabel(filterLookupField(modifiedLayoutResp(layoutResp), flattenFieldsForSubtable(fieldsResp)), fieldsResp);
|
||||||
|
return selectFieldTypes
|
||||||
|
? fieldList.filter(function (field) { return selectFieldTypes.indexOf(field.type) !== -1; })
|
||||||
|
: fieldList;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function validateFieldType(fieldType) {
|
||||||
|
return ALL_FIELD_TYPES.some(function (type) { return type === fieldType; });
|
||||||
|
}
|
||||||
|
function validateGetAllFieldsArgument(fieldType) {
|
||||||
|
if (typeof fieldType === "string") {
|
||||||
|
return validateFieldType(fieldType) ? null : NOT_EXIST_MESSAGE;
|
||||||
|
}
|
||||||
|
if (Array.isArray(fieldType)) {
|
||||||
|
return fieldType.every(validateFieldType) ? null : NOT_EXIST_MESSAGE;
|
||||||
|
}
|
||||||
|
return NOT_MATCH_MESSAGE;
|
||||||
|
}
|
||||||
|
function getFields(selectFieldType) {
|
||||||
|
if (typeof selectFieldType === "undefined") {
|
||||||
|
return fetchAllFields();
|
||||||
|
}
|
||||||
|
var error = validateGetAllFieldsArgument(selectFieldType);
|
||||||
|
if (error) {
|
||||||
|
return Promise.reject(new Error(error));
|
||||||
|
}
|
||||||
|
return fetchAllFields(Array.isArray(selectFieldType) ? selectFieldType : [selectFieldType]);
|
||||||
|
}
|
||||||
|
return getFields;
|
||||||
|
}
|
||||||
|
|
||||||
|
var kintone = window.kintone;
|
||||||
|
var kintoneClient = createKintoneClient(kintone);
|
||||||
|
var getFields = createGetFields(kintoneClient, kintone.Promise);
|
||||||
|
|
||||||
|
exports.getFields = getFields;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
})));
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
import '../css/mobile.css';
|
|
||||||
(function (PLUGIN_ID) {
|
(function (PLUGIN_ID) {
|
||||||
kintone.events.on('mobile.app.record.index.show', () => {
|
kintone.events.on('mobile.app.record.index.show', () => {
|
||||||
const spaceEl = kintone.mobile.app.getHeaderSpaceElement();
|
const spaceEl = kintone.mobile.app.getHeaderSpaceElement();
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
import './style.css'
|
|
||||||
import App from './App.vue'
|
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
|
||||||
5
vue-project/my-kintone-plugin/src/main.ts
Normal file
5
vue-project/my-kintone-plugin/src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import Config from './components/Config.vue';
|
||||||
|
import allComponent from 'kintone-ui-component';
|
||||||
|
|
||||||
|
createApp(Config, { pluginId: kintone.$PLUGIN_ID }).mount('#app');
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
|
"$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
|
||||||
"manifest_version": 1,
|
"manifest_version": 1,
|
||||||
"version": 2,
|
"version": 1,
|
||||||
"type": "APP",
|
"type": "APP",
|
||||||
"desktop": {
|
"desktop": {
|
||||||
"js": [
|
"js": [
|
||||||
@@ -27,11 +27,11 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"name": {
|
"name": {
|
||||||
"en": "data fetch pluging",
|
"en": "data fetch plugin",
|
||||||
"ja": "データ取得プラグイン"
|
"ja": "データ取得プラグイン"
|
||||||
},
|
},
|
||||||
"description": {
|
"description": {
|
||||||
"en": "create search data pluging",
|
"en": "create search data plugin",
|
||||||
"ja": "検索結果のデータを生成するプラグインです"
|
"ja": "検索結果のデータを生成するプラグインです"
|
||||||
},
|
},
|
||||||
"mobile": {
|
"mobile": {
|
||||||
|
|||||||
@@ -1,79 +0,0 @@
|
|||||||
:root {
|
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
7
vue-project/my-kintone-plugin/src/types/kintone-components.d.ts
vendored
Normal file
7
vue-project/my-kintone-plugin/src/types/kintone-components.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
declare global {
|
||||||
|
namespace JSX {
|
||||||
|
interface IntrinsicElements {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
29
vue-project/my-kintone-plugin/src/types/kintone.d.ts
vendored
Normal file
29
vue-project/my-kintone-plugin/src/types/kintone.d.ts
vendored
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
// https://cybozu.dev/ja/kintone/docs/overview/field-types/
|
||||||
|
// https://cybozudev.kf5.com/hc/kb/article/201593/
|
||||||
|
declare namespace kintone.fieldTypes {
|
||||||
|
interface TABLE {
|
||||||
|
type: 'SUBTABLE';
|
||||||
|
value: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// lookup https://cybozudev.kf5.com/hc/kb/article/1611088/
|
||||||
|
// import { KintoneRestAPIClient } from '@kintone/rest-api-client';
|
||||||
|
// // 定义了一个Lookup类型，其中给lookup设置的是对象类型
|
||||||
|
// // 下面还有展开，到具体用的时候还会定义的更详细，这里够用了
|
||||||
|
// export type Lookup = {
|
||||||
|
// label: string;
|
||||||
|
// code: string;
|
||||||
|
// lookup: object;
|
||||||
|
// };
|
||||||
|
// // 创建sdk客户端
|
||||||
|
// const client = new KintoneRestAPIClient({
|
||||||
|
// baseUrl: 'https://yourdomain.cybozu.cn',
|
||||||
|
// });
|
||||||
|
// // 获取一个应用中所有类型是Lookup的字段
|
||||||
|
// export const getFormSetting = async () => {
|
||||||
|
// const prop = (await client.app.getFormFields({ app: kintone.app.getId() as number })).properties;
|
||||||
|
// const lookUpFields = Object.values(prop).filter((f) => 'lookup' in f) as Lookup[];
|
||||||
|
// return lookUpFields;
|
||||||
|
// };
|
||||||
14
vue-project/my-kintone-plugin/tsconfig.json
Normal file
14
vue-project/my-kintone-plugin/tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"files" : [
|
||||||
|
"./node_modules/@kintone/dts-gen/kintone.d.ts",
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -2,31 +2,62 @@ import { defineConfig } from 'vite'
|
|||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import copy from "rollup-plugin-copy";
|
import copy from "rollup-plugin-copy";
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
|
import fs from 'fs';
|
||||||
|
function replaceKucTagsPlugin() {
|
||||||
|
return {
|
||||||
|
name: 'vite-plugin-replace-tags',
|
||||||
|
async load(id) {
|
||||||
|
if (id.endsWith('.vue')) {
|
||||||
|
const content = await fs.promises.readFile(id, 'utf-8');
|
||||||
|
|
||||||
|
return content
|
||||||
|
.replace(/<\/kuc-([a-zA-Z0-9-]+)(?![0-9-])>/g, (match, p1) => `</kuc-${p1}-1-18-0>`)
|
||||||
|
.replace(/<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>/g, (match, p1, p2) => `<kuc-${p1}-1-18-0${p2}>`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue({
|
||||||
|
template: {
|
||||||
|
compilerOptions: {
|
||||||
|
isCustomElement: (tag) => tag.startsWith("kuc-"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
copy({
|
copy({
|
||||||
targets: [
|
targets: [
|
||||||
{ src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' }
|
{ src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' },
|
||||||
|
{ src: 'src/manifest.json', dest: 'dist/src' },
|
||||||
|
{ src: 'src/assets/*', dest: 'dist/src/image' },
|
||||||
|
{ src: 'src/css/*', dest: 'dist/src/css' },
|
||||||
],
|
],
|
||||||
hook: 'writeBundle' // 指定在何时复制文件
|
hook: 'writeBundle' // 指定在何时复制文件
|
||||||
})
|
}),
|
||||||
|
replaceKucTagsPlugin()
|
||||||
],
|
],
|
||||||
build: {
|
build: {
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: {
|
input: {
|
||||||
config: path.resolve(__dirname, 'index.html'),
|
config: path.resolve(__dirname, 'index.html'),
|
||||||
desktop:path.resolve(__dirname,'src/js/desktop.js'),
|
desktop: path.resolve(__dirname, 'src/js/desktop.ts'),
|
||||||
mobile:path.resolve(__dirname,'src/js/mobile.js'),
|
mobile: path.resolve(__dirname, 'src/js/mobile.ts'),
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
entryFileNames: (chunkInfo) => {
|
entryFileNames: (chunkInfo) => {
|
||||||
// console.log(chunkInfo);
|
// console.log(chunkInfo);
|
||||||
return 'src/js/[name].js'; // 默认处理为 JS 文件
|
return 'src/js/[name].js'; // 默认处理为 JS 文件
|
||||||
},
|
},
|
||||||
assetFileNames:'src/[ext]/[name].[ext]'
|
assetFileNames: (assetInfo) => {
|
||||||
|
if (assetInfo.names[0].endsWith('.css') && assetInfo.originalFileNames[0] === 'index.html') {
|
||||||
|
return 'src/css/config.css';
|
||||||
|
}
|
||||||
|
// 其他资源文件的默认处理
|
||||||
|
return 'src/[ext]/[name].[ext]';
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user