no message

src/views/components/MemberModal.vue

@@ -0,0 +1,79 @@
+<template>
+  <BasicModal v-bind="$attrs" title="奖品选择" @ok="handleOk" @register="registerModal">
+    <BasicTable row-key="userId" @register="registerTable" />
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { BasicTable, useTable, BasicColumn, FormSchema } from '/@/components/Table'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { pageOrganizationMember } from '/@/api/staff/staff'
+
+  const tableColumns: BasicColumn[] = [
+    { width: 120, title: '姓名', dataIndex: 'realName' },
+    { width: 160,title: '手机号', dataIndex: 'phone' },
+    { title: '部门', dataIndex: 'departmentName' },
+    { title: '添加时间', dataIndex: 'joinedTime' },
+  ]
+
+  const tableFormSchema: FormSchema[] = [
+    { field: 'name', label: '姓名', component: 'Input', colProps: { span: 9 } },
+    { field: 'phone', label: '手机号', component: 'Input', colProps: { span: 9 } },
+  ]
+
+  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
+    bordered: true,
+    immediate: false,
+    canResize: false,
+    useSearchForm: true,
+    showIndexColumn: true,
+    showTableSetting: false,
+    pagination: true,
+    api: pageOrganizationMember,
+    columns: tableColumns,
+    rowSelection: {
+      type: 'radio',
+    },
+    formConfig: {
+      labelWidth: 80,
+      schemas: tableFormSchema,
+    },
+  })
+
+  const id = ref<string>('')
+  const [registerModal, { setModalProps }] = useModalInner(async (data: any) => {
+    const { record } = data
+    var title = '分配'
+    if(record){
+      id.value = record?.id
+      title = record.allocationStatus == 1 ? '分配' : '重新分配'
+    }
+    setModalProps({
+      minHeight: 50,
+      title,
+      confirmLoading: false,
+      width: '800px',
+    })
+    await reload()
+    await clearSelectedRowKeys()
+  })
+
+  const { createMessage } = useMessage()
+  const emits = defineEmits(['success'])
+  async function handleOk() {
+    const rows = getSelectRows()
+    if (!rows?.length) {
+      createMessage.error('请选择分配人')
+      return
+    }
+    emits('success', {id: id.value, rows})
+  }
+</script>
+
+<style scoped lang="less">
+  :deep(.ant-form) {
+    margin-bottom: 0;
+  }
+</style>

src/views/invite/index/index.vue

@@ -14,17 +14,7 @@
             <RadioButton v-for="item in clueStatusList" :key="item.value" :value="item.value">{{item.label}}</RadioButton>
           </RadioGroup> -->
           <div class="flex-row-center-start">
-            <Popconfirm placement="bottomRight" icon="分配线索" :disabled="datingClueIdList.length == 0" @confirm="allocateList(null)">
-              <template #title>
-                <div class="flex-row-center-start" style="padding: 8px 8px 8px 0px;border-bottom: 1px solid #ddd;min-width: 185px;" v-for="item in memberList" :key="item.userId">
-                  <Checkbox :checked="verifier == item.userId" @change="e => onCheckChange(e, item)">
-                    <span style="color: #333;font-weight: bold;margin-left: 4px;">{{item.realName}}</span>
-                    <span style="color: #666;margin-left: 4px;">({{item.phone}})</span>
-                  </Checkbox>
-                </div>
-              </template>
-              <Button type="primary" danger :disabled="datingClueIdList.length == 0">分配</Button>
-            </Popconfirm>
+            <Button type="primary" danger :disabled="datingClueIdList.length == 0" @click="handleModal(null)">分配</Button>
           </div>
         </div>
       </template>
@@ -34,20 +24,11 @@
       <template #action="{ record }">
         <div class="flex-col-center-start">
           <Button type="primary" style="width: 100px;" @click="toDetail(record)">详情</Button>
