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

<template>
  <div class="pageIndexClass">
    <div class="content">
      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
               highlight-current-row :action-list="[
          {
            text: '新建报价单',
            action: () => newPriceSheet(),
          },
        ]" @get-list="getList">

        <template #code="{ item }">
          <div style="width: 100%">
            <!-- <span style="color: #409eff; cursor: pointer; word-break: break-all" @click="getDtl(item,true)">{{ item.code }}</span> -->
            <span style="color: #409eff; cursor: pointer; word-break: break-all" @click="handleOpenDetail(item)">{{ 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.amount, 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>

        <template #btn="{item}">
          <div style="width: 100%">
            <span v-if="item.status == 0">
              <el-button type="primary" text v-debounce @click="getDtl(item, false)">修改</el-button>
              <el-button type="danger" text v-debounce @click="handleRepeal(item,'/saleQuotation/delete')">删除</el-button>
            </span>
            <span>
              <el-button type="primary" text v-debounce v-if="item.quotationStatus==2" @click="handleBack(item)">退回</el-button>
              <el-button type="primary" text v-debounce v-if="item.status == 30 && item.quotationStatus==2"
                         @click="getDtl(item, false,true)">变更</el-button>
              <el-button type="primary" text v-debounce v-if="item.quotationStatus==2 && !item.extQuotationId"
                         @click="handleForeign(item)">转对外</el-button>
              <el-button type="danger" text v-debounce v-if="item.status !=0 && item.status !=88"
                         @click="handleRepeal(item,'/saleQuotation/cancellation')">作废</el-button>
            </span>
          </div>
        </template>
      </byTable>
    </div>

    <el-dialog v-if="openAddDialog" v-model="openAddDialog" title="报价单" width="90%" append-to-body>
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom" v-loading="submitLoading">
        <template #chart>
          <div style="width:100%;padding-left:25px">
            <div ref="chartDom" style="height:300px"></div>
          </div>
        </template>
        <template #buyer>
          <div style="width: 100%">
            <el-form-item label="客户信息" prop="buyCorporationId" class="wid100">
              <el-select v-model="formData.data.buyCorporationId" filterable remote reserve-keyword placeholder="请输入关键字" remote-show-suffix
                         :remote-method="remoteMethod" :loading="loadingSearch" @input="remoteMethod" style="width: 100%" @change="changeCustomer">
                <el-option v-for="item in customerList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="地址" class="wid100">
              <el-row style="width: 100%">
                <el-col :span="6">
                  <el-form-item label="" prop="buyCountryId" class="margin-b-0 wid100">
                    <el-select v-model="formData.data.buyCountryId" placeholder="国家" style="width:100%" filterable
                               @change="(val) => getCityData(val, '20', true)">
                      <el-option v-for="item in countryData" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="provinceName" class="margin-b-0 wid100">
                    <selectCity placeholder="省/洲" @change="(val) => getCityData(val, '30', true)" addressId="buyProvinceId" addressName="provinceName"
                                v-model="formData.data" :data="provinceData">
                    </selectCity>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="cityName" class="margin-b-0 wid100">
                    <selectCity placeholder="城市" addressId="buyCityId" addressName="cityName" v-model="formData.data" :data="cityData">
                    </selectCity>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="buyPostalCode" class="margin-b-0">
                    <el-input v-model="formData.data.buyPostalCode" placeholder="请输入邮编" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="详细地址" prop="buyAddress" class="margin-b-0 wid100">
              <el-input v-model="formData.data.buyAddress" type="textarea">
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="联系人" class="wid100">
              <el-row style="width: 100%">
                <el-col :span="8">
                  <el-form-item label="" prop="buyContactName" label-width="0px" class="margin-b-0 wid100">
                    <el-autocomplete v-model="formData.data.buyContactName" :fetch-suggestions="querySearchPerson" style="width:100%" clearable
                                     class="inline-input w-50" placeholder="请输入联系人" @select="handlePerson">
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="" prop="buyContactNumber" label-width="0px" class="margin-b-0 wid100">
                    <el-input v-model="formData.data.buyContactNumber" placeholder="请输入联系人电话" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item> -->
          </div>
        </template>

        <template #commodity>
          <div style="width: 100%;padding-left:25px">
            <el-button type="primary" @click="openProductCompany = true" plain style="margin-bottom: 16px" v-if="!isDetail"
                       :disabled="!formData.data.companyId">产品库</el-button>
            <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; ">
                      <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*cm*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 label="数量" width="110">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'quotationProductList.' + scope.$index + '.quotationProductBomList.' + $index + '.quantity'"
                                          :rules="rules.quantity" :inline-message="true" class="margin-b-0 wid100">
                              <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%"
                                               :precision="0" :controls="false" :min="1" :disabled="row.type==1" @change="changeQuantity()" />
                            </el-form-item>
                          </div>
                        </template>
                      </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%">
                            <span v-if="row.price">{{row.price}}</span>
                            <span v-else>待报价</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="amount" label="小计" width="110">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <span v-if="row.amount">{{row.amount}}</span>
                            <span v-else>一</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="备注" width="180">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'quotationProductList.' + scope.$index + '.quotationProductBomList.' + $index + '.remark'"
                                          :rules="rules.remark" :inline-message="true" class="margin-b-0 wid100">
                              <el-input v-model="row.remark" placeholder="请输入" style="width: 100%" :min="0" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="60" align="center" fixed="right" v-if="!isDetail">
                        <template #default="{ row,$index }">
                          <el-button type="primary" link @click="handleDeleteMaterial(scope.$index,$index)" v-if="row.type==2">删除</el-button>
                        </template>
                      </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*cm*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 label="数量" width="110">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item :prop="'quotationProductList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true"
                                  class="margin-b-0 wid100">
                      <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%" :precision="0"
                                       :controls="false" :min="1" @change="changeQuantity()" />

                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单价" width="110">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <span v-if="row.price">{{row.price}}</span>
                    <span v-else>待报价</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="小计" width="110">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <span v-if="row.amount">{{row.amount}}</span>
                    <span v-else>一</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="140" align="center" fixed="right" v-if="!isDetail">
                <template #default="{ $index }">
                  <el-button type="primary" link @click="handleClickSelectMaterial($index)">包材辅材</el-button>
                  <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </byForm>
      <template #footer v-if="!isDetail">
        <el-button @click="openAddDialog = false" size="default" v-debounce>关 闭</el-button>
        <el-button type="primary" @click="handleSubmit(0)" size="default" v-debounce v-if="!isChange">暂 存</el-button>
        <el-button type="primary" @click="handleSubmit(30)" size="default" v-debounce>提 交</el-button>
      </template>
    </el-dialog>

    <el-dialog v-if="foreignDialog" v-model="foreignDialog" title="转对外报价单" width="90%" append-to-body>
      <byForm :formConfig="formConfigOne" :formOption="formOptionOne" v-model="formData.data" :rules="rulesOne" ref="formDomOne"
              v-loading="submitLoading">
        <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; ">
                      <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*cm*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 label="数量" width="80" prop="quantity">
                      </el-table-column>
                      <el-table-column label="总数量" width="80" prop="allQuantity">
                      </el-table-column>
                      <el-table-column label="原本单价" width="110" prop="priceCopy">
                      </el-table-column>
                      <el-table-column label="单价" width="110" prop="price">
                      </el-table-column>
                      <el-table-column label="利润点数" width="110">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'quotationProductList.' + scope.$index + '.quotationProductBomList.' + $index + '.coefficient'"
                                          :rules="rules.coefficient" :inline-message="true" class="margin-b-0 wid100">
                              <el-input-number onmousewheel="return false;" v-model="row.coefficient" 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">
                      </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*cm*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 label="数量" width="110" prop="quantity">

              </el-table-column>
              <el-table-column label="单价" width="110" prop="price">

              </el-table-column>
              <el-table-column prop="amount" label="小计" width="110">

              </el-table-column>

            </el-table>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="foreignDialog = false" size="default" v-debounce>关 闭</el-button>
        <el-button type="primary" @click="handleSubmitOne()" size="default" v-debounce>提 交</el-button>
      </template>
    </el-dialog>

    <el-dialog v-if="openProductCompany" v-model="openProductCompany" title="产品库" width="90%" append-to-body>
      <SelectProduct @selectProduct="selectProduct" :companyId="companyId" :isRawMaterial="'1'"></SelectProduct>
      <template #footer>
        <el-button @click="openProductCompany = false" size="defualt" 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 v-if="detailDialog" v-model="detailDialog" title="报价详情" width="90%" append-to-body>
      <PriceSheetDetailList :rowData="detailRowData" dataType="1"></PriceSheetDetailList>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import moment from "moment";
import byForm from "@/components/byForm/index";
import selectCity from "@/components/selectCity/index.vue";
import SelectProduct from "@/components/product/SelectProduct.vue";
import SelectMaterial from "@/components/product/SelectMaterial.vue";
import * as echarts from "echarts";
import PriceSheetDetailList from "@/views/EHSD/saleContract/PriceSheetDetailList";

const { proxy } = getCurrentInstance();
const companyId = ref("");
const accountList = ref([]);
const corporationList = ref([]);
const tradeMethods = ref([]);
const accountCurrency = ref([]);
const companyData = ref([]);
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 typeData = ref([
  {
    label: "内销",
    value: "1",
  },
  {
    label: "外贸",
    value: "2",
  },
]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    status: "",
    type: "",
    quotationStatus: "",
    companyId: "",
    quotationTimeSta: "",
    quotationTimeEnd: "",
    beginTime: "",
    endTime: "",
  },
});
const loading = ref(false);
const selectConfig = computed(() => {
  return [
    {
      label: "报价单状态",
      prop: "status",
      data: statusData.value,
    },
    {
      label: "报价单类型",
      prop: "type",
      data: typeData.value,
    },
    {
      label: "子公司报价状态",
      prop: "quotationStatus",
      data: quotationStatusData.value,
    },
    {
      label: "报价子公司",
      prop: "companyId",
      data: companyData.value,
    },
    {
      type: "time",
      label: "报价时间",
      placeholder: "开始日期",
      prop: "quotationTimeSta",
      placeholderOne: "结束日期",
      propOne: "quotationTimeEnd",
    },
    // {
    //   type: "time",
    //   label: "创建时间",
    //   placeholder: "开始日期",
    //   prop: "beginTime",
    //   placeholderOne: "结束日期",
    //   propOne: "endTime",
    // },
  ];
});

