test: 角色选择 start

src/components/SelectRole.vue

@@ -1,7 +1,8 @@
 <script lang="tsx">
-import { defineComponent, unref } from 'vue'
+import { defineComponent, unref, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useFormSize } from 'element-plus'
+import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 const Props = {
 	modelValue: {},
 	params: {
@@ -15,7 +16,7 @@ const Props = {
 	// 3. v-slot: { prefix, suffix } or slots: { prefix: render, suffix: render, }
 }
 const Component = defineComponent({
-	name: 'LeInputNumber',
+	name: 'LeSelectRole',
 	props: Props,
 	emits: [
 		'change',
@@ -23,25 +24,40 @@ const Component = defineComponent({
 	],
 	setup(props, ctx) {
 		const { t } = useI18n()
+		const selectHandler = (nodeKey: string, type: 1 | 3) => {
+			console.log(nodeKey, 'nodeKey type', type)
+		}
+		const assignees = ref([])
 		return () => {
 			const { prefixIcon, suffixIcon, prop, controlsPosition, t_placeholder, size, placeholder, max = 999999999999999, ...local_props } = ctx.attrs
-			const inputNumberSize = size || unref(useFormSize())
-			const _prefix = prefixIcon ? <span class="le-addon le-input-number__prefix">{prefixIcon}</span> : ''
-			const _suffix = suffixIcon ? <span class="le-addon le-input-number__suffix">{suffixIcon}</span> : ''
+			// const inputNumberSize = size || unref(useFormSize())
+			// const _prefix = prefixIcon ? <span class="le-addon le-input-number__prefix">{prefixIcon}</span> : ''
+			// const _suffix = suffixIcon ? <span class="le-addon le-input-number__suffix">{suffixIcon}</span> : ''
 			const _placeholder = (t_placeholder ? t(t_placeholder) : placeholder) ?? t('le.el.input.placeholder')
 			const slots = Object.keys(ctx.slots).length ? ctx.slots : local_props.slots || {}
 			const onChange = (...v) => {
 				ctx.emit('change', ...v)
 			}
+			// ${_prefix || slots.prefix ? 'el-input-group--prepend le-input-number--prefix' : ''}
+			// ${_suffix || slots.suffix ? 'el-input-group--append le-input-number--suffix' : ''}
+			/*{"id": "1492884198322536450","name": "财务总监"}*/
 			return (
-				<div
-					class={`le-input-number le-input-number--${inputNumberSize} el-input el-input-group
-					 ${_prefix || slots.prefix ? 'el-input-group--prepend le-input-number--prefix' : ''}
-					 ${_suffix || slots.suffix ? 'el-input-group--append le-input-number--suffix' : ''}
-				 `}
-				>
-					{slots.prefix ? slots.prefix() : _prefix}
-					<el-input-number
+				<div class={`le-select-role el-input-group`}>
+					{/*slots.prefix ? slots.prefix() : _prefix*/}
+					{/*v-if="!assigneeMap[v.nodeKey].disabled"*/}
+					<el-tooltip content="添加角色" placement="left">
+							<el-button style="width: 32px" onClick={selectHandler.bind(null, 'nodeKey', 3)}>
+							<svg-icon style="font-size: 18px" icon-class="flow-group-add" />
+						</el-button>
+					</el-tooltip>
+					{
+						assignees.value.map((item, i) => {
+							return <FlowNodeAvatar key={i} name={item.name} style="margin-top: 5px">
+								{{avatar: () => <svg-icon icon-class="flow-group" color="#fff" />}}
+							</FlowNodeAvatar>
+						})
+					}
+					{/*<el-input-number
 						max={max}
 						{...local_props}
 						onChange={onChange}
@@ -49,42 +65,12 @@ const Component = defineComponent({
 						controlsPosition={controlsPosition ?? 'right'}
 						placeholder={_placeholder}
 						model-value={props.modelValue}
-					/>
-					{slots.suffix ? slots.suffix() : _suffix}
+					/>*/}
+					{/*slots.suffix ? slots.suffix() : _suffix*/}
 				</div>
 			)
 		}
 	}
-	/*render() {
-		const { t } = useI18n()
-		const { prefix, suffix, prop, controlsPosition, placeholder, max = 999999999999999, ...props } = this.$attrs
-		const { inputNumberSize, value } = this
-		const $slots = this.$slots
-		// const onEvents = this.$listeners
-
-		const _prefix = prefix ? <span class="le-addon le-input-number__prefix">{prefix}</span> : ''
-		const _suffix = suffix ? <span class="le-addon le-input-number__suffix">{suffix}</span> : ''
-		return (
-			<div
-				class={`le-input-number le-input-number--${inputNumberSize} el-input el-input-group
-     ${_prefix || $slots.prefix ? 'le-input-number--prefix' : ''}
-     ${_suffix || $slots.suffix ? 'le-input-number--suffix' : ''}
-     `}
-			>
-				{$slots.prefix || _prefix}
-				<el-input-number
-					max={max}
-					{...props}
-					size={inputNumberSize}
-					controlsPosition={controlsPosition || 'right'}
-					placeholder={placeholder || t('le.el.input.placeholder')}
-					// value={this.localValue}
-					value={value}
-				/>
-				{$slots.suffix || _suffix}
-			</div>
-		)
-	},*/
 })
 export default Component
-</script>
+</script>

src/views/components/index.vue

@@ -1,7 +1,12 @@
 <template>
 	<div class="flex-column-page-wrap pageWrap">
 		Home
-		<div class="common_title" style="background: #f00">多语言 使用  todo 选择 人员 选择角色</div>
+		<div class="common_title" style="background: #f00">todo 选择人员 选择角色</div>
+		<div class="content">
+			<SelectRole></SelectRole>
+			<SelectUser></SelectUser>
+		</div>
+		<div class="common_title">多语言 使用</div>
 		<div class="content">
 			<el-button size="small" @click="switchLang">
 				lang: 切换
@@ -103,6 +108,8 @@ import LeSelectDemo from './components/LeSelectDemo'
 import InputNumberDemo from './components/InputNumberDemo'
 import LeDraggableNestDemo from './components/LeDraggableNestDemo'
 import Watermark from './components/Watermark'
+import SelectRole from '@/components/SelectRole.vue'
+import SelectUser from '@/components/SelectUser.vue'
 import useStore from '@/store/index'
 import { useI18n } from 'vue-i18n'
 // import i18n from '@/lang'