-          <Popconfirm placement="topRight" :icon="record.allocationStatus == 1 ? '分配' : '重新分配'" @confirm="allocateList(record.id)">
-            <template #title>
-              <div class="flex-row-center-start" style="padding: 8px 8px 8px 0px;border-bottom: 1px solid #ddd;min-width: 160px;" v-for="item in memberList" :key="item.userId">
-                <Checkbox :checked="verifier == item.userId" @change="e => onCheckChange(e, item)">
-                  <span style="color: #333;font-weight: bold;margin-left: 4px;">{{item.realName}}</span>
-                  <span style="color: #666;margin-left: 4px;">({{item.phone}})</span>
-                </Checkbox>
-              </div>
-            </template>
-            <Button style="width: 100px;margin-top: 8px;" danger>{{record.allocationStatus == 1 ? '分配' : '重新分配'}}</Button>
-          </Popconfirm>
+          <Button style="width: 100px;margin-top: 8px;" danger @click="handleModal(record)">{{record.allocationStatus == 1 ? '分配' : '重新分配'}}</Button>
         </div>
       </template>
     </BasicTable>
+    <MemberModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 
@@ -69,6 +50,7 @@
   import { useModal } from '/@/components/Modal'
   import { BasicTable, useTable, TableAction } from '/@/components/Table'
   import Profile from '../../components/Profile.vue'
+  import MemberModal from '../../components/MemberModal.vue'
   import { getInvitationPage, allocateCluing } from '/@/api/clue'
   import { pageOrganizationMember } from '/@/api/staff/staff'
   import { educationList, maritalList } from '/@/enums/customerEnum'
@@ -147,13 +129,26 @@
   }
 
   const [registerModal, { openModal, closeModal }] = useModal()
-  function handleAdd(excel) {
-    openModal(true, {ifUpdate: excel,})
+  function handleModal(record) {
+    openModal(true, {record})
   }
   // 操作成功
-  function handleSuccess() {
-    closeModal()
-    reload()
+  // 操作成功
+  async function handleSuccess({id, rows}) {
+    var datingClueIdList: string[] = []
+    if(id){
+      datingClueIdList = [id]
+    } else {
+      datingClueIdList = getSelectRowKeys()
+    }
+    try {
+      await allocateCluing({verifier: rows[0].userId, datingClueIdList})
+      createMessage.success(`分配成功`)
+      clearSelectedRowKeys()
+    } finally {
+      closeModal()
+      reload()
+    }
   }
   const { createMessage } = useMessage()
   const router = useRouter()

src/views/invite/list/index.vue

@@ -14,17 +14,7 @@
             <RadioButton v-for="item in clueStatusList" :key="item.value" :value="item.value">{{item.label}}</RadioButton>
           </RadioGroup>
           <div class="flex-row-center-start">
-            <Popconfirm placement="bottom" icon="分配线索" :disabled="datingClueIdList.length == 0" @confirm="allocateList(null)">
-              <template #title>
-                <div class="flex-row-center-start" style="padding: 8px 8px 8px 0px;border-bottom: 1px solid #ddd;" v-for="item in memberList" :key="item.userId">
-                  <Checkbox :checked="verifier == item.userId" @change="e => onCheckChange(e, item)">
-                    <span style="color: #333;font-weight: bold;margin-left: 4px;">{{item.realName}}</span>
-                    <span style="color: #666;margin-left: 4px;">({{item.phone}})</span>
-                  </Checkbox>
-                </div>
-              </template>
-              <Button type="primary" danger :disabled="datingClueIdList.length == 0">分配</Button>
-            </Popconfirm>
+            <Button type="primary" danger :disabled="datingClueIdList.length == 0" @click="handleModal(null)">分配</Button>
             <Button style="margin-left: 16px;" @click="handleAdd(true)">批量导入</Button>
             <Button :type="'primary'" style="margin-left: 16px;" @click="handleAdd(false)">新增</Button>
           </div>
@@ -39,20 +29,11 @@
       <template #action="{ record }">
         <div class="flex-col-center-start">
           <Button style="width: 100px;" @click.stop="toDetail(record)">详情</Button>
-          <Popconfirm placement="topRight" :icon="record.allocationStatus == 1 ? '分配' : '重新分配'" @confirm="allocateList(record.id)">
-            <template #title>
-              <div class="flex-row-center-start" style="padding: 8px 8px 8px 0px;border-bottom: 1px solid #ddd;" v-for="item in memberList" :key="item.userId">
-                <Checkbox :checked="verifier == item.userId" @change="e => onCheckChange(e, item)">
-                  <span style="color: #333;font-weight: bold;margin-left: 4px;">{{item.realName}}</span>
-                  <span style="color: #666;margin-left: 4px;">({{item.phone}})</span>
-                </Checkbox>
-              </div>
-            </template>
-            <Button style="width: 100px;margin-top: 8px;" danger>{{record.allocationStatus == 1 ? '分配' : '重新分配'}}</Button>
-          </Popconfirm>
+          <Button style="width: 100px;margin-top: 8px;" danger @click="handleModal(record)">{{record.allocationStatus == 1 ? '分配' : '重新分配'}}</Button>
         </div>
       </template>
     </BasicTable>
+    <MemberModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 
@@ -67,7 +48,7 @@
 <script setup lang="ts">
   import moment from 'moment/moment'
   import { onMounted, reactive, ref } from 'vue'
-  import { Avatar, Card, Image, Button, InputNumber, Popconfirm, Checkbox } from 'ant-design-vue'
+  import { Avatar, Card, Image, Button, InputNumber, Popconfirm, Checkbox, Pagination  } from 'ant-design-vue'
   import { useRouter } from 'vue-router'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { tableColumns, tableFormSchema } from './data'
@@ -76,6 +57,7 @@
   import { getInvitationList, allocateCluing } from '/@/api/clue'
   import Timeline from '../../components/Timeline.vue'
   import Profile from '../../components/Profile.vue'
+  import MemberModal from '../../components/MemberModal.vue'
   import { pageOrganizationMember } from '/@/api/staff/staff'
   import { educationList, maritalList, followStageList } from '/@/enums/customerEnum'
 
@@ -95,12 +77,17 @@
   })
 
   const memberList = ref<any[]>([]);
