sd-new-vue/src/views/group/order/management/add.vue

<template>
  <div>
    <el-card class="box-card">
      <div style="padding: 8px; text-align: center" v-if="formData.data.code || formData.data.wlnCode">
        <span style="font-size: 18px; font-weight: 700">{{ formData.data.code }} </span>
        <span style="font-size: 18px; font-weight: 700" v-if="formData.data.wlnCode"> ({{ formData.data.wlnCode }})</span>
      </div>
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
        <template #deliveryAddress>
          <div style="width: 100%">
            <el-row>
              <el-col :span="3">
                <el-form-item label-width="0" prop="province" style="width: 100%">
                  <el-input v-model="formData.data.province" placeholder="请输入省" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label-width="0" prop="city" style="width: 100%">
                  <el-input v-model="formData.data.city" placeholder="请输入市" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label-width="0" prop="county" style="width: 100%">
                  <el-input v-model="formData.data.county" placeholder="请输入区/县" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label-width="0" prop="detailedAddress" style="width: 100%">
                  <el-input v-model="formData.data.detailedAddress" placeholder="请输入详细地址" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="0" prop="postcode" style="width: 100%">
                  <el-input v-model="formData.data.postcode" placeholder="请输入邮编" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </template>
        <template #consignee>
          <div style="width: 100%">
            <el-row>
              <el-col :span="6">
                <el-form-item label-width="0" prop="consignee" style="width: 100%">
                  <el-input v-model="formData.data.consignee" placeholder="请输入联系人" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="0" prop="consigneeNumber" style="width: 100%">
                  <el-input v-model="formData.data.consigneeNumber" placeholder="请输入联系电话" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="0" prop="departmentId" style="width: 100%">
                  <el-select v-model="formData.data.departmentId" placeholder="请选择事业部" clearable style="width: 100%">
                    <el-option v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </template>
        <template #orderSkuList>
          <div style="width: 100%; padding: 0 20px">
            <div style="margin-bottom: 10px">
              <el-button type="primary" size="small" @click="clickAddProduct()">选择产品</el-button>
            </div>
            <el-collapse v-model="activeNames">
              <div v-for="(item, index) in formData.data.orderSkuList" :key="index" style="margin-bottom: 20px">
                <div style="border: 1px solid #edf0f5">
                  <el-table :data="[item]" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
                    <el-table-column label="产品" width="300">
                      <template #default="{ row }">
                        <div style="width: 100%">
                          <div style="line-height: 28px">
                            <span style="color: black; font-weight: 700">商品名称: </span>
                            <span>{{ item.wlnSkuName }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span style="color: black; font-weight: 700">品号: </span>
                            <span>{{ item.code }}</span>
                          </div>
                          <div style="line-height: 28px; word-break: break-all">
                            <span style="color: black; font-weight: 700">品名: </span>
                            <span>{{ item.name }}</span>
                          </div>
                          <div style="line-height: 28px; display: flex">
                            <span style="width: 37px; color: black; font-weight: 700">数量: </span>
                            <el-form-item
                              :prop="'orderSkuList.' + index + '.quantity'"
                              :rules="rules.quantity"
                              :inline-message="true"
                              style="width: calc(100% - 37px)">
                              <el-input-number
                                onmousewheel="return false;"
                                v-model="row.quantity"
                                placeholder="数量"
                                style="width: 100%"
                                :controls="false"
                                :min="0"
                                :precision="0"
                                @change="changeQuantity(index)" />
                            </el-form-item>
                          </div>
                          <div style="line-height: 28px">
                            <span style="color: black; font-weight: 700">加工费: </span>
                            <span>{{ item.customProcessingFee }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span style="color: black; font-weight: 700">代发费: </span>
                            <span>{{ item.lssueFee }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span style="color: black; font-weight: 700">快递包材费: </span>
                            <span>{{ item.deliveryMaterialsFee }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span style="color: black; font-weight: 700">包装人工费: </span>
                            <span>{{ item.packingLabor }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span style="color: black; font-weight: 700">单价: </span>
                            <span>{{ item.unitPrice }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span style="color: black; font-weight: 700">小计: </span>
                            <span>{{ item.subtotal }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span style="width: 37px; color: black; font-weight: 700">打印: </span>
                            <el-form-item
                              :prop="'orderSkuList.' + index + '.printType'"
                              :rules="rules.printType"
                              :inline-message="true"
                              style="width: calc(100% - 37px)">
                              <el-radio-group v-model="item.printType">
                                <el-radio v-for="(itemType, index) in printType" :key="index" :label="itemType.dictKey">{{ itemType.dictValue }}</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="图稿（设计图）" width="180">
                      <template #default="{ row }">
                        <el-form-item :prop="'orderSkuList.' + index + '.productImgUrl'">
                          <el-upload
                            class="avatar-uploader"
                            action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                            :data="uploadProductData"
                            :show-file-list="false"
                            :on-success="
                              (response, uploadFile) => {
                                return handleProductSuccess(uploadFile, index);
                              }
                            "
                            :before-upload="uploadProductFile">
                            <el-image v-if="row.productImgUrl" :src="row.productImgUrl" fit="scale-down" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                          </el-upload>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="图稿（生产文件）" width="320">
                      <template #default="{ row }">
                        <div style="color: black">共享文件夹路径（点击下方链接并上传文件）：</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="包材配件/单品" min-width="400">
                      <template #default="{ row }">
                        <div style="width: 100%">
                          <div style="margin-bottom: 10px">
                            <el-button type="primary" @click="clickPackingFittings(index)">选择包材配件</el-button>
                          </div>
                          <el-table :data="row.orderSkuBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
                            <el-table-column label="单价¥" width="80">
                              <template #default="props">
                                {{ moneyFormat(props.row.unitPrice, 2) }}
                              </template>
                            </el-table-column>
                            <el-table-column label="数量" width="100">
                              <template #default="props">
                                <el-form-item
                                  :prop="'orderSkuList.' + index + '.orderSkuBomList.' + props.$index + '.quantity'"
                                  :rules="rules.quantity"
                                  :inline-message="true"
                                  style="width: 100%">
                                  <el-input-number
                                    onmousewheel="return false;"
                                    v-model="props.row.quantity"
                                    placeholder="数量"
                                    style="width: 100%"
                                    :controls="false"
                                    :min="0"
                                    @change="changeBOMQuantity(index)" />
                                </el-form-item>
                              </template>
                            </el-table-column>
                            <el-table-column label="名称" prop="name" min-width="150" />
                            <el-table-column label="总量" prop="allQuantity" width="80" />
                            <el-table-column label="小计¥" width="100">
                              <template #default="props">
                                {{ moneyFormat(props.row.allUnitPrice, 2) }}
                              </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" fixed="right" width="60">
                              <template #default="props">
                                <el-button type="danger" @click="clickDeletePackingFittings(index, props.$index)" text>删除</el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right" width="60">
                      <template #default="{}">
                        <el-button type="primary" @click="clickDelete(index)" text>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-collapse-item :name="index">
                    <template #title>
                      <span>包装</span>
                    </template>
                    <div style="display: flex; padding: 8px 10px 0px">
                      <div style="flex: 1; padding: 0px 10px">
                        <div>包装要求:</div>
                        <div v-if="route.query && route.query.detailId">
                          <div v-html="getStyle(item.packageRemark)"></div>
                        </div>
                        <Editor
                          v-else
                          :value="item.packageRemark"
                          @updateValue="
                            (val) => {
                              return updatePackageRemark(val, index);
                            }
                          "
                          :ref="'editor_' + index" />
                      </div>
                    </div>
                  </el-collapse-item>
                </div>
              </div>
            </el-collapse>
          </div>
        </template>
        <template #deliveryTime>
          <div style="width: 100%">
            <el-date-picker
              v-model="formData.data.deliveryTime"
              type="datetime"
              placeholder="请选择交货日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%" />
          </div>
        </template>
        <template #totalMonet>
          <div style="width: 100%; margin-left: 30px">
            <div>
              <span style="font-weight: 700; color: #6c88f1">产品总金额: ¥{{ moneyFormat(formData.data.productTotalAmount, 2) }}</span>
              <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">定制加工费: ¥{{ moneyFormat(formData.data.customProcessingFee, 2) }}</span>
              <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">代发费: ¥{{ moneyFormat(formData.data.lssueFee, 2) }}</span>
              <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">快递包材费: ¥{{ moneyFormat(formData.data.deliveryMaterialsFee, 2) }}</span>
              <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">包装人工费: ¥{{ moneyFormat(formData.data.packingLabor, 2) }}</span>
              <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">包材费: ¥{{ moneyFormat(formData.data.packagingMaterialCost, 2) }}</span>
            </div>
            <div style="padding: 8px 0 0 0">
              <span style="font-weight: 700; color: red">订单总金额(含税): ¥{{ moneyFormat(formData.data.totalAmount, 2) }}</span>
            </div>
          </div>
        </template>
        <template #attachments>
          <div style="width: 100%">
            <el-upload
              v-model:fileList="fileList"
              action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
              :data="uploadData"
              multiple
              :before-upload="uploadFile"
              :on-success="handleSuccess"
              :on-preview="onPreviewFile">
              <el-button style="background: #20b2aa; color: #fff; border: 1px solid #20b2aa">上传</el-button>
            </el-upload>
          </div>
        </template>
        <template #remark>
          <div style="width: 100%">
            <div v-if="route.query && route.query.detailId">
              <div v-html="getStyle(formData.data.remark)"></div>
            </div>
            <Editor v-else :value="formData.data.remark" @updateValue="updateValue" ref="editor" />
          </div>
        </template>
      </byForm>
      <div style="width: 100%; text-align: center; margin: 10px">
        <el-button @click="clickCancel()" v-if="route.query && route.query.detailId" size="large">关 闭</el-button>
        <el-button @click="clickCancel()" v-if="!(route.query && route.query.detailId)" size="large">取 消</el-button>
        <el-button @click="submitForm('0')" v-if="!(route.query && route.query.detailId)" size="large" v-preReClick>暂 存</el-button>
        <el-button type="primary" @click="submitForm('10')" v-if="!(route.query && route.query.detailId)" size="large" v-preReClick>确 定</el-button>
      </div>
    </el-card>

    <el-dialog title="选择产品" v-if="openProduct" v-model="openProduct" width="90%">
      <SelectProduct :selectStatus="true" @selectProduct="selectProduct"></SelectProduct>
      <template #footer>
        <el-button @click="openProduct = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>

    <el-dialog title="选择包材配件" v-if="openPackingFittings" v-model="openPackingFittings" width="90%">
      <SelectBOM :selectStatus="true" :bomClassifyIdList="[2, 3]" @selectBOM="selectPackingFittings"></SelectBOM>
      <template #footer>
        <el-button @click="openPackingFittings = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byForm from "@/components/byForm/index";
import { ElMessage } from "element-plus";
import Editor from "@/components/Editor/index.vue";
import { useRouter, useRoute } from "vue-router";
import SelectProduct from "@/views/group/product/management/index";
import SelectBOM from "@/views/group/BOM/management/index";
import useTagsViewStore from "@/store/modules/tagsView";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const submit = ref(null);
const departmentList = ref([]);
const activeNames = ref([]);
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    remark: "",
    fileList: [],
    orderSkuList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "地址",
      label: "",
    },
    {
      type: "slot",
      slotName: "deliveryAddress",
      label: "收货地址",
    },
    {
      type: "slot",
      slotName: "consignee",
      label: "收货人",
    },
    {
      type: "title",
      title: "产品",
      label: "",
    },
    {
      type: "slot",
      prop: "orderSkuList",
      slotName: "orderSkuList",
    },
    {
      type: "title",
      title: "贸易",
      label: "",
    },
    {
      type: "slot",
      prop: "deliveryTime",
      slotName: "deliveryTime",
      label: "交货时间",
      itemWidth: 25,
    },
    {
      type: "select",
      label: "选择快递",
      prop: "expressDeliveryId",
      data: [],
      itemWidth: 25,
      clearable: true,
    },
    {
      type: "select",
      label: "电商平台",
      prop: "commercePlatform",
      data: proxy.useUserStore().allDict["commerce_platform"],
      itemWidth: 25,
      clearable: true,
    },
    {
      type: "title",
      title: "总计",
      label: "",
    },
    {
      type: "slot",
      prop: "totalMonet",
      slotName: "totalMonet",
    },
    {
      type: "title",
      title: "附件",
      label: "",
    },
    {
      type: "slot",
      slotName: "attachments",
      label: "附件",
    },
    {
      type: "title",
      title: "订单备注",
      label: "",
    },
    {
      type: "slot",
      slotName: "remark",
    },
  ];
});
const rules = ref({
  province: [{ required: true, message: "请输入省", trigger: "blur" }],
  detailedAddress: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
  consignee: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  consigneeNumber: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  deliveryTime: [{ required: true, message: "请选择交货时间", trigger: "change" }],
  //   expressDeliveryId: [{ required: true, message: "请选择快递", trigger: "change" }],
  commercePlatform: [{ required: true, message: "请选择电商平台", trigger: "change" }],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
});
const getDepartment = () => {
  proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      departmentList.value = res.rows.map((item) => {
        return {
          dictKey: item.id,
          dictValue: item.name,
        };
      });
    }
  });
};
getDepartment();
const uploadProductData = ref({});
const uploadProductFile = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadProductData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const handleProductSuccess = (uploadFile, index) => {
  formData.data.orderSkuList[index].productImgUrl = uploadFile.raw.fileUrl;
};
const uploadData = ref({});
const fileList = ref([]);
const uploadFile = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  file.uploadState = true;
  return true;
};
const handleSuccess = (any, UploadFile) => {
  UploadFile.raw.uploadState = false;
};
const onPreviewFile = (file) => {
  window.open(file.raw.fileUrl, "_blank");
};
const updatePackageRemark = (val, index) => {
  formData.data.orderSkuList[index].packageRemark = val;
};
const clickDelete = (index) => {
  formData.data.orderSkuList.splice(index, 1);
  calculatedAmount();
};
const updateValue = (val) => {
  formData.data.remark = val;
};
const submitForm = (status) => {
  submit.value.handleSubmit(() => {
    if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
      if (fileList.value && fileList.value.length > 0) {
        for (let i = 0; i < fileList.value.length; i++) {
          if (fileList.value[i].raw.uploadState) {
            return ElMessage("文件上传中,请稍后提交");
          }
        }
        formData.data.fileList = fileList.value.map((item) => {
          return {
            id: item.raw.id,
            fileName: item.raw.fileName,
            fileUrl: item.raw.fileUrl,
          };
        });
      } else {
        formData.data.fileList = [];
      }
      let type = "add";
      if (formData.data.id) {
        type = "edit";
      }
      formData.data.status = status;
      proxy.post("/orderInfo/" + type, formData.data).then(() => {
        ElMessage({
          message: type == "add" ? "添加成功" : "编辑成功",
          type: "success",
        });
        clickCancel();
      });
    } else {
      return ElMessage("请添加产品");
    }
  });
};
const clickCancel = () => {
  const useTagsStore = useTagsViewStore();
  useTagsStore.delVisitedView(router.currentRoute.value);
  if (route.query && route.query.orderInquiry) {
    router.replace({
      path: "/production/schedule/order-inquiry",
    });
  } else {
    router.replace({
      path: "/group/order/order-management",
    });
  }
};
onMounted(() => {
  if (route.query && (route.query.id || route.query.detailId)) {
    useTagsViewStore().visitedViews = useTagsViewStore().visitedViews.map((item) => {
      if (item.query && item.query.random === route.query.random) {
        return {
          ...item,
          name: route.query.text,
          title: route.query.text,
        };
      } else {
        return {
          ...item,
        };
      }
    });
    getOrderDetail({ id: route.query.id || route.query.detailId });
  }
});
const getOrderDetail = (parameter) => {
  proxy.post("/orderInfo/detail", parameter).then((res) => {
    formData.data = res;
    if (route.query.id) {
      proxy.$refs.editor.changeHtml(formData.data.remark);
    }
    if (route.query.detailId) {
      let allIndex = [];
      for (let i = 0; i < formData.data.orderSkuList.length; i++) {
        allIndex.push(i);
      }
      activeNames.value = allIndex;
      formOption.disabled = true;
    }
    if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
      for (let i = 0; i < formData.data.orderSkuList.length; i++) {
        let subtotal = 0;
        let packagingMaterialCost = 0;
        if (formData.data.orderSkuList[i].quantity) {
          subtotal = Number(
            Math.round(
              (formData.data.orderSkuList[i].customProcessingFee +
                formData.data.orderSkuList[i].deliveryMaterialsFee +
                formData.data.orderSkuList[i].lssueFee +
                formData.data.orderSkuList[i].packingLabor +
                formData.data.orderSkuList[i].unitPrice) *
                formData.data.orderSkuList[i].quantity *
                100
            ) / 100
          );
          if (formData.data.orderSkuList[i].orderSkuBomList && formData.data.orderSkuList[i].orderSkuBomList.length > 0) {
            for (let j = 0; j < formData.data.orderSkuList[i].orderSkuBomList.length; j++) {
              let allQuantity = 0;
              let allUnitPrice = 0;
              if (formData.data.orderSkuList[i].orderSkuBomList[j].quantity) {
                allQuantity = Number(
                  Math.round(formData.data.orderSkuList[i].orderSkuBomList[j].quantity * formData.data.orderSkuList[i].quantity * 100) / 100
                );
                if (formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice) {
                  allUnitPrice = Number(
                    Math.round(
                      formData.data.orderSkuList[i].orderSkuBomList[j].quantity *
                        formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice *
                        formData.data.orderSkuList[i].quantity *
                        100
                    ) / 100
                  );
                  packagingMaterialCost = Number(
                    Math.round(
                      (packagingMaterialCost +
                        formData.data.orderSkuList[i].orderSkuBomList[j].quantity * formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice) *
                        100
                    ) / 100
                  );
                }
              }
              formData.data.orderSkuList[i].orderSkuBomList[j].allQuantity = allQuantity;
              formData.data.orderSkuList[i].orderSkuBomList[j].allUnitPrice = allUnitPrice;
            }
          }
        }
        formData.data.orderSkuList[i].subtotal = subtotal;
        formData.data.orderSkuList[i].packagingMaterialCost = packagingMaterialCost;
      }
    }
    let list = [res.id];
    if (res.orderSkuList && res.orderSkuList.length > 0) {
      list = list.concat(res.orderSkuList.map((item) => item.id));
    }
    proxy.post("/fileInfo/getList", { businessIdList: list }).then((fileObj) => {
      if (fileObj) {
        if (fileObj[res.id] && fileObj[res.id].length > 0) {
          fileList.value = fileObj[res.id].map((item) => {
            return {
              raw: item,
              name: item.fileName,
              url: item.fileUrl,
            };
          });
        }
        if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
          for (let i = 0; i < formData.data.orderSkuList.length; i++) {
            if (fileObj[formData.data.orderSkuList[i].id] && fileObj[formData.data.orderSkuList[i].id].length > 0) {
              formData.data.orderSkuList[i].productImgUrl = fileObj[formData.data.orderSkuList[i].id][0];
            }
          }
        }
      }
    });
  });
};
const getStyle = (text) => {
  if (text) {
    return text.replace(/\n|\r\n/g, "<br>");
  } else {
    return "";
  }
};
const openProduct = ref(false);
const clickAddProduct = () => {
  openProduct.value = true;
};
const printType = ref([
  {
    dictKey: "1",
    dictValue: "单面",
  },
  {
    dictKey: "2",
    dictValue: "双面",
  },
]);
const selectProduct = (row, bom) => {
  if (row.id) {
    let list = formData.data.orderSkuList.filter((item) => item.skuSpecId === row.id);
    if (list && list.length > 0) {
      return ElMessage("该产品已添加");
    }
    formData.data.orderSkuList.push({
      wlnSkuName: bom.name,
      skuId: row.skuId,
      code: row.code,
      name: row.name,
      skuSpecId: row.id,
      quantity: undefined,
      customProcessingFee: "",
      lssueFee: "",
      deliveryMaterialsFee: "",
      packingLabor: "",
      unitPrice: "",
      printType: "1",
      packageRemark: "",
      subtotal: "",
      orderSkuBomList: [],
    });
    ElMessage({ message: "添加成功", type: "success" });
  } else {
    ElMessage("添加失败");
  }
};
const rowIndex = ref(null);
const openPackingFittings = ref(false);
const clickPackingFittings = (index) => {
  rowIndex.value = index;
  openPackingFittings.value = true;
};
const clickDeletePackingFittings = (index, indexTwo) => {
  formData.data.orderSkuList[index].orderSkuBomList.splice(indexTwo, 1);
  calculatedAmount();
};
const selectPackingFittings = (data) => {
  if (formData.data.orderSkuList[rowIndex.value].orderSkuBomList && formData.data.orderSkuList[rowIndex.value].orderSkuBomList.length > 0) {
    let list = formData.data.orderSkuList[rowIndex.value].orderSkuBomList.filter((item) => item.bomSpecId === data.id);
    if (list && list.length > 0) {
      return ElMessage("包材配件已添加");
    }
    formData.data.orderSkuList[rowIndex.value].orderSkuBomList.push({
      bomSpecId: data.id,
      unitPrice: data.costPrice,
      quantity: undefined,
      name: data.name,
      allQuantity: 0,
      allUnitPrice: 0,
    });
  } else {
    formData.data.orderSkuList[rowIndex.value].orderSkuBomList = [
      {
        bomSpecId: data.id,
        unitPrice: data.costPrice,
        quantity: undefined,
        name: data.name,
        allQuantity: 0,
        allUnitPrice: 0,
      },
    ];
  }
  ElMessage({ message: "添加成功", type: "success" });
};
const changeQuantity = (index) => {
  if (formData.data.orderSkuList[index].quantity) {
    proxy
      .post("/orderInfo/getSkuSpecPrice", { skuSpecId: formData.data.orderSkuList[index].skuSpecId, quantity: formData.data.orderSkuList[index].quantity })
      .then((res) => {
        formData.data.orderSkuList[index].customProcessingFee = res.customProcessingFee;
        formData.data.orderSkuList[index].deliveryMaterialsFee = res.deliveryMaterialsFee;
        formData.data.orderSkuList[index].lssueFee = res.lssueFee;
        formData.data.orderSkuList[index].packingLabor = res.packingLabor;
        formData.data.orderSkuList[index].unitPrice = res.unitPrice;
        formData.data.orderSkuList[index].subtotal = Number(
          Math.round(
            (res.customProcessingFee + res.deliveryMaterialsFee + res.lssueFee + res.packingLabor + res.unitPrice) *
              formData.data.orderSkuList[index].quantity *
              100
          ) / 100
        );
        changeBOMQuantity(index);
      });
  }
};
const changeBOMQuantity = (index) => {
  if (formData.data.orderSkuList[index].orderSkuBomList && formData.data.orderSkuList[index].orderSkuBomList.length > 0) {
    if (formData.data.orderSkuList[index].quantity) {
      formData.data.orderSkuList[index].orderSkuBomList = formData.data.orderSkuList[index].orderSkuBomList.map((item) => {
        let allQuantity = 0;
        let allUnitPrice = 0;
        if (item.quantity) {
          allQuantity = Number(Math.round(Number(item.quantity) * Number(formData.data.orderSkuList[index].quantity)));
        }
        if (item.unitPrice) {
          allUnitPrice = Number(Math.round(Number(item.unitPrice) * Number(allQuantity) * 100) / 100);
        }
        return {
          ...item,
          allQuantity: allQuantity,
          allUnitPrice: allUnitPrice,
        };
      });
    } else {
      formData.data.orderSkuList[index].orderSkuBomList = formData.data.orderSkuList[index].orderSkuBomList.map((item) => {
        return {
          ...item,
          allQuantity: 0,
          allUnitPrice: 0,
        };
      });
    }
  }
  calculatedAmount();
};
const calculatedAmount = () => {
  let productTotalAmount = 0;
  let customProcessingFee = 0;
  let lssueFee = 0;
  let deliveryMaterialsFee = 0;
  let packingLabor = 0;
  let packagingMaterialCost = 0;
  let totalAmount = 0;
  if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
    for (let i = 0; i < formData.data.orderSkuList.length; i++) {
      if (formData.data.orderSkuList[i].quantity) {
        if (formData.data.orderSkuList[i].customProcessingFee) {
          customProcessingFee = Number(
            Math.round((customProcessingFee + formData.data.orderSkuList[i].customProcessingFee * formData.data.orderSkuList[i].quantity) * 100) / 100
          );
        }
        if (formData.data.orderSkuList[i].lssueFee) {
          lssueFee = Number(Math.round((lssueFee + formData.data.orderSkuList[i].lssueFee * formData.data.orderSkuList[i].quantity) * 100) / 100);
        }
        if (formData.data.orderSkuList[i].deliveryMaterialsFee) {
          deliveryMaterialsFee = Number(
            Math.round((deliveryMaterialsFee + formData.data.orderSkuList[i].deliveryMaterialsFee * formData.data.orderSkuList[i].quantity) * 100) / 100
          );
        }
        if (formData.data.orderSkuList[i].packingLabor) {
          packingLabor = Number(Math.round((packingLabor + formData.data.orderSkuList[i].packingLabor * formData.data.orderSkuList[i].quantity) * 100) / 100);
        }
        if (formData.data.orderSkuList[i].unitPrice) {
          productTotalAmount = Number(
            Math.round((productTotalAmount + formData.data.orderSkuList[i].unitPrice * formData.data.orderSkuList[i].quantity) * 100) / 100
          );
        }
        let money = 0;
        if (formData.data.orderSkuList[i].orderSkuBomList && formData.data.orderSkuList[i].orderSkuBomList.length > 0) {
          for (let j = 0; j < formData.data.orderSkuList[i].orderSkuBomList.length; j++) {
            if (formData.data.orderSkuList[i].orderSkuBomList[j].quantity && formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice) {
              packagingMaterialCost = Number(
                Math.round(
                  (packagingMaterialCost +
                    formData.data.orderSkuList[i].orderSkuBomList[j].quantity *
                      formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice *
                      formData.data.orderSkuList[i].quantity) *
                    100
                ) / 100
              );
              money = Number(
                Math.round(
                  (money + formData.data.orderSkuList[i].orderSkuBomList[j].quantity * formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice) * 100
                ) / 100
              );
            }
          }
        }
        formData.data.orderSkuList[i].packagingMaterialCost = money;
      }
    }
  }
  formData.data.productTotalAmount = productTotalAmount;
  formData.data.customProcessingFee = customProcessingFee;
  formData.data.lssueFee = lssueFee;
  formData.data.deliveryMaterialsFee = deliveryMaterialsFee;
  formData.data.packingLabor = packingLabor;
  formData.data.packagingMaterialCost = packagingMaterialCost;
  totalAmount = Number(
    Math.round((productTotalAmount + customProcessingFee + lssueFee + deliveryMaterialsFee + packingLabor + packagingMaterialCost) * 100) / 100
  );
  formData.data.totalAmount = totalAmount;
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
:deep(.ql-editor) {
  height: auto;
}
:deep(.el-collapse-item__header) {
  justify-content: center;
}
:deep(.el-collapse-item__arrow) {
  margin: 0;
}
.avatar-uploader .avatar {
  width: 148px;
  height: 148px;
  display: block;
  background-color: black;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
}
:deep(.el-table__cell) {
  vertical-align: top;
}
</style>