From 3a2ec148f298e5f480f669734d87df40f9af8394 Mon Sep 17 00:00:00 2001
From: gssong <1742057357@qq.com>
Date: Sun, 21 Jan 2024 21:03:22 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E6=B7=BB=E5=8A=A0=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=8A=9E=E7=90=86=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/workflow/task/index.ts                |  13 +
 src/api/workflow/workflowUser/index.ts        |  13 +
 src/components/Process/multiInstance-user.vue |   1 -
 src/components/Process/sys-user.vue           | 292 ++++++++++++++++++
 src/views/workflow/task/allTaskWaiting.vue    |  26 +-
 5 files changed, 343 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Process/sys-user.vue

diff --git a/src/api/workflow/task/index.ts b/src/api/workflow/task/index.ts
index af8ff9e..8d47e63 100644
--- a/src/api/workflow/task/index.ts
+++ b/src/api/workflow/task/index.ts
@@ -153,3 +153,16 @@ export const deleteMultiInstanceExecution = (data: object) => {
     data: data
   });
 };
+
+/**
+ * 修改任务办理人
+ * @param taskIds 
+ * @param userId 
+ * @returns 
+ */
+export const updateAssignee = (taskIds: Array<string>,userId: string) => {
+  return request({
+    url: `/workflow/task/updateAssignee/${taskIds}/${userId}`,
+    method: 'put'
+  });
+};
diff --git a/src/api/workflow/workflowUser/index.ts b/src/api/workflow/workflowUser/index.ts
index bba4e26..e9ee6b5 100644
--- a/src/api/workflow/workflowUser/index.ts
+++ b/src/api/workflow/workflowUser/index.ts
@@ -36,3 +36,16 @@ export const getUserListByIds = (userIdList: Array<any>) => {
     method: 'get'
   });
 };
+
+/**
+ * 分页查询用户
+ * @param query
+ * @returns {*}
+ */
+export const getUserListByPage = (query: object) => {
+  return request({
+    url: '/workflow/user/getUserListByPage',
+    method: 'get',
+    params: query
+  });
+};
diff --git a/src/components/Process/multiInstance-user.vue b/src/components/Process/multiInstance-user.vue
index 71a70db..96fa21f 100644
--- a/src/components/Process/multiInstance-user.vue
+++ b/src/components/Process/multiInstance-user.vue
@@ -48,7 +48,6 @@
               <el-table-column label="用户名称" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" />
               <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
               <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
-
               <el-table-column label="创建时间" align="center" prop="createTime" width="160">
                 <template #default="scope">
                   <span>{{ scope.row.createTime }}</span>
