force merge to master
This commit is contained in:
commit
238d143fdf
@ -1,4 +1,8 @@
|
||||
<<<<<<< HEAD
|
||||
# web-gantt
|
||||
=======
|
||||
# table_dropdown
|
||||
>>>>>>> dev-mq
|
||||
|
||||
## Project setup
|
||||
```
|
||||
|
||||
12915
package-lock.json
generated
12915
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
@ -1,5 +1,9 @@
|
||||
{
|
||||
<<<<<<< HEAD
|
||||
"name": "web-gantt",
|
||||
=======
|
||||
"name": "table_dropdown",
|
||||
>>>>>>> dev-mq
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@ -9,6 +13,7 @@
|
||||
"test:unit": "vue-cli-service test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
<<<<<<< HEAD
|
||||
"dayjs": "^1.7.4",
|
||||
"vue": "^2.5.16"
|
||||
},
|
||||
@ -28,5 +33,25 @@
|
||||
"ts-jest": "^23.0.0",
|
||||
"typescript": "^3.0.0",
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<<<<<<< HEAD
|
||||
<html>
|
||||
=======
|
||||
<html lang="en">
|
||||
>>>>>>> dev-mq
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<<<<<<< HEAD
|
||||
<title>web-gantt</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<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>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
120
src/App.vue
120
src/App.vue
@ -1,54 +1,92 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<gantt></gantt>
|
||||
|
||||
<Table :usersdata="data"></Table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import Gantt from "./components/Gantt.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "app",
|
||||
<script>
|
||||
//import Tree from "@/components/tree.vue"; // @ is an alias to /src
|
||||
import Table from "@/components/Table.vue"; // @ is an alias to /src
|
||||
export default {
|
||||
components: {
|
||||
Gantt
|
||||
Table
|
||||
},
|
||||
data() {
|
||||
name: "app",
|
||||
data: function() {
|
||||
return {
|
||||
header: {
|
||||
info: {
|
||||
columns: [
|
||||
{
|
||||
field: "orderNo",
|
||||
display: "订单号"
|
||||
},
|
||||
{
|
||||
filed: "processName",
|
||||
display: "工序"
|
||||
}
|
||||
],
|
||||
groupBy: ["orderNo"]
|
||||
},
|
||||
time: {
|
||||
start: "2018-07-01",
|
||||
end: "2018-08-31",
|
||||
groupBy: ["year", "month", "day"]
|
||||
}
|
||||
},
|
||||
task: {
|
||||
info: {
|
||||
orderNo: "订单1",
|
||||
processName: "工序1"
|
||||
},
|
||||
time: {
|
||||
start: "2018-08-01",
|
||||
end: "2018-08-10"
|
||||
}
|
||||
data: {
|
||||
header: [
|
||||
"客户编号",
|
||||
"公司名称",
|
||||
"联系人",
|
||||
"称谓",
|
||||
"地址",
|
||||
"邮编",
|
||||
"国家",
|
||||
"电话",
|
||||
"传真",
|
||||
"区域",
|
||||
"城市"
|
||||
],
|
||||
info: [
|
||||
{
|
||||
客户编号: "HUNGC",
|
||||
公司名称: "五金机械",
|
||||
联系人: "苏先生",
|
||||
称谓: "销售代表",
|
||||
地址: "德昌路甲",
|
||||
邮编: "564576",
|
||||
国家: "中国",
|
||||
电话: "(053)5556874",
|
||||
传真: "(053)5552376",
|
||||
state: "东北",
|
||||
city: "大连"
|
||||
},
|
||||
{
|
||||
客户编号: "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>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
||||
@ -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'
|
||||
}"> </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'
|
||||
}"> </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>
|
||||
|
||||
@ -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
117
src/components/Table.vue
Normal 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
44
src/components/TableTree.vue
Normal 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>
|
||||
|
||||
@ -3,8 +3,12 @@ import HelloWorld from "@/components/HelloWorld.vue";
|
||||
|
||||
describe("HelloWorld.vue", () => {
|
||||
it("renders props.msg when passed", () => {
|
||||
<<<<<<< HEAD
|
||||
const msg: string = "new message";
|
||||
// tslint:disable-next-line:typedef
|
||||
=======
|
||||
const msg = "new message";
|
||||
>>>>>>> dev-mq
|
||||
const wrapper = shallowMount(HelloWorld, {
|
||||
propsData: { msg }
|
||||
});
|
||||
|
||||
@ -6,7 +6,13 @@
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
<<<<<<< HEAD
|
||||
"esModuleInterop": true,
|
||||
=======
|
||||
"experimentalDecorators": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
>>>>>>> dev-mq
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": [
|
||||
@ -19,7 +25,11 @@
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
<<<<<<< HEAD
|
||||
"es2015",
|
||||
=======
|
||||
"esnext",
|
||||
>>>>>>> dev-mq
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user