7 changed files with 175 additions and 4 deletions
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<el-dialog v-model="dialogVisible" title="套餐分配" width="500px" append-to-body> |
||||
|
<el-form ref="allocateFormRef" :model="formData" :rules="rules" label-width="100px"> |
||||
|
<el-form-item label="选择代理" prop="agentId"> |
||||
|
<el-select v-model="formData.agentId" placeholder="请选择代理" style="width: 100%"> |
||||
|
<el-option v-for="item in agentOptions" :key="item.id" :label="item.agentName" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button type="primary" @click="submitForm">分配</el-button> |
||||
|
<el-button @click="cancel">取消</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { getAllAgentNameList, allocatePackages } from '@/api/im/chatPackage'; |
||||
|
import { nextTick } from 'vue'; |
||||
|
|
||||
|
interface Emits { |
||||
|
(e: 'success'): void; |
||||
|
(e: 'close'): void; |
||||
|
} |
||||
|
|
||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
||||
|
|
||||
|
const emit = defineEmits<Emits>(); |
||||
|
|
||||
|
interface Props { |
||||
|
packageId?: number; |
||||
|
} |
||||
|
|
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
packageId: undefined |
||||
|
}); |
||||
|
|
||||
|
const dialogVisible = ref(false); |
||||
|
const allocateFormRef = ref(); |
||||
|
const agentOptions = ref([]); |
||||
|
const formData = ref({ |
||||
|
agentId: undefined, |
||||
|
packageId: undefined |
||||
|
}); |
||||
|
const rules = { |
||||
|
agentId: [{ required: true, message: '请选择代理', trigger: 'change' }] |
||||
|
}; |
||||
|
|
||||
|
const openDialog = async () => { |
||||
|
dialogVisible.value = true; |
||||
|
// 等待组件渲染完成后再清空表单 |
||||
|
await nextTick(); |
||||
|
resetForm(); |
||||
|
await loadAgentOptions(); |
||||
|
}; |
||||
|
|
||||
|
const loadAgentOptions = async () => { |
||||
|
try { |
||||
|
const res = await getAllAgentNameList(); |
||||
|
agentOptions.value = res.data || []; |
||||
|
} catch (error) { |
||||
|
console.error('加载代理列表失败:', error); |
||||
|
proxy?.$modal.msgError('加载代理列表失败'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const resetForm = () => { |
||||
|
allocateFormRef.value?.resetFields(); |
||||
|
formData.value = { |
||||
|
agentId: undefined, |
||||
|
packageId: props.packageId |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
const submitForm = async () => { |
||||
|
allocateFormRef.value?.validate(async (valid: boolean) => { |
||||
|
if (valid) { |
||||
|
try { |
||||
|
const params = { |
||||
|
agentId: formData.value.agentId, |
||||
|
packageId: props.packageId |
||||
|
}; |
||||
|
|
||||
|
await allocatePackages(params); |
||||
|
proxy?.$modal.msgSuccess('分配成功'); |
||||
|
dialogVisible.value = false; |
||||
|
emit('success'); |
||||
|
} catch (error) { |
||||
|
console.error('分配失败:', error); |
||||
|
proxy?.$modal.msgError('分配失败'); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const cancel = () => { |
||||
|
dialogVisible.value = false; |
||||
|
emit('close'); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
openDialog |
||||
|
}); |
||||
|
</script> |
||||
Loading…
Reference in new issue