<!-- 产品客群清单列表 -->
|
<template>
|
<div class="customers_main">
|
<el-row v-if="!isView"
|
class="add-button">
|
<el-col :span="24">
|
<el-button type="primary"
|
size="small"
|
icon="el-icon-circle-plus-outline"
|
@click="handleAddCus"
|
class="add_btn">
|
新增客群
|
</el-button>
|
</el-col>
|
</el-row>
|
<EditTable v-if="!isView"
|
ref="cusForm"
|
:isAutoIndex="true"
|
:rules="rules"
|
:tableData="tableData"
|
:columns="columns"
|
:noHistory="noHistory"
|
:pageInfo="editPageInfo"
|
operateLabel="操作"
|
@handleCurrentChange="handleEditCurrentChange"
|
@handleSizeChange="handleEditSizeChange"
|
@handleOperateClick="handleOperateClick" />
|
<ProTable v-if="isView"
|
:pageInfo="pageInfo"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
:isAutoIndex="true"
|
:noHistory="noHistory"
|
:list="tableData"
|
:header="tableHeader"
|
:loading="loading" />
|
<el-dialog title="提示"
|
:visible.sync="dialogTipVisible"
|
width="450"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
center
|
custom-class="tip_dialog">
|
<div style="text-align: center;">当前有数据未保存，是否放弃保存？</div>
|
<span slot="footer"
|
class="dialog-footer">
|
<el-button @click="dialogTipVisible = false">否</el-button>
|
<el-button type="primary"
|
@click="tipCancelSave">是</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {
|
CUSTOMERSCOLUMNS,
|
CUSTOMERSRULES,
|
VIEWCUSTOMERSCOLUMNS
|
} from '../../utils/customersColumnsConfig.js'
|
import {
|
qryCondition,
|
addOrUpdateCustomerBase,
|
delCustomerBase,
|
qryCustomerBaseList
|
} from '../../api/productManage.api.js'
|
import EditTable from '../../components/EditTable'
|
import ProTable from '../../components/ProTable.vue'
|
const ADDITEMS = {
|
customersNo: '',
|
customersName: '',
|
isdelete: '0',
|
isdeleteValue: '生效',
|
isEidt: true,
|
serialno: '',
|
operate: [
|
{ label: '保存', type: 'SAVE', isShow: true },
|
{ label: '修改', type: 'EDIT', isShow: false },
|
{ label: '删除', type: 'DELETE', isShow: true }
|
]
|
}
|
export default {
|
props: {
|
edit: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
isView: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
noHistory: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
}
|
},
|
watch: {
|
edit: {
|
handler (val) {
|
if (val) {
|
this.getCustomerBaseList()
|
}
|
},
|
deep: true
|
}
|
},
|
created () {
|
this.getCondition()
|
},
|
mounted () {
|
this.initColumns()
|
if (this.isView || this.edit) {
|
this.getCustomerBaseList()
|
}
|
},
|
methods: {
|
// 处理变更标志显示
|
initColumns () {
|
const { objecttype } = this.$parent._data
|
const { columns, tableHeader, noHistory } = this
|
const isModify = objecttype === 'jbo.app.BUSINESS_TYPE_CHANGE'
|
const newColumns =
|
isModify && !noHistory
|
? columns
|
: columns.filter(col => col.prop !== 'changeflag')
|
const newTableHeader =
|
isModify && !noHistory
|
? tableHeader
|
: tableHeader.filter(col => col.prop !== 'changeflag')
|
this.$set(this, 'columns', newColumns)
|
this.$set(this, 'tableHeader', newTableHeader)
|
},
|
/**
|
* 获取下拉选择项
|
*/
|
async getCondition () {
|
const params = { conditionName: 'IsDelete' }
|
const res = await qryCondition(params)
|
if (res.code !== '00') {
|
return false
|
}
|
const { columns } = this
|
const newColumns = [...columns]
|
newColumns.forEach(item => {
|
if (item.name === 'isdelete') {
|
item.options = res.result
|
}
|
})
|
this.$set(this, 'selOptions', res.result)
|
this.$set(this, 'columns', newColumns)
|
},
|
// 清空table数据
|
restTable () {
|
this.tableData = []
|
},
|
async getCustomerBaseList (edit) {
|
const { productid, serialno } = this.$parent._data
|
const { currentPage, pageSize } = this.pageInfo
|
this.loading = true
|
const params = {
|
currentPage: edit ? this.editPageInfo.currentPage : currentPage,
|
objectno: serialno,
|
pageSize: edit ? this.editPageInfo.pageSize : pageSize,
|
productid
|
}
|
const listRes = await qryCustomerBaseList(params)
|
this.loading = false
|
if (!listRes || listRes.code !== '00') {
|
return false
|
}
|
// let = listRes.result && listRes.result.records
|
// if (this.edit) {
|
// }
|
const newList =
|
listRes.result &&
|
listRes.result.records.map(item => {
|
const newItem = { ...item }
|
newItem.isdeleteValue = newItem.isdelete === '1' ? '失效' : '生效'
|
newItem.operate = [
|
{ label: '保存', type: 'SAVE', isShow: false },
|
{ label: '修改', type: 'EDIT', isShow: true },
|
{ label: '删除', type: 'DELETE', isShow: true }
|
]
|
return newItem
|
})
|
// console.log('newList==========',newList);
|
this.$set(this.pageInfo, 'total', listRes.result && listRes.result.total)
|
this.$set(
|
this.editPageInfo,
|
'total',
|
listRes.result && listRes.result.total
|
)
|
this.$set(this, 'tableData', newList)
|
},
|
tipCancelSave () {
|
this.dialogTipVisible = false
|
this.getCustomerBaseList()
|
},
|
async initProduct () {
|
if (!this.$parent.serialno) {
|
await this.$parent.handleSave('init', 'customer')
|
if (!this.$parent.typeno) {
|
return false
|
}
|
return false
|
}
|
return true
|
},
|
async handleAddCus () {
|
const isInit = await this.initProduct()
|
if (!isInit) {
|
return false
|
}
|
const { tableData, $set } = this
|
if (tableData.length > 0 && tableData.some(da => da.isEidt)) {
|
this.$message.error('您还有未保存的客群清单，请先保存')
|
return false
|
}
|
let newList = [{ ...ADDITEMS }, ...tableData]
|
const newColumns = [...this.columns]
|
newColumns.forEach(item => {
|
if (item.name === 'isdelete') {
|
item.options = this.selOptions.filter(ob => ob.value === '0')
|
}
|
})
|
if (newList.length > 10) {
|
newList = newList.slice(0, 10)
|
}
|
$set(this.editPageInfo, 'total', this.editPageInfo.total + 1)
|
$set(this, 'columns', newColumns)
|
$set(this, 'tableData', newList)
|
},
|
// 修改翻页条数
|
handleSizeChange (val) {
|
this.pageInfo.pageSize = val
|
this.getCustomerBaseList()
|
},
|
|
// 修改翻页数
|
handleCurrentChange (val) {
|
this.pageInfo.currentPage = val
|
this.getCustomerBaseList()
|
},
|
// 修改编辑表格翻页条数
|
handleEditSizeChange (val) {
|
this.editPageInfo.pageSize = val
|
this.getCustomerBaseList('edit')
|
},
|
|
// 修改编辑表格翻页数
|
handleEditCurrentChange (val) {
|
this.editPageInfo.currentPage = val
|
this.getCustomerBaseList('edit')
|
},
|
async handleOperateClick (type, data, index) {
|
const { tableData, $set } = this
|
if (type === 'SAVE') {
|
const { customerscode, customersname, serialno, isdelete } = data
|
const { typeno, objecttype } = this.$parent
|
const params = {
|
customerscode,
|
customersname,
|
isdelete,
|
objectno: this.$parent.serialno,
|
objecttype,
|
productid: typeno,
|
serialno
|
}
|
if (!customerscode) {
|
const refCusForm = this.$refs.cusForm
|
refCusForm.$refs['form'].validate((valid) => {
|
if (!valid) {
|
this.$message.warning('请输入客群编码！')
|
}
|
})
|
return false
|
}
|
if (!customersname) {
|
const refCusForm = this.$refs.cusForm
|
refCusForm.$refs['form'].validate((valid) => {
|
if (!valid) {
|
this.$message.warning('请输入客群名称！')
|
}
|
})
|
return false
|
}
|
const saveRes = await addOrUpdateCustomerBase(params)
|
if (saveRes.code !== '00') {
|
return
|
}
|
this.$message({
|
showClose: true,
|
message: '保存成功',
|
type: 'success'
|
})
|
const newData = [...this.tableData]
|
const newDataItem = newData.filter((item, i) => i === index)[0]
|
newDataItem.serialno = saveRes.result.serialno
|
newDataItem.isEidt = false
|
newDataItem.isdeleteValue =
|
newDataItem.isdelete === '1' ? '失效' : '生效'
|
newDataItem.operate = !this.isView
|
? [
|
{ label: '保存', type: 'SAVE', isShow: false },
|
{ label: '修改', type: 'EDIT', isShow: true },
|
{ label: '删除', type: 'DELETE', isShow: true }
|
]
|
: []
|
newData[index] = newDataItem
|
this.$set(this.editPageInfo, 'total', newData.length)
|
await this.getCustomerBaseList()
|
$set(this, 'tableData', [...newData])
|
}
|
if (type === 'EDIT') {
|
const newData = [...tableData]
|
const newDataItem = newData.filter((item, i) => i === index)[0]
|
newDataItem.isEidt = true
|
newDataItem.isdeleteValue =
|
newDataItem.isdelete === '1' ? '失效' : '生效'
|
newDataItem.operate = [
|
{ label: '保存', type: 'SAVE', isShow: true },
|
{ label: '修改', type: 'EDIT', isShow: false },
|
{ label: '取消', type: 'CANCEL', isShow: true }
|
]
|
newData[index] = newDataItem
|
const newColumns = [...this.columns]
|
newColumns.forEach(item => {
|
if (item.name === 'isdelete') {
|
item.options = this.selOptions
|
}
|
})
|
$set(this, 'columns', newColumns)
|
$set(this, 'tableData', [...newData])
|
}
|
if (type === 'CANCEL') {
|
this.dialogTipVisible = true
|
}
|
if (type === 'DELETE') {
|
const newData = tableData.filter((item, i) => i !== index)
|
const { isEidt, serialno } = data
|
if (!isEidt) {
|
const params = {
|
serialno
|
}
|
const delRes = await delCustomerBase(params)
|
if (delRes.code !== '00') {
|
return
|
}
|
this.$message({
|
showClose: true,
|
message: '删除成功',
|
type: 'success'
|
})
|
}
|
this.getCustomerBaseList()
|
$set(this, 'tableData', [...newData])
|
}
|
}
|
},
|
components: {
|
EditTable,
|
ProTable
|
},
|
data () {
|
return {
|
columns: [...CUSTOMERSCOLUMNS],
|
tableData: [],
|
loading: true,
|
rules: { ...CUSTOMERSRULES },
|
dialogTipVisible: false,
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
editPageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
selOptions: [],
|
isEidt: this.edit,
|
tableHeader: [...VIEWCUSTOMERSCOLUMNS]
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.customers_main {
|
background: #fff;
|
padding: 10px 20px 20px 20px;
|
& >>> .tip_dialog {
|
width: 450px;
|
& .el-dialog__body {
|
& .form_main {
|
& .el-form {
|
& .el-form-item {
|
& .el-form-item__label {
|
line-height: 32px;
|
}
|
}
|
}
|
}
|
}
|
& .el-dialog__footer {
|
& .dialog-footer {
|
& .el-button--default {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
& .el-button--primary {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
background: #0081f0;
|
border-color: #0081f0;
|
border-radius: 4px;
|
margin-left: 40px;
|
}
|
}
|
}
|
}
|
& .add-button {
|
padding: 20px 0 30px 0;
|
}
|
&.add_btn {
|
height: 34px;
|
}
|
}
|
</style>
|
