用户分组页面部门选择优化

src/views/bpm/group/UserGroupForm.vue

@@ -14,7 +14,7 @@
         <el-input v-model="formData.description" placeholder="请输入描述" type="textarea" />
       </el-form-item>
       <el-form-item label="部门">
-        <DeptTree @node-click="handleDeptNodeClick" />
+        <el-input v-model="input" placeholder="选择部门" @click="drawer = true"/>
       </el-form-item>
       <el-form-item label="成员" prop="userIds">
         <el-select v-model="formData.userIds" multiple placeholder="请选择成员">
@@ -43,6 +43,26 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+
+  <el-drawer v-model="drawer" :direction="direction">
+    <template #header>
+        <h2>部门选择</h2>
+    </template>
+    <template #default>
+      <el-divider border-style="dashed" />
+      <div>
+        <DeptTree @node-click="handleDeptNodeClick" />
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="cancelClick">取消</el-button>
+        <el-button type="primary" @click="confirmClick">确认</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+
 </template>
 <script lang="ts" setup>
 import DeptTree from '@/views/bpm/group/DeptTree_Group.vue'
@@ -50,12 +70,30 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import * as UserApi from '@/api/system/user'
+import { ElMessageBox } from 'element-plus'
+import type { DrawerProps } from 'element-plus'
 
 defineOptions({ name: 'UserGroupForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const input = ref('')
+const drawer = ref(false)
+const direction = ref<DrawerProps['direction']>('rtl')
+function cancelClick() {
+  drawer.value = false
+}
+function confirmClick() {
+  ElMessageBox.confirm(`你选择好了吗?`)
+    .then(() => {
+      drawer.value = false
+    })
+    .catch(() => {
+      // catch error
+    })
+}
+
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -92,6 +130,7 @@ const getList = async () => {
   try {
     const data = await UserApi.getUserPage(queryParams)
     userList.value = data.list
+    input.value = data.list[0].deptName
     // console.log('userList',userList.value)
   } finally {
   }