opt_web/src/views/price-approval/components/AddPage.vue

<script lang="ts" setup>
/**
 * @Name: AddPage.vue
 * @Description: 商品添加页
 * @Author: Cheney
 */

import { FormInstance, FormRules } from 'element-plus';
import { CirclePlusFilled, Finished, RefreshLeft, Select } from '@element-plus/icons-vue';
import SelectDrawer from './SelectDrawer.vue';
import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';

const route = useRoute();
const routeQuery: any = ref(route.query);
console.log("=>(AddPage.vue:16) routeQuery", routeQuery.value.type);

const currencyCodeOptions = ref([]);
const countryOptions = ref([]);

const loading = ref(false);

const isShow = ref(false);

interface RuleForm {
	country_code: any;
	platform: any;
	sku: any;
	weight: any;
	currency_code: any;
	price_amz_min: any;
	estimated_cost: any;
	final_cost: any;
	price_market: any;
	sales_mode: any;
	cost: any;
	price_show: any;
	price_daily: any;
	price_min: any;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
	country_code: '',
	platform: '',
	sku: '',
	weight: '',
	currency_code: '',
	price_amz_min: '',
	estimated_cost: '',
	final_cost: '',
	price_market: '',
	sales_mode: '',
	cost: '',
	price_show: '',
	price_daily: '',
	price_min: '',
});

const rules = reactive<FormRules<RuleForm>>({
	sku: [{ required: true, message: '请输入SKU', trigger: 'blur' }],
	platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
	country_code: [{ required: true, message: '请输入国家', trigger: 'blur' }],
	currency_code: [{ required: true, message: '请选择货币代码', trigger: 'change' }],
	sales_mode: [{ required: true, message: '请输入销售模式', trigger: 'blur' }],
	estimated_cost: [{ required: true, message: '请输入预估成本', trigger: 'blur' }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			const res = await useResponse(routeQuery.value.type === 'supply' ? api.postSupplyCreate : api.postDirectCreate, ruleForm, loading);
			if (res.code === 2000) {
				ElMessage.success({ message: res.msg, plain: true, icon: CirclePlusFilled });
				resetForm(formEl);
			}
		} else {
			console.log('error submit!', fields);
		}
	});
};

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};

onBeforeMount(() => {
	fetchCurrencyCodeOptions();
	fetchCountryOptions();
});

async function fetchCurrencyCodeOptions() {
	const res = await useResponse(api.getCurrencyCodeOptions);
	currencyCodeOptions.value = res.data.currency_code;
}

async function fetchCountryOptions() {
	const res = await useResponse(api.getCountryOptions);
	countryOptions.value = res.data.country_code;
}

function showSelectDrawer() {
	isShow.value = true;
}

function getCheckId(id: any) {
	ruleForm.cost = id.value;
}
</script>

