5 changed files with 160 additions and 12 deletions
@ -0,0 +1,112 @@ |
|||
<template> |
|||
<Dialog :title="dialogTitle" v-model="dialogVisible" :scroll="true"> |
|||
<el-form |
|||
ref="formRef" |
|||
:model="formData" |
|||
:rules="formRules" |
|||
|
|||
v-loading="formLoading" |
|||
> |
|||
<el-form-item label="租户" prop="tenantId"> |
|||
<el-select v-model="formData.tenantId" clearable placeholder="请选择租户"> |
|||
<el-option |
|||
v-for="person in TenantList" |
|||
:key="person.id" |
|||
:label="person.name" |
|||
:value="person.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
{{ formData }} |
|||
<template #footer> |
|||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { HandDetectorApi, HandDetector, DataMigrateParams } from '@/api/gas/handdetector' |
|||
import { getTenantList, TenantVO } from '@/api/system/tenant' |
|||
|
|||
/** GAS手持探测器 表单 */ |
|||
defineOptions({ name: 'DataMigrateForm' }) |
|||
|
|||
const { t } = useI18n() // 国际化 |
|||
const message = useMessage() // 消息弹窗 |
|||
|
|||
const dialogVisible = ref(false) // 弹窗的是否展示 |
|||
const dialogTitle = ref('') // 弹窗的标题 |
|||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
|||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
|||
const props = defineProps({ |
|||
// ids: { |
|||
// type: Array as PropType<number[]>, |
|||
// required: true |
|||
// } |
|||
}) |
|||
const formData = ref<DataMigrateParams>({ |
|||
idList: [], |
|||
tenantId: undefined |
|||
}) |
|||
const formRules = reactive({ |
|||
idList: [{ required: true, message: '请选择手持探测器', trigger: 'blur' }], |
|||
tenantId: [{ required: true, message: '请选择租户', trigger: 'blur' }] |
|||
}) |
|||
const formRef = ref() // 表单 Ref |
|||
|
|||
/** 打开弹窗 */ |
|||
const open = async (type: string, idList?: number[]) => { |
|||
dialogVisible.value = true |
|||
dialogTitle.value ='数据迁移到租户' |
|||
formType.value = type |
|||
|
|||
resetForm() |
|||
// 获取所有租户 |
|||
getTenantListFn() |
|||
if (idList && idList.length) { |
|||
formData.value.idList = idList |
|||
} |
|||
} |
|||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
|||
|
|||
const TenantList = ref<TenantVO[]>([]) |
|||
|
|||
// 获取所有租户 |
|||
function getTenantListFn() { |
|||
getTenantList().then((data) => { |
|||
TenantList.value = data || [] |
|||
}) |
|||
} |
|||
|
|||
/** 提交表单 */ |
|||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
|||
const submitForm = async () => { |
|||
// 校验表单 |
|||
await formRef.value.validate() |
|||
// 提交请求 |
|||
formLoading.value = true |
|||
try { |
|||
const data = formData.value |
|||
// data.fenceIds = data.fenceIdsArray?.join(',') |
|||
|
|||
await HandDetectorApi.dataMigrate(data) |
|||
message.success(t('common.createSuccess')) |
|||
|
|||
dialogVisible.value = false |
|||
// 发送操作成功的事件 |
|||
emit('success') |
|||
} finally { |
|||
formLoading.value = false |
|||
} |
|||
} |
|||
|
|||
/** 重置表单 */ |
|||
const resetForm = () => { |
|||
formData.value = { |
|||
idList: [], |
|||
tenantId: undefined |
|||
} |
|||
formRef.value?.resetFields() |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue