<template>
|
<div
|
v-empty="nopermission"
|
class="rc-cont"
|
xs-empty-icon="nopermission"
|
xs-empty-text="暂无权限">
|
<flexbox
|
class="rc-head"
|
direction="row-reverse"/>
|
<el-table
|
:data="productList"
|
:height="tableHeight"
|
:header-cell-style="headerRowStyle"
|
:cell-style="cellStyle"
|
style="width: 100%;border: 1px solid #E6E6E6;"
|
@row-click="handleRowClick">
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.prop"
|
:label="item.label"
|
:formatter="fieldFormatter"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">{{ scope.column.label }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Amount" label="使用数量">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">使用数量</div>
|
</template>
|
<template slot-scope="scope">
|
<el-input size="small" type="number" min='0' @keyup.enter.native="getEditData(scope.row)" @keyup.esc.native="cancelEdit(scope.row)" v-show="scope.row.show" v-model="scope.row.Amount" placeholder="请输入内容"></el-input><!--v-focus-->
|
<span v-show="!scope.row.show">{{scope.row.Amount}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Department" label="使用部门" v-if="isLC">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">使用部门</div>
|
</template>
|
<template slot-scope="scope">
|
<el-input size="small" @keyup.enter.native="getEditData(scope.row)" @keyup.esc.native="cancelEdit(scope.row)" v-show="scope.row.show" v-model="scope.row.Department" placeholder="请输入使用部门"></el-input>
|
<span v-show="!scope.row.show">{{scope.row.Department}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Comment" label="说明" v-if="isLC">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">说明</div>
|
</template>
|
<template slot-scope="scope">
|
<el-input size="small" @keyup.enter.native="getEditData(scope.row)" @keyup.esc.native="cancelEdit(scope.row)" v-show="scope.row.show" v-model="scope.row.Comment" placeholder="请输入说明"></el-input>
|
<span v-show="!scope.row.show">{{scope.row.Comment}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" v-if="crmType !== 'businessChances'">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">操作</div>
|
</template>
|
<template slot-scope="scope">
|
<el-button type="text" :disabled="!list.IsCanEdit" v-show="!scope.row.show" @click="scope.row.show=true">编辑 |</el-button>
|
<el-button type="text" v-show="scope.row.show" @click="getEditData(scope.row)" style="margin-left:0">保存 |</el-button>
|
<el-button type="text" v-show="scope.row.show" @click="cancelEdit(scope.row)" style="margin-left:0">取消</el-button>
|
<el-button type="text" :disabled="!list.IsCanEdit" v-show="!scope.row.show" @click="removeItem(scope.row)" style="margin-left:0">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="p-contianer" v-show='total>0'>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size.sync="pageSize"
|
:total="total"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"/>
|
</div>
|
<!--<flexbox class="handle-footer" style="display: none;">
|
<div class="discount-title">整单折扣（%）：<span class="discount-title-value">{{ totalInfo.discountRate }}</span></div>
|
<div class="total-info">已选中产品：<span class="info-yellow">{{ productList.length }}</span> 种 总金额：<span class="info-yellow">{{ totalInfo.money }}</span> 元</div>
|
</flexbox>-->
|
<c-r-m-full-screen-detail
|
:visible.sync="showFullDetail"
|
:id="productId"
|
crm-type="product"/>
|
</div>
|
</template>
|
|
<script type="text/javascript">
|
import loading from '../mixins/loading'
|
// GetSalesChanceProductList
|
import { UpdateSalesChance, GetSalesChanceDetail, DeleteSalesChanceProduct } from '@/api/customermanagement/business'
|
// import { crmContractProduct } from '@/api/customermanagement/contract'
|
import { moneyFormat } from '@/utils'
|
|
export default {
|
name: 'RelativeProduct', // 相关产品 可能再很多地方展示 放到客户管理目录下
|
components: {
|
CRMFullScreenDetail: () => import('./CRMFullScreenDetail.vue')
|
},
|
mixins: [loading],
|
props: {
|
/** 模块ID */
|
id: [String, Number],
|
/** 联系人人下 新建商机 需要联系人里的客户信息 合同下需要客户和商机信息 */
|
detail: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
/** 是公海 默认是客户 */
|
isSeas: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data () {
|
return {
|
nopermission: false,
|
list: [],
|
productList: [],
|
fieldList: [],
|
tableHeight: '400px',
|
showFullDetail: false,
|
productId: '', // 查看全屏产品详情的 ID
|
totalInfo: { money: '0.00', discountRate: '0.00' },
|
total: 0,
|
currentPage: 1,
|
pageSize: 10,
|
pageSizes: [10, 30, 60, 100],
|
isLC: false
|
}
|
},
|
computed: {},
|
watch: {
|
id: function (val) {
|
this.list = []
|
this.getDetail()
|
}
|
},
|
mounted () {
|
this.getDetail()
|
},
|
activated: function () {},
|
deactivated: function () {},
|
methods: {
|
handleSizeChange (newSize) {
|
this.pageSize = newSize
|
this.getDetail()
|
},
|
handleCurrentChange (newPage) {
|
this.currentPage = newPage
|
this.getDetail()
|
},
|
getFieldList () {
|
this.fieldList = this.isLC ? [
|
{ label: '产品线', prop: 'ProductLine' }
|
] : [
|
{ label: '产品类型', prop: 'ProductType' },
|
{ label: 'SKU值', prop: 'SKU' }
|
]
|
// this.fieldList.push({
|
// prop: 'productName',
|
// width: '200',
|
// label: '产品名称'
|
// })
|
// this.fieldList.push({
|
// prop: 'categoryName',
|
// width: '200',
|
// label: '产品类别'
|
// })
|
// this.fieldList.push({ prop: 'unit', width: '200', label: '单位' })
|
// this.fieldList.push({ prop: 'price', width: '200', label: '标准价格' })
|
// this.fieldList.push({ prop: 'salesPrice', width: '200', label: '售价' })
|
// this.fieldList.push({ prop: 'num', width: '200', label: '数量' })
|
// this.fieldList.push({
|
// prop: 'discount',
|
// width: '200',
|
// label: '折扣（%）'
|
// })
|
// this.fieldList.push({ prop: 'subtotal', width: '200', label: '合计' })
|
},
|
getDetail () {
|
this.loading = true
|
const params = {}
|
params['Id'] = this.id
|
// params['PageSize'] = this.pageSize
|
// params['PageIndex'] = this.currentPage
|
this.getRequest()(params)
|
.then(res => {
|
this.nopermission = false
|
this.loading = false
|
this.list = res.data.Result || []
|
let data = []
|
if (this.list && this.list.ProjectProperty === 'LC协作') {
|
data = this.list.SalesChancePirates
|
this.isLC = true
|
} else {
|
data = this.list.Products
|
this.isLC = false
|
}
|
const newSelects = []
|
for (let i in data) {
|
newSelects.push(this.getShowItem(data[i]))
|
}
|
this.productList = newSelects
|
this.total = data.length
|
if (this.fieldList && this.fieldList.length === 0) {
|
this.getFieldList()
|
}
|
// this.total = res.data.Result.Count
|
// this.totalInfo.discountRate = res.data.discountRate
|
})
|
.catch(data => {
|
if (data.code === 102) {
|
this.nopermission = true
|
}
|
this.loading = false
|
})
|
},
|
getShowItem (data) {
|
const item = {}
|
if (!this.isLC) {
|
item.ProductType = data.ProductType
|
item.SKU = data.SKU
|
item.Amount = data.Amount
|
item.show = false
|
item.Id = data.Id
|
} else {
|
item.Amount = data.Amount
|
item.ProductLine = data.ProductLine
|
item.Comment = data.Comment
|
item.Department = data.Department
|
item.show = false
|
item.Id = data.Id
|
}
|
return item
|
},
|
getRequest () {
|
if (this.crmType === 'business' || this.crmType === 'businessChances') {
|
// return GetSalesChanceProductList
|
return GetSalesChanceDetail
|
}
|
// else if (this.crmType === 'contract') {
|
// return crmContractProduct
|
// }
|
},
|
cancelEdit (row) {
|
row.show = false
|
},
|
getEditData (row) {
|
row.show = false
|
let list = JSON.parse(JSON.stringify(this.productList))
|
for (let i in list) {
|
list[i].Amount = JSON.parse(this.productList[i].Amount)
|
delete list[i].show
|
delete list[i].Id
|
}
|
if (this.isLC) {
|
this.list['SalesChancePirates'] = list
|
} else {
|
this.list['Products'] = list
|
}
|
console.log(list)
|
this.updateData('update')
|
},
|
// 删除操作
|
removeItem (row) {
|
console.log(row)
|
// this.productList.splice(index, 1)
|
// let list = JSON.parse(JSON.stringify(this.productList))
|
// for (let i in list) {
|
// delete list[i].show
|
// }
|
// if (this.isLC) {
|
// this.list['SalesChancePirates'] = list
|
// } else {
|
// this.list['Products'] = list
|
// }
|
// this.updateData('delete')
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
DeleteSalesChanceProduct([{'Id': row.Id, 'PrdocutType': this.isLC ? 2 : 1}]).then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(res.data.Message)
|
this.getDetail()
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
},
|
updateData (sta) {
|
console.log(this.list, this.productList)
|
if (sta === 'update') {
|
for (let i in this.list) {
|
if (this.list[i] === '--') {
|
this.list[i] = ''
|
}
|
}
|
}
|
UpdateSalesChance(this.list)
|
.then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.getDetail()
|
this.$message.success(
|
sta === 'update' ? '编辑成功' : '删除成功'
|
)
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
this.loading = false
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
// 当某一行被点击时会触发该事件
|
handleRowClick (row, column, event) {
|
// this.productId = row.productId
|
// this.showFullDetail = true
|
},
|
/** 通过回调控制表头style */
|
headerRowStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
/**
|
* 格式化表格
|
*/
|
fieldFormatter (row, column) {
|
if (['price', 'subtotal', 'salesPrice'].includes(column.property)) {
|
return moneyFormat(row[column.property])
|
}
|
return row[column.property] || '--'
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import '../styles/relativecrm.scss';
|
|
.handle-footer {
|
position: relative;
|
font-size: 12px;
|
padding: 8px 5px;
|
.discount-title {
|
color: #666;
|
.discount-title-value {
|
color: #333;
|
}
|
}
|
.total-info {
|
position: absolute;
|
right: 20px;
|
top: 5px;
|
.info-yellow {
|
color: #fd715a;
|
}
|
}
|
}
|
</style>
|
