operation-system/src/views/goods/goodsManage/editGoods.vue

<template>
  <div class="app-container customer-control">
    <div class="customer-box">
      <el-form ref="formRef" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
        <!-- 商品名称 -->
        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" placeholder="请输入商品名称"
            style="width: 800px" />
        </el-form-item>

        <!-- 商品分类 -->
        <el-form-item label="商品分类" required>
          <div style="display: flex; gap: 16px;">
            <el-form-item prop="categoryId1">
              <el-select v-model="formInline.categoryId1" placeholder="请选择" class="my-el-select"
                @change="changeCategory1($event)">
                <el-option v-for="item in categoryList1" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item prop="categoryId2">
              <el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select"
                @change="changeCategory2($event)">
                <el-option v-for="item in categoryList2" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item prop="categoryId3">
              <el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select"
                @change="changeCategory3($event)">
                <el-option v-for="item in categoryList3" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>
        <!-- 公共品牌 -->
        <el-form-item label="公共品牌" prop="brandId" v-show="formInline.goodCategorySelectType == 1">
          <el-input v-model="formInline.brandId" clearable placeholder="请输入公共品牌" style="width: 800px" />
        </el-form-item>
        <!-- 溯源编码 -->
        <el-form-item label="溯源编码" prop="traceCode" v-show="formInline.goodCategorySelectType == 1">
          <el-input v-model="formInline.traceCode" clearable placeholder="请输入溯源编码" style="width: 800px" />
        </el-form-item>
        <!-- 商品图片 -->
        <el-form-item label="商品图片" prop="goodUrl" required>
          <div>
            <myUploadImage v-model="formInline.goodUrl"></myUploadImage>
          </div>
        </el-form-item>
        <!-- 规格样式 -->
        <el-form-item label="规格样式" prop="specStyle" required>
          <el-radio-group v-model="formInline.specStyle" style="margin-top: -3px;">
            <el-radio value="1" size="large">单规格</el-radio>
            <el-radio value="2" size="large">多规格</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="formInline.specStyle == 1">
          <!-- 销售价格 -->
          <el-form-item label="销售价格" prop="salePrice" required>
            <el-input-number v-model="formInline.salePrice" :min="1" :precision="2" :controls="false"></el-input-number>
            <span style="padding: 0 10px;">元</span>
          </el-form-item>

          <!-- 库存数量 -->
          <el-form-item label="库存数量" prop="stock" required>
            <el-input-number v-model="formInline.stock" :min="1" :controls="false" />
          </el-form-item>

          <!-- 净含量 -->
          <el-form-item label="净含量" prop="netContent" required>
            <el-input-number v-model="formInline.netContent" :min="1" :controls="false" />
            <el-select v-model="formInline.unit" style="width: 80px; margin-left: 10px">
              <el-option label="kg" value="kg" />
              <el-option label="g" value="g" />
              <el-option label="ml" value="ml" />
            </el-select>
          </el-form-item>
        </div>
        <!-- 多规格 -->
        <div v-else>
          <el-form-item label="商品规格" prop="netWeight" required>
            <div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-item">
              <el-input v-model="item.goodSpecs" :value="item.goodSpecs" class="attr-clomn" placeholder="请输入规格名称" />
              <el-icon size="20px" v-if="index !== 0" @click="deleteSpecs(index)" style="cursor: pointer;">
                <Delete />
              </el-icon>
            </div>
            <el-button icon="plus" type="primary" plain style="margin: 0" @click="addSpecs">添加属性</el-button>
          </el-form-item>
          <!-- 价格库存 -->
          <el-form-item label="价格库存" prop="netWeight" required>
            <div class="attr-box">
              <div class="attr-row">
                <div class="attr-clomn color-gray">商品规格</div>
                <div class="attr-clomn200 color-gray">销售价格</div>
                <div class="attr-clomn color-gray">库存数量</div>
                <div class="attr-clomn220 color-gray">净含量</div>
              </div>
              <div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-row">
                <div class="attr-clomn">{{ item.goodSpecs }}</div>
                <div class="attr-clomn200 flex-left-top">
                  <el-input-number v-model="item.goodPrice" :min="1" :precision="2" :controls="false"></el-input-number>
                  <span style="padding: 0 10px;">元</span>
                </div>
                <div class="attr-clomn">
                  <el-input-number v-model="item.goodStock" :min="1" :controls="false" />
                </div>
                <div class="attr-clomn220 flex-left-top">
                  <el-input-number v-model="item.netContent" :min="1" :controls="false" />
                  <el-select v-model="item.unit" style="width: 80px; margin-left: 10px">
                    <el-option label="kg" value="kg" />
                    <el-option label="g" value="g" />
                    <el-option label="ml" value="ml" />
                  </el-select>
                </div>
              </div>
            </div>
          </el-form-item>
        </div>


        <!-- 商品属性 -->
        <el-form-item label="商品属性" prop="attribute" required>
          <div v-for="(item, index) in formInline.attribute" :key="index" class="attr-item">
            <el-input v-model="item.name" :value="item.name" class="attr-input" placeholder="请输入属性名称" />
            <el-icon size="20px" v-if="index !== 0" @click="deleteAttr(index)" style="cursor: pointer;">
              <Delete />
            </el-icon>
          </div>
          <el-button icon="plus" type="primary" plain style="margin: 0" @click="addAttr">添加属性</el-button>
        </el-form-item>
        <!-- 属性内容 -->
        <el-form-item label="属性内容" prop="attribute" required>
          <div class="attr-box">
            <div class="attr-row">
              <div class="attr-input color-gray">属性名称</div>
              <div class="attr-input color-gray">属性内容</div>
            </div>
            <div v-for="(item, index) in formInline.attribute" :key="index" class="attr-row">
              <div class="attr-input">{{ item.name }}</div>
              <el-input v-model="item.value" class="attr-input" />
            </div>
          </div>
        </el-form-item>
        <!-- 发货地址 -->
        <el-form-item label="发货地址" required>
          <div style="display: flex; gap: 16px;">
            <el-form-item prop="selectedAddress">
              <!-- 省市区级联选择器 -->
              <el-cascader v-model="formInline.selectedAddress" :options="addressOptions" :props="cascaderProps"
                placeholder="请选择省市区" clearable />
            </el-form-item>
            <el-form-item prop="detailAddress">
              <!-- 详细地址输入框 -->
              <el-input v-model="formInline.detailAddress" placeholder="详细地址（如街道、门牌号等）" style="width: 220px;" />
            </el-form-item>
          </div>
        </el-form-item>
        <!-- 保障服务 -->
        <el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 10px;">
          <el-checkbox v-model="isSafeguardSelected" size="large" style="margin-top: -3px;">
            <div style="color: #333;" v-for="(item, index) in formInline.safeguard.options" :key="index">服务承诺：{{
              item.text }}
            </div>
          </el-checkbox>
        </el-form-item>
        <!-- 优惠折扣 -->
        <el-form-item label="优惠折扣" style="margin-bottom: 10px;">
          <div style="width: 100%;">
            <el-checkbox v-model="isDiscountSettings" size="large" style="margin-top: -3px;">
              <div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">
                优惠设置：{{
                  item.text }}</div>
            </el-checkbox>
          </div>
          <div style="width: 100%;">
            <el-checkbox v-model="isDiscountRebate" size="large" style="margin-top: -3px;">
              <div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">
                折扣设置：{{
                  item.text }}</div>
            </el-checkbox>
          </div>
        </el-form-item>
        <!-- 商品详情 -->
        <el-form-item label="商品详情" prop="detailUrl">
          <div>
            <myUploadImage v-model="formInline.detailUrl" :isShowSubscript="false"></myUploadImage>
          </div>
        </el-form-item>
        <!-- 商品视频 -->
        <el-form-item label="商品视频" prop="videoUrl">
          <div>
            <myUploadVideo v-model="formInline.videoUrl"></myUploadVideo>
          </div>
        </el-form-item>

      </el-form>
      <el-button type="primary" @click="onSubmit" style="margin: 10px 0 0 80px;width: 150px;">确认编辑</el-button>
    </div>
  </div>
