mqzheng/Table
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

force merge to master

Browse Source
This commit is contained in:
郑茂强 2018-08-21 10:09:21 +08:00
commit 238d143fdf
12 changed files with 13211 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
111.txt Normal file
View File

@ -0,0 +1 @@
1231

4
README.md
View File

@ -1,4 +1,8 @@
<<<<<<< HEAD
# web-gantt # web-gantt
=======
# table_dropdown
>>>>>>> dev-mq
## Project setup ## Project setup
``` ```

12915
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
package.json
View File

@ -1,5 +1,9 @@
{ {
<<<<<<< HEAD
"name": "web-gantt", "name": "web-gantt",
=======
"name": "table_dropdown",
>>>>>>> dev-mq
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
@ -9,6 +13,7 @@
"test:unit": "vue-cli-service test:unit" "test:unit": "vue-cli-service test:unit"
}, },
"dependencies": { "dependencies": {
<<<<<<< HEAD
"dayjs": "^1.7.4", "dayjs": "^1.7.4",
"vue": "^2.5.16" "vue": "^2.5.16"
}, },
@ -28,5 +33,25 @@
"ts-jest": "^23.0.0", "ts-jest": "^23.0.0",
"typescript": "^3.0.0", "typescript": "^3.0.0",
"vue-template-compiler": "^2.5.16" "vue-template-compiler": "^2.5.16"
=======
"vue": "^2.5.17",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^7.0.0"
},
"devDependencies": {
"@types/jest": "^23.1.4",
"@vue/cli-plugin-babel": "^3.0.0",
"@vue/cli-plugin-eslint": "^3.0.0",
"@vue/cli-plugin-typescript": "^3.0.0",
"@vue/cli-plugin-unit-jest": "^3.0.0",
"@vue/cli-service": "^3.0.0",
"@vue/eslint-config-prettier": "^3.0.0",
"@vue/eslint-config-typescript": "^3.0.0",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"ts-jest": "^23.0.0",
"typescript": "^3.0.0",
"vue-template-compiler": "^2.5.17"
>>>>>>> dev-mq
} }
} }

12
public/index.html
View File

@ -1,15 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<<<<<<< HEAD
<html> <html>
=======
<html lang="en">
>>>>>>> dev-mq
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<<<<<<< HEAD
<title>web-gantt</title> <title>web-gantt</title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but web-gantt doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but web-gantt doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
=======
<title>table_dropdown</title>
</head>
<body>
<noscript>
<strong>We're sorry but table_dropdown doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
>>>>>>> dev-mq
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->

120
src/App.vue
View File

@ -1,54 +1,92 @@
<template> <template>
<div id="app"> <div id="app">
<gantt></gantt>
<Table :usersdata="data"></Table>
</div> </div>
</template> </template>
<script lang="ts"> <script>
import Vue from "vue"; //import Tree from "@/components/tree.vue"; // @ is an alias to /src
import Gantt from "./components/Gantt.vue"; import Table from "@/components/Table.vue"; // @ is an alias to /src
export default {
export default Vue.extend({
name: "app",
components: { components: {
Gantt Table
}, },
data() { name: "app",
data: function() {
return { return {
header: { data: {
info: { header: [
columns: [ "客户编号",
{ "公司名称",
field: "orderNo", "联系人",
display: "订单号" "称谓",
}, "地址",
{ "邮编",
filed: "processName", "国家",
display: "工序" "电话",
} "传真",
], "区域",
groupBy: ["orderNo"] "城市"
}, ],
time: { info: [
start: "2018-07-01", {
end: "2018-08-31", 客户编号: "HUNGC",
groupBy: ["year", "month", "day"] 公司名称: "五金机械",
} 联系人: "苏先生",
}, 称谓: "销售代表",
task: { 地址: "德昌路甲",
info: { 邮编: "564576",
orderNo: "订单1", 国家: "中国",
processName: "工序1" 电话: "(053)5556874",
}, 传真: "(053)5552376",
time: { state: "东北",
start: "2018-08-01", city: "大连"
end: "2018-08-10" },
} {
客户编号: "HUNGC",
公司名称: "五金机械",
联系人: "苏先生",
称谓: "销售代表",
地址: "德昌路甲",
邮编: "564576",
国家: "中国",
电话: "(053)5556874",
传真: "(053)5552376",
state: "华北",
city: "北京"
},
{
客户编号: "CENTC",
公司名称: "三捷实业",
联系人: "王先生",
称谓: "市场经理",
地址: "英雄山路",
邮编: "130083",
国家: "中国",
电话: "(061)15553392",
传真: "(061)15557292",
state: "华北",
city: "秦皇岛"
},
{
客户编号: "CENTC",
公司名称: "三捷实业",
联系人: "王先生",
称谓: "市场经理",
地址: "英雄山路",
邮编: "130083",
国家: "中国",
电话: "(061)15553392",
传真: "(061)15557292",
state: "华北",
city: "秦皇岛"
}
]
} }
}; };
} }
}); };
</script> </script>
<style lang="scss">
</style>

67
src/components/Gantt.vue
View File

