|
|
@@ -0,0 +1,158 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+/**
|
|
|
+ * @Name: EditDrawer.vue
|
|
|
+ * @Description: 竞品监控-创建对话框
|
|
|
+ * @Author: xinyan
|
|
|
+ */
|
|
|
+
|
|
|
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
|
|
+import { DictionaryStore } from '/@/stores/dictionary';
|
|
|
+import { useResponse } from '/@/utils/useResponse';
|
|
|
+import * as api from '../api';
|
|
|
+
|
|
|
+const shopOptions = <Ref>inject('shopOptions');
|
|
|
+const groupOptions = <Ref>inject('groupOptions');
|
|
|
+const statusOptions = [{ label: '正常', value: 1 }];
|
|
|
+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: '',
|
|
|
+ country: '',
|
|
|
+ shop: '',
|
|
|
+ group: '',
|
|
|
+ status: 1,
|
|
|
+ frequency: 6,
|
|
|
+ description: '',
|
|
|
+});
|
|
|
+
|
|
|
+const rules = reactive<FormRules<RuleForm>>({
|
|
|
+ asin: [{ required: true, message: '请输入ASIN', 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,
|
|
|
+ country_code: ruleForm.country,
|
|
|
+ shop_name: ruleForm.shop,
|
|
|
+ tag: ruleForm.group,
|
|
|
+ freq: ruleForm.frequency,
|
|
|
+ status: ruleForm.status,
|
|
|
+ // description: ruleForm.description,
|
|
|
+ };
|
|
|
+ const res = await useResponse(api.createCompetitorMonitor, 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" class="mx-2.5 mt-5" label-position="top" label-width="auto" 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="国 家" 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="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-input v-model="ruleForm.shop" placeholder="请输入店铺" />
|
|
|
+ </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="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="status">
|
|
|
+ <el-select v-model="ruleForm.status" disabled>
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :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="description">-->
|
|
|
+ <!-- <el-input v-model="ruleForm.description" maxlength="200" placeholder="请输入备注信息" show-word-limit type="textarea" />-->
|
|
|
+ <!-- </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>
|
xinyan