sd-new-vue/src/components/process/order.vue

<template>
  <div>
    <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 #type>
        <div style="width: 100%">
          <el-radio-group v-model="formData.data.type">
            <el-radio v-for="(itemType, index) in typeList" :key="index" :label="itemType.dictKey">{{ itemType.dictValue }}</el-radio>
          </el-radio-group>
        </div>
      </template>
      <template #departmentId>
        <div 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>
        </div>
      </template>
      <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-row>
        </div>
      </template>
      <template #orderSkuList>
        <div style="width: 100%; padding: 0 20px">
          <div style="margin-bottom: 10px" v-if="!formOption.disabled">
            <el-button type="primary" size="small" @click="clickAddProduct()">选择产品</el-button>
            <el-button type="primary" size="small" @click="clickUploadProduct()">导入产品</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" :cell-class-name="cellStyleName">
                  <el-table-column label="产品" width="300">
                    <template #default="{ row }">
                      <div style="width: 100%">
                        <div style="line-height: 35px" v-if="!(route.query && route.query.detailId)">
                          <span style="color: black; font-weight: 700">库存数量: </span>
                          <span>{{ item.inventoryQuantity }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">商品名称: </span>
                          <span>{{ item.wlnSkuName }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">品号: </span>
                          <span>{{ item.code }}</span>
                        </div>
                        <div style="line-height: 35px; word-break: break-all">
                          <span style="color: black; font-weight: 700">品名: </span>
                          <span>{{ item.name }}</span>
                        </div>
                        <div style="line-height: 35px; display: flex">
                          <span style="width: 90px; color: black; font-weight: 700">E10成品品号: </span>
                          <el-form-item
                            :prop="'orderSkuList.' + index + '.erpCode'"
                            :rules="rules.erpCode"
                            :inline-message="true"
                            style="width: calc(100% - 90px)">
                            <el-input v-model="row.erpCode" placeholder="请输入E10成品品号" style="width: 100%" />
                          </el-form-item>
                        </div>
                        <div style="line-height: 35px; display: flex">
                          <span style="width: 52px; color: black; font-weight: 700">特征码: </span>
                          <el-form-item
                            :prop="'orderSkuList.' + index + '.featureCode'"
                            :rules="rules.featureCode"
                            :inline-message="true"
                            style="width: calc(100% - 52px)">
                            <el-input v-model="row.featureCode" placeholder="请输入特征码" style="width: 100%" />
                          </el-form-item>
                        </div>
                        <div style="line-height: 35px; 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, true)" />
                          </el-form-item>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">加工费: </span>
                          <span>{{ item.customProcessingFee }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">代发费: </span>
                          <span>{{ item.lssueFee }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">快递包材费: </span>
                          <span>{{ computeSingleDeliveryMaterialsFee(index) }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">包装人工费: </span>
                          <span>{{ item.packingLabor }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">管理费: </span>
                          <span>{{ item.managementFee }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">单价: </span>
                          <span>{{ item.unitPrice }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <span style="color: black; font-weight: 700">小计: </span>
                          <span>{{ getSubtotal(item) }}</span>
                        </div>
                        <div style="line-height: 35px">
                          <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" @change="changeQuantity(index)">
                              <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="400">
                    <template #default="{ row }">
                      <div style="display: flex; width: 100%">
                        <div style="width: 80px">设计图:</div>
                        <div style="width: calc(100% - 80px)">
                          <el-image
                            fit="scale-down"
                            style="width: 148px; height: 148px; margin-right: 10px; cursor: pointer"
                            v-if="row.blueprint"
                            :src="row.blueprint"
                            @click="openFile(row.blueprint)" />
                          <div style="display: flex" v-if="!(route.query && route.query.detailId)">
                            <el-button type="primary" @click="clickDrawingFile(index)" text>选择图稿</el-button>
                            <el-upload
                              :show-file-list="false"
                              action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                              :data="uploadImgData"
                              :before-upload="uploadImgFile"
                              :on-success="
                                (response, uploadFile) => {
                                  return handleImgSuccess(uploadFile, index);
                                }
                              "
                              style="width: 100%"
                              accept=".jpg,.jpeg,.png,.GIF,.JPG,.PNG">
                              <el-button type="primary" style="margin-left: 12px" text>上传图片</el-button>
                            </el-upload>
                          </div>
                        </div>
                      </div>
                      <div style="display: flex; margin-top: 20px; width: 100%">
                        <div style="width: 80px">图稿文件:</div>
                        <div style="width: calc(100% - 80px)">
                          <a
                            style="color: #409eff; cursor: pointer; word-break: break-all; margin-right: 10px"
                            @click="openFile(row.productionDocument)"
                            v-if="row.productionDocument">
                            {{ row.productionDocument }}
                          </a>
                          <div style="display: flex" v-if="!(route.query && route.query.detailId)">
                            <el-button type="primary" @click="clickDrawingFile(index)" text>选择图稿</el-button>
                            <el-upload
                              :show-file-list="false"
                              action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                              :data="uploadData"
                              :before-upload="uploadFile"
                              :on-success="
                                (response, uploadFile) => {
                                  return handleSuccess(uploadFile, index);
                                }
                              "
                              style="width: 100%">
                              <el-button type="primary" style="margin-left: 12px" text>上传文件</el-button>
                            </el-upload>
                          </div>
                        </div>
                      </div>
                      <div style="font-weight: 700; margin-top: 20px">产品不干胶图稿</div>
                      <div style="display: flex; width: 100%">
                        <div style="width: 80px">不干胶图片:</div>
                        <div style="width: calc(100% - 80px)">
                          <el-image
                            fit="scale-down"
                            style="width: 148px; height: 148px; margin-right: 10px; cursor: pointer"
                            v-if="row.selfAdhesiveStickerFile && row.selfAdhesiveStickerFile.fileUrl"
                            :src="row.selfAdhesiveStickerFile.fileUrl"
                            @click="openFile(row.selfAdhesiveStickerFile.fileUrl)" />
                          <div style="display: flex" v-if="!(route.query && route.query.detailId)">
                            <el-upload
                              :show-file-list="false"
                              action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                              :data="uploadAdhesiveData"
                              :before-upload="uploadAdhesiveFile"
                              :on-success="
                                (response, uploadFile) => {
                                  return handleAdhesiveSuccess(uploadFile, index);
                                }
                              "
                              style="width: 100%"
                              accept=".jpg,.jpeg,.png,.GIF,.JPG,.PNG">
                              <el-button type="primary" text>上传文件</el-button>
                            </el-upload>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="包材配件/单品" min-width="400">
                    <template #default="{ row }">
                      <div style="width: 100%">
                        <div style="margin-bottom: 10px" v-if="!(route.query && route.query.detailId)">
                          <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="120">
                            <template #default="props">
                              <div>
                                <span>{{ moneyFormat(props.row.unitPrice, 2) }}</span>
                              </div>
                            </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" />
                              </el-form-item>
                            </template>
                          </el-table-column>
                          <el-table-column label="名称" prop="bomSpecName" min-width="150" />
                          <el-table-column label="总量" width="80">
                            <template #default="props">
                              {{ computeQuantity(index, props.$index) }}
                            </template>
                          </el-table-column>
                          <el-table-column label="小计¥" width="100">
                            <template #default="props">
                              {{ moneyFormat(computeMoney(index, props.$index), 2) }}
                            </template>
                          </el-table-column>
                          <el-table-column label="操作" align="center" fixed="right" width="60" v-if="!(route.query && route.query.detailId)">
                            <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" v-if="!(route.query && route.query.detailId)">
                    <template #default="{}">
                      <el-button type="danger" @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(calculatedAmount("unitPrice"), 2) }}</span>
            <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">
              定制加工费: ¥{{ moneyFormat(calculatedAmount("customProcessingFee"), 2) }}
            </span>
            <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">代发费: ¥{{ moneyFormat(calculatedAmount("lssueFee"), 2) }}</span>
            <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">快递包材费: ¥{{ moneyFormat(computeDeliveryMaterialsFee(), 2) }} </span>
            <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">包装人工费: ¥{{ moneyFormat(calculatedAmount("packingLabor"), 2) }}</span>
            <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">包材费: ¥{{ moneyFormat(calculatedPackagingMaterialCost(), 2) }}</span>
            <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">管理费: ¥{{ moneyFormat(calculatedAmount("managementFee"), 2) }}</span>
          </div>
          <div style="padding: 8px 0 0 0">
            <span style="font-weight: 700; color: red">订单总金额(含税): ¥{{ moneyFormat(calculatedTotalAmount(), 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="uploadFileData"
            multiple
            :before-upload="beforeUpload"
            :on-success="onSuccessFile"
            :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 style="margin: 0 2vw" v-if="formOption.disabled">
            <div v-html="getStyle(formData.data.remark)"></div>
          </div>
          <Editor v-else :value="formData.data.remark" @updateValue="updateValue" ref="editor" />
        </div>
      </template>
    </byForm>

    <el-dialog title="选择产品" v-if="openProduct" v-model="openProduct" width="90%">
      <SelectProduct :selectStatus="true" :type="'null'" @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>

    <el-dialog title="选择图稿文件" v-if="openDrawingFile" v-model="openDrawingFile" width="70%">
      <SelectPicture @selectPic="selectPic"></SelectPicture>
      <template #footer>
        <el-button @click="openDrawingFile = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>

    <el-dialog title="导入产品" v-if="openUpload" v-model="openUpload" width="60%">
      <el-upload class="upload-demo" :show-file-list="false" drag action="##" :http-request="giveawayServerLog" v-loading="loadingUpload">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖拽文件进行上传</div>
      </el-upload>
      <template #footer>
        <el-button @click="openUpload = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byForm from "/src/components/byForm/index";
import { ElMessage } from "element-plus";
import Editor from "/src/components/Editor/index.vue";
import { useRoute } from "vue-router";
import SelectProduct from "/src/views/group/product/management/index";
import SelectBOM from "/src/views/group/BOM/management/index";
import SelectPicture from "/src/components/select-picture/index.vue";

const { proxy } = getCurrentInstance();
// 接收父组件的传值
const props = defineProps({
  queryData: Object,
});
const route = useRoute();
const submit = ref(null);
const departmentList = ref([]);
const activeNames = ref([]);
const judgeStatus = () => {
  if (route.query.processType == 20 || route.query.processType == 10) {
    return true;
  }
  if (props.queryData.recordList && props.queryData.recordList.length > 0) {
    let data = props.queryData.recordList.filter((item) => item.status === 2 && item.nodeType !== 1);
    if (data && data.length > 0) {
      return true;
    }
  }
  return false;
};
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    remark: "",
    type: 1,
    orderSkuList: [],
    fileList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "产品",
      label: "",
    },
    {
      type: "slot",
      prop: "orderSkuList",
      slotName: "orderSkuList",
    },
    {
      type: "title",
      title: "类型",
      label: "",
    },
    {
      type: "slot",
      prop: "type",
      slotName: "type",
      label: "订单类型",
    },
    {
      type: "slot",
      prop: "departmentId",
      slotName: "departmentId",
      label: "事业部",
      itemWidth: 25,
    },
    {
      type: "input",
      prop: "wlnCode",
      label: "E10单号",
      itemType: "text",
      itemWidth: 25,
    },
    formOption.disabled
      ? {}
      : {
          type: "title",
          title: "地址",
          label: "",
        },
    formOption.disabled
      ? {}
      : {
          type: "slot",
          slotName: "deliveryAddress",
          label: "收货地址",
        },
    formOption.disabled
      ? {}
      : {
          type: "slot",
          slotName: "consignee",
          label: "收货人",
        },
    {
      type: "title",
      title: "贸易",
      label: "",
    },
    {
      type: "slot",
      prop: "deliveryTime",
      slotName: "deliveryTime",
      label: "交货时间",
      itemWidth: 25,
    },
    {
      type: "select",
      label: "选择快递",
      prop: "expressDeliveryId",
      data: proxy.useUserStore().allDict["express_delivery"],
      itemWidth: 25,
      clearable: true,
    },
    {
      type: "select",
      label: "店铺来源",
      prop: "sourcePlatform",
      data: proxy.useUserStore().allDict["source_platform"],
      itemWidth: 25,
      clearable: true,
    },
    {
      type: "select",
      label: "店铺名称",
      prop: "shopName",
      data: proxy.useUserStore().allDict["shop_name"],
      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" }],
  sourcePlatform: [{ required: true, message: "请选择店铺来源", trigger: "change" }],
  shopName: [{ required: true, message: "请选择店铺", trigger: "change" }],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  type: [{ required: true, message: "请选择订单类型", trigger: "change" }],
  departmentId: [{ required: true, message: "请选择事业部", trigger: "change" }],
  wlnCode: [{ required: true, message: "请输入E10单号", trigger: "blur" }],
  erpCode: [{ required: true, message: "请输入E10成品品号", trigger: "blur" }],
});
const getDemandData = () => {
  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,
        };
      });
    }
  });
};
getDemandData();
const drawingFileIndex = ref(0);
const openDrawingFile = ref(false);
const clickDrawingFile = (index) => {
  drawingFileIndex.value = index;
  openDrawingFile.value = true;
};
const selectPic = (row) => {
  formData.data.orderSkuList[drawingFileIndex.value].blueprint = row.imgUrl;
  formData.data.orderSkuList[drawingFileIndex.value].productionDocument = row.fileUrl;
  formData.data.orderSkuList[drawingFileIndex.value].artworkLibraryId = row.id;
  ElMessage({ message: "选择完成", type: "success" });
  openDrawingFile.value = false;
};
const openFile = (path) => {
  window.open(path);
};
const updatePackageRemark = (val, index) => {
  formData.data.orderSkuList[index].packageRemark = val;
};
const clickDelete = (index) => {
  formData.data.orderSkuList.splice(index, 1);
};
const updateValue = (val) => {
  formData.data.remark = val;
};
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 typeList = ref([
  {
    dictKey: 1,
    dictValue: "自主订单",
  },
  {
    dictKey: 2,
    dictValue: "委外订单",
  },
]);
const skuDetail = ref({});
const selectProduct = (row, SKU) => {
  if (row.id) {
    let list = formData.data.orderSkuList.filter((item) => item.skuSpecId === row.id && item.bomSpecId === row.bomSpecId);
    if (list && list.length > 0) {
      return ElMessage("该产品已添加");
    }
    if (skuDetail.value && skuDetail.value.id === SKU.id) {
      pushProduct(skuDetail.value, SKU, row);
    } else {
      proxy.post("/sku/detail", { id: SKU.id }).then((res) => {
        skuDetail.value = res;
        pushProduct(res, SKU, row);
      });
    }
  } else {
    ElMessage("添加失败");
  }
};
const pushProduct = async (res, SKU, row) => {
  let data = proxy.deepClone(res);
  let orderSkuBomList = [];
  if (data.skuSpecList && data.skuSpecList.length > 0) {
    let listTwo = data.skuSpecList.filter((item) => item.id === row.id);
    if (listTwo && listTwo.length > 0) {
      if (listTwo[0].packagingMaterialList && listTwo[0].packagingMaterialList.length > 0) {
        orderSkuBomList = listTwo[0].packagingMaterialList.map((item) => {
          return {
            bomSpecId: item.bomSpecId,
            unitPrice: item.internalSellingPrice,
            quantity: item.quantity,
            bomSpecName: item.name,
          };
        });
      }
    }
  }
  let inventoryQuantity = 0;
  let getSkuInventoryQuantity = await proxy.post("/skuSpec/getSkuInventoryQuantity", { id: row.id }).then((resQuantity) => {
    inventoryQuantity = resQuantity;
  });
  formData.data.orderSkuList.push({
    wlnSkuName: SKU.name,
    skuId: row.skuId,
    code: row.code,
    name: row.name,
    skuSpecId: row.id,
    bomSpecId: row.bomSpecId,
    quantity: undefined,
    erpCode: "",
    featureCode: "",
    customProcessingFee: "",
    customProcessingType: "",
    lssueFee: "",
    deliveryMaterialsFee: "",
    packingLabor: "",
    managementFee: "",
    unitPrice: "",
    printType: 1,
    packageRemark: "",
    orderSkuBomList: orderSkuBomList,
    blueprint: row.designImgUrl,
    productionDocument: row.sharedFolder,
    artworkLibraryId: "0",
    inventoryQuantity: inventoryQuantity,
    proofingFee: 0,
  });
  ElMessage({ message: "添加成功", type: "success" });
};
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);
};
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.internalSellingPrice,
      quantity: undefined,
      bomSpecName: data.name,
    });
  } else {
    formData.data.orderSkuList[rowIndex.value].orderSkuBomList = [
      {
        bomSpecId: data.id,
        unitPrice: data.internalSellingPrice,
        quantity: undefined,
        bomSpecName: data.name,
      },
    ];
  }
  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,
        random: proxy.random(),
      })
      .then((res) => {
        if (formData.data.orderSkuList[index].printType == 2 && res.customProcessingFee) {
          formData.data.orderSkuList[index].customProcessingFee = Number(Math.round(res.customProcessingFee * 2 * 100) / 100);
        } else {
          formData.data.orderSkuList[index].customProcessingFee = res.customProcessingFee;
        }
        formData.data.orderSkuList[index].customProcessingType = res.customProcessingType;
        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].managementFee = res.managementFee;
        formData.data.orderSkuList[index].unitPrice = res.unitPrice;
      });
  }
};
const cellStyleName = ({ column, columnIndex }) => {
  if (column.label === "操作" && columnIndex === 3) {
    return "vertical-align";
  }
};
const uploadData = 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;
  return true;
};
const handleSuccess = (UploadFile, index) => {
  formData.data.orderSkuList[index].productionDocument = UploadFile.raw.fileUrl;
  formData.data.orderSkuList[index].artworkLibraryId = "0";
};
const uploadImgData = ref({});
const uploadImgFile = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadImgData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const handleImgSuccess = (UploadFile, index) => {
  formData.data.orderSkuList[index].blueprint = UploadFile.raw.fileUrl;
  formData.data.orderSkuList[index].artworkLibraryId = "0";
};
const computeQuantity = (index, indexSKU) => {
  let quantity = 0;
  if (formData.data.orderSkuList[index].quantity && formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity) {
    quantity = Number(
      Math.round(formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity * formData.data.orderSkuList[index].quantity * 100) / 100
    );
  }
  return quantity;
};
const computeMoney = (index, indexSKU) => {
  let money = 0;
  if (
    formData.data.orderSkuList[index].quantity &&
    formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity &&
    formData.data.orderSkuList[index].orderSkuBomList[indexSKU].unitPrice
  ) {
    money = Number(
      Math.round(
        formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity *
          formData.data.orderSkuList[index].orderSkuBomList[indexSKU].unitPrice *
          formData.data.orderSkuList[index].quantity *
          100
      ) / 100
    );
  }
  return money;
};
const getSubtotal = (item) => {
  let money = 0;
  if (item.quantity) {
    money = Number(
      Math.round(
        (item.customProcessingFee + item.deliveryMaterialsFee + item.lssueFee + item.packingLabor + item.managementFee + item.unitPrice) * item.quantity * 100
      ) / 100
    );
  }
  return money;
};
const calculatedAmount = (label) => {
  let money = 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 && formData.data.orderSkuList[i][label]) {
        money = Number(Math.round((money + formData.data.orderSkuList[i][label] * formData.data.orderSkuList[i].quantity) * 100) / 100);
      }
    }
  }
  return money;
};
const calculatedPackagingMaterialCost = () => {
  let money = 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].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) {
            money = Number(
              Math.round(
                (money +
                  formData.data.orderSkuList[i].orderSkuBomList[j].quantity *
                    formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice *
                    formData.data.orderSkuList[i].quantity) *
                  100
              ) / 100
            );
          }
        }
      }
    }
  }
  return money;
};
const calculatedTotalAmount = () => {
  let money = 0;
  money = Number(
    Math.round(
      (calculatedAmount("unitPrice") +
        calculatedAmount("customProcessingFee") +
        calculatedAmount("lssueFee") +
        computeDeliveryMaterialsFee() +
        calculatedAmount("packingLabor") +
        calculatedAmount("managementFee") +
        calculatedPackagingMaterialCost()) *
        100
    ) / 100
  );
  return money;
};
const fileList = ref([]);
const uploadFileData = ref({});
const beforeUpload = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadFileData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  file.uploadState = true;
  return true;
};
const onSuccessFile = (any, UploadFile) => {
  UploadFile.raw.uploadState = false;
};
const onPreviewFile = (file) => {
  window.open(file.raw.fileUrl, "_blank");
};
const uploadAdhesiveData = ref({});
const uploadAdhesiveFile = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadAdhesiveData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const handleAdhesiveSuccess = (UploadFile, index) => {
  formData.data.orderSkuList[index].selfAdhesiveStickerFile = {
    id: UploadFile.raw.id,
    fileName: UploadFile.raw.fileName,
    fileUrl: UploadFile.raw.fileUrl,
  };
};
const getFormData = () => {
  return proxy.deepClone(formData.data);
};
const handleSubmit = async (flag) => {
  if (flag) {
    return true;
  } else {
    let status = await proxy.$refs.submit.handleSubmit(() => {});
    if (status) {
      if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
        for (let i = 0; i < formData.data.orderSkuList.length; i++) {
          if (!formData.data.orderSkuList[i].blueprint) {
            ElMessage("请选择设计图");
            return false;
          }
          if (!formData.data.orderSkuList[i].productionDocument) {
            ElMessage("请选择生产文件");
            return false;
          }
          let packagingMaterialCost = 0;
          if (formData.data.orderSkuList[i].quantity) {
            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) *
                        100
                    ) / 100
                  );
                }
              }
            }
          }
          formData.data.orderSkuList[i].packagingMaterialCost = packagingMaterialCost;
        }
        formData.data.productTotalAmount = calculatedAmount("unitPrice");
        formData.data.customProcessingFee = calculatedAmount("customProcessingFee");
        formData.data.lssueFee = calculatedAmount("lssueFee");
        formData.data.deliveryMaterialsFee = computeDeliveryMaterialsFee();
        formData.data.packingLabor = calculatedAmount("packingLabor");
        formData.data.managementFee = calculatedAmount("managementFee");
        formData.data.packagingMaterialCost = calculatedPackagingMaterialCost();
        formData.data.totalAmount = calculatedTotalAmount();
        formData.data.proofingFee = 0;
        if (fileList.value && fileList.value.length > 0) {
          for (let i = 0; i < fileList.value.length; i++) {
            if (fileList.value[i].raw.uploadState) {
              ElMessage("文件上传中,请稍后提交");
              return false;
            }
          }
          formData.data.fileList = fileList.value.map((item) => {
            return {
              id: item.raw.id,
              fileName: item.raw.fileName,
              fileUrl: item.raw.fileUrl,
            };
          });
        } else {
          formData.data.fileList = [];
        }
      } else {
        return ElMessage("请添加产品");
      }
      return true;
    } else {
      setTimeout(() => {
        const errorDiv = document.getElementsByClassName("is-error");
        errorDiv[0].scrollIntoView();
      }, 0);
    }
    return false;
  }
};
watch(
  () => props.queryData,
  (newValue) => {
    formOption.disabled = judgeStatus();
    if (props.queryData && ["10", "20", "30", "40"].includes(route.query.processType)) {
      formData.data = proxy.deepClone(newValue);
      if (route.query.id) {
        proxy.$refs.editor.changeHtml(formData.data.remark);
      }
      let list = [formData.data.id];
      if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
        list = list.concat(formData.data.orderSkuList.map((item) => item.id));
        proxy.post("/fileInfo/getList", { businessIdList: list }).then((fileObj) => {
          if (fileObj[formData.data.id] && fileObj[formData.data.id].length > 0) {
            let file = fileObj[formData.data.id].filter((item) => item.businessType == "0");
            if (file && file.length > 0) {
              fileList.value = file.map((item) => {
                return {
                  raw: item,
                  name: item.fileName,
                  url: item.fileUrl,
                };
              });
            } else {
              fileList.value = [];
            }
            let outerBoxSelfAdhesiveStickerFile = fileObj[formData.data.id].filter((item) => item.businessType == "1");
            if (outerBoxSelfAdhesiveStickerFile && outerBoxSelfAdhesiveStickerFile.length > 0) {
              formData.data.outerBoxSelfAdhesiveStickerFile = outerBoxSelfAdhesiveStickerFile[0];
            } else {
              formData.data.outerBoxSelfAdhesiveStickerFile = {};
            }
          }
          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].selfAdhesiveStickerFile = {
                id: fileObj[formData.data.orderSkuList[i].id][0].id,
                fileName: fileObj[formData.data.orderSkuList[i].id][0].fileName,
                fileUrl: fileObj[formData.data.orderSkuList[i].id][0].fileUrl,
              };
            }
          }
        });
      }
    }
  },
  {
    deep: true,
  }
);
const saveShippingPackage = (data) => {
  formData.data.orderPackageBomList = data.orderPackageBomList;
  formData.data.outerBoxSelfAdhesiveStickerFile = data.outerBoxSelfAdhesiveStickerFile;
};
const computeDeliveryMaterialsFee = () => {
  let money = 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].deliveryMaterialsFee && formData.data.orderSkuList[i].quantity) {
        money = Number(Math.round((money + formData.data.orderSkuList[i].deliveryMaterialsFee * formData.data.orderSkuList[i].quantity) * 100) / 100);
      }
    }
  }
  return money;
};
const computeSingleDeliveryMaterialsFee = (index) => {
  let money = computeDeliveryMaterialsFee();
  let list = formData.data.orderSkuList.filter((item) => item.quantity > 0);
  let num = 0;
  let singlePrice = 0;
  if (list && list.length > 0) {
    for (let i = 0; i < list.length; i++) {
      num = Number(Math.round(num + list[i].quantity));
    }
    singlePrice = Number(Math.ceil((money / num) * 1000) / 1000);
  }
  formData.data.orderSkuList[index].deliveryMaterialsFee = singlePrice;
  return formData.data.orderSkuList[index].deliveryMaterialsFee;
};
const openUpload = ref(false);
const loadingUpload = ref(false);
const clickUploadProduct = () => {
  loadingUpload.value = false;
  openUpload.value = true;
};
const giveawayServerLog = (params) => {
  let file = params.file;
  let formFile = new FormData();
  formFile.append("file", file);
  loadingUpload.value = true;
  proxy.postUploadFile("/skuSpec/getSkuSpecListFromImport", formFile).then(
    (res) => {
      ElMessage({ message: "导入成功", type: "success" });
      openUpload.value = false;
      if (res.data && res.data.length > 0) {
        for (let i = 0; i < res.data.length; i++) {
          let list = formData.data.orderSkuList.filter((item) => item.skuSpecId === res.data[i].id && item.bomSpecId === res.data[i].bomSpecId);
          if (!(list && list.length > 0)) {
            let orderSkuBomList = [];
            if (res.data[i].packagingMaterialList && res.data[i].packagingMaterialList.length > 0) {
              orderSkuBomList = res.data[i].packagingMaterialList.map((item) => {
                return {
                  bomSpecId: item.bomSpecId,
                  unitPrice: item.internalSellingPrice,
                  quantity: item.quantity,
                  bomSpecName: item.name,
                };
              });
            }
            formData.data.orderSkuList.push({
              wlnSkuName: res.data[i].wlnSkuName,
              skuId: res.data[i].skuId,
              code: res.data[i].code,
              name: res.data[i].name,
              skuSpecId: res.data[i].id,
              bomSpecId: res.data[i].bomSpecId,
              quantity: undefined,
              erpCode: "",
              featureCode: "",
              customProcessingFee: "",
              customProcessingType: "",
              lssueFee: "",
              deliveryMaterialsFee: "",
              packingLabor: "",
              managementFee: "",
              unitPrice: "",
              printType: 1,
              packageRemark: "",
              orderSkuBomList: orderSkuBomList,
              blueprint: res.data[i].designImgUrl,
              productionDocument: res.data[i].sharedFolder,
              artworkLibraryId: "0",
              inventoryQuantity: res.data[i].inventoryQuantity,
              proofingFee: 0,
            });
          }
        }
      }
    },
    (err) => {
      console.log(err);
      loadingUpload.value = false;
    }
  );
};
// 向父组件暴露
defineExpose({ getFormData, handleSubmit, saveShippingPackage });
</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;
}
:deep(.el-table__cell) {
  vertical-align: top;
}
:deep(.vertical-align) {
  vertical-align: middle;
}
.shippingPackage {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>