@lambo-design/workflow-approve 1.0.0-beta.9 → 1.0.0-beta.91

package/src/components/countersigners-box.vue

@@ -0,0 +1,858 @@
+<template>
+  <div style="min-height: 300px;">
+    <div v-if="organTree.userMap && Object.keys(organTree.userMap).length > 0" class="searchable-select-wrapper">
+      <Select v-model="countersignersTagsData"
+              filterable multiple
+              @on-change="organChange($event)"
+              class="custom-select"
+      >
+        <Option v-for="(value, key) in organTree.userMap" :key="key" :value="`${key},${value.split('（')[0]}`"
+                :label="value.split('（')[0]">
+          <span>{{ value }}</span>
+        </Option>
+      </Select>
+      <Icon type="ios-search" class="search-icon"/>
+    </div>
+    <Tag v-else v-for="(item, index) in countersignersTagsData" :key="item.id" closable
+         @on-close="closeTags(index, item)"
+         size="large">
+      {{ item.split(',')[1] }}
+    </Tag>
+
+    <div class="cont">
+      <div
+        class="contLeftTwo">
+
+        <Tabs :animated="false" @on-click="dataNameClick">
+          <TabPane label="选人员">
+            <div class="overflowAuto">
+              <div v-if="readingRange.length === 0">暂无数据</div>
+              <Tree v-else v-for="(item,index) in readingRange" :key="index" :data="item" ref="treeEY" check-strictly
+                    show-checkbox expand-node
+                    :load-data="loadReadingRangeData" :checkable="true" @on-check-change="selectReRaYHChange"
+                    @on-select-change="selectReRaYHChange"></Tree>
+            </div>
+          </TabPane>
+
+        </Tabs>
+
+      </div>
+      <div class="contRight">
+        <Card dis-hover v-if="treeUserCenterValue.length > 0">
+          <div class="overflowAuto">
+            <CheckboxGroup v-model="treeUserValue" class="checkbox-container" @on-change="getReadingRangeUser">
+              <Checkbox v-for="(item) in treeUserCenterValue" :key="item.userId"
+                        :label="item.userId+','+item.userName">
+                {{ item.userName }} {{ showUserDetail(item) }}
+              </Checkbox>
+            </CheckboxGroup>
+          </div>
+        </Card>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ajax from '@lambo-design/shared/utils/ajax'
+import Title from './title'
+import TreeSelect from '@lambo-design/tree-select'
+
+export default {
+  props: {
+    smartFlowServerContext: {
+      type: String,
+      default: '/api/smart-flow-server',
+    },
+    upmsServerContext: {
+      type: String,
+      default: '/api/upms-server',
+    },
+    item: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    permScope: {
+      type: String,
+      default: ''
+    },
+
+  },
+  components: {
+    Title,
+    TreeSelect
+  },
+  data() {
+    return {
+      id: '',
+      ucAdapterType: 'x1',
+      treePostNameCenterValue: [],
+      selectedKeys: [],
+      postKeys: [],
+      postAllList: [],
+      noticeList: [],
+      orgList: [],
+      userNum: '0',
+      // permScope: "",
+      organTreeType: '00',
+      organIdList: [],
+      countersignersTagsData: [],
+      organTree: {
+        orgenMap: {},
+        userMap: {},
+        roleMap: {},
+        postMap: {},
+      },
+      readingRangePost: [],
+      treeUserValueCenter: [],
+      treeLength: 0,
+      treeValueBM: [],
+      treeOrgTypeValue: [],
+      dataName: '',
+      postList: [],//选中岗位集合（右侧显示）
+      processPostList: [],//岗位集合
+      noticeRoleNameList: [],//角色选择集合
+      roleList: [],//角色集合
+      noticeRoleList: [],//选中角色集合（右侧显示）
+      treeUserValue: [],//选中的人员（右侧显示）
+      selectedData: [],
+      treePostValue: [],
+      treeUserCenterValue: [],
+      treePostCenterValue: [],
+      readingRangeBM: [],//权限范围数据组织
+      readingRange: [],//权限范围数据人员
+      readingRangeOrgType: [],//权限范围数据部门
+      placeholder: '自动同意',
+      loading: false,
+      form: {
+        userId: '',
+        userName: '',
+        organId: '',
+        organTitle: '',
+        directChild: false,
+        isAdmin: ''
+      },
+      value: '2',
+      currentNode: {},
+      currentNodeUser: {},
+      currentNodePost: {},
+      ruleValidate: {
+        organization: [
+          { required: true, message: '请选择指定相对岗位的组织', trigger: 'blur' }
+        ],
+        position: [
+          { required: true, message: '请选择指定岗位', trigger: 'blur' }
+        ],
+      },
+
+    }
+  },
+  created() {
+    this.getSystemConfig()
+    let permScope = this.item.orgTreeType === this.defaultOrganTreeType ? this.permScope : 'all'
+    this.orgTreeType = this.item.orgTreeType ? this.item.orgTreeType : this.organTreeType
+    this.toggleShowHelpBox(this.permScope, this.item.candidates, this.orgTreeType, this.item.id)
+  },
+  computed: {},
+  mounted: function () {
+  },
+  methods: {
+    //把已选择的数据放入到已选列表中展示
+    getUser(row) {
+      if (row.users) {
+        let self = this
+        self.selectedKeys = []
+        self.treeUserValue = []
+        let users = row.users
+        let userList = users.split(',')
+        if (users && userList.length > 0) {
+          userList.forEach(item => {
+            let [userId, userName] = item.split(':')
+            let userStr = `${userId},${userName}`
+            self.selectedData.push(userStr)
+            self.treeUserValue.push(userStr)
+            self.selectedKeys.push(userStr)
+            if (!self.countersignersTagsData.includes(userStr)) {
+              self.countersignersTagsData.push(userStr)
+            }
+            self.userNum = '1'
+          })
+        }
+      }
+    },
+
+    organChange(event) {
+      this.countersignersTagsData = [...event] // 直接同步
+      this.treeUserValue = [...event] // 保持一致
+      this.selectedKeys = [...event]
+
+    },
+
+    getRootOrganTree(organTreeType) {
+
+      let self = this
+      let organTreeList = []
+      let organTree = []
+      if (self.ucAdapterType == 'x1') {
+        let parentId = organTreeType == '00' ? 'rootId' : '0'
+        ajax.get(self.smartFlowServerContext + '/manage/organ/getOrgSubNodes', {
+          params: {
+            code: parentId,
+            orgTreeType: organTreeType
+          }
+        }).then(resp => {
+          if (resp.data.code === 200) {
+            let data = resp.data.data
+            if (data.length > 0) {
+              data.forEach(item => {
+                let obj = {}
+                obj.type = item.organType
+                obj.id = item.id
+                obj.organId = item.organId
+                obj.orders = item.orders
+                obj.title = item.organName
+                obj.name = item.organName
+                obj.com = item.com
+                obj.code = item.organCode
+                obj.loading = false
+                obj.children = []
+                obj.hasChild = true
+                organTreeList.push(obj)
+              })
+            }
+            organTree.push(organTreeList)
+            //去重
+            const codesSeen = new Map()
+            organTree = organTree.reduce((acc, item, index) => {
+              if (!codesSeen.has(item.code)) {
+                codesSeen.set(item.code, index)
+                acc.push(item)
+              }
+              return acc
+            }, [])
+            self.readingRangeBM = JSON.parse(JSON.stringify(organTree))
+            self.readingRange = JSON.parse(JSON.stringify(organTree))
+            self.readingRangePost = JSON.parse(JSON.stringify(organTree))
+          }
+        })
+      } else {
+        ajax.get(self.smartFlowServerContext + '/manage/bizorgan/getOrgRootTree', {
+          params: {
+            bizOrganTreeType: organTreeType
+          }
+        }).then(resp => {
+          if (resp.data.code === 200) {
+            let data = resp.data.data
+            if (data.length > 0) {
+              data.forEach(item => {
+                let obj = {}
+                obj.type = item.bizOrganType
+                obj.id = item.id
+                obj.organId = item.bizOrganId
+                obj.orders = item.orders
+                obj.title = item.bizOrganName
+                obj.name = item.bizOrganName
+                obj.com = item.bizOrganId
+                obj.code = item.bizOrganCode
+                obj.loading = false
+                obj.children = []
+                obj.hasChild = true
+                organTreeList.push(obj)
+              })
+            }
+            organTree.push(organTreeList)
+            //去重
+            const codesSeen = new Map()
+            organTree = organTree.reduce((acc, item, index) => {
+              if (!codesSeen.has(item.code)) {
+                codesSeen.set(item.code, index)
+                acc.push(item)
+              }
+              return acc
+            }, [])
+            self.readingRangeBM = JSON.parse(JSON.stringify(organTree))
+            self.readingRange = JSON.parse(JSON.stringify(organTree))
+          }
+        })
+      }
+      self.organTreeRedis(self.permScope, self.readingRange)
+    },
+
+    getOrganTreeByProType(row, permScope, organTreeType) {
+      const self = this
+      return new Promise((resolve, reject) => {
+        let organTree = []
+        let childsTree = []
+        if (permScope && permScope.length > 0) {
+          let params = {
+            orgTreeType: organTreeType,
+          }
+          permScope = permScope.split(';')
+
+          const requests = permScope.map(perm => {
+            return ajax.get(self.smartFlowServerContext + '/manage/organ/get/' + perm, { params: params })
+              .then(resp => {
+                if (resp.data.code === 200) {
+                  return resp.data.data
+                } else {
+                  return []
+                }
+              })
+              .catch(err => {
+                console.error(err)
+                return []
+              })
+          })
+
+          Promise.all(requests)
+            .then(results => {
+              results.forEach(data => {
+                if (data) {
+                  let obj = {
+                    type: data.organType,
+                    id: data.id,
+                    organId: data.organId,
+                    orders: data.orders,
+                    title: data.organName,
+                    name: data.organName,
+                    com: data.organId,
+                    code: data.organCode,
+                    loading: false,
+                    checked: false,
+                    children: [],
+                    hasChild: true,
+                  }
+                  childsTree.push(obj)
+                }
+              })
+
+              organTree.push(childsTree)
+              const codesSeen = new Map()
+              organTree = organTree.reduce((acc, item, index) => {
+                if (!codesSeen.has(item.code)) {
+                  codesSeen.set(item.code, index)
+                  acc.push(item)
+                }
+                return acc
+              }, [])
+              resolve(organTree)
+            })
+            .catch(err => {
+              reject(err)
+            })
+        } else {
+          resolve([])
+        }
+      })
+    },
+    //获取人员树信息(数据初始化)
+    async getReadingRange(row, organTreeType) {
+      let self = this
+      var permScope = row.substring(row.indexOf('U:'))
+      permScope = permScope.substring(2, permScope.indexOf(','))
+      let permScopeTwo = permScope.split(';')
+      if (permScopeTwo.length > 0 && permScopeTwo[0]) {
+        let promises = []
+        for (let i = 0; i < permScopeTwo.length; i++) {
+          let promise = ajax.get(self.smartFlowServerContext + '/manage/user/get/' + permScopeTwo[i] + '?treeType=' + organTreeType)
+            .then(resp => {
+              if (resp.data.code === 200) {
+                return resp.data.data.organCode
+              }
+            })
+          promises.push(promise)
+        }
+        Promise.all(promises).then(async (result) => {
+          const uniqueResults = [...new Set(result.filter(Boolean))]
+          permScope = uniqueResults.join(';')
+          self.readingRange = await this.getOrganTreeByProType(row, permScope, organTreeType)
+          self.organTreeRedis(this.permScope, self.readingRange)
+        })
+      } else {
+        //对于流程类型中没有规定人员范围但规定组织范围的情况
+        self.readingRange = await this.getOrganTreeByProType(row, row.substring(2, row.indexOf(',')), organTreeType)
+        self.organTreeRedis(this.permScope, self.readingRange)
+      }
+
+    },
+
+    closeTags(index, info) {
+      this.readingRangeScPerDel(index, info)
+    },
+
+    //权限范围人员单条删除
+    readingRangeScPerDel(res, info) {
+      let self = this
+      let index = this.treeUserValue.findIndex(item => {
+        return item === info
+      })
+      if (index !== -1) {
+        self.treeUserValue = self.treeUserValue.filter((_, i) => i !== index)
+        self.selectedKeys = self.selectedKeys.filter((_, i) => i !== index)
+        // self.selectedKeys.splice(index, 1)
+      }
+      let orgList = []
+      let organList = []
+      orgList.push(info)
+      self.countersignersTagsData.forEach(organ => {
+        if (organ.indexOf(info) == -1) {
+          organList.push(organ)
+        }
+      })
+      self.countersignersTagsData = organList
+    },
+
+    selectUserChange(node) {
+      let self = this
+      if (node.length > 0) {
+        if (self.currentNodeUser !== node[0]) {
+          self.currentNodeUser = node[0]
+
+          self.form.organId = self.currentNodeUser.id
+          self.form.organTitle = self.currentNodeUser.title
+
+          if (node[0].children.length <= 0) {
+            self.getReadingRangeData(node[0], function (data) {
+              self.$set(node[0], 'children', data)
+            })
+          }
+          self.$set(node[0], 'expand', true)
+        }
+      } else {
+        self.$set(self.currentNodeUser, 'expand', !self.currentNodeUser.expand)
+        self.currentNodeUser.selected = true
+      }
+    },
+    //获取用户信息（懒加载）(展开人员树时触发)
+    loadReadingRangeData(node, callback) {
+      this.getReadingRangeData(node, function (data) {
+        if (data.length > 0) {
+          callback(data)
+        }
+      })
+    },
+    getReadingRangeData(node, callback) {
+      let self = this
+      ajax.get(self.smartFlowServerContext + '/manage/organ/getOrgSubNodes', {
+        params: {
+          code: node.code,
+          orgTreeType: self.organTreeType
+        }
+      }).then(function (resp) {
+        const childs = []
+        if (resp.data.code === 200) {
+          let nodeDatas = resp.data.data
+          if (nodeDatas.length > 0) {
+            nodeDatas.forEach(item => {
+              let obj = {}
+              let typeName = ''
+              if ('com' === item.organType) {
+                typeName = '(公司)'
+              } else if ('dept' === item.organType) {
+                typeName = '(部门)'
+              }
+              // obj.disableCheckbox = true
+              obj.type = item.organType
+              obj.id = item.id
+              obj.title = item.organName + typeName
+              obj.name = item.organName
+              obj.com = item.organId
+              obj.organId = item.organId
+              obj.code = item.organCode
+              obj.loading = false
+              obj.children = []
+              obj.hasChild = true
+              childs.push(obj)
+            })
+          } else {
+            self.$set(node, 'hasChild', false)
+            self.$delete(node, 'loading')
+          }
+          if (callback) {
+            callback(childs)
+          }
+        } else {
+          self.$set(node, 'hasChild', false)
+          self.$delete(node, 'loading')
+          if (callback) {
+            callback()
+          }
+        }
+      })
+    },
+
+    //权限范围用户点击事件(点击人员树，触发查询，显示在右侧)
+    selectReRaYHChange(data, info) {
+      let self = this
+      const user = sessionStorage.getItem('userInfo')
+      const jsonArray = JSON.parse(user)
+      var userPermScope = self.permScope.substring(self.permScope.indexOf('U:'))
+      userPermScope = userPermScope.substring(2, userPermScope.indexOf(','))
+      userPermScope = userPermScope.split(';')
+      //self.selectUserChange(data)
+      let treeUserCenters = []
+
+      if (self.permScope == 'all' || self.permScope == 'undefined') {
+        let userIdSet = new Set()
+        data.forEach(itemCom => {
+
+          ajax.get(self.smartFlowServerContext + '/manage/user/getList', {
+            params: {
+              organId: itemCom.organId,
+              orgTreeType: self.organTreeType,
+              limit: '1000',
+              directChild: true,
+            }
+          }).then(function (resp) {
+            if (resp.data.code === 200) {
+              let nodeUser = resp.data.data.rows ? resp.data.data.rows : resp.data.data
+              nodeUser.forEach(item => {
+                if (!userIdSet.has(item.userId)) {
+                  userIdSet.add(item.userId)
+                  treeUserCenters.push({
+                    userId: item.userId,
+                    userName: item.userName,
+                    nameItem: item.superiorOrgName,
+                    organName: item.organName
+                  })
+                }
+              })
+            }
+
+          })
+        })
+      } else {
+        let userIdSet = new Set()
+        data.forEach(itemCom => {
+          ajax.get(self.smartFlowServerContext + '/manage/user/getList', {
+            params: {
+              organId: itemCom.organId,
+              orgTreeType: self.organTreeType,
+              limit: '1000',
+              directChild: true,
+            }
+          }).then(function (resp) {
+            if (resp.data.code === 200) {
+              let nodeUser = resp.data.data.rows ? resp.data.data.rows : resp.data.data
+              nodeUser.forEach(item => {
+                if ((!userIdSet.has(item.userId) && userPermScope.includes(item.userId)) || userPermScope.length <= 0 || !userPermScope[0]) {
+                  userIdSet.add(item.userId)
+                  treeUserCenters.push({
+                    userId: item.userId,
+                    userName: item.userName,
+                    nameItem: item.superiorOrgName,
+                    organName: item.organName
+                  })
+                }
+              })
+            }
+
+          })
+
+        })
+      }
+
+      self.treeUserCenterValue = treeUserCenters
+    },
+
+    // 人员选中
+    getReadingRangeUser(row) {
+      let self = this
+      self.userNum = '2'
+      if (row.length > self.selectedKeys.length) {
+        // 用户选择了新人员
+        self.treeUserValue = row
+        self.selectedKeys = row
+
+        let index = row.length - 1
+        let organName = row[index]
+
+        if (!self.countersignersTagsData.includes(organName)) {
+          self.countersignersTagsData.push(organName)
+        }
+
+        self.organChange(self.countersignersTagsData)
+
+      } else if (row.length < self.selectedKeys.length) {
+        // 用户取消了选择
+        let diff = self.selectedKeys.find(item => !row.includes(item))
+
+        // 从 countersignersTagsData 中移除取消的用户
+        if (diff) {
+          self.countersignersTagsData = self.countersignersTagsData.filter(item => item !== diff)
+          self.selectedKeys = row // 更新选中数据
+        }
+      }
+    },
+
+    //数据初始化？
+    organTreeRedis(row, readingRange) {
+      let organIds = []
+      if (readingRange.length > 0) {
+        readingRange[0].forEach(item => {
+          organIds.push(item.organId)
+        })
+      }
+      ajax.get(this.smartFlowServerContext + '/manage/user/getAllUsersInfo', {
+          params: {
+            organIds: organIds.join(','),
+            permScopeList: row,
+            orgTreeType: this.organTreeType
+          }
+        }
+      ).then(resp => {
+        if (resp.data.code === '200') {
+          for (let key in resp.data.data) {
+            const dataArr = [[key, resp.data.data[key]]]
+            for (let i = 0; i < dataArr.length; i++) {
+              const [key, value] = dataArr[i]
+              this.$set(this.organTree.userMap, key, value)
+            }
+          }
+        }
+      })
+
+    },
+
+    clearCache() {
+      this.readingRangeBM = []
+      this.readingRange = []
+      this.roleList = []
+      this.readingRangePost = []
+      this.treeUserCenterValue = []
+      this.treePostCenterValue = []
+      this.treeValueBM.forEach(item => {
+        item.checked = false
+      })
+      this.treeValueBM = []
+      this.treeUserValue = []
+      //角色集合
+      this.noticeRoleList = []
+      this.noticeRoleNameList = []
+      this.selectedKeys = []
+      //岗位集合
+      this.postList = []
+      this.treePostValue = []
+      this.processPostList = []
+      this.treeLength = 0
+      this.countersignersTagsData = []
+      this.postKeys = []
+      //组织类型
+      this.readingRangeOrgType = []
+      this.readingRangeOrgType.forEach(item => {
+        item.checked = false
+      })
+      this.treeOrgTypeValue = []
+    },
+    getSystemConfig() {
+      const self = this
+      ajax.get(self.smartFlowServerContext + '/anon/systemConfig/getSystemConfig').then(function (resp) {
+        const result = resp.data
+        if (result && result.code === '200') {
+          self.ucAdapterType = result.data.ucAdapterType
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    //数据初始化
+    toggleShowHelpBox(permScope, inputValue, organTreeType, id) {
+      this.clearCache()
+      this.id = id
+      this.permScope = permScope
+      this.organTreeType = organTreeType
+      // this.organTreeRedis(this.permScope)
+      if (inputValue) {
+        //加入已选择的数据
+        this.getUser(inputValue)
+      }
+      if (this.permScope == 'all') {
+        this.getRootOrganTree(organTreeType)
+        this.ucAdapterType === 'sc' ? this.getReadingRangeOrgType(permScope, organTreeType) : ''
+      } else {
+        this.getReadingRange(this.permScope, this.organTreeType)
+      }
+
+    },
+
+    showUserDetail(item) {
+      if (item.organName) {
+        return `(${item.organName} )`
+      }
+    },
+    dataNameClick(data) {
+      this.dataName = data
+    },
+  },
+
+  watch: {
+    countersignersTagsData: {
+      handler(newVal, oldVal) {
+        let organ = []
+        let names = []
+        let organs = []
+        this.treeValueBM.forEach(item => {
+          organ.push(item.code)
+          names.push(item.name)
+          organs.push(item.code + ':' + item.name)
+        })
+        let nameValue = []
+        let users = []
+        this.treeUserValue.forEach(item => {
+          const parts = item.split(',')
+          nameValue.push(parts[0])
+          names.push(parts[1])
+          users.push(parts[0] + ':' + parts[1])
+        })
+        let roleList = []
+        let roles = []
+        this.noticeRoleList.forEach(item => {
+          roleList.push(item.split(',')[0])
+          names.push(item.split(',')[1])
+          roles.push(item.split(',')[0] + ':' + item.split(',')[1])
+        })
+        let postList = []
+        let positions = []
+        this.treePostValue.forEach(item => {
+          postList.push(item.split(',')[0])
+          names.push(item.split(',')[1])
+          positions.push(item.split(',')[0] + ':' + item.split(',')[1])
+        })
+        let orgTypeList = []
+        let orgTypes = []
+        this.treeOrgTypeValue.forEach(item => {
+          orgTypeList.push(item.bizTypeCode)
+          names.push(item.typeName)
+          orgTypes.push(item.bizTypeCode + ':' + item.typeName)
+        })
+        let value = 'O:' + organ.join(';') + ',' + 'U:' + nameValue.join(';') + ',' + 'P:' + postList.join(';') + ',' + 'R:' + roleList.join(';') + ',' + 'RP:,T:' + orgTypeList.join(';')
+        let nameStr = names.join(',')
+        let detail = {
+          organs: organs.join(','),
+          users: users.join(','),
+          roles: roles.join(','),
+          positions: positions.join(','),
+          types: orgTypes.join(','),
+        }
+        this.$emit('update-cand-groups', value, nameStr, detail, this.item.id)
+      },
+      deep: true // 深度监听数组的变化
+    }
+  }
+}
+</script>
+
+<style scoped>
+.relativePositionAddButton {
+  float: right;
+  margin-top: 20px;
+}
+
+.relativePositionRemoveButton {
+  float: right;
+  margin: 2px;
+}
+
+.cont {
+  display: flex;
+  justify-content: left;
+  margin-top: 10px;
+  border: 1px solid #cecece;
+  padding: 10px;
+}
+
+.contLeft {
+  flex: 1; /* 让右侧自适应剩余空间 */
+  margin-top: 34px; /* 您原本的33.98px可改为34px */
+  min-height: 350px;
+  overflow: auto; /* 可选，若内容过长也可滚动 */
+}
+
+.contRight {
+  flex: 0 0 50%;
+  margin-top: 33.98px;
+  min-height: 350px;
+}
+
+.checkbox-container {
+  display: flex;
+  flex-direction: column;
+  line-height: 30px;
+}
+
+.overflowAuto {
+  min-height: 350px;
+  overflow-y: auto;
+}
+
+.contLeftTwo {
+  flex: none; /* 改为none，这样不按照flex比例缩放 */
+  width: 250px; /* 固定宽度或max-width */
+  margin-right: 10px;
+  overflow: auto; /* 当内容超过300px宽时出现滚动条 */
+}
+
+
+/deep/ .ivu-checkbox-input {
+  width: 136px;
+}
+
+/deep/ .custom-select {
+  width: 100% !important;
+}
+
+/deep/ .custom-select .ivu-select {
+  height: 80px; /* 控制总体高度 */
+  min-height: 80px;
+  line-height: normal; /* 避免行高过大导致居中 */
+  box-sizing: border-box;
+}
+
+/deep/ .custom-select .ivu-select-input {
+  height: auto !important;
+  line-height: normal !important;
+  padding: 0 !important;
+  margin-top: 0 !important;
+
+}
+
+/deep/ .custom-select .ivu-select-selection {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  align-items: flex-start !important;
+  height: 80px; /* 与上面的高度一致 */
+  padding: 8px !important;
+  line-height: normal !important;
+  overflow-y: auto;
+}
+
+/deep/ .custom-select .ivu-select-selection__choice {
+  margin: 0 5px 5px 0;
+  vertical-align: top;
+}
+
+/* 可选：调整下拉箭头的位置 */
+/deep/ .custom-select .ivu-select-arrow {
+  display: none;
+}
+
+.searchable-select-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.search-icon {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  zoom: 120%;
+  transform: translateY(100%);
+  color: #999; /* 根据需要调整图标颜色 */
+  pointer-events: none; /* 确保点击图标不会影响选择操作 */
+}
+
+</style>