|
|
<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="优先等级" 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" :loading="saveBatchQuotationLoading" @click="batchQuotation" v-if="defaultFlag">报 价</el-button> </el-form-item> </el-form>
<!-- 报价列表 --> <el-table :height="defaultFlag?700:300" :data="dataList" border v-loading="dataListLoading" row-key='quotationNo' element-loading-text = "数据正在加载中" element-loading-spinner = "el-icon-loading" @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="[50, 100, 200, 500]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> </div></template>
<script>import { quotationInformationSearch, // 询价信息列表查询
} from '@/api/quotation/quotationInformation.js'import { saveBatchQuotationHeader,//批量报价
} from '@/api/quotation/quotationHeader.js';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: '', limit:1, page:0, }, // 分页
pageIndex: 1,//当前页码
pageSize:50,//每页条数
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: '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: '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: '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 }, ], } }, 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(){ if (this.quotationSelections.length === 0){ this.$message.warning("请选择需报价的单号") return } this.quotationSelections = this.quotationSelections.map(item=>{ item.createBy = this.$store.state.user.id item.site = this.$store.state.user.site return item; }) this.saveBatchQuotationHeader(this.quotationSelections); }, // 批量新增报价信息
saveBatchQuotationHeader(list){ this.saveBatchQuotationLoading = true; saveBatchQuotationHeader(list).then(({data})=>{ this.saveBatchQuotationLoading = false; if (data.code === 200){ this.$message.success(data.msg); this.$refs.quotationTable.clearSelection(); this.$router.push({name:"quotation-sellForQuotation",params:{ids:data.data},}) }else { this.$message.error(data.msg); } }).catch((error)=>{ this.saveBatchQuotationLoading = false; }) }, }, mounted() {
},}
</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;}</style>
|
