Merge branch '0.8.X' of http://49.232.154.205:10100/DeXun/klp-oa into 0.8.X

klp-ui/src/components/KLPService/UserSelect/index.vue

@@ -1,26 +1,28 @@
 <template>
-  <el-select
-    v-model="selectedValue"
-    :multiple="multiple"
-    filterable
-    remote
-    :remote-method="handleSearch"
-    :loading="loading"
-    :placeholder="placeholder"
-    style="width: 100%"
-    @change="handleChange"
-    :clearable="clearable"
-  >
-    <el-option
-      v-for="user in filteredUsers"
-      :key="user.userId"
-      :label="`${user.nickName}（${user.dept && user.dept.deptName ? user.dept.deptName : '无部门'}）`"
-      :value="user.userId"
+  <div class="user-select-wrapper" :class="{ 'has-value': selectedValue && (Array.isArray(selectedValue) ? selectedValue.length > 0 : true) }">
+    <el-select
+      v-model="selectedValue"
+      :multiple="multiple"
+      filterable
+      remote
+      :remote-method="handleSearch"
+      :loading="loading"
+      :placeholder="placeholder"
+      style="width: 100%"
+      @change="handleChange"
+      :clearable="clearable"
     >
-      <span>{{ user.nickName }}</span>
-      <span style="color: #999; font-size: 12px; margin-left: 8px;">{{ user.dept && user.dept.deptName ? user.dept.deptName : '无部门' }}</span>
-    </el-option>
-  </el-select>
+      <el-option
+        v-for="user in filteredUsers"
+        :key="user.userId"
+        :label="`${user.nickName}（${user.dept && user.dept.deptName ? user.dept.deptName : '无部门'}）`"
+        :value="user.userId"
+      >
+        <span>{{ user.nickName }}</span>
+        <span style="color: #999; font-size: 12px; margin-left: 8px;">{{ user.dept && user.dept.deptName ? user.dept.deptName : '无部门' }}</span>
+      </el-option>
+    </el-select>
+  </div>
 </template>
 
 <script>
@@ -109,4 +111,62 @@ export default {
 </script>
 
 <style scoped>
+.user-select-wrapper {
+  position: relative;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 2px 8px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  min-height: 32px;
+}
+
+.user-select-wrapper:hover {
+  border-color: #c0c4cc;
+}
+
+.user-select-wrapper.has-value {
+  border-color: #5F7BA0;
+  box-shadow: 0 0 0 1px rgba(95, 123, 160, 0.1);
+}
+
+.user-select-wrapper /deep/ .el-select {
+  width: 100%;
+}
+
+.user-select-wrapper /deep/ .el-select__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  position: relative !important;
+  top: auto !important;
+  left: auto !important;
+  transform: none !important;
+  overflow: visible;
+  padding: 2px 0;
+}
+
+.user-select-wrapper /deep/ .el-select__tags .el-tag {
+  margin: 2px 0;
+}
+
+.user-select-wrapper /deep/ .el-input {
+  width: auto;
+  min-width: 60px;
+}
+
+.user-select-wrapper /deep/ .el-select .el-select__input {
+  margin-left: 0;
+}
+
+.user-select-wrapper /deep/ .el-select__tags-text {
+  display: inline;
+}
+
+/* Hide the original el-select border since wrapper provides it */
+.user-select-wrapper /deep/ .el-select .el-input__inner {
+  border: none !important;
+  box-shadow: none !important;
+  padding-left: 0;
+}
 </style>