96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<template>
|
|
<el-dialog :title="dialogTitle" :model-value="visible" width="480px" :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="100px">
|
|
<el-form-item label="业务编码" prop="businessCode">
|
|
<el-input
|
|
v-model="form.businessCode"
|
|
placeholder="请输入业务编码，如 KUAISHOU"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="业务名称" prop="businessName">
|
|
<el-input v-model="form.businessName" placeholder="请输入业务名称，如 快手电商" />
|
|
</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: 'reportEngineBusinessManager' };
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { FormInstance } from 'element-plus';
|
|
|
|
const props = defineProps<{
|
|
visible: boolean;
|
|
editData?: { id?: number; businessCode: string; businessName: string } | null;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', val: boolean): void;
|
|
(e: 'confirm', data: { id?: number; businessCode: string; businessName: string }): void;
|
|
}>();
|
|
|
|
const formRef = ref<FormInstance>();
|
|
const saving = ref(false);
|
|
|
|
const form = reactive({
|
|
id: undefined as number | undefined,
|
|
businessCode: '',
|
|
businessName: '',
|
|
});
|
|
|
|
const rules = {
|
|
businessCode: [{ required: true, message: '请输入业务编码', trigger: 'blur' }],
|
|
businessName: [{ required: true, message: '请输入业务名称', trigger: 'blur' }],
|
|
};
|
|
|
|
const dialogTitle = ref('新增业务');
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(val) => {
|
|
if (val) {
|
|
if (props.editData) {
|
|
form.id = props.editData.id;
|
|
form.businessCode = props.editData.businessCode;
|
|
form.businessName = props.editData.businessName;
|
|
dialogTitle.value = '编辑业务';
|
|
} else {
|
|
form.id = undefined;
|
|
form.businessCode = '';
|
|
form.businessName = '';
|
|
dialogTitle.value = '新增业务';
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
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: { id?: number; businessCode: string; businessName: string } = {
|
|
businessCode: form.businessCode,
|
|
businessName: form.businessName,
|
|
};
|
|
if (form.id) payload.id = form.id;
|
|
emit('confirm', payload);
|
|
} finally {
|
|
saving.value = false;
|
|
}
|
|
});
|
|
};
|
|
</script>
|