diff --git a/src/components/Process/sys-user.vue b/src/components/Process/sys-user.vue
new file mode 100644
index 0000000..c423352
--- /dev/null
+++ b/src/components/Process/sys-user.vue
@@ -0,0 +1,292 @@
+<template>
+  <el-dialog v-model="visible" draggable :title="title" :width="width" :height="height" append-to-body
+    :close-on-click-modal="false">
+    <div class="p-2">
+      <el-row :gutter="20">
+        <!-- 部门树 -->
+        <el-col :lg="4" :xs="24" style="">
+          <el-card shadow="hover">
+            <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+            <el-tree class="mt-2" ref="deptTreeRef" node-key="id" :data="deptOptions"
+              :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
+              :filter-node-method="filterNode" highlight-current default-expand-all
+              @node-click="handleNodeClick"></el-tree>
+          </el-card>
+        </el-col>
+        <el-col :lg="20" :xs="24">
+          <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+            :leave-active-class="proxy?.animate.searchAnimate.leave">
+            <div class="search" v-show="showSearch">
+              <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+                <el-form-item label="用户名称" prop="userName">
+                  <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
+                    @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="用户昵称" prop="nickName">
+                  <el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable style="width: 240px"
+                    @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="handleQuery" icon="Search">搜索</el-button>
+                  <el-button @click="resetQuery" icon="Refresh">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </transition>
+
+          <el-card shadow="hover">
+            <template #header>
+              <el-row :gutter="10">
+                <right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery" :search="true"></right-toolbar>
+              </el-row>
+            </template>
+
+            <el-table v-loading="loading" :data="userList" ref="multipleTableRef" row-key="userId"
+              @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column label="用户名称" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" />
+              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
+              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
+              <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+                <template #default="scope">
+                  <span>{{ scope.row.createTime }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
+          </el-card>
+          <el-card shadow="hover">
+            <el-tag v-for="(user, index) in chooseUserList" :key="user.userId" style="margin:2px" closable
+              @close="handleCloseTag(user, index)">{{ user.userName }}
+            </el-tag>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="User" lang="ts">
+import { deptTreeSelect } from '@/api/system/user';
+import { getUserListByPage, getUserListByIds } from '@/api/workflow/workflowUser';
+import { UserVO } from '@/api/system/user/types';
+import { DeptVO } from '@/api/system/dept/types';
+import { ComponentInternalInstance } from 'vue';
+import { ElTree, ElTable } from 'element-plus';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const props = defineProps({
+  // 宽
+  width: {
+    type: String,
+    default: '70%'
+  },
+  // 高
+  height: {
+    type: String,
+    default: '100%'
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '用户'
+  },
+  //是否多选
+  multiple: {
+    type: Boolean,
+    default: true
+  },
+  //回显用户id
+  userIdList: {
+    type: Array,
+    default: []
+  }
+});
+const deptTreeRef = ref(ElTree);
+const multipleTableRef = ref(ElTable);
+
+const userList = ref<UserVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const visible = ref(false);
+const total = ref(0);
+const deptName = ref('');
+const deptOptions = ref<DeptVO[]>([]);
+const chooseUserList = ref(ref<UserVO[]>());
+const userIds = ref<Array<number | string>>([]);
+//查询参数
+const queryParams = ref<Record<string, any>>({
+  pageNum: 1,
+  pageSize: 10,
+  userName: undefined,
+  nickName: undefined,
+  deptId: undefined
+});
+/** 查询用户列表 */
+const getUserList = async (userIdList: Array<number | string>) => {
+  deptOptions.value = [];
+  getTreeSelect();
+  userIds.value = userIdList;
+  visible.value = true;
+  loading.value = true;
+  const res = await getUserListByPage(queryParams.value);
+  loading.value = false;
+  userList.value = res.rows;
+  total.value = res.total;
+  if (userList.value && userIds.value.length > 0) {
+    const data = await getUserListByIds(userIds.value);
+    if (data.data && data.data.length > 0) {
+      chooseUserList.value = data.data;
+      data.data.forEach((user: UserVO) => {
+        multipleTableRef.value!.toggleRowSelection(
+          userList.value.find((item) => {
+            return item.userId == user.userId;
+          }),
+          true
+        );
+      });
+    }
+  }
+};
+
+const getList = async () => {
+  loading.value = true;
+  const res = await getUserListByPage(queryParams.value);
+  loading.value = false;
+  userList.value = res.rows;
+  total.value = res.total;
+  if (userList.value && userIds.value.length > 0) {
+    const data = await getUserListByIds(userIds.value);
+    if (data.data && data.data.length > 0) {
+      chooseUserList.value = data.data;
+      data.data.forEach((user: UserVO) => {
+        multipleTableRef.value!.toggleRowSelection(
+          userList.value.find((item) => {
+            return item.userId == user.userId;
+          }),
+          true
+        );
+      });
+    }
+  }
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getUserList(userIds.value);
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value.pageNum = 1;
+  queryParams.value.deptId = undefined;
+  queryParams.value.userName = undefined;
+  queryParams.value.nickName = undefined;
+  deptTreeRef.value.setCurrentKey(null);
+  handleQuery();
+};
+
+/** 选择条数  */
+const handleSelectionChange = (selection: UserVO[]) => {
+  if (props.multiple) {
+    chooseUserList.value = selection.filter((element, index, self) => {
+      return self.findIndex((x) => x.userId === element.userId) === index;
+    });
+    selection.forEach((u) => {
+      if (chooseUserList.value && !chooseUserList.value.includes(u)) {
+        multipleTableRef.value!.toggleRowSelection(u, undefined);
+      }
+    });
+    userIds.value = chooseUserList.value.map((item) => {
+      return item.userId;
+    });
+  } else {
+    chooseUserList.value = selection;
+    if (selection.length > 1) {
+      let delRow = selection.shift();
+      multipleTableRef.value!.toggleRowSelection(delRow, undefined);
+    }
+    if (selection.length === 0) {
+      chooseUserList.value = [];
+    }
+  }
+};
+/** 查询部门下拉树结构 */
+const getTreeSelect = async () => {
+  const res = await deptTreeSelect();
+  deptOptions.value = res.data;
+};
+
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    if (visible.value && deptOptions.value && deptOptions.value.length > 0) {
+      deptTreeRef.value.filter(deptName.value);
+    }
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+/** 节点单击事件 */
+const handleNodeClick = (data: DeptVO) => {
+  queryParams.value.deptId = data.id;
+  getList();
+};
+//删除tag
+const handleCloseTag = (user: UserVO, index: any) => {
+  if (multipleTableRef.value.selection && multipleTableRef.value.selection.length > 0) {
+    multipleTableRef.value.selection.forEach((u: UserVO, i: Number) => {
+      if (user.userId === u.userId) {
+        multipleTableRef.value.selection.splice(i, 1);
+      }
+    });
+  }
+  if (chooseUserList.value && chooseUserList.value.length > 0) {
+    chooseUserList.value.splice(index, 1);
+  }
+  multipleTableRef.value.toggleRowSelection(user, undefined);
+
+  if (userIds.value && userIds.value.length > 0) {
+    userIds.value.forEach((userId, i) => {
+      if (userId === user.userId) {
+        userIds.value.splice(i, 1);
+      }
+    });
+  }
+};
+const submitFileForm = async () => {
+  loading.value =  true
+  emits('submitCallback',chooseUserList);
+}
+const close = async () => {
+  visible.value = false
+  loading.value =  false
+  emits('close');
+}
+//事件
+const emits = defineEmits(['submitCallback','close']);
+
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  getUserList,
+  close
+});
+</script>
\ No newline at end of file
diff --git a/src/views/workflow/task/allTaskWaiting.vue b/src/views/workflow/task/allTaskWaiting.vue
index d5497c4..83d5900 100644
--- a/src/views/workflow/task/allTaskWaiting.vue
+++ b/src/views/workflow/task/allTaskWaiting.vue
@@ -32,6 +32,9 @@
     <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Edit" @click="handleUpdate">修改办理人</el-button>
