feat: 开始审批新增头像展示

src/components/FlowUserSelect/index.vue

@@ -0,0 +1,124 @@
+<template>
+	<el-dialog v-model="dialogVisible" title="人员选择" :width="680" destroy-on-close append-to-body @closed="emit('closed')">
+		<div class="sc-user-select">
+			<div class="sc-user-select__left">
+				<div class="sc-user-select__search">
+					<el-input v-model="keyword" prefix-icon="Search" placeholder="搜索成员">
+						<template #append>
+							<el-button icon="Search" @click="search"></el-button>
+						</template>
+					</el-input>
+				</div>
+				<div class="sc-user-select__select">
+					<div v-loading="showGrouploading" class="sc-user-select__tree">
+						<el-scrollbar>
+							<el-tree
+								ref="groupTree"
+								class="menu"
+								:data="group"
+								:node-key="groupProps.key"
+								:props="groupProps"
+								highlight-current
+								:expand-on-click-node="false"
+								:current-node-key="groupId"
+								@node-click="groupClick"
+							/>
+						</el-scrollbar>
+					</div>
+					<div v-loading="showUserloading" class="sc-user-select__user">
+						<div class="sc-user-select__user__list">
+							<el-scrollbar ref="userScrollbar">
+								<el-tree
+									ref="userTree"
+									class="menu"
+									:data="user"
+									:node-key="userProps.key"
+									:props="userProps"
+									:default-checked-keys="selectedIds"
+									show-checkbox
+									check-on-click-node
+									@check-change="userClick"
+								></el-tree>
+							</el-scrollbar>
+						</div>
+						<footer>
+							<el-pagination
+								v-model:currentPage="currentPage"
+								background
+								layout="prev,next"
+								small
+								:total="total"
+								:page-size="pageSize"
+								@current-change="paginationChange"
+							></el-pagination>
+						</footer>
+					</div>
+				</div>
+			</div>
+			<div class="sc-user-select__toicon">
+				<el-icon><arrow-right /></el-icon>
+			</div>
+			<div class="sc-user-select__selected">
+				<header>已选 ({{ selected.length }})</header>
+				<ul style="margin: 0; padding: 0">
+					<el-scrollbar>
+						<li v-for="(item, index) in selected" :key="item.id">
+							<span class="name">
+								<el-avatar size="small">{{ item.name.substring(0, 1) }}</el-avatar>
+								<label>{{ item.name }}</label>
+							</span>
+							<span class="delete">
+								<el-button type="danger" icon="Delete" circle size="small" @click="deleteSelected(index)" />
+							</span>
+						</li>
+					</el-scrollbar>
+				</ul>
+			</div>
+		</div>
+
+		<template #footer>
+			<el-button @click="dialogVisible = false">取 消</el-button>
+			<el-button type="primary" @click="save">确 认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['closed'])
+
+const groupTreeRef = ref()
+
+const dialogVisible = ref(false)
+const keyword = ref('')
+const groupId = ref('')
+const currentPage = ref(1)
+const showUserloading = ref(false)
+
+const search = () => {
+	groupId.value = ''
+	groupTreeRef.value.setCurrentKey(groupId.value)
+	currentPage.value = 1
+	getUser()
+}
+
+const  getUser = () =>{
+			this.showUserloading = true
+			var params = {
+				data: {
+					keyword: this.keyword || null,
+					departmentId: this.groupId || null
+				},
+				page: this.currentPage,
+				pageSize: this.pageSize
+			}
+			var res = await user.userPageApi(params)
+			this.showUserloading = false
+			this.user = res.records
+			this.total = res.total || 0
+			this.$refs.userScrollbar.setScrollTop(0)
+		}
+</script>
+
+<style scoped lang="scss"></style>

src/views/approve/launch/ItemDrawer.vue

@@ -4,7 +4,7 @@
 		<div class="info-wrap">
 			<FormCreate class="form-wrap" :option="formOption" :rule="formRule" />
 			<el-timeline class="timeline-wrap">
-				<el-timeline-item v-for="(v, index) in processTimelineList" :key="index" :timestamp="v.local_name">
+				<el-timeline-item v-for="(v, index) in processTimelineList" :key="index">
 					<template v-if="v.conditionNode === 1">
 						<el-radio-group v-model="processChecked[v.name]" size="small">
 							<el-radio-button v-for="c of v.conditionNodeList" :key="c.name" :label="c.name" />
@@ -12,17 +12,26 @@
 					</template>
 					<template v-else>
 						{{ v.name }}
+						<!-- {{ v.local_name }} -->
+						<div style="display: flex; align-items: center; gap: 6px">
+							<el-button :icon="Plus" style="width: 32px" @click="selectHandler" />
+							<FlowNodeAvatar v-for="(item, index) in userList" id="1" :key="index" style="margin-top: 5px" />
+						</div>
 					</template>
 				</el-timeline-item>
 			</el-timeline>
 		</div>
 	</el-drawer>
+	<use-select ref="useSelectRef"></use-select>
 </template>
 <script setup lang="ts">
 import model from '@/api/flow/process'
 import viewForm from '@/utils/form'
-import { ref, shallowRef, computed, reactive } from 'vue'
+import { ref, inject, shallowRef, computed, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import UseSelect from '@/components/scWorkflow/select.vue'
+import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 type Props = {
 	modelValue: boolean
 	record: { processId: string; [key: string]: any }
@@ -36,6 +45,11 @@ const emit = defineEmits<{
 	update: [value: string]
 }>()
 const updateModelValue = (bool: boolean) => emit('update:modelValue', bool)
+const userList = ref([])
+const useSelectRef = ref()
+const selectHandler = () => {
+	useSelectRef.value.open(1, userList.value)
+}
 const FormCreate = viewForm.$form()
 const formOption = ref({
 	// resetBtn: { show: true },