<template>
|
<div class="app-container">
|
<el-form ref="formRef" :model="data" :rules="formData.rules" label-width="100px">
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="商品名称" prop="goodsName">
|
<el-input v-model="data.goodsName" placeholder="请输入商品名称" style="width: 200px" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="商品分类" prop="classCode2">
|
<el-cascader
|
:props="goodsClassify.props"
|
v-model="goodsClassify.classifysAdd"
|
ref="classifyAddRef"
|
clearable
|
@change="onClassifyChange()"
|
style="width: 250px"
|
/> </el-form-item
|
></el-col>
|
<el-col :span="8">
|
<el-form-item label="商品原价" prop="marketPrice">
|
<el-input-number v-model="data.marketPrice" :min="0" :precision="2" :step="1"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="颜色类型" prop="colorCode">
|
<el-select v-model="data.colorCode" placeholder="请选择颜色类型" clearable style="width: 200px">
|
<el-option :label="dict.label" v-for="dict in color_code" :key="dict.value" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="瑕疵类型" prop="flawCode">
|
<el-select v-model="data.flawCode" placeholder="请选择瑕疵类型" clearable style="width: 200px">
|
<el-option :label="dict.label" v-for="dict in flaw_code" :key="dict.value" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8" v-if="data.classCode1 == '104'">
|
<el-form-item label="指圈圈口" prop="fingerSize">
|
<el-input v-model="data.fingerSize" placeholder="请输入指圈圈口" style="width: 200px" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8" v-if="data.classCode1 == '101'">
|
<el-form-item label="手镯圈口" prop="handSize">
|
<el-input v-model="data.handSize" placeholder="请输入手镯圈口" style="width: 200px" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="镶嵌类型" prop="insetCode">
|
<el-select v-model="data.insetCode" placeholder="请选择镶嵌类型" clearable style="width: 200px">
|
<el-option :label="dict.label" v-for="dict in inset_code" :key="dict.value" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="种" prop="varCode">
|
<el-select v-model="data.varCode" placeholder="请选择种类型" clearable style="width: 200px">
|
<el-option :label="dict.label" v-for="dict in var_code" :key="dict.value" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="水" prop="lucencyCode">
|
<el-select v-model="data.lucencyCode" placeholder="请选择水类型" clearable style="width: 200px">
|
<el-option :label="dict.label" v-for="dict in lucency_code" :key="dict.value" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="商品售价" prop="goodsPrice">
|
<el-input-number v-model="data.goodsPrice" :min="0" :precision="2" :step="1"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="商品plus价" prop="plusPrice">
|
<el-input-number v-model="data.plusPrice" :min="0" :precision="2" :step="1"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="商品会员价" prop="vipPrice">
|
<el-input-number v-model="data.vipPrice" :min="0" :precision="2" :step="1"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="重量" prop="goodsWeight">
|
<el-input v-model="data.goodsWeight" placeholder="请输入商品重量例：200克" style="width: 200px" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="产地" prop="goodsPlace">
|
<el-input v-model="data.goodsPlace" placeholder="请输入商品产地" style="width: 200px" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="出售状态" prop="saleState">
|
<el-switch v-model="data.saleState" :active-value="1" :inactive-value="2" active-text="在售"></el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="商品主图" prop="goodsImg">
|
<ImageUpload :limit="1" v-model="data.goodsImg"></ImageUpload>
|
</el-form-item>
|
</el-col>
|
<el-col :span="16">
|
<el-form-item label="商品轮播图" prop="goodsBanner">
|
<ImageUpload :limit="8" v-model="data.goodsBanner" :fileType="['png', 'jpg', 'jpeg', 'wepg', 'mp4', 'mov']"></ImageUpload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col>
|
<el-form-item label="商品详情图" prop="goodsDetail">
|
<ImageUpload :limit="8" v-model="data.goodsDetail"></ImageUpload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col>
|
<el-form-item label="官网显示" prop="webState">
|
<el-switch v-model="data.webState" :active-value="1" :inactive-value="2" active-text="是"></el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="状态" prop="shopState">
|
<el-switch v-model="data.shopState" :active-value="1" :inactive-value="2" active-text="上架"></el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="排序" prop="sortNum">
|
<el-input-number v-model="data.sortNum" :min="0" :max="100" :step="1"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="data.remark" placeholder="备注" style="width: 200px" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<div style="width: 100%; display: flex; justify-content: center; margin-top: 20px">
|
<el-button @click="cancel">取消</el-button>
|
<el-button type="primary" @click="submitDataScope">提交</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { saveGoods, updateGoods, getGoodsInfo } from "@/api/goods/goods";
|
import { goodsDTO, TypeGoodsDTO } from "@/types/DTO/goodsDTO";
|
import { getClassThreeList } from "@/api/goods/classify";
|
import useTagsViewStore from "@/store/modules/tagsView.js";
|
import type { CascaderProps } from "element-plus";
|
import { useRoute, useRouter } from "vue-router";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { flaw_code, inset_code, color_code, var_code, lucency_code } = proxy.useDict("flaw_code", "inset_code", "color_code", "var_code", "lucency_code");
|
const route = useRoute();
|
const router = useRouter();
|
const useTags = useTagsViewStore();
|
const type = ref(0); // 1 新增 2 修改
|
|
onMounted(() => {
|
// console.log(route.query);
|
type.value = route.query.type as unknown as number;
|
console.log("type.value", type.value);
|
if (type.value == 2) {
|
//修改
|
getDataInfo(route.query.id as unknown as number);
|
}
|
});
|
|
const getDataInfo = async (e: number) => {
|
await getGoodsInfo(e).then((res) => {
|
if (res.code == 200) {
|
formData.data = { ...res.data };
|
goodsClassify.classifysAdd = [formData.data.classCode1, formData.data.classCode2];
|
}
|
});
|
};
|
|
/**
|
* 商品分类加载配置
|
*/
|
const classifyAddRef = ref();
|
const goodsClassify = reactive({
|
props: {
|
// label: "title",
|
// value: "value",
|
// leaf: "hasChildren",
|
checkStrictly: false,
|
lazy: true,
|
async lazyLoad(node, resolve) {
|
const { level, value } = node;
|
// setTimeout( () => {
|
let list = await getGoodsClassify(value as string, level);
|
// ++level;
|
resolve(list);
|
// }, 500);
|
},
|
} as CascaderProps,
|
classifysAdd: [] as string[],
|
});
|
const getGoodsClassify = async (val: string, level: number) => {
|
let list: any[] = [];
|
await getClassThreeList({ parentId: val }).then((res) => {
|
if (res.code == 200) {
|
list = res.data.map((item: any) => ({
|
value: item.classCode,
|
label: item.className,
|
leaf: level >= 1,
|
}));
|
// list = res.data;
|
}
|
});
|
return list;
|
};
|
/**
|
* 商品分类选择完成
|
*/
|
const onClassifyChange = () => {
|
const ss = classifyAddRef.value.getCheckedNodes()[0];
|
if (goodsClassify.classifysAdd.length == 2) {
|
formData.data.classCode1 = goodsClassify.classifysAdd[0];
|
formData.data.classCode2 = goodsClassify.classifysAdd[1];
|
formData.data.className1 = ss.pathLabels[0];
|
formData.data.className2 = ss.pathLabels[1];
|
} else {
|
formData.data.classCode1 = "";
|
formData.data.classCode2 = "";
|
formData.data.className1 = "";
|
formData.data.className2 = "";
|
}
|
};
|
|
interface formA extends Common.formDataType<TypeGoodsDTO> {}
|
|
const formData = reactive<formA>({
|
data: { ...goodsDTO },
|
isOpenFormData: false, //是否展开新增对话框
|
dialogTitle: "", //弹窗标题
|
handleStatus: 0,
|
formRef: null,
|
rules: {
|
goodsName: [{ required: true, message: "请输入商品名称", trigger: "change" }],
|
classCode2: [{ required: true, message: "请选择商品分类", trigger: "change" }],
|
marketPrice: [{ required: true, message: "请输入商品原价", trigger: "change" }],
|
goodsPrice: [{ required: true, message: "请输入商品售价", trigger: "change" }],
|
plusPrice: [{ required: true, message: "请输入商品plus价", trigger: "change" }],
|
vipPrice: [{ required: true, message: "请输入商品会员价", trigger: "change" }],
|
goodsWeight: [{ required: true, message: "请输入商品重量", trigger: "change" }],
|
goodsPlace: [{ required: true, message: "请输入商品产地", trigger: "change" }],
|
goodsImg: [{ required: true, message: "请上传商品主图", trigger: "change" }],
|
goodsBanner: [{ required: true, message: "请上传商品轮播图", trigger: "change" }],
|
goodsDetail: [{ required: true, message: "请上传商品详情图", trigger: "change" }],
|
colorCode: [{ required: true, message: "请选择颜色类型", trigger: "change" }],
|
flawCode: [{ required: true, message: "请选择瑕疵类型", trigger: "change" }],
|
fingerSize: [{ required: true, message: "请输入指圈圈口", trigger: "change" }],
|
insetCode: [{ required: true, message: "请选择镶嵌类型", trigger: "change" }],
|
varCode: [{ required: true, message: "请选择种类型", trigger: "change" }],
|
lucencyCode: [{ required: true, message: "请选择水类型", trigger: "change" }],
|
handSize: [{ required: true, message: "请输入手镯圈口", trigger: "change" }],
|
},
|
});
|
|
const { data, isOpenFormData, dialogTitle, formRef } = toRefs(formData);
|
|
/**
|
* 提交表单检验
|
*/
|
const submitDataScope = () => {
|
formData.formRef!.validate((valid) => {
|
if (valid) {
|
if (formData.data.goodsId) {
|
editData();
|
} else {
|
applyDictLable();
|
}
|
}
|
});
|
};
|
|
const cancel = () => {
|
useTags.delView(route);
|
router.go(-1);
|
};
|
|
const applyDictLable = () => {
|
formData.data.colorName = color_code.value.find((f: Dict.dictType) => f.value == formData.data.colorCode).label; //颜色类型c
|
formData.data.flawName = flaw_code.value.find((f: Dict.dictType) => f.value == formData.data.flawCode).label; //瑕疵类型
|
formData.data.insetName = inset_code.value.find((f: Dict.dictType) => f.value == formData.data.insetCode).label; //镶嵌类型
|
formData.data.varName = var_code.value.find((f: Dict.dictType) => f.value == formData.data.varCode).label; //种类型
|
formData.data.lucencyName = lucency_code.value.find((f: Dict.dictType) => f.value == formData.data.lucencyCode).label; //水类型
|
SaveData();
|
};
|
|
/**
|
* 保存
|
*/
|
const SaveData = async () => {
|
await saveGoods(formData.data).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("新增成功");
|
cancel();
|
} else {
|
proxy.$modal.msgError(res.msg);
|
}
|
});
|
};
|
|
/**
|
* 修改
|
*/
|
const editData = async () => {
|
await updateGoods(formData.data).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("操作成功");
|
// formData.isOpenFormData = false;
|
cancel();
|
} else {
|
proxy.$modal.msgError(res.msg);
|
}
|
});
|
};
|
</script>
|
