|
|
|
@ -370,13 +370,14 @@
|
|
|
|
|
<vxe-toolbar>
|
|
|
|
|
<template #buttons>
|
|
|
|
|
<vxe-button status="success" icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
|
|
|
|
|
<vxe-button status="danger" icon="vxe-icon-delete" @click="$refs.xTable.removeCheckboxRow()">
|
|
|
|
|
<vxe-button status="danger" icon="vxe-icon-delete" @click="removeLine">
|
|
|
|
|
删除选中
|
|
|
|
|
</vxe-button>
|
|
|
|
|
<vxe-button status="primary" icon="vxe-icon-save" @click="saveEvent">保存</vxe-button>
|
|
|
|
|
</template>
|
|
|
|
|
</vxe-toolbar>
|
|
|
|
|
<vxe-table
|
|
|
|
|
|
|
|
|
|
<!-- <vxe-table
|
|
|
|
|
border
|
|
|
|
|
show-overflow
|
|
|
|
|
keep-source
|
|
|
|
@ -435,7 +436,20 @@
|
|
|
|
|
</vxe-select>
|
|
|
|
|
</template>
|
|
|
|
|
</vxe-column>
|
|
|
|
|
</vxe-table>
|
|
|
|
|
</vxe-table> -->
|
|
|
|
|
|
|
|
|
|
<ve-table
|
|
|
|
|
borderY
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:table-data="tableData"
|
|
|
|
|
:cell-autofill-option="cellAutofillOption"
|
|
|
|
|
:editOption="editOption"
|
|
|
|
|
rowKeyFieldName="rowKey"
|
|
|
|
|
:rowStyleOption="rowStyleOption"
|
|
|
|
|
:checkbox-option="checkboxOption"
|
|
|
|
|
:clipboard-option="clipboardOption"
|
|
|
|
|
/>
|
|
|
|
|
<div class="table-no-data" v-if="tableData.length == 0">暂无数据</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="customerType === 'add'">
|
|
|
|
@ -523,11 +537,54 @@ export default {
|
|
|
|
|
hideSelectAll: false,
|
|
|
|
|
// 行选择改变事件
|
|
|
|
|
selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
|
|
|
|
|
console.log('行选择', row, isSelected, selectedRowKeys)
|
|
|
|
|
this.selectArr = selectedRowKeys
|
|
|
|
|
},
|
|
|
|
|
// 全选改变事件
|
|
|
|
|
selectedAllChange: ({ isSelected, selectedRowKeys }) => {
|
|
|
|
|
console.log('全选', isSelected, selectedRowKeys)
|
|
|
|
|
if (isSelected) {
|
|
|
|
|
this.selectArr = selectedRowKeys
|
|
|
|
|
} else {
|
|
|
|
|
this.selectArr = []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 单元格复制
|
|
|
|
|
clipboardOption: {
|
|
|
|
|
copy: true,
|
|
|
|
|
paste: true,
|
|
|
|
|
cut: true,
|
|
|
|
|
delete: true,
|
|
|
|
|
beforeCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
|
|
|
|
|
console.log('beforeCopy')
|
|
|
|
|
this.log({ data, selectionRangeIndexes, selectionRangeKeys })
|
|
|
|
|
},
|
|
|
|
|
afterCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
|
|
|
|
|
console.log('afterCopy')
|
|
|
|
|
this.log({ data, selectionRangeIndexes, selectionRangeKeys })
|
|
|
|
|
},
|
|
|
|
|
beforePaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
|
|
|
|
|
console.log('beforePaste')
|
|
|
|
|
this.log({ data, selectionRangeIndexes, selectionRangeKeys })
|
|
|
|
|
},
|
|
|
|
|
afterPaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
|
|
|
|
|
console.log('afterPaste')
|
|
|
|
|
this.log({ data, selectionRangeIndexes, selectionRangeKeys })
|
|
|
|
|
},
|
|
|
|
|
beforeCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
|
|
|
|
|
console.log('beforeCut')
|
|
|
|
|
this.log({ data, selectionRangeIndexes, selectionRangeKeys })
|
|
|
|
|
},
|
|
|
|
|
afterCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
|
|
|
|
|
console.log('afterCut')
|
|
|
|
|
this.log({ data, selectionRangeIndexes, selectionRangeKeys })
|
|
|
|
|
},
|
|
|
|
|
beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
|
|
|
|
|
console.log('beforeDelete')
|
|
|
|
|
this.log({ data, selectionRangeIndexes, selectionRangeKeys })
|
|
|
|
|
},
|
|
|
|
|
afterDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
|
|
|
|
|
console.log('afterDelete')
|
|
|
|
|
this.log({ data, selectionRangeIndexes, selectionRangeKeys })
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
columns: [
|
|
|
|
@ -540,61 +597,38 @@ export default {
|
|
|
|
|
operationColumn: true,
|
|
|
|
|
align: 'center'
|
|
|
|
|
},
|
|
|
|
|
{ field: 'col1', key: 'col1', title: '联系人', edit: true },
|
|
|
|
|
{ field: 'col2', key: 'col2', title: '邮箱', edit: true },
|
|
|
|
|
{ field: 'col3', key: 'col3', title: '电话', edit: true },
|
|
|
|
|
{ field: 'col4', key: 'col4', title: '备注', edit: true },
|
|
|
|
|
{
|
|
|
|
|
field: 'col5',
|
|
|
|
|
key: 'col5',
|
|
|
|
|
title: 'BC',
|
|
|
|
|
width: '7%',
|
|
|
|
|
renderBodyCell: ({ row, column, rowIndex }, h) => {
|
|
|
|
|
return (
|
|
|
|
|
<a-checkbox
|
|
|
|
|
value={row['BC']}
|
|
|
|
|
on-change={val => {
|
|
|
|
|
console.log(val)
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
field: 'col6',
|
|
|
|
|
key: 'col6',
|
|
|
|
|
title: '提单',
|
|
|
|
|
width: '7%',
|
|
|
|
|
{ field: 'name', key: 'name', title: '联系人', edit: true },
|
|
|
|
|
{ field: 'email', key: 'email', title: '邮箱', edit: true },
|
|
|
|
|
{ field: 'tel', key: 'tel', title: '电话', edit: true },
|
|
|
|
|
{ field: 'remark', key: 'remark', title: '备注', edit: true },
|
|
|
|
|
{ field: 'roleCode',
|
|
|
|
|
key: 'roleCode',
|
|
|
|
|
title: '角色',
|
|
|
|
|
edit: false,
|
|
|
|
|
width: 260,
|
|
|
|
|
renderBodyCell: ({ row, column, rowIndex }, h) => {
|
|
|
|
|
return (
|
|
|
|
|
<a-checkbox
|
|
|
|
|
value={row['col6']}
|
|
|
|
|
on-change={val => {
|
|
|
|
|
console.log(val)
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
field: 'col7',
|
|
|
|
|
key: 'col7',
|
|
|
|
|
title: '账单',
|
|
|
|
|
width: '7%',
|
|
|
|
|
renderBodyCell: ({ row, column, rowIndex }, h) => {
|
|
|
|
|
return (
|
|
|
|
|
<a-checkbox
|
|
|
|
|
value={row['col7']}
|
|
|
|
|
<a-select
|
|
|
|
|
mode="multiple"
|
|
|
|
|
value={row['roleCode']}
|
|
|
|
|
option-filter-prop="children"
|
|
|
|
|
style="width: 240px"
|
|
|
|
|
placeholder="请选择角色"
|
|
|
|
|
on-change={val => {
|
|
|
|
|
console.log(val)
|
|
|
|
|
console.log(val, row['roleCode'])
|
|
|
|
|
row['roleCode'] = val
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
>
|
|
|
|
|
{this.ContactType.map((item, index) => {
|
|
|
|
|
return <a-select-option value={item.name}>{item.name}</a-select-option>
|
|
|
|
|
})}
|
|
|
|
|
</a-select>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} }
|
|
|
|
|
],
|
|
|
|
|
tableData: [],
|
|
|
|
|
etdWeek: '',
|
|
|
|
|
selectArr: [],
|
|
|
|
|
// 选择客户 / 关系人弹窗 - end
|
|
|
|
|
customerContactsData: [],
|
|
|
|
|
ContactType: [],
|
|
|
|
@ -803,15 +837,23 @@ export default {
|
|
|
|
|
|
|
|
|
|
// ---------- 新增 ----------
|
|
|
|
|
async insertEvent(row) {
|
|
|
|
|
const $table = this.$refs.xTable
|
|
|
|
|
const record = {}
|
|
|
|
|
const { row: newRow } = await $table.insertAt(record, row)
|
|
|
|
|
await $table.setActiveCell(newRow, 'name')
|
|
|
|
|
// const $table = this.$refs.xTable
|
|
|
|
|
// const record = {}
|
|
|
|
|
// const { row: newRow } = await $table.insertAt(record, row)
|
|
|
|
|
// await $table.setActiveCell(newRow, 'name')
|
|
|
|
|
const data = {
|
|
|
|
|
email: '',
|
|
|
|
|
name: '',
|
|
|
|
|
remark: '',
|
|
|
|
|
roleCode: [],
|
|
|
|
|
tel: '',
|
|
|
|
|
rowKey: this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
|
|
|
|
|
}
|
|
|
|
|
this.tableData.push(data)
|
|
|
|
|
},
|
|
|
|
|
// ---------- 保存 ----------
|
|
|
|
|
saveEvent() {
|
|
|
|
|
const $table = this.$refs.xTable
|
|
|
|
|
const { fullData } = $table.getTableData()
|
|
|
|
|
const fullData = this.tableData
|
|
|
|
|
fullData.forEach(item => {
|
|
|
|
|
item.WroleCode = ''
|
|
|
|
|
item.bookingId = this.$route.query.id
|
|
|
|
@ -829,10 +871,11 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
let data = JSON.parse(JSON.stringify(fullData))
|
|
|
|
|
const data = JSON.parse(JSON.stringify(fullData))
|
|
|
|
|
data.forEach(item => {
|
|
|
|
|
// if (item.WroleCode) {
|
|
|
|
|
item.roleCode = item.WroleCode
|
|
|
|
|
delete item.rowKey
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
BookingOrderContactSavebatch(this.$route.query.id, data).then(res => {
|
|
|
|
@ -860,7 +903,7 @@ export default {
|
|
|
|
|
this.etdWeek = this.getWeek(this.details.etd)
|
|
|
|
|
}
|
|
|
|
|
this.ContactType = this.$options.filters['dictData']('booking_contact_type')
|
|
|
|
|
// console.log(this.ContactType, 'this.ContactType')
|
|
|
|
|
console.log(this.ContactType, 'this.ContactType')
|
|
|
|
|
},
|
|
|
|
|
// 客户 - start
|
|
|
|
|
getDjyCustomerpage(name = '', type, key) {
|
|
|
|
@ -1121,6 +1164,9 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
item.roleCode = WroleCode
|
|
|
|
|
})
|
|
|
|
|
res.data.rows.map((item, index) => {
|
|
|
|
|
item.rowKey = index
|
|
|
|
|
})
|
|
|
|
|
this.tableData = res.data.rows
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
@ -1135,6 +1181,15 @@ export default {
|
|
|
|
|
this.customerType = ''
|
|
|
|
|
this.customerVisible = false
|
|
|
|
|
},
|
|
|
|
|
removeLine() {
|
|
|
|
|
this.selectArr.map((item, index) => {
|
|
|
|
|
this.tableData.map((oitem, oindex) => {
|
|
|
|
|
if (item === oitem.rowKey) {
|
|
|
|
|
this.tableData.splice(oindex, 1)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 关系人弹窗 - end
|
|
|
|
|
changeEtd(date, dateString) {
|
|
|
|
|
this.details.etd = dateString
|
|
|
|
@ -1243,6 +1298,9 @@ export default {
|
|
|
|
|
.list-item2:hover {
|
|
|
|
|
background-color: #f5f7fa;
|
|
|
|
|
}
|
|
|
|
|
.table-no-data {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .ant-calendar-picker-input{
|
|
|
|
|
// padding: 0 4px;
|
|
|
|
|