<script lang="ts" setup name="RelateDept"> import { defineExpose, onMounted, reactive, ref } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import { relatedDept } from '@/api/system/tenant' import DeptSelect from '@/components/DeptSelect/index.vue' const emits = defineEmits(['watchChild']) const dataFormRef = ref(null) as any const dialogFormVisible = ref(false) // 对话框显示隐藏 const deptShowTop = ref(false) // 表单内容 const dataForm = ref({ tenantId: '', deptId: '', }) // 表单校验规则 const rules = { deptId: [{ required: true, message: ' 组织机构必选', trigger: ['blur', 'change'] }], } // 重置表单 const resetForm = () => { dataForm.value = { tenantId: '', deptId: '', } } // 父子组件通信 const initDialog = (row: any) => { dialogFormVisible.value = true if (row) { dataForm.value = { tenantId: row.id, deptId: row.deptId, } } } defineExpose({ initDialog, }) // 保存数据 const saveData = () => { dataFormRef.value.validate((valid: any) => { if (valid) { relatedDept(dataForm).then((res) => { if (res.code === 200) { ElMessage({ message: '绑定成功', type: 'success', }) emits('watchChild') dialogFormVisible.value = false } }) } }) } </script> <template> <el-dialog v-model:visible="dialogFormVisible" append-to-body title="绑定组织"> <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-width="100px" label-well-code="right" > <el-row :gutter="20"> <el-col :span="24"> <el-form-item label="绑定组织" prop="deptId"> <DeptSelect v-model="dataForm.deptId" :need-top="deptShowTop" dept-type="03" placeholder="选择组织机构" /> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="saveData"> 保存 </el-button> <el-button @click="dialogFormVisible = false"> 取消 </el-button> </div> </template> </el-dialog> </template> <style> .el-select__tags { flex-wrap: inherit !important; overflow-x: auto !important; } ::-webkit-scrollbar { height: 4px; } /* //滚动条的滑块 */ ::-webkit-scrollbar-thumb { background-color: #eaecf1; border-radius: 3px; } </style>