ccl_plm-vue/src/views/modules/quotation/requestForQuote.vue

<template>
  <div class="mod-config">
    <!-- 查询条件 -->
    <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList()">
      <el-form-item :label="'客户编码'">
        <el-input v-model="searchData.customerNo" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'客户名称'">
        <el-input v-model="searchData.customerDesc" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'跟单员'">
        <el-input v-model="searchData.trackerName" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'产品编码'">
        <el-input v-model="searchData.testPartNo" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'产品名称'">
        <el-input v-model="searchData.partName" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'要求完成日期'">
        <el-date-picker
          style="width: 120px"
          v-model="searchData.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-top: 23px;">
        <laber style="margin-left: 0px;font-size: 19px">&#10142</laber>
      </el-form-item>
      <el-form-item :label="' '">
        <el-date-picker
          style="width: 120px"
          v-model="searchData.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList()">
      <el-form-item :label="'项目编码'">
        <el-input v-model="searchData.projectId" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'项目名称'">
        <el-input v-model="searchData.projectName" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'报价专员'">
        <el-input v-model="searchData.quoterName" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'优先等级'">
        <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.quotationStatus" 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-form-item :label="' '">
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="addModal()">新增</el-button>
        <el-button type="primary" @click="delModal()">删除</el-button>
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ "导出" }}
        </download-excel>
      </el-form-item>
    </el-form>

    <!-- 报价列表 -->
    <el-table
      :height="height"
      :data="dataList"
      border
      ref="quotationTable"
      @row-click="quotationClickRow"
      @selection-change="selectionQuotation"
      @current-change="changeCurrentRow"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        :selectable="selectFlag"
        width="50">
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :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-column
        fixed="right"
        header-align="center"
        align="center"
        width="100"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" @click="updateModal(scope.row)">编辑</a>
        </template>
      </el-table-column>
    </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 :title="modalData.title" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="495px">
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item prop="customerDesc" :rules="rules.customerDesc">
          <span slot="label" style="" @click="getBaseList(102,1)"><a herf="#">客户</a></span>
          <el-input v-model="modalData.customerDesc" readonly @focus="getBaseList(102,1)" style="width: 221px"></el-input>
        </el-form-item>
        <el-form-item prop="trackerName" :rules="rules.trackerName">
          <span slot="label" style="" @click="getBaseList(103,1)"><a herf="#">跟单员</a></span>
          <el-input v-model="modalData.trackerName" readonly @focus="getBaseList(103,1)" style="width: 221px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item prop="projectName" :rules="rules.projectName">
          <span slot="label" style="" @click="getBaseList(104,1)"><a herf="#">项目</a></span>
          <el-input v-model="modalData.projectName" readonly @focus="getBaseList(104,1)" style="width: 221px"></el-input>
        </el-form-item>
        <el-form-item prop="quoterName" :rules="rules.quoterName">
          <span slot="label" style="" @click="getBaseList(103,2)"><a herf="#">报价专员</a></span>
          <el-input v-model="modalData.quoterName" readonly @focus="getBaseList(103,2)" style="width: 221px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item prop="partName" :rules="rules.partName">
          <span slot="label" @click="getProjectPartList()"><a>产品</a></span>
          <el-input v-model="modalData.partName" readonly @focus="getProjectPartList()" style="width: 221px"></el-input>
        </el-form-item>
        <el-form-item label="优先等级" prop="priorityLevel" :rules="rules.priorityLevel">
          <el-select v-model="modalData.priorityLevel" style="width: 221px">
            <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>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="要求完成日期" prop="requiredCompletionDate" :rules="rules.requiredCompletionDate">
          <el-date-picker v-model="modalData.requiredCompletionDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 142px"></el-date-picker>
        </el-form-item>
        <el-form-item label="客户负责人">
          <el-input v-model="modalData.customerResponsiblePerson" style="width: 142px"></el-input>
        </el-form-item>
        <el-form-item label="客户负责人联系方式">
          <el-input v-model="modalData.customerResponsiblePersonPhone" style="width: 142px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="备注">
          <el-input v-model="modalData.remark" style="width: 456px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="技术注意事项">
          <el-input
            type="textarea"
            v-model="modalData.technicalConsiderations"
            :rows="1"
            resize='none'
            maxlength="300"
            show-word-limit
            style="width: 456px;height: 20px">
          </el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:30px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="saveData()">保存</el-button>
        <el-button type="primary" @click="modalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!-- 录入报价结果模态框 -->
    <el-dialog title="录入报价结果" :close-on-click-modal="false" v-drag :visible.sync="enterResultModalFlag" width="785px">
      <el-form :inline="true" label-position="top" :model="enterResultData" :rules="enterResultRules" style="margin-left: 0px;margin-top: 10px;">
        <el-form-item label="实际报价日期" prop="actualityQuotationDate" :rules="enterResultRules.actualityQuotationDate">
          <el-date-picker v-model="enterResultData.actualityQuotationDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 200px"></el-date-picker>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="enterResultData" :rules="enterResultRules" style="margin-left:0px;margin-top: 5px;">
        <el-form-item label="报价结果信息" prop="quotationResultInformation" :rules="enterResultRules.quotationResultInformation">
          <el-input type="textarea" v-model="enterResultData.quotationResultInformation" :rows="3" resize='none' maxlength="300" show-word-limit style="width: 500px;height: 30px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="enterResultData" style="margin-left: 0px;margin-top: 60px;">
        <el-form :inline="true" label-position="top" style="margin-top: 5px">
          <el-button type="primary" @click="uploadFile()">上传文件</el-button>
        </el-form>
        <el-table
          :height="200"
          :data="enterResultData.fileContentList"
          border
          v-loading="dataListLoading"
          style="width: 100%">
          <el-table-column
            v-for="(item,index) in fileColumnList" :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-column
            fixed="right"
            header-align="center"
            align="center"
            width="100"
            label="操作">
            <template slot-scope="scope">
              <a @click="deleteFile(scope.row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-footer style="height:40px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="saveQuotationResult()">保存</el-button>
        <el-button type="primary" @click="enterResultModalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!-- 提交客户报价模态框 -->
    <el-dialog title="提交客户报价" :close-on-click-modal="false" v-drag :visible.sync="submitResultModalFlag" width="620px">
      <el-form :inline="true" label-position="top" :model="submitResultData" :rules="submitResultRules" style="margin-left: 0px;margin-top: 10px;">
        <el-form-item label="实际提交客户日期" prop="actualitySubmissionDate" :rules="submitResultRules.actualitySubmissionDate">
          <el-date-picker v-model="submitResultData.actualitySubmissionDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 200px"></el-date-picker>
        </el-form-item>
        <el-form-item label="提交方式" prop="submissionMethod" :rules="submitResultRules.submissionMethod">
          <el-select v-model="submitResultData.submissionMethod" style="width: 221px">
            <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>
      <el-form :inline="true" label-position="top" :model="submitResultData" style="margin-left:0px;margin-top: 5px;">
        <el-form-item label="提交备注">
          <el-input type="textarea" v-model="submitResultData.submissionRemark" :rows="3" resize='none' maxlength="300" show-word-limit style="width: 456px;height: 30px"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:40px;margin-top: 60px;text-align:center">
        <el-button type="primary" @click="saveSubmitResult()">保存</el-button>
        <el-button type="primary" @click="submitResultModalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!-- 客户回复模态框 -->
    <el-dialog title="客户回复" :close-on-click-modal="false" v-drag :visible.sync="customerResponseModalFlag" width="620px">
      <el-form :inline="true" label-position="top" :model="customerResponseData" :rules="customerResponseRules" style="margin-left: 0px;margin-top: 10px;">
        <el-form-item label="实际回复日期" prop="actualityReplyDate" :rules="customerResponseRules.actualityReplyDate">
          <el-date-picker v-model="customerResponseData.actualityReplyDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 185px"></el-date-picker>
        </el-form-item>
        <el-form-item label="客户确认结果" prop="confirmResults" :rules="customerResponseRules.confirmResults">
          <el-select v-model="customerResponseData.confirmResults" style="width: 185px">
            <el-option label="接受" value="接受"></el-option>
            <el-option label="不接受" value="不接受"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户确认人" prop="confirmBy" :rules="customerResponseRules.confirmBy">
          <el-input v-model="customerResponseData.confirmBy" style="width: 185px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="customerResponseData" style="margin-left:0px;margin-top: 5px;">
        <el-form-item label="客户回复信息">
          <el-input type="textarea" v-model="customerResponseData.confirmInformation" :rows="3" resize='none' maxlength="300" show-word-limit style="width: 595px;height: 30px"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:40px;margin-top: 60px;text-align:center">
        <el-button type="primary" @click="saveCustomerResponse()">保存</el-button>
        <el-button type="primary" @click="customerResponseModalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!-- 产品 -->
    <el-dialog title="产品清单" :close-on-click-modal="false" v-drag :visible.sync="projectPartModelFlag" width="800px">
      <div class="rq">
        <el-form :inline="true" label-position="top" :model="projectPartData">
          <el-form-item :label="'产品编码'">
            <el-input v-model="projectPartData.testPartNo" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="'产品名称'">
            <el-input v-model="projectPartData.partName" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="' '">
            <el-button type="primary" @click="getProjectPartList()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :height="300"
          :data="projectPartList"
          ref="projectPartTable"
          @row-click="projectPartClickRow"
          @selection-change="selectionProjectPart"
          :row-key="getRowKeys"
          border
          v-loading="dataListLoading"
          style="width: 100%;">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            :reserve-selection="true"
            width="50">
          </el-table-column>
          <el-table-column
            v-for="(item,index) in projectPartDetailList" :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>
      </div>
      <el-footer style="height:40px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="confirmProjectPart()">确认</el-button>
        <el-button type="primary" @click="projectPartModelFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!-- 页签 -->
    <el-tabs v-model="activeTable" style="margin-top: 0px; width: 100%; min-height: 500px;" type="border-card" @tab-click="tabClick" class="customer-tab">
      <!-- 报价详细信息页签 -->
      <el-tab-pane label="报价详细信息" name="quotation_detail_information" style="">
        <el-form :inline="true" label-position="top" :model="quotationDetailData" style="margin-left: 10px;margin-top: 10px;">
          <el-form-item label="技术注意事项">
            <el-input
              type="textarea"
              v-model="quotationDetailData.technicalConsiderations"
              readonly
              :rows="3"
              resize='none'
              maxlength="300"
              show-word-limit
              style="width: 600px;height: 30px">
            </el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="quotationDetailData" style="margin-left: 10px;margin-top: 46px;">
          <el-form-item label="客户负责人">
            <el-input v-model="quotationDetailData.customerResponsiblePerson" readonly style="width: 295px"></el-input>
          </el-form-item>
          <el-form-item label="客户负责人联系方式">
            <el-input v-model="quotationDetailData.customerResponsiblePersonPhone" readonly style="width: 295px"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 报价结果页签 -->
      <el-tab-pane label="报价结果" name="quotation_result" style="">
        <el-form :inline="true" label-position="top" :model="quotationResultData" style="margin-left: 10px;margin-top: 5px;">
          <el-button v-if="quotationResultData.quotationResultStatus === 'C'" type="primary" @click="quotationResultModal()">录入报价结果</el-button>
          <el-button v-if="quotationResultData.quotationResultStatus === 'E'" type="primary" @click="submitQuotationModal()">提交客户报价</el-button>
          <el-button v-if="quotationResultData.quotationResultStatus === 'S'" type="primary" @click="customerResponseModal()">客户回复</el-button>
        </el-form>
        <el-form :inline="true" label-position="top" :model="quotationResultData" style="margin-left: 10px;margin-top: 2px;">
          <el-form-item label="实际报价日期">
            <el-date-picker v-model="quotationResultData.actualityQuotationDate" readonly type="date" value-format="yyyy-MM-dd" style="width: 240px"></el-date-picker>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="quotationResultData" style="margin-left: 10px;margin-top: -1px;">
          <el-form-item label="报价结果信息">
            <el-input type="textarea" v-model="quotationResultData.quotationResultInformation" readonly :rows="2" resize='none' show-word-limit style="width: 760px;height: 20px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="quotationResultData" style="margin-left: 10px;margin-top: 26px;">
          <el-form-item label="附件清单">
            <el-table
              :height="90"
              :data="fileContentList"
              border
              v-loading="dataListLoading"
              style="width: 100%">
              <el-table-column
                v-for="(item,index) in fileColumnList" :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-column
                fixed="right"
                header-align="center"
                align="center"
                width="100"
                label="操作">
                <template slot-scope="scope">
                  <a @click="downloadFile(scope.row)">下载</a>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="quotationResultData" style="margin-left: 10px;margin-top: 69px;">
          <el-form-item label="实际提交看客户日期">
            <el-date-picker v-model="quotationResultData.actualitySubmissionDate" readonly type="date" value-format="yyyy-MM-dd" style="width: 240px"></el-date-picker>
          </el-form-item>
          <el-form-item label="提交方式">
            <el-input v-model="quotationResultData.submissionMethod" readonly style="width: 240px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="quotationResultData" style="margin-left: 10px;margin-top: -2px;">
          <el-form-item label="提交备注">
            <el-input type="textarea" v-model="quotationResultData.submissionRemark" readonly :rows="2" resize='none' show-word-limit style="width: 760px;height: 20px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="quotationResultData" style="margin-left: 10px;margin-top: 26px;">
          <el-form-item label="客户是否回复">
            <el-checkbox type="checkbox" v-if="quotationResultData.quotationResultStatus === 'R'" checked onclick="return false"/>
            <el-checkbox type="checkbox" v-if="quotationResultData.quotationResultStatus !== 'R'" onclick="return false"/>
          </el-form-item>
          <el-form-item label="客户确认结果">
            <el-input v-model="quotationResultData.confirmResults" readonly style="width: 205px"></el-input>
          </el-form-item>
          <el-form-item label="实际回复日期">
            <el-date-picker v-model="quotationResultData.actualityReplyDate" readonly type="date" value-format="yyyy-MM-dd" style="width: 240px"></el-date-picker>
          </el-form-item>
          <el-form-item label="客户确认人">
            <el-input v-model="quotationResultData.confirmBy" readonly style="width: 205px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="quotationResultData" style="margin-left: 10px;margin-top: -2px;">
          <el-form-item label="客户回复信息">
            <el-input type="textarea" v-model="quotationResultData.confirmInformation" readonly :rows="2" resize='none' show-word-limit style="width: 760px;height: 20px"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 项目信息页签 -->
      <el-tab-pane label="项目信息" name="project_information">
        <el-form label-position="top" :model="projectInformationData" style="margin-left: 10px;margin-top: 5px;margin-right: 10px">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="项目号">
                  <el-input v-model="projectInformationData.projectId" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="项目名称">
                  <el-input v-model="projectInformationData.projectName" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="项目类型">
                  <el-input v-model="projectInformationData.projectType" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="客户来源">
                  <el-input v-model="projectInformationData.projectSourceDesc" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="优先级">
                  <el-input v-model="projectInformationData.priorityDesc" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="项目状态">
                  <el-input v-model="projectInformationData.status" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="项目经理">
                  <el-input v-model="projectInformationData.projectManagerName" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="项目负责人">
                  <el-input v-model="projectInformationData.projectOwnerName" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="项目权限">
                  <el-input v-model="projectInformationData.userRoleName" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="创建时间">
                  <el-input v-model="projectInformationData.createDate" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="创建人">
                  <el-input v-model="projectInformationData.createBy" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="更新时间">
                  <el-input v-model="projectInformationData.updateDate" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="更新人">
                  <el-input v-model="projectInformationData.updateBy" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-form-item label="项目描述">
                  <el-input v-model="projectInformationData.projectDesc" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-form-item label="其它特殊要求">
                  <el-input v-model="projectInformationData.remark" readonly></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <!-- chooseList模态框 -->
    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>

    <!-- 上传文件的modal -->
    <quotationUploadFile ref="quotationUploadFile" @refreshPageTables="getFileContentList()" v-drag></quotationUploadFile>
  </div>
