部门用户选择器

src/components/bpmnProcessDesigner/package/penal/task/task-components/DeptUserTask.vue

@@ -0,0 +1,253 @@
+<template>
+  <div style="display: flex; align-items: center">
+    <el-popover :show-after="0" :hide-after="0" placement="left" :width="300" trigger="click">
+      <template #reference>
+        <el-button v-if="!userCheck" style="margin-right: 16px">{{deptInfo}}</el-button>
+        <el-button v-if="userCheck" style="margin-right: 16px">选择用户</el-button>
+      </template>
+      <template #default>
+          <el-row :gutter="5">
+            <el-col :span="24">
+              <div>
+                <el-table
+                  :data="DeptList"
+                  row-key="id"
+                  @selection-change="handleSelectionChange"
+                >
+                  <el-table-column
+                    v-if="multipleDeptBox"
+                    type="selection"
+                    reserve-selection
+                  />
+                  <!-- 部门名称列 -->
+                  <el-table-column prop="name" label="部门名称">
+                    <template #default="scope">
+                      <span @click="handleDeptNodeClick(scope.row)">
+                        {{ scope.row.name }}
+                      </span>
+                      <div>
+                        <el-collapse
+                          v-if="userCheck"
+                          class="custom-collapse"
+                          accordion v-model="activeName"
+                        >
+                          <el-collapse-item
+                            class="collapse-item"
+                            @click="handleDeptNodeClick(scope.row)"
+                            :name="scope.row.id.toString()"
+                          >
+                            <el-checkbox-group
+                              v-model="UserId"
+                              v-if="multipleUserBox"
+                              size="large"
+                              @change="updateElementTask"
+                            >
+                              <el-checkbox
+                                style="width: 100%; margin-bottom: 2px"
+                                v-for="city in userOptions"
+                                :key="city['id']"
+                                :value="city['id']"
+                              >
+                                {{ city['nickname'] }}
+                              </el-checkbox>
+                            </el-checkbox-group>
+                            <el-radio-group
+                              v-model="userSingle"
+                              size="large"
+                              v-if="!multipleUserBox"
+                              @change="updateElementTask2"
+                            >
+                              <el-radio
+                                style="width: 100%; margin-bottom: 2px"
+                                v-for="city in userOptions"
+                                :key="city['id']"
+                                :value="city['id']"
+                              >
+                                {{ city['nickname'] }}
+                              </el-radio>
+                            </el-radio-group>
+                          </el-collapse-item>
+                        </el-collapse>
+                      </div>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </el-col>
+          </el-row>
+      </template>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import * as UserApi from "@/api/system/user";
+import * as DeptApi from "@/api/system/dept";
+import {handleTree} from "@/utils/tree";
+
+defineOptions({ name : "DeptUserTask" })
+const emit = defineEmits(['update:dept','update:multiple-dept','update:user','update:multiple-user','change']);
+
+const props = defineProps({
+  /**
+   * 已选用户id组
+   */
+  userIdm: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * 已选用户id单
+   */
+  userIds: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 是否启用部门多选
+   */
+  multipleDeptBox: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 是否启用用户多选
+   */
+  multipleUserBox: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 是否启用用户选择
+   */
+  userCheck: {
+    type: Boolean,
+    default: true,
+  },
+  })
+
+/**
+ * watch,userid,属性
+ * 变化时把值给到.UserId 组
+ */
+watch(() =>props.userIdm,
+  (val:[])=>{
+  UserId.value=val
+})
+/**
+ * watch,userid,属性
+ * 变化时把值给到.UserId 单
+ */
+watch(() =>props.userIds,
+  (val:number)=>{
+    userSingle.value=val
+  })
+
+const multipleDept = ref<number[]>([])//部门id组
+const UserId = ref<number[]>([]);//用户id组
+const userSingle = ref(0)//用户id单选
+const activeName = ref('0')
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const DeptList = ref() // 列表的数据
+const deptInfo = ref('选择部门')//部门信息
+
+const queryParamsDept = reactive({
+  pageNo: 1,
+  pageSize: 100,
+  name: undefined,
+  status: undefined
+})
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  id: undefined,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  deptName: undefined,
+  createTime: []
+})
+
+/** 查询列表 初始化更新一次 再有每次打开列表或者选中部门时更新 */
+const getList = async () => {
+  try {
+    const data = await UserApi.getUserPage(queryParams)
+    const DeptData = await DeptApi.getDeptPage(queryParamsDept)
+    DeptList.value = handleTree(DeptData)
+    userOptions.value = data.list
+  } finally {
+  }
+}
+
+/** 列表点击后获取单部门id数据 并设置部门id到用户搜索数据 然后更新数据到父组件 */
+const handleDeptNodeClick = async (row:any)=> {
+  deptInfo.value = row.name
+  queryParams.deptId = row.id
+  emit('update:dept', row.id);
+  await getList()
+}
+
+/**
+ * 绑定@selection-change事件 把已选择内容数据得到再只拿idpush到multipleDept中
+ * 然后更新给到父组件
+ * @param val
+ */
+const handleSelectionChange = (val: number[]) => {
+  if (!props.multipleDeptBox) {
+    return
+  }
+  multipleDept.value=[]
+  multipleDept.value.push(...val.map((item) => item.id))
+  emit('update:multiple-dept',multipleDept.value)
+}
+
+/** 选中某个 options 时候，更新父组件数据 多选 还有每次触发change事件  */
+const updateElementTask = () => {
+  if (!props.userCheck){
+    return
+  }
+  console.log(UserId.value)
+  emit('update:multiple-user', UserId.value);
+  emit('change')
+}
+
+/** 选中某个 options 时候，更新父组件数据 单选时 还有每次触发change事件 */
+const updateElementTask2 = () => {
+  if (!props.userCheck){
+    return
+  }
+  emit('update:user', userSingle.value);
+  emit('change')
+}
+/** 初始化*/
+onMounted(async () => {
+  //记忆已选用户
+  UserId.value = props.userIdm
+  userSingle.value = props.userIds
+  await getList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+})
+</script>
+
+<style scoped>
+.el-collapse {
+  border: none;/* 设置下拉无边框 */
+}
+
+.el-table {
+  --el-table-row-hover-bg-color: transparent; /* 设置为透明或其他颜色 */
+}
+
+.el-collapse-item__header {
+  font-size: 12px; /* 调整字体大小 */
+  padding: 0 0 0 0; /* 调整内边距，使按钮更紧凑 */
+  height: 20px; /* 设置固定高度 */
+  min-width: 24px; /* 设置最小宽度 */
+  line-height: 1; /* 调整行高 */
+}
+
+</style>