const config = computed(() => {
  return [
    {
      attrs: {
        label: "报价单号",
        slot: "code",
        width: 180,
      },
    },
    {
      attrs: {
        label: "报价单状态",
        slot: "status",
        width: 100,
      },
    },
    {
      attrs: {
        label: "报价单类型",
        prop: "type",
        width: 100,
      },
      render(val) {
        return proxy.dictValueLabel(val, typeData.value);
      },
    },
    {
      attrs: {
        label: "报价子公司",
        prop: "companyName",
        width: 100,
      },
    },
    {
      attrs: {
        label: "客户名称",
        prop: "buyCorporationName",
        "min-width": 150,
      },
    },
    {
      attrs: {
        label: "子公司报价状态",
        slot: "quotationStatus",
        width: 130,
      },
    },
    {
      attrs: {
        label: "报价金额",
        slot: "amount",
        width: 120,
      },
    },
    {
      attrs: {
        label: "报价时间",
        prop: "quotationTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "报价单产品",
        slot: "product",
        "min-width": 180,
      },
    },
    {
      attrs: {
        label: "创建时间",
        prop: "createTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "创建人",
        prop: "createUserName",
        width: 80,
      },
    },
    {
      attrs: {
        label: "操作",
        width: 200,
        slot: "btn",
        align: "right",
        fixed: "right",
      },
    },
  ];
});

