ccl_plm-vue/src/views/modules/changeManagement/changeRequest.vue

<template>
  <div class="mod-config">

    <!-- 查询条件 -->
    <el-form :inline="true" label-position="top" :model="searchData">
      <el-form-item label="项目编码">
        <el-input v-model="searchData.projectId" clearable style="width: 120px"/>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="searchData.projectDesc" clearable style="width: 200px"/>
      </el-form-item>
      <el-form-item label="技术参数卡编码">
        <el-input v-model="searchData.codeNo" clearable style="width: 120px"/>
      </el-form-item>
      <el-form-item label=" ">
        <el-button plain type="primary" @click="getDataList">查询</el-button>
        <el-button type="primary" @click="changeModel">变更申请</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
      @selection-change="selectionData"
      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>

    <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 :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="1060px" :showClose="false">
      <el-tabs tab-position="left" type="border-card" v-model="activeName" @tab-click="refreshCurrentTabTable" style="width: 100%;height: 720px;">
        <el-tab-pane label="基本信息" name="basicInformation">
          <div style="height: 675px">
            <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-top: -5px;">
              <el-form-item prop="applicantId" :rules="rules.applicantId">
                <span style="cursor: pointer" slot="label" @click="getBaseList(103, 1)"><a herf="#">申请人</a></span>
                <el-input v-model="modalData.applicantId" style="width: 120px"></el-input>
                <el-input v-model="modalData.applicantName" disabled style="width: 300px"></el-input>
              </el-form-item>
              <el-form-item label="申请部门" >
                <el-input v-model="modalData.applicationDepartmentId" readonly style="width: 120px"></el-input>
                <el-input v-model="modalData.applicationDepartmentName" disabled style="width: 300px"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="modalData" :rules="rules">
              <el-form-item label="申请日期" prop="applicantId" :rules="rules.applyDate">
                <el-date-picker
                  style="width: 205px"
                  v-model="modalData.applyDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择日期"
                  :editable=false>
                </el-date-picker>
              </el-form-item>
              <el-form-item label="ECN变更影响" prop="changeImpact" :rules="rules.changeImpact">
                <dict-data-select v-model="modalData.changeImpact" style="width: 205px" dict-type="change_change_Impact"></dict-data-select>
              </el-form-item>
              <el-form-item label="变更影响描述" prop="changeImpactDesc" :rules="[{required: modalData.changeImpact === 'Y',message: ' ',trigger: ['blur','change']}]">
                <el-input v-model="modalData.changeImpactDesc" style="width: 423px"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="modalData" :rules="rules">
              <el-form-item label="ECN阶段" prop="ecnStage" :rules="rules.ecnStage">
                <dict-data-select v-model="modalData.ecnStage" style="width: 205px" dict-type="change_ecn_stage"></dict-data-select>
              </el-form-item>
              <el-form-item label="变更类别" prop="changeType" :rules="rules.changeType">
                <dict-data-select v-model="modalData.changeType" style="width: 205px" dict-type="change_change_type"></dict-data-select>
              </el-form-item>
              <el-form-item prop="tpEngineerId" :rules="rules.tpEngineerId">
                <span style="cursor: pointer" slot="label" @click="getBaseList(103,2)"><a href="#">TP工程师</a></span>
                <el-input v-model="modalData.tpEngineerId" style="width: 120px"></el-input>
                <el-input v-model="modalData.tpEngineerName" disabled style="width: 300px"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="modalData" :rules="rules">
              <el-form-item label="变更生效日期" prop="changePhaseInDate" :rules="rules.changePhaseInDate">
                <el-date-picker
                  style="width: 205px"
                  v-model="modalData.changePhaseInDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择日期"
                  :editable=false>
                </el-date-picker>
              </el-form-item>
              <el-form-item label="是否DF是产品" prop="dfIsProduct" :rules="rules.dfIsProduct">
                <dict-data-select v-model="modalData.dfIsProduct" style="width: 205px" dict-type="change_df_is_product"></dict-data-select>
              </el-form-item>
              <el-form-item label="印刷方式" prop="printing" :rules="rules.printing">
                <dict-data-select v-model="modalData.printing" style="width: 205px" dict-type="change_printing"></dict-data-select>
              </el-form-item>
              <el-form-item label="制造成本是否变更" prop="manufacturingCostIsChange" :rules="rules.manufacturingCostIsChange">
                <dict-data-select v-model="modalData.manufacturingCostIsChange" style="width: 205px" dict-type="change_manufacturing_cost_is_change"></dict-data-select>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="modalData" :rules="rules">
              <el-form-item label="变更要求描述" prop="changeRequestDesc" :rules="rules.changeRequestDesc">
                <el-input type="textarea" v-model="modalData.changeRequestDesc" :rows="3" resize='none' show-word-limit style="width: 643px;height: 30px"></el-input>
              </el-form-item>
              <el-form-item label="是否重新报价" prop="isReQuote" :rules="rules.isReQuote">
                <dict-data-select v-model="modalData.isReQuote" style="width: 205px" dict-type="change_is_re_quote"></dict-data-select>
                <el-button type="primary" icon="el-icon-more" @click="chooseEcnTypeModal" style="margin-top: 22px;width: 94px">ECN种类</el-button>
                <el-button type="primary" icon="el-icon-upload" @click="uploadFileModal" style="margin-top: 22px;width: 94px">文件上传</el-button>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-top: 50px">
              <el-form-item label="原产品是否UL认证要求" prop="ulCertificationRequirements" :rules="rules.ulCertificationRequirements">
                <dict-data-select v-model="modalData.ulCertificationRequirements" style="width: 423px" dict-type="change_ul_certification_requirements"></dict-data-select>
              </el-form-item>
              <el-form-item label="如果有，变更后能否继续满足此需求" prop="ulContinueToMeetDemand" :rules="rules.ulContinueToMeetDemand">
                <dict-data-select v-model="modalData.ulContinueToMeetDemand" style="width: 423px" dict-type="change_ul_continue_to_meet_demand"></dict-data-select>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="modalData" :rules="rules">
              <el-form-item label="原产品是否GP要求" prop="gpCertificationRequirements" :rules="rules.gpCertificationRequirements">
                <dict-data-select v-model="modalData.gpCertificationRequirements" style="width: 423px" dict-type="change_gp_certification_requirements"></dict-data-select>
              </el-form-item>
              <el-form-item label="如果有，变更后能否继续满足此需求" prop="gpContinueToMeetDemand" :rules="rules.gpContinueToMeetDemand">
                <dict-data-select v-model="modalData.gpContinueToMeetDemand" style="width: 423px" dict-type="change_gp_continue_to_meet_demand"></dict-data-select>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top">
              <div class="rq">
                <el-table
                  :data="chooseDataList"
                  height="300px"
                  border
                  style="width:100%">
                  <el-table-column
                    v-for="(item,index) in columnChooseDataList" :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
                    prop=""
                    header-align="center"
                    align="center"
                    min-width="90"
                    label="新物料编码">
                    <template slot-scope="scope">
                      <el-input :ref="`newPartNo${scope.$index}`" v-model="scope.row.newPartNo" @keyup.enter.native="focusNextInput(scope.$index, 'newPartNo')" style="height: 11px;padding: 0px " allow-create>;width:98%"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    header-align="center"
                    align="center"
                    min-width="90"
                    label="新图纸编码">
                    <template slot-scope="scope">
                      <el-input :ref="`newDrawingNo${scope.$index}`" v-model="scope.row.newDrawingNo" @keyup.enter.native="focusNextInput(scope.$index, 'newDrawingNo')" style="height: 11px;padding: 0px " allow-create>;width:98%"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    header-align="center"
                    align="center"
                    min-width="90"
                    label="新图稿编码">
                    <template slot-scope="scope">
                      <el-input :ref="`newDraftNo${scope.$index}`" v-model="scope.row.newDraftNo" @keyup.enter.native="focusNextInput(scope.$index, 'newDraftNo')" style="height: 11px;padding: 0px " allow-create>;width:98%"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="60"
                    label="操作">
                    <template slot-scope="scope">
                      <el-link style="cursor: pointer" @click="deleteChooseDataModal(scope.row)">删除</el-link>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </div>
          <el-footer style="height:25px;text-align:center">
            <el-button v-if="basicInformationFlag" type="primary" @click="saveData">保存</el-button>
            <el-button type="primary" @click="closeModalFlag">关闭</el-button>
          </el-footer>
        </el-tab-pane>

        <el-tab-pane label="库存成本影响" name="inventoryCostImpact">
          <div style="height: 675px">
            <el-form :inline="true" label-position="top" :model="costImpactData" style="margin-top: -5px;">
              <el-form-item style="margin-top: 20px;width: 155px">
                <el-checkbox v-model="costImpactData.productionProductFlag" true-label="Y">在生产品</el-checkbox>
              </el-form-item>
              <el-form-item label="数量">
                <el-input class="inlineNumber numInput" v-model="costImpactData.productionProductNumber" :disabled="costImpactData.productionProductFlag !== 'Y'" type="number" style="width: 100px"></el-input>
              </el-form-item>
              <el-form-item label="处理意见">
                <dict-data-select v-model="costImpactData.productionProductOpinions" :disabled="costImpactData.productionProductFlag !== 'Y'" style="width: 130px" dict-type="change_production_product_opinions"></dict-data-select>
              </el-form-item>
              <el-form-item label=" " style="margin-left: -10px">
                <el-input v-model="costImpactData.productionProductRemark" :disabled="costImpactData.productionProductFlag !== 'Y'" style="width: 300px"></el-input>
              </el-form-item>
              <el-form-item>
                <span style="cursor: pointer" slot="label" @click="getBaseList(103, 3)"><a herf="#">执行人</a></span>
                <el-input v-model="costImpactData.productionProductExecutorName" :disabled="costImpactData.productionProductFlag !== 'Y'" style="width: 130px"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="costImpactData" style="margin-top: 10px;">
              <el-form-item style="margin-top: 20px;width: 155px">
                <el-checkbox v-model="costImpactData.inventoryProductFlag" true-label="Y">成品库存</el-checkbox>
              </el-form-item>
              <el-form-item label="数量">
                <el-input class="inlineNumber numInput" v-model="costImpactData.inventoryProductNumber" :disabled="costImpactData.inventoryProductFlag !== 'Y'" type="number" style="width: 100px"></el-input>
              </el-form-item>
              <el-form-item label="处理意见">
                <dict-data-select v-model="costImpactData.inventoryProductOpinions" :disabled="costImpactData.inventoryProductFlag !== 'Y'" style="width: 130px" dict-type="change_inventory_product_opinions"></dict-data-select>
              </el-form-item>
              <el-form-item label=" " style="margin-left: -10px">
                <el-input v-model="costImpactData.inventoryProductRemark" :disabled="costImpactData.inventoryProductFlag !== 'Y'" style="width: 300px"></el-input>
              </el-form-item>
              <el-form-item>
                <span style="cursor: pointer" slot="label" @click="getBaseList(103, 4)"><a herf="#">执行人</a></span>
                <el-input v-model="costImpactData.inventoryProductExecutorName" :disabled="costImpactData.inventoryProductFlag !== 'Y'" style="width: 130px"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="costImpactData" style="margin-top: 10px;">
              <el-form-item style="margin-top: 20px;width: 155px">
                <el-checkbox v-model="costImpactData.newOrderFlag" true-label="Y">新订单</el-checkbox>
              </el-form-item>
              <el-form-item label="数量">
                <el-input class="inlineNumber numInput" v-model="costImpactData.newOrderNumber" :disabled="costImpactData.newOrderFlag !== 'Y'" type="number" style="width: 100px"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="costImpactData" style="margin-top: 10px;">
              <el-form-item style="margin-top: 20px;width: 155px">
                <el-checkbox v-model="costImpactData.affectedFlag" true-label="Y">影响的原材料及其库存量</el-checkbox>
              </el-form-item>
              <el-form-item label="数量">
                <el-input class="inlineNumber numInput" v-model="costImpactData.affectedNumber" :disabled="costImpactData.affectedFlag !== 'Y'" type="number" style="width: 100px"></el-input>
              </el-form-item>
              <el-form-item label="处理意见">
                <dict-data-select v-model="costImpactData.affectedOpinions" :disabled="costImpactData.affectedFlag !== 'Y'" style="width: 130px" dict-type="change_affected_opinions"></dict-data-select>
              </el-form-item>
              <el-form-item label=" " style="margin-left: -10px">
                <el-input v-model="costImpactData.affectedRemark" :disabled="costImpactData.affectedFlag !== 'Y'" style="width: 300px"></el-input>
              </el-form-item>
              <el-form-item>
                <span style="cursor: pointer" slot="label" @click="getBaseList(103, 5)"><a herf="#">执行人</a></span>
                <el-input v-model="costImpactData.affectedExecutorName" :disabled="costImpactData.affectedFlag !== 'Y'" style="width: 130px"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="costImpactData" style="margin-top: 10px;">
              <el-form-item label="ECN变更总成本" style="width: 155px">
                <el-input class="inlineNumber numInput" v-model="costImpactData.changeTotalCost" type="number" style="width: 125px"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="costImpactData.remark" style="width: 692px"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <el-footer style="height:25px;text-align:center">
            <el-button v-if="InventoryCostImpactFlag" type="primary" @click="inventoryCostImpactSave">保存</el-button>
            <el-button type="primary" @click="closeModalFlag">关闭</el-button>
          </el-footer>
        </el-tab-pane>

        <el-tab-pane label="TP&执行信息" name="actionInformation">
          <div style="height: 675px">
            <el-form :inline="true" label-position="top" :model="executionInfoData" style="margin-top: -5px;">
              <el-form-item label="原菲林编号">
                <el-input v-model="executionInfoData.originalFilmNo" style="width: 230px"></el-input>
              </el-form-item>
              <el-form-item label="原啤刀编号">
                <el-input v-model="executionInfoData.originalDieCuttingRuleNo" style="width: 230px"></el-input>
              </el-form-item>
              <el-form-item label="原网板/印版编号">
                <el-input v-model="executionInfoData.originalStencilNo" style="width: 230px"></el-input>
              </el-form-item>
              <el-form-item label="ECN执行日期">
                <el-date-picker style="width: 130px" v-model="executionInfoData.executionDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" :editable=false></el-date-picker>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-position="top" :model="executionInfoData" style="margin-top: -5px;">
              <el-form-item label="新菲林编号">
                <el-input v-model="executionInfoData.newFilmNo" style="width: 230px"></el-input>
              </el-form-item>
              <el-form-item label="新啤刀编号">
                <el-input v-model="executionInfoData.newDieCuttingRuleNo" style="width: 230px"></el-input>
              </el-form-item>
              <el-form-item label="新网板/印版编号">
                <el-input v-model="executionInfoData.newStencilNo" style="width: 230px"></el-input>
              </el-form-item>
            </el-form>
            <div style="text-align: center ;font-size: 11px">
              <span> --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- </span>
            </div>
            <el-button type="primary" @click="chooseModel">选择执行模板</el-button>
            <div class="rq">
              <el-table
                :data="chooseItemList"
                height="500px"
                border
                style="width: 100%">
                <el-table-column
                  v-for="(item,index) in columnChooseItemList" :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
                  prop=""
                  header-align="center"
                  align="center"
                  min-width="100"
                  label="备注">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.itemRemark" style="height: 11px" allow-create>;width:98%"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  header-align="center"
                  align="center"
                  width="60"
                  label="操作">
                  <template slot-scope="scope">
                    <el-link style="cursor: pointer" v-if="scope.row.executeFlag !== 'Y'" @click="executeModal(scope.row)">执行</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <el-footer style="height:25px;text-align:center">
            <el-button v-if="actionInformationFlag" type="primary" @click="executionInformationSave">保存</el-button>
            <el-button type="primary" @click="closeModalFlag">关闭</el-button>
          </el-footer>
        </el-tab-pane>

        <el-tab-pane label="会签信息" name="countersignature">
          <div style="height: 675px">
            <el-button type="primary" @click="chooseCSModel">选择会签模板</el-button>
            <div class="rq">
              <el-table
                :data="chooseCSItemList"
                height="600px"
                border
                style="width: 100%">
                <el-table-column
                  v-for="(item,index) in columnChooseCSItemList" :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
                  prop=""
                  header-align="center"
                  align="center"
                  min-width="100"
                  label="备注">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.itemRemark" style="height: 11px" allow-create>;width:98%"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  header-align="center"
                  align="center"
                  width="60"
                  label="操作">
                  <template slot-scope="scope">
                    <el-link style="cursor: pointer" v-if="scope.row.executeFlag !== 'Y'" @click="executeCSModal(scope.row)">执行</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <el-footer style="height:25px;text-align:center">
            <el-button v-if="CountersignatureFlag" type="primary" @click="countersignatureSave">保存</el-button>
            <el-button type="primary" @click="closeModalFlag">关闭</el-button>
          </el-footer>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- ECN种类模态框 -->
    <el-dialog title="ECN种类" :close-on-click-modal="false" v-drag :visible.sync="EcnTypeModalFlag" width="900px">
      <el-form ref="dataForm" label-position="right">
        <el-row v-for="(item, index) in form" :key="index" style="margin-top: 10px">
          <el-col :span="8">
            <el-form-item :prop="'input.'+index+'.value'">
              <el-checkbox v-model="item.flag" @change="(val)=>ecnTypeHeaderChange(val,index)" :indeterminate="item.list.filter(a => a.flag === 'Y').length !== 0 && item.list.filter(a => a.flag === 'Y').length !== item.list.length" true-label="Y">{{item.value}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <div v-for="i in item.list">
              <el-form-item :prop="'input.'+index+'.value'">
                <el-checkbox v-model="i.flag" @change="(val)=>ecnTypeDetailChange(val,index)" true-label="Y">{{i.value}}</el-checkbox>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <el-footer style="height:30px;text-align:center">
        <el-button type="primary" @click="saveEcnTypeData">保存</el-button>
        <el-button type="primary" @click="EcnTypeModalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!-- ECN模板属性清单 -->
    <el-dialog title="属性清单" :close-on-click-modal="false" v-drag :visible.sync="chooseModelFlag" width="820px">
      <div class="rq">
        <el-form :inline="true" label-position="top" :model="chooseModelData">
          <el-form-item :label="'模板'">
            <el-select value="roleName" v-model="chooseModelData.codeNo" placeholder="请选择" style="width: 120px">
              <el-option
                v-for = "i in modelList"
                :key = "i.codeNo"
                :label = "i.codeDesc"
                :value = "i.codeNo">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="属性编码">
            <el-input v-model="chooseModelData.itemNo" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item label="属性名称">
            <el-input v-model="chooseModelData.itemDesc" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="' '">
            <el-button type="primary" @click="searchItemList()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :height="300"
          :data="itemList"
          ref="itemTable"
          @row-click="itemClickRow"
          @selection-change="selectionItem"
          border
          style="width: 100%;">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            v-for="(item,index) in columnItemList" :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="confirmItem">确认</el-button>
        <el-button type="primary" @click="chooseModelFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!-- 会签模板属性清单 -->
    <el-dialog title="属性清单" :close-on-click-modal="false" v-drag :visible.sync="chooseCSModelFlag" width="820px">
      <div class="rq">
        <el-form :inline="true" label-position="top" :model="chooseCSModelData">
          <el-form-item :label="'模板'">
            <el-select value="roleName" v-model="chooseCSModelData.codeNo" placeholder="请选择" style="width: 120px">
              <el-option
                v-for = "i in modelCSList"
                :key = "i.codeNo"
                :label = "i.codeDesc"
                :value = "i.codeNo">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="属性编码">
            <el-input v-model="chooseCSModelData.itemNo" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item label="属性名称">
            <el-input v-model="chooseCSModelData.itemDesc" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="' '">
            <el-button type="primary" @click="searchCSItemList()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :height="300"
          :data="itemCSList"
          ref="itemCSTable"
          @row-click="itemCSClickRow"
          @selection-change="selectionCSItem"
          border
          style="width: 100%;">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            v-for="(item,index) in columnCSItemList" :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="confirmCSItem">确认</el-button>
        <el-button type="primary" @click="chooseCSModelFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <ChooseList ref="baseList" @getBaseData="getBaseData"></ChooseList>

    <!-- 上传文件的modal -->
    <changeUploadFile ref="changeUploadFile" @refreshPageTables="getFileData" v-drag></changeUploadFile>
  </div>
</template>

<script>
  import {
    technicalSpecificationSearch, // 获取技术参数卡列表
    getDepartmentByUserName, // 根据用户编码获得用户部门
    changeRequestSave, // 新增变更申请
    getChangeNo, // 获取申请单号
    deleteChangeFiles, // 根据变更单号删除文件,
    costImpactSave, // 新增库存成本影响
    executionSave, // 新增执行信息
    getEcnTypeData, // 查询ECN种类数据
    getEcnModel, // 查询ECN的模板
    getItemList, // 查询模板属性
    countersignatureSave, // 新增会签信息
  } from "@/api/changeManagement/changeManagement.js"
  import ChooseList from '@/views/modules/common/Chooselist'
  import {
    uploadFile // 文件上传
  } from '@/api/oss/oss.js'
  import DictDataSelect from '../sys/dict-data-select.vue'
  import changeUploadFile from "../base/upload_file.vue"
  import dayjs from "dayjs";
  export default {
    components: {
      changeUploadFile,
      DictDataSelect,
      ChooseList
    },
    data() {
      return {
        form: [],
        // 导出
        exportData: [],
        exportName: '工程变更申请' + this.dayjs().format('YYYYMMDDHHmmss'),
        exportHeader: ['工程变更申请'],
        exportFooter: [],
        resultList: [],
        // ======== 行高 ========
        height: 200,
        // ======== 分页 ========
        pageIndex: 1,
        pageSize: 50,
        totalPage: 0,
        activeName: 'basicInformation',
        // 条件查询
        searchData: {
          site: this.$store.state.user.site,
          projectId: '',
          projectDesc: '',
          codeNo: '',
          page: 1,
          limit: 10
        },
        // ======== 数据对象 ========
        modalData: {
          site: this.$store.state.user.site,
          changeNo: '',
          applicantId: '',
          applicantName: '',
          applicationDepartmentId: '',
          applicationDepartmentName: '',
          applyDate: '',
          changeImpact: '',
          changeImpactDesc: '',
          ecnStage: '',
          changeType: '',
          tpEngineerId: '',
          tpEngineerName: '',
          changePhaseInDate: '',
          dfIsProduct: '',
          printing: '',
          manufacturingCostIsChange: '',
          changeRequestDesc: '',
          isReQuote: '',
          ulCertificationRequirements: '',
          ulContinueToMeetDemand: '',
          gpCertificationRequirements: '',
          gpContinueToMeetDemand: '',
          createBy: '',
          detailList: [],
          ecnTypeData: []
        },
        costImpactData: {
          site: this.$store.state.user.site,
          changeNo: '',
          productionProductFlag: '',
          inventoryProductFlag: '',
          newOrderFlag: '',
          affectedFlag: '',
          productionProductNumber: '',
          productionProductOpinions: '',
          productionProductRemark: '',
          productionProductExecutor: '',
          productionProductExecutorName: '',
          inventoryProductNumber: '',
          inventoryProductOpinions: '',
          inventoryProductRemark: '',
          inventoryProductExecutor: '',
          inventoryProductExecutorName: '',
          newOrderNumber: '',
          affectedNumber: '',
          affectedOpinions: '',
          affectedRemark: '',
          affectedExecutor: '',
          affectedExecutorName: '',
          changeTotalCost: '',
          remark: '',
          createBy: '',
          updateBy: ''
        },
        executionInfoData: {
          site: this.$store.state.user.site,
          changeNo: '',
          originalFilmNo: '',
          newFilmNo: '',
          originalDieCuttingRuleNo: '',
          newDieCuttingRuleNo: '',
          originalStencilNo: '',
          newStencilNo: '',
          executionDate: '',
          createBy: '',
          updateBy: '',
          chooseItemList: []
        },
        countersignatureData: {
          site: this.$store.state.user.site,
          changeNo: '',
          createBy: '',
          updateBy: '',
          chooseCSItemList: []
        },
        chooseModelData: {
          site: this.$store.state.user.site,
          functionType: 'ECN',
          itemNo: '',
          itemDesc: '',
          codeNo: ''
        },
        chooseCSModelData: {
          site: this.$store.state.user.site,
          functionType: 'ECN',
          itemNo: '',
          itemDesc: '',
          codeNo: ''
        },
        // ======== 数据列表 ========
        dataList: [],
        chooseDataList: [],
        fileList: [],
        modelList: [],
        modelCSList: [],
        itemList: [],
        itemCSList: [],
        chooseItemList: [],
        chooseCSItemList: [],
        // ======== 列表表头 ========
        columnList: [
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1Site',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'site',
            headerAlign: 'center',
            align: 'center',
            columnLabel: 'Site',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 60
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1BuNo',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'buNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: 'BU',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1ProjectId',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'projectId',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '项目编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 120
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1ProjectDesc',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'projectDesc',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '项目名称',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 180
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1CustomerId',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'customerId',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '客户编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 120
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1CustomerDesc',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'customerDesc',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '客户名称',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 180
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1CodeNo',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'codeNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '技术参数卡',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 120
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1CodeNo',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'ecnFlag',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '状态',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table1RevNo',
            tableId: '108001Table1',
            tableName: '技术参数卡',
            columnProp: 'revNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '版本号',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 80
          },
        ],
        columnChooseDataList: [
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table2PartNo',
            tableId: '108001Table2',
            tableName: '所选变更列表',
            columnProp: 'partNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '物料编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table2PartDesc',
            tableId: '108001Table2',
            tableName: '所选变更列表',
            columnProp: 'partDesc',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '物料描述',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 180
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table2DrawingNo',
            tableId: '108001Table2',
            tableName: '所选变更列表',
            columnProp: 'drawingNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '图纸编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 90
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table2DraftNo',
            tableId: '108001Table2',
            tableName: '所选变更列表',
            columnProp: 'draftNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '图稿编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 90
          },
        ],
        columnChooseItemList: [
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table3ItemNo',
            tableId: '108001Table3',
            tableName: '执行属性表',
            columnProp: 'itemNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '属性编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table3ItemDesc',
            tableId: '108001Table3',
            tableName: '执行属性表',
            columnProp: 'itemDesc',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '属性名称',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 150
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table3ExecuteFlag',
            tableId: '108001Table3',
            tableName: '执行属性表',
            columnProp: 'executeFlag',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '是否执行',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table3Executor',
            tableId: '108001Table3',
            tableName: '执行属性表',
            columnProp: 'executor',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '执行人',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 100
          },{
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table3ExecuteDate',
            tableId: '108001Table3',
            tableName: '执行属性表',
            columnProp: 'itemExecutionDate',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '执行时间',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 150
          },

        ],
        columnChooseCSItemList: [
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table6ItemNo',
            tableId: '108001Table6',
            tableName: '执行属性表',
            columnProp: 'itemNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '属性编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table6ItemDesc',
            tableId: '108001Table6',
            tableName: '执行属性表',
            columnProp: 'itemDesc',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '属性名称',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 150
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table6ExecuteFlag',
            tableId: '108001Table6',
            tableName: '执行属性表',
            columnProp: 'executeFlag',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '是否执行',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table6Executor',
            tableId: '108001Table6',
            tableName: '执行属性表',
            columnProp: 'executor',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '执行人',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 100
          },{
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table6ExecuteDate',
            tableId: '108001Table6',
            tableName: '执行属性表',
            columnProp: 'itemExecutionDate',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '执行时间',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 150
          },

        ],
        columnItemList: [
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table4ItemNo',
            tableId: '108001Table4',
            tableName: '执行属性表',
            columnProp: 'itemNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '属性编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table4ItemDesc',
            tableId: '108001Table4',
            tableName: '执行属性表',
            columnProp: 'itemDesc',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '属性名称',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 150
          },
        ],
        columnCSItemList: [
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table5ItemNo',
            tableId: '108001Table5',
            tableName: '执行属性表',
            columnProp: 'itemNo',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '属性编码',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 108001,
            serialNumber: '108001Table5ItemDesc',
            tableId: '108001Table5',
            tableName: '执行属性表',
            columnProp: 'itemDesc',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '属性名称',
            columnHidden: false,
            columnImage: false,
            status: true,
            fixed: '',
            columnWidth: 150
          },
        ],
        // ======== 必填规则 ========
        rules: {
          applicantId: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          applyDate: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          changeImpact: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          changeImpactDesc: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          ecnStage: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          changeType: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          tpEngineerId: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          changePhaseInDate: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          dfIsProduct: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          printing: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          manufacturingCostIsChange: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          changeRequestDesc: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          isReQuote: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          ulCertificationRequirements: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          ulContinueToMeetDemand: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          gpCertificationRequirements: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
          gpContinueToMeetDemand: [
            {
              required: true,
              message: ' ',
              trigger: ['blur','change']
            }
          ],
        },
        // ======== 复选数据集 ========
        dataSelections: [],
        itemSelections: [],
        itemCSSelections: [],
        // ======== 模态框开关控制 ========
        modalFlag: false,
        modalDisableFlag: false,
        EcnTypeModalFlag: false,
        basicInformationFlag: false,
        InventoryCostImpactFlag: false,
        actionInformationFlag: false,
        chooseModelFlag: false,
        chooseCSModelFlag: false,
        CountersignatureFlag: false,
      }
    },

    created () {
      this.getDataList()
      this.getEcnModel()
      this.getEcnCSModel()
    },

    mounted() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 180
      })
    },
    computed:{

    },
    methods: {

      ecnTypeHeaderChange (val,index) {
        if (val === 'Y') {
          for (let i = 0; i < this.form[index].list.length; i++) {
            this.form[index].list[i].flag = 'Y'
          }
        } else {
          for (let i = 0; i < this.form[index].list.length; i++) {
            this.form[index].list[i].flag = 'N'
          }
        }
      },

      ecnTypeDetailChange (val,index) {
        if (this.form[index].list.every(x => x.flag === 'Y')) {
          this.form[index].flag = 'Y'
        }else {
          this.form[index].flag = 'N'
        }
      },

      selectFlag (row) {
        if (row.ecnFlag === '变更中') {
          return false
        } else {
          return true
        }
      },

      //每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },

      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },

      // 获取数据列表
      getDataList () {
        this.searchData.limit = this.pageSize
        this.searchData.page = this.pageIndex
        technicalSpecificationSearch(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)
          }
        })
      },

      // 复选物料信息
      selectionData (val) {
        this.dataSelections = val
        this.$refs.selectDiv.setLengthselected(this.dataSelections.length)
      },

      // 页签切换
      refreshCurrentTabTable () {

      },

      // 变更申请模态框
      changeModel () {
        if (this.dataSelections.length === 0) {
          this.$message.warning('请选择要变更的技术参数卡！')
          return
        }
        // 获取申请单号
        let tempData = {
          site: this.$store.state.user.site,
          transType: 'change_no'
        }
        getChangeNo(tempData).then(({data}) => {
          if (data.code === 0) {
            this.modalData = {
              site: this.$store.state.user.site,
              changeNo: data.changeNo,
              applicantId: this.$store.state.user.name,
              applicantName: this.$store.state.user.userDisplay,
              applicationDepartmentId: '',
              applicationDepartmentName: '',
              applyDate: new Date(+ new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, ''),
              changeImpact: 'N',
              changeImpactDesc: '',
              ecnStage: '',
              changeType: '',
              tpEngineerId: '',
              tpEngineerName: '',
              changePhaseInDate: new Date(+ new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, ''),
              dfIsProduct: '',
              printing: '',
              manufacturingCostIsChange: '',
              changeRequestDesc: '',
              isReQuote: '',
              ulCertificationRequirements: '',
              ulContinueToMeetDemand: '',
              gpCertificationRequirements: '',
              gpContinueToMeetDemand: '',
              createBy: this.$store.state.user.name,
              detailList: [],
              ecnTypeData: []
            }
            this.costImpactData = {
              site: this.$store.state.user.site,
              changeNo: data.changeNo,
              productionProductFlag: '',
              inventoryProductFlag: '',
              newOrderFlag: '',
              affectedFlag: '',
              productionProductNumber: '',
              productionProductOpinions: '',
              productionProductRemark: '',
              productionProductExecutor: '',
              productionProductExecutorName: '',
              inventoryProductNumber: '',
              inventoryProductOpinions: '',
              inventoryProductRemark: '',
              inventoryProductExecutor: '',
              inventoryProductExecutorName: '',
              newOrderNumber: '',
              affectedNumber: '',
              affectedOpinions: '',
              affectedRemark: '',
              affectedExecutor: '',
              affectedExecutorName: '',
              changeTotalCost: '',
              remark: '',
              createBy: this.$store.state.user.name,
            }
            this.executionInfoData = {
              site: this.$store.state.user.site,
              changeNo: data.changeNo,
              originalFilmNo: '',
              newFilmNo: '',
              originalDieCuttingRuleNo: '',
              newDieCuttingRuleNo: '',
              originalStencilNo: '',
              newStencilNo: '',
              executionDate: new Date(+ new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, ''),
              createBy: this.$store.state.user.name,
              chooseItemList: []
            }
            this.countersignatureData = {
              site: this.$store.state.user.site,
              changeNo: data.changeNo,
              createBy: this.$store.state.user.name,
              chooseCSItemList: []
            }
            this.getDepartmentByUserName()
            this.getEcnTypeData() // 获取ECN种类
            this.chooseDataList = this.dataSelections
            this.activeName = 'basicInformation'
            this.modalFlag = true
            this.modalDisableFlag = false
            this.basicInformationFlag = true
            this.InventoryCostImpactFlag = true
            this.actionInformationFlag = true
            this.CountersignatureFlag = true
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },

      // 删除变更申请模态框
      closeModalFlag () {
        // deleteChangeFiles(this.modalData).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.getDataList()
        //     this.modalFlag = false
        //   } else {
        //     this.$alert(data.msg, '错误', {
        //       confirmButtonText: '确定'
        //     })
        //   }
        // })
        this.modalFlag = false
      },

      // 新增变更申请
      saveData () {
        this.modalData.detailList = this.chooseDataList
        this.modalData.ecnTypeData = this.form
        if (this.modalData.applicantId === '' || this.modalData.applicantId == null) {
          this.$message.warning('请选择申请人员！')
          return
        }
        if (this.modalData.applyDate === '' || this.modalData.applyDate == null) {
          this.$message.warning('请选择申请日期！')
          return
        }
        if (this.modalData.changeImpact === '' || this.modalData.changeImpact == null) {
          this.$message.warning('请选择ECN变更影响！')
          return
        }
        if ((this.modalData.changeImpactDesc === '' || this.modalData.changeImpactDesc == null) && this.modalData.changeImpact === 'Y') {
          this.$message.warning('请填写变更影响描述！')
          return
        }
        if (this.modalData.ecnStage === '' || this.modalData.ecnStage == null) {
          this.$message.warning('请选择ECN阶段！')
          return
        }
        if (this.modalData.changeType === '' || this.modalData.changeType == null) {
          this.$message.warning('请选择变更类别！')
          return
        }
        if (this.modalData.tpEngineerId === '' || this.modalData.tpEngineerId == null) {
          this.$message.warning('请选择TP工程师！')
          return
        }
        if (this.modalData.changePhaseInDate === '' || this.modalData.changePhaseInDate == null) {
          this.$message.warning('请选择变更生效日期！')
          return
        }
        if (this.modalData.dfIsProduct === '' || this.modalData.dfIsProduct == null) {
          this.$message.warning('请选择是否DF是产品！')
          return
        }
        if (this.modalData.printing === '' || this.modalData.printing == null) {
          this.$message.warning('请选择印刷方式！')
          return
        }
        if (this.modalData.manufacturingCostIsChange === '' || this.modalData.manufacturingCostIsChange == null) {
          this.$message.warning('请选择制造成本是否变更！')
          return
        }
        if (this.modalData.changeRequestDesc === '' || this.modalData.changeRequestDesc == null) {
          this.$message.warning('请填写变更要求描述！')
          return
        }
        if (this.modalData.isReQuote === '' || this.modalData.isReQuote == null) {
          this.$message.warning('请选择是否重新报价！')
          return
        }
        if (this.modalData.ulCertificationRequirements === '' || this.modalData.ulCertificationRequirements == null) {
          this.$message.warning('请选择原产品是否UL认证要求！')
          return
        }
        if (this.modalData.ulContinueToMeetDemand === '' || this.modalData.ulContinueToMeetDemand == null) {
          this.$message.warning('请选择变更后能否继续满足此需求(UL)！')
          return
        }
        if (this.modalData.gpCertificationRequirements === '' || this.modalData.gpCertificationRequirements == null) {
          this.$message.warning('请选择原产品是否GP要求！')
          return
        }
        if (this.modalData.gpContinueToMeetDemand === '' || this.modalData.gpContinueToMeetDemand == null) {
          this.$message.warning('请选择变更后能否继续满足此需求(GP)！')
          return
        }
        changeRequestSave(this.modalData).then(({data}) => {
          if (data && data.code === 0) {
            for (let i = 0; i <this.fileList.length; i++) {
              uploadFile(this.fileList[i]).then(({data}) => {
                if (data.code !== 0) {
                  this.$message.warning(data.msg)
                }
              })
            }
            this.getDataList()
            this.basicInformationFlag = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },

      // 新增库存成本影响
      inventoryCostImpactSave () {
        if (this.costImpactData.productionProductFlag === 'Y') { // 在生产品
          if (this.costImpactData.productionProductNumber == null || this.costImpactData.productionProductNumber === '') {
            this.$message.warning('请填写在生产品数量！')
            return
          }
          if (this.costImpactData.productionProductNumber <= 0) {
            this.$message.warning('在生产品数量不能小于等于0！')
            return
          }
          if (this.costImpactData.productionProductOpinions == null || this.costImpactData.productionProductOpinions === '') {
            this.$message.warning('请填写在生产品处理意见！')
            return
          }
          if (this.costImpactData.productionProductExecutor == null || this.costImpactData.productionProductExecutor === '') {
            this.$message.warning('请填写在生产品执行人！')
            return
          }
        }
        if (this.costImpactData.inventoryProductFlag === 'Y') { // 成品库存
          if (this.costImpactData.inventoryProductNumber == null || this.costImpactData.inventoryProductNumber === '') {
            this.$message.warning('请填写成品库存数量！')
            return
          }
          if (this.costImpactData.inventoryProductNumber <= 0) {
            this.$message.warning('成品库存数量不能小于等于0！')
            return
          }
          if (this.costImpactData.inventoryProductOpinions == null || this.costImpactData.inventoryProductOpinions === '') {
            this.$message.warning('请填写成品库存处理意见！')
            return
          }
          if (this.costImpactData.inventoryProductExecutor == null || this.costImpactData.inventoryProductExecutor === '') {
            this.$message.warning('请填写成品库存执行人！')
            return
          }
        }
        if (this.costImpactData.newOrderFlag === 'Y') { // 新订单
          if (this.costImpactData.newOrderNumber == null || this.costImpactData.newOrderNumber === '') {
            this.$message.warning('请填写新订单数量！')
            return
          }
          if (this.costImpactData.newOrderNumber <= 0) {
            this.$message.warning('新订单数量不能小于等于0！')
            return
          }
        }
        if (this.costImpactData.affectedFlag === 'Y') { // 影响的原材料及其库存量
          if (this.costImpactData.affectedNumber == null || this.costImpactData.affectedNumber === '') {
            this.$message.warning('请填写影响的原材料及其库存量数量！')
            return
          }
          if (this.costImpactData.affectedNumber <= 0) {
            this.$message.warning('影响的原材料及其库存量数量不能小于等于0！')
            return
          }
          if (this.costImpactData.affectedOpinions == null || this.costImpactData.affectedOpinions === '') {
            this.$message.warning('请填写影响的原材料及其库存量处理意见！')
            return
          }
          if (this.costImpactData.affectedExecutor == null || this.costImpactData.affectedExecutor === '') {
            this.$message.warning('请填写影响的原材料及其库存量执行人！')
            return
          }
        }
        if (this.costImpactData.changeTotalCost == null || this.costImpactData.changeTotalCost === '') {
          this.$message.warning('请填写ECN变更总成本！')
          return
        }
        if (this.costImpactData.changeTotalCost <= 0) {
          this.$message.warning('ECN变更总成本不能小于等于0！')
          return
        }
        costImpactSave(this.costImpactData).then(({data}) => {
          if (data && data.code === 0) {
            this.InventoryCostImpactFlag = false
            this.getDataList()
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },

      // 新增执行信息
      executionInformationSave () {
        if (this.chooseItemList.length === 0) {
          this.$message.warning('请选择模板属性!')
          return;
        } else {
          this.executionInfoData.chooseItemList = this.chooseItemList
        }
        if (this.executionInfoData.originalDieCuttingRuleNo == null || this.executionInfoData.originalDieCuttingRuleNo === '') {
          this.$message.warning('请填写原啤刀编号!')
          return;
        }
        if (this.executionInfoData.newDieCuttingRuleNo == null || this.executionInfoData.newDieCuttingRuleNo === '') {
          this.$message.warning('请填写新啤刀编号!')
          return;
        }
        if (this.executionInfoData.originalStencilNo == null || this.executionInfoData.originalStencilNo === '') {
          this.$message.warning('请填写原网板/印版编号!')
          return;
        }
        if (this.executionInfoData.newStencilNo == null || this.executionInfoData.newStencilNo === '') {
          this.$message.warning('请填写新网板/印版编号!')
          return;
        }
        if (this.executionInfoData.executionDate == null || this.executionInfoData.executionDate === '') {
          this.$message.warning('请选择ECN执行日期!')
          return;
        }
        executionSave(this.executionInfoData).then(({data}) => {
          if (data && data.code === 0) {
            this.actionInformationFlag = false
            this.getDataList()
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },

      // 删除所选技术参数卡
      deleteChooseDataModal (row) {
        this.$confirm(`是否删除该技术参数卡的变更?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.chooseDataList = this.chooseDataList.filter(a => {
            return a.codeNo !== row.codeNo
          })
        })
      },

      // 根据人员编码查人员部门
      getDepartmentByUserName () {
        let tempData = {
          site: this.$store.state.user.site,
          username: this.modalData.applicantId
        }
        getDepartmentByUserName(tempData).then(({data}) => {
          if (data.code === 0) {
            this.modalData.applicationDepartmentId = data.rows[0].departmentNo
            this.modalData.applicationDepartmentName = data.rows[0].departmentName
          }
        })
      },

      // 回车换行
      focusNextInput (index, type) {
        let aaa = ''
        if (this.chooseDataList.length - 1 === index) {
          aaa = `${type}0`
        } else {
          aaa = `${type}${index + 1}`
        }
        this.$nextTick(() => {
          this.$refs[aaa].focus()
        })
      },

      // 上传文件
      uploadFileModal () {
        let currentData = {
          titleCon: '工程变更文件上传',
          site: this.modalData.site,
          createBy: this.$store.state.user.name,
          dataNo: this.modalData.changeNo,
          fileRemark: '',
          folder: 'change',
        }
        //打开组件 去做新增业务
        this.$nextTick(() => {
          this.$refs.changeUploadFile.init(currentData)
        })
      },

      // 得到保存的文件对象
      getFileData (fData) {
        const formData = new FormData()
        // 片接文件
        formData.append("file", fData.file)
        formData.append("orderRef1", fData.site)
        formData.append("orderRef2", fData.dataNo)
        formData.append("fileRemark", fData.fileRemark)
        formData.append("folder", fData.folder)
        this.fileList.push(formData)
      },

      // 选择ECN种类模态框
      chooseEcnTypeModal () {
        this.EcnTypeModalFlag = true
      },

      // 查询ECN种类数据
      getEcnTypeData () {
        let tempData = {
          site: this.$store.state.user.site
        }
        getEcnTypeData(tempData).then(({data}) => {
          if (data.code === 0) {
            this.form = data.rows
          }
        })
      },

      // 保存ECN种类
      saveEcnTypeData () {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {}
        })
        this.EcnTypeModalFlag = false
      },

      // 选择模板属性
      chooseModel () {
        this.chooseModelData = {
          site: this.$store.state.user.site,
          itemNo: '',
          itemDesc: '',
          functionType: 'ECN',
          codeNo: this.modelList.length > 0 ? this.modelList[0].codeNo : ''
        }
        // 先清空缓存选中
        this.$nextTick(() => this.$refs.itemTable.clearSelection())
        // 查询所有部门
        getItemList(this.chooseModelData).then(({data}) => {
          if (data && data.code === 0) {
            this.itemList = data.rows
            this.itemList.forEach(val => {
              // 回显选中的部门
              if (this.chooseItemList.map(val => val.itemNo).includes(val.itemNo)) {
                this.$nextTick(() => this.$refs.itemTable.toggleRowSelection(val, true))
              }
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
        this.chooseModelFlag = true
      },

      // 查询属性
      searchItemList () {
        getItemList(this.chooseModelData).then(({data}) => {
          if (data.code === 0) {
            this.itemList = data.rows
          }
        })
      },

      // 单机选择
      itemClickRow (row) {
        this.$refs.itemTable.toggleRowSelection(row)
      },

      // 复选属性
      selectionItem (val) {
        this.itemSelections = val
      },

      // 确认多选属性
      confirmItem () {
        if (this.itemSelections.length === 0) {
          this.$message.warning("请勾选属性!")
          return
        }
        this.chooseItemList = this.itemSelections
        this.chooseModelFlag = false
      },

      // 执行所选属性
      executeModal (row) {
        row.executeFlag = 'Y'
        row.itemExecutionDate = new Date(+ new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        row.executor = this.$store.state.user.name
      },

      // 查询ECN的模板
      getEcnModel () {
        let tempData = {
          site: this.$store.state.user.site,
          functionType: 'ECN'
        }
        getEcnModel(tempData).then(({data}) => {
          if (data.code === 0) {
            this.modelList = data.rows
          }
        })
      },


      // ===================================

      // 查询会签的模板
      getEcnCSModel () {
        let tempData = {
          site: this.$store.state.user.site,
          functionType: 'ECN'
        }
        getEcnModel(tempData).then(({data}) => {
          if (data.code === 0) {
            this.modelCSList = data.rows
          }
        })
      },

      // 选择会签模板属性
      chooseCSModel () {
        this.chooseCSModelData = {
          site: this.$store.state.user.site,
          itemNo: '',
          itemDesc: '',
          functionType: 'ECN',
          codeNo: this.modelCSList.length > 0 ? this.modelCSList[0].codeNo : ''
        }
        // 先清空缓存选中
        this.$nextTick(() => this.$refs.itemCSTable.clearSelection())
        // 查询所有属性
        getItemList(this.chooseCSModelData).then(({data}) => {
          if (data && data.code === 0) {
            this.itemCSList = data.rows
            this.itemCSList.forEach(val => {
              // 回显选中的部门
              if (this.chooseCSItemList.map(val => val.itemNo).includes(val.itemNo)) {
                this.$nextTick(() => this.$refs.itemCSTable.toggleRowSelection(val, true))
              }
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
        this.chooseCSModelFlag = true
      },

      // 查询CS属性
      searchCSItemList () {
        getItemList(this.chooseCSModelData).then(({data}) => {
          if (data.code === 0) {
            this.itemCSList = data.rows
          }
        })
      },

      // 单击选择
      itemCSClickRow (row) {
        this.$refs.itemCSTable.toggleRowSelection(row)
      },

      // 复选CS属性
      selectionCSItem (val) {
        this.itemCSSelections = val
      },

      // 确认多选CS属性
      confirmCSItem () {
        if (this.itemCSSelections.length === 0) {
          this.$message.warning("请勾选属性!")
          return
        }
        this.chooseCSItemList = this.itemCSSelections
        this.chooseCSModelFlag = false
      },

      // 执行所选属性
      executeCSModal (row) {
        row.executeFlag = 'Y'
        row.itemExecutionDate = new Date(+ new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        row.executor = this.$store.state.user.name
      },

      // 新增会签信息
      countersignatureSave () {
        if (this.chooseCSItemList.length === 0) {
          this.$message.warning('请选择模板属性!')
          return;
        } else {
          this.countersignatureData.chooseCSItemList = this.chooseCSItemList
        }
        countersignatureSave(this.countersignatureData).then(({data}) => {
          if (data && data.code === 0) {
            this.CountersignatureFlag = false
            this.getDataList()
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },

      // 获取基础数据列表S
      getBaseList (val, type) {
        this.tagNo = val
        this.tagNo1 = type
        this.$nextTick(() => {
          let strVal = ''
          if (val === 103) {
            if (type === 1) {
              strVal = this.modalData.applicantId
            } else if (type === 2) {
              strVal = this.modalData.tpEngineerId
            } else if (type === 3) {
              if (this.costImpactData.productionProductFlag !== 'Y') {
                return
              } else {
                strVal = this.costImpactData.productionProductExecutor
              }
            } else if (type === 4) {
              if (this.costImpactData.inventoryProductFlag !== 'Y') {
                return
              } else {
                strVal = this.costImpactData.inventoryProductExecutor
              }
            } else if (type === 5) {
              if (this.costImpactData.affectedFlag !== 'Y') {
                return
              } else {
                strVal = this.costImpactData.affectedExecutor
              }
            }
          }
          this.$refs.baseList.init(val, strVal)
        })
      },

      // 列表方法的回调
      getBaseData (val) {
        if (this.tagNo === 103) {
          if (this.tagNo1 === 1) {
            this.modalData.applicantId = val.username
            this.modalData.applicantName = val.user_display
            this.getDepartmentByUserName()
          } else if (this.tagNo1 === 2) {
            this.modalData.tpEngineerId = val.username
            this.modalData.tpEngineerName = val.user_display
          } else if (this.tagNo1 === 3) {
            this.costImpactData.productionProductExecutor = val.username
            this.costImpactData.productionProductExecutorName = val.user_display
            //this.$set(this.costImpactData,'productionProductExecutorName',val.user_display)
          } else if (this.tagNo1 === 4) {
            this.costImpactData.inventoryProductExecutor = val.username
            this.costImpactData.inventoryProductExecutorName = val.user_display
            //this.$set(this.costImpactData,'inventoryProductExecutorName',val.user_display)
          } else if (this.tagNo1 === 5) {
            this.costImpactData.affectedExecutor = val.username
            this.costImpactData.affectedExecutorName = val.user_display
            //this.$set(this.costImpactData,'affectedExecutorName',val.user_display)
          }
        }
      },

      // ======== 导出相关方法 ========
      /**
       * 导出excel
       */
      async createExportData () {
        this.searchData.limit = -1
        this.searchData.page = 1
        await technicalSpecificationSearch(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">
.numInput /deep/ .el-input__inner{
  text-align: right;
}
/deep/  .inlineNumber input::-webkit-outer-spin-button,
/deep/  .inlineNumber input::-webkit-inner-spin-button {
  -webkit-appearance: none;

}
/deep/  .inlineNumber input[type="number"]{
  -moz-appearance: textfield;
  padding-right: 5px !important;
}
</style>