Commit 2a5b34f8 authored by 高宇's avatar 高宇

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

parent e04d1ca5
This diff is collapsed.
<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>
<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>
......@@ -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 () {
......@@ -190,7 +281,7 @@
}
</script>
<style scoped lang="scss">
<style scoped lang="scss">
@include c('schedule-right') {
> .el-row {
> .el-col {
......
......@@ -26,12 +26,16 @@
},
methods: {
saveProject () {},
close () {}
close () {
this.$emit('close')
},
init () {
this.$refs.operationProject.initAdd()
}
},
created () {
},
mounted () {
this.$refs.operationProject.initAdd()
}
}
</script>
......
......@@ -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>
......
......@@ -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 {
......
......@@ -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) {
......
......@@ -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
This diff is collapsed.
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