|
|
<template> <div> <el-form label-position="top" :inline="true" :model="searchData" @keyup.enter.native="getDataList"> <div> <el-form-item label="申请批次号"> <el-input v-model="searchData.quotationBatchNo" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="客户编码"> <el-input v-model="searchData.customerNo" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="客户名称"> <el-input v-model="searchData.customerDesc" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="跟单员" v-if="defaultFlag"> <el-input v-model="searchData.trackerName" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="物料编码"> <el-input v-model="searchData.testPartNo" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="物料名称"> <el-input v-model="searchData.partName" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="要求完成日期" v-if="defaultFlag"> <el-date-picker value-format="yyyy-MM-dd" style="width: 120px" v-model="searchData.startDate" type="date" placeholder=" "> </el-date-picker> </el-form-item> <el-form-item label=" " v-if="defaultFlag"> <div style="text-align: center;"><i class="el-icon-right"></i></div> </el-form-item> <el-form-item label=" " v-if="defaultFlag"> <el-date-picker value-format="yyyy-MM-dd" style="width: 120px" v-model="searchData.endDate" type="date" placeholder=" "> </el-date-picker> </el-form-item> </div> <el-form-item label="批次序号" v-if="defaultFlag"> <el-input v-model="searchData.quotationItemNo" style="width: 120px" clearable ></el-input> </el-form-item> <el-form-item label="项目编码"> <el-input v-model="searchData.projectId" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="项目名称"> <el-input v-model="searchData.projectName" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="报价专员"> <el-input v-model="searchData.quoterName" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="IFS物料编码"> <el-input v-model="searchData.finalPartNo" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="客户物料编码"> <el-input v-model="searchData.customerPartNo" style="width: 120px" clearable></el-input> </el-form-item> <el-form-item label="优先等级" v-if="defaultFlag"> <el-select v-model="searchData.priorityLevel" style="width: 120px"> <el-option label="全部" value=""></el-option> <el-option label="紧急" value="紧急"></el-option> <el-option label="一般" value="一般"></el-option> <el-option label="不紧急" value="不紧急"></el-option> </el-select> </el-form-item><!-- <el-form-item :label="'状态'">--><!-- <el-select v-model="searchData.quotationResultStatus" style="width: 120px">--><!-- <el-option label="全部" value=""></el-option>--><!-- <el-option label="已下达" value="C"></el-option>--><!-- <el-option label="已完成报价" value="E"></el-option>--><!-- <el-option label="已提交报价" value="S"></el-option>--><!-- <el-option label="客户已反馈" value="R"></el-option>--><!-- </el-select>--><!-- </el-form-item>--> <el-form-item :label="'状态'"> <el-select v-model="searchData.quotationStatus" style="width: 120px"> <el-option label="全部" value=""></el-option> <el-option label="草稿" value="草稿"></el-option> <el-option label="审批中" value="审批中"></el-option> <el-option label="已完成" value="已完成"></el-option> </el-select> </el-form-item> <el-form-item label=" "> <el-button type="primary" @click="getDataList">查 询</el-button> <el-button type="primary" @click="handleQuote" v-if="defaultFlag">报 价</el-button> </el-form-item> </el-form>
<!-- 报价列表 --> <el-table :height="defaultFlag?'76vh':300" :data="dataList" border v-loading="dataListLoading" row-key='quotationNo' @row-click="quotationClickRow" @selection-change="selectionQuotation" ref="quotationTable" style="width: 100%;"> <el-table-column type="selection" header-align="center" reserve-selection align="center" width="50"> </el-table-column> <el-table-column header-align="center" align="center" label="状态" prop="quotationStatus" width="80"><!-- <template slot-scope="scope">--><!-- <span v-show="scope.row.quotationResultStatus === 'C'">已下达</span>--><!-- <span v-show="scope.row.quotationResultStatus === 'E'">已完成报价</span>--><!-- <span v-show="scope.row.quotationResultStatus === 'S'">已提交报价</span>--><!-- <span v-show="scope.row.quotationResultStatus === 'R'">客户已反馈</span>--><!-- </template>--> </el-table-column> <template v-for="(item,index) in columnList"> <el-table-column :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> </template> </el-table>
<selectDiv ref="selectDiv"></selectDiv>
<!-- 分页插件 --> <el-pagination style="margin-top: 0px" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20,50, 100, 200, 500]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
<el-dialog :visible.sync="quoteVisible" title="待报价信息" :close-on-click-modal="false" append-to-body width="1000px"> <el-table :data="quotationSelections" border height="300"> <el-table-column label="状态" header-align="center" align="center" prop="quotationStatus" min-width="80"/> <el-table-column label="申请单号" header-align="center" align="center" prop="quotationNo" min-width="120"/> <el-table-column label="项目编码" header-align="center" align="left" prop="projectId" min-width="100"/> <el-table-column label="项目名称" header-align="center" align="left" prop="projectName" min-width="120"/> <el-table-column label="物料编码" header-align="center" align="left" prop="testPartNo" min-width="200"/> <el-table-column label="物料名称" header-align="center" align="left" prop="partName" min-width="220"/> <el-table-column label="MOQ" header-align="center" align="right" prop="qty" min-width="80"> <template slot-scope="scope"> <el-input-number v-model="scope.row.qty" :controls="false" :min="0" :step="0"></el-input-number> </template> </el-table-column> </el-table>
<el-footer style="height: 30px;line-height:30px;text-align: center"> <el-button :loading="saveBatchQuotationLoading" type="primary" @click="batchQuotation">确定</el-button> <el-button type="primary" @click="quoteVisible=false">取消</el-button> </el-footer> </el-dialog> </div></template>
<script>import { quotationInformationSearch, // 询价信息列表查询
} from '@/api/quotation/quotationInformation.js'import {batchSaveQuote} from "../../../api/quote/quote";export default { name:"toBeQuoted", props:{ defaultFlag:{ type:Boolean, default:true, }, quotationNo:{ type:String, default: "", } }, data(){ return{ // 查询条件
searchData:{ site: this.$store.state.user.site, quotationBatchNo: '', quotationItemNo: '', customerNo: '', customerDesc: '', trackerName: '', testPartNo: '', partName: '', quotationStatus: '审批中', quotationResultStatus: '', startDate: '', endDate: '', projectId: '', projectName: '', quoterName: '', priorityLevel: '', customerPartNo: '', finalPartNo: '', limit:1, page:0, }, // 分页
pageIndex: 1,//当前页码
pageSize:20,//每页条数
totalPage:0,//总条数
// 表格数据
dataList:[],//表格数据
quotationSelections:[],//表格选中数据
// 表格刷新
dataListLoading:false, // 按钮状态
saveBatchQuotationLoading:false, // ======== 列表表头 ========
columnList: [ { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1QuotationNo', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'quotationNo', headerAlign: 'center', align: 'center', columnLabel: '申请单号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth: 120 },{ userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1QuotationBatchNo', tableId: '102001Table1', tableName: '询价信息表', columnProp: 'quotationBatchNo', 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: 102001, serialNumber: '102001Table1QuotationItemNo', tableId: '102001Table1', tableName: '询价信息表', columnProp: 'quotationItemNo', headerAlign: 'center', align: 'right', columnLabel: '序号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 60 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1CustomerNo', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'customerNo', 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: 102001, serialNumber: '102001Table1CustomerDesc', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'customerDesc', headerAlign: 'center', align: 'left', columnLabel: '客户名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1ProjectId', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'projectId', 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: 102001, serialNumber: '102001Table1ProjectName', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'projectName', headerAlign: 'center', align: 'left', columnLabel: '项目名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1TestPartNo', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'testPartNo', headerAlign: 'center', align: 'center', columnLabel: '物料编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 160 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1PartName', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'partName', headerAlign: 'center', align: 'left', columnLabel: '物料名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1FinalPartNo', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'finalPartNo', headerAlign: 'center', align: 'left', columnLabel: 'IFS物料编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1CustomerPartNo', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'customerPartNo', headerAlign: 'center', align: 'left', columnLabel: '客户物料编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1TrackerName', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'trackerName', headerAlign: 'center', align: 'left', columnLabel: '采购专员', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1QuoterName', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'quoterName', headerAlign: 'center', align: 'left', columnLabel: '报价专员', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1PriorityLevel', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'priorityLevel', 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: 102001, serialNumber: '102001Table1RequiredCompletionDate', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'requiredCompletionDate', headerAlign: 'center', align: 'center', columnLabel: '要求完成日期', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 160 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1CreateDate', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'createDate', headerAlign: 'center', align: 'center', columnLabel: '创建时间', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 160 }, { userId: this.$store.state.user.name, functionId: 102001, serialNumber: '102001Table1CreateBy', tableId: '102001Table1', tableName: '报价信息表', columnProp: 'createBy', headerAlign: 'center', align: 'left', columnLabel: '创建人', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, ],
quoteVisible:false, } }, created() { this.getDataList(); }, methods:{ // 搜索条件中的时间输入框 change事件
changeDateRange(){ if (this.searchData.dateValue){ this.searchData.startDate = this.searchData.dateValue[0]; this.searchData.endDate = this.searchData.dateValue[1]; }else { this.searchData.startDate=""; this.searchData.endDate=""; } }, /** * 获取数据列表 */ getDataList () { this.searchData.limit = this.pageSize this.searchData.page = this.pageIndex let params = { ...this.searchData, createBy:this.$store.state.user.name } if (!this.defaultFlag){ params.quotationNo = this.quotationNo === ""?"*":this.quotationNo; }
this.dataListLoading = true; quotationInformationSearch(params).then(({data}) => { if (data.code === 0) { this.dataList = data.page.list this.pageIndex = data.page.currPage this.pageSize = data.page.pageSize this.totalPage = data.page.totalCount this.$refs.selectDiv.setLengthAll(this.dataList.length) } this.dataListLoading = false; }) }, sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, currentChangeHandle (val) { this.pageIndex = val this.getDataList() }, // 表格单击事件
quotationClickRow (row) { this.$refs.quotationTable.toggleRowSelection(row) }, selectionQuotation (val) { this.quotationSelections = val this.$refs.selectDiv.setLengthselected(this.quotationSelections.length) }, // 报价
batchQuotation(){ this.saveBatchQuotationHeader(this.quotationSelections); }, // 批量新增报价信息
saveBatchQuotationHeader(list){ this.saveBatchQuotationLoading = true; batchSaveQuote(list).then(({data})=>{ this.saveBatchQuotationLoading = false; if (data && data.code === 0){ this.$message.success(data.msg); this.quoteVisible = false; this.$refs.quotationTable.clearSelection(); this.$router.push({name:"quote-index",params:{ids:data.rows},}) }else { this.$message.error(data.msg); } }).catch((error)=>{ this.saveBatchQuotationLoading = false; }) }, handleQuote(){ if (this.quotationSelections.length === 0){ this.$message.warning("请选择需报价的单号") return } this.quotationSelections = this.quotationSelections.map(item=>{ item.qty = 1 item.createBy = this.$store.state.user.name item.site = this.$store.state.user.site return item; }) this.quoteVisible = true; } }, mounted() {
}, watch:{ "searchData.quotationBatchNo"(newVal,oldVal){ this.searchData.quotationBatchNo = newVal.toUpperCase(); }, "searchData.customerNo"(newVal,oldVal){ this.searchData.customerNo = newVal.toUpperCase(); }, "searchData.projectId"(newVal,oldVal){ this.searchData.projectId = newVal.toUpperCase(); }, quoteVisible(newVal,oldVal){ if (newVal === false){ this.saveBatchQuotationLoading = false; } } }}
</script>
<style scoped>/deep/ .el-range-editor--mini.el-input__inner { height: 20px;}/deep/ .el-range-editor.el-input__inner{ padding: 0px 10px;}/deep/ .el-date-editor .el-range-separator{ width: auto;}/deep/ .el-input--mini .el-input__icon{ line-height: 20px;}.el-table /deep/ .cell{ height: auto; line-height: 1;}</style>
|