</template>
<script setup name="editGoods">
import { ca } from "element-plus/es/locales.mjs";
import { ref, reactive, nextTick, onMounted, watch } from "vue";
import myUploadImage from "@/components/myUploadImage.vue";
import myUploadVideo from "@/components/myUploadVideo.vue";
import { getGoodType, goodEdit, getGoodInfo, getActiveInfos } from "@/api/goods/info";
import { getRegion } from "@/api/common";
import { ElMessage } from "element-plus";
import areaList from "./areaList";

const route = useRoute()
const router = useRouter()

const formRef = ref(null)
const formData = ref({});
const formInline = reactive({
  goodName: "",
  categoryId: "", //给后端的最后一级,
  categoryId1: "", //一级,
  categoryId2: "", //二级
  categoryId3: "", //三级
  goodUrl: "", //逗号分割的多个图片地址字符串
  goodCategorySelectType: 2, // 商品分类一级选项
  brandId: "", //品牌
  traceCode: "", //溯源码

  specStyle: "1",//规格样式 1单规格 2多规格
  salePrice: 1,//销售价格-单规格
  stock: 1,//库存数量-单规格
  netContent: 1,//净含量-单规格
  unit: "kg",//净含量单位-单规格
  netWeight: [ //多规格集合
    {
      goodSpecs: "",
      goodPrice: 1,
      goodStock: 1,
      netContent: 1,
      unit: "kg"
    }
  ], //规格
  attribute: [
    {
      name: '', //属性
      value: '', //内容
    },
  ],
  selectedAddress: [], //选中的省市区编码数组
  areaAddress: '', //区域地址
  detailAddress: "", //详细地址
  sendAddress: "",
  safeguard: {
    isSelected: 1, //0未选中 1选中
    options: [
      // { id: 10, text: '该商品，支持【七天无理由退货】服务' },
    ]
  }, //保障服务
  discountSettings: {
    isSelected: 0, //0未选中 1选中
    options: [
      // { id: 11, text: '支持【满100减10元】优惠活动' },
      // { id: 13, text: '支持【满200减20元】优惠活动' },
    ]
  }, //优惠设置
  discountRebate: {
    isSelected: 0, //0未选中 1选中
    options: [
      // { id: 12, text: '支持【满两件-打8折】优惠活动' },
      // { id: 14, text: '支持【单件-打905折】优惠活动' },
    ]
  }, //优惠折扣
  detailUrl: "",
  brandId: "",
  traceCode: "",
  videoUrl: "",
});
const rules = reactive({
  goodName: [
    {
      required: true,
      message: '请输入商品名称',
      trigger: 'blur'
    },
  ],
  categoryId1: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  categoryId2: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  categoryId3: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  goodUrl: [
    {
      validator: (rule, value, callback) => {
        if (value === "" || value.trim() === "") {
          callback(new Error('请至少上传一张商品图片'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  specStyle: [
    { required: true, message: '请选择规格样式', trigger: 'change' }
  ],
  salePrice: formInline.specStyle === '1' ? [
    {
      validator: (rule, value, callback) => {
        if (!value || Number(value) <= 0) {
          callback(new Error('请输入销售价格'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    },
  ] : [],
  stock: formInline.specStyle === '1' ? [
    {
      validator: (rule, value, callback) => {
        if (!value || Number(value) <= 0) {
          callback(new Error('请输入库存数量'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    },
  ] : [],
  netContent: formInline.specStyle === '1' ? [
    {
      validator: (rule, value, callback) => {
        if (!value || Number(value) <= 0) {
          callback(new Error('请输入净含量'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    },
  ] : [],
  netWeight: formInline.specStyle === '2' ? [
    {
      validator: (rule, value, callback) => {
        // 检查是否至少有一个属性
        if (!value || value.length === 0) {
          return callback(new Error('至少需要添加一个属性'))
        }

        // 检查每个属性名称是否已填写
        const emptyNames = value.filter(item => !item.goodSpecs?.trim())
        if (emptyNames.length > 0) {
          return callback(new Error('请填写所有商品规格'))
        }

        callback()
      },
      trigger: 'blur'
    }
  ] : [],
  attribute: [
    {
      validator: (rule, value, callback) => {
        // 检查是否至少有一个属性
        if (!value || value.length === 0) {
          return callback(new Error('至少需要添加一个属性'))
        }

        // 检查每个属性名称是否已填写
        const emptyNames = value.filter(item => !item.name?.trim())
        if (emptyNames.length > 0) {
          return callback(new Error('请填写所有属性名称和内容'))
        }

        callback()
      },
      trigger: 'blur'
    }
  ],
  selectedAddress: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value || value.length !== 3) {
          callback(new Error('请选择完整的省市区'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  detailAddress: [
    { required: true, message: '请输入详细地址', trigger: 'blur' }
  ],
})
const addSpecs = () => {
  formInline.netWeight.push({
    goodSpecs: "",
    goodPrice: 1.00,
    goodStock: 1,
    netContent: 1,
    unit: "kg"
  })
}
const deleteSpecs = (index) => {
  formInline.netWeight.splice(index, 1)
}

const addAttr = () => {
  formInline.attribute.push({
    name: '',
    value: '',
  })
}
const deleteAttr = (index) => {
  formInline.attribute.splice(index, 1)
}

// 选中的省市区编码数组（如：['云南省', '昆明市', '呈贡区']）
const selectedAddress = ref([]);
const detailAddress = ref('');
// 级联选择器配置
const cascaderProps = ref({
  label: 'areaName', // 选项标签字段名
  value: 'areaCode', // 选项值字段名
  children: 'areaChildVOS', // 子选项字段名
  emitPath: true,
  expandTrigger: 'hover',
});
// 省市区数据（示例）
const addressOptions = ref([]);
addressOptions.value = areaList.data;

// 保障服务
const isSafeguardSelected = computed({
  get: () => formInline.safeguard.isSelected === 1,
  set: (val) => {
    formInline.safeguard.isSelected = val ? 1 : 0
  }
})
// 优惠设置
const isDiscountSettings = computed({
  get: () => formInline.discountSettings.isSelected === 1,
  set: (val) => {
    formInline.discountSettings.isSelected = val ? 1 : 0
  }
})
// 优惠折扣
const isDiscountRebate = computed({
  get: () => formInline.discountRebate.isSelected === 1,
  set: (val) => {
    formInline.discountRebate.isSelected = val ? 1 : 0
  }
})

// 文件上传前的校验
// const beforeUpload = (file) => {
//   const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
//   const isLt2M = file.size / 1024 / 1024 < 2

//   if (!isImage) {
//     ElMessage.error('只能上传JPG/PNG/GIF格式的图片!')
//     return false
//   }
//   if (!isLt2M) {
//     ElMessage.error('图片大小不能超过2MB!')
//     return false
//   }
//   return true
// }
// 文件变化时触发验证
// const handleChange = () => {
//   console.log('文件变化时触发验证')
//   nextTick(() => {
//     console.log(formInline.images)
//     formRef.value.validateField('images')
//   })
// }
// 移除文件时触发验证
// const handleRemove = (file) => {
//   console.log('移除文件时触发验证')
//   console.log(file)
//   console.log(formInline.images)
//   formInline.images = formInline.images.filter(item => item.uid !== file.uid)
//   formRef.value.validateField('images')
// }
// 超出限制提示
// const handleExceed = () => {
//   ElMessage.warning('最多只能上传5张图片!')
// }

const categoryList1 = ref([]);
const categoryList2 = ref([]);
const categoryList3 = ref([]);

const getGoodTypeList = async () => {
  try {
    let response = await getGoodType();
    console.log(response);
    if (response.code == 200) {
      categoryList1.value = response.data;
    }
  } catch (error) {
    console.log(error);
  }
};
const changeCategory1 = (id) => {
  console.log(id);
  formInline.categoryId1 = id;
  formInline.categoryId2 = "";
  categoryList2.value = categoryList1.value.filter((item) => item.id == id)[0].children;
  formInline.categoryId3 = "";
  formInline.categoryId = "";
  categoryList3.value = [];
  if (id == 70) {
    // 选择产出品70
    formInline.goodCategorySelectType = 1;
  } else {
    // 选择投入品88
    formInline.goodCategorySelectType = 2;
  }
};
const changeCategory2 = (id) => {
  console.log(id);
  formInline.categoryId2 = id;
  categoryList3.value = categoryList2.value.filter((item) => item.id == id)[0].children;
  formInline.categoryId3 = "";
  formInline.categoryId = "";
};
const changeCategory3 = (id) => {
  console.log(id);
  formInline.categoryId3 = id;
  formInline.categoryId = id;
};

const onSubmit = async () => {
  console.log(formInline);
  try {
    await formRef.value.validate()
    console.log('验证通过!', formRef.value)
    // 整理提交的参数
    let params = { ...formInline };
    if (formInline.specStyle == '1') {
      params.netWeight = [
        {
          goodSpecs: "",
          goodPrice: formInline.salePrice,
          goodStock: formInline.stock,
          netContent: formInline.netContent,
          unit: formInline.unit
        }
      ];
    } else {
      params.netWeight = formInline.netWeight
    }
    params.areaAddress = params.selectedAddress.join(',');

    params.safeguardSelected = formInline.safeguard.isSelected; //保障服务
    params.discountSettingsSelected = formInline.discountSettings.isSelected; //优惠设置
    params.discountRebateSelected = formInline.discountRebate.isSelected; //优惠折扣

    // 调用接口提交
    onGoodSave(params)
  } catch (error) {
    console.log('验证失败', error)
  }
};

const onGoodSave = async (params) => {
  let response = await goodEdit(params);
  if (response.code === 200) {
    ElMessage.success("编辑成功！");
    formRef.value.resetFields();
  } else {
    ElMessage.error(response.message);
  }
}
const getArea = async () => {
  const res = await getRegion();
  if (res.code === 200) {
    addressOptions.value = res.data.list;
  }
};
const activeInfoList = ref([]);
// 获取商品优惠信息配置项
const getActiveInfo = async () => {
  const res = await getActiveInfos();
  if (res.code === 200) {
    activeInfoList.value = res.data;
  } else {
    ElMessage.error(res.message);
  }
};
const getGoodsInfo = async (goodId) => {
  const res = await getGoodInfo(goodId);
  if (res.code == 200) {
    Object.assign(formData.value, res.data);
    Object.assign(formInline, res.data);


    if (res.data.netWeight.length > 1) {
      formInline.specStyle = '2';
    } else {
      formInline.specStyle = '1';
      console.log(res.data.netWeight[0]);
      formInline.salePrice = formData.value.netWeight[0]?.goodPrice ?? 1;
      formInline.stock = formData.value.netWeight[0]?.goodStock ?? 1;
      formInline.netContent = formData.value.netWeight[0]?.netContent ?? 1;
      formInline.unit = formData.value.netWeight[0]?.unit ?? "kg";
    }

    formInline.categoryId1 = formData.value?.categoryId1 ?? "88"
    formInline.categoryId2 = formData.value?.categoryId2 ?? "";
    formInline.categoryId3 = formData.value?.categoryId3 ?? "";

    formInline.netWeight = formData.value?.netWeight ?? [
      {
        goodSpecs: "",
        goodPrice: 1,
        goodStock: 1,
        netContent: 1,
        unit: "kg"
      }
    ];
    formInline.attribute = formData.value?.attribute ?? [{
      name: '', //属性
      value: '', //内容
    }];

    formInline.selectedAddress = formData.value?.areaAddress?.split(",") ?? [];

    formInline.goodUrl = formData.value?.goodUrl?.split(",").slice(0, 5).join(',') ?? "";
    formInline.detailUrl = formData.value?.detailUrl?.split(",").slice(0, 5).join(',') ?? "";
    formInline.videoUrl = formData.value?.videoUrl?.split(",").slice(0, 1).join(',') ?? "";

    formInline.safeguard = { isSelected: formData.value?.safeguard?.isSelected ?? 1, options:[...activeInfoList.value.safeguard.options] }
    formInline.discountSettings = { isSelected: formData.value?.discountSettings?.isSelected ?? 0, options:[...activeInfoList.value.discountSettings.options] }
    formInline.discountRebate = { isSelected: formData.value?.discountRebate?.isSelected ?? 0, options:[...activeInfoList.value.discountRebate.options] }
    if (formInline.categoryId1) {
      categoryList2.value = categoryList1.value.filter((item) => item.id == formInline.categoryId1)[0].children;
      if (formInline.categoryId2) {
        let item = categoryList2.value.filter(item => item.id === formInline.categoryId2);
        categoryList3.value = item[0].children;
      }
    }

    // console.log(formInline);
  } else {
    ElMessage.error(res.msg);
  }
};

watch(() => route.query, (newVal) => {
  console.log("watch商品id:", newVal.goodId);
  if (newVal.goodId) {
    getGoodsInfo(newVal.goodId);
  }
})
onMounted(async () => {
  const { edit, goodId } = route.query;
  console.log("onMounted商品id:", goodId);
  getActiveInfo();
  await getGoodTypeList();
  getArea();
  if (goodId) {
    getGoodsInfo(goodId);
  }
});
</script>
<style lang="scss" scoped></style>