refactor: 重构用户选择器组件

src/views/system/notice/page/add.vue

@@ -20,25 +20,55 @@
     <div class="detail_content" style="display: flex; flex-direction: column;">
       <GiForm ref="formRef" v-model="form" :options="options" :columns="columns">
         <template #noticeUsers>
-          <UserSelect v-model:value="form.noticeUsers" :multiple="true" class="w-full" />
+          <a-select
+            v-model="form.noticeUsers"
+            :options="userList"
+            multiple
+            :max-tag-count="4"
+            :allow-clear="true"
+          />
+          <a-tooltip content="选择用户">
+            <a-button @click="onOpenSelectUser">
+              <template #icon>
+                <icon-plus />
+              </template>
+            </a-button>
+          </a-tooltip>
         </template>
       </GiForm>
       <div style="flex: 1;">
         <AiEditor v-model="form.content" />
       </div>
     </div>
+
+    <a-modal
+      v-model:visible="visible"
+      title="用户选择"
+      :mask-closable="false"
+      :esc-to-close="false"
+      :width="width >= 1350 ? 1350 : '100%'"
+      draggable
+      @close="reset"
+    >
+      <UserSelect v-if="visible" ref="UserSelectRef" v-model:value="form.noticeUsers" @select-user="onSelectUser" />
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="tsx">
 import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { ref } from 'vue'
 import AiEditor from '../components/edit/index.vue'
 import { useTabsStore } from '@/stores'
 import { type Columns, GiForm, type Options } from '@/components/GiForm'
 import { addNotice, getNotice, updateNotice } from '@/apis/system'
 import { useForm } from '@/hooks'
 import { useDict } from '@/hooks/app'
+import { listUserDict } from '@/apis'
+import type { LabelValueState } from '@/types/global'
 
+const { width } = useWindowSize()
 const { notice_type } = useDict('notice_type')
 const containerRef = ref<HTMLElement | null>()
 const tabsStore = useTabsStore()
@@ -84,7 +114,6 @@ const columns: Columns = reactive([
     props: {
       showTime: true,
     },
-
   },
   {
     label: '终止时间',
@@ -104,23 +133,27 @@ const columns: Columns = reactive([
   {
     label: '指定用户',
     field: 'noticeUsers',
-    type: 'input',
+    type: 'select',
     hide: () => {
       return form.noticeScope === 1
     },
     rules: [{ required: true, message: '请选择指定用户' }],
   },
-
 ])
+
 // 修改
 const onUpdate = async (id: string) => {
   resetForm()
   const res = await getNotice(id)
   Object.assign(form, res.data)
 }
+
+// 返回
 const onBack = () => {
   tabsStore.closeCurrent(route.path)
 }
+
+// 发布
 const onReleased = async () => {
   const isInvalid = await formRef.value?.formRef?.validate()
   if (isInvalid) return false
@@ -141,11 +174,34 @@ const onReleased = async () => {
     return false
   }
 }
-onMounted(() => {
+
+// 打开用户选择窗口
+const visible = ref(false)
+const onOpenSelectUser = () => {
+  visible.value = true
+}
+
+const UserSelectRef = ref()
+// 重置
+const reset = () => {
+  UserSelectRef.value?.onClearSelected()
+}
+
+// 用户选择回调
+const onSelectUser = (value: string[]) => {
+  form.noticeUsers = value
+  formRef.value?.formRef?.validateField('noticeUsers')
+}
+
+const userList = ref<LabelValueState[]>([])
+onMounted(async () => {
   // 当id存在与type为edit时，执行修改操作
   if (id && type === 'edit') {
     onUpdate(id as string)
   }
+  // 获取所有用户
+  const { data } = await listUserDict()
+  userList.value = data
 })
 </script>