7 changed files with 120 additions and 11 deletions
@ -0,0 +1,94 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%"> |
|||
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="业主选择" name="deptId"> |
|||
<a-select |
|||
v-model:value="form.deptId" |
|||
:options="deptOptions" |
|||
placeholder="请选择" |
|||
:fieldNames="{ |
|||
label: 'deptName', |
|||
value: 'deptId', |
|||
options: 'options', |
|||
}" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
import { getOwnerList,bindUnit } from './api'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { getToken } from '@/utils/auth'; |
|||
import { useGlobSetting } from '@/hooks/setting'; |
|||
export default { |
|||
setup(props, { emit }) { |
|||
const title = ref('绑定业主'); |
|||
const formRef = ref(); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
deptId: '', |
|||
projectId: null, |
|||
}); |
|||
//下拉框 |
|||
const deptOptions = ref([]); |
|||
const getOptions = async () => { |
|||
const res = await getOwnerList(); |
|||
deptOptions.value = res; |
|||
}; |
|||
|
|||
const showModal = async (id) => { |
|||
visible.value = true; |
|||
form.projectId = id |
|||
getOptions(); |
|||
}; |
|||
const rules = { |
|||
deptId: [{ required: true, message: '请输入' }], |
|||
}; |
|||
const handleOk = () => { |
|||
formRef.value.validate().then((valid) => { |
|||
if (valid) { |
|||
let params = {}; |
|||
for (let i in form) { |
|||
params[i] = form[i]; |
|||
} |
|||
bindUnit(params).then((_) => { |
|||
message.success('绑定成功'); |
|||
emit('success'); |
|||
closeModal(); |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
const closeModal = () => { |
|||
formRef.value.resetFields(); |
|||
visible.value = false; |
|||
}; |
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
formRef, |
|||
closeModal, |
|||
rules, |
|||
deptOptions |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
Loading…
Reference in new issue