Skip to content

O
OKR
Commit 3d22a6b1 authored by sixiaofeng's avatar sixiaofeng
Browse files
Options

合并

parent 46ac57a8
Hide whitespace changes
Inline Side-by-side
Showing with 477 additions and 55 deletions
src/components/common/Icon.vue
View file @ 3d22a6b1
......@@ -36,7 +36,7 @@ export default Vue.extend({
},
methods: {
handleClick() {
this.$emit('click-icon')
this.$emit('click')
}
}
});
......
src/layout/main-page.vue
View file @ 3d22a6b1
......@@ -8,7 +8,7 @@
type="png"
class-name="w-6.5 w-6.5"
:path="require('@/assets/icons/left-arrow.png')"
@click-icon="clickLeft"
@click="clickLeft"
/>
</template>
<slot name="left" />
......
src/router/index.ts
View file @ 3d22a6b1
......@@ -15,15 +15,20 @@ const routes: Array<RouteConfig> = [
},
/**
* 团队管理相关路由
* 团队管理
* 团队架构
* 架构部门详情 /:id
* 团队成员信息
* 团队管理 /team-management
* 团队架构 /team-frame
* 架构部门详情 /team/:id
* 团队成员信息 /team-member/:id
* 编辑成员信息 /edit-member
* 创建团队 /team-create
* 团队二维码 /team-QRcode
* 部门管理 /department-management
* 添加部门 /add-department
*
*/
{
path: '/team-management',
name: 'Home',
name: 'TeamManagement',
component: () => import('@/views/team-management.vue'),
meta: {
title: '团队管理'
......@@ -73,6 +78,30 @@ const routes: Array<RouteConfig> = [
meta: {
title: '团队二维码'
}
},
{
path: '/edit-member/:id',
name: 'EditMember',
component: () => import('@/views/edit-member.vue'),
meta: {
title: '编辑成员'
}
},
{
path: '/department-management',
name: 'DepartmentManagement',
component: () => import('@/views/department-management.vue'),
meta: {
title: '部门管理'
}
},
{
path: '/add-department',
name: 'AddDepartment',
component: () => import('@/views/add-department.vue'),
meta: {
title: '添加部门'
}
}
]
......
src/style.less
View file @ 3d22a6b1
input {
box-shadow:none; /*去除阴影*/
outline: none;/*聚焦input的蓝色边框*/
resize: none; /*textarea 禁止拖拽*/
// border: none; /*去除边框*/
-webkit-appearance: none;/*常用于IOS下移除原生样式*/
-webkit-tap-highlight-color: rgba(0,0,0,0); /*点击高亮的颜色*/
}
\ No newline at end of file
src/views/add-department.vue 0 → 100644
View file @ 3d22a6b1
<template>
<!-- 添加部门 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
>
<div class="pt-14 px-4">
<input-cell
v-model="name"
required
:limit="20"
label="部门名称"
placeholder="请输入部门名称"
error-msg="名称不能为空"
/>
<group-cell class="mt-4" title="部门主管">
<c-cell dot title="默认为添加的人，主管即为群主" />
</group-cell>
<group-cell class="mt-4" title="所属团队">
<c-cell dot title="杭州复杂美科技有限公司" />
</group-cell>
<c-button round class="mt-10">
确定
</c-button>
</div>
</main-page>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
components:{
// 'app-icon':()=>import('./components/common/Icon.vue'),
'main-page': () => import('@/layout/main-page.vue'),
'input-cell': () => import('./components/input-cell.vue'),
'c-cell': () => import('./components/c-cell.vue'),
'c-button': () => import('./components/c-button.vue'),
// 'switch-cell': () => import('./components/switch-cell.vue'),
'group-cell': () => import('./components/group-cell.vue')
},
name: 'DepartmentManagement',
data() {
return {
name: '产品部',
check: false
}
}
})
</script>
<style lang="less">
</style>
src/views/components/c-button.vue
View file @ 3d22a6b1
<template>
<button
class="py-2.5 text-center text-white w-full"
class="py-2.5 text-center w-full"
:class="getClass"
:disabled="disabled"
@click="clickButton"
>
<slot>按钮</slot>
......@@ -17,25 +18,37 @@ export default Vue.extend({
// 'main-page': () => import('@/layout/main-page.vue')
},
props: {
buttonBg: {
type: String,
default: 'bg-color-primary'
},
round: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
type: {
type: String,
default: 'primary'
}
},
name: 'CButton',
computed: {
getClass() {
const className = this.round ? 'rounded-full' : 'rounded'
return `${className} ${this.buttonBg}`
let className = this.round ? 'rounded-full' : 'rounded'
switch(this.type) {
case 'primary':
className = `${className} bg-color-primary text-white`
break
case 'secondary':
className = `${className} bg-white text-text-primary`
break
}
return this.disabled ? `${className} bg-button-disabled` : `${className}`
}
},
methods: {
clickButton() {
this.$emit('click-button')
this.$emit('click')
}
}
})
......
src/views/components/c-cell.vue
View file @ 3d22a6b1
<template>
<div
class="mb-px flex text-text-primary items-center justify-between bg-white px-4 py-3 rounded"
class="mb-px bg-white px-4 rounded"
@click="clickItem"
>
<div class="flex items-center justify-between flex-1 mr-1.5">
<div class="title flex-shrink-0 mr-4">{{ title }}</div>
<div v-if="showContent" class="flex-1 text-text-secondary text-sm text-right">{{ content }}</div>
<div v-if="checkIfEmpty(label)" class="text-sm text-text-secondary py-2">{{ label }}</div>
<div class="flex py-3 items-center justify-between">
<div class="flex items-center justify-between flex-1 mr-1.5">
<div class="title text-text-primary flex-shrink-0 mr-4">{{ title }}</div>
<div v-if="checkIfEmpty(content)" class="flex-1 text-text-secondary text-sm text-right">{{ content }}</div>
</div>
<app-icon
v-if="dot"
type="png"
:path="require('@/assets/icons/dot.png')"
class-name="h-5 w-1 ml-auto flex-shrink-0"
/>
</div>
<app-icon
v-if="dot"
type="png"
:path="require('@/assets/icons/dot.png')"
class-name="h-5 w-1 ml-auto flex-shrink-0"
/>
</div>
</template>
......@@ -30,17 +33,16 @@ export default Vue.extend({
type: Boolean,
default: false
},
label: String,
content: String
},
name: 'CCell',
computed: {
showContent() {
return this.content && this.content.replace(/(^\s*)|(\s*$)/g, '') !== ''
}
},
methods: {
clickItem() {
this.$emit('click-cell')
this.$emit('click')
},
checkIfEmpty(string: string) {
return string && string.replace(/(^\s*)|(\s*$)/g, '') !== ''
}
}
})
......
src/views/components/group-cell.vue 0 → 100644
View file @ 3d22a6b1
<template>
<div class="mb-px rounded">
<div class="px-4 bg-white mb-px text-sm text-text-secondary py-2 h-9 flex items-center" @click="clickItem">
<div class="title">{{ title }}</div>
<app-icon
v-if="dot"
type="png"
:path="require('@/assets/icons/dot.png')"
class-name="h-5 w-1 ml-auto flex-shrink-0"
/>
</div>
<slot />
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
components:{
'app-icon':()=>import('@/components/common/Icon.vue')
},
props: {
dot: {
type: Boolean,
default: false
},
title: {
type: String,
default: '标题'
}
},
name: 'CCell',
methods: {
clickItem() {
this.$emit('click')
},
checkIfEmpty(string: string) {
return string && string.replace(/(^\s*)|(\s*$)/g, '') !== ''
}
}
})
</script>
<style lang="less">
</style>
src/views/components/input-cell.vue 0 → 100644
View file @ 3d22a6b1
<template>
<div
class="mb-px bg-white px-4 rounded"
>
<div v-if="checkIfEmpty(label)" class="py-2 flex items-center justify-between text-sm text-text-secondary">
<div class="">
<span v-if="required" class="text-color-primary mr-0.5">*</span>
<span>{{ label }}</span>
</div>
<div v-if="limit > 0" class="limit">{{ length }}/{{ limit }}</div>
</div>
<div class="py-3">
<div class="flex-1">
<!-- <div class="title text-text-primary flex-shrink-0 mr-4">{{ title }}</div> -->
<!-- <div v-if="checkIfEmpty(content)" class="flex-1 text-text-secondary text-sm text-right">{{ content }}</div> -->
<input
:type="type"
:value="value"
class="w-full text-text-primary"
:placeholder="placeholder"
@input="handleInput"
@blur="handleChange"
>
<div v-if="showError" class="error text-xs text-warn-color mt-2">{{ errorMsg }}</div>
</div>
<!-- <app-icon
v-if="dot"
type="png"
:path="require('@/assets/icons/dot.png')"
class-name="h-5 w-1 ml-auto flex-shrink-0"
/> -->
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Field } from 'vant'
Vue.use(Field)
export default Vue.extend({
components:{
// 'app-icon':()=>import('@/components/common/Icon.vue')
// 'main-page': () => import('@/layout/main-page.vue')
},
props: {
// title: String,
// dot: {
// type: Boolean,
// default: false
// },
label: String,
type: {
type: String,
default: 'text'
},
errorMsg: {
type: String,
default: '错误信息'
},
required: {
type: Boolean,
default: false
},
limit: {
type: Number,
default: 0
},
placeholder: {
type: String,
default: '请输入..'
},
value: String
},
name: 'InputCell',
data() {
return {
// value: '',
length: 0,
showError: false
}
},
methods: {
checkIfEmpty(string: string) {
return string && string.replace(/(^\s*)|(\s*$)/g, '') !== ''
},
handleInput(e: InputEvent) {
const value = (e.target as HTMLInputElement).value
this.showError = this.showError ? !this.checkIfEmpty(value) : this.showError
this.length = value.length
if (this.limit > 0 && this.length >= this.limit) {
this.$emit('input', value.slice(0, this.limit))
this.length = this.limit
} else {
this.$emit('input', value)
}
},
handleChange(e: Event) {
const value = (e.target as HTMLInputElement).value
if (this.required && !this.checkIfEmpty(value)) {
this.showError = true
}
}
}
})
</script>
<style lang="less">
</style>
src/views/department-management.vue 0 → 100644
View file @ 3d22a6b1
<template>
<!-- 部门管理 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
>
<div class="pt-14 px-4">
<input-cell
v-model="name"
required
:limit="10"
label="部门名称"
placeholder="请输入部门名称"
error-msg="名称不能为空"
/>
<c-cell
dot
title="部门主管"
content="部门主管名称"
class="mt-4"
/>
<c-cell
dot
title="上级部门"
content="产品设计部"
class="mt-4"
/>
<switch-cell title="该部门包含子部门成员" :checked.sync="check" />
<c-cell
dot
title="添加成员"
class="mt-4"
/>
<c-cell
dot
title="删除成员"
/>
<c-button
round
type="secondary"
class="mt-10"
>
删除部门
</c-button>
</div>
</main-page>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
components:{
// 'app-icon':()=>import('./components/common/Icon.vue'),
'main-page': () => import('@/layout/main-page.vue'),
'input-cell': () => import('./components/input-cell.vue'),
'c-cell': () => import('./components/c-cell.vue'),
'c-button': () => import('./components/c-button.vue'),
'switch-cell': () => import('./components/switch-cell.vue')
},
name: 'DepartmentManagement',
data() {
return {
name: '产品部',
check: false
}
}
})
</script>
<style lang="less">
</style>
src/views/edit-member.vue 0 → 100644
View file @ 3d22a6b1
<template>
<!-- 编辑员工 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
>
<div class="pt-14 px-4">
<input-cell
v-model="name"
required
:limit="10"
label="真实姓名"
placeholder="请输入姓名"
error-msg="姓名不能为空"
/>
<input-cell
v-model="position"
:limit="10"
label="职位"
placeholder="请输入职位"
class="mt-4"
/>
<c-cell
title="手机号"
content="13112345678"
class="mt-4"
/>
<c-cell
title="员工编号"
content="12"
/>
<c-cell
dot
title="入职时间"
content="2019-12-18"
/>
<group-cell class="mt-4" title="所属部门">
<c-cell title="产品设计部(主要部门)" />
<c-cell title="设计部(子部门)" />
</group-cell>
<c-button
round
type="secondary"
class="mt-10"
>
删除员工
</c-button>
</div>
</main-page>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
components:{
// 'app-icon':()=>import('./components/common/Icon.vue'),
'main-page': () => import('@/layout/main-page.vue'),
'input-cell': () => import('./components/input-cell.vue'),
'c-cell': () => import('./components/c-cell.vue'),
'c-button': () => import('./components/c-button.vue'),
'group-cell': () => import('./components/group-cell.vue')
},
name: 'EditMember',
data() {
return {
name: '张三',
position: ''
}
}
})
</script>
<style lang="less">
</style>
src/views/member-info.vue
View file @ 3d22a6b1
......@@ -7,7 +7,7 @@
type="png"
class-name="w-6.5 w-6.5"
:path="require('@/assets/icons/left-arrow-white.png')"
@click-icon="$router.go(-1)"
@click="$router.go(-1)"
/>
</template>
<!-- 顶部右侧插槽 -->
......@@ -21,7 +21,7 @@
<div class="relative w-full h-50 bg-gradient-to-r from-linear-t to-linear-b">
<!-- 背景图 -->
<img class="w-82 absolute top-0 right-0" src="@/assets/images/header-bg.png" alt="">
<div class="px-4 pt-14">
<div class="px-4 pt-14 w-full absolute">
<!-- 成员信息 -->
<div class="member-info flex items-start">
<!-- 头像 -->
......@@ -36,6 +36,7 @@
type="png"
class-name="w-4 h-4"
:path="require('@/assets/icons/edit-white.png')"
@click="editMember"
/>
</div>
<div class="info text-xs text-text-light mt-2">
......@@ -75,7 +76,7 @@
content="可发言"
class="mt-4"
/>
<c-button round class="mt-4">发消息</c-button>
<c-button round class="mt-4" @click="handleClick">发消息</c-button>
</div>
</main-page>
</template>
......@@ -95,7 +96,20 @@ export default Vue.extend({
data() {
return {
check1: false,
check2: true
check2: true,
id: ''
}
},
mounted() {
this.id = this.$route.params.id
},
methods: {
handleClick() {
console.log('发消息')
},
// 编辑成员信息
editMember() {
this.$router.push(`/edit-member/${this.id}`)
}
}
})
......
src/views/team-detail.vue
View file @ 3d22a6b1
......@@ -25,9 +25,9 @@
</div>
<!-- 底部操作 -->
<div class="py-2 px-4 grid grid-cols-3 gap-2.5 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
<c-button @click-button="addMember">添加成员</c-button>
<c-button @click-button="addDepartment">添加部门</c-button>
<c-button @click-button="setDepartment">部门设置</c-button>
<c-button round @click="$router.push('/file')">添加成员</c-button>
<c-button round @click="$router.push('/add-department')">添加部门</c-button>
<c-button round @click="$router.push('/department-management')">部门设置</c-button>
</div>
</div>
</main-page>
......@@ -80,14 +80,8 @@ export default Vue.extend({
clickItem(val: Member) {
this.$router.push(`/team/${val.id}`)
},
addMember() {
console.log('添加成员')
},
addDepartment() {
console.log('添加部门')
},
setDepartment() {
console.log('设置部门')
}
},
watch: {
......
src/views/team-management.vue
View file @ 3d22a6b1
......@@ -25,19 +25,15 @@
</div>
</div>
</div>
<c-cell dot title="团队架构" @click-cell="$router.push('/team-frame')" />
<c-cell dot title="添加成员" @click-cell="$router.push('/file')" />
<c-cell dot title="添加部门" />
<c-cell dot title="团队架构" @click="$router.push('/team-frame')" />
<c-cell dot title="添加成员" @click="$router.push('/file')" />
<c-cell dot title="添加部门" @click="$router.push('/add-department')" />
<div class="mt-4">
<c-cell dot title="团队管理权限" content="共3人" />
<c-cell dot title="转让负责人" />
<c-cell dot title="申请管理" />
</div>
<c-button
round
buttonBg="bg-white"
class="text-text-primary mt-16"
>
<c-button round type="secondary" class="mt-16">
解散团队
</c-button>
</div>
......
tailwind.config.js
View file @ 3d22a6b1
......@@ -14,11 +14,15 @@ module.exports = {
'text-secondary': '#8A97A5',
'text-light': '#E6E6E6',
'border-lighter': '#E3EEF4',
// 提示颜色
'warn-color': '#DD5F5F',
// 成员顶部边框
'border-primary-lighter': '#5DC8FF',
// 成员资料顶部渐变
'linear-t': '#6A8FBB',
'linear-b': '#066BA2'
'linear-b': '#066BA2',
// 按钮
'button-disabled': '#C8D3DE'
},
spacing: {
6.5: '1.625rem',
......@@ -886,7 +890,7 @@ module.exports = {
backgroundAttachment: ['responsive'],
backgroundBlendMode: ['responsive'],
backgroundClip: ['responsive'],
backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'checked'],
backgroundImage: ['responsive'],
backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundPosition: ['responsive'],
......@@ -895,7 +899,7 @@ module.exports = {
backgroundOrigin: ['responsive'],
blur: ['responsive'],
borderCollapse: ['responsive'],
borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'checked'],
borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment