adtec-core-package 2.2.9 → 2.3.0

package/src/components/bpmntree/components/RoleSelector/index.vue

@@ -1,113 +1,113 @@
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import RoleTag from './RoleTag.vue'
-import RolePicker, { type ModelValueType } from './RolePicker.vue'
-import { useFormDisabled, useFormSize } from 'element-plus'
-import { computed, type CSSProperties, ref, watchEffect } from 'vue'
-import { Avatar } from '@element-plus/icons-vue'
-import { getRoleListById, type Role } from '../../api/modules/role'
-import FlowIcon from '../FlowIcon'
-
-export interface RoleSelectorProps {
-  modelValue: ModelValueType
-  placeholder?: string
-  multiple?: boolean
-  disabled?: boolean
-  style?: CSSProperties
-}
-
-const $props = withDefaults(defineProps<RoleSelectorProps>(), {
-  multiple: false,
-  disabled: false,
-  placeholder: '请选择角色',
-})
-const $emits = defineEmits<{
-  (e: 'update:modelValue', modelValue: ModelValueType): void
-}>()
-const value = useVModel($props, 'modelValue', $emits)
-
-const roles = ref<Role[]>([])
-watchEffect(async () => {
-  if (value.value) {
-    const idArr = Array.isArray(value.value) ? value.value : [value.value]
-    try {
-      console.log('await getRoleListById(idArr)', idArr)
-      roles.value = await getRoleListById(idArr)
-    } catch (err: any) {
-      roles.value = []
-    }
-  } else {
-    roles.value = []
-  }
-})
-const RolePickerRef = ref<InstanceType<typeof RolePicker>>()
-const formDisabled = useFormDisabled()
-const formSize = useFormSize()
-const disabled = computed<boolean>(() => {
-  return formDisabled.value || $props.disabled
-})
-const openRolePicker = () => {
-  RolePickerRef.value?.open()
-}
-const onClose = (id: string) => {
-  if (!value.value) return
-  if ($props.multiple && Array.isArray(value.value)) {
-    value.value.splice(value.value.indexOf(id), 1)
-  } else {
-    value.value = null
-  }
-}
-</script>
-
-<template>
-  <role-picker ref="RolePickerRef" :multiple="multiple" v-model="value" />
-  <div class="role-wrapper">
-    <el-button
-      class="role-but-item"
-      :size="formSize"
-      :disabled="disabled"
-      @click="openRolePicker"
-      circle
-    >
-      <flow-icon name="el:Avatar" :size="15" />
-    </el-button>
-    <RoleTag
-      type="primary"
-      v-for="item in roles"
-      :closable="!disabled"
-      :key="item.id"
-      :id="item.id"
-      :name="item.name"
-      @close="onClose"
-    />
-    <el-text v-show="!value || value.length === 0" class="placeholder">
-      {{ placeholder }}
-    </el-text>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.el-tag {
-  padding: 0 3px;
-}
-
-.role-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  grid-gap: 7px;
-  gap: 7px;
-
-  .placeholder {
-    color: var(--el-text-color-placeholder);
-  }
-
-  .role-but-item {
-    border-style: dashed;
-
-    &:hover {
-      border-style: solid;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import RoleTag from './RoleTag.vue'
+import RolePicker, { type ModelValueType } from './RolePicker.vue'
+import { useFormDisabled, useFormSize } from 'element-plus'
+import { computed, type CSSProperties, ref, watchEffect } from 'vue'
+import { Avatar } from '@element-plus/icons-vue'
+import { getRoleListById, type Role } from '../../api/modules/role'
+import FlowIcon from '../FlowIcon'
+
+export interface RoleSelectorProps {
+  modelValue: ModelValueType
+  placeholder?: string
+  multiple?: boolean
+  disabled?: boolean
+  style?: CSSProperties
+}
+
+const $props = withDefaults(defineProps<RoleSelectorProps>(), {
+  multiple: false,
+  disabled: false,
+  placeholder: '请选择角色',
+})
+const $emits = defineEmits<{
+  (e: 'update:modelValue', modelValue: ModelValueType): void
+}>()
+const value = useVModel($props, 'modelValue', $emits)
+
+const roles = ref<Role[]>([])
+watchEffect(async () => {
+  if (value.value) {
+    const idArr = Array.isArray(value.value) ? value.value : [value.value]
+    try {
+      console.log('await getRoleListById(idArr)', idArr)
+      roles.value = await getRoleListById(idArr)
+    } catch (err: any) {
+      roles.value = []
+    }
+  } else {
+    roles.value = []
+  }
+})
+const RolePickerRef = ref<InstanceType<typeof RolePicker>>()
+const formDisabled = useFormDisabled()
+const formSize = useFormSize()
+const disabled = computed<boolean>(() => {
+  return formDisabled.value || $props.disabled
+})
+const openRolePicker = () => {
+  RolePickerRef.value?.open()
+}
+const onClose = (id: string) => {
+  if (!value.value) return
+  if ($props.multiple && Array.isArray(value.value)) {
+    value.value.splice(value.value.indexOf(id), 1)
+  } else {
+    value.value = null
+  }
+}
+</script>
+
+<template>
+  <role-picker ref="RolePickerRef" :multiple="multiple" v-model="value" />
+  <div class="role-wrapper">
+    <el-button
+      class="role-but-item"
+      :size="formSize"
+      :disabled="disabled"
+      @click="openRolePicker"
+      circle
+    >
+      <flow-icon name="el:Avatar" :size="15" />
+    </el-button>
+    <RoleTag
+      type="primary"
+      v-for="item in roles"
+      :closable="!disabled"
+      :key="item.id"
+      :id="item.id"
+      :name="item.name"
+      @close="onClose"
+    />
+    <el-text v-show="!value || value.length === 0" class="placeholder">
+      {{ placeholder }}
+    </el-text>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  padding: 0 3px;
+}
+
+.role-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  grid-gap: 7px;
+  gap: 7px;
+
+  .placeholder {
+    color: var(--el-text-color-placeholder);
+  }
+
+  .role-but-item {
+    border-style: dashed;
+
+    &:hover {
+      border-style: solid;
+    }
+  }
+}
+</style>

package/src/components/bpmntree/components/UserSelector/UserTag.vue

@@ -1,73 +1,73 @@
-<script setup lang="ts">
-// import { getByUsername } from '@/components/bpmntree/api/modules/user'
-import { componentSizeMap, useFormSize } from 'element-plus'
-import { computed, onMounted } from 'vue'
-
-export interface UserTagProps {
-  userId: string
-  username: string
-  type?: 'success' | 'info' | 'warning' | 'danger' | 'primary'
-  closable?: boolean
-}
-
-const $props = withDefaults(defineProps<UserTagProps>(), {
-  closable: false,
-  type: 'info',
-})
-const $emits = defineEmits<{
-  (e: 'close', username: string): void
-}>()
-
-// export interface UserInfo {
-//   username?: string
-//   avatar?: string
-//   name?: string
-// }
-
-// let userInfo = reactive<UserInfo>({
-//   username: undefined,
-//   avatar: undefined,
-//   name: undefined
-// })
-onMounted(() => {
-  if (!$props.username || !$props.userId) {
-    throw new Error('username/userId is required')
-  }
-  // getByUsername($props.username).then((res) => {
-  //   if (res.success) {
-  //     userInfo.username = res.data.username
-  //     userInfo.avatar = res.data.avatar
-  //     userInfo.name = res.data.name
-  //   }
-  // })
-})
-const formSize = useFormSize()
-const getComponentSize = computed(() => {
-  return componentSizeMap[formSize.value || 'default'] - 12
-})
-const onClose = () => {
-  $emits('close', $props.userId)
-}
-</script>
-<template>
-  <el-tag round :closable="$props.closable" :type="type" effect="light" @close="onClose">
-    <div class="flex-center" style="gap: 4px; grid-gap: 4px">
-      <el-avatar :size="getComponentSize">
-        {{ (username || userId).charAt(0) }}
-      </el-avatar>
-      <span style="margin-left: 3px">{{ username || userId }}</span>
-    </div>
-  </el-tag>
-</template>
-
-<style scoped lang="scss">
-:deep {
-  .el-tag__content:only-child {
-    margin-right: 4px;
-  }
-}
-
-.el-tag {
-  padding-left: 1px !important;
-}
-</style>
+<script setup lang="ts">
+// import { getByUsername } from '@/components/bpmntree/api/modules/user'
+import { componentSizeMap, useFormSize } from 'element-plus'
+import { computed, onMounted } from 'vue'
+
+export interface UserTagProps {
+  userId: string
+  username: string
+  type?: 'success' | 'info' | 'warning' | 'danger' | 'primary'
+  closable?: boolean
+}
+
+const $props = withDefaults(defineProps<UserTagProps>(), {
+  closable: false,
+  type: 'info',
+})
+const $emits = defineEmits<{
+  (e: 'close', username: string): void
+}>()
+
+// export interface UserInfo {
+//   username?: string
+//   avatar?: string
+//   name?: string
+// }
+
+// let userInfo = reactive<UserInfo>({
+//   username: undefined,
+//   avatar: undefined,
+//   name: undefined
+// })
+onMounted(() => {
+  if (!$props.username || !$props.userId) {
+    throw new Error('username/userId is required')
+  }
+  // getByUsername($props.username).then((res) => {
+  //   if (res.success) {
+  //     userInfo.username = res.data.username
+  //     userInfo.avatar = res.data.avatar
+  //     userInfo.name = res.data.name
+  //   }
+  // })
+})
+const formSize = useFormSize()
+const getComponentSize = computed(() => {
+  return componentSizeMap[formSize.value || 'default'] - 12
+})
+const onClose = () => {
+  $emits('close', $props.userId)
+}
+</script>
+<template>
+  <el-tag round :closable="$props.closable" :type="type" effect="light" @close="onClose">
+    <div class="flex-center" style="gap: 4px; grid-gap: 4px">
+      <el-avatar :size="getComponentSize">
+        {{ (username || userId).charAt(0) }}
+      </el-avatar>
+      <span style="margin-left: 3px">{{ username || userId }}</span>
+    </div>
+  </el-tag>
+</template>
+
+<style scoped lang="scss">
+:deep {
+  .el-tag__content:only-child {
+    margin-right: 4px;
+  }
+}
+
+.el-tag {
+  padding-left: 1px !important;
+}
+</style>

package/src/components/bpmntree/components/UserSelector/index.vue

@@ -1,140 +1,140 @@
-<script setup lang="ts">
-import UserTag from './UserTag.vue'
-import { useFormDisabled, useFormSize } from 'element-plus'
-import { computed, type CSSProperties, ref, watchEffect } from 'vue'
-import FlowIcon from '../FlowIcon/index'
-import UserSelect from '../../../business/userSelect.vue'
-import { useVModel } from '@vueuse/core'
-import { getList, type User } from '../../api/modules/user'
-
-export type ModelValueType = string | string[] | null | undefined
-
-export interface UserSelectorProps {
-  modelValue: ModelValueType
-  placeholder?: string
-  multiple?: boolean
-  disabled?: boolean
-  style?: CSSProperties
-}
-
-const $props = withDefaults(defineProps<UserSelectorProps>(), {
-  multiple: true,
-  disabled: false,
-  placeholder: '请选择用户',
-})
-const $emits = defineEmits<{
-  (e: 'update:modelValue', modelValue: ModelValueType): void
-}>()
-const value = useVModel($props, 'modelValue', $emits)
-const users = ref<User[]>([])
-watchEffect(async () => {
-  if (value.value) {
-    const idArr = Array.isArray(value.value) ? value.value : [value.value]
-    if (idArr.length > 0) {
-      users.value = await getList(idArr)
-    } else {
-      users.value = []
-    }
-  } else {
-    users.value = []
-  }
-})
-const idStr = computed(() => {
-  if (Array.isArray(value.value)) {
-    return value.value
-  } else if (value.value) {
-    return [value.value]
-  }
-  return []
-})
-
-const userPickerRef = ref<InstanceType<typeof UserSelect>>()
-const formDisabled = useFormDisabled()
-const formSize = useFormSize()
-const disabled = computed<boolean>(() => {
-  return formDisabled.value || $props.disabled
-})
-const openUserSelect = ref(false)
-const openUserPicker = () => {
-  openUserSelect.value = true
-}
-const onClose = (username: string) => {
-  // if (!users.value || users.value.length == 0) return
-  // users.value.splice(
-  //   users.value.findIndex((x) => x.userName == username),
-  //   1
-  // )
-  if (!value.value) return
-  if ($props.multiple && Array.isArray(value.value)) {
-    value.value.splice(value.value.indexOf(username), 1)
-  } else {
-    value.value = null
-  }
-}
-const onSelect = (selectedUsers: User[]) => {
-  // users.value = selectedUsers
-  value.value = selectedUsers.map((x) => x.id)
-  openUserSelect.value = false
-}
-</script>
-
-<template>
-  <user-select
-    v-model="openUserSelect"
-    ref="userPickerRef"
-    :multiple="multiple"
-    @success="onSelect"
-    @cancel="openUserSelect = false"
-    :selected-user-ids="idStr"
-  />
-  <!--  <user-picker ref="userPickerRef" :multiple="multiple" v-model="value" />-->
-  <div class="user-wrapper">
-    <el-button
-      class="user-but-item"
-      :size="formSize"
-      :disabled="disabled"
-      @click="openUserPicker"
-      circle
-    >
-      <flow-icon name="adduser" :size="15" />
-    </el-button>
-    <user-tag
-      type="primary"
-      v-for="item in users"
-      :closable="!disabled"
-      :key="item.id"
-      :user-id="item.id"
-      :username="item.userName"
-      @close="onClose"
-    />
-    <el-text v-show="!users || users.length === 0" class="placeholder">
-      {{ placeholder }}
-    </el-text>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.el-tag {
-  padding: 0 3px;
-}
-
-.user-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  grid-gap: 7px;
-  gap: 7px;
-
-  .placeholder {
-    color: var(--el-text-color-placeholder);
-  }
-
-  .user-but-item {
-    border-style: dashed;
-
-    &:hover {
-      border-style: solid;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import UserTag from './UserTag.vue'
+import { useFormDisabled, useFormSize } from 'element-plus'
+import { computed, type CSSProperties, ref, watchEffect } from 'vue'
+import FlowIcon from '../FlowIcon/index'
+import UserSelect from '../../../business/userSelect.vue'
+import { useVModel } from '@vueuse/core'
+import { getList, type User } from '../../api/modules/user'
+
+export type ModelValueType = string | string[] | null | undefined
+
+export interface UserSelectorProps {
+  modelValue: ModelValueType
+  placeholder?: string
+  multiple?: boolean
+  disabled?: boolean
+  style?: CSSProperties
+}
+
+const $props = withDefaults(defineProps<UserSelectorProps>(), {
+  multiple: true,
+  disabled: false,
+  placeholder: '请选择用户',
+})
+const $emits = defineEmits<{
+  (e: 'update:modelValue', modelValue: ModelValueType): void
+}>()
+const value = useVModel($props, 'modelValue', $emits)
+const users = ref<User[]>([])
+watchEffect(async () => {
+  if (value.value) {
+    const idArr = Array.isArray(value.value) ? value.value : [value.value]
+    if (idArr.length > 0) {
+      users.value = await getList(idArr)
+    } else {
+      users.value = []
+    }
+  } else {
+    users.value = []
+  }
+})
+const idStr = computed(() => {
+  if (Array.isArray(value.value)) {
+    return value.value
+  } else if (value.value) {
+    return [value.value]
+  }
+  return []
+})
+
+const userPickerRef = ref<InstanceType<typeof UserSelect>>()
+const formDisabled = useFormDisabled()
+const formSize = useFormSize()
+const disabled = computed<boolean>(() => {
+  return formDisabled.value || $props.disabled
+})
+const openUserSelect = ref(false)
+const openUserPicker = () => {
+  openUserSelect.value = true
+}
+const onClose = (username: string) => {
+  // if (!users.value || users.value.length == 0) return
+  // users.value.splice(
+  //   users.value.findIndex((x) => x.userName == username),
+  //   1
+  // )
+  if (!value.value) return
+  if ($props.multiple && Array.isArray(value.value)) {
+    value.value.splice(value.value.indexOf(username), 1)
+  } else {
+    value.value = null
+  }
+}
+const onSelect = (selectedUsers: User[]) => {
+  // users.value = selectedUsers
+  value.value = selectedUsers.map((x) => x.id)
+  openUserSelect.value = false
+}
+</script>
+
+<template>
+  <user-select
+    v-model="openUserSelect"
+    ref="userPickerRef"
+    :multiple="multiple"
+    @success="onSelect"
+    @cancel="openUserSelect = false"
+    :selected-user-ids="idStr"
+  />
+  <!--  <user-picker ref="userPickerRef" :multiple="multiple" v-model="value" />-->
+  <div class="user-wrapper">
+    <el-button
+      class="user-but-item"
+      :size="formSize"
+      :disabled="disabled"
+      @click="openUserPicker"
+      circle
+    >
+      <flow-icon name="adduser" :size="15" />
+    </el-button>
+    <user-tag
+      type="primary"
+      v-for="item in users"
+      :closable="!disabled"
+      :key="item.id"
+      :user-id="item.id"
+      :username="item.userName"
+      @close="onClose"
+    />
+    <el-text v-show="!users || users.length === 0" class="placeholder">
+      {{ placeholder }}
+    </el-text>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  padding: 0 3px;
+}
+
+.user-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  grid-gap: 7px;
+  gap: 7px;
+
+  .placeholder {
+    color: var(--el-text-color-placeholder);
+  }
+
+  .user-but-item {
+    border-style: dashed;
+
+    &:hover {
+      border-style: solid;
+    }
+  }
+}
+</style>