rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/quotation/sellForQuotation.vue

<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>