erp_fans/src/views/EHSD/saleContract/priceSheetEstimate/index.vue

<template>
  <div class="pageIndexClass">
    <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
             highlight-current-row :action-list="[
         
        ]" @get-list="getList">

      <template #code="{ item }">
        <div style="width: 100%">
          <span style="color: #409eff; cursor: pointer; word-break: break-all" @click="getDtlOne(item,true,0)">{{ item.code }}</span>

        </div>
      </template>

      <template #status="{ item }">
        <div style="width: 100%">
          <span :style="{color: item.status ==88? 'red' :''}">{{dictValueLabel(item.status, statusData)}}</span>
        </div>
      </template>

      <template #quotationStatus="{item}">
        <div style="width: 100%">
          <span
                :class="{ 'tag-active-1': item.quotationStatus==1, 'tag-active': item.quotationStatus==2 }">{{dictValueLabel(item.quotationStatus, quotationStatusData)}}</span>
        </div>
      </template>

      <template #amount="{ item }">
        <div>
          <!-- <span style="padding-right: 4px">{{ item.currency }}</span> -->
          <span>{{ moneyFormat(item.prodAmount, 2) }}</span>
        </div>
      </template>

      <template #product="{ item }">
        <div style="width:100%;">
          <el-popover placement="bottom-start" title="" :width="300" trigger="hover">
            <div default>
              <div v-for="(product,index) in item.quotationProductList">
                {{index+1}}、{{product.productName}}
                <!-- <span v-if="index<item.quotationProductList.length-1">,</span> -->
              </div>
            </div>
            <template #reference>
              <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer">
                <span v-for="(product,index) in item.quotationProductList">
                  {{product.productName}}
                  <span v-if="index<item.quotationProductList.length-1"> , </span>
                </span>
              </div>
            </template>
          </el-popover>
        </div>
      </template>

    </byTable>

    <el-dialog v-if="openAddDialog" v-model="openAddDialog" title="报价评估" width="98%" append-to-body>
      <div style="height:calc(100vh - 215px)" class="box">
        <div class="left">
          <!-- <el-card style="width:100%;margin-bottom:15px" v-for="(item,index) in quotationProductList" :key="index">
            <div style="text-align:right">
              <el-button plain type="primary" @click="handleLookDetail(item,index)">查看</el-button>
              <el-button plain type="primary" @click="handleReportPrice(item,index)">报价</el-button>
            </div>
            <el-table :data="[item]" style="width: 100%;">
              <el-table-column label="图片" width="80">
                <template #default="{ row }">
                  <div v-if="row.fileUrl">
                    <img :src="row.fileUrl" class="pic" @click="onPicture(row.fileUrl)" />
                  </div>
                  <div v-else></div>
                </template>
              </el-table-column>
              <el-table-column prop="productCode" label="商品编码" width="190" />
              <el-table-column prop="productName" label="商品名称" min-width="200" />
              <el-table-column label="规格尺寸 (cm)" width="150">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productColor" label="颜色" width="100" />
              <el-table-column label="数量" width="120" prop="quantity">
              </el-table-column>
              <el-table-column label="单价" width="120" prop="prodPrice" fixed="right">
                <template #default="{ row, $index }">
                  <div style="width: 100%;">
                    <span :style="{
                      color:row.prodPrice?'red':''
                    }">￥{{row.prodPrice}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="小计" width="120" fixed="right">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <span :style="{
                      color:row.prodPrice?'red':''
                    }">￥{{row.amount}}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-card> -->
          <el-form disabled label-width="80px">
            <el-collapse v-model="activeNames">
              <el-card style="margin-bottom:15px" v-for="(product,index) in quotationProductList" :key="index">
                <el-collapse-item :name="index">
                  <template #title>
                    <el-row style="width:100%">
                      <el-col :span="8">
                        <div style="font-size:14px;font-weight:700;padding-left:10px">
                          产品编码：{{product.productCode || '定制产品'}}
                        </div>
                      </el-col>
                      <el-col :span="4">
                        <!-- <el-form-item label="数量" class="margin-b-0" :prop="'quotationProductList.' +index + '.quantity'" :rules="rules.quantity"
                                      :inline-message="true" @click.stop>
                          <el-input-number v-model="product.quantity" placeholder="请输入" style="width: 100%" :precision="0" :controls="false" :min="1"
                                           onmousewheel="return false;" />
                        </el-form-item> -->
                        <span>数量：{{product.quantity}}</span>
                      </el-col>
                      <el-col :span="4">
                        <!-- <el-form-item label="单价" class="margin-b-0" @click.stop>
                          <el-input-number v-model="product.price" placeholder="" style="width: 100%" :precision="2" :controls="false" :min="1"
                                           onmousewheel="return false;" disabled />
                        </el-form-item> -->
                        单价：<span :style="{color:product.prodPrice?'red':''}">{{product.prodPrice}}</span>
                      </el-col>
                      <el-col :span="4">
                        <!-- <el-form-item label="总价" class="margin-b-0" @click.stop>
                          <el-input-number v-model="product.amount" placeholder="" style="width: 100%" :precision="2" :controls="false" :min="1"
                                           onmousewheel="return false;" disabled />
                        </el-form-item> -->
                        总价：<span :style="{color:product.prodPrice?'red':''}">{{product.amount}}</span>
                      </el-col>
                      <el-col :span="4" style="padding-left:10px">
                        <!-- <el-button plain type="primary" @click="handleReportPrice(product,index)">报价</el-button> -->
                        <span class="el-click" @click.stop="handleReportPrice(product,index)">报价</span>
                      </el-col>
                    </el-row>
                  </template>

                  <div style="width:100%">
                    <div style="margin:10px 0">
                      <TitleInfo :content="'基本信息'"></TitleInfo>
                    </div>
                    <div style="width: 100%;padding-left:15px">
                      <el-row>
                        <!-- <el-col :span="12">
                          <el-form-item :prop="'quotationProductList.' +index + '.rawMaterialId'" :rules="rules.rawMaterialId" :inline-message="true"
                                        label="原材料" class="wid100">
                            <el-select v-model="product.rawMaterialId" placeholder="请选择" style="width:100%">
                              <el-option v-for="item in rawMaterialData" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                          </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                          <el-form-item label="颜色" class="margin-b-0 wid100">
                            <el-row style="width: 100%">
                              <el-col :span="12">
                                <el-form-item prop="productColor" label-width="0px" class="margin-b-0 wid100">
                                  <el-input v-model="product.productColor" placeholder="颜色" />
                                </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                <el-form-item prop="colorCardCode" label-width="0px" class="margin-b-0 wid100">
                                  <el-input v-model="product.colorCardCode" placeholder="色卡号" />
                                </el-form-item>
                              </el-col>
                            </el-row>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="尺寸" required>
                            <el-row style="width:100%">
                              <el-col :span="8">
                                <el-form-item :prop="'quotationProductList.' +index + '.productLength'" :rules="rules.productLength"
                                              :inline-message="true" label-width="0px" class="margin-b-0 wid100">
                                  <el-input-number v-model="product.productLength" placeholder="长 （cm）" style="width: 100%" :precision="2"
                                                   :controls="false" :min="0" onmousewheel="return false;" />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item :prop="'quotationProductList.' +index + '.productWidth'" :rules="rules.productWidth"
                                              :inline-message="true" label-width="0px" class="margin-b-0 wid100">
                                  <el-input-number v-model="product.productWidth" placeholder="宽 （cm）" style="width: 100%" :precision="2"
                                                   :controls="false" :min="0" onmousewheel="return false;" />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item :prop="'quotationProductList.' +index + '.productHeight'" :rules="rules.productHeight"
                                              :inline-message="true" label-width="0px" class="margin-b-0 wid100">
                                  <el-input-number v-model="product.productHeight" placeholder="高 （cm）" style="width: 100%" :precision="2"
                                                   :controls="false" :min="0" onmousewheel="return false;" />
                                </el-form-item>
                              </el-col>
                            </el-row>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>

                        <el-col :span="12">
                          <el-form-item label="净重(kg)" prop="netWeight" class="margin-b-0 wid100">
                            <el-input-number v-model="product.netWeight" placeholder="请输入" style="width: 100%" :precision="2" :controls="false"
                                             :min="0" onmousewheel="return false;" />
                          </el-form-item>
                        </el-col>

                      </el-row>
                    </div>

                    <div style="margin:10px 0">
                      <TitleInfo :content="'BOM'"></TitleInfo>
                    </div>
                    <div style="width: 100%;padding-left:15px">
                      <el-table :data="product.quotationProductBomList" style="width: 100%; margin-top: 16px">
                        <el-table-column prop="productName" label="物料名称" width="170" />
                        <el-table-column prop="productCode" label="物料编码" width="180" />
                        <el-table-column label="规格尺寸(cm)" width="130">
                          <template #default="{ row, $index }">
                            <div style="width: 100%" v-if="row.productLength&&row.productWidth && row.productHeight">
                              {{row.productLength}}*{{row.productWidth}}*{{row.productHeight}}
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="productColor" label="颜色" width="170" />
                        <el-table-column prop="quantity" label="数量" width="100" />
                        <el-table-column prop="standardDosage" label="标准用量" width="100" />
                        <el-table-column prop="lossRate" label="损耗率(%)" width="100" />
                        <el-table-column prop="remark" label="备注" min-width="150" />
                      </el-table>
                    </div>

                    <div style="margin:10px 0">
                      <TitleInfo :content="'附加工艺要求'"></TitleInfo>
                    </div>

                    <div style="width:100%;padding-left:15px">
                      <!-- <div class="small-title">
                        ① 工艺线路
                      </div>
                      <el-row style="width:100%">
                        <el-col :span="12">
                          <el-form-item label="生产工艺" class="wid100" :prop="'quotationProductList.' + index + '.technologyId'"
                                        :rules="rules.technologyId" :inline-message="true">
                            <el-select v-model="product.technologyId" placeholder="请选择" style="width:100%">
                              <el-option v-for="item in technologyData" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row> -->
                      <div class="small-title">
                        ① LOGO
                      </div>
                      <el-row style="width:100%">
                        <el-col :span="12">
                          <el-form-item label="LOGO尺寸" class="wid100">
                            <el-row style="width:100%">
                              <el-col :span="12">
                                <el-form-item label-width="0px" class="margin-b-0 wid100" :prop="'quotationProductList.' +index + '.logoLength'"
                                              :rules="rules.logoLength" :inline-message="true">
                                  <el-input-number v-model="product.logoLength" placeholder="长 （cm）" style="width: 100%" :precision="2"
                                                   :controls="false" :min="0" onmousewheel="return false;" />
                                </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                <el-form-item label-width="0px" class="margin-b-0 wid100" :prop="'quotationProductList.' +index + '.logoWidth'"
                                              :rules="rules.logoWidth" :inline-message="true">
                                  <el-input-number v-model="product.logoWidth" placeholder="宽 （cm）" style="width: 100%" :precision="2"
                                                   :controls="false" :min="0" onmousewheel="return false;" />
                                </el-form-item>
                              </el-col>
                              <!-- <el-col :span="8">
                            <el-form-item label-width="0px" class="margin-b-0 wid100" :prop="'quotationProductList.' +index + '.logoHeight'"
                                          :rules="rules.logoHeight" :inline-message="true">
                              <el-input-number v-model="product.logoHeight" placeholder="高 （cm）" style="width: 100%" :precision="2" :controls="false"
                                               :min="0" onmousewheel="return false;" />
                            </el-form-item>
                          </el-col> -->
                            </el-row>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="几色印刷" class="wid100">
                            <el-input-number v-model="product.colorCount" style="width: 100%" :precision="0" :controls="false" :min="1"
                                             onmousewheel="return false;" />
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <div class="small-title">
                        ② 折叠
                      </div>
                      <el-row style="width:100%">
                        <el-col :span="12">
                          <el-form-item label="是否折叠" class="wid100">
                            <el-select v-model="product.isFold" style="width:100%">
                              <el-option :label="'否'" :value="0" />
                              <el-option :label="'是'" :value="1" />
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="折叠数" class="wid100" :prop="'quotationProductList.' +index + '.foldWay'" v-if="product.isFold==1"
                                        :rules="product.isFold==1?rules.foldWay:''">
                            <el-select v-model="product.foldWay" style="width:100%">
                              <el-option v-for="item in foldWayData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <div class="small-title">
                        ③ 包装要求
                      </div>
                      <el-row style="width:100%">
                        <el-col :span="12">
                          <el-form-item label="包装要求" class="wid100">
                            <el-select v-model="product.packAsk" style="width:100%" multiple placeholder=" ">
                              <el-option v-for="item in packAskData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <div class="small-title">
                        ④ 是否定制
                      </div>
                      <el-row style="width:100%">
                        <el-col :span="12">
                          <el-form-item prop="isCustomized" label="是否定制" class="wid100">
                            <el-select v-model="product.isCustomized" style="width:100%">
                              <el-option :label="'否'" :value="0" />
                              <el-option :label="'是'" :value="1" />
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row style="width:100%">
                        <el-form-item label="定制内容" class="wid100" v-if="product.isCustomized==1">
                          <table style="width:100%" border class="table">
                            <tr>
                              <td style="width:20%">
                              </td>
                              <td style="width:40%">附件</td>
                              <td style="width:40%">备注</td>
                            </tr>
                            <tr v-for="(row,sonIndex) in product.quotationProductCustomInfoList" :key="sonIndex">
                              <td>
                                <el-checkbox v-model="row.isCheckBox" label="" /> <span style="position:relative;top:-2px">
                                  {{getLabelOne(row.type)}}</span>
                              </td>
                              <td>
                                <div v-for="file in row.fileList" :key="file.id" class="el-click" @click="openImg(file.fileUrl)">
                                  {{file.fileName}}
                                </div>
                              </td>
                              <td>
                                <el-form-item :prop="'quotationProductList.' + index + '.quotationProductCustomInfoList.' + sonIndex + '.remark'"
                                              :rules="row.isCheckBox?rules.remark:''" :inline-message="true" class="margin-b-0 wid100">
                                  <el-input v-model="row.remark" />
                                </el-form-item>
                              </td>
                            </tr>
                          </table>
                        </el-form-item>
                      </el-row>
                    </div>
                  </div>
                </el-collapse-item>
              </el-card>
            </el-collapse>
          </el-form>

        </div>
        <div class="right">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom"
                  v-if="formData.data.quotationProductId" v-loading="submitLoading">
            <template #quotationDetail>
              <div style="width:100%">
                <div style="text-align:center">
                  正在对 <span style="color:red">{{formData.data.productCode}}，{{formData.data.productName}}（{{formData.data.quantity}}）</span> 进行报价
                </div>
                <table class="table" border>
                  <thead>
                    <tr>
                      <th style="width:10%">
                        类型
                      </th>
                      <th style="width:15%">
                        编码
                      </th>
                      <th style="width:15%">
                        名称
                      </th>
                      <th style="width:8%" class="align-right">
                        一出几
                      </th>
                      <th style="width:16%" class="align-right">
                        模具
                      </th>
                      <th style="width:9%" class="align-right">
                        数量/件
                      </th>
                      <th style="width:9%" class="align-right">
                        单价
                      </th>
                      <th style="width:8%" class="align-right">
                        总量
                      </th>
                      <th style="width:10%" class="align-right">
                        总价
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-for="(row,index) in  formData.data.quotationEstimateList" :key="index">
                      <tr v-if="row.type==1">
                        <td>原材料</td>
                        <td>{{row.code}}</td>
                        <td>{{row.name}}</td>
                        <td class="align-right">
                          <el-form-item label-width="0px" class="margin-b-0" :prop="'quotationEstimateList.' + index + '.cavityNum'"
                                        :rules="rules.cavityNum" :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.cavityNum" placeholder="一出几" style="width: 100%" :precision="0"
                                             :controls="false" :min="1" @change="(val)=>changeCavityNum(val,index)" />
                          </el-form-item>
                        </td>
                        <td class="align-right">
                          <el-form-item label-width="0px" class="margin-b-0" :prop="'quotationEstimateList.' + index + '.moldId'"
                                        :rules="rules.moldId" :inline-message="true">
                            <el-select v-model="row.moldId" filterable placeholder="请选择模具" style="width: 100%"
                                       @change="(val)=>changeMoldId(val,index)">
                              <el-option v-for="item in moldData" :key="item.id" :label="item.moldName" :value="item.id" />
                            </el-select>
                          </el-form-item>
                        </td>
                        <td class="align-right">-</td>
                        <td class="align-right">
                          <el-form-item label-width="0px" class="margin-b-0" :prop="'quotationEstimateList.' + index + '.price'" :rules="rules.price"
                                        :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.price" placeholder="单价" style="width: 100%" :precision="4"
                                             :controls="false" :min="0" @change="changeTotalAmount()" />
                          </el-form-item>
                        </td>
                        <td class="align-right">
                          <el-form-item label-width="0px" class="margin-b-0" :prop="'quotationEstimateList.' + index + '.totalQuantity'"
                                        :rules="rules.totalQuantity" :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.totalQuantity" placeholder="总量" style="width: 100%"
                                             :precision="0" :controls="false" :min="1" @change="changeTotalAmount()" />
                          </el-form-item>
                        </td>
                        <td class="align-right">{{row.amount}}</td>
                      </tr>
                    </template>

                    <template v-for="(row,index) in  formData.data.quotationEstimateList" :key="index">
                      <tr v-if="row.type == 2">
                        <td :rowspan="getRowSpan(2)" v-if="row.show">
                          <el-button text type="primary" @click="openSelectMaterial=true">选择</el-button>
                          <div>包材/配件/辅材</div>
                        </td>
                        <td>
                          {{row.code}}
                        </td>
                        <td>
                          {{row.name}}
                        </td>
                        <td class="align-right">
                          -
                        </td>
                        <td class="align-right">
                          -
                        </td>
                        <td class="align-right">
                          <el-form-item label-width="0px" class="margin-b-0" :prop="'quotationEstimateList.' + index + '.quantity'"
                                        :rules="rules.quantity" :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="数量" style="width: 100%" :precision="0"
                                             :controls="false" :min="1" @change="changeTotalAmount()" />
                          </el-form-item>
                        </td>
                        <td class="align-right">
                          <el-form-item label-width="0px" class="margin-b-0" :prop="'quotationEstimateList.' + index + '.price'" :rules="rules.price"
                                        :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.price" placeholder="单价" style="width: 100%" :precision="4"
                                             :controls="false" :min="0" @change="changeTotalAmount()" />
                          </el-form-item>
                        </td>
                        <td class="align-right">
                          {{row.totalQuantity}}
                        </td>
                        <td class="align-right">
                          {{row.amount}}
                        </td>
                      </tr>
                    </template>

                    <template v-for="(row,index) in  formData.data.quotationEstimateList" :key="index">
                      <tr v-if="row.type == 3">
                        <td :rowspan="getRowSpan(3)" v-if="row.show">
                          工序
                        </td>
                        <td>
                          {{row.code}}
                        </td>
                        <td>
                          {{row.name}}
                        </td>
                        <td class="align-right">
                          -
                        </td>
                        <td class="align-right">
                          -
                        </td>
                        <td class="align-right">
                          {{row.quantity}}
                        </td>
                        <td class="align-right">
                          <el-form-item label-width="0px" class="margin-b-0" :prop="'quotationEstimateList.' + index + '.price'" :rules="rules.price"
                                        :inline-message="true">
                            <el-input-number onmousewheel="return false;" v-model="row.price" placeholder="单价" style="width: 100%" :precision="4"
                                             :controls="false" :min="0" @change="changeTotalAmount()" />
                          </el-form-item>
                        </td>
                        <td class="align-right">
                          {{row.totalQuantity}}
                        </td>
                        <td class="align-right">
                          {{row.amount}}
                        </td>
                      </tr>
                    </template>

                    <tr>
                      <td colspan="8">
                        合计
                      </td>
                      <td class="align-right">
                        {{formData.data.totalAmount}}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </template>
            <!-- <template #chart>
          <div style="width:100%;padding-left:25px">
            <div ref="chartDom" style="height:300px"></div>
          </div>
        </template>
        <template #commodity>
          <div style="width: 100%;padding-left:25px">
            <el-table :data="formData.data.quotationProductList" style="width: 100%;" default-expand-all>
              <el-table-column type="expand" width="50" align="center">
                <template #default="scope">
                  <div style="padding-left:50px">
                    <div style="margin-bottom:10px;margin-left:-20px">
                      <TitleInfo content='BOM单:'></TitleInfo>
                    </div>
                    <el-table :data="scope.row.quotationProductBomList" style="width: 100%;" border class="bom-table">
                      <el-table-column label="图片" width="80">
                        <template #default="{ row }">
                          <div v-if="row.fileUrl">
                            <img :src="row.fileUrl" class="pic" @click="onPicture(row.fileUrl)" />
                          </div>
                          <div v-else></div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="productCode" label="物料编码" width="190" />
                      <el-table-column prop="productName" label="物料名称" min-width="200" />
                      <el-table-column label="规格尺寸 (cm)" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="quantity" label="数量" width="80">
                       
                      </el-table-column>
                      <el-table-column prop="allQuantity" label="总量" width="80" />
                      <el-table-column label="单价" width="110">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'quotationProductList.' + scope.$index + '.quotationProductBomList.' + $index + '.price'"
                                          :rules="rules.price" :inline-message="true" class="margin-b-0 wid100">
                              <el-input-number onmousewheel="return false;" v-model="row.price" placeholder="请输入" style="width: 100%" :precision="2"
                                               :controls="false" :min="0" @change="totalAmount()" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="amount" label="小计" width="110">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            ￥ {{row.amount}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="备注" width="180" prop="remark">
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="图片" width="80">
                <template #default="{ row }">
                  <div v-if="row.fileUrl">
                    <img :src="row.fileUrl" class="pic" @click="onPicture(row.fileUrl)" />
                  </div>
                  <div v-else></div>
                </template>
              </el-table-column>
              <el-table-column prop="productCode" label="商品编码" width="190" />
              <el-table-column prop="productName" label="商品名称" min-width="200" />
              <el-table-column label="规格尺寸 (cm)" width="150">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productColor" label="颜色" width="100" />
              <el-table-column label="数量" width="120" prop="quantity">
              </el-table-column>
              <el-table-column label="单价" width="120" prop="price">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    ￥ {{row.price}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="小计" width="120">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    ￥ {{row.amount}}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template> -->
          </byForm>
          <div style="text-align:center" class="btn" v-if="!isDetail && formData.data.quotationProductId">
            <el-button @click="openAddDialog = false" size="default" v-debounce>关 闭</el-button>
            <!-- <el-button type="primary" @click="handleSubmit(1)" size="default" v-debounce>暂 存</el-button> -->
            <el-button type="primary" @click="handleSubmit(2)" size="default" v-debounce>保 存</el-button>
          </div>

        </div>
      </div>
      <div style="text-align:center" v-if="!isDetail">
        <el-button type="primary" @click="handleSubmitOne()" size="default" v-debounce>提交</el-button>
      </div>

      <!-- <template #footer v-if="!isDetail">
        <el-button @click="openAddDialog = false" size="default" v-debounce>关 闭</el-button>
        <el-button type="primary" @click="handleSubmit(1)" size="default" v-debounce>暂 存</el-button>
        <el-button type="primary" @click="handleSubmit(2)" size="default" v-debounce>提 交</el-button>
      </template> -->
    </el-dialog>

    <el-dialog v-if="detailDialog" v-model="detailDialog" :title="formData.detailsData.productCode+`（${formData.detailsData.productName}）产品详情`"
               width="60%" append-to-body>
      <byForm :formConfig="detailsFormConfig" :formOption="detailsFormOption" v-model="formData.detailsData">
        <template #detail>
          <div style="width:100%">
            <div style="margin:10px 0">
              <TitleInfo :content="'基本信息'"></TitleInfo>
            </div>
            <div style="width: 100%;padding-left:15px">
              <el-row>
                <!-- <el-col :span="12">
                  <el-form-item label="原材料" class="wid100">
                    <el-select v-model="formData.detailsData.rawMaterialId" placeholder=" " style="width:100%">
                      <el-option v-for="item in rawMaterialData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="12">
                  <el-form-item label="颜色" class="margin-b-0 wid100">
                    <el-row style="width: 100%">
                      <el-col :span="12">
                        <el-form-item prop="productColor" label-width="0px" class="margin-b-0 wid100">
                          <el-input v-model="formData.detailsData.productColor" placeholder="" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="colorCardCode" label-width="0px" class="margin-b-0 wid100">
                          <el-input v-model="formData.detailsData.colorCardCode" placeholder="" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="尺寸" required>
                    <el-row style="width:100%">
                      <el-col :span="8">
                        <el-form-item :prop="'quotationProductList.' +index + '.productLength'" :rules="rules.productLength" :inline-message="true"
                                      label-width="0px" class="margin-b-0 wid100">
                          <el-input-number v-model="formData.detailsData.productLength" placeholder="" style="width: 100%" :precision="2"
                                           :controls="false" :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item :prop="'quotationProductList.' +index + '.productWidth'" :rules="rules.productWidth" :inline-message="true"
                                      label-width="0px" class="margin-b-0 wid100">
                          <el-input-number v-model="formData.detailsData.productWidth" placeholder="" style="width: 100%" :precision="2"
                                           :controls="false" :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item :prop="'quotationProductList.' +index + '.productHeight'" :rules="rules.productHeight" :inline-message="true"
                                      label-width="0px" class="margin-b-0 wid100">
                          <el-input-number v-model="formData.detailsData.productHeight" placeholder="" style="width: 100%" :precision="2"
                                           :controls="false" :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>

                <el-col :span="12">
                  <el-form-item label="净重(kg)" prop="netWeight" class="margin-b-0 wid100">
                    <el-input-number v-model="formData.detailsData.netWeight" placeholder="" style="width: 100%" :precision="2" :controls="false"
                                     :min="0" onmousewheel="return false;" />
                  </el-form-item>
                </el-col>

              </el-row>
            </div>

            <div style="margin:10px 0">
              <TitleInfo :content="'BOM'"></TitleInfo>
            </div>
            <div style="width: 100%;padding-left:15px">
              <el-table :data="formData.detailsData.quotationProductBomList" style="width: 100%;">
                <el-table-column prop="productName" label="物料名称" width="170" />
                <el-table-column prop="productCode" label="物料编码" width="180" />
                <el-table-column label="规格尺寸(cm)" width="130">
                  <template #default="{ row, $index }">
                    <div style="width: 100%" v-if="row.productLength&&row.productWidth && row.productHeight">
                      {{row.productLength}}*{{row.productWidth}}*{{row.productHeight}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="productColor" label="颜色" width="170" />
                <el-table-column prop="quantity" label="数量" width="100" />
                <el-table-column prop="standardDosage" label="标准用量" width="100" />
                <el-table-column prop="lossRate" label="损耗率(%)" width="100" />
                <el-table-column prop="remark" label="备注" min-width="150" />
              </el-table>
            </div>

            <div style="margin:10px 0">
              <TitleInfo :content="'附加工艺要求'"></TitleInfo>
            </div>

            <div style="width:100%;padding-left:15px">
              <!-- <div class="small-title">
                ① 工艺线路
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item label="生产工艺" class="wid100" :prop="'quotationProductList.' +index + '.technologyId'" :rules="rules.technologyId"
                                :inline-message="true">
                    <el-select v-model="formData.detailsData.technologyId" placeholder="请选择" style="width:100%">
                      <el-option v-for="item in technologyData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row> -->
              <div class="small-title">
                ① LOGO
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item label="LOGO尺寸" class="wid100">
                    <el-row style="width:100%">
                      <el-col :span="12">
                        <el-form-item label-width="0px" class="margin-b-0 wid100" :prop="'quotationProductList.' +index + '.logoLength'"
                                      :rules="rules.logoLength" :inline-message="true">
                          <el-input-number v-model="formData.detailsData.logoLength" placeholder="" style="width: 100%" :precision="2"
                                           :controls="false" :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label-width="0px" class="margin-b-0 wid100" :prop="'quotationProductList.' +index + '.logoWidth'"
                                      :rules="rules.logoWidth" :inline-message="true">
                          <el-input-number v-model="formData.detailsData.logoWidth" placeholder="" style="width: 100%" :precision="2"
                                           :controls="false" :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col>
                      <!-- <el-col :span="8">
                        <el-form-item label-width="0px" class="margin-b-0 wid100" :prop="'quotationProductList.' +index + '.logoHeight'"
                                      :rules="rules.logoHeight" :inline-message="true">
                          <el-input-number v-model="formData.detailsData.logoHeight" placeholder="" style="width: 100%" :precision="2"
                                           :controls="false" :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col> -->
                    </el-row>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="几色印刷" class="wid100">
                    <el-input-number v-model="formData.detailsData.colorCount" placeholder="" style="width: 100%" :precision="0" :controls="false"
                                     :min="1" onmousewheel="return false;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="small-title">
                ② 折叠
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item label="是否折叠" class="wid100">
                    <el-select v-model="formData.detailsData.isFold" placeholder="" style="width:100%">
                      <el-option :label="'否'" :value="0" />
                      <el-option :label="'是'" :value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="折叠数" class="wid100" v-if="formData.detailsData.isFold==1">
                    <el-select v-model="formData.detailsData.foldWay" placeholder="" style="width:100%">
                      <el-option v-for="item in foldWayData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="small-title">
                ③ 包装要求
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item label="包装要求" class="wid100">
                    <el-select v-model="formData.detailsData.packAsk" placeholder="" style="width:100%" multiple>
                      <el-option v-for="item in packAskData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="small-title">
                ④ 是否定制
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item prop="isCustomized" label="是否定制" class="wid100">
                    <el-select v-model="formData.detailsData.isCustomized" placeholder="" style="width:100%">
                      <el-option :label="'否'" :value="0" />
                      <el-option :label="'是'" :value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="width:100%">
                <el-form-item prop="technologyId" label="定制内容" class="wid100" v-if="formData.detailsData.isCustomized==1">
                  <table style="width:100%" border class="table">
                    <tr>
                      <td style="width:20%">
                      </td>
                      <td style="width:40%">附件</td>
                      <td style="width:40%">备注</td>
                    </tr>
                    <tr v-for="(row,sonIndex) in formData.detailsData.quotationProductCustomInfoList" :key="sonIndex">
                      <td>
                        <el-checkbox v-model="row.isCheckBox" label="" /> <span style="position:relative;top:-2px">
                          {{getLabelOne(row.type)}}</span>
                      </td>
                      <td>
                        <div v-for="file in row.fileList" :key="file.id" class="el-click" @click="openImg(file.fileUrl)">
                          {{file.fileName}}
                        </div>
                      </td>
                      <td>
                        <el-form-item :prop="'quotationProductList.' + index + '.quotationProductCustomInfoList.' + sonIndex + '.remark'"
                                      :rules="row.isCheckBox?rules.remark:''" :inline-message="true" class="margin-b-0 wid100">
                          <el-input v-model="row.remark" placeholder="" />
                        </el-form-item>
                      </td>
                    </tr>
                  </table>
                </el-form-item>
              </el-row>
            </div>
          </div>
        </template>

      </byForm>
      <template #footer>
        <el-button @click="detailDialog = false" size="default" v-debounce>关 闭</el-button>

      </template>
    </el-dialog>

    <el-dialog :title="'物料选择'" v-model="openSelectMaterial" width="90%" destroy-on-close>
      <SelectMaterial :isNeRawMaterial="'1'" @selectMaterial="selectMaterial"></SelectMaterial>
      <template #footer>
        <el-button @click="openSelectMaterial = false" size="defualt" v-debounce>关 闭</el-button>
      </template>
    </el-dialog>

    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="840">
      <QuotationPDF :rowData="rowData"></QuotationPDF>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { ref } from "vue";
import * as echarts from "echarts";
import SelectMaterial from "@/components/product/SelectMaterial.vue";
import QuotationPDF from "@/components/PDF/quotationPDF.vue";
const { proxy } = getCurrentInstance();
const packAskData = computed(() => proxy.useUserStore().allDict["pack_ask"]);
const foldWayData = computed(() => proxy.useUserStore().allDict["fold_way"]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    status: "",
    type: "",
    quotationStatus: "",
    companyId: "",
    quotationTimeSta: "",
    quotationTimeEnd: "",
    beginTime: "",
    endTime: "",
    isEstimate: "1",
  },
});
const loading = ref(false);
const openAddDialog = ref(false);
const statusData = ref([
  {
    label: "草稿",
    value: 0,
  },
  {
    label: "正常",
    value: 30,
  },
  {
    label: "作废",
    value: 88,
  },
]);
const quotationStatusData = ref([
  {
    label: "未报价",
    value: 0,
  },
  {
    label: "报价中",
    value: 1,
  },
  {
    label: "已报价",
    value: 2,
  },
]);
const selectConfig = computed(() => {
  return [
    {
      label: "业务公司",
      prop: "ofCompanyId",
      data: proxy.useUserStore().allDict["list_company_data"],
    },
    {
      label: "报价单状态",
      prop: "status",
      data: statusData.value,
    },
    {
      label: "工厂报价状态",
      prop: "quotationStatus",
      data: quotationStatusData.value,
    },
    {
      type: "time",
      label: "报价时间",
      placeholder: "开始日期",
      prop: "quotationTimeSta",
      placeholderOne: "结束日期",
      propOne: "quotationTimeEnd",
    },
  ];
});

const config = computed(() => {
  return [
    {
      attrs: {
        label: "业务公司",
        prop: "ofCompanyName",
        width: 110,
      },
    },
    {
      attrs: {
        label: "报价单号",
        slot: "code",
        width: 180,
      },
    },
    {
      attrs: {
        label: "报价单状态",
        slot: "status",
        width: 100,
      },
    },
    {
      attrs: {
        label: "工厂报价状态",
        slot: "quotationStatus",
        width: 130,
      },
    },
    {
      attrs: {
        label: "报价金额",
        slot: "amount",
        width: 120,
      },
    },
    {
      attrs: {
        label: "报价时间",
        prop: "quotationTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "创建时间",
        prop: "createTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "报价单产品",
        slot: "product",
        "min-width": 180,
      },
    },
    {
      attrs: {
        label: "操作",
        width: 120,
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          row.quotationStatus < 2 && row.status == 30
            ? {
                attrs: {
                  label: "报价",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  getDtlOne(row, false, 0);
                },
              }
            : {},
          row.quotationStatus == 2 && row.status == 30
            ? {
                attrs: {
                  label: "打印",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  handlePrint(row);
                },
              }
            : {},
        ];
      },
    },
  ];
});
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/saleQuotation/page", sourceList.value.pagination).then((res) => {
    res.rows.forEach((x) => {
      x.addTagShow = false;
      if (x.tag) {
        x.tags = x.tag.split(",");
      } else {
        x.tags = [];
      }
    });
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const rawMaterialData = ref([]);
const technologyData = ref([]);
const getRawMaterialData = () => {
  proxy.post("/productInfo/page", { productClassifyId: 110 }).then((res) => {
    rawMaterialData.value = res.rows.map((x) => ({
      label: x.name + "，" + x.customCode,
      value: x.id,
    }));
  });
  proxy.post("/technology/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    technologyData.value = res.rows;
  });
};
getRawMaterialData();
const formDom = ref(null);
const submitLoading = ref(false);
const formData = reactive({
  data: {},
  detailsData: {},
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  disabled: false,
});
const isShowBackRemark = ref(false);
let myChart = null;
const chartDom = ref(null);
const chartData = ref([]);
const isShowChart = ref(false);
const formConfig = computed(() => {
  return [
    // {
    //   type: "title1",
    //   title: "报价趋势",
    //   isShow: isShowChart.value,
    // },
    // {
    //   type: "slot",
    //   slotName: "chart",
    //   isShow: isShowChart.value,
    // },
    // {
    //   type: "title1",
    //   title: "退回原因",
    //   isShow: isShowBackRemark.value,
    // },
    // {
    //   type: "input",
    //   itemType: "textarea",
    //   rows: 10,
    //   prop: "backRemark",
    //   label: "退回原因",
    //   itemWidth: 100,
    //   disabled: true,
    //   isShow: isShowBackRemark.value,
    // },
    // {
    //   type: "title1",
    //   title: "商品信息",
    // },
    // {
    //   type: "slot",
    //   slotName: "commodity",
    //   label: "",
    // },
    // {
    //   type: "title1",
    //   title: "报价总金额",
    // },
    // {
    //   type: "input",
    //   prop: "amount",
    //   label: "报价总金额",
    //   itemWidth: 25,
    //   disabled: true,
    // },
    {
      type: "slot",
      slotName: "quotationDetail",
      label: "",
    },
  ];
});
const rules = ref({
  price: [{ required: true, message: "单价", trigger: "blur" }],
  moldId: [{ required: true, message: "请选择模具", trigger: "change" }],
  quantity: [{ required: true, message: "数量", trigger: "blur" }],
  totalQuantity: [{ required: true, message: "总量", trigger: "blur" }],
});
const isDetail = ref(false);
const chartOption = reactive({
  data: {
    tooltip: {
      trigger: "axis",
    },
    // legend: {
    //   data: ["价格"],
    // },
    grid: {
      left: "3%",
      right: "6%",
      top: "10%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      // 格式化函数
      // valueFormatter: (val) => {
      //   return val + "aaa";
      // },
      formatter: (params, ticket, callback) => {
        return `
        ${params[0].seriesName}：${params[0].value}
        <br/>
         报价单号：${chartData.value[params[0].dataIndex].code}
        `;
      },
      textStyle: {
        fontSize: 12,
      },
    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {},
    //   },
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "报价金额",
        type: "line",
        symbolSize: 10,
        data: [],
      },
    ],
  },
});
const getFileData = () => {
  let ids = [];
  formData.data.quotationProductList.map((x) => {
    // ids.push(x.productId);
    x.quotationProductBomList.map((y) => {
      ids.push(y.materialId);
    });
  });
  ids = Array.from(new Set(ids));
  proxy
    .post("/fileInfo/getList", {
      businessIdList: ids,
    })
    .then((fileObj) => {
      formData.data.quotationProductList.map((x) => {
        // x.fileList = fileObj[x.productId] || [];
        // if (x.fileList && x.fileList.length > 0) {
        //   x.fileUrl = x.fileList[0].fileUrl;
        // }
        x.quotationProductBomList.map((y) => {
          y.fileList = fileObj[y.materialId] || [];
          if (y.fileList && y.fileList.length > 0) {
            y.fileUrl = y.fileList[0].fileUrl;
          }
        });
      });
    });
};
const getDtl = (row, flag = false) => {
  formOption.disabled = flag;
  isDetail.value = flag;
  openAddDialog.value = true;
  proxy.post("/saleQuotation/detail", { id: row.id }).then((res) => {
    formData.data = res;
    // 是否显示退回原因
    if (res.backRemark) {
      isShowBackRemark.value = true;
    } else {
      isShowBackRemark.value = false;
    }
    // 城市数据回显
    // if (formData.data.buyCountryId) {
    //   getCityData(formData.data.buyCountryId, "20");
    // }
    // if (formData.data.buyProvinceId) {
    //   getCityData(formData.data.buyProvinceId, "30");
    // }
    // 价格计算
    changeQuantity();
    // 文件数据回显
    getFileData();
    let productIds = formData.data.quotationProductList.map((x) => x.productId);
    proxy.getFileData({
      businessIdList: productIds,
      data: formData.data.quotationProductList,
      att: "productId",
      businessType: "0",
      fileAtt: "productFile",
      filePathAtt: "fileUrl",
    });
    //折线图
    if (res.quotationTrendList && res.quotationTrendList.length >= 2) {
      isShowChart.value = true;
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
        chartData.value = res.quotationTrendList;
        chartOption.data.xAxis.data = chartData.value.map((item) => {
          return item.createTime.slice(0, 10);
        });
        chartOption.data.series[0].data = chartData.value.map((item, index) => {
          if (item.code == row.code) {
            return {
              value: item.amount || 0,
              itemStyle: { color: "red" },
            };
          } else {
            return item.amount || 0;
          }
        });
        myChart.setOption(chartOption.data);
        myChart.resize();
      });
    } else {
      isShowChart.value = false;
    }
  });
};

