lxf 1 år sedan
förälder
incheckning
7564abf685

+ 14 - 0
src/router/index.js

@@ -90,6 +90,20 @@ export const constantRoutes = [
       },
     ],
   },
+  {
+    path: "/addOrder",
+    component: Layout,
+    redirect: "/addOrder",
+    children: [
+      {
+        path: "/addOrder",
+        name: "新建订单",
+        component: () => import(/* webpackChunkName: "page" */ "@/views/group/order/management/add.vue"),
+        props: true,
+        meta: { title: "新建订单" },
+      },
+    ],
+  },
 ];
 // 动态路由,基于用户权限动态去加载
 export const dynamicRoutes = [

+ 461 - 0
src/views/group/order/management/add.vue

@@ -0,0 +1,461 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <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 useUserStore().allDict['processing_layout']" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" /> -->
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </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%"></div>
+        </template>
+        <!-- <template #skuClassifyId>
+        <div style="width: 100%">
+          <el-cascader
+            v-model="formData.data.skuClassifyId"
+            :options="classifyList"
+            :props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false }"
+            clearable
+            style="width: 100%" />
+        </div>
+      </template>
+      <template #specification>
+        <div style="width: 100%">
+          <div>
+            <el-icon style="cursor: pointer; transform: translateY(4px); font-size: 24px; margin-left: 10px" @click="addSpecification"><Plus /></el-icon>
+          </div>
+          <el-table :data="formData.data.orderSkuList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
+            <el-table-column label="规格图" align="center" width="100">
+              <template #default="{ row, $index }">
+                <el-form-item :prop="'orderSkuList.' + $index + '.specImgUrl'">
+                  <el-upload
+                    class="avatar-uploader"
+                    action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+                    :data="uploadData"
+                    :show-file-list="false"
+                    :on-success="
+                      (response, uploadFile) => {
+                        return handleSuccess(uploadFile, $index);
+                      }
+                    "
+                    :before-upload="uploadFile">
+                    <el-image v-if="row.specImgUrl" :src="row.specImgUrl" 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="BOM" align="left" width="250">
+              <template #default="{ row, $index }">
+                <el-button
+                  v-if="!row.bomSpecId"
+                  type="primary"
+                  size="small"
+                  @click="handleOpen($index)"
+                  style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
+                  选择BOM
+                </el-button>
+                <div style="width: 100%; display: flex; align-items: center" v-else>
+                  <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemoveBOM($index)"><Remove /></el-icon>
+                  <span>{{ row.bomSpecName }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" width="60">
+              <template #default="{ $index }">
+                <el-button type="primary" @click="clickDelete($index)" text>删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+      <template #mainImgUrl>
+        <div style="width: 100%">
+          <div style="color: #aaaaaa">图片不超过5M,支持JPEG、JPG、PNG格式;</div>
+          <div style="color: #aaaaaa">建议主图大于640*640,主题鲜明、图片清晰、提升买家满意度;</div>
+          <el-upload
+            class="avatar-uploader-main"
+            action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+            :data="uploadMainData"
+            :show-file-list="false"
+            :on-success="handleMainSuccess"
+            :before-upload="uploadMainFile">
+            <el-image v-if="formData.data.mainImgUrl" :src="formData.data.mainImgUrl" fit="scale-down" class="avatar" />
+            <el-icon v-else class="avatar-uploader-main-icon"><Plus /></el-icon>
+          </el-upload>
+        </div>
+      </template> -->
+        <template #remark>
+          <div style="width: 100%">
+            <!-- <div v-if="props.detailStatus">
+              <div v-html="getStyle(formData.data.remark)"></div>
+            </div> -->
+            <Editor :value="formData.data.remark" @updateValue="updateValue" ref="editor" />
+          </div>
+        </template>
+      </byForm>
+      <div style="width: 100%; text-align: center; margin: 10px">
+        <!-- <el-button  @click="clickCancel()" size="large">关 闭</el-button> -->
+        <el-button @click="clickCancel()" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitForm()" :disabled="btnDisabled" size="large">确 定</el-button>
+      </div>
+    </el-card>
+    
+    <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
+      <SelectBOM :selectStatus="true" :bomClassifyId="1" @selectBOM="selectBOM"></SelectBOM>
+      <template #footer>
+        <el-button @click="openBOM = 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 SelectBOM from "@/views/group/BOM/management/index";
+
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["clickCancel"]);
+const submit = ref(null);
+const formOption = reactive({
+  inline: true,
+  labelWidth: "120px",
+  itemWidth: 100,
+  rules: [],
+  labelPosition: "right",
+});
+const formData = reactive({
+  data: {
+    remark: "",
+    orderSkuList: [],
+  },
+});
+const formConfig = computed(() => {
+  return [
+    {
+      type: "title",
+      title: "地址",
+      label: "",
+    },
+    {
+      type: "slot",
+      slotName: "deliveryAddress",
+      label: "收货地址",
+    },
+    {
+      type: "slot",
+      slotName: "consignee",
+      label: "收货人",
+    },
+    {
+      type: "title",
+      title: "产品",
+      label: "",
+    },
+    {
+      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" }],
+});
+const addSpecification = () => {
+  //   if (!props.detailStatus) {
+  //     if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
+  //       formData.data.orderSkuList.push({
+  //         specImgUrl: "",
+  //         designImgUrl: "",
+  //         name: "",
+  //         code: "",
+  //         barCode: "",
+  //         machinedPanel: "",
+  //         length: undefined,
+  //         width: undefined,
+  //         height: undefined,
+  //         netWeight: undefined,
+  //         sharedFolder: "",
+  //         bomSpecId: "",
+  //         remark: "",
+  //         packagingMaterialList: [],
+  //         expressPackingList: [],
+  //       });
+  //     } else {
+  //       formData.data.orderSkuList = [
+  //         {
+  //           specImgUrl: "",
+  //           name: "",
+  //           code: "",
+  //           designImgUrl: "",
+  //           barCode: "",
+  //           machinedPanel: "",
+  //           length: undefined,
+  //           width: undefined,
+  //           height: undefined,
+  //           netWeight: undefined,
+  //           sharedFolder: "",
+  //           bomSpecId: "",
+  //           remark: "",
+  //           packagingMaterialList: [],
+  //           expressPackingList: [],
+  //         },
+  //       ];
+  //     }
+  //   }
+};
+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].specImgUrl = uploadFile.raw.fileUrl;
+};
+const clickDelete = (index) => {
+  formData.data.orderSkuList.splice(index, 1);
+};
+const editor = ref(null);
+const updateValue = (val) => {
+  formData.data.remark = val;
+};
+const uploadMainData = ref({});
+const uploadMainFile = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadMainData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  return true;
+};
+const handleMainSuccess = (response, uploadFile) => {
+  formData.data.mainImgUrl = uploadFile.raw.fileUrl;
+};
+const btnDisabled = ref(false);
+const submitForm = () => {
+  console.log(formData.data);
+  submit.value.handleSubmit(() => {
+    if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
+      let type = "add";
+      if (formData.data.id) {
+        type = "edit";
+      }
+      btnDisabled.value = true;
+      proxy.post("/sku/" + type, formData.data).then(
+        () => {
+          ElMessage({
+            message: type == "add" ? "添加成功" : "编辑成功",
+            type: "success",
+          });
+          emit("clickCancel", true);
+        },
+        (err) => {
+          console.log(err);
+          btnDisabled.value = false;
+        }
+      );
+    } else {
+      return ElMessage("请添加规格");
+    }
+  });
+};
+const clickCancel = () => {
+  emit("clickCancel", false);
+};
+// const props = defineProps({
+//   rowData: Object,
+//   detailStatus: Boolean,
+// });
+onMounted(() => {
+  //   formOption.disabled = props.detailStatus;
+  //   if (props.rowData && props.rowData.id) {
+  //     proxy.post("/sku/detail", { id: props.rowData.id }).then((res) => {
+  //       for (var text in res) {
+  //         formData.data[text] = res[text];
+  //       }
+  //       if (!props.detailStatus) {
+  //         editor.value.changeHtml(formData.data.remark);
+  //       }
+  //     });
+  //   }
+});
+const getStyle = (text) => {
+  if (text) {
+    return text.replace(/\n|\r\n/g, "<br>");
+  } else {
+    return "";
+  }
+};
+const rowIndex = ref(null);
+const openBOM = ref(false);
+const handleOpen = (index) => {
+  rowIndex.value = index;
+  openBOM.value = true;
+};
+const selectBOM = (item) => {
+  if (item.id) {
+    formData.data.orderSkuList[rowIndex.value].bomSpecId = item.id;
+    formData.data.orderSkuList[rowIndex.value].bomSpecName = item.name;
+    formData.data.orderSkuList[rowIndex.value].length = item.length;
+    formData.data.orderSkuList[rowIndex.value].width = item.width;
+    formData.data.orderSkuList[rowIndex.value].height = item.height;
+    formData.data.orderSkuList[rowIndex.value].netWeight = item.netWeight;
+    ElMessage({ message: "选择完成", type: "success" });
+    openBOM.value = false;
+  }
+};
+const clickRemoveBOM = (index) => {
+  formData.data.orderSkuList[index].bomSpecId = "";
+  formData.data.orderSkuList[index].bomSpecName = "";
+};
+</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;
+}
+</style>

+ 2 - 2
src/views/group/product/management/index.vue

@@ -114,7 +114,7 @@ const searchConfig = computed(() => {
     {
       type: "select",
       prop: "brand",
-      dictKey: "sku_brand",
+      dictKey: "wlnBrand",
       label: "品牌",
     },
   ];
@@ -160,7 +160,7 @@ const config = computed(() => {
         width: 120,
       },
       render(val) {
-        return proxy.dictKeyValue(val, proxy.useUserStore().allDict["sku_brand"]);
+        return proxy.dictKeyValue(val, proxy.useUserStore().allDict["wlnBrand"]);
       },
     },
     {