+          </el-col>
           <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
         </el-row>
       </template>
@@ -98,14 +101,17 @@
     <submitVerify ref="submitVerifyRef" :task-id="taskId" @submit-callback="handleQuery" />
     <!-- 加签组件 -->
     <multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback="handleQuery" />
+    <!-- 加签组件 -->
+    <SysUser ref="sysUserRef" :multiple="false" @submit-callback="submitCallback" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { getAllTaskWaitByPage, getAllTaskFinishByPage } from '@/api/workflow/task';
+import { getAllTaskWaitByPage, getAllTaskFinishByPage, updateAssignee } from '@/api/workflow/task';
 import ApprovalRecord from '@/components/Process/approvalRecord.vue';
 import SubmitVerify from '@/components/Process/submitVerify.vue';
 import MultiInstanceUser from '@/components/Process/multiInstance-user.vue';
+import SysUser from '@/components/Process/sys-user.vue';
 import { TaskQuery, TaskVO } from '@/api/workflow/task/types';
 //提交组件
 const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
@@ -113,6 +119,9 @@ const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
 const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
 //加签组件
 const multiInstanceUserRef = ref<InstanceType<typeof MultiInstanceUser>>();
+//选人组件
+const sysUserRef = ref<InstanceType<typeof SysUser>>();
+
 const queryFormRef = ref<ElFormInstance>();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 // 遮罩层
@@ -210,4 +219,19 @@ const getFinishList = () => {
     loading.value = false;
   });
 };
+const handleUpdate = () => {
+  if (sysUserRef.value) {
+    sysUserRef.value.getUserList([]);
+  }
+};
+//修改办理人
+const submitCallback = (data) => {
+  if(data && data.value.length > 0){
+    updateAssignee(ids.value,data.value[0].userId).then((resp) => {
+      sysUserRef.value.close();
+      proxy?.$modal.msgSuccess('操作成功');
+      handleQuery()
+    });
+  }
+};
 </script>