JNBusiness/ruoyi-ui/src/views/quotePage/quote/index.vue

<template>
  <div class="container" id="index-app">
    <div class="center-container">
      <!-- 下拉弹出框，并设置两个按钮，第一个按钮作为弹出按钮 -->
      <el-collapse>
        <el-collapse-item>
          <template slot="title">
            <div>
              <el-button style="margin-left: 20px" size="small" type="primary" >财务费用明细</el-button>
              <el-button style="margin-left: 50px" @click.native.stop.prevent="restoreDefaults" size="small" type="primary" >恢复默认</el-button>
            </div>
          </template>
          <div class="form-box gray-background" style="margin-top: 5px; padding-top: 5px">
            <el-form label-width="150px" :model="formLabelAlign" :rules="formRules">
              <el-row>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.officeExpense.fieldStatus }">
                  <el-form-item label="办公费" title="办公费" prop="officeExpense.value">
                    <el-input v-model="formLabelAlign.officeExpense.value" placeholder="办公费"
                              @blur="validateAndSetDefault(formLabelAlign, 'officeExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.travelExpense.fieldStatus }">
                  <el-form-item label="差旅费" title="差旅费" prop="travelExpense.value">
                    <el-input v-model="formLabelAlign.travelExpense.value" placeholder="差旅费"
                              @blur="validateAndSetDefault(formLabelAlign, 'travelExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.salaryInsur.fieldStatus }">
                  <el-form-item label="工资及福利保险" title="工资及福利保险" prop="salaryInsur.value">
                    <el-input v-model="formLabelAlign.salaryInsur.value" placeholder="工资及福利保险"
                              @blur="validateAndSetDefault(formLabelAlign, 'salaryInsur')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.otherMgmtExpense.fieldStatus }">
                  <el-form-item label="其他管理费" title="其他管理费" prop="otherMgmtExpense.value">
                    <el-input v-model="formLabelAlign.otherMgmtExpense.value" placeholder="其他管理费"
                              @blur="validateAndSetDefault(formLabelAlign, 'otherMgmtExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.carExpense.fieldStatus }">
                  <el-form-item label="汽车费用" title="汽车费用" prop="carExpense.value">
                    <el-input v-model="formLabelAlign.carExpense.value" placeholder="汽车费用"
                              @blur="validateAndSetDefault(formLabelAlign, 'carExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col >
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.mgmtBizEntFee.fieldStatus }">
                  <el-form-item label="管理-业务招待费" title="管理-业务招待费" prop="mgmtBizEntFee.value">
                    <el-input v-model="formLabelAlign.mgmtBizEntFee.value" placeholder="管理-业务招待费"
                              @blur="validateAndSetDefault(formLabelAlign, 'mgmtBizEntFee')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.mgmtDeprecExpense.fieldStatus }">
                  <el-form-item label="管理-折旧费" title="管理-折旧费" prop="mgmtDeprecExpense.value"
                                @blur="validateAndSetDefault(formLabelAlign, 'mgmtDeprecExpense')">
                    <el-input v-model="formLabelAlign.mgmtDeprecExpense.value" placeholder="管理-折旧费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.consultAuditFee.fieldStatus }">
                  <el-form-item label="咨询与审计费" title="咨询与审计费" prop="consultAuditFee.value"
                                @blur="validateAndSetDefault(formLabelAlign, 'consultAuditFee')">
                    <el-input v-model="formLabelAlign.consultAuditFee.value" placeholder="咨询与审计费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6"  :class="{ 'changed-field': formLabelAlign.tenderCost.fieldStatus }">
                  <el-form-item label="标书费用" title="标书费用" prop="tenderCost.value">
                    <el-input v-model="formLabelAlign.tenderCost.value" placeholder="标书费用"
                              @blur="validateAndSetDefault(formLabelAlign, 'tenderCost')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.rentExpense.fieldStatus }">
                  <el-form-item  label="房租费" title="房租费" prop="rentExpense.value">
                    <el-input v-model="formLabelAlign.rentExpense.value" placeholder="房租费"
                              @blur="validateAndSetDefault(formLabelAlign, 'rentExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.salary.fieldStatus }">
                  <el-form-item label="工资" title="工资" prop="salary.value">
                    <el-input v-model="formLabelAlign.salary.value" placeholder="工资"
                              @blur="validateAndSetDefault(formLabelAlign, 'salary')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.inspectFee.fieldStatus }">
                  <el-form-item label="检验检查费" prop="inspectFee.value">
                    <el-input v-model="formLabelAlign.inspectFee.value" placeholder="检验检查费"
                              @blur="validateAndSetDefault(formLabelAlign, 'inspectFee')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.transTravelExpense.fieldStatus }">
                  <el-form-item label="销售-交通与差旅费" title="交通与差旅费" prop="transTravelExpense.value">
                    <el-input v-model="formLabelAlign.transTravelExpense.value" placeholder="交通与差旅费"
                              @blur="validateAndSetDefault(formLabelAlign, 'transTravelExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.otherSalesExpense.fieldStatus }">
                  <el-form-item label="其他销售费" title="其他销售费" prop="otherSalesExpense.value">
                    <el-input v-model="formLabelAlign.otherSalesExpense.value" placeholder="其他销售费"
                              @blur="validateAndSetDefault(formLabelAlign, 'otherSalesExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.biddingCost.fieldStatus }">
                  <el-form-item label="投标费用" title="投标费用" prop="biddingCost.value">
                    <el-input v-model="formLabelAlign.biddingCost.value" placeholder="投标费用"
                              @blur="validateAndSetDefault(formLabelAlign, 'biddingCost')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.bizFee.fieldStatus }">
                  <el-form-item label="销售-业务费" title="销售-业务费" prop="bizFee.value">
                    <el-input v-model="formLabelAlign.bizFee.value" placeholder="销售-业务费"
                              @blur="validateAndSetDefault(formLabelAlign, 'bizFee')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.salesBizEntFee.fieldStatus }">
                  <el-form-item label="销售-业务招待费" title="销售-业务招待费" prop="salesBizEntFee.value">
                    <el-input v-model="formLabelAlign.salesBizEntFee.value" placeholder="销售-业务招待费"
                              @blur="validateAndSetDefault(formLabelAlign, 'salesBizEntFee')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.transpHandlingFee.fieldStatus }">
                  <el-form-item label="运输装卸费" title="运输装卸费" prop="transpHandlingFee.value">
                    <el-input v-model="formLabelAlign.transpHandlingFee.value" placeholder="运输装卸费"
                              @blur="validateAndSetDefault(formLabelAlign, 'transpHandlingFee')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.manufDeprecExpense.fieldStatus }">
                  <el-form-item label="制造-折旧费" title="制造-折旧费" prop="manufDeprecExpense.value">
                    <el-input v-model="formLabelAlign.manufDeprecExpense.value" placeholder="制造-折旧费"
                              @blur="validateAndSetDefault(formLabelAlign, 'manufDeprecExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.interestExpense.fieldStatus }">
                  <el-form-item label="利息支出" title="利息支出" prop="interestExpense.value">
                    <el-input v-model="formLabelAlign.interestExpense.value" placeholder="利息支出"
                              @blur="validateAndSetDefault(formLabelAlign, 'interestExpense')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.handlingFee.fieldStatus }">
                  <el-form-item label="手续费" title="手续费" prop="handlingFee.value">
                    <el-input v-model="formLabelAlign.handlingFee.value" placeholder="手续费"
                              @blur="validateAndSetDefault(formLabelAlign, 'handlingFee')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.discInterest.fieldStatus }">
                  <el-form-item label="贴现利息" title="贴现利息" prop="discInterest.value">
                    <el-input v-model="formLabelAlign.discInterest.value" placeholder="贴现利息"
                              @blur="validateAndSetDefault(formLabelAlign, 'discInterest')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.otherFinExpenses.fieldStatus }">
                  <el-form-item label="财务-其他费用" title="财务-其他费用" prop="otherFinExpenses.value">
                    <el-input v-model="formLabelAlign.otherFinExpenses.value" placeholder="财务-其他费用"
                              @blur="validateAndSetDefault(formLabelAlign, 'otherFinExpenses')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :class="{ 'changed-field': formLabelAlign.invOpCost.fieldStatus }">
                  <el-form-item label="存货机会成本" title="存货机会成本" prop="invOpCost.value">
                    <el-input v-model="formLabelAlign.invOpCost.value" placeholder="存货机会成本"
                              @blur="validateAndSetDefault(formLabelAlign, 'invOpCost')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6"  :class="{ 'changed-field': formLabelAlign.tax.fieldStatus }">
                  <el-form-item label="税金" title="税金" prop="tax.value">
                    <el-input v-model="formLabelAlign.tax.value" placeholder="税金"
                              @blur="validateAndSetDefault(formLabelAlign, 'tax')">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 总计的form -->
      <div class="total-box gray-background" style="margin-top: 5px; padding-top: 5px;">
        <el-form label-width="130px" class="" :model="totalForm" >
          <el-row>
            <el-col :span="6">
              <el-form-item label="财务点数合计" title="财务费用合计">
                <el-input :disabled="true" v-model="totalForm.totalFinExpenses" placeholder="财务费用合计">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" >
              <el-form-item label="厂价金额合计" title="厂价金额合计">
                <el-input :disabled="true" v-model="totalForm.totalFactoryAmount" placeholder="厂价金额合计">
                  <template slot="append">￥</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" >
              <el-form-item label="成本金额合计" title="成本金额合计">
                <el-input :disabled="true" v-model="totalForm.totalActualAmount" placeholder="成本金额合计">
                  <template slot="append">￥</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" >
              <el-form-item title="">
                            <span slot="label">
                                 合计差异
									<el-tooltip :content="'总差异 = (厂价金额合计 - 成本金额合计) / 厂价金额合计'" placement="top">
										<i class="el-icon-question"></i>
									</el-tooltip>
								</span>
                <el-input :disabled="true" v-model="totalForm.totalDifferenceValue" placeholder="总差异">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 添加物料和计算数据的按钮div -->
      <div class="button-box">
        <el-button type="text" @click="addMaterial">添加物料</el-button>
        <el-button type="text" >计算数据</el-button>
      </div>
      <!-- 物料表格控件 -->
      <div class="table-box">
        <el-table
          :data="materialData"
          border
          :cell-style="cellStyle"
          :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center' }">
          <el-table-column
            fixed
            label="编号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            width="180"
            prop="prodCategory"
            label="产品大类">
          </el-table-column>
          <el-table-column
            width="120"
            prop="model"
            label="型号">
          </el-table-column>
          <el-table-column
            width="180"
            prop="specification"
            label="规格">
          </el-table-column>
          <el-table-column
            width="180"
            prop="voltLevel"
            label="电压等级">
          </el-table-column>
          <el-table-column
            width="180"
            prop="measureUnit"
            label="单位">
          </el-table-column>
          <el-table-column
            width="180"
            prop="matCostPrice"
            label="材料成本价格(￥)">
            <template slot-scope="scope">
              {{ parseFloat(scope.row.matCostPrice).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="redBookPrice"
            label="红本价格(￥)">
            <template slot-scope="scope">
              {{ parseFloat(scope.row.redBookPrice).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="redBookCost"
            label="红本成本(￥)">
            <template slot-scope="scope">
              {{ parseFloat(scope.row.redBookCost).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="rbFacPrice"
            label="红本厂价(￥)">
            <template slot-scope="scope">
              {{ parseFloat(scope.row.rbFacPrice).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="number"
            label="数量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number" @blur="validateNumber(scope.row)">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="varRatio"
            label="差异比率">
            <!-- 自定义表头 -->
            <template slot="header" slot-scope="scope">
              <div>
                差异比率
                <el-tooltip effect="dark" content="差异比率 = (红本厂价 - 材料成本价格) / 红本厂价">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
            </template>

            <!-- 列内容 -->
            <template slot-scope="scope">
              <!-- 这里是列的具体内容 -->
              {{ scope.row.varRatio }}
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="wdFSurcharge"
            label="盘具运费">
            <template slot-scope="scope">
              {{ (parseFloat(scope.row.wdFSurcharge) * 100).toFixed(2) + '%' }}
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="manuCost"
            label="制造成本">
            <template slot-scope="scope">
              {{ (parseFloat(scope.row.manuCost) * 100).toFixed(2) + '%' }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="120"
            prop="totalCost"
            label="总成本(￥)">
          </el-table-column>
          <el-table-column
            fixed="right"
            width="120"
            prop="totalFacPrice"
            label="总厂价(￥)">
          </el-table-column>
          <el-table-column
            fixed="right"
            width="200"
            prop="totalVariance"
            label="(总厂价 - 总成本)/总厂价">
          </el-table-column>
          <el-table-column
            fixed="right"
            width="180"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleDeleteClick(scope.$index)" style="color: red;" type="text">删除</el-button>
              <el-button @click="handleDeleteClick(scope.$index)" style="color: red;" type="text">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!------------------------ dialog控件 ------------------------------------>
    <el-dialog class="materialDialogTable" :visible.sync="dialogMaterialVisible" width="1100px">
      <div slot="title"  style="margin: 0px">
        <el-form>
          <el-form-item >
            <el-input style="width: 180px; margin-right: 20px" v-model="queryParams.precMaterialName" placeholder="开头物料名称精确查询">
            </el-input>
            <el-input style="width: 180px; margin-right: 20px" v-model="queryParams.vagueMaterialName" placeholder="物料名称模糊查询">
            </el-input>
            <el-input style="width: 180px; margin-right: 20px" v-model="queryParams.vagueModel" placeholder="规格模糊查询">
            </el-input>
            <el-button type="primary" size="small" @click="searchMaterial">查询物料</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex; flex-direction: row;">
        <div style="width: 688px">
          <el-table
            :data="materialDialogData"
            @selection-change="handleSelectionChange"
            ref="materialDialogData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center', 'padding': '0px'}"
            :cell-style="{'text-align': 'center', 'padding': '5px 0px'}"
            highlight-selection-row
            :row-key="row => row.uid"
            :reserve-selection="true"
            border>
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              width="120"
              prop="prodCategory"
              label="产品大类">
            </el-table-column>
            <el-table-column
              width="120"
              prop="model"
              label="型号">
            </el-table-column>
            <el-table-column
              width="120"
              prop="specification"
              label="规格">
            </el-table-column>
            <el-table-column
              width="120"
              prop="voltLevel"
              label="电压">
            </el-table-column>
            <el-table-column
              width="100"
              prop="measureUnit"
              label="单位">
            </el-table-column>
          </el-table>
        </div>
        <div style="flex-grow: 1; padding-left: 20px;">
          <div
            v-for="(selectedItem, index) in selectedMaterialItems"
            :key="index"
            class="selected-item"
          >
            {{ selectedItem.model }} , {{ selectedItem.specification }} , {{ selectedItem.voltLevel }}
            <el-button @click="removeSelectedItem(selectedItem)" type="text" class="remove-btn">&#10006;</el-button>
          </div>
        </div>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="searchMaterial"
      />
      <div style="text-align: center; padding-top: 20px">
        <el-button-group>
          <el-button type="primary" size="small" style="margin-right: 80px" >确认</el-button>
          <el-button type="warning" size="small" >取消</el-button>
        </el-button-group>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {queryMaterialListByParam  } from "@/api/quote/quote";
const commonRule = [
  { required: true, message: '不能为空值，可填0', trigger: 'blur' },
  { pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,3})?$/, message: '格式有误，只能为数字格式', trigger: 'blur' }
];

export default {
  name: "index-app",
  data() {
    return {
      formLabelAlign: {
        officeExpense: { value: 0.022, defaultValue: 0.022, fieldStatus: false },
        travelExpense: { value: 0.011, defaultValue: 0.011, fieldStatus: false },
        salaryInsur: { value: 0.394, defaultValue: 0.394, fieldStatus: false },
        otherMgmtExpense: { value: 0.373, defaultValue: 0.373, fieldStatus: false },
        carExpense: { value: 0.010, defaultValue: 0.010, fieldStatus: false },
        mgmtBizEntFee: { value: 0.156, defaultValue: 0.156, fieldStatus: false },
        mgmtDeprecExpense: { value: 0.016, defaultValue: 0.016, fieldStatus: false },
        consultAuditFee: { value: 0.026, defaultValue: 0.026, fieldStatus: false },
        tenderCost: { value: 0.023, defaultValue: 0.023, fieldStatus: false },
        rentExpense: { value: 0.052, defaultValue: 0.052, fieldStatus: false },
        salary: { value: 0.239, defaultValue: 0.239, fieldStatus: false },
        inspectFee: { value: 0.016, defaultValue: 0.016, fieldStatus: false },
        transTravelExpense: { value: 0.020, defaultValue: 0.020, fieldStatus: false },
        otherSalesExpense: { value: 0.073, defaultValue: 0.073, fieldStatus: false },
        biddingCost: { value: 0.134, defaultValue: 0.134, fieldStatus: false },
        bizFee: { value: 1.183, defaultValue: 1.183, fieldStatus: false },
        salesBizEntFee: { value: 0.098, defaultValue: 0.098, fieldStatus: false },
        transpHandlingFee: { value: 0.621, defaultValue: 0.621, fieldStatus: false },
        manufDeprecExpense: { value: 0.217, defaultValue: 0.217, fieldStatus: false },
        interestExpense: { value: 0.436, defaultValue: 0.436, fieldStatus: false },
        handlingFee: { value: 0.108, defaultValue: 0.108, fieldStatus: false },
        discInterest: { value: 0.363, defaultValue: 0.363, fieldStatus: false },
        otherFinExpenses: { value: 0.197, defaultValue: 0.197, fieldStatus: false },
        invOpCost: { value: 0.031, defaultValue: 0.031, fieldStatus: false },
        tax: { value: 1.5, defaultValue: 1.5, fieldStatus: false },                 //税金
      },
      totalForm: {
        totalFinExpenses: 0,
        totalFactoryAmount: 0,
        totalActualAmount: 0,
        totalDifferenceValue: 0
      },
      formRules: {
        'officeExpense.value': commonRule,
        'travelExpense.value': commonRule,
        'salaryInsur.value': commonRule,
        'otherMgmtExpense.value': commonRule,
        'carExpense.value': commonRule,
        'mgmtBizEntFee.value': commonRule,
        'mgmtDeprecExpense.value': commonRule,
        'tenderCost.value': commonRule,
        'rentExpense.value': commonRule,
        'salary.value': commonRule,
        'inspectFee.value': commonRule,
        'transTravelExpense.value': commonRule,
        'otherSalesExpense.value': commonRule,
        'biddingCost.value': commonRule,
        'bizFee.value': commonRule,
        'consultAuditFee.value': commonRule,
        'transpHandlingFee.value': commonRule,
        'manufDeprecExpense.value': commonRule,
        'interestExpense.value': commonRule,
        'handlingFee.value': commonRule,
        'discInterest.value': commonRule,
        'otherFinExpenses.value': commonRule,
        'invOpCost.value': commonRule,
        'tax.value': commonRule,
        'salesBizEntFee.value': commonRule
        // Add similar rules for other form fields
      },
      materialData: [

      ],
      dialogMaterialVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        precMaterialName: '',
        vagueMaterialName: '',
        vagueModel: '',
      },
      materialDialogData: [

      ],
      selectedMaterialItems: [], // 选中的数据
      savedSelectedMaterials: [], // 保存选中的数据
      total: 0,
    }
  },
  computed: {

  },
  created() {

  },

  mounted() {

  },
  methods: {
    async init () {

    },
    /**--------------输入值改变则底色发生变化------------**/
    validateAndSetDefault(formLabelAlign, field) {
      if (formLabelAlign[field].value !== formLabelAlign[field].defaultValue) {
        this.$set(formLabelAlign, field, {
          ...formLabelAlign[field],
          fieldStatus: true
        });
      }
    },
    /**-----------恢复默认------------**/
    restoreDefaults() {
      for (const key in this.formLabelAlign) {
        if (this.formLabelAlign.hasOwnProperty(key)) {
          // 将value恢复为defaultValue
          this.$set(this.formLabelAlign, key, {
            value: this.formLabelAlign[key].defaultValue,
            defaultValue: this.formLabelAlign[key].defaultValue,
            fieldStatus: false,
          });
        }
      }
    },
    /**-------物料表格的cell样式----------**/
    cellStyle({row, column, rowIndex, columnIndex}) {
      if(columnIndex === 0) {
        return 'color : black; text-align : center; background : #E0E0E0; padding: 0px';
      } else if (columnIndex === 6 || columnIndex === 9) {
        return 'text-align : center; background : #F5F5F5; padding: 0px';
      } else {
        return ' text-align : center; padding: 0px';
      }
    },
    /**-------物料表格的删除操作----------**/
    handleDeleteClick(index){
      this.materialData.splice(index, 1)
    },
    /**--------添加物料，打开物料dialog框---------**/
    addMaterial(){
      this.dialogMaterialVisible = true;
    },
    /**--------查询物料---------**/
    searchMaterial() {
      queryMaterialListByParam(this.queryParams).then(response => {
        this.materialDialogData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSelectionChange(selection) {
      selection.forEach(item => {
        // 判断是否已经存在于已选列表中，避免重复添加
        if (!this.selectedMaterialItems.some(selectedItem => selectedItem.uid === item.uid)) {
          this.selectedMaterialItems.push(item);
        }
      });

    },
    removeSelectedItem(selectedItem) {
      // 判断当前数据是否被选择
      const isSelected = this.$refs.materialTable.selection.includes(selectedItem);

      // 从已选列表中移除该项
      const index = this.selectedMaterialItems.findIndex(item => item.uid === selectedItem.uid);
      if (index !== -1) {
        this.selectedMaterialItems.splice(index, 1);
      }

      // 如果当前数据被选择，则取消 el-table 中该项的选择状态
      if (isSelected) {
        this.$refs.materialTable.toggleRowSelection(selectedItem, false);
      }

    },

    addMaterialToTable() {
      // 将选中的物料信息添加到表格中
      this.materialData = this.materialData.concat(this.selectedMaterialItems);
      console.log(this.materialData)
      // 清空选中的物料信息
      this.selectedMaterialItems = [];
      this.$refs.materialTable.clearSelection();
      this.dialogMaterialVisible = false;

    },

    closeMaterialDialog() {
      this.dialogMaterialVisible = false;
    },
  },
}
</script>

<style scoped lang="scss">
.center-container {
  width: 100%;
}

.gray-background {
  width: 98%;
  margin: auto;
  background-color: #f0f0f0; /* 浅灰色背景 */
  border-radius: 10px; /* 可以根据需要调整边框圆角 */
  backdrop-filter: blur(10px); /* 调整模糊度 */
  -webkit-backdrop-filter: blur(10px); /* 兼容性处理，适用于一些WebKit浏览器 */

}

.form-box .el-col {
  height: 55px;
}

.total-box .el-col {
  height: 42px;
}

.button-box .el-button {
  margin: 10px 80px 10px 0px;
}

.button-box {
  align-items: center;
  text-align: center;
  width: 98%;
  margin: 5px 10px 5px 10px;
  background-color: #f0f0f0; /* 浅灰色背景 */
  border-radius: 10px; /* 可以根据需要调整边框圆角 */
  backdrop-filter: blur(10px); /* 调整模糊度 */
  -webkit-backdrop-filter: blur(10px); /* 兼容性处理，适用于一些WebKit浏览器 */
}

.changed-field {
  background-color: #ffe6e6; /* 更改后的背景颜色 */
}

.materialDialogTable .el-dialog__header{
  padding: 20px 20px 0px !important;
}
.materialDialogTable .el-dialog__body{
  padding: 0px 20px !important;
}
</style>