const getDict = () => {
  proxy
    .post("/customer/selPage", {
      pageNum: 1,
      pageSize: 50,
    })
    .then((res) => {
      customerList.value = res.rows.map((x) => ({
        ...x,
        label: x.name,
        value: x.id,
      }));
    });

  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 9999,
      keyword: "",
      tenantId: proxy.useUserStore().user.tenantId,
      type: 0,
    })
    .then((res) => {
      companyData.value = res.data.map((x) => ({
        ...x,
        label: x.deptName,
        value: x.deptId,
      }));
      treeData.value = proxy.handleTree(res.data, "deptId");
    });
};
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/saleQuotation/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getDict();
getList();
const openAddDialog = ref(false);
const submitLoading = ref(false);
const modalType = ref("add");
const newPriceSheet = () => {
  formOption.disabled = false;
  isDetail.value = false;
  isChange.value = false;
  isShowChart.value = false;
  modalType.value = "add";
  openAddDialog.value = true;
  formData.data = {
    type: "1",
    quotationProductList: [],
  };
};

const isDetail = ref(false);
const isChange = ref(false);
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, change = false) => {
  formOption.disabled = flag;
  modalType.value = "edit";
  isChange.value = change;
  isDetail.value = flag;
  isShowChart.value = flag;
  openAddDialog.value = true;
  proxy.post("/saleQuotation/detail", { id: row.id }).then((res) => {
    formData.data = res;
    // 城市数据回显
    if (formData.data.buyCountryId) {
      getCityData(formData.data.buyCountryId, "20");
    }
    if (formData.data.buyProvinceId) {
      getCityData(formData.data.buyProvinceId, "30");
    }
    // 文件数据回显
    getFileData();
    // 价格计算
    changeQuantity();

    //折线图
    if (flag && res.quotationTrendList && res.quotationTrendList.length >= 2) {
      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 openPrint = ref(false);
const printDetails = ref({});
const clickPrint = (row) => {
  printDetails.value = {};
  openPrint.value = true;
  proxy.post("/saleQuotation/detail", { id: row.id }).then((res) => {
    printDetails.value = res;
    if (printDetails.value.ehsdJson) {
      let ehsdJson = JSON.parse(printDetails.value.ehsdJson);
      printDetails.value.deliveryTime = ehsdJson.deliveryTime;
    }
  });
};
const clickDownload = () => {
  proxy.getPdf("报价单PDF文件");
};
const statistics = (label, index) => {
  let num = 0;
  if (
    printDetails.value.quotationProductList &&
    printDetails.value.quotationProductList.length > 0
  ) {
    printDetails.value.quotationProductList.map((item) => {
      if (item[label]) {
        num = parseFloat(Number(num) + Number(item[label])).toFixed(index);
      }
    });
  }
  return num;
};
const getLabel = (key, list, label) => {
  let text = "";
  if (list && list.length > 0) {
    let data = list.filter((item) => item.id === key);
    if (data && data.length > 0) {
      text = data[0][label];
    }
  }
  return text;
};
const getAllMoney = (num) => {
  let money = num;
  if (
    printDetails.value.quotationPayList &&
    printDetails.value.quotationPayList.length > 0
  ) {
    printDetails.value.quotationPayList.map((item) => {
      if (item.amount) {
        money = parseFloat(Number(money) + Number(item.amount)).toFixed(2);
      }
    });
  }
  return money;
};

const currencyData = computed(
  () => proxy.useUserStore().allDict["account_currency"]
);
const fundsPaymentMethod = computed(
  () => proxy.useUserStore().allDict["funds_payment_method"]
);
const shippingMethod = computed(
  () => proxy.useUserStore().allDict["shipping_method"]
);
const treeData = ref([]);
const customerList = ref([]);
const customerUserList = ref([]);
const countryData = ref([]);
const provinceData = ref([]);
const cityData = ref([]);
const openProductCompany = ref(false);
const copyType = ref(1);
const copyContract = ref(false);
const indexValue = ref(-1);
const openSelectMaterial = ref(false);
const formData = reactive({
  data: {
    type: "1",
    quotationProductList: [],
  },
});
const formDom = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  disabled: 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: "报价类型",
    },
    {
      type: "select",
      prop: "type",
      label: "报价类型",
      data: typeData.value,
      itemWidth: 50,
    },
    {
      type: "treeSelect",
      prop: "companyId",
      label: "报价公司",
      data: treeData.value,
      propsTreeLabel: "deptName",
      propsTreeValue: "deptId",
      itemWidth: 50,
      fn: (val) => {
        companyId.value = val;
      },
    },
    {
      type: "title1",
      title: "贸易信息",
    },
    {
      type: "slot",
      slotName: "buyer",
      label: "",
      itemWidth: 100,
    },
    {
      type: "input",
      itemType: "text",
      label: "联系人",
      prop: "buyContactName",
      itemWidth: 50,
    },
    {
      type: "input",
      itemType: "text",
      label: "联系人电话",
      prop: "buyContactNumber",
      itemWidth: 50,
    },
    {
      type: "title1",
      title: "商品信息",
    },
    {
      type: "slot",
      slotName: "commodity",
      label: "",
    },
    {
      type: "title1",
      title: "报价总金额",
    },
    {
      type: "input",
      prop: "amount",
      label: "报价总金额",
      itemWidth: 25,
      disabled: true,
    },
  ];
});
const rules = ref({
  type: [{ required: true, message: "请选择报价类型", trigger: "change" }],
  companyId: [{ required: true, message: "请选择报价公司", trigger: "change" }],
  buyCorporationId: [
    { required: true, message: "请选择客户公司", trigger: "change" },
  ],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
});

