From 21eb71d35d4d60dc78f1f9766f75adea4abc3f2d Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Thu, 16 May 2024 17:13:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=98=8E=E7=BB=86=E8=A1=A8=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E9=80=89=E4=BA=BA=E7=BB=84=E4=BB=B6=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E5=B0=86=E6=96=87=E5=AD=97=E9=83=A8=E5=88=86=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E5=88=B0=E7=8B=AC=E7=AB=8B=E5=AD=97=E6=AE=B5=EF=BC=8C=E4=BB=A5?=
 =?UTF-8?q?=E5=8A=A0=E5=BF=AB=E6=B8=B2=E6=9F=93=E9=80=9F=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SelectDepartmentV2.vue     |  17 +-
 .../Form/src/components/SelectUserV2.vue      | 836 +++++++++---------
 src/utils/event/design.ts                     |  33 +-
 src/utils/stringUtil.js                       |  20 +
 4 files changed, 479 insertions(+), 427 deletions(-)
 create mode 100644 src/utils/stringUtil.js

diff --git a/src/components/Form/src/components/SelectDepartmentV2.vue b/src/components/Form/src/components/SelectDepartmentV2.vue
index e032349..2c395ea 100644
--- a/src/components/Form/src/components/SelectDepartmentV2.vue
+++ b/src/components/Form/src/components/SelectDepartmentV2.vue
@@ -34,7 +34,7 @@
     const emits = defineEmits(['change', 'changeNames', 'close', 'options-change', 'update:value']);
     import { getDepartmentTrees } from '/@/api/system/department';
     import { CloseOutlined } from '@ant-design/icons-vue';
-    import { camelCaseString } from '/@/utils/event/design';
+    import { camelCaseString } from '/@/utils/stringUtil';
 
     const visible = ref(false);
     const departNames = ref();
