|
@@ -11,154 +11,157 @@ import { useResponse } from '/@/utils/useResponse';
|
|
|
import * as api from '../api';
|
|
|
import { Close, Finished } from '@element-plus/icons-vue';
|
|
|
|
|
|
+
|
|
|
const shopOptions = <Ref>inject('shopOptions');
|
|
|
const groupOptions = <Ref>inject('groupOptions');
|
|
|
-const statusOptions = [{ label: '正常', value: 1 }];
|
|
|
+const statusOptions = [ { label: '正常', value: 1 } ];
|
|
|
const { data: staticData } = DictionaryStore();
|
|
|
|
|
|
const loading = ref(false);
|
|
|
const createDialog = <Ref>useTemplateRef('createDialog');
|
|
|
const createOpen = defineModel({ default: false });
|
|
|
|
|
|
-const emit = defineEmits(['refresh']);
|
|
|
+const emit = defineEmits([ 'refresh' ]);
|
|
|
|
|
|
interface RuleForm {
|
|
|
- asin: any;
|
|
|
- country: any;
|
|
|
- shop: any;
|
|
|
- group: any;
|
|
|
- status: any;
|
|
|
- frequency: any;
|
|
|
- description: any;
|
|
|
+ asin: 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: '',
|
|
|
+ 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' } ]
|
|
|
+ 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('创建失败,请检查表单');
|
|
|
- }
|
|
|
- });
|
|
|
+ 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({ message: '创建成功', plain: true, icon: 'CirclePlus' });
|
|
|
+ createOpen.value = false;
|
|
|
+ emit('refresh');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // createOpen.value = false;
|
|
|
+ ElMessage.error('创建失败,请检查表单');
|
|
|
+ }
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
function cancelDialog() {
|
|
|
- resetForm(ruleFormRef.value);
|
|
|
- createDialog.value.visible = false;
|
|
|
+ resetForm(ruleFormRef.value);
|
|
|
+ createDialog.value.visible = false;
|
|
|
}
|
|
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.resetFields();
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <el-dialog ref="createDialog" 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 :icon="Close" @click="cancelDialog">取 消</el-button>
|
|
|
- <el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ <el-dialog ref="createDialog" 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 :icon="Close" @click="cancelDialog">取 消</el-button>
|
|
|
+ <el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
:deep(.el-drawer .el-drawer__header) {
|
|
|
- border: none !important;
|
|
|
+ border: none !important;
|
|
|
}
|
|
|
</style>
|