const getFileDataOne = () => {
  let ids = [];
  quotationProductList.value.map((x) => {
    // ids.push(x.productId);
    x.quotationProductBomList.map((y) => {
      ids.push(y.materialId);
    });
  });
  ids = Array.from(new Set(ids));
  proxy
    .post("/fileInfo/getList", {
      businessIdList: ids,
    })
    .then((fileObj) => {
      quotationProductList.value.map((x) => {
        // x.fileList = fileObj[x.productId] || [];
        // if (x.fileList && x.fileList.length > 0) {
        //   x.fileUrl = x.fileList[0].fileUrl;
        // }
        x.quotationProductBomList.map((y) => {
          y.fileList = fileObj[y.materialId] || [];
          if (y.fileList && y.fileList.length > 0) {
            y.fileUrl = y.fileList[0].fileUrl;
          }
        });
      });
    });
};
const quotationProductList = ref([]);
const allData = ref({});
const getDtlOne = (row, flag = false, index = 0) => {
  formOption.disabled = flag;
  isDetail.value = flag;
  openAddDialog.value = true;
  proxy.post("/saleQuotation/detail", { id: row.id }).then((res) => {
    allData.value = res;
    formData.data = {
      quotationProductId: "",
    };
    if (res.quotationProductList && res.quotationProductList.length > 0) {
      for (let i = 0; i < res.quotationProductList.length; i++) {
        const iele = res.quotationProductList[i];
        if (iele.packAsk) {
          iele.packAsk = iele.packAsk.split(",");
        } else {
          iele.packAsk = [];
        }
        // if (
        //   iele.quotationProductBomList &&
        //   iele.quotationProductBomList.length > 0
        // ) {
        //   iele.quotationProductBomList = iele.quotationProductBomList.filter(
        //     (x) => x.type == 2
        //   );
        // }
        if (
          iele.quotationProductCustomInfoList &&
          iele.quotationProductCustomInfoList.length > 0
        ) {
          for (let j = 0; j < iele.quotationProductCustomInfoList.length; j++) {
            const jele = iele.quotationProductCustomInfoList[j];
            if (jele.fileList) {
              jele.fileList = jele.fileList.map((x) => ({
                ...x,
                url: x.fileUrl,
                name: x.fileName,
              }));
            } else {
              jele.fileList = [];
            }
            jele.isCheckBox = jele.isCheck == 1;
          }
        }
      }
    }
    quotationProductList.value = res.quotationProductList.map((x) => ({
      ...x,
      amount: parseFloat(x.quantity * x.prodPrice).toFixed(2),
    }));
    if (quotationProductList.value && quotationProductList.value.length > 0) {
      handleReportPrice(quotationProductList.value[index], index);
    }
    // getFileDataOne();
    // let productIds = quotationProductList.value.map((x) => x.productId);
    // proxy.getFileData({
    //   businessIdList: productIds,
    //   data: quotationProductList.value,
    //   att: "productId",
    //   businessType: "0",
    //   fileAtt: "productFile",
    //   filePathAtt: "fileUrl",
    // });
  });
};

