<template>
|
<div class='productWrap'>
|
<div class="handel-header">
|
<el-dialog title="添加产品" :visible.sync="showPopover" :modal-append-to-body="false" width="80%" top="4vh" class='productTitle'>
|
<crm-relative
|
v-if="showSelectView"
|
ref="crmrelative"
|
:isProduct="true"
|
:radio="false"
|
:show="showPopover"
|
:selected-data="selectedData"
|
crm-type="product"
|
@close="showPopover=false"
|
@changeVal="selectInfos"/>
|
</el-dialog>
|
<el-button
|
v-show='!isLcTbl'
|
slot="reference"
|
@click="showProduct">+ 添加产品</el-button>
|
<el-button
|
v-show='isLcTbl'
|
slot="reference"
|
@click="showProduct">+ 添加盗版产品</el-button>
|
<!--<el-popover
|
v-model="showPopover"
|
placement="bottom"
|
width="700"
|
style="padding: 0 !important;"
|
trigger="click">
|
<crm-relative
|
v-if="showSelectView"
|
ref="crmrelative"
|
:radio="false"
|
:show="showPopover"
|
:selected-data="selectedData"
|
crm-type="product"
|
@close="showPopover=false"
|
@changeVal="selectInfos"/>
|
<el-button
|
v-show='!isLC'
|
slot="reference"
|
@click="showSelectView=true">+ 添加产品</el-button>
|
</el-popover>
|
<el-popover
|
v-model="showSecondPopover"
|
placement="bottom"
|
width="200"
|
style="padding: 0 !important"
|
trigger="click">
|
<div style="height: 200px;">
|
<div class='el-scrollbar' style="height: 100%">
|
<div class='el-select-dropdown__wrap el-scrollbar__wrap' style="margin-bottom: -7px; margin-right: -7px;">
|
<ul class="el-scrollbar__view el-select-dropdown__list">
|
<li class='el-select-dropdown__item'
|
:class="item.value === proValue?'selected':''"
|
v-for="item in options"
|
:key="item.value"
|
@click="getItem(item.value)"
|
>{{item.label}}</li>
|
<flexbox class="popover-foot">
|
<el-button @click="hidenPopoverView" style='margin-right:16px;'>取 消</el-button>
|
<el-button
|
type="primary"
|
@click="setFakePro">确 定</el-button>
|
</flexbox>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<el-button
|
v-show='isLC'
|
slot="reference">+ 添加盗版产品</el-button>
|
v-if='isTableShow'
|
</el-popover>-->
|
</div>
|
<el-table
|
id="crm-table"
|
:data="productList"
|
:cell-style="cellStyle"
|
class="n-table--border"
|
border
|
highlight-current-row
|
style="width: 100%;">
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="'crm'+index"
|
:prop="item.field"
|
:label="item.name"
|
:formatter="fieldFormatter"
|
show-overflow-tooltip/>
|
<el-table-column/>
|
<el-table-column prop="Amount" label="使用数量" :key='1+index'>
|
<template slot-scope="scope">
|
<el-input size="small" type="number" min='0' v-show="scope.row.show" v-model="scope.row.Amount" placeholder="请输入内容" @keyup.enter.native="getEditData(scope.row)" @keyup.esc.native="cancelEdit(scope.row)"></el-input>
|
<span v-show="!scope.row.show">{{scope.row.Amount}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Department" label="使用部门" v-if="isLcTbl" :key='2+index'>
|
<template slot-scope="scope">
|
<el-input size="small" v-show="scope.row.show" v-model="scope.row.Department" placeholder="请输入使用部门" @keyup.enter.native="getEditData(scope.row)"></el-input>
|
<span v-show="!scope.row.show">{{scope.row.Department}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Comment" label="说明" v-if="isLcTbl" :key='3+index'>
|
<template slot-scope="scope">
|
<el-input size="small" v-show="scope.row.show" v-model="scope.row.Comment" placeholder="请输入说明" @keyup.enter.native="getEditData(scope.row)"></el-input>
|
<!--@blur="getEditData(scope.row)"-->
|
<span v-show="!scope.row.show">{{scope.row.Comment}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150">
|
<template slot-scope="scope">
|
<el-button type="text" 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" v-show="!scope.row.show" @click="removeItem(scope.$index)" style="margin-left:0">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<script type="text/javascript">
|
import objMixin from './objMixin'
|
import CrmRelative from '@/components/CreateCom/CrmRelative'
|
import Lockr from 'lockr'
|
export default {
|
name: 'XhProduct', // 关联产品
|
components: {
|
CrmRelative
|
},
|
mixins: [objMixin],
|
props: {
|
value: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
crmType: {
|
type: String,
|
default: ''
|
},
|
isLC: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data () {
|
return {
|
showPopover: false, // 展示产品框
|
showSelectView: false, // 内容
|
showSecondPopover: false,
|
productList: [],
|
totalPrice: 0,
|
discountRate: 0,
|
selectedData: { product: [] },
|
options: [{
|
value: 'ACAD',
|
label: 'ACAD'
|
}, {
|
value: 'AEC',
|
label: 'AEC'
|
}, {
|
value: 'AEC2',
|
label: 'AEC2'
|
}, {
|
value: 'AMA',
|
label: 'AMA'
|
}, {
|
value: 'AMA2',
|
label: 'AMA2'
|
}, {
|
value: 'CAM',
|
label: 'CAM'
|
}, {
|
value: 'CAM2',
|
label: 'CAM2'
|
}],
|
proValue: '',
|
isTableShow: false,
|
isLcTbl: false
|
}
|
},
|
computed: {
|
fieldList () {
|
if (this.isLcTbl) {
|
return [
|
{ name: '产品线', field: 'ProductLine', formType: 'text' }
|
]
|
} else {
|
return [
|
{ name: '产品类型', field: 'ProductType', formType: 'text' },
|
{ name: 'SKU值', field: 'SKU', formType: 'text' }
|
]
|
}
|
}
|
},
|
watch: {
|
productList: {
|
handler (newVal, oldVal) {
|
this.selectedData = { product: this.productList || [] }
|
return newVal
|
},
|
deep: true,
|
immediate: true
|
},
|
isLC: {
|
handler (newVal, oldVal) {
|
this.isLcTbl = newVal
|
return newVal
|
},
|
deep: true,
|
immediate: true
|
},
|
value () {
|
// this.productList = this.value
|
console.log(this.productList, this.value)
|
// this.selectInfos(this.value)
|
}
|
|
},
|
mounted () {
|
this.productList = Lockr.get('productList')
|
},
|
beforeDestroy () {
|
Lockr.set('productList', [])
|
},
|
methods: {
|
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
|
}
|
this.$emit('value-change', {
|
data: this.productList
|
? list
|
: [],
|
type: 'product'
|
})
|
},
|
getItem (data) {
|
this.proValue = data
|
},
|
showProduct () {
|
this.showPopover = true
|
this.showSelectView = true
|
},
|
hidenPopoverView () {
|
document.querySelector('#app').click()
|
this.showSecondPopover = false
|
this.proValue = ''
|
},
|
fieldFormatter (row, column) {
|
return row[column.property] || '--'
|
},
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
/** 选中 */
|
selectInfos (data, flag) {
|
if (flag !== undefined) {
|
this.isLcTbl = flag
|
}
|
if (data && data.length > 0) {
|
this.isTableShow = true
|
let newSelects = []
|
data.forEach(element => {
|
newSelects.push(this.getShowItem(element))
|
})
|
this.productList = newSelects
|
Lockr.set('productList', newSelects)
|
// 数据回填
|
let list = JSON.parse(JSON.stringify(this.productList))
|
for (let i in list) {
|
delete list[i].show
|
}
|
this.$emit('value-change', {
|
data: this.productList
|
? list
|
: [],
|
type: 'product'
|
})
|
} else {
|
this.isTableShow = false
|
}
|
},
|
getShowItem (data) {
|
const item = {}
|
if (!this.isLcTbl) {
|
item.ProductType = data.ProductType
|
item.SKU = data.SKU
|
item.Amount = data.Amount ? data.Amount : 1
|
item.show = false
|
} else {
|
item.Amount = data.Amount ? data.Amount : 1
|
item.ProductLine = data.ProductLine
|
item.Comment = data.Comment
|
item.Department = data.Department
|
item.show = false
|
}
|
return item
|
},
|
// 删除操作
|
removeItem (index) {
|
this.productList.splice(index, 1)
|
let list = JSON.parse(JSON.stringify(this.productList))
|
for (let i in list) {
|
delete list[i].show
|
}
|
this.$emit('value-change', {
|
data: this.productList
|
? list
|
: [],
|
type: 'product'
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import '../../views/clients/styles/table.scss';
|
.productWrap{
|
display: flex;
|
flex-direction: column;
|
}
|
.handel-header {
|
button {
|
width: 117px;
|
height: 36px;
|
border-radius: 4px;
|
border: 1px solid #4D88FF;
|
margin-bottom: 40px;
|
margin-left: 30px;
|
color: #4D88FF;
|
font-size: 14px;
|
}
|
}
|
// .handel-header /deep/ .el-button--default{
|
// padding: 0 20px;
|
// height: 36px;
|
// border-radius: 4px;
|
// border: 1px solid #4D88FF;
|
// font-size: 14px;
|
// font-weight: 400;
|
// color: #4D88FF;
|
// }
|
.el-table /deep/ thead th, thead td {
|
padding:3px 0px;
|
}
|
|
.handle-footer {
|
position: relative;
|
font-size: 12px;
|
padding: 5px;
|
.discount-title {
|
color: #666;
|
}
|
.total-info {
|
position: absolute;
|
right: 20px;
|
top: 5px;
|
.info-yellow {
|
color: #fd715a;
|
}
|
}
|
}
|
.el-scrollbar__wrap{
|
overflow-x:hidden;
|
}
|
.popover-foot{
|
position: relative;
|
width: 100%;
|
border-top: 1px solid #f1f1f1;
|
padding-top: 10px;
|
button{
|
height: 20px;
|
line-height: 1px;
|
text-align: center;
|
font-size: 12px;
|
margin-left: 22px;
|
}
|
}
|
.productTitle /deep/ .el-dialog__headerbtn .el-dialog__close{
|
font-size: 24px;
|
}
|
</style>
|
