opt_web/src/views/product-manage/product-monitor/component/createDialog.vue

<script lang="ts" setup>
/**
 * @Name: EditDrawer.vue
 * @Description: 商品监控-行编辑
 * @Author: Cheney
 */

import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { DictionaryStore } from '/@/stores/dictionary';
import * as api from '../api';

const shopOptions = <Ref>inject('shopOptions');
const groupOptions = <Ref>inject('groupOptions');
const { data: staticData } = DictionaryStore();

const loading = ref(false);
const createOpen = defineModel({ default: false });

const emit = defineEmits(['refresh']);

interface RuleForm {
	asin: any;
	sku: any;
	country: any;
	shop: any;
	group: any;
	// status: any;
	frequency: any;
	description: any;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
	asin: '',
	sku: '',
	country: '',
	shop: '',
	group: '',
	// status: '',
	frequency: 6,
	description: '',
});

const rules = reactive<FormRules<RuleForm>>({
	asin: [{ required: true, message: '请输入ASIN', trigger: 'blur' }],
	sku: [{ required: true, message: '请输入SKU', trigger: 'blur' }],
	country: [{ required: true, message: '请选择国家', trigger: 'change' }],
	shop: [{ required: true, message: '请输入店铺', trigger: 'blur' }],
	group: [{ required: true, message: '请输入分组', trigger: 'blur' }],
	status: [{ message: '请选择状态', trigger: 'blur' }],
	// frequency: [ { message: '请选择更新频率', trigger: 'blur' } ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			const body = {
				asin: ruleForm.asin,
				sku: ruleForm.sku,
				country_code: ruleForm.country,
				shop_id: ruleForm.shop,
				tag: ruleForm.group,
				goods: {
					sku: ruleForm.sku,
					tag: ruleForm.group,
				},
				freq: ruleForm.frequency,
				description: ruleForm.description,
			};
			const res = await useResponse(api.createProductMonitor, body, loading);
			if (res.code === 2000){
				ElMessage.success('创建成功');
				createOpen.value = false;
				emit('refresh');
			}
		} else {
			createOpen.value = false;
			ElMessage.error('创建失败，请检查表单');
		}
	});
};

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

<template>
	<el-dialog v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false" :title="`商品监控 - 创建 `" style="width: 40%">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" label-width="auto" class="mx-2.5 mt-5" status-icon>
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item class="font-medium" label="ASIN" prop="asin">
						<el-input v-model="ruleForm.asin" placeholder="不再支持批量创建（批量创建使用Excel导入），请填写单个asin" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<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="12">
					<el-form-item class="font-medium" label="店 铺" prop="shop">
						<el-select v-model="ruleForm.shop" placeholder="请选择店铺">
							<el-option v-for="item in shopOptions" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item class="font-medium" label="分 组" prop="group">
						<el-select v-model="ruleForm.group" placeholder="请选择分组">
							<el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item class="font-medium" label="国 家" prop="country">
						<el-select v-model="ruleForm.country" placeholder="请选择国家">
							<el-option v-for="item in staticData.country_code" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item class="font-medium" label="更新频率" prop="frequency">
						<el-input-number v-model="ruleForm.frequency" min="3" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item class="font-medium" label="备注" prop="description">
						<el-input v-model="ruleForm.description" type="textarea" placeholder="请输入备注信息" maxlength="200" show-word-limit />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
			<el-button @click="resetForm(ruleFormRef)">重 置</el-button>
		</template>
	</el-dialog>
</template>

<style scoped>
:deep(.el-drawer .el-drawer__header) {
	border: none !important;
}
</style>