const changeQuantity = () => {
  if (
    formData.data.quotationProductList &&
    formData.data.quotationProductList.length > 0
  ) {
    for (let i = 0; i < formData.data.quotationProductList.length; i++) {
      let iele = formData.data.quotationProductList[i];
      if (iele.quantity) {
        for (let j = 0; j < iele.quotationProductBomList.length; j++) {
          const jele = iele.quotationProductBomList[j];
          if (!jele.price) {
            jele.price = jele.costPrice;
          }
          jele.allQuantity = iele.quantity * jele.quantity;
        }
      }
    }
    totalAmount();
  }
};

const totalAmount = () => {
  let money = 0;
  if (
    formData.data.quotationProductList &&
    formData.data.quotationProductList.length > 0
  ) {
    // 先算单个产品的价格
    for (let i = 0; i < formData.data.quotationProductList.length; i++) {
      let iele = formData.data.quotationProductList[i];
      let productPrice = 0;
      for (let j = 0; j < iele.quotationProductBomList.length; j++) {
        const jele = iele.quotationProductBomList[j];
        productPrice += Number(
          parseFloat(Number(jele.quantity) * Number(jele.price)).toFixed(2)
        );
      }
      iele.price = parseFloat(productPrice).toFixed(2);
    }

    for (let i = 0; i < formData.data.quotationProductList.length; i++) {
      let iele = formData.data.quotationProductList[i];
      iele.amount = parseFloat(
        Number(iele.quantity) * Number(iele.price)
      ).toFixed(2);
      money += Number(iele.amount);
      for (let j = 0; j < iele.quotationProductBomList.length; j++) {
        const jele = iele.quotationProductBomList[j];
        jele.amount = parseFloat(
          Number(jele.allQuantity) * Number(jele.price)
        ).toFixed(2);
      }
    }
  }

  formData.data.amount = parseFloat(money).toFixed(2);
};