-
+  const total = ref<any>(0)
   onMounted(async () => {
-    const result = await pageOrganizationMember({})
-    memberList.value = result.items
+    onFetMemberList(1)
   })
 
+  async function onFetMemberList(page = 1, pageSize = 10) {
+    const result = await pageOrganizationMember({pageNum: page, pageSize})
+    memberList.value = result.items
+    total.value = result.total
+  }
+
   const [registerTable, { reload, setPagination, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
     bordered: false,
     useSearchForm: true,
@@ -153,37 +140,11 @@
   }
 
   const [registerModal, { openModal, closeModal }] = useModal()
-  function handleAdd(excel) {
-    openModal(true, {ifUpdate: excel,})
+  function handleModal(record) {
+    openModal(true, {record})
   }
   // 操作成功
-  function handleSuccess() {
-    closeModal()
-    reload()
-  }
-  const { createMessage } = useMessage()
-  const router = useRouter()
-  function toDetail(record: any) {
-    const { id } = record
-    router.push({
-      query: { id },
-      path: '/invite/inviteInfo',
-    })
-  }
-  const datingClueIdList = ref<string[]>([]);
-  function onChange(selectedRowKeys) {
-    datingClueIdList.value = selectedRowKeys
-  }
-  function onCheckChange(e, item){
-    if(e.target.checked){
-      verifier.value = item.userId
-    }
-  }
-  async function allocateList(id = null){
-    if(!verifier.value){
-      createMessage.warning('请选择分配人')
-      return
-    }
+  async function handleSuccess({id, rows}) {
     var datingClueIdList: string[] = []
     if(id){
       datingClueIdList = [id]
@@ -191,13 +152,24 @@
       datingClueIdList = getSelectRowKeys()
     }
     try {
-      await allocateCluing({verifier: verifier.value, datingClueIdList})
+      await allocateCluing({verifier: rows[0].userId, datingClueIdList})
       createMessage.success(`分配成功`)
       clearSelectedRowKeys()
     } finally {
+      closeModal()
       reload()
     }
   }
+  const { createMessage } = useMessage()
+  const router = useRouter()
+  function toDetail(record: any) {
+    const { id } = record
+    router.push({
+      query: { id },
+      path: '/invite/inviteInfo',
+    })
+  }
+  const datingClueIdList = ref<string[]>([]);
 </script>
 <style scoped lang="less">
 .single-line {