115 lines
3.2 KiB
Vue
115 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<a-button class="ml-10" type="primary" size="small" @click="show = true"
|
|
>选择联系人
|
|
</a-button>
|
|
<a-modal v-model:visible="show" width="780px" @before-ok="submit">
|
|
<div class="flex flex-center flex-justify-between">
|
|
<div class="flex flex-center flex-justify-start">
|
|
<a-input
|
|
placeholder="请输入联系人姓名搜索"
|
|
style="width: 280px"
|
|
size="small"
|
|
></a-input>
|
|
<a-button type="primary" class="ml-20" size="small"
|
|
>搜索
|
|
</a-button>
|
|
</div>
|
|
<edit-contacts :customer-id="customerId" @ok="fetchList" />
|
|
</div>
|
|
<a-table
|
|
class="mt-20"
|
|
:columns="columns"
|
|
:data="list"
|
|
@row-click="checked"
|
|
>
|
|
<template #name="{ record }">
|
|
<div>{{ record.name }} {{ record.phone }}</div>
|
|
</template>
|
|
<template #menu="{ record }">
|
|
<div>
|
|
<icon-check-circle-fill v-if="record.checked" />
|
|
<icon-check-circle v-else class="green" />
|
|
</div>
|
|
</template>
|
|
</a-table>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import editContacts from '@/views/base/customer/components/edit.vue-contacts.vue'
|
|
|
|
export default {
|
|
components: {
|
|
editContacts
|
|
},
|
|
props: {
|
|
customerId: {
|
|
required: true,
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
show: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.fetchList()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
page: {
|
|
page: 0,
|
|
size: 10,
|
|
total: 0
|
|
},
|
|
show: false,
|
|
list: [],
|
|
checkList: [],
|
|
columns: [
|
|
{
|
|
title: '姓名',
|
|
slotName: 'name'
|
|
},
|
|
{
|
|
title: '操作',
|
|
slotName: 'menu'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
checked(row) {
|
|
row.checked = !row.checked
|
|
if (row.checked) {
|
|
this.checkList.push(row)
|
|
} else {
|
|
this.checkList = this.checkList.filter(e => e.id !== row.id)
|
|
}
|
|
},
|
|
fetchList() {
|
|
const data = { customerId: this.customerId, ...this.page }
|
|
this.$api.contacts.page(data).then(res => {
|
|
if (res.code === 200) {
|
|
this.list = res.data.records.map(e => {
|
|
e.checked = false
|
|
return e
|
|
})
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
submit(done) {
|
|
this.$emit('ok', this.checkList)
|
|
done()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|