// const handleSubmit = (type) => {
//   formDom.value.handleSubmit(() => {
//     if (
//       formData.data.quotationProductList &&
//       formData.data.quotationProductList.length > 0
//     ) {
//       submitLoading.value = true;
//       formData.data.quotationStatus = type;
//       proxy.post("/saleQuotation/edit", formData.data).then(
//         (res) => {
//           proxy.msgTip("操作成功", 1);
//           openAddDialog.value = false;
//           submitLoading.value = false;
//           getList();
//         },
//         (err) => {
//           submitLoading.value = false;
//         }
//       );
//     } else {
//       return proxy.msgTip("请添加至少一件商品", 2);
//     }
//   });
// };

const handleSubmit = (type) => {
  formDom.value.handleSubmit(() => {
    if (
      formData.data.quotationEstimateList &&
      formData.data.quotationEstimateList.length > 0
    ) {
      submitLoading.value = true;
      proxy.post("/quotationEstimate/addOrEdit", formData.data).then(
        (res) => {
          proxy.msgTip("操作成功", 1);
          // openAddDialog.value = false;
          submitLoading.value = false;
          // getList();
          getDtlOne(allData.value, false, currentIndex.value);
        },
        (err) => {
          submitLoading.value = false;
        }
      );
    } else {
      return proxy.msgTip("无报价明细", 2);
    }
  });
};

