init

src/views/workflow/form/components/UserPicker.vue

@@ -0,0 +1,143 @@
+<template>
+  <div style="max-width: 350px">
+    <template v-if="mode === 'DESIGN'">
+      <el-button disabled icon="User" type="primary" size="mini" round>选择人员</el-button>
+      <span class="placeholder"> {{ placeholder }}</span>
+    </template>
+    <template v-else>
+      <template v-if="perm === 'E'">
+        <el-button icon="User" type="primary" size="mini" round @click="chooseUser">
+          选择人员
+        </el-button>
+        <user-picker :multiple="multiple" ref="userPicker" title="请选择人员" v-model:value="userList" @ok="selected"/>
+        <span class="placeholder"> {{ placeholder }}</span>
+        <div style="display: flex;">
+          <div class="userStyle" v-for="(user, i) in userList" :key="i">
+            <span @click="delDept(i)">×</span>
+            <el-avatar :src="user.avatar"/>
+            <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
+              <span>{{ user.name }}</span>
+            </el-tooltip>
+          </div>
+        </div>
+      </template>
+      <template v-else-if="perm === 'R'">
+        <div style="display: flex;">
+          <div v-for="(user, i) in userList" :key="i" class="view_user">
+            <el-avatar :src="user.avatar"/>
+            <el-tooltip effect="dark" :content="user.name" placement="bottom-start">
+              <span>{{ user.name }}</span>
+            </el-tooltip>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+
+</template>
+
+<script setup>
+import UserPicker from "../../process/common/UserPicker.vue";
+import {computed, defineProps} from "vue";
+const emit = defineEmits(["input"])
+const showPickerSelect = ref(false)
+const userPicker = ref()
+const userList = ref([])
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'DESIGN'
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  perm: {
+    type: String,
+    default: 'E'
+  },
+  placeholder: {
+    type: String,
+    default: '请选择人员'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  }
+})
+const chooseUser=()=>{
+  userPicker.value.showUserPicker()
+}
+watch(() => props.perm, (newVal, oldVal) => {
+  console.log('newVal',newVal,userPicker.value)
+});
+
+const selected = (select) => {
+  let userInfoList = []
+  for (let val of select) {
+    let userInfo = {
+      id: val.id,
+      name: val.name,
+      avatar: val.avatar,
+    }
+    userInfoList.push(userInfo)
+  }
+  userList.value = userInfoList
+  console.log('select',userList.value)
+}
+const delDept = (i) => {
+  userList.value.splice(i, 1)
+}
+
+</script>
+
+<style scoped lang="scss">
+.placeholder {
+  margin-left: 10px;
+  color: #adabab;
+  font-size: smaller;
+}
+
+.userStyle {
+  width: 45px;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin-right: 10px;
+
+  span:first-child {
+    position: absolute;
+    right: -3px;
+    top: -11px;
+    cursor: pointer;
+  }
+
+  span:last-child {
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden
+  }
+}
+
+.view_user {
+  width: 45px;
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+
+  span {
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden
+  }
+}
+</style>