Commit debf18c1 authored by 高宇's avatar 高宇

完成工作日志列表;

parent e6a2a88e
......@@ -7,5 +7,24 @@ export default {
// 获取列表
getWorkLogList: {
url: '/vue/work-log/list'
},
// 删除日志
delWorkLog: {
url: '/vue/work-log/delete'
},
// 留言
getCommentList: {
url: '/vue/comment/list'
},
// 留言新建
saveNewComment: {
url: '/vue/comment/save-new'
},
// 留言删除
deleteComment: {
url: '/vue/comment/delete'
}
}
<template>
<transition name="move">
<section class="lm-content" v-show="is">
<div class="content">
<el-row>
<el-col :span="24">
<i class="fa fa-angle-double-right" @click.prevent="isClose"></i>
</el-col>
<el-col :span="24" class="lm-content-leaveMessage">
<span>留言</span>
</el-col>
</el-row>
<div class="page-body-content leaveMessage">
<div class="detailBox">
<div class="titleBox">
<div class="commentText">
<div class="date sub-text">
<el-row :gutter="20" v-for="(item, index) in lmTemplate" :key="index">
<el-col :span="6"><span>{{ item.name }}</span></el-col>
<el-col :span="18"><span>{{ model[item.value] ? model[item.value] : item.default }}</span></el-col>
</el-row>
</div>
<form class="form-inline form-comment" role="form">
<div class="input-group">
<input type="text" v-model="sendText" class="form-control form-control-sm comment-input" placeholder="">
<span class="input-group-btn">
<el-button size="mini" @click.prevent="send">发送</el-button>
</span>
</div>
</form>
</div>
</div>
<div class="actionBox">
<ul class="commentList">
<li v-for="item in result.list">
<div class="commenterImage">
<img />
</div>
<div class="commentText">
<div class="comment-title">
{{ item.created_by }} {{ item.created_at }}
<a href="#" class="addcomment" @click.prevent="showSecondText(item.id.toString())">
<i class="fa fa-fw fa-commenting-o pull-right"></i>
</a>
<a href="#" class="removecomment" @click.prevent="del(item.id)">
<i class="fa fa-fw fa-trash-o pull-right"></i>
</a>
</div>
<div class="date sub-text">
{{ item.description }}
<form class="form-inline form-comment" role="form" v-show="secondTextBool[item.id.toString()]">
<div class="input-group">
<input type="text" v-model="secondArrayText[item.id.toString()]" class="form-control form-control-sm comment-input" placeholder="">
<span class="input-group-btn">
<el-button size="mini" @click.prevent="recover(item.id)">回复</el-button>
</span>
</div>
</form>
</div>
<ul>
<li v-for="sItem in item.comments">
<div class="commenterImage">
<img />
</div>
<div class="commentText">
<div class="comment-title">
{{ sItem.created_by }} {{ sItem.created_at }}
<a href="#" class="removecomment" @click.prevent="del(sItem.id)">
<i class="fa fa-fw fa-trash-o pull-right"></i>
</a>
</div>
<div class="date sub-text">
{{ sItem.description }}
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
<Pagenation
class="pull-right clearfix"
:pager.sync="result.pagenation"
:total="result.pagenation.totalcount">
</Pagenation>
</div>
</div>
</div>
</div>
</section>
</transition>
</template>
<script>
import {
requestAPI,
api
} from '@/lib/commonMixin'
import { setModule } from '@/lib/viewHelper'
import Pagenation from './leaveMessagePagenation'
export default {
components: {
Pagenation
},
data () {
return {
is: false,
sendText: '',
secondTextBool: {},
secondArrayText: {},
model: {},
result: {
list: [],
pagenation: {
totalcount: 1,
thispage: 1,
pagesize: 10
}
}
}
},
props: {
lmTemplate: Array,
type: Number
},
mounted () {
},
methods: {
isClose () {
this.is = false
},
isShow (item) {
this.is = true
this.model = Object.assign({}, item)
if (this.is) {
this.init()
}
},
showSecondText (id) {
Object.keys(this.secondTextBool).forEach(item => {
this.secondTextBool[item] = false
})
this.secondTextBool[id] = true
},
send () {
if (this.sendText.trim() === '') {
this.$message.warning('请输入留言')
return
}
let params = {}
params.object_id = this.model.id
params.object_type = this.type
params.description = this.sendText
let _params = Object.assign({}, setModule(params, 'Comments'))
requestAPI(api.saveNewComment, {data: {..._params}})
.then((res) => {
this.sendText = ''
this.init()
})
},
recover (id) {
if (this.secondArrayText[id.toString()].trim() === '') {
this.$message.warning('请输入留言')
return
}
let params = {}
params.object_id = this.model.id
params.object_type = this.type
params.description = this.secondArrayText[id.toString()].trim()
params.parent = id
let _params = Object.assign({}, setModule(params, 'Comments'))
requestAPI(api.saveNewComment, {data: {..._params}})
.then((res) => {
this.secondTextBool = {}
this.secondArrayText = {}
this.init()
})
},
del (id) {
let params = { id }
requestAPI(api.deleteComment, {data: {...params}})
.then((res) => {
this.init()
})
},
init () {
let vm = this
let params = {
object_type: this.type,
object_id: this.model.id,
page: 1
}
requestAPI(api.getCommentList, {data: {...params}})
.then((res) => {
res.list.forEach(item => {
vm.$set(this.secondTextBool, item.id.toString(), false)
vm.$set(this.secondArrayText, item.id.toString(), '')
})
this.result = res
})
}
}
}
</script>
<style scoped lang="scss">
.pull-right {
float: right;
}
.page-body-content {
& .actionBox {
padding: 10px 0;
& .commentList {
padding: 0;
list-style: none;
li {
margin: 0;
margin-top: 10px;
list-style: none;
}
& .commenterImage {
width: 48px;
margin-right: 5px;
height: 100%;
float: left;
img {
width: 100%;
border-radius: 50%;
}
}
& .commentText {
padding: 0 0 10px;
margin-left: 60px;
& .comment-title {
color: #fff;
padding: 10px 10px 8px;
margin: 0;
background-color: #5a6277;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
font-size:12px;
}
& .addcomment {
color: white;
}
& .removecomment {
color: white;
}
& a {
.fa-fw {
color: white;
font-size:12px;
text-align: center;
}
}
& .sub-text {
background-color: #5a6277;
color: #fff;
font-size: 12px;
padding: 10px;
}
}
}
}
& .detailBox {
margin: 0;
min-height: 100%;
& .titleBox {
padding: 10px;
background: #4e5365;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
& .commentText {
padding: 0 0 10px;
& .sub-text {
& .el-row {
font-size: 12px;
.el-col:first-child {
text-align: right;
font-weight:700;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 3px;
}
.el-col:last-child {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 3px;
}
}
}
}
}
}
}
.lm-content {
position: fixed;
top: 100px;
right: 0;
bottom:0;
// height: 100%;
width: 60%;
background-color:#333744;
color: white;
font-size: 14px;
& .content {
width: 100%;
}
& i[class~=fa-angle-double-right] {
cursor:pointer;
font-size: 20px;
margin-top: 6px;
margin-left: 10px;
}
& .form-inline {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
& .input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
margin-top: 10px;
& .form-control {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
}
& .comment-input {
height: 28px;
}
}
}
}
.lm-content-leaveMessage {
text-align:center;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 14px;
}
.move-enter-active, .move-leave-active {
transition: all 0.5s ease;
/*transform: trandslate3d(0, 0, 0);*/
}
.move-enter, .move-leave {
transform: translate3d(100%, 0, 0);
}
</style>
<template>
<section>
<el-pagination v-if="total > 0" class="mb20 mt20"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.thispage"
:page-sizes="[2, 10, 20, 40, 60, 80, 100]"
:page-size="pager.pagesize"
layout="total, sizes, 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: 10,
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)
this.$parent.init()
},
handleCurrentChange (val) {
this.pager.page = val
this.pager.totalcount = this.total
this.$emit('update:pager', this.pager)
this.$parent.init()
}
}
}
</script>
<style scoped>
</style>
......@@ -22,6 +22,9 @@
</el-row>
</el-col>
<el-col :span="20" :xs="24" class="client-schedule-right">
<div class="draft" style="position: absolute;right:5%;top:5%;width:100px;" v-if="item.is_draft">
<img src="https://beta.jinchangxiao.com/img/img_draft.png" width="100%">
</div>
<el-row :gutter="10">
<el-col :span="6" :xs="24">
开始时间: {{item.start_at !== '' ? item.start_at : noneText}}
......@@ -34,11 +37,18 @@
</el-col>
<el-col :span="6" :xs="24">
签到:
<el-tooltip class="item" effect="dark" placement="top" v-if="Object.keys(item.location).length > 0">
<el-tooltip class="item"
effect="dark"
placement="top"
v-if="Object.keys(item.location).length > 0">
<i class="fa fa-fw fa-location-arrow"></i>
<template slot="content"><p>地址: {{item.location.address}}</p>
<p>距离: {{item.distance !== '' ? item.distance : noneText}}</p>
<p>时间: </p></template>
<template slot="content">
<div style="width: 150px; font-size: 12px; line-height: 18px;">
地址: {{item.location.address}}<br>
距离: {{item.distance !== '' ? item.distance : noneText}}<br>
时间: {{item.location.time !== '' ? item.location.time : noneText}}
</div>
</template>
</el-tooltip>
<span v-else>(未设置)</span>
</el-col>
......@@ -65,7 +75,7 @@
<el-row :gutter="10">
<el-col :span="12" :xs="24">
<span class="border border-danger text-danger rounded px-1">备注</span> :
{{item.description !== '' ? item.description : noneText}}
<span v-html="setBr(item)"></span>
</el-col>
<el-col :span="12" :xs="24">
<slot name="opearate">
......@@ -90,6 +100,13 @@
}
},
methods: {
setBr (item) {
if (item.description === '') {
return this.noneText
} else {
return item.description.replace(/\n/g, '<br />')
}
},
toView (item) {
let obj = {
name: 'viewClient',
......@@ -247,6 +264,7 @@
vertical-align: baseline;
display: inline;
padding: 2px 6px;
text-align: center;
}
span.badge-unread {
&:hover {
......@@ -277,3 +295,4 @@
}
}
</style>
<template>
<div>
</div>
</template>
<script>
export default {
name: '',
data () {
return {}
},
methods: {},
created () {
}
}
</script>
<style scoped>
</style>
<template>
<div>
</div>
</template>
<script>
export default {
name: '',
data () {
return {}
},
methods: {},
created () {
}
}
</script>
<style scoped>
</style>
......@@ -20,16 +20,28 @@
:key="key"
@update:image="imgs => {setImage(imgs)}">
<span slot="opearate">
<el-button class="pull-right" type="primary" size="mini" :disabled="!item.can_give_up"
@click="giveUp(item.id)">
<el-button class="pull-right"
type="primary"
size="mini"
:disabled="!item.can_delete"
@click="delLog(item.id)">
<i class="fa fa-trash-o faa-shake"></i> 删除
</el-button>
<el-button class="pull-right" type="primary" size="mini" :disabled="!item.can_update"
<el-button class="pull-right"
type="primary"
size="mini"
:disabled="!item.can_update"
@click="edit(item.id)">
<i class="fa fa-edit"></i> 编辑
</el-button>
<el-button class="pull-right" type="primary" size="mini" @click="addMessage(item.id)">
<span :class="['badge', {'badge-unread': item.unread > 0}]" v-if="item.commentCount">{{item.commentCount.comment}}</span>
<el-button class="pull-right"
type="primary"
size="mini"
@click.prevent.stop="leaveMessageSch(item)">
<span :class="['badge', {'badge-unread': item.unread > 0}]"
v-if="item.commentCount">
{{item.commentCount.comment}}
</span>
<i class="fa fa-commenting"></i> 留言
</el-button>
</span>
......@@ -51,6 +63,12 @@
<div class="images clearfix" style="display: none;">
<img v-for="(source, index) in images" :key="index" :src="source" class="image">
</div>
<leave-message
v-click-outside="lmClose"
ref="leaveMessage"
:lmTemplate="lmTemplate"
:type="2">
</leave-message>
</section>
</template>
......@@ -58,7 +76,9 @@
import ScheduleItem from '../common/scheduleItem'
import Pagenation from './schedulePagenation'
import clientHeader from '../common/clientHeader'
import LeaveMessage from '../common/leaveMessage'
import clientForm from './workLogListForm'
import clickOutside from '@/lib/bind'
import {
requestAPI,
api
......@@ -71,10 +91,53 @@
clientHeader,
clientForm,
ScheduleItem,
Pagenation
Pagenation,
LeaveMessage
},
directives: {
clickOutside
},
data () {
return {
lmTemplate: [
{
name: '客户名称',
value: 'client.name',
default: '未设置'
},
{
name: '内容',
value: 'description'
},
{
name: '待办时间',
value: 'schedule_week_display'
},
{
name: '状态',
value: 'schedule_status_display'
},
{
name: '开始时间',
value: 'start_at'
},
{
name: '结束时间',
value: 'end_at'
},
{
name: '重复',
value: 'repeatSchedule'
},
{
name: '负责人',
value: 'repeatSchedule'
},
{
name: '创建时间',
value: 'created_at'
}
],
options: {
toolbar: true,
url: 'data-source'
......@@ -95,6 +158,13 @@
}
},
methods: {
leaveMessageSch (item) {
this.$refs.leaveMessage.isShow(item)
},
lmClose () {
this.$refs.leaveMessage &&
this.$refs.leaveMessage.isClose()
},
setImage (imgs) {
this.images = imgs
const viewer = new Viewer(this.$el.querySelector('.images'), {
......@@ -107,12 +177,39 @@
viewer.update()
})
},
edit () {},
delLog (id) {
this.$confirm('确认删除吗?', '提示').then(() => {
requestAPI(api.delWorkLog, {
data: {
id
}
}).then(() => {
this.$message('删除成功!')
this.getList()
}, error => {
if (Array.isArray(error.msg)) {
error.msg.forEach(item => {
this.$notify.error({
title: '错误',
message: item.error
})
})
}
})
}).catch(_ => {
})
},
addNewUser () {
this.$refs.leaveModule.isShow('新建客户', 'clientAdd')
},
searchKeyword (search) {
this.updateForm(search)
},
updatePage (pager) {
Object.assign(this.pagenation, pager)
this.getList()
},
updateForm (form) {
console.log(form)
Object.assign(this.form, form)
......@@ -133,6 +230,7 @@
// this.pagenation.page = res.pagenation.thispage
this.totalcount = res.pagenation.totalcount
// this.totalcount = 8
this.$el.querySelector('.page-body-content').scrollTo(0, 0)
}).finally(_ => {
this.loading = false
})
......
<template>
<div>
</div>
</template>
<script>
export default {
name: '',
data () {
return {}
},
methods: {},
created () {
}
}
</script>
<style scoped>
</style>
export default {
bind: function (el, binding, vNode) {
el.__vueClickOutside__ = event => {
if (!el.contains(event.target)) {
// call method provided in v-click-outside value
vNode.context[binding.expression](event)
event.stopPropagation()
}
}
document.body.addEventListener('click', el.__vueClickOutside__)
},
unbind: function (el, binding, vNode) {
// Remove Event Listeners
document.removeEventListener('click', el.__vueClickOutside__)
el.__vueClickOutside__ = null
}
}
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