From 7cb0d9e84ed1e2f36ca8b7791543ae207caec6e0 Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:33:17 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=94=A8=E6=88=B7=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userSelector/UserSelector.vue | 244 +++++++++++++++++++
 1 file changed, 244 insertions(+)
 create mode 100644 src/components/userSelector/UserSelector.vue

diff --git a/src/components/userSelector/UserSelector.vue b/src/components/userSelector/UserSelector.vue
new file mode 100644
index 0000000..7830427
--- /dev/null
+++ b/src/components/userSelector/UserSelector.vue
@@ -0,0 +1,244 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 80%">
+
+    <el-row :gutter="20">
+      <!-- 左侧部门树 -->
+      <el-col :span="4" :xs="24">
+        <ContentWrap class="h-1/1">
+          <DeptTree @node-click="handleDeptNodeClick" />
+        </ContentWrap>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <!-- 搜索 -->
+        <ContentWrap>
+          <el-form
+            class="-mb-15px"
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="用户名称" prop="username">
+              <el-input
+                v-model="queryParams.username"
+                placeholder="请输入用户名称"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="手机号码" prop="mobile">
+              <el-input
+                v-model="queryParams.mobile"
+                placeholder="请输入手机号码"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="用户状态"
+                clearable
+                class="!w-240px"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间" prop="createTime">
+              <el-date-picker
+                v-model="queryParams.createTime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="datetimerange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+              <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+            </el-form-item>
+          </el-form>
+        </ContentWrap>
+        <ContentWrap>
+          <el-table
+            v-loading="loading"
+            :data="list"
+            :highlight-current-row="props.singleSelect"
+            @current-change="handleCurrentChange"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column v-if="!props.singleSelect" type="selection" width="50" />
+            <el-table-column label="用户编号" align="center" key="id" prop="id" />
+            <el-table-column
+              label="用户名称"
+              align="center"
+              prop="username"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="用户昵称"
+              align="center"
+              prop="nickname"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="部门"
+              align="center"
+              key="deptName"
+              prop="deptName"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
+            <el-table-column
+              label="创建时间"
+              align="center"
+              prop="createTime"
+              :formatter="dateFormatter"
+              width="180"
+            />
+          </el-table>
+          <Pagination
+            :total="total"
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </ContentWrap>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button type="primary" @click="submit()">确定</el-button>
+      <el-button @click="dialogVisible=false">取消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import DeptTree from "@/views/system/user/DeptTree.vue";
+import * as UserApi from "@/api/system/user";
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import {dateFormatter} from "@/utils/formatTime";
+
+defineOptions({ name: 'UserSelector' })
+/*定义事件*/
+const emit = defineEmits(['change', 'update:singleUser', 'update:multiUser','update:index']);
+
+
+//接受父组件参数
+const props = defineProps({
+  // 单选true多选false
+  singleSelect: {
+    required: true,
+    type: Boolean,
+    default: true
+  },
+})
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 处理部门被点击 */
+const handleDeptNodeClick = async (row) => {
+  queryParams.deptId = row.id
+  await getList()
+}
+//定义数据模型
+interface User {
+  id:number,
+}
+const singleUser = ref()
+const multiUser = ref([])
+/** 处理单选数据 */
+const handleCurrentChange = async (val: any | undefined)=>{
+  restForm()
+  singleUser.value = val.id
+}
+/** 处理多选数据 */
+const handleSelectionChange = async (val: any | undefined)=>{
+  restForm()
+  for (let item of val){
+    multiUser.value.push(item.id)
+  }
+}
+
+/** 确定时,判断一下singleSelect参数,单选就传递单选,多选就传递多选,最后change */
+const submit = ()=>{
+  if (props.singleSelect){
+    emit('update:singleUser',singleUser.value)
+  }else if (!props.singleSelect){
+    emit('update:multiUser',multiUser.value)
+  }
+  if (uIndex.value!==null){
+    emit('update:index',uIndex.value)
+  }
+  emit('change')
+  dialogVisible.value = false
+}
+
+const restForm = ()=>{
+  singleUser.value={
+    id:0,
+  }
+  multiUser.value=[]
+}
+const uIndex = ref(null)
+/** open方法 */
+const open = async (index?:any)=>{
+  uIndex.value=index
+  dialogVisible.value=true;
+  dialogTitle.value='选择用户'
+  loading.value=true
+  restForm()
+  try {
+    await getList()
+  } finally {
+    loading.value=false
+  }
+}
+defineExpose({ open })
+</script>

From 5a429f6af16500b6ae56bc7365ff10cd0746933c Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Tue, 26 Nov 2024 12:02:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=A1=E6=89=B9=E6=B5=81=E7=A8=8B=201.?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E6=93=8D=E4=BD=9C=E5=90=8E=E9=80=80=E5=9B=9E?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=AA=E8=B7=AF=E7=94=B1=E4=BF=AE=E6=94=B9=202.?=
 =?UTF-8?q?=E6=8A=84=E5=BD=95=E4=BA=BA=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E4=BF=AE=E6=94=B9=203.=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=9B=BE=E6=97=A0=E8=A1=A8=E5=A4=B4=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/detail/index.vue      | 79 +++++++++++++++----
 1 file changed, 65 insertions(+), 14 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index b72b11e..bc7482c 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -24,7 +24,7 @@
       </el-tab-pane>
       <el-tab-pane label="流程图" name="flowChart">
         <!-- 高亮流程图 -->
-        <ProcessInstanceBpmnViewer
+        <ProcessInstanceBpmnViewerNoHeader
           :id="`${id}`"
           :bpmn-xml="bpmnXml"
           :loading="processInstanceLoading"
@@ -90,14 +90,25 @@
                 />
               </el-form-item>
               <el-form-item label="抄送人" prop="copyUserIds">
-                <el-select v-model="auditForms[index].copyUserIds" multiple placeholder="请选择抄送人">
-                  <el-option
-                    v-for="item in userOptions"
-                    :key="item.id"
-                    :label="item.nickname"
-                    :value="item.id"
-                  />
-                </el-select>
+                <el-row style="width: 100%;">
+                  <el-col :span="22">
+                    <el-select v-model="auditForms[index].copyUserIds" multiple placeholder="请选择抄送人"
+                               disabled>
+                      <el-option
+                        v-for="item in userOptions"
+                        :key="item.id"
+                        :label="item.nickname"
+                        :value="item.id"
+                        disabled
+                      />
+                    </el-select>
+                  </el-col>
+                  <el-col :span="2">
+                    <el-button @click="openForm(index)" size="small" type="text">
+                      <Icon icon="ep:plus" />
+                    </el-button>
+                  </el-col>
+                </el-row>
               </el-form-item>
             </el-form>
             <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
@@ -131,13 +142,22 @@
       </el-tab-pane>
     </el-tabs>
     <!-- 弹窗：转派审批人 -->
-    <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
+    <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" @back-view="backView" />
     <!-- 弹窗：回退节点 -->
-    <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
+    <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" @back-view="backView" />
     <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
+    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" @back-view="backView" />
     <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-    <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
+    <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" @back-view="backView" />
+    <!-- 弹窗: 更方便的选择用户单选或多选 -->
+    <UserSelector
+      ref="userSelectorForm"
+      v-model:single-user="singleUser"
+      v-model:multi-user="multiUser"
+      v-model:index="Index"
+      :single-select="sSelect"
+      @change="changeUserId"
+    />
   </ContentWrap>
 </template>
 <script lang="ts" setup>
@@ -147,7 +167,7 @@ import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
-import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceBpmnViewerNoHeader from './ProcessInstanceBpmnViewerNoHeader.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import TaskReturnForm from './dialog/TaskReturnForm.vue'
 import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
@@ -158,6 +178,8 @@ import { isEmpty } from '@/utils/is'
 import * as UserApi from '@/api/system/user'
 import {TabsPaneContext} from "element-plus";
 import { FormProcessMappingApi} from '@/api/bpm/formprocessmapping'
+import {useTagsViewStore} from "@/store/modules/tagsView";
+import UserSelector from "@/components/userSelector/UserSelector.vue";
 import { ProcessInstanceTodoApi, ProcessInstanceTodoVO } from '@/api/bpm/processinstancetodo'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
@@ -166,6 +188,8 @@ const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
 
+const { delView } = useTagsViewStore()//视图操作
+const { currentRoute, back } = useRouter()
 const userId = useUserStore().getUser.id // 当前登录的编号
 const id = query.id as unknown as string // 流程实例的编号
 const processInstanceLoading = ref(false) // 流程实例的加载中
@@ -177,6 +201,26 @@ const tasks = ref<any[]>([]) // 任务列表
 const runningTasks = ref<any[]>([]) // 运行中的任务
 const auditForms = ref<any[]>([]) // 审批任务的表单
 
+const sSelect = ref(false)//是否开启单选true单选false多选
+const Index = ref()//接受索引
+const singleUser = ref()//接受单选值
+const multiUser = ref([])//接受多选值
+
+/** 添加/修改操作 */
+const userSelectorForm = ref()
+const openForm = (index:any) => {
+  userSelectorForm.value.open(index)
+}
+/** 数据变化后的处理 */
+const changeUserId = ()=>{
+  if (sSelect.value){
+    auditForms.value[Index.value].copyUserIds = [singleUser.value]
+  }else if (!sSelect.value){
+    auditForms.value[Index.value].copyUserIds = multiUser.value
+    //multiUser.value.map(user => user.id);
+  }
+}
+
 const handleClick = (tab: TabsPaneContext) => {
   if (tab.props.name==="flowChart"){
     getProcessInstance()
@@ -243,6 +287,13 @@ const handleAudit = async (task, pass) => {
   }
   // 2.2 加载最新数据
   getDetail()
+  delView(unref(currentRoute))
+  back()
+}
+//关闭当前标签回到上个标签
+const backView = ()=>{
+  delView(unref(currentRoute))
+  back()
 }
 
 /** 转派审批人 */