feat: 人员选择 选中值 支持排序调整

src/components/scWorkflow/select.vue

@@ -3,7 +3,7 @@
 		v-model="dialogVisible"
 		class="le-dialog"
 		:title="curTitle"
-		:width="[1, 5].indexOf(type) !== -1 ? 680 : 460"
+		:width="[1, 5].indexOf(type) !== -1 ? 720 : 500"
 		destroy-on-close
 		append-to-body
 		@closed="$emit('closed')"
@@ -73,10 +73,12 @@
 						<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>
+									<el-avatar class="shrink-0" size="small">{{ item.name?.substring(0, 1) }}</el-avatar>
+									<le-text :value="item.name || '-'"></le-text>
 								</span>
-								<span class="delete">
+								<span class="actions">
+									<el-button v-if="index !== 0" icon="ArrowUp" circle size="small" @click="sortItem(index, 'up')" />
+									<el-button v-if="index !== selected.length - 1" icon="ArrowDown" circle size="small" @click="sortItem(index, 'down')" />
 									<el-button type="danger" icon="Delete" circle size="small" @click="deleteSelected(index)" />
 								</span>
 							</li>
@@ -120,7 +122,7 @@
 								<span class="name">
 									<label>{{ item.name || '-' }}</label>
 								</span>
-								<span class="delete">
+								<span class="actions">
 									<el-button type="danger" icon="Delete" circle size="small" @click="deleteSelected(index)" />
 								</span>
 							</li>
@@ -198,7 +200,7 @@
 									<el-avatar size="small">{{ item.name?.substring(0, 1) }}</el-avatar>
 									<label>{{ item.name || '-' }}</label>
 								</span>
-								<span class="delete">
+								<span class="actions">
 									<el-button type="danger" icon="Delete" circle size="small" @click="deleteSelected(index)" />
 								</span>
 							</li>
@@ -259,7 +261,7 @@ export default {
 			showGrouploading: false,
 			showUserloading: false,
 			keyword: '',
-      username: '',
+			username: '',
 			groupId: '',
 			pageSize: config.user.pageSize,
 			total: 0,
@@ -394,6 +396,17 @@ export default {
 			this.currentPage = 1
 			this.getFormTemplateListEv()
 		},
+		// 顺序调整
+		sortItem(index, type) {
+			const _list = this.selected
+			const cur = _list[index]
+			let nextIdx = index + 1
+			if (type === 'up') {
+				nextIdx = index - 1
+			}
+			_list[index] = _list[nextIdx]
+			_list[nextIdx] = cur
+		},
 		//删除已选
 		deleteSelected(index) {
 			this.selected.splice(index, 1)
@@ -529,7 +542,7 @@ export default {
 
 .sc-user-select__selected {
 	height: 345px;
-	width: 200px;
+	width: 240px;
 	border: 1px solid var(--el-border-color-light);
 	background: var(--el-color-white);
 }
@@ -557,19 +570,24 @@ export default {
 }
 .sc-user-select__selected li .name .el-avatar {
 	background: var(--el-color-primary);
-	margin-right: 10px;
+	margin-right: 6px;
 }
 .sc-user-select__selected li .name label {
 }
-.sc-user-select__selected li .delete {
-	display: none;
+.sc-user-select__selected li .actions {
+	//display: none;
+	display: inline-flex;
+	gap: 6px;
+	.el-button + .el-button {
+		margin-left: 0;
+	}
 }
 .sc-user-select__selected li:hover {
 	background: var(--el-color-primary-light-9);
 }
-.sc-user-select__selected li:hover .delete {
+/*.sc-user-select__selected li:hover .actions {
 	display: inline-block;
-}
+}*/
 
 .sc-user-select-role .sc-user-select__left {
 	width: 200px;