251 lines
10 KiB
Vue
251 lines
10 KiB
Vue
<template>
|
|
<el-dialog
|
|
:title="dialogTitle"
|
|
:model-value="visible"
|
|
width="750px"
|
|
:close-on-click-modal="false"
|
|
destroy-on-close
|
|
@update:model-value="emit('update:visible', $event)"
|
|
>
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
|
|
<el-row :gutter="16">
|
|
<el-col :span="12">
|
|
<el-form-item label="抽取编码" prop="extractCode">
|
|
<el-input v-model="form.extractCode" placeholder="如 shop_daily_direct" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="抽取名称" prop="extractName">
|
|
<el-input v-model="form.extractName" placeholder="如 店铺日订单直接抽取" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="16">
|
|
<el-col :span="12">
|
|
<el-form-item label="源表名" prop="sourceTableName">
|
|
<el-input v-model="form.sourceTableName" placeholder="如 ods_kuaishou_orders" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="源表别名" prop="sourceTableAlias">
|
|
<el-input v-model="form.sourceTableAlias" placeholder="如 o" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="目标表名" prop="targetTableName">
|
|
<el-input v-model="form.targetTableName" placeholder="如 stat_kuaishou_shop_daily" />
|
|
</el-form-item>
|
|
<el-row :gutter="16">
|
|
<el-col :span="12">
|
|
<el-form-item label="抽取类型" prop="extractType">
|
|
<el-select v-model="form.extractType" style="width: 100%">
|
|
<el-option label="增量抽取" value="INCREMENTAL" />
|
|
<el-option label="全量抽取" value="FULL" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="抽取模式" prop="extractMode">
|
|
<el-select v-model="form.extractMode" style="width: 100%">
|
|
<el-option label="直接抽取" value="DIRECT" />
|
|
<el-option label="SQL转换" value="SQL" />
|
|
<el-option label="API抽取" value="API" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="16">
|
|
<el-col :span="12">
|
|
<el-form-item label="抽取键字段" prop="extractKeyField">
|
|
<el-input v-model="form.extractKeyField" placeholder="如 created_at" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="每批数量" prop="batchSize">
|
|
<el-input-number v-model="form.batchSize" :min="1" :max="100000" style="width: 100%" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="16">
|
|
<el-col :span="12">
|
|
<el-form-item label="是否启用" prop="isEnabled">
|
|
<el-switch v-model="form.isEnabled" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="状态" prop="status">
|
|
<el-select v-model="form.status" style="width: 100%">
|
|
<el-option label="启用" value="ACTIVE" />
|
|
<el-option label="停用" value="INACTIVE" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="16">
|
|
<el-col :span="12">
|
|
<el-form-item label="负责人" prop="operator">
|
|
<el-input v-model="form.operator" placeholder="如 system" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="分组字段" prop="groupByFields">
|
|
<el-select v-model="form.groupByFields" multiple filterable allow-create default-first-option style="width: 100%" placeholder="输入字段名后回车添加">
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="过滤表达式" prop="filterExpression">
|
|
<el-input v-model="form.filterExpression" type="textarea" :rows="2" placeholder="如 o.order_status = '已完成'" />
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit" :loading="saving">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default { name: 'reportEngineExtractConfigForm' };
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { ElMessage, FormInstance } from 'element-plus';
|
|
import { getExtractConfig, saveExtractConfig, type ExtractConfigSaveData } from '/@/api/report-engine/report';
|
|
|
|
const props = defineProps<{
|
|
visible: boolean;
|
|
editId?: number | null;
|
|
businessCode: string;
|
|
reportCode: string;
|
|
reportName: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', val: boolean): void;
|
|
(e: 'confirm'): void;
|
|
}>();
|
|
|
|
const formRef = ref<FormInstance>();
|
|
const saving = ref(false);
|
|
const loading = ref(false);
|
|
const dialogTitle = ref('新增抽取配置');
|
|
|
|
const form = reactive<ExtractConfigSaveData>({
|
|
businessCode: '',
|
|
reportCode: '',
|
|
extractCode: '',
|
|
extractName: '',
|
|
sourceTableName: '',
|
|
sourceTableAlias: '',
|
|
targetTableName: '',
|
|
isEnabled: true,
|
|
extractType: 'INCREMENTAL',
|
|
extractMode: 'DIRECT',
|
|
extractKeyField: '',
|
|
batchSize: 1000,
|
|
status: 'ACTIVE',
|
|
groupByFields: [],
|
|
filterExpression: '',
|
|
operator: '',
|
|
});
|
|
|
|
const rules = {
|
|
extractCode: [{ required: true, message: '请输入抽取编码', trigger: 'blur' }],
|
|
extractName: [{ required: true, message: '请输入抽取名称', trigger: 'blur' }],
|
|
sourceTableName: [{ required: true, message: '请输入源表名', trigger: 'blur' }],
|
|
targetTableName: [{ required: true, message: '请输入目标表名', trigger: 'blur' }],
|
|
extractType: [{ required: true, message: '请选择抽取类型', trigger: 'change' }],
|
|
extractMode: [{ required: true, message: '请选择抽取模式', trigger: 'change' }],
|
|
};
|
|
|
|
const resetForm = () => {
|
|
form.id = undefined;
|
|
form.businessCode = props.businessCode;
|
|
form.reportCode = props.reportCode;
|
|
form.extractCode = '';
|
|
form.extractName = '';
|
|
form.sourceTableName = '';
|
|
form.sourceTableAlias = '';
|
|
form.targetTableName = '';
|
|
form.isEnabled = true;
|
|
form.extractType = 'INCREMENTAL';
|
|
form.extractMode = 'DIRECT';
|
|
form.extractKeyField = '';
|
|
form.batchSize = 1000;
|
|
form.status = 'ACTIVE';
|
|
form.groupByFields = [];
|
|
form.filterExpression = '';
|
|
form.operator = '';
|
|
};
|
|
|
|
watch(
|
|
() => props.visible,
|
|
async (val) => {
|
|
if (val) {
|
|
form.businessCode = props.businessCode;
|
|
form.reportCode = props.reportCode;
|
|
if (props.editId) {
|
|
dialogTitle.value = '编辑抽取配置';
|
|
loading.value = true;
|
|
try {
|
|
const res = await getExtractConfig(props.editId);
|
|
const raw = res.data || {};
|
|
const detail = raw.extractConfig || raw.data || raw;
|
|
form.id = detail.id;
|
|
form.businessCode = detail.businessCode || props.businessCode;
|
|
form.reportCode = detail.reportCode || props.reportCode;
|
|
form.extractCode = detail.extractCode || '';
|
|
form.extractName = detail.extractName || '';
|
|
form.sourceTableName = detail.sourceTableName || '';
|
|
form.sourceTableAlias = detail.sourceTableAlias || '';
|
|
form.targetTableName = detail.targetTableName || '';
|
|
form.isEnabled = detail.isEnabled !== undefined ? detail.isEnabled : true;
|
|
form.extractType = detail.extractType || 'INCREMENTAL';
|
|
form.extractMode = detail.extractMode || 'DIRECT';
|
|
form.extractKeyField = detail.extractKeyField || '';
|
|
form.batchSize = detail.batchSize || 1000;
|
|
form.status = detail.status || 'ACTIVE';
|
|
form.groupByFields = detail.groupByFields || [];
|
|
form.filterExpression = detail.filterExpression || '';
|
|
form.operator = detail.operator || '';
|
|
} catch (_e) {
|
|
ElMessage.error('获取抽取配置详情失败');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
} else {
|
|
dialogTitle.value = '新增抽取配置';
|
|
resetForm();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
const handleCancel = () => {
|
|
emit('update:visible', false);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (!formRef.value) return;
|
|
formRef.value.validate(async (valid) => {
|
|
if (!valid) return;
|
|
saving.value = true;
|
|
try {
|
|
const payload: any = { ...form };
|
|
if (!payload.id) delete payload.id;
|
|
await saveExtractConfig(payload);
|
|
ElMessage.success(props.editId ? '修改成功' : '新增成功');
|
|
emit('update:visible', false);
|
|
emit('confirm');
|
|
} catch (_e) {
|
|
ElMessage.error(props.editId ? '修改失败' : '新增失败');
|
|
} finally {
|
|
saving.value = false;
|
|
}
|
|
});
|
|
};
|
|
</script>
|