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