Skip to content

B
bms-vue-obear
Commit 41f3f0a5 authored by daywrite's avatar daywrite
Browse files
Options

布局项目管理

parent d4d68161
Show whitespace changes
Inline Side-by-side
Showing with 648 additions and 17 deletions
src/assets/css/task-app.scss
View file @ 41f3f0a5
.task-app { .task-app {
.obear-app-frame__white {
border: 1px solid white;
border-radius:2px;
padding: 0 2px 0 2px;
}
.el-radio-button__inner, .el-radio-button:last-child .el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner{ .el-radio-button__inner, .el-radio-button:last-child .el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner{
border-left: 1px solid #DCDFE6; border-left: 1px solid #DCDFE6;
margin: 0 2px 0 0; margin: 0 2px 0 0;
......
src/components/common/searchForm.vue
View file @ 41f3f0a5
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<el-row class="form-content"> <el-row class="form-content">
<el-form ref="clientForm" size="mini" :model="clientForm" label-width="0" label-position="top"> <el-form ref="clientForm" size="mini" :model="clientForm" label-width="0" label-position="top">
<el-col :span="4" v-for="(item, key) in filter" :key="key"> <el-col :span="4" v-for="(item, key) in filter" :key="key">
<solt name="pre"></solt>
<el-form-item> <el-form-item>
<span slot="label" v-if="item.key !== 'Filter[sort]'"> <span slot="label" v-if="item.key !== 'Filter[sort]'">
<a @click.prevent="timeSort" v-if="item.key === 'Filter[name]'"> <a @click.prevent="timeSort" v-if="item.key === 'Filter[name]'">
......
src/components/task_group_list/groupHome.vue 0 → 100644
View file @ 41f3f0a5
<template>
<section>
<div class="content">
<search-header
ref="searchHeader"
:title="'项目列表'"
:search-key="'ClientSearch'"
:add-title="'新建项目'"
@update:headerSearch="search => searchKeyword(search)"
@update:headerAdd="() => addSch()">
</search-header>
<search-form
ref="clientForm"
:filter="filter"
@update:clientList="form =>{ updateForm(form) }">
<el-form-item>
<singleRadioTool
:form-item="groupType"
:options-list="groupArray"
@update:item="val => { reimTypeChange(val) }">
</singleRadioTool>
</el-form-item>
</search-form>
<div class="page-body-content">
<div class="mb10">
<singleRadioTool
:form-item="taskType"
:options-list="navArray"
@update:item="val => { reimTypeChange(val) }">
</singleRadioTool>
</div>
<GroupItem
v-for="item in result.list"
:item="item"
:key="item.id">
<span slot="opearate" class="obear-opearate-button">
<el-button type="primary" size="mini" @click.prevent.stop="leaveMessageSch(item)"><span class="badge" v-if="item.commentCount.comment">{{ item.commentCount.comment ? item.commentCount.comment : '' }}</span><i class="fa fa-commenting"></i>留言</el-button>
<el-button type="primary" size="mini" @click.prevent.stop="editSch(item)" :disabled="!item.can_update"><i class="fa fa-edit animated"></i>编辑</el-button>
<el-button type="primary" size="mini" @click.prevent.stop="deleteSch(item.id)" :disabled="!item.can_delete"><i class="fa fa-trash-o animated-hove"></i>删除</el-button>
</span>
</GroupItem>
<Pagenation
@update:pager="pager => {updatePage(pager)}"
:total="result.pagenation.totalcount">
</Pagenation>
<leave-message
v-click-outside="lmClose"
ref="leaveMessage"
:lmTemplate="lmTemplate"
:type="20">
</leave-message>
</div>
</div>
<ReimModal
ref="reimModal">
<!-- v-click-outside="scheduleClose" -->
</ReimModal>
</section>
</template>
<script>
import SearchHeader from '../common/searchHeader'
import SearchForm from '../common/SearchForm'
import GroupItem from './groupItem'
import ReimModal from '../reimbursement/reimbursementModal'
import Pagenation from './groupPagenation'
import clickOutside from '@/lib/bind'
import singleRadioTool from '../common/singleRadioTool'
import SetParams from '../common/setParams'
import {
requestAPI,
api
} from '@/lib/commonMixin'
export default {
name: 'reimbursementHome',
mixins: [SetParams],
components: {
SearchHeader,
SearchForm,
GroupItem,
ReimModal,
Pagenation,
singleRadioTool
},
directives: {
clickOutside
},
data () {
return {
lmTemplate: [
{
name: '报销类型',
value: 'type.name',
default: ''
},
{
name: '费用金额',
value: 'amount'
},
{
name: '报销状态',
value: 'status_display'
},
{
name: '发生时间',
value: 'occurrence_at'
},
{
name: '费用说明',
value: 'description'
},
{
name: '费用类型',
value: 'costType.name'
},
{
name: '录入人',
value: 'createdBy.name'
}
],
filter: [],
groupType: 'all',
groupArray: [{
'key': 'all',
'name': '全部'
}, {
'key': '1',
'name': '我参与的'
}, {
'key': '2',
'name': '我领导的'
}],
taskType: 'group_list',
navArray: [{
'key': 'list',
'name': '项目清单'
}, {
'key': 'group_list',
'name': '项目列表'
}],
form: {
'ClientSearch[keyword]': ''
},
pagenation: {
thispage: 1,
pagesize: 10
},
result: {
list: [],
countArr: [],
navCount: [],
pagenation: {
totalcount: 1,
thispage: 1,
pagesize: 10
},
thisUser: {
id: '',
name: '',
sex: ''
}
}
}
},
mounted () {
this.init()
},
methods: {
init () {
this.getFilter()
},
_reload () {
let params = this.setParams({
...this.form,
page: this.pagenation.thispage
}, {})
this.getList(params)
},
reimTypeChange (val) {
if (val === 'list') {
this.$router.push({
path: '/taskHome'
})
} else {
this.$router.push({
path: '/groupHome'
})
}
},
timeSearchForm (search) {
let params = this.setParams({
...this.form,
page: this.pagenation.thispage
}, search)
this.getList(params)
},
searchKeyword (search) {
let params = this.setParams({
...this.form,
page: this.pagenation.thispage
}, search)
this.getList(params)
},
updateForm (search) {
let params = this.setParams({
...this.form,
page: this.pagenation.thispage
}, search)
this.getList(params)
},
updatePage (pager) {
let ret = this.setParams({
...this.form,
page: this.pagenation.thispage
}, {page: pager.thispage})
this.getList(ret)
},
getFilter () {
requestAPI(api.getTaskFilter).then(res => {
this.filter = res
})
},
leaveMessageSch (item) {
this.$refs.leaveMessage.btnShow(item)
},
lmClose () {
this.$refs.leaveMessage &&
this.$refs.leaveMessage.btnClose()
},
scheduleClose () {
this.$refs.reimModal &&
this.$refs.reimModal.handleClose()
},
addSch () {
this.$refs.reimModal.show()
},
editSch (item) {
this.$refs.reimModal.show(item)
},
deleteSch (id) {
this.$confirm('删除该待办事项?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
requestAPI(api.deleteReim, { id })
.then((res) => {
this._reload()
this.$message.success('删除成功')
})
}).catch(() => {
this.$message.info('取消删除')
})
},
getList (params) {
requestAPI(api.getReimList, params).then((res) => {
const {
list = [],
countArr = [],
navCount = [],
pagenation = {},
thisUser = {}
} = res
this.result.list = list
this.result.countArr = countArr
this.result.navCount = navCount
// this.reimType = navCount[0].key
this.result.pagenation = pagenation
this.result.thisUser = thisUser
})
}
}
}
</script>
<style scoped lang="scss">
@include c('opearate-button') {
> .el-button {
margin-right:0px;
}
& .btn-primary .badge {
color: #333744;
background-color: #fff;
}
& .badge {
position: relative;
top: 0px;
left: -5px;
display: inline-block;
padding: 0px 5px;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
background: white;
color: black;
}
i {
display: inline-block;
padding-right: 3px;
}
}
</style>
src/components/task_group_list/groupItem.vue 0 → 100644
View file @ 41f3f0a5
<template>
<section class="obear-schedule-item">
<el-row class="obear-schedule-row">
<el-col :span="8" :xs="24" class="obear-schedule-left" :style="{background: item.bgcolor}">
<el-row :gutter="10">
<el-col :span="24">
<router-link :to="{ path: '/scheduleView/' + item.client_id }">
<i class="fa fa-fw fa-th-list" aria-hidden="true"></i>{{ isNullClient ? '客户名称(未设置)' : item.client.name }}
</router-link>
</el-col>
<el-col :span="24">
<div class="obear-group-left__second">
<div>
<span class="obear-app-frame__white">剩余时间 超时</span>
</div>
<div>
<span class="obear-app-frame__white">剩余任务： 1个</span>
</div>
</div>
</el-col>
<el-col :span="24">
<span class="obear-app-frame__white">情况说明</span><span>：{{ item.description }}</span>
</el-col>
</el-row>
</el-col>
<el-col :span="16" :xs="24" class="obear-schedule-right">
<el-row :gutter="10">
<el-col :span="6" :xs="24">
<span>负责人：</span>
<span>
<img class="user-avatar rounded-circle" :src="item.icon">{{ item.name }}
</span>
</el-col>
<el-col :span="6" :xs="24">
<span>客户名称：</span><span class="collightBlue">{{ item.client.name }}</span>
</el-col>
<el-col :span="6" :xs="24">
<span>状态：</span><span class="obear-schedule-right__content" :style="{'border-color': item.bgcolor, color: item.bgcolor}">{{ item.status_display }}</span>
</el-col>
<el-col :span="6" :xs="24">
<span class="obear-schedule-right__content">截至日期</span><span>：{{ item.description }}</span>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="6" :xs="24">
<span>成员：</span>
<span v-for="item in reimCarbonCopyRelsArray">
<img class="user-avatar rounded-circle" :src="item.icon">{{ item.name }}
</span>
</el-col>
<el-col :span="6" :xs="24">
</el-col>
<el-col :span="6" :xs="24">
</el-col>
<el-col :span="6" :xs="24">
<slot name="opearate">
</slot>
</el-col>
</el-row>
</el-col>
</el-row>
</section>
</template>
<script>
export default {
name: 'taskItem',
props: {
item: Object
},
data () {
return {
}
},
computed: {
},
mounted () {
},
methods: {
}
}
</script>
<style scoped lang="scss">
.colRed {
color: red;
border: 1px solid red;
}
.colGreen {
color: green;
border: 1px solid green;
}
.colWhite {
color: white;
}
.collightBlue {
color: #649FD7;
}
.colBlue {
color: #0056b3;
}
.rounded-circle {
border-radius: 50% !important;
}
.user-avatar {
width: 16px;
max-width: 16px;
height: 16px;
max-height: 16px;
}
@include c('group-left') {
@include e('second') {
display:flex;
justify-content:space-between;
}
}
@include c('schedule-item') {
margin-bottom: 10px;
font-size: 12px;
}
@include c('schedule-item:first-child') {
.obear-schedule-left {
border-radius: 5px 0 0 0;
}
}
@include c('schedule-row') {
// min-height:100px;
background-color:white;
display: flex;
flex-wrap: wrap;
}
@include c('schedule-left') {
background-color: #EB7567;
color: white;
min-height: 100%;
padding: 10px 15px 6px;
> .el-row {
> .el-col {
margin-bottom: 4px;
}
}
.el-row div:first-child, .el-row div:first-child a{
color: white;
}
span {
display: inline-block;
// padding-left: 5px;
}
i {
display:inline-block;
padding-right:5px;
}
img {
display:inline-block;
margin-right:3px;
}
@include e('private') {
display: inline-block;
padding-left: 5px;
border-radius:5px;
border: 1px solid white;
width:35px;
height:17px;
}
}
@include c('schedule-right') {
height:100%;
padding: 10px 15px 6px;
> .el-row {
> .el-col {
margin-bottom: 4px;
.el-button {
margin: 0 2px;
padding: 7px;
}
.date-time {
color: #649FD7;
}
}
}
.badge {
border-radius: 2px;
color: #333744;
background: #ffffff;
vertical-align: baseline;
display: inline;
padding: 2px 6px;
}
span.badge-unread {
&:hover {
border-color: #de321d
}
color: #fff;
background-color: #e54c3a;
border-color: #a32516
}y: flex;
@include e('item') {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 5px 0 5px 5px;
flex:1;
}
@include e('status') {
color: red;
}
@include e('content') {
display: inline-block;
border: 1px solid #dc3545;
border-radius:2px;
padding: 0 2px 0 2px;
color: #dc3545;
}
}
</style>
src/components/task_group_list/groupPagenation.vue 0 → 100644
View file @ 41f3f0a5
<template>
<section class="pull-right">
<el-pagination v-if="total > 0" class="mb20 mt20"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.thispage"
:page-sizes="[10, 20, 40, 60, 80, 100]"
:page-size="pager.pagesize"
layout="total, prev, pager, next, jumper"
:total="total">
</el-pagination>
</section>
</template>
<script>
export default {
props: {
total: {
type: Number,
default: 0
}
},
data () {
return {
pager: {
thispage: 1,
pagesize: 20,
totalcount: 0
}
}
},
created () {
this.$emit('update:pager', this.pager)
},
methods: {
handleSizeChange (val) {
this.pager.thispage = 1
this.pager.pagesize = val
this.pager.totalcount = this.total
this.$emit('update:pager', this.pager)
},
handleCurrentChange (val) {
this.pager.thispage = val
this.pager.totalcount = this.total
this.$emit('update:pager', this.pager)
}
}
}
</script>
<style scoped>
</style>
src/components/task_list/taskHome.vue
View file @ 41f3f0a5
...@@ -167,11 +167,15 @@ export default { ...@@ -167,11 +167,15 @@ export default {
}, },
reimTypeChange (val) { reimTypeChange (val) {
let params = this.setParams({ if (val === 'list') {
...this.form, this.$router.push({
page: this.pagenation.thispage path: '/taskHome'
}, {navCount: this.reimType}) })
this.getList(params) } else {
this.$router.push({
path: '/groupHome'
})
}
}, },
timeSearchForm (search) { timeSearchForm (search) {
......
src/components/task_list/taskItem.vue
View file @ 41f3f0a5
<template> <template>
<section class="obear-schedule-item"> <section class="obear-schedule-item">
<el-row class="obear-schedule-row"> <el-row class="obear-schedule-row">
<el-col :span="4" :xs="24" class="obear-schedule-left" :style="{background: item.bgcolor}"> <el-col :span="8" :xs="24" class="obear-schedule-left" :style="{background: item.bgcolor}">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="24"> <el-col :span="24">
<el-checkbox v-model="checked"> <el-checkbox v-model="checked">
<span>普通 123</span> <span class="obear-schedule-left__checkbox">普通</span>
</el-checkbox> </el-checkbox>
<span>剩余时间 超时剩余时间 超剩余时间 超剩余时间 超剩余时间 超剩余时间 超剩余时间 超剩余时间 超</span>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<span>剩余时间 超时</span> <span class="obear-app-frame__white">剩余时间</span>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="20" :xs="24" class="obear-schedule-right"> <el-col :span="16" :xs="24" class="obear-schedule-right">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="6" :xs="24"> <el-col :span="6" :xs="24">
<span>负责人：</span> <span>负责人：</span>
...@@ -75,6 +76,8 @@ export default { ...@@ -75,6 +76,8 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$lightBlue: #20a0ff;
$lightRed: #dc3545;
.colRed { .colRed {
color: red; color: red;
border: 1px solid red; border: 1px solid red;
...@@ -130,8 +133,19 @@ export default { ...@@ -130,8 +133,19 @@ export default {
.el-row div:first-child, .el-row div:first-child a{ .el-row div:first-child, .el-row div:first-child a{
color: white; color: white;
} }
@include e('checkbox') {
display:block;
font-size: 12px;
background:white;
border-radius:2px;
color: $lightBlue;
padding: 0 2px 0 2px;
}
.el-checkbox {
margin-right: 10px;
}
span { span {
display: inline-block; // display: inline-block;
// padding-left: 5px; // padding-left: 5px;
} }
i { i {
...@@ -194,11 +208,11 @@ export default { ...@@ -194,11 +208,11 @@ export default {
} }
@include e('content') { @include e('content') {
display: inline-block; display: inline-block;
border: 1px solid #dc3545; border: 1px solid $lightRed;
border-radius:5px; border-radius:2px;
height:20px; // height:20px;
padding: 0 5px 0 5px; padding: 0 2px 0 2px;
color: #dc3545; color: $lightRed;
} }
} }
</style> </style>
src/routes/task.js
View file @ 41f3f0a5
import TaskHome from '../components/task_list/taskHome' import TaskHome from '../components/task_list/taskHome'
import GroupHome from '../components/task_group_list/groupHome'
const routes = [{ const routes = [{
path: '/taskHome', path: '/taskHome',
name: 'taskHome', name: 'taskHome',
component: TaskHome component: TaskHome
}, {
path: '/groupHome',
name: 'groupHome',
component: GroupHome
}] }]
export default routes export default routes
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