97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
import { cloneDeep } from '@vben/utils'
|
||
|
|
import { useVbenModal } from '@vben/common-ui'
|
||
|
|
import { useVbenForm } from '#/adapter/form'
|
||
|
|
import { queryByUnitId } from '#/api/property/floor'
|
||
|
|
import { message } from 'ant-design-vue'
|
||
|
|
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup'
|
||
|
|
|
||
|
|
const dataForm = ref<any>()
|
||
|
|
const floorArr = ref<any[]>([])
|
||
|
|
const title = ref('楼层授权')
|
||
|
|
|
||
|
|
const [BasicModal, modalApi] = useVbenModal({
|
||
|
|
// 在这里更改宽度
|
||
|
|
class: 'w-[700px]',
|
||
|
|
fullscreenButton: false,
|
||
|
|
onClosed: handleClosed,
|
||
|
|
onConfirm: handleConfirm,
|
||
|
|
onOpened: () => {
|
||
|
|
dataForm.value = modalApi.getData()
|
||
|
|
const { unitId } = modalApi.getData()
|
||
|
|
queryByUnitId(unitId).then((res) => {
|
||
|
|
const arr: any[] = []
|
||
|
|
res.forEach((item) => {
|
||
|
|
arr.push({
|
||
|
|
label: item.floorName,
|
||
|
|
value: item.id,
|
||
|
|
})
|
||
|
|
})
|
||
|
|
floorArr.value = arr
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const [BasicForm, formApi] = useVbenForm({
|
||
|
|
// 所有表单项共用，可单独在表单内覆盖
|
||
|
|
commonConfig: {
|
||
|
|
// 默认占满两列
|
||
|
|
formItemClass: 'col-span-1',
|
||
|
|
// 所有表单项
|
||
|
|
componentProps: {
|
||
|
|
class: 'w-full',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
layout: 'horizontal',
|
||
|
|
schema: [
|
||
|
|
{
|
||
|
|
component: 'CheckboxGroup',
|
||
|
|
componentProps: {
|
||
|
|
name: 'cname',
|
||
|
|
options: floorArr,
|
||
|
|
},
|
||
|
|
fieldName: 'checkboxGroup',
|
||
|
|
label: '楼层'
|
||
|
|
}],
|
||
|
|
wrapperClass: 'grid-cols-1',
|
||
|
|
showDefaultActions: false
|
||
|
|
})
|
||
|
|
|
||
|
|
// formApi.updateSchema(
|
||
|
|
// [
|
||
|
|
// {
|
||
|
|
// componentProps: {
|
||
|
|
// options: floorArr,
|
||
|
|
// },
|
||
|
|
// fieldName: 'checkboxGroup',
|
||
|
|
// },
|
||
|
|
// ])
|
||
|
|
|
||
|
|
const { resetInitialized } = useBeforeCloseDiff(
|
||
|
|
{
|
||
|
|
initializedGetter: defaultFormValueGetter(formApi),
|
||
|
|
currentGetter: defaultFormValueGetter(formApi),
|
||
|
|
},
|
||
|
|
)
|
||
|
|
async function handleConfirm() {
|
||
|
|
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||
|
|
const data = cloneDeep(await formApi.getValues())
|
||
|
|
console.log(data)
|
||
|
|
console.log(dataForm.value.elevatorId)
|
||
|
|
modalApi.close()
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleClosed() {
|
||
|
|
await formApi.resetForm()
|
||
|
|
resetInitialized()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<BasicModal :title="title">
|
||
|
|
<BasicForm />
|
||
|
|
</BasicModal>
|
||
|
|
</template>
|