</template>

<script>
  import {
    quotationInformationSearch, // 报价信息列表查询
    quotationInformationSave, // 报价信息新增
    quotationInformationEdit, // 报价信息编辑
    quotationInformationDelete, // 报价信息删除
    getFileContentList, // 获取报价单附件列表
    quotationResultSearch, // 获取报价结果对象
    deleteQuotationFile, // 文件删除
    downLoadQuotationFile, // 文件下载
    saveQuotationResult, // 保存报价结果
    saveSubmitResult, // 保存提交结果
    saveCustomerResponse, // 保存客户回复
    getProjectPartList, // 获取产品列表
    checkQuotationStatus, // 检查报价进度
    getProjectInformation // 获取项目信息
  } from '@/api/quotation/quotationInformation.js'
  import Chooselist from '@/views/modules/common/Chooselist'
  import quotationUploadFile from "./quotation_upload_file"
  export default {
    components: {
      Chooselist,
      quotationUploadFile
    },
    watch: {
      searchData: {
        deep: true,
        handler: function (newV, oldV) {
          this.searchData.customerNo = this.searchData.customerNo.toUpperCase()
          this.searchData.projectId = this.searchData.projectId.toUpperCase()
        }
      },
      modalData: {
        deep: true,
        handler: function (newV, oldV) {
          this.modalData.customerNo = this.modalData.customerNo.toUpperCase()
          this.modalData.projectId = this.modalData.projectId.toUpperCase()
          this.modalData.quotationNo = this.modalData.quotationNo.toUpperCase()
        }
      }
    },
    data () {
      return {
        // 导出
        exportData: [],
        exportName: '设备分类' + this.dayjs().format('YYYYMMDDHHmmss'),
        exportHeader: ['设备分类'],
        exportFooter: [],
        resultList: [],
        // ======== 行高 ========
        height: 200,
        secondHeight: 200,
        // ======== 分页 ========
        pageIndex: 1,
        pageSize: 50,
        totalPage: 0,
        selectedDataNum: 0,
        // 条件查询
        searchData: {
          site: this.$store.state.user.site,
          customerNo: '',
          customerDesc: '',
          trackerName: '',
          testPartNo: '',
          partName: '',
          quotationStatus: '',
          startDate: '',
          endDate: '',
          projectId: '',
          projectName: '',
          quoterName: '',
          priorityLevel: '',
          page: 1,
          limit: 10
        },
        // 其它
        dataListLoading: false,
        // 初始页签
        activeTable: 'quotation_detail_information',
        // ======== 数据对象 ========
        modalData: {
          flag: '',
          title: '',
          site: this.$store.state.user.site,
          quotationNo: '',
          customerNo: '',
          customerDesc: '',
          projectId: '',
          projectName: '',
          tracker: '',
          trackerName: '',
          quoter: '',
          quoterName: '',
          quotationStatus: '',
          testPartNo: '',
          partName: '',
          priorityLevel: '',
          requiredCompletionDate: '',
          remark: '',
          technicalConsiderations: '',
          customerResponsiblePerson: '',
          customerResponsiblePersonPhone: '',
          nextToDo: '',
          actualityQuotationDate: '',
          quotationResultInformation: '',
          actualitySubmissionDate: '',
          submissionMethod: '',
          submissionRemark: '',
          actualityReplyDate: '',
          confirmResults: '',
          confirmBy: '',
          confirmInformation: '',
          quotationResultStatus: '',
          createDate: '',
          createBy: '',
          updateDate: '',
          updateBy: ''
        },
        quotationDetailData: {
          technicalConsiderations: '',
          customerResponsiblePerson: '',
          customerResponsiblePersonPhone: ''
        },
        quotationResultData: {
          actualityQuotationDate: '',
          quotationResultInformation: '',
          actualitySubmissionDate: '',
          submissionMethod: '',
          submissionRemark: '',
          confirmResults: '',
          actualityReplyDate: '',
          confirmBy: '',
          confirmInformation: '',
          quotationResultStatus: '',
        },
        enterResultData: {
          site: this.$store.state.user.site,
          quotationNo: '',
          actualityQuotationDate: '',
          quotationResultInformation: '',
          updateBy: this.$store.state.user.name,
          quotationResultStatus: '',
          fileContentList: []
        },
        submitResultData: {
          site: this.$store.state.user.site,
          quotationNo: '',
          actualitySubmissionDate: '',
          submissionMethod: '',
          submissionRemark: '',
          updateBy: this.$store.state.user.name,
          quotationResultStatus: ''
        },
        customerResponseData: {
          site: this.$store.state.user.site,
          quotationNo: '',
          actualityReplyDate: '',
          confirmResults: '',
          confirmBy: '',
          confirmInformation: '',
          updateBy: this.$store.state.user.name,
          quotationResultStatus: ''
        },
        projectPartData: {
          site: this.$store.state.user.site,
          testPartNo: '',
          partName: ''
        },
        projectInformationData: {
          projectId: '',
          projectName: '',
          projectType: '',
          projectSourceDesc: '',
          priorityDesc: '',
          status: '',
          projectDesc: '',
          projectManagerName: '',
          projectOwnerName: '',
          userRoleName: '',
          remark: ''
        },
        // ======== 数据列表 ========
        dataList: [],
        fileContentList: [],
        projectPartList: [],
        // ======== 列表表头 ========
        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: '',
            columnWidth: 120
          },
          {
            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: 'center',
            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: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 102001,
            serialNumber: '102001Table1ProjectName',
            tableId: '102001Table1',
            tableName: '报价信息表',
            columnProp: 'projectName',
            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: '102001Table1TrackerName',
            tableId: '102001Table1',
            tableName: '报价信息表',
            columnProp: 'trackerName',
            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: '102001Table1QuoterName',
            tableId: '102001Table1',
            tableName: '报价信息表',
            columnProp: 'quoterName',
            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: '102001Table1TestPartNo',
            tableId: '102001Table1',
            tableName: '报价信息表',
            columnProp: 'testPartNo',
            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: '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: '102001Table1quotationStatus',
            tableId: '102001Table1',
            tableName: '报价信息表',
            columnProp: 'quotationStatus',
            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: '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: 'center',
            columnLabel: '创建人',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 102001,
            serialNumber: '102001Table1UpdateDate',
            tableId: '102001Table1',
            tableName: '报价信息表',
            columnProp: 'updateDate',
            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: '102001Table1UpdateBy',
            tableId: '102001Table1',
            tableName: '报价信息表',
            columnProp: 'updateBy',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '更新人',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          }
        ],
        fileColumnList: [
          {
            userId: this.$store.state.user.name,
            functionId: 102001,
            serialNumber: '102001Table2FileName',
            tableId: '102001Table2',
            tableName: '文件信息表',
            columnProp: 'fileName',
            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: 102001,
            serialNumber: '102001Table2FileRemark',
            tableId: '102001Table2',
            tableName: '文件信息表',
            columnProp: 'fileRemark',
            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: 102001,
          //   serialNumber: '102001Table2OrderRef3',
          //   tableId: '102001Table2',
          //   tableName: '文件信息表',
          //   columnProp: 'orderRef3',
          //   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: '102001Table2CreateDate',
            tableId: '102001Table2',
            tableName: '文件信息表',
            columnProp: 'createDate',
            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: 102001,
            serialNumber: '102001Table2CreatedBy',
            tableId: '102001Table2',
            tableName: '文件信息表',
            columnProp: 'createdBy',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '上传人',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 140
          }
        ],
        projectPartDetailList: [
          {
            userId: this.$store.state.user.name,
            functionId: 102001,
            serialNumber: '102001Table3CustomerNo',
            tableId: '102001Table3',
            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: '102001Table3CustomerDesc',
            tableId: '102001Table3',
            tableName: '项目物料表',
            columnProp: 'customerDesc',
            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: '102001Table3ProjectName',
            tableId: '102001Table3',
            tableName: '项目物料表',
            columnProp: 'projectId',
            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: '102001Table3ProjectId',
            tableId: '102001Table3',
            tableName: '项目物料表',
            columnProp: 'projectName',
            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: '102001Table3TestPartNo',
            tableId: '102001Table3',
            tableName: '项目物料表',
            columnProp: 'testPartNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '产品编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 150
          },
          {
            userId: this.$store.state.user.name,
            functionId: 102001,
            serialNumber: '102001Table3PartName',
            tableId: '102001Table3',
            tableName: '项目物料表',
            columnProp: 'partName',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '产品名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          }
        ],
        // ======== 必填规则 ========
        rules: {
          customerDesc: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          trackerName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          projectName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          quoterName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          partName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          priorityLevel: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          requiredCompletionDate: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ]
        },
        enterResultRules: {
          actualityQuotationDate: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          quotationResultInformation: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ]
        },
        submitResultRules: {
          actualitySubmissionDate: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          submissionMethod: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ]
        },
        customerResponseRules: {
          actualityReplyDate: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          confirmResults: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          confirmBy: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ]
        },
        // ======== 复选数据集 ========
        quotationSelections: [],
        projectPartListSelections: [],
        // ======== 选中的当前行数据 ========
        quotationCurrentRow: {},
        // ======== 模态框开关控制 ========
        modalFlag: false,
        modalDisableFlag: false,
        enterResultModalFlag: false,
        submitResultModalFlag: false,
        customerResponseModalFlag: false,
        projectPartModelFlag: false
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight / 2 - 240;
        /*第二个表格高度的动态调整*/
        this.secondHeight = window.innerHeight / 2  - 206;
      })
    },
    created () {
      this.getDataList()
    },
    methods: {
      // ======== 分页相关方法 ========
      /**
       * 每页数
       * @param val
       */
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      /**
       * 当前页
       * @param val
       */
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },

      // ======== 复选框操作相关方法 ========
      /**
       * 选中一行
       * @param row
       */
      projectPartClickRow (row) {
        this.$refs.projectPartTable.toggleRowSelection(row);
      },
      /**
       * 多选
       * @param val
       */
      selectionProjectPart (val) {
        this.projectPartListSelections = val
      },
      /**
       * 获取唯一值，一般都为 id
       * @param row
       * @returns {*}
       */
      getRowKeys (row) {
        return row.testPartNo;
      },
      /**
       * 未知
       * @returns {boolean}
       */
      selectFlag () {
        return true;
      },

      // ======== 页签切换相关方法 ========
      /**
       * 列表表格选择替换
       * @param tab
       * @param event
       */
      tabClick (tab, event) {
        // 刷新列表数据
        this.refreshCurrentTabTable()
      },
      /**
       * 当前值发生变化的时候修改
       * @param row
       * @param oldRow
       */
      changeCurrentRow (row, oldRow) {
        // 判断是否是获取焦点的事件
        if (row) {
          this.quotationCurrentRow = JSON.parse(JSON.stringify(row))
          //刷新当前页表
          this.refreshCurrentTabTable()
        }
      },
      /**
       * 刷新页签的table数据
       */
      refreshCurrentTabTable () {
        if (this.activeTable === 'quotation_result') {
          this.getQuotationResult()
        } else if (this.activeTable === 'project_information') {
          this.getProjectInformation()
        }
      },

      // ======== 列表数据刷新方法 ========
      /**
       * 获取数据列表
       */
      getDataList () {
        this.searchData.limit = this.pageSize
        this.searchData.page = this.pageIndex
        quotationInformationSearch(this.searchData).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)
            //判断是否全部存在数据
            if(this.totalPage > 0){
              //设置选中行
              this.$refs.quotationTable.setCurrentRow(this.dataList[0])
              this.refreshCurrentTabTable() //加载当前的页签的table
              this.quotationClickRow(this.dataList[0])
            }
          }
          this.dataListLoading = false
        })
      },
      /**
       * 获取报价结果列表
       */
      getQuotationResult () {
        let tempData = {
          site: this.$store.state.user.site,
          quotationNo: this.quotationCurrentRow.quotationNo
        }
        // 报价结果对象
        quotationResultSearch(tempData).then(({data}) => {
          if (data && data.code === 0) {
            this.quotationResultData = data.rows[0]
          } else {
            this.quotationResultData = {}
          }
        })
        // 附件列表
        this.getFileContentData()
      },
      /**
       * 获取项目信息
       */
      getProjectInformation () {
        let tempData = {
          site: this.$store.state.user.site,
          projectId: this.quotationCurrentRow.projectId
        }
        // 报价结果对象
        getProjectInformation(tempData).then(({data}) => {
          if (data && data.code === 0) {
            this.projectInformationData = data.rows[0]
          } else {
            this.projectInformationData = {}
          }
        })
      },

      // ======== 新增/编辑模态框 ========
      /**
       * 报价信息新增模态框
       */
      addModal () {
        this.modalData = {
          flag: '1',
          title: '报价新增',
          site: this.$store.state.user.site,
          quotationNo: '',
          customerNo: '',
          customerDesc: '',
          projectId: '',
          projectName: '',
          tracker: '',
          trackerName: '',
          quoter: '',
          quoterName: '',
          quotationStatus: '草稿',
          testPartNo: '',
          partName: '',
          priorityLevel: '',
          requiredCompletionDate: '',
          remark: '',
          technicalConsiderations: '',
          customerResponsiblePerson: '',
          customerResponsiblePersonPhone: '',
          nextToDo: '',
          actualityQuotationDate: '',
          quotationResultInformation: '',
          actualitySubmissionDate: '',
          submissionMethod: '',
          submissionRemark: '',
          actualityReplyDate: '',
          confirmResults: '',
          confirmBy: '',
          confirmInformation: '',
          quotationResultStatus: 'C',
          createBy: this.$store.state.user.name
        }
        this.modalDisableFlag = false
        this.modalFlag = true
      },
      /**
       * 报价信息编辑模态框
       * @param row
       */
      updateModal (row) {
        this.modalData = {
          flag: '2',
          title: '报价编辑',
          site: row.site,
          quotationNo: row.quotationNo,
          customerNo: row.customerNo,
          customerDesc: row.customerDesc,
          projectId: row.projectId,
          projectName: row.projectName,
          tracker: row.tracker,
          trackerName: row.trackerName,
          quoter: row.quoter,
          quoterName: row.quoterName,
          quotationStatus: row.quotationStatus,
          testPartNo: row.testPartNo,
          partName: row.partName,
          priorityLevel: row.priorityLevel,
          requiredCompletionDate: row.requiredCompletionDate,
          remark: row.remark,
          technicalConsiderations: row.technicalConsiderations,
          customerResponsiblePerson: row.customerResponsiblePerson,
          customerResponsiblePersonPhone: row.customerResponsiblePersonPhone,
          nextToDo: row.nextToDo,
          actualityQuotationDate: row.actualityQuotationDate,
          quotationResultInformation: row.quotationResultInformation,
          actualitySubmissionDate: row.actualitySubmissionDate,
          submissionMethod: row.submissionMethod,
          submissionRemark: row.submissionRemark,
          actualityReplyDate: row.actualityReplyDate,
          confirmResults: row.confirmResults,
          confirmBy: row.confirmBy,
          confirmInformation: row.confirmInformation,
          quotationResultStatus: row.quotationResultStatus,
          updateBy: this.$store.state.user.name
        }
        this.modalDisableFlag = true
        this.modalFlag = true
      },

      // ======== 新增/编辑/删除方法 ========
      /**
       * 获取产品列表
       */
      getProjectPartList () {
        // 先清空缓存选中
        this.$nextTick(() => this.$refs.projectPartTable.clearSelection())
        // 拿到选中的产品编号
        let projectPartList = this.modalData.testPartNo.split(';')
        // 查询所有产品
        getProjectPartList(this.projectPartData).then(({data}) => {
          if (data && data.code === 0) {
            this.projectPartList = data.rows
            this.projectPartList.forEach (val => {
              // 回显选中的产品
              if (projectPartList.includes(val.testPartNo)) {
                this.$nextTick(() => this.$refs.projectPartTable.toggleRowSelection(val, true))
              }
            })
            this.projectPartModelFlag = true
          }else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      /**
       * 确认多选产品
       */
      confirmProjectPart () {
        if(this.projectPartListSelections.length === 0){
          this.$message.warning('请勾选产品！')
          return
        }
        this.modalData.testPartNo = ''
        this.modalData.partName = ''
        for (let i = 0; i < this.projectPartListSelections.length; i++) {
          this.modalData.testPartNo = this.modalData.testPartNo + ";" + this.projectPartListSelections[i].testPartNo
          this.modalData.partName = this.modalData.partName + ";" + this.projectPartListSelections[i].partName
        }
        this.modalData.testPartNo = this.modalData.testPartNo.substring(1)
        this.modalData.partName = this.modalData.partName.substring(1)
        this.projectPartModelFlag = false
      },
      /**
       * 客户信息新增/编辑
       */
      saveData () {
        if (this.modalData.customerNo === '' || this.modalData.customerNo == null) {
          this.$message.warning('请选择客户编码！')
          return
        }
        if (this.modalData.customerDesc === '' || this.modalData.customerDesc == null) {
          this.$message.warning('请选择客户名称！')
          return
        }
        if (this.modalData.tracker === '' || this.modalData.tracker == null) {
          this.$message.warning('请选择跟单员编码！')
          return
        }
        if (this.modalData.trackerName === '' || this.modalData.trackerName == null) {
          this.$message.warning('请选择跟单员名称！')
          return
        }
        if (this.modalData.projectId === '' || this.modalData.projectId == null) {
          this.$message.warning('请选择项目编码！')
          return
        }
        if (this.modalData.projectName === '' || this.modalData.projectName == null) {
          this.$message.warning('请选择项目名称！')
          return
        }
        if (this.modalData.quoter === '' || this.modalData.quoter == null) {
          this.$message.warning('请选择报价专员编码！')
          return
        }
        if (this.modalData.quoterName === '' || this.modalData.quoterName == null) {
          this.$message.warning('请选择报价专员名称！')
          return
        }
        if (this.modalData.testPartNo === '' || this.modalData.testPartNo == null) {
          this.$message.warning('请选择产品编码！')
          return
        }
        if (this.modalData.partName === '' || this.modalData.partName == null) {
          this.$message.warning('请选择产品名称！')
          return
        }
        if (this.modalData.priorityLevel === '' || this.modalData.priorityLevel == null) {
          this.$message.warning('请选择优先等级！')
          return
        }
        if (this.modalData.requiredCompletionDate === '' || this.modalData.requiredCompletionDate == null) {
          this.$message.warning('请输入要求完成日期！')
          return
        }
        if (this.modalData.flag === '1') {
          quotationInformationSave(this.modalData).then(({data}) => {
            if (data && data.code === 0) {
              this.getDataList()
              this.modalFlag = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {}
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        } else {
          quotationInformationEdit(this.modalData).then(({data}) => {
            if (data && data.code === 0) {
              this.getDataList()
              this.modalFlag = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {}
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }
      },
      /**
       * 报价信息删除
       */
      delModal () {
        if(this.quotationSelections.length === 0){
          this.$message.warning('请勾选要删除的报价信息！')
          return
        }
        this.$confirm(`是否删除这 `+ this.quotationSelections.length +` 条报价信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let tempData = {
            informationList: this.quotationSelections
          }
          quotationInformationDelete(tempData).then(({data}) => {
            if (data && data.code === 0) {
              this.getDataList()
              this.quotationSelections = []
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }).catch(() => {
        })
      },

      // ======== 列表操作方法 ========
      /**
       * 单机选中报价信息
       * @param row
       */
      quotationClickRow (row) {
        // this.$refs.quotationTable.toggleRowSelection(row)
        this.quotationCurrentRow = JSON.parse(JSON.stringify(row))
        this.quotationDetailData = row
      },
      /**
       * 复选报价信息
       * @param val
       */
      selectionQuotation (val) {
        this.quotationSelections = val
        this.$refs.selectDiv.setLengthselected(this.quotationSelections.length)
      },

      // ======== 报价结果相关方法 ========
      /**
       * 封装录入方法
       */
      packQuotationResultModal () {
        // 重置对象
        this.enterResultData = {
          site: this.$store.state.user.site,
          quotationNo: '',
          actualityQuotationDate: '',
          quotationResultInformation: '',
          quotationResultStatus: 'E',
          fileContentList: [],
          updateBy: this.$store.state.user.name
        }
        // 获得选中的报价号
        if (this.quotationSelections.length > 0) {
          this.quotationSelections.forEach(val => {
            this.enterResultData.quotationNo += ';' + val.quotationNo
          })
          this.enterResultData.quotationNo = this.enterResultData.quotationNo.substring(1)
        } else {
          this.enterResultData.quotationNo = this.quotationCurrentRow.quotationNo
        }
        // 获得这些报价号的全部附件
        this.getFileContentList()
        this.enterResultModalFlag = true
      },
      /**
       * 录入报价结果
       */
      quotationResultModal () {
        // 如果有选中报价单
        if (this.quotationSelections != null && this.quotationSelections.length > 0) {
          let tempData = {
            currentStatus: 'C',
            informationList: this.quotationSelections,
          }
          // 检查报价单状态
          checkQuotationStatus(tempData).then(({data}) => {
            if (data && data.code === 0) {
              if (data.flag === 1) { // 状态一致
                this.packQuotationResultModal()
              } else { // 状态不同
                this.$message.warning('选中的报价单进度有误，请确认！')
              }
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        } else { // 没有选中报价单，则根据当前点击行报价单操作
          this.packQuotationResultModal()
        }
      },
      /**
       * 保存报价结果
       */
      saveQuotationResult () {
        if (this.enterResultData.actualityQuotationDate === '' || this.enterResultData.actualityQuotationDate == null) {
          this.$message.warning('请选择实际报价日期！')
          return
        }
        if (this.enterResultData.quotationResultInformation === '' || this.enterResultData.quotationResultInformation == null) {
          this.$message.warning('请填写报价结果信息！')
          return
        }
        if (this.quotationSelections.length > 1) {
          this.$confirm(`是否录入多条报价结果?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            saveQuotationResult(this.enterResultData).then(({data}) => {
              if (data && data.code === 0) {
                this.getDataList()
                this.enterResultModalFlag = false
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                  }
                })
              } else {
                this.$alert(data.msg, '错误', {
                  confirmButtonText: '确定'
                })
              }
            })
          }).catch(() => {
          })
        } else {
          saveQuotationResult(this.enterResultData).then(({data}) => {
            if (data && data.code === 0) {
              this.getDataList()
              this.enterResultModalFlag = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }
      },

      /**
       * 封装提交方法
       */
      packSubmitQuotationModal () {
        this.submitResultData = {
          site: this.$store.state.user.site,
          quotationNo: '',
          actualityQuotationDate: '',
          quotationResultInformation: '',
          quotationResultStatus: 'S',
          updateBy: this.$store.state.user.name
        }
        // 获得选中的报价号
        if (this.quotationSelections.length > 0) {
          this.quotationSelections.forEach(val => {
            this.submitResultData.quotationNo += ';' + val.quotationNo
          })
          this.submitResultData.quotationNo = this.submitResultData.quotationNo.substring(1)
        } else {
          this.submitResultData.quotationNo = this.quotationCurrentRow.quotationNo
        }
        this.submitResultModalFlag = true
      },
      /**
       * 提交客户报价
       */
      submitQuotationModal () {
        // 如果有选中报价单
        if (this.quotationSelections != null && this.quotationSelections.length > 0) {
          let tempData = {
            currentStatus: 'E',
            informationList: this.quotationSelections,
          }
          // 检查报价单状态
          checkQuotationStatus(tempData).then(({data}) => {
            if (data && data.code === 0) {
              if (data.flag === 1) { // 状态一致
                this.packSubmitQuotationModal()
              } else { // 状态不同
                this.$message.warning('选中的报价单进度有误，请确认！')
              }
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        } else { // 没有选中报价单，则根据当前点击行报价单操作
          this.packSubmitQuotationModal()
        }
      },
      /**
       * 保存提交结果
       */
      saveSubmitResult () {
        if (this.submitResultData.actualitySubmissionDate === '' || this.submitResultData.actualitySubmissionDate == null) {
          this.$message.warning('请选择实际提交客户日期！')
          return
        }
        if (this.submitResultData.submissionMethod === '' || this.submitResultData.submissionMethod == null) {
          this.$message.warning('请选择提交方式！')
          return
        }
        if (this.quotationSelections.length > 1) {
          this.$confirm(`是否提交多条客户报价?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            saveSubmitResult(this.submitResultData).then(({data}) => {
              if (data && data.code === 0) {
                this.getDataList()
                this.submitResultModalFlag = false
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                  }
                })
              } else {
                this.$alert(data.msg, '错误', {
                  confirmButtonText: '确定'
                })
              }
            })
          }).catch(() => {
          })
        } else {
          saveSubmitResult(this.submitResultData).then(({data}) => {
            if (data && data.code === 0) {
              this.getDataList()
              this.submitResultModalFlag = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }
      },

      /**
       * 封装回复方法
       */
      packCustomerResponseModal () {
        this.customerResponseData = {
          site: this.$store.state.user.site,
          quotationNo: '',
          actualityReplyDate: '',
          confirmResults: '',
          confirmBy: '',
          confirmInformation: '',
          quotationResultStatus: 'R',
          updateBy: this.$store.state.user.name
        }
        // 获得选中的报价号
        if (this.quotationSelections.length > 0) {
          this.quotationSelections.forEach(val => {
            this.customerResponseData.quotationNo += ';' + val.quotationNo
          })
          this.customerResponseData.quotationNo = this.customerResponseData.quotationNo.substring(1)
        } else {
          this.customerResponseData.quotationNo = this.quotationCurrentRow.quotationNo
        }
        this.customerResponseModalFlag = true
      },
      /**
       * 客户回复
       */
      customerResponseModal () {
        // 如果有选中报价单
        if (this.quotationSelections != null && this.quotationSelections.length > 0) {
          let tempData = {
            currentStatus: 'S',
            informationList: this.quotationSelections,
          }
          // 检查报价单状态
          checkQuotationStatus(tempData).then(({data}) => {
            if (data && data.code === 0) {
              if (data.flag === 1) { // 状态一致
                this.packCustomerResponseModal()
              } else { // 状态不同
                this.$message.warning('选中的报价单进度有误，请确认！')
              }
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        } else { // 没有选中报价单，则根据当前点击行报价单操作
          this.packCustomerResponseModal()
        }
      },
      /**
       * 保存客户回复
       */
      saveCustomerResponse () {
        if (this.customerResponseData.actualityReplyDate === '' || this.customerResponseData.actualityReplyDate == null) {
          this.$message.warning('请选择实际回复日期！')
          return
        }
        if (this.customerResponseData.confirmResults === '' || this.customerResponseData.confirmResults == null) {
          this.$message.warning('请选择客户确认结果！')
          return
        }
        if (this.customerResponseData.confirmBy === '' || this.customerResponseData.confirmBy == null) {
          this.$message.warning('请填写客户确认人！')
          return
        }
        if (this.quotationSelections.length > 1) {
          this.$confirm(`是否提交多条客户回复?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            saveCustomerResponse(this.customerResponseData).then(({data}) => {
              if (data && data.code === 0) {
                this.getDataList()
                this.customerResponseModalFlag = false
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                  }
                })
              } else {
                this.$alert(data.msg, '错误', {
                  confirmButtonText: '确定'
                })
              }
            })
          }).catch(() => {
          })
        } else {
          saveCustomerResponse(this.customerResponseData).then(({data}) => {
            if (data && data.code === 0) {
              this.getDataList()
              this.customerResponseModalFlag = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }
      },

      // ======== 报价单附件的相关方法 ========
      /**
       * 获取报价单附件列表
       */
      getFileContentData () {
        let currentData = {
          orderRef1: this.$store.state.user.site,
          orderRef2: this.quotationCurrentRow.quotationNo
        }
        getFileContentList(currentData).then(({data}) => {
          if (data && data.code === 0) {
            this.fileContentList = data.rows
          } else {
            this.fileContentList = []
          }
        })
      },
      /**
       * 获得这些报价号的全部附件
       */
      getFileContentList () {
        let currentData = {
          orderRef1: this.$store.state.user.site,
          orderRef2: this.enterResultData.quotationNo
        }
        getFileContentList(currentData).then(({data}) => {
          if (data && data.code === 0) {
            this.enterResultData.fileContentList = data.rows
          } else {
            this.enterResultData.fileContentList = []
          }
        })
      },
      /**
       * 上传文件
       */
      uploadFile () {
        let currentData = {
          titleCon: '报价附件上传',
          site: this.$store.state.user.site,
          createBy: this.$store.state.user.name,
          quotationNo: '',
          fileRemark: '',
          folder: 'quotationFile',
          options: []
        }
        let num = 0
        let arr = this.enterResultData.quotationNo.split(';')
        arr.forEach(val => {
          currentData.options.push({key: num++, value: val})
        })
        //打开组件 去做新增业务
        this.$nextTick(() => {
          this.$refs.quotationUploadFile.init(currentData);
        })
      },
      /**
       * 文件删除
       * @param row
       */
      deleteFile (row) {
        this.$confirm('确定要删除此文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteQuotationFile(row).then(({data}) => {
            if (data && data.code === 0) {
              this.getFileContentList();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {}
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }).catch(() => {
        })
      },
      /**
       * 文件下载
       * @param row
       */
      downloadFile (row) {
        downLoadQuotationFile(row).then(({data}) => {
          // 不限制文件下载类型
          const blob = new Blob([data], {type:'application/octet-stream;charset=utf-8'})
          // 下载文件名称
          const fileName = row.fileName
          // a标签下载
          const linkNode = document.createElement('a')
          linkNode.download = fileName // a标签的download属性规定下载文件的名称
          linkNode.style.display = 'none'
          linkNode.href = URL.createObjectURL(blob) // 生成一个Blob URL
          document.body.appendChild(linkNode)
          linkNode.click() // 模拟在按钮上的一次鼠标单击
          URL.revokeObjectURL(linkNode.href) // 释放URL 对象
          document.body.removeChild(linkNode)
        })
      },

      // ======== 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.modalData.customerNo
            }
          }
          if (val === 103) {
            if(type === 1) {
              strVal = this.modalData.tracker
            }
            if(type === 2) {
              strVal = this.modalData.quoter
            }
          }
          if (val === 104) {
            if(type === 1) {
              strVal = this.modalData.projectId
            }
          }
          this.$refs.baseList.init(val, strVal)
        })
      },
      /**
       * 列表方法的回调
       * @param val
       */
      getBaseData (val) {
        if (this.tagNo === 102) {
          if(this.tagNo1 === 1) {
            this.modalData.customerNo = val.Customer_no
            this.modalData.customerDesc = val.Customer_desc
          }
        }
        if (this.tagNo === 103) {
          if(this.tagNo1 === 1) {
            this.modalData.tracker = val.username
            this.modalData.trackerName = val.user_display
          }
          if(this.tagNo1 === 2) {
            this.modalData.quoter = val.username
            this.modalData.quoterName = val.user_display
          }
        }
        if (this.tagNo === 104) {
          if(this.tagNo1 === 1) {
            this.modalData.projectId = val.project_id
            this.modalData.projectName = val.project_name
          }
        }
      },

      // ======== 导出相关方法 ========
      /**
       * 导出excel
       */
      async createExportData () {
        this.searchData.limit = -1
        this.searchData.page = 1
        await quotationInformationSearch(this.searchData).then(({data}) => {
          this.resultList = data.page.list
        })
        return this.resultList
      },
      startDownload () {
      },
      finishDownload () {
      },
      fields () {
        let json = '{'
        this.columnList.forEach((item, index) => {
          if (index == this.columnList.length - 1) {
            json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"'
          } else {
            json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"' + ','
          }
        })
        json += '}'
        let s = eval('(' + json + ')')
        return s
      }
    }
  }
</script>

<style scoped lang="scss">
/deep/ .customer-tab .el-tabs__content {
  padding: 0px !important;
}
.el-transfer-panel {
  border: 2px solid #17b3a3;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  max-height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

.el-transfer-panel .el-transfer-panel__header {
  height: 40px;
  line-height: 40px;
  background: #17b3a3;
  margin: 0;
  padding-left: 15px;
  border-bottom: 1px solid #17b3a3;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000;
}

.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
  font-size: 14px;
  color: #303133;
  font-weight: 400;
}
</style>