@@ -76,7 +76,7 @@
         (val) => {
             if (val) {
                 if (props.sepTextField && !valChanged.value) {
-                    departNames.value = props.row[camelCaseString(props.sepTextField, true)];
+                    departNames.value = props.row[camelCaseString(props.sepTextField)];
                 } else {
                     getDefaultList(val);
                 }
@@ -99,9 +99,14 @@
         let nameList = selectedNodes.value.map((item) => item.name);
         const names = nameList.join(',');
         departNames.value = names;
-        if (props.sepTextField) {
-            props.row[camelCaseString(props.sepTextField, true)] = names;
+        updateSepTextField(names);
+    }
+
+    function updateSepTextField(v) {
+        if (!props.sepTextField || !props.row) {
+            return;
         }
+        props.row[props.sepTextField] = v;
     }
 
     function resetTreeList(list) {
@@ -142,9 +147,7 @@
         const ids = idList.join(',');
         emits('update:value', ids);
         departNames.value = names;
-        if (props.sepTextField) {
-            props.row[camelCaseString(props.sepTextField, true)] = names;
-        }
+        updateSepTextField(names);
     }
 
     function deleteItem() {
diff --git a/src/components/Form/src/components/SelectUserV2.vue b/src/components/Form/src/components/SelectUserV2.vue
index a30e4f9..c99723c 100644
--- a/src/components/Form/src/components/SelectUserV2.vue
+++ b/src/components/Form/src/components/SelectUserV2.vue
@@ -1,423 +1,455 @@
 <template>
-  <div :class="{ disabled }" class="form-select-user" @click="show">
-    <a-input v-model:value="userNames" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
-      <template v-if="prefix" #prefix>
-        <Icon :icon="prefix" />
-      </template>
-      <template v-if="suffix" #suffix>
-        <Icon :icon="suffix" />
-      </template>
-    </a-input>
-    <ModalPanel :visible="visible" :width="900" :title="t('选择人员')" @submit="submit" @close="close"
-      class="select-user-model">
-      <div class="select-user">
-        <div class="select-user-left">
-          <a-tabs v-model:activeKey="activeKey" :tabBarGutter="20">
-            <a-tab-pane key="department" tab="组织架构">
-            </a-tab-pane>
-            <a-tab-pane key="allPerson" tab="所有人">
-            </a-tab-pane>
-          </a-tabs>
-          <div class="person-search">
-            <a-form-item label="" name="name">
-              <a-input v-model:value="selectPersonNames" :placeholder="searchPlaceholder" :size="size"
-                class="search-input">
-              </a-input>
-            </a-form-item>
-          </div>
-          <div class="select-user-box" v-show="activeKey === 'department'">
-            <div class="department-tree">
-              <a-spin class="loading-box" :spinning="treeLoading" />
-              <div class="department-tree-box">
-                <!-- <div class="department-tree-title sub-title">
-                  组织
-                </div> -->
-                <SelectDepartmentTreeV2 @changeValue="departChange" class="tree-select"
-                  v-if="visible && activeKey === 'department'" @queryCompleted="departCompleted">
-                </SelectDepartmentTreeV2>
-              </div>
+    <div :class="{ disabled }" class="form-select-user" @click="show">
+        <a-input v-model:value="userNames" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
+            <template v-if="prefix" #prefix>
+                <Icon :icon="prefix" />
+            </template>
+            <template v-if="suffix" #suffix>
+                <Icon :icon="suffix" />
+            </template>
+        </a-input>
+        <ModalPanel :title="t('选择人员')" :visible="visible" :width="900" class="select-user-model" @close="close" @submit="submit">
+            <div class="select-user">
+                <div class="select-user-left">
+                    <a-tabs v-model:activeKey="activeKey" :tabBarGutter="20">
+                        <a-tab-pane key="department" tab="组织架构"></a-tab-pane>
+                        <a-tab-pane key="allPerson" tab="所有人"></a-tab-pane>
+                    </a-tabs>
+                    <div class="person-search">
+                        <a-form-item label="" name="name">
+                            <a-input v-model:value="selectPersonNames" :placeholder="searchPlaceholder" :size="size" class="search-input"></a-input>
+                        </a-form-item>
+                    </div>
+                    <div v-show="activeKey === 'department'" class="select-user-box">
+                        <div class="department-tree">
+                            <a-spin :spinning="treeLoading" class="loading-box" />
+                            <div class="department-tree-box">
+                                <SelectDepartmentTreeV2 v-if="visible && activeKey === 'department'" class="tree-select" @changeValue="departChange" @queryCompleted="departCompleted"></SelectDepartmentTreeV2>
+                            </div>
+                        </div>
+                        <div class="user-select-box">
+                            <SelectUserListV2 :data="searchDepartMemberList" emptyDescription="暂无人员" @selectId="changeDepMemberSelect"></SelectUserListV2>
+                            <div v-if="false" class="user-select-pagination">
+                                <a-pagination v-model:current="searchDepartMemberParams.limit" :pageSize="searchDepartMemberParams.size" :total="searchDepartMemberTotal" />
+                            </div>
+                        </div>
+                    </div>
+                    <div v-show="activeKey === 'allPerson'" class="all-user-select-box">
+                        <SelectUserListV2 :data="searchAllMemberList" @selectId="changeMemberSelect"></SelectUserListV2>
+                        <div v-if="searchAllMemberTotal > 25" class="all-user-select-pagination">
+                            <a-form-item label="" name="pagination">
+                                <a-pagination
+                                    v-model:current="searchAllMemberParams.limit"
+                                    :pageSize="searchAllMemberParams.size"
+                                    :show-size-changer="false"
+                                    :show-total="(total) => `共${total}人`"
+                                    :total="searchAllMemberTotal"
+                                    hideOnSinglePage
+                                    showLessItems
+                                    size="small"
+                                    @change="changeAllMemberPage"
+                                />
+                            </a-form-item>
+                        </div>
+                    </div>
+                </div>
+                <div class="select-user-right">
+                    <!-- <div class="selected-user-title sub-title">
+                      已选列表
+                    </div> -->
+                    <SelectUserListV2 :data="selectedMemberList" canDel emptyDescription="暂无已选择人员，<br> 请从左侧添加人员" viewList @delId="delMember"></SelectUserListV2>
+                </div>
             </div>
-            <div class="user-select-box">
-              <!-- <div class="user-select-title sub-title">
-                可选列表
-              </div> -->
-              <SelectUserListV2 :data="searchDepartMemberList" @selectId="changeDepMemberSelect"
-                emptyDescription="暂无人员">
-              </SelectUserListV2>
-              <div class="user-select-pagination" v-if="false">
-                <a-pagination v-model:current="searchDepartMemberParams.limit" :pageSize="searchDepartMemberParams.size"
-                  :total="searchDepartMemberTotal" />
-              </div>
-            </div>
-          </div>
-          <div class="all-user-select-box" v-show="activeKey === 'allPerson'">
-            <!-- <div class="all-user-select-title sub-title">
-              可选列表
-            </div> -->
-            <SelectUserListV2 :data="searchAllMemberList" @selectId="changeMemberSelect"></SelectUserListV2>
-            <div class="all-user-select-pagination" v-if="searchAllMemberTotal > 25">
-              <a-form-item label="" name="pagination">
-                <a-pagination size="small" showLessItems :total="searchAllMemberTotal" :show-size-changer="false"
-                  v-model:current="searchAllMemberParams.limit" :pageSize="searchAllMemberParams.size"
-                  @change="changeAllMemberPage" hideOnSinglePage :show-total="total => `共${total}人`" />
-              </a-form-item>
-            </div>
-          </div>
-        </div>
-        <div class="select-user-right">
-          <!-- <div class="selected-user-title sub-title">
-            已选列表
-          </div> -->
-          <SelectUserListV2 :data="selectedMemberList" viewList canDel @delId="delMember"
-            emptyDescription="暂无已选择人员，<br> 请从左侧添加人员">
-          </SelectUserListV2>
-        </div>
-      </div>
-
-    </ModalPanel>
-  </div>
+        </ModalPanel>
+    </div>
 </template>
-<script lang="ts" setup>
-import { watch, ref } from 'vue';
-import { cloneDeep } from 'lodash-es';
-import { useI18n } from '/@/hooks/web/useI18n';
-import { ModalPanel } from '/@/components/ModalPanel/index';
-import { getUserPageListNew, getUserMulti } from '/@/api/system/user';
-import SelectDepartmentTreeV2 from './SelectDepartmentTreeV2.vue'
-import SelectUserListV2 from './SelectUserListV2.vue';
-const emits = defineEmits(['update:value', 'selectedId', 'change']);
-const { t } = useI18n();
-const userNames = ref('')
-const treeLoading = ref(true)
-const visible = ref(false)
-const activeKey = ref('department')
-const selectedMemberList = ref([])
-const selectPersonNames = ref('')
+<script setup>
+    import { watch, ref } from 'vue';
+    import { cloneDeep } from 'lodash-es';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { ModalPanel } from '/@/components/ModalPanel/index';
+    import { getUserPageListNew, getUserMulti } from '/@/api/system/user';
+    import SelectDepartmentTreeV2 from './SelectDepartmentTreeV2.vue';
+    import SelectUserListV2 from './SelectUserListV2.vue';
+    import { camelCaseString } from '/@/utils/stringUtil';
 
-const props = defineProps({
-  value: {
-    type: String,
-    default: ''
-  },
-  prefix: String,
-  suffix: String,
-  placeholder: String,
-  readonly: Boolean,
-  disabled: Boolean,
-  size: String,
-  multiple: {
-    type: Boolean,
-    default: true
-  }
-});
-let timeoutId = null;
-let resetMemberList = []
-const searchPlaceholder = '请输入姓名或工号搜索'
-// 防止输入多次调用搜索接口导致问题，使用防抖
-watch(selectPersonNames, (newValue) => {
-  if (newValue && activeKey.value !== 'allPerson') {
-    activeKey.value = 'allPerson'
-  }
-  if (timeoutId) {
-    clearTimeout(timeoutId);
-  }
+    const emits = defineEmits(['update:value', 'selectedId', 'change']);
+    const { t } = useI18n();
+    const userNames = ref('');
+    const treeLoading = ref(true);
+    const visible = ref(false);
+    const activeKey = ref('department');
+    const selectedMemberList = ref([]);
+    const selectPersonNames = ref('');
+    const valChanged = ref(false);
 
-  timeoutId = setTimeout(() => {
-    // 调用搜索接口
-    console.log('执行搜索API操作, 查询参数为:', newValue);
-    searchNameChanged(newValue)
-  }, 1000);
+    const props = defineProps({
+        value: {
+            type: String,
+            default: ''
+        },
+        prefix: String,
+        suffix: String,
+        placeholder: String,
+        readonly: Boolean,
+        disabled: Boolean,
+        size: String,
+        multiple: {
+            type: Boolean,
+            default: true
+        },
+        row: Object, // 行数据，在表格里用的到
+        sepTextField: String // 将文本表示存储在独立字段
+    });
+    let timeoutId = null;
+    let resetMemberList = [];
+    const searchPlaceholder = '请输入姓名或工号搜索';
 
-});
-watch(activeKey, (newValue) => {
-  searchAllMemberList.value = []
-  searchAllMemberTotal.value = 0
-  searchDepartMemberList.value = []
-  treeLoading.value = true
-  if (newValue !== 'allPerson') {
-    selectPersonNames.value = ''
-  } else {
-    if (!timeoutId) {
-      searchNameChanged('')
+    function updateSepTextField(v) {
+        if (!props.sepTextField || !props.row) {
+            return;
+        }
+        props.row[camelCaseString(props.sepTextField)] = v;
     }
-  }
-})
-watch(props, async () => {
-  if (props.value && !resetMemberList.length) {
-    const list = await getUserMulti(props.value)
-    selectedMemberList.value = list
-    resetMemberList = cloneDeep(list)
-    const nameList = resetMemberList.map(item => {
-      return item.name
-    })
-    userNames.value = nameList.join(',')
-  }
-}, {
-  immediate: true
-})
-const searchDepartMemberParams = ref({
-  limit: 1,
-  size: 10000,
-  departmentId: ''
-})
-const searchDepartMemberTotal = ref(0)
-const searchDepartMemberList = ref()
-const searchAllMemberParams = ref({
-  limit: 1,
-  size: 25,
-  isSearchAll: true,
-  keyword: ''
-})
-const searchAllMemberTotal = ref(0)
-const searchAllMemberList = ref()
-async function departChange(e) {
-  searchDepartMemberParams.value.departmentId = e[0].id
-  let res = await getUserList(searchDepartMemberParams.value)
-  searchDepartMemberTotal.value = res.total
-  searchDepartMemberList.value = setSelected(res.list)
-}
-async function searchNameChanged(val) {
-  searchAllMemberParams.value.limit = 1
-  searchAllMemberParams.value.keyword = val
-  getAllMemberList()
-}
-async function getAllMemberList() {
-  let res = await getUserList(searchAllMemberParams.value)
-  searchAllMemberTotal.value = res.total
-  searchAllMemberList.value = setSelected(res.list)
 
-}
-function setSelected(list) {
-  const idList = selectedMemberList.value.map(item => item.id)
-  const ids = idList.join(',')
-  list.forEach(item => {
-    if (ids?.includes(item.id)) {
-      item.selected = true
-    } else {
-      item.selected = false
-    }
-  })
-  return list
-}
-async function getUserList(params) {
-  return await getUserPageListNew(params)
-}
-function departCompleted() {
-  treeLoading.value = false
-}
-function changeDepMemberSelect(id) {
-  let list = searchDepartMemberList.value
-  searchDepartMemberList.value = handleListSelected(list, id)
-}
-function changeMemberSelect(id) {
-  let list = searchAllMemberList.value
-  searchAllMemberList.value = handleListSelected(list, id)
-}
-function handleListSelected(list, id) {
-  let selected = false
-  let selectedItem
-  list.forEach(item => {
-    if (item.id === id) {
-      item.selected = !!!item.selected
-      selected = item.selected
-      selectedItem = item
-    }
-  })
-  let memberList = selectedMemberList.value
-  if (selected) {
-    memberList.push(selectedItem)
-    selectedMemberList.value = memberList
-  } else {
-    selectedMemberList.value = memberList.filter(m => m.id !== id)
-  }
-  return list
-}
+    // 防止输入多次调用搜索接口导致问题，使用防抖
+    watch(selectPersonNames, (newValue) => {
+        if (newValue && activeKey.value !== 'allPerson') {
+            activeKey.value = 'allPerson';
+        }
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
 
-function changeAllMemberPage(page) {
-  searchAllMemberParams.value.limit = page
-  getAllMemberList()
-}
-function show() {
-  visible.value = true
-  treeLoading.value = true
-}
-function delMember(id) {
-  if (activeKey.value === 'department') {
-    changeDepMemberSelect(id)
-  } else {
-    changeMemberSelect(id)
-  }
-}
-function submit() {
-  let idsList = []
-  let namesList = []
-  selectedMemberList.value.forEach(item => {
-    idsList.push(item.id)
-    namesList.push(item.name)
-  })
-  const ids = idsList.join(',')
-  const names = namesList.join(',')
-  resetMemberList = cloneDeep(selectedMemberList.value)
-  userNames.value = names
-  emits('update:value', ids);
-  emits('selectedId', ids);
-  emits('change', ids, selectedMemberList.value);
-  close();
-}
-function close() {
-  selectedMemberList.value = cloneDeep(resetMemberList)
-  visible.value = false;
-  activeKey.value = 'department'
-  searchDepartMemberList.value = []
-  searchAllMemberList.value = []
-}
+        timeoutId = setTimeout(() => {
+            // 调用搜索接口
+            console.log('执行搜索API操作, 查询参数为:', newValue);
+            searchNameChanged(newValue);
+        }, 1000);
+    });
+    watch(activeKey, (newValue) => {
+        searchAllMemberList.value = [];
+        searchAllMemberTotal.value = 0;
+        searchDepartMemberList.value = [];
+        treeLoading.value = true;
+        if (newValue !== 'allPerson') {
+            selectPersonNames.value = '';
+        } else {
+            if (!timeoutId) {
+                searchNameChanged('');
+            }
+        }
+    });
+    watch(
+        props,
+        async () => {
+            if (props.value && !valChanged.value && props.sepTextField) {
+                const idArr = props.value.split(',');
+                const valStr = props.row[camelCaseString(props.sepTextField)];
+                const valArr = valStr.split(',');
+                userNames.value = valStr;
+                const initValue = idArr.map((id, index) => {
+                    return {
+                        id,
+                        name: valArr[index]
+                    };
+                });
+                selectedMemberList.value = initValue;
+                resetMemberList = cloneDeep(initValue);
+                return;
+            }
+            if (props.value && !resetMemberList.length) {
+                const list = await getUserMulti(props.value);
+                selectedMemberList.value = list;
+                resetMemberList = cloneDeep(list);
+                const nameList = resetMemberList.map((item) => {
+                    return item.name;
+                });
+                userNames.value = nameList.join(',');
+            }
+        },
+        {
+            immediate: true
+        }
+    );
+    const searchDepartMemberParams = ref({
+        limit: 1,
+        size: 10000,
+        departmentId: ''
+    });
+    const searchDepartMemberTotal = ref(0);
+    const searchDepartMemberList = ref([]);
+    const searchAllMemberParams = ref({
+        limit: 1,
+        size: 25,
+        isSearchAll: true,
+        keyword: ''
+    });
+    const searchAllMemberTotal = ref(0);
+    const searchAllMemberList = ref([]);
+
+    async function departChange(e) {
+        searchDepartMemberParams.value.departmentId = e[0].id;
+        let res = await getUserList(searchDepartMemberParams.value);
+        searchDepartMemberTotal.value = res.total;
+        searchDepartMemberList.value = setSelected(res.list);
+    }
+
+    async function searchNameChanged(val) {
+        searchAllMemberParams.value.limit = 1;
+        searchAllMemberParams.value.keyword = val;
+        getAllMemberList();
+    }
+
+    async function getAllMemberList() {
+        let res = await getUserList(searchAllMemberParams.value);
+        searchAllMemberTotal.value = res.total;
+        searchAllMemberList.value = setSelected(res.list);
+    }
+
+    function setSelected(list) {
+        const idList = selectedMemberList.value.map((item) => item.id);
+        const ids = idList.join(',');
+        list.forEach((item) => {
+            if (ids?.includes(item.id)) {
+                item.selected = true;
+            } else {
+                item.selected = false;
+            }
+        });
+        return list;
+    }
+
+    async function getUserList(params) {
+        return await getUserPageListNew(params);
+    }
+
+    function departCompleted() {
+        treeLoading.value = false;
+    }
+
+    function changeDepMemberSelect(id) {
+        let list = searchDepartMemberList.value;
+        searchDepartMemberList.value = handleListSelected(list, id);
+    }
+
+    function changeMemberSelect(id) {
+        let list = searchAllMemberList.value;
+        searchAllMemberList.value = handleListSelected(list, id);
+    }
+
+    function handleListSelected(list, id) {
+        let selected = false;
+        let selectedItem;
+        list.forEach((item) => {
+            if (item.id === id) {
+                item.selected = !!!item.selected;
+                selected = item.selected;
+                selectedItem = item;
+            }
+        });
+        let memberList = selectedMemberList.value;
+        if (selected) {
+            memberList.push(selectedItem);
+            selectedMemberList.value = memberList;
+        } else {
+            selectedMemberList.value = memberList.filter((m) => m.id !== id);
+        }
+        return list;
+    }
+
+    function changeAllMemberPage(page) {
+        searchAllMemberParams.value.limit = page;
+        getAllMemberList();
+    }
+
+    function show() {
+        visible.value = true;
+        treeLoading.value = true;
+    }
+
+    function delMember(id) {
+        if (activeKey.value === 'department') {
+            changeDepMemberSelect(id);
+        } else {
+            changeMemberSelect(id);
+        }
+    }
+
+    function submit() {
+        let idsList = [];
+        let namesList = [];
+        selectedMemberList.value.forEach((item) => {
+            idsList.push(item.id);
+            namesList.push(item.name);
+        });
+        const ids = idsList.join(',');
+        const names = namesList.join(',');
+        resetMemberList = cloneDeep(selectedMemberList.value);
+        userNames.value = names;
+        updateSepTextField(names);
+        emits('update:value', ids);
+        emits('selectedId', ids);
+        emits('change', ids, selectedMemberList.value);
+        valChanged.value = false;
+        close();
+    }
+
+    function close() {
+        selectedMemberList.value = cloneDeep(resetMemberList);
+        visible.value = false;
+        activeKey.value = 'department';
+        searchDepartMemberList.value = [];
+        searchAllMemberList.value = [];
+    }
 </script>
 <style lang="less">
-.select-user-model {
-  .content {
-    margin: 0 !important;
-  }
-}
+    .select-user-model {
+        .content {
+            margin: 0 !important;
+        }
+    }
 </style>
 <style lang="less" scoped>
-.sub-title {
-  height: 30px;
-  padding: 0 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: rgba(144, 147, 153, 0.7);
-}
-
-
-.select-user {
-  display: flex;
-  height: 100%;
-  // border: 1px solid #eaeaea;
-
-  .select-user-left {
-    width: 75%;
-    height: 100%;
-    border-right: 1px solid #eaeaea;
-    display: flex;
-    flex-direction: column;
-
-    :deep(.ant-tabs-nav) {
-      margin-bottom: 0;
-
-      .ant-tabs-nav-wrap {
-        padding-left: 10px;
-      }
-    }
-
-    .person-search {
-      padding: 4px;
-
-      :deep(.ant-form-item) {
-        margin: 0;
-      }
-
-      .search-input {
-        border: none;
-      }
-    }
-
-    .select-user-box {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      border-top: 1px solid #eaeaea;
-
-      .department-tree {
-        position: relative;
-        width: 65%;
-        height: 100%;
-        border-right: 1px solid #eaeaea;
-
-        .loading-box {
-          position: absolute;
-          top: 49%;
-          left: 49%;
-        }
-
-        .department-tree-box {
-          // overflow: scroll;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          padding: 4px 8px;
-
-          .department-tree-title {}
-
-          .tree-select {
-            flex: 1;
-            min-height: 0;
-            overflow-y: scroll;
-          }
-        }
-      }
-
-      .user-select-box {
-        flex: 1;
-        min-height: 0;
-        height: 100%;
+    .sub-title {
+        height: 30px;
+        padding: 0 8px;
         display: flex;
-        flex-direction: column;
-
-        .user-select-title {}
-
-        .user-select-list {
-          flex: 1;
-          min-height: 0;
-          overflow-y: scroll;
-
-          .user-select-item {
-            height: 30px;
-            padding: 0 4px;
-          }
-        }
-
-        .user-select-pagination {
-          height: 40px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-
-    .all-user-select-box {
-      flex: 1;
-      min-height: 0;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-
-      .all-user-select-title {}
-
-      .all-user-select-pagination {
-        height: 40px;
-        display: flex;
-        justify-content: center;
         align-items: center;
-
-        .ant-form-item {
-          margin-bottom: 0;
-        }
-      }
+        justify-content: space-between;
+        color: rgba(144, 147, 153, 0.7);
     }
 
+    .select-user {
+        display: flex;
+        height: 100%;
+        // border: 1px solid #eaeaea;
 
-  }
+        .select-user-left {
+            width: 75%;
+            height: 100%;
+            border-right: 1px solid #eaeaea;
+            display: flex;
+            flex-direction: column;
 
-  .select-user-right {
-    width: 25%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+            :deep(.ant-tabs-nav) {
+                margin-bottom: 0;
 
-    .selected-user-title {}
-  }
-}
+                .ant-tabs-nav-wrap {
+                    padding-left: 10px;
+                }
+            }
+
+            .person-search {
+                padding: 4px;
+
+                :deep(.ant-form-item) {
+                    margin: 0;
+                }
+
+                .search-input {
+                    border: none;
+                }
+            }
+
+            .select-user-box {
+                flex: 1;
+                min-height: 0;
+                display: flex;
+                border-top: 1px solid #eaeaea;
+
+                .department-tree {
+                    position: relative;
+                    width: 65%;
+                    height: 100%;
+                    border-right: 1px solid #eaeaea;
+
+                    .loading-box {
+                        position: absolute;
+                        top: 49%;
+                        left: 49%;
+                    }
+
+                    .department-tree-box {
+                        // overflow: scroll;
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        padding: 4px 8px;
+
+                        .department-tree-title {
+                        }
+
+                        .tree-select {
+                            flex: 1;
+                            min-height: 0;
+                            overflow-y: scroll;
+                        }
+                    }
+                }
+
+                .user-select-box {
+                    flex: 1;
+                    min-height: 0;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+
+                    .user-select-title {
+                    }
+
+                    .user-select-list {
+                        flex: 1;
+                        min-height: 0;
+                        overflow-y: scroll;
+
+                        .user-select-item {
+                            height: 30px;
+                            padding: 0 4px;
+                        }
+                    }
+
+                    .user-select-pagination {
+                        height: 40px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+            }
+
+            .all-user-select-box {
+                flex: 1;
+                min-height: 0;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+
+                .all-user-select-title {
+                }
+
+                .all-user-select-pagination {
+                    height: 40px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .ant-form-item {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        .select-user-right {
+            width: 25%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            .selected-user-title {
+            }
+        }
+    }
 </style>
diff --git a/src/utils/event/design.ts b/src/utils/event/design.ts
index 94f1835..2b12e65 100644
--- a/src/utils/event/design.ts
+++ b/src/utils/event/design.ts
@@ -27,25 +27,22 @@ export function changeToPinyin(label: string, isUpper?: boolean) {
 
 /* 如果没有下划线，不需要处理
 如果有下划线，用下划线切割，第一个下划线左边的全部小写，后面的首字母大写，首字母后面的全部小写 */
-export function camelCaseString(string: string, skipNoUnderline = false) {
-  if (!string) return;
-  if (skipNoUnderline && string.indexOf('_') < 0) {
-    return string;
-  }
-  const stringLower = string.toLowerCase();
-  const len = stringLower.length;
-  let str = '';
-  for (let i = 0; i < len; i++) {
-    const c = stringLower.charAt(i);
-    if (c === '_') {
-      if (++i < len) {
-        str = str.concat(stringLower.charAt(i).toUpperCase());
-      }
-    } else {
-      str = str.concat(c);
+export function camelCaseString(string: string) {
+    if (!string) return;
+    const stringLower = string.toLowerCase();
+    const len = stringLower.length;
+    let str = '';
+    for (let i = 0; i < len; i++) {
+        const c = stringLower.charAt(i);
+        if (c === '_') {
+            if (++i < len) {
+                str = str.concat(stringLower.charAt(i).toUpperCase());
+            }
+        } else {
+            str = str.concat(c);
+        }
     }
-  }
-  return str;
+    return str;
 }
 
 export async function apiConfigFunc(apiConfig, isCustomForm = false, formModel?, index?) {
diff --git a/src/utils/stringUtil.js b/src/utils/stringUtil.js
new file mode 100644
index 0000000..cca30ae
--- /dev/null
+++ b/src/utils/stringUtil.js
@@ -0,0 +1,20 @@
+export function camelCaseString(string) {
+    if (!string) return;
+    if (string.indexOf('_') < 0) {
+        return string;
+    }
+    const stringLower = string.toLowerCase();
+    const len = stringLower.length;
+    let str = '';
+    for (let i = 0; i < len; i++) {
+        const c = stringLower.charAt(i);
+        if (c === '_') {
+            if (++i < len) {
+                str = str.concat(stringLower.charAt(i).toUpperCase());
+            }
+        } else {
+            str = str.concat(c);
+        }
+    }
+    return str;
+}