1. 工程結構：
2. index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-project</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
3. router.js:
import Vue from 'vue'
import Router from 'vue-router'
import teamList from '@/components/teamList'
import roleList from '@/components/roleList'
import teamDetail from '@/components/teamDetail'
// import App from '@/App'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/teamList',
component:teamList,
},
{
path:'/roleList',
component:roleList,
},
{
path:'/teamDetail',
component:teamDetail,
}
]
})
4. main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router.js'
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
//template: '<App/>'
render: h => h(App)
})
5. app.vue:
<template>
<div class="content">
<h1>this is app.vue</h1>
<el-row :gutter="20">
<el-col :span="4">
<leftMenu></leftMenu>
</el-col>
<el-col :span="20">
<mainContent></mainContent>
</el-col>
</el-row>
</div>
</template>
<script>
import leftMenu from "@/components/leftMenu";
import mainContent from "@/components/mainContent";
export default {
name: "App",
components: {
leftMenu: leftMenu,
mainContent: mainContent
}
};
</script>
<style scoped>
div#home {
width: 100%;
}
6. leftMenu.vue:
<template>
<el-col>
<ul>
<li>
<router-link to="/teamList">團隊管理</router-link>
</li>
<li>
<router-link to="/roleList">權限管理</router-link>
</li>
</ul>
</el-col>
</template>
<script>
export default {};
</script>
<style scoped>
</style>
7. mianContent.vue:
<template>
<div id="div_main_content">
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div#div_main_content{
border: 1px solid #d3d3d3;
}
</style>
8. navBar.vue:
<template>
<div style="padding:20px">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>活動管理</el-breadcrumb-item>
<el-breadcrumb-item>活動列表</el-breadcrumb-item>
<el-breadcrumb-item>活動詳情</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
data(){
return {
};
},
methods:{
}
}
</script>
<style scoped>
</style>
9. roleList.vue:
<template>
<div>
<navBar></navBar>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切換第二、第三行的選中狀態</el-button>
<el-button @click="toggleSelection()">取消選擇</el-button>
</div>
<el-button type="text" @click="dialogTableVisible = true">打開嵌套表格的 Dialog</el-button>
<el-dialog title="收貨地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<el-button type="text" @click="dialogFormVisible = true">打開嵌套表單的 Dialog</el-button>
<el-dialog title="收貨地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活動名稱" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活動區域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="請選擇活動區域">
<el-option label="區域一" value="shanghai"></el-option>
<el-option label="區域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import navBar from '@/components/navBar'
export default {
components:{
navBar: navBar
},
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}],
multipleSelection: [],
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
<style scoped>
</style>
10. teamDetail.vue:
<template>
<div>
<navBar></navBar>
<el-row :gutter="20" style="padding-left:20px">
<el-col :span="20">
<div class="grid-content bg-purple">
<h1>團隊信息</h1>
<el-row :gutter="20">
<el-col :span="5" style="text-align:right">部門：</el-col>
<el-col :span="5" style="text-align:left">解決方案部</el-col>
<el-col :span="5" style="text-align:right">團隊類別：</el-col>
<el-col :span="5" style="text-align:left">解決方案</el-col>
<el-col :span="4"></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="5" style="text-align:right">團隊名稱：</el-col>
<el-col :span="5" style="text-align:left">大客戶一二七部</el-col>
<el-col :span="5" style="text-align:right">團隊負責人：</el-col>
<el-col :span="5" style="text-align:left">張三</el-col>
<el-col :span="4"></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="5" style="text-align:right">備註：</el-col>
<el-col :span="5" style="text-align:left">我是備註xxxxxxxxxxxxxxxxxxx</el-col>
<el-col :span="5" style="text-align:right">狀態：</el-col>
<el-col :span="5" style="text-align:left">正常</el-col>
<el-col :span="4"></el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="20" style="padding-left:20px">
<el-col :span="20">
<div class="grid-content bg-purple">
<h1>小組信息</h1>
<el-row :gutter="20" style="padding-left:20px">
<el-col :span="8" style="padding-top:20px">
<div class="grid-content bg-purple">
<el-row :gutter="20">
<el-col :span="8" style="text-align:right">小組名稱：</el-col>
<el-col :span="16" style="text-align:left">xxxxx小組</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8" style="text-align:right">成員：</el-col>
<el-col :span="16" style="text-align:left">張三、李四、王五</el-col>
</el-row>
</div>
</el-col>
<el-col :span="8" style="padding-top:20px">
<div class="grid-content bg-purple">
<el-row :gutter="20">
<el-col :span="8" style="text-align:right">小組名稱：</el-col>
<el-col :span="16" style="text-align:left">xxxxx小組</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8" style="text-align:right">成員：</el-col>
<el-col :span="16" style="text-align:left">張三、李四、王五</el-col>
</el-row>
</div>
</el-col>
<el-col :span="8" style="padding-top:20px">
<div class="grid-content bg-purple">
<el-row :gutter="20">
<el-col :span="8" style="text-align:right">小組名稱：</el-col>
<el-col :span="16" style="text-align:left">xxxxx小組</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8" style="text-align:right">成員：</el-col>
<el-col :span="16" style="text-align:left">張三、李四、王五</el-col>
</el-row>
</div>
</el-col>
<el-col :span="8" style="padding-top:20px">
<div class="grid-content bg-purple">
<el-row :gutter="20">
<el-col :span="8" style="text-align:right">小組名稱：</el-col>
<el-col :span="16" style="text-align:left">xxxxx小組</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8" style="text-align:right">成員：</el-col>
<el-col :span="16" style="text-align:left">張三、李四、王五</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="20" style="padding-left:20px">
<el-col :span="20">
<div class="grid-content bg-purple">
<h1>團隊成員信息</h1>
<el-row :gutter="20">
<el-col :span="3" style="text-align:right">成員信息：</el-col>
<el-col :span="21" style="text-align:left">張三、李四、王五、趙四、孫八、趙啓、張思</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import navBar from '@/components/navBar'
export default {
components:{
navBar: navBar
},
data(){
return {
};
},
methods:{
}
}
</script>
<style scoped>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple {
border: 1px solid #d3d3d3;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
padding:20px
}
/* .row-bg {
padding: 10px 0;
background-color: #f9fafc;
} */
</style>
11. teamList.vue:
<template>
<div style="padding-right:20px">
<navBar></navBar>
<el-row>
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline"
style="margin-left:20px"
label-width="80px"
>
<el-form-item>
<el-button type="primary">新建團隊</el-button>
</el-form-item>
<el-form-item label="團隊名稱">
<el-input v-model="formInline.user" placeholder="團隊名稱" style="width:200px"></el-input>
</el-form-item>
<el-form-item label="團隊類別">
<el-select v-model="formInline.region" placeholder="團隊類別" style="width:200px">
<el-option label="解決方案" value="01"></el-option>
<el-option label="協同" value="02"></el-option>
</el-select>
</el-form-item>
<el-form-item label="狀態">
<el-select v-model="formInline.region" placeholder="狀態">
<el-option label="正常" value="Y"></el-option>
<el-option label="禁用" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
</el-form-item>
</el-form>
</el-row>
<hr />
<el-row>
<el-table :data="tableData" stripe style="margin-left:20px">
<el-table-column prop="orgNm" label="團隊名稱" width="180"></el-table-column>
<el-table-column prop="parentOrgNm" label="所屬部門" width="180"></el-table-column>
<el-table-column prop="orgType" label="團隊類別" width="180"></el-table-column>
<el-table-column prop="leaderUserName" label="團隊負責人" width="180"></el-table-column>
<el-table-column prop="leaderMobile" label="團隊負責人手機號" width="180"></el-table-column>
<el-table-column prop="members" label="團隊成員" width="180"></el-table-column>
<el-table-column prop="useYn" label="狀態" width="180"></el-table-column>
<el-table-column prop="orgRemark" label="備註" width="180"></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<router-link to="/teamDetail">查看詳情</router-link>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row :gutter="24">
<el-col :span="8" :offset="16">
<el-pagination background layout="prev, pager, next" :total="1000" style="width:100%"></el-pagination>
</el-col>
</el-row>
<hr />
<el-form :label-position="labelPosition" label-width="70px">
<el-row>
<el-col :span="12">
<el-form-item label="部門">
<el-select placeholder="請選擇部門">
<el-option label="解決方案" value="01"></el-option>
<el-option label="協同" value="02"></el-option>
</el-select>
</el-form-item>
<el-form-item label="團隊名稱">
<el-select placeholder="請訓責團隊名稱">
<el-option label="解決方案" value="01"></el-option>
<el-option label="協同" value="02"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活動區域">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="活動區域">
<el-input></el-input>
</el-form-item>
<el-form-item label="名稱">
<el-input></el-input>
</el-form-item>
<el-form-item label="活動形式">
<el-input></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import navBar from '@/components/navBar';
export default {
components: {
navBar: navBar
},
data () {
return {
labelPosition: 'right',
tableData: [
{
orgNm: '銷售團隊0001',
parentOrgNm: '銷售一部',
orgType: '解決方案',
leaderUserName: '張三',
leaderMobile: '13788889999',
members: '張三,李四,王五,趙四',
useYn: '正常',
orgRemark: '銷售團隊0001銷售團隊0001銷售團隊0001銷售團隊0001'
}
],
formInline: {
user: '',
region: ''
}
}
},
methods: {
onSubmit () {
console.log('submit!')
}
}
}
</script>
<style scoped>
.el-form-item {
margin-left: 50px !important;
}
/* .el-input,
.el-select {
width: 200px !important;
} */
</style>
ps: 詳細內容見工程附件