const getCityData = (id, type, isChange = false) => {
  proxy.post("/customizeArea/list", { parentId: id }).then((res) => {
    if (type === "20") {
      provinceData.value = res;
      if (isChange) {
        formData.data.buyProvinceId = "";
        formData.data.provinceName = "";
        formData.data.buyCityId = "";
        formData.data.cityName = "";
      }
    } else if (type === "30") {
      cityData.value = res;
      if (isChange) {
        formData.data.buyCityId = "";
        formData.data.cityName = "";
      }
    } else {
      countryData.value = res;
    }
  });
};
getCityData("0");

const changeCustomer = (val) => {
  formData.data.quotationProductList = [];
  if (val) {
    proxy.post("/customer/detail", { id: val }).then(
      (res) => {
        formData.data.buyCorporationName = res.name;
        if (res.customerUserList && res.customerUserList.length > 0) {
          formData.data.buyContactName = res.customerUserList[0].name;
          if (res.customerUserList[0].contactJson) {
            let contactJson = JSON.parse(res.customerUserList[0].contactJson);
            if (contactJson && contactJson.length > 0) {
              formData.data.buyContactNumber = contactJson[0].contactNo;
            }
          }
          customerUserList.value = res.customerUserList.map((item) => {
            return {
              ...item,
              value: item.name,
            };
          });
        }
        // 回填客户的账户信息
        // formData.data.beneficiaryName = res.beneficiaryName;
        // formData.data.beneficiaryBank = res.beneficiaryBank;
        // formData.data.beneficiaryBankAddress = res.beneficiaryBankAddress;
        // formData.data.beneficiaryAccountNumber = res.beneficiaryAccountNumber;
        // formData.data.swiftCode = res.swiftCode;
        // formData.data.beneficiaryAddress = res.beneficiaryAddress;

        formData.data.buyCountryId = res.countryId;
        formData.data.buyProvinceId = res.provinceId;
        formData.data.buyCityId = res.cityId;
        formData.data.buyPostalCode = res.zipCode;
        formData.data.buyAddress = res.address;
        getCityData(formData.data.buyCountryId, "20");
        if (formData.data.buyProvinceId) {
          getCityData(formData.data.buyProvinceId, "30");
        }
      },
      (err) => {
        formData.data.buyCountryId = "";
        formData.data.buyProvinceId = "";
        formData.data.buyCityId = "";
        formData.data.buyPostalCode = "";
        formData.data.buyAddress = "";
      }
    );
  } else {
    formData.data.buyCountryId = "";
    formData.data.buyProvinceId = "";
    formData.data.buyCityId = "";
    formData.data.buyPostalCode = "";
    formData.data.buyAddress = "";
  }
};