const handleSubmitOne = () => {
  let listLength = 0;
  for (let i = 0; i < quotationProductList.value.length; i++) {
    const ele = quotationProductList.value[i];
    if (ele.prodPrice && Number(ele.prodPrice) > 0) {
      listLength += 1;
    }
  }
  if (listLength == quotationProductList.value.length) {
    proxy
      .msgConfirm()
      .then((res) => {
        proxy
          .post("/quotationEstimate/submitQuotation", {
            quotationId: allData.value.id,
          })
          .then((res) => {
            proxy.msgTip("操作成功", 1);
            openAddDialog.value = false;
            getList();
          });
      })
      .catch((err) => {});
  } else {
    return proxy.msgTip("还有未报价的商品", 2);
  }
};

const moldData = ref([]);
const getDict = () => {
  proxy
    .post("/moldInfo/page", {
      pageNum: 1,
      pageSize: 9999,
    })
    .then((res) => {
      moldData.value = res.rows.map((x) => ({
        ...x,
        area: Number(parseFloat(x.moldLength * x.moldWidth).toFixed(2)),
        moldName:
          x.moldName + `(${x.moldLength}*${x.moldWidth}*${x.moldHeight})`,
      }));
    });
};
getDict();

let currentIndex = ref(-1);
const currentProduct = ref({});
const handleReportPrice = (item, index) => {
  currentProduct.value = item;
  currentIndex.value = index;
  submitLoading.value = true;
  formData.data = {
    quotationProductId: item.id,
    productCode: item.productCode,
    productName: item.productName,
    quantity: item.quantity,
  };
  proxy
    .post("/quotationEstimate/detail", {
      quotationProductId: formData.data.quotationProductId,
    })
    .then((res) => {
      let type1Status = true;
      let type2Status = true;
      let type3Status = true;
      if (res && res.length > 0) {
        for (let i = 0; i < res.length; i++) {
          const ele = res[i];
          if (ele.type == 1 && type1Status) {
            ele.show = true;
            type1Status = false;
          } else if (ele.type == 2 && type2Status) {
            ele.show = true;
            type2Status = false;
          } else if (ele.type == 3 && type3Status) {
            ele.show = true;
            type3Status = false;
          } else {
            ele.show = false;
          }
        }
        formData.data.quotationEstimateList = res;
      }
      submitLoading.value = false;
      changeTotalAmount();
    });
};
const openSelectMaterial = ref(false);
const selectMaterial = (goods) => {
  let flag = formData.data.quotationEstimateList.some(
    (x) => x.materialId == goods.id
  );
  if (!flag) {
    formData.data.quotationEstimateList.push({
      materialId: goods.id,
      name: goods.name,
      code: goods.customCode,
      quantity: 1,
      price: null,
      totalQuantity: null,
      amount: "",
      type: 2,
    });
    proxy.msgTip("选择成功");
  } else {
    proxy.msgTip("该物料已选择", 2);
  }
};