<template>
	<div class="p-5">
		<el-card class="h-full" style="color: rgba(0, 0, 0, 0.88)">
			<template #header>
				<span class="text-lg"> 审批查看({{ routeQuery.type === 'supply' ? '供货' : '直销' }}) - 创建 </span>
			</template>
			<div class="w-full">
				<!-- 供货 -->
				<el-form
					v-if="routeQuery.type === 'supply'"
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules"
					class="mx-2.5"
					label-position="top"
					label-width="auto"
					status-icon
				>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item class="font-medium" label="国 家" prop="country_code">
								<el-select v-model="ruleForm.country_code" placeholder="请选择国家">
									<el-option v-for="item in countryOptions" :label="item" :value="item"></el-option>
								</el-select>
								<!--<el-input v-model="ruleForm.country_code" placeholder="请输入国家" />-->
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="平 台" prop="platform">
								<el-input v-model="ruleForm.platform" placeholder="请输入平台" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="SKU" prop="sku">
								<el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="重 量(KG)" prop="weight">
								<el-input v-model="ruleForm.weight" placeholder="请输入重量" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item class="font-medium" label="货币代码" prop="currency_code">
								<el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
									<el-option v-for="item in currencyCodeOptions" :label="item" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="预估硬件成本" prop="estimated_cost">
								<el-input v-model="ruleForm.estimated_cost" placeholder="请输入预估硬件成本" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="最低售价(外币)" prop="price_amz_min">
								<el-input v-model="ruleForm.price_amz_min" placeholder="请输入最低售价(外币)" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="尾程费用(外币)" prop="final_cost">
								<el-input v-model="ruleForm.final_cost" placeholder="请输入尾程费用(外币)" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20" style="margin-bottom: 5px">
						<el-col :span="6">
							<el-form-item class="font-medium" label="销售模式" prop="sales_mode">
								<!--<el-input v-model="ruleForm.sales_mode" placeholder="请输入销售模式" />-->
								<el-select v-model="ruleForm.sales_mode" clearable placeholder="请选择销售模式">
									<el-option label="线上" value="线上"></el-option>
									<el-option label="线下" value="线下"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="成 本" prop="cost">
								<el-button v-if="!ruleForm.cost" :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer"> 选 择 </el-button>
								<div v-else class="flex flex-1">
									<el-input v-model="ruleForm.cost" :disabled="true">
										<template #prepend>
											<i class="bi bi-cash-coin" style="color: #67c23a; font-size: 20px"></i>
										</template>
										<template #append>
											<el-button style="color: #e6a23c" @click="showSelectDrawer"> 重新选择 </el-button>
										</template>
									</el-input>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<!-- 直销 -->
				<el-form v-else ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5" label-position="top" label-width="auto" status-icon>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item class="font-medium" label="国 家" prop="country_code">
								<el-select v-model="ruleForm.country_code" placeholder="请选择国家">
									<el-option v-for="item in countryOptions" :label="item" :value="item"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="平 台" prop="platform">
								<el-input v-model="ruleForm.platform" placeholder="请输入平台" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="SKU" prop="sku">
								<el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="重 量(KG)" prop="weight">
								<el-input v-model="ruleForm.weight" placeholder="请输入重量" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item class="font-medium" label="货币代码" prop="currency_code">
								<el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
									<el-option v-for="item in currencyCodeOptions" :label="item" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="展示价格(外币)" prop="price_show">
								<el-input v-model="ruleForm.price_show" placeholder="请输入展示价格(外币)" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="日常活动售价(外币)" prop="price_daily">
								<el-input v-model="ruleForm.price_daily" placeholder="请输入日常活动售价(外币)" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="最低售价(外币)" prop="price_min">
								<el-input v-model="ruleForm.price_min" placeholder="请输入最低售价(外币)" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20" style="margin-bottom: 5px">
						<el-col :span="6">
							<el-form-item class="font-medium" label="预估硬件成本" prop="estimated_cost">
								<el-input v-model="ruleForm.estimated_cost" placeholder="请输入预估成本" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="尾程费用(外币)" prop="final_cost">
								<el-input v-model="ruleForm.final_cost" placeholder="请输入尾程费用(外币)" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="销售模式" prop="sales_mode">
								<!--<el-input v-model="ruleForm.sales_mode" placeholder="请输入销售模式" />-->
								<el-select v-model="ruleForm.sales_mode" clearable placeholder="请选择销售模式">
									<el-option label="线上" value="线上"></el-option>
									<el-option label="线下" value="线下"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="font-medium" label="成 本" prop="cost">
								<el-button v-if="!ruleForm.cost" :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer"> 选 择 </el-button>
								<div v-else class="flex flex-1">
									<el-input v-model="ruleForm.cost" :disabled="true">
										<template #prepend>
											<i class="bi bi-cash-coin" style="color: #67c23a"></i>
										</template>
										<template #append>
											<el-button style="color: #e6a23c" @click="showSelectDrawer"> 重新选择 </el-button>
										</template>
									</el-input>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<template #footer>
				<div class="flex justify-end">
					<el-button :icon="RefreshLeft" @click="resetForm(ruleFormRef)">重 置</el-button>
					<el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定 </el-button>
				</div>
			</template>
		</el-card>
		<SelectDrawer v-if="isShow" v-model="isShow" :title="routeQuery.type === 'supply' ? '供货' : '直销'" @sendCheckId="getCheckId" />
	</div>
</template>

<style scoped></style>