@ -1,67 +0,0 @@
<template>
<div>
<!-- <table class="gantt">
<thead>
<tr>
<td v-for="i in chartHead" :key="i">{{i}}</td>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item">
<td v-for="i in chartHead" :key="i" :style="{
backgroundColor: i>=item.begin&&i<=item.end ?'red':'white'
}">&nbsp;</td>
</tr>
</tbody>
</table> -->
<table class="gantt">
<thead>
<tr>
<td v-for="i in chartHead" :key="i">{{i}}</td>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item">
<td v-for="i in chartHead" :key="i" :style="{
backgroundColor: i>=item.begin&&i<=item.end ?'red':'white'
}">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import dayjs from "dayjs";
console.log(dayjs().daysInMonth());
export default Vue.extend({
props: {},
data() {
return {
tableHead: [],
chartHead: [1, 2, 3, 5, 6],
data: [{ begin: 2, end: 5 }, { begin: 1, end: 3 }, { begin: 2, end: 5 }]
};
}
});
</script>
<style lang="scss" scoped>
$border: 1px solid black;
table.gantt {
border-spacing: 0;
border: $border;
border-bottom: 0;
td {
border-bottom: $border;
}
thead td + td {
border-left: $border;
}
td + td {
border-bottom: $border;
}
}
</style>

62
src/components/HelloWorld.vue
View File

@ -1,62 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank">unit-jest</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "HelloWorld",
props: {
msg: String
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

117
src/components/Table.vue Normal file
View File

@ -0,0 +1,117 @@
<template>
<div>
<ul>
<TableTree :data="formateddata"></TableTree>
</ul>
</div>
</template>
<script>
import TableTree from "@/components/TableTree.vue"; // @ is an alias to /src
export default {
components: { TableTree },
props: {
usersdata: Object
},
data: function() {
return {
selectedvaluedown: [],
selectedindexdown: 0,
formateddata: {}
};
},
created: function() {
this.formatusersdata();
},
methods: {
//fromate the data from single array structure to tree structure
formatusersdata: function() {
var formateddata = {};
var areas = [];
var cities = [];
var companies = [];
formateddata.name = this.usersdata.header;
formateddata.children = [];
for (var item of this.usersdata.info) {
if (areas.indexOf(item.state) === -1) {
areas.push(item.state);
}
}
for (var area of areas) {
formateddata.children.push({ name: [area], children: [] });
}
for (var citychild of formateddata.children) {
for (var item of this.usersdata.info) {
if (item.state === citychild.name[0]) {
var found = citychild.children.some(function(each) {
return each.name[0] === item.city;
});
if (!found) {
citychild.children.push({ name: [item.city], children: [] });
}
}
}
for (var company of citychild.children) {
var arr = [];
for (var item of this.usersdata.info) {
if (
item.city === company.name[0] &&
item.state === citychild.name[0]
) {
for (var x in item) {
if (x != "state" && x != "city") arr.push(item[x]);
}
company.children.push({ name: arr });
}
}
}
}
this.formateddata = formateddata;
},
//// function below is for swap table header uses.
getindexvalue: function(index) {
var array = [this.formateddata.title[index]];
for (var area of this.formateddata.area) {
for (var item of area.companies) {
array.push(item.info[index]);
}
}
return array;
},
addindexvalue: function(index, selectedvalue) {
var counter = 0;
this.formateddata.title.splice(index, 1, selectedvalue[0]);
for (var area of this.formateddata.area) {
for (var item in area.companies) {
counter += 1;
area.companies[item].info.splice(index, 1, selectedvalue[counter]);
}
}
},
onmousedown: function(e) {
var index = this.usersdata.header.indexOf(e.target.innerHTML);
this.selectedvaluedown = this.getindexvalue(index);
this.selectedindexdown = index;
},
onmouseup: function(e) {
var index = this.usersdata.header.indexOf(e.target.innerHTML);
var selectedvalueup = this.getindexvalue(index);
this.addindexvalue(index, this.selectedvaluedown);
this.addindexvalue(this.selectedindexdown, selectedvalueup);
}
}
};
</script>
<style>
th,
tr,
td {
border: black solid 1px;
}
table {
border-collapse: collapse;
}
</style>

44
src/components/TableTree.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<li>
<table @click="toggle">
<tr>
<td v-for="(item,index) in data.name" :key="index">{{item}}</td>
</tr>
</table>
<ul v-show="open">
<TableTree :data="data" v-for="(data,index) in data.children" :key="index"></TableTree>
</ul>
</li>
</template>
<script>
export default {
name: "TableTree",
props: { data: Object },
data: function() {
return {
open: false
};
},
methods: {
// return this.data has children and children lenght
isfolder: function() {
return this.data.children && this.data.children.length;
},
// if isfolder is true open close folder
toggle: function() {
if (this.isfolder) {
this.open = !this.open;
}
}
}
};
</script>
<style>
ul {
padding-left: 0px;
}
table {
width: 100%;
}
</style>

4
tests/unit/HelloWorld.spec.ts
View File

@ -3,8 +3,12 @@ import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => { describe("HelloWorld.vue", () => {
it("renders props.msg when passed", () => { it("renders props.msg when passed", () => {
<<<<<<< HEAD
const msg: string = "new message"; const msg: string = "new message";
// tslint:disable-next-line:typedef // tslint:disable-next-line:typedef
=======
const msg = "new message";
>>>>>>> dev-mq
const wrapper = shallowMount(HelloWorld, { const wrapper = shallowMount(HelloWorld, {
propsData: { msg } propsData: { msg }
}); });

10
tsconfig.json
View File

@ -6,7 +6,13 @@
"jsx": "preserve", "jsx": "preserve",
"importHelpers": true, "importHelpers": true,
"moduleResolution": "node", "moduleResolution": "node",
<<<<<<< HEAD
"esModuleInterop": true, "esModuleInterop": true,
=======
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
>>>>>>> dev-mq
"sourceMap": true, "sourceMap": true,
"baseUrl": ".", "baseUrl": ".",
"types": [ "types": [
@ -19,7 +25,11 @@
] ]
}, },
"lib": [ "lib": [
<<<<<<< HEAD
"es2015", "es2015",
=======
"esnext",
>>>>>>> dev-mq
"dom", "dom",
"dom.iterable", "dom.iterable",
"scripthost" "scripthost"