const getRowSpan = (type) => {
  if (
    formData.data.quotationEstimateList &&
    formData.data.quotationEstimateList.length > 0
  ) {
    return formData.data.quotationEstimateList.filter((x) => x.type == type)
      .length;
  }
};

const changeTotalAmount = () => {
  let money = 0;
  for (let i = 0; i < formData.data.quotationEstimateList.length; i++) {
    const ele = formData.data.quotationEstimateList[i];
    let amount = 0;
    if (ele.type == 1 && ele.moldId) {
      let mold = moldData.value.find((x) => x.id == ele.moldId);
      if (mold) {
        amount = parseFloat(
          mold.moldLength *
            mold.moldWidth *
            Number(ele.price) *
            Number(ele.totalQuantity)
        ).toFixed(2);
      }
    } else if (ele.type == 2) {
      ele.totalQuantity = ele.quantity * formData.data.quantity;
      amount = parseFloat(
        Number(ele.price) * Number(ele.totalQuantity)
      ).toFixed(2);
    } else if (ele.type == 3) {
      ele.totalQuantity = formData.data.quantity;
      amount = parseFloat(
        Number(ele.price) * Number(ele.totalQuantity)
      ).toFixed(2);
    }
    ele.amount = amount;
    money += Number(parseFloat(amount).toFixed(2));
  }
  formData.data.totalAmount = parseFloat(money).toFixed(2);
};
const openPrint = ref(false);
const rowData = ref({});
const handlePrint = (row) => {
  openPrint.value = true;
  rowData.value = row;
};

