You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

778 lines
26 KiB

<script>
import {getSiteAndBuByUserName} from "../../../api/qc/qc";
import {queryQuoteDetailById, queryQuoteDetailReport, updateQuoteDetail} from "../../../api/quote/quoteDetail";
import {getItemListByInquiryPartAndCodeNo} from "../../../api/inquiry/inquiryDetail";
import BreakdownCost from "./detail/breakdownCost.vue";
import BuSelect from "../../../components/selector/select/BuSelect.vue";
import {queryPropertyTemplate} from "../../../api/property/template";
import {queryPropertyTemplateDetailAvailableList} from "../../../api/property/templateDetail";
import {againQuote} from "../../../api/quote/quote";
import QuoteDetailTool from "./detail/primary/quoteDetailTool.vue";
import QuoteDetailBom from "./detail/primary/quoteDetailBom.vue";
import QuoteDetailOther from "./detail/primary/quoteDetailOther.vue";
import QuoteDetailCost from "./detail/primary/quoteDetailCost.vue";
import QuoteDetailRouting from "./detail/primary/quoteDetailRouting.vue";
import TpCost from "./detail/tpCost.vue";
import {getTableDefaultListLanguage, getTableUserListLanguage, updateColumnSize} from "../../../api/table";
export default {
name: "quoteDetailReport",
components: {
TpCost,
QuoteDetailRouting,
QuoteDetailCost,
QuoteDetailOther,
QuoteDetailBom,
QuoteDetailTool,
BuSelect,
BreakdownCost
},
props: {
height: {
type: [String, Number],
default: "38vh"
}
},
data() {
return {
queryForm: {
buId: '',
customerNo: '',
customerDesc: '',
partNo: '',
partDesc: '',
quoteVersionNo: '',
},
no: 1,
size: 20,
total: 0,
dataList: [],
queryLoading: false,
userBuList: [],
columns: [
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1BuDesc',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'buDesc',
headerAlign: 'center',
align: 'center',
columnLabel: 'BU',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 80
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1QuoteVersionNo',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'quoteVersionNo',
headerAlign: 'center',
align: 'center',
columnLabel: '报价单',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 140
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1CustomerNo',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'customerNo',
headerAlign: 'center',
align: 'center',
columnLabel: '客户编码',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 80
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1CustomerDesc',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'customerDesc',
headerAlign: 'center',
align: 'center',
columnLabel: '客户名称',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 140
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1QuoteDate',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'quoteDate',
headerAlign: 'center',
align: 'center',
columnLabel: '报价日期',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 120
}, {
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1CustomerInquiryNo',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'customerInquiryNo',
headerAlign: 'center',
align: 'center',
columnLabel: '客户询价单号',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 100
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1PartNo',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'partNo',
headerAlign: 'center',
align: 'center',
columnLabel: '物料编码',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 100
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1PartDesc',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'partDesc',
headerAlign: 'center',
align: 'center',
columnLabel: '物料描述',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 240
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1Status',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'status',
headerAlign: 'center',
align: 'center',
columnLabel: '状态',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 80
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1CreateDate',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'createDate',
headerAlign: 'center',
align: 'center',
columnLabel: '创建日期',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 130
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1CreateBy',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'createBy',
headerAlign: 'center',
align: 'center',
columnLabel: '创建人',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 100
},
{
userId: this.$store.state.user.name,
functionId: 5013,
serialNumber: '5011Table1Site',
tableId: '5013Table1',
tableName: '报价信息表',
columnProp: 'site',
headerAlign: 'center',
align: 'center',
columnLabel: '工厂编码',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 80
},
],
currentRow: {},
activeName: 'detail',
inquiryDataList: [],
queryPropertyLoading: false,
propertyVisible: false,
propertyList: [],
currentProperty: {
id: undefined,
codeNo: '',
codeDesc: '',
},
propertyItemList: [],
count: 0,
}
},
methods: {
// 动态列开始 获取 用户保存的 格式列
async getTableUserColumn(tableId, columnId) {
let queryTableUser = {
userId: this.$store.state.user.name,
functionId: this.$route.meta.menuId,
tableId: tableId,
status: true,
languageCode: this.$i18n.locale
}
await getTableUserListLanguage(queryTableUser).then(({data}) => {
if (data.rows.length > 0) {
switch (columnId) {
case 1:
this.columns = data.rows
break;
}
} else {
this.getColumnList(tableId, columnId)
}
})
},
// 获取 tableDefault 列
async getColumnList (tableId, columnId) {
let queryTable= {
functionId: this.$route.meta.menuId,
tableId: tableId,
languageCode: this.$i18n.locale
}
await getTableDefaultListLanguage(queryTable).then(({data}) => {
if (!data.rows.length === 0) {
switch (columnId) {
case 1:
this.columns = data.rows
break;
}
}
})
},
handleColumnResize(newWidth, oldWidth, column, event){
let inData= this.columnList.filter(item => item.columnProp === column.property)[0]
inData.columnWidth=newWidth
updateColumnSize(inData).then(({data}) => {
if (data.code === 0) {
console.log("栏位宽度保存成功!")
}
})
},
getSiteAndBuByUserName() {
let tempData = {
username: this.$store.state.user.name,
}
getSiteAndBuByUserName(tempData).then(({data}) => {
if (data.code === 0) {
this.userBuList = data.rows
}
})
},
handleQuery() {
let list = [];
if (this.propertyItemList.length > 0) {
list = this.propertyItemList.filter(item => item.textValue || item.numValue);
}
let params = {
...this.queryForm,
no: this.no,
size: this.size,
codeId: this.currentProperty.id,
list,
}
this.queryLoading = true
queryQuoteDetailReport(params).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.rows
this.total = data.total
if (this.total === 0) {
this.currentRow = {}
} else if (this.currentRow.id !== undefined) {
// this.currentRow = {}
} else {
this.currentRow = this.dataList[0]
}
} else {
this.$message.warning(data.msg)
}
this.queryLoading = false
}).catch((error) => {
this.$message.error(error)
this.queryLoading = false
})
},
handleRowClick(row) {
this.currentRow = {...row}
},
rowStyle({row}) {
if (this.currentRow && this.currentRow.id === row.id) {
return {'background-color': '#E8F7F6'};
} else {
return {}
}
},
handleSizeChange(val) {
this.size = val
this.handleQuery()
},
handlePageChange(val) {
this.no = val
this.handleQuery()
},
handleQueryInquiryProperties() {
if (this.currentRow.id === undefined) {
this.inquiryDataList = []
return
}
let params = {
inquiryPartId: this.currentRow.rfqDetailId,
buNo: this.currentRow.buNo,
site: this.currentRow.site,
recordType: 'PRICECHECK',
}
this.queryPropertyLoading = true
getItemListByInquiryPartAndCodeNo(params).then(({data}) => {
if (data && data.code === 0) {
this.inquiryDataList = data.rows
} else {
this.$message.warning(data.msg)
}
this.queryPropertyLoading = false
}).catch((error) => {
this.$message.error(error)
this.queryPropertyLoading = false
})
},
handleClickProperty() {
if (!this.queryForm.buId) {
this.$message.warning('请先选择BU')
return
}
// this.handleQueryProperty();
this.propertyVisible = true;
},
handleQueryProperty() {
let params = {
buId: this.queryForm.buId,
createBy: this.$store.state.user.name,
functionType: 'IP'
}
queryPropertyTemplate(params).then(({data}) => {
if (data && data.code === 0) {
this.propertyList = data.rows
if (this.propertyList.length > 0) {
this.currentProperty.id = this.propertyList[0].id
this.currentProperty.codeNo = this.propertyList[0].codeNo
}
} else {
this.$message.warning(data.msg)
}
}).catch((error) => {
this.$message.error(error)
})
},
handleQueryPropertyTemplateDetailAvailableList() {
let params = {
headerId: this.currentProperty.id,
}
this.propertyItemList = []
queryPropertyTemplateDetailAvailableList(params).then(({data}) => {
if (data && data.code === 0) {
this.propertyItemList = data.rows
} else {
this.$message.warning(data.msg)
}
}).catch((error) => {
this.$message.error(error)
})
},
},
created() {
this.getSiteAndBuByUserName();
this.getTableUserColumn(this.$route.meta.menuId+'table1',1)
},
activated() {
if (this.$route.params.type && this.$route.params.type === 'quote'){
this.queryForm.quoteVersionNo = this.$route.params.quoteVersionNo;
this.count++
this.handleQuery();
}
if (this.count === 0){
this.handleQuery();
}
},
watch: {
currentRow(newVal, oldVal) {
if (newVal) {
this.handleQueryInquiryProperties()
}
},
'queryForm.buId'(newVal, oldVal) {
this.currentProperty.id = undefined
this.currentProperty.codeNo = ''
this.propertyItemList = []
if (newVal) {
this.handleQueryProperty();
}
},
'currentProperty.id'(newVal, oldVal) {
if (newVal) {
this.handleQueryPropertyTemplateDetailAvailableList();
}
}
}
}
</script>
<template>
<div>
<div style="width: 1200px">
<el-form :model="queryForm" label-position="top">
<el-row :gutter="10">
<el-col :span="3">
<el-form-item label="BU">
<bu-select v-model="queryForm.buId">
<el-option label="全部" value=""></el-option>
</bu-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="报价单号">
<el-input v-model="queryForm.quoteVersionNo"></el-input>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="客户编码">
<el-input v-model="queryForm.customerNo"></el-input>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="客户名称">
<el-input v-model="queryForm.customerDesc"></el-input>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="产品编码">
<el-input v-model="queryForm.partNo"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="产品描述">
<el-input v-model="queryForm.partDesc"></el-input>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label=" ">
<el-button type="primary" @click="handleClickProperty">属性</el-button>
<el-button type="primary" @click="handleQuery">查询</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="queryLoading" :data="dataList" border :height="height" :row-style="rowStyle"
@row-click="handleRowClick">
<el-table-column
v-for="(item,index) in columns" :key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:header-align="item.headerAlign"
:show-overflow-tooltip="item.showOverflowTooltip"
:align="item.align"
:fixed="item.fixed===''?false:item.fixed"
:min-width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
style="width: 100px; height: 80px"/></span>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page="no"
:page-sizes="[20, 50, 100, 200, 500]"
:page-size="size"
:total="total"
layout="total,sizes, prev, pager, next, jumper">
</el-pagination>
<el-tabs v-model="activeName">
<el-tab-pane label="详情" name="detail">
<el-form :model="currentRow" label-position="top" style="width: 1000px">
<el-row :gutter="10">
<el-col :span="4">
<el-form-item label="报价单号">
<el-input v-model="currentRow.quoteVersionNo" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="BU">
<el-input v-model="currentRow.buDesc" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="工厂编码">
<el-input v-model="currentRow.site" readonly></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="4">
<el-form-item label="客户编码">
<el-input v-model="currentRow.customerNo" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="客户名称">
<el-input v-model="currentRow.customerDesc" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="状态">
<el-input v-model="currentRow.status" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="报价备注" class="auto" :show-message="false">
<el-input type="textarea" v-model="currentRow.quoteRemark" resize="none" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="报价详情备注" class="auto" :show-message="false">
<el-input type="textarea" v-model="currentRow.remark" resize="none" readonly></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="4">
<el-form-item label="创建人">
<el-input v-model="currentRow.createBy" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建日期">
<el-input v-model="currentRow.createDate" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="最近更新人">
<el-input v-model="currentRow.updateBy" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="最近更新日期">
<el-input v-model="currentRow.updateDate" readonly></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane name="inquiry" label="询价单信息">
<el-form :model="currentRow" label-position="top" style="width: 1000px">
<el-row :gutter="10">
<el-col :span="5">
<el-form-item label="询价单号">
<el-input v-model="currentRow.internalInquiryNo" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="询价日期">
<el-input v-model="currentRow.requestDate" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="PJM">
<el-input v-model="currentRow.requesterName" readonly></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="5">
<el-form-item label="客户询价单号">
<el-input v-model="currentRow.customerInquiryNo" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="要求报价日期">
<el-input v-model="currentRow.requiredCompletionDate" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="优先等级">
<el-input v-model="currentRow.priorityLevel" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="状态">
<el-input v-model="currentRow.rfqStatus" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="备注" class="auto" :show-message="false">
<el-input type="textarea" v-model="currentRow.rfqRemark" resize="none" readonly></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane name="property" label="询价单属性">
<el-table :data="inquiryDataList" v-loading="queryPropertyLoading" height="36vh" border>
<el-table-column label="属性编码" header-align="center" min-width="100" prop="itemNo"></el-table-column>
<el-table-column label="属性名称" header-align="center" min-width="160" prop="itemDesc"></el-table-column>
<el-table-column label="属性类型" header-align="center" min-width="80" prop="valueType"></el-table-column>
<el-table-column label="属性值" header-align="center" min-width="100">
<template slot-scope="scope">
<span v-if="scope.row.valueType === '文本'">{{ scope.row.textValue }}</span>
<span v-if="scope.row.valueType === '数字'">{{ scope.row.numValue }}</span>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane name="breakdown" label="Cost Breakdown">
<breakdown-cost :quote-detail="currentRow" height="36vh"></breakdown-cost>
</el-tab-pane>
<el-tab-pane name="tp" label="TP">
<tp-cost :quote-detail="currentRow" height="36vh"></tp-cost>
</el-tab-pane>
</el-tabs>
<el-dialog title="属性详情" v-drag :visible.sync="propertyVisible" :close-on-click-modal="false" append-to-body
width="800px">
<el-form :model="currentProperty" label-position="top">
<el-row :gutter="10">
<el-col :span="4">
<el-form-item label="BU">
<bu-select v-model="queryForm.buId" disabled></bu-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="属性模板">
<el-select v-model="currentProperty.id" style="width: 100%;">
<el-option v-for="item in propertyList" :key="item.id" :label="item.codeDesc" :value="item.id">
<div style="float:left;">{{ item.codeDesc }}</div>
<div style="float:right;">{{ item.codeNo }}</div>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table :data="propertyItemList" border height="300px">
<el-table-column label="属性编码" header-align="center" min-width="120" prop="itemNo"></el-table-column>
<el-table-column label="属性名称" header-align="center" min-width="180" prop="itemDesc"></el-table-column>
<el-table-column label="属性类型" header-align="center" align="center" min-width="80" prop="valueType"></el-table-column>
<el-table-column label="属性值" header-align="center" min-width="140" prop="value">
<template slot-scope="scope">
<template v-if="scope.row.valueTypeDb==='T' && scope.row.valueChooseFlag==='Y'">
<el-select v-model="scope.row['textValue']" placeholder="请选择" style="width: 100%" clearable>
<el-option :label="available.availableValue" :value="available.availableValue" :key="available.id"
v-for="(available) in scope.row.availableList"></el-option>
</el-select>
</template>
<template v-else-if="scope.row.valueTypeDb==='N' && scope.row.valueChooseFlag==='Y'">
<el-select v-model="scope.row['numValue']" placeholder="请选择" style="width: 100%" clearable>
<el-option :label="available.availableValue" :value="available.availableValue" :key="available.id"
v-for="(available) in scope.row.availableList"></el-option>
</el-select>
</template>
<template v-else-if="scope.row.valueTypeDb==='T'">
<el-input v-model="scope.row['textValue']"></el-input>
</template>
<template v-else-if="scope.row.valueTypeDb==='N'">
<el-input-number style="width: 100%" :controls="false" :step="0"
v-model="scope.row['numValue']"></el-input-number>
</template>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="propertyVisible = false">确 定</el-button>
<el-button @click="propertyVisible = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<style scoped>
.auto /deep/ .el-form-item__content {
height: auto;
line-height: 1.5;
}
</style>