plm前端
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.
 
 
 
 

686 lines
25 KiB

<template>
<div class="mode-config" style="padding: 5px">
<el-form :inline="true" label-position="top" :model="searchData">
<el-row>
<el-col :span="24">
<el-form-item label="客户编码">
<el-input v-model="searchData.customerNo" placeholder="请输入内容" clearable style="width: 120px"/>
</el-form-item>
<el-form-item label="客户名称">
<el-input v-model="searchData.customerName" placeholder="请输入内容" clearable style="width: 120px"/>
</el-form-item>
<el-form-item label="跟单员">
<el-input v-model="searchData.trackerName" placeholder="请输入内容" clearable style="width: 120px"/>
</el-form-item>
<el-form-item label="报价单号">
<el-input v-model="searchData.quotationNo" placeholder="请输入内容" clearable style="width: 120px"/>
</el-form-item>
<el-form-item label="客户询价单号">
<el-input v-model="searchData.customerInquiryNo" placeholder="请输入内容" clearable style="width: 120px"/>
</el-form-item>
<el-form-item label="内部询价单号">
<el-input v-model="searchData.internalInquiryNo" placeholder="请输入内容" clearable style="width: 120px"/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchData.quotationStatus" placeholder="请选择" style="width: 120px">
<el-option label="全部" value=""></el-option>
<el-option label="草稿" value="草稿"></el-option>
<el-option label="下达" value="下达"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目编码">
<el-input v-model="searchData.projectId" placeholder="请输入内容" clearable style="width: 120px"/>
</el-form-item>
<el-form-item label="项目名称">
<el-input v-model="searchData.projectName" placeholder="请输入内容" clearable style="width: 120px"/>
</el-form-item>
<el-form-item label="销售员">
<el-input v-model="searchData.quoterName" placeholder="请输入内容" size="large" clearable style="width: 120px;height: 28px"/>
</el-form-item>
<el-form-item label="报价日期">
<el-date-picker
style="width: 255px"
v-model="searchData.dateValue"
type="daterange"
size="mini"
format="yyyy/MM/dd"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="changeDateRange"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label=" ">
<el-button plain type="primary" @click="initData" @keyup.enter.native="initData">查询</el-button>
<el-button type="primary" @click="insertDiaLogFlag = true">新增</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 表格 和上述搜索框对应 -->
<el-table :data="tableData" @row-click="rowClickQuotation" stripe border style="width: 100%;margin-top: 12px" :height="height">
<el-table-column
label="操作"
align="center"
fixed
width="60">
<template slot-scope="scope">
<el-button type="text" style="padding: 0px 10px" size="small">下达</el-button>
</template>
</el-table-column>
<el-table-column
align="center"
prop="quotationNo"
label="报价单号"
show-overflow-tooltip
width="120">
</el-table-column>
<el-table-column
align="center"
prop="quotationDate"
label="报价日期"
show-overflow-tooltip
width="120">
</el-table-column>
<el-table-column
align="center"
prop="customerNo"
show-overflow-tooltip
label="客户编码">
</el-table-column>
<el-table-column
align="center"
prop="customerName"
show-overflow-tooltip
label="客户名称">
</el-table-column>
<el-table-column
align="center"
prop="versionCode"
show-overflow-tooltip
label="版本号">
</el-table-column>
<el-table-column
align="center"
prop="projectId"
show-overflow-tooltip
label="项目编码">
</el-table-column>
<el-table-column
align="center"
prop="projectName"
show-overflow-tooltip
label="项目名称">
</el-table-column>
<el-table-column
align="center"
prop="quoterName"
width="60"
show-overflow-tooltip
label="销售员">
</el-table-column>
<el-table-column
align="center"
prop="trackerName"
width="60"
show-overflow-tooltip
label="跟单员">
</el-table-column>
<el-table-column
align="center"
prop="currency"
width="60"
show-overflow-tooltip
label="货币">
</el-table-column>
<el-table-column
align="center"
prop="quotationStatus"
show-overflow-tooltip
width="60"
label="状态">
</el-table-column>
<el-table-column
align="center"
prop="remark"
show-overflow-tooltip
width="60"
label="备注">
</el-table-column>
<el-table-column
align="center"
prop="customerInquiryNo"
show-overflow-tooltip
label="客户询价单号">
</el-table-column>
<el-table-column
align="center"
prop="internalInquiryNo"
show-overflow-tooltip
label="内部询价单号">
</el-table-column>
</el-table>
<!-- 分页插件 -->
<el-pagination style="margin-top: 0px"
@size-change="quotationHeaderSizeChange"
@current-change="quotationHeaderCurrentChange"
: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="activeTabName" @tab-click="handleClickTab"
style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border: 2px;min-height: 380px;margin-top: 5px;padding: 5px">
<el-tab-pane label="明细" name="quotation_detail">
<quotation-detail :quotation-header="quotationHeader"></quotation-detail>
</el-tab-pane>
<el-tab-pane label="审批" name="quotation_examine_and_approve">
<quotation-examine-and-approve></quotation-examine-and-approve>
</el-tab-pane>
<el-tab-pane label="项目信息" name="quotation_project_information">
<quotation-project-information></quotation-project-information>
</el-tab-pane>
<el-tab-pane label="客户信息" name="quotation_customer_information">
<quotation-customer-information></quotation-customer-information>
</el-tab-pane>
<el-tab-pane label="客户联系人" name="quotation_customer_contact">
<quotation-customer-contact></quotation-customer-contact>
</el-tab-pane>
</el-tabs>
<!-- 新增弹框 -->
<el-dialog title="新增报价" @close="closeInsertDialog" :close-on-click-modal="false" v-drag :visible.sync="insertDiaLogFlag" width="620px">
<el-form :rules="rules" :inline="true" label-position="top" ref="insertQuotationForm" :model="insertData"
label-width="120px">
<el-row>
<el-col :span="24">
<el-form-item prop="internalInquiryNo">
<span slot="label" style="" @click="quotationNoDialogFlag = true"><a herf="#">内部询价单号</a></span>
<el-input v-model="insertData.internalInquiryNo" placeholder="请输入内容" clearable style="width: 280px"/>
</el-form-item>
<el-form-item label="客户询价单号" prop="customerInquiryNo">
<el-input v-model="insertData.customerInquiryNo" placeholder="请输入内容" clearable style="width: 280px"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item prop="customerNo">
<span slot="label" style="" v-if="insertData.internalInquiryNo ==''" @click="getBaseList(102,1)"><a herf="#">客户编码</a></span>
<span slot="label" style="" v-else><a herf="#">客户编码</a></span>
<el-input v-model="insertData.customerNo" :disabled="insertData.internalInquiryNo !=''" placeholder="请输入内容" clearable style="width: 280px"/>
</el-form-item>
<el-form-item prop="customerName">
<span slot="label" style="" v-if="insertData.internalInquiryNo ==''" @click="getBaseList(102,1)"><a herf="#">客户</a></span>
<span slot="label" style="" v-else><a herf="#">客户</a></span>
<el-input v-model="insertData.customerName" :disabled="insertData.internalInquiryNo !=''" placeholder="请输入内容" clearable style="width: 280px"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item prop="projectId">
<span slot="label" style="" v-if="insertData.internalInquiryNo ==''" @click="getBaseList(104,1)"><a herf="#">项目编码</a></span>
<span slot="label" style="" v-else><a herf="#">项目编码</a></span>
<el-input v-model="insertData.projectId" :disabled="insertData.internalInquiryNo !=''" placeholder="请输入内容" clearable style="width: 280px"/>
</el-form-item>
<el-form-item prop="projectName">
<span slot="label" style="" v-if="insertData.internalInquiryNo ==''" @click="getBaseList(104,1)"><a herf="#">项目名称</a></span>
<span slot="label" style="" v-else><a herf="#">项目名称</a></span>
<el-input v-model="insertData.projectName" :disabled="insertData.internalInquiryNo !=''" placeholder="请输入内容" clearable style="width: 280px"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="货币" prop="currency">
<el-input v-model="insertData.currency" placeholder="请输入内容" size="large" clearable style="width: 280px"/>
</el-form-item>
<el-form-item label="报价日期" prop="quotationDate">
<el-date-picker
style="width: 280px"
v-model="insertData.quotationDate"
type="date"
size="mini"
format="yyyy/MM/dd"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col>
<el-form-item prop="quoter">
<span slot="label" style="" v-if="insertData.internalInquiryNo ==''" @click="getBaseList(103,2)"><a herf="#">销售员</a></span>
<span slot="label" style="" v-else><a herf="#">销售员</a></span>
<el-input v-model="insertData.quoterName" :disabled="insertData.internalInquiryNo !=''" @clear="clearQuoter" placeholder="请输入内容" clearable style="width: 280px"/>
</el-form-item>
<el-form-item prop="tracker">
<span slot="label" style="" v-if="insertData.internalInquiryNo ==''" @click="getBaseList(103,1)"><a herf="#">跟单员</a></span>
<span slot="label" style="" v-else ><a herf="#">跟单员</a></span>
<el-input v-model="insertData.trackerName" :disabled="insertData.internalInquiryNo !=''" @clear="clearTracker" placeholder="请输入内容" size="large" clearable style="width: 280px"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="状态" prop="quotationStatus">
<el-select v-model="insertData.quotationStatus" style="width: 280px" :disabled="insertData.internalInquiryNo !=''" clearable placeholder="请选择" >
<el-option label="草稿" value="草稿"></el-option>
<el-option label="下达" value="下达"></el-option>
</el-select>
</el-form-item>
<el-form-item label=" ">
<el-checkbox v-model="insertData.requireApproval" style="width: 23%" true-label="0" false-label="1" label="需要审批"></el-checkbox>
<el-checkbox v-model="insertData.approvalStatus" style="width: 22%" true-label="已审批" false-label="未审批" label="是否审批"></el-checkbox>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" style="width: 100%;min-height: 70px">
<el-input type="textarea" style="width: 100%" :show-word-limit="true" v-model="insertData.remark"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-footer style="height:30px;margin-top: 20px;text-align:center">
<el-button type="primary" @click="insertDiaLogFlag = false">关闭</el-button>
<el-button type="primary" @click="insertQuotationHeader">保存</el-button>
</el-footer>
</el-dialog>
<!--询价单号选择弹框-->
<el-dialog title="内部询价单号"
:close-on-click-modal="false" :close-on-press-escape="false"
@close="closeQuotationNoDialog"
@open="openQuotationNoDialog"
:visible.sync="quotationNoDialogFlag"
width="685px" v-drag>
<el-form label-position="top"
inline="inline"
:model="quotationNoSearchData"
size="mini"
label-width="120px">
<el-form-item label="询价单号">
<el-input v-model="quotationNoSearchData.quotationNo" clearable/>
</el-form-item>
<el-form-item label=" ">
<el-button type="primary" style="padding: 3px 12px" @click="searchQuotationData">查询</el-button>
</el-form-item>
</el-form>
<el-table :data="quotationNoData" stripe border @cell-dblclick="dblclickQuotationNo">
<el-table-column prop="quotationNo" label="询价单号">
</el-table-column>
<el-table-column prop="projectName" label="项目名称">
</el-table-column>
</el-table>
<el-footer style="height:30px;margin-top: 20px;text-align:center">
<el-button type="primary" @click="quotationNoDialogFlag = false">关闭</el-button>
</el-footer>
</el-dialog>
<!-- chooseList模态框 -->
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
</div>
</template>
<script>
import quotationDetail from "../../../components/quotation/sellForQuotation/quotationDetail.vue";
import quotationExamineAndApprove from "../../../components/quotation/sellForQuotation/quotationExamineAndApprove.vue";
import quotationProjectInformation from "../../../components/quotation/sellForQuotation/quotationProjectInformation.vue";
import quotationCustomerInformation from "../../../components/quotation/sellForQuotation/quotationCustomerInformation.vue";
import quotationCustomerContact from "../../../components/quotation/sellForQuotation/quotationCustomerContact.vue";
import Chooselist from '@/views/modules/common/Chooselist';
import {
getQuotationHeaderByPage,
insertQuotationHeader,
} from '@/api/quotation/quotationHeader.js';
import {
searchQuotationByQuotationNo,
} from '@/api/quotation/quotationInformation.js';
export default {
components:{
Chooselist,
quotationDetail,
quotationExamineAndApprove,
quotationProjectInformation,
quotationCustomerInformation,
quotationCustomerContact,
},
data () {
return {
// 搜索条件对象
searchData:{
site:this.$store.state.user.site,// 工厂编号
customerNo:"", // 客户编码
customer:"", // 客户名称
tracker:"", // 跟单员
quotationStatus:"", //状态
projectId:"", // 项目编码
projectName:"", // 项目名称
quoterName:"", // 销售员
startDate:"", // 开始日期
endDate:"", // 结束日期
dateValue:[],// 开始时间结束时间数组
},
tableData: [],// 查询的数据
// 分页信息
no:1,//页码
size:20,//每页条数
total:0,//总页数
// 表格高度
height:200,
// 标签页
activeTabName:"quotation_detail",
//dialog 控制开关
insertDiaLogFlag:false,
quotationNoDialogFlag:false,
// 新增对象
insertData:{
site:this.$store.state.user.site,
quotationNo:"",//客户报价单号
quotationDate:new Date(),//报价日期
customerNo:"", // 客户编号
customerName:"",//客户名称
versionCode:"001",
projectId:"",//项目编码
projectName:"",//项目名称
tracker:"",//跟单员
quoter:"",//销售编号
quoterName:"",//销售员
trackerName:"",//跟单员
currency:"",//货币
quotationStatus:"草稿",//状态
remark:"",//备注
customerInquiryNo:"",//客户询价单号
internalInquiryNo:"",//内部询价单号
requireApproval:"",//需要审批
approvalStatus:"",//审批状态
createBy:this.$store.state.user.id,//当前登录账号
createDate:new Date(),//当前时间
},
// 规则
rules: {
customerNo: [
{ required: true,message:' '},
],
customerName: [
{ required: true,message:' '},
],
projectId:[
{ required: true,message:' '}
],
projectName:[
{ required: true,message:' '}
],
tracker:[
{ required: true,message:' '}
],
trackerName:[
{ required: true,message:' '}
],
currency:[
{ required: true,message:' '}
],
quoter:[
{ required: true,message:' '}
],
quoterName:[
{ required: true,message:' '}
],
quotationStatus:[
{ required: true,message:' '}
],
quotationDate:[
{ required: true,message:' '}
],
},
// 参数 选择框
tagNo1:"",
tagNo:"",
// 内部报价单搜索表单对象
quotationNoSearchData:{
quotationNo:"",//单号
site:this.$store.state.user.site,//工厂编号
},
//内部报价单搜索表格数据对象
quotationNoData:[],
// 行对象
quotationHeader:{},
}
},
methods: {
// 点击quotation行事件
rowClickQuotation(row){
this.quotationHeader = row;
},
// 搜索条件中的时间输入框 change事件
changeDateRange(){
this.searchData.startDate = this.searchData.dateValue[0];
this.searchData.endDate = this.searchData.dateValue[1];
},
// 初始化数据
initData(){
let params = {
no:this.no,
size:this.size,
site:this.$store.state.user.site,
customerNo:this.searchData.customerNo,
customerName:this.searchData.customerName,
trackerName:this.searchData.trackerName,
quotationNo:this.searchData.quotationNo,
customerInquiryNo:this.searchData.customerInquiryNo,
internalInquiryNo:this.searchData.internalInquiryNo,
quotationStatus:this.searchData.quotationStatus,
projectId:this.searchData.projectId,
projectName:this.searchData.projectName,
quoterName:this.searchData.quoterName,
startDate:this.searchData.startDate,
endDate: this.searchData.endDate,
}
getQuotationHeaderByPage(params).then(({data})=>{
this.tableData = data.data.records;
this.total = data.data.total;
this.quotationHeader = this.tableData[0];
})
},
// size 发送改变
quotationHeaderSizeChange(val){
this.size = val;
this.initData();
},
// no发生改变
quotationHeaderCurrentChange(val){
this.no = val;
this.initData();
},
// 新增QuotationHeader
insertQuotationHeader(){
// 校验
this.$refs['insertQuotationForm'].validate((valid)=>{
if (valid){
// 请求
insertQuotationHeader(this.insertData).then(({data})=>{
console.log("回调结果:",data)
// 返回提示
if (data.code === 200){
this.initData();
this.insertDiaLogFlag = false;
}
this.$message.success(data.msg);
})
}else {
this.$message.warning("校验未通过,必填项未填!");
}
})
},
// resetInsertData 重置新增对象
resetInsertData(){
this.insertData = {
site:this.$store.state.user.site,
quotationNo:"",//客户报价单号
quotationDate:new Date(),//报价日期
customerNo:"", // 客户编号
customerName:"",//客户名称
versionCode:"001",
projectId:"",//项目编码
projectName:"",//项目名称
tracker:"",//跟单员
quoter:"",//销售编号
quoterName:"",//销售员
trackerName:"",//跟单员
currency:"",//货币
quotationStatus:"草稿",//状态
remark:"",//备注
customerInquiryNo:"",//客户询价单号
internalInquiryNo:"",//内部询价单号
requireApproval:"",//需要审批
approvalStatus:"",//审批状态
createBy:this.$store.state.user.id,//当前登录账号
createDate:new Date(),//当前时间
}
},
// 销售员输入框清除事件
clearQuoter(){
this.insertData.quoter = "";
this.insertData.quoterName = "";
},
// 跟单员输入框清除事件
clearTracker(){
this.insertData.tracker = "";
this.insertData.trackerName = "";
},
// 新增弹框关闭事件
closeInsertDialog(){
this.resetInsertData();
this.$refs['insertQuotationForm'].resetFields();
},
// 点击标签页
handleClickTab(tab, event){
},
// ======== chooseList相关方法 ========
/**
* 获取基础数据列表S
* @param val
* @param type
*/
getBaseList (val, type) {
this.tagNo = val
this.tagNo1 = type
this.$nextTick(() => {
let strVal = ''
if (val === 102) {
if(type === 1) {
strVal = this.insertData.customerNo
}
}
if (val === 103) {
if(type === 1) {
strVal = this.insertData.tracker
}
if(type === 2) {
strVal = this.insertData.quoter
}
}
if (val === 104) {
if(type === 1) {
strVal = this.insertData.projectId
}
}
this.$refs.baseList.init(val, strVal)
})
},
/**
* 列表方法的回调
* @param val
*/
getBaseData (val) {
if (this.tagNo === 102) {
if(this.tagNo1 === 1) {
this.insertData.customerNo = val.Customer_no
this.insertData.customerName = val.Customer_desc
}
}
if (this.tagNo === 103) {
if(this.tagNo1 === 1) {
this.insertData.tracker = val.username
this.insertData.trackerName = val.user_display
}
if(this.tagNo1 === 2) {
this.insertData.quoter = val.username
this.insertData.quoterName = val.user_display
}
}
if (this.tagNo === 104) {
if(this.tagNo1 === 1) {
this.insertData.projectId = val.project_id
this.insertData.projectName = val.project_name
}
}
},
// 查询 内部报价单编号
searchQuotationData(){
searchQuotationByQuotationNo(this.quotationNoSearchData).then(({data})=>{
this.quotationNoData = data.data;
})
},
// 打开 内部报价单拟态框
openQuotationNoDialog(){
// 请求
this.searchQuotationData();
},
// 关闭
closeQuotationNoDialog(){
this.quotationNoSearchData = {
quotationNo:"",//单号
site:this.$store.state.user.site,//工厂编号
}
},
// 询价表双击事件
dblclickQuotationNo(row){
this.insertData.customerNo = row.customerNo
this.insertData.customerName=row.customerDesc,//客户名称
this.insertData.projectId=row.projectId,//项目编码
this.insertData.projectName=row.projectName,//项目名称
this.insertData.tracker=row.tracker,//跟单员
this.insertData.quoter=row.quoter,//销售编号
this.insertData.quoterName=row.quoterName,//销售员
this.insertData.trackerName=row.trackerName,//跟单员
this.insertData.quotationStatus=row.quotationStatus,//状态
this.insertData.internalInquiryNo=row.quotationNo,//内部询价单号
// 关闭弹框
this.quotationNoDialogFlag = false;
}
},
computed:{
},
mounted () {
this.$nextTick(() => {
this.height = window.innerHeight / 2 - 240;
})
},
created () {
this.initData();//初始化数据
},
}
</script>
<style scoped lang="scss">
/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>