const changeTotalQuantity = (index) => {
  formData.data.quotationEstimateList[index].totalQuantity = Math.ceil(
    currentProduct.value.quantity /
      formData.data.quotationEstimateList[index].cavityNum
  );
  changeTotalAmount();
};

const changeCavityNum = (val, index) => {
  let { productLength, productWidth } = currentProduct.value;
  if (val) {
    // 单个产品所需的长
    let realityProductLength = productLength + 2;
    // 单个产品所需的宽
    let realityProductWidth = productWidth + 2;
    // 计算商品所需的理论面积
    let theoryArea = realityProductLength * realityProductWidth * val;

    // 计算模具的理论面积
    for (let i = 0; i < moldData.value.length; i++) {
      const ele = moldData.value[i];
      // 计算模具可做产品数量的理论面积
      // 第一种面积
      let theoryLength =
        Math.floor(ele.moldLength / realityProductLength) *
        realityProductLength;
      let theoryWidth =
        Math.floor(ele.moldWidth / realityProductWidth) * realityProductWidth;
      let theoryArea = Number(
        parseFloat(theoryLength * theoryWidth).toFixed(2)
      );
      // 第二种面积
      let theoryLengthOne =
        Math.floor(ele.moldLength / realityProductWidth) * realityProductWidth;
      let theoryWidthOne =
        Math.floor(ele.moldWidth / realityProductLength) * realityProductLength;
      let theoryAreaOne = Number(
        parseFloat(theoryLengthOne * theoryWidthOne).toFixed(2)
      );
      ele.theoryArea = theoryArea >= theoryAreaOne ? theoryArea : theoryAreaOne;
    }

    // 过滤出模具理论面积 >= 商品的理论面积
    let filterData = moldData.value.filter((x) => x.theoryArea >= theoryArea);
    // 取出面积最小的模具
    if (filterData && filterData.length > 0) {
      let sortList = filterData.sort((a, b) => a.area - b.area);
      formData.data.quotationEstimateList[index].moldId = sortList[0].id;
    } else {
      formData.data.quotationEstimateList[index].moldId = "";
      return proxy.msgTip("未找到合适的模具", 2);
    }
    changeTotalQuantity(index);
  }
};

