<script setup>
|
import {ref} from 'vue'
|
import {getQuotationRecordList} from "@/api/salesManagement/salesQuotationRecord.js";
|
|
const props = defineProps({
|
showModal: {
|
type: Boolean,
|
required: true
|
},
|
quotationId: {
|
type: Number,
|
required: true
|
}
|
})
|
|
const emit = defineEmits(['update:showModal'])
|
|
const dialogVisible = computed({
|
get: () => props.showModal,
|
set: (val) => emit('update:showModal', val)
|
})
|
|
const leftTableData = ref([])
|
const rightTableData = ref([])
|
const selectedLeftRow = ref(null)
|
|
const handleRowClick = (row) => {
|
selectedLeftRow.value = row
|
rightTableData.value = row.products || []
|
}
|
|
const tableRowClassName = ({row}) => {
|
return selectedLeftRow.value === row ? 'selected-row' : ''
|
}
|
|
const fetchData = () => {
|
getQuotationRecordList({quotationRecordId: props.quotationId}).then(res => {
|
const data = res.data.records || []
|
data.forEach(item => {
|
leftTableData.value.push(JSON.parse(item?.info || '{}'))
|
})
|
})
|
}
|
|
const leftColumns = [
|
{prop: 'customer', label: '客户名称', minWidth: '120'},
|
{prop: 'salesperson', label: '业务员', minWidth: '120'},
|
{prop: 'quotationDate', label: '报价日期', minWidth: '120'},
|
{prop: 'validDate', label: '有效期至', minWidth: '120'},
|
{prop: 'paymentMethod', label: '支付方式', minWidth: '120'},
|
{prop: 'remark', label: '备注', minWidth: '120'}
|
]
|
|
const rightColumns = [
|
{prop: 'product', label: '产品名称', minWidth: '120'},
|
{prop: 'specification', label: '型号', minWidth: '120'},
|
{prop: 'unit', label: '单位', minWidth: '100'},
|
{prop: 'unitPrice', label: '单价', minWidth: '100'}
|
]
|
|
onMounted(() => {
|
fetchData()
|
})
|
|
</script>
|
|
<template>
|
<el-dialog v-model="dialogVisible" title="详情" width="1000px" :close-on-click-modal="false">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<div class="table-title">报价单记录</div>
|
<el-table :data="leftTableData" border height="400" stripe highlight-current-row
|
@row-click="handleRowClick" :row-class-name="tableRowClassName">
|
<el-table-column v-for="col in leftColumns" :key="col.prop" :prop="col.prop" :label="col.label"
|
:min-width="col.minWidth" show-overflow-tooltip/>
|
</el-table>
|
</el-col>
|
<el-col :span="12">
|
<div class="table-title">报价单产品</div>
|
<el-table :data="rightTableData" border height="400" stripe>
|
<el-table-column v-for="col in rightColumns" :key="col.prop" :prop="col.prop" :label="col.label"
|
:min-width="col.minWidth" show-overflow-tooltip/>
|
</el-table>
|
</el-col>
|
</el-row>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<style scoped>
|
.table-title {
|
font-size: 15px;
|
font-weight: bold;
|
margin-bottom: 10px;
|
color: #303133;
|
}
|
|
:deep(.selected-row) {
|
background-color: #ecf5ff !important;
|
}
|
</style>
|
