Skip to content

P
project
Commit 2a5b34f8 authored by 高宇's avatar 高宇
Browse files
Options

调整编辑删除为滑入层显示;

parent e04d1ca5
Show whitespace changes
Inline Side-by-side
Showing with 244 additions and 690 deletions
src/components/common/leaveMessage.vue deleted 100644 → 0
View file @ e04d1ca5
<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>
src/components/common/leaveMessagePagenation.vue deleted 100644 → 0
View file @ e04d1ca5
<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>
src/components/common/leaveModule.vue deleted 100644 → 0
View file @ e04d1ca5
<template>
<transition name="move" v-on:after-enter="afterEnter" :duration="{ enter: 500, leave: 0 }">
<section class="lm-content" v-show="is">
<el-row class="lm-header">
<el-col :span="2">
<i class="fa fa-angle-double-right" @click.prevent="isClose"></i>
</el-col>
<el-col :span="22" class="lm-content-leaveMessage">
<span>{{title}}</span>
</el-col>
</el-row>
<div class="page-body-content leaveMessage">
<el-row>
<el-col :span="24">
<component :is="pageName" :ref="pageName" @update:close="isClose"></component>
</el-col>
</el-row>
</div>
</section>
</transition>
</template>
<script>
import {clientObj} from './viewHelper'
export default {
name: '',
data () {
return {
is: false,
pageName: '',
title: '',
propData: {}
}
},
components: {
...clientObj
},
methods: {
isClose () {
this.$el.querySelector('.page-body-content').scrollTop = 0
this.is = false
},
isShow (title, pageName, data) {
this.is = true
this.title = title
this.pageName = pageName
this.propData = data
},
afterEnter () {
this.$refs[this.pageName].init(this.propData)
}
},
created () {
}
}
</script>
<style scoped lang="scss">
.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%;
padding-bottom: 30px;
width: 60%;
background-color: #333744;
color: white;
font-size: 14px;
z-index: 1;
.lm-header{
border-bottom: 1px solid #fff;
height: 32px;
}
.lm-content-leaveMessage{
/*line-height: 32px;*/
& > span {
vertical-align: middle;
display: inline-block;
border-left: 2px solid #fff;
padding: 0 0 0 8px;
margin-top: 6px;
}
}
& .content {
width: 100%;
}
& i[class~=fa-angle-double-right] {
cursor: pointer;
font-size: 20px;
margin: 5px 10px 6px;
}
& .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;
}
}
}
}
.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>
src/components/project/list.vue
View file @ 2a5b34f8
......@@ -69,18 +69,28 @@
:pager.sync="pagenation"
:total="totalcount">
</Pagenation>
<leave-message
v-click-outside="lmClose"
ref="leaveMessage"
:lmTemplate="lmTemplate"
:type="1">
</leave-message>
</div>
</div>
<side-popup ref="sidePopup" :title="operationTitle">
<component :is="operationPage" :ref="operationPage" @close="close"></component>
</side-popup>
</section>
</template>
`
<script>
import ScheduleItem from '../common/scheduleItem'
import Pagenation from './schedulePagenation'
import clientHeader from '../common/clientHeader'
import LeaveMessage from '../common/leaveMessage'
import clientForm from './projectListForm'
import clickOutside from '@/lib/bind'
import addProject from './operation/addProject'
import editProject from './operation/editProject'
import {
requestAPI,
api
......@@ -93,13 +103,73 @@
clientForm,
ScheduleItem,
Pagenation,
LeaveMessage
addProject,
editProject
},
directives: {
clickOutside
},
data () {
return {
lmTemplate: [
{
name: '客户名称',
value: 'client.name',
default: ''
},
{
name: '项目名称',
value: 'project_title'
},
{
name: '商机金额',
value: 'budget',
prepend: '￥'
},
{
name: '利润率',
value: 'profit_pct',
append: '%'
},
{
name: '销售预测',
value: 'salesForecast.name'
},
{
name: '商机类型',
value: 'projectTags'
},
{
name: '销售阶段',
value: 'projectProgress.name'
},
{
name: '采购方式',
value: 'purchaseType.name'
},
{
name: '商机来源',
value: 'opportunityFrom.name'
},
{
name: '售前支持',
value: 'projectArchitects'
},
{
name: '商机内容',
value: 'description'
},
{
name: '客户经理',
value: 'createdBy.name'
},
{
name: '创建时间',
value: 'created_at'
}
],
operationPage: '',
operationTitle: '',
result: {
list: []
},
......@@ -116,6 +186,14 @@
}
},
methods: {
leaveMessageSch (item) {
this.$refs.leaveMessage.btnShow(item)
},
lmClose () {
this.$refs.leaveMessage &&
this.$refs.leaveMessage.btnClose()
},
delProject (id) {
this.$confirm('确认删除吗?', '提示').then(() => {
requestAPI(api.delProject, {
......@@ -139,10 +217,20 @@
})
},
addNewProject () {
this.$router.push({name: 'addProject'})
// this.$router.push({name: 'addProject'})
this.operationPage = 'addProject'
this.operationTitle = '新建商机'
this.$nextTick(() => {
this.$refs.sidePopup.show(this.$refs[this.operationPage].init())
})
},
editProject (row) {
this.$router.push({name: 'editProject', params: {id: row.id}})
this.operationPage = 'editProject'
this.operationTitle = '编辑商机'
// this.$router.push({name: 'editProject', params: {id: row.id}})
this.$nextTick(() => {
this.$refs.sidePopup.show(this.$refs[this.operationPage].init(row.id))
})
},
searchKeyword (search) {
this.updateForm(search)
......@@ -179,6 +267,9 @@
requestAPI(api.getFilter).then(res => {
this.filter = res
})
},
close () {
this.$refs.sidePopup.close()
}
},
created () {
......
src/components/project/operation/addProject.vue
View file @ 2a5b34f8
......@@ -26,12 +26,16 @@
},
methods: {
saveProject () {},
close () {}
close () {
this.$emit('close')
},
init () {
this.$refs.operationProject.initAdd()
}
},
created () {
},
mounted () {
this.$refs.operationProject.initAdd()
}
}
</script>
......
src/components/project/operation/editProject.vue
View file @ 2a5b34f8
......@@ -26,12 +26,17 @@
},
methods: {
saveProject () {},
close () {}
close () {
this.$emit('close')
},
init (id, clientId) {
this.$refs.operationProject.initEdit(id, clientId)
}
},
created () {
},
mounted () {
this.$refs.operationProject.initEdit()
// this.$refs.operationProject.initEdit()
}
}
</script>
......
src/components/project/operation/operationProject.vue
View file @ 2a5b34f8
......@@ -335,11 +335,11 @@
}
},
initAdd () {
if (this.$route.params.clientId) {
this.Projects.client_id = this.$route.params.clientId
if (this.$route.params.id) {
this.Projects.client_id = this.$route.params.id
requestAPI(api.getClient, {
data: {
id: this.$route.params.clientId
id: this.$route.params.id
}
}).then(res => {
this.searchText = res.model.name
......@@ -352,10 +352,11 @@
})
this.setMultipleData()
},
initEdit () {
initEdit (id) {
requestAPI(api.getProjectEdit, {
data: {
id: this.$route.params.id
// id: this.$route.params.id
id
}
}).then(res => {
Object.keys(res.options).forEach(item => {
......@@ -422,10 +423,6 @@
</script>
<style lang="scss">
.project-add-edit-form {
height: 400px;
overflow-y: auto;
}
.auto-template-form {
.el-form-item {
......
src/components/project/projectOfClient/projectOfClient.vue
View file @ 2a5b34f8
......@@ -60,8 +60,17 @@
:pager.sync="pagenation"
:total="totalcount">
</Pagenation>
<leave-message
v-click-outside="lmClose"
ref="leaveMessage"
:lmTemplate="lmTemplate"
:type="1">
</leave-message>
</div>
</div>
<side-popup ref="sidePopup" :title="operationTitle">
<component :is="operationPage" :ref="operationPage" @close="close"></component>
</side-popup>
</section>
</template>
......@@ -73,11 +82,75 @@
import ScheduleItem from '../../common/scheduleItem'
import clientHeader from '../../common/clientHeader'
import Pagenation from '../schedulePagenation'
import clickOutside from '@/lib/bind'
import addProject from '../operation/addProject'
import editProject from '../operation/editProject'
export default {
name: '',
directives: {
clickOutside
},
data () {
return {
lmTemplate: [
{
name: '客户名称',
value: 'client.name',
default: ''
},
{
name: '项目名称',
value: 'project_title'
},
{
name: '商机金额',
value: 'budget',
prepend: '￥'
},
{
name: '利润率',
value: 'profit_pct',
append: '%'
},
{
name: '销售预测',
value: 'salesForecast.name'
},
{
name: '商机类型',
value: 'projectTags'
},
{
name: '销售阶段',
value: 'projectProgress.name'
},
{
name: '采购方式',
value: 'purchaseType.name'
},
{
name: '商机来源',
value: 'opportunityFrom.name'
},
{
name: '售前支持',
value: 'projectArchitects'
},
{
name: '商机内容',
value: 'description'
},
{
name: '客户经理',
value: 'createdBy.name'
},
{
name: '创建时间',
value: 'created_at'
}
],
operationPage: '',
operationTitle: '',
client_id: '',
loading: false,
clientName: '',
......@@ -98,9 +171,19 @@
components: {
ScheduleItem,
clientHeader,
Pagenation
Pagenation,
addProject,
editProject
},
methods: {
leaveMessageSch (item) {
this.$refs.leaveMessage.btnShow(item)
},
lmClose () {
this.$refs.leaveMessage &&
this.$refs.leaveMessage.btnClose()
},
delProject (id) {
this.$confirm('确认删除吗?', '提示').then(() => {
requestAPI(api.delProject, {
......@@ -124,10 +207,24 @@
})
},
addProject () {
this.$router.push({name: 'addProjectClient', params: {clientId: this.$route.params.id}})
// this.$router.push({name: 'addProjectClient', params: {clientId: this.$route.params.id}})
this.operationPage = 'addProject'
this.operationTitle = '新建商机'
this.$nextTick(() => {
this.$refs.sidePopup.show(this.$refs[this.operationPage].init(this.$route.params.id))
})
},
editProject (row) {
this.$router.push({name: 'editProjectClient', params: {id: row.id, clientId: row.client_id}})
// this.$router.push({name: 'editProjectClient', params: {id: row.id, clientId: row.client_id}})
this.operationPage = 'editProject'
this.operationTitle = '编辑商机'
// this.$router.push({name: 'editProject', params: {id: row.id}})
this.$nextTick(() => {
this.$refs.sidePopup.show(this.$refs[this.operationPage].init(row.id, row.client_id))
})
},
close () {
this.$refs.sidePopup.close()
},
getList () {
if (this.loading) {
......
static/vupVueSdk.css
View file @ 2a5b34f8
......@@ -16424,4 +16424,21 @@ table {
.ec-icon-uncollapse:before {
content: '\F139'; }
.portal-content {
position: fixed;
top: 100px;
right: 0;
bottom: 0;
width: 60%;
background-color: #333744;
color: white;
font-size: 14px; }
.portal-content .content {
width: 100%; }
.portal-content i[class~=fa-angle-double-right] {
cursor: pointer;
font-size: 20px;
margin-top: 6px;
margin-left: 10px; }
/*# sourceMappingURL=vupVueSdk.css.map*/
\ No newline at end of file
static/vupVueSdk.js
View file @ 2a5b34f8
This source diff could not be displayed because it is too large. You can view the blob instead.
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