const changeMoldId = (val, index) => {
  let { productLength, productWidth } = currentProduct.value;
  //  一出几
  let cavityNum = formData.data.quotationEstimateList[index].cavityNum || 1;
  // 单个产品所需的长
  let realityProductLength = productLength + 2;
  // 单个产品所需的宽
  let realityProductWidth = productWidth + 2;
  // 计算商品所需的理论面积
  let productTheoryArea =
    realityProductLength * realityProductWidth * cavityNum;
  // 计算商品的总面积

  if (val && cavityNum) {
    for (let i = 0; i < moldData.value.length; i++) {
      const ele = moldData.value[i];
      if (ele.id == val) {
        // 计算模具可做产品数量的理论面积
        // 第一种面积
        let theoryLength =
          Math.floor(ele.moldLength / realityProductLength) *
          realityProductLength;
        let theoryWidth =
          Math.floor(ele.moldWidth / realityProductWidth) * realityProductWidth;
        let theoryArea = Number(
          parseFloat(theoryLength * theoryWidth).toFixed(2)
        );
        // 第二种面积
        let theoryLengthOne =
          Math.floor(ele.moldLength / realityProductWidth) *
          realityProductWidth;
        let theoryWidthOne =
          Math.floor(ele.moldWidth / realityProductLength) *
          realityProductLength;
        let theoryAreaOne = Number(
          parseFloat(theoryLengthOne * theoryWidthOne).toFixed(2)
        );
        ele.theoryArea =
          theoryArea >= theoryAreaOne ? theoryArea : theoryAreaOne;
        if (ele.theoryArea) {
          formData.data.quotationEstimateList[index].cavityNum = Math.floor(
            ele.theoryArea / (realityProductLength * realityProductWidth)
          );
        } else {
          proxy.msgTip(`该模具不能一出${cavityNum}`, 2);
          formData.data.quotationEstimateList[index].moldId = "";
        }
      }
    }
    changeTotalQuantity(index);
  }
};

const detailDialog = ref(false);
const detailsFormOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  disabled: true,
});
const detailsFormConfig = computed(() => {
  return [
    {
      type: "slot",
      slotName: "detail",
      label: "",
    },
  ];
});
const handleLookDetail = (item) => {
  let obj = proxy.deepClone(item);
  if (obj.packAsk) {
    obj.packAsk = obj.packAsk.split(",");
  }
  obj.quotationProductCustomInfoList.forEach((x) => {
    if (x.fileList) {
      x.fileList = x.fileList.map((y) => ({
        ...y,
        url: y.fileUrl,
        name: y.fileName,
      }));
    } else {
      x.fileList = [];
    }
    x.isCheckBox = x.isCheck == 1;
  });
  obj.quotationProductBomList = obj.quotationProductBomList.filter(
    (x) => x.type == 2
  );
  formData.detailsData = obj;
  detailDialog.value = true;
};
let obj = {
  1: "定制刀模",
  2: "定制纹路",
  3: "定制模具",
};
const getLabelOne = (type) => {
  return obj[type];
};
</script>

<style lang="scss" scoped>
.pic {
  object-fit: contain;
  width: 50px;
  height: 50px;
  cursor: pointer;
  vertical-align: middle;
}

:deep(.bom-table .el-table__body-wrapper .el-table__body .el-table__row) {
  background: #f4f4f5 !important;
}
.box {
  width: 100%;
  display: flex;
  .left {
    width: 45%;
    height: 100%;
    overflow: auto;
    border-right: 1px solid #eee;
    padding: 4px 15px 4px 4px;
  }
  .right {
    width: 55%;
    height: 100%;
    overflow: auto;
    position: relative;
    padding: 4px 0 4px 15px;
    .btn {
      // position: absolute;
      // bottom: 20px;
      // height: 32px;
      // left: 50%;
      // transform: translateX(-50%);
      height: 32px;
      text-align: center;
    }
    .table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      td,
      th {
        text-align: left;
        padding: 5px;
        font-size: 12px;
        // padding: 5px 10px;
      }
      .align-right {
        text-align: right;
      }
    }
  }
}

::v-deep(.box .el-input-number .el-input__inner) {
  text-align: right !important;
}
::v-deep(.box .el-input-number.is-without-controls .el-input__wrapper) {
  padding-left: 10px;
  padding-right: 10px;
}

.table {
  border-collapse: collapse;
  border-spacing: 0;

  td {
    text-align: center;
    padding: 2px 4px;
    // padding: 5px 10px;
  }
}
.small-title {
  padding-left: 15px;
  margin-bottom: 10px;
  color: #3366ff;
  font-size: 14px;
}
:deep(.el-checkbox) {
  margin-right: 0px;
}
// :deep(.el-collapse-item) {
//   margin-bottom: 10px;
// }
:deep(.el-collapse-item__header) {
  background-color: #eee;
}
</style>