const handlePerson = (item) => {
  if (item.contactJson) {
    let data = JSON.parse(item.contactJson);
    formData.data.buyContactNumber = data[0].contactNo;
  }
};
const quotationProductBomList = ref([]);
const selectProduct = (goods) => {
  if (goods && goods.id) {
    let fileUrl = "";
    if (goods.fileList && goods.fileList.length > 0) {
      fileUrl = goods.fileList[0].fileUrl;
    }
    proxy.post("/productBomInfo/detail", { id: goods.id }).then((res) => {
      if (res.productBomDetailList && res.productBomDetailList.length > 0) {
        quotationProductBomList.value = res.productBomDetailList || [];
        quotationProductBomList.value = quotationProductBomList.value.map(
          (x) => ({
            fileUrl: "",
            materialId: x.materialId,
            productName: x.materialName,
            productCode: x.materialCode,
            productLength: x["length"],
            productWidth: x.width,
            productHeight: x.height,
            quantity: x.quantity || null,
            allQuantity: "",
            price: null,
            amount: "",
            fileList: [],
            type: x.type,
          })
        );
        formData.data.quotationProductList.push({
          fileUrl: fileUrl,
          productId: goods.id,
          productName: goods.name,
          productCode: goods.customCode,
          productLength: goods["length"],
          productWidth: goods.width,
          productHeight: goods.height,
          quantity: null,
          price: null,
          amount: "",
          fileList: [],
          quotationProductBomList: quotationProductBomList.value,
        });
        proxy.msgTip("添加成功", 1);
        let ids = quotationProductBomList.value.map((x) => x.materialId);
        proxy.getFile(
          ids,
          quotationProductBomList.value,
          "materialId",
          "fileList",
          "fileUrl"
        );
      } else {
        return proxy.msgTip("该产品未配置BOM", 2);
      }
    });
  } else {
    return proxy.msgTip("选择错误", 2);
  }
};

