pj_admin_cloud/src/views/hard/hard-spu/form.vue

<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" width="40%" v-model="visible" :close-on-click-modal="false" draggable>
		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
			<el-row :gutter="24">
				<el-col :span="24" class="mb20">
					<el-form-item label="商品名" prop="name">
						<el-input v-model="form.name" placeholder="请输入商品名" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="分类" prop="spuCategoryId">
						<select-hard-spu-category v-model="form.spuCategoryId" :apiParams="{ hardId: form.hardId }" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="商品封面图片" prop="cover">
						<upload-imgs v-model="form.cover" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="商品识别图片" prop="pic">
						<upload-imgs v-model="form.pic" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="口味" prop="specsTaste">
						<el-input v-model="form.specsTaste" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="容量" prop="specsCapacity">
						<el-input v-model="form.specsCapacity" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="重量" prop="specsWeight">
						<el-input v-model="form.specsWeight" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="单价" prop="price">
						<el-input-number :precision="2" :min="0" :step="1" v-model="form.price" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="排序" prop="sort">
						<template #label>
							<span>排序</span>
							<tip content="越大越在前" />
						</template>
						<el-input-number :min="0" :step="1" v-model="form.sort" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="12" class="mb20">
					<el-form-item label="是否启用" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio v-for="v in yes_no_type" :key="v.value" :label="v.value" border>
								{{ v.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12" class="mb20">
					<el-form-item prop="isDefault">
						<template #label>
							<span>是否标品</span>
							<tip content="选择是,该商品将会根据商品图片建模" />
						</template>
						<el-radio-group v-model="form.isDefault">
							<el-radio v-for="v in yes_no_type" :key="v.value" :label="v.value" border>
								{{ v.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="HardSpuDialog">
import { storePrice, displayPrice } from "/@/utils/formatMoney"
import { useDict } from "/@/hooks/dict"
import { useMessage } from "/@/hooks/message"
import * as hardSpu from "/@/api/hard/hard-spu"
const emit = defineEmits(["refresh"])

// 定义变量内容
const dataFormRef = ref()
const visible = ref(false)
const loading = ref(false)
// 定义字典
const { yes_no_type } = useDict("yes_no_type")
// 提交表单数据
const form = reactive({
	id: "",
	hardId: "",
	spuCategoryId: "",
	name: "",
	cover: "",
	pic: "",
	specsTaste: "",
	specsCapacity: "",
	specsWeight: "",
	price: 0,
	salesCount: 0,
	repertoryCount: 0,
	sort: 0,
	hardDoorNumber: 1,
	status: "1",
	isDefault: "0",
})

// 定义校验规则
const dataRules = ref({
	name: [{ required: true, message: "请输入商品名", trigger: "blur" }],
	hardId: [{ required: true, message: "请选择设备", trigger: "blur" }],
	spuCategoryId: [{ required: true, message: "请选择分类", trigger: "change" }],
	cover: [{ required: true, message: "请选择封面图片", trigger: "change" }],
	pic: [{ required: true, message: "请选择识别图片", trigger: "change" }],
	price: [{ required: true, message: "请输入价格", trigger: "blur" }],
	sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
	status: [{ required: true, message: "请选择是否启用", trigger: "change" }],
	isDefault: [{ required: true, message: "请选择是否标品", trigger: "change" }],
})

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true
	form.id = ""

	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields()
	})

	// 获取hardSpu信息
	if (id) {
		form.id = id
		gethardSpuData(id)
	}
}

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {})
	if (!valid) return false

	try {
		loading.value = true
		const _pa = { ...form, price: storePrice(form.price) }
		form.id ? await hardSpu.putObj(_pa) : await hardSpu.addObj(_pa)
		useMessage().success(form.id ? "修改成功" : "添加成功")
		visible.value = false
		emit("refresh")
	} catch (err: any) {
		useMessage().error(err.msg)
	} finally {
		loading.value = false
	}
}

// 初始化表单数据
const gethardSpuData = (id: string) => {
	// 获取数据
	loading.value = true
	hardSpu
		.getObj(id)
		.then((res: any) => {
			Object.assign(form, res.data, { price: displayPrice(res.data.price, "", 0) })
		})
		.finally(() => {
			loading.value = false
		})
}

// 暴露变量
defineExpose({
	openDialog,
})
</script>