w-component-vue
Version:
A simple component for vue(vue2).
590 lines (574 loc) • 15.2 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>w-component-vue</title>
<!-- @babel/polyfill -->
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<!-- extractHtml已自動添加@babel/polyfill與vue -->
<!-- vuetify -->
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.js"
></script>
<!-- fontawesome -->
<link
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
rel="stylesheet"
/>
<!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<!-- google, 各組件使用mdi/js故不需引用 -->
<link
_href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
rel="stylesheet"
/>
<link
_href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<!-- data -->
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataAAPL.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataUSD2EUR.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataTemperature.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataHousePriceArea.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataFlare.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRain.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRainClip.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataCivilSoilCodeIcon.js"
></script>
<!-- w-component-vue -->
<script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.27/dist/w-component-vue.umd.js"></script>
<style>
.v-application--wrap {
/* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
width: 100svw;
max-width: 100svw;
font-family: inherit;
background: #fff;
}
/* 組件所須全域樣式 */
.item {
/* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
border-left: 3px solid #ffba75;
margin: 5px 5px 8px 0px;
padding: 3px 3px 5px 10px;
font-size: 0.9rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.head1 {
padding: 0px 0px 20px 0px;
font-size: 2.5rem;
}
.bkh {
/* 寬 */
padding: 20px;
}
@media screen and (max-width: 800px) {
/* 中 */
.bkh {
padding: 10px;
}
}
@media screen and (max-width: 400px) {
/* 窄 */
.bkh {
padding: 5px;
}
}
.bk {
/* 寬 */
display: inline-block;
vertical-align: top;
padding: 0px 80px 60px 0px;
}
@media screen and (max-width: 1000px) {
/* 中窄 */
.bk {
display: block;
padding: 0px 0px 50px 0px;
}
}
.cpitem {
transition: all 0.3s;
padding: 5px 15px;
cursor: pointer;
}
.cpitem-white {
background: #fff;
}
.cpitem-white:hover {
background: #eee;
}
.cpitem-black {
background: #333;
}
.cpitem-black:hover {
background: #555;
}
</style>
</head>
<body
style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
>
<v-app id="app" class="bkh" style="font-family:inherit;">
<div class="head1">
<span
style="cursor:pointer;"
title="open for copy link to view component"
onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
>w-table-dyn</span>
</div>
<div class="bk">
<div
class="item"
>editable & checkId & opt.modifyDataWhenSave & save(call cmp. method) & errorMsgFromNoName & errorMsgFromNoData</div>
<v-btn depressed small elevation="2" @click="saveData">save data</v-btn>
<w-table-dyn
ref="table"
style="width:600px; height:400px;"
:name="WTableDyn.name"
:description="WTableDyn.description"
:opt="WTableDyn.opt7"
:editable="true"
:check-id="'id'"
:error-msg-from-no-name="'未輸入數據名稱'"
:error-msg-from-no-data="'未給予有效數據'"
@success="evSuccess"
@error="evError"
></w-table-dyn>
<pre
id="disp-save-data"
style="font-size:0.7rem; width:600px; height:200px; overflow-y:auto;"
></pre>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
let keys1 = ["make", "model", "price"];
let kpHeadFilterType1 = {
//default: num (num,text,time,set)
make: "text",
model: "text",
price: "num"
};
let rows1 = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 },
{ make: "BMW", model: "Sedan", price: 66000 },
{ make: "Nissan", model: "March", price: 61000 },
{ make: "Lexus", model: "RX", price: 56000 },
{ make: "Audi", model: "A6 Allroad", price: 45000 },
{ make: "Mazda", model: "MX-5", price: 36000 },
{ make: "Mercedes-Benz", model: "Cabriolet", price: 86000 },
{ make: "Volkswagen", model: "Beetle", price: 68000 },
{ make: "Honda", model: "City", price: 69000 },
{ make: "Volvo", model: "S60", price: 71000 },
{ make: "Subaru", model: "BRZ", price: 48000 }
];
let keys2 = [
"id",
"mappingId",
"order",
"make",
"model",
"price",
"isActive"
];
let kpHeadFilterType2 = {
//default: num (num,text,time,set)
id: "text",
mappingId: "text",
order: "num",
make: "text",
model: "text",
price: "num",
isActive: "text"
};
let rows2 = [
{
id: "id-Toyota",
mappingId: "car_table",
order: 0,
make: "Toyota",
model: "Celica",
price: 35000,
isActive: "y"
},
{
id: "id-Ford",
mappingId: "car_table",
order: 1,
make: "Ford",
model: "Mondeo",
price: 32000,
isActive: "y"
},
{
id: "id-Porsche",
mappingId: "car_table",
order: 2,
make: "Porsche",
model: "Boxter",
price: 72000,
isActive: "y"
},
{
id: "id-BMW",
mappingId: "car_table",
order: 11,
make: "BMW",
model: "Sedan",
price: 66000,
isActive: "y"
},
{
id: "id-Nissan",
mappingId: "car_table",
order: 8,
make: "Nissan",
model: "March",
price: 61000,
isActive: "y"
},
{
id: "id-Lexus",
mappingId: "car_table",
order: 4,
make: "Lexus",
model: "RX",
price: 56000,
isActive: "y"
},
{
id: "id-Audi",
mappingId: "car_table",
order: 5,
make: "Audi",
model: "A6 Allroad",
price: 45000,
isActive: "y"
},
{
id: "id-Mazda",
mappingId: "car_table",
order: 6,
make: "Mazda",
model: "MX-5",
price: 36000,
isActive: "y"
},
{
id: "id-Mercedes",
mappingId: "car_table",
order: 7,
make: "Mercedes-Benz",
model: "Cabriolet",
price: 86000,
isActive: "y"
},
{
id: "id-Volkswagen",
mappingId: "car_table",
order: 9,
make: "Volkswagen",
model: "Beetle",
price: 68000,
isActive: "y"
},
{
id: "id-Honda",
mappingId: "car_table",
order: 10,
make: "Honda",
model: "City",
price: 69000,
isActive: "y"
},
{
id: "id-Volvo",
mappingId: "car_table",
order: 12,
make: "Volvo",
model: "S60",
price: 71000,
isActive: "y"
},
{
id: "id-Subaru",
mappingId: "car_table",
order: 3,
make: "Subaru",
model: "BRZ",
price: 48000,
isActive: "y"
}
];
let keys3 = [
"id",
"mappingId",
"order",
"make",
"model",
"price",
"isActive"
];
let kpHeadFilterType3 = {
//default: num (num,text,time,set)
id: "text",
mappingId: "text",
order: "num",
make: "text",
model: "text",
price: "num",
isActive: "text"
};
let rows3 = [
{
id: "",
mappingId: "",
order: 0,
make: "Toyota",
model: "Celica",
price: 35000
},
{
id: "",
mappingId: "",
order: 1,
make: "Ford",
model: "Mondeo",
price: 32000
},
{
id: "",
mappingId: "",
order: 2,
make: "Porsche",
model: "Boxter",
price: 72000
},
{
id: "",
mappingId: "",
order: 11,
make: "BMW",
model: "Sedan",
price: 66000
},
{
id: "",
mappingId: "",
order: 8,
make: "Nissan",
model: "March",
price: 61000
},
{
id: "",
mappingId: "",
order: 4,
make: "Lexus",
model: "RX",
price: 56000
},
{
id: "",
mappingId: "",
order: 5,
make: "Audi",
model: "A6 Allroad",
price: 45000
},
{
id: "",
mappingId: "",
order: 6,
make: "Mazda",
model: "MX-5",
price: 36000
},
{
id: "",
mappingId: "",
order: 7,
make: "Mercedes-Benz",
model: "Cabriolet",
price: 86000
},
{
id: "",
mappingId: "",
order: 9,
make: "Volkswagen",
model: "Beetle",
price: 68000
},
{
id: "",
mappingId: "",
order: 10,
make: "Honda",
model: "City",
price: 69000
},
{
id: "",
mappingId: "",
order: 12,
make: "Volvo",
model: "S60",
price: 71000
},
{
id: "",
mappingId: "",
order: 3,
make: "Subaru",
model: "BRZ",
price: 48000
}
];
return {
WTableDyn: {
name: "Car Price",
description:
"The relationship between different car types and prices",
opt1: {
keys: keys1,
kpHeadFilterType: kpHeadFilterType1,
rows: rows1
},
opt2: {
keys: keys2,
kpHeadFilterType: kpHeadFilterType2,
rows: rows2
},
opt3: {
keys: keys2,
kpHeadFilterType: kpHeadFilterType2,
rows: rows2,
kpHead: {
id: "主鍵",
mappingId: "所屬主鍵",
order: "順序",
make: "Ecirp",
model: "Ledom",
price: "Ecirp",
isActive: "有效"
}
},
opt4: {
keys: keys2,
kpHeadFilterType: kpHeadFilterType2,
rows: rows2,
beforeAddRow: function(newRow) {
newRow.id = "id-random-" + Math.random();
return newRow;
}
},
opt5: {
keys: keys2,
kpHeadFilterType: kpHeadFilterType2,
rows: rows2,
kpConvertKeysWhenUploadData: {
makeTemp: "make",
modelTemp: "model",
priceTemp: "price"
}
},
opt6: {
keys: keys2,
rows: rows2,
optForUploadData: {
//input for uploadData in w-aggrid-vue, https://github.com/yuda-lyu/w-aggrid-vue
pathItems: null,
beforeUpload: null,
parseSheetInd: 1 //取第2個sheet, 預設0(取第1個sheet)
}
},
opt7: {
keys: keys3,
kpHeadFilterType: kpHeadFilterType3,
rows: rows3,
modifyDataWhenSave: function(rows) {
console.log("modifyDataWhenSave", rows);
for (let k = 0; k < rows.length; k++) {
let v = rows[k];
v.id = "id-random-" + Math.random();
v.mappingId = "auto_car_table";
v.order = k;
v.isActive = "y";
}
return rows;
}
}
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {
evSuccess: function(msg) {
console.log("evSuccess:", msg);
},
evError: function(msg) {
console.log("evError:", msg);
},
saveData: function() {
let data = this.$refs.table.save();
document.querySelector("#disp-save-data").innerHTML = JSON.stringify(
data,
null,
2
);
console.log("saveData:", data);
}
}
});
</script>
</body>
</html>