const handleClickSelectMaterial = (index) => {
  indexValue.value = index;
  openSelectMaterial.value = true;
};

const selectMaterial = (goods) => {
  let flag = formData.data.quotationProductList[
    indexValue.value
  ].quotationProductBomList.some((x) => x.materialId == goods.id);
  if (!flag) {
    let fileUrl = "";
    if (goods.fileList && goods.fileList.length > 0) {
      fileUrl = goods.fileList[0].fileUrl;
    }
    formData.data.quotationProductList[
      indexValue.value
    ].quotationProductBomList.push({
      fileUrl: fileUrl,
      materialId: goods.id,
      productName: goods.name,
      productCode: goods.customCode,
      productLength: goods["length"],
      productWidth: goods.width,
      productHeight: goods.height,
      quantity: null,
      price: null,
      amount: "",
      fileList: [],
      type: 2,
    });
    proxy.msgTip("选择成功");
  } else {
    proxy.msgTip("该物料已选择", 2);
  }
};

const onPicture = (path) => {
  window.open(path, "_blank");
};
const handleRemove = (index) => {
  formData.data.quotationProductList.splice(index, 1);
  changeQuantity();
};

const handleDeleteMaterial = (index, sonIndex) => {
  formData.data.quotationProductList[index].quotationProductBomList.splice(
    sonIndex,
    1
  );
  changeQuantity();
};
const loadingSearch = ref(false);
const remoteMethod = (keyword) => {
  if (keyword && typeof keyword === "string") {
    loadingSearch.value = true;
    proxy.post("/customer/selPage", { keyword }).then((res) => {
      customerList.value = res.rows.map((x) => ({
        ...x,
        label: x.name,
        value: x.id,
      }));
      loadingSearch.value = false;
    });
  }
  return;
};

const changeQuantity = () => {
  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];
      if (iele.quantity) {
        if (iele.price) {
          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.allQuantity = iele.quantity * jele.quantity;
          if (jele.price) {
            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.status = type;
      if (isChange.value) {
        proxy.post("/saleQuotation/change", formData.data).then(
          (res) => {
            proxy.msgTip("操作成功", 1);
            openAddDialog.value = false;
            submitLoading.value = false;
            getList();
          },
          (err) => {
            submitLoading.value = false;
          }
        );
      } else {
        proxy.post("/saleQuotation/" + modalType.value, formData.data).then(
          (res) => {
            proxy.msgTip("操作成功", 1);
            openAddDialog.value = false;
            submitLoading.value = false;
            getList();
          },
          (err) => {
            submitLoading.value = false;
          }
        );
      }
    } else {
      return proxy.msgTip("请添加至少一件商品", 2);
    }
  });
};

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",
        data: [],
      },
    ],
  },
});

const handleBack = (row) => {
  proxy
    .msgConfirm()
    .then((res) => {
      proxy
        .post("/saleQuotation/edit", {
          id: row.id,
          quotationStatus: 1,
        })
        .then((res) => {
          proxy.msgTip("操作成功", 1);
          getList();
        });
    })
    .catch((err) => {});
};
const handleRepeal = (row, url) => {
  proxy
    .msgConfirm()
    .then((res) => {
      proxy
        .post(url, {
          id: row.id,
        })
        .then((res) => {
          proxy.msgTip("操作成功", 1);
          getList();
        });
    })
    .catch((err) => {});
};
const formDomOne = ref(null);
const foreignDialog = ref(false);
const formConfigOne = computed(() => {
  return [
    {
      type: "title1",
      title: "利润点数",
    },
    {
      type: "number",
      prop: "coefficient",
      label: "利润点数",
      precision: 2,
      min: 0.01,
      controls: false,
      itemWidth: 25,
      fn: (val) => {
        publicTotalAmount(val);
      },
    },
    {
      type: "title1",
      title: "商品信息",
    },
    {
      type: "slot",
      slotName: "commodity",
      label: "",
    },
    {
      type: "title1",
      title: "报价总金额",
    },
    {
      type: "input",
      prop: "amount",
      label: "报价总金额",
      itemWidth: 25,
      disabled: true,
    },
  ];
});