src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue

@@ -66,14 +66,16 @@
     </el-form-item>
     <el-form-item
       v-if="userTaskForm.candidateStrategy == 30"
-      label="指定用户"
+      label="指定部门"
       prop="candidateParam"
       span="24"
     >
-      <el-button
-        @click="drawer = true"
-        style="height: auto; width: auto"
-      >选择用户部门</el-button>
+      <DeptUserTask
+        :user-idm="userTaskForm.candidateParam"
+        :multiple-dept-box="false"
+        v-model:multipleUser="userTaskForm.candidateParam"
+        @change="updateElementTask"
+      />
     </el-form-item>
     <el-form-item
       v-if="userTaskForm.candidateStrategy == 30"
@@ -136,22 +138,6 @@
     </el-form-item>
   </el-form>
 
-  <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 type="primary" @click="cancelClick">确定</el-button>
-      </div>
-    </template>
-  </el-drawer>
 
 </template>
 
@@ -164,15 +150,6 @@ import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import ProcessExpressionDialog from './ProcessExpressionDialog.vue'
-import DeptTree from '@/components/bpmnProcessDesigner/package/penal/task/task-components/DeptTree_Task.vue'
-// import { ElMessageBox } from 'element-plus'
-import type { DrawerProps } from 'element-plus'
-
-const drawer = ref(false)
-const direction = ref<DrawerProps['direction']>('rtl')
-function cancelClick() {
-  drawer.value = false
-}
 
 defineOptions({ name: 'UserTask' })
 const props = defineProps({
@@ -192,31 +169,6 @@ const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  id: undefined,
-  username: undefined,
-  mobile: undefined,
-  status: undefined,
-  deptId: undefined,
-  deptName: undefined,
-  createTime: []
-})
-/** 查询列表 */
-const getList = async () => {
-    try {
-      const data = await UserApi.getUserPage(queryParams)
-      userOptions.value = data.list
-    } finally {
-    }
-  }
-/** 处理部门被点击 */
-const handleDeptNodeClick = async (row) => {
-  console.log('row.id',row)
-  queryParams.deptId = row.id
-  await getList()
-}
 
 const resetTaskForm = () => {
   const businessObject = bpmnElement.value.businessObject