const formOptionOne = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  disabled: false,
});
const rulesOne = ref({
  price: [{ required: true, message: "请输入单价", trigger: "blur" }],
  // coefficient: [{ required: true, message: "请输入系数", trigger: "blur" }],
});
const handleForeign = (row) => {
  foreignDialog.value = true;
  proxy.post("/saleQuotation/detail", { id: row.id }).then((res) => {
    formData.data = res;
    formData.data.saleQuotationId = res.id;
    delete formData.data.id;
    // 复制原本价格
    for (let i = 0; i < formData.data.quotationProductList.length; i++) {
      const iele = formData.data.quotationProductList[i];
      iele.quotationProductId = iele.id;
      delete iele.id;
      for (let j = 0; j < iele.quotationProductBomList.length; j++) {
        const jele = iele.quotationProductBomList[j];
        jele.quotationProductBomId = jele.id;
        delete jele.id;
        jele.priceCopy = jele.price;
        // 默认系数
        jele.coefficient = 1;
      }
    }
    changeQuantity();
    // 城市数据回显
    if (formData.data.buyCountryId) {
      getCityData(formData.data.buyCountryId, "20");
    }
    if (formData.data.buyProvinceId) {
      getCityData(formData.data.buyProvinceId, "30");
    }
    // 文件数据回显
    getFileData();
  });
};

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];
        // 计算新单价
        jele.price = parseFloat(
          Number(jele.priceCopy) * Number(jele.coefficient)
        ).toFixed(2);
        // 计算物料总计
        jele.amount = parseFloat(
          Number(jele.allQuantity) *
            Number(jele.priceCopy) *
            Number(jele.coefficient)
        ).toFixed(2);
        // 单个产品的一个物料的钱
        productPrice += Number(
          parseFloat(Number(jele.quantity) * Number(jele.priceCopy)).toFixed(2)
        );
      }
      iele.price = parseFloat(productPrice).toFixed(2);
      iele.amount = parseFloat(
        Number(iele.quantity) * Number(iele.price)
      ).toFixed(2);
      money += Number(iele.amount);
    }
  }
  formData.data.amount = parseFloat(money).toFixed(2);
};

const publicTotalAmount = (val) => {
  if (val) {
    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];
          // 系数赋值
          jele.coefficient = val;
          // 计算新单价
          jele.price = parseFloat(
            Number(jele.priceCopy) * Number(jele.coefficient)
          ).toFixed(2);
          // 计算物料总计
          jele.amount = parseFloat(
            Number(jele.allQuantity) *
              Number(jele.priceCopy) *
              Number(jele.coefficient)
          ).toFixed(2);
          // 单个产品的一个物料的钱
          productPrice += Number(
            parseFloat(Number(jele.quantity) * Number(jele.priceCopy)).toFixed(
              2
            )
          );
        }
        iele.price = parseFloat(productPrice).toFixed(2);
        iele.amount = parseFloat(
          Number(iele.quantity) * Number(iele.price)
        ).toFixed(2);
        money += Number(iele.amount);
      }
    }
    formData.data.amount = parseFloat(money).toFixed(2);
  }
};

const handleSubmitOne = () => {
  formDomOne.value.handleSubmit(() => {
    proxy
      .msgConfirm()
      .then((res) => {
        submitLoading.value = true;
        proxy.post("/extQuotation/add", formData.data).then((res) => {
          proxy.msgTip("操作成功", 1);
          submitLoading.value = false;
          foreignDialog.value = false;
          getList();
        });
      })
      .catch((err) => {});
  });
};

const detailDialog = ref(false);
const detailRowData = ref({});
const handleOpenDetail = (item) => {
  detailRowData.value = item;
  detailDialog.value = true;
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.baseRow {
  min-height: 24px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.contentRow {
  border-right: 1px solid black;
  line-height: 24px;
  padding-left: 4px;
}
.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: #fbfbfb !important;
}
:deep(.bom-table .el-table-fixed-column--right) {
  // background: #fbfbfb !important;
}
</style>